:root{
  --header-h:64px;
  --container:1200px;
  --bg-dark:#2b2b2f;
  --text-light:#f5f7f6;
  --accent:#0b6b2c;
  --glass: rgba(255,255,255,0.04);
}

/* sicherstellen, dass Header fixed und Größe bekannt */
.site-header{
  position:fixed;
  top:0;
  left:0;
  right:0;
  height:var(--header-h);
  z-index:9999;
  background:var(--bg-dark);
  color:var(--text-light);
  box-shadow:0 6px 20px rgba(0,0,0,0.35);
  backdrop-filter: blur(4px);
}

/* Platz unter fixiertem Header für Inhalte (falls benötigt) */
body{ margin:0; padding-top:var(--header-h); font-family:system-ui,Segoe UI,Roboto,Arial }

/* HERO: füllt immer das komplette Viewport (inkl. responsive) */
.hero{
  min-height:100vh;                /* gesamte Höhe des Viewports */
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(180deg,#f6fff9 0%, #e9fff0 100%);
  color:#073a1b;
  box-sizing:border-box;
  position:relative;
  padding:28px 20px;               /* Innenabstand für kleine Bildschirme */
}

/* Innerer Container für Layout */
.hero-inner{
  max-width:var(--container);
  width:100%;
  display:flex;
  gap:28px;
  align-items:center;
  justify-content:space-between;
}

/* Textseite */
.hero-copy{ flex:1; min-width:260px }
.hero h1{
  font-size:clamp(28px,5vw,56px);
  margin:0 0 12px;
  color:#052b17;
  line-height:1.02;
}
.lead{ font-size:1.05rem; color:#2e4b3a; margin-bottom:18px; }

/* CTA Buttons */
.btn{ display:inline-block; text-decoration:none; padding:10px 16px; border-radius:10px; font-weight:700; margin-right:10px }
.btn.primary{ background:var(--accent); color:white }
.btn.ghost{ background:transparent; border:2px solid rgba(11,107,44,0.12); color:var(--accent) }

/* Visual / SVG */
.hero-visual{ width:380px; flex-shrink:0; display:block }
.illustration{ width:100%; height:auto; border-radius:14px; box-shadow:0 12px 30px rgba(10,60,25,0.06) }

/* Responsive: auf kleineren Bildschirmen Stacked Layout */
@media (max-width:1100px){
  .hero-inner{ flex-direction:column-reverse; text-align:center; gap:20px }
  .hero-visual{ width:320px }
}
@media (max-width:600px){
  .hero{ padding-top:18px; padding-bottom:30px }
  .hero h1{ font-size:clamp(24px,7vw,36px) }
  .hero-visual{ width:260px }
  .hero-inner{ padding-top:8px }
}

/* optional: sichere Kontrast- und Fokusstile */
a:focus, button:focus{ outline:3px solid rgba(160,255,200,0.08); outline-offset:3px }

/* --- Header: zurückgesetzt auf vorheriges Design --- */
:root{
  --header-h:64px;
  --container:1200px;
  --bg-dark:#2b2b2f;
  --text-light:#f5f7f6;
  --accent:#0b6b2c;
  --glass: rgba(255,255,255,0.04);
}

.site-header{
  position:fixed;
  top:0;
  left:0;
  right:0;
  height:var(--header-h);
  z-index:9999;
  background:var(--bg-dark);
  color:var(--text-light);
  box-shadow:0 6px 20px rgba(0,0,0,0.35);
  backdrop-filter: blur(4px);
}

/* Platz unter fixiertem Header */
body{ margin:0; padding-top:var(--header-h); font-family:system-ui,Segoe UI,Roboto,Arial }

/* Innerer Container: Logo + Navigation in einer Reihe */
.header-inner{
  max-width:var(--container);
  margin:0 auto;
  padding:10px 20px;
  display:flex;
  align-items:center;
  gap:16px;
  justify-content:space-between;
}

/* Logo */
.logo img{
  height:44px;
  display:block;
  -webkit-user-drag: none;
}

/* Navigation - in einer Reihe */
.main-nav{ flex:1; margin-left:24px; }
.nav-list{
  list-style:none;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:18px;
  margin:0;
  padding:0;
  white-space:nowrap; /* verhindert Umbruch */
  overflow:visible;
}
.nav-list li a{
  color:var(--text-light);
  text-decoration:none;
  padding:8px 10px;
  border-radius:8px;
  font-weight:600;
  transition:background .18s ease, transform .12s ease;
}
.nav-list li a:hover,
.nav-list li a:focus{
  background:var(--glass);
  transform:translateY(-1px);
}

/* Nav-Toggle sichtbar & klickbar */
.nav-toggle{
  display:none;              /* bleibt hidden auf großen Bildschirmen */
  background:transparent;
  border:0;
  padding:6px;
  border-radius:10px;
  cursor:pointer;
  align-items:center;
  justify-content:center;
  width:44px;
  height:44px;
}

/* Mobile: Button anzeigen */
@media (max-width:900px){
  .nav-toggle{
    display:flex !important;       /* zwingt Sichtbarkeit auf kleinen Viewports */
    z-index:10070;
    color:var(--text-light);
    -webkit-tap-highlight-color: rgba(0,0,0,0);
  }
}

/* Icon-Farben sicherstellen (falls SVG-Fill überschrieben wird) */
.nav-toggle svg rect, .nav-toggle svg path {
  fill: #fff !important;
  stroke: #fff !important;
}

/* Wenn Menü offen: X oben rechts korrekt positioniert */
.header-open .nav-toggle{
  position:fixed;
  top:14px;
  right:14px;
  background:transparent;
  display:flex !important;
  z-index:10060;
}

/* Mobile / kleine Bildschirme: Navigation ausblenden, Burger zeigen */
@media (max-width:900px){
  .nav-list{ display:none }            /* Menü ausblenden auf kleinen Bildschirmen */
  .nav-toggle{ display:block }         /* Burger anzeigen auf kleinen Bildschirmen */

  /* wenn geöffnet (JS setzt .header-open) -> Dropdown */
  .header-open .nav-list{
    display:flex !important;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:22px;

    /* Fullscreen */
    position:fixed;
    top:0;
    right:0;
    bottom:0;
    left:0;
    width:100vw;
    height:100vh;
    max-width:none;
    margin:0;
    padding:80px 20px 40px;
    box-sizing:border-box;

    background:rgba(10,11,12,0.96);
    z-index:10050;
    overflow-y:auto;
  }
  /* Sicherstellen, dass keine Breitenbegrenzung greift */
  .header-open .nav-list, .header-open .nav-list li {
    min-width:0;
  }

  /* Große, gut klickbare Links im Vollbild-Menü */
  .header-open .nav-list li a{
    color:#fff;
    font-size:1.6rem;
    padding:12px 18px;
    border-radius:10px;
    background:transparent;
    box-shadow:none;
  }
  /* Close-X sichtbar über dem Overlay */
  .header-open .nav-toggle{
    position:fixed;
    top:18px;
    right:18px;
    display:block;
    z-index:10060;
    background:transparent;
  }
}

/* Auf Desktop soll das Overlay nicht stören (nur mobil relevant, aber funktioniert überall) */
@media (min-width:901px){
  .header-open .nav-list{
    /* falls Desktop geöffnet wird, bleibe bei der vorherigen compact-Darstellung */
    position:static;
    inset:auto;
    background:transparent;
    flex-direction:row;
    gap:18px;
    padding:0;
  }
  .header-open .nav-toggle{ position:static; }
}

/* Sicherstellen, dass keine Breitenbegrenzung greift */
.header-open .nav-list, .header-open .nav-list li {
  min-width:0;
}

/* Body scroll sperren while menu open (falls JS nicht greift) */
body.menu-open { overflow: hidden; touch-action: none; }
/* Falls Fallback-Logo verwendet wird: schwarzer Hintergrund */
.exec-avatar.fallback {
  background: #000 !important;
}
.exec-avatar.fallback img {
  background: #000;
  /* falls transparentes PNG, sorgt das für sichtbaren Hintergrund */
}