/* ==========================================================================
   SCHAKAL SPORTS — Layout: Ankündigung, Kopf, Fuß, Warenkorb-Schublade
   ========================================================================== */

/* --- Grundnavigation ohne Skript ----------------------------------------
   Kopf- und Fußzeile dieser Website entstehen in ui.js, aus einer Quelle.
   Der Preis dafür wäre, dass ohne Skript kein einziger interner Link im
   Markup stünde — weder für Leser noch für Suchmaschinen, die nicht
   rendern. Die Liste in jeder Seite schließt die Lücke. Sie ist im
   Normalfall unsichtbar und wird von mountChrome() entfernt; die
   noscript-Regel im Kopf jeder Seite blendet sie ein, wenn kein Skript
   läuft. Deshalb steht hier display:none und nicht etwa ein Versteck über
   Position — sichtbar ist sie genau dann, wenn sie gebraucht wird. */
#nav-static {
  display: none;
  padding: var(--s-5) var(--gutter);
  border-bottom: 1px solid var(--line);
  background: var(--surface);
  font-family: var(--f-mono);
  font-size: .76rem;
  letter-spacing: .04em;
  line-height: 2.2;
}
#nav-static a {
  color: var(--fg-mute);
  margin-right: var(--s-5);
  white-space: nowrap;
  text-decoration: underline;
  text-underline-offset: .22em;
}
#nav-static a:hover { color: var(--fg); }

/* --- Ankündigungsleiste -------------------------------------------------
   Bleibt beim Weiterlesen stehen, während die Kopfzeile darunter wegtaucht:
   das Angebot ist auf jeder Seite und in jeder Scrollposition erreichbar. */
/* Auf der Akzentfläche, seit dem 26.8.2026.

   Sie trug das Angebot schon vorher — in `--fg-mute` auf `--surface`, also
   in der leisesten Auszeichnung, die die Seite hat. Genau darauf bezog sich
   der Betreiber, als er am 26.8.2026 sagte, das Paket im Auftakt werde
   übersehen: Beide Stellen, die es nennen, waren zurückhaltend.

   Eine Leiste in der Akzentfarbe ist der billigste Hebel der ganzen Seite —
   2,4 rem hoch, auf jeder Seite, in jeder Scrollposition, und sie trägt
   genau einen Satz. Der Kontrast ist gerechnet: `--bone` auf `--accent`
   kommt auf 5,2:1, der durchgestrichene Vergleichspreis mit 90 % Deckkraft
   auf 4,6 — beides über den verlangten 4,5. */
.announce {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--announce-h);
  z-index: 91;
  background: var(--accent);
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 70%, #000);
  display: flex;
  align-items: center;
}
.announce__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
  font-family: var(--f-mono);
  font-size: .68rem;
  letter-spacing: .06em;
  color: color-mix(in srgb, var(--bone) 90%, transparent);
  line-height: 1;
}
.announce__deal {
  display: flex;
  align-items: center;
  gap: .6rem;
  min-width: 0;
  transition: color var(--t-fast) var(--ease);
  /* Die Trefferfläche wächst, die Leiste nicht: gemessen war der Link auf
     390 px nur 19 px hoch — unter den 24 px, die WCAG 2.5.8 für ein
     Bedienelement verlangt. Ein höheres `announce__bar` wäre der falsche
     Hebel: Es schöbe den Auftaktknopf unter die Falz, und der steht dort
     seit dem 16.8.2026 gerade eben drüber (683 von 710 px).
     Polster nach außen, Rand zurück — die Zeile bleibt, wo sie war. */
  padding-block: .34rem;
  margin-block: -.34rem;
}
.announce__lang, .announce__kurz { white-space: nowrap; }
.announce__lang { display: none; }
@media (min-width: 700px) {
  .announce__lang { display: inline; }
  .announce__kurz { display: none; }
}
.announce__deal:hover { color: var(--bone); }
.announce__deal b { color: var(--bone); font-weight: 600; }
.announce__deal s { color: color-mix(in srgb, var(--bone) 90%, transparent); }
.announce__deal svg {
  width: .8rem; height: .8rem; flex-shrink: 0;
  transition: transform var(--t-med) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .announce__deal:hover svg { transform: translateX(.25rem); }
}
/* Umgekehrt, seit die Leiste selbst die Akzentfläche trägt: Ein roter Chip
   auf rotem Grund wäre unsichtbar. Helle Fläche, Akzentschrift — dieselbe
   Umkehrung wie der Ersparnis-Chip im Auftakt. */
