/* ============================================================
   code dimension — Bahn: Vergleichstabelle
   ============================================================
   Eine echte Tabelle mit thead und scope. Vier Darstellungen:

     text          drei Spalten  Kriterium und zwei Textspalten
     dreispaltig   wie text — die dritte Spalte ist der Befund
     balken        zwei Wertspalten mit Balken und Text
     ampel         vier Spalten  die Lage faerbt die Zeile UND
                   steht als Text im Kriterium (WCAG 1.4.1)

   Umbruch auf schmalen Schirmen: die Tabelle wird zu Bloecken
   (display: block). Damit dabei die Tabellensemantik nicht
   verlorengeht, stehen die ARIA-Rollen im Markup und jede Zelle
   traegt ihre Spaltenbeschriftung als eigenes Element mit.

   Farben Abstaende und Radien ausschliesslich aus tokens.css.
   Im Raster minmax(0, 1fr) statt 1fr. Kein !important.
   ============================================================ */

/* ------------------------------------------------------------
   Kopf der Bahn
   ------------------------------------------------------------ */
.cd-tab__kopf {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--cd-a6);
  margin-block-end: var(--cd-a7);
}

.cd-tab__kopf--mitbild {
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: var(--cd-a8);
  align-items: center;
}

.cd-tab__titel { margin-block-end: var(--cd-a4); }

.cd-tab__subtitel {
  font-size: var(--cd-gr-gross);
  color: var(--cd-text-3);
  margin-block-end: var(--cd-a3);
}

.cd-tab__beitext {
  font-size: var(--cd-gr-gross);
  color: var(--cd-text-2);
}

.cd-tab__bild {
  justify-self: end;
  max-inline-size: 390px;
}
.cd-tab__bilddatei {
  display: block;
  inline-size: 100%;
  block-size: auto;
}

/* ------------------------------------------------------------
   Rahmen und Tabellenkoerper
   ------------------------------------------------------------
   Die rote Oberkante ist die einzige Farbflaeche am Rahmen — sie
   bindet die Tabelle an die Marke ohne die Zellen einzufaerben.
   ------------------------------------------------------------ */
.cd-tab__rahmen {
  background: var(--cd-weiss);
  border: 1px solid var(--cd-linie);
  border-block-start: 2px solid var(--cd-rot);
}

.cd-tab__tabelle {
  inline-size: 100%;
  border-collapse: collapse;
  text-align: start;
}

/* --- Kopfzeile --- */
.cd-tab__kopfzeile { background: var(--cd-flaeche-1); }

.cd-tab__spaltenkopf {
  padding: var(--cd-a4) var(--cd-a5);
  border-block-end: 1px solid var(--cd-linie-2);
  font-family: var(--cd-schrift-display);
  font-size: var(--cd-gr-gross);
  font-weight: 700;
  letter-spacing: -.02em;
  text-align: start;
  vertical-align: bottom;
}

/* Die erste Spalte beschriftet nur — sie ist keine Wertspalte. */
.cd-tab__spaltenkopf--a {
  inline-size: 24%;
  font-family: var(--cd-schrift-mono);
  font-size: var(--cd-gr-mikro);
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--cd-text-3);
}

/* --- Zeilen --- */
.cd-tab__zeile { border-block-start: 1px solid var(--cd-linie-2); }
.cd-tab__zeile:first-child { border-block-start: 0; }

.cd-tab__kriterium {
  padding: var(--cd-a5);
  border-inline-start: 3px solid transparent;
  font-family: var(--cd-schrift-display);
  font-size: var(--cd-gr-gross);
  font-weight: 700;
  letter-spacing: -.02em;
  text-align: start;
  vertical-align: top;
  color: var(--cd-tinte);
}

.cd-tab__zelle {
  padding: var(--cd-a5);
  border-inline-start: 1px solid var(--cd-linie-2);
  vertical-align: top;
  font-size: var(--cd-gr-klein);
  line-height: var(--cd-zeile-text);
  color: var(--cd-text-2);
}

.cd-tab__zellentext { display: block; }

.cd-tab__wert {
  display: block;
  font-family: var(--cd-schrift-mono);
  font-size: var(--cd-gr-klein);
  letter-spacing: .06em;
  color: var(--cd-tinte);
}

/* Die Empfehlungsspalte der Ampel traegt Gewicht statt Farbe. */
.cd-tab__zelle--empfehlung { font-weight: 600; color: var(--cd-tinte); }

/* Hervorgehobene Zelle: Toenung UND halbfett — nie Farbe allein. */
.cd-tab__zelle--hervor {
  background: var(--cd-flaeche-2);
  font-weight: 600;
  color: var(--cd-tinte);
}

/* Der Befund der dreispaltigen Pruef-Tabelle bekommt einen
   Winkel vorangestellt. Gezeichnet aus Kanten statt gesetzt aus
   einer Symbolschrift — ein Zeichen aus dem Privatnutzungs-
   bereich landet sonst im vorgelesenen Text. */
.cd-tab--dreispaltig .cd-tab__zelle--befund .cd-tab__zellentext {
  position: relative;
  padding-inline-start: var(--cd-a5);
}
.cd-tab--dreispaltig .cd-tab__zelle--befund .cd-tab__zellentext::before {
  content: "";
  position: absolute;
  inset-block-start: .5em;
  inset-inline-start: 2px;
  inline-size: 6px;
  block-size: 6px;
  border-block-start: 2px solid var(--cd-rot);
  border-inline-end: 2px solid var(--cd-rot);
  transform: rotate(45deg);
}

