/* ══════════════════════════════════════════════════════════
   ai-navbar.css — Megamenue-Navigation, Design aus dem Mockup v19 FINAL
   Quelle: homepage content/menuestruktur/Menuestruktur_v19.html (ANEB,
   eingefroren 22.09.2026), CSS-Block der Navigation 1:1 uebernommen.
   Praefix td- -> ai-nv-, Tokens --td- -> --ai-. Huellenklassen des Templates:
   td-bar -> ai-bar, td-logo -> ai-logo (img), td-burger -> ai-burger,
   td-panel -> ai-panel, td-mob-link -> ai-nv-mob-link.
   Diese Datei wird NACH td.css/beiz.css geladen (ai-pre-header.tpl) und
   ueberschreibt deren Huellenregeln fuer Leiste, Knoepfe, Burger und Panel.
   Weggelassen: Mockup-Erklaerung, body.cart-active/-authenticated (Template
   regelt das per Smarty/JS), Signet-Wechsel (kein SVG-Logo im Template).
   Nicht mehr enthalten (Entscheid ANEB 22.09.2026, «Andy besteht auf dem
   Mockup-Design»): die Anpassungen an die VM-Verwaltung vom 21.09.
   (Kartenflaeche, Seitenleiste, volle Breite).
   ══════════════════════════════════════════════════════════ */

/* Rueckfall aus ci-2030-base.css: v19 setzt die Base voraus, bei uns haengt
   sie nur an den Produkt-/Systemseiten — die Navigation steht aber auf JEDER
   Seite. Werte wortgleich aus der Base; koennen raus, sobald die Base global
   eingebunden ist (homepage #50). */
:root {
  --ai-page-gutter-mobile: 20px;
  --ai-transition: .16s ease;
  --ai-space-5: 32px;
  --ai-space-4: 24px;
  --ai-space-3: 16px;
  --ai-space-2: 8px;
  --ai-space-1: 4px;
  --ai-shadow-interaction: 0 8px 20px rgba(0,0,0,.08);
  --ai-radius-sm: 6px;
  --ai-radius-pill: 999px;
  --ai-radius-lg: 10px;
  --ai-page-gutter: var(--ai-page-gutter-mobile);
  --ai-line: #DCE4EC;
  --ai-line-strong: #C9D4DE;
  --ai-dark-text: rgba(255,255,255,.82);
  --ai-container: 1180px;
  --ai-blue: #EEF4FA;
  --ai-accent-hover: #D96F1D;
}
/* .td-container der Base (Inhalt des Megamenues) */
.ai-nv-container {width:100%; max-width:var(--ai-container); margin-inline:auto; padding-inline:var(--ai-page-gutter);}
/* Wortlogo als PNG (Huelle) in der Hoehe des Mockup-Logos */
.ai-logo img {display:block; width:auto; height:26px;}
/* Warenkorb: ohne Inhalt ausgeblendet (Smarty beim Rendern, JS nach dem Feed) */
.ai-cart-hidden {display:none !important;}
/* Warenkorb-Menue: Inhalt kommt aus dem Feed (td.css .ai-cart-*), Kasten ist das v19-Icon-Menue */
.ai-nv-icon-menu.ai-cart-menu {padding:0;}
.ai-nv-icon-menu.ai-cart-menu .ai-cart-empty {padding:18px 16px; color:var(--ai-muted); font-size:14px; text-align:center;}
/* Handy-Panel: die zweite Ebene liegt im Template unter <nav class="ai-panel-nav"> */
.ai-panel .ai-panel-nav {padding:0;}
/* Reste der Huelle (td.css), die das Mockup nicht setzt und die hier stoeren wuerden */
.ai-bar {justify-content:flex-start; padding:0; border-bottom:0; box-shadow:none;}
.ai-logo {padding-right:0;}
.ai-panel {left:auto;}
/* Bootstrap-Reboot der Croster-Huelle zeichnet bei button:focus «outline: 5px auto» (orange Kasten nach
   jedem Mausklick). Das Mockup kennt kein Bootstrap; sichtbarer Fokus kommt hier aus :focus-visible. */