.announce__tag {
  flex-shrink: 0;
  padding: .3rem .5rem;
  border-radius: var(--r-voll);
  background: var(--bone);
  color: var(--accent);
  font-size: .6rem;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  line-height: 1;
}
.announce__nb {
  flex-shrink: 0;
  color: color-mix(in srgb, var(--bone) 82%, transparent);
  display: none;
}
@media (min-width: 900px) { .announce__nb { display: block; } }

/* --- Kopfzeile ---------------------------------------------------------- */
/* Kopfzeile. Sie weicht beim Abwärtslesen und kommt beim Zurückscrollen
   wieder — auf dem Handy die häufigste Bewegung der ganzen Seite, ein paar
   Dutzend Mal je Besuch. Deshalb sind Hin- und Rückweg verschieden lang:
   Das Wegfahren ist eine Nebensache und darf sich Zeit lassen, das
   Zurückkommen ist die Antwort auf eine Geste und muss da sein, bevor der
   Daumen zur Ruhe kommt. Zurück ist deshalb die kürzere Zeit. */
.hdr {
  position: fixed;
  top: var(--announce-h); left: 0; right: 0;
  z-index: 90;
  border-bottom: 1px solid transparent;
  transition:
    transform .22s var(--ease-out),
    background var(--t-med) var(--ease),
    border-color var(--t-med) var(--ease);
}
.hdr.is-stuck {
  background: var(--glass);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  border-bottom-color: var(--line);
}
.hdr.is-hidden { transform: translateY(-100%); transition-duration: .34s; }

/* Drei Felder: Menü links, Marke in der Mitte, Symbole rechts — auf Wunsch
   des Kunden am 19.8.2026.

   Die beiden Seitenfelder stehen auf `flex: 1 1 0`, nicht auf
   `justify-content: space-between`. Das ist der ganze Punkt einer
   zentrierten Marke: Bei `space-between` bestimmt die breitere Seite, wo
   die Mitte liegt — rechts stehen drei Symbole, links ein Knopf, die Marke
   säße also gut vierzig Pixel neben der Fenstermitte. Mit gleicher
   Flex-Basis sind beide Felder exakt gleich breit, und die Marke steht
   dort, wo das Auge sie sucht.

   Wird es zu eng, wächst das Feld mit dem breiteren Inhalt über seinen
   Anteil hinaus — die Marke rutscht dann ein paar Pixel zur Seite, statt
   dass etwas überlappt. Der Selbsttest misst beides. */
.hdr__bar {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  height: 4.5rem;
}
@media (min-width: 1080px) { .hdr__bar { height: 5.25rem; } }

.hdr__seite { display: flex; align-items: center; flex: 1 1 0; }
.hdr__seite--rechts { justify-content: flex-end; }

/* Ein Symbolknopf trägt Luft um sein Zeichen. Bündig zum Textrand gehört
   das Zeichen, nicht die Knopffläche — sonst steht der Warenkorb sichtbar
   weiter innen als jede Überschrift darunter. Der Ausgleich gibt nebenbei
   14 px an die Marke zurück, und die braucht sie auf 360 px Breite. */
.hdr__seite--links  { margin-left: -.45rem; }
.hdr__seite--rechts { margin-right: -.45rem; }

/* Der Schakalkopf ist schwarz gezeichnet. Bis zum 10.8.2026 stand er
   unverändert auf dem Anthrazit von Kopf- und Fußbereich und war dort
   schlicht unsichtbar — sichtbar war nur der Schriftzug daneben. Eine
   Regel für alle Stellen, in der die Fassung entscheidet, ob umgekehrt
   wird: --logo-filter. */
.marke { filter: var(--logo-filter); }

/* Bis zum 19.8.2026 stand hier der Schriftzug als Archivo-Text nachgebaut.
   Die Marke hat eine eigene Zeichnung — die, die auf den Handschuhen steht
   — und die lag seit dem 4.8. ungenutzt im Projekt. Jetzt steht sie da.

   Die Breite ist gedeckelt, nicht die Höhe: Die Zeichnung ist 4,41 : 1, und
   in einer Leiste ist die Breite das knappe Gut. */
.hdr__logo { display: flex; align-items: center; gap: .6rem; flex: 0 0 auto; }
.hdr__logo-wort { width: clamp(6rem, 32vw, 9.5rem); height: auto; }
/* Der Schakalkopf kommt erst dazu, wenn er nicht auf Kosten der Wortmarke
   geht. Auf 390 px teilen sich Knopf, Marke und drei Symbole 350 px — dort
   ist der Kopf das Element, das gehen kann, ohne dass ein Name verloren
   geht. Er steht auf jeder Seite als Favicon und im Auftakt. */