/* ------------------------------------------------------------
   Balken
   ------------------------------------------------------------
   Der Balken ist Zier — der Wert steht als Text daneben und wird
   vorgelesen. Zwei Farben unterscheiden die Spalten; die
   Zuordnung traegt aber der Spaltenkopf und nicht die Farbe.
   ------------------------------------------------------------ */
.cd-tab__balken {
  display: block;
  position: relative;
  block-size: 7px;
  margin-block-end: var(--cd-a3);
  background: var(--cd-flaeche-3);
  overflow: hidden;
}
.cd-tab__balkenwert {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  display: block;
  background: var(--cd-rot);
}
.cd-tab__balken--b .cd-tab__balkenwert { background: var(--cd-dunkel); }

/* ------------------------------------------------------------
   Ampel
   ------------------------------------------------------------
   Die Farbe steht auf der Kante der Zeile. Die Lage selbst steht
   zusaetzlich als Text im Kriterium — sichtbar bleibt sie ueber
   Empfehlungsspalte und Kurzwert.
   ------------------------------------------------------------ */
.cd-tab__zeile--rot .cd-tab__kriterium {
  border-inline-start-color: var(--cd-rot);
  color: var(--cd-rot-tief);
}
.cd-tab__zeile--rot .cd-tab__zelle--empfehlung { color: var(--cd-rot-tief); }

.cd-tab__zeile--gelb .cd-tab__kriterium { border-inline-start-color: var(--cd-text-schwach); }
.cd-tab__zeile--gruen .cd-tab__kriterium { border-inline-start-color: var(--cd-dunkel); }
.cd-tab__zeile--neutral .cd-tab__kriterium { border-inline-start-color: var(--cd-linie); }

/* ------------------------------------------------------------
   Fussleiste im Rahmen
   ------------------------------------------------------------ */
.cd-tab__fussleiste {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--cd-a6);
  flex-wrap: wrap;
  padding: var(--cd-a5);
  border-block-start: 1px solid var(--cd-linie-2);
  background: var(--cd-flaeche-1);
}
.cd-tab__fussleistentext {
  flex: 1 1 22rem;
  min-inline-size: 0;
  font-size: var(--cd-gr-klein);
  color: var(--cd-text-3);
}

/* ------------------------------------------------------------
   Fussnote unter der Tabelle
   ------------------------------------------------------------ */
.cd-tab__fussnote {
  margin-block-start: var(--cd-a4);
  max-inline-size: 80ch;
  font-size: var(--cd-gr-klein);
  color: var(--cd-text-3);
}
.cd-tab__fussnote a { text-decoration: underline; text-underline-offset: .18em; }

/* Die Spaltenbeschriftung je Zelle steht nur im Umbruch. */
.cd-tab__minikopf { display: none; }

/* ============================================================
   Umbrueche
   ============================================================
   1100  Kopf mit Bild bricht um
    760  die Tabelle wird zu Bloecken
   ============================================================ */
@media (max-width: 1100px) {
  .cd-tab__kopf--mitbild {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--cd-a6);
  }
  .cd-tab__bild { justify-self: start; }

  .cd-tab__kriterium,
  .cd-tab__zelle,
  .cd-tab__spaltenkopf { padding: var(--cd-a4); }
}

@media (max-width: 760px) {
  /* Die Rollen im Markup halten die Tabellensemantik aufrecht,
     waehrend die Darstellung auf Bloecke umschaltet. */
  .cd-tab__tabelle,
  .cd-tab__tabelle tbody,
  .cd-tab__tabelle tr,
  .cd-tab__tabelle th,
  .cd-tab__tabelle td { display: block; }

  /* Die Kopfzeile bleibt fuer Vorleseprogramme erhalten und
     verschwindet nur aus dem Bild — display: none wuerde sie
     auch aus der Ansage nehmen. */
  .cd-tab__tabelle thead {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .cd-tab__zeile {
    padding-block: var(--cd-a5);
    border-block-start: 1px solid var(--cd-linie-2);
  }

  .cd-tab__kriterium {
    padding: 0 var(--cd-a5) var(--cd-a3);
    border-inline-start-width: 0;
  }
  .cd-tab__zeile--rot .cd-tab__kriterium,
  .cd-tab__zeile--gelb .cd-tab__kriterium,
  .cd-tab__zeile--gruen .cd-tab__kriterium,
  .cd-tab__zeile--neutral .cd-tab__kriterium {
    border-inline-start-width: 3px;
    padding-inline-start: var(--cd-a4);
    margin-inline-start: var(--cd-a3);
  }

  .cd-tab__zelle {
    padding: var(--cd-a2) var(--cd-a5);
    border-inline-start: 0;
  }

  .cd-tab__minikopf {
    display: block;
    margin-block-end: var(--cd-a1);
    font-family: var(--cd-schrift-mono);
    font-size: var(--cd-gr-mikro);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--cd-text-3);
  }

  .cd-tab__zelle--hervor { background: none; }

  .cd-tab__fussleiste { padding: var(--cd-a5) var(--cd-a4); }
}