/* ==========================================================================
   ido-gmbh.de — Stylesheet
   Aufbau: 1 Schriften · 2 Merkmale · 3 Grundlagen · 4 Bausteine · 5 Seiten
           6 Formular · 7 Rechtstexte · 8 Fuß · 9 Schmale Bildschirme
   ========================================================================== */

/* 1 ------------------------------------------------------------- Schriften */
/* Selbst ausgeliefert, nicht über Google Fonts — sonst wäre eine Einwilligung
   und damit ein Cookie-Banner fällig. Outfit und Plex Sans sind veränderliche
   Schriften: eine Datei deckt alle Schnitte ab. */

@font-face {
  font-family: 'Outfit';
  src: url('/assets/fonts/outfit-var.woff2') format('woff2-variations'),
       url('/assets/fonts/outfit-var.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Plex Sans';
  src: url('/assets/fonts/plexsans-var.woff2') format('woff2-variations'),
       url('/assets/fonts/plexsans-var.woff2') format('woff2');
  font-weight: 100 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Plex Mono';
  src: url('/assets/fonts/plexmono-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Plex Mono';
  src: url('/assets/fonts/plexmono-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* 2 ------------------------------------------------------------- Merkmale */

:root {
  /* Flächen */
  --papier: #FFFFFF;
  --grund: #F1F5F7;
  --grund-2: #E7EDF1;
  --linie: #D6DFE5;
  --linie-zart: #E6ECF0;

  /* Schrift */
  --tinte: #0B1620;
  --tinte-2: #435665;
  --tinte-3: #5C7180;

  /* Hausakzent */
  /* Die Hausfarbe ist das Blau der Wortmarke (design/logo/ido-logo.png).
     Gemessen 8,8:1 auf Weiß — genug für Fließtext, nicht nur für Flächen. */
  --kenn: #29449B;        /* auf hellem Grund lesbar */
  --kenn-tief: #1C3175;
  --kenn-hell: #5C7FD8;   /* nur als Fläche und auf dunklem Grund */
  --kenn-bg: #E7EBF7;
  --auf-kenn: #FFFFFF;    /* Schrift auf dem Akzent */

  /* Akzent auf den Nachtflächen. Diese bleiben in beiden Modi dunkel,
     deshalb stehen die Werte nur einmal hier. */
  --kenn-nacht: #8FA7E4;
  --kenn-nacht-hell: #BCC8F0;

  /* Nachtfläche */
  --nacht: #0B1420;
  --nacht-2: #0F1E2E;
  --nacht-3: #132234;
  --nacht-linie: #1E3348;
  --nacht-tinte: #E6EFF4;
  --nacht-tinte-2: #A8C3D4;
  --nacht-tinte-3: #7E9BAF;

  /* Weitere helle Flächen und Linien */
  --flaeche-zart: #F7FAFB;   /* Überfahren, Kastenköpfe */
  --flaeche-ruf: #F4F8FA;
  --linie-feld: #CFDBE2;     /* Formularfelder */
  --linie-knopf: #B9CBD6;
  --linie-innen: #EEF2F5;
  --linie-raster: #DDE5EA;
  --tinte-lese: #2C3F4E;     /* Fließtext in Artikeln */
  --tinte-nav: #25384A;
  --tinte-zart: #9CB0BC;
  --marke-chip: #4E6373;
  --marke-chip-bg: #EEF3F6;
  --marke-chip-linie: #DFE7EC;
  --platzhalter: #9AACB8;

  /* Zustände */
  --gut: #1F7A46;      --gut-bg: #E2F1E5;
  --warte: #8A5A00;    --warte-bg: #F6EEDC;
  --fehler: #A8372E;   --fehler-bg: #FBE8E5;

  /* Markenfarbe der jeweiligen Plattform — je Abschnitt gesetzt */
  --marke: var(--kenn);
  --marke-text: var(--kenn);
  --marke-hell: var(--kenn-bg);
  --marke-dunkel: var(--kenn-tief);

  --schrift-anzeige: 'Outfit', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --schrift-text: 'Plex Sans', system-ui, 'Segoe UI', Roboto, sans-serif;
  --schrift-mono: 'Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --bahn: 1140px;
  --radius: 3px;

  /* Bedienelemente und Bildlaufleisten folgen dem Modus */
  color-scheme: light dark;
}

/* 3 ----------------------------------------------------------- Grundlagen */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  background: var(--papier);
  color: var(--tinte);
  font-family: var(--schrift-text);
  font-size: 17px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--schrift-anzeige);
  font-weight: 600;
  letter-spacing: -.018em;
  line-height: 1.16;
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: clamp(2rem, 4.4vw, 2.9rem); font-weight: 700; letter-spacing: -.03em; line-height: 1.08; }
h2 { font-size: clamp(1.5rem, 3vw, 2.15rem); }
h3 { font-size: 1.2rem; }

p, ul, ol, dl { margin: 0; }
ul, ol { padding: 0; list-style: none; }

a { color: var(--kenn); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--kenn-tief); }

img, svg { max-width: 100%; }
address { font-style: normal; }

:focus-visible { outline: 2px solid var(--kenn); outline-offset: 2px; border-radius: 2px; }

.sprung {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--kenn); color: var(--auf-kenn); padding: 12px 20px;
  font-family: var(--schrift-anzeige); font-weight: 600;
}
.sprung:focus { left: 0; color: var(--auf-kenn); }

.bahn { width: min(var(--bahn), 100% - 40px); margin-inline: auto; }

.mono {
  font-family: var(--schrift-mono);
  font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 500;
}

.augenbraue { color: var(--kenn); margin-bottom: 13px; }
.augenbraue-hell { color: var(--kenn-nacht); }
.augenbraue-marke { color: var(--marke-text); }

.lead { color: var(--tinte-2); font-size: 1.08rem; max-width: 62ch; margin-top: 14px; }
.fliess { color: var(--tinte-2); max-width: 62ch; }
.fliess + .fliess { margin-top: 1em; }