.hdr__logo-kopf { display: none; width: 1.9rem; height: auto; }
@media (min-width: 600px) { .hdr__logo-kopf { display: block; } }

/* --- Umschalter Hell/Dunkel ---------------------------------------------
   Beide Zeichen liegen übereinander; gewechselt wird über Deckkraft, Drehung
   und einen kurzen Weichzeichner. Der Weichzeichner ist kein Zierat: Ohne
   ihn sieht man während der Blende zwei getrennte Formen übereinander, mit
   ihm liest sich derselbe Wechsel als eine Verwandlung. */
.theme-btn { overflow: hidden; }
.theme-btn__zeichen {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  transition:
    opacity .2s var(--ease),
    transform .34s var(--ease-out),
    filter .24s var(--ease);
}
.theme-btn__zeichen svg { width: 1.1rem; height: 1.1rem; stroke-width: 1.6; }
/* Hell: die Sonne steht, der Mond wartet unter der Kante */
.theme-btn__zeichen--mond  { opacity: 0; transform: translateY(60%) rotate(-35deg); filter: blur(3px); }
.theme-btn__zeichen--sonne { opacity: 1; transform: none; filter: none; }
/* Dunkel: umgekehrt. Am Zustand des Knopfes, nicht am Wurzelelement —
   so stimmt die Anzeige auch, solange nur das System dunkel steht. */
.theme-btn[aria-pressed='true'] .theme-btn__zeichen--sonne { opacity: 0; transform: translateY(-60%) rotate(35deg); filter: blur(3px); }
.theme-btn[aria-pressed='true'] .theme-btn__zeichen--mond  { opacity: 1; transform: none; filter: none; }
.theme-btn:active { transform: scale(.94); }
.theme-btn { transition: color var(--t-fast) var(--ease), transform .14s var(--ease-out); }
/* Die sieben Navigationslinks standen bis zum 19.8.2026 ab 940 px offen in
   der Leiste. Sie beanspruchten damit genau den Platz, an dem jetzt die
   Marke steht — beides zusammen geht nicht. Sie stehen seitdem im Menü,
   auf jedem Gerät, und der Knopf dafür trägt am Schreibtisch das Wort
   dazu. */
.hdr__actions { gap: var(--s-2); }

/* Auf 390 px teilen sich Knopf, Marke und Symbole 350 px. Mit drei Symbolen
   rechts und einem Knopf links sind die beiden Seiten zwangsläufig ungleich
   — die Marke stand damit gemessene 10,8 px neben der Mitte, und bei einer
   zentrierten Marke ist genau das der Fehler, den man sieht.

   Von den drei Symbolen ist das Konto das einzige, das nichts weiter tut,
   als auf eine gewöhnliche Seite zu führen — es gehört damit ins Menü, wo
   die Seiten stehen. Der Umschalter und der Warenkorb sind Werkzeuge und
   bleiben, wo der Daumen sie sucht. Damit sind beide Seiten gleich breit,
   die Marke steht exakt mittig und darf dabei von 97 auf 125 px wachsen. */
.hdr .hdr__konto { display: none; }
.mnav__konto { display: flex; align-items: center; gap: .5rem; }
.mnav__konto svg { width: 1.05rem; height: 1.05rem; stroke-width: 1.6; }
@media (min-width: 600px) {
  .hdr .hdr__konto { display: grid; }
  .mnav .mnav__konto { display: none; }
}

.icon-btn {
  width: 2.5rem; height: 2.5rem;
  border-radius: var(--r-2);
  display: grid; place-items: center;
  color: var(--fg-mute);
  position: relative;
  transition: color var(--t-fast) var(--ease);
}
.icon-btn:hover { color: var(--fg); }
.icon-btn svg { width: 1.15rem; height: 1.15rem; stroke-width: 1.6; }
/* Seit dem Umschalter stehen vier Symbole nebeneinander. Auf einem schmalen
   Gerät wurde daraus einmal ein Knopf von 34 px Kantenlänge — unter jeder
   Empfehlung für ein Tippziel und spürbar daneben, wenn man ihn mit dem
   Daumen sucht.

   Nachgemessen auf 390 px: Zwischen Logo und Symbolreihe standen 55 px
   ungenutzt. Die Knöpfe dürfen also breiter sein; in der Höhe erst recht,
   dort ist die Leiste 72 px hoch. Die Fläche wächst damit von 34 × 34 auf
   42 × 44 — sichtbar bleibt dasselbe Symbol, gewachsen ist nur das, was
   den Finger trifft. */
