/* ============================================================
   code dimension — Layout
   ============================================================
   Seitenhuelle: Inhaltsspalte, Kopfbereich, Navigation, Schienen,
   Fussbereich.

   Der Entwurf brauchte hier 92 x !important, weil seine Werte als
   inline style-Attribute am Element standen und eine Regel nur so
   dagegen ankam. Diese Fassung arbeitet mit Klassen — es gibt
   deshalb KEIN einziges !important. Wer eines ergaenzen moechte,
   hat mit hoher Wahrscheinlichkeit ein Spezifitaetsproblem, das
   sich sauberer loesen laesst.

   Umbruchpunkte (aus dem Entwurf uebernommen):
     1600  Abschnittsschiene bekommt Platz
     1419  Inhaltsspalte verliert die Vollbreite
     1100  Kopfbereich schaltet auf Menueschublade
      900  Bahnen werden einspaltig
      600  Mobilstufe
   ============================================================ */

/* ------------------------------------------------------------
   Inhaltsspalte
   ------------------------------------------------------------ */
.cd-mitte {
  inline-size: 100%;
  max-inline-size: var(--cd-inhalt);
  margin-inline: auto;
  padding-inline: var(--cd-rinne);
}

/* ------------------------------------------------------------
   Kopfbereich
   ------------------------------------------------------------ */
.cd-kopf {
  position: sticky;
  inset-block-start: 0;
  z-index: var(--cd-e-kopf);
  background: var(--cd-weiss);
}

/* --- obere Leiste, 38 px --- */
.cd-oberleiste {
  background: var(--cd-tinte);
  color: var(--cd-text-auf-dunkel-2);
  font-family: var(--cd-schrift-mono);
  font-size: var(--cd-gr-mikro);
  letter-spacing: .1em;
  /* Eigene Zeilenhoehe: der Fliesstext laeuft mit 1,62 und machte
     die Knoepfe der Leiste 4 px zu hoch. */
  line-height: 1.2;
  /* Grossbuchstaben ueber CSS, nicht im Quelltext: eine Adresse,
     die schon im Markup gross steht, buchstabieren manche
     Vorleseprogramme einzeln aus. */
  text-transform: uppercase;
}
.cd-oberleiste__inhalt {
  block-size: var(--cd-kopf-oben);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--cd-a5);
}
.cd-oberleiste__links,
.cd-oberleiste__rechts {
  display: flex;
  align-items: center;
  gap: var(--cd-a5);
}
.cd-oberleiste__link {
  display: inline-flex;
  align-items: center;
  gap: var(--cd-a2);
  color: var(--cd-text-auf-dunkel-2);
  transition: color var(--cd-zeit) ease;
}
.cd-oberleiste__link:hover { color: var(--cd-weiss); }
.cd-oberleiste__link--hell { color: var(--cd-weiss); }

/* Der Notfall-Weg bleibt ein Vertrauens- und Servicesignal, ist aber
   KEINE zweite rote Flaeche mehr. Rot ist im Kopf allein der
   Primaerhandlung „Angebot anfordern“ vorbehalten; standen beide rot
   nebeneinander, konkurrierten sie um denselben Blick.

   Hier deshalb ein ruhiger Link im Ton der uebrigen Leisten-Links —
   heller Text auf der dunklen Leiste, Weiss beim Hovern. Das Rot
   trägt nur noch der kleine Signalpunkt daneben: er sagt „Hilfe im
   Notfall“, ohne sich als Knopf auszugeben. */
.cd-notfall {
  display: inline-flex;
  align-items: center;
  gap: var(--cd-a2);
  color: var(--cd-text-auf-dunkel);
  letter-spacing: .1em;
  transition: color var(--cd-zeit) ease;
}
.cd-notfall:hover { color: var(--cd-weiss); }

/* Pulsender Punkt: ein ruhender Kern, darueber ein Ring, der
   aufgeht und verblasst. Reine Zier — im Markup aria-hidden.
   Der Rueckzug bei reduzierter Bewegung steht in basis.css und
   greift hier mit. */
.cd-notfall__punkt {
  position: relative;
  flex: 0 0 auto;
  inline-size: 7px;
  block-size: 7px;
}
.cd-notfall__punkt::before,
.cd-notfall__punkt::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  /* Rot auf dunklem Grund — der eine rote Akzent, der vom Notfall
     bleibt. Der hellere Rotton steht auf der dunklen Leiste besser
     als das Basis-Rot. */
  background: var(--cd-rot-hell);
}
/* Zwei Durchlaeufe statt endlos: 3,6 s liegen unter den fuenf
   Sekunden, ab denen WCAG 2.2.2 eine Anhaltemoeglichkeit
   verlangt. Ein Anhalte-Knopf neben einem Signalpunkt waere
   mehr Bedienung als Inhalt. Die Welle laeuft also an, macht
   auf sich aufmerksam und legt sich dann.

   Kein "forwards": der letzte Schritt traegt opacity 0 und
   scale 1,9 — eingefroren bliebe ein aufgeblaehter, unsichtbarer
   Ring stehen. Ohne fill-Angabe faellt die Welle auf ihren
   Grundzustand zurueck, und der ruhende Kern darunter bleibt. */
.cd-notfall__punkt::after { animation: cdPuls 1.8s ease-out 2; }

@keyframes cdPuls {
  0%, 100% { transform: scale(1);   opacity: 1; }
  50%      { transform: scale(1.9); opacity: 0; }
}

/* Eigener Rueckzug — die baugleichen Pulse in cd_hero.css und
   cd_kontakt.css haben laengst einen, hier fehlte er. */
@media (prefers-reduced-motion: reduce) {
  .cd-notfall__punkt::after { animation: none; opacity: 0; }
}

/* --- Hauptzeile, 84 px --- */
.cd-hauptzeile {
  border-block-end: 1px solid var(--cd-linie-2);
}
.cd-hauptzeile__inhalt {
  block-size: var(--cd-kopf-haupt);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
}
/* DAS BILD MUSS IN DER MARKE ZENTRIERT WERDEN, nicht nur die Marke
   in der Zeile. Auf Fingergeraeten gibt die Hausregel zur
   Zielgroesse jedem `a[href]` ein `min-block-size` von 44 px
   (basis.css, WCAG 2.5.8). Das Logo ist dort aber nur 36 px hoch —
   als Blockkasten sass es oben im Ziel und die restlichen 8 px
   standen leer darunter. Gemessen bei 390 px: 10 px Luft ueber dem
   Bild, 18 px darunter. Es sah aus, als haenge das Logo zu hoch,
   und tatsaechlich stand es 4 px ueber der Mitte — waehrend der
   Menueknopf daneben sauber mittig sass (8/8).

   `flex` statt `block` zentriert das Bild IM Ziel. Die 44 px
   bleiben erhalten, der Finger verliert nichts. Am Rechner aendert
   sich nichts: Dort ist die Zielgroesse 24 px und das Bild mit
   42 px ohnehin groesser. */
.cd-marke { display: flex; align-items: center; flex: 0 0 auto; }
.cd-marke__bild { display: block; block-size: 42px; inline-size: auto; }

/* ------------------------------------------------------------
   Hauptnavigation
   ------------------------------------------------------------
   flex: 0 1 auto — NICHT 1 1 auto. Die Navigation darf nicht
   wachsen: sonst frisst sie den freien Raum und klebt am Logo.
   Mit space-between am Elternteil und einer Navigation, die nur
   ihre Eigenbreite belegt, verteilt sich der Rest gleichmaessig
   nach links und rechts — gemessen 106 px auf beiden Seiten,
   genau wie in der Vorlage.
   ------------------------------------------------------------ */
.cd-hauptnav { flex: 0 1 auto; }
.cd-hauptnav__liste {
  display: flex;
  align-items: center;
  gap: 26px;
}
.cd-hauptnav__link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding-block: 6px;
  /* Ausdrueckliche Zeilenhoehe: der Fliesstext laeuft mit 1,62,
     das macht den Navigationspunkt 5 px hoeher als in der Vorlage.
     Die 1,62 bleiben — sie sind fuer Textbahnen richtig. */
  line-height: 1.25;
  color: var(--cd-dunkel);
  font-size: 15px;
  font-weight: 500;
  white-space: nowrap;
  border-block-end: 2px solid transparent;
  transition: color var(--cd-zeit) ease, border-color var(--cd-zeit) ease;
}
.cd-hauptnav__link:hover,
.cd-hauptnav__link[aria-expanded="true"] {
  color: var(--cd-rot);
  border-block-end-color: var(--cd-rot);
}

/* ------------------------------------------------------------
   Auszeichnung des aktiven Menuepunktes
   ------------------------------------------------------------
   Umschaltbar ueber die Site-Einstellung cd.navAktivMerkmal, die
   als data-navmerkmal am body landet.

   Jede Fassung traegt ein Merkmal NEBEN der Farbe. Das ist keine
   Geschmacksfrage: Rot allein waere ein Verstoss gegen WCAG 1.4.1
   (Benutzung von Farbe). Wer Rot nicht von Anthrazit unterscheidet,
   saehe sonst nicht mehr, auf welcher Seite er steht.

   Deshalb gibt es hier bewusst KEINE Fassung "nur Farbe" — auch
   nicht als Notausgang. Wer eine ergaenzt, nimmt der Navigation
   ihre Zugaenglichkeit.
   ------------------------------------------------------------ */

.cd-hauptnav__link[aria-current="page"] { color: var(--cd-rot); }

/* --- Linie darunter (Vorgabe, wie im Entwurf) ---
   FALLE: Ein Rueckfall ":root:not([data-navmerkmal])" trifft hier
   IMMER, denn das Attribut sitzt am <body>, nicht am <html>. Die
   Linie erschien damit auch in allen anderen Fassungen. Der
   Rueckfall haengt deshalb am body — und weil das Attribut ohnehin
   stets gesetzt wird, ist er nur die Sicherung fuer den Fall, dass
   jemand das TypoScript entfernt. */
[data-navmerkmal="linie"] .cd-hauptnav__link[aria-current="page"],
body:not([data-navmerkmal]) .cd-hauptnav__link[aria-current="page"] {
  border-block-end-color: var(--cd-rot);
}

/* --- Fettere Schrift ---
   Ein Gewichtssprung von 500 auf 700 ist deutlich genug, um ohne
   Farbe zu tragen. 600 waere zu nah an 500. */
[data-navmerkmal="fett"] .cd-hauptnav__link[aria-current="page"] {
  font-weight: 700;
}

/* --- Punkt davor ---
   Das Zeichen steht als Pseudo-Element und damit NICHT im
   zugaenglichen Namen des Links. */
[data-navmerkmal="punkt"] .cd-hauptnav__link[aria-current="page"]::before {
  content: "";
  inline-size: 5px;
  block-size: 5px;
  margin-inline-end: 7px;
  border-radius: 50%;
  background: currentColor;
  flex: 0 0 auto;
}

/* --- Getoente Flaeche ---
   Die Flaeche allein waere wieder nur Farbe, deshalb kommt der
   Gewichtssprung dazu. */
[data-navmerkmal="flaeche"] .cd-hauptnav__link[aria-current="page"] {
  font-weight: 600;
  background: color-mix(in srgb, var(--cd-rot) 8%, transparent);
  padding-inline: 10px;
  border-radius: var(--cd-r-feld);
}

