/* ============================================================
   cd_bahn — Text-Bild-Bahn
   ============================================================
   Zwei gleich starke Haelften: auf der einen Seite Bild oder
   Illustration, auf der anderen der Text. Ein Vorlaeufer im Entwurf
   hatte links eine schmale Schiene mit Symbol, Zahl und Kicker —
   das ging nicht auf: die Schiene sprang beim Spiegeln von links
   nach rechts, die Leserichtung mit ihr, und die schmale Grafik
   liess die Bahnen halb leer aussehen. Jetzt sitzt alles im
   Textblock und die Grafik fuellt ihre Haelfte.

   Farben, Abstaende und Radien kommen ausschliesslich aus
   tokens.css. Kein Hex-Wert, kein !important, kein blankes 1fr.

   Ortsvariablen: die Bahn kann hell oder dunkel laufen. Statt
   jede Regel zu verdoppeln, setzt --zug-* die vier Werte einmal
   um; die Regeln selbst lesen nur noch die Variable.
   ============================================================ */

.cd-zug {
  --zug-linie: var(--cd-linie-2);
  --zug-feld: var(--cd-weiss);
  --zug-text: var(--cd-text-2);
  --zug-akzent: var(--cd-rot);
  --zug-mager: var(--cd-text-3);
}

/* Rot auf Anthrazit traegt nicht (2,9:1). Auf dunklem Grund
   laufen Akzente deshalb auf --cd-rot-auf-dunkel und der
   Nebentext auf --cd-text-auf-dunkel-2 (1.4.3). */
/* Der zweite Selektor ist die UMKEHRUNG des Falls darunter beim
   weissen Kasten: eine DUNKLE Insel in einer HELLEN Bahn. Auf
   /kontakt steht der Kartenkasten so da — die Bahn ist hell, der
   Kasten traegt cd-auf-dunkel, und die --zug-Variablen kamen
   trotzdem in der hellen Fassung an, weil `.cd-zug.cd-auf-dunkel`
   beide Klassen am SELBEN Element verlangt. Gemessen: der
   Listenkopf „Karte" mit #5C6F79 auf #16272F, 2,93:1.

   Beide Richtungen gehoeren zusammen gedacht. Wer nur eine
   repariert, verschiebt den Fehler auf die andere Seite. */
.cd-zug.cd-auf-dunkel,
.cd-zug .cd-auf-dunkel {
  --zug-linie: var(--cd-dunkel-3);
  --zug-feld: var(--cd-dunkel-2);
  --zug-text: var(--cd-text-auf-dunkel);
  --zug-akzent: var(--cd-rot-auf-dunkel);
  --zug-mager: var(--cd-text-auf-dunkel-2);
}


/* ------------------------------------------------------------
   Raster
   ------------------------------------------------------------
   Schmal steht alles untereinander. Im Quelltext kommt der Text
   vor der Nebenspalte — die Ueberschrift steht damit auf kleinen
   Geraeten oben und das Schmueckende am Ende.

   minmax(0, 1fr) statt 1fr: 1fr bedeutet minmax(auto, 1fr) und
   waechst mit dem laengsten unteilbaren Inhalt. Eine lange URL
   oder ein breites Bild sprengt damit die Bahn.
   ------------------------------------------------------------ */
.cd-zug__raster {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--cd-a7);
  align-items: center;
}

.cd-zug__text { min-inline-size: 0; }
.cd-zug__neben { min-inline-size: 0; }

@media (min-width: 900px) {
  .cd-zug--zwei .cd-zug__raster {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--cd-a8);
    row-gap: 0;
  }

  /* Grundstellung: Text links, Bild rechts. Beim Spiegeln
     tauschen die Haelften nur ihre Rasterplaetze — die
     Reihenfolge im Quelltext bleibt unberuehrt. */
  .cd-zug--zwei .cd-zug__text { grid-column: 1; grid-row: 1; }
  .cd-zug--zwei .cd-zug__neben { grid-column: 2; grid-row: 1; }

  .cd-zug--zwei.cd-zug--gespiegelt .cd-zug__neben { grid-column: 1; grid-row: 1; }
  .cd-zug--zwei.cd-zug--gespiegelt .cd-zug__text { grid-column: 2; grid-row: 1; }
}