@media (max-width: 420px) {
  .icon-btn { width: 2.6rem; height: 2.75rem; }
  .hdr__actions { gap: 0; }
}

.cart-count {
  position: absolute;
  top: .3rem; right: .28rem;
  min-width: 1.05rem; height: 1.05rem;
  padding-inline: .22rem;
  border-radius: var(--r-voll);
  background: var(--accent);
  color: var(--bone);
  font-family: var(--f-mono);
  font-size: .62rem;
  font-weight: 500;
  display: grid; place-items: center;
  /* Nicht aus dem Nichts: Bei scale(0) erscheint die Zahl aus einem Punkt,
     und das sieht man auch — ein Ding, das es vorher nicht gab. Von .5 mit
     Deckkraft gestartet, wirkt dieselbe Bewegung wie ein Aufblähen. */
  transform: scale(.5);
  opacity: 0;
  transition: transform .26s var(--ease-out), opacity .18s var(--ease);
}
.cart-count.is-on { transform: scale(1); opacity: 1; }
/* Der Ausschlag ist die Quittung für „liegt im Korb" und nichts weiter: Er
   war mit einer halben Sekunde und Faktor 1,45 länger und größer als das,
   was er quittiert. */
.cart-count.is-bump { animation: cartBump .32s var(--ease-out); }
@keyframes cartBump {
  0%, 100% { transform: scale(1); }
  38%      { transform: scale(1.3); }
}

/* Menüknopf. Die drei Striche stehen absolut in der Mitte und werden von
   dort aus verschoben — vorher lagen sie im Fluss und wurden zum Kreuzen um
   feste .47 rem zurückgeschoben. Der tatsächliche Abstand beträgt aber
   12,5 px (0,78 rem), und er hängt an der Knopfgröße: Unter 420 px Breite
   schrumpft der Knopf von 2,5 auf 2,15 rem. Die beiden Striche trafen sich
   deshalb nie — statt eines Kreuzes stand dort ein Pfeil.

   Aus der Mitte heraus gerechnet stimmt es in jeder Größe, und bewegt wird
   ausschließlich transform. */
/* Seit dem 19.8.2026 ist dieser Knopf die einzige Navigation — auch am
   Schreibtisch. Deshalb steht dort das Wort daneben: Drei Striche allein
   sind auf einem 1440 px breiten Bildschirm keine Menüzeile, sondern eine
   Vermutung. Die Striche liegen dafür in einem eigenen Feld; lägen sie
   weiter absolut in der Knopfmitte, stünden sie im breiten Knopf hinter
   der Beschriftung. */
.burger { display: flex; align-items: center; justify-content: center; gap: .5rem; }
.burger__striche { position: relative; display: block; width: 1.15rem; height: 1.15rem; }
.burger__txt {
  display: none;
  font-family: var(--f-mono);
  font-size: .72rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  line-height: 1;
}
@media (min-width: 940px) {
  .burger { width: auto; padding-inline: .6rem .75rem; }
  .burger__txt { display: block; }
}
.burger__striche span {
  position: absolute;
  top: 50%; left: 50%;
  width: 1.15rem; height: 1.5px;
  background: currentColor;
  transition: transform .3s var(--ease-out), opacity var(--t-fast) var(--ease);
}
.burger__striche span:nth-child(1) { transform: translate(-50%, calc(-50% - .42rem)); }
.burger__striche span:nth-child(2) { transform: translate(-50%, -50%); }
.burger__striche span:nth-child(3) { transform: translate(-50%, calc(-50% + .42rem)); }
.burger.is-open .burger__striche span:nth-child(1) { transform: translate(-50%, -50%) rotate(45deg); }
/* Der mittlere Strich zieht sich zusammen, statt bloß zu verblassen —
   sonst sieht man ihn an Ort und Stelle verschwinden. */
.burger.is-open .burger__striche span:nth-child(2) { opacity: 0; transform: translate(-50%, -50%) scaleX(.3); }
.burger.is-open .burger__striche span:nth-child(3) { transform: translate(-50%, -50%) rotate(-45deg); }