/* --- Rot hinterlegt ---
   NICHT IN GEBRAUCH, aber einsatzbereit: cd.navAktivMerkmal auf
   „vollflaeche" stellen. In der Hauptnavigation steht diese Fassung
   neben dem roten Handlungsknopf und nimmt ihm die Wirkung —
   deshalb dort „fett". Im Aufklappmenue traegt dieselbe Idee, siehe
   unten bei .cd-mega__link.

   Die kraeftigste Fassung: gefuellte Flaeche in der Hausfarbe,
   Schrift weiss.

   Warum das die Farbregel NICHT verletzt: Nicht die Schriftfarbe
   traegt die Aussage, sondern eine gefuellte Form. Wer Rot nicht
   von Anthrazit unterscheidet, sieht trotzdem einen Block um genau
   einen Punkt. Der Gewichtssprung kommt dazu, damit es auch im
   Schwarzweissdruck steht.

   Weiss auf #C41118 sind 6,1:1 — ueber der Anforderung von 4,5:1
   fuer gewoehnlichen Text.

   Die Unterkante muss ausdruecklich durchsichtig BLEIBEN: Der
   Grundstil des Links haelt dort 2 px frei, und eine rote Linie
   unter einer roten Flaeche saehe aus wie ein Rechenfehler.
   Beim Ueberfahren gilt dasselbe. */
[data-navmerkmal="vollflaeche"] .cd-hauptnav__link[aria-current="page"] {
  font-weight: 600;
  background: var(--cd-rot);
  color: var(--cd-weiss);
  padding-inline: 12px;
  border-radius: var(--cd-r-feld);
  border-block-end-color: transparent;
}
[data-navmerkmal="vollflaeche"] .cd-hauptnav__link[aria-current="page"]:hover,
[data-navmerkmal="vollflaeche"] .cd-hauptnav__link[aria-current="page"][aria-expanded="true"] {
  background: var(--cd-rot-tief);
  color: var(--cd-weiss);
  border-block-end-color: transparent;
}

/* Der Fokusring des Grundstils ist rot — auf roter Flaeche
   verschwindet er. Hier weiss, mit Abstand nach aussen, damit er
   auf dem weissen Kopf trotzdem zu sehen ist. */
[data-navmerkmal="vollflaeche"] .cd-hauptnav__link[aria-current="page"]:focus-visible {
  outline: 3px solid var(--cd-tinte);
  outline-offset: 2px;
}
.cd-hauptnav__pfeil {
  inline-size: 0;
  block-size: 0;
  border-inline: 4px solid transparent;
  border-block-start: 5px solid currentColor;
  opacity: .55;
  transition: transform var(--cd-zeit) var(--cd-kurve);
}
.cd-hauptnav__link[aria-expanded="true"] .cd-hauptnav__pfeil {
  transform: rotate(180deg);
  opacity: 1;
}

/* ------------------------------------------------------------
   Mega-Menue
   ------------------------------------------------------------
   Geschaltet ueber das hidden-Attribut. Die eigenen Regeln setzen
   deshalb KEIN display — sonst haette hidden keine Wirkung mehr.
   ------------------------------------------------------------ */
.cd-mega {
  position: absolute;
  inset-inline: 0;
  inset-block-start: 100%;
  z-index: var(--cd-e-mega);
  background: var(--cd-weiss);
  border-block: 1px solid var(--cd-linie-2);
  box-shadow: var(--cd-schatten-mega);
  animation: cdMegaEin .2s var(--cd-kurve);
}
.cd-kopf { position: sticky; }
.cd-hauptzeile { position: relative; }

@keyframes cdMegaEin {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: none; }
}

/* Alle Werte an der Vorlage gemessen (SiteHeader.dc.html). */
.cd-mega__inhalt {
  display: flex;
  align-items: stretch;
  gap: var(--cd-a6);
  padding-block: 42px 40px;
}

/* Feste Spaltenbreite statt Raster: In der Vorlage sind die Spalten
   232 px breit und rücken NICHT auseinander, wenn eine fehlt. Ein
   auto-fit-Raster würde zwei Spalten über die volle Breite ziehen. */
.cd-mega__spalte {
  flex: 0 0 232px;
  min-inline-size: 0;
}

.cd-mega__spalteTitel {
  font-family: var(--cd-schrift-mono);
  font-size: 10.5px;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--cd-rot);
  padding-block-end: 12px;
  border-block-end: 1px solid var(--cd-linie-2);
  margin-block-end: 16px;
}

.cd-mega__liste { display: grid; gap: 2px; }
.cd-mega__link {
  display: block;
  padding: 9px 10px 9px 0;
  border-radius: var(--cd-r-feld);
  color: var(--cd-dunkel);
  font-size: 15px;
  line-height: 1.25;
  transition: color var(--cd-zeit) ease, background var(--cd-zeit) ease,
              padding-inline-start var(--cd-zeit) var(--cd-kurve);
}
.cd-mega__link:hover {
  color: var(--cd-rot);
  background: var(--cd-flaeche-1);
  padding-inline-start: 10px;
}

/* „Neu" nicht allein über Farbe — das Wort steht im Abzeichen. */
.cd-mega__neu {
  margin-inline-start: var(--cd-a2);
  padding: 1px 6px;
  background: var(--cd-rot);
  color: var(--cd-weiss);
  border-radius: var(--cd-r-feld);
  font-family: var(--cd-schrift-mono);
  font-size: 9.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  vertical-align: 2px;
}

/* Die Kachel wird nach rechts geschoben, damit sie am Rand der
   Inhaltsspalte sitzt — auch wenn nur eine Spalte da ist. */
.cd-mega__kachel {
  flex: 0 0 300px;
  margin-inline-start: auto;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 26px 24px;
  background: var(--cd-tinte);
  color: var(--cd-weiss);
}
.cd-mega__kachelKicker {
  font-family: var(--cd-schrift-mono);
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--cd-text-auf-dunkel-2);
  margin-block-end: 12px;
}
.cd-mega__kachelText {
  font-size: 15px;
  line-height: 1.55;
  color: var(--cd-text-auf-dunkel);
  max-inline-size: none;
}
.cd-mega__kachelKnopf { margin-block-start: 22px; justify-content: center; }

/* ------------------------------------------------------------
   Menue-Knopf und Schublade
   ------------------------------------------------------------ */
.cd-menueknopf { display: none; }

/* Bei reduzierter Bewegung springt der Hamburger ohne Uebergang
   ins X — die Zustandsanzeige bleibt, nur die Animation entfaellt. */
@media (prefers-reduced-motion: reduce) {
  .cd-menueknopf__balken,
  .cd-menueknopf__balken::before,
  .cd-menueknopf__balken::after { transition: none; }
}

/* Der Notfall-Knopf steht immer im Markup und wird erst unterhalb
   von 600 px sichtbar. Darueber traegt ihn die obere Leiste — zwei
   rote Notfall-Flaechen gleichzeitig waeren eine zu viel. */
.cd-kopf__notfall { display: none; }

/* Der Hausring ist Hausrot (basis.css:143). Auf diesem Knopf waere
   das ein roter Ring um ein rotes Feld: Gehalten ist die Regel dann
   nur ueber die zwei Pixel weisser Luecke dazwischen — gesehen hat
   man ihn trotzdem kaum.

   Tinte statt Rot: 17,69 : 1 gegen den weissen Grund der Kopfzeile
   und 6,10 : 1 gegen die rote Flaeche, die er umschliesst. Derselbe
   Weg, den basis.css:152 fuer dunkle Bahnen schon geht — dort wird
   der Ring weiss. */
.cd-kopf__notfall:focus-visible { outline-color: var(--cd-tinte); }

/* ------------------------------------------------------------
   Die Schnittstelle der Menuefassungen (--cd-mm-*)
   ------------------------------------------------------------
   Hier stehen die Vorgabewerte, und NUR hier stehen die Regeln,
   die sie lesen. Eine Fassung in bahnen/cd_menuefassungen.css
   setzt ausschliesslich Werte — sie wiederholt keine Regel.

   Der Grund ist Rechenarbeit und nicht Ordnungsliebe: Lage, Breite,
   Grund, Schrift und Bewegung ergeben gekreuzt ein Vielfaches an
   Regeln. Als Eigenschaften ist jede Fassung EIN Block.

   Die Werte gelten fuer BEIDE Schubladen — was eine Fassung malt,
   soll die Kontoschublade mittragen, sonst stuende ein weisses
   Konto vor einem dunklen Menue. Was eine Fassung UMBAUT, gilt nur
   fuer das Menue: solche Regeln tragen :not(.cd-mobilmenue--konto),
   denn die Kontoschublade hat weder Startblock noch zwei Gruppen
   noch einen Fuss.
   ------------------------------------------------------------ */
.cd-mobilmenue {
  position: fixed;
  inset: 0;
  z-index: var(--cd-e-mobilmenue);

  /* Lage und Mass */
  --cd-mm-oben: 0;
  --cd-mm-unten: 0;
  --cd-mm-start: auto;
  --cd-mm-ende: 0;
  --cd-mm-breite: min(420px, 100%);
  --cd-mm-hoehe: auto;
  --cd-mm-max-hoehe: none;
  --cd-mm-radius: 0;
  --cd-mm-schatten: none;

  /* Farbe. --cd-mm-leise stand frueher auf --cd-text-schwach; das
     sind auf Weiss 3,07:1 und faellt nach 1.4.3 durch. --cd-text-3
     traegt 4,86:1. Dieselbe Korrektur ist im Kundenmenue schon
     einmal noetig gewesen. */
  --cd-mm-grund: var(--cd-weiss);
  --cd-mm-text: var(--cd-dunkel);
  --cd-mm-text-2: var(--cd-text-2);
  --cd-mm-leise: var(--cd-text-3);
  --cd-mm-linie: var(--cd-linie-2);
  --cd-mm-rahmen: var(--cd-linie);
  --cd-mm-ring: var(--cd-rot);
  --cd-mm-schleier: rgb(13 26 33 / .55);

  /* Zustand ZU. Siehe „Auftritt der mobilen Schublade" weiter unten. */
  --cd-mm-zu: none;
  --cd-mm-feld-deck: 1;
  --cd-mm-schleier-deck: 1;
}

/* Der Fokusring nimmt die Farbe der Fassung. Auf dunklem Vollfeld
   liegt der Hausring (Rot) bei rund 2,9:1 — derselbe Grund, aus dem
   basis.css ihn auf dunklen Bahnen weiss faerbt. (0,2,0) schlaegt
   die :where()-Regel in basis.css (0,1,0). */
.cd-mobilmenue :focus-visible { outline-color: var(--cd-mm-ring); }

/* Die ganze Zeile ist das Ziel, nicht nur das Wort.
   DER SELEKTOR MUSS DAS a[href] NENNEN — basis.css gibt jedem
   a[href] eine Mindesthoehe und nimmt sie mit `li a[href]` (0,1,2)
   sofort wieder weg. (0,2,1) gewinnt. Steht hier als GERUEST und
   nicht in einer Fassung: sonst faellt die erste Fassung, die den
   Grad oder das Polster senkt, lautlos unter 44 px.
   Dieselbe Stelle steht in cd_kundenmenue.css und bei
   .cd-mobilkonto__liste — wer die eine anfasst, sieht bei den
   anderen nach. */
.cd-mobilmenue__liste a[href],
.cd-mobilmenue__unter a[href] {
  min-block-size: var(--cd-zielgroesse, 24px);
}