/* Der Text lehnt zum Bild — aber nur wenn daneben wirklich ein
   Bild steht und erst wenn beide Haelften genug Platz haben.
   Bei einer Liste in der Nebenspalte bliebe der rechtsbuendige
   Satz eine Marotte ohne Gegenstueck. */
@media (min-width: 1100px) {
  .cd-zug--lehnt .cd-zug__text { text-align: end; }
  .cd-zug--lehnt .cd-zug__zeile,
  .cd-zug--lehnt .cd-zug__marken,
  .cd-zug--lehnt .cd-zug__knopfzeile { justify-content: flex-end; }

  /* Rechts angeschlagen dreht sich auch die Kopfzeile um: erst der
     Name, dann die Zahl. Sonst stuende die Zahl mitten im Satz statt
     am Rand, an dem der Blick entlangfaehrt. Im Entwurf steht sie
     aussen — die Leserichtung im Quelltext bleibt unveraendert. */
  .cd-zug--lehnt .cd-zug__zeile {
    flex-direction: row-reverse;
    /* flex-end packt in der GEDREHTEN Achse — also links. Damit die
       Zeile am rechten Rand bleibt, muss sie hier flex-start heissen. */
    justify-content: flex-start;
  }
  .cd-zug--lehnt .cd-zug__fliess { margin-inline-start: auto; }
}


/* ------------------------------------------------------------
   Kopf des Textblocks
   ------------------------------------------------------------ */
.cd-zug__abzeichen {
  display: inline-block;
  margin-block-end: var(--cd-a3);
  padding: 5px 10px;
  background: var(--zug-akzent);
  color: var(--cd-weiss);
  border-radius: var(--cd-r-feld);
  font-family: var(--cd-schrift-mono);
  font-size: var(--cd-gr-mikro);
  letter-spacing: .12em;
  text-transform: uppercase;
  line-height: 1.2;
}
.cd-zug.cd-auf-dunkel .cd-zug__abzeichen { color: var(--cd-tinte); }

.cd-zug__zeile {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--cd-a1) var(--cd-a3);
  margin-block-end: var(--cd-a3);
  max-inline-size: none;
}
.cd-zug__nummer {
  font-family: var(--cd-schrift-display);
  font-weight: 700;
  font-size: var(--cd-gr-h3);
  line-height: 1;
  letter-spacing: -.04em;
  color: var(--zug-akzent);
}
/* Der Kicker bringt seinen Abstand aus komponenten.css mit. In
   der Zeile stoert er — hier tragen ihn Zeile und Titel. */
.cd-zug__kicker { margin-block-end: 0; }

.cd-zug__titel {
  margin-block-end: var(--cd-a4);
  max-inline-size: 22ch;
}
.cd-zug--lehnt .cd-zug__titel { margin-inline-start: auto; }

.cd-zug__unterzeile {
  margin-block-end: var(--cd-a4);
  font-size: var(--cd-gr-gross);
  color: var(--zug-mager);
}

/* Der Beitext kommt aus dem Editor und bringt eigene Absaetze
   mit — der Abstand sitzt deshalb an den Kindern. */
.cd-zug__fliess {
  color: var(--zug-text);
  font-size: var(--cd-gr-gross);
  max-inline-size: 58ch;
}
.cd-zug__fliess > * + * { margin-block-start: var(--cd-a4); }
.cd-zug__fliess + .cd-zug__fliess { margin-block-start: var(--cd-a4); }
.cd-zug__fliess--zwei { font-size: var(--cd-gr-text); color: var(--zug-mager); }


/* ------------------------------------------------------------
   Pfeilpunkte
   ------------------------------------------------------------
   Zeilen auf getoentem Grund. Die Trennlinien sind keine Rahmen,
   sondern die 2 px Fuge zwischen den Zeilen — so bleibt die
   Aussenkante durchgehend und es entstehen keine doppelten
   Linien zwischen zwei Zeilen.
   ------------------------------------------------------------ */
.cd-zug__punkte {
  display: grid;
  gap: 2px;
  margin-block-start: var(--cd-a6);
  background: var(--zug-linie);
  border: 1px solid var(--zug-linie);
  text-align: start;
}
.cd-zug__punkt {
  display: flex;
  align-items: flex-start;
  gap: var(--cd-a3);
  padding: var(--cd-a4) var(--cd-a5);
  background: var(--zug-feld);
  font-size: var(--cd-gr-text);
}
.cd-zug__punkt--link { padding: 0; }

