/* ==========================================================================
   Header: Navigation, Suche, Störer
   Desktop-Megamenü ab 1200px (#access), darunter Off-Canvas-Panel (#mobile-menu).
   Der Breakpoint ist in header.js (MOBILE_MQ) gespiegelt.
   ========================================================================== */


/* ---------- Desktop-Megamenü ---------- */

#access ul,
#access li {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Keine Lücken zwischen den Punkten: der Abstand liegt als Innenabstand in den Punkten,
   so wechselt der Hover beim Drüberfahren nahtlos von einem zum nächsten */
#prime_nav {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 -13.25px;
}

#prime_nav > li {
  display: flex;
  align-items: center;
  height: 73px;
  padding: 0 13.25px;
}

/* Hauptpunkt: Box bleibt beim Hover gleich groß, nur die Pille (::before) erscheint.
   Die Breite des fetten Hover-Texts ist über ::after reserviert, damit nichts springt. */
#prime_nav > li > a {
  position: relative;
  isolation: isolate;
  display: inline-grid;
  padding: 12px 18px;
  color: #004000;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-out);
}

#prime_nav > li > a::before {
  content: "";
  position: absolute;
  inset: 2px;
  z-index: -1;
  border-radius: 25px;
  transition: background-color var(--dur-fast) var(--ease-out);
}

#prime_nav > li > a > span,
#prime_nav > li > a::after {
  grid-area: 1 / 1;
  text-align: center;
}

#prime_nav > li > a::after {
  content: attr(data-label);
  height: 0;
  font-weight: bolder;
  visibility: hidden;
}

#prime_nav:not(.has-marker) > li:is(.is-open, :not(:has(> .sub-menu)):hover) > a,
#prime_nav > li > a:focus-visible {
  color: var(--honify-hellgruen-1);
  font-weight: bolder;
}

/* Ohne JavaScript: Pille je Punkt. Mit header.js übernimmt die gleitende .nav-marker */
#prime_nav:not(.has-marker) > li:is(.is-open, :not(:has(> .sub-menu)):hover) > a::before,
#prime_nav > li > a:focus-visible::before {
  background-color: var(--honify-hellgruen);
}

/* Gleitende Hover-Pille: Lage und Größe setzt header.js (--x, --y, --w, --h). Sie liegt über den Links;
   die helle Kopie der Beschriftungen darin wird gegenläufig verschoben und bleibt so deckungsgleich */
.nav-marker {
  --move: 420ms cubic-bezier(.25, .9, .25, 1);
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: var(--w, 0px);
  height: var(--h, 0px);
  overflow: hidden;
  border-radius: 25px;
  background-color: var(--honify-hellgruen);
  pointer-events: none;
  opacity: 0;
  translate: var(--x, 0px) var(--y, 0px);
  transition: translate var(--move), width var(--move), opacity var(--dur-base) var(--ease-out);
}

.nav-marker-labels {
  position: absolute;
  top: 0;
  left: 0;
  translate: calc(-1 * var(--x, 0px)) calc(-1 * var(--y, 0px));
  transition: translate var(--move);
}

.nav-marker-labels > span {
  position: absolute;
  display: grid;
  place-items: center;
  font-weight: bolder;
  color: var(--honify-hellgruen-1);
  white-space: nowrap;
}

.nav-marker.is-on {
  opacity: 1;
}

.nav-marker.no-move,
.nav-marker.no-move .nav-marker-labels {
  transition: opacity var(--dur-base) var(--ease-out);
}

/* Gemeinsame Dropdown-Fläche: ein Hintergrund für alle Hauptpunkte (wird von header.js eingefügt).
   Beim Wechsel zwischen Hauptpunkten bleibt sie stehen und passt nur ihre Höhe an.
   Die Höhe (--mega-h) setzt header.js. */
