/* ══════════════════════════════════════════════════════════════════════════
 * entdecken.css — die eine Webspace-Seite (/entdecken, bis 09.09.2026 /webspace)
 *
 * WAS SIE ERSETZT
 *   Bis zum 25.08.2026 hatte jedes der fuenf Pakete eine eigene Seite
 *   (webspace-xs … webspace-xl) mit eigener CSS-Datei — zusammen 190 KB
 *   Stil fuer fuenf Varianten desselben Produkts. Wer XS und M vergleichen
 *   wollte, musste zwei Seiten oeffnen und im Kopf behalten.
 *   Diese Datei traegt EINE Seite, auf der alle fuenf Groessen liegen.
 *
 * DER MASSSTAB
 *   Das eine Zeichen dieser Seite. Eine Messleiste mit fuenf Stopps —
 *   Held, Navigation und Auswahl in einem Stueck. Sie erscheint im
 *   Aufmacher, faehrt beim Bildlauf nach oben in die Leiste und bleibt
 *   dort. Ein Stopp gewaehlt, und jede Zahl der Seite folgt.
 *
 *   Die Stopps liegen GLEICH weit auseinander, nicht nach Speicher
 *   gewichtet: der Massstab misst, WELCHE Groesse, nicht WIE VIEL. Wie
 *   viel steht in Szene 02, und dort sind die Balken massstabsgetreu —
 *   10 GB neben 300 GB ist ein Stummel, und genau das ist die Wahrheit.
 *
 * NUR HELL
 *   Auftrag Fabrizio, 25.08.2026. Es gibt keinen `[data-theme="dark"]`-Zweig
 *   in dieser Datei; die Seite setzt `data-theme="light"` fest und raeumt
 *   den gespeicherten Wunsch weg. Wer hier einen Dunkelzweig ergaenzt,
 *   ergaenzt ihn ins Leere, solange das im HTML so steht.
 *
 * SCHRIFTREGEL — WAS MONO IST, IST GEMESSEN
 *   --tq-ui traegt die Sprache, --tq-mono traegt die Zahlen. Seit dem Abend
 *   des 2026-08-30 steht hinter beiden dieselbe Schrift (SF Pro); den
 *   Unterschied macht dort `tabular-nums`, Versalien und Laufweite, nicht
 *   mehr die Familie. Davor: Inter und --tq-mono, davor Instrument Sans und
 *   JetBrains Mono.
 *   Jede Zahl, die ein Versprechen ist (Speicher, Domains, Postfaecher,
 *   Datenbanken, Sicherungen), steht in Mono mit `tabular-nums`. Prosa
 *   nie. Das ist keine Dekoration: es sagt dem Auge, was nachgemessen ist
 *   und was erzaehlt wird.
 *
 * KEINE VERLAEUFE
 *   Bewusst. Ein Verlauf haette hier nur die Aufgabe, Flaeche zu fuellen.
 *   Die Seite arbeitet mit Papier, Nebel, Haarlinien und EINER Farbe.
 * ══════════════════════════════════════════════════════════════════════════ */

.wsp {
  /* ── Farbe ─────────────────────────────────────────────────────────────
     Sechs Werte plus die zwei Markenblau. --w-blau ist das Logo-Blau und
     darf FLAECHE, STRICH und SYMBOL sein; als Text faellt es mit 3.95:1
     durch (site.css, SHOP-22). Blauer TEXT ist immer --w-blau-t (7.89:1
     auf Weiss). Diese Trennung ist nicht kosmetisch — sie ist der Grund,
     warum es zwei Token gibt. */
  --w-papier:  #FFFFFF;
  --w-nebel:   #F4F5F7;
  --w-tinte:   #0E1216;
  --w-graphit: #565E68;
  /* #7C858F ergab auf Weiss 3,74:1 und auf --w-nebel 3,50:1 — unter der
     Schwelle 4,5:1, und damit schwaecher als das Blau, das dieselbe Datei
     als Textfarbe ausdruecklich verwirft. #667079 ergibt 5,05:1 auf Weiss
     und 4,63:1 auf --w-nebel. Beide nachgerechnet, nicht geschaetzt. */
  --w-leise:   #667079;
  --w-linie:   #DDE1E6;
  --w-linie-f: #EDEFF2;
  --w-blau:    #3F7FDF;
  --w-blau-t:  #1C4F9E;
  --w-blau-h:  #EDF3FD;

  --w-leiste: 52px;
  --w-mass:   56px;              /* Hoehe des Massstabs in der Leiste */
  --w-mass-max: 760px;           /* Breite der Messleiste im Aufmacher */
  --w-messe: 1120px;             /* Textbreite der Szenen */

  --w-feder: cubic-bezier(.22,.61,.36,1);

  background: var(--w-papier);
  color: var(--w-tinte);
  font-family: var(--tq-ui);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}

/* ── Reset, und warum jede Zeile davon in `:where()` steht ────────────────
   Der Auftritt setzt global `section{padding:96px 0}` (site.css). Ohne
   Reset kaeme der Wert ZUSAETZLICH oben drauf und jede Szene waere 192 px
   zu hoch — die Falle steht in CLAUDE.md unter den harten Regeln.

   Der Reset selbst war dann aber die naechste Falle. `.wsp section` wiegt
   (0,1,1) und schlaegt damit `.wsp-szene` (0,1,0): am 26.08. gemessen
   standen SAEMTLICHE Szenenabstaende auf 0, die Ueberschrift der naechsten
   Szene klebte 11 px unter dem Text der vorigen. Dasselbe traf
   `.wsp p{margin:0}` gegen `.wsp-nachsatz`.

   `:where()` steuert keine Spezifitaet bei. Damit wiegt der ganze Reset
   0,0,0 und verliert gegen jede Klassenregel — genau das, was ein Reset
   tun soll. */
:where(.wsp section) { padding: 0; }

/* Jedes Sprungziel braucht Luft unter der festen 52-px-Leiste. Ohne
   `scroll-margin-top` landet ein angesprungener Abschnitt DAHINTER — der
   Sprunglink der Sequenz, die Anker der Empfehlung und jeder Verweis auf
   die Tabelle zeigten sonst auf eine halb verdeckte Ueberschrift. */
.wsp [id], .wsp-seq__lauf { scroll-margin-top: calc(var(--w-leiste) + 16px); }

.wsp *,
.wsp *::before,
.wsp *::after { box-sizing: border-box; }

:where(.wsp h1, .wsp h2, .wsp h3, .wsp p, .wsp ul, .wsp ol, .wsp figure) {
  margin: 0;
  padding: 0;
}
:where(.wsp ul, .wsp ol) { list-style: none; }

/* `:where()` steuert KEINE Spezifitaet bei — dieser Reset wiegt damit 0,0,0
   und verliert gegen jede Klassenregel.
   Ohne das Wrapping hiess die Regel `.wsp a` (0,1,1) und schlug damit
   `.wsp-leiste__cta` (0,1,0): der Bestellknopf stand schwarz auf schwarz,
   der Text war unsichtbar. Gemessen am 26.08. — `color` und
   `background-color` gaben beide `rgb(14, 18, 22)`. Es traf jeden Anker,
   der seine Farbe aus einer einzelnen Klasse holt (alle Knoepfe, die
   Tabellenschalter, die Wegweiser im Abschluss). */
:where(.wsp a) { color: inherit; text-decoration: none; }

/* Nur fuer Lesegeraete. Hier stand zuerst `class="visually-hidden"` — eine
   Klasse, die es in diesem Auftritt NICHT gibt: die Tabellenbeschriftung
   stand am 26.08. gross und sichtbar ueber der Tabelle. Eine angenommene
   Klasse ist keine Klasse. */