.cd-mobilmenue__schleier {
  position: absolute;
  inset: 0;
  background: var(--cd-mm-schleier);
}
.cd-mobilmenue__feld {
  position: absolute;
  inset-block: var(--cd-mm-oben) var(--cd-mm-unten);
  inset-inline: var(--cd-mm-start) var(--cd-mm-ende);
  inline-size: var(--cd-mm-breite);
  block-size: var(--cd-mm-hoehe);
  max-block-size: var(--cd-mm-max-hoehe);
  border-radius: var(--cd-mm-radius);
  box-shadow: var(--cd-mm-schatten);
  display: flex;
  flex-direction: column;
  background: var(--cd-mm-grund);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.cd-mobilmenue__kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--cd-a4) var(--cd-a5);
  border-block-end: 1px solid var(--cd-mm-linie);
}
.cd-mobilmenue__titel {
  font-family: var(--cd-schrift-mono);
  font-size: var(--cd-gr-mikro);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--cd-mm-leise);
}
.cd-mobilmenue__zu {
  /* Erbt sonst die Textfarbe des Umfelds und waere auf einem
     dunklen Vollfeld unsichtbar. */
  color: var(--cd-mm-text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 0;
  font-size: 20px;
  cursor: pointer;
}
.cd-mobilmenue__block { padding: var(--cd-a5) var(--cd-a5) 0; }
.cd-mobilmenue__blockTitel {
  font-family: var(--cd-schrift-mono);
  font-size: var(--cd-gr-mikro);
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--cd-mm-leise);
  margin-block-end: var(--cd-a3);
}
.cd-mobilmenue__zeile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--cd-a3);
}
.cd-mobilmenue__link {
  display: block;
  flex: 1 1 auto;
  padding-block: var(--cd-a3);
  color: var(--cd-mm-text);
  font-size: var(--cd-gr-gross);
  font-weight: 500;
}
/* Der Startseiten-Punkt. Eine Trennlinie darunter, weil er zu
   keiner der beiden Gruppen gehoert.

   flex und gap statt eines Abstands am Symbol: der Text ist ein
   eigenes Flex-Kind, und Flex verschluckt den Leerraum zwischen den
   Kindern. Ohne gap klebte das Wort am Haus. */
.cd-mobilmenue__block--start {
  padding-block-end: var(--cd-a4);
  border-block-end: 1px solid var(--cd-mm-linie);
}
.cd-mobilmenue__link--start {
  display: flex;
  align-items: center;
  gap: var(--cd-a3);
}
.cd-mobilmenue__link--start .cd-symbol {
  flex: 0 0 auto;
  inline-size: 20px;
  block-size: 20px;
  color: var(--cd-rot);
}

.cd-mobilmenue__auf {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 40px;
  block-size: 40px;
  background: none;
  border: 1px solid var(--cd-mm-rahmen);
  border-radius: var(--cd-r-feld);
  cursor: pointer;
}
.cd-mobilmenue__aufPfeil {
  inline-size: 0;
  block-size: 0;
  border-inline: 5px solid transparent;
  border-block-start: 6px solid currentColor;
  transition: transform var(--cd-zeit) var(--cd-kurve);
}
.cd-mobilmenue__auf[aria-expanded="true"] .cd-mobilmenue__aufPfeil {
  transform: rotate(180deg);
}
.cd-mobilmenue__unter {
  padding-inline-start: var(--cd-a4);
  padding-block-end: var(--cd-a3);
  border-inline-start: 2px solid var(--cd-mm-linie);
  margin-inline-start: var(--cd-a1);
}
.cd-mobilmenue__unter a {
  display: block;
  padding-block: 9px;
  color: var(--cd-mm-text-2);
  font-size: var(--cd-gr-text);
}
.cd-mobilmenue__unter a[aria-current="page"] { color: var(--cd-rot); font-weight: 600; }
.cd-mobilmenue__fuss {
  margin-block-start: auto;
  padding: var(--cd-a5);
  border-block-start: 1px solid var(--cd-mm-linie);
}
.cd-mobilmenue__cta { inline-size: 100%; justify-content: center; }
.cd-mobilmenue__zeiten {
  margin-block-start: var(--cd-a2);
  text-align: center;
  font-size: var(--cd-gr-klein);
  color: var(--cd-mm-leise);
}

/* ------------------------------------------------------------
   Abschnittsschiene (links)
   ------------------------------------------------------------
   Braucht 170 px freien Rand neben der 1280 px breiten Spalte,
   also mindestens 1620 px Fenster. Darunter bleibt sie weg.
   ------------------------------------------------------------ */
.cd-abschnittsschiene { display: none; }

/* ------------------------------------------------------------
   Kontaktschiene (rechts)
   ------------------------------------------------------------
   Liegt ueber dem Inhalt. Die Huelle faengt deshalb keine
   Zeigereignisse ab — nur die Knoepfe selbst sind bedienbar.
   ------------------------------------------------------------ */
.cd-kontaktschiene {
  position: fixed;
  inset-inline-end: 0;
  inset-block-start: 0;
  block-size: 100vh;
  display: flex;
  align-items: center;
  z-index: var(--cd-e-schiene);
  pointer-events: none;
}
.cd-kontaktschiene__leiste {
  inline-size: 64px;
  display: flex;
  flex-direction: column;
  box-shadow: -14px 0 40px -26px rgb(13 26 33 / .7);
  pointer-events: auto;
}

/* Hochkant gesetzte Beschriftung.
   vertical-rl liest von oben nach unten; die 180-Grad-Drehung
   dreht das auf die uebliche Leserichtung von unten nach oben.
   Der Text bleibt echter Text — auswaehlbar, vorlesbar,
   uebersetzbar. */
.cd-kontaktschiene__knopf {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  /* FALLE: physische Angabe, nicht padding-block.
     Bei writing-mode: vertical-rl liegt die Blockachse WAAGERECHT —
     padding-block haette links und rechts gepolstert und die
     Knoepfe zu kurz gemacht (gemessen 141 statt 185 px). */
  padding: 20px 0;
  border: 0;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  color: var(--cd-weiss);
  font-size: 11.5px;
  font-family: var(--cd-schrift-mono);
  letter-spacing: .12em;
  cursor: pointer;
  transition: background var(--cd-zeit) ease;
}
.cd-kontaktschiene__knopf--rot {
  background: var(--cd-rot);
  padding: 22px 0;
}
.cd-kontaktschiene__knopf--rot:hover { background: var(--cd-rot-tief); color: var(--cd-weiss); }

.cd-kontaktschiene__knopf--tinte { background: var(--cd-tinte); }
.cd-kontaktschiene__knopf--tinte:hover { background: var(--cd-dunkel); color: var(--cd-weiss); }

.cd-kontaktschiene__knopf--dunkel { background: var(--cd-dunkel); }
.cd-kontaktschiene__knopf--dunkel:hover { background: var(--cd-rot); color: var(--cd-weiss); }

.cd-kontaktschiene__punkt {
  flex: 0 0 auto;
  inline-size: 7px;
  block-size: 7px;
  border-radius: 50%;
  background: var(--cd-weiss);
}

/* "Nach oben" gehoert zur Leiste, nicht als schwebender Knopf
   daneben — so loest es die Vorlage. */
.cd-kontaktschiene__oben {
  display: flex;
  align-items: center;
  justify-content: center;
  block-size: 52px;
  background: var(--cd-weiss);
  border: 1px solid var(--cd-linie-3);
  border-inline-end: 0;
  color: var(--cd-tinte);
  cursor: pointer;
  transition: background var(--cd-zeit) ease, color var(--cd-zeit) ease;
}
.cd-kontaktschiene__oben:hover { background: var(--cd-rot); color: var(--cd-weiss); }

/* ------------------------------------------------------------
   Mobilleiste
   ------------------------------------------------------------ */
.cd-mobilleiste { display: none; }

/* ------------------------------------------------------------
   Inhaltsbereich
   ------------------------------------------------------------ */
.cd-inhalt { display: block; }

/* ------------------------------------------------------------
   Fussbereich
   ------------------------------------------------------------ */
/* KEIN Abstand nach oben. Der Fussbereich stoesst in der Vorlage
   unmittelbar an die letzte Bahn — die dunkle Flaeche trennt schon
   von sich aus, ein Abstand davor liesse sie wie ein abgerutschter
   Block wirken. Die Luft steht INNEN als padding. */
.cd-fuss {
  padding-block-start: 78px;
  background: var(--cd-tinte);
  color: var(--cd-text-auf-dunkel-2);
}
.cd-fuss a { color: var(--cd-text-auf-dunkel); }
.cd-fuss a:hover { color: var(--cd-weiss); }

.cd-fuss__oben {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(auto-fit, minmax(0, 1fr));
  gap: var(--cd-a7) var(--cd-a6);
  padding-block-end: var(--cd-a8);
}
/* Weiss ausgeschlagen: brightness(0) macht die Wortmarke schwarz,
   invert(1) dreht sie zu Weiss. Eine zweite Logodatei erspart das —
   und das Graublau des Worts "dimension" trug auf dem dunklen Grund
   ohnehin kaum. */
.cd-fuss__logo {
  display: block;
  /* GENAU SO HOCH WIE IM KOPF (.cd-marke__bild). Die Angabe war
     auskommentiert; das Bild fiel damit auf seine Eigengroesse
     zurueck und stand mit 220 x 54 px deutlich groesser da als
     die 171 x 42 px oben. Zwei Groessen derselben Wortmarke auf
     einer Seite lesen sich wie zwei Marken.

     Der mobile Schritt auf 36 px steht weiter unten und gilt fuer
     beide — sonst laufen sie ab 1100 px wieder auseinander. */
  block-size: 42px;
  inline-size: auto;
  margin-block-end: 26px;
  /*
  filter: brightness(0) invert(1);
  */
}

.cd-fuss__adresse { font-style: normal; line-height: 1.7; }
.cd-fuss__zusatz { display: block; }

/* ------------------------------------------------------------
   Kontaktwege im Fuss
   ------------------------------------------------------------
   Zeichen, dann Text. Jede Zeile ist mindestens 24 px hoch und
   haelt 24 px Abstand zur naechsten — Zielgroesse nach WCAG 2.5.8
   (AA seit 2.2). Das gilt auch fuer die Faxzeile, die kein Ziel
   ist: eine Reihe, in der eine Zeile aus der Reihe faellt, liest
   sich schlechter als eine gleichmaessige.
   ------------------------------------------------------------ */
.cd-fuss__wege {
  display: grid;
  gap: 6px;
  margin-block-start: var(--cd-a5);
}

/* 26 px hoch und 6 px Abstand — zusammen die 32 px Schrittweite des
   Entwurfs. Die Hoehe bleibt dabei ueber den 24 px, die WCAG 2.5.8
   fuer ein Ziel verlangt; ueber den Abstand allein waere die
   Ausnahme nicht erfuellt. */
.cd-fuss__weg {
  display: flex;
  align-items: center;
  gap: 12px;
  min-block-size: 26px;
}

.cd-fuss__weg a {
  display: inline-flex;
  align-items: center;
  min-block-size: 24px;
}

.cd-fuss__wegzeichen {
  flex: 0 0 auto;
  display: inline-flex;
  color: var(--cd-text-schwach);
}
.cd-fuss__wegzeichen .cd-symbol {
  inline-size: 18px;
  block-size: 18px;
}

/* Die Telefonzeile ist der Hauptweg — sie traegt das rote Zeichen
   und die kraeftigere Schrift. */
.cd-fuss__weg--stark .cd-fuss__wegzeichen { color: var(--cd-rot-auf-dunkel); }
.cd-fuss__weg--stark a {
  font-size: var(--cd-gr-gross);
  font-weight: 600;
  color: var(--cd-weiss);
}

/* ------------------------------------------------------------
   Partnerzeichen
   ------------------------------------------------------------ */
.cd-fuss__zeichen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--cd-a3);
  /* 40 px — zwischen den Stufen: 32 setzt die Plaketten zu nah an
     die Kontaktzeilen, 48 loest sie aus dem Block heraus. */
  margin-block-start: calc(var(--cd-a6) + var(--cd-a2));
}
.cd-fuss__zeichen img {
  display: block;
  block-size: 46px;
  inline-size: auto;
  opacity: .85;
}

/* Zwei Listen uebereinander in einer Spalte — im Entwurf stehen
   Marketing und Agentur so. */