.cd-zug__pfeil {
  flex: 0 0 auto;
  font-family: var(--cd-schrift-mono);
  line-height: var(--cd-zeile-text);
  color: var(--zug-akzent);
}
.cd-zug__punktText { min-inline-size: 0; }

/* Ist ein Ziel gesetzt, wird die ganze Zeile zum Link — nicht
   nur das Wort. Die Flaeche ist damit auch mit dem Finger sicher
   zu treffen (2.5.8). */
/* Die Unterstreichung aus basis.css gilt Links IM Fliesstext.
   Diese Zeile ist ein Bedienelement mit Flaeche, Pfeil und
   Hover-Grund — die Unterstreichung wird hier zurueckgenommen.
   Sie braucht dafuer zwei Klassen: "li a[href]" aus basis.css
   waere sonst spezifischer als eine einzelne Klasse. */
.cd-zug__punkt .cd-zug__punktLink {
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--cd-a4);
  inline-size: 100%;
  padding: var(--cd-a4) var(--cd-a5);
  color: var(--cd-tinte);
  font-weight: 600;
  transition: background var(--cd-zeit) ease, color var(--cd-zeit) ease;
}
.cd-zug.cd-auf-dunkel .cd-zug__punkt .cd-zug__punktLink { color: var(--cd-weiss); }
.cd-zug__punkt .cd-zug__punktLink:hover {
  background: var(--cd-rot);
  color: var(--cd-weiss);
}
.cd-zug__punktLink .cd-knopf__pfeil { color: var(--zug-akzent); }
.cd-zug__punktLink:hover .cd-knopf__pfeil { color: var(--cd-weiss); }

/* Verlinkte Punkte stehen zu zweit nebeneinander, sobald die
   Bahn zwei Haelften hat — vier Ziele fuellen so eine Haelfte,
   statt sie als schmale Saeule zu durchlaufen. */
@media (min-width: 1100px) {
  .cd-zug--zwei .cd-zug__punkte:has(.cd-zug__punkt--link) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}


/* ------------------------------------------------------------
   Kennzahlen
   ------------------------------------------------------------ */
.cd-zug__zahlen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr));
  gap: 2px;
  margin-block-start: var(--cd-a6);
  background: var(--zug-linie);
  border: 1px solid var(--zug-linie);
  text-align: start;
}
.cd-zug__zahl {
  display: grid;
  gap: var(--cd-a2);
  padding: var(--cd-a5);
  background: var(--zug-feld);
}
.cd-zug__zahlWert {
  font-family: var(--cd-schrift-display);
  font-weight: 700;
  font-size: var(--cd-gr-h2);
  line-height: 1;
  letter-spacing: -.03em;
}
.cd-zug__zahlName {
  font-family: var(--cd-schrift-mono);
  font-size: var(--cd-gr-mikro);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--zug-mager);
}


/* ------------------------------------------------------------
   Schlagworte
   ------------------------------------------------------------
   Sie nutzen das Bauteil .cd-chip. Auf dunklem Grund braucht es
   zwei andere Werte — die stehen hier und nicht in
   komponenten.css, weil sie nur in dieser Bahn gelten.
   ------------------------------------------------------------ */
.cd-zug__marken {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cd-a2);
  margin-block-start: var(--cd-a6);
  padding-block-start: var(--cd-a4);
  border-block-start: 1px solid var(--zug-linie);
}
.cd-zug__marke {
  font-family: var(--cd-schrift-mono);
  font-size: var(--cd-gr-klein);
  letter-spacing: .04em;
}
.cd-zug.cd-auf-dunkel .cd-zug__marke {
  border-color: var(--cd-linie-auf-dunkel);
  color: var(--cd-text-auf-dunkel);
}

.cd-zug__knopfzeile {
  display: flex;
  margin-block-start: var(--cd-a6);
  max-inline-size: none;
}


/* ------------------------------------------------------------
   Bild
   ------------------------------------------------------------
   Ohne Traegerflaeche: die Grafik sitzt unmittelbar auf der Bahn.
   Ein getoenter Kasten dahinter war ausprobiert und wieder
   entfernt — er steckte die Grafik in einen Rahmen, statt sie in
   der Bahn stehen zu lassen.
   ------------------------------------------------------------ */