.wsp-nur-lesbar {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Sichtbarer Fokus ueberall. Die Seite hat viele Bedienelemente, die wie
   Text aussehen (Massstab-Stopps, Reiter) — ohne diesen Ring ist sie mit
   der Tastatur nicht bedienbar. */
.wsp :focus-visible {
  outline: 2px solid var(--w-blau);
  outline-offset: 3px;
  border-radius: 3px;
}
/* Die generische Fokusregel (0,2,0) setzt border-radius 3px und zerdrueckte
   damit die Pillenform der Stopps im Fokus (11 px -> 3 px, Review 30.08.) —
   frueher folgenlos, weil die Stopps rahmenlos waren. Die Leisten-Pille war
   nur durch Quellreihenfolge verschont. Beide Radien hier ausdruecklich
   nachgezogen, (0,2,1) schlaegt (0,2,0) in jeder Reihenfolge. */
.wsp .wsp-mass__stopp:focus-visible { border-radius: 11px; }
.wsp .wsp-mass--leiste .wsp-mass__stopp:focus-visible { border-radius: 8px; }

/* ══════════════════════════════════════════════════════════════════════════
 * LEISTE
 * Eine feste Zeile, 52 px. Sie traegt links die Wortmarke, rechts den
 * Bestellknopf — und in der Mitte, sobald der Aufmacher durch ist, den
 * Massstab. Die Seite hat sonst keine Kopfzeile: der Auftritts-Header mit
 * Produkte-Menue wuerde hier mit dem Massstab um dieselbe Zeile streiten.
 * ══════════════════════════════════════════════════════════════════════════ */
.wsp-leiste {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 60;
  height: var(--w-leiste);
  display: grid;
  /* Die Mitte bekommt eine echte Breite, keine `auto`-Spalte. Die Stopps des
     Massstabs liegen absolut und tragen darum nichts zur Eigenbreite bei —
     in einer `auto`-Spalte fiel die ganze Messleiste am 26.08. auf wenige
     Pixel zusammen und alle fuenf Beschriftungen lagen uebereinander. */
  grid-template-columns: 1fr minmax(0, 460px) 1fr;
  align-items: center;
  gap: 16px;
  padding: 0 clamp(14px, 3vw, 30px);
  background: rgba(255,255,255,.78);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  backdrop-filter: saturate(180%) blur(16px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s var(--w-feder), background .3s var(--w-feder);
}
/* Die Linie kommt erst, wenn wirklich etwas darunter liegt — im Aufmacher
   wuerde sie den Massstab dort unten doppeln. */
.wsp-leiste.ist-unterwegs {
  border-bottom-color: var(--w-linie);
  background: rgba(255,255,255,.86);
}

/* Die drei Kinder sind fest verankert. Ohne diese Zeilen entscheidet die
   Auto-Platzierung — und die zaehlt nur Elemente, die WIRKLICH Gitterkinder
   sind. Fiel die Mitte per `display:none` weg, rutschte der Bestellknopf in
   Spalte 2 und stand am 26.08. mitten in der Seite. Eine Lage, die von der
   Anwesenheit eines Nachbarn abhaengt, ist keine Lage. */
.wsp-leiste__logo   { grid-column: 1; display: inline-flex; align-items: center; }
.wsp-leiste__mitte  { grid-column: 2; min-width: 0; display: flex; justify-content: center; }
.wsp-leiste__rechts { grid-column: 3; display: flex; justify-content: flex-end; }

.wsp-leiste__logo img { display: block; height: 21px; width: auto; }

.wsp-leiste__cta {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 32px;
  padding: 0 15px;
  border-radius: 999px;
  background: var(--w-tinte);
  color: #fff;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -.006em;
  white-space: nowrap;
  transition: background .18s var(--w-feder), transform .18s var(--w-feder);
}
.wsp-leiste__cta:hover { background: #000; transform: translateY(-1px); }
.wsp-leiste__cta:active { transform: translateY(0); }

/* ══════════════════════════════════════════════════════════════════════════
 * DER MASSSTAB
 *
 * Aufbau (beide Fassungen teilen ihn):
 *   .wsp-mass          Rahmen
 *   .wsp-mass__schiene die Linie mit den feinen Zwischenstrichen
 *   .wsp-mass__laeufer die blaue Marke, die auf den gewaehlten Stopp faehrt
 *   .wsp-mass__stopp   fuenf Knoepfe, gleich weit auseinander
 *
 * Der Laeufer wird ueber `--w-pos` (0…4) gesetzt, nicht ueber eine Klasse
 * je Stopp: so bleibt die Bewegung stetig und es gibt nur EINE Stelle,
 * die die Lage kennt.
 * ══════════════════════════════════════════════════════════════════════════ */
.wsp-mass {
  --w-pos: 2;
  --w-stopps: 6;   /* 08.09.2026: sechs Paketgroessen (Web-XXS kam dazu) */
  position: relative;
  width: 100%;
  max-width: var(--w-mass-max);
  user-select: none;
  /* Die aeussersten Beschriftungen sitzen MITTIG unter ihrer Marke, wie auf
     einem echten Massstab die 0 unter dem Nullstrich. Dafuer braucht die
     Leiste links und rechts Luft, sonst haengt die halbe Beschriftung
     hinaus. Die Luft steht hier und nicht als Sonderregel an den beiden
     Stopps: buendig gestellte Randbeschriftungen waren der erste Versuch,
     und der ergab am 26.08. eine Abweichung von 17 px (XS) und 20 px (XL)
     zwischen Beschriftung und Marke. Ein Massstab, dessen Zahl neben ihrem
     Strich steht, misst nichts. */
  padding: 0 20px;
}

/* Schiene: eine Haarlinie mit Teilstrichen. Die Teilstriche sind ein
   wiederholter Verlauf — 40 feine Striche ueber die Breite, wie auf einem
   Stahlmassstab. Sie tragen keine Bedeutung, sie geben dem Ding sein
   Material. */
.wsp-mass__schiene {
  position: relative;
  height: 30px;
  margin: 0 0 2px;
}
.wsp-mass__schiene::before {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--w-linie);
}
.wsp-mass__schiene::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 1px;
  height: 6px;
  background-image: repeating-linear-gradient(
    to right,
    var(--w-linie-f) 0 1px,
    transparent 1px calc(100% / 40)
  );
  background-size: calc(100% / 40) 100%;
}

/* Der Laeufer. `left` in Prozent der Stoppabstaende, `translateX(-50%)`
   zentriert ihn ueber dem Stopp. Die Feder ist bewusst kurz und ohne
   Nachschwingen: eine Messmarke, die nachwippt, sieht nach Spielzeug aus. */
.wsp-mass__laeufer {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 2px;
  height: 22px;
  background: var(--w-blau);
  border-radius: 1px;
  /* `left` zu animieren hiess 420 ms lang Layout je Bild — und das zweimal,
     weil die Leiste eine zweite Messleiste traegt. `translateX` ist reiner
     Verbund. Der Weg ist derselbe: Anteil mal Spanne, minus die halbe
     Strichbreite. */
  transform: translateX(calc(var(--w-pos) * (var(--w-mass-spanne, 0px) / (var(--w-stopps) - 1)) - 1px));
  transition: transform .42s var(--w-feder);
}
.wsp-mass__laeufer::before {
  content: '';
  position: absolute;
  top: -5px;
  left: 50%;
  width: 9px;
  height: 9px;
  margin-left: -4.5px;
  border-radius: 50%;
  background: var(--w-blau);
}
/* WARUM DIE STOPPS ABSOLUT LIEGEN UND NICHT IN EINEM GITTER
   Hier stand zuerst `grid-template-columns: repeat(5, 1fr)`. Das sah
   richtig aus und war es nicht: die Mitte einer von fuenf gleichen Zellen
   liegt bei 10/30/50/70/90 %, der Laeufer aber bei 0/25/50/75/100 %.
   Getroffen hat sich das nur in der Mitte — bei 1440 px stand die
   S-Beschriftung 37 px neben ihrer eigenen Marke. Auf einem Massstab ist
   das kein Schoenheitsfehler, sondern eine falsche Ablesung.
   Jetzt rechnet die Beschriftung mit derselben Formel wie der Laeufer.
   `--w-i` setzt das Skript je Stopp. */
.wsp-mass__stopps {
  position: relative;
  height: 46px;
}
/* DIE STOPPS SIND TASTER UND SEHEN JETZT SO AUS.
   Bis zum 30.08.2026 waren sie nackter Mono-Text unter der Linie — von einer
   Achsenbeschriftung nicht zu unterscheiden. Dass ein Klick die ganze Seite
   umstellt, war unsichtbar (Befund Fabrizio). Jetzt traegt jeder Stopp eine
   Haarlinien-Pille: ein Bedienelement darf wie eines aussehen. Der Ruhe-
   zustand bleibt leise (Haarlinie auf Papier), der Zeiger dunkelt den Rand,
   die Wahl fuellt die Pille mit dem hellen Blau. Kein Hover-`transform`:
   `translateX(-50%)` traegt die Lage, ein zweiter transform wuerfe sie um. */
.wsp-mass__stopp {
  position: absolute;
  top: 0;
  left: calc(var(--w-i, 0) * (100% / (var(--w-stopps) - 1)));
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 7px 12px 6px;
  background: var(--w-papier);
  border: 1px solid var(--w-linie);
  border-radius: 11px;
  cursor: pointer;
  font-family: inherit;
  color: var(--w-leise);
  white-space: nowrap;
  transition: color .22s var(--w-feder), border-color .22s var(--w-feder),
              background .22s var(--w-feder);
}

.wsp-mass__kurz {
  font-family: var(--tq-mono);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: .1em;
  line-height: 1;
}
.wsp-mass__gb {
  font-family: var(--tq-mono);
  font-size: 10.5px;
  font-weight: 400;
  letter-spacing: .04em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  /* Hier stand `opacity: .72` — auf blossem Text war das Zurueckhaltung,
     auf der Taster-Pille drueckte es --w-leise unter 4,5:1. Die Hierarchie
     traegt die Groesse (10,5 gegen 12,5 px), nicht die Blaesse. */
}
.wsp-mass__stopp:hover { color: var(--w-tinte); border-color: var(--w-graphit); }
.wsp-mass__stopp[aria-selected="true"] {
  color: var(--w-blau-t);
  border-color: var(--w-blau);
  background: var(--w-blau-h);
}
.wsp-mass__stopp[aria-selected="true"] .wsp-mass__kurz { font-weight: 600; }

/* ── Der Wink ──────────────────────────────────────────────────────────────
   Die Sprechblase ueber dem gewaehlten Stopp. Sie beantwortet die eine
   Frage, die die Seite bisher offen liess: dass man hier waehlen kann.
   Dunkle Pille wie der Bestellknopf — dunkel heisst in diesem Auftritt
   «hier passiert etwas». Sie haengt am Laeufer (dieselbe Formel, dieselbe
   Spanne) und verschwindet mit der ersten eigenen Wahl (`wsp--gewaehlt`).
   Zwei Knoten, ein Grund: der aeussere traegt die LAGE (translateX), der
   innere die BEWEGUNG (Auftritt, Tupfen) — auf einem Knoten wuerde die
   Animation den Positions-transform ueberschreiben und die Blase spraenge
   an den linken Rand. */
.wsp-mass__wink {
  position: absolute;
  bottom: calc(100% + 13px);
  left: 0;
  transform: translateX(calc(var(--w-pos) * (var(--w-mass-spanne, 0px) / (var(--w-stopps) - 1)))) translateX(-50%);
  transition: transform .42s var(--w-feder),
              opacity .3s var(--w-feder), visibility 0s linear .3s;
  opacity: 0;
  visibility: hidden;
}
/* Unter ~940 px kann die am Laeufer haengende Blase bei #web-xs/#web-xl
   ueber den Viewportrand ragen — `.wsp` clippt, und ausgerechnet der
   Erklaertext waere verstuemmelt (Hash-Einstieg ueber geteilte Links ist
   der Normalfall: jede Handwahl schreibt ihn per replaceState). Darum
   haengt sie schmal in der SCHIENENMITTE: der Pfeil zeigt dann auf den
   Massstab als Ganzes statt auf den gewaehlten Stopp, aber der Satz ist
   vollstaendig — ein halber Satz erklaert nichts. */
@media (max-width: 939.98px) {
  .wsp-mass__wink { left: 50%; transform: translateX(-50%); }
}
.wsp--js:not(.wsp--gewaehlt) .wsp-mass[data-mass="aufmacher"] .wsp-mass__wink {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s, 0s, 0s;
}
/* Die Blase traegt das dunkle Knopf-Idiom des Auftritts und sagt
   «antippen» — dann muss ein Tipp AUF SIE auch etwas tun (Review 30.08.:
   mit pointer-events:none fiel er wortlos durch). entdecken.js raeumt sie
   bei einem Tipp ab: verstanden ist verstanden. */
.wsp-mass__wink-blase {
  display: inline-flex;
  align-items: center;
  height: 30px;
  padding: 0 14px;
  border-radius: 999px;
  background: var(--w-tinte);
  color: #fff;
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: -.006em;
  white-space: nowrap;
  cursor: pointer;
  position: relative;
  animation: wsp-wink-herein .5s var(--w-feder) 1.3s backwards,
             wsp-wink-tupf 2.8s ease-in-out 3.2s infinite;
}
.wsp-mass__wink-blase::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -3.5px;
  width: 8px;
  height: 8px;
  margin-left: -4px;
  background: var(--w-tinte);
  border-radius: 1px;
  transform: rotate(45deg);
}
@keyframes wsp-wink-herein {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}
/* Dasselbe ruhige Tupfen wie der «Weiter»-Pfeil — EIN Bewegungswortschatz,
   nicht zwei. */
