/* ============================================================
   cd_aussagenband — Aussagenband
   ============================================================
   Vier Bauformen aus einem Markup:
     saetze       ein Satz je Kachel mit vorangestelltem Pfeil
     wenndann     Bedingung oben, Antwort darunter
     kacheln      Titel und Satz
     schlagworte  Chipreihe

   Das Band ist bewusst schmal: die Kindsaetze tragen nur Text.
   Es gibt deshalb weder Symbolkachel noch Bild noch Weiterlink —
   was hier fehlt, fehlt mit Absicht.

   Zwei Regeln wie ueberall in den Bahnen:
   - minmax(0, 1fr) statt 1fr. 1fr meint minmax(auto, 1fr) und
     sprengt die Spalte, sobald ein langes Wort darin steht.
   - Kein !important.

   Die Spaltenzahl kommt als --cd-spalten aus der Vorlage: sie
   stammt entweder aus dem Feld Spalten oder aus der Anzahl der
   Aussagen und laesst sich deshalb nicht im Stylesheet festlegen.
   ============================================================ */

.cd-aussagenband {
  --cd-aussage-linie: var(--cd-linie-2);
  --cd-aussage-flaeche: var(--cd-weiss);
}

.cd-aussagenband.cd-auf-dunkel {
  --cd-aussage-linie: var(--cd-dunkel-3);
  --cd-aussage-flaeche: var(--cd-dunkel-2);
}

/* ------------------------------------------------------------
   Kopf
   ------------------------------------------------------------
   Kicker links, Einleitung rechts, beide auf einer Grundlinie.
   Bricht um, sobald der Platz eng wird — das Band traegt hier
   keine grosse Ueberschrift, sondern nur eine Zeile.
   ------------------------------------------------------------ */
.cd-aussagenband__kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--cd-a4) var(--cd-a7);
  margin-block-end: var(--cd-a6);
}

.cd-aussagenband__kopftext .cd-kicker { margin-block-end: 0; }

/* Steht die Ueberschrift sichtbar da, braucht sie Luft zum
   Kicker. Ist sie versteckt (cd-nurlesen), entfaellt der Abstand
   von selbst — das Element nimmt dann keinen Platz ein. */
.cd-aussagenband__titel {
  margin-block-start: var(--cd-a3);
  font-family: var(--cd-schrift-display);
  font-size: var(--cd-gr-h3);
  font-weight: 700;
  line-height: var(--cd-zeile-kopf);
  letter-spacing: -.024em;
  color: var(--cd-tinte);
}

.cd-aussagenband__einleitung {
  max-inline-size: 46ch;
  font-size: var(--cd-gr-text);
  line-height: 1.55;
  color: var(--cd-text-3);
}
.cd-auf-dunkel .cd-aussagenband__einleitung { color: var(--cd-text-auf-dunkel-2); }

/* ------------------------------------------------------------
   Die Liste
   ------------------------------------------------------------
   Das Rastergitter entsteht aus einem 2 px breiten Spalt ueber
   einer eingefaerbten Flaeche — nicht aus Rahmen an den Kacheln.
   Rahmen ergaeben an jeder Innenkante eine doppelte Linie.
   ------------------------------------------------------------ */
.cd-aussagenband__liste {
  display: grid;
  grid-template-columns: repeat(var(--cd-spalten, 4), minmax(0, 1fr));
  /* 2 px Spalt: die Trennlinie des Rasters. Kein Abstandstoken —
     das hier ist eine Linienstaerke und keine Luft. */
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
  background: var(--cd-aussage-linie);
  border: 1px solid var(--cd-aussage-linie);
}

.cd-aussagenband__punkt {
  display: flex;
  flex-direction: column;
  gap: var(--cd-a3);
  padding: var(--cd-a5) var(--cd-a5) var(--cd-a6);
  background: var(--cd-aussage-flaeche);
}

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

