/* ============================================================
   cd_karten — Kartenraster
   ============================================================
   Sieben Bauformen aus einem Markup. Was der Entwurf als 19
   Bauart-Namen fuehrte, unterscheidet sich hier in drei Dingen:
   Spaltenzahl (data-spalten), Grundfarbe (cd-auf-dunkel) und
   welche Kindfelder gefuellt sind.

   Das Rastergitter entsteht NICHT aus Rahmen an den Karten,
   sondern aus einem 2 px breiten Spalt ueber einer eingefaerbten
   Flaeche. Rahmen an jeder Karte ergaeben an jeder Innenkante
   eine doppelte Linie.

   minmax(0, 1fr) ueberall statt 1fr: 1fr meint minmax(auto, 1fr)
   und sprengt das Raster, sobald ein Wort breiter ist als seine
   Spalte.
   ============================================================ */

/* ------------------------------------------------------------
   Kopfblock
   ------------------------------------------------------------ */
.cd-karten__ueberschrift { color: var(--cd-tinte); }
.cd-auf-dunkel .cd-karten__ueberschrift { color: var(--cd-weiss); }

.cd-karten__beitext {
  font-size: var(--cd-gr-gross);
  line-height: 1.65;
  color: var(--cd-text-2);
}
.cd-auf-dunkel .cd-karten__beitext { color: var(--cd-text-auf-dunkel); }

/* Traegt der Kopfblock nichts Sichtbares — das ist bei Band und
   Kennzahlen die Regel, dort steht die Ueberschrift nur fuer
   Vorleseprogramme da — dann faellt auch sein Abstand weg. Sonst
   klafft ueber dem Band eine Luecke ohne erkennbaren Grund. */
.cd-karten__kopf:not(:has(.cd-karten__ueberschrift, .cd-kicker, .cd-karten__nebenkopf)) {
  margin-block-end: 0;
}

.cd-karten__nebenkopf {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--cd-a5);
}

/* Die Zeichnung sitzt am rechten Rand der Kopfzeile. Ohne Breiten-
   angabe im Markup: die Bahnbilder sind SVG. */
.cd-karten__bild {
  display: block;
  inline-size: 100%;
  max-inline-size: 390px;
  block-size: auto;
  margin-inline-start: auto;
}

.cd-karten__knoepfe {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cd-a3);
  margin-block-start: var(--cd-a5);
}

/* Steht im Nebenkopf NUR der Knopf, hat er nichts, woran er sich
   links ausrichten koennte — dann sass er mitten in der Zeile, am
   linken Rand der 26rem-Spalte (gemessen auf /service/typo3-update:
   Knopf bei 904 px, Inhaltskante bei 1319 px). Er gehoert an die
   rechte Kante, wie der Kopfknopf bei Referenzen, Preisstufen und
   Blogteaser.

   Steht ein Beitext darueber, bleibt der Knopf an dessen linker
   Kante: dann ist er die Fortsetzung des Textes und nicht die
   Gegenlast zur Ueberschrift. Ein BILD darueber ist selbst schon
   rechts gestellt (margin-inline-start: auto eine Regel weiter
   oben) — dazu passt der rechte Rand.

   margin-inline-start statt justify-content: Der Nebenkopf ist eine
   Spalte mit align-items: flex-start, die Knopfreihe darin also auf
   ihren Inhalt geschrumpft. justify-content haette in einem Kasten
   ohne freien Platz nichts zu verteilen. Ein automatischer Aussen-
   abstand sticht align-items und schiebt den ganzen Kasten nach
   rechts; justify-content steht daneben fuer den Fall, dass zwei
   Knoepfe umbrechen.

   Erst ab 901 px: Darunter ist die Kopfzeile einspaltig
   (bahnen.css) und der Knopf steht unter der Ueberschrift — rechts
   waere er dort aus der Flucht. Dieselbe Schwelle wie
   cd_referenzen.css:35. */
@media (min-width: 901px) {
  .cd-karten:not(.cd-karten--zeilen)
    .cd-karten__nebenkopf:not(:has(.cd-karten__beitext))
    .cd-karten__knoepfe {
    margin-inline-start: auto;
    justify-content: flex-end;
  }
}

/* ------------------------------------------------------------
   Anordnung von Kopfblock und Raster
   ------------------------------------------------------------
   In der Bauform Zeilenliste stehen beide nebeneinander. Ueberall
   sonst untereinander — dann bleibt diese Huelle ein Block ohne
   eigene Wirkung.
   ------------------------------------------------------------ */
.cd-karten__anordnung > * { min-inline-size: 0; }

/* ------------------------------------------------------------
   Das Raster
   ------------------------------------------------------------ */
.cd-karten__raster {
  display: grid;
  /* 2 px Spalt: die Trennlinie des Rasters. Kein Abstandstoken —
     das hier ist eine Linienstaerke und keine Luft. */
  gap: 2px;
  background: var(--cd-linie-2);
  border: 1px solid var(--cd-linie-2);
  /* Die Spaltenzahl kommt je Geraeteklasse als eigene Eigenschaft
     vom Element (ViewHelper cd:bahnstil). Ohne Angabe gelten die
     Vorgaben des Entwurfs: einspaltig am Handy, zwei auf dem
     Tablet, drei am Rechner. */
  grid-template-columns: repeat(var(--cd-sp-m, 1), minmax(0, 1fr));
}

@media (min-width: 601px) {
  .cd-karten__raster {
    grid-template-columns: repeat(var(--cd-sp-t, 2), minmax(0, 1fr));
  }
}

