/* ============================================================
   HEADER V2 – STANDARD (entschieden 2026-08-20)

   V1 (Kompression, shopnah) ist ersatzlos entfallen: nur V2
   gehoert zum Designsystem, ein Vergleich stand nicht mehr an.
   Der Tweak-Schalter im Vorschau-Panel ist damit weg.

   Lokal haengt die Datei fest im Kopf jeder Seite unter
   pages/ — bewusst als LETZTES Stylesheet, weil ihr Inhalt im
   Shop im Feld "CSS - Ende" landet und dort ebenfalls hinter
   allem anderen steht. Der Dateiinhalt bleibt transfer-rein:
   keine Scoping-Klassen, Selektoren sind echtes e-vendo-DOM.

   Sie bleibt eine eigene Datei statt in tillit-shop.css
   aufzugehen, weil ihre Abschnitte VERSCHIEDENE Backend-Felder
   ansteuern (siehe Fahrplan) — zusammengelegt waere nicht mehr
   ablesbar, was wohin gehoert.

   Transfer-Fahrplan:
   - Abschnitt HEADER V2 + FLOATING ersetzt den Block
     "HEADER-KOMPRESSION" in tillit-shop.css / Feld "CSS - Ende".
   - Abschnitt USP-BAND V2 gehoert NICHT in CSS - Ende, sondern
     in das Specialarea-Feld "Header" (dort liegt das Band-CSS
     selbstenthalten im Feld).
   - Abschnitt SEITEN-ANPASSUNG gehoert zur jeweiligen Themenseite.
   - Abschnitt VORSCHAU-BRUECKE wird NICHT transferiert.

   Gestaltungsregeln (Startseite V4):
   1. Hierarchie aus Groesse und Weissraum, Inter 400.
   2. Auszeichnung in der Mono-Stimme (IBM Plex Mono, versal,
      gesperrt) — die Navigation spricht diese Stimme.
   3. Gold traegt nur noch Aktion. Band und Chrome sind Ink/Weiss.
   4. Hairlines statt Rahmen und Schatten.
   ============================================================ */

:root {
  /* Header-Tokens, bewusst eigener Namensraum (--tbh-*):
     die --tb-*-Tokens der Seiten leben in deren .sh-page-Scope
     und sind im Header nicht verfuegbar. */
  --tbh-ink: #0f0f0f;
  --tbh-muted: #6a6a6a;
  --tbh-line: rgba(15, 15, 15, 0.13);
  --tbh-line-strong: rgba(15, 15, 15, 0.22);
  --tbh-on-ink: rgba(255, 255, 255, 0.8);
  --tbh-on-ink-muted: rgba(255, 255, 255, 0.55);
  --tbh-line-ink: rgba(255, 255, 255, 0.15);
  --tbh-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --tbh-mono-tracking: 0.05em;

  /* Shell-Hoehe V2 (solid): Band 34 + Logozeile 72 + Nav 40 */
  --tb-shell-h: 82px;
}

@media (min-width: 880px) {
  :root {
    --tb-shell-h: 146px;
  }
}

/* ============================================================
   USP-BAND V2  (→ Specialarea-Feld "Header", nicht CSS - Ende)
   Ink statt Gold, Mono-Stimme, halbe Hoehe, keine Icons,
   kein Schatten. Literalwerte, da das Feld selbstenthalten ist.
   ============================================================ */

.announcement-bar {
  background: #0f0f0f;
  color: rgba(255, 255, 255, 0.8);
  box-shadow: none;
  font-weight: 400;
}

.announcement-container {
  min-height: 34px;
  padding: 7px 16px;
}

.announcement-icon {
  display: none;
}

.announcement-content {
  font-family: var(--tbh-mono);
  font-size: 0.72rem;
  letter-spacing: var(--tbh-mono-tracking);
  text-transform: uppercase;
}

.announcement-content strong {
  font-weight: 500;
  color: #ffffff;
  letter-spacing: var(--tbh-mono-tracking);
}

/* Rotation laeuft still — die Progress-Dashes sind Meta-Rauschen
   und entfallen im ruhigen Band. */
.announcement-progress {
  display: none;
}

@media (max-width: 767px) {
  .announcement-container {
    min-height: 30px;
    padding: 5px 12px;
  }

  .announcement-content {
    font-size: 0.62rem;
    letter-spacing: 0.04em;
  }
}

/* ============================================================
   HEADER V2 – GRUNDZUSTAND (alle Seiten)  (→ CSS - Ende)
   Weiss, Hairline, kompakt. Suche als Hairline-Feld statt
   grauer Pille. Navigation in der Mono-Stimme.
   ============================================================ */

#Header {
  background-color: #ffffff;
  border-bottom: 1px solid var(--tbh-line);
}

@media (min-width: 880px) {
  #header_content {
    height: 72px;
  }
}

/* Suche: Hairline statt Box (ruhige Flaechen) */
#Header input[type="text"] {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--tbh-line-strong);
  border-radius: 0;
  padding: 0.5em 2.2em 0.5em 0.1em;
  font-size: 0.95rem;
  color: var(--tbh-ink);
  transition: border-color 0.3s;
}