@keyframes wsp-wink-tupf {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-3px); }
}
/* Die Blase braucht Luft ueber der Schiene — fest reserviert, damit beim
   Ausblenden nichts springt. Ohne Skript gibt es keine Blase und darum
   auch keine Luft. */
.wsp--js .wsp-auf__mass { padding-top: 50px; }

/* Die Klammer unter den beiden mittleren Stopps traegt «Unsere Empfehlung».
   Hier stand bis zum 27.08.2026 «Die meisten waehlen hier» — eine Aussage
   ueber Kundenverhalten, die niemand gemessen hatte. Nachgezaehlt in
   `user_products`: S und M sind 10 von 27 Buchungen, meistgebucht ist XS.
   Eine Empfehlung braucht keine Zahl; eine Beliebtheitsaussage schon. */
.wsp-mass__hinweis {
  position: relative;
  margin: 13px 0 0;
  height: 17px;
}
.wsp-mass__klammer {
  position: absolute;
  top: 0;
  left: calc(1 * (100% / 4));
  width: calc(100% / 4);
  height: 7px;
  border: 1px solid var(--w-linie);
  border-top: 0;
  border-radius: 0 0 6px 6px;
}
.wsp-mass__klammer-text {
  position: absolute;
  top: 8px;
  left: calc(1.5 * (100% / 4));
  transform: translateX(-50%);
  white-space: nowrap;
  font-family: var(--tq-mono);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--w-leise);
}

/* Fassung in der Leiste: flacher, ohne Zwischenstriche, ohne Klammer, ohne
   Wink. Die Pillen bleiben — kleiner, sonst sagt dieselbe Leiste oben etwas
   anderes als unten. */
.wsp-mass--leiste { max-width: 460px; }
.wsp-mass--leiste .wsp-mass__schiene { height: 13px; margin-bottom: 2px; }
.wsp-mass--leiste .wsp-mass__schiene::after { display: none; }
.wsp-mass--leiste .wsp-mass__laeufer { height: 9px; }
.wsp-mass--leiste .wsp-mass__laeufer::before { top: -4px; width: 7px; height: 7px; margin-left: -3.5px; }
.wsp-mass--leiste .wsp-mass__kurz { font-size: 11px; }
.wsp-mass--leiste .wsp-mass__gb { display: none; }
.wsp-mass--leiste .wsp-mass__hinweis { display: none; }
.wsp-mass--leiste .wsp-mass__wink { display: none; }
.wsp-mass--leiste .wsp-mass__stopps { height: 21px; }
.wsp-mass--leiste .wsp-mass__stopp { padding: 3px 8px 2px; border-radius: 8px; }
/* Die Leisten-Pillen sind ~19 px hoch — in einer 52-px-Leiste ist das
   44-px-Tippziel nicht zu holen, aber eine unsichtbare Trefferflaeche holt
   heraus, was da ist: ±9 px senkrecht, ±4 px waagrecht (die engste Luecke
   zwischen zwei Pillen misst bei 390 px genau 16 px — mehr, und zwei Ziele
   ueberlappten sich). */
.wsp-mass--leiste .wsp-mass__stopp::after {
  content: '';
  position: absolute;
  inset: -9px -4px;
}

/* Ohne Skript ist die Leisten-Fassung sinnlos (sie waehlt nichts aus) —
   und sie waere ein Bedienelement, das nicht bedient. Darum liegt sie im
   Grundzustand nicht da; `.wsp--js` holt sie herein. */
.wsp-leiste__mitte .wsp-mass {
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  /* `visibility: hidden` nimmt ihn auch aus der Tabulatorkette. Mit blosser
     `opacity: 0` blieb er fokussierbar: am Seitenanfang landete die
     Tabulatortaste auf einem unsichtbaren Bedienelement und der Fokusring
     stand im Nichts (am 27.08. gemessen). `pointer-events` allein hilft nur
     der Maus. Die Sichtbarkeit muss mit ueberblendet werden, sonst schaltet
     sie sofort statt weich. */
  visibility: hidden;
  transition: opacity .3s var(--w-feder), transform .3s var(--w-feder),
              visibility 0s linear .3s;
}
.wsp-leiste.ist-unterwegs .wsp-mass {
  opacity: 1;
  transform: none;
  pointer-events: auto;
  visibility: visible;
  transition-delay: 0s;
}
/* Ohne Skript liegt in der Mitte nichts — die Spur bekommt darum keine
   Breite. Der Halter selbst BLEIBT stehen (kein `display:none`), sonst
   waere er kein Gitterkind mehr und die Auto-Platzierung wuerde den
   Bestellknopf nach vorn ziehen. */
.wsp:not(.wsp--js) .wsp-leiste { grid-template-columns: 1fr 0 1fr; }

/* ══════════════════════════════════════════════════════════════════════════
 * SZENEN
 * Jede Szene ist eine Aussage. Abwechselnd Papier und Nebel — ohne
 * Trennlinie, der Farbwechsel ist die Trennung.
 * ══════════════════════════════════════════════════════════════════════════ */
.wsp-szene {
  position: relative;
  padding: clamp(76px, 11vh, 132px) clamp(20px, 5vw, 44px);
}
.wsp-szene--nebel { background: var(--w-nebel); }
.wsp-szene--eng   { padding-top: clamp(56px, 7vh, 88px); }

.wsp-buehne {
  width: 100%;
  max-width: var(--w-messe);
  margin: 0 auto;
}