@media (min-width: 1101px) {
  .cd-karten__raster {
    grid-template-columns: repeat(var(--cd-sp-d, 3), minmax(0, 1fr));
  }
}

.cd-auf-dunkel .cd-karten__raster {
  background: var(--cd-dunkel-3);
  border-color: var(--cd-dunkel-3);
}

.cd-karten__feld {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--cd-a3);
  padding: var(--cd-a6) 30px 30px;
  background: var(--cd-weiss);
  transition: background var(--cd-zeit) ease, box-shadow var(--cd-zeit) ease;
}
.cd-auf-dunkel .cd-karten__feld { background: var(--cd-dunkel-2); }

/* Der Ausreisser: eine dunkle Karte in einem hellen Raster. */
.cd-karten__feld--dunkel {
  background: var(--cd-dunkel);
  color: var(--cd-text-auf-dunkel);
}
.cd-karten__feld--dunkel .cd-karten__titel,
.cd-karten__feld--dunkel .cd-karten__titel a { color: var(--cd-weiss); }
.cd-karten__feld--dunkel .cd-karten__text { color: var(--cd-text-auf-dunkel); }
.cd-karten__feld--dunkel .cd-karten__tag,
.cd-karten__feld--dunkel .cd-karten__mehr { color: var(--cd-rot-auf-karte-dunkel); }
.cd-karten__feld--dunkel .cd-karten__mehr { border-block-start-color: var(--cd-dunkel-3); }

/* Hervorgehoben traegt eine rote Kante — nicht nur eine andere
   Flaeche. Farbe allein waere nach 1.4.1 kein zulaessiger
   Traeger. */
.cd-karten__feld--vor { box-shadow: inset 0 3px 0 var(--cd-rot); }

/* Karten mit Verweis heben sich beim Zeigen. Ohne Verweis passiert
   nichts — sonst verspricht die Flaeche eine Bedienung die es nicht
   gibt. */
.cd-karten__feld:has(.cd-karten__ziel):hover {
  background: var(--cd-flaeche-1);
  box-shadow: inset 0 3px 0 var(--cd-rot);
}
.cd-auf-dunkel .cd-karten__feld:has(.cd-karten__ziel):hover {
  background: var(--cd-dunkel-3);
}
/* DIESELBE AUSNAHME NOCH EINMAL FUER DIE EINZELNE DUNKLE KARTE.
   Die Zeile darueber faengt die dunkle BAHN ab. Der Ausreisser
   weiter oben (.cd-karten__feld--dunkel) ist aber eine dunkle KARTE
   in einer hellen Bahn - er hat keinen .cd-auf-dunkel-Vorfahren und
   lief deshalb in die helle Regel.

   Gemessen an "Fuer Agenturen" auf der Startseite: Der Grund sprang
   beim Zeigen von #16272F auf #F7F9FA, waehrend der Titel weiss
   blieb (die Regel .cd-karten__feld--dunkel .cd-karten__titel a
   traegt drei Klassen und schlaegt jeden Hover-Zustand). Weiss auf
   Fast-Weiss sind 1,06 : 1, der Beitext lag bei 1,83 : 1 - die
   Karte war beim Zeigen schlicht leer.

   Mit #2C444D, demselben Wert wie in der dunklen Bahn: Titel
   10,29 : 1, Beitext 5,33 : 1, Zeichen 3,09 : 1.

   Der Selektor traegt genauso viele Klassen wie die helle Regel und
   steht danach - bei gleicher Staerke gewinnt die spaetere. */
.cd-karten__feld--dunkel:has(.cd-karten__ziel):hover {
  background: var(--cd-dunkel-3);
}

/* ------------------------------------------------------------
   Inhalt einer Karte
   ------------------------------------------------------------ */
.cd-karten__kopfzeile {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--cd-a3);
}

/* Der Kicker steht IMMER auf eigener Zeile ueber dem Titel —
   auch wenn daneben ein Symbol sitzt. */
.cd-karten__tag {
  flex: 1 0 100%;
  font-family: var(--cd-schrift-mono);
  font-size: var(--cd-gr-mikro);
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--cd-rot);
}
.cd-auf-dunkel .cd-karten__tag { color: var(--cd-rot-auf-karte-dunkel); }

/* Die Zeichnungen aus dem Symbol-Partial kommen mit 16 px Kantenmass.
   In einer 48-px-Kachel waeren sie verloren — die Groesse wird
   deshalb hier gesetzt und nicht im Partial: dasselbe Zeichen steht
   an anderer Stelle klein in einer Textzeile. */
.cd-karten__symbol { margin-block-end: var(--cd-a1); }
.cd-karten__symbol .cd-symbol {
  inline-size: 24px;
  block-size: 24px;
}

/* Auf dunklem Grund traegt --cd-rot nicht mehr (1.4.11) — dort die
   aufgehellte Fassung. Die Kachel toent entsprechend mit. */
.cd-auf-dunkel .cd-karten__symbol,
.cd-karten__feld--dunkel .cd-karten__symbol {
  background: color-mix(in srgb, var(--cd-rot-auf-dunkel) 14%, transparent);
  color: var(--cd-rot-auf-dunkel);
}

.cd-karten__titel {
  font-size: var(--cd-gr-h4);
  color: var(--cd-tinte);
}
.cd-auf-dunkel .cd-karten__titel { color: var(--cd-weiss); }

