/* ============================================================
   cd_erklaergrafik — die grosse Zeichnung
   ============================================================
   Ueberschrift und Einleitung stehen in einer Lesespalte, die
   Zeichnung darunter ueber die volle Breite der Inhaltsspalte.

   Warum der Kopf schmal bleibt und die Grafik nicht: Eine
   Ueberschrift ueber 1280 px liest sich schlecht — eine Zeile
   mit dreissig Woertern findet den Anfang der naechsten nicht.
   Die Zeichnung dagegen lebt von der Breite: Vier Stationen
   nebeneinander brauchen sie.
   ============================================================ */

.cd-erklaer__kopf {
  margin-block-end: var(--cd-a7);
}

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

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

/* Der Rahmen traegt den Grund, nicht die Zeichnung selbst. Die
   Dateien sind durchsichtig — auf einer weissen Bahn stuenden
   sie sonst ohne jede Kante da. */
.cd-erklaer__rahmen {
  margin: 0;
  padding: var(--cd-a6);
  background: var(--cd-flaeche-2);
  border: 1px solid var(--cd-linie-2);
  border-radius: var(--cd-r-karte);
}

/* Auf getoentem oder dunklem Grund traegt die getoente Flaeche
   nicht mehr — dort steht die Zeichnung auf Weiss. */
.cd-erklaer.cd-auf-dunkel .cd-erklaer__rahmen,
.cd-erklaer.cd-auf-getoent .cd-erklaer__rahmen {
  background: var(--cd-weiss);
  border-color: var(--cd-linie);
}

/* WIDTH UND HEIGHT BLEIBEN AM BILD.
   f:image schreibt beide Werte aus der Datei; sie halten den
   Platz frei, bevor die Zeichnung da ist. Ohne sie springt die
   halbe Seite, sobald sie geladen ist (Layout-Shift). height:auto
   nimmt die feste Hoehe wieder heraus, sobald die Breite steht —
   das Verhaeltnis bleibt erhalten. */
.cd-erklaer__bild {
  display: block;
  inline-size: 100%;
  block-size: auto;
}

.cd-erklaer__unterschrift {
  margin-block-start: var(--cd-a4);
  font-size: var(--cd-gr-klein);
  color: var(--cd-text-3);
  text-align: center;
}

/* Am Handy wird die Luft um die Zeichnung knapper: Sie ist dort
   ohnehin das Groesste auf dem Bildschirm und braucht keinen
   breiten Rand, der sie zusaetzlich verkleinert. */
@media (max-width: 700px) {
  .cd-erklaer__rahmen {
    padding: var(--cd-a4);
  }
  .cd-erklaer__kopf {
    margin-block-end: var(--cd-a6);
  }
}

/* ------------------------------------------------------------
   Der Kasten um die Grafik   (cd_erklaer_rahmen)
   ------------------------------------------------------------
   HIER STAND EINE REGEL AUF EIN ATTRIBUT, DAS ES NIE GAB:
   [data-grund="keiner"] — die Grundfarbe kommt im Haus aber als
   KLASSE (cd-auf-getoent), nicht als Datenattribut. Die Regel war
   damit still wirkungslos. Jetzt entscheidet ein eigenes Feld.
   ------------------------------------------------------------ */

/* Weiss: fuer getoente und dunkle Bahnen, wo die getoente Flaeche
   nicht mehr traegt. */
.cd-erklaer[data-erklaerrahmen="weiss"] .cd-erklaer__rahmen {
  background: var(--cd-weiss);
  border-color: var(--cd-linie);
}

/* Ohne Kasten: die Zeichnung steht frei. Das Polster faellt mit —
   ein Innenabstand ohne Flaeche ist nur Leere. */
.cd-erklaer[data-erklaerrahmen="ohne"] .cd-erklaer__rahmen {
  padding: 0;
  background: none;
  border: 0;
}
/* Die Bildunterschrift ruecke ohne Kasten an den linken Rand:
   Mittig unter einer freistehenden Zeichnung sieht sie aus, als
   gehoerte sie zur Bahn und nicht zum Bild. */
.cd-erklaer[data-erklaerrahmen="ohne"] .cd-erklaer__unterschrift {
  text-align: start;
}