.cd-fuss__stapel {
  display: grid;
  align-content: start;
  gap: var(--cd-a6);
}
.cd-fuss__titel {
  font-family: var(--cd-schrift-mono);
  font-size: var(--cd-gr-mikro);
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--cd-text-schwach);
  margin-block-end: var(--cd-a4);
}
/* Jeder Punkt ist mindestens 24 px hoch — Zielgroesse nach
   WCAG 2.5.8. Vorher lagen 21 px hohe Zeilen mit 10 px Abstand
   uebereinander; das reicht weder ueber die Groesse noch ueber die
   Ausnahme fuer den Abstand. */
.cd-fuss__liste { display: grid; gap: 5px; }
.cd-fuss__liste a {
  display: inline-flex;
  align-items: center;
  min-block-size: 24px;
  font-size: var(--cd-gr-klein);
}

.cd-fuss__unten {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--cd-a4);
  padding-block: var(--cd-a5);
  border-block-start: 1px solid var(--cd-linie-auf-dunkel);
  font-size: var(--cd-gr-klein);
}
.cd-fuss__recht ul { display: flex; flex-wrap: wrap; gap: var(--cd-a3) var(--cd-a5); }
/* DER SELEKTOR MUSS DAS a[href] NENNEN — dieselbe Falle wie beim
   Kontomenue weiter unten: basis.css gibt jedem a[href] die
   Zielgroesse, und `li a[href] { min-block-size: 0 }` (0,1,2)
   nimmt sie sofort wieder weg. Eine blosse Klassenregel (0,1,1)
   verliert.

   Gemessen war die Folge im Fuss zu sehen: Die vier Verweise
   standen 21 px hoch, der Knopf "Cookie-Einstellungen" mit
   seinen 24 px daneben — er ist kein a[href] und behielt sie.
   Sein Text sass dadurch rund zwei Pixel tiefer, und die Zeile
   stand nicht auf einer Linie.

   24 px hart und nicht ueber die Marke --cd-zielgroesse: Die
   schaltet am Finger auf 44 px, und die Rechtszeile im Fuss
   wuerde dadurch dreimal so hoch. Der Knopf daneben traegt
   ebenfalls harte 24 px — beide muessen denselben Wert haben,
   sonst faengt das Ganze von vorn an. */
.cd-fuss__recht li a[href] {
  display: inline-flex;
  align-items: center;
  min-block-size: 24px;
}
.cd-fuss__cookieknopf {
  display: inline-flex;
  align-items: center;
  min-block-size: 24px;
  background: none;
  border: 0;
  padding: 0;
  color: var(--cd-text-auf-dunkel);
  font-size: inherit;
  text-decoration: underline;
  text-underline-offset: .18em;
  cursor: pointer;
}
.cd-fuss__cookieknopf:hover { color: var(--cd-weiss); }

/* ============================================================
   Ab 1620 px — Abschnittsschiene bekommt Platz
   ============================================================ */
@media (min-width: 1620px) {
  .cd-abschnittsschiene {
    position: fixed;
    inset-inline-start: 0;
    inset-block-start: 0;
    block-size: 100vh;
    inline-size: var(--cd-schiene);
    display: flex;
    align-items: center;
    z-index: var(--cd-e-schiene);
    pointer-events: none;
  }
  .cd-abschnittsschiene__liste {
    display: grid;
    gap: 1px;
    margin-inline-start: 30px;
    padding-inline-start: 18px;
    border-inline-start: 1px solid var(--cd-linie);
    pointer-events: auto;
  }
  .cd-abschnittsschiene__link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-block: 6px;
    color: var(--cd-text-2);
    font-size: 12.5px;
    transition: color var(--cd-zeit) ease;
  }
  .cd-abschnittsschiene__link:hover { color: var(--cd-rot); }

  /* ----------------------------------------------------------
     Farben: gemessen, nicht geschaetzt
     ----------------------------------------------------------
     Die Schiene ist FIXIERT und wandert ueber alle Bahnen — ihr
     Grund ist also nicht eine Farbe, sondern die der Bahn, die
     gerade darunter liegt. Am 09.09.2026 nachgemessen (Werkzeug
     Y:/tmp/cd-schiene-kontrast.js, 11 Bahnen der Startseite):

       Zahl  --cd-text-schwach  10 px   2,63 bis 3,07 auf hell   ✗
       Text  --cd-text-3        12,5 px 4,49 auf hellem Grau     ✗
       Zahl/Text auf den dunklen Bahnen                  2,90    ✗

     Bei 10 px gilt 4,5:1 — das ist kein grosser Text. Die Schiene
     war also fuer helle Bahnen gebaut und lag trotzdem ueber
     beiden. Jetzt:

       hell:   --cd-text-2 (#4E626C)          5,46 auf hellem Grau
       dunkel: --cd-text-auf-dunkel-2         6,28 auf Anthrazit
       aktiv dunkel: --cd-rot-auf-dunkel      4,63 auf Anthrazit

     Umgeschaltet wird in huelle.js von dem Beobachter, der den
     aktiven Abschnitt ohnehin schon verfolgt — kein zweiter
     Zuhoerer am Bildlauf.
     ---------------------------------------------------------- */
  .cd-abschnittsschiene__nr {
    flex: 0 0 auto;
    inline-size: 16px;
    font-family: var(--cd-schrift-mono);
    font-size: 10px;
    letter-spacing: .08em;
    color: var(--cd-text-2);
  }

  .cd-abschnittsschiene--dunkel .cd-abschnittsschiene__link { color: var(--cd-text-auf-dunkel); }
  .cd-abschnittsschiene--dunkel .cd-abschnittsschiene__nr { color: var(--cd-text-auf-dunkel-2); }
  .cd-abschnittsschiene--dunkel .cd-abschnittsschiene__liste { border-inline-start-color: rgb(255 255 255 / .22); }
  .cd-abschnittsschiene--dunkel .cd-abschnittsschiene__link:hover,
  .cd-abschnittsschiene--dunkel .cd-abschnittsschiene__link[aria-current],
  .cd-abschnittsschiene--dunkel .cd-abschnittsschiene__link[aria-current] .cd-abschnittsschiene__nr {
    color: var(--cd-rot-auf-dunkel);
  }

  /* Rote Bahnen sind ein eigener Fall und nicht bloss „dunkel":
     Das Graublau der Dunkel-Fassung erreicht auf Hausrot nur
     2,49:1 (gemessen), und das aufgehellte Rot gar 1,84:1 — Rot
     auf Rot. Der Auftritt schreibt hier ohnehin Weiss vor
     (komponenten.css: `.cd-auf-rot { color: var(--cd-weiss) }`),
     und Weiss auf #C41118 sind 6,10:1.

     Der aktive Punkt kann sich hier nicht ueber die Farbe
     abheben — er tut es ueber Fettung und die dauerhaft
     ausgeklappte Beschriftung. Nach 1.4.1 ist das zulaessig,
     weil Farbe hier gar kein Traeger mehr ist. */
  .cd-abschnittsschiene--rot .cd-abschnittsschiene__link,
  .cd-abschnittsschiene--rot .cd-abschnittsschiene__nr,
  .cd-abschnittsschiene--rot .cd-abschnittsschiene__link:hover,
  .cd-abschnittsschiene--rot .cd-abschnittsschiene__link[aria-current],
  .cd-abschnittsschiene--rot .cd-abschnittsschiene__link[aria-current] .cd-abschnittsschiene__nr {
    color: var(--cd-weiss);
  }
  .cd-abschnittsschiene--rot .cd-abschnittsschiene__liste { border-inline-start-color: rgb(255 255 255 / .45); }

  /* ----------------------------------------------------------
     Beschriftung springt erst beim Zeigen heraus
     ----------------------------------------------------------
     Die Ruhelage zeigt nur die Nummer — die Schiene bleibt damit
     eine schmale Marke am Rand und nimmt dem Inhalt keine Breite.

     Drei Dinge, die das barrierefrei halten:

     1. Der Text bleibt IM Dokument. Zusammengeklappt wird ueber
        max-inline-size und opacity, nicht ueber display:none oder
        visibility:hidden — beides wuerde ihn aus dem
        Zugaenglichkeitsbaum nehmen. Der zugaengliche Name des
        Links bleibt so "01 Start" statt nur "01".
     2. Er erscheint bei :focus-visible genauso wie bei :hover.
        Nur auf Zeigen zu reagieren, waere fuer Tastaturnutzer
        eine unsichtbare Navigation.
     3. Der aktuelle Abschnitt zeigt seine Beschriftung dauerhaft.
        Wo man steht, darf nicht vom Mauszeiger abhaengen.
     ---------------------------------------------------------- */
  .cd-abschnittsschiene__text {
    max-inline-size: 0;
    opacity: 0;
    overflow: hidden;
    white-space: nowrap;
    transition: max-inline-size var(--cd-zeit) var(--cd-kurve),
                opacity var(--cd-zeit) ease;
  }
  .cd-abschnittsschiene__link:hover .cd-abschnittsschiene__text,
  .cd-abschnittsschiene__link:focus-visible .cd-abschnittsschiene__text,
  .cd-abschnittsschiene__link[aria-current] .cd-abschnittsschiene__text {
    max-inline-size: 12rem;
    opacity: 1;
  }

  /* Der aktuelle Abschnitt traegt Farbe UND Fettung — Farbe allein
     waere nach 1.4.1 kein zulaessiger Traeger. */
  .cd-abschnittsschiene__link[aria-current] {
    color: var(--cd-rot);
    font-weight: 600;
  }
  .cd-abschnittsschiene__link[aria-current] .cd-abschnittsschiene__nr { color: var(--cd-rot); }

  /* Der Fokusring darf nicht am zusammengeklappten Text kleben,
     sonst umschliesst er beim Durchtabben nur die Nummer. */
  .cd-abschnittsschiene__link:focus-visible {
    outline-offset: 3px;
  }

  /* Ohne Bewegungswunsch springt die Beschriftung ohne Uebergang
     heraus statt zu wachsen. */
  @media (prefers-reduced-motion: reduce) {
    .cd-abschnittsschiene__text { transition: none; }
  }
}

/* ============================================================
   Bis 1419 px — Rinne wird schmaler
   ============================================================ */
@media (max-width: 1419px) {
  :root { --cd-rinne: 32px; }
}

/* ============================================================
   Bis 1100 px — Kopfbereich schaltet um
   ============================================================
   Umgeschaltet wird ueber die BREITE, nicht ueber die Bedienart:
   Das Aufklappen haengt am Druck auf einen <button>, :hover traegt
   hier keine Bedeutung. (So loest es auch der Entwurf, mit
   derselben Begruendung im Quelltext.)
   ============================================================ */