/* Der Verweis liegt auf dem Titel und deckt die ganze Karte ab.
   So bleibt der zugaengliche Name kurz, und trotzdem ist die
   ganze Flaeche anklickbar. */
.cd-karten__ziel { color: inherit; }
.cd-karten__ziel::after {
  content: "";
  position: absolute;
  inset: 0;
}
.cd-karten__ziel:hover { color: var(--cd-rot); }
.cd-auf-dunkel .cd-karten__ziel:hover { color: var(--cd-rot-auf-karte-dunkel); }

/* Der Fokusring gehoert um die ganze Karte, nicht um den Titel —
   sichtbar ist ja die Karte (WCAG 2.4.11). */
.cd-karten__feld:has(.cd-karten__ziel:focus-visible) {
  outline: 3px solid var(--cd-rot);
  outline-offset: -3px;
}
.cd-auf-dunkel .cd-karten__feld:has(.cd-karten__ziel:focus-visible) {
  outline-color: var(--cd-weiss);
}
.cd-karten__ziel:focus-visible { outline: none; }

.cd-karten__text {
  font-size: 15.5px;
  line-height: 1.62;
  color: var(--cd-text-2);
}
.cd-auf-dunkel .cd-karten__text { color: var(--cd-text-auf-dunkel); }

.cd-karten__merkmale {
  display: grid;
  gap: var(--cd-a2);
  font-size: var(--cd-gr-klein);
  color: var(--cd-text-2);
}
.cd-auf-dunkel .cd-karten__merkmale { color: var(--cd-text-auf-dunkel); }
.cd-karten__merkmal {
  position: relative;
  padding-inline-start: var(--cd-a5);
  line-height: 1.55;
}
/* Der Punkt ist gezeichnet und kein Schriftzeichen: ein Zeichen aus
   dem Privatnutzungsbereich landet sonst im vorgelesenen Text. */
.cd-karten__merkmal::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: .55em;
  inline-size: 6px;
  block-size: 6px;
  border-radius: 50%;
  background: var(--cd-rot);
}
.cd-auf-dunkel .cd-karten__merkmal::before { background: var(--cd-rot-auf-dunkel); }

.cd-karten__schlagworte {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: var(--cd-a2);
  margin-block-start: var(--cd-a2);
}
.cd-karten__schlagwort {
  font-family: var(--cd-schrift-mono);
  font-size: var(--cd-gr-mikro);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--cd-text-3);
}
.cd-auf-dunkel .cd-karten__schlagwort {
  border-color: var(--cd-linie-auf-dunkel);
  color: var(--cd-text-auf-dunkel);
}

/* Preismarke: dunkle Plakette mit grosser Zahl und Kleinzeile. */
.cd-karten__marke {
  display: inline-flex;
  align-items: baseline;
  gap: var(--cd-a2);
  align-self: flex-start;
  padding: var(--cd-a2) var(--cd-a4);
  background: var(--cd-tinte);
  border-radius: var(--cd-r-feld);
}
.cd-karten__markeWert {
  font-family: var(--cd-schrift-display);
  font-weight: 700;
  font-size: var(--cd-gr-gross);
  color: var(--cd-weiss);
}
.cd-karten__markeText {
  font-family: var(--cd-schrift-mono);
  font-size: var(--cd-gr-mikro);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--cd-text-auf-dunkel-2);
}

.cd-karten__logo {
  display: block;
  inline-size: auto;
  max-inline-size: 150px;
  block-size: 34px;
  object-fit: contain;
  object-position: left center;
}

.cd-karten__kartenfussnote {
  font-size: var(--cd-gr-klein);
  line-height: 1.55;
  color: var(--cd-text-3);
}
.cd-auf-dunkel .cd-karten__kartenfussnote { color: var(--cd-text-auf-dunkel-2); }

/* Die Weiterzeile steht dauerhaft da und nicht erst beim Zeigen —
   ein Hinweis der nur bei :hover erscheint, existiert fuer Tastatur
   und Fingertipp nicht. aria-hidden traegt sie im Markup: der
   Verweis selbst sitzt auf dem Titel. */
.cd-karten__mehr {
  margin-block-start: auto;
  padding-block-start: var(--cd-a4);
  border-block-start: 1px solid var(--cd-linie-2);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--cd-a3);
  font-family: var(--cd-schrift-mono);
  font-size: 10.5px;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--cd-rot);
}
.cd-auf-dunkel .cd-karten__mehr {
  border-block-start-color: var(--cd-dunkel-3);
  color: var(--cd-rot-auf-karte-dunkel);
}
.cd-karten__feld:has(.cd-karten__ziel):hover .cd-karten__mehr .cd-knopf__pfeil {
  transform: translateX(3px);
}

/* ------------------------------------------------------------
   Fussnote und Hinweisstreifen der Bahn
   ------------------------------------------------------------ */
.cd-karten__fussnote {
  margin-block-start: var(--cd-a5);
  font-size: var(--cd-gr-klein);
  line-height: 1.6;
  color: var(--cd-text-3);
}
.cd-auf-dunkel .cd-karten__fussnote { color: var(--cd-text-auf-dunkel-2); }

.cd-karten__hinweis {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--cd-a6);
  margin-block-start: var(--cd-a6);
  padding: 26px 30px;
  background: var(--cd-flaeche-2);
  border-inline-start: 3px solid var(--cd-rot);
}
.cd-auf-dunkel .cd-karten__hinweis { background: var(--cd-dunkel-2); }
.cd-karten__hinweisText {
  max-inline-size: 760px;
  font-size: 16.5px;
  line-height: 1.6;
  color: var(--cd-text-2);
}
.cd-auf-dunkel .cd-karten__hinweisText { color: var(--cd-text-auf-dunkel); }