#prime_nav > li > .sub-menu,
.mega-backdrop {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  width: 85%;
  max-width: 1200px;
  margin: 0 auto;
  visibility: hidden;
  opacity: 0;
  transform: translateY(28px);
  /* Schließen: zügig weg (die Gnadenfrist für diagonale Mausbewegungen hält header.js) */
  transition: opacity var(--dur-fast) var(--ease-in), transform var(--dur-fast) var(--ease-in),
    visibility 0s linear var(--dur-fast);
}

.mega-backdrop {
  height: var(--mega-h);
  background-color: var(--honify-weiss);
  border-radius: 45px;
  box-shadow: var(--shadow-4);
  z-index: 1;
  pointer-events: none;
}

#access.mega-open .mega-backdrop {
  visibility: visible;
  opacity: 1;
  transform: translateY(20px);
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-slow) var(--ease-out), visibility 0s,
    height var(--dur-slow) var(--ease-out);
}

/* Inhalte (Ebene 2) liegen transparent auf der Fläche */
#prime_nav > li > .sub-menu {
  display: flex;
  flex-wrap: wrap;
  row-gap: 20px;
  column-gap: 20px;
  padding: 40px 30px;
  z-index: 2;
  pointer-events: none;
}

/* Brücke über die Lücke zwischen Leiste und Fläche, damit der Hover hält */
#prime_nav > li > .sub-menu::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: 40px;
}

#prime_nav > li.is-open > .sub-menu {
  z-index: 3;  /* das öffnende Menü liegt über einem noch ausblendenden */
  visibility: visible;
  opacity: 1;
  transform: translateY(20px);
  pointer-events: auto;
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-slow) var(--ease-out), visibility 0s;
}

/* Wechsel: alte Inhalte blenden weich aus, die Fläche gleitet auf die neue Höhe (ease-out:
   nach gut 150ms fast am Ziel), dann gleiten die neuen Inhalte herein.
   Nur Deckkraft und Verschiebung – das rechnet die Grafikkarte, ohne neu zu zeichnen. */
#access.mega-open #prime_nav > li > .sub-menu,
#access.mega-open .mega-backdrop {
  will-change: opacity, transform;
}

#access.is-switching #prime_nav > li > .sub-menu {
  transform: translateY(20px);
  transition: opacity 160ms var(--ease-out), visibility 0s linear 160ms;
}

#access.is-switching #prime_nav > li.is-open > .sub-menu {
  transition: visibility 0s;
  animation: mega-content-in 360ms var(--ease-out) 150ms both;
}

@keyframes mega-content-in {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: translateY(20px); }
}

@media (prefers-reduced-motion: reduce) {
  #prime_nav > li > .sub-menu,
  .mega-backdrop,
  #access.mega-open .mega-backdrop {
    transform: translateY(20px);
  }

  #access.mega-open .mega-backdrop {
    transition: opacity var(--dur-base) linear, visibility 0s;
  }

  #access.is-switching #prime_nav > li.is-open > .sub-menu {
    animation: none;
    transition: opacity var(--dur-base) linear 120ms, visibility 0s;
  }
}

/* Spalten-Karten (Ebene 2) */
#prime_nav > li > .sub-menu > .menu-item {
  width: 340px;
  padding: 10px 78px 10px 18px;
  border-radius: 30px;
  background-color: color-mix(in srgb, var(--honify-blassgruen-0) 45%, transparent);
  overflow-wrap: break-word;
  transition: background-color var(--dur-base) var(--ease-out);
}

#prime_nav > li > .sub-menu > .menu-item:hover {
  background-color: var(--honify-blassgruen-0);
}

#prime_nav > li > .sub-menu > .menu-item-has-children {
  padding-bottom: 0;
}

#prime_nav > li > .sub-menu > .menu-item > a {
  display: inline-block;
  padding: 4px 10px;
  font-size: 1.1em;
  font-weight: bold;
  color: var(--honify-dunkelgruen);
}

/* Unterpunkte (Ebene 3) */
/* Unterpunkte sind breiter als der Kartentext (280px), die Karte ist dafür rechts gepolstert */
#prime_nav .sub-menu .sub-menu {
  width: 280px;
  margin-left: 5%;
}