.cd-zug__bild {
  position: relative;
  margin: 0;
  min-inline-size: 0;
}
.cd-zug__bild--unten { margin-block-start: var(--cd-a7); }

.cd-zug__bildDatei {
  display: block;
  inline-size: 100%;
  max-inline-size: 560px;
  block-size: auto;
  margin-inline: auto;
}
.cd-zug__bild--unten .cd-zug__bildDatei { max-inline-size: 400px; margin-inline: 0; }

/* Mit Unterschrift wird das Bild linksbuendig. Die 560-px-Decke
   oben zentriert es in der Spalte; bei 568 px Spaltenbreite
   sind das 4 px auf jeder Seite. Ohne Unterschrift sieht das
   niemand — mit Unterschrift steht die Zeile am Spaltenrand
   und die Zeichnung 4 px daneben, und genau solche Versaetze
   liest man als Unsauberkeit, ohne sie benennen zu koennen. */
.cd-zug__bild--mitUnterschrift .cd-zug__bildDatei { margin-inline: 0; }

/* Unterschrift und Hinweis stehen in EINER figcaption — ein Bild
   darf nur eine haben. Der Abstand nach oben sitzt deshalb an der
   figcaption, der Abstand zwischen den beiden Zeilen am gap. Ein
   margin an den span-Kindern taete gar nichts. */
.cd-zug__bildunterschrift {
  display: grid;
  gap: var(--cd-a2);
  margin-block-start: var(--cd-a4);
  /* Der Deckel ist keine Zier: Eine Bildunterschrift ueber die
     volle Spaltenbreite laeuft auf gut 90 Zeichen je Zeile, und
     dort verliert man beim Zeilenwechsel die Spur (WCAG 1.4.8
     nennt 80 als Grenze).

     ER STAND AUF 46rem — 736 px — UND GRIFF DAMIT NIE: Die
     Bildspalte ist 568 px breit. Nachgemessen am 02.09.2026:
     87 Zeichen je Zeile bei 13 px. Ein Deckel, der breiter ist
     als das, was er deckeln soll, ist ein Kommentar ohne Wirkung.

     `ch` statt `rem`, weil es um ZEICHEN je Zeile geht — und
     deshalb steht der Deckel am TEXT und nicht hier: `ch` rechnet
     mit der Schrift des Elements, an dem es steht. Am Behaelter
     (16 px) sind 65ch = 624 px und damit wieder breiter als die
     568 px der Spalte; am Text (13 px) sind es rund 507 px, und
     genau dort greift er. */
  max-inline-size: none;
}
.cd-zug__bildunterschriftKopf {
  font-family: var(--cd-schrift-mono);
  font-size: var(--cd-gr-mikro);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--zug-mager);
}
/* Fliesstextgrad und gemischte Schreibung — das ist der ganze
   Unterschied zur Plakette und zum Hinweis. Eine Unterschrift wird
   GELESEN, die beiden anderen werden erkannt. */
.cd-zug__bildunterschriftText {
  font-size: var(--cd-gr-klein);
  line-height: 1.65;
  color: var(--zug-mager);
  /* Hier sitzt der Zeilendeckel, weil `ch` mit der Schrift DIESES
     Elements rechnet (13 px → rund 507 px). Gemessen am
     02.09.2026 lief die Unterschrift auf 87 Zeichen je Zeile;
     WCAG 1.4.8 nennt 80 als Grenze, und beim Zeilenwechsel
     verliert man dort die Spur. */
  max-inline-size: 65ch;
}
.cd-zug__bildhinweis {
  font-family: var(--cd-schrift-mono);
  font-size: var(--cd-gr-mikro);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--zug-mager);
}

/* Plakette an der Bildecke. Sie steht auf der Akzentflaeche und
   ueberlappt das Bild bewusst — im Entwurf sitzt sie unten
   rechts ueber der Kante. Unterhalb von 900 px ruecken sie und
   das Bild untereinander: eine ueberlappende Flaeche auf
   schmalem Raum verdeckt sonst das Motiv. */
.cd-zug__plakette {
  display: grid;
  gap: var(--cd-a1);
  margin-block-start: var(--cd-a4);
  padding: var(--cd-a5);
  background: var(--cd-rot);
  color: var(--cd-weiss);
  max-inline-size: none;
}
.cd-zug__plaketteTitel {
  font-family: var(--cd-schrift-display);
  font-weight: 700;
  font-size: var(--cd-gr-gross);
  line-height: var(--cd-zeile-kopf);
}
.cd-zug__plaketteText {
  font-family: var(--cd-schrift-mono);
  font-size: var(--cd-gr-mikro);
  letter-spacing: .12em;
  text-transform: uppercase;
}