#Header input[type="text"]::placeholder {
  color: var(--tbh-muted);
}

#Header input[type="text"]:focus {
  outline: none;
  border-bottom-color: var(--tbh-ink);
}

/* Navigation: Mono-Stimme, Gewicht 400. Hover seit 2026-08-19 wie im
   Footer-V2: der Unterstrich faehrt unter dem Text von links ein und
   laeuft beim Verlassen nach rechts aus (transform-origin-Wechsel),
   gleiche Feder (1px currentColor, bottom .15em) und gleiche Kurve.
   Er sitzt auf dem inneren div.text, nicht auf dem a - sonst laege die
   Linie ueber die 1.05em-Seitenpolster hinweg. Der Aktivzustand steht
   als dieselbe Linie dauerhaft; der fruehere inset box-shadow an der
   Padding-Unterkante ist raus, damit nicht zwei Linien auf zwei
   Hoehen konkurrieren. */
#topnav .h_menu li.level0 > a {
  padding: 0.85em 1.05em;
  line-height: 1.6;
  font-family: var(--tbh-mono);
  font-size: 0.78rem;
  font-weight: 400;
  letter-spacing: var(--tbh-mono-tracking);
  text-transform: uppercase;
  color: var(--tbh-muted);
  transition: color 0.3s;
}

#topnav .h_menu li.level0 > a .text {
  position: relative;
}

#topnav .h_menu li.level0 > a .text::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(50% - var(--tillit-underline-font, 0.365em) - var(--tillit-underline-gap, 0.17em));
  height: 1px;
  background-color: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
}

#topnav .h_menu li.level0 > a:hover {
  color: var(--tbh-ink);
}

#topnav .h_menu li.level0 > a:hover .text::after {
  transform: scaleX(1);
  transform-origin: left;
}

#topnav .h_menu > li.active > a,
#topnav .h_menu > li.inpath > a {
  background: none;
  color: var(--tbh-ink);
}

#topnav .h_menu > li.active > a .text::after,
#topnav .h_menu > li.inpath > a .text::after {
  transform: scaleX(1);
}

@media (prefers-reduced-motion: reduce) {
  #topnav .h_menu li.level0 > a .text::after {
    transition: none;
  }
}

/* Windows-Kontrastmodi ueberschreiben background-color zu Canvas - die
   Hover-/Aktivlinie verschwaende. forced-color-adjust:none behaelt sie;
   currentColor uebernimmt die vom System forcierte Farbe. */
@media (forced-colors: active) {
  #topnav .h_menu li.level0 > a .text::after {
    forced-color-adjust: none;
  }
}

/* Anmelden / Merkzettel / Warenkorb-Zeile */
#Header,
#Header a {
  color: var(--tbh-ink);
}

/* Nebenzeile ruhig: der Leertext des Warenkorbs verschwindet,
   das Icon genuegt. Zaehler und Summe im gefuellten Zustand
   (#cartsmall-filled) bleiben unberuehrt. */
#cartsmall-empty > span {
  display: none;
}

/* Login/Merkzettel in der Mono-Stimme (greift im Shop-DOM;
   die lokale Replik macht dasselbe ueber .tpv-* in der
   Vorschau-Bruecke unten). */
#Header .header_options .option,
#Header .header_options .option a {
  font-family: var(--tbh-mono);
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Sticky-Nav: Glas auf Weiss, Hairline unten */
#topnav.fixed {
  background: rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--tbh-line);
}

#shop.oflow_hidden {
  overflow: clip;
}

/* ============================================================
   HEADER V2 – FLOATING AUF HERO-SEITEN  (→ CSS - Ende)
   Scope: body:has(.sh-page) — greift automatisch auf jeder
   Seite, deren Inhalt den Designsystem-Wrapper .sh-page traegt
   (Startseite, Beratungsprozess, Kategorie). Ohne :has-Support
   bleibt der solide Grundzustand (sauberer Fallback).
   Band und Header liegen absolut ueber dem Hero; der Hero darf
   dadurch volle 100svh hoch sein.
   ============================================================ */

body:has(.sh-page) #special_header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1002;
}

body:has(.sh-page) .announcement-bar {
  background: rgba(15, 15, 15, 0.5);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

body:has(.sh-page) #Header {
  position: absolute;
  top: 30px;
  left: 0;
  right: 0;
  z-index: 1001;
  background: transparent;
  border-bottom: 1px solid var(--tbh-line-ink);
}

@media (min-width: 768px) {
  body:has(.sh-page) #Header {
    top: 34px;
  }
}

/* Chrome-Text auf Ink: weiss bzw. on-ink */
body:has(.sh-page) #Header,
body:has(.sh-page) #Header a:not(.level1):not(.level2) {
  color: #ffffff;
}