@media (max-width: 1100px) {
  /* Am Handy faellt die Rechner-Navigation immer weg. Auf dem Tablet
     nur dann, wenn dort nicht ausdruecklich die Fassung
     „navigation" gewaehlt ist — deshalb zwei Regeln statt einer.
     Geschrieben als :not() und nicht als Ruecknahme: die
     Grunddarstellung von .cd-hauptnav und .cd-kopf__cta steht
     nirgends ausdruecklich da, ein „display: block" waere geraten.
     Was nie ausgeschaltet wurde, muss man nicht einschalten. */
  body:not([data-tabletmenue="navigation"]) .cd-hauptnav,
  body:not([data-tabletmenue="navigation"]) .cd-mega { display: none; }

  /* DER ANGEBOTS-KNOPF STEHT HIER BEWUSST NICHT MEHR.
     Er stand es bis zum 03.09.2026 — wirkungslos: komponenten.css
     laedt SPAETER und gibt .cd-knopf ein display: inline-flex mit
     derselben Spezifitaet (0,1,0). Die spaetere Stelle gewinnt, der
     Knopf war also nie ausgeblendet. Erst als der Selektor hier auf
     (0,2,0) wuchs, verschwand er — eine tote Regel, die beim
     Anfassen lebendig wurde und den Knopf auf dem Tablet nahm.
     Wer ihn steuern will, nimmt cd.kopf.angebotMobil/Tablet/Desktop;
     die Regeln dazu stehen weiter unten und tragen (0,2,0). */

  /* GEFUELLT UND NICHT NUR UMRISSEN.
     Vorher trug der Knopf `background: none` und einen Rand in
     `--cd-linie` (#DDE4E8). Gegen Weiss sind das 1,29 : 1 — der Rand
     war praktisch nicht da, und getragen hat den Knopf allein das
     Wort. Die Flaeche las sich wie ein abgeschaltetes Eingabefeld.
     WCAG 1.4.11 setzt fuer den Umriss eines Bedienelements 3 : 1 an.

     Jetzt Tinte auf Weiss: 17,69 : 1 fuer Schrift und Symbol. Die
     Balken zeichnen sich aus `currentColor` und werden dadurch von
     selbst weiss.

     ROT WAERE FALSCH. Im Haus gehoert Rot der Handlung — „Angebot
     anfordern", „Projekt besprechen", die Notfall-Flaeche. Ein roter
     Menueknopf stritte mit genau den Knoepfen, die etwas einbringen.

     Der Fokusring bleibt rot und liegt mit `outline-offset: 2px`
     AUSSERHALB der Flaeche, also auf dem weissen Grund der
     Kopfzeile — 6,10 : 1. Auf der dunklen Flaeche selbst laege er
     bei 2,9 : 1; der Versatz ist hier keine Kosmetik. */
  /* Menueknopf: schlichter Hamburger OHNE Kasten und OHNE Wort —
     drei Striche in Tinte auf der weissen Kopfzeile. Kein Rahmen
     noetig: die Striche selbst tragen den Kontrast (Tinte auf Weiss,
     ~19:1). Beim Oeffnen werden sie zum X — so ist der Zustand auch
     ohne Beschriftung ablesbar (das war der Einwand gegen ein reines
     Symbol). Das Wort "Menue" bleibt als Vorleser-Text.
     Vorbild: der schlichte Toggler auf elektro-hansmeier.de. */
  .cd-menueknopf {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 48px;
    block-size: 48px;
    padding: 0;
    background: none;
    border: 0;
    border-radius: var(--cd-r-feld);
    color: var(--cd-tinte);
    cursor: pointer;
    transition: background var(--cd-zeit) ease;
  }
  .cd-menueknopf:hover { background: var(--cd-flaeche-2); }
  /* "Menue" bleibt im Markup fuer Vorleseprogramme, ist aber
     unsichtbar — der Hamburger ist das sichtbare Bedienelement. */
  .cd-menueknopf__text {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }
  .cd-menueknopf__balken {
    position: relative;
    inline-size: 26px;
    block-size: 2.5px;
    border-radius: 2px;
    background: currentColor;
    transition: background var(--cd-zeit) ease;
  }
  .cd-menueknopf__balken::before,
  .cd-menueknopf__balken::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    block-size: 2.5px;
    border-radius: 2px;
    background: currentColor;
    transition: transform var(--cd-zeit) ease, inset-block-start var(--cd-zeit) ease;
  }
  .cd-menueknopf__balken::before { inset-block-start: -7.5px; }
  .cd-menueknopf__balken::after  { inset-block-start: 7.5px; }

  /* Offen → X: der mittlere Strich verschwindet, die zwei aeusseren
     ruecken in die Mitte und kreuzen sich. Reagiert auf das
     aria-expanded, das der Knopf ohnehin setzt. */
  .cd-menueknopf[aria-expanded="true"] .cd-menueknopf__balken { background: transparent; }
  .cd-menueknopf[aria-expanded="true"] .cd-menueknopf__balken::before {
    inset-block-start: 0;
    transform: rotate(45deg);
  }
  .cd-menueknopf[aria-expanded="true"] .cd-menueknopf__balken::after {
    inset-block-start: 0;
    transform: rotate(-45deg);
  }

  .cd-hauptzeile__inhalt { block-size: 64px; }
  .cd-marke__bild,
  .cd-fuss__logo { block-size: 36px; }

  .cd-kontaktschiene { display: none; }

  .cd-mobilleiste {
    position: fixed;
    inset-inline: 0;
    inset-block-end: 0;
    z-index: var(--cd-e-schiene);
    display: grid;
    /* ZAEHLT MIT, statt drei Spalten festzuschreiben: seit die
       drei Plaetze einzeln abschaltbar sind, koennen es auch zwei
       oder einer sein. Mit repeat(3) bliebe dann eine leere Spalte
       stehen und die uebrigen Knoepfe saessen aus der Mitte. */
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    background: var(--cd-weiss);
    border-block-start: 1px solid var(--cd-linie);
    box-shadow: 0 -14px 40px -26px rgb(13 26 33 / .7);
  }
  .cd-mobilleiste__knopf {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding-block: 10px;
    background: none;
    border: 0;
    color: var(--cd-dunkel);
    font-size: var(--cd-gr-mikro);
    font-family: var(--cd-schrift-mono);
    letter-spacing: .06em;
    cursor: pointer;
  }
  .cd-mobilleiste__knopf--rot { background: var(--cd-rot); color: var(--cd-weiss); }

  /* Platz fuer die Mobilleiste entsteht als Polster AM FUSSBEREICH,
     nicht als Aufschlag am body. Ein Aufschlag am body wuerde jede
     100vh-Rechnung auf der Seite verschieben. */
  .cd-fuss { padding-block-end: 72px; }
}

/* ============================================================
   Bis 900 px
   ============================================================ */