@media (min-width: 900px) {
  /* DIE PLAKETTE GEHOERT AN DAS BILD, NICHT AN DIE FIGUR.

     Sie hing mit `inset-block-end` am Bildblock — und der ist
     hoeher als das Bild, sobald darunter ein Hinweis oder eine
     Unterschrift steht. Die Plakette rutschte damit unter die
     Bildkante und legte sich auf den Text darunter. Gemessen am
     02.09.2026: Auf der Startseite und auf /agentur war der
     KI-Hinweis dadurch zu 100 Prozent verdeckt (216 x 18 px),
     auf der Relaunch-Seite zu 41 Prozent.

     Das ist kein Schoenheitsfehler: Der Hinweis „KI-generierte
     Illustration" ist eine Kennzeichnung und muss zu sehen sein.

     Ein Raster loest es ohne absolute Lage: Bild und Plakette
     teilen sich die erste Zelle, alles Weitere steht darunter.
     Der Ueberhang von a5 bleibt — er liegt jetzt ueber der
     BILDKANTE statt ueber dem Text. */
  .cd-zug__bild:has(.cd-zug__plakette) {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }
  .cd-zug__bild:has(.cd-zug__plakette) > .cd-zug__bildDatei,
  .cd-zug__bild:has(.cd-zug__plakette) > .cd-zug__plakette {
    grid-area: 1 / 1;
  }
  .cd-zug__bild:has(.cd-zug__plakette) > .cd-zug__plakette {
    align-self: end;
    justify-self: end;
    margin-block: 0 calc(var(--cd-a5) * -1);
    margin-inline-end: calc(var(--cd-a5) * -1);
    max-inline-size: 15rem;
  }
  /* Liegt das Bild links aussen, wandert die Plakette nach
     innen — sonst haengt sie ueber dem Seitenrand. */
  .cd-zug--gespiegelt .cd-zug__bild:has(.cd-zug__plakette) > .cd-zug__plakette {
    justify-self: start;
    margin-inline-end: 0;
    margin-inline-start: calc(var(--cd-a5) * -1);
  }
  /* Platz fuer den Ueberhang, sonst beginnt der Hinweis wieder
     unter dem roten Kasten. */
  .cd-zug__bild:has(.cd-zug__plakette) > .cd-zug__bildhinweis,
  .cd-zug__bild:has(.cd-zug__plakette) > .cd-zug__bildunterschrift {
    margin-block-start: calc(var(--cd-a4) + var(--cd-a5));
  }
}


/* ------------------------------------------------------------
   Kopfzeile ueber der Nebenliste
   ------------------------------------------------------------ */
.cd-zug__listenkopf {
  margin-block-end: var(--cd-a4);
  font-family: var(--cd-schrift-mono);
  font-size: var(--cd-gr-mikro);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--zug-mager);
}


/* ------------------------------------------------------------
   Titel und Text / Label und Wert
   ------------------------------------------------------------
   Eine Beschreibungsliste: die Paare gehoeren zusammen und sind
   keine Aufzaehlung gleichrangiger Punkte. Jedes Paar liegt in
   einem eigenen div — dt und dd duerfen sonst nicht gemeinsam
   in einer Rasterzelle sitzen.
   ------------------------------------------------------------ */
.cd-zug__paare {
  display: grid;
  gap: 2px;
  background: var(--zug-linie);
  border: 1px solid var(--zug-linie);
  border-block-start: 2px solid var(--cd-rot);
}
.cd-zug__paar {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--cd-a2);
  padding: var(--cd-a5);
  background: var(--zug-feld);
}
.cd-zug__paarTitel {
  font-family: var(--cd-schrift-display);
  font-weight: 600;
  font-size: var(--cd-gr-gross);
  letter-spacing: -.015em;
}
.cd-zug__paarText {
  margin: 0;
  font-size: var(--cd-gr-text);
  line-height: 1.58;
  color: var(--zug-text);
}

/* Bei Label und Wert traegt die Beschriftung die Ordnung — sie
   laeuft klein in der Monospace und in der Akzentfarbe. */