.ai-nv-nav-link:focus, .ai-nv-bar-btn:focus, .ai-nv-picker-tab:focus, .ai-burger:focus {outline:0;}
/* Kompakt-Signet statt Wortlogo auf schmalen Bildschirmen (Auftrag ROKA 22.09.2026,
   Schwellen aus dem Mockup v18.5/v19): unter 335 px immer; von 335 bis 379 px nur,
   wenn der Warenkorb sichtbar ist — dessen 40-px-Knopf gibt den Ausschlag.
   :has() traegt den zweiten Fall; wo es fehlt, bleibt dort das Wortlogo (kein Bruch). */
.ai-nv-signet {display:none; width:auto; height:26px;}
/* .ai-bar davor, weil weiter unten (portierte BAR-Regeln) .ai-logo img erneut auf
   display:block gesetzt wird — gleiche Spezifitaet wuerde dort verlieren. */
@media (max-width: 334px) {
  .ai-bar .ai-logo img {display:none;}
  .ai-bar .ai-logo .ai-nv-signet {display:block;}
}
@media (min-width: 335px) and (max-width: 379px) {
  .ai-bar:has(.ai-cart-icon:not(.ai-cart-hidden)) .ai-logo img {display:none;}
  .ai-bar:has(.ai-cart-icon:not(.ai-cart-hidden)) .ai-logo .ai-nv-signet {display:block;}
}
/* Menuekarte ohne Ziel (Bundles): sieht aus wie die anderen, reagiert aber nicht auf den Zeiger */
.ai-nv-zg-static {cursor:default;}
.ai-nv-zg-static:hover {border-color:var(--ai-primary); box-shadow:none;}
/* Die Seiten schieben ihren Inhalt um --bar-h (td.css) — Mockup: 60 px Desktop, 56 px Mobile */

/* ============================================================================
   ThurData CI-2030 — Navigation (Megamenue), Mockup v19 FINAL
   Laeuft auf ci-2030-base.css. Hier steht nur, was zur Navigation gehoert.
   ============================================================================ */
:root {
  /* Header (CI «Header & Navigation»): 60 px Desktop, 56 px Mobile */
  --bar-h: 60px;
  /* Linkfarben auf dunklem Grund (CI: Nav 0.7, Mobile-Panel 0.85) */
  --ai-nav-link:       rgba(255,255,255,.7);
  --ai-nav-panel-link: rgba(255,255,255,.85);
  /* Wechsel der aktiven Kategorie: ruhige Farbumstellung ueber --ai-transition (.16s) der Base —
     keine Bewegung, kein Slide */
  /* Fokus auf der dunklen Leiste: der Base-Ring (.24 Deckkraft) ist dort kaum sichtbar */
  --ai-nav-focus-dark: inset 0 0 0 2px var(--ai-accent);
}


/* ============================ BAR ============================ */
.ai-bar {
  display: flex;
  align-items: center;
  gap: clamp(8px, 2vw, 24px);
  width: 100%;
  height: var(--bar-h);
  background: var(--ai-dark);
  position: sticky;
  top: 0;
  z-index: 100;
}
.ai-logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  height: 100%;
  padding-left: clamp(12px, 2vw, 24px);
  text-decoration: none;
}
.ai-logo img { display: block; width: auto; height: 26px; }

.ai-logo:focus-visible,
.ai-nv-nav-link:focus-visible,
.ai-nv-bar-btn:focus-visible,
.ai-burger:focus-visible,
.ai-panel :focus-visible { box-shadow: var(--ai-nav-focus-dark); }