/* ============================================================
   Bauform: Karten
   ============================================================
   Symbol und Titel in einer Zeile, darunter Text und Marken.
   ============================================================ */
.cd-karten--karten .cd-karten__feld { padding: 40px 36px 34px; }
.cd-karten--karten .cd-karten__titel { font-size: var(--cd-gr-h3); font-weight: 700; }

/* Neben einer 24 px hohen Ueberschrift steht das Zeichen frei —
   die getoente Kachel gehoert zur Kachel-Bauform. */
.cd-karten--karten .cd-karten__symbol {
  inline-size: auto;
  block-size: auto;
  margin-block-end: 0;
  background: none;
}
.cd-karten--karten .cd-karten__symbol .cd-symbol {
  inline-size: 27px;
  block-size: 27px;
}

/* ============================================================
   Bauform: Kacheln
   ============================================================
   Das Symbol steht ueber dem Kicker — also auf eigener Zeile.
   ============================================================ */
/* DAS SYMBOL STEHT AUF EIGENER ZEILE — ABER ES FUELLT SIE NICHT.
   Hier stand `flex: 1 0 100%`. Gemeint war der Zeilenumbruch,
   gewirkt hat eine Streckung: flex-basis: 100% schlaegt das
   inline-size: 48px aus .cd-karte__kachel, und aus der 48-px-Kachel
   wurde ein 546 px breiter rosa Balken quer ueber die Karte.

   `flex-basis: 100%` bricht die Zeile, `max-inline-size` holt die
   Kachel wieder auf ihr Mass zurueck — und weil das Feld ein
   Flex-Behaelter mit justify-content: flex-start ist, sitzt sie
   links. Die Bauform „Karten" loest dasselbe anders (background:
   none, ganz ohne Kachel); hier bleibt die getoente Kachel, weil
   sie in einem Kachelraster die Sorte anzeigt. */
.cd-karten--kacheln .cd-karten__symbol {
  flex: 0 0 100%;
  max-inline-size: 48px;
}
.cd-karten--kacheln .cd-karten__feld { padding: 30px 26px 32px; }
.cd-karten--kacheln .cd-karten__titel { font-size: 18.5px; }

/* ============================================================
   Bauform: Weiterlesen
   ============================================================ */
/* ============================================================
   Bauform: Verweisreihe — volle Zeilen statt Kacheln
   ============================================================
   WOFUER: „Weiterlesen" ist dasselbe Kartenraster wie die uebrigen
   Bauformen. Auf einer Seite, die weiter oben schon ein Kartenraster
   zeigt (etwa /marketing/analyse-mit-matomo mit „Sechs Dinge"), liest
   sich der Verweisblock am Ende deshalb wie eine Wiederholung — und
   ein Verweisblock soll nicht mit dem Inhalt um Aufmerksamkeit
   ringen, er soll weiterleiten.

   Hier wird aus dem Raster ein Register: volle Zeilen, Haarlinie
   dazwischen, Titel links, Satz rechts, ein Pfeil ganz aussen.

   HOEHERES GEWICHT ALS DIE SPALTENREGELN: Die Spaltenzahl steht in
   zwei Media-Queries an .cd-karten__raster (0,1,0). Diese Regel
   traegt zwei Klassen (0,2,0) und schlaegt sie in jeder Breite —
   sonst waere die Reihe am Rechner wieder dreispaltig. */
.cd-karten--verweisreihe .cd-karten__raster {
  grid-template-columns: minmax(0, 1fr);
  /* Die 2-px-Fuge samt Hintergrund ist das Liniengitter der Kacheln.
     Hier ziehen die Zeilen ihre Linien selbst. */
  gap: 0;
  background: none;
  border: 0;
  border-block-start: 1px solid var(--cd-linie-2);
}

.cd-karten--verweisreihe .cd-karten__feld {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  column-gap: var(--cd-a5);
  row-gap: var(--cd-a2);
  /* Die Flaeche laeuft 16 px ueber die Textkante hinaus, damit der
     Ton beim Ueberfahren nicht hart an den Buchstaben endet. Der
     Wert ist nicht frei gewaehlt: Er entspricht der schmalsten
     Seitenrinne — mehr wuerde am Handy ueber den Rand laufen. */
  margin-inline: calc(var(--cd-a4) * -1);
  padding: var(--cd-a5) var(--cd-a4);
  background: none;
  border-block-end: 1px solid var(--cd-linie-2);
}

/* Der ganze Streifen ist das Ziel — nicht nur der Titel. Deshalb
   liegt der Zustand an der Zeile und nicht am Verweis.
   Kein Balken oben wie bei den Kacheln: Bei uebereinanderliegenden
   Zeilen saehe der wie eine verrutschte Trennlinie aus. */
.cd-karten--verweisreihe .cd-karten__feld:has(.cd-karten__ziel):hover {
  background: var(--cd-flaeche-3);
  box-shadow: none;
}
.cd-karten--verweisreihe .cd-karten__feld:has(.cd-karten__ziel):hover .cd-knopf__pfeil {
  transform: translateX(5px);
}
.cd-karten--verweisreihe .cd-knopf__pfeil {
  transition: transform var(--cd-zeit) ease;
}
@media (prefers-reduced-motion: reduce) {
  .cd-karten--verweisreihe .cd-knopf__pfeil { transition: none; }
  .cd-karten--verweisreihe .cd-karten__feld:has(.cd-karten__ziel):hover .cd-knopf__pfeil {
    transform: none;
  }
}

