/* Verbraucherspiegel – Vergleichstest, Entwurf V08 „Schnell weiße Zähne: Was ist in zwei Wochen realistisch?“ (mobile first, 90 % mobil)
   Zusätzlich zu style.css. Nur neue Klassen mit Präfix vt-; bestehende Klassen werden ausschließlich unter .vt-page für diese Seite angepasst.
   Idee: ruhige, klassische Lesespalte (45 rem) – Kennzeichnung als Kleinkapitälchen-Zeile mit Haarlinie, Kicker in Akzentgrün, Titel,
   Vorspann, Byline/Prüfzeile/Datum/Lesezeit, Titelbild, „Kurz gesagt“, dann die Fragen des Artikels in Originalreihenfolge mit ihren
   Grafiken, Fotos und der einen Tabelle an Ort und Stelle. Mobil (360 px) laufen die Astra-Illustrationen (viewBox 360) randlos über die
   volle Bildschirmbreite, damit ihre Schrift 1:1 (>= 14 px) gerendert wird; ab 40em sind sie auf 27 rem gedeckelt und zentriert (kein
   Aufblasen auf Spaltenbreite); Fotos in Spaltenbreite mit 6 px Rundung; Buttons volle Breite, >= 44 px hoch.
   Testbericht-Block: Rang-Plakette (grünes Quadrat, weiße Ziffer in Merriweather >= 18 px fett) neben Kicker und Produktname; Platz 1 im
   2-px-Rahmen in Brandgrün mit Produktbild, Gesamtnote + Urteil, Siegel (inline, 116–140 px), fünf grünen Notenbalken, „Unser Fazit“,
   Vorteile (grüner Haken) / Nachteile (grauer Strich), Sieger-Illustration, „Für wen“, Vorher/Nachher, Button (mobil füllt das Produktbild
   die Höhe von Note + Siegel; Desktop: Illustration links, „Für wen“ + Vorher/Nachher + Button rechts). Plätze 2–5 kompakt im
   Haarlinien-Rahmen: kleines Bild, Note, drei Kernpunkte, Kriterien als schmale Balkenzeilen, Fazit, Vorteile/Nachteile aufklappbar,
   Button „Zum Produkt“ (Umriss). Fazit mit Rangliste als dreispaltiger Tabelle (Platz · Produkt/Urteil · Note, kein Scrollen) und
   Empfehlungskasten. Nacharbeit 12.09.: „Anzeige“ als umrandetes Label wie V01; der 14-Tage-Plan als Bullet-Kasten (ul.vt-plan im
   Haarlinien-Rahmen, grüne Quadratpunkte, Vorspann fett) statt nummerierter Liste; Abschnitt, der nur mit seiner Überschrift die Blöcke
   Platz 2–5 einleitet (vt-sec-lead), sitzt eng auf den Blöcken.
   Farben nur aus den Marken-Variablen: Grün #55B611 als Fläche (Plakette, Balken, Buttons, Rahmen), #3A7A0C für Akzenttext, Schwarz
   #111111, Grau #6B6B6B, Haarlinien #DADADA; Warn-/Minus-Symbole nur Grau. Weißer Text nur auf #55B611 in >= 18 px fett. */

.vt-page { --vt-col: 45rem; --vt-wide: 54rem; --vt-track: #E9E9E9; --vt-red: #D14343; --vt-pad: 0.875rem; --vt-bleed: 1.25rem; }
.vt-col { width: 100%; max-width: var(--vt-col); margin-inline: auto; }
@media (min-width: 60em) { .vt-col { font-size: 1.0625rem; } }

/* ---------- Artikelkopf ---------- */
.vt-head { padding-top: 1.25rem; }
/* Kennzeichnung: umrandetes Label wie V01 (1 px Schwarz, Kleinkapitälchen) */
.vt-ad {
  display: inline-block;
  font-family: var(--sans);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  border: 1px solid var(--ink);
  padding: 0.2rem 0.55rem;
  line-height: 1.3;
  margin-bottom: 1rem;
}
.vt-head .kicker { margin-bottom: 0.65rem; color: var(--accent); }
.vt-head h1 { font-size: clamp(1.7rem, 7.2vw, 2.6rem); line-height: 1.15; overflow-wrap: anywhere; }
.vt-dek { margin-top: 0.95rem; font-size: 1.06rem; line-height: 1.55; color: var(--ink); }
.vt-meta { margin-top: 1.1rem; padding-top: 0.8rem; border-top: 1px solid var(--hair); font-size: 0.875rem; color: var(--muted); line-height: 1.7; }
.vt-meta .vt-byline { color: var(--ink); font-weight: 700; }
.vt-meta .vt-review { color: var(--ink); }
/* Mobil: Byline, Prüfzeile und „Datum · Lesezeit“ je in eigener Zeile; ab 40em eine Zeile mit Trennpunkten */
.vt-meta > span { display: block; }
.vt-meta .vt-sep { display: none; }
.vt-meta .vt-date, .vt-meta .vt-sep-time, .vt-meta .vt-time { display: inline; }
@media (min-width: 40em) {
  .vt-meta > span, .vt-meta .vt-sep { display: inline; }
}
@media (min-width: 60em) {
  .vt-head { padding-top: 2.25rem; }
  .vt-head h1 { font-size: clamp(2.1rem, 3.4vw, 2.6rem); }
  .vt-dek { font-size: 1.2rem; }
}

/* Titelbild in der Lesespalte */
.vt-hero { margin: 1.4rem 0 0; }
.vt-hero img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; object-position: 50% 40%; border-radius: 6px; }

/* ---------- Kurz gesagt (parts.lead: ol) ---------- */
.vt-kurz { margin-top: 1.6rem; }
.vt-page .vs-lead { margin: 0; padding: 0.95rem 0 1.05rem; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--hair); }
.vt-page .vs-lead .caps { margin-bottom: 0.6rem; }
.vt-page .vs-lead ol, .vt-page .vs-lead ul { list-style: none; counter-reset: lead; margin: 0; padding: 0; display: grid; gap: 0.4rem; }
.vt-page .vs-lead li { counter-increment: lead; display: grid; grid-template-columns: 1.6rem minmax(0, 1fr); column-gap: 0.4rem; padding: 0; font-size: 1rem; line-height: 1.5; }
.vt-page .vs-lead li::before { content: counter(lead); font-family: var(--serif); font-weight: 700; font-size: 1.2rem; line-height: 1.25; color: var(--accent); padding: 0; }