/* ============================ DESKTOP NAV ============================ */
.ai-nv-nav {
  display: flex;
  align-items: center;
  flex: 1;
  height: 100%;
  margin-left: clamp(24px, 4vw, 56px);
}
.ai-nv-nav-item { display: flex; align-items: center; height: 100%; }
.ai-nv-nav-link {
  display: flex;
  align-items: center;
  gap: 5px;
  height: 100%;
  margin: 0;
  padding: 0 16px;
  color: var(--ai-nav-link);
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  font: inherit;
  font-size: 0.86rem;
  font-weight: 500;
  letter-spacing: 0.005em;
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--ai-transition), border-color var(--ai-transition);
}
.ai-nv-nav-link .nav-chev {
  width: 12px; height: 12px;
  stroke: currentColor; stroke-width: 2; fill: none;
  opacity: .5;
  transition: transform var(--ai-transition), opacity var(--ai-transition);
}
.ai-nv-nav-item.open .ai-nv-nav-link { color: #fff; border-bottom-color: var(--ai-accent); }

/* Kundenbereich-Haus (nur angemeldet, links vor «Loesungen»): gleiche Hoehe und Unterkante wie die
   uebrigen Leisteneintraege, nur schmaler — der Eintrag traegt ein Symbol statt eines Wortes.
   Beschriftung steckt in title/aria-label, damit er ohne sichtbaren Text benennbar bleibt. */
.ai-nv-home { padding-inline: 12px; text-decoration: none; }
.ai-nv-home .home-ico {
  width: 18px; height: 18px;
  stroke: currentColor; stroke-width: 1.8; fill: none;
  stroke-linecap: round; stroke-linejoin: round;
}
.ai-nv-nav-item.open .ai-nv-nav-link .nav-chev { transform: rotate(180deg); opacity: 1; }

/* ============================ MEGA MENU ============================ */
.ai-nv-mega {
  display: none;
  position: absolute;
  top: var(--bar-h);
  left: 0;
  right: 0;
  z-index: 200;
  padding-block: var(--ai-space-5);
  background: #fff;
  border-top: 1px solid var(--ai-line);
  box-shadow: var(--ai-shadow-interaction);   /* Overlay — zulaessig */
}
.ai-nv-nav-item.open .ai-nv-mega { display: block; }
/* Inhalt in der Standardbreite der Seite (.ai-nv-container, 1180 px).
   Das Innenleben misst die eigene Breite (Container Query, CI Ebene B). */
.ai-nv-mega > .ai-nv-container { container: ai-nv-mega / inline-size; }

/* Picker: Kategorien links, Inhalt rechts */
.ai-nv-picker {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 28px;
}

.ai-nv-picker-tabs {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--ai-space-2);
  padding: var(--ai-space-3);
  background: var(--ai-light);
  border: 1px solid var(--ai-line);
  border-radius: var(--ai-radius-lg);
}
.ai-nv-picker-kicker {
  margin-bottom: var(--ai-space-1);
  color: var(--ai-primary);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .11em;
  text-transform: uppercase;
}
/* Produkte- und Ueber-uns-Tabs sind seit 25.09.2026 <button> statt <a> (Panel-Waehler
   ohne Link, Entscheid ANEB): Browser-Formularstile neutralisieren, alles Weitere kommt
   aus .ai-nv-picker-tab darunter. Die <a>-Tabs (Loesungen, Partner) bleiben unberuehrt. */
button.ai-nv-picker-tab { appearance: none; -webkit-appearance: none; font: inherit; }

.ai-nv-picker-tab {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  padding: 13px 12px;
  color: var(--ai-text);
  text-align: left;
  text-decoration: none;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--ai-radius-sm);
  cursor: pointer;
  transition: background-color var(--ai-transition), border-color var(--ai-transition);
}
/* Aktive Kategorie: Primary-Flaeche, weisse Schrift, kein Dauerschatten, keine Bewegung */
.ai-nv-picker-tab.active,
.ai-nv-picker-tab.active:hover { background: var(--ai-primary); border-color: var(--ai-primary); }