/* Mobiles Menü ------------------------------------------------------------
   Zu- und Aufgehen sind nicht dasselbe. Bis zum 11.8.2026 stand hier nur
   die Aufblende, und das Zugehen war deshalb kaputt: `visibility` sprang
   ohne Verzögerung auf `hidden`, während die clip-path-Blende noch 550 ms
   vor sich hatte. Das Menü verschwand also schlagartig — die einzige große
   Bewegung, die ein Handy von dieser Seite überhaupt zu sehen bekommt, war
   ausgerechnet in der Hälfte der Fälle gar keine. Die Schublade nebenan
   macht es seit jeher richtig; hier steht jetzt dieselbe Lösung.

   Dazu die Asymmetrie: Öffnen ist die Ankündigung und darf sich entfalten,
   Schließen ist die Antwort auf einen Tipp und muss weg sein, bevor man
   darüber nachdenkt. */
.mnav {
  position: fixed;
  inset: 0;
  background: var(--bg);
  z-index: 85;
  /* Unten die Systemleiste mitrechnen: Die Fläche reicht seit dem
     19.8.2026 bis an die Kante — auf einem iPhone läge die Adresse sonst
     unter der Streifenleiste. */
  padding: calc(5.5rem + var(--announce-h)) var(--gutter)
           max(var(--s-5), env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  clip-path: inset(0 0 100% 0);
  visibility: hidden;
  transition: clip-path .3s var(--ease-out), visibility 0s .3s;
}
.mnav.is-open {
  clip-path: inset(0 0 0 0);
  visibility: visible;
  transition: clip-path .46s var(--ease-out), visibility 0s;
}
/* Sieben Einträge, ein Fuß und eine feste Fläche: Auf einem 789 px hohen
   Fenster standen 112 px davon unter der Kante — darunter der letzte Punkt
   und die Adresse. Und weil das Menü den Seitenhintergrund sperrt
   (body overflow hidden), war dort nichts zu erreichen: kein abgeschnittener
   Anblick, sondern zwei Ziele, die es nicht gab.

   Das ist älter als der Umbau vom 19.8.2026 und fiel nur nicht auf, solange
   die sieben Punkte am Schreibtisch offen in der Leiste standen. Jetzt sind
   sie die Navigation. */
/* Seit dem 27.8.2026 scrollt es nicht mehr, sondern passt.

   Der Unterschied ist grundsätzlich: `overflow-y: auto` war ein Netz für
   den Fall, dass die Zeilen nicht hineinpassen — und ein Netz, das man
   sieht, ist ein Fehler. Der Betreiber am 27.8.: „Man soll direkt, wenn
   man aufm Handy ist, alle Punkte sehen."

   Jetzt teilt die Liste den vorhandenen Platz unter ihren Einträgen auf
   (`flex: 1 1 0`). Was übrig ist, ist übrig; was fehlt, wird gleichmäßig
   abgezogen. Damit muss keine Zahl im Stilblatt stimmen — ein neunter
   Menüpunkt passt genauso wie der achte, ohne dass hier etwas nachgeführt
   werden müsste. Genau das war am 24.8.2026 der Fehler: getippte Werte
   für sieben Zeilen, und der achte lief unten heraus. */
.mnav { overflow: hidden; overscroll-behavior: contain; }

/* Das Netz bleibt — aber nur dort, wo kein Hochformat hinkommt: Ein
   Telefon quer hat rund 390 px Höhe, und dafür ist diese Liste nicht
   gebaut. Die Schwelle liegt weit unter 620 px, dem Bereich, den die
   Adressleiste überstreicht (siehe Theme 2.0.0). */
@media (max-height: 480px) {
  .mnav { overflow-y: auto; }
  .mnav__item { flex: 0 0 auto; }
}
/* Am Schreibtisch ist das Menü keine Notlösung mehr, sondern die
   Navigation. Über die volle Breite eines 1440-px-Fensters gezogen wären
   sieben Zeilen eine Zeile Text und viel Nichts; begrenzt und größer
   gesetzt sind sie eine Seite. */
/* Der Zwischenraum rechnet aus der Zahl der Einträge — bei sieben ergibt
   er --s-2 (8 px), bei acht 7 px. Siehe --nav-n in renderHeader(). */
/* Die Liste nimmt, was zwischen Kopfpolster und Fuß übrig ist, und teilt
   es. Kein `gap` mehr: Der Abstand entsteht aus der Verteilung, und ein
   fester Wert würde ihr genau den Platz nehmen, den sie verteilen soll. */
.mnav__list { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; gap: 0; }

.mnav__item {
  border-bottom: 1px solid var(--line);
  overflow: hidden;
  /* Gleiche Höhe für alle, und alle schrumpfen zusammen. `min-height: 0`
     gehört dazu — ohne das schrumpft ein Flex-Element nie unter seinen
     Inhalt, und die Liste liefe wieder über. */
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  align-items: center;
}
.mnav__item a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-4);
  width: 100%;
  /* Das Polster ist jetzt der Mindestabstand, nicht die Zeilenhöhe: Die
     kommt aus der Verteilung. */
  padding-block: clamp(.2rem, calc(4svh / var(--nav-n, 7)), .8rem);
  font-family: var(--f-display);
  font-weight: 800;
  font-stretch: 112%;
  /* Die Größe hängt an beiden Achsen UND an der Zahl der Zeilen: Acht
     Zeilen müssen in dieselbe Höhe wie vorher sieben. Bei --nav-n: 7 sind
     das rechnerisch wieder 7vw und 4.2vh — die Fassung vom 19.8.2026,
     unverändert. */
  font-size: clamp(1.15rem, min(calc(49vw / var(--nav-n, 7)), calc(29.4svh / var(--nav-n, 7))), 2.4rem);
  text-transform: uppercase;
  letter-spacing: -.02em;
  transform: translateY(110%);
  /* Zugehen ohne Staffelung: Beim Öffnen ist die Reihe nacheinander der
     Aufbau, beim Schließen wäre sie ein Nachzügler, der noch läuft, wenn
     die Fläche längst weg ist. */
  transition: transform .26s var(--ease-out);
  transition-delay: 0s;
}
/* Die Staffelung rechnet aus --i, das die Zeile selbst mitbringt. Vorher
   standen hier sechs nth-child-Regeln — bei sieben Einträgen lief der
   siebte ohne Verzögerung und damit als allererster ein. Eine Liste, die
   von unten nach oben aufbaut, sieht man; suchen muss man den Grund. */
