/* ============================================================
   cd_vergleich — Vorher/Heute-Umschalter
   ============================================================
   Zwei Bildschirmfotos derselben Kundenseite, per Reiterpaar
   getauscht. Der Baustein hat MEHRERE DARSTELLUNGEN; welche gilt,
   sagt `data-vgl-layout` an der Bahn (Feld `cd_vergleich_layout`,
   leer = fenster).

   AUFBAU DIESER DATEI
   -------------------
   1. GEMEINSAM — alles, was in jeder Fassung gilt: Kopf, Bühne,
      Panels, Bildverhältnis, Fahne, die Grundoptik der Reiter.
   2. Je Fassung ein Block `[data-vgl-layout="…"]`.

   Das Markup ist für ALLE Fassungen dasselbe (Rahmen > Leiste +
   Bühne). Nur das CSS unterscheidet sie. Deshalb kann eine
   Redaktion die Fassung wechseln, ohne am Inhalt etwas nachzuziehen
   — und ein Wechsel kann nichts zerreissen.

   SPEZIFITÄT: `[data-vgl-layout="x"] .cd-vergleich__y` ist 0,2,0
   und schlägt damit jede gemeinsame Regel (0,1,0). Eine Fassung
   darf also überall nachjustieren, ohne !important.
   ============================================================ */


/* ============================================================
   1. GEMEINSAM
   ============================================================ */

.cd-vergleich__kopf {
  margin-block-end: var(--cd-a6);
}

.cd-vergleich__titel {
  font-size: var(--cd-gr-h2);
  line-height: var(--cd-zeile-kopf);
  max-inline-size: 24ch;
}

.cd-vergleich__beitext {
  margin-block-start: var(--cd-a4);
  color: var(--cd-text-2);
  max-inline-size: 62ch;
}

/* Volle Bahnbreite: das Bild IST das Argument dieser Bahn. */
.cd-vergleich__box {
  max-inline-size: none;
}

/* ---- Leiste, Ampel, Adresse ------------------------------ */
/* Die Leiste trägt in jeder Fassung die Bedienung; was sonst noch
   darin steht, entscheidet die Fassung. */
.cd-vergleich__leiste {
  display: flex;
  align-items: center;
  gap: var(--cd-a4);
}

.cd-vergleich__ampel {
  display: flex;
  flex: 0 0 auto;
  gap: 6px;
}
.cd-vergleich__ampel i {
  inline-size: 9px;
  block-size: 9px;
  border-radius: 50%;
  background: var(--cd-linie-3);
}

.cd-vergleich__adresse {
  flex: 0 1 auto;
  min-inline-size: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--cd-schrift-mono);
  font-size: var(--cd-gr-mikro);
  letter-spacing: .02em;
  color: var(--cd-text-3);
}

/* Die abgesetzte Schaltzeile: in jeder Fassung ausser „fenster"
   die Zeile ueber dem Bild, die Umschalter und Anhalter traegt.
   Sie steht im Markup VOR dem Rahmen — auch fuer ein
   Vorleseprogramm also erst der Schalter, dann sein Gegenstand. */
.cd-vergleich__schaltzeile {
  display: flex;
  align-items: center;
  gap: var(--cd-a3);
}

/* ---- Die Reiter ------------------------------------------ */
/* Verborgen, bis das Skript --bereit setzt. Ohne Skript wären es
   zwei Knöpfe ohne Wirkung. */
.cd-vergleich__tabs {
  display: none;
  gap: 2px;
  padding: 4px;
  background: var(--cd-weiss);
  border: 1px solid var(--cd-linie);
  border-radius: 999px;
}
.cd-vergleich--bereit .cd-vergleich__tabs {
  display: inline-flex;
}

