/* ============================================================
   cd_schnittstellen — Schnittstellen als Folien einer Spur
   ============================================================
   Reiter mit Kundenlogo oben, darunter die Spur. Das Schieben
   macht CSS allein (overflow-x plus scroll-snap) — die Folien sind
   also auch ohne Skript alle erreichbar. Das Skript ergaenzt nur
   die Bedienung: Pfeile, Zaehler und das Mitfuehren der Reiter.

   Die Farben stehen zweimal: einmal fuer helle Bahnen, einmal
   unter .cd-auf-dunkel. Ein Satz mit Mischfarben funktioniert auf
   einem der beiden Gruende nie.
   ============================================================ */

.cd-sstband__kopf { max-inline-size: 46rem; margin-block-end: var(--cd-a6); }
.cd-sstband__titel { margin-block-start: var(--cd-a3); }
.cd-sstband__beitext { margin-block-start: var(--cd-a4); color: var(--cd-text-2); }
.cd-auf-dunkel .cd-sstband__beitext { color: var(--cd-text-auf-dunkel); }

/* ------------------------------------------------------------
   Die Reiterleiste
   ------------------------------------------------------------
   Es sind KEINE Reiter im Sinne von WAI-ARIA, sondern Sprungziele
   in die Spur — deshalb <a href="#…"> und aria-current statt
   role="tab". Ohne Skript springt der Browser hin, mit Skript
   schiebt die Spur weich.

   Am Handy laeuft die Leiste selbst waagerecht: Bei drei oder mehr
   Kunden passen die Plaketten sonst nicht nebeneinander, und
   untereinander lesen sie sich als Liste statt als Schalter.
   ------------------------------------------------------------ */
.cd-sstband__reiter {
  display: flex;
  gap: var(--cd-a3);
  margin-block-end: var(--cd-a5);
  overflow-x: auto;
  scrollbar-width: none;
  padding-block-end: 2px;
}
.cd-sstband__reiter::-webkit-scrollbar { display: none; }

.cd-sstband__reiter-knopf {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: var(--cd-a4);
  padding: var(--cd-a3) var(--cd-a4);
  border: 1px solid var(--cd-linie-2);
  border-radius: var(--cd-r-feld);
  background: var(--cd-weiss);
  text-decoration: none;
  color: inherit;
  transition: border-color var(--cd-zeit) ease, background var(--cd-zeit) ease;
}
.cd-auf-dunkel .cd-sstband__reiter-knopf {
  border-color: var(--cd-dunkel-3);
  background: var(--cd-dunkel);
}
.cd-sstband__reiter-knopf:hover { border-color: var(--cd-rot); }

/* Der gewaehlte Reiter traegt eine rote Kante UND einen kraeftigeren
   Rahmen — Farbe allein waere nach WCAG 1.4.1 kein zulaessiger
   Traeger. */
.cd-sstband__reiter-knopf--auf {
  border-color: var(--cd-rot);
  box-shadow: inset 0 -3px 0 var(--cd-rot);
}

/* Die Plakette ist weiss, weil Kundenlogos fuer weissen Grund
   gezeichnet sind. Ein dunkelgraues Logo auf dunklem Grund waere
   unsichtbar, und eine fremde Marke aufzuhellen ist keine Loesung. */
.cd-sstband__reiter-logo {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: 7.5rem;
  min-inline-size: 0;
  block-size: 40px;
  padding: 4px 8px;
  background: var(--cd-weiss);
  border-radius: var(--cd-r-feld);
}
.cd-sstband__reiter-logo img { max-inline-size: 100%; max-block-size: 100%; }