@media (max-width: 900px) {
  .cd-fuss__oben { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .cd-oberleiste__links .cd-oberleiste__link:first-child { display: none; }
}

/* ============================================================
   Bis 600 px — Mobilstufe
   ============================================================ */
@media (max-width: 600px) {
  :root { --cd-rinne: 16px; }

  /* Bedingungslos: die Tablet-Fassung „navigation" darf am Handy
     nicht durchschlagen. Oben steht sie als :not() — hier nicht. */
  .cd-hauptnav,
  .cd-mega { display: none; }
  .cd-fuss__oben { grid-template-columns: minmax(0, 1fr); gap: var(--cd-a6); }
  .cd-fuss { padding-block-start: 48px; }
  .cd-fuss__unten { flex-direction: column; align-items: flex-start; }

  /* ------------------------------------------------------------
     Kopf am Handy: das Band faellt weg
     ------------------------------------------------------------
     Gemessen bei 390 px: Das Band war 38 px hoch, trug 10-px-Schrift
     und zeigte von vier Eintraegen noch zwei — nach 162 px Scrollen
     fuhr es ohnehin auf 0. Dafuer standen dauerhaft 38 der 103 px
     Kopfhoehe fest, auf dem Geraet mit dem wenigsten Platz.

     Was darin stand, gibt es am Handy schon: die Telefonnummer in
     der cd-mobilleiste, E-Mail und Kunden-Login waren hier bereits
     ausgeblendet. Einzig die Notfall-Hotline gab es sonst nirgends
     — sie zieht als Knopf in die Hauptzeile um (siehe unten).

     display:none UND die Variable auf 0: Das eine nimmt das Band
     aus dem Fluss, das andere korrigiert --cd-kopf-gesamt. Die
     Variable traegt die scroll-padding-top der ganzen Seite und die
     Sprungziel-Abstaende in bahnen.css; bliebe sie auf 38 px,
     landeten alle Anker um eine Bandhoehe zu tief.
     ------------------------------------------------------------ */
  :root {
    --cd-kopf-oben: 0px;
    /* Die Hauptzeile waechst von 64 auf 72 px — die zwei
       beschrifteten Knoepfe sind 58 px hoch und brauchen Luft.
       Der Kopf ist damit 72 statt 103 px hoch.

       Der Wert steht als Variable und nicht als block-size am
       Element, damit --cd-kopf-gesamt ihn mitbekommt. Die
       1100-px-Stufe darueber setzt block-size direkt auf 64px;
       diese Zeile hier holt die Hoehe zurueck an die Variable. */
    --cd-kopf-haupt: 72px;
  }
  .cd-oberleiste { display: none; }

  /* basis.css setzt fuer alles unter 1100 px ein festes
     scroll-padding-top von 96 px — ein Wert von Hand, aus der Zeit
     mit Band. Er uebersteuert die Rechnung aus --cd-kopf-gesamt fuer
     die ganze Stufe. Ohne diese Zeile landete jedes Sprungziel am
     Handy 24 px zu tief, obwohl die Variable laengst stimmt. */
  html {
    scroll-padding-top: calc(var(--cd-kopf-gesamt) + 16px);
  }

  /* Die Luecke ist bewusst schmal. Gemessen bei 320 px: Logo 147,
     zwei Knoepfe, dazwischen die Rinne von 2 x 16 px — es bleiben
     neun Pixel Spiel. Die gehen in die Knopfbreite, nicht in den
     Abstand: Ein Wort, das an seiner Kante klebt, faellt mehr auf
     als zwei Knoepfe, die dicht beieinanderstehen. */
  .cd-hauptzeile__inhalt { block-size: var(--cd-kopf-haupt); gap: 6px; }

  /* DIE KNOEPFE RECHTS, EGAL WIE VIELE ES SIND.
     Die Zeile ist space-between: Bei zwei Kindern steht eines
     links und eines rechts, bei dreien landet das mittlere in der
     MITTE der Zeile. Mit dem Notfall-Knopf waeren es drei.

     Statt jedem Knopf ein margin-inline-start:auto zu geben — das
     schoebe sie auseinander — schiebt die Marke alles Folgende
     nach rechts. Das gilt dann fuer zwei Knoepfe genauso wie fuer
     drei, falls der Angebots-Knopf am Handy eingeschaltet wird. */
  .cd-hauptzeile__inhalt { justify-content: flex-start; }
  .cd-marke { margin-inline-end: auto; }

  /* --- Notfall-Knopf: beschriftete Flaeche -------------------
     Der Notfall-Knopf traegt die Bauform der cd-mobilleiste (Symbol
     16 px, Beschriftung 11 px IBM Plex Mono). Der Menue-Knopf ist
     NICHT mehr Teil dieser Bauform: er ist der schlichte Hamburger
     aus der Basis oben (ohne Kasten, ohne Wort, mit X beim Oeffnen).
     Damit steht rechts eine rote Handlung (Notfall) neben einem
     ruhigen Navigations-Symbol (Menue) — bewusst unterschiedlich.
     Der "Zustand fehlt ohne Wort"-Einwand ist mit dem X gelöst. */
  .cd-kopf__notfall {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    /* 62 statt 58 breit — "Notfall" ist mit 51 px das laengste
       Wort und stand in 58 px nur vier Pixel von beiden Kanten
       entfernt. Beide Knoepfe bekommen dieselbe Breite: Ungleiche
       Kaesten nebeneinander lesen sich als Versehen, auch wenn
       jeder fuer sich richtig gemessen ist. */
    inline-size: 62px;
    block-size: 58px;
    padding: 0;
    border-radius: var(--cd-r-feld);
    font-family: var(--cd-schrift-mono);
    font-size: var(--cd-gr-mikro);
    font-weight: 400;
    /* Die Hausspur ist .06em. Hier .03em: Die Sperrung traegt bei
       einem einzelnen Wort in einem engen Kasten nichts bei, kostet
       aber ueber sieben Zeichen fuenf Pixel. */
    letter-spacing: .03em;
    line-height: 1;
  }
  .cd-kopf__notfall .cd-symbol {
    inline-size: 16px;
    block-size: 16px;
  }
  .cd-kopf__notfall {
    background: var(--cd-rot);
    color: var(--cd-weiss);
    border: 1px solid var(--cd-rot);
    transition: background var(--cd-zeit) ease, border-color var(--cd-zeit) ease;
  }
  .cd-kopf__notfall:hover {
    background: var(--cd-rot-hell);
    border-color: var(--cd-rot-hell);
    color: var(--cd-weiss);
  }

}
/* Schlichter Seitenkopf fuer System- und Rechtstextseiten ohne
   eigenes Hero-Element. Der Titel stammt aus dem Seitenbaum. */
.cd-seitentitel {
  padding-block: clamp(2.5rem, 6vw, 5.5rem);
  background: var(--cd-flaeche-2);
  border-block-end: 1px solid var(--cd-linie-2);
}

.cd-seitentitel h1 {
  max-inline-size: 22ch;
}

/* ============================================================
   Kopfbereich — die Schalter aus den Site-Einstellungen
   ============================================================
   Die Werte stehen als Attribute am body (setup.typoscript).
   CSS statt Fluid, wo es um Fensterbreiten geht: der Server
   weiss nicht, wie breit das Fenster ist.
   ============================================================ */

/* Ohne obere Leiste ist der Kopf 38 px flacher. Der Wert steckt in
   allen Sprungzielen und in den mitlaufenden Spalten — deshalb wird
   die Variable an der Wurzel korrigiert und nicht jede Stelle
   einzeln. :has() greift dafuer vom body auf die Wurzel zurueck. */
html:has(body[data-oberleiste="aus"]) {
  --cd-kopf-oben: 0px;
}

/* --- Obere Leiste faehrt ein --------------------------------
   Das Skript setzt cd-oben-weg an die Wurzel, sobald mehr als
   eine halbe Leistenhoehe gescrollt ist. Die Leiste faehrt
   zusammen, Logo und Navigation bleiben stehen. Weil dabei
   dieselbe Variable auf 0 geht, wandern auch die Sprungziele und
   die mitlaufenden Spalten mit. */
.cd-oberleiste {
  block-size: var(--cd-kopf-oben);
  overflow: hidden;
  transition: block-size var(--cd-zeit) var(--cd-kurve);
}

/* NUR MIT ZEIGEGERAET. Die Leiste steht IM FLUSS. Faehrt sie ein,
   verliert das Dokument 38 px, und alles darunter rutscht um 38 px
   nach oben. Am Rechner ist das die gewollte Bewegung: das Rad
   bewegt die Seite, der Zeiger bleibt liegen.

   Am Finger ist es ein Fehler. Der Daumen HAELT den Inhalt fest,
   waehrend die Seite unter ihm um 38 px wegspringt — man verliert
   die Zeile, die man gerade liest.

   Gemessen am 04.09.2026 auf der Startseite, Kopfhoehe bei y=0
   gegen y=200:
       390 px   73 -> 73   kein Sprung (Leiste ist display:none)
       600 px   73 -> 73   kein Sprung
       601 px  103 -> 65   38 px   <- Bruchkante
       834 px  103 -> 65   38 px   iPad hochkant
      1440 px  123 -> 85   38 px   dort gewollt

   Die Klasse setzt das Skript weiter — sie bleibt als Anschluss
   fuer eine andere Fingerfassung. Nur die Wirkung entfaellt, und
   damit steht --cd-kopf-oben am Finger dauerhaft auf 38 px: die
   Sprungziele stimmen dadurch von selbst.

   Bedienart und nicht Breite, wie bei --cd-zielgroesse: ein iPad
   quer ist 1112 px breit und wird trotzdem mit dem Finger bedient.
   Siehe tokens.css, Zeile 165. */
@media (hover: hover) and (pointer: fine) {
  html.cd-oben-weg {
    --cd-kopf-oben: 0px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cd-oberleiste { transition: none; }
}

/* --- Kopf haftet oder blaettert mit ------------------------- */
body[data-kopf="frei"] .cd-kopf {
  position: static;
}

/* --- Ganzer Kopf faehrt weg --------------------------------
   Beim Herunterblaettern raus, beim Hochblaettern zurueck. Der
   Kopf bleibt dabei haftend — er wird nur verschoben, nicht aus
   dem Fluss genommen; sonst spraenge der Inhalt beim Zurueckkommen.

   translate und nicht block-size: die Hauptzeile traegt Logo und
   Navigation, die beim Zusammenfahren zerlaufen wuerden.

   Zurueck kommt er ausserdem, sobald etwas in ihm den Fokus hat —
   sonst tabbt man in eine Navigation, die nicht zu sehen ist
   (WCAG 2.4.11 Fokus nicht verdeckt). Diese Regel setzt das
   Skript ueber cd-kopf-fokus. */
.cd-kopf {
  transition: transform var(--cd-zeit) var(--cd-kurve);
}

html.cd-kopf-weg:not(.cd-kopf-fokus) .cd-kopf {
  transform: translateY(-100%);
}

@media (prefers-reduced-motion: reduce) {
  .cd-kopf { transition: none; }
}

/* --- Kunden-Login in der Hauptzeile ------------------------- */
.cd-kopf__login {
  display: inline-flex;
  align-items: center;
  gap: var(--cd-a2);
  min-block-size: 24px;
  font-size: var(--cd-gr-klein);
  color: var(--cd-text-2);
  white-space: nowrap;
}
.cd-kopf__login:hover { color: var(--cd-rot); }
.cd-kopf__login .cd-symbol { inline-size: 16px; block-size: 16px; }

/* Unterhalb der Menue-Umschaltung ist in der Hauptzeile kein Platz —
   dort fuehrt der Weg ueber das mobile Menue. */
@media (max-width: 1100px) {
  .cd-kopf__login { display: none; }
}

/* --- Angebots-Knopf je Geraeteklasse ------------------------
   Die Schwellen sind die des uebrigen Auftritts: bis 600 px
   Mobil, bis 1100 px Tablet, darueber Rechner. */
@media (max-width: 600px) {
  /* Im Kopf steht er bei „kopf" und bei „beides". Geschrieben als
     doppeltes :not(), damit ein spaeter ergaenzter Wert nicht
     versehentlich den Knopf einblendet. */
  body:not([data-angebot-mobil="kopf"]):not([data-angebot-mobil="beides"]) .cd-kopf__cta { display: none; }
}

@media (min-width: 601px) and (max-width: 1100px) {
  body:not([data-angebot-tablet="kopf"]):not([data-angebot-tablet="beides"]) .cd-kopf__cta { display: none; }
}

/* Der Notfall-Knopf in der Hauptzeile. Er steht NUR bis 600 px
   (Mobilstufe weiter oben); darueber traegt die obere Leiste die
   Hotline und hat dafuer ihren eigenen Schalter. Deshalb hier EINER
   und nicht drei wie beim Angebots-Knopf.

   Der Knopf weicht ohnehin, wenn an seiner Stelle ein
   Personen-Symbol fuer Login oder Konto steht — im Kopf ist neben
   Logo und Menue-Knopf Platz fuer EINEN Kasten. Dieser Schalter
   nimmt ihn auch dann weg, wenn dort nichts anderes hin will. */
@media (max-width: 600px) {
  body[data-notfall-mobil="0"] .cd-kopf__notfall { display: none; }
}

@media (min-width: 1101px) {
  body[data-angebot-desktop="0"] .cd-kopf__cta { display: none; }
}

/* ============================================================
   Auftritt der mobilen Schublade
   ============================================================
   Welche Fassung gilt, steht als data-menuebewegung am body
   (Site-Einstellung). Das Skript setzt nur cd-mobilmenue--auf,
   sobald die Schublade im Baum steht.

   Ohne Skript bleibt die Klasse aus — dann greift keine dieser
   Regeln, und die Schublade ist schlicht da. Ein Menue, das ohne
   Skript unsichtbar waere, waere ein Menue weniger.
   ============================================================ */
.cd-mobilmenue:not([hidden]) .cd-mobilmenue__feld,
.cd-mobilmenue:not([hidden]) .cd-mobilmenue__schleier {
  transition: transform .32s var(--cd-kurve), opacity .32s ease;
}

/* Die BEWEGUNG ist eine Eigenschaft und keine Regelfamilie.
   ------------------------------------------------------------
   Frueher hatte jeder der vier Werte eigene Regeln auf __feld und
   __schleier. Sobald eine Fassung ihre LAGE aendert — Blatt von
   unten, Band unter dem Kopf —, muesste sie jede davon stechen.
   Jetzt setzt die Bewegung nur Werte, und eine Fassung
   ueberschreibt sie in EINER Zeile.

   Wer hier eine Regel ergaenzt statt einer Eigenschaft, holt die
   alte Matrix zurueck. */
.cd-mobilmenue:not(.cd-mobilmenue--auf) .cd-mobilmenue__feld {
  transform: var(--cd-mm-zu);
  opacity: var(--cd-mm-feld-deck);
}
.cd-mobilmenue:not(.cd-mobilmenue--auf) .cd-mobilmenue__schleier {
  opacity: var(--cd-mm-schleier-deck);
}

/* --- von rechts hereinschieben (Vorgabe) --- */
body[data-menuebewegung="schieben"] .cd-mobilmenue {
  --cd-mm-zu: translateX(100%);
  --cd-mm-schleier-deck: 0;
}

/* --- einblenden --- */
body[data-menuebewegung="blende"] .cd-mobilmenue {
  --cd-mm-feld-deck: 0;
  --cd-mm-schleier-deck: 0;
}

/* --- von oben herunterfahren ---
   Hier aendert sich auch die Gestalt: die Schublade sitzt oben und
   nimmt die volle Breite. Eine Lade, die von oben kommt und rechts
   klebt, sieht nach Versehen aus.

   ACHTUNG: Damit besitzt die BEWEGUNG eine Lage — und die Fassungen
   tun das auch. Eine Fassung mit eigener Lage (blatt, band,
   zweispaltig) muss diese Werte mitsetzen. Sie steht in
   bahnen/cd_menuefassungen.css und damit spaeter, gewinnt also. */
body[data-menuebewegung="oben"] .cd-mobilmenue {
  --cd-mm-unten: auto;
  --cd-mm-start: 0;
  --cd-mm-ende: 0;
  --cd-mm-breite: 100%;
  --cd-mm-max-hoehe: 88vh;
  --cd-mm-zu: translateY(-100%);
  --cd-mm-schleier-deck: 0;
}

@media (prefers-reduced-motion: reduce) {
  .cd-mobilmenue {
    --cd-mm-zu: none;
    --cd-mm-feld-deck: 1;
    --cd-mm-schleier-deck: 1;
  }
  .cd-mobilmenue .cd-mobilmenue__feld,
  .cd-mobilmenue .cd-mobilmenue__schleier {
    transition: none;
    transform: none;
    opacity: 1;
  }
}


/* ------------------------------------------------------------
   Aktueller Punkt im Aufklappmenue
   ------------------------------------------------------------
   Rote Schrift, kein roter Grund. Zwoelf Punkte untereinander
   unterscheiden sich sonst durch nichts, und der Hauptpunkt
   darueber sagt nur, in welchem BEREICH man ist — nicht, auf
   welcher Seite.

   Eine gefuellte Flaeche waere hier zu laut: Das Aufklappfeld ist
   ohnehin schon eine Flaeche ueber dem Inhalt, und ein roter Block
   darin zieht mehr Aufmerksamkeit auf sich als der Handlungsknopf
   daneben.

   #C41118 auf Weiss sind 5,9:1 — ueber der Anforderung von 4,5:1.
   ------------------------------------------------------------ */
.cd-mega__link[aria-current="page"] {
  color: var(--cd-rot);
  /* Der Gewichtssprung gehoert dazu und ist keine Geschmacksfrage:
     Rot allein waere ein Verstoss gegen WCAG 1.4.1 (Benutzung von
     Farbe) — wer Rot nicht von Anthrazit unterscheidet, saehe sonst
     nicht, auf welcher Seite er steht. 600 gegen 400 traegt auch
     ohne Farbe. */
  font-weight: 600;
}
.cd-mega__link[aria-current="page"]:hover { color: var(--cd-rot-tief); }

/* ============================================================
   Schwebender Nach-oben-Knopf am Handy
   ============================================================
   Am Rechner sitzt der Knopf in der seitlichen Kontaktschiene.
   Die ist ab 900 px abwaerts ausgeblendet — dort tritt dieser
   hier an ihre Stelle.

   Er wird NICHT beim Blaettern ein- und ausgeblendet. Das ist
   dieselbe Entscheidung wie beim Knopf in der Schiene: ein
   Bedienelement, das auftaucht und verschwindet, wandert in der
   Tabreihenfolge hin und her (WCAG 3.2.3, 2.4.3). Er steht also
   immer da, dafuer zurueckhaltend.

   Ein- und ausschalten laesst er sich in den Site-Einstellungen
   (cd.obenKnopfMobil) — der Wert steht als data-obenknopf-mobil
   am body.
   ============================================================ */
.cd-obenschweber { display: none; }

@media (max-width: 900px) {
  /* Sichtbar ist der Grundzustand — ohne Skript steht der Knopf
     da. huelle.js haengt .cd-obenschweber--fort an, solange man
     ohnehin oben ist, und nimmt sie beim Blaettern wieder weg.
     display statt opacity: ein unsichtbarer, aber anspringbarer
     Knopf waere eine Tabstation ins Leere (WCAG 2.4.3). */
  body[data-obenknopf-mobil="1"] .cd-obenschweber {
    position: fixed;
    /* Ueber der unteren Kontaktleiste. Deren Hoehe misst
       huelle.js und legt sie hier ab; ohne Leiste ist sie 0. */
    inset-block-end: calc(var(--cd-mobilleiste-hoehe, 0px) + 12px);
    inset-inline-end: var(--cd-rinne, 16px);
    z-index: var(--cd-e-schiene);

    /* 44 px: Zielgroesse nach WCAG 2.5.8, mit Reserve. */
    inline-size: 44px;
    block-size: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;

    appearance: none;
    cursor: pointer;
    border: 1px solid var(--cd-linie);
    border-radius: 50%;
    background: var(--cd-weiss);
    color: var(--cd-tinte);
    box-shadow: 0 8px 24px -12px rgb(13 26 33 / .55);
    transition: border-color var(--cd-zeit) var(--cd-kurve),
                color var(--cd-zeit) var(--cd-kurve);
  }

  body[data-obenknopf-mobil="1"] .cd-obenschweber:hover,
  body[data-obenknopf-mobil="1"] .cd-obenschweber:focus-visible {
    border-color: var(--cd-rot);
    color: var(--cd-rot);
  }

  body[data-obenknopf-mobil="1"] .cd-obenschweber--fort { display: none; }

  /* Form. Rund ist die Vorgabe; eckig nimmt den Knopfradius des
     Hauses auf, damit er zu den uebrigen Knoepfen passt. */
  body[data-obenknopf-form="eckig"] .cd-obenschweber {
    /* Nicht --cd-r-knopf: der ist im Haus 3 px und damit fast
       kantig. Gemeint ist "eckig mit weichen Ecken", also der
       Kartenradius. */
    border-radius: var(--cd-r-karte);
  }
}

@media (max-width: 900px) and (prefers-reduced-motion: reduce) {
  body[data-obenknopf-mobil="1"] .cd-obenschweber { transition: none; }
}

/* ------------------------------------------------------------
   „Nach oben“ auf dem Desktop — nur wenn die Kontaktleiste fehlt
   ------------------------------------------------------------
   Auf grossen Schirmen sass der „Nach oben“-Knopf bisher IN der
   schwebenden Leiste. Ist die Leiste abgeschaltet
   (cd.kontaktschiene: false), fehlt er dort — dann uebernimmt der
   eigenstaendige .cd-obenschweber unten rechts.

   :not(:has(.cd-kontaktschiene)) haelt beide auseinander: steht die
   Leiste wieder, traegt sie den Knopf und dieser hier bleibt aus —
   kein doppelter „Nach oben“. Dieselbe :has()-Technik wie beim
   Kopf (html:has(body[data-oberleiste="aus"])).
   ------------------------------------------------------------ */
@media (min-width: 901px) {
  body[data-obenknopf-mobil="1"]:not(:has(.cd-kontaktschiene)) .cd-obenschweber {
    position: fixed;
    inset-block-end: 24px;
    inset-inline-end: 24px;
    z-index: var(--cd-e-schiene);
    inline-size: 46px;
    block-size: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    appearance: none;
    cursor: pointer;
    border: 1px solid var(--cd-linie);
    border-radius: 50%;
    background: var(--cd-weiss);
    color: var(--cd-tinte);
    box-shadow: 0 8px 24px -12px rgb(13 26 33 / .55);
    transition: border-color var(--cd-zeit) var(--cd-kurve),
                color var(--cd-zeit) var(--cd-kurve);
  }
  body[data-obenknopf-mobil="1"]:not(:has(.cd-kontaktschiene)) .cd-obenschweber:hover,
  body[data-obenknopf-mobil="1"]:not(:has(.cd-kontaktschiene)) .cd-obenschweber:focus-visible {
    border-color: var(--cd-rot);
    color: var(--cd-rot);
  }
  /* Solange man oben ist, haengt huelle.js --fort an; dann weg.
     Der :not(:has())-Zusatz haelt die Spezifitaet auf Hoehe der
     Anzeige-Regel darueber — sonst schlaege „anzeigen“ das
     „ausblenden“, und der Knopf stuende auch ganz oben schon da. */
  body[data-obenknopf-mobil="1"]:not(:has(.cd-kontaktschiene)) .cd-obenschweber--fort { display: none; }
  body[data-obenknopf-form="eckig"]:not(:has(.cd-kontaktschiene)) .cd-obenschweber {
    border-radius: var(--cd-r-karte);
  }
}

@media (min-width: 901px) and (prefers-reduced-motion: reduce) {
  body[data-obenknopf-mobil="1"]:not(:has(.cd-kontaktschiene)) .cd-obenschweber { transition: none; }
}

/* ------------------------------------------------------------
   Konto-Block in der Menueschublade
   ------------------------------------------------------------
   Bis 1100 px faellt die obere Leiste weg — und mit ihr der
   Kunden-Login und das Konto-Menue. Wer sich unterwegs anmelden
   oder ins Portal wollte, fand in der Schublade bisher nichts.

   ABGESETZT UND NICHT ALS DRITTE GRUPPE: Der Kundenbereich ist ein
   eigener Ort und keine weitere Leistung. Die getoente Flaeche mit
   Linie darueber sagt das, ohne dass eine Ueberschrift es
   behaupten muss.
   ------------------------------------------------------------ */
.cd-mobilmenue__block--konto {
  margin-block-start: var(--cd-a5);
  padding-block: var(--cd-a4) var(--cd-a5);
  background: var(--cd-flaeche-2);
  border-block-start: 1px solid var(--cd-linie-2);
}

.cd-mobilkonto__name {
  display: flex;
  align-items: center;
  gap: .6ch;
  margin: 0 0 var(--cd-a3);
  font-size: var(--cd-gr-klein);
  color: var(--cd-text-3);
}
.cd-mobilkonto__name .cd-symbol { inline-size: 16px; block-size: 16px; }

.cd-mobilkonto__liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 2px;
}

/* Die ganze Zeile ist das Ziel und nicht nur das Wort.
   ------------------------------------------------------------
   DER SELEKTOR MUSS DAS a[href] NENNEN, nicht nur die Klasse:
   basis.css:186 gibt jedem a[href] min-block-size:
   var(--cd-zielgroesse), Zeile 190 nimmt es mit
   `li a[href] { min-block-size: 0 }` (0,1,2) sofort wieder weg.
   Eine blosse Klassenregel (0,1,0) verliert dagegen — gemessen
   blieben die Zeilen bei 42 px statt 44.

   .cd-mobilkonto__liste a[href] traegt 0,2,1 und gewinnt. Die
   Marke schaltet in tokens.css nach Bedienart: 44 px am Finger,
   24 px an der Maus. Deshalb hier die MARKE und keine harte 44.

   Dieselbe Stelle steht in cd_kundenmenue.css — wer die eine
   anfasst, sieht bei der anderen nach. */
.cd-mobilkonto__liste a[href] {
  min-block-size: var(--cd-zielgroesse, 24px);
}
.cd-mobilkonto__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--cd-a3);
  padding: 8px 10px;
  border-radius: var(--cd-r-feld);
  color: var(--cd-dunkel);
  font-weight: 500;
  text-decoration: none;
}
.cd-mobilkonto__link:hover { background: var(--cd-weiss); }