.ai-nv-picker-tab .group-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  color: var(--ai-primary);
  background: #fff;
  border: 1px solid var(--ai-line);
  border-radius: var(--ai-radius-sm);
  transition: border-color var(--ai-transition);
}
.ai-nv-picker-tab.active .group-icon { border-color: #fff; }
.ai-nv-picker-tab .group-icon svg { width: 19px; height: 19px; stroke: currentColor; stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.ai-nv-picker-tab strong {
  display: block;
  color: var(--ai-text);
  font-size: 0.9rem;
  line-height: 1.25;
  transition: color var(--ai-transition);
}
.ai-nv-picker-tab small {
  display: block;
  margin-top: 3px;
  color: var(--ai-muted);
  font-size: 13px;
  line-height: 1.35;
  transition: color var(--ai-transition);
}
.ai-nv-picker-tab.active strong { color: #fff; }
.ai-nv-picker-tab.active small { color: var(--ai-dark-text); }

/* Kategoriename ist ein Link — dezenter Pfeil */
.ai-nv-picker-tab[href]::after {
  content: '→';
  align-self: center;
  margin-left: auto;
  color: var(--ai-primary);
  font-size: 0.95rem;
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity var(--ai-transition), transform var(--ai-transition), color var(--ai-transition);
}
.ai-nv-picker-tab[href]:focus-visible::after { opacity: .85; transform: none; }
.ai-nv-picker-tab[href].active::after { opacity: .9; color: #fff; transform: none; }

/* Orange Wegweiser-Impuls — transient (CI: Orange = Aufbau-Impuls), nie Dauerzustand */
@keyframes tdGuideGlow {
  0%   { box-shadow: 0 0 0 0 rgba(240,130,40,0); }
  20%  { box-shadow: 0 0 0 2px rgba(240,130,40,.70), 0 0 18px 3px rgba(240,130,40,.26); }
  100% { box-shadow: 0 0 0 0 rgba(240,130,40,0); }
}
@keyframes tdGuideSoft {
  0%   { box-shadow: 0 0 0 0 rgba(240,130,40,0); }
  20%  { box-shadow: 0 0 0 2px rgba(240,130,40,.55), 0 0 16px 3px rgba(240,130,40,.22); }
  100% { box-shadow: 0 0 0 0 rgba(240,130,40,0); }
}
.ai-nv-picker-tabs.guide { animation: tdGuideGlow 1.2s ease-out 1; }
.ai-nv-picker-panels.guide-soft { animation: tdGuideSoft 1s ease-out 1; }

/* Rechte Spalte */
/* Alle Panels eines Megas liegen in derselben Grid-Zelle: unsichtbare reservieren
   ihre Hoehe mit, das Mega behaelt EINE Hoehe (hoechstes Panel) und springt beim
   Kategorienwechsel nicht mehr zwischen 2 und 3 Kachelreihen (ANEB 25.09.2026).
   visibility statt display: nimmt inaktive Panels aus Klick- und Tab-Reihenfolge. */
.ai-nv-picker-panels { display: grid; min-height: 320px; border-radius: var(--ai-radius-lg); }
.ai-nv-zg-panel { grid-area: 1 / 1; visibility: hidden; }
.ai-nv-zg-panel.active { visibility: visible; }
.ai-nv-zg-panel h3 { margin-bottom: 5px; }   /* Groesse und Farbe: H3 der Base */
.ai-nv-zg-panel > p {
  max-width: 760px;
  margin: 0 0 18px;
  color: var(--ai-muted);
  font-size: 0.86rem;
  line-height: 1.6;
}
/* Klickbare Warum-Zeile = Link zur Zielgruppen-Seite */
.ai-nv-zg-intro {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--ai-line);
  text-decoration: none;
}
.ai-nv-zg-intro .why {
  max-width: 740px;
  color: var(--ai-muted);
  font-size: 0.88rem;
  line-height: 1.5;
  transition: color var(--ai-transition);
}
.ai-nv-zg-intro .more {
  flex-shrink: 0;
  color: var(--ai-primary);
  font-size: 0.82rem;
  font-weight: 700;
  white-space: nowrap;
  transition: color var(--ai-transition);
}

.ai-nv-zg-products {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
/* Navigationskarte — eigene Komponente, nicht die Produktkachel der Base */
.ai-nv-zg-product {
  position: relative;
  display: flex;
  gap: 12px;
  min-height: 88px;
  padding: 14px;
  color: var(--ai-text);
  text-decoration: none;
  background: #fff;
  border: 1px solid var(--ai-line);
  border-radius: var(--ai-radius-lg);
  transition: border-color var(--ai-transition), box-shadow var(--ai-transition);
}
/* Hervorhebung = Status -> Blau (CI). Etikett kommt aus data-badge. */
.ai-nv-zg-product.highlight {
  background: linear-gradient(180deg, var(--ai-blue) 0%, #fff 60%);
  border-color: var(--ai-primary);
}
.ai-nv-zg-product.highlight[data-badge]::before {
  content: attr(data-badge);
  position: absolute;
  top: -10px;
  right: 10px;
  padding: 2px 8px;
  color: #fff;
  background: var(--ai-primary);
  border-radius: var(--ai-radius-pill);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .035em;
  line-height: 1.45;
  text-transform: uppercase;
}
/* Echte Handlungsaufforderung — Orange zulaessig */
.ai-nv-zg-product.cta-card { background: var(--ai-accent); border-color: var(--ai-accent); }
.ai-nv-zg-product.cta-card strong,
.ai-nv-zg-product.cta-card small,
.ai-nv-zg-product.cta-card .pico { color: #fff; }

.ai-nv-zg-product .pico {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  color: var(--ai-primary);
}
.ai-nv-zg-product .pico svg { width: 24px; height: 24px; stroke: currentColor; stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.ai-nv-zg-product strong { display: block; margin-bottom: 4px; color: var(--ai-text); font-size: 0.88rem; }
.ai-nv-zg-product small { color: var(--ai-muted); font-size: 13px; line-height: 1.4; }

.ai-nv-zg-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  margin-top: 18px;
}
.ai-nv-zg-footer a {
  color: var(--ai-primary);
  font-size: 0.82rem;
  font-weight: 500;
  text-decoration: none;
  transition: color var(--ai-transition);
}

/* ============================ RIGHT BUTTONS ============================ */
.ai-nv-bar-right {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  margin-left: auto;
  padding-right: clamp(12px, 1.5vw, 18px);
}
.ai-nv-bar-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin: 0;
  padding: 0;
  color: var(--ai-nav-link);
  text-decoration: none;
  background: transparent;
  border: 0;
  border-radius: var(--ai-radius-sm);
  font: inherit;
  cursor: pointer;
  transition: background-color var(--ai-transition), color var(--ai-transition);
}
.ai-nv-bar-btn svg:not(.ico-kontakt) { width: 20px; height: 20px; stroke: currentColor; stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; }
/* Udos Kontakt-SVG bringt Geometrie, Maske und Strichstaerken selbst mit.
   Von aussen wird NUR die Darstellungsgroesse gesetzt, sonst nichts. */
.ai-nv-bar-btn svg.ico-kontakt { height: 20px; width: auto; }
.ai-nv-icon-item.open .ai-nv-bar-btn { color: #fff; background: rgba(255,255,255,.10); }


/* Warenkorb-Zaehler: Badge = Status -> Primary (CI) */
.ai-nv-badge {
  position: absolute;
  top: 2px;
  right: 1px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  color: #fff;
  background: var(--ai-primary);
  border-radius: var(--ai-radius-pill);
  font-size: 0.58rem;
  font-weight: 700;
  line-height: 1;
}

.ai-nv-bar-divider { width: 1px; height: 22px; margin: 0 6px; background: rgba(255,255,255,.12); }

/* Kontakt-Dropdown (Layer) */
.ai-nv-icon-item { position: relative; display: flex; align-items: center; height: 100%; }
.ai-nv-icon-menu {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 250;
  width: 300px;
  padding: 14px;
  background: #fff;
  border: 1px solid var(--ai-line);
  border-radius: var(--ai-radius-lg);
  box-shadow: var(--ai-shadow-interaction);   /* Layer — zulaessig */
  /* Nie hoeher als der sichtbare Bereich. Greift auf dem Handy im Querformat und
     im Burger-Bereich 768-1023 px; am Desktop mit genug Hoehe ohne Wirkung. */
  max-height: calc(100vh - var(--bar-h) - 16px);
  overflow-y: auto;
  /* Scroll bleibt im Menue: am Menue-Ende nicht an die Seite weiterreichen (v18.6) */
  overscroll-behavior: contain;
}
/* Der Pfeil haengt am Elternelement, nicht am Menuekasten: der hat seit der
   Hoehenbegrenzung overflow-y:auto, und ein ::before bei top:-6px wuerde
   abgeschnitten (overflow-x rechnet dann ebenfalls auf auto). */
.ai-nv-icon-item.open::after {
  content: '';
  position: absolute;
  top: calc(100% + 2px);
  right: 18px;
  z-index: 251;
  width: 11px;
  height: 11px;
  background: #fff;
  border-left: 1px solid var(--ai-line);
  border-top: 1px solid var(--ai-line);
  transform: rotate(45deg);
}
.ai-nv-icon-item.open .ai-nv-icon-menu { display: block; }
.ai-nv-icon-menu .menu-kicker {
  padding: 2px 8px 8px;
  color: var(--ai-primary);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .11em;
  text-transform: uppercase;
}
.ai-nv-icon-menu a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 8px;
  color: var(--ai-text);
  font-size: 0.88rem;
  text-decoration: none;
  border-radius: var(--ai-radius-sm);
  transition: background-color var(--ai-transition), color var(--ai-transition);
}
.ai-nv-icon-menu a .menu-ico {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  color: var(--ai-primary);
  background: var(--ai-light);
  border-radius: var(--ai-radius-sm);
  transition: background-color var(--ai-transition), color var(--ai-transition);
}
.ai-nv-icon-menu a .menu-ico svg { width: 16px; height: 16px; stroke: currentColor; stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.ai-nv-icon-menu a strong { display: block; color: var(--ai-text); font-size: 0.86rem; font-weight: 700; }
.ai-nv-icon-menu a small { display: block; margin-top: 2px; color: var(--ai-muted); font-size: 13px; }
.ai-nv-icon-menu .menu-divider { height: 1px; margin: 6px 4px; background: var(--ai-line); }

/* ============================ BURGER ============================ */
/* Zustand in der Checkbox (CSS-Selektoren), umgeschaltet vom <label class="td-burger">.
   Der Browser schaltet die Checkbox selbst — Finger und Maus brauchen KEIN JavaScript.
   Das Skript pflegt nur aria-expanded nach und reicht Enter/Leertaste nach; es darf
   beim Klick NICHT zusaetzlich umschalten, sonst hebt es die Umschaltung des Labels auf. */
.ai-burger-cb { display: none; }
.ai-burger {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 42px;
  height: 42px;
  margin: 0 0 0 4px;
  padding: 0;
  background: rgba(255,255,255,.06);
  border: 0;
  border-radius: var(--ai-radius-sm);
  cursor: pointer;
  transition: background-color var(--ai-transition);
}
.ai-burger b { display: block; width: 18px; height: 2px; background: rgba(255,255,255,.85); border-radius: 1px; transition: transform .25s, opacity .25s; }
.ai-burger-cb:checked ~ .ai-bar .ai-burger b:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.ai-burger-cb:checked ~ .ai-bar .ai-burger b:nth-child(2) { opacity: 0; }
.ai-burger-cb:checked ~ .ai-bar .ai-burger b:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }

/* ============================ MOBILE PANEL ============================ */
/* Geschlossen unsichtbar UND nicht fokussierbar (visibility), damit Tab nicht hineinlaeuft */
.ai-panel {
  position: fixed;
  top: var(--bar-h);
  right: 0;
  bottom: 0;
  z-index: 150;
  width: min(400px, 100%);
  overflow-y: auto;
  overscroll-behavior: contain;   /* v18.6: kein Scroll-Chaining zur Seite */
  background: var(--ai-dark);
  transform: translateX(100%);
  visibility: hidden;
  transition: transform .3s ease, visibility 0s linear .3s;
}
.ai-burger-cb:checked ~ .ai-panel { transform: translateX(0); visibility: visible; transition: transform .3s ease; }
.ai-panel details { border-bottom: 1px solid rgba(255,255,255,.04); }
.ai-panel details summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  color: var(--ai-nav-panel-link);
  background: rgba(255,255,255,.02);
  font-size: 0.88rem;
  font-weight: 500;
  list-style: none;
  cursor: pointer;
  user-select: none;
}
.ai-panel details summary::-webkit-details-marker { display: none; }
.ai-panel details summary::after {
  content: '';
  width: 8px;
  height: 8px;
  border-right: 2px solid rgba(255,255,255,.3);
  border-bottom: 2px solid rgba(255,255,255,.3);
  transform: rotate(45deg);
  transition: transform var(--ai-transition);
}
.ai-panel details[open] summary::after { transform: rotate(-135deg); }
/* Zweite Aufklapp-Ebene (nur unter «Produkte»): eingerueckt, dunkler,
   ohne eigene Trennlinie — damit sie sich der ersten Ebene unterordnet. */
.ai-panel details details { border-bottom: 0; }
.ai-panel details details summary {
  padding: 13px 24px 13px 32px;
  background: rgba(0,0,0,.14);
  font-size: 0.84rem;
}
.ai-panel details details summary::after {
  width: 7px;
  height: 7px;
  border-color: rgba(255,255,255,.24);
}
.ai-panel details details .ai-nv-mob-link { padding-left: 44px; }
.ai-nv-mob-link {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 24px 14px 32px;
  color: var(--ai-nav-panel-link);
  font-size: 0.88rem;
  text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,.03);
  transition: background-color var(--ai-transition), color var(--ai-transition);
}
.ai-nv-mob-link:last-child { border-bottom: none; }
.ai-nv-mob-link .ico {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  color: rgba(255,255,255,.45);
  transition: color var(--ai-transition);
}
.ai-nv-mob-link .ico svg { width: 18px; height: 18px; stroke: currentColor; stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; }

/* ============================ HOVER — nur mit echtem Zeiger ============================ */
/* wie ci-2030-base.css: auf Tablets bliebe der Zustand sonst nach dem Antippen kleben */
@media (hover: hover) and (pointer: fine) {
  .ai-nv-nav-link:hover { color: #fff; border-bottom-color: var(--ai-accent); }
  .ai-nv-home:hover { color: #fff; border-bottom-color: var(--ai-accent); }
  .ai-nv-picker-tab:hover { background: #fff; border-color: rgba(27,95,143,.18); }
  .ai-nv-picker-tab[href]:hover::after { opacity: .85; transform: none; }
  .ai-nv-zg-intro:hover .why { color: var(--ai-text); }
  .ai-nv-zg-intro:hover .more { color: var(--ai-accent); }
  /* Navigationskarte: blauer Rand, dezenter Interaktionsschatten, kein Anheben */
  .ai-nv-zg-product:hover { border-color: var(--ai-primary); box-shadow: var(--ai-shadow-interaction); }
  .ai-nv-zg-product.cta-card:hover { background: var(--ai-accent-hover); border-color: var(--ai-accent-hover); }
  .ai-nv-zg-footer a:hover { color: var(--ai-accent); }
  .ai-nv-bar-btn:hover { color: #fff; background: rgba(255,255,255,.08); }
  .ai-nv-icon-menu a:hover { color: var(--ai-primary); background: var(--ai-light); }
  /* Icon-Hover in Panels: Secondary (CI) */
  .ai-nv-icon-menu a:hover .menu-ico { color: #fff; background: var(--ai-secondary); }
  .ai-burger:hover { background: rgba(255,255,255,.12); }
  .ai-nv-mob-link:hover,
  .ai-nv-mob-link:hover .ico { color: var(--ai-secondary); }

  /* Keine Unterstreichung in den Megamenue-Panels (Loesungen, Produkte, Ueber uns, Partner).
     Das Croster-Theme setzt global `a:hover {text-decoration: underline}` (style.min.css) — in einer
     Navigationskarte unterstreicht das Titel UND Beschreibung, weil die Dekoration an die Kinder vererbt
     wird. Die Karten zeigen ihren Hover ueber Rand und Schatten, nicht ueber eine Linie (ROKA 22.09.2026).
     Spezifitaet: .ai-nv-mega a:hover (0,2,1) schlaegt a:hover (0,1,1) — !important ist nicht noetig.
     Die Leiste selbst (.ai-nv-nav-link u. a.) bleibt bewusst unangetastet. */
  .ai-nv-mega a:hover,
  .ai-nv-mega a:focus,
  .ai-nv-mega a:active { text-decoration: none; }
}

/* Bewegung reduzieren: regelt ci-2030-base.css global (Animationen und Uebergaenge 0.01 ms).
   Die berechnete Verzoegerung der Schrift setzt das Skript in diesem Fall auf 0. */

/* ============================ RESPONSIVE ============================ */
/* Megamenue-Innenleben: misst die eigene Breite statt eines Viewport-Breakpoints */
@container ai-nv-mega (max-width: 1099.98px) {
  .ai-nv-picker { grid-template-columns: 270px minmax(0, 1fr); }
  .ai-nv-zg-products { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Globale Breakpoints (CI): Desktop ab 1024 · Tablet 768–1023 · Mobile bis 767 */
@media (max-width: 1023px) {
  .ai-nv-nav { display: none; }
  .ai-nv-mega { display: none !important; }
  .ai-burger { display: flex; }
  .ai-bar { gap: 0; }
}
@media (max-width: 767px) {
  :root { --bar-h: 56px; }
  .ai-nv-bar-right { gap: 2px; }
  .ai-nv-bar-divider { display: none; }
  .ai-panel { width: 100%; }
  /* Bis 767 px haengt das Dropdown nicht mehr am kleinen Icon, sondern am Viewport —
     sonst laeuft es links aus dem Bild (Kontakt-Menue gemessen: 112 px ausserhalb). */
  .ai-nv-icon-menu {
    position: fixed;
    top: calc(var(--bar-h) + 8px);
    left: 12px;
    right: 12px;
    width: auto;
  }
  /* Eine vollbreite Schublade zeigt auf kein einzelnes Icon mehr. */
  .ai-nv-icon-item.open::after { display: none; }
  /* Bar-Icons mobil 22 px (CI Icon-System) */
  .ai-nv-bar-btn svg:not(.ico-kontakt) { width: 22px; height: 22px; }
  .ai-nv-bar-btn svg.ico-kontakt { height: 22px; width: auto; }
}