/* ============================================================
   cd_logoband — Kundenlogoband
   ============================================================
   Ein Laufband aus zwei gleichen Haelften. Die Bewegung schiebt die
   Spur um genau 50 Prozent nach links und springt dann zurueck —
   weil die zweite Haelfte in diesem Moment exakt dort steht, wo die
   erste begann, ist der Sprung unsichtbar.

   Der Anhalte-Knopf ist ein Kontrollkaestchen mit Beschriftung. Das
   ist kein Sparzwang, sondern Absicht: ein Band, das ohne
   JavaScript laeuft, aber nur mit JavaScript anhaelt, waere die
   schlechteste aller Fassungen (WCAG 2.2.2).

   prefers-reduced-motion sticht jede Backend-Einstellung. Ganz
   unten steht, was dann passiert — und zwar nicht "Band steht
   still" (dann waeren die hinteren Logos unerreichbar), sondern
   "Band bricht um".
   ============================================================ */

.cd-logoband {
  /* Grundfarbe fuer die auslaufenden Raender. Sie muss der Flaeche
     der Bahn entsprechen — sonst zeichnet sich der Schleier als
     heller Balken ab. */
  --cd-logoband-grund: var(--cd-weiss);
  --cd-logoband-dauer: 52s;
}
.cd-logoband.cd-auf-dunkel { --cd-logoband-grund: var(--cd-dunkel); }

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

.cd-logoband__kicker {
  color: var(--cd-text-3);
  letter-spacing: .16em;
}
.cd-auf-dunkel .cd-logoband__kicker { color: var(--cd-text-auf-dunkel-2); }

/* ------------------------------------------------------------
   Fenster und Spur
   ------------------------------------------------------------ */
.cd-logoband__fenster {
  position: relative;
  overflow: hidden;
  padding-block: var(--cd-a2);
}

.cd-logoband__lauf {
  display: flex;
  align-items: center;
  inline-size: max-content;
  animation: cdLogobandLauf var(--cd-logoband-dauer) linear infinite;
}

/* Zeigen haelt an — ABER NUR AUF WUNSCH.

   Bis zum 02.09.2026 galt die Regel fuer jedes Band. Das ist am
   Rechner eine freundliche Geste und am Tastgeraet gar nichts; vor
   allem sah ein Band, ueber dem der Zeiger zufaellig ruhte, aus wie
   stehengeblieben. Die Klasse kommt jetzt aus dem Feld
   cd_zeiger_haelt am Inhaltselement, Vorgabe aus.

   Der Anhalte-Knopf darunter bleibt davon unberuehrt — er ist die
   Zusage aus WCAG 2.2.2 und ersetzt diese Bequemlichkeit nicht. */
.cd-logoband--zeigerhalt .cd-logoband__fenster:hover .cd-logoband__lauf {
  animation-play-state: paused;
}