.cd-aussagenband__satzwort {
  font-weight: 600;
  color: var(--cd-tinte);
}
.cd-auf-dunkel .cd-aussagenband__satzwort { color: var(--cd-weiss); }

.cd-aussagenband__punkttitel {
  font-family: var(--cd-schrift-display);
  font-size: var(--cd-gr-gross);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -.015em;
  color: var(--cd-tinte);
}

/* Der Pfeil ist Zier: er steht im Markup mit aria-hidden und
   traegt hier nur Farbe und Laufweite. */
.cd-aussagenband__pfeil {
  font-family: var(--cd-schrift-mono);
  font-size: var(--cd-gr-text);
  line-height: 1;
  color: var(--cd-rot);
}
.cd-auf-dunkel .cd-aussagenband__pfeil { color: var(--cd-rot-auf-dunkel); }

/* ------------------------------------------------------------
   Bauform Wenn und Dann
   ------------------------------------------------------------
   Die Bedingung steht oben und bekommt eine Mindesthoehe, damit
   die Antworten aller Kacheln auf einer Linie beginnen.
   ------------------------------------------------------------ */
.cd-aussagenband--wenndann .cd-aussagenband__punkt {
  justify-content: space-between;
  padding: var(--cd-a5);
  background: var(--cd-flaeche-1);
}
.cd-auf-dunkel.cd-aussagenband--wenndann .cd-aussagenband__punkt {
  background: var(--cd-aussage-flaeche);
}

.cd-aussagenband__wenn {
  min-block-size: 3.2em;
  font-size: var(--cd-gr-text);
  line-height: 1.55;
  color: var(--cd-text-2);
}
.cd-auf-dunkel .cd-aussagenband__wenn { color: var(--cd-text-auf-dunkel); }

.cd-aussagenband__dann {
  display: flex;
  align-items: center;
  gap: var(--cd-a3);
  font-family: var(--cd-schrift-display);
  font-size: var(--cd-gr-h4);
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--cd-tinte);
}
.cd-auf-dunkel .cd-aussagenband__dann { color: var(--cd-weiss); }

/* ------------------------------------------------------------
   Bauform Schlagworte
   ------------------------------------------------------------
   Keine Kacheln, sondern eine umbrechende Reihe von Chips. Das
   Rastergitter entfaellt vollstaendig.
   ------------------------------------------------------------ */
.cd-aussagenband--schlagworte .cd-aussagenband__liste {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cd-a3);
  background: none;
  border: 0;
}

.cd-aussagenband--schlagworte .cd-aussagenband__punkt {
  padding: 0;
  background: none;
}

.cd-aussagenband__wort {
  font-family: var(--cd-schrift-mono);
  font-size: var(--cd-gr-klein);
  letter-spacing: .04em;
  color: var(--cd-tinte);
  background: var(--cd-weiss);
}
.cd-auf-dunkel .cd-aussagenband__wort {
  border-color: var(--cd-linie-auf-dunkel);
  background: var(--cd-aussage-flaeche);
  color: var(--cd-text-auf-dunkel);
}

/* ------------------------------------------------------------
   Fussnote
   ------------------------------------------------------------ */
.cd-aussagenband__fussnote {
  margin-block-start: var(--cd-a4);
  font-size: var(--cd-gr-klein);
  line-height: 1.6;
  color: var(--cd-text-3);
}
.cd-auf-dunkel .cd-aussagenband__fussnote { color: var(--cd-text-auf-dunkel-2); }

/* ------------------------------------------------------------
   Schmalere Bildschirme
   ------------------------------------------------------------
   Fuenf Saetze nebeneinander sind ab etwa 1100 px nicht mehr
   lesbar. Die Spaltenzahl aus der Vorlage gilt deshalb nur am
   grossen Schirm.
   ------------------------------------------------------------ */
@media (max-width: 1100px) {
  .cd-aussagenband__liste { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
  .cd-aussagenband__liste { grid-template-columns: minmax(0, 1fr); }
  .cd-aussagenband__wenn { min-block-size: 0; }
}