.abschnitt { padding-block: clamp(48px, 6vw, 84px); }
.abschnitt-eng { padding-block: clamp(38px, 4.5vw, 62px); }
.abschnitt-grund { background: var(--grund); border-block: 1px solid var(--linie-zart); }
.abschnitt-nacht { background: var(--nacht); color: var(--nacht-tinte); }
.abschnitt-nacht h2 { color: #fff; }
.abschnitt-nacht .fliess { color: var(--nacht-tinte-2); }

.abschnitt-kopf {
  display: flex; flex-wrap: wrap; gap: 24px 40px;
  justify-content: space-between; align-items: flex-end;
  margin-bottom: 34px;
}
.abschnitt-kopf-eng { margin-bottom: 26px; }

.mehr-zeile { margin-top: 22px; color: var(--tinte-2); font-size: .95rem; }

/* 4 ------------------------------------------------------------ Bausteine */

/* --- Knöpfe */
.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 48px; padding: 0 24px;
  background: var(--kenn); color: #fff;
  font-family: var(--schrift-anzeige); font-weight: 600; font-size: 1rem;
  border: 1px solid transparent; border-radius: var(--radius);
  text-decoration: none; cursor: pointer; text-align: center;
}
.knopf { color: var(--auf-kenn); }
.knopf:hover { background: var(--kenn-tief); color: var(--auf-kenn); text-decoration: none; }
.knopf-klein { min-height: 42px; padding: 0 18px; font-size: .94rem; }
.knopf-breit { width: 100%; }
.knopf-rand { background: transparent; color: var(--kenn); border-color: var(--linie-knopf); }
.knopf-rand:hover { background: var(--kenn-bg); color: var(--kenn-tief); }
.knopf-geist { background: transparent; color: #FFFFFF; border-color: rgba(255,255,255,.45); }
.knopf-geist:hover { background: rgba(255,255,255,.07); color: #fff; }
.knopf-hell { background: var(--kenn-hell); color: #0A1226; }
.knopf-hell:hover { background: var(--kenn-nacht); color: #0A1226; }
.knopf-marke { background: var(--marke-dunkel); color: #fff; }
.knopf-marke:hover { background: var(--marke-dunkel); color: #fff; filter: brightness(1.12); }
.knopf-weiss { background: #fff; color: var(--marke-dunkel, var(--kenn)); }
.knopf-weiss:hover { background: var(--marke-hell); color: var(--marke-dunkel, var(--kenn)); }
.knopf-weissgrund { background: #fff; }

/* --- Kopfleiste */
.leiste { background: var(--nacht); color: var(--nacht-tinte-3); border-bottom: 1px solid #1B2C3E; }
.leiste-in {
  display: flex; flex-wrap: wrap; gap: 4px 26px;
  justify-content: space-between; align-items: center;
  min-height: 38px; font-size: .82rem;
}
.leiste a { color: var(--nacht-tinte-3); text-decoration: none; }
.leiste a:hover { color: var(--kenn-nacht-hell); text-decoration: underline; }
.leiste-adresse, .leiste-portale { display: flex; flex-wrap: wrap; gap: 6px 22px; }

/* --- Navigation */
.kopf { background: var(--papier); border-bottom: 1px solid var(--linie); position: sticky; top: 0; z-index: 40; }
.kopf-in { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 76px; }

.marke { display: flex; align-items: center; gap: 13px; text-decoration: none; color: inherit; }
.logo { display: block; }
/* Auf Flächen, die immer dunkel sind, steht die Marke auf weißem Grund —
   ihr Blau trägt dort sonst nicht (2,1:1 gemessen). */
.logo-platte { background: #fff; padding: 7px 10px; border-radius: 3px; }
.marke-text { display: flex; flex-direction: column; }
.marke-name { font-family: var(--schrift-anzeige); font-weight: 700; font-size: 1.3rem; letter-spacing: -.02em; line-height: 1; }
.marke-claim {
  font-family: var(--schrift-mono); font-size: .6rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--tinte-3); margin-top: 4px;
}

.menue ul { display: flex; align-items: center; gap: 28px; }
.menue a { color: var(--tinte-nav); text-decoration: none; font-weight: 500; font-size: .97rem; }
.menue a:hover { color: var(--kenn); }
.menue a.an { color: var(--kenn); box-shadow: inset 0 -2px 0 var(--kenn-hell); padding-bottom: 4px; }
.menue a.knopf { color: var(--auf-kenn); padding-bottom: 0; box-shadow: none; }
.menue-nur-mobil { display: none; }

.menue-schalter {
  display: none; align-items: center; gap: 9px;
  min-height: 46px; padding: 0 14px;
  background: var(--nacht); color: #fff; border: 0; border-radius: var(--radius);
  font-family: var(--schrift-anzeige); font-weight: 600; font-size: .95rem; cursor: pointer;
}

/* --- Brotkrumen */
.krumen { background: var(--grund); border-bottom: 1px solid var(--linie-zart); }
.krumen ol { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; min-height: 44px; font-size: .85rem; color: var(--tinte-3); }
.krumen li + li::before { content: '/'; margin-right: 9px; color: var(--tinte-zart); }
.krumen a { color: var(--tinte-3); text-decoration: none; }
.krumen a:hover { color: var(--kenn); text-decoration: underline; }
.krumen li:last-child span { color: var(--tinte); }

/* --- Marken (Stichworte) */
.marken { display: flex; flex-wrap: wrap; gap: 6px; }
.marken li {
  font-family: var(--schrift-mono); font-size: .69rem;
  color: var(--marke-chip); background: var(--marke-chip-bg); border: 1px solid var(--marke-chip-linie);
  padding: 3px 8px; border-radius: 2px;
}
.marken-gross { margin-top: 22px; }
.marken-gross li { font-size: .74rem; padding: 4px 10px; }

/* --- Hakenlisten */
.haken { display: flex; flex-direction: column; gap: 12px; }
.haken li { display: flex; gap: 12px; align-items: flex-start; }
.haken .sinnbild { flex: none; margin-top: 4px; color: var(--gut); stroke-width: 2.4; }
.haken-zwei { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px 30px; }
.haken-marke .sinnbild { color: var(--marke-text); }
.haken-band .sinnbild { color: #7FE0C4; }

/* --- Kasten */
.kasten { background: var(--papier); border: 1px solid var(--linie); padding: 30px; }
.kasten-label { color: var(--tinte-3); margin-bottom: 20px; }
.kasten .knopf { margin-top: 26px; }

.merkkasten { border-left: 2px solid var(--kenn-hell); padding: 6px 0 6px 22px; align-self: flex-end; }
.merkkasten-label { color: var(--tinte-3); margin-bottom: 9px; }
.merkkasten p + p { margin-top: 14px; }
.merkkasten-ruf { border-left-color: var(--kenn); }

/* --- Karten (Leistungen) */
.kartenraster {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px; background: var(--linie); border: 1px solid var(--linie);
}
.kartenraster-vier { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.karte {
  background: var(--papier); padding: 26px 24px 24px;
  display: flex; flex-direction: column; gap: 11px;
}
.karte-zeichen { color: var(--kenn); }
.karte-titel { font-size: 1.18rem; }
.karte-titel a { color: inherit; text-decoration: none; }
.karte-titel a:hover { color: var(--kenn); }
.karte-text { font-size: .9rem; color: var(--tinte-2); line-height: 1.55; }
.karte .marken { margin-top: auto; padding-top: 8px; }
.karte-ruf { background: var(--flaeche-ruf); justify-content: center; }
.karte-nacht { background: var(--nacht); color: var(--nacht-tinte); justify-content: center; }
.karte-nacht .karte-titel { color: #fff; }
.karte-nacht .karte-text { color: var(--nacht-tinte-2); }

/* --- Plattformkarten */
.pkarten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.pkarte { background: var(--papier); border: 1px solid var(--linie); display: flex; flex-direction: column; }
.pkarte-balken { height: 5px; display: block; background: var(--marke); }
.pkarte-in { padding: 24px; display: flex; flex-direction: column; gap: 11px; flex: 1; }
.pkarte-name { font-family: var(--schrift-anzeige); font-weight: 700; font-size: 1.3rem; letter-spacing: -.02em; }
.pkarte-name a { color: inherit; text-decoration: none; }
.pkarte-name a:hover { text-decoration: underline; }
.pkarte-domain { color: var(--tinte-3); margin-top: -6px; }
.pkarte-text { font-size: .9rem; color: var(--tinte-2); line-height: 1.55; }
.pkarte-fuer { font-size: .85rem; color: var(--tinte-3); }
.pkarte-fuss {
  margin-top: auto; padding-top: 15px; border-top: 1px solid var(--linie-zart);
  display: flex; flex-wrap: wrap; gap: 8px 12px; justify-content: space-between; align-items: center;
}
.pkarte-preis { text-transform: none; letter-spacing: 0; font-size: .78rem; }
.pkarte-mehr { font-weight: 500; font-size: .9rem; text-decoration: none; color: var(--marke-text); }
.pkarte-mehr:hover { text-decoration: underline; }

/* --- Zweispalter */
.zweispalt { display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(32px, 5vw, 70px); align-items: start; }
.zweispalt-mittig { align-items: center; }
.zweispalt h2 + .fliess, .zweispalt h2 + p { margin-top: 16px; }

.werte { display: flex; gap: 32px; margin-top: 32px; }
.werte h3 { font-size: 1.02rem; margin-bottom: 6px; }
.werte p { font-size: .88rem; color: var(--tinte-3); line-height: 1.5; }
.werte-spalte { flex-direction: column; gap: 24px; margin-top: 0; }
.werte-spalte div { border-left: 2px solid var(--kenn-hell); padding-left: 20px; }

/* --- Kennzahlen */
.kennzahlen {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px; background: var(--nacht-linie); border: 1px solid var(--nacht-linie);
  margin-top: 52px;
}
.kennzahl { background: var(--nacht-2); padding: 22px 24px; }
.kennzahl-wert {
  font-family: var(--schrift-anzeige); font-size: 2.1rem; font-weight: 700;
  color: #fff; letter-spacing: -.03em; line-height: 1;
}
.kennzahl-label { color: #8FA9BB; font-size: .84rem; margin: 7px 0 0; }
.kennzahlen-hell { margin-top: 0; background: var(--linie); border-color: var(--linie); grid-template-columns: repeat(2, minmax(0, 1fr)); align-self: flex-end; }
.kennzahlen-hell .kennzahl { background: var(--papier); }
.kennzahlen-hell .kennzahl-wert { color: var(--tinte); }
.kennzahlen-hell .kennzahl-label { color: var(--tinte-3); }

/* --- Personen */
.personen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.person { border: 1px solid var(--linie); background: var(--papier); padding: 24px; }
.person-kuerzel {
  width: 66px; height: 66px; border-radius: 50%;
  background: var(--kenn-bg); color: var(--kenn);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--schrift-anzeige); font-weight: 600; font-size: 1.4rem;
  margin-bottom: 16px;
}
.person h3 { font-size: 1.22rem; }
.person-rolle { color: var(--kenn); margin: 7px 0 12px; }
.person-text { font-size: .9rem; color: var(--tinte-2); line-height: 1.55; }
.person .marken { margin-top: 14px; }
.person-mail { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--linie-zart); text-transform: none; letter-spacing: 0; font-size: .78rem; }

/* --- Öffnungszeiten */
.zeiten { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--linie); border: 1px solid var(--linie); }
.zeiten-spalte { background: var(--papier); padding: 24px; }
.zeiten-spalte h3 { font-size: 1.08rem; }
.zeiten-zusatz { color: var(--tinte-3); margin: 5px 0 14px; }
.zeiten-zeile { display: flex; justify-content: space-between; gap: 16px; padding: 9px 0; border-bottom: 1px solid var(--linie-innen); font-size: .95rem; }
.zeiten-zeile:last-child { border-bottom: 0; }
.zeiten-zeile dt { font-weight: 500; }
.zeiten-zeile dd { margin: 0; color: var(--tinte-2); font-variant-numeric: tabular-nums; text-align: right; }
.hinweis { margin-top: 14px; padding: 11px 14px; background: var(--warte-bg); border-left: 3px solid var(--warte); font-size: .85rem; color: #5E4405; }

/* --- Ladeliste (Fernwartung) */
.ladeliste { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 16px; }
.ladeliste a {
  display: flex; flex-direction: column; gap: 3px;
  border: 1px solid #2B4358; background: var(--nacht-2); padding: 15px 16px;
  text-decoration: none; min-height: 46px;
}
.ladeliste a:hover { background: #16283B; border-color: #38617E; }
.ladeliste-zeichen { color: var(--kenn-nacht); margin-bottom: 4px; }
.ladeliste-os { font-family: var(--schrift-anzeige); font-weight: 600; color: #fff; font-size: 1rem; }
.ladeliste-endung { color: var(--nacht-tinte-3); text-transform: none; letter-spacing: .04em; font-size: .68rem; }
.ladeliste-gross { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ladeliste-fuss { color: var(--nacht-tinte-3); font-size: .85rem; margin-top: 14px; }
.hell-link { color: var(--kenn-nacht); }
.hell-link:hover { color: var(--kenn-nacht-hell); }

/* --- Tatband */
.tatband { background: var(--grund); border-top: 1px solid var(--linie-zart); padding-block: clamp(38px, 5vw, 58px); }
.tatband-in { display: flex; flex-wrap: wrap; gap: 24px 46px; justify-content: space-between; align-items: center; }
.tatband h2 { font-size: clamp(1.3rem, 2.4vw, 1.7rem); }
.tatband p { color: var(--tinte-2); margin-top: 10px; max-width: 62ch; }
.tatband-knoepfe { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 0 !important; }

/* 5 ---------------------------------------------------------------- Seiten */

/* --- Held (Startseite) */
.held { background: var(--nacht); color: var(--nacht-tinte); position: relative; overflow: hidden; }
.held-raster {
  position: absolute; inset: 0; opacity: .5;
  background-image: linear-gradient(#17293C 1px, transparent 1px), linear-gradient(90deg, #17293C 1px, transparent 1px);
  background-size: 76px 76px;
}
.held-schein {
  position: absolute; right: -140px; top: -180px; width: 620px; height: 620px; border-radius: 50%;
  background: radial-gradient(circle, rgba(41, 68, 155,.20), rgba(41, 68, 155,0) 62%);
}
.held-in { position: relative; padding-block: clamp(48px, 6vw, 92px) clamp(44px, 5vw, 78px); }
.held-spalten { display: grid; grid-template-columns: 1.25fr 1fr; gap: clamp(32px, 5vw, 64px); align-items: start; }
.held-text h1 { color: #fff; }
.held-augenbraue { color: var(--kenn-nacht); margin-bottom: 22px; }
.held-lead { font-size: 1.12rem; color: var(--nacht-tinte-2); margin-top: 24px; max-width: 58ch; }
.held-knoepfe { display: flex; flex-wrap: wrap; gap: 13px; margin-top: 34px; }

.held-kasten { border: 1px solid #22384D; background: rgba(16,31,47,.72); padding: 26px; }
.held-kasten h2 { color: #fff; font-size: 1.35rem; margin-bottom: 10px; }
.held-kasten p { color: var(--nacht-tinte-2); font-size: .92rem; line-height: 1.55; }
.held-kasten .knopf { margin-top: 18px; }
.held-kasten-label { color: var(--nacht-tinte-3); margin-bottom: 16px; }
.held-kasten-trenner { border-top: 1px solid #22384D; margin-top: 24px; padding-top: 18px; }
.held-nummer { font-family: var(--schrift-anzeige); font-weight: 600; font-size: 1.5rem; letter-spacing: -.02em; }
.held-nummer a { color: #fff; text-decoration: none; }
.held-nummer a:hover { color: var(--kenn-nacht-hell); }

/* --- Seitenkopf (Unterseiten) */
.seitenkopf { padding-block: clamp(38px, 4.5vw, 64px) clamp(28px, 3vw, 44px); }
.seitenkopf-spalten { display: grid; grid-template-columns: 1.35fr 1fr; gap: clamp(28px, 5vw, 64px); align-items: end; }

.farbfelder { display: flex; gap: 10px; justify-content: flex-end; align-self: end; }
.farbfelder span { width: 58px; height: 58px; border-radius: 2px; display: block; background: var(--marke); }

/* --- Leistungsdetail */
.leistung-marke { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.leistung-marke .augenbraue { margin-bottom: 0; }
.leistung-zeichen {
  width: 52px; height: 52px; flex: none;
  border: 1px solid var(--linie-feld); background: var(--kenn-bg); color: var(--kenn);
  display: flex; align-items: center; justify-content: center; border-radius: var(--radius);
}

.mit-spalte { display: grid; grid-template-columns: 1fr 340px; gap: clamp(32px, 5vw, 64px); align-items: start; }
.mit-spalte-rechts { grid-template-columns: 1fr 300px; }

.fliesstext { max-width: 68ch; }
.fliesstext h2 { margin-top: 42px; margin-bottom: 16px; font-size: clamp(1.3rem, 2.4vw, 1.75rem); }
.fliesstext h2:first-child { margin-top: 0; }
.fliesstext p { color: var(--tinte-lese); line-height: 1.72; }
.fliesstext p + p { margin-top: 16px; }
.fliesstext .haken { margin-top: 4px; }

.schritte { display: flex; flex-direction: column; }
.schritte li { display: grid; grid-template-columns: 46px 1fr; gap: 18px; padding: 20px 0; border-bottom: 1px solid var(--linie-zart); }
.schritte li:last-child { border-bottom: 0; }
.schritt-nummer { color: var(--kenn); padding-top: 4px; font-size: .78rem; }
.schritte h3 { font-size: 1.05rem; margin-bottom: 5px; }
.schritte p { font-size: .93rem; color: var(--tinte-2); }

.querverweis {
  border: 1px solid var(--linie); background: var(--flaeche-zart);
  border-left: 3px solid var(--marke); padding: 26px 28px; margin-top: 44px;
}
.querverweis-label { color: var(--marke-text); margin-bottom: 10px; }
.querverweis h2 { margin: 0 0 10px; font-size: 1.25rem; }
.querverweis p { color: var(--tinte-2); font-size: .95rem; }
.querverweis .knopf { margin-top: 18px; }

/* --- Seitenspalte */
.spalte { display: flex; flex-direction: column; gap: 22px; position: sticky; top: 96px; }
.spaltenkasten { border: 1px solid var(--linie); background: var(--papier); }
.spaltenkasten-kopf { padding: 16px 20px; border-bottom: 1px solid var(--linie-zart); background: var(--flaeche-zart); color: var(--tinte-3); }
.spaltenkasten-in { padding: 20px; }
.spaltenkasten-in p + p { margin-top: 10px; }
.spaltenkasten-nacht { background: var(--nacht); border-color: var(--nacht-linie); color: var(--nacht-tinte-2); padding: 20px; }
.spaltenkasten-nacht p { font-size: .9rem; }
.spaltenkasten-kopf-hell { color: var(--kenn-nacht); margin-bottom: 10px; }
.spaltenkasten-nacht .knopf { margin-top: 14px; }

.spaltenliste { display: flex; flex-direction: column; }
.spaltenliste a {
  display: flex; justify-content: space-between; gap: 12px; align-items: center;
  padding: 12px 20px; border-bottom: 1px solid var(--linie-innen);
  font-size: .93rem; color: var(--tinte-nav); text-decoration: none;
}
.spaltenliste li:last-child a { border-bottom: 0; }
.spaltenliste a:hover { background: var(--flaeche-zart); color: var(--kenn); }
.spalten-kontakt { text-transform: none; letter-spacing: 0; font-size: .82rem; line-height: 1.9; margin-top: 14px; }

.person-zeile { display: flex; gap: 14px; align-items: center; }
.person-kuerzel-klein { width: 52px; height: 52px; font-size: 1.1rem; margin-bottom: 0; }
.person-name { font-family: var(--schrift-anzeige); font-weight: 600; font-size: 1.05rem; display: block; }
.person-rolle-klein { font-size: .84rem; color: var(--tinte-3); }

/* --- Plattformen-Übersicht */
.pzeile {
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 4vw, 60px);
  align-items: center; padding-block: clamp(40px, 5vw, 62px);
  border-bottom: 1px solid var(--linie-zart);
}
.pzeile:last-child { border-bottom: 0; }
.pzeile-gedreht .pzeile-text { order: 2; }
.pzeile-gedreht .pzeile-bild { order: 1; }

.pzeile-marke { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.pzeile-balken { width: 10px; height: 34px; background: var(--marke); border-radius: 1px; flex: none; }
.pzeile-name { font-family: var(--schrift-anzeige); font-weight: 700; font-size: clamp(1.5rem, 2.6vw, 1.95rem); letter-spacing: -.025em; display: block; }
.pzeile-domain { color: var(--tinte-3); margin-top: 3px; display: block; }
.pzeile-kurz { color: var(--tinte-2); margin-top: 12px; }
.pzeile .haken { margin-top: 20px; }
.pzeile-knoepfe { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }

.eckdaten { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--linie-raster); border: 1px solid var(--linie-raster); margin-top: 24px; }
.eckdaten > div { background: var(--papier); padding: 14px 16px; }
.eckdaten dt { font-family: var(--schrift-mono); font-size: .63rem; letter-spacing: .1em; text-transform: uppercase; color: var(--tinte-3); margin-bottom: 5px; }
.eckdaten dd { margin: 0; font-size: .9rem; font-weight: 500; }

/* --- Vorschaubilder */
.vorschau { margin: 0; border: 1px solid var(--linie); background: var(--flaeche-zart); overflow: hidden; }
.vorschau figcaption { padding: 8px 14px; color: var(--tinte-3); border-top: 1px solid var(--linie-zart); background: var(--papier); }
.vorschau-leiste { background: var(--marke, #0E5C63); display: flex; align-items: center; gap: 10px; padding: 0 14px; min-height: 40px; }
.vorschau-leiste-dunkel { background: #17181c; }
.vorschau-punkte { display: flex; gap: 7px; }
.vorschau-punkte i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.35); display: block; }
.vorschau-adresse { color: rgba(255,255,255,.8); text-transform: none; letter-spacing: .02em; font-size: .68rem; }
.vorschau-in { padding: 20px; }
.vorschau-titel { font-family: var(--schrift-anzeige); font-weight: 600; font-size: 1rem; margin-bottom: 14px; }
.vorschau-liste { display: flex; flex-direction: column; gap: 1px; background: #CED7DF; border: 1px solid #CED7DF; }
.vorschau-liste li { background: #fff; padding: 12px 14px; display: flex; justify-content: space-between; gap: 12px; align-items: center; font-size: .88rem; }
.vorschau-liste strong { display: block; font-weight: 500; }
.vorschau-liste .mono { text-transform: none; letter-spacing: 0; font-size: .72rem; color: #5E6A75; }
.vorschau-liste-flach { margin-top: 14px; }
.vorschau-fuss { margin-top: 16px; padding: 12px 14px; border: 1px solid #CED7DF; background: var(--marke-hell, #DDF2F3); font-size: .82rem; color: #424F5A; }
.zustand { padding: 3px 8px; font-size: .64rem; letter-spacing: .08em; }
.zustand-gut { color: var(--gut); background: var(--gut-bg); }
.zustand-warte { color: var(--warte); background: var(--warte-bg); }
.zustand-text-gut { color: #2f9e8f; text-transform: none; letter-spacing: 0; font-size: .75rem; }
.zustand-text-warte { color: #a17a1f; text-transform: none; letter-spacing: 0; font-size: .75rem; }

/* Echte Bildschirmfotos der Plattformen */
.vorschau-bild { border: 1px solid var(--linie); background: var(--papier); }
.vorschau-bild img { display: block; width: 100%; height: auto; }
.vorschau-bild figcaption { text-transform: none; letter-spacing: .03em; }

.vorschau-zeit .vorschau-in { background: #f2efe8; }
.stempel { background: #fff; border: 1px solid #e5e2d9; padding: 20px; }
.stempel-label { color: #6f7078; }
.stempel-uhr { font-family: var(--schrift-anzeige); font-weight: 700; font-size: 2.3rem; letter-spacing: -.03em; color: #17181c; margin: 8px 0 4px; font-variant-numeric: tabular-nums; }
.stempel-objekt { font-size: .85rem; color: #6f7078; }
.stempel-knoepfe { display: flex; gap: 10px; margin-top: 16px; }
.stempel-haupt, .stempel-neben { flex: 1; text-align: center; padding: 11px 0; font-family: var(--schrift-anzeige); font-weight: 600; font-size: .88rem; }
.stempel-haupt { background: #e0913f; color: #fff; }
.stempel-neben { border: 1px solid #d8d5cc; color: #17181c; }

.vorschau-tafel { border: 0; background: transparent; }
.tafel { background: #0e1320; border: 1px solid #2a3554; aspect-ratio: 16 / 10; display: flex; flex-direction: column; }
.tafel-ruhe { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; }
.tafel-anlage { font-family: var(--schrift-anzeige); font-weight: 600; font-size: .95rem; color: #93a0bd; letter-spacing: .05em; }
.tafel-uhr { font-family: var(--schrift-anzeige); font-weight: 700; font-size: clamp(2.6rem, 6vw, 4.2rem); color: #e9edf6; letter-spacing: -.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.tafel-datum { font-size: .84rem; color: #8E9BBB; }
.tafel-energie { border-top: 1px solid #2a3554; display: flex; gap: 12px; padding: 14px 18px; }
.tafel-energie > div { flex: 1; background: #151c2e; border: 1px solid #2a3554; padding: 10px 12px; display: flex; flex-direction: column; gap: 3px; }
.tafel-energie .mono { color: #97A3C0; font-size: .58rem; }
.tafel-energie strong { font-family: var(--schrift-anzeige); font-weight: 600; font-size: 1.2rem; color: #e9edf6; font-variant-numeric: tabular-nums; }
.tafel-gut { color: #2ec98c !important; }
.tafel-blau { color: #4f8ef7 !important; }

/* Ein Bild über die volle Bahnbreite (Plattform-Profilseite) */
.grossbild { max-width: 860px; margin-inline: auto; }
.grossbild .vorschau-tafel .tafel { aspect-ratio: 16 / 9; }

/* --- Plattform-Profilseite */
.marken-band { background: var(--marke-dunkel); color: #FFFFFF; position: relative; overflow: hidden; }
.marken-band-raster { position: absolute; inset: 0; background-image: linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px); background-size: 72px 100%; }
.marken-band-in { position: relative; padding-block: clamp(40px, 5vw, 64px) clamp(36px, 4.5vw, 58px); }
.marken-band-spalten { display: grid; grid-template-columns: 1.25fr 1fr; gap: clamp(30px, 5vw, 60px); align-items: center; }
.marken-band h1 { color: #fff; }
.marken-band-augenbraue { color: #FFFFFF; margin-bottom: 18px; }
.marken-band-lead { font-size: 1.15rem; margin-top: 20px; max-width: 56ch; color: #FFFFFF; }
.marken-band-knoepfe { display: flex; flex-wrap: wrap; gap: 13px; margin-top: 32px; }
.marken-band-kasten { border: 1px solid rgba(255,255,255,.28); background: rgba(0,0,0,.14); padding: 24px; }
.marken-band-kasten .haken li { color: #FFFFFF; font-size: .95rem; }

.leistungsspalten { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1px; background: var(--linie); border: 1px solid var(--linie); }
.leistungsspalte { background: var(--papier); padding: 24px 20px; display: flex; flex-direction: column; gap: 9px; }
.leistungsspalte-zeichen { color: var(--marke-text); }
.leistungsspalte h3 { font-size: 1.08rem; }
.leistungsspalte p { font-size: .86rem; color: var(--tinte-2); line-height: 1.55; }
.leistungsspalte-preis { margin-top: auto; padding-top: 12px; color: var(--marke-text); text-transform: none; letter-spacing: 0; font-size: .74rem; }

.dreischritt { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; margin-top: 28px; }
.dreischritt li { border-top: 2px solid var(--marke); padding-top: 18px; }
.dreischritt-nummer { color: var(--marke-text); display: block; margin-bottom: 9px; }
.dreischritt h3 { font-size: 1.12rem; margin-bottom: 8px; }
.dreischritt p { font-size: .92rem; color: var(--tinte-2); }

.faktenband { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--linie); border: 1px solid var(--linie); margin-top: 40px; }
.faktenband > div { background: var(--papier); padding: 20px; }
.faktenband dt { color: var(--tinte-3); margin-bottom: 7px; }
.faktenband dd { margin: 0; font-family: var(--schrift-anzeige); font-weight: 600; font-size: 1rem; }

.uebergabe { background: var(--marke-hell); border-block: 1px solid rgba(0,0,0,.08); padding-block: clamp(38px, 5vw, 56px); }
.uebergabe-in { display: flex; flex-wrap: wrap; gap: 24px 46px; justify-content: space-between; align-items: center; }
.uebergabe h2 { font-size: clamp(1.25rem, 2.4vw, 1.65rem); color: var(--tinte); }
.uebergabe p { color: #2C4B4D; margin-top: 10px; max-width: 62ch; }
.uebergabe-knoepfe { display: flex; flex-direction: column; gap: 10px; margin-top: 0 !important; }

.rueckweg { display: flex; flex-wrap: wrap; gap: 20px 26px; align-items: center; }
.rueckweg h2 { font-size: 1.25rem; }
.rueckweg p { color: var(--tinte-2); font-size: .95rem; margin-top: 5px; }
.rueckweg > p:last-child { margin-left: auto; }

/* --- Support */
/* Passt sich der Anzahl an: Kommt ein Portal dazu oder fällt eines weg,
   bleibt keine leere Spalte stehen. */
.portalkarten { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 22px; }
.portalkarte { border: 1px solid var(--linie); background: var(--papier); padding: 26px 24px; display: flex; flex-direction: column; gap: 10px; }
.portalkarte-zeichen { color: var(--kenn); }
.portalkarte p { font-size: .92rem; color: var(--tinte-2); }
.portalkarte-domain { color: var(--tinte-3); text-transform: none; letter-spacing: .02em; }
.portalkarte .knopf { margin-top: auto; align-self: flex-start; }
.portalkarte-hell { background: var(--kenn-bg); border-color: #BFDDEB; }

/* --- FAQ */
.faq-block { max-width: 74ch; }
.faq-block h2 { margin-bottom: 22px; }
.faq { border: 1px solid var(--linie); background: var(--papier); }
.faq details { border-bottom: 1px solid var(--linie-zart); }
.faq details:last-child { border-bottom: 0; }
.faq summary {
  cursor: pointer; padding: 17px 22px; list-style: none;
  font-family: var(--schrift-anzeige); font-weight: 600; font-size: 1.02rem;
  display: flex; justify-content: space-between; gap: 16px; align-items: center;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; color: var(--kenn); font-size: 1.3rem; line-height: 1; flex: none; }
.faq details[open] summary::after { content: '–'; }
.faq summary:hover { background: var(--flaeche-zart); }
.faq-antwort { padding: 0 22px 20px; }
.faq-antwort p { color: var(--tinte-2); font-size: .95rem; }

/* --- Danke */
.danke { max-width: 60ch; }
.danke-zeichen {
  display: inline-flex; align-items: center; justify-content: center;
  width: 62px; height: 62px; border-radius: 50%;
  background: var(--gut-bg); color: var(--gut); margin-bottom: 22px;
}
.danke-eilig { margin-top: 28px; color: var(--tinte-2); }

/* 6 -------------------------------------------------------------- Formular */

.kontakt-raster { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(28px, 4vw, 48px); align-items: start; }

.formularkasten { border: 1px solid var(--linie); background: var(--papier); padding: clamp(22px, 3vw, 34px); }
.formularkasten h2 { font-size: 1.45rem; margin-bottom: 6px; }
.formular-hinweis { color: var(--tinte-3); font-size: .9rem; margin-bottom: 24px; }
.pflicht { color: var(--fehler); }

.meldung { padding: 13px 16px; margin-bottom: 22px; font-size: .93rem; border-left: 3px solid; }
.meldung-fehler { background: var(--fehler-bg); border-color: var(--fehler); color: #6E2119; }

/* Honigtopf: für Menschen unsichtbar, für Vorleseprogramme ausgeblendet */
.falle { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.feldgruppe { border: 0; padding: 0; margin: 0 0 22px; }
.feldgruppe legend { font-size: .87rem; font-weight: 500; color: var(--tinte-lese); margin-bottom: 7px; padding: 0; }

.segment { display: flex; gap: 1px; background: var(--linie-feld); border: 1px solid var(--linie-feld); }
.segment label {
  flex: 1; background: #F6F9FA; padding: 13px 10px; text-align: center; cursor: pointer;
  font-family: var(--schrift-anzeige); font-weight: 600; font-size: .95rem; color: #5C7180;
}
.segment label.an, .segment label:has(input:checked) { background: var(--kenn); color: #fff; }
.segment label:has(input:focus-visible) { outline: 2px solid var(--kenn); outline-offset: 2px; }
.segment input { position: absolute; opacity: 0; width: 1px; height: 1px; }

.feldzeile { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.feld { margin-bottom: 18px; }
.feld label { display: block; font-size: .87rem; font-weight: 500; color: var(--tinte-lese); margin-bottom: 7px; }

.feld input[type="text"], .feld input[type="email"], .feld input[type="tel"],
.feld select, .feld textarea {
  width: 100%; min-height: 48px; padding: 12px 14px;
  border: 1px solid var(--linie-feld); background: var(--papier); border-radius: 2px;
  font-family: var(--schrift-text); font-size: 1rem; color: var(--tinte);
}
.feld textarea { min-height: 130px; resize: vertical; line-height: 1.6; }
.feld select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236C8090' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 42px; }
.feld input::placeholder, .feld textarea::placeholder { color: var(--platzhalter); }
.feld input:focus, .feld select:focus, .feld textarea:focus {
  outline: 0; border-color: var(--kenn); box-shadow: 0 0 0 3px rgba(41, 68, 155,.18);
}
.feld [aria-invalid="true"] { border-color: var(--fehler); box-shadow: 0 0 0 3px rgba(168,55,46,.13); }
.feldfehler { color: var(--fehler); font-size: .85rem; margin-top: 7px; }

.zustimmung label { display: flex; gap: 12px; align-items: flex-start; font-weight: 400; font-size: .88rem; color: var(--tinte-2); line-height: 1.55; cursor: pointer; }
.zustimmung input { width: 20px; height: 20px; flex: none; margin-top: 2px; accent-color: var(--kenn); }

.formular-fuss { font-size: .82rem; color: var(--tinte-3); margin-top: 16px; text-align: center; }

.kontaktspalte { display: flex; flex-direction: column; gap: 22px; }
.infokasten { border: 1px solid var(--linie); background: var(--papier); }
.inforeihe { display: flex; gap: 15px; padding: 19px 22px; border-bottom: 1px solid var(--linie-zart); align-items: flex-start; }
.inforeihe:last-child { border-bottom: 0; }
.inforeihe-zeichen { color: var(--kenn); flex: none; margin-top: 3px; }
.inforeihe-label { color: var(--tinte-3); margin-bottom: 5px; }
.inforeihe-gross { font-family: var(--schrift-anzeige); font-weight: 600; font-size: 1.3rem; letter-spacing: -.01em; }
.inforeihe-gross a { text-decoration: none; }
.inforeihe-klein { font-size: .88rem; color: var(--tinte-2); }

.anfahrt { border: 1px solid var(--linie); background: var(--papier); }
.karte-bild { margin: 0; }
.karte-bild svg { display: block; width: 100%; height: auto; }
.karte-bild figcaption { padding: 7px 14px; color: var(--tinte-3); border-top: 1px solid var(--linie-zart); }
.anfahrt-fuss { display: flex; gap: 16px; justify-content: space-between; align-items: center; padding: 16px 20px; border-top: 1px solid var(--linie-zart); }

/* 7 ----------------------------------------------------------- Rechtstexte */

.rechtstext { max-width: 72ch; }
.rechtstext h2 { font-size: clamp(1.2rem, 2.2vw, 1.5rem); margin: 40px 0 14px; scroll-margin-top: 96px; }
.rechtstext section:first-of-type h2, .rechtstext > h2:first-child { margin-top: 0; }
.rechtstext p { color: var(--tinte-lese); line-height: 1.72; }
.rechtstext p + p { margin-top: 14px; }
.rechtstext a { overflow-wrap: anywhere; }

.rechts-adresse { background: var(--grund); border-left: 3px solid var(--kenn); padding: 18px 22px; margin: 16px 0; line-height: 1.8; }
.rechts-form { color: var(--tinte-3); font-size: .92rem; }
.rechts-liste { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.rechts-liste > div { display: grid; grid-template-columns: 190px 1fr; gap: 16px; }
.rechts-liste dt { color: var(--tinte-3); font-size: .92rem; }
.rechts-liste dd { margin: 0; }
.rechts-fein { font-size: .87rem; color: var(--tinte-3); margin-top: 12px; }
.rechts-punkte { list-style: disc; padding-left: 1.3em; margin-top: 14px; display: flex; flex-direction: column; gap: 7px; color: var(--tinte-lese); }
.rechts-punkte li::marker { color: var(--kenn); }
.rechts-definitionen { display: flex; flex-direction: column; gap: 14px; margin-top: 16px; }
.rechts-definitionen dt { font-family: var(--schrift-anzeige); font-weight: 600; font-size: 1rem; }
.rechts-definitionen dd { margin: 4px 0 0; color: var(--tinte-2); font-size: .95rem; }
.rechts-hervor { border-left: 3px solid var(--warte); background: var(--warte-bg); padding: 22px 26px; margin-top: 40px; }
.rechts-hervor h2 { margin-top: 0; }
.rechts-hervor p { color: #4A3A12; }

.kurzfassung { border: 1px solid var(--linie); background: var(--grund); padding: 24px 26px; margin-bottom: 40px; }
.kurzfassung h2 { margin: 0 0 14px; font-size: 1.15rem; }
.kurzfassung ul { list-style: disc; padding-left: 1.3em; display: flex; flex-direction: column; gap: 8px; color: var(--tinte-lese); font-size: .95rem; }
.kurzfassung li::marker { color: var(--kenn); }

.inhaltsverzeichnis .spaltenliste a { padding: 10px 20px; font-size: .88rem; }

/* 8 ------------------------------------------------------------------ Fuß */

.fuss { background: var(--nacht); color: var(--nacht-tinte-3); font-size: .93rem; }
.fuss a { color: var(--nacht-tinte-3); text-decoration: none; }
.fuss a:hover { color: var(--kenn-nacht-hell); text-decoration: underline; }
.fuss h2 {
  color: #fff; font-size: .82rem; font-family: var(--schrift-anzeige); font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase; margin-bottom: 16px;
}
.fuss-h2-abstand { margin-top: 26px; }
.fuss-raster { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: 40px; padding-block: clamp(38px, 5vw, 58px) 40px; }
.fuss-spalte ul { display: flex; flex-direction: column; gap: 9px; }
.fuss-text { line-height: 1.65; margin: 14px 0 18px; max-width: 34ch; }
.fuss-adresse { font-family: var(--schrift-mono); font-size: .8rem; line-height: 1.95; color: #B4CBD9; }
.fuss-zeiten dt { color: #B4CBD9; margin-top: 10px; font-size: .85rem; }
.fuss-zeiten dt:first-child { margin-top: 0; }
.fuss-zeiten dd { margin: 2px 0 0; font-size: .84rem; }
.fuss-recht {
  border-top: 1px solid var(--nacht-linie); padding-block: 20px;
  display: flex; flex-wrap: wrap; gap: 12px 26px; justify-content: space-between; align-items: center;
  font-size: .85rem;
}
.fuss-recht ul { display: flex; flex-wrap: wrap; gap: 26px; }

/* --- Anrufleiste (nur Telefon) */
.rufleiste { display: none; }

/* 9 ------------------------------------------------- Schmale Bildschirme */

@media (max-width: 1080px) {
  .kartenraster, .kartenraster-vier { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .leistungsspalten { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .fuss-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 34px; }
  .mit-spalte, .mit-spalte-rechts { grid-template-columns: 1fr; }
  .spalte { position: static; }
}

@media (max-width: 900px) {
  .kopf-in { min-height: 62px; }
  .menue-schalter { display: inline-flex; }
  .menue { display: none; position: absolute; left: 0; right: 0; top: 100%; background: var(--papier); border-bottom: 1px solid var(--linie); box-shadow: 0 10px 24px rgba(11,22,32,.08); }
  .kopf { position: relative; }
  .menue[data-offen="ja"] { display: block; }
  .menue ul { flex-direction: column; align-items: stretch; gap: 0; padding: 8px 20px 20px; }
  .menue li { border-bottom: 1px solid var(--linie-zart); }
  .menue li:last-child { border-bottom: 0; }
  .menue a { display: flex; align-items: center; min-height: 50px; }
  .menue a.an { box-shadow: none; padding-bottom: 0; }
  .menue-tat { border-bottom: 0 !important; padding-top: 14px; }
  .menue-tat a { justify-content: center; }
  .menue-nur-mobil { display: block; }

  .leiste-portale { display: none; }
  .held-spalten, .seitenkopf-spalten, .zweispalt, .kontakt-raster, .pzeile, .marken-band-spalten { grid-template-columns: 1fr; }
  .pzeile-gedreht .pzeile-text, .pzeile-gedreht .pzeile-bild { order: initial; }
  .merkkasten { align-self: start; }
  .farbfelder { justify-content: flex-start; }
  .personen, .pkarten, .portalkarten { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .leistungsspalten { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dreischritt { grid-template-columns: 1fr; gap: 18px; }
  .faktenband { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kennzahlen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .werte { flex-direction: column; gap: 20px; }
  .ladeliste, .ladeliste-gross { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rueckweg > p:last-child { margin-left: 0; }
}

@media (max-width: 620px) {
  body { font-size: 16px; padding-bottom: 56px; }

  /* Die Nummer bleibt immer erreichbar, ohne nach oben zu scrollen */
  .rufleiste {
    position: fixed; inset: auto 0 0 0; z-index: 50;
    display: flex; align-items: center; justify-content: center; gap: 10px;
    min-height: 56px; padding: 0 16px;
    background: var(--kenn); color: var(--auf-kenn);
    font-family: var(--schrift-anzeige); font-weight: 600; font-size: 1rem;
    text-decoration: none;
    box-shadow: 0 -2px 12px rgba(11,22,32,.18);
  }
  .rufleiste:hover { color: var(--auf-kenn); }

  /* Der Namenszusatz bricht auf schmalen Geräten um und drängt den Kopf
     auseinander — die Zeile darunter sagt ohnehin dasselbe. */
  .marke-claim { display: none; }
  .bahn { width: min(var(--bahn), 100% - 32px); }
  .kartenraster, .kartenraster-vier, .personen, .pkarten, .portalkarten,
  .leistungsspalten, .zeiten, .eckdaten, .faktenband, .feldzeile, .haken-zwei {
    grid-template-columns: 1fr;
  }
  .kennzahlen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .leiste-in { font-size: .78rem; padding-block: 7px; }
  .leiste-adresse { gap: 3px 16px; }
  .abschnitt-kopf { flex-direction: column; align-items: flex-start; }
  .rechts-liste > div { grid-template-columns: 1fr; gap: 3px; }
  .tatband-in, .uebergabe-in { flex-direction: column; align-items: flex-start; }
  .uebergabe-knoepfe { width: 100%; }
  .fuss-raster { grid-template-columns: 1fr; }
  .fuss-recht { flex-direction: column; align-items: flex-start; }
  .held-knoepfe .knopf, .marken-band-knoepfe .knopf, .pzeile-knoepfe .knopf,
  .tatband-knoepfe .knopf, .uebergabe-knoepfe .knopf { width: 100%; }
}

/* 10 --------------------------------------------------------- Dunkelmodus */
/* Folgt der Einstellung des Betriebssystems. Kein Schalter, kein Speichern —
   damit bleibt die Seite ohne Einwilligung und ohne Banner.

   Nur Merkmale werden neu belegt. Was schon dunkel ist — Kopfband, Fuß, die
   Nachtabschnitte — bleibt unverändert, ebenso die Vorschauen der Plattformen:
   sie geben die echten Oberflächen wieder und sollen sich nicht verstellen. */

@media (prefers-color-scheme: dark) {
  /* Auch Kopfzeile und Rückweg werden dunkel — die Marke bekommt dort
     dieselbe weiße Platte wie im Fuß. */
  .logo { background: #fff; padding: 7px 10px; border-radius: 3px; }

  :root {
    --papier: #101A1F;
    --grund: #0A1216;
    --grund-2: #16232A;
    --linie: #243439;
    --linie-zart: #1B2A2F;

    --flaeche-zart: #142126;
    --flaeche-ruf: #142126;
    --linie-feld: #2C3E45;
    --linie-knopf: #375057;
    --linie-innen: #1E2D33;
    --linie-raster: #243439;

    --tinte: #E4EDEF;
    --tinte-2: #A4B5BA;
    --tinte-3: #7F9198;
    --tinte-lese: #C5D3D7;
    --tinte-nav: #D3DEE1;
    --tinte-zart: #6C7D84;

    --kenn: #8FA7E4;
    --kenn-tief: #BCC8F0;
    --kenn-bg: #1B2440;
    --auf-kenn: #0A1226;

    --marke-chip: #A6BAC0;
    --marke-chip-bg: #182831;
    --marke-chip-linie: #26363D;
    --platzhalter: #6E838B;

    --gut: #6FCB8B;      --gut-bg: #10301B;
    --warte: #D9A94E;    --warte-bg: #32280F;
    --fehler: #E98A7E;   --fehler-bg: #38201C;

    --schatten: 0 1px 2px rgba(0,0,0,.5);
  }

  /* Flächen, die im Hellen bewusst weiß sind */
  .kopf, .formularkasten, .infokasten, .anfahrt, .hours,
  .karte, .pkarte, .person, .zeiten-spalte, .kasten,
  .spaltenkasten, .leistungsspalte, .faq, .portalkarte,
  .eckdaten > div, .faktenband > div, .kennzahlen-hell .kennzahl,
  .vorschau, .vorschau-liste li {
    background: var(--papier);
  }

  /* Die Lageskizze ist ein SVG mit festen Flächen — abdunkeln statt umbauen */
  .karte-bild svg { filter: invert(.88) hue-rotate(180deg) saturate(.7); }

  /* Der abgedunkelte Markenton verschwindet auf dunklem Grund fast —
     hier trägt der volle Ton besser. */
  .knopf-marke { background: var(--marke-licht); color: #08171A; }
  .knopf-marke:hover { filter: brightness(1.1); }
  .marken-band { background: var(--marke-dunkel); }

  /* Die helle Markenfläche der Übergabe wird sonst zur Blendfläche */
  .uebergabe { background: var(--grund-2); border-left: 4px solid var(--marke); }
  .uebergabe h2 { color: var(--tinte); }
  .uebergabe p { color: var(--tinte-2); }

  .querverweis { background: var(--flaeche-zart); }
  /* Der weiße Knopf bleibt weiß: Auf dem Markenband ist er die Haupthandlung
     und muss sich vom Band abheben. Nur der umrandete Knopf auf weißem Grund
     bekommt eine dunkle Fläche — sonst stünde helle Schrift auf Weiß. */
  .knopf-weissgrund { background: var(--papier); }
  .vorschau-fuss { background: var(--kenn-bg); color: var(--tinte-2); border-color: var(--linie); }
  .portalkarte-hell { background: var(--kenn-bg); border-color: var(--linie); }
  .rechts-adresse { background: var(--grund-2); }
  .kurzfassung { background: var(--grund-2); }

  .segment label { background: var(--grund-2); color: var(--tinte-2); }
  .segment label.an, .segment label:has(input:checked) { background: var(--kenn); color: var(--auf-kenn); }

  .hinweis { color: #E6C98A; }
  .meldung-fehler { color: #F2B8AE; }
  .rechts-hervor p { color: #E3CFA4; }

  /* Bilder einen Hauch zurücknehmen, damit sie nicht aus der Seite springen */
  .vorschau-bild img { filter: brightness(.94); }
}

/* --- Druck: Rechtstexte müssen sich sauber ausdrucken lassen */
@media print {
  .leiste, .kopf, .krumen, .tatband, .fuss, .sprung, .spalte { display: none; }
  body { font-size: 11pt; color: #000; }
  .bahn { width: 100%; }
  .abschnitt, .seitenkopf { padding-block: 0; }
  a[href^="http"]::after { content: ' (' attr(href) ')'; font-size: 9pt; color: #444; }
}