/* ---------- Lesespalte ---------- */
.vt-body { padding-top: 0.25rem; }
.vt-page .vs-section { margin-top: 2.25rem; }
.vt-page .vs-section h2 { font-size: 1.45rem; line-height: 1.2; margin-bottom: 0.85rem; }
.vt-page .vs-section p { font-size: 1rem; line-height: 1.62; }
/* Callout aus dem Inhalt: typografischer Marker (grüne Linie links), keine Fläche */
.vt-page .vs-callout { margin: 1.4rem 0 1.4rem; padding: 0.15rem 0 0.15rem 1rem; border-top: 0; border-left: 2px solid var(--brand); }
.vt-page .vs-callout p:not(.vs-callout-title) { font-size: 1.05rem; line-height: 1.5; }
.vt-page .vs-list { margin: 0.75rem 0 0.5rem; }
.vt-page .vs-list li { margin: 0.45rem 0; line-height: 1.55; }
/* 14-Tage-Plan als Bullet-Kasten (aus der nummerierten Liste des Inhalts): Haarlinien-Rahmen, 6 px Rundung, Zeilen mit Haarlinie,
   grüner Quadratpunkt (positiver Akzent, kein Warnzeichen), Vorspann vor dem Doppelpunkt fett */
.vt-page .vs-list.vt-plan { list-style: none; margin: 1rem 0 0.5rem; padding: 0.3rem 1rem 0.4rem; border: 1px solid var(--hair); border-radius: 6px; }
.vt-page .vt-plan li { position: relative; margin: 0; padding: 0.7rem 0 0.75rem 1.3rem; font-size: 0.97rem; line-height: 1.5; border-bottom: 1px solid var(--hair); }
.vt-page .vt-plan li:last-child { border-bottom: 0; }
.vt-page .vt-plan li::before { content: ""; position: absolute; left: 0; top: 1.2rem; width: 0.5rem; height: 0.5rem; background: var(--brand); border-radius: 1px; }
/* Abschnitt, der nur mit seiner Überschrift die Blöcke Platz 2–5 einleitet */
.vt-page .vs-section.vt-sec-lead h2 { margin-bottom: 0; }
.vt-sec-lead + .vt-produkte { margin-top: 1rem; }
@media (min-width: 60em) {
  .vt-page .vs-section { margin-top: 2.75rem; }
  .vt-page .vs-section h2 { font-size: 1.7rem; }
  .vt-page .vs-section p { font-size: 1.0625rem; }
}

/* Abbildungen: ruhige Figuren mit Titel und Bildunterschrift; mobil läuft die Illustration randlos (SVG viewBox 360 = 360 px) */
.vt-page .vs-figure { margin: 1.5rem 0 1.75rem; }
.vt-page .vs-figure-title { font-family: var(--sans); font-weight: 700; font-size: 0.95rem; line-height: 1.4; margin-bottom: 0.6rem; }
.vt-page .vs-figure-caption { margin-top: 0.6rem; font-size: 0.85rem; line-height: 1.5; color: var(--muted); }
.vt-page .vs-illu { border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); padding: 0.4rem 0; }
.vt-page .vs-illu svg { display: block; width: 100%; height: auto; }
/* Ab 40em: die Astra-Illustrationen (viewBox 360) nicht auf Spaltenbreite aufblasen – gedeckelt auf 27 rem (Schrift 14 → ~17 px), zentriert;
   die Haarlinien der Figur laufen weiter über die ganze Lesespalte */
@media (min-width: 40em) {
  .vt-body > .vs-figure-svg .vs-illu svg { max-width: 27rem; margin-inline: auto; }
}
@media (max-width: 39.99em) {
  .vt-body > .vs-figure-svg .vs-illu { margin-inline: calc(-1 * var(--vt-bleed)); }
}
/* Figurentitel, der wörtlich als Überschrift in der SVG steht: nur visuell verborgen (Text bleibt für Screenreader) */
.vt-figtitle-dup { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Fotos im Fließtext: Spaltenbreite, 6 px Rundung, Bildunterschrift; Platzhalter nur bei fehlender Datei */
.vt-page .vs-photo { margin: 1.5rem 0 1.75rem; }
.vt-page .vs-photo img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 6px; }
.vt-page .vs-photo-placeholder { padding: 2.5rem 1rem; border: 1px dashed var(--hair); border-radius: 6px; background: #F5F5F5; color: var(--muted); font-size: 0.95rem; text-align: center; }

/* Tabelle (zwei Spalten): kein Mindestmaß, kein Scrollen */
.vt-page .vs-table-wrap { overflow: visible; border-top: 1px solid var(--ink); }
.vt-page .vs-table { min-width: 0; width: 100%; font-size: 0.92rem; line-height: 1.45; }
.vt-page .vs-table th, .vt-page .vs-table td { padding: 0.6rem 0.75rem 0.6rem 0; }
.vt-page .vs-table td:first-child { font-weight: 700; width: 38%; }
.vt-page .vs-table td:last-child, .vt-page .vs-table th:last-child { padding-right: 0; }

/* ---------- Testbericht-Blöcke ---------- */
.vt-produkte { margin-top: 1.75rem; }
.vt-produkt + .vt-produkt { margin-top: 1.5rem; }
.vt-produkt { border: 1px solid var(--hair); border-radius: 6px; padding: var(--vt-pad); background: var(--paper); }
.vt-produkt-1 { border: 2px solid var(--brand); }

/* Kopf: Rang-Plakette + Kicker + Produktname */
.vt-p-head { display: grid; grid-template-columns: 2.75rem minmax(0, 1fr); column-gap: 0.75rem; align-items: start; }
.vt-p-plate {
  width: 2.75rem; height: 2.75rem;
  display: grid; place-items: center;
  font-family: var(--serif); font-weight: 700; font-size: 1.5rem; line-height: 1;
  color: #FFFFFF; background: var(--brand); border-radius: 4px;
}
.vt-produkt-n .vt-p-plate { color: var(--ink); background: var(--paper); border: 2px solid var(--ink); }
.vt-p-rank { font-family: var(--sans); font-size: 0.74rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); line-height: 1.4; }
.vt-produkt-n .vt-p-rank { color: var(--muted); }
.vt-p-head h3 { font-size: 1.3rem; line-height: 1.2; margin: 0.15rem 0 0; overflow-wrap: anywhere; }

