/* ============================================================
   cd_reiter — Umschalter über benachbarten Bahnen
   ============================================================
   Die Leiste entsteht erst im Browser (JavaScript/reiter.js).
   Ohne Skript greift von dieser Datei nichts, weil es die
   Klassen dann gar nicht gibt — und die Bahnen stehen
   untereinander wie zuvor.

   Die Leiste ist eine eigene Bahn und traegt deshalb selbst die
   Grundfarbe. Steht sie auf demselben Grund wie die Bahn
   darunter, greift die Regel aus bahnen.css (zwei gleiche Gruende
   nebeneinander = eine Flaeche) und die Naht verschwindet.
   ============================================================ */

/* ZWEI KLASSEN, nicht eine.
   bahnen.css setzt die Luft der Bahnen als KURZSCHREIBWEISE
   (padding-block) — und diese Datei wird von dort per @import
   geladen, steht also DAVOR. Bei gleichem Gewicht gewinnt die
   spaetere Regel: `.cd-reiter { padding-block-end: 0 }` war still
   wirkungslos, gemessen 122,6 px statt 0. Mit `.cd-bahn.cd-reiter`
   entscheidet das Gewicht und nicht mehr die Reihenfolge.

   Unten bleibt bewusst etwas Luft stehen — der Bereich darunter
   bekommt vom Nachbarschaftsregel-Griff in bahnen.css oben 0, und
   ohne diese Zeile klebte die Ueberschrift an der Reiterkante. */
.cd-bahn.cd-reiter {
  padding-block-end: var(--cd-a7);
}

.cd-reiter__leiste {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cd-a5);
  border-block-end: 1px solid var(--cd-linie-2);
}

.cd-auf-dunkel .cd-reiter__leiste {
  border-block-end-color: var(--cd-dunkel-3);
}

/* ------------------------------------------------------------
   Der einzelne Reiter
   ------------------------------------------------------------
   Die Grundflaeche ist durchsichtig — ein Reiter ist kein Knopf
   und soll auch nicht wie einer aussehen. Was ihn traegt, ist
   die Kante unten.

   MINDESTGROESSE: 44 px in der Hoehe. Reiter werden gern als
   schmale Zeilen gebaut; mit 2.5.8 sind 24 px die Untergrenze
   und 44 px die Empfehlung. Die Polsterung oben und unten steht
   deshalb ausdruecklich da und ist keine Zierde.
   ------------------------------------------------------------ */
.cd-reiter__knopf {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--cd-a4);
  min-block-size: 44px;
  padding: 14px 4px 16px;
  border: 0;
  background: none;
  text-align: start;
  color: var(--cd-text-2);
  cursor: pointer;
  transition: color var(--cd-zeit) var(--cd-kurve);
}

/* ------------------------------------------------------------
   Die Plakette
   ------------------------------------------------------------
   Feste Hoehe, mitwachsende Breite: Zwei Logos mit
   unterschiedlichem Seitenverhaeltnis (228x41 und 200x60) sollen
   gleich GROSS wirken, nicht gleich breit sein. Wer beide auf
   dieselbe Breite zwingt, macht das eine winzig und das andere
   fett.

   object-fit: contain haelt jedes Logo in seinen eigenen
   Proportionen. Ohne das verzerrt die feste Hoehe die Marke —
   und ein verzerrtes Kundenlogo ist schlimmer als gar keines.
   ------------------------------------------------------------ */
.cd-reiter__plakette {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  block-size: 46px;
  padding: 8px 14px;
  background: var(--cd-weiss);
  border-radius: var(--cd-r-feld);

  /* Die Plakette eines nicht gewaehlten Reiters tritt zurueck.
     NICHT ueber opacity auf das Logo: das machte die Marke
     blass und schmutzig. Stattdessen bleibt das Logo satt und
     die Plakette wird kleiner und flacher. */
  transform: scale(.92);
  transform-origin: left center;
  transition: transform var(--cd-zeit) var(--cd-kurve),
              box-shadow var(--cd-zeit) var(--cd-kurve);
}

.cd-reiter__plakette img {
  display: block;
  inline-size: auto;
  block-size: 100%;
  max-inline-size: 132px;
  object-fit: contain;
}

.cd-reiter__knopf--an .cd-reiter__plakette,
.cd-reiter__knopf:hover .cd-reiter__plakette {
  transform: scale(1);
}

.cd-reiter__knopf--an .cd-reiter__plakette {
  box-shadow: 0 6px 18px rgb(0 0 0 / .28);
}

.cd-reiter__beschriftung {
  display: grid;
  gap: 2px;
  min-inline-size: 0;
}

.cd-reiter__name {
  font-family: var(--cd-schrift-display);
  font-weight: 600;
  font-size: clamp(15px, .9rem + .25vw, 17.5px);
  line-height: 1.25;
}

/* Der Zusatz laeuft in der Monospace des Hauses — dieselbe
   Auszeichnung wie Kicker und Nummer. Er sagt in einem Wort,
   worum es geht, und macht aus zwei Firmennamen zwei Themen. */
.cd-reiter__rolle {
  font-family: var(--cd-schrift-mono);
  font-size: var(--cd-gr-mikro);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--cd-text-3);
}

.cd-auf-dunkel .cd-reiter__rolle { color: var(--cd-text-auf-dunkel-2); }
.cd-auf-dunkel .cd-reiter__knopf--an .cd-reiter__rolle { color: var(--cd-rot-auf-dunkel); }
.cd-reiter__knopf--an .cd-reiter__rolle { color: var(--cd-rot); }

