/* ============================================================
   ALLTAGSFEIN — Magazin-Stylesheet
   Richtung „Prüfstand": deutsche Testmagazin-Autorität, nicht Lifestyleblog.
   Kaltes Reinweiß als Grund, Graphit als Schrift, Petrol als einzige
   Markenfarbe. Die Fotografie trägt die Farbe, nicht das Layout.

   Drei Akzente mit klar getrennten Aufgaben:
     --petrol   Marke, Links, CTA, redaktionelle Auszeichnung
     --mohn     „Achtung": Anzeigen-Kennzeichnung (§5a UWG), Angebots-/
                Preisflächen, Stichtage, Nein-Zellen. NICHT dekorativ —
                sonst nutzt sich die Warnwirkung ab und die gesetzlich
                nötige Kennzeichnung fällt nicht mehr auf.
     --messing  ausschließlich die Beleg-Marke (Signature)
   Wer einen vierten Akzent einführt, nimmt einem der drei seine Bedeutung.
   ============================================================ */

/* ---------- 1. Tokens ---------- */
:root {
  /* Graphit statt Sepia: der alte Satz lief auf Creme (#fbfaf7) mit warmer
     Tinte — genau die Anmutung, die in diesem Umfeld als generisch gelesen
     wird. Reinweiß + kühles Grau ist die Farbwelt der deutschen
     Testpublizistik (Warentest, Öko-Test) und lässt die Produktfotos
     (Taupe, Oliv, Navy) überhaupt erst wirken. */
  --tinte:      #14171c;
  --tinte-70:   #474e5a;
  /* Gilt für Quellenzeilen, Credits, Autorenzeile, Rubrikenlabels — also für
     Text, der oft auf getönten Kastengründen steht, nicht nur auf Weiß.
     Gegen den DUNKELSTEN Grund gerechnet, nicht gegen Weiß: der erste
     Ansatz (#666e7c) kam auf Weiß auf 5,14:1, auf --grund-2 aber nur auf
     4,27:1 und riss dort AA. Jetzt auf allen sechs Gründen ≥ 4,5:1 —
     Weiß 5,45 · grund 5,00 · grund-2 4,53 · petrol-10 4,66 ·
     messing-10 4,94 · mohn-10 4,66. */
  --tinte-45:   #626a78;
  --papier:     #ffffff;
  --grund:      #f4f5f7;
  --grund-2:    #e8eaee;
  --linie:      #d5d9e0;
  --petrol:     #0f5257;
  --petrol-d:   #0a3b3f;
  --petrol-10:  #e6eff0;
  /* Nur Anzeigen-Kennzeichnung. Kein Deko-Rot. */
  --mohn:       #b3122b;
  --mohn-10:    #fbe9ec;
  /* Nur Beleg-Marke. Die einzige warme Farbe der Seite — deshalb fällt sie auf. */
  --messing:    #8a6512;
  --messing-reiter: #7a590f;
  --messing-10: #fbf3e2;

  --mess-display: "Newsreader", "Iowan Old Style", Georgia, serif;
  --mess-body:    "Fira Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --mess-util:    "Fira Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --mass:      41rem;   /* Textmaß */
  --mass-weit: 47rem;   /* Kästen brechen aus */
  --mass-max:  75rem;

  /* Ausbruchspur: erzeugt auf großen Schirmen den Versatz zwischen Fließtext
     und Modulen. Mobil MUSS sie 0 sein — siehe Kommentar an .text. */
  --ausbruch:  0rem;

  --raum-1: .375rem;
  --raum-2: .75rem;
  --raum-3: 1.25rem;
  --raum-4: 2rem;
  --raum-5: 3rem;
  --raum-6: 4.5rem;

  --schatten: 0 1px 2px rgba(20,23,28,.04), 0 8px 24px -14px rgba(20,23,28,.16);
}

/* ---------- 2. Reset & Basis ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--papier);
  color: var(--tinte);
  font-family: var(--mess-body);
  /* 18px mobil, 19px ab Tablet. Fira Sans läuft etwas schmaler als der
     vorherige Satz; zusammen mit dem reparierten Textmaß ergibt das ~42
     Zeichen pro Zeile statt 28. Lesealter 40–65 bleibt bedient. */
  font-size: 1.125rem;
  line-height: 1.62;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

@media (min-width: 48rem) { body { font-size: 1.1875rem; line-height: 1.66; } }

img { max-width: 100%; height: auto; display: block; }
a { color: var(--petrol); text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { color: var(--petrol-d); }
:focus-visible { outline: 3px solid var(--petrol); outline-offset: 3px; border-radius: 2px; }

/* ---------- 3. Utility-Typo ---------- */
.eyebrow, .kasten__tab, .rubrik, .meta, .credit, .kasten__quelle {
  font-family: var(--mess-util);
  text-transform: uppercase;
  /* Mono ist bereits weit — .09em sperrte die Labels auseinander */
  letter-spacing: .045em;
  font-weight: 500;
}

/* ---------- 4. Anzeigen-Kennzeichnung (§5a UWG) ---------- */
.anzeige-strip {
  position: sticky; top: 0; z-index: 60;
  background: var(--mohn); color: #fff;
  font-family: var(--mess-util);
  text-transform: uppercase; letter-spacing: .14em;
  font-size: .75rem; font-weight: 600;
  text-align: center;
  padding: .5rem 1rem;
}
.anzeige-strip strong { font-weight: 600; }
.anzeige-strip span { opacity: .82; letter-spacing: .1em; }

/* ---------- 5. Masthead ---------- */
.masthead { border-bottom: 1px solid var(--linie); background: var(--papier); }
.masthead__inner {
  max-width: var(--mass-max); margin: 0 auto;
  padding: var(--raum-4) 1.5rem var(--raum-3);
  display: flex; flex-direction: column; align-items: center; gap: .5rem;
}
.wortmarke {
  font-family: var(--mess-display);
  font-weight: 700;
  font-size: clamp(1.6rem, 5vw, 2.5rem);
  letter-spacing: -.02em;
  line-height: 1;
  color: var(--tinte);
  text-decoration: none;
  display: inline-block;
}
.wortmarke:hover { color: var(--petrol); }
.wortmarke__punkt { color: var(--petrol); }
.claim {
  font-family: var(--mess-util);
  text-transform: uppercase; letter-spacing: .22em;
  font-size: .6875rem; color: var(--tinte-45);
}

.navband { border-bottom: 1px solid var(--linie); background: var(--grund); }
.navband__inner {
  max-width: var(--mass-max); margin: 0 auto; padding: 0 1.5rem;
  display: flex; gap: 1.75rem; overflow-x: auto;
  scrollbar-width: none;
}
.navband__inner::-webkit-scrollbar { display: none; }
.navband a {
  font-family: var(--mess-util);
  text-transform: uppercase; letter-spacing: .02em;
  font-size: .72rem; font-weight: 500;
  color: var(--tinte-70); text-decoration: none;
  padding: .75rem 0; white-space: nowrap;
  border-bottom: 3px solid transparent;
}
.navband a:hover, .navband a[aria-current="page"] { color: var(--tinte); border-bottom-color: var(--petrol); }

/* Auf dem Telefon ist der Kopf eine schmale Leiste, kein Titelblatt.
   Zweizeilig gesetzt kostete er 280 px — ein Drittel der Falz, bevor die
   Überschrift beginnt. Der Claim steht weiterhin im Fuß. */
@media (max-width: 47.99rem) {
  .masthead__inner {
    flex-direction: row; align-items: baseline; justify-content: center;
    gap: .45rem; padding: .6rem 1.25rem;
  }
  .wortmarke { font-size: 1.45rem; }
  .claim { display: none; }
}

/* ---------- 6. Lesefortschritt ---------- */
.fortschritt {
  position: sticky; top: 0; z-index: 55;
  height: 3px; background: transparent;
}
.fortschritt__balken {
  height: 100%; width: 0; background: var(--petrol);
  transition: width .12s linear;
}
@media (prefers-reduced-motion: reduce) { .fortschritt__balken { transition: none; } }

/* ---------- 7. Artikel-Kopf ---------- */
.artikel { padding-bottom: var(--raum-6); }

/* Aufmacher: Text und Bild nebeneinander.
   Vorher lief das Motiv vollflächig über die Breite und wurde je nach Viewport auf
   16:9 bzw. 2:1 beschnitten. Bei Ganzkörperaufnahmen fehlten dabei Kopf oder Füße.
   Alle Motive liegen im Format 2:3 vor; die Spalte übernimmt genau dieses Verhältnis,
   damit gar nicht erst beschnitten werden muss. */
.aufmacher {
  background: var(--grund);
  border-bottom: 1px solid var(--linie);
}
.aufmacher__inner {
  max-width: var(--mass-max);
  margin-inline: auto;
  padding: clamp(1.5rem, 3vw, 2.5rem) 1.5rem clamp(1.75rem, 3vw, 2.75rem);
  display: grid;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
}
@media (min-width: 54rem) {
  /* Textspalte deutlich breiter: die Titel sind lang und sollen in zwei bis
     drei Zeilen stehen, nicht in fünf. Das Bild bleibt Hochformat und
     bekommt eine feste Obergrenze, sonst dominiert es die Seite. */
  .aufmacher__inner { grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); }
  .aufmacher__medium { max-width: 25rem; justify-self: end; width: 100%; }
}
.aufmacher__karte {
  background: var(--papier);
  padding: var(--raum-4) clamp(1.25rem, 3.5vw, 2.25rem) var(--raum-3);
  border-top: 4px solid var(--petrol);
  box-shadow: var(--schatten);
}
.aufmacher__medium { margin: 0; }
.aufmacher__bild {
  display: block; width: 100%; height: auto;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  background: var(--linie);
}
.aufmacher__medium figcaption {
  margin-top: .7rem;
  font-family: var(--mess-util);
  font-size: .82rem; line-height: 1.5;
  color: var(--tinte-70);
  border-left: 2px solid var(--linie);
  padding-left: .7rem;
}
.aufmacher__medium .zeile__credit {
  display: block; margin-top: .3rem;
  font-size: .68rem; color: var(--tinte-45); letter-spacing: .07em;
}
/* Auf kleinen Schirmen zuerst die Überschrift, dann das Bild.
   ⚠️ Umgekehrt war es falsch: Das Motiv lief von 249 px bis 729 px, die H1
   begann bei 832 px — also unterhalb der Falz (812 px). Die Leserin kommt
   über eine Anzeigen-Überschrift auf web.de oder t-online hierher; sieht sie
   genau diese Überschrift nicht sofort wieder, ist der Klick unbestätigt und
   sie springt zurück. Der Kopf gehört über die Falz, das Bild darunter. */