.mnav.is-open .mnav__item a {
  transform: none;
  transition-duration: .5s;
  transition-delay: calc(.06s + var(--i, 0) * .04s);
}
.mnav__item .label { font-size: .62rem; }
/* Der Fuß kam bisher ohne Übergang mit — er stand einfach da, sobald die
   Fläche aufzog, während darüber noch die Zeilen einliefen. Er ist der
   Schlusspunkt der Reihe und kommt deshalb nach ihr. */
.mnav__foot {
  display: flex; flex-direction: column; gap: var(--s-3);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .2s var(--ease), transform .2s var(--ease-out);
}
.mnav.is-open .mnav__foot {
  opacity: 1; transform: none;
  transition: opacity .4s var(--ease) .24s, transform .45s var(--ease-out) .24s;
}

/* Am Schreibtisch ist das Menü seit dem 19.8.2026 keine Notlösung mehr,
   sondern die Navigation. Über die volle Breite eines 1440-px-Fensters
   gezogen wären sieben Zeilen viel Nichts mit etwas Text am Rand; begrenzt
   und größer gesetzt sind sie eine Seite.

   Die Größe hängt an der Fenster*höhe*, nicht an der Breite: Sieben Zeilen
   müssen untereinander passen, und wie breit das Fenster ist, hilft dabei
   nicht. Ein flaches 16:9-Fenster ist genau der Fall, in dem eine an vw
   gekoppelte Schrift am größten wäre und am wenigsten Platz hätte. */
@media (min-width: 940px) {
  .mnav__list, .mnav__foot { max-width: 44rem; width: 100%; margin-inline: auto; }
}

/* --- Fußzeile -----------------------------------------------------------
   **Logo, Rechtliches, Copyright.** Der fünfspaltige Fuß mit Markentext,
   Social-Konten, vier Linkgruppen und zehn Zahlungssymbolen ist am
   7.9.2026 entfallen — Begründung in `ui.js` bei `renderFooter()`.

   Er war auf dem Telefon 1786 px hoch, ein Fünftel jeder Seite, und
   listete überwiegend Seiten auf, die schon im Menü stehen. Was bleibt,
   steht nirgends sonst.

   Eine Anordnung für alle Größen: Auf dem Telefon untereinander und
   linksbündig, ab 640 px legt sich alles in eine Zeile. Kein zweites
   Layout, das mitwandern müsste.                                          */
.ftr {
  background: var(--surface);
  border-top: 1px solid var(--line);
}
.ftr__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-5);
  padding-block: var(--s-7);
}
.ftr__mark { display: inline-flex; }
.ftr__mark img { width: 2.6rem; height: auto; opacity: .9; }