/* ── Typo-Bausteine ──────────────────────────────────────────────────── */
/* Das Etikett ueber jeder Szene nennt, WAS hier gemessen wird und in
   welcher Einheit — «SPEICHER · GB», «ANSCHLUESSE · ANZAHL». Es ist damit
   die Achsenbeschriftung des Massstabs, nicht seine Nummerierung.
   Hier standen zuerst 01 · 02 · 03. Das war falsch: die Szenen sind keine
   Reihenfolge. Man kann Sicherungen vor dem Speicher lesen, ohne etwas zu
   verpassen — eine Nummer haette eine Abfolge behauptet, die es nicht gibt,
   und waere reine Zierde gewesen. Die Einheit dagegen sagt etwas Wahres.
   Der zweite Teil nach dem Mittelpunkt ist optional: wo nichts gemessen
   wird (Empfehlung, Tabelle), steht er nicht da. */
.wsp-augenbraue {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--tq-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--w-blau-t);
}
.wsp-augenbraue::before {
  content: '';
  width: 18px;
  height: 1px;
  background: var(--w-blau);
}
.wsp-augenbraue i {
  font-style: normal;
  font-weight: 400;
  color: var(--w-leise);
  letter-spacing: .13em;
}

/* ── Rhythmus im Szenenkopf ──────────────────────────────────────────────
   Ein Wert fuer alles liest sich wie eine Liste, nicht wie ein Text. Die
   Abstaende sagen darum, was zusammengehoert:
     11 px  Etikett -> Ueberschrift   (dasselbe Ding, nur zwei Zeilen)
     20 px  Ueberschrift -> Fliesstext (neue Stimme)
     12 px  Absatz -> Absatz          (derselbe Gedanke, weiter)
     16 px  -> Kleingedrucktes        (Nebenbemerkung, abgesetzt)
     ~48 px Kopf -> Inhalt der Szene  (jetzt kommt etwas anderes)
   Alle Werte stehen HIER, nicht als `style=` an den Elementen: ein
   Inline-Stil schlaegt jede Regel und macht die Skala unbrauchbar. */
.wsp-kopf { display: flex; flex-direction: column; align-items: flex-start; }
.wsp-kopf > .wsp-augenbraue + .wsp-h2 { margin-top: 11px; }
.wsp-kopf > .wsp-h2 + .wsp-text,
.wsp-kopf > .wsp-h2 + .wsp-lead { margin-top: 20px; }
.wsp-kopf > .wsp-text + .wsp-text { margin-top: 12px; }
.wsp-kopf > .wsp-text + .wsp-klein,
.wsp-kopf > .wsp-lead + .wsp-klein { margin-top: 16px; }
.wsp-kopf + * { margin-top: clamp(34px, 4.4vw, 58px); }

/* Ein Nachsatz UNTER dem Inhalt einer Szene steht weiter weg als ein
   Absatz und naeher als eine neue Szene. */
.wsp-nachsatz { margin-top: clamp(20px, 2.4vw, 28px); }

.wsp-h1 {
  /* 104px trug die alte, kurze Zeile («Sechs Groessen. Eine passt.»). Die
     Zeile vom 09.09.2026 ist mehr als doppelt so lang; bei 104px brach die
     zweite Haelfte um und liess «entscheiden.» allein auf einer dritten
     Zeile stehen. Gemessen und auf den Wert gesetzt, bei dem der Aufmacher
     wieder zwei Zeilen hat. */
  font-size: clamp(38px, 6.2vw, 78px);
  text-wrap: balance;
  font-weight: 600;
  line-height: .94;
  letter-spacing: -.045em;
  color: var(--w-tinte);
}
.wsp-h2 {
  font-size: clamp(30px, 4.6vw, 56px);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -.036em;
  color: var(--w-tinte);
}

.wsp-lead {
  font-size: clamp(17px, 1.85vw, 21px);
  font-weight: 400;
  line-height: 1.46;
  letter-spacing: -.008em;
  color: var(--w-graphit);
  max-width: 46ch;
}
.wsp-text {
  font-size: clamp(15px, 1.35vw, 16.5px);
  line-height: 1.62;
  color: var(--w-graphit);
  max-width: 58ch;
}
.wsp-klein {
  font-size: 13px;
  line-height: 1.55;
  color: var(--w-leise);
}

/* Jede gemessene Zahl. Mono, tabellarisch, damit beim Wechsel der Groesse
   nichts springt — proportionale Ziffern liessen die Zeile bei jedem
   Zaehlschritt zappeln. */


/* ══════════════════════════════════════════════════════════════════════════
 * 00 · AUFMACHER
 * ══════════════════════════════════════════════════════════════════════════ */
.wsp-auf {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: calc(var(--w-leiste) + 40px) clamp(20px, 5vw, 44px) 46px;
  gap: clamp(26px, 4vh, 44px);
}
.wsp-auf__kopf { display: flex; flex-direction: column; align-items: center; gap: 18px; }
.wsp-auf__wort {
  font-family: var(--tq-mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--w-leise);
}
/* 14ch war auf «Sechs Groessen.» geschnitten — genau die laengste Haelfte
   der alten Zeile. Die Zeile vom 09.09.2026 hat in ihrer laengeren Haelfte
   27 Zeichen; bei 14ch blieb der Buchse nichts uebrig, als dreimal
   umzubrechen. Gemessen: bei 698 px Blockbreite passen zwei Zeilen erst
   unter 62 px Schriftgrad — die Breite war das Problem, nicht der Grad. */
.wsp-auf .wsp-h1 { max-width: 26ch; }
.wsp-auf .wsp-lead { text-align: center; max-width: 38ch; }

.wsp-auf__mass {
  width: 100%;
  max-width: var(--w-mass-max);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.wsp-auf__hinab {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  font-family: var(--tq-mono);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--w-leise);
}
.wsp-auf__hinab svg { animation: wsp-tupf 2.4s var(--w-feder) infinite; }
@keyframes wsp-tupf {
  0%, 68%, 100% { transform: translateY(0); opacity: .5; }
  34%           { transform: translateY(5px); opacity: 1; }
}

/* ══════════════════════════════════════════════════════════════════════════
 * 01 · DIE LEBENDE KARTE
 * Der Beweis, dass der Massstab etwas tut. Links die Karte des gewaehlten
 * Pakets, rechts der Text, der erklaert, wie die Seite zu lesen ist.
 * ══════════════════════════════════════════════════════════════════════════ */
.wsp-waehl {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.06fr);
  gap: clamp(30px, 5vw, 72px);
  align-items: center;
}