/* Der aktuelle Punkt traegt eine Kante VORNE — in einer senkrechten
   Liste laese sich eine Unterstreichung wie ein Trennstrich zum
   naechsten Punkt. Zusaetzlich die Flaeche: Farbe allein traegt
   keine Information. */
.cd-mobilkonto__link--aktiv {
  background: var(--cd-weiss);
  box-shadow: inset 3px 0 0 var(--cd-rot);
}

.cd-mobilkonto__zahl {
  flex: 0 0 auto;
  min-inline-size: 20px;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--cd-rot);
  color: var(--cd-weiss);
  font-size: 11px;
  font-weight: 700;
  text-align: center;
}

/* Anmelden und Abmelden als Knopf: Beides ist ein Vorgang und kein
   Verweis auf eine weitere Seite unter vielen. */
.cd-mobilkonto__anmelden,
.cd-mobilkonto__abmelden {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5ch;
  min-block-size: var(--cd-zielgroesse, 24px);
  margin-block-start: var(--cd-a4);
  padding: 10px 16px;
  border: 1px solid var(--cd-linie);
  border-radius: var(--cd-r-knopf);
  background: var(--cd-weiss);
  color: var(--cd-text-2);
  font-family: var(--cd-schrift-text);
  font-size: var(--cd-gr-klein);
  font-weight: 600;
  text-decoration: none;
}
.cd-mobilkonto__anmelden { margin-block-start: 0; }
.cd-mobilkonto__anmelden .cd-symbol,
.cd-mobilkonto__abmelden .cd-symbol { inline-size: 15px; block-size: 15px; }
.cd-mobilkonto__anmelden:hover,
.cd-mobilkonto__abmelden:hover {
  border-color: var(--cd-rot);
  color: var(--cd-rot);
}

/* ------------------------------------------------------------
   Konto-Knopf im Kopf (Handy und Tablet)
   ------------------------------------------------------------
   Er traegt DIESELBE Bauform wie der Notfall-Knopf — Symbol
   16 px, Beschriftung 11 px Monospace, 62 × 58 px. Zwei Kaesten
   nebeneinander in verschiedenen Massen lesen sich als Versehen,
   auch wenn jeder fuer sich richtig gemessen ist.

   WELCHER VON BEIDEN ERSCHEINT, entscheiden die vier Schalter am
   body. Im Kopf ist neben Logo und Menue-Knopf Platz fuer EINEN
   weiteren Kasten — deshalb eine Achse und keine zwei Haken.
   ------------------------------------------------------------ */
.cd-kontoknopf { display: none; }