@media (max-width: 53.99rem) {
  .aufmacher { background: var(--papier); }
  .aufmacher__inner {
    grid-template-columns: 1fr;
    gap: var(--raum-4);
    padding: var(--raum-3) 0 0;
  }
  .aufmacher__karte {
    background: none; box-shadow: none; border-top: 0;
    padding: 0 1.25rem;
  }
  /* Randlos: das Foto stößt links und rechts an den Schirmrand. Auf dem
     Telefon ist das der stärkste verfügbare Bruch zwischen Kopf und Text. */
  .aufmacher__medium { margin-inline: 0; }
  .aufmacher__bild { aspect-ratio: 4 / 5; object-position: 50% 22%; }
  .aufmacher__medium figcaption { margin-inline: 1.25rem; }
}

.rubrik { font-size: .72rem; color: var(--petrol); margin: 0 0 .75rem; }
.rubrik::after { content: ""; display: block; width: 2.25rem; height: 2px; background: var(--petrol); margin-top: .55rem; }

.artikel__titel {
  font-family: var(--mess-display);
  font-weight: 700;
  font-size: clamp(2rem, 7.4vw, 3.05rem);
  line-height: 1.1;
  letter-spacing: -.018em;
  margin: 0 0 var(--raum-3);
  text-wrap: balance;
}
.artikel__vorspann {
  font-size: clamp(1.1rem, 2.4vw, 1.3rem);
  line-height: 1.58;
  font-weight: 600;
  color: var(--tinte-70);
  margin: 0 0 var(--raum-3);
}

.zeile {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem 1rem;
  border-top: 1px solid var(--linie);
  padding-top: var(--raum-2);
  font-family: var(--mess-util);
  font-size: .74rem; color: var(--tinte-45);
  letter-spacing: .01em;
}
.zeile__autor { color: var(--tinte); font-weight: 600; }
.zeile__anzeige { color: var(--mohn); }
/* Prüfdatum: erscheint nur, wenn seit Erscheinen wirklich nachgesehen wurde. */
.zeile__geprueft { color: var(--petrol); }
.zeile__credit { margin-left: auto; text-transform: none; letter-spacing: .04em; }

/* ---------- 8. Fließtext ----------
   Grid mit benannten Spuren: Fließtext läuft auf „mass", Kästen und Bilder
   brechen auf „weit" aus. So bleibt das Textmaß ruhig und die Module wirken.

   ⚠️ Die Ausbruchspur war fest auf 3rem und ist mobil nie eingeklappt.
   Bei 375 px kostete das 2 × 48 px Spur + 2 × 20 px Rand = 136 px, also
   36 % des Schirms. Für den Fließtext blieben 239 px — gemessene 28 Zeichen
   pro Zeile, im Kasten sogar 20. Deutscher Text mit Wörtern wie
   „Fabletics-Standardpreis" zerfällt darin zu einer Trennstrich-Kolonne;
   der Artikel wuchs dadurch auf 24.842 px Höhe.
   Ab jetzt: --ausbruch ist mobil 0, der Ausbruch beginnt erst ab 48rem,
   wo tatsächlich Platz dafür ist. Textmaß mobil ~335 px ≈ 42 Zeichen. */
.text {
  display: grid;
  grid-template-columns:
    [voll-start] minmax(1.25rem, 1fr)
    [weit-start] minmax(0, var(--ausbruch))
    [mass-start] minmax(0, var(--mass))
    [mass-end] minmax(0, var(--ausbruch))
    [weit-end] minmax(1.25rem, 1fr)
    [voll-end];
  padding-top: var(--raum-4);
}
@media (min-width: 48rem) { .text { --ausbruch: 3rem; } }
.text > * { grid-column: mass; }
.text > .kasten,
.text > .figur,
.text > .bewegt,
.text > .fazitkarte,
.text > .vergleich-huelle,
.text > .cta { grid-column: weit; }
@media (min-width: 64rem) {
  .text > .vergleich-huelle { grid-column: voll; max-width: 62rem; margin-inline: auto; }
  .text > .vergleich__legende { grid-column: weit; }
}
.text p { margin: 0 0 var(--raum-3); }
.text h2 {
  font-family: var(--mess-display);
  font-weight: 700;
  font-size: clamp(1.6rem, 5.4vw, 1.95rem);
  line-height: 1.2; letter-spacing: -.014em;
  margin: var(--raum-5) 0 var(--raum-3);
  text-wrap: balance;
}
.text h3 {
  font-family: var(--mess-body);
  font-weight: 600; font-size: 1.1rem;
  margin: var(--raum-4) 0 var(--raum-1);
}
.text strong { font-weight: 600; color: var(--tinte); }
.text ul, .text ol { margin: 0 0 var(--raum-3); padding-left: 1.35rem; }
.text li { margin-bottom: .55rem; }
.text li::marker { color: var(--petrol); }

.text blockquote {
  margin: var(--raum-4) 0;
  padding-left: 1.25rem;
  border-left: 3px solid var(--petrol);
  font-family: var(--mess-display);
  font-size: 1.32rem; line-height: 1.4; font-weight: 600;
  color: var(--tinte);
}
.text blockquote cite {
  display: block; margin-top: .6rem;
  font-family: var(--mess-util); font-style: normal;
  font-size: .78rem; text-transform: uppercase; letter-spacing: .1em;
  color: var(--tinte-45);
}

.text > p:first-of-type {
  font-size: 1.24rem; line-height: 1.6;
  border-left: 3px solid var(--petrol);
  padding-left: 1.1rem;
}
.text > p:first-of-type strong { font-weight: 600; }

/* ---------- 8b. RECHTE SCHIENE (nur große Schirme) ----------
   Bei 1440 px standen links und rechts je 392 px leer — 54 % des Schirms.
   Gleichzeitig lag die Angebotsleiste als 141 px hohe Bank über die volle
   Breite unten und wirkte wie ein Cookie-Banner.

   Die Schiene löst beides: Das Angebot bekommt einen festen Platz auf
   Augenhöhe, die leere Fläche eine Aufgabe, und die Bank unten kann auf
   dem Schreibtisch ganz entfallen.

   Es ist außerdem das Layout deutscher Portale. Wer von t-online oder
   web.de kommt, landet auf einer Seite, die aussieht wie die, von der er
   kam — bei nativer Werbung ist das der ganze Punkt.

   Unter 62rem existiert die Schiene nicht: Dort trägt die Angebotsleiste
   das Angebot, und ein zweites Angebotsfeld im Fluss wäre Doppelung. */
.schiene { display: none; }