/* Ausnahme: das Megamenue-Panel ist eine WEISSE Flaeche, die im
   #Header liegt. Ohne diese Regel erbt es das On-Ink-Weiss von
   oben — Spaltenkoepfe und Unterpunkte werden weiss auf weiss und
   der Flyout ist praktisch unsichtbar (gemessen 2026-08-19 auf der
   Startseite mit Header V2: Panel-Hintergrund und Linkfarbe beide
   rgb(255,255,255)).

   Die Regel stellt nur die Lesbarkeit wieder her und uebernimmt
   dafuer die Werksfarben. Seit der Drawer-Entscheidung
   (2026-08-20, Abschnitt NAV-DRAWER) ist dieser Flyout nur noch
   der No-JS-Fallback — die Reparatur bleibt genau deshalb: ein
   Fallback, den niemand lesen kann, ist keiner. */
body:has(.sh-page) #Header .h_menu ul.level1 {
  color: var(--tbh-ink, #131313);
}

/* Spaltenkoepfe des Werks-Flyouts: Ink statt Template-Gold —
   #b59472 auf Weiss liegt bei 2,82:1, WCAG AA verlangt 4,5:1.
   Bewusst auf derselben Spezifitaet wie die Werksregel (0,3,2):
   unser Slot laedt spaeter und gewinnt ueber die Reihenfolge,
   waehrend ein spezifischeres Panel-Stylesheet weiter freie Hand
   behaelt. Gilt auf allen Seiten, nicht nur auf Hero-Seiten. */
.h_menu.megamenu li.level1 > a {
  color: var(--tbh-ink, #131313);
}

body:has(.sh-page) #Header input[type="text"] {
  border-bottom-color: rgba(255, 255, 255, 0.35);
  color: #ffffff;
}

body:has(.sh-page) #Header input[type="text"]::placeholder {
  color: var(--tbh-on-ink-muted);
}

body:has(.sh-page) #Header input[type="text"]:focus {
  border-bottom-color: #ffffff;
}

body:has(.sh-page) #topnav {
  background: transparent;
}

/* Weniger Transparenz (2026-08-19): on-ink (.8) statt on-ink-muted
   (.55) - die Interaktionsantwort traegt jetzt der Unterstrich, die
   Punkte selbst duerfen praesenter stehen. */
body:has(.sh-page) #topnav .h_menu li.level0 > a {
  color: var(--tbh-on-ink);
}

body:has(.sh-page) #topnav .h_menu li.level0 > a:hover {
  color: #ffffff;
}

body:has(.sh-page) #topnav .h_menu > li.active > a,
body:has(.sh-page) #topnav .h_menu > li.inpath > a {
  color: #ffffff;
}

/* Sticky auf Hero-Seiten: Ink-Glas — konsistent mit dem
   dunklen Kapitel, kontrastiert auf allen Flaechen. */
body:has(.sh-page) #topnav.fixed {
  background: rgba(15, 15, 15, 0.85);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--tbh-line-ink);
}

body:has(.sh-page) #topnav.fixed .h_menu li.level0 > a {
  color: var(--tbh-on-ink);
}

body:has(.sh-page) #topnav.fixed .h_menu li.level0 > a:hover,
body:has(.sh-page) #topnav.fixed .h_menu > li.active > a,
body:has(.sh-page) #topnav.fixed .h_menu > li.inpath > a {
  color: #ffffff;
}

/* ============================================================
   SEITEN-ANPASSUNG  (→ gehoert zur jeweiligen Themenseite,
   beim Transfer in deren <style> uebernehmen)
   Hero unter Floating-Header: volle Viewporthoehe, und der
   Scrim wird oben wieder dunkler, damit weisses Chrome auch
   auf hellen Bildpartien (Himmel) lesbar bleibt.
   ============================================================ */

@media (min-width: 1000px) {
  .sh-page .sh-split {
    min-height: 100svh;
  }
}

.sh-page .sh-split__scrim {
  background: linear-gradient(0deg,
    rgba(15, 15, 15, 0.86) 0%,
    rgba(15, 15, 15, 0.34) 55%,
    rgba(15, 15, 15, 0.22) 70%,
    rgba(15, 15, 15, 0.68) 100%);
}

/* ============================================================
   NAV-DRAWER  (→ CSS - Ende)
   Entscheidung 2026-08-20 (Navigations-Canvas, Variante D):
   das Megamenue wird ein modaler Drawer von rechts. Verhalten
   liefert js/tillit/tillit-nav.js (Specialarea "Header") — es
   haengt Drawer + Scrim als Body-Kinder an (Portal; nur so
   entkommt position:fixed dem Containing Block, den transform
   und backdrop-filter auf #topnav.fixed erzeugen) und setzt
   html.tillit-nav-drawer.

   Progressive Enhancement: ohne JS bleibt der Werks-Hover-
   Flyout stehen (die Regeln darunter greifen erst mit der
   html-Klasse). Darum bleibt auch der Flyout-Lesbarkeits-Fix
   weiter oben in der Datei bestehen.
   ============================================================ */

/* Werks-Flyout abschalten, sobald der Drawer uebernommen hat.
   display statt visibility: die Oeffnen-Regel des Werks schaltet
   nur visibility und laeuft damit ins Leere. */
html.tillit-nav-drawer .h_menu.megamenu ul.level1 {
  display: none;
}