.cd-vergleich__tab {
  appearance: none;
  border: 0;
  background: transparent;
  font-family: var(--cd-schrift-mono);
  /* 13 px und nicht die 11 px der Adresse: Der Reiter ist ein
     Bedienelement und soll die 24 x 24 CSS-px Zielgrösse aus
     WCAG 2.5.8 sicher erreichen, nicht knapp. */
  font-size: var(--cd-gr-klein);
  letter-spacing: .04em;
  padding: 7px 16px;
  border-radius: 999px;
  color: var(--cd-text-3);
  cursor: pointer;
  white-space: nowrap;
  transition: color var(--cd-zeit) ease, background var(--cd-zeit) ease;
}
.cd-vergleich__tab:hover {
  color: var(--cd-tinte);
}
/* Der aktive Reiter ist eine gefüllte Fläche in der Hausfarbe —
   6,10 : 1 für die weisse Schrift, auf jedem Grund gleich. */
.cd-vergleich__tab[aria-selected="true"] {
  background: var(--cd-rot);
  color: var(--cd-weiss);
}
.cd-vergleich__tab[aria-selected="true"]:hover {
  color: var(--cd-weiss);
}

/* Abgesetzt hat der Umschalter Platz und darf die volle Groesse
   eines Bedienelements haben — 16 px statt der 13 px, die in die
   schmale Fensterleiste passen. Genau darum ging es: dort ging er
   unter. */
.cd-vergleich__schaltzeile .cd-vergleich__tab {
  font-size: var(--cd-gr-text);
  padding: 10px 24px;
}

/* ---- Bühne und Panels ------------------------------------ */
.cd-vergleich__buehne {
  position: relative;
}

/* KEINE display-Regel auf dem Panel. Das Skript verbirgt das
   inaktive Panel über das hidden-Attribut; eine display-Regel
   hier schlüge dessen browsereigenes display:none. */
.cd-vergleich__panel {
  margin: 0;
  position: relative;
}
/* Ohne Skript stehen beide Panels da — dann eine Trennlinie
   dazwischen, damit man zwei Aufnahmen sieht und nicht eine lange.
   :not([hidden]) IST HIER DER PUNKT: Ein verborgenes Element fällt
   aus dem Geschwisterselektor NICHT heraus. Ohne die Bedingung
   bekam das sichtbare zweite Panel den Abstand des verborgenen
   ersten — die Bahn war in einem Stand 24 px höher als im anderen
   und sprang bei jedem Klick. */
.cd-vergleich__panel:not([hidden]) + .cd-vergleich__panel:not([hidden]) {
  border-block-start: 1px solid var(--cd-linie);
}

.cd-vergleich__bild {
  display: block;
  inline-size: 100%;
  block-size: auto;
  /* Das Verhältnis reserviert den Platz VOR dem Laden — sonst
     springt die Seite, wenn das Bild eintrifft. Die Quellen sind
     16:10; cover schneidet daher nichts weg. */
  aspect-ratio: 16 / 10;
  object-fit: cover;
  background: var(--cd-flaeche-2);
}

/* Die Fahne sagt OHNE Skript, welcher Stand zu sehen ist. MIT
   Skript sagt das der aktive Reiter — dann verschwindet sie, statt
   dem Bild etwas zu verdecken (auf der alten Seite lag sie genau
   auf der Telefonnummer). */
.cd-vergleich__fahne {
  position: absolute;
  inset-block-start: var(--cd-a3);
  inset-inline-start: var(--cd-a3);
  z-index: 1;
  font-family: var(--cd-schrift-mono);
  font-size: var(--cd-gr-mikro);
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 5px 11px;
  border-radius: 999px;
  backdrop-filter: blur(3px);
}
.cd-vergleich__fahne--vorher {
  background: rgba(13, 26, 33, .72);
  color: #fff;
}
.cd-vergleich__fahne--heute {
  background: var(--cd-rot);
  color: #fff;
}
.cd-vergleich--bereit .cd-vergleich__fahne {
  display: none;
}

/* ---- Die Einordnung -------------------------------------- */
/* Sie steht IM Panel und wandert darum ohne eigenes Skript mit
   dem Umschalter mit.

   MINDESTHÖHE STATT MINDESTZEILEN: Bricht die eine Einordnung um
   und die andere nicht, springt der Umschalter um eine Zeilenhöhe.
   Ein Mindestmass mit mittig gesetztem Text hält die Höhe stabil,
   ohne dass unter einem einzeiligen Satz eine leere Zeile steht —
   die sähe nach Fehler aus. */