#prime_nav .sub-menu .sub-menu a {
  display: block;
  padding: 0 0 6px 12px;
  font-size: 0.95em;
  color: var(--honify-dunkelgruen);
}

/* Unterpunkte: feine Unterstreichung blendet beim Hover ein */
#prime_nav .sub-menu .sub-menu a > span {
  text-decoration: underline 1px transparent;
  text-underline-offset: 4px;
  transition: text-decoration-color var(--dur-fast) var(--ease-out);
}

#prime_nav .sub-menu .sub-menu a:hover > span {
  text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
}

/* Blog-Vorschauen unter den Spalten */
#prime_nav .blogpost-wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 18px;
  margin-top: 30px;
}

#prime_nav .menu-item-blogpost {
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 18px;
  border-radius: 30px;
  background-color: var(--honify-blassgruen-0);
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}

#prime_nav .menu-item-blogpost:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-2);
}

#prime_nav .menu-item-blogpost > a {
  display: flex;
  align-items: flex-start;
}

#prime_nav .menu-item-blogpost .post-thumbnail {
  flex-shrink: 0;
  padding-right: 20px;
}

#prime_nav .menu-item-blogpost .post-thumbnail img {
  width: 100px;
  height: 100px;
  object-fit: cover;
  border-radius: 20px;
}

#prime_nav .menu-item-blogpost .post-meta {
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: calc(90% - 96px);
}

#prime_nav .menu-item-blogpost .post-title {
  margin-bottom: 6px;
  font-size: 1rem;
  line-height: 1.2;
  color: #006838;
}

#prime_nav .menu-item-blogpost .post-excerpt {
  display: -webkit-box;
  overflow: hidden;
  font-size: 0.9rem;
  line-height: 1.33;
  color: var(--honify-dunkelgrau);
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
}

#prime_nav .blogpost-more {
  margin-top: 6px;
}

#prime_nav .blogpost-more a {
  display: inline-block;
  padding: 12px;
  border-radius: 30px;
  background-color: var(--honify-hellgruen);
  color: var(--honify-hellgruen-1);
  font-weight: bold;
  transition: transform var(--dur-base) var(--ease-out);
}

#prime_nav .blogpost-more a:hover {
  transform: translateY(-3px);
}


/* ---------- Suche ---------- */

.header-search {
  grid-column: 3;
  justify-self: end;
  align-content: center;
  margin-right: 30px;
}

.header-search .search-toggle {
  padding: 0;
  border: none;
  background: none;
  font-size: 1.8rem;
  color: var(--honify-dunkelgruen);
  cursor: pointer;
}

.header-search .search-toggle:hover {
  background: none;
  color: var(--honify-dunkelgruen);
}

/* Gezeichnete Lupe: 28px groß, Strich 1,9 von 24 ergibt dieselben 2,2px wie Menü-Icon und Schließen-Kreuz.
   Knopf ohne Zeilenhöhe, damit die Lupe genau mittig in der Leiste sitzt */
.header-search .search-toggle {
  display: block;
  line-height: 0;
}

.search-toggle-icon {
  display: block;
  width: 28px;
  height: 28px;
}

/* Suchfeld, Trefferfläche und Ergebnisseite: assets/css/suche.css */

@media (max-width: 1535px) {
  .header-search {
    justify-self: center;
    margin-right: -20px;
  }
}


/* ---------- Mobil: Leiste & Menü-Button ---------- */

#mobile-menu,
#nav-toggle,
.menu-scrim {
  display: none;
}