/* Werks-Off-Canvas mobil stilllegen: unter 880px uebernimmt derselbe
   Drawer, der auf Desktop laeuft (tillit-nav.js faengt den Burger in
   der Capture-Phase ab). Bewusst an html.tillit-nav-drawer gehaengt —
   die Klasse setzt nur unser Script. Ohne JS bleibt e-vendos Menue
   also unangetastet stehen, wie der Hover-Flyout auf Desktop.
   Spezifitaet (1,2,1) schlaegt die Werksregeln (styles.css 715/719). */
html.tillit-nav-drawer #mobileNavigation.slideleft {
  display: none;
}

/* Beiger Werks-Caret unterm geoeffneten Punkt: Spezifitaet der
   Werksregel (0,6,3) muss geschlagen werden, daher der volle
   Selektor mit html-Praefix. */
html.tillit-nav-drawer .h_menu.megamenu:not(.touch) li.level0.children:hover > a::after,
html.tillit-nav-drawer .h_menu.megamenu.touch li.level0.children.opened > a::after {
  content: none;
}

/* Scroll-Sperre ohne Layout-Sprung: overflow:hidden nimmt die
   Scrollbar weg und macht den Viewport breiter — der Inhalt
   ruckt nach rechts. tillit-nav.js misst die Scrollbar-Breite
   und legt sie als --tillit-sbw ab; das Padding gibt sie dem
   Layout zurueck. Die klebende Nav ist position:fixed und
   folgt dem html-Padding nicht — sie bekommt dieselbe
   Kompensation direkt. */
html.tillit-drawer-lock {
  overflow: hidden;
  padding-right: var(--tillit-sbw, 0px);
}

html.tillit-drawer-lock #topnav.fixed {
  padding-right: var(--tillit-sbw, 0px);
}

/* [hidden] muss die display-Regeln dieser Bauteile schlagen.
   Die UA-Regel [hidden]{display:none} hat dieselbe Spezifitaet wie
   eine Klasse — und Autor-CSS gewinnt gegen das UA-Blatt. Ohne diese
   Zeilen ist das hidden-Attribut wirkungslos: beim Drawer und beim
   Scrim fiel das nicht auf (transform bzw. opacity haben sie ohnehin
   versteckt), beim Zurueck-Knopf schon — er stand auch in der
   Wurzelansicht da, wo es nichts zurueckzugehen gibt. */
.tillit-drawer[hidden],
.tillit-drawer-scrim[hidden],
.tillit-drawer__back[hidden] {
  display: none;
}

/* z-index 10000/10001 statt 1200/1201 — am Live-Shop gemessen
   (2026-08-21, Injektionstest): #Header traegt dort z-index 9000, und
   #shop hat zwar position:relative, aber z-index:auto und bildet
   damit KEINEN Stapelkontext. Der Header konkurriert also direkt mit
   dem Drawer im Wurzelkontext und lag darueber — mobil verdeckte die
   Kopfzeile die Drawer-Titelzeile.
   In der lokalen Replik fiel das nicht auf, weil #shop dort einen
   z-index traegt und den Header einsperrt. Ein Fall, in dem die
   Vorschau freundlicher war als die Wirklichkeit.
   Die Werte liegen ueber Header (9000) und ueber e-vendos eigenem
   Off-Canvas (.slideleft/.slideright und #mts, alle 9001/9002), aber
   unter den Overlay-Ebenen des Shops (20000 aufwaerts) — ein
   Cookie-Banner gehoert weiter ueber ein Navigationsmenue. */
.tillit-drawer-scrim {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(15, 15, 15, 0.45);
  opacity: 0;
  transition: opacity 0.3s cubic-bezier(0.76, 0, 0.24, 1);
}

.tillit-drawer-scrim.is-open {
  opacity: 1;
}

/* Von LINKS (2026-08-20 nachgeschaerft): e-vendos Mobil-Drawer ist
   #mobileNavigation.slideleft — dieselbe Kante auf allen Breakpoints.
   Keine Trennborders, Hover ist die animierte Linie (Markenkonvention
   aus Nav und Footer), Schrift eine Stufe groesser. */