.cd-zug__paare--label .cd-zug__paarTitel {
  font-family: var(--cd-schrift-mono);
  font-weight: 500;
  font-size: var(--cd-gr-mikro);
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--zug-akzent);
}

@media (min-width: 1100px) {
  .cd-zug__paar {
    grid-template-columns: minmax(0, 13rem) minmax(0, 1fr);
    gap: var(--cd-a5);
    align-items: baseline;
  }
}


/* ------------------------------------------------------------
   Karten
   ------------------------------------------------------------ */
.cd-zug__karten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: 2px;
  background: var(--zug-linie);
  border: 1px solid var(--zug-linie);
}
.cd-zug__karte {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--cd-a4);
  padding: var(--cd-a6);
  background: var(--zug-feld);
}
/* Eine einzelne dunkle Karte in einer hellen Bahn bringt ihren
   eigenen Grund mit — .cd-auf-dunkel setzt ihn. */
.cd-zug__karte.cd-auf-dunkel { background: var(--cd-tinte); }

.cd-zug__karteLogo {
  display: block;
  block-size: 64px;
  inline-size: auto;
  object-fit: contain;
}
.cd-zug__karteTitel {
  font-size: var(--cd-gr-h4);
  font-weight: 600;
  letter-spacing: -.018em;
}
.cd-zug__karteText {
  font-size: var(--cd-gr-text);
  line-height: 1.62;
  color: var(--zug-text);
}
.cd-zug__karte.cd-auf-dunkel .cd-zug__karteText { color: var(--cd-text-auf-dunkel); }

/* Auch hier gewinnt sonst "li a[href]" aus basis.css. */
.cd-zug__karte .cd-karte__mehr { text-decoration: none; }
.cd-zug__karte.cd-auf-dunkel .cd-karte__mehr { color: var(--cd-rot-auf-dunkel); }


/* ------------------------------------------------------------
   Logos
   ------------------------------------------------------------ */
.cd-zug__logos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr));
  gap: 2px;
  background: var(--zug-linie);
  border: 1px solid var(--zug-linie);
}
.cd-zug__logoFeld {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--cd-a5);
  background: var(--zug-feld);
}
.cd-zug__logoBild {
  display: block;
  block-size: 48px;
  inline-size: auto;
  object-fit: contain;
}


/* ------------------------------------------------------------
   Landkarte hinter der Einwilligung
   ------------------------------------------------------------
   Die Karte wird NICHT vorgeladen. Bis die Einwilligung vorliegt,
   steht dieser Kasten an ihrer Stelle — es geht dabei kein
   einziger Aufruf an einen fremden Host.
   ------------------------------------------------------------ */
.cd-zug__kartenkasten {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: var(--cd-a5);
  padding: var(--cd-a8) var(--cd-a7);
  min-block-size: var(--cd-kartenhoehe, 25rem);
}
/* Seit 10.09.2026 Fliesstextgroesse statt --cd-gr-gross: Der Hinweis
   nennt jetzt Anbieter, Daten, USA und Widerruf (Zwei-Klick-Loesung)
   und ist dreimal so lang wie der alte Einzeiler. In der grossen
   Schrift waeren das acht Zeilen vor dem Knopf gewesen. */
.cd-zug__einwilligung {
  font-size: var(--cd-gr-text);
  color: var(--cd-text-auf-dunkel);
  max-inline-size: 52ch;
}

/* „Karte laden" und daneben der leise Weg in die Einstellungen. */
.cd-zug__kartenknoepfe {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--cd-a3) var(--cd-a5);
}
.cd-zug__karteneinstellungen {
  appearance: none;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  font: inherit;
  font-size: var(--cd-gr-klein);
  color: var(--cd-text-auf-dunkel);
  text-decoration: underline;
  text-underline-offset: .2em;
}
.cd-zug__karteneinstellungen:hover,
.cd-zug__karteneinstellungen:focus-visible {
  color: var(--cd-weiss);
}

/* Ersatz, wenn die Karte nicht laedt: Hinweis und Verweis auf Google
   Maps (cookie.js, karteNichtVerfuegbar). Kein iframe mehr als
   Rueckfall — das haette Google-Cookies gesetzt. */
[data-cd-karte-ersatz] {
  display: grid;
  gap: var(--cd-a4);
  justify-items: start;
}