/* ---------- Header-Glas ----------
   Die Unschärfe liegt auf einer doppelt so hohen Ebene, die per Maske auf die Pillenform
   zugeschnitten ist: so fließt auch Inhalt knapp unter dem Header schon ins Glas ein
   (nach joshwcomeau.com/css/backdrop-filter). Sättigung gegen den matten Grauschleier,
   heller Lichtrand oben als Glaskante. Ohne backdrop-filter bleibt der Header fast deckend. */
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  #masthead {
    background: none;
  }

  #masthead::before {
    content: "";
    position: absolute;
    top: -1px;
    left: -1px;
    z-index: -1;
    width: calc(100% + 2px);
    height: calc(200% + 2px);
    background-color: rgba(234, 252, 239, 0.7);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
    -webkit-backdrop-filter: blur(16px) saturate(170%);
    backdrop-filter: blur(16px) saturate(170%);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='100%25' height='50%25' rx='45'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='100%25' height='50%25' rx='45'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
    pointer-events: none;
    transition: background-color var(--dur-slow) var(--ease-out);
  }
}

@media (max-width: 1199px) {
  #masthead #access {
    display: none;
  }

  #site-header-main-inside {
    grid-template-columns: auto 66pt 66pt;
  }

  .cryout #branding {
    margin: 0;
  }

  .cryout #site-title a span {
    padding-right: 0;
  }

  /* Menü-Button: gezeichnetes Icon (Maße wie das bisherige Icon-Font-Zeichen),
     die äußeren Balken drehen sich zum ×, der mittlere blendet aus */
  #nav-toggle {
    display: grid;
    place-items: center;
    grid-column: 2;
    justify-self: end;
    align-self: center;
    width: 48px;
    height: 48px;
    margin-right: -35px;  /* Icon-Mitte deckungsgleich mit dem bisherigen Icon-Font-Zeichen */
    padding: 0;
    border: none;
    border-radius: 50%;
    background: none;
    color: var(--honify-dunkelgruen);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background-color var(--dur-fast) var(--ease-out);
  }

  #nav-toggle:hover {
    background: none;
    color: var(--honify-dunkelgruen);
    text-shadow: none;
  }

  #nav-toggle:active {
    background-color: color-mix(in srgb, var(--honify-dunkelgruen) 8%, transparent);
  }

  /* Linien so stark wie die Lupe (2,2px), Breite wie ihr Kreis samt Stiel */
  .nav-toggle-icon {
    position: relative;
    width: 22px;
    height: 18.2px;
  }

  .nav-toggle-icon::before,
  .nav-toggle-icon::after,
  .nav-toggle-icon > span {
    content: "";
    position: absolute;
    left: 0;
    width: 100%;
    height: 2.2px;
    border-radius: 2px;
    background-color: currentColor;
    transition: transform var(--dur-slow) var(--ease-out), opacity var(--dur-base) var(--ease-out);
  }

  .nav-toggle-icon::before { top: 0; }
  .nav-toggle-icon > span { top: 8px; }
  .nav-toggle-icon::after { top: 16px; }

  #nav-toggle[aria-expanded="true"] .nav-toggle-icon::before {
    transform: translateY(8px) rotate(45deg);
  }

  #nav-toggle[aria-expanded="true"] .nav-toggle-icon::after {
    transform: translateY(-8px) rotate(-45deg);
  }

  #nav-toggle[aria-expanded="true"] .nav-toggle-icon > span {
    opacity: 0;
    transform: scaleX(0);
  }


  /* ---------- Mobil: Abdunkelung hinter dem Panel ---------- */

  .menu-scrim {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 99;  /* unter #masthead (100), über dem Inhalt */
    background-color: rgba(15, 45, 25, 0.2);
    /* leichte Unschärfe: zwischen den Menü-Karten scheint die Seite nur ruhig durch */
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--dur-base) var(--ease-in), visibility 0s linear var(--dur-base);
  }

  html.mobile-menu-open .menu-scrim {
    opacity: 1;
    visibility: visible;
    transition: opacity var(--dur-slow) var(--ease-out), visibility 0s;
  }

  /* Header bleibt über der Abdunkelung hell (sonst scheint sie durch das Glas) */
  html.mobile-menu-open #masthead,
  html.mobile-menu-open #masthead::before {
    background-color: rgba(234, 252, 239, 0.97);
  }

  /* Kontakt-Pille tritt zurück, solange das Menü offen ist */
  html.mobile-menu-open .contact-button {
    opacity: 0;
    pointer-events: none;
  }


  /* ---------- Mobil: Panel ---------- */

  #mobile-menu {
    display: block;
    position: absolute;
    top: 100px;
    /* Karten bündig mit dem Header; die 6px links/rechts sind Platz für den Kartenschatten */
    left: -6px;
    z-index: 999;
    width: calc(100% + 12px);
    /* volle Höhe bis zum unteren Rand, auch wenn der Störer den Header nach unten schiebt */
    height: calc(100vh - 110px - var(--stoerer-h, 0px));
    height: calc(100dvh - 110px - var(--stoerer-h, 0px));
    padding: 20px 6px max(40px, env(safe-area-inset-bottom));
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    /* Kein eigener Hintergrund: die weißen Karten schweben direkt über der Abdunkelung */
    background: none;
    visibility: hidden;
    transform: translateX(calc(100% + 6vw));
    transition: transform var(--dur-base) var(--ease-in), visibility 0s linear var(--dur-base);
  }

  #mobile-menu.is-open {
    visibility: visible;
    transform: none;
    transition: transform var(--dur-slow) var(--ease-out), visibility 0s;
  }

  /* Seite hinter dem offenen Menü sperren; der Scrollleisten-Platz bleibt reserviert, sonst springt alles */
  html.mobile-menu-open {
    overflow: hidden;
    scrollbar-gutter: stable;
  }

  #mobile-menu ul,
  #mobile-menu li {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  #mobile-menu li {
    position: relative;
    line-height: 1.4;
  }

  #mobile-menu a {
    display: block;
    font-family: Avenir, sans-serif;
    font-size: 1em;
    font-weight: 400;
    line-height: 1.4;
    color: var(--honify-dunkelgruen);
    -webkit-tap-highlight-color: transparent;
  }

  #mobile-menu a > span {
    display: inline-block;
  }

  #mobile-menu a:not([href]) {
    cursor: pointer;
  }

  /* Hauptkategorien als Karten: Label und Schalter in einer Zeile, beide mittig */
  #mobile-nav {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  #mobile-nav > li {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    padding: 8px 8px 8px 20px;
    border-radius: 22px;
    background-color: var(--honify-weiss);
    box-shadow: var(--shadow-1);
    cursor: pointer;
    transition: background-color var(--dur-fast) var(--ease-out);
  }

  #mobile-nav > li > a {
    padding: 8px 0;
    font-size: 1.15em;
    font-weight: 700;
    line-height: 1.2;
  }

  #mobile-nav > li > .sub-menu {
    grid-column: 1 / -1;
  }

  /* Antippen der Karte quittieren */
  #mobile-nav > li:has(> a:active, > .dropdown-toggle:active) {
    background-color: color-mix(in srgb, var(--honify-weiss), var(--honify-dunkelgruen) 5%);
  }

  /* +/×-Schalter: gezeichnet, Tippfläche 44px */
  #mobile-menu .dropdown-toggle {
    position: relative;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: none;
    color: var(--honify-dunkelgruen);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }

  #mobile-menu .dropdown-toggle:hover {
    background: none;
    text-shadow: none;
  }

  #mobile-menu .dropdown-toggle::before,
  #mobile-menu .dropdown-toggle::after {
    content: "";
    position: absolute;
    width: 14px;
    height: 1.5px;
    border-radius: 1px;
    background-color: currentColor;
    transition: transform var(--dur-base) var(--ease-out);
  }

  #mobile-menu .dropdown-toggle::after {
    transform: rotate(90deg);
  }

  #mobile-menu .is-expanded > .dropdown-toggle::before {
    transform: rotate(45deg);
  }

  #mobile-menu .is-expanded > .dropdown-toggle::after {
    transform: rotate(135deg);
  }

  /* Akkordeon: Höhe animiert header.js, die Punkte erscheinen gestaffelt */
  #mobile-menu .sub-menu {
    display: none;
    overflow: hidden;
  }

  #mobile-menu .is-expanded > .sub-menu {
    display: block;
    padding-top: 10px;
  }

  #mobile-menu .sub-menu.is-opening {
    transition: height var(--dur-slow) var(--ease-out);
  }

  #mobile-menu .sub-menu.is-collapsing {
    opacity: 0;
    transition: height var(--dur-base) var(--ease-in), opacity var(--dur-fast) var(--ease-in);
  }

  /* Baumstruktur: Ebene 2 und 3. --i setzt header.js (Position im Untermenü). */
  #mobile-menu .sub-menu > li {
    --line-y: 22px;
    padding-left: 22px;
    min-height: 44px;
    opacity: 0;
    animation: tree-item-appear var(--dur-base) var(--ease-out) forwards;
    animation-delay: calc(60ms + var(--i, 0) * 50ms);
  }

  #mobile-nav > li > .sub-menu > li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
  }

  /* senkrechte Linie, wird von oben nach unten "gezeichnet" */
  #mobile-menu .sub-menu > li::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 6px;
    border-left: 1px solid var(--honify-dunkelgruen);
    opacity: 0.3;
    transform: scaleY(0);
    transform-origin: top;
    animation: tree-draw 180ms var(--ease-out) forwards;
    animation-delay: calc(var(--i, 0) * 50ms);
  }

  #mobile-menu .sub-menu > li:last-child::before {
    bottom: calc(100% - var(--line-y));
  }

  /* Abzweig nach rechts */
  #mobile-menu .sub-menu > li::after {
    content: "";
    position: absolute;
    top: var(--line-y);
    left: 6px;
    width: 0;
    border-top: 1px solid var(--honify-dunkelgruen);
    opacity: 0.3;
    animation: branch-draw 120ms var(--ease-out) forwards;
    animation-delay: calc(40ms + var(--i, 0) * 50ms);
  }

  /* Unterthemen halbfett, Unterpunkte regulär und etwas kleiner: zwei klar lesbare Stufen */
  #mobile-nav > li > .sub-menu > li > a {
    flex: 0 1 auto;
    padding: 10px 0 10px 14px;
    font-weight: 600;
  }

  #mobile-menu .sub-menu .sub-menu a {
    padding: 10px 0 10px 14px;
    font-size: .95em;
    color: color-mix(in srgb, var(--honify-dunkelgruen) 85%, black);
  }

  /* Aktuelle Seite: halbfett mit hellgrünem Punkt */
  #mobile-menu .current-menu-item > a {
    font-weight: 700;
  }

  #mobile-menu .current-menu-item > a > span::after {
    content: "";
    display: inline-block;
    width: 7px;
    height: 7px;
    margin-left: 8px;
    border-radius: 50%;
    background-color: var(--honify-hellgruen);
    vertical-align: middle;
  }

  #mobile-nav > li > .sub-menu > li > .sub-menu {
    flex-basis: 100%;
  }

  /* +/× der Unterkategorien: sitzt direkt hinter dem Text, Tippfläche trotzdem 44px */
  #mobile-menu .sub-menu .dropdown-toggle {
    flex-shrink: 0;
    margin-left: -4px;
  }

  #mobile-menu .sub-menu .dropdown-toggle::before,
  #mobile-menu .sub-menu .dropdown-toggle::after {
    width: 12px;
  }

  #mobile-menu a:active > span {
    opacity: .7;
  }
}