.wsp-karte {
  position: relative;
  padding: clamp(26px, 3vw, 36px);
  border: 1px solid var(--w-linie);
  border-radius: 16px;
  background: var(--w-papier);
  box-shadow: 0 26px 60px -42px rgba(14,18,22,.42);
}
.wsp-karte__band {
  position: absolute;
  top: -11px;
  left: clamp(26px, 3vw, 36px);
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 11px;
  border-radius: 999px;
  background: var(--w-blau);
  color: #fff;
  font-family: var(--tq-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(3px);
  transition: opacity .3s var(--w-feder), transform .3s var(--w-feder);
}
.wsp-karte__band.ist-da { opacity: 1; transform: none; }

.wsp-karte__name {
  font-family: var(--tq-mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--w-blau-t);
}
.wsp-karte__satz {
  margin-top: 9px;
  font-size: clamp(21px, 2.4vw, 27px);
  font-weight: 500;
  line-height: 1.22;
  letter-spacing: -.024em;
  color: var(--w-tinte);
  min-height: 2.44em;
}

.wsp-karte__werte {
  margin-top: 24px;
  padding-top: 22px;
  border-top: 1px solid var(--w-linie-f);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px 18px;
}
/* «Quin+» ist ein Wort, keine Zahl — es darf nicht in der Zifferngroesse
   stehen, sonst liest es sich als Messwert. */
.wsp-wert__zahl--wort { font-size: clamp(19px, 1.9vw, 22px); letter-spacing: -.015em; }
/* `--w-linie` ist eine Rahmenfarbe (#DDE1E6) und als Text praktisch
   unsichtbar. Fuer Text ist `--w-leise` die schwaechste zulaessige Farbe. */
.wsp-wert__bez i { font-style: normal; color: var(--w-leise); white-space: nowrap; }

/* Die Konstanten stehen auf der Karte, damit «unbegrenztes Transfervolumen»
   nicht wie eine Stufe aussieht, die man kaufen muss. */
.wsp-karte__gleich {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--w-linie-f);
  font-size: 13px;
  line-height: 1.5;
  color: var(--w-leise);
}
.wsp-wert { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.wsp-wert__zahl {
  font-family: var(--tq-mono);
  font-variant-numeric: tabular-nums;
  font-size: clamp(24px, 2.6vw, 30px);
  font-weight: 500;
  letter-spacing: -.03em;
  line-height: 1;
  color: var(--w-tinte);
}
.wsp-wert__zahl i {
  font-style: normal;
  font-size: .52em;
  font-weight: 400;
  letter-spacing: .01em;
  margin-left: 2px;
  color: var(--w-graphit);
}
.wsp-wert__bez {
  font-size: 12.5px;
  line-height: 1.35;
  color: var(--w-leise);
}

.wsp-karte__fuss {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--w-linie-f);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.wsp-preis { display: flex; align-items: baseline; gap: 6px; }
.wsp-preis__waehrung {
  font-family: var(--tq-mono);
  font-size: 12.5px;
  font-weight: 400;
  letter-spacing: .06em;
  color: var(--w-leise);
}
.wsp-preis__zahl {
  font-family: var(--tq-mono);
  font-variant-numeric: tabular-nums;
  font-size: clamp(28px, 3vw, 34px);
  font-weight: 600;
  letter-spacing: -.035em;
  line-height: 1;
  color: var(--w-tinte);
}
.wsp-preis__takt { font-size: 13px; color: var(--w-graphit); }
/* Solange der Preis nicht aus der Datenbank da ist, steht hier nichts
   Falsches — nur ein Strich. Ein Platzhalterpreis waere eine Zahl, die
   niemand gemessen hat. */
/* Der Strich soll ein Strich SEIN, nicht verschwinden. `--w-linie` ist eine
   Rahmenfarbe (1,31:1 auf Weiss) — dieselbe Datei nennt sie weiter oben
   ausdruecklich «als Text praktisch unsichtbar». */
.wsp-preis--wartet .wsp-preis__zahl { color: var(--w-leise); }
.wsp-preis--wartet .wsp-preis__waehrung,
.wsp-preis--wartet .wsp-preis__takt { opacity: .4; }

.wsp-knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  padding: 0 22px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: var(--w-tinte);
  color: #fff;
  font-family: inherit;
  font-size: 14.5px;
  font-weight: 500;
  letter-spacing: -.008em;
  cursor: pointer;
  transition: background .18s var(--w-feder), transform .18s var(--w-feder);
}
.wsp-knopf:hover { background: #000; transform: translateY(-1px); }
.wsp-knopf:active { transform: translateY(0); }
.wsp-knopf--leise {
  background: transparent;
  color: var(--w-tinte);
  border-color: var(--w-linie);
}
.wsp-knopf--leise:hover { background: var(--w-nebel); border-color: var(--w-graphit); }


/* Der Rhythmus kommt aus `.wsp-kopf` — hier steht nur die Spaltenlage. */
.wsp-waehl__text { display: flex; flex-direction: column; justify-content: center; }

/* Der Haken in den Empfehlungslisten (Szene 07). Die Szenen 02–05 (Speicher,
   Vielfache, Quin, Sicherungen) sind am 27.08.2026 in der Umschaltung
   aufgegangen; ihre leeren Geruestkommentare standen hier noch bis zum
   30.08. und sind mit den letzten toten Selektoren ausgebaut. */
.wsp-haken { margin-top: 4px; color: var(--w-blau); }


/* ══════════════════════════════════════════════════════════════════════════
 * 06 · IN JEDEM PAKET GLEICH
 * ══════════════════════════════════════════════════════════════════════════ */
/* Die Trennlinien kommen aus dem GRUND des Rasters, den die Felder mit 1 px
   Luecke ueberdecken. Das traegt nur, solange die Felder das Raster restlos
   fuellen — bei acht Feldern in drei Spalten bleibt unten rechts eine Zelle
   frei, und die stand als volle graue Kachel da.
   Jetzt traegt jedes Feld seine eigenen Linien, und der Grund ist neutral.
   Damit ist die Zahl der Felder egal. */
.wsp-gleich {
  margin-top: clamp(34px, 4vw, 52px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(232px, 1fr));
  gap: 0;
  border-top: 1px solid var(--w-linie);
  border-left: 1px solid var(--w-linie);
}
.wsp-gleich__feld {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 24px 26px 26px;
  background: var(--w-nebel);
  border-right: 1px solid var(--w-linie);
  border-bottom: 1px solid var(--w-linie);
}
.wsp-szene--nebel .wsp-gleich__feld { background: var(--w-papier); }
.wsp-gleich__titel {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -.012em;
  color: var(--w-tinte);
}
.wsp-gleich__titel svg { color: var(--w-blau); flex: 0 0 auto; }
.wsp-gleich__text {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--w-graphit);
  padding-left: 26px;
}

/* ══════════════════════════════════════════════════════════════════════════
 * 07 · DIE EMPFEHLUNG — S oder M
 * Die einzige Szene mit einer Meinung. Sie steht spaet, nachdem die Zahlen
 * gezeigt wurden — eine Empfehlung vor den Fakten waere Verkauf, danach ist
 * sie eine Zusammenfassung.
 * ══════════════════════════════════════════════════════════════════════════ */
.wsp-zwei {
  margin-top: clamp(34px, 4vw, 52px);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 24px);
}
.wsp-tipp {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: clamp(26px, 3vw, 36px);
  border: 1px solid var(--w-linie);
  border-radius: 16px;
  background: var(--w-papier);
  transition: transform .3s var(--w-feder), box-shadow .3s var(--w-feder);
}
.wsp-tipp:hover { transform: translateY(-3px); box-shadow: 0 28px 56px -40px rgba(14,18,22,.4); }
/* Hiess bis 09.09.2026 `.wsp-tipp--m` — benannt nach dem Paket, das die
   Empfehlung damals trug. Als die Empfehlung auf S wanderte, haette die Klasse
   `--m` an der S-Karte gestanden. Der Modifikator meint die ROLLE, nicht das
   Paket, und heisst jetzt danach. */
.wsp-tipp--empfohlen { border-color: var(--w-blau); }
.wsp-tipp__nr {
  font-family: var(--tq-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--w-leise);
}
.wsp-tipp--empfohlen .wsp-tipp__nr { color: var(--w-blau-t); }
.wsp-tipp__name {
  font-size: clamp(30px, 3.4vw, 40px);
  font-weight: 600;
  letter-spacing: -.04em;
  line-height: 1;
  color: var(--w-tinte);
}
.wsp-tipp__fuer {
  font-size: clamp(16px, 1.6vw, 18px);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -.014em;
  color: var(--w-tinte);
}
.wsp-tipp__liste { display: flex; flex-direction: column; gap: 8px; }
.wsp-tipp__liste li {
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr);
  gap: 10px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--w-graphit);
}
.wsp-tipp__fuss {
  margin-top: auto;
  padding-top: 18px;
  border-top: 1px solid var(--w-linie-f);
  display: flex;
  align-items: center;
  gap: 12px;
}

/* ══════════════════════════════════════════════════════════════════════════
 * 08 · ALLE FUENF NEBENEINANDER
 * Die ehrliche Tabelle. Sie steht IMMER vollstaendig in der Seite — auch
 * ohne Skript, auch ohne Datenbank. Wer nur vergleichen will, braucht den
 * Massstab nicht.
 * ══════════════════════════════════════════════════════════════════════════ */
.wsp-tab-rahmen {
  margin-top: clamp(30px, 4vw, 46px);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--w-linie);
  border-radius: 14px;
  background: var(--w-papier);
}
.wsp-tab {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
  font-size: 14px;
}
.wsp-tab th, .wsp-tab td {
  padding: 13px 16px;
  text-align: right;
  border-bottom: 1px solid var(--w-linie-f);
  white-space: nowrap;
}
.wsp-tab thead th { border-bottom: 1px solid var(--w-linie); }
.wsp-tab tbody tr:last-child th,
.wsp-tab tbody tr:last-child td { border-bottom: 0; }

.wsp-tab th[scope="row"] {
  text-align: left;
  font-weight: 400;
  color: var(--w-graphit);
  white-space: normal;
  min-width: 176px;
}
.wsp-tab thead th[scope="col"] {
  font-family: var(--tq-mono);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--w-tinte);
  padding-top: 18px;
  padding-bottom: 15px;
}
.wsp-tab thead th:first-child { text-align: left; }
.wsp-tab td {
  font-family: var(--tq-mono);
  font-variant-numeric: tabular-nums;
  font-weight: 400;
  color: var(--w-tinte);
}
.wsp-tab .wsp-tab__spalte-aktiv { background: var(--w-blau-h); }
.wsp-tab thead th.wsp-tab__spalte-aktiv { color: var(--w-blau-t); }
/* Die Spaltenkoepfe WAEHLEN (entdecken.js) — das duerfen sie zeigen, statt es
   nur im Szenentext zu behaupten. Zeigerform kommt von hier und nicht mehr
   als Inline-Stil aus dem Skript: eine Quelle. Nur mit Skript (`wsp--js`),
   denn ohne Skript waehlt der Kopf nichts. Die gewaehlte Spalte behaelt
   ihr Blau — der Hover gilt den vier anderen. */
.wsp--js .wsp-tab thead th[data-p] {
  cursor: pointer;
  transition: background .18s var(--w-feder), color .18s var(--w-feder);
}
.wsp--js .wsp-tab thead th[data-p]:hover:not(.wsp-tab__spalte-aktiv) {
  background: var(--w-nebel);
  color: var(--w-blau-t);
}