.tillit-drawer {
  /* Eine Kante fuer Titel, Zeile und Unterpunkt. Bewusst px und
     bewusst EIN Token: die drei Regeln muessen denselben Wert tragen,
     sonst bricht die senkrechte Linie, die der Drawer lebt. rem
     brauechte es dafuer nicht — die Wurzel steht im Werks-Template
     hart auf 14px (styles.css:345), rem waere hier nur px/14 und
     gaebe der Nutzer-Schriftgroesse trotzdem nicht nach. */
  --tillit-drawer-gutter: 44px;
  /* Vertikaler Rhythmus der Zeilen (2026-08-20: 12px -> 8px). */
  --tillit-drawer-row-y: 8px;
  /* Dichte der Scheibe. Der Knopf fuer den einen echten Preis des
     Glases: die Flaeche nimmt den Ton dessen an, was dahinter liegt.
     Gemessen auf der Kategorie-Replik, wo weisser Inhalt und
     schwarzer Footer hinter dem Drawer aufeinandertreffen — bei .85
     stehen die beiden Haelften 20 Helligkeitsstufen auseinander, bei
     .92 nur noch 11 (Rezept des Panels). Weniger Glas, ruhigere
     Flaeche; mehr Glas, mehr Tiefe. */
  --tillit-drawer-glass: 0.85;

  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: 10001;
  width: min(500px, 92vw);
  display: flex;
  flex-direction: column;
  /* Glas statt Deckweiss (2026-08-20, Max). Die alte Notiz hier sagte
     "Glas nur im Panel" mit zwei Gruenden — beide halten der Messung
     nicht stand:
       Rechenlast: je vier Laeufe mit und ohne Blur waehrend der
       Einfahrt, Median 16,7ms, Maximum 17,9ms, null Frames ueber
       20ms. Kein messbarer Unterschied.
       Kontrast: schlimmster denkbarer Fall ist ein schwarzer
       Hintergrund — dann steht die Flaeche auf #dadada und Ink
       darauf bei 13,7:1. AAA verlangt 7:1.
     Der Scrim dahinter ist kein Argument GEGEN den Blur, sondern
     seine Bedingung: er nimmt dem Bild die Unruhe, der Blur nimmt
     ihm die Zeichnung, und uebrig bleibt ein Ton, der auf jeder
     Seite gleich liegt. Rezept wie klebende Nav und Panel, nur
     heller und weiter aufgezogen. */
  background: rgba(255, 255, 255, var(--tillit-drawer-glass));
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
  color: var(--tbh-ink);
  /* Keine Kante (2026-08-20, Max): der 45%-Scrim trennt die Flaeche
     deutlicher, als eine Haarlinie es koennte — die Linie war eine
     Doppelung der Trennung, die der Helligkeitssprung schon macht. */
  transform: translateX(-100%);
  /* Timing wie das Panel: dieselbe Kurve (0.76,0,0.24,1), asymmetrisch —
     Basis-Transition .45s gilt beim SCHLIESSEN. */
  transition: transform 0.45s cubic-bezier(0.76, 0, 0.24, 1);
}

/* Die Blende am Listenende faerbt nicht, sie MASKIERT (2026-08-20).
   Auf Deckweiss ging ein weisser Verlauf darueber; auf Glas wuerde
   derselbe Verlauf die Flaeche dort dichter machen als daneben — ein
   hellerer Streifen quer durch die Scheibe. Die Maske blendet
   stattdessen den TEXT aus und laesst das Glas unveraendert stehen.
   Das Script setzt has-more nur, wenn wirklich Inhalt darunter liegt;
   @property macht die Laenge interpolierbar, damit die Kante auf- und
   abblendet statt zu schalten (ohne Unterstuetzung schaltet sie —
   harmlos). */
@property --tillit-drawer-fade {
  syntax: "<length>";
  initial-value: 0px;
  inherits: false;
}

.tillit-drawer.is-open {
  transform: translateX(0);
  /* ... und beim OEFFNEN laeuft es langsamer rein (.6s) — exakt die
     Asymmetrie der Panel-Blende und der Scroll-Blenden der Seiten. */
  transition: transform 0.6s cubic-bezier(0.76, 0, 0.24, 1);
}

/* Inhalt staggert nach, wie die Spalten im Panel: die Zeilen kommen
   nacheinander aus einer leichten Vertikalen. Delays nur im offenen
   Zustand — beim Schliessen verschwindet alles sofort mit dem Drawer.

   Der Index kommt aus dem Script (--tillit-row-i), NICHT aus
   nth-child: die Liste ist der ERP-Warengruppenbaum und nicht auf
   acht Zeilen gedeckelt. Die alte nth-child-Treppe endete bei 8 —
   PARTS und DEITY stehen heute exakt auf 8, eine neunte Warengruppe
   haette Delay 0 bekommen und waere VOR den Zeilen 2-8 erschienen.

   Tempo (2026-08-20 nachgezogen): Start .08s, Schritt .04s, gekappt
   bei Index 9. Vorher lief die letzte Zeile erst bei 1,04s aus,
   waehrend der Drawer schon nach .6s stand — das Menue performte
   noch, als es laengst benutzbar sein sollte. Jetzt ist der Aufbau
   bei ~.80s durch, also gut zwei Zehntel nach dem Drawer. */