.cd-vergleich__notiz {
  display: flex;
  align-items: center;
  gap: var(--cd-a3);
  min-block-size: 56px;
  color: var(--cd-text-2);
  font-size: var(--cd-gr-klein);
  line-height: 1.5;
}
.cd-vergleich__notiz > span {
  display: block;
  max-inline-size: 90ch;
}
/* Ein kurzer Merker vor der Zeile: neutral beim alten Stand,
   Hausrot bei den Stärken — dieselbe Farblogik wie die Fahnen.
   Feste Höhe statt stretch, sonst zieht sich der Balken über die
   volle Mindesthöhe und wirkt bei einzeiligem Text zu lang. */
.cd-vergleich__notiz::before {
  content: "";
  flex: 0 0 auto;
  inline-size: 3px;
  block-size: 1.15em;
  border-radius: 2px;
  background: var(--cd-linie-3);
}
.cd-vergleich__notiz--heute::before {
  background: var(--cd-rot);
}

.cd-vergleich__unterschrift {
  margin-block-start: var(--cd-a4);
  color: var(--cd-text-3);
  font-size: var(--cd-gr-klein);
  max-inline-size: 92ch;
}

/* ---- Beitext und Bildunterschrift auf farbigem Grund ------ */
/* SIE STEHEN AUF DER BAHN, nicht im Fenster — anders als die
   Statuszeile. Ohne diese Regeln bleiben sie in ihren Grautoenen
   stehen, und die sind auf den dunklen und roten Bahngruenden
   unlesbar. Nachgerechnet:

     Beitext (--cd-text-2) auf dunkel   2,41 : 1
     Beitext auf rot                    1,05 : 1
     Unterschrift (--cd-text-3) dunkel  2,93 : 1
     Unterschrift auf rot               1,16 : 1

   Verlangt sind 4,5 : 1. Auf Weiss, getoent und Kopfton stimmen die
   Grautoene; nur diese beiden Gruende brauchen den Wechsel. Es
   faellt heute niemandem auf, weil die einzige Instanz auf Kopfton
   steht — die Falle ist einen Klick im Backend entfernt. */
.cd-auf-dunkel .cd-vergleich__beitext,
.cd-auf-dunkel .cd-vergleich__unterschrift {
  color: var(--cd-text-auf-dunkel);
}
.cd-auf-rot .cd-vergleich__beitext,
.cd-auf-rot .cd-vergleich__unterschrift {
  color: var(--cd-weiss);
}
.cd-auf-rot .cd-vergleich__adresse {
  color: var(--cd-weiss);
}


/* ============================================================
   1b. GEMEINSAM — der Anhalte-Knopf des Selbstlaufs
   ============================================================
   Er steht nur im Markup, wenn ein Selbstlauf eingestellt ist —
   dann aber zwingend und SICHTBAR. Ein Knopf, der erst beim
   Überfahren erscheint, ist auf einem Tastgerät keiner: WCAG
   2.2.2 verlangt eine Möglichkeit anzuhalten, nicht eine, sie zu
   suchen.

   Er trägt die Hausklasse cd-takt aus komponenten.css: Der Grund
   füllt sich von unten nach oben rot, bis der nächste Wechsel
   kommt.

   DESHALB IST DER KNOPF DUNKEL und nicht hell wie die Reiterpille:
   Die Füllung ist Hausrot im Vollton. Ein dunkelgraues Zeichen
   darauf läge bei 1,7 : 1. Weiss auf Tinte sind 17,69 : 1, weiss
   auf der roten Füllung 6,10 : 1 — in jeder Phase der Runde
   lesbar. Dieselbe Lösung wie beim Stimmen-Schieber.
   ============================================================ */