/* Platz 1: Bild links, Note + Siegel rechts, darunter Balken */
.vt-p-top { margin-top: 1rem; display: grid; column-gap: 0.9rem; row-gap: 0.6rem; align-items: start; }
.vt-p-top-1 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "img score" "img seal" "bars bars"; }
/* Mobil füllt das Produktbild die Höhe von Note + Siegel (object-fit: cover, Bild bleibt ohne Balken darunter) */
@media (max-width: 39.99em) {
  .vt-p-top-1 .vt-p-img { align-self: stretch; display: grid; }
  .vt-p-top-1 .vt-p-img img { height: 100%; min-height: 12rem; aspect-ratio: auto; }
}
/* Tablet (40–60em): feste Bildspalte im Hochformat 3:4, Note + Siegel rechts, Balken darunter */
@media (min-width: 40em) and (max-width: 59.99em) {
  .vt-p-top-1 { grid-template-columns: 13rem minmax(0, 1fr); column-gap: 1.25rem; }
}
.vt-p-img { grid-area: img; margin: 0; }
.vt-p-img img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 6px; background: #F5F5F5; }
.vt-p-score { grid-area: score; }
.vt-p-note { display: flex; align-items: baseline; gap: 0.35rem; flex-wrap: wrap; }
.vt-p-num { font-family: var(--serif); font-weight: 700; font-size: 2.6rem; line-height: 1; letter-spacing: -0.02em; color: var(--ink); font-variant-numeric: tabular-nums; }
.vt-p-of { font-size: 0.85rem; color: var(--muted); }
.vt-p-urteil { margin-top: 0.4rem; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); line-height: 1.4; }
.vt-p-sub { margin-top: 0.25rem; font-size: 0.8rem; line-height: 1.45; color: var(--muted); }
.vt-seal { grid-area: seal; }
.vt-seal svg { display: block; width: 7.25rem; height: auto; }

/* Notenbalken (fünf Kriterien, Skala bis 10) */
.vt-bars { grid-area: bars; list-style: none; margin: 0.3rem 0 0; padding: 0; border-top: 1px solid var(--hair); }
.vt-bars li { display: grid; grid-template-columns: minmax(0, 1fr) 2.4rem; grid-template-areas: "k v" "bar bar"; column-gap: 0.5rem; padding: 0.5rem 0 0.55rem; border-bottom: 1px solid var(--hair); }
.vt-bars .k { grid-area: k; font-size: 0.9rem; font-weight: 700; line-height: 1.4; }
.vt-bars .v { grid-area: v; text-align: right; font-weight: 700; font-size: 0.95rem; line-height: 1.4; font-variant-numeric: tabular-nums; color: var(--ink); }
.vt-bars .bar { grid-area: bar; display: block; height: 0.45rem; margin-top: 0.3rem; background: var(--vt-track); border-radius: 2px; overflow: hidden; }
.vt-bars .bar > span { display: block; height: 100%; background: var(--brand); }

/* Fazit, Vorteile/Nachteile, Für wen */
.vt-p-fazit { margin: 1.1rem 0 0 !important; font-size: 1rem; line-height: 1.55; }
.vt-pc { margin-top: 1rem; display: grid; gap: 0.9rem; }
.vt-pc-label { font-family: var(--sans); font-size: 0.74rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); line-height: 1.4; padding-bottom: 0.35rem; border-bottom: 1px solid var(--hair); }
.vt-pros, .vt-cons { list-style: none; margin: 0.35rem 0 0; padding: 0; }
.vt-pros li, .vt-cons li { position: relative; padding-left: 1.5rem; margin: 0.4rem 0; font-size: 0.95rem; line-height: 1.45; }
.vt-pros li::before, .vt-cons li::before { content: ""; position: absolute; left: 0; top: 0.2rem; width: 1rem; height: 1rem; background-repeat: no-repeat; background-size: 1rem 1rem; }
/* Vorteile: grüner Haken (#3A7A0C); Nachteile: grauer Strich (#6B6B6B) – nie Grün für Minus/Warnzeichen */
.vt-pros li::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.5 8.5 6 12 13.5 4' fill='none' stroke='%233A7A0C' stroke-width='2.2' stroke-linecap='butt' stroke-linejoin='miter'/%3E%3C/svg%3E"); }
.vt-cons li::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8h10' fill='none' stroke='%236B6B6B' stroke-width='2.2'/%3E%3C/svg%3E"); }
.vt-p-fuerwen { margin: 1rem 0 0 !important; font-size: 0.95rem; line-height: 1.5; }

/* Sieger-Illustration im Block: mobil bis an den Innenrand des Rahmens (Schrift >= 14 px), Vorher/Nachher darunter */
.vt-produkt .vs-figure { margin: 1.1rem 0 0; }
.vt-produkt .vs-figure-svg .vs-illu { margin-inline: calc(-1 * var(--vt-pad)); }
.vt-ba { margin: 1rem 0 0; }
.vt-ba-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
.vt-ba-item { position: relative; margin: 0; }
.vt-ba-item img { display: block; width: 100%; height: auto; aspect-ratio: 800 / 436; object-fit: cover; border-radius: 6px; }
.vt-ba-tag { position: absolute; left: 0.4rem; top: 0.4rem; font-family: var(--sans); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #FFFFFF; background: var(--ink); padding: 0.15rem 0.45rem; line-height: 1.4; border-radius: 2px; }
.vt-ba-cap { margin-top: 0.5rem; font-size: 0.85rem; line-height: 1.5; color: var(--muted); }

/* Plätze 2–5: kleines Bild, Note, drei Kernpunkte, Kriterienzeilen */
.vt-p-top-n { grid-template-columns: 5.5rem minmax(0, 1fr); grid-template-areas: "img score" "facts facts" "bars bars"; }
.vt-p-top-n .vt-p-num { font-size: 2.1rem; }
.vt-p-facts { grid-area: facts; margin: 0.4rem 0 0; display: grid; gap: 0.4rem; }
.vt-p-facts > div { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); column-gap: 0.6rem; font-size: 0.9rem; line-height: 1.45; }
.vt-p-facts dt { font-family: var(--sans); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); padding-top: 0.2rem; }
.vt-p-facts dd { margin: 0; color: var(--ink); }
.vt-produkt-n .vt-bars li { padding: 0.35rem 0 0.4rem; }
.vt-produkt-n .vt-bars .k { font-size: 0.85rem; font-weight: 400; }
.vt-produkt-n .vt-bars .v { font-size: 0.9rem; }
.vt-produkt-n .vt-bars .bar { height: 0.3rem; margin-top: 0.25rem; }
.vt-produkt-n .vt-p-fazit { font-size: 0.95rem; }

/* Aufklapper Vorteile/Nachteile */
.vt-pc-details { margin-top: 0.9rem; border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); }
.vt-pc-details > summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 1rem; min-height: 2.75rem; padding: 0.5rem 0; font-weight: 700; font-size: 0.95rem; color: var(--ink); }
.vt-pc-details > summary::-webkit-details-marker { display: none; }
.vt-pc-details > summary::after { content: "+"; font-family: var(--sans); font-weight: 500; font-size: 1.4rem; line-height: 1; color: var(--ink); }
.vt-pc-details[open] > summary::after { content: "−"; }
.vt-pc-details .vt-pc { margin: 0.25rem 0 1rem; }