/* Weniger Bewegung: Panel blendet nur, Baum erscheint ohne Zeichnen */
@media (max-width: 1199px) and (prefers-reduced-motion: reduce) {
  #mobile-menu,
  #mobile-menu.is-open {
    transform: none;
    opacity: 0;
    transition: opacity var(--dur-base) linear, visibility 0s linear var(--dur-base);
  }

  #mobile-menu.is-open {
    opacity: 1;
    transition: opacity var(--dur-base) linear, visibility 0s;
  }

  #mobile-menu .sub-menu > li,
  #mobile-menu .sub-menu > li::before,
  #mobile-menu .sub-menu > li::after {
    animation: none;
    opacity: 1;
  }

  #mobile-menu .sub-menu > li::before {
    opacity: .3;
    transform: none;
  }

  #mobile-menu .sub-menu > li::after {
    width: 12px;
    opacity: .3;
  }

  .nav-toggle-icon::before,
  .nav-toggle-icon::after,
  .nav-toggle-icon > span {
    transition-duration: var(--dur-fast);
  }
}

/* Handy: Logo etwas kleiner, Leiste etwas tiefer */
@media (max-width: 600px) {
  #branding {
    zoom: 0.725;
  }

  #site-header-main-inside {
    margin-top: 0.75rem;
  }
}