.cd-vergleich__halt {
  display: none;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  /* 44 statt 38 px (02.09.2026). Auf Tastgeraeten hob basis.css ihn
     ohnehin ueber --cd-zielgroesse auf 44; am Rechner blieb er als
     EINZIGER Anhalte-Knopf des Hauses darunter — die Schieber haben
     52. WCAG 2.5.5 empfiehlt 44 fuer alle Bedienarten, und der
     Knopf ist die Zusage aus 2.2.2: an ihm zu sparen ist die
     falsche Stelle. */
  inline-size: 44px;
  block-size: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--cd-tinte);
  color: var(--cd-weiss);
  cursor: pointer;
  transition: background var(--cd-zeit) ease;
}
/* Ohne Skript läuft nichts — dann wäre der Knopf ein Schalter
   ohne Gegenstand. Wie die Reiter erscheint er erst mit --bereit. */
.cd-vergleich--bereit .cd-vergleich__halt {
  display: inline-flex;
}
.cd-vergleich__halt:hover {
  background: var(--cd-dunkel-3);
}

/* Zwei Balken; angehalten ein Dreieck. Keine Symbolschrift — ein
   Zeichen aus einer Schrift landet im zugänglichen Namen. */
.cd-vergleich__haltezeichen {
  position: relative;
  inline-size: 12px;
  block-size: 13px;
}
.cd-vergleich__haltezeichen::before,
.cd-vergleich__haltezeichen::after {
  content: "";
  position: absolute;
  inset-block: 0;
  inline-size: 4px;
  background: currentColor;
}
.cd-vergleich__haltezeichen::before { inset-inline-start: 0; }
.cd-vergleich__haltezeichen::after { inset-inline-end: 0; }
.cd-vergleich__halt[aria-pressed="true"] .cd-vergleich__haltezeichen::before {
  inline-size: 0;
  inset-block: 0;
  border-block: 6.5px solid transparent;
  border-inline-start: 11px solid currentColor;
}
.cd-vergleich__halt[aria-pressed="true"] .cd-vergleich__haltezeichen::after {
  display: none;
}


/* ============================================================
   2. FASSUNG „fenster" — angedeutetes Browserfenster
   ============================================================
   Das Bild steckt in einem Fenster: Leiste mit drei Punkten, der
   Adresse des Kunden und — rechts — dem Umschalter; unten eine
   Statuszeile mit der Einordnung.

   WARUM: In der ersten Fassung lagen Kopf (752 px) und Bild
   (940 px) beide links in einer 1200 px breiten Bahn — rechts
   blieben 260 px tote Fläche, und der Umschalter hing beziehungslos
   dazwischen. Im Fenster sitzt der Schalter an seinem Gegenstand
   und das Bild nimmt die ganze Breite.
   ============================================================ */

[data-vgl-layout="fenster"] .cd-vergleich__rahmen {
  border: 1px solid var(--cd-linie);
  border-radius: var(--cd-r-gross);
  /* Der Beschnitt gibt dem Bild die runden Ecken des Fensters —
     deshalb trägt das Bild selbst keinen Radius. */
  overflow: hidden;
  background: var(--cd-weiss);
  box-shadow: var(--cd-schatten-karte);
}

[data-vgl-layout="fenster"] .cd-vergleich__leiste {
  min-block-size: 52px;
  padding: var(--cd-a2) var(--cd-a3) var(--cd-a2) var(--cd-a4);
  background: var(--cd-flaeche-2);
  border-block-end: 1px solid var(--cd-linie);
}

/* Die Adresszeile als helle Pille wie im Browser. */
[data-vgl-layout="fenster"] .cd-vergleich__adresse {
  background: var(--cd-weiss);
  border: 1px solid var(--cd-linie);
  border-radius: 999px;
  padding: 4px 14px;
}

/* Im Fenster sitzt der Umschalter rechts in der Leiste und faellt
   dafuer eine Spur kleiner aus. */
[data-vgl-layout="fenster"] .cd-vergleich__tabs {
  margin-inline-start: auto;
  padding: 3px;
}
[data-vgl-layout="fenster"] .cd-vergleich__halt {
  /* Auch die enge Fassung bleibt bei 44 px. Sie war mit 32 die
     kleinste Bedienflaeche im ganzen Haus; „eine Spur kleiner" darf
     nicht heissen „unter dem Mindestmass". Platz kostet es nicht:
     die Leiste ist ohnehin hoeher. */
  inline-size: 44px;
  block-size: 44px;
}