@media (min-width: 62rem) {
  .artikel__koerper {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 20rem;
    gap: clamp(2rem, 4vw, 3.5rem);
    max-width: 78rem;
    margin-inline: auto;
    padding-inline: 1.5rem;
    /* NICHT align-items: start. Damit schrumpft die Schiene auf ihre
       Inhaltshöhe, und dann hat `position: sticky` keinen Weg zum Kleben —
       der Kasten scrollte einfach mit weg (gemessen: 3.299 px über dem
       Bildrand). Die Schiene muss die volle Zeilenhöhe bekommen. */
    align-items: stretch;
  }
  /* Das Textraster darf im schmaleren Feld nicht noch einmal ausbrechen —
     sonst stünde der Fließtext doppelt eingerückt. */
  .artikel__koerper > .text { padding-inline: 0; --ausbruch: 2rem; }

  .schiene { display: block; }
  .schiene__haft {
    position: sticky; top: 4.5rem;
    /* Gedeckelt und intern scrollbar. Ohne das war der Inhalt bei 900 px
       Fensterhöhe 992 px hoch: Der Kasten klebte oben, und alles unterhalb
       der Falz — „Weiterlesen" und der untere Teil des Verzeichnisses —
       war nicht mehr erreichbar. Die Leiste bekommt nur dann einen
       Rollbalken, wenn sie ihn wirklich braucht. */
    max-height: calc(100vh - 5.5rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
  }

  .angebot-leiste { display: none !important; }
}

.schiene__angebot {
  border: 2px solid var(--tinte);
  background: var(--papier);
  padding: var(--raum-3);
}
.schiene__tab {
  display: inline-block;
  margin: 0 0 var(--raum-2);
  background: var(--mohn); color: #fff;
  font-family: var(--mess-util);
  font-size: .66rem; letter-spacing: .1em; text-transform: uppercase;
  padding: .18rem .5rem;
}
.schiene__zielgruppe {
  margin: 0 0 .2rem;
  font-family: var(--mess-util);
  font-size: .68rem; letter-spacing: .03em; text-transform: uppercase;
  color: var(--tinte-45);
}
.schiene__preis {
  margin: 0 0 .25rem;
  font-family: var(--mess-display); font-weight: 700;
  font-size: 1.55rem; line-height: 1.1; letter-spacing: -.015em;
  color: var(--mohn);
}
.schiene__anker {
  margin: 0 0 var(--raum-3);
  font-family: var(--mess-util); font-size: .74rem; color: var(--tinte-70);
}
.schiene__anker s { color: var(--tinte-45); }
.schiene__angebot .knopf { display: block; width: 100%; text-align: center; font-size: .76rem; }
.schiene__klein {
  margin: var(--raum-2) 0 0;
  font-family: var(--mess-util);
  font-size: .66rem; line-height: 1.5; color: var(--tinte-45);
}

.schiene__inhalt { margin-bottom: var(--raum-4); border-bottom: 1px solid var(--linie); padding-bottom: var(--raum-3); }
.schiene__inhalt ol { list-style: none; margin: 0; padding: 0; counter-reset: toc; }
.schiene__inhalt li { counter-increment: toc; }
.schiene__inhalt a {
  display: grid; grid-template-columns: 1.4rem 1fr; gap: .3rem;
  padding: .38rem 0;
  font-size: .84rem; line-height: 1.35;
  color: var(--tinte-70); text-decoration: none;
}
.schiene__inhalt a::before {
  content: counter(toc);
  font-family: var(--mess-util); font-size: .7rem; color: var(--tinte-45);
}
.schiene__inhalt a:hover { color: var(--petrol); }

.schiene__weiter { margin-top: var(--raum-4); border-top: 2px solid var(--tinte); padding-top: var(--raum-2); }
.schiene__ueberschrift {
  margin: 0 0 var(--raum-2);
  font-family: var(--mess-util);
  font-size: .7rem; letter-spacing: .05em; text-transform: uppercase;
  color: var(--tinte);
}
.schiene__weiter ul { list-style: none; margin: 0; padding: 0; }
.schiene__weiter li { border-bottom: 1px solid var(--linie); }
.schiene__weiter li:last-child { border-bottom: 0; }
.schiene__weiter a {
  display: block; padding: .7rem 0;
  font-family: var(--mess-display); font-weight: 600;
  font-size: .95rem; line-height: 1.3;
  color: var(--tinte); text-decoration: none;
}
.schiene__weiter a:hover { color: var(--petrol); }
.schiene__rubrik {
  display: block; margin-bottom: .2rem;
  font-family: var(--mess-util); font-weight: 400;
  font-size: .62rem; letter-spacing: .05em; text-transform: uppercase;
  color: var(--tinte-45);
}

/* ---------- 9. Bilder im Fluss ---------- */
.figur { margin: var(--raum-5) 0; }
.figur img { width: 100%; height: auto; display: block; background: var(--linie); }
.figur figcaption {
  margin-top: .7rem;
  font-size: .92rem; line-height: 1.5;
  color: var(--tinte-70);
  border-left: 2px solid var(--linie);
  padding-left: .8rem;
}

/* Hochformat: Bild in einer schmalen Spalte, Unterschrift daneben.
   Ein 2:3-Motiv über die volle Textbreite wäre über 1000 px hoch und
   würde die Leserin aus dem Text werfen. */
@media (min-width: 42rem) {
  .figur--hoch {
    display: grid;
    grid-template-columns: minmax(0, 21rem) 1fr;
    gap: var(--raum-4);
    align-items: center;
  }
  .figur--hoch figcaption { margin-top: 0; }
}
.figur--hoch img { aspect-ratio: 2 / 3; object-fit: cover; }

/* Zwei Motive nebeneinander: dasselbe Kleidungsstück, zwei Körper.
   Bei den Passform-Landern ist dieses Paar das Argument, nicht die Dekoration. */
.figur__paar { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.figur__paar img { aspect-ratio: 2 / 3; object-fit: cover; }
.figur--paar figcaption { border-left-color: var(--petrol); }
.figur .credit {
  display: block; margin-top: .3rem;
  font-size: .68rem; color: var(--tinte-45); letter-spacing: .07em;
}

/* Mobil randlos. Ein Foto, das links und rechts an den Schirmrand stößt,
   ist auf dem Telefon der einzige Bruch, der stark genug ist, um eine
   Textstrecke wirklich zu teilen. Ein eingerücktes Bild mit Rand daneben
   liest sich als weiterer Absatz. */
@media (max-width: 47.99rem) {
  .text > .figur { grid-column: voll; margin-block: var(--raum-5); }
  .text > .figur figcaption { margin-inline: 1.25rem; }
  .figur--hoch img { aspect-ratio: 4 / 5; object-position: 50% 25%; }
  .figur__paar { gap: 2px; }
}

/* ---------- 9b. BELEG-MARKE (Signature) ----------
   Jede harte Zahl im Fließtext trägt eine Haarlinie und einen Punkt.
   Tippen klappt die Quelle mit Datum inline auf — kein Overlay, kein Sprung.

   Warum das hier das Signature-Element ist: Der Wettbewerb in diesem
   Umfeld arbeitet mit „Ärztin empfiehlt" und „schmilzt Bauchfett". Unser
   einziger struktureller Vorteil ist, dass jede Zahl auf dem Truth Sheet
   mit Datum belegt ist. Diese Disziplin war bisher unsichtbar. Jetzt ist
   sie das, woran man die Seite wiedererkennt.

   Ohne JavaScript bleibt die Quelle zugeklappt — sie steht dann weiterhin
   vollständig im Transparenzkasten am Artikelende. Es geht nichts verloren. */
.beleg { display: inline; }
.beleg__marke {
  font: inherit; color: inherit;
  background: none; border: 0; padding: 0;
  border-bottom: 2px solid var(--messing);
  cursor: pointer;
  text-align: left;
}
.beleg__marke::after {
  content: "";
  display: inline-block;
  width: .32em; height: .32em;
  margin-left: .22em;
  vertical-align: .45em;
  border-radius: 50%;
  background: var(--messing);
}
.beleg__marke:hover { background: var(--messing-10); }
.beleg__marke[aria-expanded="true"] { background: var(--messing-10); }
.beleg__marke[aria-expanded="true"]::after { background: var(--tinte-45); }

.beleg__quelle {
  font-family: var(--mess-util);
  font-size: .72rem;
  line-height: 1.45;
  letter-spacing: .01em;
  color: var(--tinte-70);
  background: var(--messing-10);
  border-left: 2px solid var(--messing);
  padding: .3em .55em;
  margin-left: .3em;
  border-radius: 0 2px 2px 0;
  /* inline-block, damit die Quelle im Absatz mitfließt statt ihn zu sprengen */
  display: inline-block;
  vertical-align: baseline;
}
.beleg__quelle[hidden] { display: none; }

/* ---------- 9c. AUSZUG (typografischer Bruch) ----------
   Bricht eine lange Textstrecke, ohne ein Bild zu verbrauchen. Der Bestand
   an eigener Fabletics-Fotografie ist begrenzt (16 Motive für neun Lander);
   jede Lücke mit einem Foto zu schließen hieße, dieselben Motive mehrfach
   zu zeigen. Der Auszug ist die ehrlichere Lösung: er zitiert die Autorin
   mit ihrem eigenen Satz und behauptet nichts Neues.

   Bewusst ohne Anführungszeichen-Ornament — das große graue Zitatzeichen
   ist genau die Dekoration, die eine Seite generisch aussehen lässt. Der
   Bruch entsteht durch Schriftwechsel und Weißraum, nicht durch ein Symbol. */
.text .auszug {
  margin: var(--raum-5) 0;
  /* Die Grundregel für blockquote setzt eine linke Kante. Für den Auszug
     wäre sie doppelt gemoppelt — eine Kante reicht, und die obere trennt
     die Textstrecke sauberer als eine seitliche. */
  border-left: 0;
  padding-left: 0;
  padding-top: var(--raum-3);
  border-top: 2px solid var(--petrol);
}
.text .auszug p {
  font-family: var(--mess-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.4rem, 5.2vw, 1.75rem);
  line-height: 1.32;
  letter-spacing: -.01em;
  color: var(--tinte);
  margin: 0;
  text-wrap: balance;
}
.text .auszug cite {
  display: block;
  margin-top: var(--raum-2);
  font-family: var(--mess-util);
  font-style: normal;
  font-size: .72rem;
  letter-spacing: .045em;
  text-transform: uppercase;
  color: var(--tinte-45);
}

/* ---------- 10. DER KASTEN (Signature) ---------- */
.kasten {
  margin: calc(var(--raum-5) + 1.4rem) 0 var(--raum-5);
  position: relative;
  background: var(--grund);
  border: 1px solid var(--linie);
  padding: var(--raum-4) clamp(1.1rem, 3.5vw, 2rem) var(--raum-3);
}
.kasten__tab {
  position: absolute; top: 0; left: -1px;
  transform: translateY(-100%);
  margin: 0;
  background: var(--tinte); color: var(--papier);
  font-size: .7rem; line-height: 1;
  padding: .5rem .85rem .45rem;
  letter-spacing: .13em;
}
.kasten__titel,
.text .kasten__titel {
  font-family: var(--mess-display);
  font-weight: 700; font-size: 1.3rem; line-height: 1.25;
  margin: 0 0 var(--raum-3);
}
.kasten > :last-child { margin-bottom: 0; }
.kasten p { margin: 0 0 var(--raum-2); }
.kasten__quelle,
.kasten p.kasten__quelle {
  margin: var(--raum-3) 0 0;
  padding-top: .7rem;
  border-top: 1px solid var(--linie);
  font-size: .72rem; line-height: 1.45;
  color: var(--tinte-45); letter-spacing: .01em;
  text-transform: none; font-weight: 400; font-family: var(--mess-util);
}

/* Reiterfarben codieren den Inhaltstyp */
.kasten--fakten     { background: var(--petrol-10);  border-color: #cddede; }
.kasten--fakten .kasten__tab   { background: var(--petrol); }
.kasten--angebot    { background: var(--mohn-10);    border-color: #ecd3cc; }
.kasten--angebot .kasten__tab  { background: var(--mohn); }
/* Zwei Sorten Kundenstimmen, bewusst unterschiedlich gewichtet:
   --stimmen sind die von Fabletics ausgewählten Stimmen und stehen deshalb
   ruhig auf Grau. --extern sind verifizierte Käufe bei einem fremden Händler
   samt Wertung, Datum und Kritik — die stärkere Evidenz bekommt die stärkere
   Fläche. Messing ist hier bewusst NICHT mehr im Spiel: der Ton gehört der
   Beleg-Marke. */
.kasten--stimmen    { background: var(--grund); border-color: var(--linie); }
.kasten--stimmen .kasten__tab  { background: var(--tinte-70); }
.kasten--extern     { background: var(--papier); border-color: var(--tinte); border-width: 2px; }
.kasten--extern .kasten__tab   { background: var(--petrol); }
.stimme--extern { border-color: var(--linie); }
.stimme__wertung {
  margin: 0;
  font-family: var(--mess-util);
  font-size: .74rem; font-weight: 500; letter-spacing: .02em;
  color: var(--petrol);
}
/* Die kritischen Stimmen sollen sich nicht verstecken — gleiche Größe,
   gleiche Fläche wie das Lob. Eine Wand aus Fünf-Sterne-Zitaten liest sich
   gekauft; die Drei- und Zwei-Sterne-Karte ist der Grund, warum der Kasten
   überhaupt glaubwürdig ist. */
.kasten--interaktiv { background: var(--papier);     border-color: var(--tinte); }
.kasten--interaktiv .kasten__tab { background: var(--tinte); }
.kasten--marke      { background: var(--grund); }
.kasten--marke .kasten__tab    { background: var(--tinte-70); }

/* Regelliste im Fakten-Kasten */
.regeln { list-style: none; margin: 0; padding: 0; counter-reset: regel; }
.regeln li {
  counter-increment: regel;
  display: grid; grid-template-columns: 1.75rem minmax(0, 1fr); gap: .9rem;
  align-items: start;
  padding: .85rem 0; border-bottom: 1px solid rgba(28,93,98,.16);
  margin: 0;
}
.regeln li:last-child { border-bottom: 0; padding-bottom: 0; }
.regeln li::before {
  content: counter(regel);
  font-family: var(--mess-util); font-weight: 600;
  font-size: 1rem; color: var(--petrol);
  border: 1px solid var(--petrol); border-radius: 50%;
  width: 1.75rem; height: 1.75rem;
  display: grid; place-items: center;
  margin-top: .15rem;
}
.regeln b { display: block; font-weight: 600; }

/* Mobil steht die Ziffer nicht in einer eigenen Spalte, sondern in der
   Titelzeile. Die Spalte kostete 28 px + .9rem Abstand und drückte den
   Fließtext im Kasten auf ~30 Zeichen — die Ziffer ist eine Marke, kein
   Argument dafür, dem Text ein Sechstel der Zeile wegzunehmen. */
@media (max-width: 32rem) {
  .regeln li { display: block; }
  .regeln li::before {
    float: left;
    margin: 0 .55rem .1rem 0;
    width: 1.5rem; height: 1.5rem;
    font-size: .85rem;
  }
  .regeln b { display: inline; }
  .regeln li::after { content: ""; display: block; clear: both; }
}

/* ---------- 11. Angebots-Modul ---------- */
.angebot { display: grid; gap: var(--raum-3); grid-template-columns: 1fr; }
@media (min-width: 46rem) { .angebot { grid-template-columns: 1.15fr .85fr; align-items: center; } }
.angebot__preis {
  font-family: var(--mess-display); font-weight: 700;
  font-size: clamp(1.9rem, 6vw, 2.6rem); line-height: 1.05;
  letter-spacing: -.02em; margin: 0 0 .4rem; color: var(--mohn);
}
.angebot__anker { font-family: var(--mess-util); font-size: .92rem; color: var(--tinte-70); letter-spacing: .04em; text-transform: none; }
.angebot__anker s { color: var(--tinte-45); }
.angebot__liste { list-style: none; margin: var(--raum-2) 0 0; padding: 0; font-size: .98rem; }
.angebot__liste li { display: flex; gap: .6rem; margin-bottom: .5rem; }
.angebot__liste li::before { content: "→"; color: var(--mohn); flex: none; }
.angebot__bild img {
  border: 1px solid var(--linie);
  width: 100%; height: auto;
  aspect-ratio: 3/4; object-fit: cover; object-position: 50% 15%;
}

/* ---------- 12. Stimmen ---------- */
.stimmen { display: grid; gap: var(--raum-3); grid-template-columns: 1fr; margin: 0; }
@media (min-width: 44rem) { .stimmen { grid-template-columns: repeat(auto-fit, minmax(11.5rem, 1fr)); } }
.stimme {
  background: var(--papier); border: 1px solid var(--linie);
  padding: var(--raum-3); margin: 0;
  display: flex; flex-direction: column; gap: .8rem;
}
.stimme blockquote { margin: 0; font-size: 1rem; line-height: 1.58; font-family: var(--mess-body); font-weight: 400; border: 0; padding: 0; }
.stimme figcaption { margin-top: auto; font-family: var(--mess-util); font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; color: var(--tinte-45); }
.stimme figcaption b { display: block; color: var(--tinte); font-size: .86rem; letter-spacing: .04em; }

/* ---------- 13. Interaktiv ---------- */
.tool__frage { font-weight: 600; font-size: 1.05rem; margin: 0 0 var(--raum-2); }
.tool__optionen { display: grid; gap: .6rem; margin: 0 0 var(--raum-3); padding: 0; list-style: none; }
@media (min-width: 34rem) { .tool__optionen--3 { grid-template-columns: repeat(3, 1fr); } .tool__optionen--2 { grid-template-columns: repeat(2, 1fr); } }
.tool__opt {
  font: inherit; font-size: .96rem; text-align: left;
  background: var(--papier); border: 1px solid var(--linie);
  padding: .8rem 1rem; cursor: pointer; color: var(--tinte);
  transition: border-color .15s, background .15s, transform .15s;
}
.tool__opt:hover { border-color: var(--petrol); }
.tool__opt[aria-pressed="true"] { border-color: var(--petrol); background: var(--petrol-10); box-shadow: inset 0 0 0 1px var(--petrol); }
@media (prefers-reduced-motion: no-preference) { .tool__opt:active { transform: scale(.985); } }

.tool__schritt[hidden] { display: none; }
.tool__ergebnis {
  border-top: 2px solid var(--tinte); padding-top: var(--raum-3); margin-top: var(--raum-3);
}
.tool__ergebnis[hidden] { display: none; }
.tool__ergebnis h4 { font-family: var(--mess-display); font-size: 1.15rem; margin: 0 0 .5rem; font-weight: 700; }

/* Rechner */
.rechner__reihe { margin-bottom: var(--raum-3); }
.rechner__label { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; font-weight: 600; margin-bottom: .5rem; }
.rechner__wert { font-family: var(--mess-util); font-size: 1.35rem; color: var(--petrol); }
input[type="range"] { width: 100%; accent-color: var(--petrol); height: 1.6rem; }
.rechner__ausgabe { display: grid; gap: .8rem; grid-template-columns: 1fr; }
@media (min-width: 34rem) { .rechner__ausgabe { grid-template-columns: 1fr 1fr; } }
.rechner__zelle { background: var(--papier); border: 1px solid var(--linie); padding: var(--raum-3); }
.rechner__zahl { font-family: var(--mess-display); font-weight: 700; font-size: 1.9rem; line-height: 1; display: block; margin-bottom: .3rem; }
.rechner__zelle small { font-family: var(--mess-util); font-size: .72rem; letter-spacing: .09em; text-transform: uppercase; color: var(--tinte-45); }
.rechner__hinweis { margin-top: var(--raum-3); font-size: .95rem; color: var(--tinte-70); }

/* Aufklapp-Panels */
.panels { border-top: 1px solid var(--linie); }
.panels details { border-bottom: 1px solid var(--linie); }
.panels summary {
  cursor: pointer; padding: .95rem 0; font-weight: 600; font-size: 1.03rem;
  list-style: none; display: flex; justify-content: space-between; gap: 1rem; align-items: center;
}
.panels summary::-webkit-details-marker { display: none; }
.panels summary::after { content: "+"; font-family: var(--mess-util); font-size: 1.4rem; color: var(--petrol); line-height: 1; }
.panels details[open] summary::after { content: "–"; }
.panels details > *:not(summary) { padding-bottom: var(--raum-3); font-size: 1rem; }

/* Karten-Check */
.karten { display: grid; gap: .7rem; grid-template-columns: 1fr; padding: 0; margin: 0; list-style: none; }
@media (min-width: 40rem) { .karten { grid-template-columns: 1fr 1fr; } }
.karte {
  background: var(--papier); border: 1px solid var(--linie);
  padding: var(--raum-3); cursor: pointer; font: inherit; text-align: left; color: var(--tinte);
}
.karte:hover { border-color: var(--petrol); }
.karte b { display: block; font-family: var(--mess-display); font-size: 1.05rem; margin-bottom: .35rem; }
.karte__antwort { display: none; font-size: .95rem; color: var(--tinte-70); margin-top: .5rem; }
.karte[aria-expanded="true"] { border-color: var(--petrol); background: var(--petrol-10); }
.karte[aria-expanded="true"] .karte__antwort { display: block; }
.karte__hinweis { font-family: var(--mess-util); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--petrol); }

/* Checkliste */
.checkliste { list-style: none; margin: 0 0 var(--raum-3); padding: 0; }
.checkliste li { margin: 0 0 .55rem; }
.checkliste label { display: flex; gap: .8rem; align-items: flex-start; cursor: pointer; background: var(--papier); border: 1px solid var(--linie); padding: .8rem 1rem; }
.checkliste label:hover { border-color: var(--petrol); }
.checkliste input { margin-top: .4rem; accent-color: var(--petrol); width: 1.1rem; height: 1.1rem; flex: none; }
.checkliste b { display: block; font-weight: 600; }
.checkliste span { font-size: .95rem; color: var(--tinte-70); }

/* Stoff-Wähler */
.stoffe { display: grid; gap: .7rem; grid-template-columns: repeat(2, 1fr); padding: 0; margin: 0 0 var(--raum-3); list-style: none; }
@media (min-width: 40rem) { .stoffe { grid-template-columns: repeat(4, 1fr); } }
.stoff { background: var(--papier); border: 1px solid var(--linie); padding: 0; cursor: pointer; font: inherit; color: var(--tinte); text-align: left; overflow: hidden; }
.stoff img { aspect-ratio: 4/5; object-fit: cover; width: 100%; }
.stoff span { display: block; padding: .6rem .7rem; font-family: var(--mess-util); font-size: .8rem; letter-spacing: .07em; text-transform: uppercase; font-weight: 600; }
.stoff[aria-pressed="true"] { border-color: var(--petrol); box-shadow: inset 0 0 0 2px var(--petrol); }

/* ---------- 14. Bewegtelemente (statt GIF) ---------- */
.bewegt { margin: var(--raum-5) 0; border: 1px solid var(--linie); background: var(--grund); padding: var(--raum-4) var(--raum-3) var(--raum-3); }
.bewegt__buehne { display: grid; place-items: center; min-height: 9rem; }
.bewegt figcaption { margin-top: var(--raum-2); font-size: .92rem; color: var(--tinte-70); text-align: center; }

.bewegt__buehne { position: relative; }
/* ---------- Der Dehntest ----------
   Vorher: ein Rechteck mit Diagonalstreifen, das per scaleX breiter wurde und
   breit stehen blieb. Zwei Probleme. Erstens sah es nach CSS-Kasten aus, nicht
   nach Textil. Zweitens — und das ist der eigentliche Fehler — sagte die
   Bildunterschrift „federt vollständig zurück", die Animation federte aber nie
   zurück, sie blieb gedehnt.

   Jetzt: ein Feinripp aus vier Lagen (Grundton, senkrechte Rippen, Maschen-
   schlaufen quer, Glanzkante) und ein vollständiger Bewegungsablauf
   Ruhe → Dehnung → Rückfederung mit Nachschwingen. Weil die Animation am
   Scrollfortschritt hängt, zieht die Leserin den Stoff selbst auseinander und
   sieht ihn zurückspringen, während sie an der Stelle vorbeiliest.

   Querkontraktion ist mitgenommen: Gestrick wird beim Dehnen in der Höhe
   schmaler. Ohne das wirkt jede Stoffanimation wie Gummi. */
.swatch {
  width: 9rem; height: 6.5rem;
  border-radius: 2px;
  background-color: #23211d;
  background-image:
    /* Glanzkante: Kompressionsgestrick hat einen matten Schimmer */
    linear-gradient(105deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,0) 38%,
                            rgba(255,255,255,0) 62%, rgba(255,255,255,.05) 100%),
    /* Maschenschlaufen quer */
    repeating-linear-gradient(0deg, rgba(255,255,255,.05) 0 1px,
                                    rgba(0,0,0,.16) 1px 2px,
                                    rgba(0,0,0,0) 2px 5px),
    /* Feinrippe längs — diese Lage öffnet sich beim Dehnen */
    repeating-linear-gradient(90deg, #1b1916 0 1px,
                                     #2f2b26 1px 3px,
                                     #201e1a 3px 4px),
    /* Grundton mit leichter Wölbung */
    radial-gradient(120% 90% at 30% 20%, #35312b 0%, #211f1c 78%);
  background-size: 100% 100%, 100% 5px, 4px 100%, 100% 100%;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.07),
    inset 0 -8px 14px -10px rgba(0,0,0,.7),
    0 2px 6px -3px rgba(0,0,0,.45);
  will-change: transform;
}
.swatch-rahmen {
  position: absolute; width: 14rem; height: 6.5rem;
  border: 1px dashed var(--tinte-45); pointer-events: none;
  border-radius: 2px;
}
.swatch-rahmen::after {
  content: "Dehnung"; position: absolute; top: 100%; left: 0; right: 0;
  text-align: center; padding-top: .4rem;
  font-family: var(--mess-util); font-size: .68rem;
  letter-spacing: .045em; text-transform: uppercase; color: var(--tinte-45);
}

/* Auslöser für alle Bewegtelemente.
   Erst `infinite`-Schleifen (billig, zieht das Auge permanent vom Satz weg),
   dann `animation-timeline: view()`, jetzt ein IntersectionObserver, der
   einmalig `.laeuft` setzt.

   Der Grund für den letzten Wechsel ist inhaltlich, nicht technisch:
   scroll-gescrubbte Bewegung hängt an der Scrollgeschwindigkeit. Beim
   Dehntest sah die Rückfederung dadurch je nach Tempo aus wie Gummi, mal in
   Zeitlupe, mal übersprungen. Echtes Gestrick federt in etwa einer drittel
   Sekunde zurück, egal wie schnell jemand liest. Deshalb zeitbasiert, genau
   einmal, und danach stehenbleibend (`both`).

   Ohne JavaScript oder bei `prefers-reduced-motion` bleibt alles im
   Ausgangszustand stehen und ist statisch lesbar. */
@media (prefers-reduced-motion: no-preference) {
  .laeuft .swatch { animation: dehnen 2.4s linear both; }
}
/* Ruhe → Dehnung → Rückfederung. Das Nachschwingen um die Ruhelage
   (98,5 % / 101,2 %) ist der Unterschied zwischen „geht zurück" und
   „federt zurück" — und genau das behauptet die Bildunterschrift.

   scaleY läuft gegenläufig mit dem Faktor 0,22: Gestrick wird beim Dehnen in
   der Höhe schmaler. Ohne diese Querkontraktion wirkt jede Stoffanimation
   wie ein Gummiband.

   ⚠️ Nicht auf eine per @property registrierte Variable umbauen. Genau so war
   es zuerst gebaut — die Variable interpolierte auf der View-Timeline nicht
   und der Stoff stand still, obwohl die Animation als `running` gemeldet
   wurde. Transform direkt in den Keyframes läuft zuverlässig. */
@keyframes dehnen {
  0%   { transform: scaleX(1)     scaleY(1);      }
  42%  { transform: scaleX(1.34)  scaleY(0.925);  }
  56%  { transform: scaleX(1.30)  scaleY(0.934);  }
  70%  { transform: scaleX(0.985) scaleY(1.003);  }
  82%  { transform: scaleX(1.012) scaleY(0.997);  }
  91%  { transform: scaleX(0.996) scaleY(1.001);  }
  100% { transform: scaleX(1)     scaleY(1);      }
}

.bund { display: flex; gap: 2.5rem; }
.bund__spalte { text-align: center; font-family: var(--mess-util); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--tinte-45); }
.bund__form { width: 5.5rem; height: 5.5rem; background: #d9d3c7; border: 1px solid var(--linie); margin-bottom: .6rem; position: relative; overflow: hidden; }
.bund__band { position: absolute; left: 0; right: 0; top: 1.1rem; height: .55rem; background: var(--tinte); transform-origin: center; }
.bund__form--breit .bund__band { top: .8rem; height: 1.5rem; }
@media (prefers-reduced-motion: no-preference) {
  .laeuft .bund__form--schmal .bund__band {
    animation: rollen 1.4s ease-in-out .3s both;
  }
}
@keyframes rollen {
  from { transform: scaleY(1) translateY(0); }
  to   { transform: scaleY(.5) translateY(-.28rem); }
}

.kalender { display: grid; grid-template-columns: repeat(7, 1.9rem); gap: .3rem; }
.kalender span {
  display: grid; place-items: center; height: 1.9rem;
  font-family: var(--mess-util); font-size: .8rem;
  background: var(--papier); border: 1px solid var(--linie); color: var(--tinte-45);
}
.kalender span.fenster { border-color: var(--petrol); color: var(--petrol); font-weight: 600; }
.kalender span.stichtag { background: var(--mohn); border-color: var(--mohn); color: #fff; font-weight: 600; }
@media (prefers-reduced-motion: no-preference) {
  .laeuft .kalender span.fenster  { animation: fenster-fuellen .5s ease-out both; }
  .laeuft .kalender span.fenster:nth-of-type(1) { animation-delay: .10s; }
  .laeuft .kalender span.fenster:nth-of-type(2) { animation-delay: .20s; }
  .laeuft .kalender span.fenster:nth-of-type(3) { animation-delay: .30s; }
  .laeuft .kalender span.fenster:nth-of-type(4) { animation-delay: .40s; }
  .laeuft .kalender span.fenster:nth-of-type(5) { animation-delay: .50s; }
  .laeuft .kalender span.stichtag { animation: stichtag-setzen .5s ease-out .75s both; }
}
@keyframes fenster-fuellen {
  from { background: var(--papier); }
  to   { background: var(--petrol-10); }
}
@keyframes stichtag-setzen {
  from { opacity: .3; }
  to   { opacity: 1; }
}

.haken-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.haken-liste li { display: flex; gap: .7rem; align-items: center; font-family: var(--mess-util); font-size: .85rem; letter-spacing: .05em; text-transform: uppercase; color: var(--tinte-70); }
.haken-liste i {
  width: 1.15rem; height: 1.15rem; flex: none; border: 1.5px solid var(--petrol);
  display: grid; place-items: center; font-style: normal; color: var(--petrol); font-size: .8rem;
}
/* Vorher: steps(1), also ein hartes Umspringen im Sekundentakt. Jetzt haken die
   vier Punkte nacheinander ab, während der Block ins Bild kommt, und bleiben dann
   abgehakt stehen. */
@media (prefers-reduced-motion: no-preference) {
  .laeuft .haken-liste i { animation: haken .4s ease-out both; }
  .laeuft .haken-liste li:nth-child(1) i { animation-delay: .15s; }
  .laeuft .haken-liste li:nth-child(2) i { animation-delay: .40s; }
  .laeuft .haken-liste li:nth-child(3) i { animation-delay: .65s; }
  .laeuft .haken-liste li:nth-child(4) i { animation-delay: .90s; }
}
@keyframes haken {
  from { background: transparent; color: transparent; }
  to   { background: var(--petrol); color: var(--papier); }
}

/* ---------- 15. CTA ---------- */
.cta { margin: var(--raum-5) 0; text-align: center; }
.knopf {
  display: inline-block;
  background: var(--petrol); color: #fff;
  font-family: var(--mess-util); font-weight: 600;
  text-transform: uppercase; letter-spacing: .1em;
  font-size: 1rem; line-height: 1.3;
  padding: 1.05rem 2.1rem;
  text-decoration: none;
  border: 2px solid var(--petrol);
  transition: background .16s, border-color .16s;
}
.knopf:hover, .knopf:focus-visible { background: var(--petrol-d); border-color: var(--petrol-d); color: #fff; }
.cta__hinweis { font-size: .85rem; color: var(--tinte-45); margin: var(--raum-2) 0 0; }

/* ---------- 16. FAQ ---------- */
.faq { margin: var(--raum-5) 0; }
.faq h2 { font-family: var(--mess-display); font-weight: 700; font-size: 1.6rem; margin: 0 0 var(--raum-3); }
.faq details { border-top: 1px solid var(--linie); }
.faq details:last-of-type { border-bottom: 1px solid var(--linie); }
.faq summary { cursor: pointer; padding: 1rem 0; font-weight: 600; list-style: none; display: flex; justify-content: space-between; gap: 1rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--petrol); font-family: var(--mess-util); font-size: 1.4rem; line-height: 1; }
.faq details[open] summary::after { content: "–"; }
.faq details p { margin: 0 0 1rem; font-size: 1rem; }

/* ---------- 17. Transparenz & Footer ---------- */
.transparenz {
  max-width: var(--mass-weit); margin: var(--raum-5) auto 0; padding: var(--raum-3) 1.25rem;
  border-top: 3px solid var(--mohn);
  font-size: .88rem; line-height: 1.6; color: var(--tinte-70);
}
.transparenz b { color: var(--mohn); font-family: var(--mess-util); text-transform: uppercase; letter-spacing: .1em; font-size: .78rem; display: block; margin-bottom: .4rem; }

.fuss { background: var(--tinte); color: var(--grund); margin-top: var(--raum-6); }
.fuss__inner { max-width: var(--mass-max); margin: 0 auto; padding: var(--raum-5) 1.5rem var(--raum-4); display: grid; gap: var(--raum-4); }
@media (min-width: 46rem) { .fuss__inner { grid-template-columns: 1.4fr 1fr 1fr; } }
/* --tinte-45 ist ein Ton für helle Flächen. Im dunklen Fuß kam er auf 2,78:1.
   Eigener heller Ton: 5,29:1 auf --tinte. */
.fuss h3 { font-family: var(--mess-util); text-transform: uppercase; letter-spacing: .12em; font-size: .76rem; color: #9a9287; margin: 0 0 .9rem; font-weight: 600; }
.fuss ul { list-style: none; margin: 0; padding: 0; }
.fuss li { margin-bottom: .5rem; }
.fuss a { color: var(--grund); text-decoration: none; font-size: .95rem; }
.fuss a:hover { color: #fff; text-decoration: underline; }
.fuss p { font-size: .92rem; color: #b5aea2; margin: 0 0 .8rem; }
.fuss .wortmarke { color: var(--papier); font-size: 1.85rem; }
/* Mohnrot auf Tinte ergibt nur 2,94:1. Im Fuß deshalb eine hellere Variante. */
.fuss .wortmarke__punkt { color: #d96b52; }
.fuss__zeile { border-top: 1px solid #3a3733; margin-top: var(--raum-3); padding-top: var(--raum-3); font-size: .8rem; color: #8d867b; }

/* ---------- 18. Startseite ---------- */
.hub { max-width: var(--mass-max); margin: 0 auto; padding: var(--raum-5) 1.5rem 0; }
.hub__kopf { max-width: 44rem; margin-bottom: var(--raum-5); }
.hub__kopf h1 { font-family: var(--mess-display); font-weight: 700; font-size: clamp(1.9rem, 5vw, 2.8rem); line-height: 1.1; letter-spacing: -.02em; margin: 0 0 var(--raum-2); }
.hub__kopf p { font-size: 1.15rem; color: var(--tinte-70); margin: 0; }

.serie { border-top: 2px solid var(--tinte); padding-top: var(--raum-3); margin-bottom: var(--raum-6); }
.serie__kopf { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: baseline; margin-bottom: var(--raum-4); }
.serie__nr { font-family: var(--mess-util); font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--petrol); font-weight: 600; }
.serie__titel { font-family: var(--mess-display); font-weight: 700; font-size: 1.5rem; margin: 0; }
.serie__beschreibung { color: var(--tinte-70); font-size: 1rem; margin: 0; flex-basis: 100%; max-width: 42rem; }

.raster { display: grid; gap: var(--raum-4); grid-template-columns: 1fr; }
/* Jede Serie hat nur zwei Beiträge. Bei „1fr 1fr“ wurde jede Kachel auf einem
   1500er-Schirm über 600 px breit und damit über 900 px hoch. Feste Obergrenze
   statt Vollbreite: die Kacheln bleiben lesbar, das Raster bleibt linksbündig. */
@media (min-width: 38rem) { .raster { grid-template-columns: repeat(auto-fill, minmax(15rem, 21rem)); } }
.karte-artikel { display: flex; flex-direction: column; gap: .85rem; text-decoration: none; color: inherit; }
/* Die Motive sind Hochformat 2:3. Als 16:10-Kachel blieb davon ein Bauchausschnitt
   übrig. 3:4 mit Blick auf das obere Drittel hält Kopf und Oberkörper im Bild. */
/* Kein Beschnitt: die Motive sind Ganzkörperaufnahmen im Format 2:3. Jedes
   engere Format kostet entweder den Kopf oder die Füße. */
.karte-artikel img {
  aspect-ratio: 2/3; object-fit: cover;
  width: 100%; background: var(--linie);
}
.karte-artikel .rubrik { margin: 0; font-size: .68rem; }
.karte-artikel .rubrik::after { display: none; }
.karte-artikel h3 { font-family: var(--mess-display); font-weight: 700; font-size: 1.28rem; line-height: 1.24; margin: 0; letter-spacing: -.01em; }
.karte-artikel:hover h3 { color: var(--petrol); text-decoration: underline; text-underline-offset: .18em; }
.karte-artikel p { margin: 0; font-size: .98rem; color: var(--tinte-70); }
.karte-artikel .meta { font-size: .72rem; color: var(--tinte-45); letter-spacing: .08em; }

/* ---------- 19. Statische Seiten ---------- */
.seite { max-width: var(--mass); margin: 0 auto; padding: var(--raum-5) 1.25rem 0; }
.seite h1 { font-family: var(--mess-display); font-weight: 700; font-size: clamp(1.8rem, 5vw, 2.5rem); line-height: 1.1; margin: 0 0 var(--raum-4); letter-spacing: -.02em; }
.seite h2 { font-family: var(--mess-display); font-weight: 700; font-size: 1.35rem; margin: var(--raum-4) 0 var(--raum-2); }
.seite p, .seite li { font-size: 1.03rem; }
.seite address { font-style: normal; margin-bottom: var(--raum-3); }

/* ---------- 19b. Tap-Targets ----------
   WCAG 2.2 AA (2.5.8) verlangt 24 × 24 px. Gemessen am 20.08.2026:
   Fußzeilen-Links lagen als reine Inline-Elemente bei 18 px, die Wortmarke
   bei 23 px. Die Navigationsleiste war mit 46 px bereits in Ordnung.
   Die Links bleiben inline im Textfluss — nur die Trefferfläche wächst. */
.fuss a, .transparenz a, .seite a {
  display: inline-block;
  padding-block: .3rem;
}
.wortmarke { padding-block: .15rem; }

/* ---------- 20. Hilfsklassen ---------- */
.nur-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/* Einblenden: bewusst NICHT mehr global.
   Zwölf einfadende Blöcke pro Seite waren selbst ein Teil des Problems —
   gleichförmiges Auf-Scroll-Einblenden von allem ist das Erkennungszeichen
   generischer Seiten und verlangsamt beim Lesen spürbar. Eine echte
   Redaktionsseite bewegt sich nicht, wenn man sie liest.
   Bewegung bleibt an genau zwei Stellen, wo sie etwas mitteilt:
   dem Lesefortschritt oben und der Ergebniskarte am Ende.
   `.reveal` bleibt als Klasse im Markup stehen und tut nichts — so muss
   nicht jeder Baustein angefasst werden. */
@media (prefers-reduced-motion: no-preference) {
  .laeuft.fazitkarte { animation: einblenden .5s ease-out both; }
}
@keyframes einblenden {
  from { opacity: 0; transform: translateY(9px); }
  to   { opacity: 1; transform: none; }
}

/* ============================================================
   21. Vergleichs-Bausteine (A5 + Retrofit der übrigen Lander)
   ============================================================ */

/* ---------- Sprungmarke ---------- */
.sprung { margin: 0 0 var(--raum-4); }
.sprung a {
  display: inline-block;
  font-family: var(--mess-util);
  text-transform: uppercase; letter-spacing: .1em;
  font-size: .82rem; font-weight: 600;
  color: var(--petrol); text-decoration: none;
  border: 1px solid var(--petrol);
  padding: .6rem 1.1rem;
}
.sprung a:hover, .sprung a:focus-visible { background: var(--petrol); color: #fff; }

/* ---------- Vergleichstabelle ---------- */
.vergleich-huelle {
  margin: var(--raum-5) 0 var(--raum-2);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--linie);
  background: var(--papier);
}
.vergleich { border-collapse: collapse; width: 100%; min-width: 44rem; font-size: .95rem; }
.vergleich thead th {
  background: var(--tinte); color: var(--papier);
  font-family: var(--mess-util); font-weight: 600;
  text-transform: uppercase; letter-spacing: .08em; font-size: .74rem;
  text-align: left; vertical-align: bottom;
  padding: .9rem .85rem; line-height: 1.35;
}
.vergleich thead th:last-child { background: var(--petrol); }
.vergleich thead th span {
  display: block; text-transform: none; letter-spacing: .03em;
  font-weight: 400; opacity: .75; font-size: .68rem; margin-top: .15rem;
}
.vergleich tbody th {
  text-align: left; font-weight: 600; font-family: var(--mess-body);
  padding: .85rem; background: var(--grund);
  border-top: 1px solid var(--linie); width: 26%;
}
.vergleich td {
  padding: .85rem; vertical-align: top; line-height: 1.45;
  border-top: 1px solid var(--linie); border-left: 1px solid var(--linie);
  color: var(--tinte-70);
}
.vergleich tbody tr:last-child td, .vergleich tbody tr:last-child th { border-bottom: 1px solid var(--linie); }
.vergleich td i {
  font-style: normal; font-weight: 700; margin-right: .5rem;
  display: inline-grid; place-items: center;
  width: 1.35rem; height: 1.35rem; border-radius: 50%;
  font-size: .85rem; vertical-align: -.25rem;
}
.w-ja    i { background: var(--petrol-10);  color: var(--petrol); }
.w-teils i { background: var(--messing-10); color: var(--messing); }
.w-nein  i { background: var(--mohn-10);    color: var(--mohn); }
.vergleich td:last-child { background: rgba(28,93,98,.045); color: var(--tinte); }

.vergleich__legende {
  font-size: .84rem; line-height: 1.55; color: var(--tinte-45);
  margin: 0 0 var(--raum-5);
}
.vergleich__legende b { color: var(--tinte-70); }

/* ---------- Prüfprotokoll ---------- */
.protokoll { list-style: none; margin: 0 0 var(--raum-3); padding: 0; counter-reset: none; }
.protokoll li {
  border-top: 1px solid var(--linie);
  padding: .9rem 0; margin: 0;
  display: grid; gap: .6rem;
}
.protokoll li:last-of-type { border-bottom: 1px solid var(--linie); }
@media (min-width: 40rem) {
  .protokoll li { grid-template-columns: 1fr auto; align-items: center; gap: 1.25rem; }
}
.protokoll b { font-weight: 600; }
.protokoll__wahl { display: flex; gap: .4rem; flex-wrap: wrap; }
.protokoll__opt {
  font: inherit; font-family: var(--mess-util); font-size: .78rem;
  text-transform: uppercase; letter-spacing: .06em;
  background: var(--papier); border: 1px solid var(--linie);
  padding: .5rem .8rem; cursor: pointer; color: var(--tinte-70);
  white-space: nowrap;
}
.protokoll__opt:hover { border-color: var(--petrol); color: var(--tinte); }
.protokoll__opt[aria-pressed="true"] {
  background: var(--petrol); border-color: var(--petrol); color: #fff;
}
.protokoll__punkte {
  font-family: var(--mess-display); font-weight: 700;
  font-size: 1.5rem; margin: 0 0 .5rem;
}
.protokoll__punkte span { color: var(--petrol); }

/* ---------- Ergebnis-Karte ---------- */
.fazitkarte {
  position: relative;
  margin: calc(var(--raum-5) + 1.4rem) 0 var(--raum-5);
  background: var(--papier);
  border: 2px solid var(--tinte);
  padding: var(--raum-4) clamp(1.1rem, 3.5vw, 2rem) var(--raum-4);
  text-align: center;
}
.fazitkarte__tab {
  position: absolute; top: 0; left: 50%;
  transform: translate(-50%, -50%);
  margin: 0; background: var(--tinte); color: var(--papier);
  font-family: var(--mess-util); text-transform: uppercase;
  letter-spacing: .13em; font-size: .7rem; font-weight: 600;
  padding: .45rem .95rem;
}
.fazitkarte__titel {
  font-family: var(--mess-display); font-weight: 700;
  font-size: clamp(1.3rem, 3.6vw, 1.75rem); line-height: 1.18;
  margin: .35rem 0 var(--raum-3); letter-spacing: -.015em;
  text-wrap: balance;
}
.fazitkarte__liste { list-style: none; margin: 0 0 var(--raum-3); padding: 0; text-align: left; }
.fazitkarte__liste li {
  display: flex; gap: .7rem; align-items: baseline;
  padding: .6rem 0; border-top: 1px solid var(--linie);
  font-size: 1rem; line-height: 1.55;
}
.fazitkarte__liste li::before {
  content: "✓"; color: var(--petrol); font-weight: 700;
  flex: none; width: 1.1rem;
}
.fazitkarte__liste b { font-weight: 600; }
.fazitkarte__angebot {
  background: var(--mohn-10); border: 1px solid #ecd3cc;
  padding: var(--raum-3); margin: 0 0 var(--raum-3);
  font-size: .95rem; color: var(--tinte-70);
}
.fazitkarte__angebot span {
  display: block; font-family: var(--mess-util);
  text-transform: uppercase; letter-spacing: .1em; font-size: .68rem;
  color: var(--tinte-45); margin-bottom: .2rem;
}
.fazitkarte__angebot strong {
  display: block; font-family: var(--mess-display); font-weight: 700;
  font-size: clamp(1.5rem, 4.5vw, 2rem); color: var(--mohn);
  line-height: 1.1; margin-bottom: .25rem;
}
.fazitkarte__quelle {
  margin: var(--raum-3) 0 0; font-family: var(--mess-util);
  font-size: .68rem; letter-spacing: .05em; color: var(--tinte-45);
}

/* ---------- Mobile CTA-Leiste ---------- */
/* Vorher nebeneinander: Der Knopf stand auf `flex: none` und beanspruchte mit
   „Jetzt passende Leggings finden“ fast die ganze Zeile. Für den Preis blieb eine
   Spalte von rund 120 px, in der jedes Wort einzeln umbrach. Jetzt zwei Zeilen:
   Preisangabe oben, Knopf über die volle Breite darunter. Die 59,99 € bleiben
   dabei sichtbar, das ist die rechtlich tragende Angabe auf dieser Fläche. */
.angebot-leiste {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  background: var(--papier); border-top: 1px solid var(--linie);
  padding: .55rem .9rem calc(.55rem + env(safe-area-inset-bottom));
  display: none; flex-direction: column; align-items: stretch; gap: .45rem;
  box-shadow: 0 -6px 18px -12px rgba(34,32,29,.4);
}
.angebot-leiste[data-sichtbar="true"] { display: flex; }
/* Mobil bleibt es zweizeilig: Preisangabe oben, Knopf über die volle Breite.
   Der Wrapper trägt das Layout, damit Desktop ihn auf eine Zeile drehen kann. */
.angebot-leiste__inner {
  display: flex; flex-direction: column; align-items: stretch;
  gap: .45rem; width: 100%;
}

.angebot-leiste__text {
  min-width: 0; margin: 0;
  font-family: var(--mess-util); font-size: .62rem;
  text-transform: uppercase; letter-spacing: .01em; color: var(--tinte-45);
  line-height: 1.3;
}
.angebot-leiste__text b {
  display: block;
  margin: .1rem 0 0;
  font-family: var(--mess-display);
  font-weight: 700; font-size: 1rem; line-height: 1.18;
  letter-spacing: -.01em; text-transform: none;
  color: var(--mohn);
  /* Bewusst KEIN white-space: nowrap. Das Angebot rotiert (aktuell
     „2 Leggings für 24 €", vorher 19 €) — ein längerer Text würde bei
     nowrap aus der Leiste laufen statt umzubrechen. Bei 1rem passt der
     jetzige Text einzeilig und hat rund 40 px Luft. */
  text-wrap: balance;
}
.angebot-leiste .knopf {
  display: block; width: 100%; text-align: center;
  padding: .78rem .75rem; font-size: .74rem;
}

/* ⚠️ Dieser Block MUSS nach den Basisregeln von .angebot-leiste stehen.
   Er stand vorher davor; bei gleicher Spezifität gewinnt die spätere Regel,
   also überschrieb `.angebot-leiste__text b { display: block }` still die
   waagerechte Fassung. Die Leiste blieb dadurch 128 px hoch.

   Auf dem Schreibtisch war die Leiste bisher abgeschaltet. Das war eine
   verschenkte Fläche: der Artikel ist auch dort 20+ Bildschirme lang, und wer
   in der Mitte überzeugt ist, hatte keinen Weg zum Angebot außer zu scrollen.
   Desktop bekommt dieselbe Leiste, aber waagerecht und in der Breite begrenzt,
   damit sie nicht wie ein Cookie-Banner über die ganze Fläche liegt. */
@media (min-width: 46rem) {
  .angebot-leiste {
    flex-direction: row; align-items: center; justify-content: center;
    gap: clamp(1rem, 3vw, 2.5rem);
    padding: .7rem clamp(1rem, 4vw, 2rem);
  }
  .angebot-leiste__inner {
    /* flex-direction muss hier ausdrücklich stehen — die Basisregel setzt
       column, sonst bleibt der Knopf unter dem Preis und die Leiste hoch. */
    display: flex; flex-direction: row; align-items: center; justify-content: space-between;
    gap: clamp(1rem, 3vw, 2.5rem);
    width: 100%; max-width: var(--mass-max); margin-inline: auto;
  }
  .angebot-leiste__text { flex: 1 1 auto; }
  /* Waagerecht gehört der Preis in die Zeile, nicht darunter: als Block
     darunter wuchs die Leiste auf 128 px und lag als Bank über dem Text. */
  .angebot-leiste__text b {
    display: inline; margin: 0 0 0 .6rem; font-size: 1.1rem;
    vertical-align: baseline;
  }
  .angebot-leiste .knopf { width: auto; flex: 0 0 auto; padding: .85rem 2rem; font-size: .8rem; }
}

/* ---------- 22. Preisbedingung, Textkarten, Mobil-Zusatz ---------- */
.angebot__bedingung {
  grid-column: 1 / -1;
  margin: var(--raum-2) 0 0;
  padding-top: var(--raum-2);
  border-top: 1px solid #ecd3cc;
  font-size: .88rem; line-height: 1.55; color: var(--tinte-70);
}
.angebot__bedingung strong { color: var(--tinte); }
.fazitkarte__angebot em {
  display: block; margin-top: .5rem; font-style: normal;
  font-size: .82rem; line-height: 1.5; color: var(--tinte-70);
}
.stoffe--text { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 40rem) { .stoffe--text { grid-template-columns: repeat(4, 1fr); } }
.stoffe--text .stoff { padding: 1rem .8rem; text-align: center; }
.stoffe--text .stoff span { padding: 0; font-size: .92rem; letter-spacing: .05em; }

/* ============================================================
   22. Beleggrafiken
   ------------------------------------------------------------
   Die Vergleichsportal-Lander, deren Architektur wir übernommen haben,
   arbeiten fast ohne Lifestyle-Fotos: Diagramme, Zertifikate, Laborbilder.
   Deshalb wirken sie trotz Stockmaterial nicht wie Platzhalter, das Bild
   IST dort das Argument. Wir übernehmen die Form, aber nur mit Zahlen,
   die im Truth Sheet stehen und mit Datum belegt sind.
   ============================================================ */

.grafik {
  margin: calc(var(--raum-5) + 1rem) 0 var(--raum-5);
  padding: var(--raum-4) clamp(1.1rem, 3.5vw, 2rem) var(--raum-3);
  background: var(--papier);
  border: 1px solid var(--linie);
  border-top: 3px solid var(--petrol);
}
.grafik__titel {
  font-family: var(--mess-util);
  font-size: .78rem; letter-spacing: .045em; text-transform: uppercase;
  color: var(--petrol); margin: 0 0 var(--raum-3);
}
.grafik__quelle {
  margin: var(--raum-3) 0 0;
  padding-top: .75rem;
  border-top: 1px solid var(--linie);
  font-size: .78rem; line-height: 1.5; color: var(--tinte-45);
}

/* --- Monatsrhythmus ------------------------------------------------ */
.monat {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(10, 1fr); gap: .3rem;
}
.monat .tag {
  display: grid; place-items: center;
  aspect-ratio: 1; min-height: 2.1rem;
  font-family: var(--mess-util); font-size: .82rem;
  background: var(--grund); border: 1px solid var(--linie);
  color: var(--tinte-45);
}
.monat .tag--fenster { border-color: var(--petrol); color: var(--petrol); font-weight: 600; }
.monat .tag--stichtag { background: var(--mohn); border-color: var(--mohn); color: #fff; font-weight: 600; }
.monat__legende { margin-top: var(--raum-3); display: grid; gap: .6rem; }
.monat__legende p { margin: 0; font-size: .95rem; line-height: 1.55; padding-left: 1.6rem; position: relative; }
.marke { position: absolute; left: 0; top: .38em; width: .85rem; height: .85rem; }
.marke--fenster { border: 1.5px solid var(--petrol); }
.marke--stichtag { background: var(--mohn); }

/* --- Balken: Preisanatomie ----------------------------------------- */
.balken { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--raum-3); }
.balken__label { margin: 0 0 .35rem; font-size: .92rem; color: var(--tinte-70); }
.balken__spur {
  margin: 0; height: .85rem; background: var(--grund);
  border: 1px solid var(--linie); position: relative; overflow: hidden;
}
.balken__wert { display: block; height: 100%; background: var(--petrol); }
.balken__wert--anker { background: var(--tinte-45); }
.balken__wert--jetzt { background: var(--mohn); }
.balken__zahl {
  margin: .3rem 0 0; font-family: var(--mess-display); font-weight: 700;
  font-size: 1.15rem; letter-spacing: -.01em;
}
.balken__zahl--mohn { color: var(--mohn); }

/* --- Größenband ----------------------------------------------------- */
.groessenband {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: .3rem;
}
.groessenband .groesse {
  flex: 1 1 auto; text-align: center;
  padding: .55rem .35rem;
  font-family: var(--mess-util); font-size: .78rem; letter-spacing: .04em;
  background: var(--grund); border: 1px solid var(--linie); color: var(--tinte-70);
  white-space: nowrap;
}
.groessenband .groesse--gross {
  background: var(--petrol-10); border-color: var(--petrol); color: var(--petrol); font-weight: 600;
}
.groessenband__hinweis { margin: var(--raum-3) 0 0; font-size: .95rem; line-height: 1.55; }

/* --- Verlauf: was wir gemacht haben --------------------------------- */
.verlauf { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.verlauf li {
  display: grid; grid-template-columns: 5.5rem 1fr; gap: var(--raum-2);
  padding: .8rem 0; border-bottom: 1px solid var(--linie);
  align-items: baseline;
}
.verlauf li:last-child { border-bottom: 0; }
.verlauf b {
  font-family: var(--mess-util); font-size: .8rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--petrol);
}
.verlauf span { font-size: .98rem; line-height: 1.55; }

/* --- Note: Produktbewertung ----------------------------------------- */
.note__wert {
  margin: 0; font-family: var(--mess-display); font-weight: 700;
  font-size: clamp(2.4rem, 8vw, 3.4rem); line-height: 1; letter-spacing: -.03em;
  color: var(--petrol);
}
.note__wert span {
  font-family: var(--mess-util); font-weight: 400;
  font-size: .82rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--tinte-45); margin-left: .6rem;
}
.note__spur {
  margin: var(--raum-2) 0 .5rem; height: .55rem;
  background: var(--grund); border: 1px solid var(--linie); overflow: hidden;
}
.note__spur span { display: block; height: 100%; background: var(--petrol); }
.note__meta { margin: 0; font-size: .95rem; color: var(--tinte-70); }

/* Zwei getrennte Skalen in der Preisgrafik: 168/24 € gelten für zwei Leggings,
   74,95/22,48 € für eine. Eine gemeinsame Skala wäre irreführend gewesen. */
.skala + .skala { margin-top: var(--raum-3); padding-top: var(--raum-3); border-top: 1px solid var(--linie); }
.skala__kopf {
  margin: 0 0 var(--raum-2);
  font-family: var(--mess-util); font-size: .72rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--tinte-45);
}
.skala__hinweis { margin: var(--raum-3) 0 0; font-size: .9rem; line-height: 1.55; color: var(--tinte-70); }