.wsp-tab tfoot td, .wsp-tab tfoot th { border-top: 1px solid var(--w-linie); padding-top: 16px; padding-bottom: 18px; }
.wsp-tab__knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 34px;
  padding: 0 15px;
  border: 1px solid var(--w-linie);
  border-radius: 999px;
  font-family: var(--tq-ui);
  font-size: 13px;
  font-weight: 500;
  color: var(--w-tinte);
  transition: background .18s var(--w-feder), border-color .18s var(--w-feder);
}
.wsp-tab__knopf:hover { background: var(--w-nebel); border-color: var(--w-graphit); }
/* site.css unterstreicht jeden Anker in einer Tabellenzelle
   (`td a:not(.btn)`, 0-1-2) — richtig fuer einen Verweis im Fliesstext,
   falsch fuer einen Schalter mit Rahmen. Der Auftritt nimmt `.btn` als
   Ausnahme; die ganze `.btn`-Gestalt hier zu erben waere aber mehr, als
   gebraucht wird. Zwei Klassen wiegen (0-2-0) und genuegen.
   Die Verweise im Fliesstext dieser Seite bleiben absichtlich
   unterstrichen — das ist die Regel des Auftritts und gut so. */
.wsp .wsp-tab__knopf { text-decoration: none; }
.wsp-tab__knopf--empfohlen { background: var(--w-tinte); border-color: var(--w-tinte); color: #fff; }
.wsp-tab__knopf--empfohlen:hover { background: #000; border-color: #000; }

.wsp-tab-hinweis {
  margin-top: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  font-size: 12.5px;
  color: var(--w-leise);
}

/* ══════════════════════════════════════════════════════════════════════════
 * 09 · ABSCHLUSS
 * ══════════════════════════════════════════════════════════════════════════ */
.wsp-schluss {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
}
.wsp-schluss .wsp-lead { text-align: center; max-width: 44ch; }
.wsp-schluss__knoepfe {
  margin-top: 6px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}
.wsp-schluss__wege {
  margin-top: 30px;
  padding-top: 26px;
  border-top: 1px solid var(--w-linie);
  width: 100%;
  max-width: 640px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 20px;
}
.wsp-weg { display: flex; flex-direction: column; gap: 5px; text-align: center; }
.wsp-weg__titel {
  font-size: 14.5px;
  font-weight: 500;
  letter-spacing: -.012em;
  color: var(--w-blau-t);
}
.wsp-weg__text { font-size: 13px; line-height: 1.5; color: var(--w-leise); }

/* ══════════════════════════════════════════════════════════════════════════
 * BEWEGUNG
 *
 * Regel dieses Auftritts (14.08.2026): der unsichtbare Anfangszustand
 * gehoert an eine Klasse, die das Skript setzt — nie in den Grundzustand.
 * Ohne `.wsp--js` steht jede Szene fertig da.
 * ══════════════════════════════════════════════════════════════════════════ */
.wsp--js [data-auf] {
  opacity: 0;
  transform: translateY(16px);
}
.wsp--js [data-auf].ist-sichtbar {
  opacity: 1;
  transform: none;
  transition: opacity .62s var(--w-feder), transform .62s var(--w-feder);
  transition-delay: var(--w-verzug, 0ms);
}

/* Der Aufmacher laeuft beim Laden von selbst — er wartet nicht auf einen
   Bildlauf, den es dort noch nicht gab. */
.wsp--js .wsp-auf [data-auftakt] {
  opacity: 0;
  transform: translateY(18px);
  animation: wsp-herein .78s var(--w-feder) forwards;
  animation-delay: var(--w-verzug, 0ms);
}
@keyframes wsp-herein {
  to { opacity: 1; transform: none; }
}

/* Zahl im Wechsel: kurzes Aufblenden, damit der Sprung von 25 auf 60 als
   Wechsel gelesen wird und nicht als Fehler. */
.wsp-wechsel { animation: wsp-tick .34s var(--w-feder); }
@keyframes wsp-tick {
  0%   { opacity: .35; transform: translateY(-3px); }
  100% { opacity: 1;   transform: none; }
}

/* ══════════════════════════════════════════════════════════════════════════
 * DIE UMSCHALTUNG — die gepinnte Sequenz (27.08.2026)
 *
 * Sie ersetzt vier Szenen (Speicher, Vielfache, Assistent, Sicherungen).
 * Alle vier sagten dasselbe auf vier Arten.
 *
 * ARBEITSTEILUNG: JS SCHREIBT ZAHLEN, CSS RECHNET GEOMETRIE.
 * Das Skript setzt je Bild rund 16 einheitenlose Zahlen als Custom
 * Properties auf EINEN Knoten. Kein `left`, kein `width`, kein `height` —
 * alles Weitere macht `calc()` und `transform`. Damit kostet ein Bild eine
 * Layoutlesung (der Fortschritt) und sonst nur Verbund und Anstrich.
 *
 * WARUM DOM UND NICHT CANVAS.
 * Es sind rund 16 bewegte Knoten. Die teuerste Menge — 60 Teilstriche —
 * bewegt sich als VERLAUF, nicht als Knoten. Canvas lohnt ab etwa 300
 * unabhaengigen Objekten; hier haette es die Fliesstextschrift mit `tabular-nums`,
 * den Fokusring, die Textauswahl und eine zweite Ruhefassung gekostet.
 * (Gegenprobe vorher gemessen: 1200 gezeichnete Zellen kosten 0,64 ms bei
 * 16,7 ms Budget — Canvas KOENNTE es, es braucht es nur nicht.)
 * ══════════════════════════════════════════════════════════════════════════ */

.wsp-seq {

  padding-bottom: 0;
}

/* KEINE REISE MEHR — 09.09.2026.
   Bis dahin war der Lauf sechs Buehnenhoehen hoch und die Buehne darin
   `sticky`: eine gefuehrte Sequenz, die den Fortschritt aus der Scrollhoehe
   nahm. Gemessen am Bild bei 1512x809 hiess das mehrere Bildschirme, auf
   denen grosse Flaechen leer blieben — fuer EINEN Gedanken («gleich weit
   auseinander heisst nicht gleich viel»).
   Was bleibt, ist dasselbe Geraet mit demselben Wahlschalter: die frueher
   nur fuer schmale und kurze Fenster gebaute Ruhefassung ist jetzt die
   einzige. Sie war nie eine Notloesung — sie ist der Zustand, in dem alle
   sechs Stopps gleichzeitig auf ihren wahren Anteilen stehen. */
.wsp-seq__lauf {
  position: relative;
  height: auto;
}

.wsp-seq__buehne {
  position: static;
  height: auto;
  contain: none;
  display: grid;
  /* Fuenf benannte Zeilen fuer sechs Kinder — Befund und Schluss teilen
     sich eine. Mit `auto 1fr auto` (drei Zeilen, sechs Kinder) legte die
     Auto-Platzierung eigene Zeilen an, und die Senkrechte stimmte nicht. */
  /* `auto` statt `1fr` in der Mitte plus `align-content: center`: das
     Geraet steht damit als geschlossene Gruppe in der Buehnenmitte, statt
     dass eine 1fr-Zeile Leerraum ueber und unter dem Feld aufreisst. */
  grid-template-rows: auto auto auto auto auto;
  align-content: center;
  gap: clamp(12px, 2vh, 26px);
  padding: clamp(18px, 2.6vh, 36px) clamp(24px, 5vw, 72px) clamp(18px, 2.6vh, 32px);
  overflow: hidden;
}
.wsp-seq__kopf    { grid-row: 1; }
.wsp-seq__feld    { grid-row: 2; }
.wsp-seq__fenster { grid-row: 3; }

/* ── Kopf der Buehne ────────────────────────────────────────────────────── */
.wsp-seq__kopf {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
  /* Zwei Titelzeilen plus Marke plus Abstand messen rund 90 px; 3.4em waren
     bei 16 px Grundschrift nur 54. Die Zusicherung griff also nie, und die
     Buehne sprang um rund 18 px, sobald der Titel von zwei auf eine Zeile
     fiel. In `em` der eigenen Schriftgroesse gerechnet, nicht der geerbten. */
  min-height: calc(11px + 10px + 2 * 1.14 * clamp(20px, 2.6vw, 32px));
}
.wsp-seq__marke {
  font-family: var(--tq-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .19em;
  text-transform: uppercase;
  color: var(--w-blau-t);
}
.wsp-seq__titel {
  font-size: clamp(20px, 2.6vw, 32px);
  font-weight: 600;
  line-height: 1.14;
  letter-spacing: -.028em;
  color: var(--w-tinte);
  max-width: 22ch;
  text-wrap: balance;
}
/* Der Wechsel blendet, er faehrt nicht. Auf einer stehenden Buehne macht
   hereinfahrender Text die ganze Szene unruhig. */
.wsp-seq__marke, .wsp-seq__titel { transition: opacity .2s linear; }
.wsp-seq.ist-wechsel .wsp-seq__marke,
.wsp-seq.ist-wechsel .wsp-seq__titel { opacity: 0; }

/* ── Das Feld ───────────────────────────────────────────────────────────── */
.wsp-seq__feld {
  position: relative;
  align-self: center;
  width: 100%;
  height: clamp(140px, 22vh, 200px);
}

/* Die Schiene liegt DAUERHAFT auf voller Breite und wird gestaucht.
   `width` zu animieren hiesse Layout je Bild; `scaleX` ist reiner Verbund.
   --w-k faehrt von rund 0,53 (760 px im Aufmacher) auf 1. */
.wsp-seq__schiene {
  position: absolute;
  left: 0; right: 0;
  top: 50%;
  height: 22px;
  margin-top: -11px;
  transform: scaleX(var(--w-k, 1));
  transform-origin: center;
  border-bottom: 1px solid var(--w-linie);
}
/* Die Teilstriche als EIN Verlauf. Zwei Dinge muessen mit `--w-k` mitgehen:
   die Strichbreite (sonst wird sie bei k = 0,53 sub-pixel und die Schiene
   wirkt blass) und die Teilung (`background-size`). Beides ist Anstrich,
   kein Layout.
   Wichtig ist die TEILUNG, nicht der Strich: faellt der Abstand zweier
   Striche unter zwei Pixel, gibt es grauen Brei und wanderndes Moiré.
   Darum ist `--w-teilung` gedeckelt und wird schmal auf 6 gesetzt. */
.wsp-seq__schiene::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 1px;
  height: 100%;
  background-image: repeating-linear-gradient(
    to right,
    var(--w-linie) 0 calc(1px / var(--w-k, 1)),
    transparent calc(1px / var(--w-k, 1)) 100%);
  background-size: calc(100% / var(--w-teilung, 40)) 100%;
  transform: scaleY(var(--w-tiefe, .55));
  transform-origin: bottom;
  opacity: .55;
}

/* Die blaue Strecke vom Nullpunkt bis zur eigenen Groesse. */
.wsp-seq__strecke {
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  height: 2px;
  margin-top: -1px;
  background: var(--w-blau);
  transform-origin: left center;
  /* dieselbe Stauchung wie die Stopps, sonst endet die Strecke woanders */
  transform: translateX(calc((0.5 - 0.5 * var(--w-k, 1)) * var(--w-spanne, 0px)))
             scaleX(calc(var(--w-strecke, 0) * var(--w-k, 1)));
  opacity: var(--w-strecke-an, 0);
}

/* ── Die fuenf Stopps ──────────────────────────────────────────────────────
   `translateX(calc(anteil * spanne - 50%))` statt `left: %`: `left` waere
   fuenfmal Layout je Bild, `transform` ist Verbund.
   `--w-y` ist die Etikettenzeile — bei enger Teilung (Postfachgroesse legt
   XS, S und M exakt uebereinander) staffelt das Skript sie nach unten. */
.wsp-seq__stopps { position: absolute; inset: 0; }
/* JEDER STOPP TRAEGT SEINEN ANTEIL SELBST.
   Hier standen bis zum 09.09.2026 fuenf `:nth-child`-Zeilen, die `--w-a0` bis
   `--w-a4` von der Buehne auf die Stopps verteilten. Fuenf — die Generation
   davor hatte fuenf Groessen. Seit der Generation 2026 sind es SECHS, und der
   sechste Stopp fand keine Zeile: er fiel auf `var(--a, 0)` zurueck und lag
   damit auf dem Nullpunkt, also genau auf XXS. Am Bild las sich das als
   «XLXXS» ganz links, und die rechte Haelfte der Schiene hatte keine
   Beschriftung. Kein Fehler in der Konsole, nichts Rotes — eine Liste im
   Stylesheet, die stillschweigend zu kurz geworden war.
   Jetzt schreibt das Skript `--a` und `--w-y` direkt an den Stopp. Damit gibt
   es keine Laenge mehr, die veralten kann. */

.wsp-seq__stopp {
  position: absolute;
  left: 0;
  top: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  /* MIT DER SCHIENE STAUCHEN. Die Schiene faehrt in Takt 1 von rund 0,64
     auf 1 (`--w-k`); die Stopps rechneten aber immer mit der VOLLEN Spanne
     und standen dadurch bei der Ankunft weit ausserhalb der gestauchten
     Leiste. Der Ausdruck spiegelt die Stauchung um die Mitte — die
     Beschriftung selbst bleibt dabei unverzerrt, weil nicht skaliert,
     sondern verschoben wird. */
  transform: translate(calc((0.5 + (var(--a, 0) - 0.5) * var(--w-k, 1)) * var(--w-spanne, 0px) - 50%),
                       calc(-50% + var(--w-y, 0) * 1.35em));
}
/* Der erste und der letzte Stopp stehen auf 0 % und 100 %. Ihre NADEL muss
   dort stehen bleiben — ihre BESCHRIFTUNG haengt sonst zur Haelfte aus dem
   Feld heraus und wird abgeschnitten (auf 430 px war von «XL» nur noch «X»
   uebrig). Darum wandert nur das Etikett an die Kante, nicht der Strich. */
.wsp-seq__stopp:first-child .wsp-seq__kurz,
.wsp-seq__stopp:first-child .wsp-seq__wert { transform: translateX(50%); }
.wsp-seq__stopp:last-child  .wsp-seq__kurz,
.wsp-seq__stopp:last-child  .wsp-seq__wert { transform: translateX(-50%); }

.wsp-seq__nadel {
  width: 1px;
  height: 26px;
  background: var(--w-graphit);
  border-radius: .5px;
}
.wsp-seq__stopp.ist-ihre .wsp-seq__nadel { background: var(--w-blau); width: 2px; }
.wsp-seq__kurz {
  font-family: var(--tq-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .1em;
  color: var(--w-graphit);
  line-height: 1;
}
.wsp-seq__stopp.ist-ihre .wsp-seq__kurz { color: var(--w-blau-t); font-weight: 600; }
.wsp-seq__wert {
  font-family: var(--tq-mono);
  font-variant-numeric: tabular-nums;
  font-style: normal;
  font-size: 10.5px;
  color: var(--w-leise);
  line-height: 1;
  white-space: nowrap;
  opacity: var(--w-werte-an, 0);
}

/* ── Sechs Hauptmarken ─────────────────────────────────────────────────────
   Ihre Beschriftung ist `max * k/5` und wird vom Skript geschrieben. */
.wsp-seq__haupt {
  position: absolute;
  left: 0; right: 0;
  top: calc(50% + 46px);
  display: flex;
  justify-content: space-between;
  opacity: var(--w-haupt-an, 0);
  transition: opacity .3s var(--w-feder);
}
.wsp-seq__haupt span {
  font-family: var(--tq-mono);
  font-variant-numeric: tabular-nums;
  font-size: 10px;
  color: var(--w-leise);
  white-space: nowrap;
}
.wsp-seq__haupt span:first-child { transform: translateX(0); }
.wsp-seq__haupt span:last-child  { transform: translateX(0); }

/* ── Die Bedarfsmarke ──────────────────────────────────────────────────────
   Sie dreht die Aussage der Szene um. Ohne sie misst alles gegen XL, und
   XS waere ein Punkt am Nullpunkt — der Hoehepunkt der Verkaufsseite saehe
   dann so aus, als kaufe der Einstiegskunde nichts. Mit ihr liegt XS
   sichtbar beim Fuenffachen dessen, was eine Website mit Bildern braucht. */
.wsp-seq__bedarf {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translate(calc((0.5 + (var(--w-bedarf, 0) - 0.5) * var(--w-k, 1)) * var(--w-spanne, 0px)), -50%);
  opacity: var(--w-bedarf-an, 0);
  transition: opacity .45s var(--w-feder);
  pointer-events: none;
}
.wsp-seq__bedarf-strich {
  display: block;
  width: 1px;
  height: 54px;
  background: repeating-linear-gradient(to bottom,
    var(--w-graphit) 0 3px, transparent 3px 6px);
}
.wsp-seq__bedarf-wort {
  position: absolute;
  bottom: calc(100% + 5px);
  left: 0;
  font-family: var(--tq-mono);
  font-size: 9.5px;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--w-leise);
  white-space: nowrap;
}

/* ── Die Quin-Schwelle ─────────────────────────────────────────────────────
   Sie liegt ZWISCHEN zwei Stopps und behauptet damit keinen Wert. Ihre Lage
   kommt aus der Tabellenzelle «Assistent»: verschiebt die Datenbank die
   Schwelle auf L, wandert der Strich von allein. */
.wsp-seq__grenze {
  position: absolute;
  left: 0;
  top: 0; bottom: 0;
  transform: translateX(calc((0.5 + (var(--w-grenze, .5) - 0.5) * var(--w-k, 1)) * var(--w-spanne, 0px)));
  opacity: var(--w-grenze-an, 0);
  transition: opacity .4s var(--w-feder);
  pointer-events: none;
}
.wsp-seq__grenze-strich {
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 1px;
  background: var(--w-blau);
  opacity: .55;
}
.wsp-seq__grenze-links,
.wsp-seq__grenze-rechts {
  position: absolute;
  top: 2px;
  font-family: var(--tq-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .06em;
  white-space: nowrap;
  color: var(--w-leise);
}
.wsp-seq__grenze-links  { right: 9px; }
.wsp-seq__grenze-rechts { left: 9px; }
/* Ihre Seite ist die schwarze, die andere die graue. */
.wsp-seq[data-seite="links"]  .wsp-seq__grenze-links,
.wsp-seq[data-seite="rechts"] .wsp-seq__grenze-rechts { color: var(--w-tinte); }

/* ── Das Ablesefenster ─────────────────────────────────────────────────────
   EINE Zahl, und zwar Ihre — nicht eine Vorfuehrgroesse. Sonst waere die
   Sequenz ein Film statt ein Geraet. */
.wsp-seq__fenster {
  justify-self: center;
  display: grid;
  grid-template-columns: auto auto;
  align-items: baseline;
  column-gap: 7px;
  padding: 14px 22px 12px;
  border: 1px solid var(--w-linie);
  border-radius: 10px;
  background: var(--w-nebel);
  opacity: var(--w-fenster-an, 0);
  transition: opacity .35s var(--w-feder);
}
/* Waehrend des Bereichswechsels blasser, aber NICHT weg — der Rahmen haelt
   die Stelle, an der gleich wieder etwas steht. */
.wsp-seq__fenster-zahl, .wsp-seq__fenster-einheit, .wsp-seq__fenster-name {
  opacity: var(--w-fenster-blass, 1);
  transition: opacity .2s linear;
}
.wsp-seq__fenster-zahl {
  font-family: var(--tq-mono);
  font-variant-numeric: tabular-nums;
  font-size: clamp(30px, 4vw, 46px);
  font-weight: 600;
  letter-spacing: -.04em;
  line-height: 1;
  color: var(--w-tinte);
}
.wsp-seq__fenster-einheit {
  font-family: var(--tq-mono);
  font-size: 13px;
  font-weight: 400;
  color: var(--w-graphit);
}
.wsp-seq__fenster-name {
  grid-column: 1 / -1;
  margin-top: 5px;
  font-family: var(--tq-mono);
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--w-leise);
}

/* ── Befund und Schlusssatz ────────────────────────────────────────────── */
.wsp-seq__befund,
.wsp-seq__schluss {
  justify-self: center;
  text-align: center;
  max-width: 46ch;
  transition: opacity .35s var(--w-feder);
}
.wsp-seq__befund { opacity: var(--w-befund-an, 0); }
.wsp-seq__schluss { opacity: var(--w-schluss-an, 0); }
.wsp-seq__befund b {
  display: block;
  font-size: clamp(19px, 2.2vw, 26px);
  font-weight: 600;
  letter-spacing: -.024em;
  color: var(--w-tinte);
}
/* NUR das direkte Kind. `.wsp-seq__befund span` traf auch den Faktor-Span
   INNERHALB des <b> und machte ihn zum Block — «XL ist / 30 / -mal XS.»
   stand auf drei Zeilen. */
.wsp-seq__befund > span {
  display: block;
  margin-top: 6px;
  font-size: 14px;
  color: var(--w-graphit);
}
.wsp-seq__befund b [data-faktor],
.wsp-seq__befund b span { display: inline; }
.wsp-seq__schluss {
  font-size: clamp(15px, 1.5vw, 17px);
  line-height: 1.5;
  color: var(--w-graphit);
}

/* Befund und Schluss teilen sich dieselbe Zeile — sie treten nie zugleich
   auf, und zwei reservierte Zeilen liessen die Buehne springen. */
/* Befund und Schluss treten nie zugleich auf. Zwei reservierte Zeilen
   liessen die Buehne springen, sobald einer erscheint. */
.wsp-seq__befund, .wsp-seq__schluss { grid-row: 4; grid-column: 1; min-height: 4.2em; }

/* ── Ruhefassung: dasselbe Geraet, von Hand bedient ───────────────────────
   Nicht vier gestapelte Schienen: waere der Ausweichzustand zum Vergleichen
   besser als der Hoehepunkt, truege der Hoehepunkt nichts — und vier
   Schienen waeren die zweite Zahlenliste, die diese Seite gerade
   abgeschafft hat. Die Tabelle unten IST die Alles-auf-einmal-Ansicht. */
.wsp-seq__schalter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 26px;
}
.wsp-seq__schalter[hidden] { display: none; }

.wsp-seq__schalter-wort {
  font-family: var(--tq-mono);
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--w-leise);
}
.wsp-seq__schalter button {
  padding: 8px 15px;
  border: 1px solid var(--w-linie);
  border-radius: 999px;
  background: var(--w-papier);
  color: var(--w-graphit);
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 500;
  cursor: pointer;
  transition: border-color .16s, color .16s, background .16s;
}
.wsp-seq__schalter button:hover { border-color: var(--w-graphit); color: var(--w-tinte); }
.wsp-seq__schalter-weg {
  font-size: 13px;
  font-weight: 500;
  color: var(--w-blau-t);
  text-decoration: underline;
  text-underline-offset: .18em;
}
.wsp-seq__schalter button[aria-pressed="true"] {
  border-color: var(--w-blau);
  background: var(--w-blau-h);
  color: var(--w-blau-t);
}