/* Die Rechtslinks als Zeile mit Trennpunkten. `row-gap` trägt den Umbruch
   auf schmalen Geräten, ohne dass die Punkte am Zeilenanfang landen. */
.ftr__recht {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3) var(--s-5);
}
.ftr__recht a {
  color: var(--fg-mute);
  font-size: .9rem;
  transition: color var(--t-fast) var(--ease);
}
.ftr__recht a:hover { color: var(--fg); }

.ftr__legal {
  font-family: var(--f-mono);
  font-size: .68rem;
  letter-spacing: .06em;
  color: var(--fg-faint);
}

@media (min-width: 640px) {
  /* Logo links, Rechtslinks daneben, Copyright rechts außen. */
  .ftr__inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-6);
  }
  .ftr__recht { flex: 1; justify-content: center; }
}

/* --- Warenkorb-Schublade ------------------------------------------------ */
.scrim {
  position: fixed; inset: 0;
  background: var(--scrim);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  opacity: 0; visibility: hidden;
  transition: opacity var(--t-med) var(--ease), visibility var(--t-med);
  z-index: 95;
}
.scrim.is-on { opacity: 1; visibility: visible; }

.drawer {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: min(27rem, 100vw);
  background: var(--surface);
  border-left: 1px solid var(--line);
  border-radius: var(--r-4) 0 0 var(--r-4);
  z-index: 96;
  transform: translateX(101%);
  /* Geschoben allein reicht nicht: Sie stand danach zwar außerhalb des Bildes,
     blieb aber sichtbar im Sinne des Browsers — und damit lagen drei
     bedienbare Schaltflächen in der Tabulatorreihenfolge, die niemand sehen
     konnte. Zugleich meldet sie aria-hidden="true", eine Vorlesehilfe sagt
     dazu also gar nichts. visibility nimmt sie aus beidem heraus; die
     Verzögerung lässt das Zufahren zu Ende laufen. Die Maßlinie daneben
     (.scrim, .mnav) macht es seit jeher so. */
  visibility: hidden;
  /* Sichtbar sofort, unsichtbar erst nach dem Zufahren — sonst verschwände
     sie schlagartig, statt hinauszufahren. */
  transition: transform .48s var(--ease-out), visibility 0s .48s;
  display: flex;
  flex-direction: column;
}
.drawer.is-open {
  transform: none;
  visibility: visible;
  transition: transform .48s var(--ease-out), visibility 0s;
}
.drawer__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--s-5) var(--s-5) var(--s-4);
  border-bottom: 1px solid var(--line);
}
.drawer__body { flex: 1; overflow-y: auto; padding: var(--s-5); }
.drawer__foot { border-top: 1px solid var(--line); padding: var(--s-5); display: flex; flex-direction: column; gap: var(--s-4); }

.cart-line {
  display: grid;
  grid-template-columns: 4.5rem 1fr auto;
  gap: var(--s-4);
  padding-block: var(--s-4);
  border-bottom: 1px solid var(--line);
  align-items: start;
}
.cart-line__img {
  aspect-ratio: 1;
  padding: .28rem;
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  background: var(--stage);
}
.cart-line__name { font-weight: 500; font-size: .92rem; line-height: 1.35; }
.cart-line__meta { font-family: var(--f-mono); font-size: .68rem; color: var(--fg-faint); letter-spacing: .06em; margin-top: .3rem; }
.cart-line__price { font-family: var(--f-mono); font-size: .85rem; font-variant-numeric: tabular-nums; }
.cart-line__rm {
  font-family: var(--f-mono); font-size: .64rem; letter-spacing: .1em;
  color: var(--fg-faint); text-transform: uppercase; margin-top: .45rem;
  transition: color var(--t-fast) var(--ease);
  /* Gemessen 77 x 19 px auf 390 px Breite — unter den 24 px, die WCAG
     2.5.8 für ein Bedienelement verlangt. Und das ist keine Nebenrolle:
     Wer eine Zeile aus dem Korb nehmen will und danebentippt, ändert
     stattdessen die Menge — der Stepper liegt in derselben Zeile.
     Das Polster liegt innen, die Zeile bleibt gleich hoch. */
  padding-block: .35rem;
  margin-top: .1rem;
}
.cart-line__rm:hover { color: var(--accent-br); }

.cart-empty { text-align: center; padding-block: var(--s-9); color: var(--fg-faint); }
.cart-empty img { width: 3.5rem; margin: 0 auto var(--s-5); opacity: .22; }

