@charset "utf-8";

:root {
  --header-h: 72px;                /* Höhe der fixen Leiste */
  --wrap: min(1100px, 96%);        /* Innenbreite */

  /* Verlauffarben – sanftes Grün mit Tiefe */
  --menu-blue1: #D7E472;           /* heller Grünton oben */
  --menu-blue2: #ADBC3B;           /* Hauptton unten */

  /* Text- und Iconfarben */
  --brand-text: #000000;
  --burger-lines: #000000;         
  --burger-lines-open: #000000;    

  --focus-ring: #ffbf47;
  --shadow-1: 0 1px 2px rgba(0,0,0,.15);
  --shadow-2: 0 2px 10px rgba(0,0,0,.25);
}

/* ===========================
   Topbar (fix oben)
=========================== */
.topbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--header-h);
  background: linear-gradient(180deg, var(--menu-blue1) 0%, var(--menu-blue2) 100%);
  box-shadow: var(--shadow-1);
  z-index: 1000;
}

.topbar__inner {
  width: var(--wrap);
  height: 100%;
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  font-size: 1.1rem;
}

/* Brand-Text */
.brand{
  font-weight: 700;
  font-size: 1.7rem;              /* Desktop */
  color: var(--brand-text);
  text-decoration: none;
}

/* ===========================
   Toggle-Checkbox (unsichtbar)
=========================== */
#menu-toggle{
  position: absolute;
  left: -9999px;
}

/* ===========================
   Hamburger → X (fetter & a11y)
=========================== */
.burger{
  position: absolute;
  top: 50%;
  right: 16px;                     /* immer sichtbar am Rand */
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  cursor: pointer;
  border-radius: 10px;
  transition: background .25s ease, transform .2s ease;
  z-index: 1001;
}
.burger:hover{ background: #AFBE3D; }
.burger:focus-visible{ outline: 3px solid var(--focus-ring); outline-offset: 2px; }

/* Drei Linien (fetter) */
.burger .lines{
  position: relative;
  display: block;
  width: 28px; height: 3px;
  background: var(--burger-lines);
  border-radius: 2px;
  transition: transform .3s ease, background .3s ease, opacity .2s ease;
}
.burger .lines::before,
.burger .lines::after{
  content: "";
  position: absolute; left: 0;
  width: 28px; height: 3px;
  background: var(--burger-lines);
  border-radius: 2px;
  transition: transform .3s ease, background .3s ease, opacity .2s ease, top .3s ease;
}
.burger .lines::before{ top: -8px; }
.burger .lines::after{  top:  8px; }

/* Drawer sichtbar (Checkbox steuert) */
#menu-toggle:checked + label.burger + nav.drawer { 
  display: block; 
}
#menu-toggle:checked ~ .drawer { 
  display: block; 
}

/* Hamburger -> X im offenen Zustand */
#menu-toggle:checked + label.burger .lines{
  background: transparent;
}
#menu-toggle:checked + label.burger .lines::before,
#menu-toggle:checked + label.burger .lines::after{
  background: var(--burger-lines-open);
  top: 0;
}
#menu-toggle:checked + label.burger .lines::before{
  transform: rotate(45deg);
}
#menu-toggle:checked + label.burger .lines::after{
  transform: rotate(-45deg);
}

/* ===========================
   Drawer (ausklappendes Menü)
=========================== */
.drawer{
  position: fixed;
  top: var(--header-h);
  left: 0; right: 0;
  display: none;
  background: linear-gradient(180deg, var(--menu-blue1) 0%, var(--menu-blue2) 100%);
  border-top: 1px solid rgba(255,255,255,.15);
  box-shadow: var(--shadow-2);
  z-index: 900;
  max-height: 80vh;
  overflow-y: auto;
}

/* ===========================
   Navigation / Links
=========================== */
.navlist{
  list-style: none;
  margin: 0;
  padding: 20px 0;
  width: var(--wrap);
  margin-inline: auto;
  font-size: 1.35rem;
}
.navlist li{ margin-bottom: 8px; }

/* Standardlinks */
.navlist a{
  display: block;
  padding: 10px 16px;
  border-radius: 10px;
  color: #222222;
  text-shadow: 0 1px 2px rgba(0,0,0,.3);
  font-weight: 500;
  transition: background .15s ease;
}
.navlist a:hover{ background: rgba(255,255,255,.16); }
.navlist a:focus-visible{
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
  background: rgba(255,255,255,.16);
}