/* Nach der Einwilligung fuellt die Karte genau die Flaeche des
   Platzhalters. Kein Innenabstand und kein zusaetzlicher Rahmen:
   Google Maps ist selbst bereits eine vollstaendige Oberflaeche. */
.cd-zug__kartenkasten--geladen {
  display: block;
  padding: 0;
  overflow: hidden;
}
.cd-zug__kartenrahmen {
  display: block;
  inline-size: 100%;
  block-size: var(--cd-kartenhoehe, 25rem);
  min-block-size: 15rem;
  border: 0;
}

/* Die Sprechblase am Marker
   ------------------------------------------------------------
   Googles Infofenster ist ein weisser Kasten mit eigenem Innen-
   abstand; gestaltet wird nur, was darin steht. Deshalb hier
   auch KEINE Farben aus dem dunklen Bahnkontext: die Blase
   gehoert zur Karte, nicht zur Bahn, und ist immer hell. */
.cd-kartenblase {
  display: flex;
  flex-direction: column;
  gap: 8px;
  /* Der Text der Bahn ist fuer dunklen Grund gesetzt und wuerde
     in der weissen Blase verschwinden — dieselbe Falle wie bei
     der weissen Insel weiter unten. */
  color: var(--cd-tinte);
  font-family: var(--cd-schrift-text);
  font-size: 13px;
  line-height: 1.5;
  padding-block-end: 2px;
  /* Rechts bleibt Platz fuer Googles Schliessen-Kreuz. Es sitzt
     absolut in der Ecke der Blase, und seit der Inhalt um 35 px
     hochgezogen ist, laege es sonst MITTEN AUF dem Logo — im Bild
     stand „code dimension×". */
  padding-inline-end: 26px;
}
.cd-kartenblase__logo {
  display: block;
  inline-size: 170px;
  block-size: auto;
}
.cd-kartenblase__text {
  display: block;
  font-weight: 600;
  max-inline-size: 26ch;
}

/* Googles Infofenster haelt oben eine feste Zeile fuer das
   Schliessen-Kreuz frei — auch wenn der Inhalt sie nicht braucht.
   Die Blase stand dadurch mit einem breiten leeren Streifen ueber
   dem Logo. Der negative Rand holt den Inhalt hoch.

   Die Regel steht BEWUSST in unserem Rahmen und nicht global:
   .gm-style-iw-d ist eine Klasse von Google, die auf jeder Karte
   im Dokument vorkaeme. */
.cd-zug__kartenrahmen .gm-style-iw-d {
  margin-block-start: -35px;
}


/* Der Standort auf der Karte
   ------------------------------------------------------------
   Nur fuer den Weg ueber eine Map-ID: dort ist der Marker ein
   AdvancedMarkerElement und traegt echtes Markup, das hier
   gestaltet wird. Ohne Map-ID zeichnet Google den Punkt selbst
   (SymbolPath.CIRCLE in cookie.js) — deshalb stehen die Farben
   an beiden Stellen und kommen an beiden aus denselben Token.

   Der Punkt sitzt mit seinem UNTEREN Rand auf der Koordinate,
   nicht mit seiner Mitte: ein Marker zeigt auf einen Ort, er
   bedeckt ihn nicht. */
.cd-kartenpunkt {
  display: block;
  inline-size: 18px;
  block-size: 18px;
  border-radius: 50%;
  background: var(--cd-kartenpunkt-farbe, var(--cd-rot));
  box-shadow: 0 0 0 3px var(--cd-kartenpunkt-rand, var(--cd-weiss)),
              0 2px 6px rgb(0 0 0 / 0.35);
  transform: translateY(-50%);
}


/* ------------------------------------------------------------
   Eigener Kasten in der Nebenspalte
   ------------------------------------------------------------ */
/* WEISSE INSEL IN EINER DUNKLEN BAHN.
   Der Kasten setzt seinen eigenen Grund auf Weiss — die
   Textfarben der Bahn gelten darin aber weiter, und die sind fuer
   DUNKEL gemacht. Gemessen auf dieser Flaeche:

     .cd-zug__listenkopf  #93A9B4 auf Weiss   2,45:1
     .cd-nummer           #7E97A2 auf Weiss   3,07:1

   Beide fallen durch 1.4.3. Von aussen sieht der Kasten richtig
   aus: Ueberschrift und Fliesstext stehen dunkel, weil `color`
   hier zurueckgesetzt wird. Nur die zwei Nebenrollen laufen ueber
   eigene Variablen, und die hat niemand mitgezogen.

   Deshalb wird hier der GANZE Satz zurueckgesetzt und nicht nur
   die zwei auffaelligen Zeilen — wer dem Kasten spaeter eine
   dritte Nebenrolle gibt, faellt sonst in dieselbe Grube. */