@keyframes tree-item-appear {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes tree-draw {
  from { transform: scaleY(0); }
  to   { transform: scaleY(1); }
}

@keyframes branch-draw {
  from { width: 0; }
  to   { width: 12px; }
}


/* ---------- Sprungziele ---------- */

/* Anker (#kontakt, Inhaltsverzeichnis …) nicht unter dem fixierten Header verstecken */
html {
  scroll-padding-top: calc(120px + var(--stoerer-h, 0px));
}


/* ---------- Störer-Banner ---------- */

#masthead {
  top: calc(13px + var(--stoerer-h, 0px));
  transition: top .5s cubic-bezier(.4, 0, .2, 1), background-color var(--dur-slow) var(--ease-out);
}

body {
  margin-top: var(--stoerer-h, 0px);
  transition: margin-top .5s cubic-bezier(.4, 0, .2, 1);
}

#honify-stoerer {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999999;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: var(--stoerer-h, 0px);
  overflow: hidden;
  background: #b3cd30;
  box-shadow: inset 0 -4px 8px rgba(0, 0, 0, 0.12);
  font: 600 18px/1.2 Avenir, sans-serif;
  color: #ffffe3;
  transition: height .5s cubic-bezier(.4, 0, .2, 1);
}

#honify-stoerer a {
  color: #ffffe3;
  white-space: nowrap;
  transition: opacity .4s;
}