.cd-karten--verweisreihe .cd-karten__kopfzeile { margin: 0; }
.cd-karten--verweisreihe .cd-karten__text { margin: 0; }

/* Der Pfeil steht allein. „Weiterlesen" dreimal untereinander sagt
   dreimal dasselbe und macht aus einem Register eine Litanei; der
   Pfeil sagt es einmal je Zeile. Die Huelle um das Wort steht
   deshalb in der Vorlage. */
.cd-karten--verweisreihe .cd-karten__mehr {
  grid-row: 1;
  grid-column: 2;
  margin: 0;
  padding: 0;
  border: 0;
  align-self: center;
}
.cd-karten--verweisreihe .cd-karten__mehrwort { display: none; }

/* 22 px statt der ueblichen 14: In den Kacheln steht neben dem
   Pfeil das Wort „Weiterlesen" und traegt die Aufforderung. Hier
   steht er allein und muss sie allein tragen — bei 14 px war er am
   Ende einer 1.200 px breiten Zeile ein Fliegendreck. */
.cd-karten--verweisreihe .cd-knopf__pfeil {
  font-size: 22px;
  line-height: 1;
}

/* Am Rechner zwei Textspalten: Titel und Satz nebeneinander. Darunter
   stehen sie untereinander — bei 358 px blieben von einer zweiten
   Spalte keine 150 px uebrig. */
@media (min-width: 901px) {
  .cd-karten--verweisreihe .cd-karten__feld {
    grid-template-columns: minmax(0, 9fr) minmax(0, 12fr) auto;
    align-items: center;
    column-gap: var(--cd-a7);
  }
  .cd-karten--verweisreihe .cd-karten__mehr { grid-column: 3; }
}

.cd-karten--weiterlesen .cd-karten__feld { padding: 30px 28px 32px; }
.cd-karten--weiterlesen .cd-karten__mehr {
  margin-block-start: var(--cd-a2);
  padding-block-start: 0;
  border-block-start: 0;
  justify-content: flex-start;
  font-family: var(--cd-schrift-text);
  font-size: var(--cd-gr-klein);
  font-weight: 600;
  letter-spacing: normal;
  text-transform: none;
}

/* ============================================================
   Bauform: Hakenliste
   ============================================================
   Der Haken ist gezeichnet: zwei Kanten eines gedrehten Kastens.
   Ein Haken als Schriftzeichen wuerde mit vorgelesen.
   ============================================================ */
.cd-karten--haken .cd-karten__feld { padding-inline-start: 54px; }
.cd-karten--haken .cd-karten__feld::before {
  content: "";
  position: absolute;
  inset-block-start: 38px;
  inset-inline-start: 28px;
  inline-size: 7px;
  block-size: 13px;
  border-inline-end: 2px solid var(--cd-rot);
  border-block-end: 2px solid var(--cd-rot);
  transform: rotate(42deg);
}
.cd-auf-dunkel.cd-karten--haken .cd-karten__feld::before {
  border-color: var(--cd-rot-auf-dunkel);
}
.cd-karten--haken .cd-karten__titel { font-size: 18.5px; }

/* ============================================================
   Bauform: Zeilenliste
   ============================================================
   Kopfblock links, Zeilen rechts. Jede Zeile zweispaltig: Titel in
   fester Breite, Text daneben.
   ============================================================ */
.cd-karten--zeilen .cd-karten__anordnung {
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
  gap: 72px;
  align-items: start;
}
.cd-karten--zeilen .cd-karten__kopf {
  display: block;
  margin-block-end: 0;
}
.cd-karten--zeilen .cd-karten__beitext { margin-block-start: var(--cd-a4); }
.cd-karten--zeilen .cd-karten__raster { grid-template-columns: minmax(0, 1fr); }
.cd-karten--zeilen .cd-karten__feld {
  display: grid;
  grid-template-columns: minmax(0, 230px) minmax(0, 1fr);
  gap: var(--cd-a5);
  align-items: baseline;
  padding: var(--cd-a5) 28px;
}
.cd-karten--zeilen .cd-karten__kopfzeile { display: contents; }
.cd-karten--zeilen .cd-karten__titel { font-size: 16.5px; }

/* ============================================================
   Bauform: randloses Band
   ============================================================
   Keine Karten, nur Trennlinien. Das Band traegt die Luft der Bahn
   nicht — es sitzt buendig zwischen den Nachbarbahnen.
   ============================================================ */
/* Zwei Klassen im Selektor: .cd-bahn setzt die Luft der Bahn und
   steht in bahnen.css NACH dieser Datei — bei gleicher Spezifitaet
   gewaenne die spaetere Regel. */
.cd-bahn.cd-karten--band { padding-block: 0; }
.cd-karten--band .cd-karten__raster {
  gap: 0;
  background: none;
  border: 0;
}
.cd-karten--band .cd-karten__feld {
  flex-direction: row;
  align-items: center;
  gap: 18px;
  padding: 34px 30px;
  background: none;
  border-inline-start: 1px solid var(--cd-dunkel-2);
}
.cd-karten--band .cd-karten__feld:first-child {
  padding-inline-start: 0;
  border-inline-start: 0;
}
.cd-karten--band .cd-karten__feld:last-child { padding-inline-end: 0; }
.cd-karten--band .cd-karten__feld:hover { background: none; box-shadow: none; }