@keyframes cdLogobandLauf {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.cd-logoband__reihe {
  display: flex;
  align-items: center;
}

.cd-logoband__stueck {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: 150px;
  margin-inline-end: 64px;
}

/* Die Logos laufen entfaerbt und blass mit — sie sollen den Blick
   nicht vom Inhalt der Seite ziehen. Beim Zeigen kommen Farbe und
   Deckung zurueck. */
.cd-logoband__logo {
  display: block;
  max-inline-size: 100%;
  block-size: 42px;
  object-fit: contain;
  filter: grayscale(1);
  opacity: .6;
  transition: filter .3s ease, opacity .3s ease;
}
.cd-logoband__stueck:hover .cd-logoband__logo {
  filter: grayscale(0);
  opacity: 1;
}
/* Auf dunklem Grund braucht ein blasses Logo mehr Deckung — sonst
   verschwindet es in der Flaeche. */
.cd-auf-dunkel .cd-logoband__logo { opacity: .78; }

/* Nicht jedes Logo traegt die Abschwaechung
   ------------------------------------------------------------
   Die Entfaerbung oben ist gewollt und bleibt. Sie hat nur eine
   Grenze: Ein ohnehin blass gezeichnetes Logo faellt dadurch unter
   die Sichtbarkeit. Gemessen am 02.09.2026 im Band der Startseite
   waren das vier von vierzehn — „Ludewig" 56 %, „RC Consulting"
   69 %, „Autosattlerei Stucke" 51 %, „BSG" 61 % der Zeichnung ohne
   Kontrast, jeweils NACH Filter und Deckung gerechnet.

   Welches Logo welche Fassung bekommt, entscheidet nicht das Auge
   und nicht der Dateiname, sondern die Messung: cd:logostaerke in
   der Vorlage rechnet die Mischung aus Zeichnung und Grund nach und
   gibt „normal" oder „kraeftig" zurueck.

   --normal steht ausdruecklich da, obwohl es nichts aendert: Die
   Klasse steht im Quelltext, also muss sie im Stylesheet zu finden
   sein. Dieselbe Regel wie bei den Kastenfassungen der Zitate. */
.cd-logoband__logo--normal {
  filter: grayscale(1);
  opacity: .6;
}

/* Volle Deckung, und statt der vollen Entfaerbung nur eine halbe:
   Ein blasses Logo verliert mit grayscale(1) auch noch den letzten
   Farbkontrast. Beim Zeigen kommt wie gehabt alles zurueck.

   KEIN contrast() dazu. Der erste Versuch hatte contrast(1.08) —
   und der spreizt um die Mitte: Was ueber 50 Prozent Helligkeit
   liegt, wird HELLER. Bei genau den blassen Logos, um die es hier
   geht, verschlechterte er also, was er verbessern sollte
   (gemessen an „Ludewig": mit contrast schlechter als ohne). */
.cd-logoband__logo--kraeftig {
  /* Die Entfaerbung BLEIBT bei 1. Angehoben wird allein die
     Deckung — sonst liefe ein halb entfaerbtes Logo neben zehn
     ganz entfaerbten mit, und aus einer stillen Reihe wuerde ein
     Flickenteppich. Der Verlust an Sichtbarkeit kam ohnehin fast
     vollstaendig aus der Deckung, nicht aus der Farbe. */
  filter: grayscale(1);
  opacity: 1;
}
.cd-auf-dunkel .cd-logoband__logo--kraeftig { opacity: 1; }

/* Auslaufende Raender. Reine Zier — sie fangen keine
   Zeigereignisse ab. */
.cd-logoband__schleier {
  position: absolute;
  inset-block: 0;
  inline-size: 130px;
  pointer-events: none;
}
.cd-logoband__schleier--links {
  inset-inline-start: 0;
  background: linear-gradient(90deg, var(--cd-logoband-grund) 12%, transparent);
}
.cd-logoband__schleier--rechts {
  inset-inline-end: 0;
  background: linear-gradient(270deg, var(--cd-logoband-grund) 12%, transparent);
}

/* ------------------------------------------------------------
   Anhalte-Knopf
   ------------------------------------------------------------
   Das Kaestchen selbst steht nur fuer Vorleseprogramme (cd-nurlesen
   im Markup). Sichtbar und bedienbar ist die Beschriftung — der
   Klick darauf schaltet das Kaestchen.
   ------------------------------------------------------------ */
/* Quadratisch wie die Knoepfe der beiden Schieber — dieselbe
   Handlung soll ueberall dieselbe Gestalt haben. Die Beschriftung
   steht im Markup und wird vorgelesen, sichtbar ist nur das
   Zeichen.

   position: relative, weil die beiden weggeblendeten Woerter
   absolut liegen. Ohne den Bezugspunkt suchten sie sich den
   naechsten weiter oben und zoegen die Seite in die Breite. */
.cd-logoband__knopf {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  inline-size: 52px;
  block-size: 52px;
  padding: 0;
  background: var(--cd-weiss);
  border: 1px solid var(--cd-linie);
  border-radius: var(--cd-r-knopf);
  color: var(--cd-text-3);
  cursor: pointer;
  transition: border-color var(--cd-zeit) ease, color var(--cd-zeit) ease,
              background var(--cd-zeit) ease, opacity var(--cd-zeit) ease;
}
.cd-logoband__knopf:hover {
  background: var(--cd-rot);
  border-color: var(--cd-rot);
  color: var(--cd-weiss);
}
.cd-auf-dunkel .cd-logoband__knopf {
  background: transparent;
  border-color: var(--cd-linie-auf-dunkel);
  color: var(--cd-text-auf-dunkel);
}
.cd-auf-dunkel .cd-logoband__knopf:hover {
  background: var(--cd-rot);
  border-color: var(--cd-rot);
  color: var(--cd-weiss);
}

/* ------------------------------------------------------------
   Zurueckgenommener Knopf
   ------------------------------------------------------------
   NIE unsichtbar, nur blasser — und das auch nur dort, wo es
   ueberhaupt einen Zeiger zum Zeigen gibt.

   Ein Knopf, der erst beim Ueberfahren erscheint, ist auf einem
   Tastgeraet nicht vorhanden. WCAG 2.2.2 verlangt eine Moeglichkeit
   anzuhalten — nicht eine Moeglichkeit, sie zu suchen. Deshalb
   greift die Zuruecknahme nur bei (hover: hover) und (pointer:
   fine), und der Knopf bleibt mit 55 Prozent Deckkraft sichtbar.

   :focus-within holt ihn zurueck, sobald er mit der Tastatur
   erreicht wird — sonst spraenge der Fokus auf etwas Unsichtbares
   (WCAG 2.4.7 und 2.4.11).
   ------------------------------------------------------------ */
@media (hover: hover) and (pointer: fine) {
  .cd-logoband__knopf--leise { opacity: .55; }
  .cd-logoband:hover .cd-logoband__knopf--leise,
  .cd-logoband:focus-within .cd-logoband__knopf--leise { opacity: 1; }
}

/* Wer Bewegung abbestellt hat, bekommt kein Auf- und Abblenden —
   der Knopf steht dann einfach da. */
@media (prefers-reduced-motion: reduce) {
  .cd-logoband__knopf--leise { opacity: 1; }
}

/* Der Fokusring gehoert um die Beschriftung — das Kaestchen ist
   1 px gross und der Ring waere dort unsichtbar (WCAG 2.4.7). */
.cd-logoband__schalter:focus-visible ~ .cd-logoband__knopf {
  outline: 3px solid var(--cd-rot);
  outline-offset: 2px;
}
.cd-auf-dunkel .cd-logoband__schalter:focus-visible ~ .cd-logoband__knopf {
  outline-color: var(--cd-weiss);
}

/* Zeichen: zwei Balken solange es laeuft, ein Dreieck sobald es
   steht. Gezeichnet aus Rahmenkanten und nicht aus einem
   Schriftzeichen — ein Zeichen aus dem Privatnutzungsbereich landet
   sonst im vorgelesenen Namen der Beschriftung. */
.cd-logoband__zeichen {
  flex: 0 0 auto;
  inline-size: 12px;
  block-size: 13px;
  border-inline: 4px solid currentColor;
}

.cd-logoband__wort--weiter { display: none; }

.cd-logoband__schalter:checked ~ .cd-logoband__fenster .cd-logoband__lauf {
  animation-play-state: paused;
}
.cd-logoband__schalter:checked ~ .cd-logoband__knopf .cd-logoband__wort--halt { display: none; }
.cd-logoband__schalter:checked ~ .cd-logoband__knopf .cd-logoband__wort--weiter { display: inline; }
.cd-logoband__schalter:checked ~ .cd-logoband__knopf .cd-logoband__zeichen {
  inline-size: 0;
  block-size: 0;
  border: 0;
  border-inline-start: 11px solid currentColor;
  border-block: 6.5px solid transparent;
}

/* Steht das Band, laesst es sich schieben. Ohne das waeren die
   hinteren Logos nach dem Anhalten unerreichbar — anhalten wuerde
   dann Inhalt kosten. */
.cd-logoband__schalter:checked ~ .cd-logoband__fenster { overflow-x: auto; }

/* ------------------------------------------------------------
   Die Bildlaufleiste, und was man an ihr NICHT tun darf
   ------------------------------------------------------------
   Gesetzt wird ausschliesslich die FARBE. Kein scrollbar-width,
   und auch kein scrollbar-width an einer anderen Stelle.

   Der Grund ist keine Geschmacksfrage. Solange Groesse und
   Verhalten der Leiste vom Browser bestimmt sind und der Autor
   sie unangetastet laesst, traegt genau diese eine Tatsache
   gleichzeitig drei Ausnahmen:

     1.4.11  Kontrast von Nicht-Text — Bedienelemente des
             Browsers sind ausgenommen
     2.5.7   Ziehbewegungen — die Leiste IST die Alternative
             zum Ziehen, und zwar als vom Browser bereitgestellte
     2.5.8   Zielgroesse — "durch den Browser bestimmt" ist eine
             ausdrueckliche Ausnahme von den 24 x 24 px

   scrollbar-width: thin nimmt alle drei auf einmal weg und macht
   den Daumen dabei KLEINER: gemessen 9 px heute gegen 6 px mit
   thin, gefordert waeren dann 24. Die zehn gesparten Pixel sind
   der schlechteste Handel des ganzen Bauteils.

   scrollbar-color laesst Groesse und Verhalten unberuehrt. Es
   kostet nur die Ausnahme in 1.4.11 — und loest sie im selben
   Zug ein: gemessen 4,79:1 hell und 5,31:1 dunkel gegen
   geforderte 3:1.

   Auf dunklem Grund ist es kein Schoenheitsfehler, sondern der
   eigentliche Anlass: Die Systemleiste steht dort mit 14,99:1
   als grellweisser Streifen unter dem Band. */
.cd-logoband__fenster {
  scrollbar-color: var(--cd-text-3) var(--cd-flaeche-2);
}
.cd-auf-dunkel .cd-logoband__fenster {
  scrollbar-color: var(--cd-text-auf-dunkel-2) var(--cd-dunkel-2);
}

/* ============================================================
   Bauform: Kicker über dem Band
   ============================================================ */
.cd-logoband--band .cd-logoband__kicker {
  display: block;
  margin-block-end: var(--cd-a6);
  text-align: center;
}
.cd-logoband--band .cd-logoband__ueberschrift {
  margin-block-end: var(--cd-a4);
  text-align: center;
}
.cd-logoband--band .cd-logoband__knopf { margin-block-start: var(--cd-a5); }

/* ============================================================
   Bauform: Kicker links in der Zeile
   ============================================================
   Eine schmale Vertrauenszeile — Kicker links, Band daneben, Knopf
   rechts.
   ============================================================ */
/* 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-logoband--zeile {
  padding-block: var(--cd-a7);
  border-block-end: 1px solid var(--cd-linie-2);
}
.cd-bahn.cd-logoband--zeile.cd-auf-dunkel { border-block-end-color: var(--cd-dunkel-3); }
.cd-logoband--zeile .cd-logoband__zeile {
  display: flex;
  align-items: center;
  gap: var(--cd-a7);
}
.cd-logoband--zeile .cd-logoband__kicker {
  flex: 0 0 auto;
  margin-block-end: 0;
  max-inline-size: 14rem;
}
.cd-logoband--zeile .cd-logoband__fenster { flex: 1 1 auto; min-inline-size: 0; }
.cd-logoband--zeile .cd-logoband__knopf { flex: 0 0 auto; align-self: center; }
.cd-logoband--zeile .cd-logoband__logo { block-size: 34px; }
.cd-logoband--zeile .cd-logoband__stueck {
  inline-size: 130px;
  margin-inline-end: 52px;
}

/* ============================================================
   Bis 900 px
   ============================================================ */
@media (max-width: 900px) {
  .cd-logoband--zeile .cd-logoband__zeile {
    flex-wrap: wrap;
    gap: var(--cd-a4);
  }
  .cd-logoband--zeile .cd-logoband__kicker { max-inline-size: none; }
  .cd-logoband--zeile .cd-logoband__fenster { flex: 1 1 100%; }
  .cd-logoband__schleier { inline-size: 60px; }
}

/* ============================================================
   Bis 600 px
   ============================================================ */
@media (max-width: 600px) {
  .cd-logoband__stueck,
  .cd-logoband--zeile .cd-logoband__stueck {
    inline-size: 110px;
    margin-inline-end: var(--cd-a6);
  }
  .cd-logoband__logo { block-size: 32px; }
}

/* ============================================================
   Reduzierte Bewegung
   ============================================================
   Nicht "Band steht still": dann laegen die hinteren Logos
   unerreichbar hinter dem Rand. Stattdessen bricht die Reihe um und
   zeigt alle Logos auf einmal. Die Kopie und der Anhalte-Knopf
   entfallen — es gibt nichts mehr anzuhalten.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .cd-logoband__lauf {
    animation: none;
    flex-wrap: wrap;
    inline-size: 100%;
    justify-content: center;
  }
  .cd-logoband__reihe {
    flex-wrap: wrap;
    justify-content: center;
    row-gap: var(--cd-a5);
    inline-size: 100%;
  }
  .cd-logoband__reihe[aria-hidden] { display: none; }
  .cd-logoband__stueck { margin-inline-end: var(--cd-a6); }
  .cd-logoband__schleier { display: none; }
  .cd-logoband__knopf { display: none; }
  /* DAS KAESTCHEN MUSS MIT.
     Bis zum 02.09.2026 verschwand nur die sichtbare Beschriftung —
     das Kontrollkaestchen blieb fokussierbar. Wer sich mit der
     Tabulatortaste durch die Seite arbeitete, landete (gemessen:
     beim 33. Druck) auf einer Station, die 0 x 0 px gross ist: Der
     Fokusring war da, malte aber auf nichts. Eine Tabulatorstation
     ohne sichtbares Ziel ist ein Verstoss gegen 2.4.7, und hier
     zudem sinnlos — es gibt bei umgebrochenem Band nichts
     anzuhalten. `display: none` nimmt es aus der Reihenfolge. */
  .cd-logoband__schalter { display: none; }
  .cd-logoband__logo { filter: none; opacity: 1; }
}