/* Die Einordnung liest sich hier als Fussleiste des Fensters. */
[data-vgl-layout="fenster"] .cd-vergleich__notiz {
  padding: var(--cd-a3) var(--cd-a4);
  border-block-start: 1px solid var(--cd-linie);
}

/* Auf JEDEM Bahngrund bleibt das Fenster hell: Es ist ein
   Gegenstand auf der Bahn, kein Bahnteil — sonst schwimmt das
   Bildschirmfoto darin in einer fremden Farbe. Nur die Aussenkante
   zieht nach, damit sie auf Dunkel nicht verschwindet.

   DESHALB HIER KEINE HELLE SCHRIFTFARBE für die Statuszeile: Sie
   liegt im weissen Fenster, nicht auf der dunklen Bahn. Eine Regel
   wie .cd-auf-dunkel .cd-vergleich__notiz mit heller Farbe ergäbe
   hellgrauen Text auf Weiss. */
.cd-auf-dunkel[data-vgl-layout="fenster"] .cd-vergleich__rahmen {
  border-color: var(--cd-linie-auf-dunkel);
  box-shadow: var(--cd-schatten-mega);
}


/* ============================================================
   3. FASSUNG „abgesetzt" — Fenster bleibt, Umschalter darüber
   ============================================================
   Wie „fenster", aber der Umschalter steckt nicht in der
   Fensterleiste, sondern steht als eigene Zeile darüber.

   WARUM: In der Leiste sitzt er klein, rechts und zwischen Punkten
   und Adresse — dort geht er unter. Abgesetzt hat er eine eigene
   Zeile, die volle Grösse eines Bedienelements (16 px statt 13 px)
   und keinen Nachbarn, mit dem er um Aufmerksamkeit ringt.

   Das Fenster verliert dabei nichts: Punkte und Adresse bleiben in
   der Leiste, sie wird nur schmaler.
   ============================================================ */

[data-vgl-layout="abgesetzt"] .cd-vergleich__schaltzeile {
  margin-block-end: var(--cd-a4);
}

[data-vgl-layout="abgesetzt"] .cd-vergleich__rahmen {
  border: 1px solid var(--cd-linie);
  border-radius: var(--cd-r-gross);
  overflow: hidden;
  background: var(--cd-weiss);
  box-shadow: var(--cd-schatten-karte);
}

/* Ohne den Umschalter darin darf die Leiste flacher werden. */
[data-vgl-layout="abgesetzt"] .cd-vergleich__leiste {
  min-block-size: 42px;
  padding: var(--cd-a2) var(--cd-a4);
  background: var(--cd-flaeche-2);
  border-block-end: 1px solid var(--cd-linie);
}
[data-vgl-layout="abgesetzt"] .cd-vergleich__adresse {
  background: var(--cd-weiss);
  border: 1px solid var(--cd-linie);
  border-radius: 999px;
  padding: 4px 14px;
}

[data-vgl-layout="abgesetzt"] .cd-vergleich__notiz {
  padding: var(--cd-a3) var(--cd-a4);
  border-block-start: 1px solid var(--cd-linie);
}

/* Auf dunklem Grund bleibt das Fenster hell — es ist ein
   Gegenstand auf der Bahn, kein Bahnteil. Die Schaltzeile steht
   aber AUF der Bahn und muss nachziehen. */
.cd-auf-dunkel[data-vgl-layout="abgesetzt"] .cd-vergleich__rahmen {
  border-color: var(--cd-linie-auf-dunkel);
  box-shadow: var(--cd-schatten-mega);
}
.cd-auf-dunkel[data-vgl-layout="abgesetzt"] .cd-vergleich__halt {
  background: var(--cd-dunkel-3);
}