#honify-stoerer a.is-fading {
  opacity: 0;
}

#honify-stoerer button {
  position: absolute;
  top: 50%;
  right: calc(5% + 36px);
  padding: 0;
  border: none;
  background: none;
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
  color: #ffffe3;
  cursor: pointer;
  transform: translateY(-50%);
  /* sichtbares × bleibt gleich, die Tippfläche wächst auf 44px
     (vertikal zentriert translateY die größere Box ohnehin, daher nur seitlich ausgleichen) */
  margin: 0 -11px;
  padding: 11px;
  transition: opacity var(--dur-fast) var(--ease-out);
}

#honify-stoerer button:hover {
  background: none;
  color: #ffffe3;
  opacity: .8;
}

#honify-stoerer.is-mobile {
  justify-content: stretch;
}

#honify-stoerer.is-mobile a {
  position: absolute;
  top: 50%;
  left: calc(5% + 12px);
  right: calc(5% + 100px);
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
  font-size: 16px;
  font-weight: 800;
  transform: translateY(-50%);
}

#honify-stoerer.is-mobile button {
  right: calc(5% + 25px);
}

/* Zu langer Text läuft auf dem Handy langsam hin und her */
#honify-stoerer a.is-scrolling {
  overflow: visible;
  text-overflow: unset;
  animation: stoerer-scroll var(--scroll-duration, 8s) ease-in-out infinite;
}

@keyframes stoerer-scroll {
  0%, 15%  { transform: translate(0, -50%); }
  50%, 65% { transform: translate(calc(-1 * var(--scroll-distance, 0px)), -50%); }
  100%     { transform: translate(0, -50%); }
}