.cd-zug .cd-zug__box,
.cd-zug__box {
  --zug-linie: var(--cd-linie-2);
  --zug-feld: var(--cd-flaeche-2);
  --zug-text: var(--cd-text-2);
  --zug-akzent: var(--cd-rot);
  --zug-mager: var(--cd-text-3);

  display: grid;
  justify-items: start;
  gap: var(--cd-a4);
  padding: var(--cd-a6);
  background: var(--cd-weiss);
  color: var(--cd-tinte);
  border: 1px solid var(--cd-linie-2);
  border-radius: var(--cd-r-karte);
  box-shadow: var(--cd-schatten-karte);
}
.cd-zug__boxText {
  font-family: var(--cd-schrift-display);
  font-weight: 700;
  font-size: var(--cd-gr-h3);
  line-height: var(--cd-zeile-kopf);
  letter-spacing: -.028em;
  max-inline-size: none;
}
.cd-zug__boxKnopf { inline-size: 100%; justify-content: space-between; }


/* ------------------------------------------------------------
   Schmale Geraete
   ------------------------------------------------------------ */
@media (max-width: 600px) {
  .cd-zug__raster { gap: var(--cd-a6); }
  .cd-zug__punkt { padding: var(--cd-a3) var(--cd-a4); }
  .cd-zug__punkt--link { padding: 0; }
  .cd-zug__punkt .cd-zug__punktLink { padding: var(--cd-a3) var(--cd-a4); }
  .cd-zug__paar,
  .cd-zug__zahl { padding: var(--cd-a4); }
  .cd-zug__karte { padding: var(--cd-a5); }
  .cd-zug__kartenkasten {
    padding: var(--cd-a7) var(--cd-a5);
    min-block-size: var(--cd-kartenhoehe, 25rem);
  }
  .cd-zug__kartenkasten--geladen { padding: 0; }
  .cd-zug__kartenrahmen { min-block-size: 15rem; }
}

/* ------------------------------------------------------------
   Verweise in der Nebenliste
   ------------------------------------------------------------
   Ohne Unterstreichung: die ganze Zelle ist der Weg, sie traegt
   einen Rahmen und rechts einen Pfeil. Eine Unterstreichung
   obendrauf wirkt wie ein Fehler.

   DREI Klassen im Selektor, weil die Unterstreichung im
   Inhaltsbereich aus basis.css kommt (".cd-inhalt :where(li)
   a[href]") und eine Klasse plus ein Attribut wiegt.
   ------------------------------------------------------------ */
.cd-zug .cd-zug__punkte .cd-zug__punktLink {
  text-decoration: none;
}

/* ------------------------------------------------------------
   Marken schlicht statt in Kaesten
   ------------------------------------------------------------
   Umschaltbar am Element. Der Kasten kommt aus .cd-chip in
   komponenten.css — hier wird er zurueckgenommen, statt in der
   Vorlage eine zweite Klasse zu vergeben.
   ------------------------------------------------------------ */
.cd-zug__marken--schlicht .cd-zug__marke {
  padding: 0;
  border: 0;
  background: none;
  font-size: var(--cd-gr-mikro);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--cd-text-3);
}
.cd-auf-dunkel .cd-zug__marken--schlicht .cd-zug__marke {
  color: var(--cd-text-auf-dunkel-2);
}
.cd-zug__marken--schlicht { gap: var(--cd-a5); }


/* Die zwei Rollen, die NICHT ueber die --zug-Variablen laufen:
   .cd-nummer und .cd-kicker holen ihre Farbe aus komponenten.css
   und werden dort von `.cd-auf-dunkel` umgestellt. Im weissen
   Kasten muss beides wieder zurueck. */
.cd-auf-dunkel .cd-zug__box .cd-nummer { color: var(--cd-text-3); }
.cd-auf-dunkel .cd-zug__box .cd-kicker { color: var(--cd-rot); }