/* ------------------------------------------------------------
   Wo der Anhalte-Knopf steht
   ------------------------------------------------------------
   Vorher stand er UNTER dem Band am linken Rand — losgeloest von
   dem, was er bedient, und optisch wie ein vergessenes Bauteil.

   Jetzt sitzt er auf der Hoehe des Kickers am rechten Rand: in
   derselben Zeile wie die Ueberschrift des Bandes und damit
   erkennbar als dessen Bedienelement.

   DREI Spalten und nicht zwei. Die linke Randspalte ist so breit
   wie der Knopf und haelt den Kicker in der wirklichen Mitte der
   Bahn. Mit zwei Spalten saesse er um die halbe Knopfbreite nach
   links versetzt — bei 52 px sieht man das.

   Ueberschrift und Kicker laufen automatisch untereinander in der
   mittleren Spalte, damit beide nebeneinander bestehen koennen.
   Nur der Knopf ist fest in Zeile 1 gesetzt.

   Der Knopf bleibt dabei SICHTBAR. Ein Bedienelement, das erst
   beim Ueberfahren erscheint, gibt es auf einem Tastgeraet nicht.
   WCAG 2.2.2 verlangt eine Moeglichkeit anzuhalten und nicht eine
   Moeglichkeit, sie zu suchen — siehe den Block "Zurueckgenommener
   Knopf" weiter oben.
   ------------------------------------------------------------ */
.cd-logoband--band .cd-logoband__zeile {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) 52px;
  align-items: center;
  row-gap: var(--cd-a6);
}
.cd-logoband--band .cd-logoband__ueberschrift,
.cd-logoband--band .cd-logoband__kicker {
  grid-column: 2;
  margin-block-end: 0;
}
.cd-logoband--band .cd-logoband__fenster {
  grid-column: 1 / -1;
}
.cd-logoband--band .cd-logoband__knopf {
  grid-column: 3;
  grid-row: 1;
  justify-self: end;
  align-self: center;
  margin-block-start: 0;
}