@media (max-width: 1100px) {
  /* Nur das AUSSEHEN. Wo der Knopf erscheint, steht weiter unten. */
  .cd-kontoknopf {
    position: relative;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    inline-size: 62px;
    block-size: 58px;
    padding: 0;
    background: none;
    border: 0;
    border-radius: var(--cd-r-feld);
    color: var(--cd-tinte);
    font-family: var(--cd-schrift-mono);
    font-size: var(--cd-gr-mikro);
    font-weight: 400;
    letter-spacing: .03em;
    line-height: 1;
    cursor: pointer;
  }
  .cd-kontoknopf:hover {
    background: var(--cd-flaeche-2);
  }
  .cd-kontoknopf .cd-symbol {
    inline-size: 16px;
    block-size: 16px;
  }

  /* Die Zahl sitzt AM SYMBOL und nicht neben dem Wort: Neben dem
     Wort verschoebe sie den Kasten und liesse ihn neben dem
     Notfall-Knopf ungleich breit erscheinen. */
  .cd-kontoknopf__zahl {
    position: absolute;
    inset-block-start: 4px;
    inset-inline-start: 32px;
    min-inline-size: 16px;
    padding: 0 4px;
    border-radius: 999px;
    background: var(--cd-rot);
    color: var(--cd-weiss);
    font-size: 10px;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
  }

  /* „aus": weder Konto noch Personen-Symbol. Der Notfall-Knopf
     bleibt — er ist der Fall, in dem es eilt. */
}

/* ------------------------------------------------------------
   Wo Login und Konto stehen — vier Schalter, zwei Zustaende
   ------------------------------------------------------------
   Die Bausteine sind UNGECACHT: der Name eines Kunden darf nicht in
   den gruppen-gemeinsamen Seiten-Cache. Sie tragen ihren Zustand
   deshalb selbst als data-zustand. Die EINSTELLUNG dagegen ist fuer
   alle Besucher dieselbe und steht am body — so entscheidet das
   Stylesheet, ohne dass eine gecachte Vorlage den Anmeldezustand
   kennen muesste.

   Dass Gast und Konto beide „symbol" waehlen duerfen, ist kein
   Widerspruch: sie treten nie zugleich auf.
   ------------------------------------------------------------ */
@media (max-width: 600px) {
  body[data-login-mobil="symbol"] .cd-kontoknopf[data-zustand="gast"],
  body[data-konto-mobil="symbol"] .cd-kontoknopf[data-zustand="konto"] { display: inline-flex; }

  body[data-login-mobil="symbol"] .cd-hauptzeile__inhalt:has(.cd-kontoknopf[data-zustand="gast"]) .cd-kopf__notfall,
  body[data-konto-mobil="symbol"] .cd-hauptzeile__inhalt:has(.cd-kontoknopf[data-zustand="konto"]) .cd-kopf__notfall { display: none; }

  /* NUR IN DER MENUESCHUBLADE. Beide Schubladen tragen denselben
     Inhaltsblock — dieselbe Klasse, derselbe COA_INT. Ohne die
     Einschraenkung erschlaegt die Regel den Inhalt der KONTO-
     Schublade: Ihre Huelle erscheint bei „symbol", der Block aber
     verschwaende bei allem ausser „menue" — also gerade dann, wenn
     es die Schublade ueberhaupt gibt. Sie stand dann offen und leer
     da. Gemessen am 04.09.2026: 7 Punkte im Markup, 0 sichtbar. */
  body:not([data-login-mobil="menue"]) .cd-mobilmenue:not(.cd-mobilmenue--konto) .cd-mobilmenue__block--konto:has(.cd-mobilkonto[data-zustand="gast"]),
  body:not([data-konto-mobil="menue"]) .cd-mobilmenue:not(.cd-mobilmenue--konto) .cd-mobilmenue__block--konto:has(.cd-mobilkonto[data-zustand="konto"]) { display: none; }
}

@media (min-width: 601px) and (max-width: 1100px) {
  body[data-login-tablet="symbol"] .cd-kontoknopf[data-zustand="gast"],
  body[data-konto-tablet="symbol"] .cd-kontoknopf[data-zustand="konto"] { display: inline-flex; }

  body[data-login-tablet="symbol"] .cd-hauptzeile__inhalt:has(.cd-kontoknopf[data-zustand="gast"]) .cd-kopf__notfall,
  body[data-konto-tablet="symbol"] .cd-hauptzeile__inhalt:has(.cd-kontoknopf[data-zustand="konto"]) .cd-kopf__notfall { display: none; }

  /* NUR IN DER MENUESCHUBLADE — dieselbe Begruendung wie oben. */
  body:not([data-login-tablet="menue"]):not([data-login-tablet="beides"]) .cd-mobilmenue:not(.cd-mobilmenue--konto) .cd-mobilmenue__block--konto:has(.cd-mobilkonto[data-zustand="gast"]),
  body:not([data-konto-tablet="menue"]):not([data-konto-tablet="beides"]) .cd-mobilmenue:not(.cd-mobilmenue--konto) .cd-mobilmenue__block--konto:has(.cd-mobilkonto[data-zustand="konto"]) { display: none; }

  /* In der oberen Leiste steht der Login auf dem Tablet nur, wenn er
     dort gewaehlt ist. Sonst stuende er DOPPELT — Leiste und
     Schublade. Genau das war bis zum 03.09.2026 der Fall, weil die
     Leiste erst unter 600 px verschwindet. */
  /* ZWEI :not() JE ZEILE, und das ist Absicht: „beides" heisst
     obere Leiste UND Menueschublade. Wer das zweite wegkuerzt,
     macht aus der Doppelwahl wieder eine Einfachwahl — und der
     Login verschwindet still an einer der beiden Stellen. */
  body:not([data-login-tablet="oberleiste"]):not([data-login-tablet="beides"]) .cd-kopf__kontoslot[data-zustand="gast"],
  body:not([data-konto-tablet="oberleiste"]):not([data-konto-tablet="beides"]) .cd-kopf__kontoslot[data-zustand="konto"] { display: none; }
}

/* Die Konto-Schublade ist eine gewoehnliche Schublade. Nur ihr
   Inhaltsblock beginnt oben und nicht am Fuss — sie hat keine
   Inhaltsgruppen darueber, von denen er sich absetzen muesste. */
.cd-mobilmenue--konto .cd-mobilmenue__block--konto {
  margin-block-start: 0;
  border-block-start: 0;
  background: none;
}


/* ------------------------------------------------------------
   Tablet-Fassung „navigation": die Rechner-Navigation bleibt
   ------------------------------------------------------------
   Die Ausblendung oben traegt dafuer ein :not() — sie greift bei
   dieser Fassung gar nicht erst. Hier bleibt nur der Menueknopf
   wegzuraeumen und die Navigation enger zu setzen. Das Verhalten der Aufklapper
   liegt im Skript: ohne Zeiger gibt es kein Hover, und ein
   Mega-Menue, das nur auf Hover aufgeht, ist auf einem Tablet
   ueberhaupt nicht erreichbar.
   ------------------------------------------------------------ */
/* AB 801 PX UND NICHT AB 601. Gemessen bei eingeschalteter
   Fassung: das Logo braucht 147 px, die sechs Menuepunkte 575 px —
   zusammen 722. Bei 800 px lief die Zeile ueber, bei 900 px war der
   Angebots-Knopf auf 44 px gequetscht und seine Aufschrift
   abgeschnitten. Darunter faellt die Fassung deshalb auf die
   Schublade zurueck (Block darunter). */
@media (min-width: 801px) and (max-width: 1100px) {
  body[data-tabletmenue="navigation"] .cd-menueknopf { display: none; }

  /* Enger gesetzt: sechs Punkte brauchen bei 1280 px reichlich Luft,
     bei 900 px nicht mehr. */
  body[data-tabletmenue="navigation"] .cd-hauptnav__liste { gap: 16px; }
  body[data-tabletmenue="navigation"] .cd-mega__inhalt { padding-inline: var(--cd-rinne); }
}

/* ============================================================
   1101 bis 1200 px — die Luecke ueber dem Umschaltpunkt
   ============================================================
   Ab 1101 px gilt die Rechner-Kopfzeile. Bei 1112 px — dem iPad Air
   in Querlage — passt sie aber noch nicht:

     Logo ~200 + 30 + Navigation 625 + 30 + Angebots-Knopf ~200
     = rund 1085 px gebraucht, 1048 px vorhanden.

   Fehlten also knapp 40 px. Der Knopf ist das nachgiebigste Glied
   der Zeile und wurde auf 192 px gequetscht — ein Pixel zu wenig
   fuer "Angebot anfordern", und die Aufschrift brach auf zwei
   Zeilen. Die Kopfzeile wuchs dadurch von 45 auf 64 px Knopfhoehe.

   WARUM NICHT DEN UMSCHALTPUNKT VERSCHIEBEN: 1100 px ist kein
   Kopfzeilen-Wert, sondern der Umschaltpunkt des ganzen Auftritts —
   er steht an 38 Stellen in 20 Dateien. Ihn wegen der Kopfzeile zu
   verschieben, verstellt Karten, Bahnen, Fallstudien und das
   Kundenmenue gleich mit.

   Stattdessen dasselbe Mittel wie im Tablet-Band darueber: enger
   setzen. 26 auf 16 px Abstand zwischen den sechs Menuepunkten
   spart 50 px, die Zeilenluecke 30 auf 20 px weitere 20 px. Macht
   70 px — genug fuer die fehlenden 40, mit Reserve.

   flex: 0 0 auto am Knopf ist die eigentliche Sicherung: Er kann
   dann gar nicht mehr schmaler werden als seine Aufschrift, egal
   wie eng es wird. Bricht die Zeile spaeter doch einmal, weicht
   sichtbar die Navigation — und nicht still der Handlungsknopf.
   ============================================================ */
@media (min-width: 1101px) and (max-width: 1200px) {
  .cd-hauptzeile__inhalt { gap: 20px; }
  .cd-hauptnav__liste { gap: 16px; }
  .cd-kopf__cta { flex: 0 0 auto; }
}

/* Rueckfall unter 801 px: dort passt die Rechner-Navigation nicht.
   Die Ausblendung weiter oben traegt ein :not() und greift bei dieser
   Fassung nicht — deshalb hier ausdruecklich. Der Menueknopf bleibt
   stehen, weil ihn der Block darueber erst ab 801 px wegnimmt. */
@media (min-width: 601px) and (max-width: 800px) {
  body[data-tabletmenue="navigation"] .cd-hauptnav,
  body[data-tabletmenue="navigation"] .cd-mega { display: none; }
}

/* Zweiter Rueckfall: MIT Angebots-Knopf braucht die Zeile mehr.
   Gemessen bei eingeschalteter Fassung — Logo 147, Navigation 575,
   Konto-Symbol 44. Der Knopf braucht 109 px und bekam bei 1000 px
   nur 80: die Aufschrift war abgeschnitten. Ab 1050 px sitzt er
   ungequetscht (130 zu 128 benoetigt).

   Bewusst KEIN festes Ausblenden des Knopfes in dieser Fassung: ob
   er auf dem Tablet erscheint, entscheidet cd.kopf.angebotTablet,
   und diese Entscheidung gehoert dem Auftraggeber. Statt ihm den
   Knopf zu nehmen, faellt die Navigation zurueck. */
@media (min-width: 801px) and (max-width: 1049px) {
  /* Nur wenn der Knopf im KOPF steht, kostet er dort Breite.
     Steht er in der Schublade, passt die Navigation schon ab
     801 px. */
  body[data-tabletmenue="navigation"][data-angebot-tablet="kopf"] .cd-hauptnav,
  body[data-tabletmenue="navigation"][data-angebot-tablet="kopf"] .cd-mega { display: none; }
  body[data-tabletmenue="navigation"][data-angebot-tablet="kopf"] .cd-menueknopf { display: inline-flex; }
  body[data-tabletmenue="navigation"][data-angebot-tablet="beides"] .cd-hauptnav,
  body[data-tabletmenue="navigation"][data-angebot-tablet="beides"] .cd-mega { display: none; }
  body[data-tabletmenue="navigation"][data-angebot-tablet="beides"] .cd-menueknopf { display: inline-flex; }
}