/* ------------------------------------------------------------
   Der geschwungene Pfeil in der leeren Kopfspalte
   ------------------------------------------------------------
   Er beginnt neben dem Beitext und zeigt nach unten auf die
   Zeichnung. Die Spitze steht ueber der letzten Station und
   damit ueber dem, worauf die Ueberschrift hinauslaeuft — der
   Anfrage. Sie bleibt oberhalb des weichen roten Kreises, den
   die Zeichnungen rechts oben tragen (gemessen: Spitze bei
   y 178, Kreis ab y 240).

   Grundzustand ist der fertige Pfeil. Die Bewegung kommt aus dem
   Auftrittssystem der Bahn (bahnen.css: .cd-bahn.cd-ein) und
   NIMMT ihn nur zurueck. Ohne Skript, ohne die Klasse
   html.cd-bewegung und bei abbestellter Bewegung steht er
   einfach da.
   ------------------------------------------------------------ */
.cd-erklaer__pfeil {
  justify-self: start;
  align-self: end;
  inline-size: 320px;
  max-inline-size: 100%;
  margin-block-end: var(--cd-a3);
  color: var(--cd-rot);
}
.cd-erklaer__pfeil svg {
  display: block;
  inline-size: 100%;
  block-size: auto;
}

/* Unter 900 px faellt die zweite Spalte weg (komponenten.css:142).
   Ein Pfeil, der dann unter dem Text stuende, zeigte auf nichts. */
@media (max-width: 900px) {
  .cd-erklaer__pfeil { display: none; }
}

/* Der Bogen zeichnet sich, sobald die Bahn ins Bild kommt. Die
   Strichfolge muss mindestens so lang sein wie der Pfad, sonst
   bleibt ein Rest stehen, der wie ein zweiter Strich aussieht.
   Gemessen: 322 px Pfadlaenge, gesetzt 340. */
html.cd-bewegung .cd-erklaer__pfeilBogen {
  stroke-dasharray: 340;
  stroke-dashoffset: 340;
  transition: stroke-dashoffset 1.1s cubic-bezier(.22, 1, .36, 1);
}
html.cd-bewegung .cd-erklaer.cd-ein .cd-erklaer__pfeilBogen {
  stroke-dashoffset: 0;
}

/* Die Spitze kommt erst, wenn der Bogen fast angekommen ist. */
html.cd-bewegung .cd-erklaer__pfeilSpitze {
  opacity: 0;
  transition: opacity .35s ease-out .85s;
}
html.cd-bewegung .cd-erklaer.cd-ein .cd-erklaer__pfeilSpitze {
  opacity: 1;
}


/* ------------------------------------------------------------
   Auf dunklem Grund
   ------------------------------------------------------------
   Der Grund selbst, die Ueberschrift und die Verweise kommen aus
   komponenten.css (.cd-auf-dunkel). Was dort nicht bekannt sein
   kann, sind die drei eigenen Textrollen dieser Bahn — sie
   stehen auf Tokens, die fuer HELLEN Grund gemacht sind:

     __beitext        --cd-text-2   auf --cd-dunkel   1,9:1
     __unterschrift   --cd-text-3   auf --cd-dunkel   1,4:1
     __pfeil          --cd-rot      auf --cd-dunkel   2,9:1

   Alle drei fallen durch 1.4.3. Ohne die Regeln hier saehe die
   Bahn auf den ersten Blick richtig aus — Ueberschrift weiss,
   Zeichnung auf Weiss — und genau die Zeilen dazwischen waeren
   fast unlesbar. Das ist die Art Fehler, die beim Umschalten der
   Grundfarbe entsteht und niemandem auffaellt, der die Seite
   vorher hell kannte.

   Die Zeichnung selbst braucht nichts: Ihr Rahmen steht weiter
   oben schon auf Weiss, sobald die Bahn dunkel ist.
   ------------------------------------------------------------ */
.cd-erklaer.cd-auf-dunkel .cd-erklaer__beitext {
  color: var(--cd-text-auf-dunkel);
}

/* Die Bildunterschrift NICHT pauschal aufhellen. Sie steht im
   Quelltext INNERHALB der figure — und die traegt auf dunklem
   Grund Weiss (Regel weiter oben). Ein helles Grau darauf ergibt
   2,45:1; gemessen, nicht geschaetzt: genau dieser Griff ist hier
   erst danebengegangen. Nur wenn die Redaktion den Kasten ganz
   abwaehlt, steht die Zeile wirklich auf der dunklen Bahn. */