/* ============================================================
   4. FASSUNG „oben" — ohne Fenstergerät
   ============================================================
   Dieselbe abgesetzte Schaltzeile wie „abgesetzt", aber ohne das
   Fenster-Sinnbild: keine Punkte, kein grauer Leistenstreifen. Das
   Bild steht als Blatt da, die Adresse bleibt als leise
   Herkunftsangabe rechts in der Schaltzeile-Höhe.

   Für Seiten, auf denen das Fenster zu verspielt wäre.
   ============================================================ */

[data-vgl-layout="oben"] .cd-vergleich__schaltzeile {
  margin-block-end: var(--cd-a4);
}

/* Das Fenstergerät entfällt: keine Punkte, kein Leistengrund. */
[data-vgl-layout="oben"] .cd-vergleich__ampel {
  display: none;
}
/* Die Leiste trägt dann nur noch die Adresse — sie wandert nach
   oben in die Schaltzeile-Reihe, indem sie selbst nichts mehr
   aufträgt und rechtsbündig steht. */
[data-vgl-layout="oben"] .cd-vergleich__leiste {
  justify-content: flex-end;
  margin-block-end: var(--cd-a2);
}

[data-vgl-layout="oben"] .cd-vergleich__buehne {
  border: 1px solid var(--cd-linie);
  border-radius: var(--cd-r-gross);
  overflow: hidden;
  background: var(--cd-weiss);
  box-shadow: var(--cd-schatten-karte);
}

[data-vgl-layout="oben"] .cd-vergleich__notiz {
  padding: var(--cd-a3) var(--cd-a4);
  border-block-start: 1px solid var(--cd-linie);
}

.cd-auf-dunkel[data-vgl-layout="oben"] .cd-vergleich__buehne {
  border-color: var(--cd-linie-auf-dunkel);
  box-shadow: var(--cd-schatten-mega);
}
.cd-auf-dunkel[data-vgl-layout="oben"] .cd-vergleich__adresse {
  color: var(--cd-text-auf-dunkel);
}
.cd-auf-dunkel[data-vgl-layout="oben"] .cd-vergleich__halt {
  background: var(--cd-dunkel-3);
}


/* ============================================================
   5. FASSUNG „auflage" — Umschalter auf dem Bild
   ============================================================
   Am auffälligsten: Der Umschalter schwebt oben mittig auf der
   Aufnahme. Er verdeckt dafür einen Streifen des Bildes — bei
   Bildschirmfotos ist das oben meist die Kopfleiste der gezeigten
   Seite, also nicht nichts. Deshalb eine Fassung zur Wahl und
   nicht die Vorgabe.

   KONTRAST ÜBER EINEM FOTO: Der Text liegt NIE direkt auf dem
   Bild. Die Pille bringt ihre eigene deckende weisse Fläche mit;
   gemessen wird gegen diese, nicht gegen die Aufnahme. Eine
   halbdurchsichtige Fläche wäre hier falsch — ihr Kontrast hinge
   dann vom Foto ab, das die Redaktion morgen tauscht.
   ============================================================ */

[data-vgl-layout="auflage"] .cd-vergleich__box {
  position: relative;
}

[data-vgl-layout="auflage"] .cd-vergleich__schaltzeile {
  position: absolute;
  inset-block-start: var(--cd-a5);
  inset-inline: 0;
  z-index: 2;
  justify-content: center;
  pointer-events: none;
}
/* Nur die Bedienelemente nehmen Klicks an — die Zeile selbst ist
   eine unsichtbare Spanne über dem Bild und darf nichts abfangen. */
[data-vgl-layout="auflage"] .cd-vergleich__tabs,
[data-vgl-layout="auflage"] .cd-vergleich__halt {
  pointer-events: auto;
}

[data-vgl-layout="auflage"] .cd-vergleich__leiste {
  display: none;
}

/* Deutlicher Schatten: Er hebt die Pille vom Bild ab, ohne den
   Kontrast des Textes zu berühren. */
[data-vgl-layout="auflage"] .cd-vergleich__tabs,
[data-vgl-layout="auflage"] .cd-vergleich__halt {
  box-shadow: 0 6px 20px -8px rgba(13, 26, 33, .55);
}