.tillit-drawer__scroll > * {
  opacity: 0;
  transform: translateY(10px);
  transition:
    opacity 0.38s cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 0.44s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.tillit-drawer.is-open .tillit-drawer__scroll > * {
  opacity: 1;
  transform: none;
  transition-delay: calc(0.08s + min(var(--tillit-row-i, 0), 9) * 0.04s);
}

/* Ansichtswechsel im OFFENEN Drawer (Wurzel <-> Zweig): ohne diesen
   Zwischenschritt gaebe es keine Bewegung. Die Regel darueber haengt
   an .is-open — beim Wechsel ist der Drawer das aber schon, die neuen
   Zeilen entstehen also direkt im Endzustand, und was sich nie
   aendert, kann auch nicht ueberblenden.
   Das Script setzt .is-entering, erzwingt ein Reflow und nimmt sie
   wieder weg: damit haben die Zeilen einen Startwert, von dem aus die
   Treppe laufen kann. transition:none haelt den Startzustand hart —
   sonst blendete das Setzen der Klasse selbst schon zurueck. */
.tillit-drawer.is-open .tillit-drawer__scroll.is-entering > * {
  opacity: 0;
  transform: translateY(10px);
  transition: none;
}

/* Kopfzeile steht ausserhalb des Scrollraums (der liegt auf
   __scroll) — sie braucht deshalb weder sticky noch eigene Farbe.
   Der Zwischenschritt "Drawer scrollt, Kopf sticky" ist wieder raus:
   auf Glas kann eine sticky Kopfzeile nicht deckend sein, ohne als
   weisser Flicken auf der Scheibe zu stehen (im Render nachgesehen),
   und deckend MUSS sie sein, wenn Text unter ihr durchlaeuft. Ohne
   Scrollbar kostet die Trennung nichts mehr: eine versteckte
   Scrollbar belegt nie Platz, also kann auch nichts springen. */
.tillit-drawer__top {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  padding: 38px var(--tillit-drawer-gutter) 26px;
}

.tillit-drawer__titlerow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.tillit-drawer__title {
  position: relative;
  font-size: 2.1rem;
  font-weight: 400;
  letter-spacing: -0.03em;
  line-height: 1.05;
  color: var(--tbh-ink);
  text-decoration: none;
}

.tillit-drawer__title::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  /* Die Konvention "bottom: 0.15em" (Nav, Footer) ist an deren
     line-height 1.6 geeicht: dort liegt die Linie effektiv 0.15em
     UNTER der Textkante, weil das Half-Leading ((1.6-1)/2 = 0.3em)
     die Zeilenbox nach unten aufzieht. Die Titelzeile laeuft auf
     1.05 — mit demselben Zahlenwert klebte die Linie an den
     Descendern. calc() rechnet das Half-Leading heraus, damit der
     SICHTBARE Abstand identisch ist:
       bottom = halfLeading - 0.15em = (1.05-1)/2 - 0.15 = -0.125em */
  bottom: calc(50% - var(--tillit-underline-font, 0.365em) - var(--tillit-underline-gap, 0.17em));
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.tillit-drawer__title:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

.tillit-drawer__close {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-right: -9px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--tbh-ink);
  cursor: pointer;
}

/* Zurueck zur Wurzelansicht — existiert nur mobil, weil es nur dort
   eine Ebene ueber dem Zweig gibt. Sitzt VOR dem Titel und schiebt
   ihn nicht: der Titel steht in beiden Ansichten an derselben Kante,
   sonst huepft die Ueberschrift beim Blaettern. Deshalb negativer
   Einzug statt Abstand. */
/* Versalien auf der obersten Ebene — dieselbe Regel wie in der
   Nav-Leiste (#topnav ... li.level0 > a, text-transform:uppercase).
   Grund: die Schreibweise kommt aus dem ERP und ist dort gemischt
   gepflegt (BIKES, E-BIKES, PARTS, DEITY, AMFLOW, TILLIT versal —
   Home, Termin, Atherton, Pivot gemischt). Die Nav-Leiste buegelt
   das per CSS glatt, der Drawer tat es nicht: derselbe Punkt stand
   oben als "TERMIN" und im Drawer als "Termin".
   Betroffen ist NUR die oberste Ebene. Unterpunkte bleiben in ihrer
   gepflegten Schreibweise — Versalien dort waeren gegen die
   Entscheidung vom 2026-08-20, und aus "MTB Fully" wuerde per
   text-transform ohnehin kein sauberes Ergebnis.
   Das negative Tracking der Mixed-Case-Zeilen wird zurueckgenommen:
   Versalien brauchen keine Unterschneidung. */
.tillit-drawer.is-root .tillit-drawer__row-label,
.tillit-drawer:not(.is-root) .tillit-drawer__title {
  text-transform: uppercase;
  letter-spacing: 0;
}

/* Eigene Zeile ueber dem Titel: der Titel startet dadurch in
   beiden Ansichten an derselben Kante wie die Liste darunter. */
.tillit-drawer__back {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 10px;
  padding: 4px 0;
  border: 0;
  background: none;
  font-family: var(--tbh-mono);
  font-size: 0.72rem;
  letter-spacing: var(--tbh-mono-tracking);
  text-transform: uppercase;
  color: var(--tbh-muted);
  cursor: pointer;
  transition: color 0.3s;
}

.tillit-drawer__back:hover {
  color: var(--tbh-ink);
}

.tillit-drawer__back svg {
  width: 15px;
  height: 15px;
}

.tillit-drawer__close svg {
  width: 21px;
  height: 21px;
}

/* Scrollraum der Liste. Das padding-top ist Luft NACH der
   Titelzeile: es scrollt mit weg, statt als Einzug stehen zu
   bleiben. Scrollbar versteckt — sie war das einzige Bauteil im
   Drawer, das nicht aus dem Designsystem kam (unter Windows das
   graue Werks-Widget mit Pfeiltasten, mitten in einer Flaeche, die
   ohne eine einzige Linie auskommt). Sie belegt damit auch nie
   Platz, also kann die Spalte beim zweiten Akkordeon nicht mehr
   springen — genau der Sprung, der als Bug auffiel: 499 -> 484px in
   EINEM Frame, Chevrons 15px nach links, jede Zeile neu umgebrochen.
   Rad, Trackpad und Tastatur scrollen unveraendert; den Hinweis
   "da kommt noch was" traegt die Maske unten. */