/* Buttons: mobil volle Breite, >= 44 px hoch; weißer Text nur auf Grün in >= 18 px fett */
.vt-p-cta { margin: 1.25rem 0 0 !important; }
.vt-btn {
  display: block;
  width: 100%;
  box-sizing: border-box;
  text-align: center;
  font-family: var(--sans);
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.2;
  color: #FFFFFF;
  background: var(--brand);
  text-decoration: none;
  padding: 0.85rem 1.25rem;
  min-height: 2.75rem;
  border-radius: 4px;
}
.vt-btn:hover, .vt-btn:focus-visible { background: var(--accent); color: #FFFFFF; text-decoration: none; }
/* Plätze 2–5: Umriss-Variante, damit der Testsieger-Button vorn bleibt */
.vt-btn-2 { color: var(--accent); background: var(--paper); border: 2px solid var(--accent); padding: calc(0.85rem - 2px) calc(1.25rem - 2px); }
.vt-btn-2:hover, .vt-btn-2:focus-visible { background: var(--accent); color: #FFFFFF; }
@media (min-width: 40em) {
  .vt-btn { display: inline-block; width: auto; min-width: 16rem; }
  .vt-produkt .vs-figure-svg .vs-illu { margin-inline: 0; }
}

/* Desktop: Platz 1 breiter als die Lesespalte, Bild | Note + Balken | Siegel; Illustration neben „Für wen“ + Vorher/Nachher */
@media (min-width: 60em) {
  .vt-produkte { margin-top: 2.25rem; }
  .vt-produkt + .vt-produkt { margin-top: 2rem; }
  .vt-produkt { padding: 1.5rem 1.75rem 1.75rem; }
  .vt-produkt-1 { width: var(--vt-wide); margin-left: calc((var(--vt-col) - var(--vt-wide)) / 2); }
  .vt-p-head { grid-template-columns: 3.25rem minmax(0, 1fr); column-gap: 1rem; }
  .vt-p-plate { width: 3.25rem; height: 3.25rem; font-size: 1.75rem; }
  .vt-p-head h3 { font-size: 1.6rem; }
  .vt-p-top { margin-top: 1.4rem; }
  .vt-p-top-1 { grid-template-columns: 14rem minmax(0, 1fr) 9.5rem; grid-template-areas: "img score seal" "img bars seal"; column-gap: 1.75rem; row-gap: 0.75rem; }
  .vt-p-num { font-size: 3.2rem; }
  .vt-produkt-1 .vt-bars { margin-top: 0.5rem; }
  .vt-seal { justify-self: end; }
  .vt-seal svg { width: 8.75rem; }
  .vt-p-fazit { margin-top: 1.4rem !important; font-size: 1.05rem; }
  .vt-pc { grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-top: 1.25rem; }
  .vt-p-proof { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 1.75rem; align-items: start; margin-top: 1.25rem; }
  .vt-p-proof .vs-figure, .vt-p-side .vt-p-fuerwen { margin-top: 0 !important; }
  .vt-p-side .vt-ba { margin-top: 1rem; }
  .vt-p-side .vt-p-cta { margin-top: 1.5rem !important; }
  .vt-p-top-n { grid-template-columns: 8rem minmax(0, 1fr); grid-template-areas: "img score" "img facts" "img bars"; column-gap: 1.5rem; row-gap: 0.6rem; }
  .vt-p-facts > div { grid-template-columns: 6.5rem minmax(0, 1fr); }
}

/* ---------- FAQ ---------- */
.vt-page .vs-faq-item > summary { min-height: 2.75rem; }

/* ---------- Fazit: Text, Rangliste als dreispaltige Tabelle (Platz · Produkt/Urteil · Note, kein Scrollen), Empfehlung mit Button ---------- */
.vt-page .vt-fazit { margin-top: 2.75rem; border-top: 1px solid var(--ink); padding-top: 1.25rem; }
.vt-page .vt-fazit p { font-size: 1.02rem; line-height: 1.55; }
.vt-rangliste-wrap { margin-top: 1.5rem; overflow: visible; }
.vt-rangliste { width: 100%; min-width: 0; border-collapse: collapse; font-size: 0.95rem; line-height: 1.35; table-layout: auto; }
.vt-rangliste caption.vt-rl-label { caption-side: top; text-align: left; padding: 0 0 0.5rem; color: var(--ink); }
.vt-rangliste th { font-family: var(--sans); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); text-align: left; line-height: 1.4; padding: 0.55rem 0.5rem 0.5rem 0; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--hair); }
.vt-rangliste td { vertical-align: top; padding: 0.65rem 0.5rem 0.7rem 0; border-bottom: 1px solid var(--hair); }
.vt-rangliste th:last-child, .vt-rangliste td:last-child { padding-right: 0; }
.vt-rangliste td.vt-rl-rank { width: 3rem; font-family: var(--serif); font-weight: 700; font-size: 1.15rem; line-height: 1.3; color: var(--muted); font-variant-numeric: tabular-nums; }
.vt-rangliste .vt-rl-first td.vt-rl-rank { color: var(--accent); }
.vt-rangliste td.vt-rl-name { font-weight: 700; color: var(--ink); overflow-wrap: anywhere; }
.vt-rl-urteil { display: block; margin-top: 0.15rem; font-weight: 400; font-size: 0.82rem; color: var(--muted); }
.vt-rangliste th.vt-rl-note { text-align: right; }
.vt-rangliste td.vt-rl-note { width: 3.4rem; font-family: var(--serif); font-weight: 700; font-size: 1.25rem; line-height: 1.2; text-align: right; font-variant-numeric: tabular-nums; color: var(--ink); }
.vt-cta { margin-top: 1.5rem; border: 2px solid var(--brand); border-radius: 6px; padding: 1.1rem var(--vt-pad) 1.2rem; }
.vt-cta h3 { font-size: 1.25rem; line-height: 1.2; margin: 0 0 0.5rem; }
.vt-page .vt-cta p { font-size: 1rem; }
.vt-cta .vt-p-cta { margin-top: 1rem !important; }
@media (min-width: 40em) {
  .vt-rangliste td.vt-rl-rank { width: 3.5rem; }
  .vt-rangliste td.vt-rl-note { width: 4.5rem; }
  .vt-cta { padding: 1.4rem 1.5rem 1.5rem; }
}