/* Mengensteuerung in der Korbzeile */
.cart-line__unten { display: flex; align-items: center; gap: var(--s-4); margin-top: .55rem; }
.qty--klein { border-color: var(--line); }
.qty--klein button { width: 1.75rem; height: 1.75rem; font-size: .9rem; line-height: 1; }
.qty--klein .qty__wert {
  min-width: 1.5rem; display: grid; place-items: center;
  font-family: var(--f-mono); font-size: .78rem; font-variant-numeric: tabular-nums;
}

/* Fortschritt bis zum kostenfreien Versand — der stärkste Hebel im Korb */
.cart-ship {
  display: flex; flex-direction: column; gap: .5rem;
  padding-bottom: var(--s-4);
  border-bottom: 1px solid var(--line);
}
.cart-ship__txt { font-size: .82rem; color: var(--fg-mute); line-height: 1.4; }
.cart-ship__txt b { color: var(--fg); font-family: var(--f-mono); font-weight: 500; }
.cart-ship__bahn {
  display: block; height: 3px; border-radius: var(--r-voll);
  background: var(--line-2); overflow: hidden;
}
.cart-ship__bahn i {
  display: block; height: 100%; width: 100%; background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .5s var(--ease-out);
}
.cart-ship.is-voll .cart-ship__bahn i { background: var(--ok); }
.cart-ship__ph { font-family: var(--f-mono); font-size: .6rem; color: var(--fg-faint); letter-spacing: .06em; }

/* Was noch fehlt — mit Weg, es direkt dazuzulegen */
.cart-add {
  margin-top: var(--s-5);
  padding-top: var(--s-4);
  border-top: 1px solid var(--line);
  display: flex; flex-direction: column; gap: var(--s-3);
}
.cart-add__tip { font-size: .82rem; line-height: 1.5; color: var(--fg-mute); }
.cart-add__tip a { color: var(--accent-br); text-decoration: underline; text-underline-offset: .18em; }
.cart-add__zeile {
  display: grid;
  grid-template-columns: 2.6rem minmax(0, 1fr) auto;
  gap: var(--s-3);
  align-items: center;
  padding: var(--s-3);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  background: var(--bg);
}
.cart-add__zeile img {
  width: 100%; aspect-ratio: 1; object-fit: contain; padding: .15rem;
  filter: drop-shadow(0 0 1.5px rgba(237, 233, 227, calc(var(--rim, 0) * var(--rim-mul))));
}
.cart-add__txt { display: flex; flex-direction: column; gap: .2rem; min-width: 0; }
.cart-add__txt b { font-size: .84rem; font-weight: 500; line-height: 1.25; }
.cart-add__txt .label { font-size: .6rem; }
.cart-add__btn {
  padding: .45rem .7rem;
  border: 1px solid var(--line-2);
  border-radius: var(--r-2);
  font-family: var(--f-mono); font-size: .64rem;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--fg); line-height: 1; white-space: nowrap;
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.cart-add__btn:hover { background: var(--accent); border-color: var(--accent); color: var(--bone); }
.cart-add__btn.is-done { background: var(--ok); border-color: var(--ok); color: var(--on-ok); }

.drawer__weiter {
  font-family: var(--f-mono); font-size: .68rem;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--fg-faint); padding: .3rem 0;
  transition: color var(--t-fast) var(--ease);
}
.drawer__weiter:hover { color: var(--fg); }

.drawer__zahl {
  font-family: var(--f-mono); font-size: .58rem;
  letter-spacing: .08em; color: var(--fg-faint); text-align: center;
}

.cart-total {
  display: flex; align-items: baseline; justify-content: space-between;
  font-family: var(--f-mono); font-variant-numeric: tabular-nums;
}
.cart-total strong {
  font-family: var(--f-preis);
  font-size: 1.35rem; font-weight: 600; letter-spacing: -.02em;
}

/* Flug-Element beim Hinzufügen */
.fly {
  position: fixed;
  z-index: 94;
  pointer-events: none;
  /* Freisteller fliegen ohne Rahmen — sonst reist ein leerer Kasten mit */
  object-fit: contain;
  transform-origin: center;
  /* Genau die beiden Eigenschaften, die sich ändern. `all` nahm auch
     Breite, Höhe und Position mit — und die stehen hier als Inline-Werte
     fest, wurden also über die volle Flugdauer sinnlos beobachtet. */
  transition:
    transform .72s cubic-bezier(.5, -.15, .75, .55),
    opacity .72s var(--ease);
}