/* Unterpunkte in Dropdowns */
.navlist ul li a{
  font-size: 1.2rem;
  color: #222222;
  padding-left: 3rem;
}

/* Dropdowns mit <details> */
details{
  background: transparent;
  border-radius: 10px;
}
details summary{
  cursor: pointer;
  list-style: none;
  padding: 10px 16px;
  border-radius: 10px;
  color: #ffffff;
  text-shadow: 0 1px 2px rgba(0,0,0,.3);
}
details summary::-webkit-details-marker{ display: none; }
details ul{
  list-style: none;
  margin: 6px 0 0 0;
  padding: 0;
}
details li a{ padding-left: 34px; }
details li a:hover{ background: rgba(255,255,255,.22); }

/* ===========================
   Scrollbar
=========================== */
.drawer::-webkit-scrollbar{ width: 10px; }
.drawer::-webkit-scrollbar-thumb{
  background: rgba(255,255,255,.35);
  border-radius: 8px;
}
.drawer::-webkit-scrollbar-track{ background: transparent; }

/* ===========================
   Responsive & Motion
=========================== */
@media (max-width: 768px){
  .brand{ font-size: 1.5rem; }
}
@media (prefers-reduced-motion: reduce){
  .burger, .navlist a{ transition: none; }
}

/* ===========================
   MOBILE / TABLET: Kontrast + Untermenüs
   (bis 999px) – wie dein Screenshot
=========================== */
@media (max-width: 999px){

  .drawer{
    background: #F2F6E6;  /* helles Grün */
  }

  .drawer .navlist a,
  .drawer details > summary{
    color: #1A1A1A !important;
    text-shadow: none !important;
    min-height: 44px;
    line-height: 1.2;
  }

  .drawer .navlist a:hover,
  .drawer .navlist a:focus-visible,
  .drawer details > summary:hover,
  .drawer details > summary:focus-visible{
    background: rgba(0,0,0,.06) !important;
    outline: 3px solid #ffbf47;
    outline-offset: 2px;
    border-radius: 10px;
  }

  /* Pfeil bei Untermenüs (mobil klickbasiert, nutzt [open]) */
  .drawer details > summary{
    position: relative;
    padding-right: 2rem;
  }
  .drawer details > summary::after{
    content: "▾";
    position: absolute;
    right: 16px; top: 50%;
    transform: translateY(-50%) rotate(0deg);
    opacity: .85;
    transition: transform .2s ease;
    font-size: 1rem;
    line-height: 1;
    color: currentColor;
  }
  .drawer details[open] > summary::after{
    transform: translateY(-50%) rotate(180deg);
  }

  .drawer details > ul{
    background: #FFFFFF;
    border-radius: 10px;
    margin: 8px 0 10px 0;
    padding: 6px 0;
    box-shadow: 0 8px 18px rgba(0,0,0,.08);
  }
  .drawer details > ul a{
    padding: 10px 16px 10px 20px;
  }
  .drawer details > ul a:hover,
  .drawer details > ul a:focus-visible{
    background: rgba(0,0,0,.05);
  }

  .drawer .navlist > li + li{
    border-top: 1px solid rgba(0,0,0,.08);
    margin-top: 6px;
    padding-top: 6px;
  }
}