.cd-erklaer.cd-auf-dunkel[data-erklaerrahmen="ohne"] .cd-erklaer__unterschrift {
  color: var(--cd-text-auf-dunkel-2);
}

.cd-erklaer.cd-auf-dunkel .cd-erklaer__pfeil {
  color: var(--cd-rot-auf-dunkel);
}


/* ============================================================
   Bauformen "schnittstelle" und "datenblatt"
   ============================================================
   Gebaut am 24.08.2026 auf einen Einwand hin: Extension und
   Schnittstelle sind ZWEI Dinge, und das soll man sehen. Die
   Bauform steht am Element (Feld cd_layout), die Angaben kommen
   aus cd_chips.

   Die Farben stehen zweimal: einmal fuer helle Bahnen, einmal
   unter .cd-auf-dunkel. Ein einzelner Satz mit Mischfarben
   funktionierte auf einem der beiden Gruende nicht — das ist im
   Haus schon einmal aufgeschlagen.
   ============================================================ */

/* --- Kundenzeile -------------------------------------------
   Sie ersetzt die Reiterleiste: Das Logo steht bei SEINEM
   Beispiel und nicht in einer Leiste ueber beiden. */
.cd-erklaer__kunde {
  display: flex;
  align-items: center;
  gap: var(--cd-a4);
  margin: 0 0 var(--cd-a6);
}
.cd-erklaer__kundelogo {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  block-size: 48px;
  padding: 8px 12px;
  background: var(--cd-weiss);
  border-radius: var(--cd-r-feld);
}
/* Auf hellem Grund braucht die Plakette eine Kante, sonst
   schwimmt sie. Auf dunklem traegt der Wechsel selbst. */
.cd-erklaer__kundelogo { border: 1px solid var(--cd-linie-2); }
.cd-auf-dunkel .cd-erklaer__kundelogo { border-color: transparent; }
.cd-erklaer__kundelogo img { block-size: 100%; inline-size: auto; }
.cd-erklaer__kundename { color: var(--cd-text-2); font-size: var(--cd-gr-klein); }
.cd-erklaer__kundename b {
  display: block;
  color: var(--cd-tinte);
  font-size: var(--cd-gr-basis);
  font-weight: 600;
}
.cd-auf-dunkel .cd-erklaer__kundename { color: var(--cd-text-auf-dunkel); }
.cd-auf-dunkel .cd-erklaer__kundename b { color: var(--cd-weiss); }

/* --- Die zwei Seiten ---------------------------------------
   Am Rechner nebeneinander mit senkrechter Naht, am Handy
   untereinander mit waagerechter. Kein gap: Die Naht soll eine
   LINIE sein, keine Lücke. */