/* ---------- Kennzeichnung, Quellen, Autorenbox ---------- */
.vt-disclaimer { margin-top: 2.25rem; font-size: 0.875rem; line-height: 1.55; color: var(--muted); }
.vt-page .vs-references { margin-top: 2rem; }
.vt-autor { margin: 2.5rem 0 1rem; border: 1px solid var(--hair); border-radius: 6px; padding: 1.1rem 1rem 1.2rem; display: grid; grid-template-columns: 3rem minmax(0, 1fr); column-gap: 1rem; align-items: start; }
.vt-autor-mark { width: 3rem; height: 3rem; display: grid; place-items: center; background: var(--brand); color: #FFFFFF; border-radius: 4px; }
.vt-autor-mark svg { width: 2rem; height: 2rem; display: block; }
.vt-autor .caps { margin-bottom: 0.15rem; }
.vt-autor-name { font-family: var(--serif); font-weight: 700; font-size: 1.05rem; line-height: 1.3; }
.vt-autor-text { margin-top: 0.4rem; font-size: 0.9rem; line-height: 1.5; color: var(--ink); }


/* Runde 4 (W): quadratische Brand-Bullets für Stichpunkte im Fließtext (Betreiber: wie „Unser Praxisbefund“ in V07) */
.vt-page .vs-article-body ul.vs-list { list-style: none; margin: 0.9rem 0 1.1rem; padding: 0; display: grid; gap: 0.5rem; }
.vt-page .vs-article-body ul.vs-list > li { position: relative; padding-left: 1.35rem; line-height: 1.55; }
.vt-page .vs-article-body ul.vs-list > li::before { content: ""; position: absolute; left: 0; top: 0.62rem; width: 0.55rem; height: 0.55rem; background: #55B611; }
.vt-page .vs-article-body .vs-callout { margin: 1.4rem 0 0.6rem; padding: 0 0 0 1.35rem; border: 0; position: relative; }
.vt-page .vs-article-body .vs-callout::before { content: ""; position: absolute; left: 0; top: 0.55rem; width: 0.55rem; height: 0.55rem; background: #55B611; }
.vt-page .vs-article-body .vs-callout p { margin: 0; font-family: var(--serif, Merriweather, Georgia, serif); font-style: italic; font-size: 1.06rem; line-height: 1.5; color: #111; }


/* ===== Runde 4 (W): Erscheinungsbild aus test-i übernommen – Kopf zentriert, Hero 2:1, Kurz-gesagt-Kacheln, Kapitelnummern, „Bild 0n“-Tags ===== */
.vt-page.vt-w .vt-head { max-width: 52rem; margin-inline: auto; text-align: center; padding-top: 1.75rem; }
.vt-page.vt-w .vt-ad { display: inline-block; border: 0; border-top: 3px solid #55B611; padding: 0.4rem 0 0; font-size: 0.74rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #111; margin-bottom: 1rem; }
.vt-page.vt-w .vt-head .kicker { margin-bottom: 0.9rem; }
.vt-page.vt-w .vt-head h1 { font-size: clamp(1.85rem, 7vw, 3.1rem); line-height: 1.06; max-width: 17em; margin-inline: auto; }
.vt-page.vt-w .vt-dek { margin: 1.25rem auto 0; font-family: var(--serif, Merriweather, Georgia, serif); font-size: 1.12rem; line-height: 1.5; max-width: 34em; color: #111; }
.vt-page.vt-w .vt-meta { margin-top: 1.4rem; padding-top: 0.9rem; border-top: 1px solid #DADADA; font-size: 0.875rem; color: #6B6B6B; line-height: 1.7; }
.vt-page.vt-w .vt-hero { margin: 1.75rem auto 0; }
.vt-page.vt-w .vt-hero img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; object-position: 50% 30%; border-radius: 0; }
@media (min-width: 60em) { .vt-page.vt-w .vt-head { padding-top: 3rem; } .vt-page.vt-w .vt-head h1 { font-size: clamp(2.4rem, 4vw, 3.1rem); } .vt-page.vt-w .vt-dek { font-size: 1.2rem; } .vt-page.vt-w .vt-hero { margin-top: 2.5rem; } .vt-page.vt-w .vt-hero img { aspect-ratio: 2 / 1; } }
/* Kurz gesagt als Kacheln mit grüner Ziffer */
.vt-page.vt-w .vt-kurz { margin-top: 2rem; }
.vt-page.vt-w .vs-lead { margin: 0; padding: 0; border: 0; background: transparent; }
.vt-page.vt-w .vs-lead .caps { margin: 0 0 0.8rem !important; text-align: center; }
.vt-page.vt-w .vs-lead ol { list-style: none; counter-reset: lead; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.vt-page.vt-w .vs-lead li { counter-increment: lead; display: grid; grid-template-columns: 2.25rem minmax(0, 1fr); column-gap: 0.85rem; align-items: start; border: 1px solid #DADADA; padding: 0.9rem 1rem; font-size: 1rem; line-height: 1.5; }
.vt-page.vt-w .vs-lead li::before { content: counter(lead); display: grid; place-items: center; width: 2.25rem; height: 2.25rem; background: #55B611; color: #fff; font-family: var(--serif, Merriweather, Georgia, serif); font-weight: 700; font-size: 1.25rem; line-height: 1; padding: 0; }
@media (min-width: 60em) { .vt-page.vt-w .vs-lead ol { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; } }
/* Kapitelköpfe: große grüne Ziffer, Kicker, h2 */
.vt-page.vt-w .vt-chapter { margin-top: 3rem; padding-top: 1.75rem; border-top: 1px solid #111; scroll-margin-top: 5.5rem; }
.vt-page.vt-w .vt-chapter-head { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 1rem; align-items: start; }
.vt-page.vt-w .vt-chapter-nr { grid-row: 1 / span 2; font-family: var(--serif, Merriweather, Georgia, serif); font-weight: 700; font-size: 2.6rem; line-height: 0.85; color: #3A7A0C; font-variant-numeric: tabular-nums; padding-top: 0.1rem; }
.vt-page.vt-w .vt-chapter-kicker { grid-column: 2; margin: 0; }
.vt-page.vt-w .vt-chapter h2 { grid-column: 2; font-size: 1.5rem; line-height: 1.18; margin: 0.25rem 0 0; }
@media (min-width: 60em) { .vt-page.vt-w .vt-chapter { margin-top: 4rem; padding-top: 2.25rem; } .vt-page.vt-w .vt-chapter-nr { font-size: 3.4rem; } .vt-page.vt-w .vt-chapter h2 { font-size: 1.9rem; } }
/* Grafiken: schwarzer Nummern-Tag, Serifentitel, Haarlinienrahmen mit Innenabstand */
.vt-page.vt-w .vs-figure { margin: 2.25rem 0; }
.vt-page.vt-w .vs-figure-title { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.8rem; margin: 0 0 0.8rem; font-weight: 700; line-height: 1.3; }
.vt-page.vt-w .vs-figure-title.vt-figtitle-dup { position: static; clip: auto; height: auto; width: auto; overflow: visible; }
.vt-page.vt-w .vt-bild-nr { flex: none; display: inline-block; font-family: var(--sans, Lato, Arial, sans-serif); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #fff; background: #111; padding: 0.28rem 0.6rem; line-height: 1.3; font-variant-numeric: tabular-nums; }
.vt-page.vt-w .vt-bild-titel { font-family: var(--serif, Merriweather, Georgia, serif); font-weight: 700; font-size: 1.15rem; line-height: 1.25; color: #111; letter-spacing: -0.01em; }
.vt-page.vt-w .vs-illu { border: 1px solid #DADADA; padding: 0.6rem; background: #fff; }
.vt-page.vt-w .vs-illu svg { display: block; width: 100%; height: auto; }
.vt-page.vt-w .vs-table-wrap { border: 1px solid #DADADA; }
.vt-page.vt-w .vs-figure-caption { display: block; margin-top: 0.8rem; font-size: 0.875rem; line-height: 1.5; color: #6B6B6B; }
@media (min-width: 60em) { .vt-page.vt-w .vs-illu { padding: 1.25rem 1.5rem; } .vt-page.vt-w .vt-bild-titel { font-size: 1.35rem; } .vt-page.vt-w .vs-figure-caption { font-size: 0.9rem; } }


/* ===== Runde 4c (Betreiber 13.09.): kein „Kurz gesagt“, kein Kapitel-Kicker – Ziffer auf Höhe der Überschrift ===== */
.vt-page.vt-w .vt-chapter-head { display: flex; align-items: baseline; column-gap: 0.85rem; margin-bottom: 1rem; }
.vt-page.vt-w .vt-chapter-nr { grid-row: auto; flex: none; font-size: 2rem; line-height: 1; padding-top: 0; }
.vt-page.vt-w .vt-chapter-kicker { display: none; }
.vt-page.vt-w .vt-chapter h2 { margin: 0; }
.vt-page.vt-w .vt-body > .vt-chapter:first-child { margin-top: 2.75rem; }
@media (min-width: 60em) { .vt-page.vt-w .vt-chapter-nr { font-size: 2.5rem; } .vt-page.vt-w .vt-body > .vt-chapter:first-child { margin-top: 3.5rem; } }


/* ===================================================================================================
   Runde 5 (Betreiber 14.09., Basis W02): Kopf/Hero, Kurz gesagt (test-a), Hook, grüne Balken statt Ziffern (test-h),
   Mythen (test-o), Sticky-Leisten (test-a / test-d03), Menü nur Icon, Grafiken mobil eingerückt, Kicker mit Anzeige
   =================================================================================================== */
/* Kopfleiste: nur Drei-Strich-Icon, etwas kräftiger, stumpfe Enden wie das Logo-Zeichen */
body.vt-w2 .menu > summary { gap: 0; padding: 0.45rem 0.15rem; }
body.vt-w2 .menu-icon { width: 1.5rem; height: 1rem; }
body.vt-w2 .menu-icon::before, body.vt-w2 .menu-icon::after, body.vt-w2 .menu-icon span { height: 3px; }
body.vt-w2 .menu[open] .menu-icon::before { top: calc(50% - 1.5px); }
body.vt-w2 .menu[open] .menu-icon::after { bottom: calc(50% - 1.5px); }

/* Artikelkopf: mobil linksbündig (test-a), Desktop zentriert über der Bildspalte (test-i); „Anzeige“ steht im Kicker */
.vt-page.vt-w2 .vt-head { max-width: 52rem; margin-inline: auto; text-align: left; padding-top: 1.5rem; }
.vt-page.vt-w2 .vt-head .kicker { margin-bottom: 0.9rem; }
.vt-page.vt-w2 .vt-head h1 { font-size: clamp(1.9rem, 7.4vw, 3.4rem); line-height: 1.06; max-width: 17em; margin-inline: 0; overflow-wrap: anywhere; }
.vt-page.vt-w2 .vt-dek { margin: 1.15rem 0 0; max-width: 34em; }
.vt-page.vt-w2 .vt-meta { text-align: left; }
@media (min-width: 60em) {
  .vt-page.vt-w2 .vt-head { text-align: center; padding-top: 3rem; }
  .vt-page.vt-w2 .vt-head h1 { margin-inline: auto; font-size: clamp(2.6rem, 4.4vw, 3.4rem); }
  .vt-page.vt-w2 .vt-dek { margin-inline: auto; font-size: 1.25rem; }
  .vt-page.vt-w2 .vt-meta { text-align: center; }
}
/* Titelbild: mobil randabfallend 3:2, Desktop in der 60rem-Spalte 2:1 */
.vt-page.vt-w2 .vt-wide { width: 100%; max-width: 60rem; margin-inline: auto; }
.vt-page.vt-w2 .vt-hero-wrap { width: 100%; }
.vt-page.vt-w2 .vt-hero { margin: 1.5rem 0 0; }
.vt-page.vt-w2 .vt-hero img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; object-position: 50% 30%; border-radius: 0; }
@media (min-width: 60em) {
  .vt-page.vt-w2 .vt-hero-wrap { max-width: var(--wrap, 76rem); margin-inline: auto; padding-inline: 2.5rem; }
  .vt-page.vt-w2 .vt-hero { margin: 2.5rem auto 0; }
  .vt-page.vt-w2 .vt-hero img { aspect-ratio: 2 / 1; }
}
/* Kurz gesagt wie test-a: zwei Haarlinien, grüne Serifenziffern, Desktop dreispaltig */
.vt-page.vt-w2 .vt-kurz { margin: 1.75rem auto 0; }
.vt-page.vt-w2 .vs-lead { margin: 0; padding: 1rem 0 1.25rem; border: 0; border-top: 1px solid #111; border-bottom: 1px solid #DADADA; background: transparent; }
.vt-page.vt-w2 .vs-lead .caps { margin: 0 0 0.8rem !important; text-align: left; }
.vt-page.vt-w2 .vs-lead ol { list-style: none; counter-reset: lead; margin: 0; padding: 0; display: grid; gap: 0.5rem 2.5rem; grid-template-columns: minmax(0, 1fr); }
.vt-page.vt-w2 .vs-lead li { counter-increment: lead; display: grid; grid-template-columns: 2rem minmax(0, 1fr); column-gap: 0.5rem; align-items: start; border: 0; padding: 0.2rem 0; font-size: 1rem; line-height: 1.5; }
.vt-page.vt-w2 .vs-lead li::before { content: counter(lead); display: block; width: auto; height: auto; background: transparent; color: #3A7A0C; font-family: var(--serif, Merriweather, Georgia, serif); font-weight: 700; font-size: 1.5rem; line-height: 1; padding: 0.1rem 0 0; }
@media (min-width: 60em) {
  .vt-page.vt-w2 .vt-kurz { margin-top: 2.5rem; }
  .vt-page.vt-w2 .vs-lead ol { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem 2.5rem; }
  .vt-page.vt-w2 .vs-lead li { font-size: 1.02rem; padding: 0.2rem 0; }
}
/* Lesespalte: erster Absatz groß mit Initial (test-a) */
.vt-page.vt-w2 .vt-body { margin-top: 2.25rem; }
.vt-page.vt-w2 .vt-hook > p:first-of-type { font-family: var(--serif, Merriweather, Georgia, serif); font-weight: 400; font-size: clamp(1.2rem, 2.4vw, 1.5rem); line-height: 1.45; margin-bottom: 1.1em; }
.vt-page.vt-w2 .vt-hook > p:first-of-type::first-letter { float: left; font-weight: 700; font-size: 3.1em; line-height: 0.82; padding: 0.08em 0.12em 0 0; color: #3A7A0C; }
/* Überschriften: kein Kapitelkopf mit Ziffer, stattdessen grüner Balken über der h2 (test-h) */
.vt-page.vt-w2 .vs-section { margin-top: 3.25rem; border-top: 0; padding-top: 0; }
.vt-page.vt-w2 .vt-body > .vs-section:first-child { margin-top: 0; }
.vt-page.vt-w2 .vs-section h2 { font-size: 1.6rem; line-height: 1.2; margin: 0 0 1.1rem; }
.vt-page.vt-w2 .vs-section h2::before { content: ""; display: block; width: 2.5rem; height: 3px; border-radius: 2px; background: #55B611; margin-bottom: 1rem; }
.vt-page.vt-w2 .vs-references h2::before { display: none; }
@media (min-width: 60em) {
  .vt-page.vt-w2 .vs-section { margin-top: 4.25rem; }
  .vt-page.vt-w2 .vs-section h2 { font-size: 1.9rem; }
}
/* Mythen-Block (test-o): Label, Irrtumszeile fett in Serife, grüner Marker links, Befund fett */
.vt-page.vt-w2 .vt-mythen-list { display: grid; gap: 1.4rem; margin-top: 0.5rem; }
.vt-page.vt-w2 .vt-mythos { border-left: 4px solid #55B611; padding-left: 1rem; }
.vt-page.vt-w2 .vt-mythos-nr { margin: 0 0 0.3rem; color: #3A7A0C; font-weight: 700; }
.vt-page.vt-w2 .vt-mythos-irrtum { font-family: var(--serif, Merriweather, Georgia, serif); font-weight: 700; font-size: 1.15rem; line-height: 1.3; margin: 0 0 0.5rem; color: #111; }
.vt-page.vt-w2 .vt-mythos p:last-child { margin: 0; }
.vt-page.vt-w2 .vt-befund { color: #111; }
/* Grafiken mobil: eingerückter Rahmen mit Innenabstand statt Rahmen bis an den Spaltenrand */
@media (max-width: 59.99em) {
  .vt-page.vt-w2 .vs-figure { margin-inline: 0.75rem; }
  .vt-page.vt-w2 .vs-illu { padding: 1rem 0.85rem; }
  .vt-page.vt-w2 .vs-photo { margin-inline: 0; }
}
/* Mobile CTA-Leiste unten (test-a), erscheint nach dem Titelbild, pausiert bei sichtbarem Button, schließbar */
.vt-sticky { position: fixed; left: 0; right: 0; bottom: 0; z-index: 25; display: none; align-items: center; gap: 0.75rem; background: #fff; border-top: 1px solid #111; padding: 0.5rem 0.75rem 0.5rem 1rem; transform: translateY(100%); visibility: hidden; transition: transform 0.25s ease, visibility 0s linear 0.25s; }
.vt-sticky.is-on { transform: none; visibility: visible; transition: transform 0.25s ease, visibility 0s; }
.vt-sticky[hidden] { display: none !important; }
.vt-sticky-text { flex: 1 1 auto; min-width: 0; margin: 0; font-size: 0.78rem; line-height: 1.3; color: #6B6B6B; }
.vt-sticky-text b { display: block; font-size: 0.92rem; color: #111; }
.vt-sticky .vt-btn { margin: 0; padding: 0.55rem 0.9rem; white-space: nowrap; flex: none; font-size: 1rem; }
.vt-sticky-close { flex: none; width: 2.2rem; height: 2.2rem; border: 0; background: transparent; font: inherit; font-size: 1.5rem; line-height: 1; color: #111; cursor: pointer; padding: 0; }
@media (max-width: 59.99em) {
  .vt-sticky { display: flex; }
  body.vt-w2.vt-has-sticky { padding-bottom: 4.5rem; }
}
/* Desktop-Kurzübersicht (test-d03): fixiert unter der Kopfleiste, Top 5 als Kacheln, Button, schließbar */
.vt-compact { position: fixed; top: 0; left: 0; right: 0; z-index: 29; display: none; background: #fff; border-bottom: 1px solid #DADADA; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06); transform: translateY(-100%); visibility: hidden; transition: transform 0.2s ease, visibility 0s linear 0.2s; }
.vt-compact.is-on { transform: none; visibility: visible; transition: transform 0.2s ease, visibility 0s; }
.vt-compact[hidden] { display: none !important; }
.vt-compact .wrap { display: flex; align-items: center; gap: 0.75rem; padding-block: 0.45rem; }
.vt-compact-list { list-style: none; margin: 0; padding: 0; display: flex; gap: 0.45rem; flex: 1 1 auto; min-width: 0; }
.vt-compact-list li { flex: 1 1 0; min-width: 0; }
.vt-ctile { display: flex; align-items: center; gap: 0.45rem; min-width: 0; padding: 0.25rem 0.5rem 0.25rem 0.3rem; border: 1px solid #DADADA; color: inherit; text-decoration: none; }
.vt-ctile:hover { border-color: #111; }
.vt-ctile-img { width: 1.9rem; height: 1.9rem; flex: none; background: #F4F4F4; overflow: hidden; }
.vt-ctile-img img { width: 100%; height: 100%; object-fit: contain; display: block; }
.vt-ctile-name { flex: 1 1 auto; min-width: 0; font-size: 0.8rem; font-weight: 700; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vt-ctile-name b { color: #3A7A0C; margin-right: 0.25rem; }
.vt-ctile-note { flex: none; font-family: var(--serif, Merriweather, Georgia, serif); font-weight: 700; font-size: 1.05rem; line-height: 1; }
.vt-compact .vt-btn { flex: none; margin: 0; padding: 0.5rem 0.9rem; font-size: 1rem; }
.vt-compact-close { flex: none; width: 2rem; height: 2rem; border: 1px solid #DADADA; border-radius: 50%; background: #fff; color: #111; font: inherit; font-size: 1.25rem; line-height: 1; cursor: pointer; padding: 0; }
.vt-compact-close:hover { border-color: #111; }
@media (min-width: 60em) { .vt-compact { display: block; } }
/* Leisten-Buttons: nie volle Breite (die Artikel-Buttons sind mobil blockbreit) */
.vt-sticky .vt-btn, .vt-compact .vt-btn { display: inline-block; width: auto; max-width: none; text-align: center; }
.vt-sticky-text { overflow: hidden; }
.vt-sticky-text b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Review-Fixes 14.09.: Bleed-Regel der Runde 4 mobil neutralisieren (Rahmen bleibt in der eingerückten Figur); Sprungziele unter Sticky-Kopf/Leiste freihalten;
   Desktop-Leiste: Button ohne Mindestbreite, Kacheln kompakter (kein abgeschnittener Produktname) */
@media (max-width: 39.99em) { .vt-page.vt-w2 .vt-body > .vs-figure-svg .vs-illu { margin-inline: 0; } }
@media (max-width: 59.99em) { .vt-page.vt-w2 .vs-figure { margin-inline: 0.5rem; } .vt-page.vt-w2 .vs-illu { padding: 0.75rem 0.6rem; } }
.vt-page.vt-w2 .vs-section, .vt-page.vt-w2 .vt-produkte, .vt-page.vt-w2 .vt-produkt, .vt-page.vt-w2 .vs-figure, .vt-page.vt-w2 .vt-mythen { scroll-margin-top: 5.5rem; }
@media (min-width: 60em) { .vt-page.vt-w2 .vs-section, .vt-page.vt-w2 .vt-produkte, .vt-page.vt-w2 .vt-produkt, .vt-page.vt-w2 .vs-figure, .vt-page.vt-w2 .vt-mythen { scroll-margin-top: 6rem; } }
.vt-compact .vt-btn { min-width: 0; padding: 0.5rem 0.85rem; }
.vt-compact-list { gap: 0.4rem; }
.vt-ctile { padding: 0.25rem 0.45rem 0.25rem 0.3rem; gap: 0.4rem; }
.vt-ctile-name { font-size: 0.78rem; }
/* Dynamischer Kopf (Betreiber 14.09., wie spiegel.de): oben groß mit Rubrikenzeile, beim Scrollen kompakt – Logo kleiner, Rubriken verschwinden, Menü bleibt als Toggle */
body.vt-w2 .site-head .head-row { padding-block: 0.9rem; transition: padding 0.2s ease; }
body.vt-w2 .site-head .brand svg { height: 2.6rem; transition: height 0.2s ease; }
body.vt-w2 .head-rubriken { display: flex; gap: 1.1rem; overflow-x: auto; white-space: nowrap; scrollbar-width: none; max-height: 2rem; opacity: 1; padding-top: 0; padding-bottom: 0.7rem; transition: max-height 0.2s ease, opacity 0.15s ease, padding 0.2s ease; }
body.vt-w2 .head-rubriken::-webkit-scrollbar { display: none; }
body.vt-w2 .head-rubriken a { color: #FFFFFF; font-weight: 700; letter-spacing: 0.1em; flex: none; }
body.vt-w2 .head-rubriken a:hover { color: #FFFFFF; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.25em; }
body.vt-w2 .site-head.is-compact .head-row { padding-block: 0.4rem; }
body.vt-w2 .site-head.is-compact .brand svg { height: 1.75rem; }
body.vt-w2 .site-head.is-compact .head-rubriken { max-height: 0; opacity: 0; padding-bottom: 0; overflow: hidden; }
body.vt-w2 .site-head.is-compact .menu-icon { width: 1.35rem; height: 0.9rem; }
@media (min-width: 60em) {
  body.vt-w2 .head-rubriken { display: none; }
  body.vt-w2 .site-head .brand svg { height: 3rem; }
  body.vt-w2 .site-head.is-compact .head-row { padding-block: 0.45rem; }
  body.vt-w2 .site-head.is-compact .brand svg { height: 2.1rem; }
  body.vt-w2 .site-head.is-compact .nav-main a { font-size: 0.9rem; }
}
/* Untere CTA-Leiste: Button-Text vertikal zentriert (die Artikel-Buttons haben min-height 2.75rem als Block – hier Flex-Zentrierung) */
.vt-sticky .vt-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 2.6rem; line-height: 1.2; padding: 0.5rem 1rem; }
.vt-sticky { align-items: center; }
/* Korrektur 14.09.: Kopf-Dynamik NUR Desktop – mobil statisch wie zuvor (Logo 2,4rem, kein Rubrikenband, kein Schrumpfen) */
@media (max-width: 59.99em) {
  body.vt-w2 .head-rubriken { display: none; }
  body.vt-w2 .site-head .head-row, body.vt-w2 .site-head.is-compact .head-row { padding-block: 0.75rem; }
  body.vt-w2 .site-head .brand svg, body.vt-w2 .site-head.is-compact .brand svg { height: 2.4rem; }
}
/* Desktop kompakt: Navigationslinks weichen dem Menü-Toggle (wie spiegel.de) */
@media (min-width: 60em) {
  body.vt-w2 .site-head.is-compact .nav-main { display: none; }
  body.vt-w2 .site-head.is-compact .menu { display: block; }
  body.vt-w2 .menu-panel { max-width: 24rem; left: auto; right: 0; border-left: 1px solid #DADADA; }
}
/* Menü-Toggle neu: 40 px Tap-Fläche, feine weiße Kontur mit sanfter Rundung, drei dünne Striche mit runden Enden, weiches Umklappen zum X */
body.vt-w2 .menu > summary { gap: 0; padding: 0; width: 2.5rem; height: 2.5rem; display: inline-flex; align-items: center; justify-content: center; border: 1.5px solid rgba(255, 255, 255, 0.72); border-radius: 6px; transition: background 0.15s ease, border-color 0.15s ease; }
body.vt-w2 .menu > summary:hover, body.vt-w2 .menu[open] > summary { background: rgba(255, 255, 255, 0.14); border-color: #FFFFFF; }
body.vt-w2 .menu-icon, body.vt-w2 .site-head.is-compact .menu-icon { width: 1.2rem; height: 0.8rem; }
body.vt-w2 .menu-icon::before, body.vt-w2 .menu-icon::after, body.vt-w2 .menu-icon span { height: 2px; border-radius: 2px; transition: transform 0.2s ease, top 0.2s ease, bottom 0.2s ease, opacity 0.15s ease; }
body.vt-w2 .menu[open] .menu-icon::before { top: calc(50% - 1px); }
body.vt-w2 .menu[open] .menu-icon::after { bottom: calc(50% - 1px); }
/* Warn-Kapitel: rote statt grüne Aufzählungsquadrate */
.vt-page.vt-w2 .vt-warn .vs-list li::before { background: #D14343; }
/* Aufzählung: nur hervorgehobene Punkte grün, übrige grau (Betreiber 14.09., Kapitel „Farbtrick oder echte Aufhellung?“) */
.vt-page.vt-w2 .vs-list li.vt-li-muted::before { background: #B8B8B8; }