/* Im Band steht das Zeichen frei — ohne getoente Kachel. */
.cd-karten--band .cd-karten__symbol {
  inline-size: auto;
  block-size: auto;
  margin-block-end: 0;
  background: none;
  color: var(--cd-rot-auf-dunkel);
}
.cd-karten--band .cd-karten__symbol .cd-symbol {
  inline-size: 30px;
  block-size: 30px;
}
.cd-karten--band .cd-karten__titel {
  font-size: 19px;
  font-weight: 600;
}
.cd-karten--band .cd-karten__text {
  font-family: var(--cd-schrift-mono);
  font-size: var(--cd-gr-mikro);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--cd-text-auf-dunkel-2);
}
/* Titel und Kleinzeile stehen zusammen rechts vom Zeichen. */
.cd-karten--band .cd-karten__symbol { flex: 0 0 auto; }
.cd-karten--band .cd-karten__inhalt { flex: 1 1 auto; }

/* ============================================================
   Bauform: Kennzahlen — das Zahlenband
   ============================================================
   Bezeichnung klein darueber, Wert gross darunter, Trennlinien
   statt Flaechen.

   Drei Saeulen ohne Rahmen zerfielen in drei lose Textblocks. Das
   Band wird deshalb OBEN UND UNTEN GEFASST, und jede Saeule traegt
   auf der Oberkante einen kurzen roten Anschlag. Der Anschlag ist
   das einzige farbige Zeichen — er gibt jeder Spalte einen Anfang
   und bindet die Reihe zu einem Gegenstand zusammen.
   ============================================================ */
.cd-karten--kennzahlen .cd-karten__raster {
  gap: 0;
  background: none;
  border: 0;
  border-block: 1px solid var(--cd-linie);
  /* Die senkrechten Trennlinien sollen von Kante zu Kante laufen —
     auch neben der kuerzesten Spalte. */
  align-items: stretch;
}
.cd-auf-dunkel.cd-karten--kennzahlen .cd-karten__raster {
  border-block-color: var(--cd-dunkel-3);
}

.cd-karten--kennzahlen .cd-karten__feld {
  /* Der Einzug steht als eigene Eigenschaft, weil ihn zwei Dinge
     brauchen: die Polsterung UND der rote Anschlag. Ohne den
     gemeinsamen Wert haengt der Anschlag neben seinem Text, sobald
     man an der Polsterung dreht. */
  --cd-kz-einzug: var(--cd-a6);
  position: relative;
  gap: var(--cd-a2);
  padding-block: var(--cd-a7) var(--cd-a6);
  padding-inline: var(--cd-kz-einzug) var(--cd-a6);
  background: none;
  border-inline-start: 1px solid var(--cd-linie);
}
.cd-auf-dunkel.cd-karten--kennzahlen .cd-karten__feld {
  border-inline-start-color: var(--cd-dunkel-3);
}
.cd-karten--kennzahlen .cd-karten__feld:first-child {
  --cd-kz-einzug: 0px;
  border-inline-start: 0;
}
.cd-karten--kennzahlen .cd-karten__feld:hover { background: none; box-shadow: none; }

/* Der rote Anschlag. Er sitzt auf der Linie und nicht darunter:
   inset-block-start: -1px deckt die Kante genau ab, sonst stuende
   ein heller Spalt zwischen Anschlag und Band. */
.cd-karten--kennzahlen .cd-karten__feld::before {
  content: '';
  position: absolute;
  inset-block-start: -1px;
  inset-inline-start: var(--cd-kz-einzug);
  inline-size: 36px;
  block-size: 2px;
  background: var(--cd-rot);
}
.cd-auf-dunkel.cd-karten--kennzahlen .cd-karten__feld::before {
  background: var(--cd-rot-auf-dunkel);
}

/* Auftritt: die Anschlaege ziehen sich nacheinander auf. Die Klasse
   cd-bewegung steht nur an der Wurzel, wenn Bewegung ueberhaupt
   erwuenscht ist — wer sie abbestellt hat, sieht die Anschlaege von
   Anfang an. cd-ein traegt die Bahn selbst; bei dieser Bauform IST
   die Bahn das Element mit der Klasse cd-karten--kennzahlen. */
html.cd-bewegung .cd-karten--kennzahlen .cd-karten__feld::before {
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform .5s cubic-bezier(.22, .61, .36, 1);
}
html.cd-bewegung .cd-karten--kennzahlen.cd-ein .cd-karten__feld::before { transform: scaleX(1); }
html.cd-bewegung .cd-karten--kennzahlen.cd-ein .cd-karten__feld:nth-child(2)::before { transition-delay: .10s; }
html.cd-bewegung .cd-karten--kennzahlen.cd-ein .cd-karten__feld:nth-child(3)::before { transition-delay: .18s; }
html.cd-bewegung .cd-karten--kennzahlen.cd-ein .cd-karten__feld:nth-child(4)::before { transition-delay: .26s; }
html.cd-bewegung .cd-karten--kennzahlen.cd-ein .cd-karten__feld:nth-child(5)::before { transition-delay: .34s; }
html.cd-bewegung .cd-karten--kennzahlen.cd-ein .cd-karten__feld:nth-child(6)::before { transition-delay: .42s; }

/* Huelle der Zeilen in Kennzahl und Band. min-inline-size: 0, damit
   ein langes Wort die Spalte nicht aufreisst. */