.cd-erklaer__seiten {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  border: 1px solid var(--cd-linie-2);
  background: var(--cd-flaeche-1);
}
.cd-auf-dunkel .cd-erklaer__seiten {
  border-color: var(--cd-dunkel-3);
  background: var(--cd-dunkel);
}
@media (min-width: 901px) {
  .cd-erklaer__seiten { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

.cd-erklaer__seite { padding: var(--cd-a6); }
.cd-erklaer__seite + .cd-erklaer__seite { border-block-start: 1px solid var(--cd-linie-2); }
.cd-auf-dunkel .cd-erklaer__seite + .cd-erklaer__seite { border-block-start-color: var(--cd-dunkel-3); }
@media (min-width: 901px) {
  .cd-erklaer__seite + .cd-erklaer__seite {
    border-block-start: 0;
    border-inline-start: 1px solid var(--cd-linie-2);
  }
  .cd-auf-dunkel .cd-erklaer__seite + .cd-erklaer__seite {
    border-inline-start-color: var(--cd-dunkel-3);
  }
}

.cd-erklaer__marke {
  font-family: var(--cd-schrift-mono);
  font-size: var(--cd-gr-mikro);
  letter-spacing: .14em;
  text-transform: uppercase;
  margin: 0 0 var(--cd-a5);
  color: var(--cd-text-2);
}
.cd-auf-dunkel .cd-erklaer__marke { color: var(--cd-text-auf-dunkel-2); }
/* Die Schnittstelle traegt Rot, die Extension nicht. Rot ist im
   Haus die Handlung — und die Schnittstelle ist die Seite, die
   etwas TUT. */
.cd-erklaer__seite--aussen .cd-erklaer__marke { color: var(--cd-rot); }
.cd-auf-dunkel .cd-erklaer__seite--aussen .cd-erklaer__marke { color: var(--cd-rot-auf-dunkel); }

/* --- Punkte der Extension ---------------------------------- */
.cd-erklaer__punkte { display: grid; gap: var(--cd-a3); margin: 0; padding: 0; list-style: none; }
.cd-erklaer__punkte li {
  position: relative;
  padding-inline-start: 22px;
  color: var(--cd-text-2);
}
.cd-auf-dunkel .cd-erklaer__punkte li { color: var(--cd-text-auf-dunkel); }
.cd-erklaer__punkte li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: .62em;
  inline-size: 10px;
  block-size: 2px;
  background: currentColor;
  opacity: .55;
}

/* --- Wertepaare der Schnittstelle --------------------------
   Marke UEBER dem Wert. Nebeneinander braeche ein langer Wert in
   einer halben Spalte mitten im Wort. */
.cd-erklaer__daten { margin: 0; display: grid; gap: var(--cd-a4); }
.cd-erklaer__daten > div {
  display: grid;
  gap: 2px;
  padding-block-end: var(--cd-a4);
  border-block-end: 1px solid var(--cd-linie-2);
}
.cd-auf-dunkel .cd-erklaer__daten > div { border-block-end-color: var(--cd-dunkel-3); }
.cd-erklaer__daten > div:last-child { padding-block-end: 0; border-block-end: 0; }
.cd-erklaer__daten dt {
  font-family: var(--cd-schrift-mono);
  font-size: var(--cd-gr-mikro);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--cd-text-2);
}
.cd-auf-dunkel .cd-erklaer__daten dt { color: var(--cd-text-auf-dunkel-2); }
.cd-erklaer__daten dd { margin: 0; color: var(--cd-tinte); font-weight: 500; }
.cd-auf-dunkel .cd-erklaer__daten dd { color: var(--cd-weiss); }

/* --- Die Naht ----------------------------------------------
   Sie traegt einen Text, sonst waere sie nur ein Strich. Der Text
   ist die Aussage: die zwei Seiten liegen im selben Projekt. */
.cd-erklaer__naht {
  display: flex;
  align-items: center;
  gap: var(--cd-a3);
  margin: var(--cd-a4) 0 0;
  font-family: var(--cd-schrift-mono);
  font-size: var(--cd-gr-mikro);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--cd-text-2);
}
.cd-auf-dunkel .cd-erklaer__naht { color: var(--cd-text-auf-dunkel-2); }
.cd-erklaer__naht::before,
.cd-erklaer__naht::after {
  content: "";
  flex: 1 1 auto;
  block-size: 1px;
  background: var(--cd-linie-2);
}
.cd-auf-dunkel .cd-erklaer__naht::before,
.cd-auf-dunkel .cd-erklaer__naht::after { background: var(--cd-dunkel-3); }

/* --- Bauform "datenblatt": Zeichnung und Angaben nebeneinander --- */
.cd-erklaer__nebeneinander {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--cd-a6);
  align-items: start;
}
@media (min-width: 901px) {
  .cd-erklaer__nebeneinander { grid-template-columns: minmax(0, 62fr) minmax(0, 38fr); }
}
.cd-erklaer__nebeneinander .cd-erklaer__seite {
  padding: var(--cd-a6);
  border: 1px solid var(--cd-linie-2);
  background: var(--cd-flaeche-1);
}
.cd-auf-dunkel .cd-erklaer__nebeneinander .cd-erklaer__seite {
  border-color: var(--cd-dunkel-3);
  background: var(--cd-dunkel);
}

/* --- Nachsatz ---------------------------------------------- */
.cd-erklaer__nachsatz {
  margin-block-start: var(--cd-a6);
  max-inline-size: 42rem;
  color: var(--cd-text-2);
}
.cd-auf-dunkel .cd-erklaer__nachsatz { color: var(--cd-text-auf-dunkel); }

/* In den zwei neuen Bauformen steht die Zeichnung zwischen zwei
   Blöcken und braucht oben Luft. */
.cd-erklaer--schnittstelle .cd-erklaer__rahmen,
.cd-erklaer--datenblatt .cd-erklaer__rahmen { margin-block-start: var(--cd-a7); }
.cd-erklaer--datenblatt .cd-erklaer__rahmen { margin-block-start: 0; }