﻿:root {
  --green-900:#1f5f2e; /* Headlines */
  --green-700:#2e7d32; /* Buttons, Links */
  --green-300:#a5d6a7; /* Accents */
  --green-50:#f3faf4;  /* Background tint */
  --text:#243224;
  --muted:#5b6a5b;
  --radius:18px;
  --shadow:0 10px 30px rgba(0,0,0,.08);
}
*{box-sizing:border-box}
body{margin:0;font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial,sans-serif;color:var(--text);background:#fff}
a{color:/* var(--green-700) */ green;text-decoration:none}
a:hover{text-decoration:underline}

h3 a{color:black;text-decoration:none}
h3 a:hover{text-decoration:underline}

/* Header */
.site-header{position:sticky;top:0;background:#fff;border-bottom:1px solid #e8eee8;z-index:50}
.wrap{max-width:1150px;margin-inline:auto;padding:18px 20px}
.brand{display:flex;align-items:center;gap:14px}
.brand-logo{width:122px;height:90px;background:url("../img_start/nhlogogmbh.png");background-repeat:no-repeat;
	background-position: center center;background-size: cover; /* box-shadow:var(--shadow) */}
.brand-title{font-size:22px;font-weight:700;color:/*var(--green-900)*/ green; text-shadow:var(--shadow)}

/* Hero */
.hero{background:var(--green-50)}
.hero-inner{display:grid;grid-template-columns:1.3fr .9fr;gap:28px;align-items:center;padding:52px 20px}
.hero h1{margin:0 0 10px;font-size:42px;line-height:1.1;color:/*var(--green-900)*/ green;}
.hero p{margin:0 0 22px;color:var(--muted)}
.cta{display:inline-block;background:/* var(--green-700) */ green;color:#fff;padding:12px 18px;border-radius:12px;box-shadow:var(--shadow)}
.hero-card{background:#fff;border-radius:var(--radius);padding:18px;box-shadow:var(--shadow)}
.hero-illus{height:160px;border-radius:14px;background:url("../img_start/referenzen_dach.jpg");background-position: center center;background-size: cover;display:flex;align-items:center;justify-content:center;color:#256029;font-weight:700}
.hero-illus span {color: #fff; box-shadow:var(--shadow);}

/* Kategorien */
.section{padding:56px 20px}
.section h2{margin:0 0 24px;font-size:32px;color:/* var(--green-900) */ green}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
@media (max-width:980px){.grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.hero-inner{grid-template-columns:1fr}.grid{grid-template-columns:1fr}}

.card{background:#fff;border-radius:var(--radius);padding:18px;box-shadow:var(--shadow);display:flex;flex-direction:column;align-items:center;gap:14px;height:100%}
.thumb-link{display:block;width:100%;aspect-ratio:16/11;border-radius:14px;overflow:hidden}
/* Placeholder for icons/images – replace background-image with your assets */
.thumb{width:100%;height:100%;background-size:cover;background-position:center}
.thumb--dach{background-image:url("../img_start/thumb_dachbegruenung.jpg")}
.thumb--folie{background-image:url("../img_start/thumb_folienverlegung.jpg")}
.thumb--pool{background-image:url("../img_start/thumb_naturpool_schwimmteich.jpg")}
.thumb--garten{background-image:url("../img_start/thumb_gartengestaltung.jpg")}
.thumb--reinigung{background-image:url("../img_start/thumb_folienreinigung.jpg")}

.card h3{margin:0;text-align:center;font-size:18px}
.text-link{margin-top:auto}

/* Intro Text */
.prose{max-width:70ch}
.prose p{margin:0 0 14px}

/* Footer */
footer{border-top:1px solid #e8eee8;color:#5f6d5f}
footer .wrap{padding-block:28px}

#header_register_pagechooser {
    position: fixed;
    top: 0;
    right: 10px;
    z-index: 21;
}

@media (min-width: 1300px){
    #header_register_pagechooser {
        right: auto;
        left: 10px;
    }
}

#dropdown-1 a
{
    font-size: 10pt;
}