.cd-karten__inhalt {
  display: grid;
  gap: var(--cd-a1);
  min-inline-size: 0;
}

.cd-karten__bezeichnung {
  font-family: var(--cd-schrift-mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--cd-text-3);
}
.cd-auf-dunkel .cd-karten__bezeichnung { color: var(--cd-text-auf-dunkel-2); }

.cd-karten__wert {
  font-family: var(--cd-schrift-display);
  font-weight: 600;
  font-size: var(--cd-gr-h3);
  line-height: 1.15;
  letter-spacing: -.018em;
  color: var(--cd-tinte);
}
.cd-auf-dunkel .cd-karten__wert { color: var(--cd-weiss); }

/* Die Zeilen des Zahlenbandes.
   ------------------------------------------------------------
   Bezeichnung und Wert gehoeren zusammen und stehen eng; der
   Beitext ist eine eigene Aussage und bekommt Luft davor. Mit dem
   einen Rasterabstand von 4 px klebten vorher alle drei
   aneinander. */
.cd-karten--kennzahlen .cd-karten__inhalt { gap: var(--cd-a2); }

.cd-karten--kennzahlen .cd-karten__bezeichnung {
  font-size: var(--cd-gr-mikro);
  letter-spacing: .16em;
}

.cd-karten--kennzahlen .cd-karten__wert {
  font-size: var(--cd-gr-kennzahl);
  line-height: 1.06;
  letter-spacing: -.028em;
  /* Ziffern gleicher Breite: sonst tanzen "3 Jahre" und "0 EUR"
     unterschiedlich weit von ihrer Spaltenkante weg. */
  font-variant-numeric: tabular-nums lining-nums;
  /* Werte sind nicht immer Zahlen. Ein langes Wort wird getrennt
     statt die Spalte aufzureissen. */
  hyphens: auto;
}

.cd-karten--kennzahlen .cd-karten__text {
  margin-block-start: var(--cd-a2);
  max-inline-size: 46ch;
}

/* Quellenangabe unter dem Band. Der senkrechte Strich macht sie zur
   Randnotiz — vorher stand sie als loser Absatz unter dem Nichts. */
.cd-karten--kennzahlen .cd-karten__fussnote {
  margin-block-start: var(--cd-a5);
  padding-inline-start: var(--cd-a4);
  border-inline-start: 2px solid var(--cd-linie);
  max-inline-size: 74ch;
}
.cd-auf-dunkel.cd-karten--kennzahlen .cd-karten__fussnote {
  border-inline-start-color: var(--cd-dunkel-3);
}

.cd-karten--kennzahlen .cd-karten__knoepfe { margin-block-start: var(--cd-a7); }

/* ============================================================
   Bis 1100 px
   ============================================================ */
@media (max-width: 1100px) {
  .cd-karten--zeilen .cd-karten__anordnung { gap: var(--cd-a7); }
}

/* ============================================================
   Bis 900 px — alles einspaltig
   ============================================================ */
@media (max-width: 900px) {
  .cd-karten--zeilen .cd-karten__anordnung {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--cd-a6);
  }
  .cd-karten--zeilen .cd-karten__feld {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--cd-a2);
  }

  .cd-karten__nebenkopf { align-items: stretch; }
  .cd-karten__bild { margin-inline: auto; }

  /* Band und Kennzahlen: die senkrechten Trennlinien werden
     waagerecht, sonst steht die Linie ueber einer leeren Spalte. */
  .cd-karten--band .cd-karten__feld {
    padding-inline: 0;
    border-inline-start: 0;
    border-block-start: 1px solid var(--cd-dunkel-2);
  }
  .cd-karten--band .cd-karten__feld:first-child {
    border-block-start: 0;
  }

  /* DAS RASTER MUSS MITKIPPEN.
     Die Regeln hier legen waagerechte Trennlinien an — sie gelten
     aber fuer ein Raster, das bis 900 px die Vorgabe ZWEI Spalten
     benutzt. Gemessen am 26.08.2026 auf /leistungen/typo3-website
     bei 768 px: zwei Spalten nebeneinander, darueber Striche, die
     quer durch die Reihe liefen und bei der ersten Karte fehlten.
     Sah aus wie ein Versehen, war eines. */
  .cd-karten--kennzahlen .cd-karten__raster {
    grid-template-columns: minmax(0, 1fr);
  }
  .cd-karten--kennzahlen .cd-karten__feld {
    --cd-kz-einzug: 0px;
    padding-block: var(--cd-a6);
    padding-inline: 0;
    border-inline-start: 0;
    /* Haarlinie und nicht --cd-dunkel-2: der fast schwarze Ton war
       auf hellem Grund ein Balken. */
    border-block-start: 1px solid var(--cd-linie);
  }
  .cd-auf-dunkel.cd-karten--kennzahlen .cd-karten__feld {
    border-block-start-color: var(--cd-dunkel-3);
    border-inline-start: 0;
  }
  /* Die Oberkante des Bandes traegt schon das Raster. */
  .cd-karten--kennzahlen .cd-karten__feld:first-child {
    border-block-start: 0;
  }

  .cd-karten__hinweis { flex-direction: column; align-items: flex-start; gap: var(--cd-a4); }
}

/* ============================================================
   Bis 600 px
   ============================================================ */