.tillit-drawer__scroll {
  flex: 1 1 auto;
  min-height: 0;
  padding-top: 16px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
  -ms-overflow-style: none;

  --tillit-drawer-fade: 0px;
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - var(--tillit-drawer-fade)), transparent 100%);
  mask-image: linear-gradient(to bottom, #000 calc(100% - var(--tillit-drawer-fade)), transparent 100%);
  transition: --tillit-drawer-fade 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.tillit-drawer__scroll::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.tillit-drawer.has-more .tillit-drawer__scroll {
  --tillit-drawer-fade: 84px;
}

/* Zeile — als Link (flache Gruppen) und als Akkordeon-Knopf
   (Gruppen mit Ebene 2) identisch gesetzt. Keine Trennborders;
   der Rhythmus kommt aus dem Weissraum. */
.tillit-drawer__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 1rem;
  width: 100%;
  box-sizing: border-box;
  padding: var(--tillit-drawer-row-y) var(--tillit-drawer-gutter);
  border: 0;
  background: none;
  font-family: inherit;
  font-size: 1.35rem;
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.3;
  text-align: left;
  text-decoration: none;
  color: var(--tbh-ink);
  cursor: pointer;
}

/* Hover ist die animierte Linie unterm Wort — dieselbe Geste wie
   an Nav-Punkten und im Footer, nicht ein Farbwechsel. */
.tillit-drawer__row-label {
  position: relative;
  justify-self: start;
}

.tillit-drawer__row-label::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  /* Half-Leading herausgerechnet, siehe Stellschraube oben. */
  bottom: calc(50% - var(--tillit-underline-font, 0.365em) - var(--tillit-underline-gap, 0.17em));
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.tillit-drawer__row:hover .tillit-drawer__row-label::after,
.tillit-drawer__row:focus-visible .tillit-drawer__row-label::after {
  transform: scaleX(1);
  transform-origin: left;
}

/* Gleiche Farbe wie das Schliessen-X: beides ist Chrome des
   Drawers, nicht Meta-Information. */
.tillit-drawer__row svg {
  width: 18px;
  height: 18px;
  color: var(--tbh-ink);
  transition: transform 0.3s cubic-bezier(0.76, 0, 0.24, 1);
}

.tillit-drawer__row[aria-expanded="true"] svg {
  transform: rotate(180deg);
}

/* Akkordeon-Blende: hidden kann nicht animieren, eine Grid-Zeile
   schon. Der Wrapper faehrt von 0fr auf 1fr, das Innere clippt.
   min-height:0 ist Pflicht — Grid-Items stehen sonst auf
   min-height:auto und die Animation bliebe stehen.
   visibility haelt eingeklappte Links aus der Tab-Reihenfolge. */
.tillit-drawer__sub {
  display: grid;
  /* minmax(0, Xfr), NICHT nur "0fr": die Kurzform bedeutet
     minmax(auto, 0fr) und behaelt die Auto-Mindesthoehe der Zeile —
     das Innen-Padding (2+20px) blieb dadurch im zugeklappten
     Zustand als 22px stehen. Mit explizitem 0 als Minimum faehrt
     die Zeile wirklich auf null. */
  grid-template-rows: minmax(0, 0fr);
  transition: grid-template-rows 0.45s cubic-bezier(0.76, 0, 0.24, 1);
}

.tillit-drawer__group.is-open .tillit-drawer__sub {
  grid-template-rows: minmax(0, 1fr);
}

/* Innenraum am schmaleren Zeilenrhythmus nachgezogen (2026-08-20):
   mit 12px-Zeilen standen die Abstaende auf 20 (in der Gruppe) / 24
   (zwischen zwei zu) / 38 (nach einer offenen Gruppe) — die Staffel,
   aus der man ohne Trennlinie liest, wo eine Gruppe anfaengt. Mit
   8px-Zeilen waeren daraus 16/16/34 geworden: "in der Gruppe" und
   "zwischen zwei Gruppen" exakt gleich weit, die Gruppierung weg.
   Oben auf 0, unten auf 24 ergibt wieder 14/16/38. */
.tillit-drawer__sub-inner {
  min-height: 0;
  overflow: hidden;
  visibility: hidden;
  padding: 0 var(--tillit-drawer-gutter) 24px;
  transition: visibility 0s 0.45s;
}

.tillit-drawer__group.is-open .tillit-drawer__sub-inner {
  visibility: visible;
  transition: visibility 0s;
}