[data-vgl-layout="auflage"] .cd-vergleich__buehne {
  border: 1px solid var(--cd-linie);
  border-radius: var(--cd-r-gross);
  overflow: hidden;
  background: var(--cd-weiss);
  box-shadow: var(--cd-schatten-karte);
}

[data-vgl-layout="auflage"] .cd-vergleich__notiz {
  padding: var(--cd-a3) var(--cd-a4);
  border-block-start: 1px solid var(--cd-linie);
}

/* Die Fahne des skriptlosen Zustands sitzt oben links im Bild und
   liefe der Pille in die Quere — hier nach unten. */
[data-vgl-layout="auflage"] .cd-vergleich__fahne {
  inset-block-start: auto;
  inset-block-end: var(--cd-a3);
}

.cd-auf-dunkel[data-vgl-layout="auflage"] .cd-vergleich__buehne {
  border-color: var(--cd-linie-auf-dunkel);
  box-shadow: var(--cd-schatten-mega);
}


/* ============================================================
   Schmale Geräte — alle Fassungen
   ============================================================ */

@media (max-width: 700px) {
  /* --- fenster ------------------------------------------- */
  /* Punkte und Adresse bleiben in der ersten Zeile, der Umschalter
     bekommt die zweite ganz für sich: So ist er sicher zu treffen,
     und die Adresse — die mehr sagt als die Punkte — bleibt stehen.
     Bei langen Domains schneidet das Ellipsis ab. */
  [data-vgl-layout="fenster"] .cd-vergleich__leiste {
    flex-wrap: wrap;
    gap: var(--cd-a2);
  }
  [data-vgl-layout="fenster"] .cd-vergleich__adresse {
    flex: 1 1 auto;
  }
  [data-vgl-layout="fenster"] .cd-vergleich--bereit .cd-vergleich__tabs {
    display: flex;
    inline-size: 100%;
    margin-inline-start: 0;
  }
  [data-vgl-layout="fenster"] .cd-vergleich__tab {
    flex: 1;
    text-align: center;
    padding-block: 9px;
  }

  /* --- abgesetzt und oben --------------------------------- */
  /* Der Umschalter nimmt die volle Breite; die Adresse gibt ihren
     Platz auf, damit Umschalter und Anhalter in die Zeile passen. */
  [data-vgl-layout="abgesetzt"] .cd-vergleich--bereit .cd-vergleich__tabs,
  [data-vgl-layout="oben"] .cd-vergleich--bereit .cd-vergleich__tabs {
    flex: 1 1 auto;
  }
  [data-vgl-layout="abgesetzt"] .cd-vergleich__tab,
  [data-vgl-layout="oben"] .cd-vergleich__tab {
    flex: 1;
    text-align: center;
    padding-inline: 12px;
  }
  [data-vgl-layout="oben"] .cd-vergleich__leiste {
    display: none;
  }

  /* --- auflage -------------------------------------------- */
  /* Schmal wird die Pille zu breit für das Bild — dann steht der
     Umschalter wieder ÜBER dem Bild statt darauf. Lieber eine
     andere Anordnung als ein Bedienelement, das die halbe Aufnahme
     zudeckt. */
  [data-vgl-layout="auflage"] .cd-vergleich__schaltzeile {
    position: static;
    margin-block-end: var(--cd-a4);
    pointer-events: auto;
    justify-content: flex-start;
  }
  [data-vgl-layout="auflage"] .cd-vergleich--bereit .cd-vergleich__tabs {
    flex: 1 1 auto;
  }
  [data-vgl-layout="auflage"] .cd-vergleich__tab {
    flex: 1;
    text-align: center;
    padding-inline: 12px;
  }
  [data-vgl-layout="auflage"] .cd-vergleich__fahne {
    inset-block-start: var(--cd-a3);
    inset-block-end: auto;
  }

  /* --- alle Fassungen ------------------------------------- */
  /* Schmal bricht die Einordnung fast immer zweizeilig um — die
     Mindesthöhe zieht mit, sonst springt der Umschalter doch. */
  .cd-vergleich__notiz {
    min-block-size: 74px;
    padding: var(--cd-a3);
  }
}