/* Ohne Skript: kein Messgeraet, und die ehrliche Antwort ist der Weg zur
   Quelle. Keine nachgebauten Balken mit Zahlen im Markup. */
/* Notausgang: taugen weniger als zwei Messgroessen (etwa weil eine Spalte
   fehlt), faellt die Buehne aus — und mit ihr der Bildlaufweg. */
.wsp-seq--aus .wsp-seq__lauf { display: none; }
.wsp-seq--aus .wsp-seq__schalter { display: none; }
.wsp-seq--aus .wsp-seq__ohne { display: block !important; }

.wsp-seq__ohne { max-width: var(--w-messe); margin: 0 auto; }
.wsp--js .wsp-seq__ohne { display: none; }
.wsp:not(.wsp--js) .wsp-seq__lauf { display: none; }


/* Die feste Zeilenbindung hielt die Buehne auf Bildschirmhoehe zusammen.
   Ohne Pinning waechst die Buehne mit ihrem Inhalt — die Bindung wuerde ihn
   jetzt nur noch abschneiden. Sie stand bis 09.09.2026 dreimal in
   @media-Bloecken; seit die Entpinnung fuer alle gilt, gilt auch sie fuer
   alle. */
.wsp-seq__befund, .wsp-seq__schluss { grid-row: auto; min-height: 0; }