/* ===========================
   DESKTOP (ab 1000px)
   – Dropdowns nur via Hover/Fokus
=========================== */
@media (min-width: 1000px){

  .topbar{ position: fixed; }

  /* Drawer wird zur horizontalen Topbar-Navigation */
  .topbar .drawer{
    position: absolute !important;
    top: 0; left: 0; right: 0;
    height: var(--header-h) !important;
    background: transparent !important;
    display: flex !important;
    align-items: center !important;
    box-shadow: none !important;
    border: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    z-index: 1100 !important;
  }

  .topbar .navlist{
    width: var(--wrap) !important;
    margin: 0 auto !important;
    padding: 0 !important;
    height: 100% !important;

    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 10px !important;

    list-style: none !important;
    flex-wrap: nowrap !important;
  }

  .topbar .navlist > li{
    flex: 0 0 auto !important;
    white-space: nowrap !important;
    position: relative !important;
    margin: 0 !important;
    font-size: 1.25rem;
  }

  .topbar .navlist > li > a,
  .topbar .navlist > li > details > summary{
    display: inline-flex !important;
    align-items: center !important;
    gap: .55rem !important;
    height: var(--header-h) !important;
    padding: 0 14px !important;
    border-radius: 10px !important;
    color: var(--brand-text) !important;
    background: transparent !important;
    text-decoration: none !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
    line-height: 1 !important;
    cursor: pointer !important;
    transition: background .15s ease !important;
    text-shadow: none !important;
    font-size: 1.25rem;
  }

  .topbar .navlist > li > a:hover,
  .topbar .navlist > li > details > summary:hover{
    background: rgba(255,255,255,.22) !important;
    outline: 3px solid #e0a61e;
  }

  .topbar .navlist > li > a:focus-visible,
  .topbar .navlist > li > details > summary:focus-visible{
    outline: 3px solid #ffbf47;
    outline-offset: 2px;
    border-radius: 10px;
    outline: 3px solid #e0a61e;
  }

  /* Pfeil neben dem Text */
  .topbar .navlist > li > details > summary::-webkit-details-marker{ 
    display:none !important; 
  }
  .topbar .navlist > li > details > summary::after{
    content: "▾";
    display: inline-block !important;
    margin-left: .35rem !important;
    font-size: .9em !important;
    line-height: 1 !important;
    opacity: .85 !important;
    transform: translateY(1px) !important;
    transition: transform .2s ease !important;
  }
  /* Pfeil dreht, solange Hover/Fokus im Details ist */
  .topbar .navlist > li > details:where(:hover, :focus-within) > summary::after{
    transform: rotate(180deg) translateY(0) !important;
  }

  /* Dropdown-Panels (Standard: zu) */
  .topbar .navlist > li > details > ul{
    display: none !important;
    position: absolute !important;
    top: calc(100% + 6px) !important;
    left: 0 !important;
    min-width: 260px !important;
    margin: 0 !important;
    padding: 10px !important;
    list-style: none !important;

    background: #fff !important;
    border: 1px solid rgba(0,0,0,.06) !important;
    border-radius: 12px !important;
    box-shadow: 0 14px 36px rgba(0,0,0,.18) !important;

    opacity: 0 !important;
    transform: translateY(6px) !important;
    transition: opacity .18s ease, transform .18s ease !important;
    z-index: 1200 !important;
  }

  /* „Hover-Brücke“ gegen Abriss */
  .topbar .navlist > li > details > ul::before{
    content:"";
    position:absolute;
    top:-10px; left:0; right:0;
    height:10px;
  }
  /* kleine Kerbe */
  .topbar .navlist > li > details > ul::after{
    content:"";
    position:absolute;
    top:-7px; left:18px;
    width:12px; height:12px;
    background:#fff;
    border-left:1px solid rgba(0,0,0,.06);
    border-top:1px solid rgba(0,0,0,.06);
    transform: rotate(45deg);
  }

  /* Auf Desktop: auf, solange Hover/Fokus im <details> */
  .topbar .navlist > li > details:where(:hover, :focus-within) > ul{
    display:block !important;
    opacity:1 !important;
    transform:none !important;
  }

  /* Einträge im Panel */
  .topbar .navlist > li > details li a{
    display:flex !important;
    align-items:center !important;
    gap:.55rem !important;
    padding: 10px 12px !important;
    border-radius: 10px !important;
    color:#1f2a1f !important;
    font-size:1.3rem !important;
    text-decoration:none !important;
    transition: background .12s ease !important;
    white-space:nowrap !important;
  }
  .topbar .navlist > li > details li a:hover{
    background: rgba(173,188,59,.12) !important;
  }

  /* Sub-Sub-Panel rechts andocken */
  .topbar .navlist > li > details > ul > li{ 
    position:relative !important; 
  }
  .topbar .navlist > li > details > ul > li > details > ul{
    top: -8px !important;
    left: calc(100% + 8px) !important;
  }
  .topbar .navlist > li > details > ul > li > details > ul::after{
    top: 14px !important;
    left: -6px !important;
    transform: rotate(225deg) !important;
  }

  /* Brand & Burger im Desktop ausblenden */
  .topbar .brand{ display: none !important; }
  .topbar #menu-toggle, 
  .topbar .burger{ display: none !important; }
}

/* Hero-Link */
.hero-link {
  display: block;
  text-decoration: none;
  color: inherit;
}
.hero-link:hover { 
  cursor: pointer; 
}