.tillit-drawer__sublink {
  position: relative;
  display: block;
  width: fit-content;
  padding: 6px 0;
  line-height: 1.45;
  font-size: 1.1rem;
  letter-spacing: -0.014em;
  text-decoration: none;
  /* Ink wie im Panel; der Hover ist ausschliesslich die Linie. */
  color: var(--tbh-ink);

  /* Eigene Blende (2026-08-20). Vorher war die Klappe der EINZIGE
     Enthuellungsmechanismus: die Unterpunkte standen auf Deckkraft 1
     und wurden von der wachsenden Grid-Zeile freigeschnitten. Fuer
     die Zeilen weiter unten geht das auf — der wachsende Block ist
     ihr Kontext. Der ERSTE Unterpunkt hat den nicht: gemessen wipete
     "Alle <Gruppe>" zwischen t=22ms und t=156ms bei voller Deckkraft
     herein, als die Klappe erst bei 41,8px von 367px stand (11%).
     Eine Zeile Text schnappt gegen Nichts an, bevor das Aufklappen
     sichtbar begonnen hat.
     Jetzt blendet jeder Unterpunkt selbst auf — die Verzoegerungen
     liegen so, dass keiner bei voller Deckkraft freigeschnitten
     wird: der erste startet bei .12s, da hat die Klappe ihn laengst
     passiert und er steht noch bei ~4% Deckkraft. */
  opacity: 0;
  transform: translateY(8px);
  transition:
    opacity 0.32s cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 0.38s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.tillit-drawer__group.is-open .tillit-drawer__sublink {
  opacity: 1;
  transform: none;
  transition-delay: calc(0.12s + min(var(--tillit-sub-i, 0), 11) * 0.03s);
}

.tillit-drawer__sublink::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(50% - var(--tillit-underline-font, 0.365em) - var(--tillit-underline-gap, 0.17em));
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.tillit-drawer__sublink:hover::after,
.tillit-drawer__sublink:focus-visible::after {
  transform: scaleX(1);
  transform-origin: left;
}

/* Die Gruppen-Uebersicht als erster Unterpunkt: gleiche Stimme
   wie die uebrigen Unterpunkte (kein Uppercase, keine Mono).
   Steht ohne eigene Farbe da — sie fuehrt die Liste an, das
   genuegt als Auszeichnung. */

/* !important ist hier kein Schlendrian, sondern die einzige
   Moeglichkeit: das Werk setzt
     :focus-visible { outline:none !important;
                      box-shadow:inset 0 0 0 2px #059ef8;
                      border-radius:3px; }
   (styles.css 371). Gegen ein !important hilft keine Spezifitaet.
   Der Ersatzring des Werks ist ein blauer Inset-Schatten — der
   braucht kein !important, unsere Spezifitaet genuegt, aber er muss
   weg, sonst stehen zwei Ringe uebereinander. Am Live-Shop
   gegengeprueft (2026-08-21, Injektionstest): ohne diese Regel traegt
   jeder Drawer-Punkt den blauen Werksring. */
.tillit-drawer a:focus-visible,
.tillit-drawer button:focus-visible {
  outline: 2px solid var(--tbh-ink) !important;
  outline-offset: -2px;
  box-shadow: none;
  border-radius: 0;
}

@media (prefers-reduced-motion: reduce) {
  .tillit-drawer,
  .tillit-drawer.is-open,
  .tillit-drawer__scroll > *,
  .tillit-drawer.is-open .tillit-drawer__scroll > *,
  .tillit-drawer-scrim,
  .tillit-drawer__scroll,
  .tillit-drawer__row svg,
  .tillit-drawer__sub,
  .tillit-drawer__sublink,
  .tillit-drawer__group.is-open .tillit-drawer__sublink,
  .tillit-drawer__row-label::after,
  .tillit-drawer__sublink::after,
  .tillit-drawer__title::after {
    transition: none;
  }
}

/* ============================================================
   VORSCHAU-BRUECKE  (NICHT transferieren)
   Lokal ist das Logo eine Inline-SVG; im Shop ist #logo ein
   Backend-Hintergrundbild. Fuer den Floating-Modus braucht der
   Shop stattdessen einen Bildwechsel auf eine Weiss-Variante:
   body:has(.sh-page) #logo { background-image: url(...weiss...) }
   ============================================================ */

/* Nebenzeile der Replik: Mono-Stimme, minimal (Gegenstueck zur
   Shop-Regel oben; .tpv-* existiert nur in der Vorschau) */
.tpv-side {
  gap: 1.1rem;
}

.tpv-side__links {
  gap: 1rem;
  font-family: var(--tbh-mono);
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tbh-muted);
}

.tpv-cart svg {
  width: 19px;
  height: 19px;
}

.tpv-cart__text {
  display: none;
}

body:has(.sh-page) .tillit-nav__logo-ink {
  fill: #ffffff;
}

body:has(.sh-page) .tillit-nav__label {
  color: var(--tbh-on-ink-muted);
}

body:has(.sh-page) .tillit-nav__label::before {
  background: rgba(255, 255, 255, 0.3);
}

body:has(.sh-page) .tpv-search__icon,
body:has(.sh-page) .tpv-mobileicons,
body:has(.sh-page) .tpv-cart {
  color: #ffffff;
}

body:has(.sh-page) .tpv-side__links {
  color: var(--tbh-on-ink);
}

body:has(.sh-page) .tpv-burger {
  border-color: rgba(255, 255, 255, 0.4);
}

body:has(.sh-page) .tpv-burger span {
  background: #ffffff;
}