/* Schmale Fenster brauchen ueber die Entpinnung hinaus eine duennere
   Teilung: bei 3,3 % und 8,3 % ueberlappen XS und S. */
@media (max-width: 859.98px) {
  .wsp-seq__buehne { padding-left: 0; padding-right: 0; }
  /* Bei 3,3 % und 8,3 % ueberlappen XS und S — die Zahl faellt weg, die
     Teilstriche duennen auf die sechs Hauptmarken aus. */
  .wsp-seq { --w-teilung: 6; }
  .wsp-seq__wert { display: none; }
  .wsp-seq__feld { height: 190px; }
  .wsp-seq__grenze-links, .wsp-seq__grenze-rechts { font-size: 10px; }
}

/* ══════════════════════════════════════════════════════════════════════════
 * SCHMAL
 * Unter 900 px werden aus allen Zweispaltern Einspalter. Der Massstab
 * bleibt — er ist auf dem Telefon sogar wichtiger, weil dort niemand fuenf
 * Tabellenspalten nebeneinander liest.
 * ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .wsp-waehl { grid-template-columns: minmax(0, 1fr); gap: 34px; }
  .wsp-zwei { grid-template-columns: minmax(0, 1fr); }
  .wsp-karte__werte { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
  .wsp-leiste { grid-template-columns: auto 1fr auto; gap: 10px; }
  .wsp-leiste__cta { height: 30px; padding: 0 12px; font-size: 12.5px; }
  .wsp-mass--leiste { max-width: none; }
  .wsp-mass--leiste .wsp-mass__kurz { font-size: 10px; letter-spacing: .06em; }
  .wsp-mass--leiste .wsp-mass__stopp { padding: 3px 5px 2px; }
  .wsp-auf { padding-top: calc(var(--w-leiste) + 26px); gap: 26px; }
  .wsp-auf__hinab { display: none; }
  /* Fuenf Pillen auf schmaler Schiene: enger, sonst beruehren sich XS und S. */
  .wsp-mass__stopp { padding: 6px 8px 5px; }
  .wsp-karte__werte { gap: 16px 14px; }
  .wsp-gleich__text { padding-left: 0; }
}
/* Unter 380 px rechnen «150 GB» und «300 GB» knapp: bei 320 px blieben
   1,8 px zwischen L und XL, auf einem 280-px-Frontdisplay ueberlappten
   sie (Review 30.08., nachgerechnet). Enger + kleinere GB-Zeile schafft
   bei 320 px wieder ~12 px Luft. */
@media (max-width: 379.98px) {
  .wsp-mass__stopp { padding: 5px 6px 4px; }
  .wsp-mass__gb { font-size: 9.5px; letter-spacing: 0; }
}

/* ══════════════════════════════════════════════════════════════════════════
 * WENIGER BEWEGUNG
 * Nicht «keine Bewegung» — sondern keine, die nicht gebraucht wird. Der
 * Laeufer springt statt zu fahren, Einblendungen entfallen, aber die Seite
 * bleibt vollstaendig bedienbar.
 * ══════════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .wsp *,
  .wsp *::before,
  .wsp *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .wsp--js [data-auf] { opacity: 1; transform: none; }
  .wsp--js .wsp-auf [data-auftakt] { opacity: 1; transform: none; animation: none; }
}