.cd-auf-dunkel .cd-reiter__knopf {
  color: var(--cd-text-auf-dunkel-2);
}

/* Der Anschlag des gewaehlten Reiters. Er liegt auf der Kante
   der Leiste und ueberdeckt sie — deshalb 1 px tiefer als die
   Kante dick ist.

   ZWEI MERKMALE, nicht nur die Farbe (1.4.1): der Anschlag UND
   die kraeftigere Schriftfarbe. Ein Reiter, der sich allein
   durch Rot vom Rest abhebt, ist fuer jemanden mit Rotschwaeche
   nicht als gewaehlt zu erkennen. aria-selected traegt es
   zusaetzlich fuer Vorleseprogramme — aber das ersetzt kein
   sichtbares Merkmal. */
.cd-reiter__knopf::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-end: -1px;
  block-size: 3px;
  background: var(--cd-rot);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--cd-zeit) var(--cd-kurve);
}

.cd-auf-dunkel .cd-reiter__knopf::after {
  background: var(--cd-rot-auf-dunkel);
}

.cd-reiter__knopf--an {
  color: var(--cd-tinte);
}

.cd-auf-dunkel .cd-reiter__knopf--an {
  color: var(--cd-weiss);
}

.cd-reiter__knopf--an::after {
  transform: scaleX(1);
}

.cd-reiter__knopf:hover {
  color: var(--cd-tinte);
}

.cd-auf-dunkel .cd-reiter__knopf:hover {
  color: var(--cd-weiss);
}

/* Der Fokusring darf nicht an der Unterkante kleben — dort sitzt
   schon der Anschlag. Er wird deshalb nach aussen gesetzt und
   bekommt eine eigene Rundung; ohne sie liefe ein rechteckiger
   Ring um einen Text mit Innenabstand und saehe wie ein Kasten
   aus. */
.cd-reiter__knopf:focus-visible {
  outline: 3px solid var(--cd-rot);
  outline-offset: 3px;
  border-radius: 3px;
}

.cd-auf-dunkel .cd-reiter__knopf:focus-visible {
  outline-color: var(--cd-rot-auf-dunkel);
}

@media (prefers-reduced-motion: reduce) {
  .cd-reiter__knopf,
  .cd-reiter__knopf::after,
  .cd-reiter__plakette {
    transition: none;
  }
}

/* ------------------------------------------------------------
   Schmale Fenster
   ------------------------------------------------------------
   Zwei Reiter mit Plakette UND zwei Textzeilen passen am Handy
   nicht nebeneinander. Sie stehen dort untereinander, und der
   Anschlag wandert von der Unterkante an die Startkante — quer
   unter einem Reiter, der die volle Breite einnimmt, saehe er
   aus wie ein Trenner zwischen zwei Listenpunkten.
   ------------------------------------------------------------ */
@media (max-width: 620px) {
  .cd-reiter__leiste {
    display: grid;
    gap: 0;
    border-block-end: 0;
  }

  .cd-reiter__knopf {
    padding: 12px 0 12px 16px;
    border-block-end: 1px solid var(--cd-linie-2);
  }

  .cd-auf-dunkel .cd-reiter__knopf { border-block-end-color: var(--cd-dunkel-3); }

  .cd-reiter__knopf:last-child { border-block-end: 0; }

  .cd-reiter__knopf::after {
    inset-inline: 0 auto;
    inset-block: 0;
    inline-size: 3px;
    block-size: auto;
    transform: scaleY(0);
    transform-origin: center top;
  }

  .cd-reiter__knopf--an::after { transform: scaleY(1); }

  /* Untereinander muessen die Plaketten GLEICH BREIT sein, sonst
     stehen die Namen daneben auf zwei verschiedenen Linien und die
     Liste franst links aus. Nebeneinander (Desktop) waere dieselbe
     Vorgabe falsch — dort duerfen sie sich nach dem Logo richten. */
  .cd-reiter__plakette {
    block-size: 40px;
    min-inline-size: 128px;
    transform: none;
  }

  .cd-reiter__knopf--an .cd-reiter__plakette,
  .cd-reiter__knopf:hover .cd-reiter__plakette { transform: none; }
}

/* ------------------------------------------------------------
   Der Bereich unter der Leiste
   ------------------------------------------------------------
   Der Bereich ist weiterhin eine vollstaendige Bahn. Nach oben
   faellt seine Luft weg — die Leiste steht unmittelbar darueber
   und gehoert dazu.

   Die Ueberschrift des Bereichs bleibt stehen. Sie wiederholt
   nicht den Reiter: der Reiter traegt den Namen des Kunden, die
   Ueberschrift den Satz, um den es geht.
   ------------------------------------------------------------ */
/* HIER STAND `padding-block-start: var(--cd-a7)` — und es wirkte
   nie. bahnen.css setzt fuer zwei gleich gegruendete Bahnen
   nebeneinander `padding-block-start: 0`, und zwar mit vier
   Klassen. Gegen die kommt eine Regel mit einer Klasse nicht an,
   egal in welcher Reihenfolge sie steht.

   Die Luft zwischen Reiterleiste und Bereich kommt deshalb von
   OBEN — als padding-block-end an .cd-bahn.cd-reiter. Wer sie
   aendern will, aendert sie dort. */

/* Der Kicker der Bahn steht nach dem Umbau doppelt da: einmal
   auf dem Reiter, einmal ueber der Ueberschrift. Im Bereich
   faellt er weg — der Reiter darueber sagt dasselbe, und er
   bleibt beim Umschalten stehen. */
.cd-reiter__feld .cd-kicker {
  display: none;
}