.cd-sstband__reiter-text { display: grid; gap: 1px; text-align: start; }
.cd-sstband__reiter-text b { font-weight: 600; font-size: var(--cd-gr-klein); }
.cd-sstband__reiter-text span {
  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-sstband__reiter-text span { color: var(--cd-text-auf-dunkel-2); }

/* ------------------------------------------------------------
   Die Spur
   ------------------------------------------------------------
   Eine Folie fuellt die Spur ganz. Kein Anschnitt: Die Folien sind
   hoch und inhaltsreich; ein angeschnittener Nachbar daneben waere
   Unruhe, keine Einladung. Dass es weitergeht, sagen die Reiter.
   ------------------------------------------------------------ */
.cd-sstband__spur {
  display: flex;
  gap: var(--cd-a6);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  /* position:relative, weil sonst absolut gesetzte Kinder einer
     Folie ihren Bezug ausserhalb der Spur suchen und die Seite
     aufschieben. */
  position: relative;
  min-inline-size: 0;
}
.cd-sstband__spur::-webkit-scrollbar { display: none; }

.cd-sstband__folie {
  flex: 0 0 100%;
  scroll-snap-align: start;
  min-inline-size: 0;
}

.cd-sstband__folienkopf { max-inline-size: 46rem; margin-block-end: var(--cd-a6); }
.cd-sstband__folientitel { margin-block-start: var(--cd-a3); }
.cd-sstband__vorspann {
  margin-block-start: var(--cd-a4);
  color: var(--cd-text-2);
  max-inline-size: 40rem;
}
.cd-auf-dunkel .cd-sstband__vorspann { color: var(--cd-text-auf-dunkel); }

/* ------------------------------------------------------------
   Die zwei Seiten mit der Naht
   ------------------------------------------------------------
   Kein gap zwischen den Haelften: Die Naht soll eine LINIE sein,
   keine Luecke. Sie ist die Aussage — hier stossen zwei Dinge
   aneinander, die im selben Projekt liegen.
   ------------------------------------------------------------ */
.cd-sstband__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-sstband__seiten {
  border-color: var(--cd-dunkel-3);
  background: var(--cd-dunkel);
}
@media (min-width: 901px) {
  .cd-sstband__seiten { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

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

.cd-sstband__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-sstband__marke { color: var(--cd-text-auf-dunkel-2); }
/* Rot traegt die Seite, die etwas TUT. */
.cd-sstband__seite--aussen .cd-sstband__marke { color: var(--cd-rot); }
.cd-auf-dunkel .cd-sstband__seite--aussen .cd-sstband__marke { color: var(--cd-rot-auf-dunkel); }

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

/* Marke UEBER dem Wert — nebeneinander braeche ein langer Wert in
   einer halben Spalte mitten im Wort. */
.cd-sstband__daten { margin: 0; display: grid; gap: var(--cd-a4); }
.cd-sstband__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-sstband__daten > div { border-block-end-color: var(--cd-dunkel-3); }
.cd-sstband__daten > div:last-child { padding-block-end: 0; border-block-end: 0; }
.cd-sstband__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-sstband__daten dt { color: var(--cd-text-auf-dunkel-2); }
.cd-sstband__daten dd { margin: 0; color: var(--cd-tinte); font-weight: 500; }
.cd-auf-dunkel .cd-sstband__daten dd { color: var(--cd-weiss); }

.cd-sstband__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-sstband__naht { color: var(--cd-text-auf-dunkel-2); }
.cd-sstband__naht::before,
.cd-sstband__naht::after {
  content: "";
  flex: 1 1 auto;
  block-size: 1px;
  background: var(--cd-linie-2);
}
.cd-auf-dunkel .cd-sstband__naht::before,
.cd-auf-dunkel .cd-sstband__naht::after { background: var(--cd-dunkel-3); }

/* --- Zeichnung und Nachsatz -------------------------------- */
.cd-sstband__rahmen { margin: var(--cd-a7) 0 0; }
.cd-sstband__rahmen picture { display: block; }
.cd-sstband__bild { display: block; inline-size: 100%; block-size: auto; }
.cd-sstband__nachsatz {
  margin-block-start: var(--cd-a6);
  max-inline-size: 42rem;
  color: var(--cd-text-2);
}
.cd-auf-dunkel .cd-sstband__nachsatz { color: var(--cd-text-auf-dunkel); }

/* ------------------------------------------------------------
   Pfeile und Zaehler
   ------------------------------------------------------------
   hidden im Markup, das Skript nimmt es weg. Ein Bedienelement fuer
   eine Bedienung die es ohne Skript nicht gibt, waere ein leeres
   Versprechen.
   ------------------------------------------------------------ */
.cd-sstband__bedienung {
  display: flex;
  align-items: center;
  gap: var(--cd-a3);
  margin-block-start: var(--cd-a6);
}
.cd-sstband__bedienung[hidden] { display: none; }

.cd-sstband__pfeil {
  inline-size: 52px;
  block-size: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--cd-linie);
  border-radius: var(--cd-r-knopf);
  background: none;
  color: inherit;
  font-size: 20px;
  cursor: pointer;
  transition: border-color var(--cd-zeit) ease;
}
.cd-auf-dunkel .cd-sstband__pfeil { border-color: var(--cd-linie-auf-dunkel); }
.cd-sstband__pfeil:hover:not(:disabled) { border-color: var(--cd-rot); }
.cd-sstband__pfeil:disabled { opacity: .35; cursor: default; }

.cd-sstband__zaehler {
  margin: 0 0 0 auto;
  font-family: var(--cd-schrift-mono);
  font-size: var(--cd-gr-mikro);
  letter-spacing: .12em;
  color: var(--cd-text-2);
  font-variant-numeric: tabular-nums;
}
.cd-auf-dunkel .cd-sstband__zaehler { color: var(--cd-text-auf-dunkel-2); }

@media (max-width: 900px) {
  .cd-sstband__spur { gap: var(--cd-a5); }
  .cd-sstband__seite { padding: var(--cd-a5); }
  .cd-sstband__reiter-logo { inline-size: 6rem; block-size: 34px; }
}


/* ============================================================
   Bauform "nebeneinander" — Text links, Zeichnung rechts
   ============================================================
   Nur am Rechner. Darunter bleibt es beim Untereinander: In einer
   halben Spalte von 390 px waere weder fuer den Text noch fuer die
   Zeichnung Platz.

   Die Schwelle ist 1101 px und nicht 901: Bei 901 bekaeme die
   Zeichnung eine Spalte von rund 430 px, und die zwei Seiten
   darunter muessten sich 470 px teilen. Das ist beides zu wenig.
   Erst ab 1101 px traegt die Teilung.
   ============================================================ */
@media (min-width: 1101px) {
  .cd-sstband--neben .cd-sstband__folie {
    display: grid;
    grid-template-columns: minmax(0, 52fr) minmax(0, 48fr);
    column-gap: var(--cd-a8);
    align-items: start;
  }
  .cd-sstband--neben .cd-sstband__folienkopf,
  .cd-sstband--neben .cd-sstband__seiten,
  .cd-sstband--neben .cd-sstband__naht { grid-column: 1; }

  /* Die Zeichnung laeuft ueber alle drei Zeilen der linken Spalte
     und steht darin mittig — sonst klebte sie oben und liesse
     unten eine Grube. */
  .cd-sstband--neben .cd-sstband__rahmen {
    grid-column: 2;
    grid-row: 1 / span 3;
    margin-block-start: 0;
    align-self: center;
  }
  .cd-sstband--neben .cd-sstband__nachsatz { grid-column: 1 / -1; }

  /* ZWEI SPALTEN IN EINER HALBEN SPALTE WAEREN VIER.
     Die zwei Seiten stehen hier wieder untereinander; die Naht
     zwischen ihnen wird dadurch waagerecht statt senkrecht. Die
     Aussage bleibt dieselbe. */
  .cd-sstband--neben .cd-sstband__seiten { grid-template-columns: minmax(0, 1fr); }
  .cd-sstband--neben .cd-sstband__seite + .cd-sstband__seite {
    border-block-start: 1px solid var(--cd-linie-2);
    border-inline-start: 0;
  }
  .cd-auf-dunkel.cd-sstband--neben .cd-sstband__seite + .cd-sstband__seite {
    border-block-start-color: var(--cd-dunkel-3);
  }
}


/* ============================================================
   Bauform "auf weisser Karte" — der Reiter haengt an der Karte
   ============================================================
   Der Folieninhalt steht auf einer hellen Karte, und der gewaehlte
   Reiter verliert seine untere Kante: Er wird zur Lasche dieser
   Karte statt zu einem Knopf darueber. Erst damit SIEHT die
   Reiterleiste aus wie eine Reiterleiste.

   ACHTUNG - HELLE INSEL IN DUNKLER BAHN.
   Steht die Bahn auf dunkel, gelten ALLE Nachfahren-Regeln von
   .cd-auf-dunkel innerhalb der weissen Karte weiter: Ueberschriften
   weiss, Verweise weiss, Kicker in aufgehelltem Rot, dazu die
   eigenen Regeln dieser Datei. Vererbung hilft dagegen nicht - eine
   Nachfahren-Regel schlaegt sie immer.

   Deshalb steht unten jede einzelne davon noch einmal, mit dem
   Kartenselektor davor. Wer hier etwas ergaenzt, muss die
   Gegenregel mit ergaenzen; sonst steht Weiss auf Weiss, und zwar
   still.
   ============================================================ */

.cd-sstband--weiss .cd-sstband__folie,
.cd-auf-dunkel.cd-sstband--weiss .cd-sstband__folie {
  background: var(--cd-weiss);
  border: 1px solid var(--cd-linie-2);
  padding: var(--cd-a7);
  /* DIE GRUNDFARBE MUSS MIT. Ohne sie erbt die Karte weiter
     --cd-text-auf-dunkel von der Bahn: hellgrau auf Weiss, gemessen
     1,8 : 1. Die benannten Teile darunter haben zwar ihre eigene
     Regel — aber jeder Absatz, der spaeter dazukommt und keine hat,
     waere unlesbar. */
  color: var(--cd-text-2);
}
.cd-sstband--weiss .cd-sstband__seiten,
.cd-auf-dunkel.cd-sstband--weiss .cd-sstband__seiten { color: var(--cd-text-2); }
@media (max-width: 900px) {
  .cd-sstband--weiss .cd-sstband__folie { padding: var(--cd-a5); }
}

/* Der gewaehlte Reiter schliesst an die Karte an: gleiche Flaeche,
   gleiche Kante, und unten ohne Rand. Der 1-px-Versatz nach unten
   schiebt ihn ueber die Kante der Karte - sonst bliebe dort eine
   Haarlinie stehen und der Anschluss waere sichtbar unterbrochen. */
.cd-sstband--weiss .cd-sstband__reiter { margin-block-end: 0; padding-block-end: 0; }
.cd-sstband--weiss .cd-sstband__reiter-knopf {
  background: transparent;
  border-color: transparent;
  border-end-start-radius: 0;
  border-end-end-radius: 0;
  position: relative;
  inset-block-end: -1px;
}
.cd-auf-dunkel.cd-sstband--weiss .cd-sstband__reiter-knopf {
  background: transparent;
  border-color: transparent;
}
.cd-sstband--weiss .cd-sstband__reiter-knopf--auf {
  background: var(--cd-weiss);
  border-color: var(--cd-linie-2);
  border-block-end-color: var(--cd-weiss);
  box-shadow: inset 0 3px 0 var(--cd-rot);
}
/* Die Flaeche MUSS hier noch einmal stehen: Die Regel weiter oben,
   die alle Reiter durchsichtig macht, traegt drei Klassen und
   schlaegt die zweiklassige Regel des gewaehlten Reiters. Gemessen:
   Der aktive Reiter blieb durchsichtig und der Anschluss an die
   Karte war nicht da. */
.cd-auf-dunkel.cd-sstband--weiss .cd-sstband__reiter-knopf--auf {
  background: var(--cd-weiss);
  border-color: var(--cd-linie-2);
  border-block-end-color: var(--cd-weiss);
}

/* --- Die Ruecknahmen fuer die helle Insel -------------------- */
.cd-sstband--weiss .cd-sstband__folientitel,
.cd-auf-dunkel.cd-sstband--weiss .cd-sstband__folientitel { color: var(--cd-tinte); }
.cd-sstband--weiss .cd-sstband__folienkicker,
.cd-auf-dunkel.cd-sstband--weiss .cd-sstband__folienkicker { color: var(--cd-rot); }
.cd-sstband--weiss .cd-sstband__vorspann,
.cd-auf-dunkel.cd-sstband--weiss .cd-sstband__vorspann { color: var(--cd-text-2); }
.cd-sstband--weiss .cd-sstband__nachsatz,
.cd-auf-dunkel.cd-sstband--weiss .cd-sstband__nachsatz { color: var(--cd-text-2); }

.cd-sstband--weiss .cd-sstband__seiten,
.cd-auf-dunkel.cd-sstband--weiss .cd-sstband__seiten {
  border-color: var(--cd-linie-2);
  background: var(--cd-flaeche-1);
}
.cd-sstband--weiss .cd-sstband__seite + .cd-sstband__seite,
.cd-auf-dunkel.cd-sstband--weiss .cd-sstband__seite + .cd-sstband__seite {
  border-block-start-color: var(--cd-linie-2);
}
@media (min-width: 901px) {
  .cd-sstband--weiss .cd-sstband__seite + .cd-sstband__seite,
  .cd-auf-dunkel.cd-sstband--weiss .cd-sstband__seite + .cd-sstband__seite {
    border-inline-start-color: var(--cd-linie-2);
  }
}
.cd-sstband--weiss .cd-sstband__marke,
.cd-auf-dunkel.cd-sstband--weiss .cd-sstband__marke { color: var(--cd-text-2); }
.cd-sstband--weiss .cd-sstband__seite--aussen .cd-sstband__marke,
.cd-auf-dunkel.cd-sstband--weiss .cd-sstband__seite--aussen .cd-sstband__marke { color: var(--cd-rot); }
.cd-sstband--weiss .cd-sstband__punkte li,
.cd-auf-dunkel.cd-sstband--weiss .cd-sstband__punkte li { color: var(--cd-text-2); }
.cd-sstband--weiss .cd-sstband__daten > div,
.cd-auf-dunkel.cd-sstband--weiss .cd-sstband__daten > div { border-block-end-color: var(--cd-linie-2); }
.cd-sstband--weiss .cd-sstband__daten dt,
.cd-auf-dunkel.cd-sstband--weiss .cd-sstband__daten dt { color: var(--cd-text-2); }
.cd-sstband--weiss .cd-sstband__daten dd,
.cd-auf-dunkel.cd-sstband--weiss .cd-sstband__daten dd { color: var(--cd-tinte); }
.cd-sstband--weiss .cd-sstband__naht,
.cd-auf-dunkel.cd-sstband--weiss .cd-sstband__naht { color: var(--cd-text-2); }
.cd-sstband--weiss .cd-sstband__naht::before,
.cd-sstband--weiss .cd-sstband__naht::after,
.cd-auf-dunkel.cd-sstband--weiss .cd-sstband__naht::before,
.cd-auf-dunkel.cd-sstband--weiss .cd-sstband__naht::after { background: var(--cd-linie-2); }

/* Die Spur bekommt oben Luft fuer den angeschlossenen Reiter -
   ohne sie klebt die Karte an der Leiste. */
.cd-sstband--weiss .cd-sstband__spur { padding-block-start: 0; }

/* DER GEWAEHLTE REITER IST SELBST EINE HELLE INSEL.
   Er traegt in dieser Bauform eine weisse Flaeche — die Schrift
   darin kam aber weiterhin aus `.cd-auf-dunkel a { color: weiss }`.
   Gemessen: Firmenname weiss auf weiss, 1,0 : 1. Die Zeile darunter
   stand auf #93A9B4, also 2,2 : 1.

   Die nicht gewaehlten Reiter bleiben hell: Sie stehen weiterhin auf
   dem dunklen Grund der Bahn und sind dort richtig. */
.cd-auf-dunkel.cd-sstband--weiss .cd-sstband__reiter-knopf--auf,
.cd-sstband--weiss .cd-sstband__reiter-knopf--auf { color: var(--cd-tinte); }
.cd-auf-dunkel.cd-sstband--weiss .cd-sstband__reiter-knopf--auf .cd-sstband__reiter-text b,
.cd-sstband--weiss .cd-sstband__reiter-knopf--auf .cd-sstband__reiter-text b { color: var(--cd-tinte); }
.cd-auf-dunkel.cd-sstband--weiss .cd-sstband__reiter-knopf--auf .cd-sstband__reiter-text span,
.cd-sstband--weiss .cd-sstband__reiter-knopf--auf .cd-sstband__reiter-text span { color: var(--cd-text-2); }