@media (max-width: 600px) {
  .cd-karten--karten .cd-karten__feld { padding: 28px var(--cd-a5) var(--cd-a5); }
  .cd-karten--haken .cd-karten__feld { padding-inline-start: 46px; }
  .cd-karten--haken .cd-karten__feld::before { inset-inline-start: var(--cd-a5); inset-block-start: 30px; }
  .cd-karten__hinweis { padding: var(--cd-a5); }
}

/* ============================================================
   Bewegung nur wo erwuenscht
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .cd-karten__feld:has(.cd-karten__ziel):hover .cd-karten__mehr .cd-knopf__pfeil {
    transform: none;
  }
}

/* ============================================================
   Zusatz: Symbol über dem Text
   ============================================================
   In der Bauform Karten sitzt die Zeichnung neben dem Titel. Ein
   gepflegter Kicker schiebt sie ohnehin auf eine eigene Zeile, weil
   .cd-karten__tag mit flex-basis 100 % umbricht. Ohne Kicker fehlte
   dieser Weg — dafuer der Schalter cd_symbol_oben.

   Bewusst nur ein Umbruch und keine getoente Kachel: die gehoert zur
   Bauform Kacheln und wuerde hier eine zweite Bauform vortaeuschen.
   ============================================================ */
.cd-karten--symbolueber .cd-karten__symbol {
  flex: 1 0 100%;
  margin-block-end: var(--cd-a2);
  /* LINKSBUENDIG, nicht mittig.
     Der Zeichenkasten ist als quadratische Kachel gebaut und zentriert
     seinen Inhalt — richtig, solange er so breit ist wie hoch. Hier
     wird er auf die volle Kartenbreite gedehnt (flex: 1 0 100%), und
     dann schiebt dieselbe Regel das Zeichen in die Mitte: gemessen
     bei 1440 px ein 27 px breites Zeichen bei 307 statt bei 157,
     waehrend Kicker, Titel und Text bei 157 beginnen. Das Zeichen
     stand als einziges Teil der Karte nicht auf der Fluchtlinie. */
  justify-content: flex-start;
}

/* ============================================================
   Bauform: Sprungreihe
   ============================================================
   Eine Reihe flacher Kacheln, die auf die Abschnitte derselben
   Seite zeigen — im Entwurf die Übersicht über die vier Bereiche.
   Zeichen links, darüber die Ordnungszahl, darunter der Name.

   Sie bricht bewusst aus dem Rastergitter aus: kein 2-px-Spalt
   über getönter Fläche, sondern einzeln umrandete Kacheln mit
   Luft dazwischen. Das Gitter bindet Karten zu einer Tafel
   zusammen; hier sind es vier eigenständige Wege.
   ============================================================ */
.cd-karten--sprung .cd-karten__raster {
  gap: var(--cd-a4);
  background: none;
  border: 0;
}

.cd-karten--sprung .cd-karten__feld {
  flex-direction: row;
  align-items: center;
  min-block-size: 44px;
  padding: 15px 18px;
  background: var(--cd-weiss);
  border: 1px solid var(--cd-linie-2);
  border-radius: 3px;
}
.cd-karten--sprung .cd-karten__feld:hover {
  border-color: var(--cd-rot);
  box-shadow: none;
  transform: none;
}

/* Zeichen über zwei Zeilen, daneben Zahl und Name untereinander.
   Über benannte Rasterplätze und nicht über eine zusätzliche
   Hülle: das Markup ist für alle sieben Bauformen dasselbe. */
.cd-karten--sprung .cd-karten__kopfzeile {
  display: grid;
  grid-template-columns: 50px minmax(0, 1fr);
  grid-template-areas:
    "zeichen zahl"
    "zeichen name";
  column-gap: 16px;
  align-items: center;
  inline-size: 100%;
}

.cd-karten--sprung .cd-karten__symbol {
  grid-area: zeichen;
  inline-size: 50px;
  block-size: 50px;
  margin-block-end: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--cd-flaeche-2);
  border: 1px solid var(--cd-linie);
  border-radius: 3px;
  color: var(--cd-rot);
}
.cd-karten--sprung .cd-karten__symbol .cd-symbol {
  inline-size: 24px;
  block-size: 24px;
}

.cd-karten--sprung .cd-karten__tag {
  grid-area: zahl;
  flex: none;
  margin-block-end: 5px;
  font-size: 11px;
  letter-spacing: .16em;
  color: var(--cd-rot);
}

.cd-karten--sprung .cd-karten__titel {
  grid-area: name;
  font-size: 16.5px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -.015em;
}

/* Die ganze Kachel ist der Weg — der Name darin braucht keine
   eigene Unterstreichung. Erkennbar bleibt sie am Rahmen, der beim
   Zeigen rot wird.

   DREI Klassen im Selektor, und das ist noetig: die Unterstreichung
   im Inhaltsbereich kommt aus basis.css ueber
   ".cd-inhalt :where(li) a[href]" und wiegt eine Klasse plus ein
   Attribut. Mit zwei Klassen verliert die Regel hier — gemessen,
   nicht geraten. */
.cd-karten--sprung .cd-karten__feld .cd-karten__ziel {
  text-decoration: none;
}

/* Die Sprungreihe traegt nur Zeichen, Zahl und Namen — alles
   Weitere waere in einer 50 px hohen Kachel ohnehin nicht lesbar. */
.cd-karten--sprung :is(.cd-karten__text, .cd-karten__merkmale,
  .cd-karten__schlagworte, .cd-karten__marke, .cd-karten__mehr,
  .cd-karten__logo, .cd-karten__kartenfussnote) {
  display: none;
}