/* Gebaut aus werkzeuge/css/ – nicht von Hand bearbeiten */
/* ===== 00-basis.css ===== */
/* Kapazio – Website. Tokens aus design-brief.md. Petrol = Marke (wie die App), Rot nur für Notfall. */

@font-face { font-family: "General Sans"; src: url("../fonts/general-sans-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "General Sans"; src: url("../fonts/general-sans-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Switzer"; src: url("../fonts/switzer-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Switzer"; src: url("../fonts/switzer-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Switzer"; src: url("../fonts/switzer-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }

:root {
  --grund: #f4f6fb;
  --flaeche: #ffffff;
  --flaeche-2: #eceff7;
  --linie: #e2e6f0;
  --linie-stark: #c6cddd;
  --tinte: #0b1020;
  --text-2: #4a5168;
  --text-3: #636b82;

  --petrol: #2b4bff;
  --petrol-hover: #1d36e0;
  --petrol-tief: #0a1033;
  --petrol-tiefer: #060a24;
  --petrol-hell: #eef1ff;
  --petrol-hell-2: #dde3ff;
  --mint: #8fe3f5;
  --violett: #7b5cff;
  --cyan: #22c3e6;
  --gold: #ffb547;
  --verlauf: linear-gradient(105deg, #2b4bff 0%, #7b5cff 48%, #22c3e6 100%);

  --notfall: #d6363b;
  --notfall-weich: #fdecec;
  --heute: #8a4f0d;
  --heute-weich: #fbf0e2;
  --ok: #276b43;
  --ok-weich: #e6f2ea;

  --display: "General Sans", ui-sans-serif, system-ui, sans-serif;
  --text: "Switzer", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

  --r-bild: 26px;
  --r-karte: 16px;
  --r-klein: 10px;
  --schatten: 0 1px 2px rgba(17, 24, 22, .05), 0 8px 24px -6px rgba(17, 24, 22, .12);
  --schatten-gross: 0 2px 4px rgba(17, 24, 22, .05), 0 24px 60px -12px rgba(20, 30, 90, .28);

  --breite: 1240px;
  --rand: 24px;
  --abschnitt: 88px;
  --nav-h: 64px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 100px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0; background: var(--grund); color: var(--tinte);
  font-family: var(--text); font-size: 17px; line-height: 1.6;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, svg { display: block; max-width: 100%; }
:where(svg[aria-hidden="true"]) { width: 1.1em; height: 1.1em; flex: none; }
:where(.marke-stufe, .zaehler) svg { display: inline-block; }
img { height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
h1, h2, h3, h4 { font-family: var(--display); font-weight: 600; margin: 0; letter-spacing: -0.022em; line-height: 1.1; text-wrap: balance; }
h1 { font-size: clamp(2.2rem, 1.4rem + 2.5vw, 3.5rem); line-height: 1.04; letter-spacing: -0.03em; }
h2 { font-size: clamp(1.75rem, 1.3rem + 1.5vw, 2.6rem); }
h3 { font-size: clamp(1.2rem, 1.05rem + .45vw, 1.5rem); line-height: 1.2; }
h4 { font-size: 1.05rem; letter-spacing: -0.01em; }
strong { font-weight: 600; }
:focus-visible { outline: 3px solid var(--petrol); outline-offset: 3px; border-radius: 6px; }
:is(.hero, .rechner-ergebnis, .petrol, .dunkel, .buehne-dunkel, .fuss) :focus-visible { outline-color: #fff; }
:is(.hero, .petrol, .dunkel, .buehne-dunkel) :is(.app-karte, .formular, .anfrage-formular, .kurz-kasten, .preis-karte:not(.dunkel), .fr-themen, .uu-gruender) :focus-visible { outline-color: var(--petrol); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 16px; top: -60px; z-index: 100; background: var(--tinte); color: #fff; padding: 10px 16px; border-radius: 999px; text-decoration: none; }
.skip:focus { top: 12px; }
.skip:focus-visible { outline-color: #fff; }

.container { width: min(100% - 2 * var(--rand), var(--breite)); margin-inline: auto; }
.abschnitt { padding-block: var(--abschnitt); }
.abschnitt + .abschnitt.gleich { padding-top: 32px; }
.weiss { background: var(--flaeche); }
.getoent { background: var(--petrol-hell); }
.dunkel { background: var(--petrol-tief); color: #eef1ff; }
.dunkel .lead, .dunkel p { color: #c3c9ea; }

.lead { font-size: clamp(1.05rem, 1rem + .25vw, 1.2rem); color: var(--text-2); line-height: 1.55; }
.klein { font-size: 1rem; color: var(--text-3); }
.mini { font-size: .8125rem; color: var(--text-3); }

/* Kopf eines Abschnitts: zwei Varianten, damit nicht jeder Abschnitt gleich beginnt */
.kopf { max-width: 760px; margin-bottom: 44px; }
.kopf h2 + p { margin-top: 16px; }
.kopf.mitte { margin-inline: auto; text-align: center; }
/* Oben bündig: Bei kurzer Überschrift und langem Text hing die Überschrift sonst unten und der Text oben (Preise) */
.kopf-zeile { display: flex; justify-content: space-between; align-items: start; gap: 32px; margin-bottom: 40px; flex-wrap: wrap; }
.kopf-zeile h2 { max-width: 640px; }

/* ---------- Knöpfe ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 0 24px; border-radius: 999px; border: 1px solid transparent;
  font-family: var(--text); font-weight: 600; font-size: 1rem; line-height: 1; text-decoration: none; cursor: pointer;
  transition: background-color .2s, color .2s, border-color .2s, transform .2s;
}
.btn:active { transform: translateY(1px); }
.btn-primaer { background: var(--petrol); color: #fff; }
.btn-primaer:hover { background: var(--petrol-hover); }
.btn-dunkel { background: var(--tinte); color: #fff; }
.btn-dunkel:hover { background: #1b2240; }
.btn-hell { background: #fff; color: var(--tinte); }
.btn-hell:hover { background: var(--petrol-hell); }
.btn-rand { background: transparent; border-color: var(--linie-stark); color: var(--tinte); }
.btn-rand:hover { border-color: var(--tinte); }
.dunkel .btn-rand, .petrol .btn-rand { border-color: rgba(255,255,255,.35); color: #fff; }
.dunkel .btn-rand:hover, .petrol .btn-rand:hover { border-color: #fff; }
.btn svg { width: 18px; height: 18px; flex: none; }
.pfeil-link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 600; text-decoration: none; color: var(--petrol); }
.pfeil-link svg { width: 18px; height: 18px; transition: transform .2s; }
.pfeil-link:hover svg { transform: translateX(3px); }
.dunkel .pfeil-link { color: var(--mint); }

/* ---------- Navigation ---------- */
.nav {
  position: fixed; inset: 14px 0 auto; z-index: 50; pointer-events: none;
}
.nav-innen {
  pointer-events: auto; width: min(100% - 28px, 1240px); margin-inline: auto; height: var(--nav-h);
  display: flex; align-items: center; gap: 24px; padding: 0 10px 0 20px;
  background: #fff; border: 1px solid var(--linie); border-radius: 999px;
  box-shadow: 0 1px 2px rgba(17,24,22,.04), 0 10px 30px -12px rgba(17,24,22,.18);
}
.marke { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; text-decoration: none; flex: none; }
.marke svg { width: 30px; height: 30px; }
.marke span { font-family: var(--display); font-weight: 600; font-size: 1.32rem; letter-spacing: -0.03em; }
.nav-links { display: flex; gap: 2px; margin: 0; padding: 0; list-style: none; }
.nav-links a {
  display: block; padding: 10px 14px; border-radius: 999px; text-decoration: none; font-weight: 500; font-size: .96rem; color: var(--text-2);
  transition: background-color .2s, color .2s;
}
.nav-links a:hover { color: var(--tinte); background: var(--flaeche-2); }
.nav-links a[aria-current="page"] { color: var(--tinte); background: var(--flaeche-2); }
.nav-rechts { display: flex; align-items: center; gap: 8px; }
.nav-rechts .btn { min-height: 44px; padding: 0 20px; font-size: .95rem; }
:is(.nav-rechts, .nav-blatt) .btn[aria-current="page"] { background: var(--petrol-hover); box-shadow: inset 0 0 0 2px rgba(255,255,255,.55); }
.nav-menue { display: none; width: 44px; height: 44px; border-radius: 999px; border: 1px solid var(--linie); background: #fff; cursor: pointer; align-items: center; justify-content: center; }
.nav-menue svg { width: 20px; height: 20px; }
.nav-blatt { display: none; }

@media (max-width: 1020px) {
  .nav-links, .nav-rechts .btn-text { display: none; }
  .nav-menue { display: inline-flex; }
  .nav-innen { padding: 0 8px 0 16px; gap: 12px; justify-content: space-between; }
  .nav-rechts { margin-left: auto; }
  .nav-blatt {
    pointer-events: auto; display: block; width: min(100% - 28px, 1240px); margin: 8px auto 0;
    background: #fff; border: 1px solid var(--linie); border-radius: 24px; box-shadow: var(--schatten-gross);
    padding: 10px; transform-origin: top; transition: opacity .2s, transform .2s;
  }
  .nav-blatt[hidden] { display: none; }
  .nav-blatt a { display: block; padding: 14px 16px; border-radius: 14px; text-decoration: none; font-weight: 500; font-size: 1.05rem; }
  .nav-blatt a:not(.btn):hover, .nav-blatt a:not(.btn)[aria-current="page"] { background: var(--flaeche-2); }
  .nav-blatt .btn { width: 100%; margin-top: 8px; }
}
@media (max-width: 520px) { .nav-rechts .btn-primaer { padding: 0 16px; font-size: .9rem; } }
@media (max-width: 370px) { .nav-rechts .btn-primaer { display: none; } }

/* ---------- Hero Startseite ---------- */
.hero { padding-top: calc(var(--nav-h) + 64px); padding-bottom: 40px; }
.hero-raster { display: grid; grid-template-columns: minmax(0, 11fr) minmax(0, 13fr); gap: 56px; align-items: center; }
.hero-text h1 { margin-bottom: 22px; }
.hero-text .lead { max-width: 520px; margin-bottom: 30px; }
.hero-knoepfe { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 30px; }
.haken { display: flex; flex-wrap: wrap; gap: 10px 22px; padding: 0; margin: 0; list-style: none; font-size: .95rem; color: var(--text-2); font-weight: 500; }
.haken li { display: inline-flex; align-items: center; gap: 8px; }
.haken svg { width: 18px; height: 18px; color: var(--petrol); flex: none; }
.dunkel .haken, .petrol .haken { color: #d5daf5; }
.dunkel .haken svg, .petrol .haken svg { color: var(--mint); }

.hero-buehne { position: relative; aspect-ratio: 7 / 6.4; }
.hero-foto { position: absolute; inset: 0; border-radius: var(--r-bild); overflow: hidden; background: #d6dbe8; }
.hero-foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; transform: scale(1.06); animation: zoom 14s ease-out forwards; }
.hero-foto::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(6,10,36,0) 45%, rgba(6,10,36,.45) 100%); }
@keyframes zoom { to { transform: scale(1); } }
.hero-quelle { position: absolute; left: 22px; bottom: 18px; z-index: 2; color: rgba(255,255,255,.88); font-size: .8125rem; font-weight: 500; }

/* Sprechblasen an den Wohnungen */
.blase {
  position: absolute; z-index: 3; display: flex; align-items: flex-start; gap: 10px; max-width: 270px;
  padding: 12px 14px; background: #fff; border-radius: 16px 16px 16px 4px; box-shadow: var(--schatten);
  font-size: .875rem; line-height: 1.4;
}
.blase .ico { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; flex: none; background: var(--petrol-hell); color: var(--petrol); }
.blase .ico svg { width: 16px; height: 16px; }
.blase b { display: block; font-weight: 600; font-size: .875rem; }
.blase span { color: var(--text-3); font-size: .8125rem; }
.blase.b1 { left: 5%; top: 9%; }
.blase.b2 { right: 6%; top: 30%; border-radius: 16px 16px 4px 16px; }
.blase.b3 { left: 11%; top: 44%; }

/* Arbeitsliste unten auf dem Foto */
.liste-karte {
  position: absolute; z-index: 4; right: -28px; bottom: -32px; width: min(430px, 76%);
  background: #fff; border-radius: 20px; box-shadow: var(--schatten-gross); overflow: hidden;
}
.liste-kopf { display: flex; justify-content: space-between; align-items: center; padding: 14px 18px; border-bottom: 1px solid var(--linie); }
.liste-kopf b { font-family: var(--display); font-weight: 600; font-size: 1.02rem; }
.zaehler { display: inline-flex; align-items: center; gap: 6px; font-size: .8125rem; color: var(--text-2); font-weight: 500; }
.zaehler i { font-style: normal; display: inline-grid; place-items: center; min-width: 24px; height: 22px; padding: 0 7px; border-radius: 999px; background: var(--flaeche-2); font-weight: 600; color: var(--tinte); }
.zeile { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center; padding: 12px 18px; border-bottom: 1px solid var(--linie); font-size: .875rem; line-height: 1.35; }
.zeile:last-child { border-bottom: 0; }
.zeile b { display: block; font-weight: 600; font-size: .9rem; }
.zeile small { color: var(--text-3); font-size: .78rem; }
.zeile.notfall { box-shadow: inset 3px 0 0 var(--notfall); }
:is(.zeile, .km-ml-zeile).notfall small em { color: #b3262b; font-style: normal; font-weight: 600; }
.knopf-ui { display: inline-flex; align-items: center; justify-content: center; height: 30px; padding: 0 12px; border-radius: 999px; font-size: .78rem; font-weight: 600; white-space: nowrap; border: 1px solid var(--linie-stark); background: #fff; color: var(--tinte); }
.knopf-ui.rot { background: var(--notfall); border-color: var(--notfall); color: #fff; }
.knopf-ui.petrol { background: var(--petrol); border-color: var(--petrol); color: #fff; }
.knopf-ui.ok { background: var(--ok-weich); border-color: transparent; color: var(--ok); }
.knopf-ui svg { width: 14px; height: 14px; margin-right: 4px; }

/* Einflug beim Laden, einmal */
@media (prefers-reduced-motion: no-preference) {
  .js .einflug { opacity: 0; transform: translateY(16px) scale(.98); }
  .js .geladen .einflug { animation: einflug .7s cubic-bezier(.2,.8,.2,1) forwards; animation-delay: var(--d, 0s); }
}
@keyframes einflug { to { opacity: 1; transform: none; } }

/* ---------- Anbindung ---------- */
.anbindung { padding-block: 72px 24px; }
.anbindung-innen { display: flex; align-items: center; gap: 40px; padding: 26px 0; border-top: 1px solid var(--linie); border-bottom: 1px solid var(--linie); }
.anbindung p { margin: 0; flex: none; max-width: 230px; font-size: .95rem; font-weight: 500; color: var(--text-2); line-height: 1.4; }
.marken { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 40px; margin: 0; padding: 0; list-style: none; flex: 1; justify-content: space-between; }
.marken li { font-family: var(--display); font-weight: 600; font-size: 1.12rem; color: #59617a; letter-spacing: -0.01em; white-space: nowrap; display: inline-flex; align-items: center; gap: 8px; }
.marken svg { width: 20px; height: 20px; color: #59617a; }

/* ---------- Produkt-Tafeln ---------- */
.tafeln { display: grid; grid-template-columns: 7fr 5fr; gap: 20px; }
.tafel {
  position: relative; display: block; min-height: 540px; border-radius: var(--r-bild); overflow: hidden; color: #fff; text-decoration: none;
  isolation: isolate; background: var(--petrol-tief);
}
.tafel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform .8s cubic-bezier(.2,.8,.2,1); }
.tafel::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(6,10,36,.05) 30%, rgba(6,10,36,.82) 100%); }
.tafel:hover img { transform: scale(1.035); }
.tafel-text { position: absolute; left: 32px; right: 32px; bottom: 30px; }
.tafel-text h3 { font-size: clamp(1.5rem, 1.2rem + .8vw, 2rem); margin-bottom: 12px; }
.stichworte { display: flex; flex-wrap: wrap; gap: 8px 18px; padding: 0; margin: 0 0 18px; list-style: none; font-size: .95rem; color: rgba(255,255,255,.9); }
.stichworte li { display: inline-flex; gap: 8px; align-items: center; }
.stichworte li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--mint); }
.tafel .weiter { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; }
.tafel .weiter svg { width: 18px; height: 18px; transition: transform .2s; }
.tafel:hover .weiter svg { transform: translateX(4px); }
.marke-schild { position: absolute; top: 22px; left: 22px; display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 999px; background: rgba(255,255,255,.95); color: var(--tinte); font-size: .8125rem; font-weight: 600; }
.marke-schild i { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); }
.marke-schild.bald i { background: #ffb547; }
/* kleine UI-Karte auf der Tafel */
.tafel-ui { position: absolute; top: 22px; right: 22px; width: min(300px, 56%); background: #fff; color: var(--tinte); border-radius: 14px; box-shadow: var(--schatten); padding: 14px 16px; font-size: .8125rem; line-height: 1.4; }
.tafel-ui b { display: block; font-size: .875rem; margin-bottom: 2px; }
.tafel-ui .reihe { display: flex; justify-content: space-between; gap: 8px; padding-top: 10px; margin-top: 10px; border-top: 1px solid var(--linie); align-items: center; }
.unter-tafeln { display: flex; justify-content: center; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 36px; text-align: center; }
.unter-tafeln p { margin: 0; color: var(--text-2); }

/* ---------- Signatur: Ein Anliegen, fünf Schritte ---------- */
.schritte { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 40px; align-items: start; }
.schritt-liste { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.schritt-knopf {
  width: 100%; display: grid; grid-template-columns: 40px 1fr; gap: 14px; align-items: start; text-align: left;
  padding: 16px 18px; border-radius: 18px; border: 1px solid transparent; background: transparent; cursor: pointer;
  transition: background-color .25s, border-color .25s;
}
.schritt-knopf:hover { background: var(--grund); }
.schritt-knopf[aria-selected="true"] { background: var(--grund); border-color: var(--linie); }
.schritt-ico { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--flaeche-2); color: var(--text-2); transition: background-color .25s, color .25s; }
.schritt-ico svg { width: 20px; height: 20px; }
.schritt-knopf[aria-selected="true"] .schritt-ico { background: var(--petrol); color: #fff; }
.schritt-knopf b { display: block; font-family: var(--display); font-weight: 600; font-size: 1.08rem; letter-spacing: -0.01em; margin-bottom: 2px; }
/* Nur der Beschreibungstext (span im div), nicht die Symbol-Kachel .schritt-ico (die ist auch ein span) */
.schritt-knopf div > span { display: block; color: var(--text-2); font-size: .94rem; line-height: 1.45; }
.schritt-knopf .fortschritt { display: block; height: 3px; margin-top: 12px; border-radius: 3px; background: var(--linie); overflow: hidden; visibility: hidden; }
.schritt-knopf[aria-selected="true"] .fortschritt { visibility: visible; }
.schritt-knopf .fortschritt::after { content: ""; display: block; height: 100%; width: var(--p, 0%); background: var(--petrol); }

.buehne {
  position: relative; background: var(--grund); border: 1px solid var(--linie); border-radius: 26px; padding: 14px; min-height: 560px;
  display: flex; flex-direction: column;
}
.fenster-leiste { display: flex; align-items: center; gap: 12px; padding: 4px 8px 14px; }
.fenster-leiste .punkte { display: flex; gap: 6px; }
.fenster-leiste .punkte i { width: 10px; height: 10px; border-radius: 50%; background: #d6dbe8; }
.fenster-leiste .adresse { flex: 1; text-align: center; font-size: .8125rem; color: var(--text-3); font-weight: 500; }
.fenster { flex: 1; position: relative; background: #fff; border-radius: 16px; border: 1px solid var(--linie); overflow: hidden; }
.szene { position: absolute; inset: 0; padding: 26px 28px; overflow: auto; opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .35s, transform .35s, visibility 0s .35s; }
.szene.aktiv { opacity: 1; visibility: visible; transform: none; transition: opacity .35s, transform .35s; }
.buehne-fuss { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 8px 4px; }
.buehne-fuss .mini { font-weight: 500; }
.buehne-fuss button { min-height: 44px; }

.ui-meta { font-size: .8125rem; color: var(--text-3); margin-bottom: 6px; }
.ui-titel { font-family: var(--display); font-weight: 600; font-size: 1.35rem; letter-spacing: -0.015em; line-height: 1.2; margin-bottom: 14px; }
.ui-mail { border: 1px solid var(--linie); border-radius: 14px; padding: 18px 20px; font-size: .95rem; line-height: 1.6; }
.ui-mail-kopf { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px solid var(--linie); font-size: .875rem; }
.ui-mail-kopf b { font-weight: 600; }
.ui-mail-kopf span { color: var(--text-3); }
.platzhalter {
  display: inline; padding: 1px 6px; border-radius: 6px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .82em;
  background: var(--petrol-hell); color: var(--petrol-tief); font-weight: 600; white-space: nowrap;
}
.geschwaerzt .klar { display: none; }
.ui-hinweis { display: flex; gap: 12px; align-items: flex-start; margin-top: 16px; padding: 14px 16px; border-radius: 12px; background: var(--grund); font-size: .9rem; line-height: 1.45; color: var(--text-2); }
.ui-hinweis svg { width: 20px; height: 20px; flex: none; color: var(--petrol); margin-top: 1px; }
.ui-hinweis b { color: var(--tinte); }
.ui-raster { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 20px; padding: 18px 20px; border: 1px solid var(--linie); border-radius: 14px; }
.ui-raster div > span { display: block; font-size: .8125rem; color: var(--text-3); }
.ui-raster div b { display: block; font-weight: 600; font-size: .98rem; line-height: 1.3; }
.marke-stufe { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: .8125rem; font-weight: 600; }
.marke-stufe.heute { background: var(--heute-weich); color: var(--heute); }
.marke-stufe.notfall { background: var(--notfall-weich); color: #b3262b; }
.marke-stufe.ok { background: var(--ok-weich); color: var(--ok); }
.marke-stufe.info { background: var(--petrol-hell); color: var(--petrol-tief); }
.ui-check { display: grid; gap: 8px; margin: 16px 0 0; padding: 0; list-style: none; font-size: 1rem; }
.ui-check li { display: flex; gap: 10px; align-items: flex-start; }
.ui-check svg { width: 18px; height: 18px; flex: none; margin-top: 2px; color: var(--ok); }
.ui-check li.offen svg { color: var(--heute); }
.ui-dateien { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
.ui-datei { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--linie); border-radius: 12px; font-size: .85rem; }
.ui-datei i { width: 38px; height: 38px; border-radius: 8px; flex: none; background: linear-gradient(135deg, #cfd8d5, #9fb3ad); position: relative; overflow: hidden; }
.ui-datei i::after { content: ""; position: absolute; left: 6px; right: 6px; bottom: 8px; height: 10px; border-radius: 3px; background: rgba(255,255,255,.55); }
.ui-datei span { display: block; color: var(--text-3); font-size: .78rem; }
.ui-entwurf { border: 1px solid var(--linie); border-radius: 14px; padding: 18px 20px; font-size: 1rem; line-height: 1.6; }
.ui-naechster { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 16px 18px; margin-bottom: 14px; border: 1px solid var(--linie-stark); border-radius: 14px; }
.ui-naechster b { display: block; font-weight: 600; }
.ui-naechster span { font-size: .875rem; color: var(--text-2); }
.ui-zeilen { display: grid; gap: 8px; margin-top: 14px; }
.ui-zeilen div { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 12px; background: var(--grund); font-size: .88rem; }

/* ---------- Notfall ---------- */
.notfall-raster { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 64px; align-items: center; }
.notfall-raster h2 { margin-bottom: 18px; color: #fff; }
.zeitleiste { position: relative; margin: 34px 0 0; padding: 0; list-style: none; }
.zeitleiste::before { content: ""; position: absolute; left: 7px; top: 10px; bottom: 10px; width: 2px; background: rgba(143,227,245,.25); }
.zeitleiste li { position: relative; display: grid; grid-template-columns: 92px 1fr; gap: 14px; padding: 0 0 20px 32px; }
.zeitleiste li:last-child { padding-bottom: 0; }
.zeitleiste li::before { content: ""; position: absolute; left: 0; top: 7px; width: 16px; height: 16px; border-radius: 50%; background: var(--petrol-tief); border: 2px solid var(--mint); }
.zeitleiste li.rot::before { border-color: #ff6b70; background: #ff6b70; }
.zeitleiste time { font-family: var(--text); font-variant-numeric: tabular-nums; font-weight: 600; font-size: .95rem; color: var(--mint); padding-top: 3px; }
.zeitleiste b { display: block; color: #fff; font-weight: 600; }
.zeitleiste span { color: #aab3e0; font-size: .95rem; line-height: 1.5; }
.notfall-foto { position: relative; border-radius: var(--r-bild); overflow: hidden; aspect-ratio: 4 / 4.6; }
.notfall-foto img { width: 100%; height: 100%; object-fit: cover; object-position: 40% 50%; }
.notfall-karte {
  position: absolute; left: 18px; right: 18px; bottom: 18px; background: #fff; color: var(--tinte); border-radius: 16px; padding: 16px 18px; box-shadow: var(--schatten-gross);
  display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: center; font-size: 1rem; line-height: 1.4;
}
.notfall-karte .sms { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: var(--notfall); color: #fff; }
.notfall-karte .sms svg { width: 20px; height: 20px; }
.notfall-karte b { display: block; }
.notfall-karte span { color: var(--text-3); font-size: .8125rem; }
.belege { display: flex; flex-wrap: wrap; gap: 28px 48px; margin-top: 40px; padding-top: 28px; border-top: 1px solid rgba(143,227,245,.2); }
.beleg strong { display: block; font-family: var(--display); font-weight: 600; font-size: clamp(2rem, 1.6rem + 1.2vw, 2.7rem); line-height: 1; color: #fff; letter-spacing: -0.03em; margin-bottom: 8px; }
.beleg span { display: block; font-size: .92rem; color: #aab3e0; max-width: 210px; line-height: 1.4; }

/* ---------- Datenschutz ---------- */
.ds-raster { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 64px; align-items: center; }
.ds-punkte { display: grid; grid-template-columns: 1fr 1fr; gap: 26px 32px; margin: 36px 0 32px; padding: 0; list-style: none; }
.ds-punkte li { display: grid; grid-template-columns: 44px 1fr; gap: 14px; align-items: start; }
.ds-ico { width: 44px; height: 44px; border-radius: 13px; background: #fff; color: var(--petrol); display: grid; place-items: center; }
.ds-ico svg { width: 22px; height: 22px; }
.ds-punkte b { display: block; font-weight: 600; margin-bottom: 2px; line-height: 1.3; }
.ds-punkte span { color: var(--text-2); font-size: .94rem; line-height: 1.5; display: block; }
.mappe { position: relative; height: 520px; }
.blatt {
  position: absolute; left: 50%; width: 330px; padding: 22px 24px; border-radius: 14px; background: #fff; box-shadow: var(--schatten);
  transform: translateX(-50%) rotate(var(--w, 0deg)); transition: transform .5s cubic-bezier(.2,.8,.2,1);
}
.blatt:nth-child(1) { top: 0; --w: -6deg; margin-left: -40px; }
.blatt:nth-child(2) { top: 26px; --w: 4deg; margin-left: 46px; }
.blatt-haupt { top: 64px; --w: -1deg; width: 360px; padding: 26px 28px; box-shadow: var(--schatten-gross); }
.mappe:hover .blatt:nth-child(1) { transform: translateX(-50%) rotate(-9deg) translateY(-8px); }
.mappe:hover .blatt:nth-child(2) { transform: translateX(-50%) rotate(7deg) translateY(-8px); }
.blatt-titel { font-family: var(--display); font-weight: 600; font-size: 1.05rem; margin-bottom: 4px; }
.blatt-linie { height: 7px; border-radius: 4px; background: var(--flaeche-2); margin-top: 10px; }
.blatt-linie.k { width: 62%; }
.blatt ol { margin: 14px 0 0; padding: 0; list-style: none; counter-reset: u; font-size: .875rem; line-height: 1.35; }
.blatt ol li { display: flex; gap: 10px; align-items: center; padding: 7px 0; border-bottom: 1px solid var(--linie); }
.blatt ol li:last-child { border-bottom: 0; }
.blatt ol li svg { width: 16px; height: 16px; color: var(--petrol); flex: none; }
.blatt .stempel { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; padding: 6px 12px; border-radius: 999px; background: var(--petrol-hell); color: var(--petrol-tief); font-weight: 600; font-size: .8125rem; }

/* ---------- Einführung ---------- */
.einf-raster { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 64px; align-items: stretch; }
.einf-foto { position: relative; border-radius: var(--r-bild); overflow: hidden; min-height: 520px; }
.einf-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.einf-foto figcaption { position: absolute; left: 18px; bottom: 18px; right: 18px; padding: 14px 16px; border-radius: 14px; background: rgba(255,255,255,.95); font-size: 1rem; line-height: 1.45; }
.einf-foto figcaption b { display: block; }
.ablauf { margin: 32px 0 0; padding: 0; list-style: none; display: grid; gap: 0; }
.ablauf li { display: grid; grid-template-columns: 112px 1fr; gap: 20px; padding: 20px 0; border-top: 1px solid var(--linie); }
.ablauf li:last-child { border-bottom: 1px solid var(--linie); }
.ablauf .wann { font-family: var(--display); font-weight: 600; color: var(--petrol); font-size: 1rem; padding-top: 1px; }
.ablauf b { display: block; font-weight: 600; font-size: 1.05rem; margin-bottom: 4px; }
.ablauf span { color: var(--text-2); font-size: .97rem; line-height: 1.5; }
.preis-zeile { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; margin-top: 28px; padding: 20px 22px; border-radius: 18px; background: var(--flaeche); border: 1px solid var(--linie); }
.preis-zeile strong { font-family: var(--display); font-size: 1.5rem; letter-spacing: -0.02em; }
.preis-zeile p { margin: 0; color: var(--text-2); font-size: .95rem; }

/* ---------- Kontakt ---------- */
.petrol { background: var(--petrol); color: #fff; }
.petrol .lead, .petrol p { color: #e3e6ff; }
.kontakt-raster { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 64px; align-items: start; }
.kontakt-raster h2 { margin-bottom: 18px; color: #fff; }
.direkt { margin-top: 32px; display: grid; gap: 12px; }
.direkt a { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; font-weight: 600; font-size: 1.1rem; color: #fff; }
.direkt a svg { width: 22px; height: 22px; color: var(--mint); }
.direkt a:hover { text-decoration: underline; text-underline-offset: 4px; }
.formular { background: #fff; color: var(--tinte); border-radius: 24px; padding: 32px; box-shadow: var(--schatten-gross); }
.formular h3 { margin-bottom: 6px; }
.formular > p { color: var(--text-2) !important; font-size: 1rem; margin-bottom: 22px; }
.felder { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.feld { display: grid; gap: 6px; }
.feld.breit { grid-column: 1 / -1; }
.feld label { font-weight: 600; font-size: .9rem; }
.feld label small { font-weight: 400; color: var(--text-3); }
.feld input, .feld select, .feld textarea {
  width: 100%; min-height: 48px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--linie-stark); background: #fff;
  font: inherit; font-size: 1rem; color: var(--tinte); transition: border-color .2s, box-shadow .2s;
}
.feld textarea { min-height: 112px; resize: vertical; }
.feld select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234a534f' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 18px; padding-right: 40px; }
.feld input:focus, .feld select:focus, .feld textarea:focus { outline: none; border-color: var(--petrol); box-shadow: 0 0 0 3px rgba(43,75,255,.2); }
.feld .fehler { display: none; color: var(--notfall); font-size: .85rem; font-weight: 500; }
.feld.hat-fehler input, .feld.hat-fehler select, .feld.hat-fehler textarea { border-color: var(--notfall); }
.feld.hat-fehler .fehler { display: block; }
.einwilligung { grid-column: 1 / -1; display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: start; font-size: .88rem; color: var(--text-2); line-height: 1.5; }
.einwilligung input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--petrol); }
.einwilligung a { color: var(--petrol); }
.formular .btn { width: 100%; margin-top: 20px; }
.formular-ok { display: none; text-align: center; padding: 30px 10px; }
.formular-ok svg { width: 48px; height: 48px; color: var(--ok); margin: 0 auto 14px; }
.formular.gesendet .formular-ok { display: block; }
.formular.gesendet form, .formular.gesendet > h3, .formular.gesendet > p { display: none; }

/* ---------- Fuß ---------- */
.fuss { background: var(--petrol-tiefer); color: #c3c9ea; padding: 72px 0 32px; font-size: 1rem; }
.fuss-raster { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px; }
.fuss .marke span { color: #fff; }
.fuss-text { margin-top: 16px; max-width: 320px; line-height: 1.55; }
.fuss details { border: 0; }
.fuss summary { list-style: none; font-family: var(--display); font-weight: 600; color: #fff; font-size: 1rem; margin-bottom: 14px; cursor: default; }
.fuss summary::-webkit-details-marker { display: none; }
.fuss ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.fuss a { text-decoration: none; color: #c3c9ea; }
.fuss a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.fuss-unten { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 56px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.1); font-size: .8125rem; color: #8b94c4; }

/* ---------- Unterseiten ---------- */
.seiten-hero { padding-top: calc(var(--nav-h) + 72px); padding-bottom: 64px; }
.seiten-hero-raster { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: 56px; align-items: center; }
.seiten-hero h1 { margin-bottom: 20px; }
.seiten-hero .lead { margin-bottom: 28px; max-width: 560px; }
.pfad { display: flex; gap: 8px; align-items: center; margin-bottom: 6px; font-size: .875rem; color: var(--text-3); font-weight: 500; }
.pfad a { display: inline-flex; align-items: center; min-height: 44px; position: relative; text-decoration: none; }
/* Trefferfläche breiter als das Wort, ohne den Text zu verschieben */
.pfad a::after { content: ""; position: absolute; inset: 0 -7px; }
.pfad a:hover { color: var(--tinte); }
.status-schild { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; background: #fff; border: 1px solid var(--linie); font-size: .85rem; font-weight: 600; margin-bottom: 18px; }
.status-schild i { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); }
.status-schild.bald i { background: #ffb547; }

.app-karte { background: #fff; border: 1px solid var(--linie); border-radius: 22px; box-shadow: var(--schatten-gross); overflow: hidden; }
.app-karte-kopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 20px; border-bottom: 1px solid var(--linie); font-size: .85rem; color: var(--text-3); }
.app-karte-kopf b { color: var(--tinte); font-weight: 600; }
.app-karte-innen { padding: 22px 24px; }

.funktionen { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 20px; }
.funktion { grid-column: span 4; background: #fff; border: 1px solid var(--linie); border-radius: 22px; padding: 28px; display: flex; flex-direction: column; gap: 14px; transition: transform .3s; will-change: transform; }
.funktion:hover { transform: translateY(-3px); border-color: #cfd6f5; }
.funktion.gross { grid-column: span 7; }
.funktion.mittel { grid-column: span 5; }
.funktion.halb { grid-column: span 6; }
.funktion h3 { font-size: 1.3rem; }
.funktion p { color: var(--text-2); font-size: .98rem; }
.funktion .ico { width: 46px; height: 46px; border-radius: 13px; background: var(--petrol-hell); color: var(--petrol); display: grid; place-items: center; }
.funktion .ico svg { width: 23px; height: 23px; }
.funktion .ui-zeilen { margin-top: auto; }
.funktion-bild { margin-top: auto; border-radius: 14px; overflow: hidden; background: var(--grund); padding: 16px; }

.tabelle-wrap { overflow-x: auto; border: 1px solid var(--linie); border-radius: 20px; background: #fff; }
.tabelle { width: 100%; border-collapse: collapse; font-size: .95rem; min-width: 680px; }
.tabelle th, .tabelle td { text-align: left; padding: 14px 18px; border-bottom: 1px solid var(--linie); vertical-align: top; line-height: 1.45; }
.tabelle th { font-size: .8125rem; color: var(--text-3); font-weight: 600; background: var(--grund); }
.tabelle tr:last-child td { border-bottom: 0; }
.tabelle td:first-child { font-weight: 600; }

.gespraech { display: grid; gap: 12px; }
.sprecher { display: grid; grid-template-columns: 36px 1fr; gap: 12px; align-items: start; }
.sprecher .av { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-size: .8125rem; font-weight: 600; background: var(--flaeche-2); color: var(--text-2); }
.sprecher.ki .av { background: var(--petrol); color: #fff; }
.sprecher .sb { padding: 12px 14px; border-radius: 4px 16px 16px 16px; background: var(--grund); font-size: .92rem; line-height: 1.5; }
.sprecher.ki .sb { background: var(--petrol-hell); }
.sprecher .sb small { display: block; font-size: .75rem; color: var(--text-3); margin-bottom: 2px; font-weight: 600; }

.zwei-spalten { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.liste-haken { display: grid; gap: 14px; margin: 24px 0 0; padding: 0; list-style: none; }
.liste-haken li { display: grid; grid-template-columns: 24px 1fr; gap: 12px; align-items: start; }
.liste-haken svg { width: 22px; height: 22px; color: var(--petrol); margin-top: 2px; }
.liste-haken.nein svg { color: var(--text-3); }

.preis-raster { display: grid; grid-template-columns: 7fr 5fr; gap: 20px; align-items: stretch; }
.preis-karte { background: #fff; border: 1px solid var(--linie); border-radius: 26px; padding: 36px; display: flex; flex-direction: column; }
.preis-karte.dunkel { border: 0; }
.preis-karte .betrag { font-family: var(--display); font-weight: 600; font-size: clamp(2.6rem, 2rem + 2vw, 3.6rem); letter-spacing: -0.04em; line-height: 1; margin: 18px 0 6px; }
.preis-karte .betrag small { font-size: 1.05rem; letter-spacing: 0; font-weight: 500; color: var(--text-3); }
.preis-karte.dunkel .betrag small { color: #aab3e0; }
.preis-karte .btn { margin-top: auto; align-self: flex-start; }
.preis-karte .liste-haken { margin-bottom: 30px; }
.preis-karte.dunkel .liste-haken svg { color: var(--mint); }
.zusatz { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 20px; }
.zusatz div { padding: 22px 24px; border-radius: 20px; background: #fff; border: 1px solid var(--linie); }
.zusatz b { display: block; font-family: var(--display); font-size: 1.15rem; margin-bottom: 4px; }
.zusatz span { color: var(--text-2); font-size: .95rem; }

.fragen { max-width: 860px; margin-inline: auto; border-top: 1px solid var(--linie); }
.fragen details { border-bottom: 1px solid var(--linie); }
.fragen summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 20px; align-items: center; padding: 22px 4px; font-family: var(--display); font-weight: 600; font-size: 1.12rem; letter-spacing: -0.01em; }
.fragen summary::-webkit-details-marker { display: none; }
.fragen summary svg { width: 22px; height: 22px; flex: none; transition: transform .25s; color: var(--petrol); }
.fragen details[open] summary svg { transform: rotate(45deg); }
.fragen .antwort { padding: 0 4px 24px; color: var(--text-2); max-width: 720px; }

.rechtstext { max-width: 760px; }
.rechtstext h2 { font-size: 1.5rem; margin: 40px 0 12px; }
.rechtstext p, .rechtstext li { color: var(--text-2); }
.platzhalter-hinweis { padding: 14px 18px; border-radius: 14px; background: var(--heute-weich); color: var(--heute); font-weight: 500; margin-bottom: 28px; }

.cta-band { border-radius: 28px; padding: 56px; display: grid; grid-template-columns: 1fr auto; gap: 32px; align-items: center; }
.cta-band h2 { color: #fff; margin-bottom: 10px; -webkit-hyphens: manual; hyphens: manual; }

/* ---------- Einblenden beim Scrollen ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js .zeigen { opacity: 0; transform: translateY(26px); transition: opacity .8s cubic-bezier(.2,.8,.2,1), transform .8s cubic-bezier(.2,.8,.2,1); transition-delay: var(--d, 0s); }
  .js .zeigen.da { opacity: 1; transform: none; }
}

/* ---------- Responsiv ---------- */
@media (max-width: 1100px) {
  .liste-karte { right: 16px; }
}
@media (max-width: 1020px) {
  :root { --abschnitt: 72px; }
  /* minmax(0, …): Die Spalte wird nie breiter als der Bildschirm, auch wenn ein Teil darin nicht umbrechen darf */
  .hero-raster, .seiten-hero-raster { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .hero-text .lead { max-width: 620px; }
  .hero-buehne { aspect-ratio: 4 / 3.3; margin-bottom: 70px; }
  .liste-karte { right: 16px; bottom: -64px; }
  .schritte { grid-template-columns: 1fr; gap: 20px; }
  .schritt-liste { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
  .schritt-knopf { grid-template-columns: 1fr; justify-items: center; text-align: center; padding: 12px 6px; gap: 8px; }
  .schritt-knopf div > span, .schritt-knopf .fortschritt { display: none; }
  .schritt-knopf b { font-size: .9rem; margin: 0; }
  /* minmax(0, …) wie bei den Hero-Rastern: Die Spalte wird nie breiter als der Bildschirm (Telefon-Seite war bei 320 px 2,3 px zu breit) */
  .notfall-raster, .ds-raster, .einf-raster, .kontakt-raster, .zwei-spalten { grid-template-columns: minmax(0, 1fr); gap: 44px; }
  .notfall-foto { aspect-ratio: 4 / 3.4; }
  .einf-foto { min-height: 420px; }
  .fuss-raster { grid-template-columns: 1fr 1fr; }
  .fuss-raster > :first-child { grid-column: 1 / -1; }
  .funktion, .funktion.gross, .funktion.mittel, .funktion.halb { grid-column: span 6; }
  .preis-raster { grid-template-columns: 1fr; }
  .cta-band { grid-template-columns: 1fr; padding: 44px; }
  .anbindung-innen { flex-direction: column; align-items: flex-start; gap: 20px; }
  .anbindung p { max-width: none; }
  .marken { justify-content: flex-start; gap: 12px 32px; }
}
@media (max-width: 760px) {
  :root { --rand: 18px; --abschnitt: 60px; }
  body { font-size: 16px; }
  .hero { padding-top: calc(var(--nav-h) + 44px); }
  .hero-buehne { aspect-ratio: 4 / 4.4; margin-bottom: 150px; }
  .blase { max-width: 220px; padding: 10px 12px; font-size: .8125rem; }
  .blase .ico { width: 26px; height: 26px; }
  .blase.b1 { left: 4%; top: 5%; }
  .blase.b2 { right: 4%; top: 25%; }
  .blase.b3 { left: 4%; top: 46%; }
  .liste-karte { left: 10px; right: 10px; width: auto; bottom: -140px; }
  .hero-quelle { display: none; }
  .tafeln { grid-template-columns: 1fr; }
  .tafel { min-height: 460px; }
  .tafel-text { left: 22px; right: 22px; bottom: 22px; }
  .tafel-ui { display: none; }
  .buehne { min-height: 0; padding: 8px; border-radius: 20px; }
  .fenster { min-height: 470px; }
  .szene { padding: 18px 16px; }
  .ui-raster { grid-template-columns: 1fr 1fr; padding: 14px; gap: 14px; }
  .ui-dateien { grid-template-columns: 1fr; }
  .ui-naechster { flex-direction: column; align-items: flex-start; }
  .schritt-ico { width: 34px; height: 34px; border-radius: 10px; }
  .schritt-ico svg { width: 18px; height: 18px; }
  .schritt-knopf { padding: 10px 2px; border-radius: 14px; }
  .schritt-knopf b { font-size: .75rem; letter-spacing: 0; }
  .zeitleiste li { grid-template-columns: 1fr; gap: 2px; }
  .ds-punkte { grid-template-columns: 1fr; gap: 20px; }
  .mappe { height: 440px; }
  .blatt { width: 270px; padding: 18px; }
  .blatt-haupt { width: min(320px, 92%); }
  .blatt:nth-child(1) { margin-left: -24px; }
  .blatt:nth-child(2) { margin-left: 26px; }
  .ablauf li { grid-template-columns: 1fr; gap: 4px; }
  .einf-foto { min-height: 360px; }
  .felder { grid-template-columns: 1fr; }
  .formular { padding: 24px 20px; border-radius: 20px; }
  .fuss-raster { grid-template-columns: 1fr; gap: 0; }
  .fuss-raster > :first-child { margin-bottom: 28px; }
  .fuss details { border-top: 1px solid rgba(255,255,255,.1); }
  .fuss summary { cursor: pointer; padding: 16px 0; margin: 0; display: flex; justify-content: space-between; }
  .fuss summary::after { content: "+"; font-weight: 500; color: var(--mint); }
  .fuss details[open] summary::after { content: "–"; }
  .fuss details ul { padding-bottom: 18px; }
  .funktion, .funktion.gross, .funktion.mittel, .funktion.halb { grid-column: 1 / -1; padding: 22px; }
  .zusatz { grid-template-columns: 1fr; }
  .preis-karte { padding: 26px 22px; }
  .cta-band { padding: 32px 22px; border-radius: 22px; }
  .seiten-hero { padding-top: calc(var(--nav-h) + 48px); padding-bottom: 44px; }
  .kopf { margin-bottom: 32px; }
  .kopf-zeile { margin-bottom: 28px; }
  .anbindung { padding-top: 56px; }
  .belege { gap: 22px 30px; }
  .notfall-karte { left: 12px; right: 12px; bottom: 12px; }
}
@media (max-width: 400px) {
  .marken li { font-size: 1rem; }
  .blase.b3 { display: none; }
}
.einwilligung.hat-fehler > span { color: var(--notfall); }
[data-zurueck] svg { transform: rotate(180deg); }
[data-zurueck]:disabled { opacity: .4; cursor: default; }
.nav-innen > nav { margin-inline: auto; }
.belege { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.blatt .stempel svg { width: 16px; height: 16px; }
.blatt:nth-child(1) { top: 0; --w: -7deg; margin-left: -84px; }
.blatt:nth-child(2) { top: 14px; --w: 6deg; margin-left: 84px; }
.blatt-haupt { top: 78px; margin-left: 0 !important; }
@media (max-width: 760px) {
  .belege { grid-template-columns: 1fr 1fr; }
  .blatt:nth-child(1) { margin-left: -40px; }
  .blatt:nth-child(2) { margin-left: 40px; }
  .blatt-haupt { top: 64px; }
}
.weiter-schritte { list-style: none; margin: 36px 0 0; padding: 22px 24px; border-radius: 20px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); display: grid; gap: 16px; counter-reset: ws; }
.weiter-schritte li { display: grid; grid-template-columns: 30px 1fr; gap: 4px 14px; counter-increment: ws; }
.weiter-schritte li::before { content: counter(ws); grid-row: span 2; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--mint); color: var(--petrol-tief); font-weight: 600; font-size: .9rem; }
.weiter-schritte b { color: #fff; font-weight: 600; }
.weiter-schritte span { color: #dfe3ff; font-size: .94rem; line-height: 1.45; }
.funktion.breit { grid-column: 1 / -1; flex-direction: row; align-items: flex-start; gap: 20px; }
.funktion.breit h3 { margin-bottom: 8px; }
.funktion.breit p { max-width: 760px; }
.funktion .ui-naechster { background: var(--grund); border-color: var(--linie); }
@media (max-width: 760px) { .funktion.breit { flex-direction: column; } }
.nav-rechts .btn { white-space: nowrap; }
@media (max-width: 760px) { .hero-buehne { margin-bottom: 96px; } .anbindung { padding-top: 40px; } }
@media (max-width: 430px) {
  .nav-innen { gap: 8px; padding: 0 6px 0 14px; }
  .marke span { font-size: 1.2rem; }
  .marke svg { width: 26px; height: 26px; }
  .nav-rechts { gap: 6px; }
  .nav-rechts .btn-primaer { padding: 0 13px; font-size: .84rem; min-height: 44px; }
}
.szene.aktiv { position: relative; inset: auto; }
.fenster { display: flex; flex-direction: column; }
@media (max-width: 760px) {
  .fenster { min-height: 0; }
  .belege { grid-template-columns: 1fr; gap: 18px; }
  .beleg { display: grid; grid-template-columns: 128px 1fr; align-items: center; gap: 14px; }
  .beleg strong { margin: 0; font-size: 1.9rem; }
  .beleg span { max-width: none; }
}
/* Alle Szenen liegen in derselben Rasterzelle: Höhe = höchste Szene, kein Springen */
.fenster { display: grid; }
.szene, .szene.aktiv { position: relative; inset: auto; grid-area: 1 / 1; overflow: visible; }
@media (max-width: 760px) {
  .mappe { height: auto; }
  .mappe .blatt:not(.blatt-haupt) { display: none; }
  .blatt-haupt { position: relative; left: auto; top: auto; transform: rotate(-1deg); width: 100%; margin: 0 auto; }
}
small, .zeile small, .feld label small, .sprecher .sb small { font-size: .8125rem; }
.knopf-ui { font-size: .8125rem; }
.platzhalter { font-size: .8125rem; }
.ui-zeilen div { flex-wrap: wrap; }
@media (max-width: 760px) {
  h1, h2 { hyphens: auto; -webkit-hyphens: auto; }
  .tabelle-wrap { border: 0; background: transparent; overflow: visible; }
  .tabelle { min-width: 0; font-size: .95rem; }
  .tabelle thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .tabelle, .tabelle tbody, .tabelle tr, .tabelle td { display: block; }
  .tabelle tr { background: #fff; border: 1px solid var(--linie); border-radius: 16px; padding: 14px 16px; margin-bottom: 10px; }
  .tabelle td { border: 0; padding: 4px 0; }
  .tabelle td:first-child { font-family: var(--display); font-size: 1.08rem; padding-bottom: 6px; }
  .tabelle td[data-label]:not(:first-child)::before { content: attr(data-label); display: block; font-size: .8125rem; color: var(--text-3); font-weight: 600; }
}
.ui-datei span { font-size: .8125rem; }
@media (max-width: 760px) { .schritt-knopf b { font-size: .8125rem; } }
@media (max-width: 480px) {
  .schritt-liste { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .schritt-liste .schritt-knopf { grid-column: span 2; padding: 11px 4px; }
  .schritt-liste > :nth-child(4) { grid-column: 2 / span 2; }
}
.preis-karte.dunkel { background: var(--petrol-tief); color: #eef1ff; }
.preis-karte.dunkel p { color: #c3c9ea; }

/* ================= Fassung 2: Kräftiges Blau + Wow (08.11.2026) ================= */

/* Knöpfe mit Tiefe */
.btn-primaer { background: var(--petrol); box-shadow: 0 1px 0 rgba(255,255,255,.25) inset, 0 8px 20px -8px rgba(43,75,255,.65); transition: background-color .2s, transform .2s, box-shadow .2s; }
.btn-primaer:hover { background: var(--petrol-hover); transform: translateY(-1px); box-shadow: 0 1px 0 rgba(255,255,255,.25) inset, 0 14px 28px -10px rgba(43,75,255,.75); }
.btn-dunkel:hover { transform: translateY(-1px); }

/* Fortschritt unter der Navigation */
.nav-innen { position: relative; }
.nav-fortschritt { position: absolute; left: 26px; right: 26px; bottom: -1px; height: 2px; border-radius: 2px; overflow: hidden; pointer-events: none; }
.nav-fortschritt i { display: block; height: 100%; width: 100%; background: var(--verlauf); transform-origin: 0 50%; transform: scaleX(var(--f, 0)); }

/* Hero: Farbband */
.hero { position: relative; overflow: clip; isolation: isolate; }
.hero-band { position: absolute; z-index: -1; top: 0; right: 0; width: 64%; height: 82%; clip-path: polygon(24% 0, 100% 0, 100% 70%, 0 100%); overflow: hidden; }
.hero-band::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 300%;
  background: linear-gradient(100deg, #2b4bff 0%, #7b5cff 18%, #3f7dff 34%, #2b4bff 50%, #7b5cff 68%, #3f7dff 84%, #2b4bff 100%); }
@media (prefers-reduced-motion: no-preference) { .hero-band::before { animation: band 40s linear infinite; } }
@keyframes band { to { transform: translateX(-50%); } }
.hero-foto { box-shadow: 0 30px 80px -24px rgba(10,16,51,.55); }
.hero-foto::after { background: linear-gradient(180deg, rgba(10,16,51,0) 40%, rgba(10,16,51,.55) 100%); }

/* Hero-Bühne kippt einmal in 3D herein */
@media (prefers-reduced-motion: no-preference) {
  .js .einflug-3d { opacity: 0; transform: perspective(1800px) rotateX(16deg) rotateY(-12deg) translateY(50px) scale(.95); transform-origin: 50% 100%; }
  .js .geladen .einflug-3d { animation: einflug3d 1.3s cubic-bezier(.16,1,.3,1) .1s forwards; }
}
@keyframes einflug3d { to { opacity: 1; transform: none; } }
.blase { z-index: 4; will-change: transform; }
.liste-karte { z-index: 5; will-change: transform; }
.hero-foto img { will-change: transform; }

/* Linien von den Wohnungen in die Liste */
.hero-linien { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 3; overflow: visible; pointer-events: none; }
.hero-linien path { fill: none; stroke: url(#lg); stroke-width: 2; stroke-linecap: round; stroke-dasharray: var(--l, 600); stroke-dashoffset: var(--l, 600); opacity: .95; filter: drop-shadow(0 0 4px rgba(10,16,51,.5)); }
.hero-linien.zeichnen path { stroke-dashoffset: 0; }
@media (prefers-reduced-motion: no-preference) { .hero-linien.zeichnen path { transition: stroke-dashoffset 1s cubic-bezier(.6,0,.2,1); } }
.hero-linien.zeichnen path:nth-of-type(2) { transition-delay: .25s; }
.hero-linien.zeichnen path:nth-of-type(3) { transition-delay: .5s; }
.zeile { transition: background-color .5s; }
.zeile.neu { background: var(--petrol-hell); }

/* Anbindung */
.marken li { transition: color .3s; }
.marken li:hover { color: var(--petrol); }

/* Überschriften Wort für Wort */
.wort { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .1em; margin-bottom: -.1em; }
.wort > span { display: inline-block; }
@media (prefers-reduced-motion: no-preference) {
  /* Weich aus der Unschärfe (Framer-Stil), insgesamt unter 0,4 s */
  .js .wortweise .wort { overflow: visible; }
  .js .wortweise .wort > span { transform: translateY(.35em); filter: blur(8px); opacity: 0; transition: transform .3s cubic-bezier(.16,1,.3,1), filter .3s ease-out, opacity .26s ease-out; transition-delay: calc(var(--w) * 10ms); }
  .js .wortweise.da .wort > span { transform: none; filter: none; opacity: 1; }
}

/* Bilder öffnen sich mit Maske */
@media (prefers-reduced-motion: no-preference) {
  .js .maske.zeigen { opacity: 1; transform: none; clip-path: inset(10% 8% 10% 8% round 26px); transition: clip-path 1.3s cubic-bezier(.16,1,.3,1); transition-delay: var(--d, 0s); }
  .js .maske.zeigen.da { clip-path: inset(0 0 0 0 round 26px); }
  .js .maske.zeigen img { transform: scale(1.18); transition: transform 1.6s cubic-bezier(.16,1,.3,1); }
  .js .maske.zeigen.da img { transform: scale(1.06); }
}

/* Produkt-Tafeln reagieren auf die Maus */
.tafel { transform: perspective(1200px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .5s cubic-bezier(.16,1,.3,1), clip-path 1.3s cubic-bezier(.16,1,.3,1); will-change: transform; }
.tafel::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0; transition: opacity .4s;
  background: radial-gradient(520px circle at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,.22), transparent 55%); }
.tafel:hover::after { opacity: 1; }
.tafel-text, .marke-schild, .tafel-ui { z-index: 2; }
.tafel::before { background: linear-gradient(180deg, rgba(10,16,51,0) 30%, rgba(10,16,51,.85) 100%); }
.tafel-ui { transition: transform .5s cubic-bezier(.16,1,.3,1); }
.tafel:hover .tafel-ui { transform: translateY(-6px) translateZ(30px); }
.stichworte li::before { background: var(--mint); }

/* Schritte-Bühne: gefüllte Markenleiste, Platzhalter tippen sich um */
.schritt-knopf[aria-selected="true"] .schritt-ico { background: var(--verlauf); }
.schritt-knopf .fortschritt::after { background: var(--verlauf); }
.buehne { background: linear-gradient(160deg, #eef1ff, #f4f6fb 40%, #f1edff); }
.platzhalter { transition: background-color .3s, color .3s; }
.platzhalter.tippt { background: #fff3d6; color: #6b4a00; }
@media (prefers-reduced-motion: no-preference) {
  .szene.aktiv .ui-raster > div, .szene.aktiv .ui-check li, .szene.aktiv .ui-dateien > div, .szene.aktiv .ui-hinweis, .szene.aktiv .ui-zeilen > div, .szene.aktiv .ui-entwurf, .szene.aktiv .ui-naechster { animation: auf .6s cubic-bezier(.16,1,.3,1) both; }
  .szene.aktiv .ui-raster > div:nth-child(2), .szene.aktiv .ui-check li:nth-child(2), .szene.aktiv .ui-dateien > div:nth-child(2) { animation-delay: .08s; }
  .szene.aktiv .ui-raster > div:nth-child(3), .szene.aktiv .ui-check li:nth-child(3) { animation-delay: .16s; }
  .szene.aktiv .ui-raster > div:nth-child(4), .szene.aktiv .ui-check li:nth-child(4) { animation-delay: .24s; }
  .szene.aktiv .ui-raster > div:nth-child(5) { animation-delay: .32s; }
  .szene.aktiv .ui-raster > div:nth-child(6) { animation-delay: .4s; }
  .szene.aktiv .ui-hinweis { animation-delay: .45s; }
  .szene.aktiv .ui-entwurf { animation-delay: .1s; }
  .szene.aktiv .ui-zeilen > div { animation-delay: 1.5s; }
}
@keyframes auf { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.knopf-ui.gesendet { background: var(--ok); border-color: var(--ok); }

/* Dunkle Bühnen mit Farblicht */
.dunkel { background:
  radial-gradient(900px 520px at 88% -10%, rgba(123,92,255,.42), transparent 62%),
  radial-gradient(800px 520px at -5% 105%, rgba(34,195,230,.22), transparent 60%),
  var(--petrol-tief); }
.dunkel h2, .dunkel h3 { color: #fff; }

/* Zeitleiste füllt sich beim Scrollen */
.zeitleiste::before { background: rgba(255,255,255,.12); }
.zeitleiste::after { content: ""; position: absolute; left: 7px; top: 10px; width: 2px; height: calc((100% - 20px) * var(--zl, 0)); background: linear-gradient(180deg, #8fe3f5, #7b5cff); border-radius: 2px; }
.zeitleiste li::before { border-color: rgba(255,255,255,.3); z-index: 1; }
@media (prefers-reduced-motion: no-preference) { .zeitleiste li::before { transition: background-color .4s, border-color .4s, box-shadow .4s, transform .4s; } }
.zeitleiste li.erreicht::before { border-color: var(--mint); background: var(--mint); box-shadow: 0 0 0 6px rgba(143,227,245,.16); transform: scale(1.05); }
.zeitleiste li.rot.erreicht::before { border-color: #ff6b70; background: #ff6b70; box-shadow: 0 0 0 6px rgba(255,107,112,.2); }
@media (prefers-reduced-motion: no-preference) { .zeitleiste li > div, .zeitleiste time { transition: opacity .4s; } }
.js .zeitleiste li:not(.erreicht) > div, .js .zeitleiste li:not(.erreicht) time { opacity: .8; }
.beleg strong { color: #fff; }

/* SMS fährt herein wie eine Push-Meldung */
@media (prefers-reduced-motion: no-preference) {
  .js .notfall-foto .notfall-karte { opacity: 0; transform: translateY(-30px) scale(.96); transition: opacity .6s, transform .8s cubic-bezier(.16,1,.3,1); transition-delay: .9s; }
  .js .notfall-foto.da .notfall-karte { opacity: 1; transform: none; }
}
.notfall-karte { top: 18px; bottom: auto; border-radius: 18px; }
.notfall-karte .sms { background: var(--notfall); }

/* Datenschutz: Mappe fächert auf, Symbole springen */
.getoent { background: linear-gradient(180deg, #eef1ff, #f4f2ff); }
.ds-ico { box-shadow: 0 6px 16px -8px rgba(43,75,255,.45); color: var(--petrol); }
@media (prefers-reduced-motion: no-preference) {
  .js .zeigen .ds-punkte li { opacity: 0; transform: translateY(14px); transition: opacity .6s, transform .7s cubic-bezier(.16,1,.3,1); }
  .js .zeigen.da .ds-punkte li { opacity: 1; transform: none; }
  .js .zeigen.da .ds-punkte li:nth-child(2) { transition-delay: .08s; } .js .zeigen.da .ds-punkte li:nth-child(3) { transition-delay: .16s; }
  .js .zeigen.da .ds-punkte li:nth-child(4) { transition-delay: .24s; } .js .zeigen.da .ds-punkte li:nth-child(5) { transition-delay: .32s; }
  .js .zeigen.da .ds-punkte li:nth-child(6) { transition-delay: .4s; }
  .js .mappe:not(.da) .blatt { --w: 0deg !important; }
  .js .mappe .blatt { transition: transform 1.1s cubic-bezier(.16,1,.3,1) .3s; }
}
.blatt .stempel { background: var(--verlauf); color: #fff; }

/* Einführung: Ablauf zeichnet sich */
.ablauf li { position: relative; }
.ablauf li::after { content: ""; position: absolute; left: 0; top: -1px; height: 2px; width: 100%; background: var(--verlauf); transform-origin: 0 50%; transform: scaleX(0); }
@media (prefers-reduced-motion: no-preference) { .ablauf li::after { transition: transform 1s cubic-bezier(.16,1,.3,1); } }
.zeigen.da .ablauf li::after { transform: scaleX(1); }
.zeigen.da .ablauf li:nth-child(2)::after { transition-delay: .15s; } .zeigen.da .ablauf li:nth-child(3)::after { transition-delay: .3s; } .zeigen.da .ablauf li:nth-child(4)::after { transition-delay: .45s; }
.preis-zeile strong { color: var(--petrol); }

/* Kontakt und Handlungs-Bänder: lebendiger Verlauf */
.petrol, .cta-band.petrol { position: relative; overflow: hidden; isolation: isolate; background: #2b4bff; }
.petrol::before { content: ""; position: absolute; z-index: -1; left: 50%; top: 50%; width: max(160%, 1400px); aspect-ratio: 1; translate: -50% -50%;
  background: radial-gradient(closest-side at 72% 28%, rgba(74,69,255,.85), transparent), linear-gradient(115deg, #1f3cf0 15%, #2b4bff 50%, #3047f7 85%); }
@media (prefers-reduced-motion: no-preference) { .petrol::before { animation: dreh 36s linear 1; } }
@keyframes dreh { to { transform: rotate(360deg); } }
.petrol .lead, .petrol p { color: #fff; }
.weiter-schritte li::before { background: #fff; color: var(--petrol); }
.formular { box-shadow: 0 40px 90px -30px rgba(10,16,51,.6); }

/* Fuß */
.fuss { background: var(--petrol-tiefer); }

/* Unterseiten: Farbband und Verlauf-Akzente */
.seiten-hero { position: relative; overflow: clip; isolation: isolate; }
.seiten-hero::before { content: ""; position: absolute; z-index: -1; right: -6%; top: -30%; width: 58%; height: 120%; background: var(--verlauf); opacity: .14; clip-path: polygon(30% 0, 100% 0, 100% 70%, 0 100%); }
.funktion .ico { background: var(--verlauf); color: #fff; box-shadow: 0 8px 18px -8px rgba(43,75,255,.6); }
.funktion { position: relative; overflow: hidden; }
.funktion::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--verlauf); transform: scaleX(0); transform-origin: 0 50%; transition: transform .5s cubic-bezier(.16,1,.3,1); }
.funktion:hover::before { transform: scaleX(1); }
.status-schild i { background: var(--ok); box-shadow: 0 0 0 4px rgba(39,107,67,.15); }
.app-karte { box-shadow: 0 40px 90px -30px rgba(20,30,90,.45); }
.preis-karte.dunkel { background: radial-gradient(700px 400px at 100% 0%, rgba(123,92,255,.45), transparent 60%), var(--petrol-tief); }
.preis-karte.dunkel .betrag { color: #fff; }
.marke-stufe.info { background: var(--petrol-hell); color: var(--petrol-hover); }

@media (max-width: 1020px) {
  .hero-band { width: 100%; height: 46%; top: auto; bottom: 0; clip-path: polygon(0 26%, 100% 0, 100% 100%, 0 100%); }
  .tafel { transform: none !important; }
}
@media (max-width: 760px) { .hero-band { height: 40%; } }
.js .tafel.maske.zeigen.da { transform: perspective(1200px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .5s cubic-bezier(.16,1,.3,1), clip-path 1.3s cubic-bezier(.16,1,.3,1); }
.knopf-ui { transition: transform .15s, background-color .3s, border-color .3s; }
.knopf-ui.gedrueckt { transform: scale(.93); }
@media (min-width: 1021px) { .hero-band { width: 54%; height: 84%; clip-path: polygon(30% 0, 100% 0, 100% 68%, 10% 100%); } }

/* Hero als Nachtblau-Bühne mit Farbband (statt weiß) */
.hero { margin: 10px 10px 0; border-radius: 32px; color: #fff;
  background: radial-gradient(900px 600px at 0% 0%, rgba(123,92,255,.5), transparent 60%), radial-gradient(700px 500px at 100% 100%, rgba(34,195,230,.25), transparent 60%), #0a1033;
  padding-bottom: 88px; }
.hero h1 { color: #fff; }
.hero .lead { color: #c9cff0; }
.hero .haken { color: #d5daf5; }
.hero .haken svg { color: var(--mint); }
.hero .btn-primaer { background: #fff; color: var(--tinte); box-shadow: 0 10px 30px -10px rgba(123,92,255,.9); }
.hero .btn-primaer:hover { background: #eef1ff; }
.hero .btn-rand { border-color: rgba(255,255,255,.35); color: #fff; }
.hero .btn-rand:hover { border-color: #fff; background: rgba(255,255,255,.06); }
.hero-band, .hero-band[class] { width: 100%; height: 100%; top: 0; right: 0; bottom: auto; clip-path: polygon(0 80%, 100% 22%, 100% 54%, 0 100%); opacity: .95; }
.hero-foto { box-shadow: 0 40px 90px -20px rgba(0,0,0,.6); }
.anbindung { padding-top: 56px; }
@media (max-width: 1020px) {
  .hero { padding-bottom: 72px; }
  .hero-band, .hero-band[class] { clip-path: polygon(0 62%, 100% 48%, 100% 72%, 0 86%); }
}
@media (max-width: 760px) {
  .hero { margin: 6px 6px 0; border-radius: 24px; }
  .liste-karte { bottom: -120px; }
  .hero-buehne { margin-bottom: 128px; }
}
.hero .blase, .hero .liste-karte { color: var(--tinte); }
@media (min-width: 1021px) { .hero-band, .hero-band[class] { clip-path: polygon(0 88%, 100% 40%, 100% 70%, 0 100%); } }

.beleg strong span { display: inline; font-size: inherit; color: inherit; max-width: none; line-height: inherit; }
@media (min-width: 1021px) { .hero-band, .hero-band[class] { clip-path: polygon(0 100%, 100% 36%, 100% 68%, 42% 100%); } }
.buehne-fuss .btn { white-space: nowrap; }
.buehne-fuss .mini { min-width: 0; }
@media (max-width: 760px) {
  .hero-buehne { aspect-ratio: 4 / 3.7; margin-bottom: 150px; }
  .blase { max-width: 205px; }
  .blase.b1 { left: 4%; top: 4%; }
  .blase.b2 { right: 4%; left: auto; top: 30%; }
  .blase.b3 { display: none; }
  .liste-karte { bottom: -140px; }
  .buehne-fuss .mini { font-size: .8125rem; }
}

/* Unterseiten: dieselbe Nachtblau-Bühne wie die Startseite */
.seiten-hero.buehne-dunkel { margin: 10px 10px 0; border-radius: 32px; color: #fff; padding-bottom: 80px;
  background: radial-gradient(900px 600px at 0% 0%, rgba(123,92,255,.5), transparent 60%), radial-gradient(700px 500px at 100% 100%, rgba(34,195,230,.22), transparent 60%), #0a1033; }
.seiten-hero.buehne-dunkel::before { right: 0; top: 0; width: 100%; height: 100%; opacity: 1; clip-path: polygon(0 100%, 100% 42%, 100% 70%, 44% 100%);
  background: linear-gradient(100deg, #2b4bff 0%, #7b5cff 45%, #3f7dff 100%); }
.buehne-dunkel h1 { color: #fff; }
.buehne-dunkel .lead { color: #c9cff0; }
.buehne-dunkel .pfad, .buehne-dunkel .pfad a { color: #aab3e0; }
.buehne-dunkel .pfad a:hover { color: #fff; }
.buehne-dunkel .status-schild { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.18); color: #fff; }
.buehne-dunkel .haken { color: #d5daf5; }
.buehne-dunkel .haken svg { color: var(--mint); }
.buehne-dunkel .btn-primaer { background: #fff; color: var(--tinte); box-shadow: 0 10px 30px -10px rgba(123,92,255,.9); }
.buehne-dunkel .btn-primaer:hover { background: #eef1ff; }
.buehne-dunkel .btn-rand { border-color: rgba(255,255,255,.35); color: #fff; }
.buehne-dunkel .btn-rand:hover { border-color: #fff; background: rgba(255,255,255,.06); }
.buehne-dunkel .app-karte, .buehne-dunkel .einf-foto figcaption { color: var(--tinte); }
.buehne-dunkel .app-karte, .buehne-dunkel .einf-foto { box-shadow: 0 40px 90px -20px rgba(0,0,0,.6); }
@media (max-width: 1020px) { .seiten-hero.buehne-dunkel::before { clip-path: polygon(0 70%, 100% 52%, 100% 74%, 0 90%); } }
@media (max-width: 760px) { .seiten-hero.buehne-dunkel { margin: 6px 6px 0; border-radius: 24px; padding-bottom: 56px; } }
.hero-foto img { object-position: 50% 35%; }
.hero-foto img { object-position: 50% 30%; }
.hero-foto::after { background: linear-gradient(180deg, rgba(10,16,51,0) 55%, rgba(10,16,51,.35) 100%); }
.hero-foto img { object-position: 50% 20%; }
@media (max-width: 760px) {
  .hero-buehne { aspect-ratio: 4 / 4.4; margin-bottom: 250px; }
  .liste-karte { bottom: -240px; }
  .blase.b2 { top: 34%; }
}
.knopf-ui.petrol { position: static; overflow: visible; isolation: auto; background: var(--petrol); }
.knopf-ui.petrol::before { content: none; }
@media (max-width: 380px) { .blase.b2 { top: 27%; max-width: 190px; } }
.schritte > *, .buehne, .fenster, .szene { min-width: 0; }
@media (max-width: 420px) {
  .buehne-fuss .mini { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .buehne-fuss { justify-content: flex-end; }
}

/* Logo-Leiste */
.anbindung-innen { gap: 48px; }
.anbindung p { max-width: 260px; }
.marken { flex-wrap: nowrap; gap: 20px 44px; }
.marken li { flex: none; }
.marken img { width: auto; max-width: none; filter: grayscale(1); opacity: .62; transition: filter .3s, opacity .3s; }
.marken li:hover img { filter: none; opacity: 1; }
.marken .marke-text { font-family: var(--text); font-weight: 600; font-size: 1.02rem; color: #6b7286; gap: 8px; }
.marken .marke-text svg { width: 22px; height: 22px; color: #6b7286; }
@media (hover: none) { .marken img { filter: none; opacity: 1; } }
@media (max-width: 1180px) { .marken { flex-wrap: wrap; justify-content: flex-start; gap: 22px 40px; } }
@media (max-width: 1020px) { .anbindung-innen { gap: 22px; } .anbindung p { max-width: none; } }
@media (max-width: 760px) {
  .marken { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 20px; align-items: center; }
  .marken img { max-width: 100%; height: auto !important; max-height: 26px; }
}
@media (max-width: 1180px) {
  .anbindung-innen { flex-direction: column; align-items: flex-start; gap: 20px; }
  .anbindung p { max-width: none; }
  .marken { width: 100%; flex-wrap: nowrap; justify-content: space-between; gap: 20px 32px; }
}
@media (max-width: 860px) { .marken { flex-wrap: wrap; justify-content: flex-start; } }
@media (max-width: 760px) {
  .marken { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 20px; }
  .marken .marke-text { order: 5; grid-column: 1 / -1; }
}
/* Logos immer in Farbe (Wunsch Jannik 08.11.2026) */
.marken img, .marken li:hover img { filter: none; opacity: 1; }
.marken li { transition: transform .3s cubic-bezier(.16,1,.3,1); }
.marken li:hover { transform: translateY(-2px); }

/* ===== Hero ohne Foto: nur die animierte Produkt-Szene (Wunsch Jannik 08.11.2026) ===== */
.hero-buehne { aspect-ratio: auto; min-height: 560px; }
.hero-buehne .blase { max-width: 300px; padding: 14px 16px; box-shadow: 0 18px 40px -16px rgba(0,0,0,.55); }
.hero-buehne .blase.b1 { left: 0; top: 2%; }
.hero-buehne .blase.b2 { left: 14%; right: auto; top: 31%; border-radius: 16px 16px 16px 4px; }
.hero-buehne .blase.b3 { left: 2%; top: 60%; }
.hero-buehne .liste-karte { right: 0; left: auto; bottom: auto; top: 50%; translate: 0 -50%; width: min(440px, 60%); box-shadow: 0 40px 90px -24px rgba(0,0,0,.65); }
@media (prefers-reduced-motion: no-preference) {
  .js .geladen .hero-buehne .blase { animation: einflug .7s cubic-bezier(.2,.8,.2,1) forwards, schweben 6s ease-in-out infinite alternate; animation-delay: var(--d, 0s), calc(var(--d, 0s) + .8s); }
  .hero-buehne .blase.b2 { --s: -7px; } .hero-buehne .blase.b3 { --s: 5px; }
}
@keyframes schweben { from { translate: 0 0; } to { translate: 0 var(--s, -6px); } }
.hero-linien path { stroke: rgba(143,227,245,.55); stroke-width: 1.6; filter: none; }
.hero-linien path.puls { stroke: #fff; stroke-width: 2.4; stroke-dasharray: 22 1200; stroke-dashoffset: 22; opacity: 0; filter: drop-shadow(0 0 6px rgba(143,227,245,.9)); }
@media (prefers-reduced-motion: no-preference) {
  .hero-linien.zeichnen path.puls { opacity: 1; animation: puls 3.2s cubic-bezier(.5,0,.5,1) infinite; animation-delay: 1.4s; transition: none; }
  .hero-linien.zeichnen path.puls:nth-of-type(5) { animation-delay: 2.4s; }
  .hero-linien.zeichnen path.puls:nth-of-type(6) { animation-delay: 3.4s; }
}
@keyframes puls { from { stroke-dashoffset: 22; } to { stroke-dashoffset: -1200; } }
/* Eingangs-Lämpchen an der Liste */
.liste-kopf b::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 4px rgba(34,197,94,.18); vertical-align: middle; }
@media (max-width: 1020px) {
  .hero-buehne { min-height: 0; aspect-ratio: auto; height: 560px; margin-bottom: 0; }
  .hero-buehne .liste-karte { top: auto; bottom: 0; translate: none; width: min(440px, 70%); }
}
@media (max-width: 760px) {
  .hero-buehne { height: auto; display: flex; flex-direction: column; gap: 12px; margin-bottom: 0; }
  .hero-buehne .blase { position: relative; left: auto !important; right: auto !important; top: auto !important; max-width: 82%; }
  .hero-buehne .blase.b1 { align-self: flex-start; }
  .hero-buehne .blase.b2 { align-self: flex-end; }
  .hero-buehne .blase.b3 { display: flex; align-self: flex-start; }
  .hero-buehne .liste-karte { position: relative; width: 100%; left: auto; right: auto; bottom: auto; top: auto; margin-top: 26px; }
  .hero-linien { display: none; }
}

/* Hero-Szene neu angeordnet: Nachrichten links, Liste rechts, Zeit-Karte unten */
@media (min-width: 1021px) {
  .hero-buehne { min-height: 600px; }
  .hero-buehne .blase { max-width: 232px; }
  .hero-buehne .blase b { font-size: .86rem; }
  .hero-buehne .blase.b1 { left: 0; top: 4%; }
  .hero-buehne .blase.b2 { left: 6%; top: 27%; }
  .hero-buehne .blase.b3 { left: 0; top: 50%; }
  .hero-buehne .liste-karte { width: 58%; top: 40%; }
}
.zeit-karte {
  position: absolute; z-index: 6; left: 4%; bottom: 2%; display: flex; align-items: center; gap: 14px;
  padding: 16px 20px 16px 16px; border-radius: 18px; background: #fff; color: var(--tinte);
  box-shadow: 0 30px 70px -20px rgba(0,0,0,.6); min-width: 290px;
}
.zeit-ico { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: var(--verlauf); color: #fff; flex: none; }
.zeit-ico svg { width: 24px; height: 24px; }
.zeit-label { display: block; font-size: .8125rem; color: var(--text-3); font-weight: 600; }
.zeit-wert { display: block; font-family: var(--display); font-weight: 600; font-size: 1.6rem; letter-spacing: -0.02em; line-height: 1.15;
  background: var(--verlauf); -webkit-background-clip: text; background-clip: text; color: transparent; }
.zeit-sub { display: block; font-size: .8125rem; color: var(--text-2); }
@media (max-width: 1020px) { .zeit-karte { left: 0; bottom: 0; } .hero-buehne .liste-karte { bottom: 110px; } }
@media (max-width: 760px) {
  .zeit-karte { position: relative; left: auto; bottom: auto; min-width: 0; align-self: stretch; margin-top: 6px; }
  .hero-buehne .liste-karte { bottom: auto; }
}

/* Zeitersparnis-Rechner */
.zeit-abschnitt { padding-top: 64px; }
.rechner { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 20px; align-items: stretch; }
.rechner-eingabe { background: #fff; border: 1px solid var(--linie); border-radius: 26px; padding: 34px; display: grid; gap: 26px; align-content: start; }
.regler label { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-weight: 600; margin-bottom: 12px; }
.regler label span { display: inline-flex; align-items: center; gap: 10px; }
.regler label svg { width: 20px; height: 20px; color: var(--petrol); }
.regler output { font-family: var(--display); font-weight: 600; font-size: 1.5rem; letter-spacing: -0.02em; color: var(--petrol); min-width: 64px; text-align: right; }
/* Regler: 44 px Tippfläche, die sichtbare Spur bleibt 8 px hoch */
.regler input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 44px; margin: 0; outline: none; cursor: pointer; border-radius: 0;
  background: linear-gradient(90deg, #2b4bff, #7b5cff) 0 50% / var(--p, 50%) 8px no-repeat, linear-gradient(var(--flaeche-2), var(--flaeche-2)) 0 50% / 100% 8px no-repeat; }
.regler input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 26px; height: 26px; border-radius: 50%; background: #fff; border: 2px solid var(--petrol); box-shadow: 0 4px 12px -2px rgba(43,75,255,.5); transition: transform .15s; }
.regler input[type=range]::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 2px solid var(--petrol); box-shadow: 0 4px 12px -2px rgba(43,75,255,.5); }
.regler input[type=range]:active::-webkit-slider-thumb { transform: scale(1.12); }
.regler input[type=range]:focus-visible { outline: 3px solid var(--petrol); outline-offset: 6px; }
.vergleich { display: grid; gap: 14px; padding-top: 22px; border-top: 1px solid var(--linie); }
.vergleich-zeile { display: grid; grid-template-columns: 56px 1fr; gap: 14px; align-items: center; }
.v-name { font-weight: 600; font-size: .95rem; }
.v-balken { display: grid; gap: 6px; }
.v-balken i { display: block; height: 26px; border-radius: 8px; width: var(--w); position: relative; font-style: normal; transform-origin: 0 50%; }
.v-balken i em { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); font-style: normal; font-size: .8125rem; font-weight: 600; white-space: nowrap; }
.v-balken .vorher { background: var(--flaeche-2); color: var(--text-2); }
.v-balken .nachher { background: var(--verlauf); color: #fff; }
.v-balken .nachher em { color: #fff; }
@media (prefers-reduced-motion: no-preference) {
  .js .rechner .v-balken i { transform: scaleX(0); transition: transform 1.1s cubic-bezier(.16,1,.3,1); }
  .js .rechner.da .v-balken i { transform: scaleX(1); }
  .js .rechner.da .v-balken .nachher { transition-delay: .35s; }
}
.rechner-ergebnis { border-radius: 26px; padding: 36px; color: #fff; display: flex; flex-direction: column; gap: 20px; position: relative; overflow: hidden; isolation: isolate;
  background: radial-gradient(600px 400px at 100% 0%, rgba(123,92,255,.55), transparent 60%), radial-gradient(500px 400px at 0% 100%, rgba(34,195,230,.22), transparent 60%), #0a1033; }
.erg-label { font-weight: 600; color: #c3c9ea; }
.erg-gross { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.erg-gross b { font-family: var(--display); font-weight: 600; font-size: clamp(4rem, 3rem + 4vw, 6.5rem); line-height: .9; letter-spacing: -0.05em;
  background: linear-gradient(100deg, #fff 20%, #8fe3f5); -webkit-background-clip: text; background-clip: text; color: transparent; font-variant-numeric: tabular-nums; }
.erg-gross span { font-family: var(--display); font-size: 1.6rem; font-weight: 600; }
.erg-raster { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.erg-raster div { padding: 14px 14px; border-radius: 16px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.1); }
.erg-raster b { display: block; font-family: var(--display); font-weight: 600; font-size: 1.35rem; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.erg-raster span { display: block; font-size: .8125rem; color: #aab3e0; }
.erg-preis { display: grid; gap: 2px; padding: 14px 16px; border-radius: 14px; background: rgba(143,227,245,.1); font-size: .95rem; }
.erg-preis span { color: #c3c9ea; }
.erg-preis b { color: #fff; }
.rechner-ergebnis .btn { margin-top: auto; align-self: flex-start; }
.annahmen { margin-top: 16px; font-size: 1rem; color: var(--text-3); }
.annahmen summary { cursor: pointer; font-weight: 600; color: var(--text-2); display: inline-block; padding: 6px 0; }
.annahmen ul { margin: 8px 0 0; padding-left: 18px; display: grid; gap: 6px; max-width: 860px; }
@media (max-width: 1020px) { .rechner { grid-template-columns: 1fr; } }
@media (max-width: 760px) {
  .rechner-eingabe, .rechner-ergebnis { padding: 24px 20px; border-radius: 22px; }
  .erg-raster { grid-template-columns: 1fr 1fr; }
  .erg-raster div:last-child { grid-column: 1 / -1; }
  .zeit-abschnitt { padding-top: 48px; }
}
.v-balken .nachher em { left: calc(100% + 10px); color: var(--petrol); }
@media (max-width: 760px) {
  .hero-buehne .zeit-karte { order: 5; }
  .rechner-ergebnis .btn { width: 100%; padding: 0 14px; font-size: .95rem; white-space: nowrap; }
  .vergleich-zeile { grid-template-columns: 44px 1fr; gap: 10px; }
}

/* Vertrauens-Symbole: kräftige Kacheln mit eigenen Zeichen */
.ds-punkte li { grid-template-columns: 54px 1fr; gap: 16px; }
.ds-punkte .ds-ico { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 16px; color: #fff;
  background: var(--verlauf); box-shadow: 0 1px 0 rgba(255,255,255,.35) inset, 0 12px 24px -10px rgba(43,75,255,.65); position: relative; }
.ds-punkte .ds-ico::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); }
.ds-punkte .ds-ico svg { width: 28px; height: 28px; display: block; }
.ds-punkte .ds-ico svg g { stroke-width: 1.9; }
.ds-punkte b { font-size: 1.05rem; padding-top: 2px; }
@media (prefers-reduced-motion: no-preference) {
  .js .zeigen.da .ds-punkte .ds-ico { animation: ico-pop .7s cubic-bezier(.34,1.56,.64,1) both; animation-delay: inherit; }
}
@keyframes ico-pop { from { transform: scale(.6) rotate(-8deg); opacity: 0; } to { transform: none; opacity: 1; } }
.funktion .ico svg { width: 26px; height: 26px; }
.ds-punkte li:nth-child(2) .ds-ico { animation-delay: .08s !important; } .ds-punkte li:nth-child(3) .ds-ico { animation-delay: .16s !important; }
.ds-punkte li:nth-child(4) .ds-ico { animation-delay: .24s !important; } .ds-punkte li:nth-child(5) .ds-ico { animation-delay: .32s !important; }
.ds-punkte li:nth-child(6) .ds-ico { animation-delay: .4s !important; }

/* ===== Icon-Stil A „Duotone hell“ (gewählt von Jannik 08.11.2026): blaues Phosphor-Duotone auf hellblauer Kachel ===== */
.ds-punkte .ds-ico, .funktion .ico, .zeit-ico, .blase .ico {
  background: #e7ebff; color: var(--petrol); box-shadow: none;
}
.getoent .ds-punkte .ds-ico { background: #fff; box-shadow: 0 1px 2px rgba(20,30,90,.06), 0 8px 18px -10px rgba(43,75,255,.35); }
.ds-punkte .ds-ico::after { box-shadow: inset 0 0 0 1px rgba(43,75,255,.08); }
.ds-punkte .ds-ico { width: 56px; height: 56px; border-radius: 18px; }
.ds-punkte li { grid-template-columns: 56px 1fr; }
.ds-punkte .ds-ico svg { width: 30px; height: 30px; }
.funktion .ico { width: 52px; height: 52px; border-radius: 16px; }
.funktion .ico svg { width: 28px; height: 28px; }
.zeit-ico { width: 50px; height: 50px; border-radius: 16px; }
.zeit-ico svg { width: 28px; height: 28px; }
.blase .ico svg { width: 18px; height: 18px; }
.schritt-ico { background: #e7ebff; color: var(--petrol); }
.schritt-knopf[aria-selected="true"] .schritt-ico { background: var(--petrol); color: #fff; }
.schritt-ico svg { width: 22px; height: 22px; }
.ui-hinweis svg { width: 22px; height: 22px; }
.haken svg, .liste-haken svg { stroke-width: 0; }

/* Ohne JavaScript: alle Schritte der Bühne untereinander lesbar, Knöpfe ohne Wirkung ausgeblendet */
html:not(.js) .szene { position: relative; grid-area: auto; opacity: 1; visibility: visible; transform: none; }
html:not(.js) .buehne-fuss { display: none; }
html:not(.js) .schritt-knopf { pointer-events: none; }

/* Fuß am Handy: weniger Leerraum davor */
@media (max-width: 760px) { .fuss { padding-top: 40px; } }

/* ===== 10-geruest.css ===== */
/* ===== Gerüst Fassung 3 (08.11.2026, nach der Analyse): Menü mit Produkt-Bereich, Fuß mit Pflichtlinks,
   gemeinsame Bausteine für alle Seiten, Lesbarkeit. Seiteneigene Regeln gehören in 20-…css bis 80-…css. ===== */

/* ---------- Text ab dem ersten Bild lesbar: Überschrift, Einleitung und Knöpfe nur leicht nachrücken, nie unsichtbar ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js .hero-text .einflug, .js .seiten-hero h1.einflug, .js .seiten-hero .lead.einflug, .js .seiten-hero .pfad,
  .js .seiten-hero .hero-knoepfe.einflug, .js .seiten-hero .haken.einflug, .js .seiten-hero .status-zeile { opacity: 1; }
  .js .hero-text .einflug, .js .seiten-hero .einflug:is(h1, .lead, .pfad, .hero-knoepfe, .haken) { transform: translateY(10px); }
  .js .geladen .hero-text .einflug, .js .geladen.seiten-hero .einflug:is(h1, .lead, .pfad, .hero-knoepfe, .haken) { animation: text-auf .6s cubic-bezier(.2,.8,.2,1) forwards; animation-delay: var(--d, 0s); }
}
@keyframes text-auf { from { transform: translateY(10px); } to { transform: none; } }

/* ---------- Navigation: Produkt-Bereich ---------- */
.haupt-nav { margin-inline: auto; }
.nav-links { align-items: center; }
.nav-links .hat-menue { position: relative; }
.nav-auf {
  display: inline-flex; align-items: center; gap: 6px; padding: 10px 14px; border: 0; border-radius: 999px; background: none; cursor: pointer;
  font-weight: 500; font-size: .96rem; color: var(--text-2); transition: background-color .2s, color .2s;
}
.nav-auf svg { width: 14px; height: 14px; transition: transform .25s; }
.nav-auf:hover, .nav-auf[aria-expanded="true"], .nav-auf.aktiv { color: var(--tinte); background: var(--flaeche-2); }
.nav-auf[aria-expanded="true"] svg { transform: rotate(180deg); }
.nav-panel {
  position: absolute; left: 50%; top: calc(100% + 14px); width: 640px; translate: -50% 0; z-index: 60;
  background: #fff; border: 1px solid var(--linie); border-radius: 24px; padding: 10px;
  box-shadow: 0 2px 6px rgba(10,16,51,.06), 0 30px 70px -20px rgba(10,16,51,.35);
}
.nav-panel::before { content: ""; position: absolute; left: 0; right: 0; top: -16px; height: 16px; }
.nav-panel[hidden] { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .nav-panel:not([hidden]) { animation: panel-auf .22s cubic-bezier(.2,.8,.2,1); }
}
@keyframes panel-auf { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.nm-liste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
.nm-liste a { display: grid; grid-template-columns: 42px 1fr; gap: 12px; align-items: start; padding: 12px; border-radius: 16px; text-decoration: none; color: var(--tinte); transition: background-color .2s; }
.nm-liste a:hover, .nm-liste a[aria-current="page"] { background: var(--grund); }
.nm-ico { width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; background: #e7ebff; color: var(--petrol); }
.nm-ico svg { width: 22px; height: 22px; }
.nm-text b { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: .98rem; line-height: 1.3; }
.nm-text small { display: block; margin-top: 2px; font-size: .875rem; line-height: 1.4; color: var(--text-3); text-wrap: balance; }
.nm-bald { font-style: normal; font-size: .75rem; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: #fff3d6; color: #6b4a00; }
.nm-fuss { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin: 6px 2px 0; padding: 14px 14px 8px; border-top: 1px solid var(--linie); font-size: .875rem; color: var(--text-3); }
.nav-links .nm-fuss .pfeil-link { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0; background: none; font-size: .92rem; white-space: nowrap; }
@media (max-width: 1180px) { .nav-links a, .nav-auf { padding: 10px 11px; } }

/* Handy-Menü mit Gruppen */
@media (max-width: 1020px) {
  .haupt-nav { display: none; }
  .nav-blatt { max-height: calc(100dvh - var(--nav-h) - 40px); overflow-y: auto; }
  .blatt-gruppe { margin: 4px 0; padding: 6px 0; border-block: 1px solid var(--linie); }
  .nav-blatt .blatt-titel { display: block; padding: 8px 16px 4px; font-size: .8125rem; font-weight: 600; color: var(--text-3); }
  .nav-blatt .blatt-gruppe a { display: flex; align-items: center; gap: 12px; padding: 11px 16px; font-size: 1rem; }
  .nav-blatt .blatt-gruppe a svg { width: 20px; height: 20px; color: var(--petrol); }
  .nav-blatt .blatt-gruppe em { font-style: normal; font-size: .8125rem; font-weight: 600; color: #6b4a00; background: #fff3d6; padding: 2px 8px; border-radius: 999px; margin-left: 6px; }
  .nav-blatt .blatt-mail { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 6px; font-size: .95rem; color: var(--text-2); }
  .nav-blatt .blatt-mail svg { width: 18px; height: 18px; color: var(--petrol); }
}

/* ---------- Fuß: Pflichtlinks immer sichtbar ---------- */
.fuss-unten { align-items: center; font-size: .875rem; }
.fuss-pflicht { display: flex; gap: 6px 22px; flex-wrap: wrap; }
.fuss-pflicht a { display: inline-flex; align-items: center; min-height: 44px; color: #c3c9ea; font-weight: 500; text-decoration: none; }
.fuss-pflicht a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 760px) {
  .fuss-unten { flex-direction: column; align-items: flex-start; gap: 4px; margin-top: 32px; }
}

/* ---------- Brotkrümel ---------- */
.pfad span[aria-current] { color: inherit; }
.buehne-dunkel .pfad span[aria-current] { color: #dfe3ff; }

/* ---------- Status als Zeile unter der Einleitung (statt Pille über der H1) ---------- */
.status-zeile { display: inline-flex; align-items: flex-start; gap: 10px; margin: 0 0 26px; font-size: 1rem; font-weight: 500; color: var(--text-2); }
.status-zeile i { width: 9px; height: 9px; margin-top: .5em; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 4px rgba(39,107,67,.16); flex: none; }
.status-zeile.bald i { background: var(--gold); box-shadow: 0 0 0 4px rgba(255,181,71,.2); }
.buehne-dunkel .status-zeile, .hero .status-zeile { color: #d5daf5; }
.buehne-dunkel .status-zeile i { background: #4ade80; box-shadow: 0 0 0 4px rgba(74,222,128,.18); }
.buehne-dunkel .status-zeile.bald i { background: var(--gold); box-shadow: 0 0 0 4px rgba(255,181,71,.2); }

/* ---------- „Das Wichtigste in Kürze“ ---------- */
.kurz-kasten { background: #fff; border: 1px solid var(--linie); border-radius: 24px; padding: 28px 32px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
.kurz-kasten > div:first-child { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 6px 20px; }
.kurz-kasten h2 { font-size: clamp(1.75rem, 1.3rem + 1.5vw, 2rem); }
.kurz-kasten .kk-stand { display: block; font-size: .875rem; color: var(--text-3); }
.kurz-kasten dl { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 28px; }
@media (min-width: 1100px) { .kurz-kasten dl { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.kk-mehr { display: none; }
@media (max-width: 560px) {
  .js .kurz-kasten:not(.offen) dl > div:nth-child(n+4) { display: none; }
  .kk-mehr { display: inline-flex; align-items: center; gap: 8px; justify-self: start; min-height: 44px; padding: 0 18px; border: 1px solid var(--linie); border-radius: 999px; background: #fff; font: inherit; font-weight: 600; color: var(--petrol); cursor: pointer; }
  .kk-mehr svg { width: 16px; height: 16px; transition: transform .2s; }
  .kurz-kasten.offen .kk-mehr svg, [data-handy-mehr].offen + .kk-mehr svg { transform: rotate(180deg); }
  .js [data-handy-mehr]:not(.offen) > li:nth-child(n+4) { display: none; }
  [data-handy-mehr] + .kk-mehr { margin: -2px 0 18px; }
}
.kurz-kasten dl div { padding-top: 14px; border-top: 1px solid var(--linie); }
.kurz-kasten dt { font-size: .875rem; font-weight: 600; color: var(--text-3); margin-bottom: 4px; }
.kurz-kasten dd { margin: 0; font-size: 1rem; line-height: 1.5; color: var(--tinte); }
.kurz-kasten dd b { font-weight: 600; }
@media (max-width: 900px) { .kurz-kasten { padding: 24px 22px; gap: 18px; } }
@media (max-width: 560px) { .kurz-kasten dl { grid-template-columns: 1fr; gap: 14px; } }

/* ---------- „Passend dazu“: eine Wegweiser-Leiste vor dem Handlungsaufruf ---------- */
.weiter-abschnitt { padding-block: 8px 0; }
.weiter-abschnitt + .abschnitt { padding-top: 40px; }
.weiter-leiste { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 24px; padding: 12px 12px 12px 28px; border-radius: 24px; background: #fff; border: 1px solid var(--linie); }
.weiter-titel { margin: 0; font-family: var(--display); font-weight: 600; font-size: 1.05rem; letter-spacing: -0.01em; color: var(--text-2); }
.weiter-leiste ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.weiter-leiste a { display: grid; grid-template-columns: 40px 1fr 18px; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 16px; text-decoration: none; color: var(--tinte); transition: background-color .2s; }
.weiter-leiste a:hover { background: var(--grund); }
.weiter-leiste a > svg { width: 18px; height: 18px; color: var(--petrol); transition: transform .2s; }
.weiter-leiste a:hover > svg { transform: translateX(3px); }
.wl-ico { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: #e7ebff; color: var(--petrol); }
.wl-ico svg { width: 21px; height: 21px; }
.wl-text b { display: block; font-weight: 600; font-size: .98rem; line-height: 1.3; }
.wl-text small { display: block; font-size: 1rem; color: var(--text-3); line-height: 1.35; margin-top: 2px; }
@media (max-width: 1020px) {
  .weiter-leiste { grid-template-columns: 1fr; padding: 18px 12px 10px; gap: 8px; }
  .weiter-titel { padding-left: 14px; }
  .weiter-leiste ul { grid-template-columns: 1fr; }
}

/* ---------- Quellen, zugeklappt und klein ---------- */
.quellen { margin-top: 18px; font-size: .875rem; color: var(--text-3); }
.quellen summary { cursor: pointer; font-weight: 600; color: var(--text-2); display: inline-flex; min-height: 44px; align-items: center; }
.quellen ul, .quellen ol { margin: 6px 0 0; padding-left: 18px; display: grid; gap: 6px; max-width: 860px; }
.dunkel .quellen, .dunkel .quellen summary { color: #aab3e0; }

/* ---------- Vergleichstabelle (Spalte des eigenen Produkts hervorgehoben) ---------- */
.vergleich-wrap { overflow-x: auto; border-radius: 24px; border: 1px solid var(--linie); background: #fff; }
.vergleich-tabelle { width: 100%; min-width: 860px; border-collapse: separate; border-spacing: 0; font-size: 1rem; }
.vergleich-tabelle th, .vergleich-tabelle td { padding: 16px 18px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--linie); line-height: 1.45; }
.vergleich-tabelle thead th { font-size: .875rem; font-weight: 600; color: var(--text-3); background: var(--grund); }
.vergleich-tabelle tbody th { font-weight: 600; width: 26%; }
.vergleich-tabelle tr:last-child > * { border-bottom: 0; }
.vergleich-tabelle .wir { background: #f2f4ff; }
.vergleich-tabelle thead .wir { background: var(--petrol); color: #fff; }
.vergleich-tabelle .ja, .vergleich-tabelle .nein, .vergleich-tabelle .teils { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; }
.vergleich-tabelle .ja svg { color: var(--ok); width: 20px; height: 20px; }
.vergleich-tabelle .nein { color: var(--text-3); font-weight: 500; }
.vergleich-tabelle .teils { color: var(--heute); font-weight: 500; }

/* ---------- Personen (Über uns, Kontakt) ---------- */
.person { display: grid; grid-template-columns: 96px 1fr; gap: 20px; align-items: center; }
.person-bild { width: 96px; height: 96px; border-radius: 28px; overflow: hidden; background: #e7ebff; display: grid; place-items: center; color: var(--petrol); font-family: var(--display); font-weight: 600; font-size: 1.6rem; }
.person-bild img { width: 100%; height: 100%; object-fit: cover; }
/* Foto: feiner Innenrand, damit ein heller Hintergrund nicht in die weiße Karte übergeht */
.person-bild.mit-foto { position: relative; }
.person-bild.mit-foto::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(10, 16, 51, .1); pointer-events: none; }
.person b { display: block; font-family: var(--display); font-weight: 600; font-size: 1.2rem; }
.person span { color: var(--text-2); }

/* ---------- Häufige Fragen: Gruppen ---------- */
.fragen-gruppe + .fragen-gruppe { margin-top: 48px; }
.fragen-gruppe h2 { font-size: clamp(1.3rem, 1.15rem + .5vw, 1.6rem); max-width: 860px; margin: 0 auto 8px; }
.fragen .antwort p { margin: 0 0 .7em; }
.fragen .antwort a { color: var(--petrol); font-weight: 600; }

/* ---------- Lesbarkeit: Fließtext in Karten und Listen mindestens 16 px ---------- */
.funktion p, .ablauf span, .zusatz span, .weiter-schritte span, .preis-zeile p, .anbindung p, .tabelle, .fragen .antwort,
.ds-punkte span, .liste-haken li, .zeitleiste span, .beleg span, .stichworte li { font-size: 1rem; }

/* ---------- Kontrast: helle Karten auf dunklem Grund behalten dunkle Schrift ---------- */
.dunkel .app-karte, .dunkel .app-karte p, .dunkel .app-karte .ui-titel, .dunkel .app-karte b { color: var(--tinte); }
.dunkel .app-karte .ui-raster span, .dunkel .app-karte .app-karte-kopf { color: var(--text-3); }
.dunkel .app-karte .ui-hinweis span { color: var(--text-2); }

/* ---------- Wort für Wort nur auf erzählenden Seiten ---------- */
[data-ruhig] .wortweise .wort > span { transform: none !important; filter: none !important; opacity: 1 !important; }

/* ---------- Abstände am Handy: höchstens etwa 100 px Leere zwischen Inhalt und nächstem Titel ---------- */
@media (max-width: 760px) {
  :root { --abschnitt: 52px; }
  .abschnitt + .abschnitt { padding-top: 44px; }
}
.nm-fuss .pfeil-link { white-space: nowrap; }
@media (max-width: 1020px) { .nav-blatt .btn { display: flex; justify-content: center; } }

/* ---------- Hero-Knöpfe am Handy auf allen Seiten gleich: volle Zeile ---------- */
@media (max-width: 560px) { .hero-knoepfe .btn { flex: 1 1 auto; justify-content: center; } }
/* Fußlinks überall mindestens 44 px hoch; am Desktop ohne zusätzliche Lücke, damit die Spalten gleich lang bleiben */
.fuss details a { display: inline-flex; min-height: 44px; min-width: 44px; align-items: center; }
@media (min-width: 761px) { .fuss ul { gap: 0; } .fuss details a { padding-block: 9px; } }

/* Abschnitt mit „Das Wichtigste in Kürze“: auf allen Seiten derselbe Abstand */
.kk-abschnitt { padding-block: 48px 64px; }
@media (max-width: 760px) { .kk-abschnitt { padding-block: 32px 44px; } }

/* Statuszeile mit Symbol statt Punkt (z. B. Stand der Preise) */
.status-zeile > svg { width: 20px; height: 20px; flex: none; margin-top: 2px; color: var(--petrol); }
.buehne-dunkel .status-zeile > svg { color: var(--mint); }

/* Getönter Abschnitt, danach grauer: kaum Farbunterschied, darum oben weniger Abstand */
.getoent + .abschnitt:not(.weiss, .dunkel, .petrol, .getoent) { padding-top: 40px; }

/* ===== 20-start.css ===== */
/* ===== Startseite (08.11.2026, Bauplan Analyse 10.3, Korrekturrunde): Wegweiser mit Hero-Szene, Anbindungen mit Teststand,
   Problem, zwei Assistenten, Schritte-Bühne, Vergleich, Notfall, Datenschutz, kompakter Rechner mit Preis, Fragen.
   Alles nur für [data-seite="start"]. Belege und Fließtext mindestens 16 px, Tippflächen mindestens 44 px. ===== */

/* ---------- Abstände: kompakt (Budget etwa 7,5 Bildschirme bei 1440 × 900, am Handy etwa 12) ---------- */
body[data-seite="start"] { --abschnitt: 56px; }
@media (max-width: 1020px) { body[data-seite="start"] { --abschnitt: 52px; } }
@media (max-width: 760px) { body[data-seite="start"] { --abschnitt: 32px; } }
@media (max-width: 760px) { [data-seite="start"] .abschnitt + .abschnitt { padding-top: 32px; } }
[data-seite="start"] .kopf { margin-bottom: 30px; }
[data-seite="start"] .kopf.mitte .lead { margin-inline: auto; max-width: 640px; }
[data-seite="start"] .vergleich-abschnitt .kopf.mitte { max-width: none; }
@media (max-width: 760px) {
  [data-seite="start"] .kopf { margin-bottom: 20px; }
  [data-seite="start"] .kopf h2 + p { margin-top: 10px; }
}


/* ---------- Hero ---------- */
[data-seite="start"] .hero-text .lead { margin-bottom: 18px; max-width: 540px; }
[data-seite="start"] .hero .status-zeile { margin: 0 0 22px; color: #d5daf5; align-items: flex-start; }
[data-seite="start"] .status-zeile a { display: inline-flex; align-items: center; min-height: 44px; padding-block: 9px; color: #fff; font-weight: 500;
  text-decoration: underline; text-decoration-color: rgba(255,255,255,.45); text-underline-offset: 5px; text-decoration-thickness: 1px; }
[data-seite="start"] .status-zeile a:hover { text-decoration-color: #fff; }
/* Der Link ist mindestens 44 px hoch (9 px Innenabstand): Der Punkt sitzt mittig zur ersten Zeile, auch wenn der Link umbricht */
[data-seite="start"] .hero .status-zeile i { margin-top: calc(9px + .8em - 4.5px); }
[data-seite="start"] .hero-knoepfe { margin-bottom: 26px; }
[data-seite="start"] .hero .haken, [data-seite="start"] .hero .status-zeile { font-size: 1rem; }
[data-seite="start"] .hero { padding-bottom: 52px; }

/* Farbband nur hinter der Produkt-Szene, nie hinter Text */
@media (min-width: 1021px) { [data-seite="start"] .hero-band[class] { clip-path: polygon(50% 100%, 100% 34%, 100% 66%, 78% 100%); } }
@media (max-width: 1020px) and (min-width: 761px) { [data-seite="start"] .hero-band[class] { clip-path: polygon(0 76%, 100% 60%, 100% 82%, 0 96%); } }
@media (max-width: 760px) { [data-seite="start"] .hero-band[class] { clip-path: polygon(0 90%, 100% 70%, 100% 86%, 0 100%); } }

/* Keine Endlos-Schleifen: Blasen schweben nicht, Lichtpuls und Farbband laufen einmal */
@media (prefers-reduced-motion: no-preference) {
  .js [data-seite="start"] .geladen .hero-buehne .blase { animation: einflug .7s cubic-bezier(.2,.8,.2,1) forwards; animation-delay: var(--d, 0s); }
  [data-seite="start"] .hero-linien.zeichnen path.puls { animation-iteration-count: 1; animation-fill-mode: forwards; }
  [data-seite="start"] .hero-band::before { animation-iteration-count: 1; }
}

/* Liste „Zu tun“ wie im Produkt: Knöpfe neutral, nur der Notfall rot */
[data-seite="start"] .liste-kopf b { font-size: 1.02rem; }
[data-seite="start"] .liste-fuss { padding: 10px 18px; background: var(--grund); font-size: .8125rem; color: var(--text-3); border-top: 1px solid var(--linie); }

/* Push-Mitteilung an die Bereitschaft: wie im Produkt nur Fallnummer und Anliegen, kein Objekt */
[data-seite="start"] .push-karte {
  position: absolute; z-index: 6; left: 2%; bottom: 3%; width: min(330px, 48%);
  display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 12px; align-items: start;
  padding: 14px 16px; border-radius: 20px; background: #fff; color: var(--tinte);
  box-shadow: 0 30px 70px -20px rgba(0,0,0,.6);
}
[data-seite="start"] .push-ico { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: var(--notfall); color: #fff; }
[data-seite="start"] .push-ico svg { width: 22px; height: 22px; }
[data-seite="start"] .push-kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
[data-seite="start"] .push-kopf b { font-weight: 600; font-size: .95rem; }
[data-seite="start"] .push-kopf span { font-size: .8125rem; color: var(--text-3); white-space: nowrap; }
[data-seite="start"] .push-text { display: block; font-weight: 600; font-size: .95rem; line-height: 1.35; margin-top: 1px; }
[data-seite="start"] .push-sub { display: block; font-size: .8125rem; line-height: 1.35; color: var(--text-3); margin-top: 3px; }

@media (min-width: 1021px) {
  [data-seite="start"] .hero-buehne { min-height: 560px; }
  [data-seite="start"] .hero-buehne .liste-karte { top: 38%; }
  [data-seite="start"] .hero-buehne .blase.b2 { left: 2%; }
  [data-seite="start"] .hero-buehne .blase { max-width: 226px; }
}
@media (min-width: 1021px) and (max-width: 1199px) {
  [data-seite="start"] .hero-buehne .blase { display: none !important; }
  [data-seite="start"] .hero-buehne .liste-karte { width: 100%; top: 0; translate: none; }
  [data-seite="start"] .push-karte { left: auto; right: 4%; bottom: 0; width: min(340px, 78%); }
}
@media (max-width: 1020px) and (min-width: 761px) {
  [data-seite="start"] .hero-buehne { height: 560px; }
  [data-seite="start"] .hero-buehne .blase { max-width: 260px; }
  [data-seite="start"] .hero-buehne .blase.b2 { left: 6%; top: 27%; }
  [data-seite="start"] .hero-buehne .blase.b3 { left: 0; top: 52%; }
  [data-seite="start"] .hero-buehne .liste-karte { top: 2%; bottom: auto; width: min(430px, 56%); }
  [data-seite="start"] .push-karte { left: auto; right: 0; bottom: 0; width: min(380px, 56%); }
}
@media (max-width: 760px) {
  [data-seite="start"] .hero-buehne .blase { display: none !important; }
  [data-seite="start"] .hero-buehne .liste-karte { margin-top: 0; }
  [data-seite="start"] .push-karte { display: none; }
  [data-seite="start"] .hero-text .lead { margin-bottom: 12px; }
  [data-seite="start"] .hero .status-zeile { margin-bottom: 10px; }
  [data-seite="start"] .hero-knoepfe { margin-bottom: 18px; gap: 8px; }
  [data-seite="start"] .hero .haken { display: grid; gap: 6px; }
  [data-seite="start"] .hero { padding-bottom: 36px; }
  [data-seite="start"] .hero-raster { gap: 28px; }
}
/* Unter 375 px (in em, damit es auch mit größerer Standardschrift greift): Knopf unter den Text wie auf der Mail-Seite.
   Sonst ist die Zeile „Zweiter Briefkastenschlüssel“ mit „Prüfen und senden“ breiter als der Bildschirm */
@media (max-width: 23.375em) {
  [data-seite="start"] .hero-buehne .zeile { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  [data-seite="start"] .hero-buehne .zeile .knopf-ui { justify-self: start; }
}

/* ---------- „Gebaut für Ihr Postfach“: Logos in Farbe (Wunsch Jannik), Stand der Tests sichtbar daneben ---------- */
/* Leiste sitzt bei 1440 × 900 vollständig im ersten Bildschirm, ohne Einblenden (Analyse 10.7) */
[data-seite="start"] .anbindung { padding-top: 24px; padding-bottom: 0; }
[data-seite="start"] .anbindung-innen { padding: 12px 0; gap: 40px; }
[data-seite="start"] .anbindung-text { flex: none; max-width: 240px; display: grid; gap: 0; }
[data-seite="start"] .anbindung-text p { max-width: none !important; }
[data-seite="start"] .test-link { display: inline-flex; align-items: center; min-height: 44px; font-size: 1rem; font-weight: 600; color: var(--petrol); text-decoration: none; }
[data-seite="start"] .test-link:hover { text-decoration: underline; text-underline-offset: 3px; }
[data-seite="start"] .anb-gruppen { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: flex-start; gap: 18px 44px; }
[data-seite="start"] .anb-gruppe { display: grid; gap: 10px; min-width: 0; }
[data-seite="start"] .anb-stand { display: inline-flex; align-items: center; gap: 8px; font-size: .875rem; font-weight: 600; color: var(--text-2); line-height: 1.3; }
[data-seite="start"] .anb-stand i { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--ok); }
[data-seite="start"] .anb-gruppe.folgt .anb-stand i { background: #e59a1c; }
[data-seite="start"] .anb-gruppe .marken { width: auto; flex: none; display: flex; flex-wrap: nowrap; justify-content: flex-start; align-items: center; gap: 14px 36px; min-height: 36px; }
[data-seite="start"] .marken .marke-text, [data-seite="start"] .marken .marke-text svg { color: var(--text-2); }
@media (max-width: 1180px) { [data-seite="start"] .anbindung-text { max-width: none; } [data-seite="start"] .anbindung-innen { gap: 14px; } }
@media (max-width: 860px) { [data-seite="start"] .anb-gruppe.folgt .marken { flex-wrap: wrap; } }
/* Stand-Zeile als Klammer über allen Logos der Gruppe: feine Linie in voller Gruppenbreite */
[data-seite="start"] .anb-stand { padding-bottom: 8px; border-bottom: 1px solid var(--linie); }
@media (min-width: 1181px) {
  [data-seite="start"] .anb-gruppe.folgt { flex: 1; }
  [data-seite="start"] .anb-gruppe.folgt .marken { justify-content: space-between; }
}
@media (max-width: 760px) {
  [data-seite="start"] .anbindung { padding-top: 28px; }
  [data-seite="start"] .anbindung-innen { gap: 12px; }
  [data-seite="start"] .anb-gruppen { display: grid; gap: 16px; width: 100%; }
  [data-seite="start"] .anb-gruppe.folgt .marken { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 20px; }
}

/* ---------- Ein Satz zum Problem mit belegter Zahl und Brücke zum Produkt ---------- */
[data-seite="start"] .problem { padding-top: 20px; }
[data-seite="start"] .problem-karte { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 36px; align-items: center; padding: 22px 30px; border-radius: 24px; background: #fff; border: 1px solid var(--linie); }
[data-seite="start"] .problem-satz { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 26px; align-items: center; margin: 0; font-size: 1.1rem; line-height: 1.5; color: var(--tinte); max-width: 900px; }
[data-seite="start"] .problem-satz strong { font-family: var(--display); font-weight: 600; font-size: clamp(2.4rem, 1.9rem + 1.6vw, 3.3rem); line-height: 1; letter-spacing: -0.035em; color: var(--petrol); white-space: nowrap; font-variant-numeric: tabular-nums; }
[data-seite="start"] .problem-satz span { text-wrap: pretty; }
[data-seite="start"] .problem-satz span b { font-weight: 600; color: var(--petrol-tief, var(--tinte)); }
[data-seite="start"] .quellen summary { min-height: 44px; }
[data-seite="start"] .problem .quellen { margin-top: 0; align-self: center; }
[data-seite="start"] .problem .quellen[open] { grid-column: 1 / -1; }
@media (max-width: 960px) { [data-seite="start"] .problem-karte { grid-template-columns: 1fr; padding: 20px 22px; } }
@media (max-width: 560px) {
  [data-seite="start"] .problem-satz { grid-template-columns: 1fr; gap: 6px; font-size: 1.02rem; }
  [data-seite="start"] .problem-satz strong { font-size: 2.3rem; }
  [data-seite="start"] .problem-karte { padding: 18px; gap: 4px; }
}

/* ---------- Zwei Assistenten: ganze Tafel klickbar über den Link in der Überschrift ---------- */
[data-seite="start"] .tafel-abschnitt { padding-top: 40px; }
[data-seite="start"] .tafel-abschnitt .kopf { max-width: 860px; margin-bottom: 26px; }
[data-seite="start"] .tafel { min-height: 384px; }
/* Abdunklung dort, wo Titel und Stichworte stehen (Kontrast gemessen, mindestens 4,5 : 1) */
/* Oben ganz klar, damit das Foto wirkt; dunkel erst dort, wo Titel und Stichworte stehen */
[data-seite="start"] .tafel::before { background: linear-gradient(180deg, rgba(10,16,51,0) 0%, rgba(10,16,51,0) 28%, rgba(10,16,51,.62) 50%, rgba(10,16,51,.9) 70%, rgba(10,16,51,.94) 100%); }
@media (max-width: 1020px) { [data-seite="start"] .tafel::before { background: linear-gradient(180deg, rgba(10,16,51,.08) 0%, rgba(10,16,51,.62) 42%, rgba(10,16,51,.92) 100%); } }
[data-seite="start"] .tafel .stichworte { color: #fff; font-size: 1rem; }
[data-seite="start"] .tafel-text { top: 0; right: 0; bottom: 0; left: 0; display: flex; flex-direction: column; justify-content: flex-end; padding: 0 30px 28px; }
[data-seite="start"] .tafel-text h3 { margin-bottom: 10px; font-size: clamp(1.4rem, 1.15rem + .6vw, 1.75rem); }
[data-seite="start"] .tafel-link { color: inherit; text-decoration: none; }
[data-seite="start"] .tafel-link::after { content: ""; position: absolute; inset: 0; border-radius: var(--r-bild); }
[data-seite="start"] .tafel-link:focus-visible { outline: none; }
[data-seite="start"] .tafel-link:focus-visible::after { outline: 3px solid #fff; outline-offset: -7px; box-shadow: inset 0 0 0 7px rgba(43,75,255,.9); }
[data-seite="start"] .unter-tafeln { margin-top: 24px; }
/* Bis 1060 px ist die Tafel zu schmal für Schild und Karte nebeneinander: die Karte weicht, das Schild bleibt lesbar */
@media (max-width: 1060px) { [data-seite="start"] .tafel-ui { display: none; } }
@media (max-width: 760px) {
  [data-seite="start"] .tafel-abschnitt { padding-top: 36px; }
  [data-seite="start"] .tafeln { gap: 14px; }
  [data-seite="start"] .tafel { min-height: 264px; }
  [data-seite="start"] .tafel-text { padding: 0 20px 20px; }
  [data-seite="start"] .tafel-text .stichworte { margin-bottom: 10px; gap: 4px 14px; }
  [data-seite="start"] .unter-tafeln { margin-top: 18px; gap: 12px; }
  [data-seite="start"] .unter-tafeln p { display: none; }
}

/* ---------- Schritte-Bühne: Mails aus dem Probelauf im Schritt „Einordnen“ ---------- */
[data-seite="start"] .ui-raster.vier { grid-template-columns: repeat(4, minmax(0, 1fr)); }
[data-seite="start"] .schritte-links { min-width: 0; }
[data-seite="start"] .schritte-links .kopf { margin-bottom: 24px; }
[data-seite="start"] .szene .ui-hinweis a { color: var(--petrol); font-weight: 600; text-underline-offset: 3px; }
@media (max-width: 1020px) { [data-seite="start"] .schritte-links .kopf { margin-bottom: 18px; } }
@media (max-width: 760px) {
  [data-seite="start"] .ui-raster.vier { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  [data-seite="start"] .nur-breit { display: none; }
}
@media (min-width: 1021px) {
  [data-seite="start"] .schritt-knopf { padding: 13px 16px; }
  [data-seite="start"] .schritt-liste { gap: 4px; }
  [data-seite="start"] .schritt-knopf .fortschritt { display: none; }
  [data-seite="start"] .schritt-knopf[aria-selected="true"] .fortschritt { display: block; }
}
@media (max-width: 760px) { [data-seite="start"] .probe { display: none; } }
[data-seite="start"] .probe { margin-top: 12px; padding: 12px 14px 14px; border-radius: 14px; border: 1px dashed var(--linie-stark); background: #fbfcff; }
[data-seite="start"] .probe-kopf { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 0 12px; margin: 0 0 8px; }
[data-seite="start"] .probe-kopf b { font-weight: 600; font-size: .95rem; }
[data-seite="start"] .probe-kopf span { font-size: .8125rem; color: var(--text-3); }
[data-seite="start"] .probe-wahl { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
[data-seite="start"] .probe-chip { min-height: 44px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--linie-stark); background: #fff; color: var(--text-2); font-size: .875rem; font-weight: 600; cursor: pointer; transition: background-color .2s, border-color .2s, color .2s; }
[data-seite="start"] .probe-chip:hover { border-color: var(--tinte); color: var(--tinte); }
[data-seite="start"] .probe-chip[aria-pressed="true"] { background: var(--petrol); border-color: var(--petrol); color: #fff; }
[data-seite="start"] .probe-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.js [data-seite="start"] .probe-liste { gap: 0; }
.js [data-seite="start"] .probe-liste > li { grid-area: 1 / 1; }
@media (prefers-reduced-motion: no-preference) { .js [data-seite="start"] .probe-liste > li { transition: opacity .3s; } }
.js [data-seite="start"] .probe-liste > li:not(.aktiv) { visibility: hidden; opacity: 0; }
[data-seite="start"] .probe-mail { margin: 0 0 6px; font-size: .9375rem; line-height: 1.45; color: var(--text-2); }
[data-seite="start"] .probe-erg { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 0; font-size: .9375rem; font-weight: 600; color: var(--tinte); line-height: 1.4; }
@media (max-width: 760px) {
  [data-seite="start"] .szene .ui-titel { font-size: 1.15rem; margin-bottom: 10px; }
  [data-seite="start"] .szene .ui-mail { padding: 14px; font-size: .9375rem; }
  [data-seite="start"] .szene .ui-hinweis { margin-top: 12px; padding: 12px; }
  [data-seite="start"] .szene .ui-raster { gap: 10px 12px; padding: 12px; }
  [data-seite="start"] .szene .ui-entwurf { padding: 14px; }
}

/* ---------- Vergleich ---------- */
[data-seite="start"] .vergleich-tabelle { font-size: 1rem; }
[data-seite="start"] .vergleich-tabelle tbody th { width: 30%; color: var(--tinte); }
[data-seite="start"] .vergleich-tabelle tbody td { color: var(--text-2); }
[data-seite="start"] .vergleich-tabelle thead th { font-size: 1rem; color: var(--text-2); }
[data-seite="start"] .vergleich-tabelle thead .wir { color: #fff; }
[data-seite="start"] .vergleich-tabelle .ja { color: var(--tinte); }
[data-seite="start"] .vergleich-tabelle th, [data-seite="start"] .vergleich-tabelle td { padding: 11px 16px; -webkit-hyphens: manual; hyphens: manual; }
@media (prefers-reduced-motion: no-preference) {
  .js [data-seite="start"] .vergleich-wrap.zeigen .wir .ja svg { transform: scale(0); transition: transform .5s cubic-bezier(.34,1.56,.64,1); }
  .js [data-seite="start"] .vergleich-wrap.zeigen.da .wir .ja svg { transform: none; }
  .js [data-seite="start"] .vergleich-wrap.da tbody tr:nth-child(1) .ja svg { transition-delay: .45s; }
  .js [data-seite="start"] .vergleich-wrap.da tbody tr:nth-child(2) .ja svg { transition-delay: .57s; }
  .js [data-seite="start"] .vergleich-wrap.da tbody tr:nth-child(3) .ja svg { transition-delay: .69s; }
  .js [data-seite="start"] .vergleich-wrap.da tbody tr:nth-child(4) .ja svg { transition-delay: .81s; }
  .js [data-seite="start"] .vergleich-wrap.da tbody tr:nth-child(5) .ja svg { transition-delay: .93s; }
  .js [data-seite="start"] .vergleich-wrap.da tbody tr:nth-child(6) .ja svg { transition-delay: 1.05s; }
}
[data-seite="start"] .vergleich-fuss { max-width: 900px; margin: 14px auto 0; text-align: center; }
[data-seite="start"] .vergleich-fuss > p { margin: 0; font-size: 1rem; line-height: 1.55; color: var(--text-2); }
[data-seite="start"] .vergleich-fuss a { color: var(--petrol); font-weight: 600; text-underline-offset: 3px; }
[data-seite="start"] .vergleich-fuss .quellen { margin-top: 6px; text-align: left; display: flex; flex-direction: column; align-items: center; }
[data-seite="start"] .vg-wahl { display: none; }
@media (max-width: 900px) {
  [data-seite="start"] .vg-wahl { display: flex; flex-wrap: nowrap; align-items: center; gap: 6px 12px; margin: 0 0 10px; }
  [data-seite="start"] .vg-wahl label { flex: none; font-weight: 600; font-size: 1rem; white-space: nowrap; }
  [data-seite="start"] .vg-wahl select {
    flex: 1 1 auto; min-width: 0; min-height: 46px; padding: 0 42px 0 14px; border-radius: 12px; border: 1px solid var(--linie-stark); background-color: #fff;
    font: inherit; font-size: 1rem; font-weight: 600; color: var(--tinte); appearance: none; -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232b4bff' stroke-width='2.2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 12px center; background-size: 18px;
  }
  [data-seite="start"] .vg-wahl select:focus-visible { outline: 3px solid var(--petrol); outline-offset: 2px; }
  [data-seite="start"] .vg-mobil .vergleich-tabelle { min-width: 0; table-layout: fixed; }
  [data-seite="start"] .vg-mobil .vergleich-tabelle .vg-aus { display: none; }
  [data-seite="start"] .vg-mobil .vergleich-tabelle .ja { flex-wrap: wrap; gap: 4px 6px; }
  [data-seite="start"] .vg-mobil .vergleich-tabelle th, [data-seite="start"] .vg-mobil .vergleich-tabelle td { overflow-wrap: break-word; }
  [data-seite="start"] .vg-mobil .vergleich-tabelle tbody th, [data-seite="start"] .vg-mobil .vergleich-tabelle thead th:first-child { width: 40%; }
  [data-seite="start"] .vg-mobil .vergleich-tabelle tbody th { line-height: 1.35; }
  [data-seite="start"] .vg-mobil .vergleich-tabelle th, [data-seite="start"] .vg-mobil .vergleich-tabelle td { padding: 11px 12px; }
  [data-seite="start"] .vergleich-fuss { text-align: left; }
  [data-seite="start"] .vergleich-fuss .quellen { align-items: flex-start; }
}
/* Unter 600 px: Merkmal als volle Zeile, darunter die zwei Werte nebeneinander (keine Silbentrennung) */
@media (max-width: 600px) {
  [data-seite="start"] .vg-mobil .vergleich-tabelle, [data-seite="start"] .vg-mobil .vergleich-tabelle thead, [data-seite="start"] .vg-mobil .vergleich-tabelle tbody { display: block; width: 100%; }
  [data-seite="start"] .vg-mobil .vergleich-tabelle tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  [data-seite="start"] .vg-mobil .vergleich-tabelle thead th:first-child { display: none; }
  [data-seite="start"] .vg-mobil .vergleich-tabelle thead th { width: auto; padding: 12px 14px; }
  [data-seite="start"] .vg-mobil .vergleich-tabelle tbody th { grid-column: 1 / -1; width: auto; border-bottom: 0; padding: 14px 14px 2px; font-size: 1rem; }
  [data-seite="start"] .vg-mobil .vergleich-tabelle tbody td { width: auto; padding: 4px 14px 14px; }
  [data-seite="start"] .vg-mobil .vergleich-tabelle tbody td.wir { background: transparent; }
  [data-seite="start"] .vg-mobil .vergleich-tabelle .ja { flex-wrap: nowrap; align-items: flex-start; }
  [data-seite="start"] .vg-mobil .vergleich-tabelle .ja svg { flex: none; margin-top: 2px; }
  [data-seite="start"] .vg-mobil .vergleich-tabelle tbody tr { border-bottom: 1px solid var(--linie); }
  [data-seite="start"] .vg-mobil .vergleich-tabelle tbody tr:last-child { border-bottom: 0; }
  [data-seite="start"] .vg-mobil .vergleich-tabelle tbody td { border-bottom: 0; }
  [data-seite="start"] .vg-mobil .vergleich-tabelle tbody th { padding: 14px 14px 2px; }
  [data-seite="start"] .vg-mobil .vergleich-tabelle tbody td { padding: 4px 14px 14px; }
  [data-seite="start"] .vg-mobil .vergleich-tabelle thead th { padding: 12px 14px; }
}

/* ---------- Notfälle: links Ablauf, rechts Foto mit Messwerten ---------- */
[data-seite="start"] .notfall-raster { align-items: start; gap: 56px; }
[data-seite="start"] .notfall-raster .lead { margin: 0; }
[data-seite="start"] .zeitleiste { margin-top: 26px; }
[data-seite="start"] .zeitleiste li { grid-template-columns: 78px minmax(0, 1fr); padding-bottom: 14px; }
[data-seite="start"] .zeitleiste time { font-family: var(--text); font-variant-numeric: tabular-nums; font-size: .95rem; font-weight: 600; padding-top: 1px; }
[data-seite="start"] .notfall-links { display: flex; flex-wrap: wrap; gap: 0 26px; margin: 10px 0 0; }
[data-seite="start"] .notfall-links a, [data-seite="start"] .ds-links a { min-height: 44px; }
[data-seite="start"] .notfall-foto { aspect-ratio: 2 / 1; }
/* Meldung unten, damit Kopf und Hände des Installateurs frei bleiben */
[data-seite="start"] .notfall-karte { top: auto; bottom: 18px; }
[data-seite="start"] .notfall-foto img { object-position: 45% 25%; }
@media (prefers-reduced-motion: no-preference) { .js [data-seite="start"] .notfall-foto:not(.da) .notfall-karte { transform: translateY(30px) scale(.96); } }
[data-seite="start"] .notfall-karte .sms { background: var(--ok); }
[data-seite="start"] .notfall-rechts .belege { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 28px; margin-top: 24px; padding-top: 0; border-top: 0; }
[data-seite="start"] .beleg strong { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: #fff; font-size: clamp(1.8rem, 1.4rem + 1vw, 2.3rem); margin-bottom: 4px; }
[data-seite="start"] .beleg span { max-width: 260px; color: #c3c9ea; font-size: 1rem; }
[data-seite="start"] .fussnote { margin: 18px 0 0 !important; font-size: 1rem; color: #b4bce6 !important; line-height: 1.55; }
[data-seite="start"] .fussnote a { color: var(--mint); font-weight: 600; text-underline-offset: 3px; white-space: nowrap; }
@media (max-width: 1020px) { [data-seite="start"] .notfall-raster { gap: 32px; } }
@media (max-width: 760px) {
  [data-seite="start"] .notfall-foto { aspect-ratio: auto; overflow: visible; border-radius: 0; }
  [data-seite="start"] .notfall-foto img { display: none; }
  .js [data-seite="start"] .notfall-foto.maske.zeigen { clip-path: none; }
  [data-seite="start"] .notfall-foto .notfall-karte { position: relative; inset: auto; box-shadow: none; }
  [data-seite="start"] .notfall-rechts .belege { gap: 14px 16px; margin-top: 18px; }
  [data-seite="start"] .beleg { display: block; }
  [data-seite="start"] .beleg strong { font-size: 1.65rem; }
  [data-seite="start"] .zeitleiste { margin-top: 18px; }
  [data-seite="start"] .zeitleiste li { grid-template-columns: 58px minmax(0, 1fr); gap: 8px; padding-bottom: 10px; }
  [data-seite="start"] .zeitleiste time { font-size: .875rem; }
}

/* ---------- Datenschutz: Blätter gerade, Tiefe nur über Versatz und Schatten ---------- */
[data-seite="start"] .ds-raster { align-items: start; gap: 48px; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); }
[data-seite="start"] .ds-punkte { margin: 28px 0 22px; gap: 20px 30px; }
[data-seite="start"] .blatt { --w: 0deg !important; }
@media (min-width: 761px) { [data-seite="start"] .mappe { height: 450px; margin-top: 4px; } }
/* Einspaltig (761–1020 px) steht die Mappe unter dem Text: dann so hoch, dass das vordere Blatt samt Schatten im Abschnitt bleibt */
@media (min-width: 761px) and (max-width: 1020px) { [data-seite="start"] .mappe { height: 540px; } }
[data-seite="start"] .blatt:nth-child(1) { top: 0; margin-left: -70px; width: min(250px, calc(100% - 140px)); }
[data-seite="start"] .blatt:nth-child(2) { top: 0; margin-left: 70px; width: min(250px, calc(100% - 140px)); }
[data-seite="start"] .blatt-haupt { top: 46px; width: min(390px, 100%); }
[data-seite="start"] .mappe:hover .blatt:nth-child(1), [data-seite="start"] .mappe:hover .blatt:nth-child(2) { transform: translateX(-50%) translateY(-6px); }
[data-seite="start"] .mappe .blatt-titel { display: block; padding: 0; color: var(--tinte); font-size: 1.05rem; }
[data-seite="start"] .blatt-haupt .blatt-titel { font-size: 1.15rem; }
[data-seite="start"] .blatt-haupt .mini { font-size: .875rem; }
[data-seite="start"] .blatt-haupt ol { font-size: 1rem; margin-top: 10px; }
[data-seite="start"] .blatt .stempel { background: var(--petrol-hell); color: var(--petrol-tief); margin-top: 12px; }
[data-seite="start"] .mappe-link { display: flex !important; align-items: center; min-height: 44px; margin-top: 12px; font-size: 1rem; line-height: 1.35; }
[data-seite="start"] .mappe-link svg { flex: none; }
@media (prefers-reduced-motion: no-preference) {
  .js [data-seite="start"] .mappe .blatt:not(.blatt-haupt) { transition: transform .5s cubic-bezier(.2,.8,.2,1), translate 1s cubic-bezier(.16,1,.3,1) .25s, opacity .6s .25s; }
  .js [data-seite="start"] .mappe:not(.da) .blatt:not(.blatt-haupt) { translate: 0 40px; opacity: 0; }
}
[data-seite="start"] .ds-links { display: flex; flex-wrap: wrap; align-items: center; gap: 0 24px; margin: 0; }
[data-seite="start"] .ds-links a:not(.pfeil-link) { display: inline-flex; align-items: center; color: var(--text-2); font-weight: 600; text-underline-offset: 3px; }
@media (max-width: 1020px) { [data-seite="start"] .ds-raster { gap: 28px; grid-template-columns: 1fr; } [data-seite="start"] .mappe { max-width: 520px; } }
@media (max-width: 760px) {
  [data-seite="start"] .blatt-haupt { top: auto; width: 100%; transform: none; }
  [data-seite="start"] .blatt-haupt ol { display: none; }
  [data-seite="start"] .ds-punkte { margin: 20px 0 14px; gap: 14px; }
  [data-seite="start"] .ds-punkte li { grid-template-columns: 44px minmax(0, 1fr); gap: 14px; }
  [data-seite="start"] .ds-punkte .ds-ico { width: 44px; height: 44px; border-radius: 14px; }
  [data-seite="start"] .ds-punkte .ds-ico svg { width: 24px; height: 24px; }
}

/* ---------- Zeitersparnis-Rechner: links Frage und Eingaben, rechts Ergebnis mit Preis ---------- */
[data-seite="start"] .rechner { grid-template-columns: minmax(0, 13fr) minmax(0, 10fr); gap: 20px 28px; align-items: stretch; }
[data-seite="start"] .rechner-links { min-width: 0; display: grid; align-content: start; }
[data-seite="start"] .rechner-links .kopf { max-width: 620px; margin-bottom: 22px; }
[data-seite="start"] .rechner-links .kopf .lead { margin: 12px 0 0; }
[data-seite="start"] .rechner-eingabe { padding: 24px 28px; gap: 16px; }
/* Annahmen: am Desktop offen ohne Kopfzeile, am Handy zugeklappt mit den aktuellen Werten in der Kopfzeile */
[data-seite="start"] .r-mehr-kopf { display: none; }
[data-seite="start"] .r-mehr-inhalt { display: grid; gap: 16px; }
[data-seite="start"] .r-felder { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; align-items: end; }
[data-seite="start"] .rechner .regler label { margin-bottom: 4px; }
[data-seite="start"] .r-feld { display: grid; gap: 6px; align-content: end; }
[data-seite="start"] .r-feld label { font-weight: 600; font-size: 1rem; line-height: 1.3; }
[data-seite="start"] .r-feld input {
  width: 100%; min-height: 48px; padding: 10px 14px; border-radius: 12px; border: 1px solid var(--linie-stark); background: #fff;
  font: inherit; font-size: 1.1rem; font-weight: 600; color: var(--tinte); font-variant-numeric: tabular-nums;
}
[data-seite="start"] .r-feld input:focus { outline: none; border-color: var(--petrol); box-shadow: 0 0 0 3px rgba(43,75,255,.2); }
[data-seite="start"] .r-vorgaben { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: -4px; }
[data-seite="start"] .r-vorgaben-label { font-size: 1rem; font-weight: 600; color: var(--text-3); margin-right: 2px; }
[data-seite="start"] .r-vorgabe { min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--linie-stark); background: #fff; color: var(--text-2); font-size: 1rem; font-weight: 600; line-height: 1.25; cursor: pointer; transition: background-color .2s, border-color .2s, color .2s; }
[data-seite="start"] .r-vorgabe:hover { border-color: var(--tinte); color: var(--tinte); }
[data-seite="start"] .r-vorgabe[aria-pressed="true"] { border-color: var(--petrol); background: var(--petrol-hell); color: var(--petrol-hover); }
[data-seite="start"] .r-annahme { margin: -2px 0 0; font-size: 1rem; line-height: 1.5; color: var(--text-2); }
[data-seite="start"] .r-telefon { display: grid; gap: 12px; padding-top: 14px; border-top: 1px solid var(--linie); }
[data-seite="start"] .r-telefon [hidden] { display: none; }
[data-seite="start"] .r-anrufe small { display: block; margin-top: 10px; font-size: 1rem; line-height: 1.5; color: var(--text-2); }
[data-seite="start"] .r-schalter { position: relative; display: flex; align-items: center; gap: 12px; min-height: 44px; cursor: pointer; font-weight: 600; font-size: 1rem; line-height: 1.35; }
[data-seite="start"] .r-schalter input { position: absolute; left: 0; top: 50%; width: 46px; height: 28px; margin: -14px 0 0; opacity: 0; cursor: pointer; }
[data-seite="start"] .r-schiene { position: relative; flex: none; width: 46px; height: 28px; border-radius: 999px; background: #8b93ab; transition: background-color .2s; }
[data-seite="start"] .r-schiene::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(10,16,51,.3); transition: transform .2s cubic-bezier(.2,.8,.2,1); }
[data-seite="start"] .r-schalter input:checked + .r-schiene { background: var(--petrol); }
[data-seite="start"] .r-schalter input:checked + .r-schiene::after { transform: translateX(18px); }
[data-seite="start"] .r-schalter input:focus-visible + .r-schiene { outline: 3px solid var(--petrol); outline-offset: 3px; }

[data-seite="start"] .rechner-ergebnis { padding: 28px 30px; gap: 14px; }
[data-seite="start"] .rechner-ergebnis .erg-label { color: #c3c9ea; }
[data-seite="start"] .erg-gross b { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: #fff; font-size: clamp(3rem, 2.4rem + 1.8vw, 4rem); line-height: .95; letter-spacing: -0.04em; }
[data-seite="start"] .erg-tage { margin: -6px 0 0 !important; font-size: 1rem; color: #c3c9ea !important; }
[data-seite="start"] .erg-tage b { color: #fff; font-weight: 600; font-variant-numeric: tabular-nums; }
[data-seite="start"] .erg-balken { display: grid; gap: 10px; padding: 14px 16px; border-radius: 16px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); }
[data-seite="start"] .eb-zeile { display: grid; grid-template-columns: 150px minmax(0, 1fr) auto; grid-template-areas: "name balken wert"; gap: 12px; align-items: center; font-size: 1rem; color: #c3c9ea; }
[data-seite="start"] .eb-zeile > span { grid-area: name; }
[data-seite="start"] .eb-zeile > i { grid-area: balken; display: block; height: 12px; border-radius: 6px; transform-origin: 0 50%; transform: scaleX(var(--s, 1)); }
[data-seite="start"] .eb-zeile > b { grid-area: wert; min-width: 70px; text-align: right; color: #fff; font-weight: 600; font-size: 1rem; font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: no-preference) { [data-seite="start"] .eb-zeile > i { transition: transform .8s cubic-bezier(.16,1,.3,1); } }
[data-seite="start"] .eb-wert { background: #8fe3f5; }
[data-seite="start"] .eb-preis { background: rgba(255,255,255,.55); }
@media (prefers-reduced-motion: no-preference) { .js [data-seite="start"] .rechner-ergebnis:not(.da) .eb-zeile > i { transform: scaleX(0); } }
[data-seite="start"] .erg-tel-hinweis, [data-seite="start"] .erg-hinweis { margin: 0 !important; font-size: 1rem; line-height: 1.5; color: #c3c9ea !important; }
[data-seite="start"] .erg-tel-hinweis[hidden] { display: none; }
[data-seite="start"] .erg-tel-hinweis { color: #fff !important; }
/* „So rechnen wir“ als sichtbarer Knopf, aufgeklappt Formel und Annahmen; Preis darunter, beides am unteren Rand */
[data-seite="start"] .so-rechnen { margin-top: auto; border-top: 1px solid rgba(255,255,255,.12); }
[data-seite="start"] .so-rechnen summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; font-weight: 600; color: #fff; }
[data-seite="start"] .so-rechnen summary::-webkit-details-marker { display: none; }
[data-seite="start"] .so-rechnen summary svg { width: 20px; height: 20px; flex: none; color: #8fe3f5; transition: transform .25s; }
[data-seite="start"] .so-rechnen[open] summary svg { transform: rotate(45deg); }
[data-seite="start"] .so-rechnen summary:focus-visible { outline: 3px solid #8fe3f5; outline-offset: 2px; border-radius: 6px; }
[data-seite="start"] .so-rechnen-text { padding: 2px 0 6px; font-size: 1rem; line-height: 1.55; color: #c3c9ea; }
[data-seite="start"] .so-rechnen-text p { margin: 0 0 8px !important; color: #fff !important; }
[data-seite="start"] .so-rechnen-text ul { margin: 0; padding-left: 18px; display: grid; gap: 6px; }
[data-seite="start"] .erg-kosten { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 2px 16px; margin: 0 !important; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.12); font-size: 1rem; line-height: 1.5; color: #c3c9ea !important; }
[data-seite="start"] .erg-kosten span { flex: 1 1 250px; }
[data-seite="start"] .erg-kosten b { color: #fff; font-weight: 600; }
[data-seite="start"] .erg-kosten .pfeil-link { color: #8fe3f5; min-height: 44px; }
@media (max-width: 1020px) {
  [data-seite="start"] .rechner { grid-template-columns: 1fr; }
  [data-seite="start"] .rechner-links .kopf { margin-bottom: 18px; }
}
@media (max-width: 760px) {
  [data-seite="start"] .rechner-eingabe, [data-seite="start"] .rechner-ergebnis { padding: 20px 18px; }
  [data-seite="start"] .rechner-eingabe { gap: 14px; }
  [data-seite="start"] .rechner { gap: 12px; }
  [data-seite="start"] .r-mehr-kopf { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; padding: 8px 14px; border-radius: 14px; background: var(--grund); border: 1px solid var(--linie); font-size: 1rem; line-height: 1.35; color: var(--text-2); }
  [data-seite="start"] .r-mehr-kopf::-webkit-details-marker { display: none; }
  [data-seite="start"] .r-mehr-kopf b { color: var(--tinte); font-weight: 600; }
  [data-seite="start"] .r-mehr-tun { flex: none; display: inline-flex; align-items: center; gap: 4px; font-weight: 600; color: var(--petrol); }
  [data-seite="start"] .r-mehr-tun svg { width: 18px; height: 18px; transition: transform .25s; }
  [data-seite="start"] .r-mehr[open] .r-mehr-tun svg { transform: rotate(180deg); }
  [data-seite="start"] .r-mehr-kopf:focus-visible { outline: 3px solid var(--petrol); outline-offset: 2px; }
  [data-seite="start"] .r-mehr-inhalt { gap: 14px; padding-top: 14px; }
  [data-seite="start"] .r-felder { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  [data-seite="start"] .r-felder .r-feld:last-child { grid-column: 1 / -1; }
  [data-seite="start"] .r-vorgaben { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  [data-seite="start"] .r-vorgaben-label { display: none; }
  [data-seite="start"] .r-vorgabe { min-height: 52px; padding: 6px 10px; border-radius: 14px; }
  [data-seite="start"] .eb-zeile { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name wert" "balken balken"; gap: 6px 10px; }
  [data-seite="start"] .erg-gross b { font-size: 3rem; }
  [data-seite="start"] .rechner-ergebnis { gap: 12px; }
}

/* ---------- Häufige Fragen (wer dahinter steht, zeigt der Kontaktblock mit Person und Link) ---------- */
[data-seite="start"] .fragen-raster { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 0 56px; align-items: start; }
[data-seite="start"] .fragen-kopf .lead { margin: 14px 0 0; }
[data-seite="start"] .fragen-raster .fragen { max-width: none; margin: 0; }
[data-seite="start"] .fragen-alle { margin-top: 14px; min-height: 44px; }
@media (max-width: 1020px) { [data-seite="start"] .fragen-raster { grid-template-columns: 1fr; gap: 18px; } }
@media (max-width: 760px) { [data-seite="start"] .fragen summary { padding: 16px 2px; font-size: 1.05rem; } }
/* Kontaktblock am Handy: die Mailadresse steht schon unter dem Formular */
@media (max-width: 760px) { [data-seite="start"] .kontakt-block p.kb-direkt { display: none; } }

/* ---------- Framer-Anleihen (09.11.2026) ---------- */
/* Zahlenband: zwei große Kennzahlen auf Ultramarin statt weißem Kasten (kompakt: Zahl neben Text) */
[data-seite="start"] .problem-karte { display: block; padding: 14px; border: 0; background: var(--petrol); color: #fff; }
[data-seite="start"] .problem-zahlen { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) minmax(0, .95fr); gap: 12px; align-items: stretch; }
[data-seite="start"] .pz { margin: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 16px; padding: 16px 20px; border-radius: 16px; background: rgba(10, 16, 51, .2); }
[data-seite="start"] .pz strong { font-family: var(--display); font-weight: 600; font-size: clamp(2.2rem, 1.8rem + 1.3vw, 3rem); line-height: 1; letter-spacing: -0.035em; font-variant-numeric: tabular-nums; white-space: nowrap; }
[data-seite="start"] .pz > span { font-size: 1rem; line-height: 1.4; color: #fff; text-wrap: pretty; }
[data-seite="start"] .problem-rechts { display: grid; align-content: center; gap: 0; padding: 4px 8px 0 10px; }
[data-seite="start"] .problem-fazit { margin: 0; font-family: var(--display); font-size: clamp(1.1rem, 1rem + .4vw, 1.3rem); line-height: 1.3; letter-spacing: -0.01em; text-wrap: balance; }
[data-seite="start"] .problem-fazit b { font-weight: 600; }
[data-seite="start"] .problem .quellen { margin: 0; color: #fff; }
[data-seite="start"] .problem .quellen summary { color: #fff; }
[data-seite="start"] .problem .quellen[open] { grid-column: auto; }
[data-seite="start"] .problem .quellen :focus-visible { outline-color: #fff; }
@media (max-width: 1180px) { [data-seite="start"] .problem-zahlen { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } [data-seite="start"] .problem-rechts { grid-column: 1 / -1; padding: 4px 8px 0; } }
@media (max-width: 760px) {
  [data-seite="start"] .problem-zahlen { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  [data-seite="start"] .pz { grid-template-columns: minmax(0, 1fr); gap: 6px; padding: 16px 18px; }
  [data-seite="start"] .pz strong { font-size: 2.3rem; }
}
/* Logo-Leiste: jedes Logo in einer weißen Kachel */
[data-seite="start"] .anb-gruppe .marken { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; width: 100%; }
[data-seite="start"] .anb-gruppe .marken li { display: flex; align-items: center; justify-content: center; min-height: 64px; padding: 10px 18px; border-radius: 16px; background: #fff; border: 1px solid var(--linie); }
[data-seite="start"] .anb-gruppe .marken img { max-width: 100%; height: auto; max-height: 37px; }
[data-seite="start"] .anb-gruppe.folgt { flex: 1; }
/* Mit Kacheln braucht die Leiste keine Linien oben und unten mehr */
[data-seite="start"] .anbindung-innen { border-top: 0; border-bottom: 0; padding: 0; }
@media (max-width: 760px) { [data-seite="start"] .anb-gruppe.folgt .marken { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; } [data-seite="start"] .anb-gruppe .marken li { min-height: 60px; } }

/* Datenschutz als Kachel-Raster (Bento, nach Cevira „Why choose us“): Kacheln in verschiedenen Größen, Unterlagen als blaue Kachel */
[data-seite="start"] .ds-kopf { display: flex; justify-content: space-between; align-items: end; gap: 12px 32px; flex-wrap: wrap; margin-bottom: 28px; }
[data-seite="start"] .ds-kopf h2 { margin: 0; max-width: 640px; }
[data-seite="start"] .ds-bento { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 1.2fr); gap: 14px; align-items: stretch; }
[data-seite="start"] .ds-kacheln { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-areas: "server server ki" "loesch push ki" "einblick einblick trennung"; }
[data-seite="start"] .dk { display: grid; align-content: start; gap: 6px; padding: 20px 22px; border-radius: 20px; background: #fff; border: 1px solid var(--linie); }
[data-seite="start"] .dk b { font-family: var(--display); font-weight: 600; font-size: 1.1rem; line-height: 1.3; color: var(--tinte); }
[data-seite="start"] .dk > span:not(.ds-ico), [data-seite="start"] .dk > div > span { font-size: 1rem; line-height: 1.5; color: var(--text-2); }
[data-seite="start"] .dk .ds-ico { margin-bottom: 2px; }
[data-seite="start"] .dk-server { grid-area: server; align-content: end; background: linear-gradient(135deg, #fff 55%, #eef1ff); }
[data-seite="start"] .dk-gross { font-size: clamp(1.35rem, 1.15rem + .6vw, 1.7rem) !important; letter-spacing: -0.02em; line-height: 1.15 !important; }
[data-seite="start"] .dk-ki { grid-area: ki; }
[data-seite="start"] .dk-loesch { grid-area: loesch; }
[data-seite="start"] .dk-zahl { font-family: var(--display); font-weight: 600; font-size: clamp(2.2rem, 1.8rem + 1.2vw, 2.9rem); line-height: 1; letter-spacing: -0.035em; color: var(--petrol); }
[data-seite="start"] .dk-push { grid-area: push; }
[data-seite="start"] .dk-einblick { grid-area: einblick; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 16px; }
[data-seite="start"] .dk-einblick .ds-ico { margin: 0; }
[data-seite="start"] .dk-einblick div { display: grid; gap: 6px; }
[data-seite="start"] .dk-trennung { grid-area: trennung; }
[data-seite="start"] .dk-unterlagen { display: flex; flex-direction: column; gap: 8px; padding: 24px 22px; border-radius: 20px; background: var(--petrol); color: #fff; }
[data-seite="start"] .dk-unterlagen .dk-gross { color: #fff; font-family: var(--display); font-weight: 600; }
[data-seite="start"] .dk-unterlagen .mini { color: #e6e9ff; font-size: 1rem; }
[data-seite="start"] .dk-unterlagen-ico { display: inline-flex; width: 48px; height: 48px; align-items: center; justify-content: center; border-radius: 14px; background: rgba(255, 255, 255, .14); }
[data-seite="start"] .dk-unterlagen-ico svg { width: 26px; height: 26px; color: #fff; }
[data-seite="start"] .dk-unterlagen ol { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 6px; }
[data-seite="start"] .dk-unterlagen ol li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 10px; align-items: start; font-size: 1rem; line-height: 1.4; }
[data-seite="start"] .dk-unterlagen ol svg { width: 20px; height: 20px; color: #fff; margin-top: 1px; }
[data-seite="start"] .dk-stempel { display: inline-flex; align-items: center; gap: 8px; font-size: 1rem; color: #e6e9ff; }
[data-seite="start"] .dk-stempel svg { width: 16px; height: 16px; }
[data-seite="start"] .dk-unterlagen .btn { margin-top: auto; justify-content: center; text-align: center; white-space: normal; }
@media (max-width: 1100px) {
  [data-seite="start"] .ds-bento { grid-template-columns: minmax(0, 1fr); }
  [data-seite="start"] .dk-unterlagen ol { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  [data-seite="start"] .ds-kacheln { grid-template-columns: minmax(0, 1fr); grid-template-areas: none; gap: 10px; }
  [data-seite="start"] .ds-kacheln > li { grid-area: auto; }
  [data-seite="start"] .dk { padding: 18px; }
  [data-seite="start"] .dk-unterlagen { padding: 20px 18px; }
  [data-seite="start"] .dk-unterlagen ol { grid-template-columns: minmax(0, 1fr); }
}
[data-seite="start"] .dk-unterlagen .dk-gross { font-size: clamp(1.25rem, 1.1rem + .4vw, 1.45rem) !important; }
[data-seite="start"] .dk-unterlagen .btn { align-self: stretch; }
/* Symbol neben dem Titel statt darüber (kompakter): Text läuft über die ganze Kachelbreite */
[data-seite="start"] .dk-server, [data-seite="start"] .dk-ki, [data-seite="start"] .dk-push, [data-seite="start"] .dk-trennung { grid-template-columns: auto minmax(0, 1fr); column-gap: 14px; align-items: center; }
:is(.dk-server, .dk-ki, .dk-push, .dk-trennung) > .ds-ico { margin: 0 !important; }
:is(.dk-server, .dk-ki, .dk-push, .dk-trennung) > span:not(.ds-ico) { grid-column: 1 / -1; }
[data-seite="start"] .dk-server { align-content: center; }
[data-seite="start"] .ds-kopf { margin-bottom: 22px; }
/* „Alle zeigen“-Knopf auf der blauen Kachel hell */
[data-seite="start"] .dk-unterlagen button { align-self: flex-start; color: #fff; border-color: rgba(255, 255, 255, .5); background: transparent; }

/* ---------- Wow (09.11.2026): Mail-Reise beim Scrollen, Kacheln springen herein ---------- */
[data-seite="start"] #ablauf.pin-an { height: var(--pin-hoehe); }
[data-seite="start"] #ablauf.pin-an > .container { position: sticky; top: var(--pin-oben); }
[data-seite="start"] #ablauf.pin-an .schritt-knopf .fortschritt { transition: none; }
[data-seite="start"] #ablauf.pin-an .schritt-knopf .fortschritt::after { transition: none; }
[data-seite="start"] .pz strong span, [data-seite="start"] .dk-zahl span { font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: no-preference) {
  .js [data-seite="start"] .ds-kacheln .dk.zeigen, .js [data-seite="start"] .dk-unterlagen.zeigen { transform: translateY(34px) scale(.94); transition: opacity .7s cubic-bezier(.2,.8,.2,1), transform .9s cubic-bezier(.16,1.2,.3,1); transition-delay: var(--d, 0s); }
  .js [data-seite="start"] .ds-kacheln .dk.zeigen.da, .js [data-seite="start"] .dk-unterlagen.zeigen.da { transform: none; }
  [data-seite="start"] .dk { transition: transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s; }
  [data-seite="start"] .dk.da:hover { transform: translateY(-4px); box-shadow: 0 22px 40px -26px rgba(10, 16, 51, .35); }
}

/* ===== 30-mail.css ===== */
/* ===== Seite KI-Mail-Assistent (/ki-mail-assistent/), 08.11.2026 =====
   Nur Regeln für diese Seite, alle unter [data-seite="mail"]. Bewegung nur über transform und opacity, je Abschnitt
   höchstens ein Detail am Produkt, nichts läuft endlos, reduzierte Bewegung wird respektiert. Effekte, die JavaScript
   braucht, hängen an Klassen, die 30-mail.js selbst setzt (ohne Skript bleibt alles sichtbar). */

[data-seite="mail"] figure.app-karte, [data-seite="mail"] figure.km-pf-foto { margin: 0; }

/* Wort für Wort nur bei den drei Kern-Überschriften (Analyse 10.7), alle anderen stehen sofort */

/* Zusätzliche Töne für Stufen und Teststand */
[data-seite="mail"] .marke-stufe { white-space: nowrap; }
/* Notfall-Marke mit 5 : 1 statt 4,13 : 1 (gemeinsame Farbe #d6363b auf #fdecec ist zu hell für 13 px) */
[data-seite="mail"] .marke-stufe.km-werktag { background: #e7ebff; color: #1d36e0; }
[data-seite="mail"] .marke-stufe.km-regulaer { background: #eceff7; color: #4a5168; }
[data-seite="mail"] .marke-stufe.km-auskunft { background: #fff; color: #4a5168; box-shadow: inset 0 0 0 1px #c6cddd; }
[data-seite="mail"] .marke-stufe.km-vorb { background: #fbf0e2; color: #8a4f0d; }

/* ---------- Hero: Arbeitsliste, eine neue Mail wird zum Fall ---------- */
/* „Der KI-E-Mail-Assistent“ bleibt am Desktop eine Zeile; die Größe folgt der Spaltenbreite (höchstens 56 px) */
@media (min-width: 761px) { [data-seite="mail"] .km-am-stueck { white-space: nowrap; } }
@media (min-width: 1021px) {
  /* Farbband nie hinter Text: am Desktop nur rechts unten, hinter der Arbeitsliste */
  [data-seite="mail"] .seiten-hero.km-hero::before { clip-path: polygon(52% 100%, 100% 38%, 100% 66%, 78% 100%); }
  [data-seite="mail"] .km-hero .seiten-hero-raster { grid-template-columns: minmax(0, 12fr) minmax(0, 11fr); }
  [data-seite="mail"] .km-hero h1 { font-size: min(3.5rem, 4.3vw); }
}
[data-seite="mail"] .km-hero .lead { max-width: 570px; }
[data-seite="mail"] .km-hero .status-zeile { margin: -6px 0 28px; font-size: 1rem; line-height: 1.45; }
/* Zwei Sätze, zwei Zeilen: „in Vorbereitung“ bricht nie allein um */
[data-seite="mail"] .km-hero .status-zeile .km-satz { display: block; }

[data-seite="mail"] .km-liste { position: relative; }
[data-seite="mail"] .km-liste .app-karte-kopf { font-size: .875rem; }
[data-seite="mail"] .km-ml-liste { position: relative; padding: 8px 10px 6px; }
[data-seite="mail"] .km-ml-zeile {
  position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px; align-items: center;
  padding: 14px 12px; border-radius: 14px;
}
[data-seite="mail"] .km-ml-zeile + .km-ml-zeile::after { content: ""; position: absolute; left: 12px; right: 12px; top: 0; height: 1px; background: var(--linie); }
[data-seite="mail"] .km-ml-zeile::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--petrol-hell);
  opacity: 0; transition: opacity 1.1s ease;
}
[data-seite="mail"] .km-ml-zeile.km-hell::before { opacity: 1; transition-duration: .35s; }
[data-seite="mail"] .km-ml-zeile.notfall { box-shadow: inset 3px 0 0 var(--notfall); border-radius: 4px 14px 14px 4px; }
[data-seite="mail"] .km-ml-zeile b { display: block; font-weight: 600; font-size: 1rem; line-height: 1.3; color: var(--tinte); }
[data-seite="mail"] .km-ml-zeile small { display: block; margin-top: 6px; font-size: .8125rem; line-height: 1.4; color: var(--text-3); }
[data-seite="mail"] .km-ml-fuss {
  display: flex; gap: 10px; align-items: flex-start; margin: 0; padding: 14px 20px 16px; border-top: 1px solid var(--linie);
  background: var(--grund); font-size: 1rem; line-height: 1.5; color: var(--text-2);
}
[data-seite="mail"] .km-ml-fuss svg { width: 20px; height: 20px; flex: none; margin-top: 2px; color: var(--petrol); }

/* Die neue Mail (nur während des Ablaufs, den 30-mail.js einmal startet) */
[data-seite="mail"] .km-ml-eingang { display: none; }
[data-seite="mail"] .km-ml-eingang .km-ml-ico { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; flex: none; background: #e7ebff; color: var(--petrol); }
[data-seite="mail"] .km-ml-eingang .km-ml-ico svg { width: 19px; height: 19px; }
[data-seite="mail"] .km-ml-eingang b { display: block; font-size: .9375rem; font-weight: 600; line-height: 1.3; }
[data-seite="mail"] .km-ml-eingang div > span { display: block; margin-top: 2px; font-size: .8125rem; line-height: 1.4; color: var(--text-3); }
@media (prefers-reduced-motion: no-preference) {
  [data-seite="mail"] .km-liste.km-lauf .km-ml-eingang {
    display: flex; position: absolute; z-index: 3; left: 10px; right: 10px; top: 6px; gap: 12px; align-items: flex-start;
    padding: 12px 14px; border-radius: 14px; background: #fff; color: var(--tinte);
    box-shadow: 0 0 0 1px var(--linie), 0 22px 44px -18px rgba(10, 16, 51, .55);
    opacity: 0; transform: translateY(-22px) scale(.97);
  }
  /* Übergänge erst in den Schritten, damit beim Start nichts sichtbar ausblendet */
  [data-seite="mail"] .km-liste.km-lauf.km-kommt .km-ml-eingang { opacity: 1; transform: none; transition: opacity .45s ease, transform .7s cubic-bezier(.16, 1, .3, 1); }
  [data-seite="mail"] .km-liste.km-lauf.km-drin .km-ml-eingang { opacity: 0; transform: translateY(10px) scale(.98); }
  [data-seite="mail"] .km-liste.km-lauf.km-fertig .km-ml-eingang { visibility: hidden; }
  [data-seite="mail"] .km-liste.km-lauf .km-ml-neu { opacity: 0; transform: translateY(-8px); }
  [data-seite="mail"] .km-liste.km-lauf.km-drin .km-ml-neu { opacity: 1; transform: none; transition: opacity .5s ease .12s, transform .7s cubic-bezier(.16, 1, .3, 1) .12s; }
  [data-seite="mail"] .km-liste.km-lauf .km-ml-davon { opacity: 0; }
  [data-seite="mail"] .km-liste.km-lauf.km-drin .km-ml-davon { opacity: 1; transition: opacity .5s ease .25s; }
}

/* ---------- Das Wichtigste in Kürze ---------- */
[data-seite="mail"] .kurz-kasten { box-shadow: 0 1px 2px rgba(20, 30, 90, .04), 0 18px 40px -30px rgba(20, 30, 90, .3); }
[data-seite="mail"] .kurz-kasten .km-kk-link { display: block; width: fit-content; margin-top: 6px; color: var(--petrol); font-weight: 600; text-underline-offset: 3px; }

/* ---------- Was übernimmt der Assistent? ---------- */
[data-seite="mail"] .km-ue-raster .funktion { gap: 12px; }
[data-seite="mail"] .km-ue-raster .funktion h3 { font-size: 1.3rem; }
/* Inhalt fließt von oben, der Weiterlesen-Link sitzt unten */
[data-seite="mail"] .km-ue-raster .pfeil-link { margin-top: auto; padding-top: 6px; }

/* Erste Karte über die volle Breite: Text links, Fall rechts */
[data-seite="mail"] .km-ue-raster .km-ue-fall { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 24px 48px; align-items: center; padding: 32px; }
[data-seite="mail"] .km-ue-fall-text { display: flex; flex-direction: column; gap: 12px; }
[data-seite="mail"] .km-ue-fall-text p { margin: 0; }
[data-seite="mail"] .km-fall {
  padding: 18px 20px 20px; border: 1px solid var(--linie); border-radius: 18px; background: #fff;
  box-shadow: 0 30px 60px -38px rgba(20, 30, 90, .5);
}
[data-seite="mail"] .km-fall-kopf { display: flex; justify-content: space-between; gap: 6px 12px; flex-wrap: wrap; margin-bottom: 8px; font-size: .8125rem; color: var(--text-3); }
[data-seite="mail"] .km-fall .ui-titel { font-size: 1.2rem; margin-bottom: 12px; }
[data-seite="mail"] .km-fall .ui-raster { gap: 14px 18px; padding: 16px 18px; }
[data-seite="mail"] .km-fall .ui-raster .marke-stufe { display: inline-flex; }
[data-seite="mail"] .km-fall .ui-hinweis { margin-top: 12px; font-size: 1rem; line-height: 1.5; }
[data-seite="mail"] .km-fall .ui-naechster { margin: 12px 0 0; background: var(--grund); border-color: var(--linie); }
[data-seite="mail"] .km-fall .ui-naechster div > span { font-size: 1rem; line-height: 1.5; }
@media (prefers-reduced-motion: no-preference) {
  [data-seite="mail"] .km-fall.km-fu-bereit .ui-raster > div, [data-seite="mail"] .km-fall.km-fu-bereit .ui-hinweis, [data-seite="mail"] .km-fall.km-fu-bereit .ui-naechster {
    opacity: 0; transform: translateY(10px); transition: opacity .5s ease, transform .7s cubic-bezier(.16, 1, .3, 1);
  }
  [data-seite="mail"] .km-fall.km-fu-bereit.km-fu-voll .ui-raster > div, [data-seite="mail"] .km-fall.km-fu-bereit.km-fu-voll .ui-hinweis, [data-seite="mail"] .km-fall.km-fu-bereit.km-fu-voll .ui-naechster { opacity: 1; transform: none; }
  [data-seite="mail"] .km-fall.km-fu-voll .ui-raster > div:nth-child(2) { transition-delay: .12s; }
  [data-seite="mail"] .km-fall.km-fu-voll .ui-raster > div:nth-child(3) { transition-delay: .24s; }
  [data-seite="mail"] .km-fall.km-fu-voll .ui-raster > div:nth-child(4) { transition-delay: .36s; }
  [data-seite="mail"] .km-fall.km-fu-voll .ui-raster > div:nth-child(5) { transition-delay: .48s; }
  [data-seite="mail"] .km-fall.km-fu-voll .ui-raster > div:nth-child(6) { transition-delay: .6s; }
  [data-seite="mail"] .km-fall.km-fu-voll .ui-hinweis { transition-delay: .8s; }
  [data-seite="mail"] .km-fall.km-fu-voll .ui-naechster { transition-delay: 1s; }
}

[data-seite="mail"] .km-ue-meldungen { display: grid; gap: 10px; margin-top: 6px; }
[data-seite="mail"] .km-ue-push {
  display: flex; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 16px; background: #fff;
  box-shadow: 0 0 0 1px var(--linie), 0 16px 32px -22px rgba(20, 30, 90, .45);
}
[data-seite="mail"] .km-ue-push-ico { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; flex: none; background: var(--notfall); color: #fff; }
[data-seite="mail"] .km-ue-push-ico svg { width: 20px; height: 20px; }
[data-seite="mail"] .km-ue-push b { display: block; font-size: .9375rem; font-weight: 600; line-height: 1.3; }
[data-seite="mail"] .km-ue-push small { display: block; margin-top: 2px; font-size: .8125rem; line-height: 1.4; color: var(--text-3); }
[data-seite="mail"] .km-ue-spam { display: flex; gap: 10px; align-items: center; padding: 10px 14px; border-radius: 12px; background: var(--heute-weich); color: var(--heute); font-size: .875rem; font-weight: 600; line-height: 1.35; }
[data-seite="mail"] .km-ue-spam svg { width: 18px; height: 18px; flex: none; }

[data-seite="mail"] .km-ue-ki-text {
  margin-top: 6px; padding: 14px 16px; border-radius: 14px; background: var(--grund); border: 1px dashed var(--linie-stark);
  font-size: 1rem; line-height: 1.75; color: var(--text-2);
}
[data-seite="mail"] .km-ue-ki-text small { display: block; margin-bottom: 4px; font-size: .8125rem; font-weight: 600; line-height: 1.4; color: var(--text-3); }

[data-seite="mail"] .km-ue-rf { margin-top: auto; padding: 16px 18px; border: 1px solid var(--linie); border-radius: 18px; background: #fff; }
[data-seite="mail"] .km-ue-rf-kopf { font-size: .8125rem; font-weight: 600; color: var(--text-3); }
[data-seite="mail"] .km-ue-rf .ui-check { margin-top: 10px; font-size: 1rem; line-height: 1.5; }
[data-seite="mail"] .km-ue-rf .ui-check b { font-weight: 600; }
[data-seite="mail"] .km-ue-rf .ui-zeilen div { font-size: 1rem; }
[data-seite="mail"] .km-ue-rf .ui-zeilen b { font-weight: 600; }

[data-seite="mail"] .km-ue-vorgang { margin-top: auto; display: grid; gap: 6px; padding: 16px 18px; border-radius: 16px; background: var(--petrol-tief); color: #fff; }
[data-seite="mail"] .km-ue-vorgang small { font-size: .8125rem; font-weight: 600; color: #aab3e0; }
[data-seite="mail"] .km-ue-vorgang b { font-size: .9375rem; font-weight: 600; line-height: 1.45; overflow-wrap: anywhere; }
[data-seite="mail"] .km-ue-vorgang span { font-size: .8125rem; line-height: 1.5; color: #c3c9ea; }

[data-seite="mail"] .km-ue-fuss { max-width: 68ch; margin: 30px auto 0; text-align: center; color: var(--text-2); }
[data-seite="mail"] .km-ue-fuss a, [data-seite="mail"] .km-nie-liste a { color: var(--petrol); font-weight: 600; text-underline-offset: 3px; }

@media (max-width: 1020px) {
  [data-seite="mail"] .km-ue-raster .km-ue-fall { grid-template-columns: minmax(0, 1fr); padding: 28px; }
}
@media (max-width: 760px) {
  [data-seite="mail"] .km-ue-raster .km-ue-fall { padding: 22px; }
}

/* ---------- Welche Anliegen erkennt er? ---------- */
[data-seite="mail"] .km-an-lead { max-width: 520px; margin: 0; }
[data-seite="mail"] .km-stufen {
  list-style: none; margin: 0 0 36px; padding: 6px; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  background: #fff; border: 1px solid var(--linie); border-radius: 20px;
}
[data-seite="mail"] .km-stufen li { display: grid; gap: 8px; align-content: start; padding: 14px 16px; }
[data-seite="mail"] .km-stufen li + li { border-left: 1px solid var(--linie); }
[data-seite="mail"] .km-stufen .marke-stufe { justify-self: start; }
[data-seite="mail"] .km-stufen li > span:last-child { font-size: 1rem; line-height: 1.45; color: var(--text-2); }

[data-seite="mail"] .km-an-titel { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; font-size: 1.25rem; }
[data-seite="mail"] .km-an-titel svg { width: 24px; height: 24px; flex: none; color: var(--petrol); }

/* Notfallarten: eine Zeile mit sechs Marken, die Einzelheiten stehen auf der Notfall-Seite */
[data-seite="mail"] .km-an-notfall { padding: 26px 30px 24px; border-radius: 20px; background: #fff; border: 1px solid var(--linie); }
[data-seite="mail"] .km-an-nf-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; margin-bottom: 14px; }
[data-seite="mail"] .km-an-notfall .km-an-titel { margin: 0; }
[data-seite="mail"] .km-an-notfall .km-an-titel svg { color: var(--notfall); }
[data-seite="mail"] .km-an-marken { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
[data-seite="mail"] .km-an-marken .marke-stufe { padding: 5px 12px; font-size: .875rem; }
[data-seite="mail"] .km-an-nf-text { padding-left: 34px; }
[data-seite="mail"] .km-an-nf-text p { max-width: 880px; margin: 0 0 12px; color: var(--text-2); }

/* Alltag, Geld und Verwaltung: Namen sichtbar, Rückfragen und Stufen zum Aufklappen */
[data-seite="mail"] .km-an-tabelle td { color: var(--text-2); }
/* Lange Wörter (Wohnungsgeberbestätigung) trennen statt aus der Zelle laufen */
[data-seite="mail"] .km-an-tabelle td { -webkit-hyphens: auto; hyphens: auto; overflow-wrap: break-word; }
[data-seite="mail"] .km-an-tabelle td:first-child { color: var(--tinte); }
[data-seite="mail"] .km-an-tabelle td:first-child b { display: block; font-weight: 600; }
[data-seite="mail"] .km-an-tabelle td:first-child small { display: block; margin-top: 3px; font-family: var(--text); font-weight: 400; font-size: .8125rem; line-height: 1.4; color: var(--text-3); }
[data-seite="mail"] .km-an-tabelle .marke-stufe { margin: 1px 0; }
@media (min-width: 761px) {
  [data-seite="mail"] .km-an-tabelle { table-layout: fixed; }
  [data-seite="mail"] .km-an-tabelle th:nth-child(1) { width: 25%; }
  [data-seite="mail"] .km-an-tabelle th:nth-child(2) { width: 37%; }
  [data-seite="mail"] .km-an-tabelle th:nth-child(3) { width: 22%; }
  [data-seite="mail"] .km-an-tabelle th:nth-child(4) { width: 16%; }
}
[data-seite="mail"] .km-an-mehr { margin-top: 16px; border-radius: 20px; background: #fff; border: 1px solid var(--linie); }
[data-seite="mail"] .km-an-mehr summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 24px 30px; cursor: pointer; border-radius: 20px; }
[data-seite="mail"] .km-an-mehr summary::-webkit-details-marker { display: none; }
[data-seite="mail"] .km-an-mehr summary .km-an-titel { margin: 0; }
[data-seite="mail"] .km-an-sum { display: grid; gap: 6px; }
[data-seite="mail"] .km-an-namen { max-width: 860px; padding-left: 34px; font-size: 1rem; line-height: 1.55; color: var(--tinte); }
[data-seite="mail"] .km-an-mehr-zahl { padding-left: 34px; font-size: 1rem; font-weight: 600; color: var(--petrol); }
[data-seite="mail"] .km-an-mehr[open] .km-an-mehr-zahl { color: var(--text-3); }
[data-seite="mail"] .km-an-mehr .tabelle-wrap { margin: 0 14px 14px; }
[data-seite="mail"] .km-an-mehr-knopf {
  display: inline-flex; align-items: center; justify-content: center; flex: none; width: 44px; height: 44px; border-radius: 999px;
  border: 1px solid var(--linie-stark); background: #fff; color: var(--tinte); transition: border-color .2s;
}
[data-seite="mail"] .km-an-mehr summary:hover .km-an-mehr-knopf { border-color: var(--tinte); }
[data-seite="mail"] .km-an-mehr-knopf svg { width: 18px; height: 18px; transition: transform .25s; }
[data-seite="mail"] .km-an-mehr[open] .km-an-mehr-knopf svg { transform: rotate(180deg); }
[data-seite="mail"] .km-an-fuss { max-width: 68ch; margin: 20px 0 0; color: var(--text-2); }
@media (max-width: 1020px) {
  [data-seite="mail"] .km-stufen { grid-template-columns: 1fr; padding: 4px 8px; }
  [data-seite="mail"] .km-stufen li { grid-template-columns: 160px minmax(0, 1fr); align-items: center; padding: 12px 8px; }
  [data-seite="mail"] .km-stufen li + li { border-left: 0; border-top: 1px solid var(--linie); }
}
@media (max-width: 760px) {
  [data-seite="mail"] .km-an-tabelle td:first-child small { font-size: .8125rem; }
  [data-seite="mail"] .km-an-titel { font-size: 1.15rem; }
  [data-seite="mail"] .km-an-notfall { padding: 22px 20px; }
  /* Handy: Knopf oben rechts neben dem Titel, die Namen bekommen die ganze Breite */
  [data-seite="mail"] .km-an-mehr summary { position: relative; display: block; padding: 20px; }
  [data-seite="mail"] .km-an-mehr summary .km-an-titel { min-height: 44px; padding-right: 56px; }
  [data-seite="mail"] .km-an-mehr-knopf { position: absolute; top: 20px; right: 16px; }
  [data-seite="mail"] .km-an-namen, [data-seite="mail"] .km-an-mehr-zahl, [data-seite="mail"] .km-an-nf-text { padding-left: 0; }
  [data-seite="mail"] .km-an-mehr .tabelle-wrap { margin: 0 8px 8px; }
}
@media (max-width: 440px) {
  [data-seite="mail"] .km-stufen li { grid-template-columns: 1fr; gap: 6px; }
}

/* ---------- Was darf automatisch rausgehen? (dunkle Bühne) ---------- */
[data-seite="mail"] .km-au-raster { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 64px; align-items: start; }
[data-seite="mail"] .km-au-text h2 { margin-bottom: 16px; }
[data-seite="mail"] .km-au-text h3 { margin: 36px 0 0; font-size: 1.25rem; }
[data-seite="mail"] .km-au-liste { margin-top: 14px; gap: 12px; }
[data-seite="mail"] .dunkel .km-au-liste li { color: #dfe3ff; }
[data-seite="mail"] .dunkel .km-au-liste svg { color: var(--mint); }
[data-seite="mail"] .dunkel .km-au-liste.nein svg { color: #ff9a9e; }
/* Ab Werk ausgenommen: kein festes „nie“, darum als eigener Hinweis unter der Liste */
[data-seite="mail"] .dunkel p.km-au-werk {
  margin: 22px 0 0; padding: 16px 20px; border-radius: 16px; background: rgba(255, 255, 255, .06);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); color: #dfe3ff; line-height: 1.55;
}
[data-seite="mail"] .dunkel p.km-au-werk b { color: #fff; font-weight: 600; }
[data-seite="mail"] .km-au-karte { position: sticky; top: 104px; }
[data-seite="mail"] .km-au-karte .app-karte-kopf { flex-wrap: wrap; }
[data-seite="mail"] .km-au-plan { margin-bottom: 14px; background: var(--grund); border-color: var(--linie); }
[data-seite="mail"] .km-au-plan b { font-size: 1rem; }
[data-seite="mail"] .km-au-zeit { font-variant-numeric: tabular-nums; color: var(--petrol); }
[data-seite="mail"] .km-au-stopp { height: 44px; padding: 0 22px; font-size: .9375rem; cursor: pointer; border-color: var(--tinte); }
[data-seite="mail"] .km-au-stopp:hover { background: var(--tinte); color: #fff; }
[data-seite="mail"] .km-au-karte.km-au-gestoppt .km-au-stopp, [data-seite="mail"] .km-au-karte.km-au-gestoppt .km-au-stopp:hover { background: var(--heute-weich); color: var(--heute); border-color: transparent; cursor: default; }
[data-seite="mail"] .km-au-karte.km-au-gesendet .km-au-stopp, [data-seite="mail"] .km-au-karte.km-au-gesendet .km-au-stopp:hover { background: var(--ok-weich); color: var(--ok); border-color: transparent; cursor: default; }
[data-seite="mail"] .km-au-karte.km-au-gestoppt .km-au-zeit, [data-seite="mail"] .km-au-karte.km-au-gesendet .km-au-zeit { color: inherit; }
[data-seite="mail"] .dunkel .app-karte .km-au-entwurf p { margin: 0 0 .8em; font-size: 1rem; line-height: 1.55; color: var(--tinte); }
[data-seite="mail"] .dunkel .app-karte .km-au-entwurf p.km-au-hinweis { margin: 14px 0 0; padding-top: 12px; border-top: 1px dashed var(--linie-stark); font-size: 1rem; line-height: 1.5; color: var(--text-3); }
[data-seite="mail"] .km-au-fakten b { font-weight: 600; text-align: right; }
[data-seite="mail"] .km-nb { white-space: nowrap; }
@media (max-width: 520px) {
  [data-seite="mail"] .km-au-fakten div { flex-direction: column; align-items: flex-start; gap: 2px; }
  [data-seite="mail"] .km-au-fakten b { text-align: left; }
}
@media (max-width: 1020px) {
  [data-seite="mail"] .km-au-raster { grid-template-columns: 1fr; gap: 44px; }
  [data-seite="mail"] .km-au-karte { position: static; }
}

/* ---------- Grenzen der Einordnung ---------- */
[data-seite="mail"] .km-gr-raster { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 64px; align-items: start; }
[data-seite="mail"] .km-gr-raster h2 { margin-bottom: 16px; }
[data-seite="mail"] .km-gr-liste { list-style: none; margin: 32px 0 0; padding: 0; display: grid; gap: 22px; }
[data-seite="mail"] .km-gr-liste li { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 18px; align-items: start; }
[data-seite="mail"] .km-gr-ico { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; background: #e7ebff; color: var(--petrol); }
[data-seite="mail"] .km-gr-ico svg { width: 28px; height: 28px; }
[data-seite="mail"] .km-gr-liste b { display: block; margin: 2px 0 4px; font-family: var(--display); font-weight: 600; font-size: 1.12rem; line-height: 1.3; }
[data-seite="mail"] .km-gr-liste p { margin: 0; color: var(--text-2); }
[data-seite="mail"] .km-probe { position: sticky; top: 104px; padding: 30px; border-radius: 26px; background: var(--grund); border: 1px solid var(--linie); }
[data-seite="mail"] .km-probe h3 { font-size: 1.35rem; }
[data-seite="mail"] .km-probe-stand { margin: 8px 0 16px; font-size: 1rem; color: var(--text-3); }
[data-seite="mail"] .km-probe-laeufe { margin: 0; display: grid; }
[data-seite="mail"] .km-probe-laeufe div { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 14px; padding: 14px 0; border-top: 1px solid var(--linie); }
[data-seite="mail"] .km-probe-laeufe dt { font-weight: 600; color: var(--tinte); }
[data-seite="mail"] .km-probe-laeufe dd { margin: 0; color: var(--text-2); line-height: 1.5; }
[data-seite="mail"] .km-probe-methode { margin: 0 0 18px; padding-top: 14px; border-top: 1px solid var(--linie); color: var(--text-2); line-height: 1.55; }
@media (max-width: 1020px) {
  [data-seite="mail"] .km-gr-raster { grid-template-columns: 1fr; gap: 44px; }
  [data-seite="mail"] .km-probe { position: static; }
}
@media (max-width: 520px) {
  [data-seite="mail"] .km-probe { padding: 24px 20px; border-radius: 22px; }
  [data-seite="mail"] .km-probe-laeufe div { grid-template-columns: 1fr; gap: 4px; }
  [data-seite="mail"] .km-gr-liste li { grid-template-columns: 44px minmax(0, 1fr); gap: 14px; }
  [data-seite="mail"] .km-gr-ico { width: 44px; height: 44px; border-radius: 14px; }
  [data-seite="mail"] .km-gr-ico svg { width: 24px; height: 24px; }
}

/* ---------- Postfach und Anbindung ---------- */
[data-seite="mail"] .km-pf-raster { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 64px; align-items: center; }
[data-seite="mail"] .km-pf-foto { position: relative; min-height: 560px; border-radius: var(--r-bild); overflow: hidden; background: #d6dbe8; }
[data-seite="mail"] .km-pf-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 32% 50%; }
[data-seite="mail"] .km-pf-ui {
  position: absolute; z-index: 2; left: 18px; right: 18px; bottom: 18px; display: grid; gap: 8px; padding: 12px; border-radius: 18px;
  background: rgba(255, 255, 255, .97); color: var(--tinte); box-shadow: 0 24px 50px -24px rgba(10, 16, 51, .6);
}
[data-seite="mail"] .km-pf-ui-kopf { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 2px 6px 2px; font-size: .8125rem; color: var(--text-3); }
[data-seite="mail"] .km-pf-ui-kopf b { font-size: .9375rem; font-weight: 600; color: var(--tinte); }
[data-seite="mail"] .km-pf-zeile { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: var(--grund); }
[data-seite="mail"] .km-pf-zeile > div { min-width: 0; }
[data-seite="mail"] .km-pf-zeile b { display: block; font-size: .9375rem; font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
[data-seite="mail"] .km-pf-zeile small { display: block; margin-top: 2px; font-size: .8125rem; line-height: 1.35; color: var(--text-3); }
[data-seite="mail"] .km-pf-text h2 { margin-bottom: 16px; }
/* Teststand: drei Zeilen statt Tabelle, Einzelheiten stehen im Testbericht */
[data-seite="mail"] .km-pf-test {
  display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); grid-template-rows: auto 1fr;
  grid-template-areas: "kopf stand" "link stand"; gap: 16px 56px; align-items: start;
  margin-top: 64px; padding: 30px 32px; border-radius: 24px; background: #fff; border: 1px solid var(--linie);
}
[data-seite="mail"] .km-pf-test-kopf { grid-area: kopf; }
[data-seite="mail"] .km-pf-stand { grid-area: stand; }
[data-seite="mail"] .km-pf-test-link { grid-area: link; margin: 0; }
[data-seite="mail"] .km-pf-test-kopf h3 { font-size: clamp(1.35rem, 1.2rem + .5vw, 1.6rem); }
[data-seite="mail"] .km-pf-test-kopf p { margin: 10px 0 0; color: var(--text-2); }
[data-seite="mail"] .km-pf-stand { list-style: none; margin: 0; padding: 0; display: grid; }
[data-seite="mail"] .km-pf-stand li { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 16px; align-items: start; padding: 16px 0; }
[data-seite="mail"] .km-pf-stand li:first-child { padding-top: 4px; }
[data-seite="mail"] .km-pf-stand li:last-child { padding-bottom: 0; }
[data-seite="mail"] .km-pf-stand li + li { border-top: 1px solid var(--linie); }
[data-seite="mail"] .km-pf-stand .marke-stufe { justify-self: start; margin-top: 1px; }
[data-seite="mail"] .km-pf-stand p { margin: 0; color: var(--text-2); line-height: 1.55; }
[data-seite="mail"] .km-pf-stand p b { color: var(--tinte); font-weight: 600; }
@media (max-width: 1020px) {
  [data-seite="mail"] .km-pf-raster { grid-template-columns: 1fr; gap: 40px; }
  [data-seite="mail"] .km-pf-foto { min-height: 460px; }
  [data-seite="mail"] .km-pf-test { grid-template-columns: 1fr; grid-template-rows: auto; grid-template-areas: "kopf" "stand" "link"; gap: 20px; }
}
@media (max-width: 520px) {
  [data-seite="mail"] .km-pf-test { padding: 24px 20px; border-radius: 22px; }
  [data-seite="mail"] .km-pf-stand li { grid-template-columns: 1fr; gap: 8px; }
}
@media (max-width: 760px) {
  /* Handy: Foto ganz sichtbar, die Postfach-Karte sitzt darunter und überlappt nur leicht.
     Das vergrößerte Foto der Einblendung darf dabei nie seitlich aus der Seite ragen. */
  [data-seite="mail"] #postfach { overflow-x: clip; }
  [data-seite="mail"] .km-pf-foto { min-height: 0; display: flex; flex-direction: column; overflow: visible; background: none; }
  [data-seite="mail"] .km-pf-foto img { position: relative; inset: auto; height: 300px; border-radius: var(--r-bild); object-position: 40% 40%; }
  [data-seite="mail"] .km-pf-ui { position: relative; left: auto; right: auto; bottom: auto; margin: -56px 12px 0; }
  [data-seite="mail"] .km-pf-test { margin-top: 48px; }
}

/* ---------- Was der Assistent nie tut ---------- */
[data-seite="mail"] .km-nie-raster { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 56px; align-items: start; }
[data-seite="mail"] .km-nie-kopf { position: sticky; top: 104px; }
[data-seite="mail"] .km-nie-kopf h2 { margin-bottom: 16px; }
[data-seite="mail"] .km-nie-liste { margin: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 36px; }
[data-seite="mail"] .km-nie-liste li { padding: 16px 0; border-top: 1px solid var(--linie); }
[data-seite="mail"] .km-nie-liste span { color: var(--text-2); }
[data-seite="mail"] .km-nie-liste b { color: var(--tinte); font-weight: 600; }
@media (max-width: 1020px) {
  [data-seite="mail"] .km-nie-raster { grid-template-columns: 1fr; gap: 28px; }
  [data-seite="mail"] .km-nie-kopf { position: static; }
}
@media (max-width: 680px) { [data-seite="mail"] .km-nie-liste { grid-template-columns: 1fr; } }

/* ---------- Fragen: Zeilen nicht länger als gut lesbar ---------- */
[data-seite="mail"] .fragen .antwort { max-width: 66ch; }

/* ---------- Handlungsaufruf: Farbverlauf dreht sich nur einmal ---------- */

/* ---------- Handy ---------- */
@media (max-width: 760px) {
  /* Kopf der Arbeitsliste: „davon 1 Notfall“ bleibt zusammen, „Beispielansicht“ rückt bei Bedarf darunter */
  [data-seite="mail"] .km-liste .app-karte-kopf { flex-wrap: wrap; row-gap: 2px; }
  [data-seite="mail"] .km-liste .app-karte-kopf > span:first-child { white-space: nowrap; }
  [data-seite="mail"] .km-ml-zeile { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  [data-seite="mail"] .km-ml-zeile .knopf-ui { justify-self: start; }
  [data-seite="mail"] .km-fall { padding: 14px; }
  [data-seite="mail"] .km-fall .ui-raster { padding: 14px; }
}

/* ===== 35-notfaelle-selbstbau.css ===== */
/* ===== 35: Seiten /ki-mail-assistent/notfaelle/ (data-seite="notfaelle") und
   /ki-mail-assistent/selbst-bauen-oder-fertig/ (data-seite="selbstbau"), 08.11.2026.
   Nur seitenbezogene Regeln. Bewegung nur über transform und opacity, einmal, mit prefers-reduced-motion. ===== */

/* ---------- Beide Seiten ---------- */
:is([data-seite="notfaelle"], [data-seite="selbstbau"]) figure { margin: 0; }
/* Rote Marke mit genug Kontrast (4,5 : 1 auf Hellrot) */
/* Rot nur für Notfälle: Nein-Listen neutral */
:is([data-seite="notfaelle"], [data-seite="selbstbau"]) .liste-haken.nein svg { color: var(--text-2); }
:is([data-seite="notfaelle"], [data-seite="selbstbau"]) .app-karte-kopf > span:first-child { min-width: 0; }
:is([data-seite="notfaelle"], [data-seite="selbstbau"]) .app-karte-kopf { flex-wrap: wrap; row-gap: 4px; }
:is([data-seite="notfaelle"], [data-seite="selbstbau"]) .kopf .lead a,
:is([data-seite="notfaelle"], [data-seite="selbstbau"]) .zeigen p a:not(.btn):not(.pfeil-link),
:is([data-seite="notfaelle"], [data-seite="selbstbau"]) .fragen .antwort a { color: var(--petrol); font-weight: 600; text-underline-offset: 3px; }
:is([data-seite="notfaelle"], [data-seite="selbstbau"]) .dunkel .zeigen p a:not(.btn):not(.pfeil-link) { color: var(--mint); }
:is([data-seite="notfaelle"], [data-seite="selbstbau"]) .fragen .antwort p { margin: 0 0 .7em; }
:is([data-seite="notfaelle"], [data-seite="selbstbau"]) .fragen .antwort p:last-child { margin-bottom: 0; }
:is([data-seite="notfaelle"], [data-seite="selbstbau"]) h3 { font-size: clamp(1.2rem, 1.1rem + .35vw, 1.4rem); }
:is([data-seite="notfaelle"], [data-seite="selbstbau"]) .cta-band .lead { margin: 0; }
:is([data-seite="notfaelle"], [data-seite="selbstbau"]) :is(.zwei-spalten, .einf-raster) h2 + .lead { margin-top: 16px; }
:is([data-seite="notfaelle"], [data-seite="selbstbau"]) .pfad { flex-wrap: wrap; row-gap: 2px; }
/* Zweiter Knopf der Bühne liegt teils über dem Farbband: eigene dunkle Fläche, damit nie Band hinter Text liegt */
:is([data-seite="notfaelle"], [data-seite="selbstbau"]) .buehne-dunkel .hero-knoepfe .btn-rand { background: var(--petrol-tief); }
:is([data-seite="notfaelle"], [data-seite="selbstbau"]) .buehne-dunkel .hero-knoepfe .btn-rand:hover { background: #141b45; }
:is([data-seite="notfaelle"], [data-seite="selbstbau"]) .pfad > * { white-space: nowrap; }
/* Passen drei Stufen nicht in eine Zeile, zeigt der Brotkrümel nur „Start / KI-Mail-Assistent“. Die H1 darunter nennt die Seite,
   Screenreader hören die letzte Stufe weiter (versteckt wie .sr-only). Grenzen: Copilot-Seite braucht 380 px, Notfälle 312 px Platz */
@media (max-width: 431px) {
  [data-seite="selbstbau"] .pfad > :nth-last-child(2) { display: none; }
  [data-seite="selbstbau"] .pfad > [aria-current] { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
@media (max-width: 359px) {
  [data-seite="notfaelle"] .pfad > :nth-last-child(2) { display: none; }
  [data-seite="notfaelle"] .pfad > [aria-current] { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
/* H1 nur an den gesetzten Stellen trennen (­), nie „Notfäl-le“ */
:is([data-seite="notfaelle"], [data-seite="selbstbau"]) .seiten-hero h1 { hyphens: manual; -webkit-hyphens: manual; }
/* Handlungsaufruf in Markenfarbe wie auf Mail, Telefon und Preise: Verlauf dreht sich nur einmal (Analyse 10.7),
   leichte Abdunklung darüber, damit weißer Text auch über Violett mindestens 4,5 : 1 hat */
/* Die drehende Fläche ist ein Quadrat (160 % der Bandbreite, mittig): Die Grundform 200 % × 200 % ist bei einem breiten, flachen Band
   selbst flach und lässt während der Drehung harte Kanten stehen. Das Quadrat deckt das Band in jedem Winkel ab, auch am Handy. */

/* =====================================================================
   NOTFÄLLE
   ===================================================================== */

/* ---------- Bühne: Notfall-Zeitleiste mit echter Uhr und Handy ---------- */
[data-seite="notfaelle"] .nf-hero .seiten-hero-raster { grid-template-columns: minmax(0, 11fr) minmax(0, 13fr); }
.nf-szene { position: relative; }
.nf-buehne { display: grid; grid-template-columns: minmax(0, 1fr) 196px; gap: 22px; align-items: center; }
.nf-karte { position: relative; }
.nf-karte .app-karte-kopf b { color: var(--tinte); }
.nf-uhr-zeile { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 18px 22px 4px; }
.nf-uhr { display: inline-flex; font-family: var(--text); font-weight: 600; font-size: 2.35rem; line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: var(--tinte); }
.nf-sek { display: inline-block; min-width: 1.25em; }
.nf-uhr-label { font-size: .8125rem; font-weight: 500; color: var(--text-3); text-align: right; }
.nf-schritte { list-style: none; margin: 0; padding: 8px 22px 20px; display: grid; }
.nf-schritt { position: relative; display: grid; grid-template-columns: 22px 66px minmax(0, 1fr); gap: 2px 12px; align-items: start; padding: 11px 0; }
.nf-schritt time { font-size: .875rem; font-weight: 600; color: var(--text-3); font-variant-numeric: tabular-nums; padding-top: 2px; }
.nf-schritt b { display: block; font-weight: 600; font-size: 1rem; line-height: 1.3; color: var(--tinte); }
.nf-schritt div > span { display: block; margin-top: 2px; font-size: 1rem; line-height: 1.45; color: var(--text-2); }
.nf-schritt.nf-rot b { color: #b4262c; }
/* Punkt füllt sich, Haken springt hinein: nur transform */
.nf-punkt { position: relative; z-index: 1; width: 22px; height: 22px; margin-top: 1px; border-radius: 50%; border: 2px solid var(--linie-stark); background: #fff; display: grid; place-items: center; }
.nf-punkt::before { content: ""; position: absolute; inset: -2px; border-radius: 50%; background: var(--petrol); transform: scale(1); transition: transform .38s cubic-bezier(.34, 1.4, .64, 1); }
.nf-rot .nf-punkt::before { background: var(--notfall); }
.nf-punkt svg { position: relative; width: 12px; height: 12px; color: #fff; transform: scale(1); transition: transform .3s cubic-bezier(.34, 1.4, .64, 1) .08s; }
/* Verbindungslinie zum nächsten Schritt */
.nf-schritt:not(:last-child)::before { content: ""; position: absolute; left: 10px; top: 36px; bottom: -10px; width: 2px; border-radius: 2px; background: var(--linie); }
.nf-schritt:not(:last-child)::after { content: ""; position: absolute; left: 10px; top: 36px; bottom: -10px; width: 2px; border-radius: 2px; background: var(--petrol); transform-origin: 50% 0; transform: scaleY(1); transition: transform .8s cubic-bezier(.16, 1, .3, 1); }
.nf-schritt.nf-rot:not(:last-child)::after { background: linear-gradient(180deg, var(--notfall), var(--petrol)); }
/* Ausgangslage, solange die Uhr läuft (setzt 35-notfaelle.js; ohne Skript steht der Endzustand) */
.nf-bereit .nf-schritt:not(.nf-an) .nf-punkt::before, .nf-bereit .nf-schritt:not(.nf-an) .nf-punkt svg { transform: scale(0); }
.nf-bereit .nf-schritt:not(.nf-weiter)::after { transform: scaleY(0); }
.nf-bereit:not(.nf-gemeldet) .nf-mitteilung { transform: translateY(-190px); opacity: 0; }
@keyframes nf-tick { from { transform: translateY(-40%); opacity: 0; } to { transform: none; opacity: 1; } }
.nf-sek.nf-tick { animation: nf-tick .32s cubic-bezier(.2, .8, .2, 1); }

/* Handy aus CSS: Metallrahmen mit Lichtkante, schmaler schwarzer Rand, Insel, Statusleiste, Home-Leiste */
.nf-handy { position: relative; width: 196px; height: 404px; border-radius: 44px; padding: 4px;
  background: linear-gradient(150deg, #f6f7fa 0%, #aab2c3 20%, #eceef3 46%, #8c95a8 72%, #dfe2e9 100%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.65), 0 1px 0 rgba(255,255,255,.3), 0 40px 70px -24px rgba(0,0,0,.75); }
.nf-handy-glas { height: 100%; border-radius: 40px; padding: 5px; background: #03050c; }
.nf-display { position: relative; height: 100%; overflow: hidden; border-radius: 35px; isolation: isolate;
  background: radial-gradient(120% 60% at 15% 0%, rgba(123,92,255,.95) 0%, rgba(123,92,255,0) 62%),
              radial-gradient(110% 70% at 100% 100%, rgba(34,195,230,.85) 0%, rgba(34,195,230,0) 58%),
              linear-gradient(172deg, #16238a 0%, #2b4bff 52%, #3f6dff 100%); }
.nf-insel { position: absolute; z-index: 3; top: 9px; left: 50%; width: 62px; height: 18px; margin-left: -31px; border-radius: 12px; background: #000; }
.nf-status { position: absolute; z-index: 3; top: 13px; right: 15px; display: flex; align-items: center; gap: 5px; }
.nf-netz { display: flex; align-items: flex-end; gap: 1.5px; height: 9px; }
.nf-netz b { display: block; width: 3px; border-radius: 1px; background: #fff; }
.nf-netz b:nth-child(1) { height: 3px; } .nf-netz b:nth-child(2) { height: 5px; } .nf-netz b:nth-child(3) { height: 7px; } .nf-netz b:nth-child(4) { height: 9px; }
.nf-akku { position: relative; display: block; width: 19px; height: 9px; border: 1.5px solid rgba(255,255,255,.95); border-radius: 3px; }
.nf-akku::before { content: ""; position: absolute; left: 1px; top: 1px; bottom: 1px; width: 70%; border-radius: 1px; background: #fff; }
.nf-akku::after { content: ""; position: absolute; right: -3.5px; top: 2px; width: 1.5px; height: 3px; border-radius: 0 1px 1px 0; background: rgba(255,255,255,.95); }
.nf-sperrzeit { position: absolute; top: 50px; left: 0; right: 0; text-align: center; color: #fff; font-family: var(--display); font-weight: 600; font-size: 3.2rem; line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.nf-mitteilung { position: absolute; z-index: 2; left: 8px; right: 8px; top: 132px; display: block;
  padding: 10px 12px 11px; border-radius: 18px; background: rgba(255,255,255,.95); color: var(--tinte); box-shadow: 0 12px 26px -12px rgba(0,0,0,.55);
  transform: none; opacity: 1; transition: transform .75s cubic-bezier(.16, 1, .3, 1), opacity .35s; }
.nf-mitteilung-kopf { display: flex; align-items: center; gap: 7px; }
.nf-app { width: 22px; height: 22px; border-radius: 6px; display: grid; place-items: center; flex: none; background: linear-gradient(135deg, #2b4bff, #7b5cff); }
.nf-app svg { width: 16px; height: 16px; }
.nf-app-name { display: block; font-size: .8125rem; font-weight: 600; line-height: 1.2; color: var(--text-3); }
.nf-mitteilung b { display: block; margin-top: 6px; font-size: .9375rem; line-height: 1.25; }
.nf-mitteilung .nf-text { display: block; font-size: .875rem; line-height: 1.3; color: var(--tinte); white-space: nowrap; }
.nf-knopf { position: absolute; bottom: 30px; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: rgba(10,16,51,.32); color: #fff; }
.nf-knopf svg { width: 17px; height: 17px; }
.nf-knopf-links { left: 22px; } .nf-knopf-rechts { right: 22px; }
.nf-home { position: absolute; bottom: 8px; left: 50%; width: 74px; height: 4px; margin-left: -37px; border-radius: 3px; background: rgba(255,255,255,.92); }
.nf-karte { margin: 0; }
.nf-karte-hinweis { margin: 0; padding: 13px 22px 15px; border-top: 1px solid var(--linie); background: var(--grund); font-size: 1rem; line-height: 1.5; color: var(--text-2); }
.nf-karte-hinweis a { color: var(--petrol); font-weight: 600; text-underline-offset: 3px; white-space: nowrap; }

@media (max-width: 1180px) {
  [data-seite="notfaelle"] .nf-hero .seiten-hero-raster { grid-template-columns: 1fr; gap: 44px; }
  .nf-szene { max-width: 760px; }
}
/* Am Handy nur die Karte mit der laufenden Uhr: die Attrappe würde dieselbe Meldung ein zweites Mal zeigen und den Hero um 380 px verlängern */
@media (max-width: 760px) {
  .nf-buehne { grid-template-columns: 1fr; gap: 0; }
  [data-seite="notfaelle"] .nf-handy { display: none; }
}
@media (max-width: 640px) {
  .nf-karte-hinweis { padding: 12px 18px 14px; }
  .nf-uhr-zeile { padding: 16px 18px 2px; }
  .nf-uhr { font-size: 2.1rem; }
  .nf-schritte { padding: 6px 18px 12px; }
  .nf-schritt { grid-template-columns: 22px minmax(0, 1fr); }
  .nf-schritt time { grid-column: 2; padding-top: 0; }
  .nf-schritt div { grid-column: 2; }
  .nf-schritt:not(:last-child)::before, .nf-schritt:not(:last-child)::after { top: 34px; }
}

/* ---------- Regeln: Tabelle und Beispiele ---------- */
[data-seite="notfaelle"] .nf-regeln td:first-child { white-space: nowrap; }
.nf-regel-raster { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 56px; align-items: start; margin-top: 56px; }
.nf-regel-raster h3 { margin-bottom: 4px; }
.nf-weiterweg { margin: 22px 0 0; color: var(--text-2); }
.nf-beispiele .app-karte-kopf b { color: var(--tinte); }
.nf-beispiel-liste { list-style: none; margin: 0; padding: 4px 0; }
.nf-beispiel-liste li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 16px; align-items: center; padding: 14px 22px; border-bottom: 1px solid var(--linie); }
.nf-zitat { font-size: 1rem; line-height: 1.45; color: var(--tinte); }
.nf-beispiel-liste .marke-stufe { white-space: nowrap; }
.nf-karte-fuss { margin: 0; padding: 14px 22px 18px; font-size: 1rem; line-height: 1.5; color: var(--text-2); background: var(--grund); }
@media (prefers-reduced-motion: no-preference) {
  .js .nf-beispiele.zeigen .nf-beispiel-liste .marke-stufe { opacity: 0; transform: translateX(10px); transition: opacity .5s, transform .6s cubic-bezier(.16, 1, .3, 1); }
  .js .nf-beispiele.zeigen.da .nf-beispiel-liste .marke-stufe { opacity: 1; transform: none; }
  .js .nf-beispiele.zeigen.da .nf-beispiel-liste li:nth-child(1) .marke-stufe { transition-delay: .45s; }
  .js .nf-beispiele.zeigen.da .nf-beispiel-liste li:nth-child(2) .marke-stufe { transition-delay: .7s; }
  .js .nf-beispiele.zeigen.da .nf-beispiel-liste li:nth-child(3) .marke-stufe { transition-delay: .95s; }
  .js .nf-beispiele.zeigen.da .nf-beispiel-liste li:nth-child(4) .marke-stufe { transition-delay: 1.2s; }
}
@media (max-width: 1020px) { .nf-regel-raster { grid-template-columns: 1fr; gap: 40px; margin-top: 44px; } }
@media (max-width: 760px) {
  [data-seite="notfaelle"] .nf-regeln td:first-child { white-space: normal; }
  .nf-beispiel-liste li { grid-template-columns: 1fr; padding: 14px 18px; }
  .nf-beispiel-liste .marke-stufe { justify-self: start; white-space: normal; }
  .nf-karte-fuss { padding: 14px 18px 16px; }
}

/* ---------- Spam-Ordner ---------- */
[data-seite="notfaelle"] .nf-spam { align-items: center; }
[data-seite="notfaelle"] .nf-mini { margin-top: 18px; font-size: 1rem; }
.nf-zeilen { margin-top: 0; }
.nf-zeilen > div { font-size: .9375rem; }
.nf-unter { display: block; font-size: .875rem; color: var(--text-3); }
.nf-fall { margin-top: 16px; padding: 16px 18px; border: 1px solid var(--linie-stark); border-radius: 16px; box-shadow: inset 3px 0 0 var(--notfall); }
.nf-fall-kopf { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.nf-fall-kopf b { font-family: var(--display); font-weight: 600; font-size: 1.08rem; }
.nf-fall-marke { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; padding: 3px 10px; border-radius: 999px; background: var(--heute-weich); color: var(--heute); font-size: .8125rem; font-weight: 600; }
.nf-fall-marke svg { width: 15px; height: 15px; }
.nf-fall .ui-hinweis { margin-top: 12px; font-size: 1rem; }
.nf-fall .ui-hinweis svg { color: var(--heute); }

/* ---------- Bereitschaft ---------- */
.nf-melde-raster { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 56px; align-items: start; }
[data-seite="notfaelle"] .nf-ablauf { margin-top: 0; }
[data-seite="notfaelle"] .nf-ablauf li { grid-template-columns: 172px 1fr; }
.nf-belegt { margin-top: 28px; }
.nf-belegt li span { color: var(--text-2); }
.nf-mail .app-karte-kopf b { color: var(--tinte); }
.nf-betreff { display: grid; grid-template-columns: 64px 1fr; gap: 10px; align-items: baseline; padding: 0 0 12px; margin-bottom: 12px; border-bottom: 1px solid var(--linie); }
.nf-betreff span { font-size: .875rem; color: var(--text-3); }
.nf-betreff b { font-weight: 600; }
.nf-mailtext { font-size: 1rem; }
.nf-sms { margin-top: 14px; padding: 14px 16px; border-radius: 14px; background: var(--grund); }
.nf-sms-label { display: inline-flex; align-items: center; gap: 8px; font-size: .875rem; font-weight: 600; color: var(--text-2); }
.nf-sms-label svg { width: 17px; height: 17px; color: var(--petrol); }
.nf-sms p { margin: 6px 0 0; font-size: 1rem; line-height: 1.5; color: var(--tinte); }
@media (max-width: 1020px) { .nf-melde-raster { grid-template-columns: 1fr; gap: 40px; } }
@media (max-width: 760px) { [data-seite="notfaelle"] .nf-ablauf li { grid-template-columns: 1fr; } }

/* ---------- Antwort an den Mieter: Hinweis wird einmal hinterlegt ---------- */
[data-seite="notfaelle"] .nf-antwort { align-items: center; }
@media (max-width: 1020px) { [data-seite="notfaelle"] .nf-antwort > .zeigen:not(.app-karte) { order: -1; } }
.nf-entwurf .app-karte-kopf b { color: var(--tinte); }
.nf-antworttext { font-size: 1rem; }
.nf-antworttext p { margin: 0 0 .85em; }
.nf-antworttext p:last-child { margin-bottom: 0; }
.nf-wichtig { position: relative; isolation: isolate; padding: 10px 12px; margin-inline: -12px !important; border-radius: 10px; color: #7a1d22; }
.nf-wichtig::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--notfall-weich); box-shadow: inset 3px 0 0 var(--notfall); transform-origin: 0 50%; }
.nf-signatur { color: var(--text-2); }
.nf-auto { font-size: 1rem; line-height: 1.5; color: var(--text-3); }
@media (prefers-reduced-motion: no-preference) {
  .js .nf-entwurf.zeigen .nf-wichtig::before { transform: scaleX(0); transition: transform .9s cubic-bezier(.16, 1, .3, 1) .5s; }
  .js .nf-entwurf.zeigen.da .nf-wichtig::before { transform: none; }
}

/* ---------- Havariedienst: Notfall-Weg nach Uhrzeit ---------- */
[data-seite="notfaelle"] .nf-status-zeile { margin: 16px 0 18px; font-size: 1rem; }
[data-seite="notfaelle"] .nf-hav h2 { margin-bottom: 0; }
[data-seite="notfaelle"] .nf-hav .lead { margin: 0; }
.nf-wege { margin-top: 24px; }
[data-seite="notfaelle"] .nf-wege div { background: var(--grund); }
.nf-wege div span { display: block; margin-top: 4px; }
[data-seite="notfaelle"] .nf-hav .liste-haken { margin-top: 24px; }
[data-seite="notfaelle"] .nf-hav .einf-foto figcaption { font-size: 1rem; }

/* ---------- Testprotokoll ---------- */
.nf-kopf-text { max-width: 500px; margin: 0; }
@media (min-width: 761px) { [data-seite="notfaelle"] .nf-protokoll td:first-child { width: 24%; } }
@media (max-width: 760px) {
  [data-seite="notfaelle"] .nf-protokoll tr { padding: 12px 14px; margin-bottom: 8px; }
  [data-seite="notfaelle"] .nf-protokoll td { padding: 2px 0; }
}
.nf-unter-tabelle { margin: 16px 0 0; font-size: 1rem; color: var(--text-2); }
.nf-unter-tabelle a { color: var(--petrol); font-weight: 600; text-underline-offset: 3px; }

/* ---------- Messwerte: Zahlen in Vollton ---------- */
@media (min-width: 1021px) {
  .nf-mess { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: 72px; align-items: start; }
  .nf-mess .kopf { grid-column: 1; grid-row: 1; margin-bottom: 0; }
  .nf-mess .nf-mess-text { grid-column: 1; grid-row: 2; }
  [data-seite="notfaelle"] .nf-mess .nf-belege { grid-column: 2; grid-row: 1 / span 2; grid-template-columns: 1fr; gap: 0; margin: 0; padding: 4px 0 0; border-top: 0; }
  [data-seite="notfaelle"] .nf-mess .beleg { padding: 22px 0; border-bottom: 1px solid rgba(255,255,255,.12); }
  [data-seite="notfaelle"] .nf-mess .beleg:first-child { padding-top: 0; }
  [data-seite="notfaelle"] .nf-mess .beleg:last-child { border-bottom: 0; }
}
[data-seite="notfaelle"] .nf-belege { margin-top: 8px; }
[data-seite="notfaelle"] .nf-belege .beleg strong { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: #fff; font-size: clamp(2rem, 1.6rem + 1.2vw, 2.6rem); white-space: nowrap; }
[data-seite="notfaelle"] .nf-belege .beleg span { max-width: 260px; color: #c3c9ea; }
.nf-mess-text { max-width: 780px; margin-top: 32px; }
.nf-mess-text p { margin: 0 0 14px; }
.nf-fussnote { font-size: 1rem; color: #aab3e0 !important; }
@media (max-width: 760px) {
  [data-seite="notfaelle"] .nf-belege { grid-template-columns: 1fr; gap: 18px; }
  [data-seite="notfaelle"] .nf-belege .beleg { display: block; }
  [data-seite="notfaelle"] .nf-belege .beleg strong { font-size: 2rem; margin-bottom: 4px; }
}

/* ---------- Grenzen ---------- */
.nf-grenzen { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; }
.nf-grenzen h3 { margin-bottom: 4px; }
@media (max-width: 1020px) { .nf-grenzen { grid-template-columns: 1fr; gap: 36px; } }

/* =====================================================================
   SELBST BAUEN ODER FERTIG
   ===================================================================== */

/* ---------- Bühne: Bausteine-Karte ---------- */
[data-seite="selbstbau"] .sb-hero .seiten-hero-raster { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
.sb-karte { margin: 0; }
.sb-karte .app-karte-kopf b { color: var(--tinte); }
.sb-gruppe { margin: 0 0 2px; font-size: 1rem; font-weight: 600; color: var(--text-3); }
.sb-gruppe + .ui-check { margin-top: 10px; }
.sb-check + .sb-gruppe { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--linie); }
.sb-check li { gap: 12px; }
.sb-check li span b { display: block; font-weight: 600; font-size: 1rem; line-height: 1.35; }
.sb-check li span small { display: block; margin-top: 1px; color: var(--text-3); line-height: 1.4; }
.sb-check svg { width: 20px; height: 20px; margin-top: 1px; }
.sb-check li.offen svg { color: var(--heute); }
@media (max-width: 1020px) { [data-seite="selbstbau"] .sb-hero .seiten-hero-raster { grid-template-columns: 1fr; } .sb-karte { max-width: 620px; } }

/* ---------- Outlook-Regeln: Regel-Karte ---------- */
.sb-regel .app-karte-kopf b { color: var(--tinte); }
.sb-wenn { display: grid; grid-template-columns: 52px 1fr; gap: 12px; align-items: baseline; padding: 13px 16px; margin-bottom: 8px; border-radius: 12px; background: var(--grund); }
.sb-wenn span { font-size: .875rem; font-weight: 600; color: var(--petrol-hover); }
.sb-wenn b { font-weight: 600; line-height: 1.4; overflow-wrap: anywhere; }
.sb-trifft { margin-top: 10px; background: var(--heute-weich); font-size: 1rem; }
.sb-trifft svg { color: var(--heute); }
.sb-karte-fuss { margin: 14px 0 0; font-size: 1rem; line-height: 1.5; color: var(--text-2); }
[data-seite="selbstbau"] .sb-zwei { align-items: center; }

/* ---------- Copilot ---------- */
.sb-unter { margin: 16px 0 0; font-size: 1rem; color: var(--text-2); }

/* ---------- Power Automate: Ablauf-Karte ---------- */
.sb-ablauf .app-karte-kopf b { color: var(--tinte); }
.sb-schritte { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; }
.sb-schritte li { position: relative; display: grid; gap: 2px; padding: 12px 16px; border: 1px solid var(--linie-stark); border-radius: 14px; background: #fff; }
.sb-schritte li:not(:last-child)::after { content: ""; position: absolute; left: 28px; bottom: -23px; width: 2px; height: 22px; background: var(--linie-stark); }
.sb-art { font-size: .8125rem; font-weight: 600; color: var(--petrol-hover); }
.sb-schritte b { font-weight: 600; line-height: 1.35; }
.sb-schritte small { font-size: 1rem; line-height: 1.4; color: var(--text-3); }
.sb-luecken { margin-top: 18px; padding: 14px 16px; border-radius: 14px; background: var(--heute-weich); color: var(--heute); }
.sb-luecken b { display: block; font-weight: 600; }
.sb-luecken ul { margin: 6px 0 0; padding-left: 18px; display: grid; gap: 2px; color: #5c3507; }
.sb-h3 { margin-top: 30px; }
.sb-grenzen svg { color: var(--heute) !important; }
.sb-grenzen li span { color: var(--text-2); }
@media (min-width: 1021px) { [data-seite="selbstbau"] .sb-pa { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: start; } }
@media (max-width: 1020px) { [data-seite="selbstbau"] .sb-pa > .zeigen:not(.app-karte) { order: -1; } }

/* ---------- Selbst lösen: Punkte mit „Bei …“-Zeile ---------- */
[data-seite="selbstbau"] .sb-punkte { margin-bottom: 0; gap: 30px 40px; }
.sb-punkte .sb-bei { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--linie-stark); color: var(--petrol-hover) !important; font-weight: 500; }
.sb-punkte .sb-bei a { color: var(--petrol); font-weight: 600; text-underline-offset: 3px; }

/* ---------- Wann der Selbstbau reicht: Pflegeliste als UI-Karte (statt Foto, das schon auf Start- und Mail-Seite steht) ---------- */
.sb-passt svg { color: var(--petrol) !important; }
[data-seite="selbstbau"] .sb-reicht { align-items: center; }
[data-seite="selbstbau"] .sb-reicht .liste-haken { margin-top: 18px; }
.sb-pflege { margin: 0; }
.sb-pflege .app-karte-kopf b { color: var(--tinte); }
.sb-pflege-spalten { display: grid; grid-template-columns: minmax(0, 1fr) 150px; gap: 16px; padding: 12px 22px 10px 68px; border-bottom: 1px solid var(--linie); background: var(--grund); font-size: .8125rem; font-weight: 600; color: var(--text-3); }
.sb-pflege-liste { list-style: none; margin: 0; padding: 0; }
.sb-pflege-liste li { display: grid; grid-template-columns: 34px minmax(0, 1fr) 150px; gap: 12px 16px; align-items: center; padding: 16px 22px; border-bottom: 1px solid var(--linie); }
.sb-pflege-ico { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--heute-weich); color: var(--heute); }
.sb-pflege-ico svg { width: 19px; height: 19px; }
.sb-pflege-text b { display: block; font-weight: 600; font-size: 1rem; line-height: 1.35; color: var(--tinte); }
.sb-pflege-text small { display: block; margin-top: 2px; font-size: 1rem; line-height: 1.45; color: var(--text-2); }
.sb-wer { justify-self: start; padding: 6px 10px; border-radius: 10px; background: var(--heute-weich); color: #7a4507; font-size: .875rem; font-weight: 600; line-height: 1.3; }
.sb-nb { white-space: nowrap; }
.sb-wer-label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.sb-pflege-fuss { margin: 0; padding: 14px 22px 18px; background: var(--grund); font-size: 1rem; line-height: 1.5; color: var(--text-2); }
@media (max-width: 1020px) {
  [data-seite="selbstbau"] .sb-reicht > .sb-reicht-text { order: -1; }
  .sb-pflege { max-width: 620px; }
}
@media (max-width: 560px) {
  .sb-pflege-spalten { display: none; }
  .sb-pflege-liste li { grid-template-columns: 34px minmax(0, 1fr); padding: 14px 18px; align-items: start; }
  .sb-wer { grid-column: 2; }
  .sb-wer-label { position: static; width: auto; height: auto; margin: 0 4px 0 0; overflow: visible; clip: auto; white-space: normal; }
  .sb-pflege-fuss { padding: 14px 18px 16px; }
}

/* ---------- Vergleich: eigene Spalte hervorgehoben ---------- */
[data-seite="selbstbau"] .sb-vergleich th.wir { background: var(--petrol); color: #fff; }
[data-seite="selbstbau"] .sb-vergleich td.wir { background: #f2f4ff; font-weight: 600; color: var(--tinte); }
@media (min-width: 761px) { [data-seite="selbstbau"] .sb-vergleich td:first-child { width: 19%; } }
@media (max-width: 760px) {
  [data-seite="selbstbau"] .sb-vergleich td.wir { margin-top: 6px; padding: 8px 12px; border-radius: 10px; box-shadow: inset 3px 0 0 var(--petrol); }
}

/* ---------- Copilot und DSGVO ---------- */
.sb-dsgvo { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.sb-dsgvo-spalte { padding: 28px 30px; border-radius: 22px; background: var(--grund); border: 1px solid var(--linie); }
.sb-dsgvo-spalte.wir { background: #f2f4ff; border-color: var(--petrol-hell-2); box-shadow: inset 0 3px 0 var(--petrol); }
.sb-dsgvo-spalte h3 { margin-bottom: 2px; }
.sb-dsgvo-spalte .liste-haken { margin-top: 16px; }
.sb-schluss { max-width: 860px; margin: 28px 0 0; }
.sb-schluss p { margin: 0; font-size: 1.1rem; line-height: 1.55; color: var(--tinte); }
.sb-schluss p.sb-schluss-grenze { margin-top: 12px; font-size: 1rem; color: var(--text-2); }
@media (max-width: 1020px) { .sb-dsgvo { grid-template-columns: 1fr; } }
@media (max-width: 760px) { .sb-dsgvo-spalte { padding: 22px 20px; } }

/* ---------- Fragen und Quellen ---------- */
.sb-quellen { max-width: 860px; margin: 28px auto 0; }
.sb-quellen a { color: var(--petrol); font-weight: 600; overflow-wrap: anywhere; }
/* Havariedienst: Foto quadratisch und mitlaufend statt stark vergrößert auf die Höhe der Textspalte */
@media (min-width: 1021px) {
  [data-seite="notfaelle"] .nf-hav .einf-foto { aspect-ratio: 1 / 1; min-height: 0; align-self: start; position: sticky; top: calc(var(--nav-h) + 40px); }
}

/* ===== 40-telefon-preise.css ===== */
/* ===== 40: Seiten /ki-telefonassistent/ (data-seite="telefon") und /preise/ (data-seite="preise").
   Nur seitenbezogene Regeln. Bewegung nur über transform und opacity, einmal, mit prefers-reduced-motion. ===== */

/* ---------- Gemeinsam ---------- */
/* Endlos-Schleife des Handlungs-Bands: ein Durchgang */
/* Rot nur für Notfälle: Nein-Listen neutral */
:is([data-seite="telefon"], [data-seite="preise"]) .liste-haken.nein svg { color: var(--text-2); }
:is([data-seite="telefon"], [data-seite="preise"]) .lead.tel-unter,
:is([data-seite="telefon"], [data-seite="preise"]) .lead.pr-unter { margin-top: 16px; }
:is([data-seite="telefon"], [data-seite="preise"]) .kopf-zeile .tel-kopf-text,
:is([data-seite="telefon"], [data-seite="preise"]) .kopf-zeile .pr-kopf-text { max-width: 500px; margin: 0; }
:is([data-seite="telefon"], [data-seite="preise"]) figure { margin: 0; }
:is([data-seite="telefon"], [data-seite="preise"]) .app-karte-kopf { flex-wrap: wrap; row-gap: 6px; }
:is([data-seite="telefon"], [data-seite="preise"]) .app-karte-kopf :is(.tel-kopf-ico, .pr-kopf) { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
:is([data-seite="telefon"], [data-seite="preise"]) .app-karte-kopf :is(.tel-kopf-ico, .pr-kopf) svg { width: 18px; height: 18px; color: var(--petrol); }
:is([data-seite="telefon"], [data-seite="preise"]) .app-karte-kopf .marke-stufe svg { width: 14px; height: 14px; color: currentColor; }
:is([data-seite="telefon"], [data-seite="preise"]) .quellen a, :is([data-seite="telefon"], [data-seite="preise"]) .zusatz a,
:is([data-seite="telefon"], [data-seite="preise"]) .pr-stand a, [data-seite="telefon"] .kk-link { color: var(--petrol); font-weight: 600; }
:is([data-seite="telefon"], [data-seite="preise"]) .klein { font-size: 1rem; }

/* ---------- Telefon: Hero mit Gesprächskarte ---------- */
/* „KI-Telefonassistent“ bleibt am Stück; dafür ist die Textspalte am Desktop etwas breiter (wie auf der Mail-Seite) */
:is([data-seite="telefon"], [data-seite="preise"]) .seiten-hero .am-stueck { white-space: nowrap; }
/* Handy: Schrift so, dass „Der KI-Telefonassistent“ in eine Zeile passt (kein Umbruch nach „KI-“) */
@media (max-width: 760px) { [data-seite="telefon"] .seiten-hero h1 { font-size: min(clamp(2.2rem, 1.4rem + 2.5vw, 3.5rem), calc((100vw - 48px) / 10.9)); } }
@media (min-width: 1021px) {
  [data-seite="telefon"] .seiten-hero-raster { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
  [data-seite="telefon"] .seiten-hero h1 { font-size: min(3.5rem, 4.3vw); }
}
[data-seite="telefon"] .tel-gespraech .app-karte-innen { padding: 20px 22px 22px; }
[data-seite="telefon"] .tel-gespraech .sb { font-size: .9375rem; }
.tel-start { display: inline-flex; align-items: center; gap: 7px; padding: 4px 10px; border-radius: 999px; background: #fff3d6; color: #6b4a00; font-weight: 600; font-size: .8125rem; white-space: nowrap; }
.tel-start i { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); }
@media (max-width: 480px), (min-width: 1021px) and (max-width: 1180px) { .tel-nr { display: none; } }
.tel-notiz { display: grid; grid-template-columns: 38px 1fr; gap: 12px; align-items: center; margin-top: 4px; padding: 12px 14px; border-radius: 14px; background: var(--ok-weich); color: var(--tinte); font-size: .9375rem; line-height: 1.4; }
.tel-notiz svg { width: 22px; height: 22px; color: var(--ok); justify-self: center; }
.tel-notiz b { display: block; font-weight: 600; }
@media (prefers-reduced-motion: no-preference) {
  .js .tel-gespraech .sprecher, .js .tel-gespraech .tel-notiz { opacity: 0; transform: translateY(10px); }
  .js .geladen .tel-gespraech .sprecher, .js .geladen .tel-gespraech .tel-notiz { animation: auf .55s cubic-bezier(.16,1,.3,1) forwards; animation-delay: calc(.9s + var(--i, 0) * .42s); }
}

/* ---------- Telefon: Ablauf mit Foto ---------- */
[data-seite="telefon"] .tel-ablauf-raster { align-items: start; }
[data-seite="telefon"] .tel-ablauf-raster .ablauf { margin-top: 28px; }
/* Querformat bleibt Querformat: Person, Telefon und Laptop sichtbar; am Desktop bleibt das Foto neben der Liste stehen */
[data-seite="telefon"] .tel-foto { align-self: start; aspect-ratio: 4 / 3; min-height: 0; }
[data-seite="telefon"] .tel-foto img { object-position: 35% 40%; }
@media (min-width: 1021px) { [data-seite="telefon"] .tel-foto { position: sticky; top: calc(var(--nav-h) + 48px); } }
/* Handy: Bildunterschrift unter dem Foto statt darüber, damit Person und Laptop frei bleiben */
@media (max-width: 760px) {
  [data-seite="telefon"] .tel-foto { aspect-ratio: auto; background: var(--grund); }
  [data-seite="telefon"] .tel-foto img { position: relative; inset: auto; display: block; height: auto; aspect-ratio: 4 / 3; }
  [data-seite="telefon"] .tel-foto figcaption { position: relative; left: auto; right: auto; bottom: auto; border-radius: 0; background: var(--grund); padding: 14px 16px 16px; font-size: 1rem; }
}

/* ---------- Telefon: Übergabe im dunklen Abschnitt (lesbar, K7) ---------- */
[data-seite="telefon"] .dunkel .liste-haken svg { color: var(--mint); }
[data-seite="telefon"] .dunkel .liste-haken li { color: #e3e7ff; }
[data-seite="telefon"] .dunkel .app-karte .marke-stufe.heute { color: var(--heute); }
[data-seite="telefon"] .dunkel .app-karte .marke-stufe.info { color: var(--petrol-hover); }
[data-seite="telefon"] .dunkel .app-karte .ui-raster > div > span { color: var(--text-3); }
.tel-klingelt { display: grid; grid-template-columns: 44px 1fr; gap: 14px; align-items: center; margin-top: 16px; padding: 14px 16px; border-radius: 14px; background: var(--petrol-hell); color: var(--tinte); font-size: .9375rem; line-height: 1.4; }
.tel-klingelt b { display: block; font-weight: 600; }
.tel-klingelt-ico { width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; background: var(--petrol); color: #fff; }
.tel-klingelt-ico svg { width: 22px; height: 22px; }
@media (prefers-reduced-motion: no-preference) {
  .js .tel-uebergabe.zeigen .tel-klingelt { opacity: 0; transform: translateY(10px); transition: opacity .5s, transform .6s cubic-bezier(.16,1,.3,1); transition-delay: 1.1s; }
  .js .tel-uebergabe.zeigen.da .tel-klingelt { opacity: 1; transform: none; }
  .js .tel-uebergabe.zeigen.da .tel-klingelt-ico svg { animation: klingeln .9s ease-in-out 1.6s 2 both; }
}
@keyframes klingeln { 0%, 100% { transform: rotate(0); } 15% { transform: rotate(-14deg); } 30% { transform: rotate(12deg); } 45% { transform: rotate(-10deg); } 60% { transform: rotate(6deg); } 75% { transform: rotate(-3deg); } }
.tel-live { margin-top: 64px; }
.tel-live h3 { margin-bottom: 18px; }
[data-seite="telefon"] .tel-live .tabelle-wrap { color: var(--tinte); }
[data-seite="telefon"] .tel-live .tabelle { min-width: 0; }
@media (max-width: 760px) {
  [data-seite="telefon"] .tel-live .tabelle tr { color: var(--tinte); }
  .tel-live { margin-top: 44px; }
}

/* ---------- Telefon: Vergleich ---------- */
[data-seite="telefon"] .tel-vergleich-wrap { margin-top: 4px; }
[data-seite="telefon"] .tel-vergleich { font-size: 1rem; }
[data-seite="telefon"] .tel-vergleich th.wir { background: var(--petrol); color: #fff; }
[data-seite="telefon"] .tel-vergleich td.wir { background: #f2f4ff; font-weight: 500; }
[data-seite="telefon"] .tel-vergleich .ja { display: inline-flex; align-items: flex-start; gap: 8px; }
[data-seite="telefon"] .tel-vergleich .ja svg { width: 20px; height: 20px; color: var(--ok); margin-top: 2px; }
[data-seite="telefon"] .tel-fuss-notiz { margin-top: 14px; }
@media (prefers-reduced-motion: no-preference) {
  .js [data-seite="telefon"] .tel-vergleich-wrap.zeigen .ja svg { transform: scale(0); opacity: 0; transition: transform .45s cubic-bezier(.34,1.56,.64,1), opacity .3s; }
  .js [data-seite="telefon"] .tel-vergleich-wrap.zeigen.da .ja svg { transform: none; opacity: 1; }
  .js [data-seite="telefon"] .tel-vergleich-wrap.da tr:nth-child(1) .ja svg { transition-delay: .35s; }
  .js [data-seite="telefon"] .tel-vergleich-wrap.da tr:nth-child(2) .ja svg { transition-delay: .5s; }
  .js [data-seite="telefon"] .tel-vergleich-wrap.da tr:nth-child(3) .ja svg { transition-delay: .65s; }
  .js [data-seite="telefon"] .tel-vergleich-wrap.da tr:nth-child(4) .ja svg { transition-delay: .8s; }
  .js [data-seite="telefon"] .tel-vergleich-wrap.da tr:nth-child(5) .ja svg { transition-delay: .95s; }
  .js [data-seite="telefon"] .tel-vergleich-wrap.da tr:nth-child(6) .ja svg { transition-delay: 1.1s; }
}
@media (max-width: 760px) {
  [data-seite="telefon"] .tel-vergleich tr { padding: 14px 14px 12px; }
  [data-seite="telefon"] .tel-vergleich td:not(:first-child) { display: grid; grid-template-columns: minmax(0, 38%) minmax(0, 1fr); gap: 12px; align-items: baseline; padding: 6px 0; }
  [data-seite="telefon"] .tel-vergleich td[data-label]:not(:first-child)::before { display: block; }
  [data-seite="telefon"] .tel-vergleich td.wir { margin-top: 4px; padding: 8px 10px; border-radius: 12px; }
  [data-seite="telefon"] .tel-vergleich td.wir::before { color: var(--petrol-hover); }
}

/* ---------- Telefon: Notfall-Taste ---------- */
[data-seite="telefon"] .tel-notfall-raster { align-items: center; }
.tel-grenze { margin-top: 22px; padding-left: 14px; border-left: 3px solid var(--notfall); color: var(--text-2); }
.tel-zitat { margin: 0 0 6px; font-size: 1rem; line-height: 1.55; color: var(--tinte); }
.tel-tasten { display: grid; grid-template-columns: repeat(3, 56px); gap: 12px 20px; justify-content: center; margin: 22px auto 22px; }
.tel-tasten span { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: var(--grund); border: 1px solid var(--linie); font-family: var(--display); font-weight: 600; font-size: 1.3rem; color: var(--text-2); position: relative; }
.tel-tasten .eins { background: var(--notfall); border-color: var(--notfall); color: #fff; box-shadow: 0 10px 22px -10px rgba(214,54,59,.8); }
.tel-tasten .eins::after { content: ""; position: absolute; inset: -1px; border-radius: 50%; border: 2px solid var(--notfall); opacity: 0; pointer-events: none; }
.tel-weg { display: grid; grid-template-columns: 44px 1fr; gap: 14px; align-items: center; padding: 14px 16px; border-radius: 14px; background: var(--notfall-weich); color: var(--tinte); font-size: .9375rem; line-height: 1.4; }
.tel-weg b { display: block; font-weight: 600; }
.tel-weg-ico { width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; background: var(--notfall); color: #fff; }
.tel-weg-ico svg { width: 22px; height: 22px; }
@media (prefers-reduced-motion: no-preference) {
  .js .tel-taste.zeigen.da .eins { animation: druecken .55s cubic-bezier(.3,.7,.3,1) .7s both; }
  .js .tel-taste.zeigen.da .eins::after { animation: ring 1s ease-out .85s both; }
  .js .tel-taste.zeigen .tel-weg { opacity: 0; transform: translateY(10px); transition: opacity .5s, transform .6s cubic-bezier(.16,1,.3,1); transition-delay: 1.25s; }
  .js .tel-taste.zeigen.da .tel-weg { opacity: 1; transform: none; }
}
@keyframes druecken { 0%, 100% { transform: scale(1); } 35% { transform: scale(.86); } 70% { transform: scale(1.06); } }
@keyframes ring { 0% { opacity: .7; transform: scale(1); } 100% { opacity: 0; transform: scale(1.7); } }

/* ---------- Telefon: KI-Hinweis und Ansage ---------- */
[data-seite="telefon"] .tel-ki-raster { align-items: start; }
.tel-segmente { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.tel-segmente li { font-size: 1rem; line-height: 1.55; color: var(--tinte); padding-bottom: 12px; border-bottom: 1px solid var(--linie); }
.tel-segmente li:last-child { border-bottom: 0; padding-bottom: 0; }
.tel-seg { display: block; font-size: .8125rem; font-weight: 600; color: var(--petrol-hover); margin-bottom: 2px; }
.tel-seg.rot { color: var(--notfall); }
.tel-segmente .tel-seg-vorher { color: var(--text-2); }
.tel-ja { display: grid; gap: 8px; margin-top: 16px; }
.tel-ja > div { display: grid; grid-template-columns: 64px 1fr; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 12px; background: var(--grund); font-size: .9375rem; line-height: 1.4; color: var(--text-2); }
.tel-ja .marke-stufe { justify-content: center; }
.tel-ja .marke-stufe svg { width: 14px; height: 14px; }
@media (prefers-reduced-motion: no-preference) {
  .js .tel-ansage.zeigen .tel-ja > div { opacity: 0; transform: translateY(8px); transition: opacity .5s, transform .6s cubic-bezier(.16,1,.3,1); }
  .js .tel-ansage.zeigen.da .tel-ja > div { opacity: 1; transform: none; transition-delay: .9s; }
  .js .tel-ansage.zeigen.da .tel-ja > div + div { transition-delay: 1.15s; }
}

/* ---------- Telefon: Information der Mieter ---------- */
[data-seite="telefon"] .tel-mieter-raster { align-items: center; }
.tel-stufen { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 18px; }
.tel-stufen li { display: grid; grid-template-columns: 52px 1fr; gap: 16px; align-items: start; }
.tel-stufe-ico { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; background: #e7ebff; color: var(--petrol); }
.tel-stufe-ico svg { width: 26px; height: 26px; }
.tel-stufen b { display: block; font-weight: 600; font-size: 1.05rem; padding-top: 2px; }
.tel-stufen li > div > span { display: block; color: var(--text-2); font-size: 1rem; line-height: 1.5; }
.tel-unterlagen { margin: 26px 0 14px; color: var(--text-2); }
.tel-vorlage { position: relative; padding: 0 0 56px 0; }
/* Beispieladresse: „hv-muster.example/“ bleibt zusammen, umgebrochen wird höchstens nach dem „/“, nie nach „hv-“ */
/* Im Text rutscht die Adresse als Ganzes in die nächste Zeile und bricht nur, wenn sie allein nicht passt, nach dem „/“ */
[data-seite="telefon"] .url { display: inline-block; max-width: 100%; }
[data-seite="telefon"] .url-teil { white-space: nowrap; }
/* Adresszeile im Browser-Bild: unter 360 px ohne rechten Platzhalter, damit die Adresse in eine Zeile passt */
@media (max-width: 359px) { [data-seite="telefon"] .tel-leer { display: none; } }
.tel-browser { background: #fff; border: 1px solid var(--linie); border-radius: 22px; box-shadow: 0 40px 90px -36px rgba(20,30,90,.4); padding: 12px; }
.tel-browser .fenster-leiste { padding: 4px 6px 12px; }
.tel-leer { width: 42px; }
.tel-browser-innen { background: var(--grund); border-radius: 14px; padding: 22px 22px 24px; }
.tel-browser-innen .ui-titel { margin-bottom: 10px; }
.tel-gliederung { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.tel-gliederung li { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: #fff; font-size: 1rem; color: var(--tinte); }
.tel-gliederung svg { width: 18px; height: 18px; color: var(--ok); }
.tel-sms { position: absolute; right: -14px; bottom: 0; width: min(330px, 86%); display: grid; grid-template-columns: 40px 1fr; gap: 12px; align-items: start; padding: 14px 16px; border-radius: 18px 18px 4px 18px; background: #fff; border: 1px solid var(--linie); box-shadow: 0 24px 50px -20px rgba(20,30,90,.45); font-size: .9375rem; line-height: 1.45; color: var(--text-2); }
.tel-sms b { display: block; color: var(--tinte); font-weight: 600; }
.tel-sms-ico { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: #e7ebff; color: var(--petrol); }
.tel-sms-ico svg { width: 21px; height: 21px; }
@media (prefers-reduced-motion: no-preference) {
  .js .tel-vorlage.zeigen .tel-sms { opacity: 0; transform: translateY(18px) scale(.97); transition: opacity .5s, transform .8s cubic-bezier(.16,1,.3,1); transition-delay: .8s; }
  .js .tel-vorlage.zeigen.da .tel-sms { opacity: 1; transform: none; }
}
@media (max-width: 1020px) { .tel-sms { right: 10px; } }
@media (max-width: 560px) {
  .tel-vorlage { padding-bottom: 0; }
  .tel-sms { position: relative; right: auto; width: auto; margin: -18px 10px 0; }
  .tel-browser-innen { padding: 18px 16px 20px; }
}

/* ---------- Telefon: Was er nie tun wird ---------- */
.tel-nie { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 40px; }
.tel-nie li { display: grid; grid-template-columns: 36px 1fr; gap: 14px; align-items: start; padding: 18px 0; border-top: 1px solid var(--linie); }
.tel-nie li > svg { width: 36px; height: 36px; padding: 9px; border-radius: 50%; background: var(--grund); color: var(--text-2); }
.tel-nie b { display: block; font-weight: 600; font-size: 1.05rem; line-height: 1.35; margin-bottom: 3px; }
.tel-nie span { display: block; color: var(--text-2); font-size: 1rem; line-height: 1.5; }
@media (max-width: 760px) { .tel-nie { grid-template-columns: 1fr; gap: 0; } }

/* ---------- Telefon: Kosten ---------- */
.tel-kosten-raster { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 56px; align-items: center; }
.tel-kosten { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.tel-kosten-karte { display: flex; flex-direction: column; gap: 8px; padding: 26px; border-radius: 22px; background: #fff; border: 1px solid var(--linie); }
.tel-kosten-karte.bald { background: transparent; border: 2px dashed var(--linie-stark); }
.tel-kosten-kopf { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; color: var(--text-2); font-size: .9375rem; }
.tel-kosten-kopf svg { width: 22px; height: 22px; color: var(--petrol); }
.tel-kosten-karte > b { font-family: var(--display); font-weight: 600; font-size: clamp(1.6rem, 1.4rem + .6vw, 2rem); letter-spacing: -0.02em; line-height: 1.15; }
.tel-kosten-karte > b small { font-family: var(--text); font-size: 1rem; font-weight: 500; color: var(--text-3); letter-spacing: 0; }
.tel-kosten-karte > span:not(.tel-kosten-kopf) { color: var(--text-2); font-size: 1rem; line-height: 1.5; }
.tel-kosten-karte .pfeil-link { margin-top: auto; padding-top: 8px; }
@media (max-width: 1020px) { .tel-kosten-raster { grid-template-columns: 1fr; gap: 28px; } .tel-kosten { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
@media (max-width: 560px) { .tel-kosten { grid-template-columns: 1fr; } }

/* ---------- Telefon: Handy ---------- */
@media (max-width: 760px) {
  .tel-tasten { grid-template-columns: repeat(3, 52px); gap: 10px 18px; }
  .tel-tasten span { width: 52px; height: 52px; }
}

/* ---------- Preise: Hero mit Preis nach Größe ---------- */
@media (min-width: 1021px) { [data-seite="preise"] .seiten-hero-raster { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } }
.pr-h1-preis { white-space: nowrap; }
/* Handy: Schrift so, dass „ab 299 € im Monat“ auch bei 320 px in die Spalte passt (ab etwa 340 px unverändert) */
@media (max-width: 760px) { [data-seite="preise"] .seiten-hero h1 { font-size: min(clamp(2.2rem, 1.4rem + 2.5vw, 3.5rem), calc((100vw - 48px) / 8.3)); } }
[data-seite="preise"] .pr-rechner .app-karte-innen { padding: 22px 24px 24px; display: grid; gap: 20px; }
.pr-regler label { margin-bottom: 0; }
.pr-regler label span { font-size: 1rem; }
.pr-regler output { font-size: 1.6rem; }
.pr-rechner:not(.pr-aktiv) .pr-regler { display: none; }
.pr-skala { position: relative; height: 18px; margin-top: 10px; font-size: .8125rem; color: var(--text-3); font-weight: 500; }
.pr-skala span { position: absolute; top: 0; left: calc(var(--x) * 100%); transform: translateX(calc(var(--x) * -100%)); white-space: nowrap; }
.pr-werte { margin: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.pr-werte > div { padding: 11px 16px; border-radius: 14px; background: var(--grund); display: flex; justify-content: space-between; align-items: center; gap: 14px; }
.pr-werte dt { font-size: .9375rem; font-weight: 500; color: var(--text-2); line-height: 1.3; }
.pr-werte dd { margin: 0; font-family: var(--display); font-weight: 600; font-size: 1.4rem; letter-spacing: -0.02em; line-height: 1.1; color: var(--tinte); font-variant-numeric: tabular-nums; transition: opacity .3s; }
.pr-werte dd { white-space: nowrap; }
.pr-rechner:not(.pr-aktiv) .pr-je-einheit { display: none; }
.pr-gross { display: grid; gap: 14px; padding: 16px 16px 18px; border-radius: 14px; background: var(--petrol-hell); color: var(--tinte); }
.pr-gross p { margin: 0; font-size: 1rem; line-height: 1.45; }
.pr-gross p b { font-weight: 600; }
[data-seite="preise"] .pr-rechner .pr-gross .btn-primaer { justify-self: start; background: var(--petrol); color: #fff; box-shadow: 0 8px 20px -8px rgba(43,75,255,.65); }
[data-seite="preise"] .pr-rechner .pr-gross .btn-primaer:hover { background: var(--petrol-hover); }
[data-seite="preise"] .pr-rechner .pr-gross .btn-primaer:focus-visible { outline: 3px solid var(--petrol); outline-offset: 3px; }
@media (max-width: 440px) {
  .pr-werte dt { font-size: .875rem; }
  .pr-werte dd { font-size: 1.25rem; }
  .pr-gross { padding: 14px; }
  [data-seite="preise"] .pr-rechner .pr-gross .btn-primaer { justify-self: stretch; padding: 0 16px; }
}

/* ---------- Preise: Karten ---------- */
[data-seite="preise"] .preis-karte h3 { font-size: 1.6rem; }
[data-seite="preise"] .preis-karte.dunkel h3 { color: #fff; }
[data-seite="preise"] .preis-karte .betrag { font-size: clamp(2.4rem, 1.9rem + 1.6vw, 3.25rem); margin: 16px 0 6px; }
[data-seite="preise"] .preis-karte.dunkel .betrag { background: none; color: #fff; -webkit-text-fill-color: currentColor; }
.pr-karte-unter { margin: 6px 0 0; color: var(--text-2); }
.preis-karte.dunkel .pr-karte-unter { color: #c9cff0; }
.pr-bedingung { margin: 0; font-size: 1rem; color: var(--text-3); }
.preis-karte.dunkel .pr-bedingung { color: #b9c0e8; }
[data-seite="preise"] .preis-karte .liste-haken { margin: 22px 0 0; }
[data-seite="preise"] .preis-karte.dunkel .liste-haken li { color: #e6e9ff; }
.pr-karten-link { align-self: flex-start; margin-top: 24px; }
.pr-mehr { margin: 24px 0 0; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.14); font-weight: 500; }
.preis-karte.dunkel .pr-mehr { color: #fff; }
[data-seite="preise"] .zusatz span { font-size: 1rem; }
.pr-stand { margin-top: 18px; max-width: 900px; }

/* ---------- Preise: Ab wann es sich lohnt ---------- */
[data-seite="preise"] .pr-lohnt-raster { align-items: start; }
.pr-annahmen { margin-top: 22px; }
.pr-annahmen summary { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--linie-stark); background: #fff; font-size: 1rem; color: var(--tinte); list-style: none; }
.pr-annahmen summary::-webkit-details-marker { display: none; }
.pr-annahmen summary::after { content: "+"; font-weight: 500; color: var(--petrol); font-size: 1.2rem; line-height: 1; }
.pr-annahmen[open] summary::after { content: "–"; }
.pr-annahmen summary:hover { border-color: var(--tinte); }
.pr-annahmen ul { font-size: 1rem; }
.pr-schwelle { background: var(--grund); border: 1px solid var(--linie); border-radius: 26px; padding: 28px; display: grid; gap: 24px; }
.pr-schwelle-kopf { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; }
.pr-schwelle-titel { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; font-size: 1.05rem; }
.pr-schwelle-titel svg { width: 22px; height: 22px; color: var(--petrol); }
.pr-umschalter { display: none; padding: 4px; border-radius: 999px; background: #fff; border: 1px solid var(--linie); gap: 4px; }
.js .pr-umschalter { display: inline-flex; }
.pr-umschalter button { min-height: 44px; padding: 0 18px; border: 0; border-radius: 999px; background: transparent; font-weight: 600; font-size: 1rem; color: var(--text-2); cursor: pointer; transition: background-color .2s, color .2s; }
.pr-umschalter button[aria-pressed="true"] { background: var(--petrol); color: #fff; }
.pr-umschalter button:focus-visible { outline: 3px solid var(--petrol); outline-offset: 2px; }
.pr-balken { display: grid; gap: 18px; }
.pr-zeile { display: grid; grid-template-columns: 150px minmax(0, 1fr) 140px; gap: 18px; align-items: center; padding: 16px 18px; border-radius: 18px; background: #fff; border: 1px solid var(--linie); }
.pr-zeile-text b { display: block; font-weight: 600; }
.pr-zeile-text span { display: block; font-size: .875rem; color: var(--text-3); }
.pr-spur { height: 14px; border-radius: 8px; background: #e7ebff; overflow: hidden; }
.pr-spur i { display: block; height: 100%; width: 100%; border-radius: 8px; background: var(--petrol); transform-origin: 0 50%; transform: scaleX(var(--s, 0)); transition: transform .8s cubic-bezier(.16,1,.3,1); }
.pr-zeile + .pr-zeile .pr-spur i { background: var(--violett); }
.pr-wert { text-align: right; font-weight: 600; color: var(--text-2); }
.pr-wert b { font-family: var(--display); font-size: 2rem; letter-spacing: -0.03em; color: var(--tinte); font-variant-numeric: tabular-nums; }
.pr-wert span { display: block; font-size: .8125rem; font-weight: 500; color: var(--text-3); }
.pr-kosten { margin: 0; padding-top: 16px; border-top: 1px solid var(--linie); font-size: 1rem; color: var(--text-2); }
@media (prefers-reduced-motion: no-preference) {
  .js .pr-schwelle.zeigen:not(.da) .pr-spur i { transform: scaleX(0); }
  .js .pr-schwelle.zeigen.da .pr-zeile + .pr-zeile .pr-spur i { transition-delay: .15s; }
}
@media (max-width: 1100px) and (min-width: 1021px) { .pr-zeile { grid-template-columns: 120px minmax(0, 1fr) 120px; } }
@media (max-width: 560px) {
  .pr-schwelle { padding: 20px 16px; }
  .pr-zeile { grid-template-columns: minmax(0, 1fr) auto; gap: 10px 14px; padding: 14px; }
  .pr-spur { grid-column: 1 / -1; grid-row: 2; }
  .pr-wert b { font-size: 1.7rem; }
}

/* ---------- Preise: Passt / passt eher nicht ---------- */
.pr-passt { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.pr-passt-karte { padding: 32px; border-radius: 24px; background: #fff; border: 1px solid var(--linie); }
.pr-passt-karte.nein { background: transparent; border-style: dashed; border-color: var(--linie-stark); }
.pr-passt-karte h3 { display: flex; align-items: center; gap: 12px; font-size: 1.35rem; }
.pr-passt-karte h3 svg { width: 30px; height: 30px; color: var(--ok); }
.pr-passt-karte.nein h3 svg { color: var(--text-2); }
[data-seite="preise"] .pr-passt-karte .liste-haken { margin-top: 20px; }
[data-seite="preise"] .pr-passt-karte .liste-haken svg { color: var(--ok); }
[data-seite="preise"] .pr-passt-karte .liste-haken.nein svg { color: var(--text-2); }
@media (max-width: 860px) { .pr-passt { grid-template-columns: 1fr; } .pr-passt-karte { padding: 24px 22px; } }

/* ---------- Preise: Laufzeit als Zeitstrahl ---------- */
.pr-zeitstrahl { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; position: relative; }
.pr-zeitstrahl::before, .pr-zeitstrahl::after { content: ""; position: absolute; left: 8px; right: calc(25% - 26px); top: 7px; height: 2px; border-radius: 2px; background: var(--linie); }
.pr-zeitstrahl::after { background: var(--petrol); transform-origin: 0 50%; }
.pr-zeitstrahl li { position: relative; padding-top: 34px; display: flex; flex-direction: column; gap: 4px; }
.pr-zeitstrahl li::before { content: ""; position: absolute; top: 0; left: 0; width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 3px solid var(--petrol); z-index: 1; }
.pr-zs-wann { font-family: var(--display); font-weight: 600; color: var(--petrol); font-size: .9375rem; }
.pr-zeitstrahl b { font-weight: 600; font-size: 1.1rem; }
.pr-zeitstrahl li > span:last-child { color: var(--text-2); font-size: 1rem; line-height: 1.45; }
@media (prefers-reduced-motion: no-preference) {
  .js .pr-zeitstrahl.zeigen::after { transform: scaleX(0); transition: transform 1.4s cubic-bezier(.16,1,.3,1) .3s; }
  .js .pr-zeitstrahl.zeigen.da::after { transform: scaleX(1); }
}
.pr-ende { margin-top: 44px; border-radius: 24px; background: var(--grund); border: 1px solid var(--linie); padding: 8px 28px; }
.pr-ende > div { display: grid; grid-template-columns: 52px 1fr; gap: 18px; align-items: start; padding: 20px 0; }
.pr-ende > div + div { border-top: 1px solid var(--linie); }
.pr-ende p { margin: 0; color: var(--text-2); }
.pr-ende p b { color: var(--tinte); }
.pr-ende-ico { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; background: #fff; color: var(--petrol); box-shadow: 0 1px 2px rgba(20,30,90,.06), 0 8px 18px -10px rgba(43,75,255,.35); }
.pr-ende-ico svg { width: 26px; height: 26px; }
@media (max-width: 860px) {
  .pr-zeitstrahl { grid-template-columns: 1fr; gap: 18px; padding-left: 4px; }
  .pr-zeitstrahl::before, .pr-zeitstrahl::after { left: 11px; right: auto; top: 8px; bottom: 8px; width: 2px; height: auto; }
  .pr-zeitstrahl::after { transform-origin: 50% 0; }
  .js .pr-zeitstrahl.zeigen::after { transform: scaleY(0); }
  .js .pr-zeitstrahl.zeigen.da::after { transform: scaleY(1); }
  .pr-zeitstrahl li { padding: 0 0 0 36px; }
  .pr-zeitstrahl li::before { top: 3px; }
  .pr-ende { padding: 4px 18px; margin-top: 32px; }
  .pr-ende > div { grid-template-columns: 44px 1fr; gap: 14px; }
  .pr-ende-ico { width: 44px; height: 44px; border-radius: 13px; }
}
@media (max-width: 860px) and (prefers-reduced-motion: reduce) { .pr-zeitstrahl::after { transform: none; } }

/* ---------- Preise: Fragen ---------- */
[data-seite="preise"] .fragen .antwort p { margin: 0; }
[data-seite="preise"] .fragen .antwort p + p { margin-top: 12px; }
@media (max-width: 860px) {
  .pr-zeitstrahl li:last-child::after { content: ""; position: absolute; left: 5px; top: 22px; bottom: -12px; width: 14px; background: var(--flaeche); z-index: 1; }
}
/* Kontrast: rote Schrift auf hellrotem Grund dunkler (WCAG 4,5 : 1) */
/* Kontrast im Handlungs-Band: leichte Abdunklung über dem drehenden Verlauf, Text weiß (mindestens 4,5 : 1 auch über Violett) */
/* Rhythmus: drei Abschnitte mit Karte rechts hintereinander vermeiden, die Ansage-Karte steht am Desktop links */
@media (min-width: 1021px) { [data-seite="telefon"] .tel-ki-raster > .tel-ansage { order: -1; } }
/* Mehr als 600 Einheiten: Link statt zweitem Hauptknopf; Tippflächen 44 px */
.pr-gross .pfeil-link { justify-self: start; }
[data-seite="preise"] .zusatz a { display: inline-flex; align-items: center; min-height: 44px; }

/* ===== 50-sicherheit-test.css ===== */
/* ===== 50 · Prüfseiten „Datenschutz und Sicherheit“ und „So haben wir getestet“ (08.11.2026)
   Nur seitenbezogene Regeln: [data-seite="sicherheit"] und [data-seite="test"].
   Bewegung nur über transform und opacity, je Abschnitt höchstens ein Detail, nichts läuft endlos. ===== */

/* ---------- Gemeinsam ---------- */
:is([data-seite="sicherheit"], [data-seite="test"]) .marke-stufe.neutral { background: var(--flaeche-2); color: var(--text-2); }
[data-seite="sicherheit"] .seiten-hero h1 { font-size: clamp(2.2rem, .9rem + 3.3vw, 3.25rem); }
:is([data-seite="sicherheit"], [data-seite="test"]) .seiten-hero-raster { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
:is([data-seite="sicherheit"], [data-seite="test"]) .kopf h3, :is([data-seite="sicherheit"], [data-seite="test"]) .abschnitt h3 { letter-spacing: -0.015em; }
:is([data-seite="sicherheit"], [data-seite="test"]) .liste-haken b { font-weight: 600; }
:is([data-seite="sicherheit"], [data-seite="test"]) .cta-band .lead { margin: 0; }
/* Handlungsband in Ultramarin: der Verlauf dreht sich höchstens einmal, keine Endlos-Schleife */
/* Text im Band steht nie direkt auf dem hellen Violett: leichte Abdunklung darüber, Einleitung in Weiß (wie auf Telefon- und Preisseite) */
[data-seite="sicherheit"] #fragen-datenschutz .lead a { color: var(--petrol); font-weight: 600; }
/* H1: „KI-Assistenten“ bricht am Desktop nicht nach dem Bindestrich um */
@media (min-width: 761px) { :is([data-seite="sicherheit"], [data-seite="test"]) .am-stueck { white-space: nowrap; } }
:is([data-seite="sicherheit"], [data-seite="test"]) .ohne-umbruch { white-space: nowrap; }
/* Sicherheit: Bis 1180 px steht die Datenfluss-Karte unter dem Text, damit die lange H1 in zwei Zeilen passt */
@media (max-width: 1180px) {
  [data-seite="sicherheit"] .seiten-hero-raster { grid-template-columns: 1fr; gap: 44px; }
  [data-seite="sicherheit"] .seiten-hero h1 { max-width: 900px; }
  [data-seite="sicherheit"] .seiten-hero .lead { max-width: 680px; }
  [data-seite="sicherheit"] .datenfluss { max-width: 660px; }
}
/* Erklärende Notizen in Lesegröße (die gemeinsame Klasse .mini bleibt für reine Metazeilen) */
[data-seite="sicherheit"] :is(.dl-nicht, .ul-wer), [data-seite="test"] :is(.tb-legende, .lv-notiz, .me-notiz) { font-size: 1rem; }
:is([data-seite="sicherheit"], [data-seite="test"]) .tabelle td small { display: block; margin-top: 2px; font-size: 1rem; font-weight: 400; color: var(--text-3); line-height: 1.45; }
:is([data-seite="sicherheit"], [data-seite="test"]) .kopf-zeile .lead { max-width: 470px; margin: 0; }
:is([data-seite="sicherheit"], [data-seite="test"]) .kopf-zeile h2 { max-width: 660px; }
.strich-liste { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 8px; color: var(--text-2); }
.strich-liste li { display: grid; grid-template-columns: 22px 1fr; gap: 8px; align-items: start; }
.strich-liste li::before { content: ""; width: 12px; height: 2px; margin: 11px 0 0 2px; border-radius: 2px; background: var(--text-3); }

/* ================= Datenschutz und Sicherheit ================= */

/* ---------- Hero: Datenfluss als UI-Karte ---------- */
[data-seite="sicherheit"] .datenfluss { margin: 0; }
.datenfluss .app-karte-kopf b { font-size: .95rem; }
.df-weg { list-style: none; margin: 0; padding: 22px 24px 6px; display: grid; gap: 16px; }
.df-schritt { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; column-gap: 14px; align-items: start; }
.df-ico { position: relative; z-index: 1; width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; background: #e7ebff; color: var(--petrol); }
.df-ico svg { width: 24px; height: 24px; }
.df-text { min-width: 0; padding-top: 1px; }
.df-text b { display: block; font-weight: 600; font-size: 1rem; line-height: 1.3; color: var(--tinte); }
.df-text > span { display: block; margin-top: 3px; font-size: 1rem; line-height: 1.45; color: var(--text-2); }
.df-text > .df-token { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
/* Die Adresse rutscht als Ganzes in die nächste Zeile; nur wenn sie allein nicht passt (unter 355 px), bricht sie nach „@“ */
.df-adresse { display: inline-block; max-width: 100%; white-space: normal; }
.df-adresse > span { white-space: nowrap; }
.df-ort { margin-top: 11px; padding: 3px 10px; border-radius: 999px; background: var(--grund); border: 1px solid var(--linie); font-size: .8125rem; font-weight: 600; color: var(--text-2); white-space: nowrap; }
.df-eu .df-ort { background: var(--petrol); border-color: var(--petrol); color: #fff; }
/* Die Linie: jeder Schritt zeichnet sein Stück bis zum nächsten Symbol */
.df-schritt::before { content: ""; position: absolute; left: 21px; top: 22px; width: 2px; height: calc(100% + 16px); background: var(--petrol); transform-origin: 50% 0; }
.df-eu::before { background: repeating-linear-gradient(180deg, #9fadf0 0 6px, transparent 6px 11px); }
.df-zurueck::before { content: none; }
/* Abzweig: Mitteilung über den Push-Dienst, gestrichelt */
.df-zweig { margin-left: 58px; }
.df-zweig::before { left: -37px; }
.df-zweig::after { content: ""; position: absolute; left: -36px; top: 21px; width: 36px; border-top: 2px dashed #9fadf0; }
.df-zweig .df-ico { background: #fff; border: 1.5px dashed #9fadf0; }
.df-zweig .df-text b { font-size: .94rem; }
.df-zweig .df-ort { background: #fff; border-style: dashed; }
/* EU-Knoten: Ring, wenn die Linie ankommt */
.df-eu .df-ico::after { content: ""; position: absolute; inset: -6px; border-radius: 17px; border: 2px solid rgba(43,75,255,.45); }
.df-fuss { display: flex; gap: 10px; align-items: center; margin: 10px 24px 22px; padding: 12px 14px; border-radius: 12px; background: var(--grund); font-size: 1rem; line-height: 1.45; color: var(--text-2); }
.df-fuss svg { width: 20px; height: 20px; color: var(--petrol); flex: none; }

@media (prefers-reduced-motion: no-preference) {
  .js .datenfluss .df-schritt::before { transform: scaleY(0); }
  .js .geladen .datenfluss .df-schritt::before { animation: df-linie .34s linear forwards; }
  .js .geladen .datenfluss .df-schritt:nth-child(1)::before { animation-delay: 1.05s; }
  .js .geladen .datenfluss .df-schritt:nth-child(2)::before { animation-delay: 1.39s; }
  .js .geladen .datenfluss .df-schritt:nth-child(3)::before { animation-delay: 1.73s; }
  .js .geladen .datenfluss .df-schritt:nth-child(4)::before { animation-delay: 2.07s; }
  .js .geladen .datenfluss .df-eu::before { animation-duration: .45s; animation-delay: 2.9s; }
  .js .datenfluss .df-zweig::after { opacity: 0; }
  .js .geladen .datenfluss .df-zweig::after { animation: df-auf .4s ease forwards 1.55s; }
  .js .datenfluss .df-eu .df-ico::after { opacity: 0; transform: scale(.7); }
  .js .geladen .datenfluss .df-eu .df-ico::after { animation: df-ring .7s cubic-bezier(.2,.8,.2,1) forwards 2.41s; }
  .js .datenfluss .df-eu .df-ort { transform: scale(.9); opacity: .55; }
  .js .geladen .datenfluss .df-eu .df-ort { animation: df-ort .5s cubic-bezier(.34,1.56,.64,1) forwards 2.45s; }
}
@keyframes df-linie { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes df-auf { from { opacity: 0; } to { opacity: 1; } }
@keyframes df-ring { from { opacity: 0; transform: scale(.7); } to { opacity: 1; transform: none; } }
@keyframes df-ort { to { opacity: 1; transform: none; } }

/* ---------- Pseudonymisierung: Vorher und Nachher ---------- */
.ps-vergleich { display: grid; grid-template-columns: minmax(0, 1fr) 120px minmax(0, 1fr); gap: 16px; align-items: stretch; }
.ps-karte { display: flex; flex-direction: column; gap: 14px; padding: 18px; border-radius: 22px; background: var(--grund); border: 1px solid var(--linie); }
.ps-nachher { background: #f2f4ff; border-color: #d9dffc; }
.ps-kopf { display: grid; grid-template-columns: 40px 1fr; gap: 12px; align-items: center; }
.ps-ico { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: #e7ebff; color: var(--petrol); }
.ps-ico svg { width: 22px; height: 22px; }
.ps-nachher .ps-ico { background: #fff; }
.ps-kopf b { display: block; font-weight: 600; line-height: 1.3; }
.ps-kopf span { display: block; font-size: .9375rem; color: var(--text-3); }
.ps-karte .ui-mail { flex: 1; background: #fff; position: relative; z-index: 0; font-size: 1rem; }
.ps-karte .ui-mail p { margin: 0 0 .8em; }
.ps-karte .ui-mail p:last-child { margin: 0; }
.ps-karte .ui-mail-kopf { font-size: .875rem; }
.ps-klar, .ui-mail-kopf .ps-klar { position: relative; white-space: nowrap; color: var(--tinte); }
.ps-klar::after { content: ""; position: absolute; z-index: -1; left: -3px; right: -3px; bottom: .02em; height: .5em; border-radius: 3px; background: #ffe08a; transform-origin: 0 50%; }
.ps-pfeil { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center; font-size: .9375rem; font-weight: 600; line-height: 1.35; color: var(--petrol-hover); }
.ps-pfeil svg { width: 30px; height: 30px; color: var(--petrol); }
.ps-quelle { margin-top: 12px; }
.ps-raster { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 48px; margin-top: 48px; align-items: start; }
.ps-raster h3 { font-size: 1.25rem; margin-bottom: 16px; }
.ps-raster .liste-haken { margin-top: 0; }
.ps-arten { list-style: none; margin: 0; padding: 4px 18px; display: grid; grid-template-columns: 1fr; border-radius: 18px; background: var(--grund); border: 1px solid var(--linie); }
.ps-arten li { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--linie); font-size: 1rem; line-height: 1.35; }
.ps-arten li:last-child { border-bottom: 0; }
.ps-arten .platzhalter { flex: none; }
.ps-grenze { display: grid; grid-template-columns: 44px 1fr; gap: 16px; align-items: start; margin-top: 40px; padding: 22px 24px; border-radius: 20px; background: var(--grund); border: 1px solid var(--linie); }
.ps-grenze p { margin: 0; color: var(--text-2); }
.ps-grenze b { color: var(--tinte); }
.ps-grenze a { color: var(--petrol); font-weight: 600; }
.ps-grenze-ico { width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; background: #e7ebff; color: var(--petrol); }
.ps-grenze-ico svg { width: 24px; height: 24px; }
@media (prefers-reduced-motion: no-preference) {
  .js .ps-vergleich .ps-klar::after { transform: scaleX(0); transition: transform .55s cubic-bezier(.2,.8,.2,1); }
  .js .ps-vergleich.da .ps-klar::after { transform: none; }
  .js .ps-vergleich.da .ps-klar:nth-of-type(2)::after { transition-delay: .12s; }
  .js .ps-vergleich.da p .ps-klar:nth-of-type(1)::after { transition-delay: .3s; }
  .js .ps-vergleich.da p .ps-klar:nth-of-type(2)::after { transition-delay: .42s; }
  .js .ps-vergleich.da p .ps-klar:nth-of-type(3)::after { transition-delay: .54s; }
  .js .ps-vergleich .ps-nachher .platzhalter { display: inline-block; opacity: 0; transform: translateY(6px) scale(.94); transition: opacity .4s, transform .55s cubic-bezier(.34,1.56,.64,1); }
  .js .ps-vergleich.da .ps-nachher .platzhalter { opacity: 1; transform: none; }
  .js .ps-vergleich.da .ps-nachher .platzhalter:nth-of-type(1) { transition-delay: .95s; }
  .js .ps-vergleich.da .ps-nachher .platzhalter:nth-of-type(2) { transition-delay: 1.1s; }
  .js .ps-vergleich.da .ps-nachher .platzhalter:nth-of-type(3) { transition-delay: 1.25s; }
}

/* ---------- Dienstleister ---------- */
.dl-tabelle { min-width: 920px; }
.dl-tabelle td:nth-child(1) { width: 17%; }
.dl-tabelle td:nth-child(2) { width: 14%; }
.dl-tabelle td:nth-child(5) { width: 28%; }
.dl-mistral { display: grid; grid-template-columns: 28px 1fr; gap: 12px; align-items: start; margin: 20px 0 0; padding: 16px 20px; border-radius: 16px; background: #fff; border: 1px solid var(--linie); color: var(--text-2); }
.dl-mistral svg { width: 26px; height: 26px; color: var(--petrol); }
.dl-mistral b { color: var(--tinte); }
[data-seite="sicherheit"] .zusatz b { font-size: 1.1rem; margin-bottom: 6px; }
.dl-offen li { font-size: 1rem; line-height: 1.45; }
.dl-nicht { margin-top: 16px; max-width: 860px; }

/* ---------- Zugriff ---------- */
.zg-freigabe { margin-top: auto; display: grid; gap: 10px; padding: 16px 18px; border-radius: 16px; background: var(--grund); border: 1px solid var(--linie); }
.zg-kopf { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.zg-kopf b { font-weight: 600; font-size: .95rem; }
.zg-zeile { display: flex; justify-content: space-between; gap: 14px; font-size: .9rem; }
.zg-zeile span { color: var(--text-3); }
.zg-zeile b { font-weight: 600; text-align: right; }
.zg-balken { height: 8px; border-radius: 8px; background: var(--flaeche-2); overflow: hidden; }
.zg-balken i { display: block; height: 100%; width: 100%; border-radius: inherit; background: var(--petrol); transform-origin: 0 50%; transform: scaleX(.714); }
.zg-fuss { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: .8125rem; color: var(--text-3); }
@media (prefers-reduced-motion: no-preference) {
  .js .zeigen .zg-balken i { transform: scaleX(1); transition: transform 1.6s cubic-bezier(.2,.8,.2,1) .6s; }
  .js .zeigen.da .zg-balken i { transform: scaleX(.714); }
}

/* ---------- Löschfristen: Zeitachse eines Falls ---------- */
.lf-achse { margin: 0 0 36px; padding: 24px; border-radius: 24px; background: #fff; border: 1px solid var(--linie); }
.lf-balken { display: grid; grid-template-columns: 60fr 40fr; gap: 6px; }
.lf-teil { position: relative; isolation: isolate; min-height: 72px; padding: 14px 18px; border-radius: 14px; overflow: hidden; }
.lf-teil::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; transform-origin: 0 50%; }
.lf-teil b { display: block; font-weight: 600; font-size: 1rem; line-height: 1.3; }
.lf-teil span { display: block; margin-top: 2px; font-size: .875rem; line-height: 1.4; }
.lf-fall { color: #fff; }
.lf-fall::before { background: var(--petrol); }
.lf-fall span { color: #e3e7ff; }
.lf-kopie { color: var(--tinte); }
.lf-kopie::before { background: #e7ebff; }
.lf-kopie span { color: var(--text-2); }
.lf-tag38 { position: absolute; top: 10px; bottom: 10px; left: 84.4%; width: 2px; border-radius: 2px; background: rgba(255,255,255,.75); }
.lf-skala { position: relative; height: 22px; margin-top: 10px; font-size: .8125rem; font-weight: 600; color: var(--text-2); font-variant-numeric: tabular-nums; }
.lf-skala span { position: absolute; top: 0; white-space: nowrap; }
.lf-skala span:nth-child(1) { left: 0; }
.lf-skala span:nth-child(2) { left: 50.6%; transform: translateX(-50%); }
.lf-skala span:nth-child(3) { left: 60%; transform: translateX(-30%); }
.lf-skala span:nth-child(4) { right: 0; }
.lf-legende { list-style: none; margin: 18px 0 0; padding: 16px 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 28px; border-top: 1px solid var(--linie); font-size: 1rem; line-height: 1.45; color: var(--text-2); }
.lf-legende li { display: grid; grid-template-columns: 14px 1fr; gap: 10px; align-items: start; }
.lf-legende b { color: var(--tinte); font-weight: 600; }
.lf-punkt { width: 10px; height: 10px; margin-top: 7px; border-radius: 50%; background: var(--petrol); }
.lf-punkt-hell { background: #b9c3f5; }
.lf-tabelle td:first-child { width: 38%; }
@media (prefers-reduced-motion: no-preference) {
  .js .lf-achse .lf-teil::before { transform: scaleX(0); transition: transform .9s cubic-bezier(.2,.8,.2,1) .2s; }
  .js .lf-achse .lf-kopie::before { transition-delay: 1s; transition-duration: .7s; }
  .js .lf-achse.da .lf-teil::before { transform: none; }
  .js .lf-achse .lf-teil > b, .js .lf-achse .lf-teil > span, .js .lf-achse .lf-tag38 { opacity: 0; transition: opacity .5s .9s; }
  .js .lf-achse .lf-kopie > b, .js .lf-achse .lf-kopie > span { transition-delay: 1.55s; }
  .js .lf-achse.da .lf-teil > b, .js .lf-achse.da .lf-teil > span, .js .lf-achse.da .lf-tag38 { opacity: 1; }
}

/* ---------- Betrieb und Datenpanne (dunkel) ---------- */
.bt-raster { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 64px; align-items: center; }
.bt-raster h2 { margin-bottom: 16px; }
[data-seite="sicherheit"] .bt-leiste li { grid-template-columns: 116px 1fr; }
[data-seite="sicherheit"] .zeitleiste .zl-wann { font-family: var(--text); font-weight: 600; font-size: .9rem; color: var(--mint); padding-top: 2px; font-variant-numeric: tabular-nums; }
[data-seite="sicherheit"] .bt-leiste b { margin-bottom: 2px; }
.bt-zeilen { margin-top: 0 !important; }
.bt-zeilen > div { font-size: .9rem; }
.bt-karte .ui-hinweis { margin-top: 14px; }

/* ---------- Offen gesagt ---------- */
.of-raster { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: stretch; }
.of-spalte { padding: 30px 32px; border-radius: 24px; background: #fff; border: 1px solid var(--linie); box-shadow: 0 1px 2px rgba(20,30,90,.04); }
.of-offen { background: var(--grund); }
.of-spalte h3 { font-size: 1.3rem; }
.of-spalte .liste-haken a { color: var(--petrol); font-weight: 600; }
.of-liste { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 14px; }
.of-liste li { display: grid; grid-template-columns: 24px 1fr; gap: 12px; align-items: start; color: var(--text-2); }
.of-liste li::before { content: ""; width: 14px; height: 2px; margin: 12px 0 0 4px; border-radius: 2px; background: var(--text-3); }
.of-liste b { color: var(--tinte); }

/* ---------- Telefon ab 2027 ---------- */
.tf-karte { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 24px; padding: 34px 36px; border-radius: 26px; background: #fff; border: 1px solid var(--linie); }
.tf-karte > .ico { width: 56px; height: 56px; border-radius: 18px; display: grid; place-items: center; background: #e7ebff; color: var(--petrol); }
.tf-karte > .ico svg { width: 30px; height: 30px; }
.tf-karte h2 { max-width: 760px; margin-bottom: 14px; }
.tf-karte .status-zeile { margin-bottom: 8px; }
.tf-liste { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 32px; margin-bottom: 22px; }

/* ---------- Unterlagen ---------- */
.ul-raster { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 56px; align-items: start; }
@media (min-width: 1021px) { .ul-text { position: sticky; top: 120px; } }
.ul-text h2 { margin-bottom: 16px; }
.ul-text .lead { margin-bottom: 16px; }
.ul-text > p:not(.lead) { color: var(--text-2); }
.ul-text a:not(.btn) { color: var(--petrol); font-weight: 600; }
.ul-text .btn { margin-top: 8px; }
.ul-wer { margin-top: 18px; }
.ul-mappe { background: #fff; border-radius: 24px; overflow: hidden; border: 1px solid #dde3fb; box-shadow: 0 40px 90px -40px rgba(20,30,90,.4); }
.ul-kopf { display: grid; grid-template-columns: 44px 1fr; gap: 14px; align-items: center; padding: 18px 22px; border-bottom: 1px solid var(--linie); }
.ul-kopf-ico { width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; background: #e7ebff; color: var(--petrol); }
.ul-kopf-ico svg { width: 24px; height: 24px; }
.ul-kopf b { display: block; font-family: var(--display); font-weight: 600; font-size: 1.1rem; }
.ul-kopf span { display: block; font-size: .875rem; color: var(--text-3); }
.ul-liste { list-style: none; margin: 0; padding: 4px 22px; }
.ul-liste li { display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: start; padding: 11px 0; border-bottom: 1px solid var(--linie); }
.ul-liste li:last-child { border-bottom: 0; }
.ul-liste li > svg { width: 20px; height: 20px; margin-top: 2px; color: var(--petrol); }
.ul-liste b { display: block; font-weight: 600; font-size: 1rem; line-height: 1.35; }
.ul-liste span { display: block; font-size: 1rem; line-height: 1.45; color: var(--text-2); }
.ul-fuss { display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: center; padding: 14px 22px; background: var(--grund); font-size: 1rem; color: var(--text-2); }
.ul-fuss svg { width: 20px; height: 20px; color: var(--petrol); }
@media (prefers-reduced-motion: no-preference) {
  .js .ul-mappe .ul-liste li { opacity: 0; transform: translateY(8px); transition: opacity .45s, transform .55s cubic-bezier(.16,1,.3,1); }
  .js .ul-mappe.da .ul-liste li { opacity: 1; transform: none; }
  .js .ul-mappe.da .ul-liste li:nth-child(2) { transition-delay: .05s; } .js .ul-mappe.da .ul-liste li:nth-child(3) { transition-delay: .1s; }
  .js .ul-mappe.da .ul-liste li:nth-child(4) { transition-delay: .15s; } .js .ul-mappe.da .ul-liste li:nth-child(5) { transition-delay: .2s; }
  .js .ul-mappe.da .ul-liste li:nth-child(6) { transition-delay: .25s; } .js .ul-mappe.da .ul-liste li:nth-child(7) { transition-delay: .3s; }
  .js .ul-mappe.da .ul-liste li:nth-child(8) { transition-delay: .35s; } .js .ul-mappe.da .ul-liste li:nth-child(9) { transition-delay: .4s; }
  .js .ul-mappe.da .ul-liste li:nth-child(10) { transition-delay: .45s; } .js .ul-mappe.da .ul-liste li:nth-child(11) { transition-delay: .5s; }
  .js .ul-mappe.da .ul-liste li:nth-child(12) { transition-delay: .55s; }
}

/* ================= So haben wir getestet ================= */

/* ---------- Hero: Messprotokoll ---------- */
.tb-protokoll .app-karte-innen { padding: 18px 22px 22px; }
.tb-mess { width: 100%; border-collapse: collapse; font-size: .9rem; }
.tb-mess th, .tb-mess td { padding: 10px 8px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--linie); }
.tb-mess thead th { font-size: .8125rem; font-weight: 600; color: var(--text-3); padding-top: 0; }
.tb-mess thead th small { display: block; font-weight: 500; }
.tb-mess tbody th { font-weight: 500; color: var(--text-2); width: 36%; }
.tb-mess td b { display: block; font-family: var(--display); font-weight: 600; font-size: 1.05rem; line-height: 1.25; color: var(--tinte); font-variant-numeric: tabular-nums; }
.tb-mess td small { display: block; font-size: .8125rem; color: var(--text-3); }
.tb-mess tr:last-child > * { border-bottom: 0; }
.tb-mess td:last-child b { color: var(--petrol-hover); }
.tb-balken { display: block; height: 6px; margin-top: 7px; border-radius: 6px; background: var(--flaeche-2); overflow: hidden; }
.tb-balken i { display: block; height: 100%; width: calc(var(--w) * 100%); border-radius: inherit; background: #9aa3bd; transform-origin: 0 50%; }
.tb-mess td:last-child .tb-balken i { background: var(--petrol); }
.tb-protokoll .ui-hinweis { margin-top: 14px; }
@media (prefers-reduced-motion: no-preference) {
  .js .tb-protokoll .tb-balken i { transform: scaleX(0); }
  .js .geladen .tb-protokoll .tb-balken i { animation: tb-balken .9s cubic-bezier(.2,.8,.2,1) forwards 1.1s; }
  .js .geladen .tb-protokoll td:last-child .tb-balken i { animation-delay: 1.6s; }
}
@keyframes tb-balken { to { transform: none; } }

/* ---------- Methode ---------- */
.me-kette { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.me-kette li { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: var(--grund); border: 1px solid var(--linie); font-size: 1rem; font-weight: 600; color: var(--text-2); }
.me-kette li:not(:last-child)::after { content: "→"; margin-left: 4px; color: var(--petrol); font-weight: 600; }
.me-kette li:nth-child(3), .me-kette li:nth-child(4) { background: #eef1ff; border-color: #d9dffc; color: var(--petrol-tief); }
.me-notiz { margin: 0; }
[data-seite="test"] .funktion .ui-zeilen { margin-top: auto; }

/* ---------- KI-Probelauf ---------- */
.pl-raster { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: stretch; }
.pl-spalte { padding: 28px 30px; border-radius: 24px; background: #fff; border: 1px solid var(--linie); }
.pl-danach { background: #f7f8ff; border-color: #dde3fb; }
.pl-label { display: inline-block; margin-bottom: 10px; font-size: .875rem; font-weight: 600; color: var(--text-3); }
.pl-spalte h3 { font-size: 1.3rem; margin-bottom: 16px; }
.pl-spalte .liste-haken { margin-top: 0; }
.pl-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.pl-liste li { position: relative; padding-left: 22px; color: var(--text-2); }
.pl-liste li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 8px; height: 8px; border-radius: 50%; background: #9aa3bd; }
.pl-liste b { color: var(--tinte); }
.pl-liste li:last-child { font-size: 1rem; color: var(--text-3); }
.pl-einordnung { display: grid; grid-template-columns: 44px 1fr; gap: 16px; align-items: start; margin-top: 20px; padding: 22px 26px; border-radius: 22px; background: var(--petrol-tief); color: #dfe3ff; }
.pl-einordnung p { margin: 0; color: #dfe3ff; }
.pl-einordnung b { color: #fff; }
.pl-einordnung-ico { width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; background: #e7ebff; color: var(--petrol); }
.pl-einordnung-ico svg { width: 24px; height: 24px; }
.pl-auto { margin-top: 20px; padding: 26px 30px; border-radius: 24px; background: #fff; border: 1px solid var(--linie); }
.pl-auto-kopf { display: grid; grid-template-columns: 48px 1fr; gap: 16px; align-items: center; margin-bottom: 18px; }
.pl-auto-kopf .ico { width: 48px; height: 48px; border-radius: 15px; display: grid; place-items: center; background: #e7ebff; color: var(--petrol); }
.pl-auto-kopf .ico svg { width: 26px; height: 26px; }
.pl-auto-kopf h3 { font-size: 1.2rem; margin-bottom: 2px; }
.pl-auto-kopf span { color: var(--text-3); font-size: 1rem; }
.pl-auto-raster { display: grid; grid-template-columns: 1fr 1fr 1.3fr; gap: 12px; }
.pl-auto-raster div { padding: 16px 18px; border-radius: 16px; background: var(--grund); }
.pl-auto-raster b { display: block; font-weight: 600; margin-bottom: 4px; }
.pl-auto-raster span { display: block; color: var(--text-2); font-size: 1rem; line-height: 1.5; }

/* ---------- Tabelle der 25 Testmails ---------- */
.tb-tabelle { min-width: 860px; }
.tb-tabelle td:nth-child(1) { width: 34%; }
.tb-tabelle td:nth-child(1) b { display: block; font-weight: 600; }
.tb-tabelle td:nth-child(2) { font-weight: 500; }
.tb-tabelle td:nth-child(4) { color: var(--text-3); }
.tb-tabelle td.tb-ja { color: var(--tinte); font-weight: 600; }
.tb-tabelle .marke-stufe { white-space: nowrap; }
.tb-tabelle .tb-gruppe th { padding: 12px 18px; font-size: .9375rem; font-weight: 600; color: var(--petrol-tief); background: #eef1ff; border-bottom: 1px solid #dde3fb; }
.tb-tabelle tbody + tbody .tb-gruppe th { border-top: 1px solid var(--linie); }
.tb-ok { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--ok); white-space: nowrap; }
.tb-ok svg { width: 16px; height: 16px; }
.tb-legende { margin-top: 14px; max-width: 900px; }

/* ---------- Aufklapper details.tb-mehr (alle Seiten): am Handy zugeklappt, mit data-tb-mehr="zu" überall (50-datenfluss.js); ohne Skript offen ---------- */
.tb-mehr > summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 14px; padding: 14px 14px 14px 22px; border-radius: 20px; background: #fff; border: 1px solid var(--linie); cursor: pointer; transition: border-color .2s; }
.tb-mehr > summary::-webkit-details-marker { display: none; }
.tb-mehr > summary:hover { border-color: var(--linie-stark); }
[data-seite="test"] #testmails .tb-mehr > summary { background: var(--grund); }
.tb-mehr-text { display: grid; gap: 2px; min-width: 0; }
.tb-mehr-text b { font-family: var(--display); font-weight: 600; font-size: 1.1rem; line-height: 1.3; color: var(--tinte); }
.tb-mehr-text > span { font-size: 1rem; font-weight: 600; color: var(--petrol); }
.tb-mehr[open] .tb-mehr-auf, .tb-mehr:not([open]) .tb-mehr-zu { display: none; }
.tb-mehr-knopf { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 44px; height: 44px; border-radius: 999px; border: 1px solid var(--linie-stark); background: #fff; color: var(--tinte); transition: border-color .2s; }
.tb-mehr > summary:hover .tb-mehr-knopf { border-color: var(--tinte); }
.tb-mehr-knopf svg { width: 18px; height: 18px; transition: transform .25s; }
.tb-mehr[open] .tb-mehr-knopf svg { transform: rotate(180deg); }
.tb-mehr:not([open]) > summary { margin-bottom: 0; }

/* ---------- Live-Messung: Streuung der 9 Werte ---------- */
.lv-streuung { margin: 0 0 40px; padding: 30px 32px 22px; border-radius: 24px; background: #fff; border: 1px solid var(--linie); }
.lv-flaeche { position: relative; height: 96px; margin: 0 10px; border-bottom: 2px solid var(--linie-stark); }
.lv-flaeche, .lv-skala { --max: 30; }
.lv-punkt { position: absolute; left: calc(var(--x) / var(--max) * 100%); bottom: calc(10px + var(--y, 0) * 24px); width: 18px; height: 18px; margin-left: -9px; border-radius: 50%; background: var(--petrol); box-shadow: 0 0 0 4px rgba(43,75,255,.14); }
.lv-median { position: absolute; left: calc(var(--x) / var(--max) * 100%); top: 0; bottom: 0; width: 2px; margin-left: -1px; background: var(--violett); }
.lv-median em { position: absolute; top: -2px; left: 8px; font-style: normal; font-size: .8125rem; font-weight: 600; color: #4b32c8; white-space: nowrap; }
.lv-ziel { position: absolute; left: calc(var(--x) / var(--max) * 100%); top: 0; bottom: 0; width: 0; border-left: 2px dashed #9aa3bd; }
.lv-ziel em { position: absolute; top: -2px; right: 8px; font-style: normal; font-size: .8125rem; font-weight: 600; color: var(--text-2); white-space: nowrap; }
.lv-skala { position: relative; height: 22px; margin: 10px 10px 0; font-size: .8125rem; font-weight: 500; color: var(--text-3); font-variant-numeric: tabular-nums; }
.lv-skala span { position: absolute; top: 0; left: calc(var(--x) / var(--max) * 100%); transform: translateX(-50%); white-space: nowrap; }
.lv-skala span:first-child { transform: none; }
.lv-skala span:last-child { transform: translateX(-100%); }
.lv-streuung figcaption { margin-top: 14px; font-size: 1rem; color: var(--text-2); }
.lv-raster { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 40px; align-items: start; }
.lv-raster h3 { font-size: 1.25rem; margin-bottom: 14px; }
.lv-raster .liste-haken { margin-top: 0; }
.lv-tabelle { min-width: 0; }
.lv-tabelle td:last-child { font-family: var(--display); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.lv-notiz { margin-top: 12px; }
@media (prefers-reduced-motion: no-preference) {
  .js .lv-streuung .lv-punkt { opacity: 0; transform: translateY(-18px); transition: opacity .35s, transform .6s cubic-bezier(.34,1.56,.64,1); transition-delay: calc(.3s + var(--n) * .09s); }
  .js .lv-streuung.da .lv-punkt { opacity: 1; transform: none; }
  .js .lv-streuung .lv-median { opacity: 0; transition: opacity .5s 1.3s; }
  .js .lv-streuung.da .lv-median { opacity: 1; }
}

/* ---------- Meldezeiten je Weg (dunkel) ---------- */
.mz-wege { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.mz-wege li { display: grid; grid-template-columns: 48px minmax(0, 1.3fr) minmax(0, 1fr); gap: 20px; align-items: center; padding: 18px 22px; border-radius: 20px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); }
.mz-wege li.mz-offen { border-style: dashed; border-color: rgba(255,255,255,.28); background: transparent; }
.mz-ico { width: 48px; height: 48px; border-radius: 15px; display: grid; place-items: center; background: #e7ebff; color: var(--petrol); }
.mz-ico svg { width: 26px; height: 26px; }
.mz-text b { display: block; color: #fff; font-weight: 600; font-size: 1.05rem; line-height: 1.3; }
.mz-text span { display: block; margin-top: 2px; color: #c3c9ea; font-size: 1rem; line-height: 1.45; }
.mz-wert b { display: block; font-family: var(--display); font-weight: 600; font-size: 1.5rem; line-height: 1.15; letter-spacing: -0.02em; color: #fff; font-variant-numeric: tabular-nums; }
.mz-wert span { display: block; margin-top: 4px; color: #c3c9ea; font-size: 1rem; line-height: 1.45; }
.mz-offen .mz-wert b { color: #c3c9ea; }
.mz-fuss { margin: 22px 0 0; max-width: 900px; font-size: 1rem; color: #c3c9ea; }
.mz-fuss a { color: var(--mint); font-weight: 600; }

/* ---------- Datenschutz im Probelauf ---------- */
.dp-raster { align-items: center; }
.dp-raster h2 { margin-bottom: 16px; }
.dp-raster .liste-haken { margin-bottom: 24px; }
.dp-zeilen { margin-top: 0 !important; }
.dp-karte .ui-hinweis { margin-top: 14px; }

/* ---------- Funde ---------- */
.fu-tabelle td:nth-child(1) { width: 44%; font-weight: 500; }
.fu-tabelle td:nth-child(2) { width: 12%; white-space: nowrap; color: var(--text-3); font-variant-numeric: tabular-nums; }
.fu-tabelle .fu-offen td { background: var(--heute-weich); }
.fu-tabelle .fu-offen td:last-child { color: var(--heute); font-weight: 600; }

/* ---------- Anbindungen ---------- */
.an-tabelle td:nth-child(2) { white-space: nowrap; }
.an-tabelle td:nth-child(4) { white-space: nowrap; color: var(--text-3); font-variant-numeric: tabular-nums; }
.an-fazit { display: grid; grid-template-columns: 28px 1fr; gap: 12px; align-items: start; margin: 20px 0 0; padding: 18px 22px; border-radius: 18px; background: #fff; border: 1px solid #dde3fb; color: var(--text-2); }
.an-fazit svg { width: 26px; height: 26px; color: var(--petrol); }
.an-fazit b { color: var(--tinte); }

/* ---------- Grenzen und nächste Messungen ---------- */
.gr-raster { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: start; }
.gr-raster h2 { margin-bottom: 8px; }
.gr-liste { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 12px; }
.gr-liste li { display: grid; grid-template-columns: 24px 1fr; gap: 12px; align-items: start; color: var(--text-2); }
.gr-liste li::before { content: ""; width: 14px; height: 2px; margin: 12px 0 0 4px; border-radius: 2px; background: var(--text-3); }
.gr-ablauf { margin-top: 24px; }
.gr-ablauf li { grid-template-columns: 118px 1fr; }

/* ================= Responsiv ================= */
@media (max-width: 1180px) {
  .pl-auto-raster { grid-template-columns: 1fr 1fr; }
  .pl-auto-raster div:last-child { grid-column: 1 / -1; }
}
@media (max-width: 1020px) {
  :is([data-seite="sicherheit"], [data-seite="test"]) .seiten-hero-raster { grid-template-columns: 1fr; }
  .ps-vergleich { grid-template-columns: 1fr; gap: 10px; }
  .ps-pfeil { flex-direction: row; padding: 4px 0; }
  .ps-pfeil svg { transform: rotate(90deg); }
  .ps-raster, .bt-raster, .ul-raster, .lv-raster, .gr-raster { grid-template-columns: 1fr; gap: 36px; }
  /* Die Spalte darf schmaler werden als der längste Platzhalter, sonst ragt die Liste bei 320 px aus dem Bild */
  .ps-raster { grid-template-columns: minmax(0, 1fr); }
  .of-raster, .pl-raster { grid-template-columns: 1fr; }
  .mz-wege li { grid-template-columns: 48px minmax(0, 1fr); }
  .mz-wert { grid-column: 2; }
  /* Dienstleister am Tablet schon als Karten */
  [data-seite="sicherheit"] .dl-tabelle { min-width: 0; }
  [data-seite="sicherheit"] .tabelle-wrap:has(.dl-tabelle) { border: 0; background: transparent; overflow: visible; }
  [data-seite="sicherheit"] .dl-tabelle thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  [data-seite="sicherheit"] .dl-tabelle, [data-seite="sicherheit"] .dl-tabelle tbody, [data-seite="sicherheit"] .dl-tabelle tr { display: block; }
  [data-seite="sicherheit"] .dl-tabelle tr { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 24px; background: #fff; border: 1px solid var(--linie); border-radius: 16px; padding: 16px 18px; margin-bottom: 10px; }
  [data-seite="sicherheit"] .dl-tabelle td { display: block; width: auto !important; border: 0; padding: 0; }
  [data-seite="sicherheit"] .dl-tabelle td:first-child { grid-column: 1 / -1; font-family: var(--display); font-size: 1.08rem; }
  [data-seite="sicherheit"] .dl-tabelle td:last-child { grid-column: 1 / -1; }
  [data-seite="sicherheit"] .dl-tabelle td[data-label]:not(:first-child)::before { content: attr(data-label); display: block; font-size: .8125rem; color: var(--text-3); font-weight: 600; }
}
@media (max-width: 760px) {
  [data-seite="sicherheit"] .seiten-hero h1 { font-size: clamp(1.9rem, 1.3rem + 2.6vw, 2.4rem); hyphens: manual; -webkit-hyphens: manual; }
  /* Datenfluss */
  .df-weg { padding: 18px 16px 4px; gap: 14px; }
  .df-schritt { grid-template-columns: 40px minmax(0, 1fr); column-gap: 12px; }
  .df-ico { width: 40px; height: 40px; border-radius: 12px; }
  .df-ico svg { width: 22px; height: 22px; }
  .df-schritt::before { left: 19px; top: 20px; height: calc(100% + 14px); }
  .df-ort { grid-column: 2; justify-self: start; margin-top: 6px; }
  .df-zweig { margin-left: 40px; }
  .df-zweig::before { left: -21px; }
  .df-zweig::after { left: -20px; width: 20px; top: 19px; }
  .df-eu .df-ico::after { inset: -5px; border-radius: 15px; }
  .df-fuss { margin: 8px 16px 16px; }
  /* Pseudonymisierung */
  .ps-karte { padding: 14px; border-radius: 18px; }
  .ps-arten { padding: 2px 14px; }
  .ps-arten li { padding: 10px 0; }
  .ps-grenze { grid-template-columns: 1fr; gap: 12px; padding: 18px; }
  /* Dienstleister */
  [data-seite="sicherheit"] .dl-tabelle tr { grid-template-columns: 1fr; }
  .dl-mistral { padding: 14px 16px; }
  /* Zugriff */
  .zg-zeile { flex-direction: column; gap: 0; }
  .zg-zeile b { text-align: left; }
  /* Löschfristen */
  .lf-achse { padding: 16px; border-radius: 20px; }
  .lf-balken { grid-template-columns: 1fr; gap: 6px; }
  .lf-teil { min-height: 0; }
  .lf-tag38 { display: none; }
  .lf-skala { display: none; }
  .lf-legende { grid-template-columns: 1fr; }
  .lf-tabelle td:first-child { width: auto; }
  /* Betrieb */
  [data-seite="sicherheit"] .bt-leiste li { grid-template-columns: 1fr; gap: 2px; }
  /* Offen gesagt, Telefon, Unterlagen */
  .of-spalte { padding: 22px 20px; border-radius: 20px; }
  .tf-karte { grid-template-columns: 1fr; gap: 16px; padding: 24px 20px; border-radius: 22px; }
  .tf-liste { grid-template-columns: 1fr; }
  .ul-liste { padding: 2px 16px; }
  .ul-kopf, .ul-fuss { padding-inline: 16px; }
  /* Testbericht */
  .tb-protokoll .app-karte-innen { padding: 14px 14px 16px; }
  .tb-mess { font-size: .875rem; }
  .tb-mess th, .tb-mess td { padding: 9px 5px; }
  .tb-mess tbody th { width: 34%; }
  .tb-mess td b { font-size: .95rem; }
  .pl-spalte, .pl-auto { padding: 22px 20px; border-radius: 20px; }
  .pl-einordnung { grid-template-columns: 1fr; gap: 12px; padding: 20px; }
  .pl-auto-raster { grid-template-columns: 1fr; }
  .pl-auto-raster div:last-child { grid-column: auto; }
  .lv-streuung { padding: 22px 16px 16px; border-radius: 20px; }
  .lv-flaeche { margin: 0 6px; }
  .lv-skala { margin: 10px 6px 0; }
  .lv-skala span:nth-child(even) { display: none; }
  .lv-punkt { width: 14px; height: 14px; margin-left: -7px; bottom: calc(10px + var(--y, 0) * 19px); box-shadow: 0 0 0 3px rgba(43,75,255,.14); }
  .mz-wege li { grid-template-columns: 40px minmax(0, 1fr); gap: 12px 14px; padding: 16px; }
  .mz-ico { width: 40px; height: 40px; border-radius: 12px; }
  .mz-ico svg { width: 22px; height: 22px; }
  .mz-wert b { font-size: 1.3rem; }
  .gr-ablauf li { grid-template-columns: 1fr; }
  /* Kompakte Karten statt langer Tabellen */
  :is([data-seite="sicherheit"], [data-seite="test"]) .tabelle { min-width: 0; }
  [data-seite="test"] .tb-tabelle tr:not(.tb-gruppe) { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; align-items: center; padding: 12px 14px; }
  [data-seite="test"] .tb-tabelle td { padding: 0; }
  [data-seite="test"] .tb-tabelle td:nth-child(1) { grid-column: 1 / -1; width: auto; padding-bottom: 2px; font-family: var(--text); font-size: 1rem; }
  [data-seite="test"] .tb-tabelle td:nth-child(1) b { font-family: var(--display); font-size: 1.05rem; }
  [data-seite="test"] .tb-tabelle td:nth-child(1) small { font-size: 1rem; }
  [data-seite="test"] .tb-tabelle td[data-label]:not(:first-child)::before { content: none; }
  [data-seite="test"] .tb-tabelle td:nth-child(2) { grid-column: 1; font-size: 1rem; }
  [data-seite="test"] .tb-tabelle td:nth-child(3) { grid-column: 2; justify-self: end; }
  [data-seite="test"] .tb-tabelle td:nth-child(4) { display: none; }
  [data-seite="test"] .tb-tabelle td:nth-child(5) { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }
  [data-seite="test"] .tb-tabelle td:nth-child(5) small { margin: 0; }
  [data-seite="test"] .tb-tabelle tr.tb-gruppe { display: block; background: transparent; border: 0; padding: 12px 2px 6px; margin: 0; }
  [data-seite="test"] .tb-tabelle tr.tb-gruppe th { display: block; padding: 0; background: transparent; border: 0; font-size: .95rem; color: var(--petrol-tief); }
  [data-seite="test"] .lv-tabelle tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; padding: 12px 14px; }
  [data-seite="test"] .lv-tabelle td:nth-child(1) { grid-column: 1; font-size: 1rem; padding: 0; }
  [data-seite="test"] .lv-tabelle td:nth-child(2) { grid-column: 1; grid-row: 2; padding: 0; font-size: 1rem; color: var(--text-3); }
  [data-seite="test"] .lv-tabelle td:nth-child(3) { grid-column: 2; grid-row: 1 / span 2; align-self: center; padding: 0; font-size: 1.15rem; }
  [data-seite="test"] .lv-tabelle td[data-label]:not(:first-child)::before { content: none; }
  [data-seite="test"] .fu-tabelle td:nth-child(1), [data-seite="test"] .fu-tabelle td:nth-child(2) { width: auto; }
  [data-seite="test"] .fu-tabelle td:nth-child(2) { white-space: normal; }
  [data-seite="test"] .fu-tabelle .fu-offen { background: var(--heute-weich); }
  [data-seite="test"] .fu-tabelle .fu-offen td { background: transparent; }
  [data-seite="test"] .an-tabelle td:nth-child(2), [data-seite="test"] .an-tabelle td:nth-child(4) { white-space: normal; }
  .an-fazit { grid-template-columns: 1fr; gap: 10px; padding: 16px; }
}

/* Unter 360 px (z. B. 320 px bei 400 % Zoom): Platzhalter unter die Beschreibung, rechts bündig. Ab 360 px bleibt alles in einer Reihe */
@media (max-width: 359px) { .ps-arten li { flex-wrap: wrap; row-gap: 2px; } .ps-arten .platzhalter { margin-left: auto; } }

/* ---------- Sicherheit gekürzt: Kurzfassung im Aufklapper-Kopf, Einzelheiten darunter ---------- */
.tb-mehr-text h3 { margin: 0; font-size: 1.2rem; line-height: 1.3; letter-spacing: -0.01em; color: var(--tinte); text-wrap: balance; }
.tb-mehr-text > .tb-unter { color: var(--text-2); font-weight: 400; font-size: 1rem; line-height: 1.5; margin: 2px 0 4px; }
.zl-liste { display: grid; gap: 14px; }
.zl-block .tb-mehr > summary { padding: 20px 18px 20px 26px; background: var(--grund); }
.zl-block .tb-mehr[open] > summary { margin-bottom: 22px; }
.zl-lead { max-width: 760px; margin: 0 0 22px; color: var(--text-2); }
[data-seite="sicherheit"] .bt-box { border-radius: 24px; padding: 36px 40px; }
[data-seite="sicherheit"] #dienstleister .dl-mistral { margin-bottom: 18px; }
[data-seite="sicherheit"] #dienstleister .tb-mehr[open] .zusatz { margin-top: 18px; }
@media (max-width: 760px) {
  .zl-block .tb-mehr > summary { padding: 16px 12px 16px 18px; }
  [data-seite="sicherheit"] .bt-box { padding: 24px 18px; }
  .tb-mehr-text h3 { font-size: 1.1rem; }
}

/* ===== 60-fragen-ueber.css ===== */
/* ===== Häufige Fragen (/fragen/) und Über uns (/ueber-uns/), 08.11.2026. Nur seitenbezogene Regeln. ===== */

/* ---------- Häufige Fragen: Hero mit Themen-Karte (Sprunglinks) ---------- */
@media (min-width: 1021px) {
  [data-seite="fragen"] .seiten-hero-raster, [data-seite="ueber"] .seiten-hero-raster { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 56px; }
}
[data-seite="fragen"] .fr-stand { display: inline-flex; align-items: center; gap: 10px; margin: 0; font-size: 1rem; font-weight: 500; color: #c3c9ea; }
[data-seite="fragen"] .fr-stand svg { width: 20px; height: 20px; color: var(--mint); }

[data-seite="fragen"] .fr-themen {
  background: #fff; color: var(--tinte); border-radius: 24px; padding: 22px 12px 12px;
  box-shadow: 0 40px 90px -20px rgba(0, 0, 0, .6);
}
[data-seite="fragen"] .fr-themen .themen-titel { font-family: var(--display); font-weight: 600; line-height: 1.1; text-wrap: balance; font-size: 1.2rem; letter-spacing: -0.01em; color: var(--tinte); padding: 0 14px 12px; margin: 0; }
[data-seite="fragen"] .fr-themen ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
[data-seite="fragen"] .fr-themen a {
  display: grid; grid-template-columns: 42px minmax(0, 1fr) 18px; gap: 14px; align-items: center;
  padding: 10px 14px; border-radius: 16px; text-decoration: none; color: var(--tinte); transition: background-color .2s;
}
[data-seite="fragen"] .fr-themen a:hover { background: var(--grund); }
[data-seite="fragen"] .fr-themen a > svg { width: 18px; height: 18px; color: var(--petrol); transition: transform .2s; }
[data-seite="fragen"] .fr-themen a:hover > svg { transform: translateY(2px); }
[data-seite="fragen"] .tk-ico, [data-seite="fragen"] .fg-ico { display: grid; place-items: center; background: #e7ebff; color: var(--petrol); }
[data-seite="fragen"] .tk-ico { width: 42px; height: 42px; border-radius: 13px; }
[data-seite="fragen"] .tk-ico svg { width: 22px; height: 22px; }
[data-seite="fragen"] .tk-text b { display: block; font-weight: 600; font-size: 1rem; line-height: 1.3; }
[data-seite="fragen"] .tk-text small { display: block; margin-top: 2px; font-size: .875rem; line-height: 1.4; color: var(--text-3); }

/* ---------- Häufige Fragen: Gruppen, links der Titel (mitlaufend), rechts die Fragen ---------- */
[data-seite="fragen"] .fr-liste { padding-top: 72px; }
[data-seite="fragen"] .fragen-gruppe + .fragen-gruppe { margin-top: 64px; }
[data-seite="fragen"] .fragen-gruppe h2 { max-width: none; margin: 0 0 20px; font-size: clamp(1.75rem, 1.4rem + 1vw, 2.2rem); }
[data-seite="fragen"] .fg-ico { width: 52px; height: 52px; border-radius: 16px; margin-bottom: 18px; }
[data-seite="fragen"] .fg-ico svg { width: 28px; height: 28px; }

[data-seite="fragen"] .fragen-gruppe .fragen {
  max-width: none; margin: 0; background: #fff; border: 1px solid var(--linie); border-radius: 24px; padding: 4px 30px;
}
[data-seite="fragen"] .fragen details:last-child { border-bottom: 0; }
[data-seite="fragen"] .fragen summary { padding: 22px 0; line-height: 1.35; transition: color .2s; }
[data-seite="fragen"] .fragen summary:hover, [data-seite="fragen"] .fragen details[open] > summary { color: var(--petrol); }
[data-seite="fragen"] .fragen .antwort { padding: 0 0 26px; max-width: 700px; line-height: 1.6; }
[data-seite="fragen"] .fragen .antwort ul {
  list-style: none; margin: 0 0 .8em; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 28px;
}
[data-seite="fragen"] .fragen .antwort ul.fr-einspaltig { grid-template-columns: 1fr; }
[data-seite="fragen"] .fragen .antwort li { position: relative; padding-left: 18px; line-height: 1.45; }
[data-seite="fragen"] .fragen .antwort li::before { content: ""; position: absolute; left: 2px; top: .6em; width: 6px; height: 6px; border-radius: 50%; background: var(--petrol); }
[data-seite="fragen"] .fragen .antwort .fr-mehr { margin: 4px 0 0; }
[data-seite="fragen"] .fragen .antwort .pfeil-link { display: inline-flex; gap: 8px; align-items: center; }
@media (prefers-reduced-motion: no-preference) {
  [data-seite="fragen"] .fragen details[open] > .antwort { animation: fr-auf .35s cubic-bezier(.2, .8, .2, 1); }
}
@keyframes fr-auf { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

@media (min-width: 1021px) {
  [data-seite="fragen"] .fragen-gruppe { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 0 56px; align-items: start; }
  [data-seite="fragen"] .fragen-gruppe h2 { position: sticky; top: 108px; margin: 0; padding-top: 18px; }
}

/* Schluss: gleicher Grund wie die Fragen davor, darum oben wenig Abstand; Mail-Link im dunklen Band gut lesbar */
[data-seite="fragen"] .fr-liste + .fr-schluss { padding-top: 32px; }
[data-seite="fragen"] .fr-schluss .cta-band a:not(.btn), [data-seite="ueber"] .uu-schluss .cta-band a:not(.btn) { color: #fff; text-underline-offset: 3px; }

@media (max-width: 1020px) {
  [data-seite="fragen"] .seiten-hero-raster { gap: 36px; }
  [data-seite="fragen"] .fr-liste { padding-top: 56px; }
}
@media (max-width: 760px) {
  [data-seite="fragen"] .fr-themen { padding: 18px 6px 6px; border-radius: 22px; }
  [data-seite="fragen"] .fr-themen .themen-titel { padding: 0 12px 10px; }
  [data-seite="fragen"] .fr-themen a { grid-template-columns: 40px minmax(0, 1fr) 16px; gap: 12px; padding: 9px 10px; }
  [data-seite="fragen"] .tk-ico { width: 40px; height: 40px; border-radius: 12px; }
  [data-seite="fragen"] .fr-liste { padding-top: 44px; }
  [data-seite="fragen"] .fragen-gruppe + .fragen-gruppe { margin-top: 44px; }
  [data-seite="fragen"] .fragen-gruppe h2 { margin-bottom: 16px; }
  [data-seite="fragen"] .fg-ico { width: 46px; height: 46px; border-radius: 14px; margin-bottom: 14px; }
  [data-seite="fragen"] .fg-ico svg { width: 24px; height: 24px; }
  [data-seite="fragen"] .fragen-gruppe .fragen { padding: 2px 18px; border-radius: 20px; }
  [data-seite="fragen"] .fragen summary { padding: 18px 0; gap: 14px; font-size: 1.04rem; }
  [data-seite="fragen"] .fragen .antwort { padding-bottom: 22px; }
  [data-seite="fragen"] .fragen .antwort ul { grid-template-columns: 1fr; }
  [data-seite="fragen"] .fr-liste + .fr-schluss { padding-top: 8px; }
}

/* ---------- Über uns: ruhig, Überschriften ohne Wort-für-Wort ---------- */
[data-seite="ueber"] .luecke { color: var(--heute); font-weight: 500; }

/* Gründer-Karte im Hero: Person, darunter Sitz und Kontakt */
[data-seite="ueber"] .uu-gruender {
  background: #fff; color: var(--tinte); border-radius: 24px; padding: 26px 28px 14px;
  box-shadow: 0 40px 90px -20px rgba(0, 0, 0, .6);
}
[data-seite="ueber"] .uu-gruender h2 { font-size: 1.2rem; letter-spacing: -0.01em; color: var(--tinte); margin: 0 0 18px; }
[data-seite="ueber"] .uu-personen { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
[data-seite="ueber"] .uu-personen .person { grid-template-columns: 80px minmax(0, 1fr); gap: 20px; }
[data-seite="ueber"] .uu-personen .person .person-bild { width: 80px; height: 80px; border-radius: 22px; font-size: 1.5rem; color: var(--petrol); }
[data-seite="ueber"] .uu-personen b { font-size: 1.25rem; line-height: 1.3; }
[data-seite="ueber"] .uu-personen .rolle { display: block; font-size: 1rem; color: var(--text-2); }
/* Ein Satz zum Hintergrund (fakten.json "satz"): Bild oben bündig statt mittig neben mehreren Zeilen */
[data-seite="ueber"] .uu-personen .person.mit-satz { align-items: start; }
[data-seite="ueber"] .uu-personen .person-satz { display: block; margin-top: 6px; font-size: 1rem; line-height: 1.5; color: var(--text-2); }
[data-seite="ueber"] .uu-eckdaten { margin: 20px 0 0; }
[data-seite="ueber"] .uu-eckdaten div { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 14px; align-items: baseline; padding: 13px 0; border-top: 1px solid var(--linie); }
[data-seite="ueber"] .uu-eckdaten dt { font-size: .875rem; font-weight: 600; color: var(--text-3); }
[data-seite="ueber"] .uu-eckdaten dd { margin: 0; font-size: 1rem; line-height: 1.45; color: var(--tinte); overflow-wrap: anywhere; }
[data-seite="ueber"] .uu-eckdaten dd a { color: var(--petrol); font-weight: 600; text-underline-offset: 3px; }

/* Warum wir bauen: Text links, rechts die Verweise auf das, was gebaut ist (statt großer Produktkarten) */
[data-seite="ueber"] .uu-warum { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 64px; align-items: center; }
[data-seite="ueber"] .uu-warum-text .lead { margin: 20px 0 0; color: var(--tinte); }
[data-seite="ueber"] .uu-warum-text p:not(.lead) { margin: 16px 0 0; color: var(--text-2); }
[data-seite="ueber"] .uu-warum-text .quellen { margin-top: 14px; }
[data-seite="ueber"] .uu-gebaut {
  background: #fff; border: 1px solid var(--linie); border-radius: 24px; padding: 28px 30px 10px;
  box-shadow: 0 1px 2px rgba(20, 30, 90, .05), 0 18px 40px -24px rgba(20, 30, 90, .25);
}
[data-seite="ueber"] .uu-gebaut h3 { font-size: 1.25rem; letter-spacing: -0.01em; margin-bottom: 8px; }
[data-seite="ueber"] .uu-gebaut ul { list-style: none; margin: 0; padding: 0; }
[data-seite="ueber"] .uu-gebaut li + li { border-top: 1px solid var(--linie); }
[data-seite="ueber"] .uu-gebaut a {
  display: grid; grid-template-columns: 48px minmax(0, 1fr) 18px; gap: 18px; align-items: center;
  padding: 18px 0; text-decoration: none; color: var(--tinte);
}
[data-seite="ueber"] .uu-gebaut a > svg { width: 18px; height: 18px; color: var(--petrol); transition: transform .2s; }
[data-seite="ueber"] .uu-gebaut a:hover > svg { transform: translateX(3px); }
[data-seite="ueber"] .uu-gebaut a:hover b { color: var(--petrol); }
[data-seite="ueber"] .ug-ico { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: #e7ebff; color: var(--petrol); }
[data-seite="ueber"] .ug-ico svg { width: 25px; height: 25px; }
[data-seite="ueber"] .ug-text b { display: block; font-family: var(--display); font-weight: 600; font-size: 1.125rem; line-height: 1.3; letter-spacing: -0.01em; transition: color .2s; }
[data-seite="ueber"] .ug-text small { display: block; margin-top: 4px; font-size: 1rem; line-height: 1.45; color: var(--text-2); }

/* Stufen in der Beispielansicht */
[data-seite="ueber"] .marke-stufe.regulaer { background: var(--flaeche-2); color: var(--text-2); }

/* Wie wir arbeiten: Beispielansicht der Freigabe-Einstellung */
[data-seite="ueber"] .uu-lead { margin-top: 14px; }
[data-seite="ueber"] #arbeitsweise .liste-haken { margin-top: 26px; gap: 18px; }
[data-seite="ueber"] #arbeitsweise .liste-haken a { color: var(--petrol); font-weight: 600; }
[data-seite="ueber"] .uu-freigabe .ui-titel { margin-bottom: 4px; }
[data-seite="ueber"] .uu-freigabe .ui-zeilen div { padding: 12px 14px; }
[data-seite="ueber"] .uu-freigabe .ui-zeilen small { display: block; font-size: .8125rem; color: var(--text-3); }
[data-seite="ueber"] .uu-freigabe .ui-naechster { margin: 16px 0 0; background: var(--grund); border-color: var(--linie); }
[data-seite="ueber"] .uu-schalter { display: inline-flex; align-items: center; gap: 8px; font-size: .8125rem; font-weight: 600; color: var(--text-2); }
[data-seite="ueber"] .uu-schalter i { position: relative; width: 38px; height: 22px; border-radius: 999px; background: var(--linie-stark); }
[data-seite="ueber"] .uu-schalter i::after { content: ""; position: absolute; left: 3px; top: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(10, 16, 51, .25); }

/* Kurzprofil zum Zitieren */
[data-seite="ueber"] .uu-kp { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 56px; align-items: center; }
[data-seite="ueber"] .uu-kp-karte { margin: 0; background: #fff; border: 1px solid var(--linie); border-radius: 24px; padding: 34px 38px; box-shadow: 0 1px 2px rgba(20, 30, 90, .05), 0 18px 40px -24px rgba(20, 30, 90, .25); }
[data-seite="ueber"] .uu-kp-karte blockquote { margin: 0; padding-left: 22px; border-left: 3px solid var(--petrol); font-size: 1.06rem; line-height: 1.65; color: var(--tinte); }
[data-seite="ueber"] .uu-kp-karte blockquote p { margin: 0 0 .8em; }
[data-seite="ueber"] .uu-kp-karte blockquote p:last-child { margin-bottom: 0; }
[data-seite="ueber"] .uu-kp-karte figcaption { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--linie); font-size: .875rem; color: var(--text-3); }

/* Firmendaten und Datenschutzbeauftragter */
[data-seite="ueber"] .uu-firma { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: start; }
[data-seite="ueber"] .uu-firma-karte { background: #fff; border: 1px solid var(--linie); border-radius: 24px; padding: 30px 32px; }
[data-seite="ueber"] .uu-firma-karte h3 { font-size: 1.3rem; margin-bottom: 16px; }
[data-seite="ueber"] .uu-firma-karte .platzhalter-hinweis { margin-bottom: 18px; font-size: 1rem; line-height: 1.5; }
[data-seite="ueber"] .uu-firma-karte > p:not(.platzhalter-hinweis) { color: var(--text-2); margin-bottom: 16px; }
[data-seite="ueber"] .uu-firma-karte dl { margin: 0; }
[data-seite="ueber"] .uu-firma-karte dl div { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 16px; padding: 12px 0; border-top: 1px solid var(--linie); }
[data-seite="ueber"] .uu-firma-karte dt { font-size: .875rem; font-weight: 600; color: var(--text-3); padding-top: 2px; }
[data-seite="ueber"] .uu-firma-karte dd { margin: 0; color: var(--tinte); line-height: 1.5; }
[data-seite="ueber"] .uu-firma-karte dd a { color: var(--petrol); font-weight: 600; }

@media (max-width: 1020px) {
  [data-seite="ueber"] .seiten-hero-raster { gap: 36px; }
  [data-seite="ueber"] .uu-gruender { max-width: 560px; }
  [data-seite="ueber"] .uu-warum { grid-template-columns: 1fr; gap: 32px; }
  [data-seite="ueber"] .uu-warum-text { max-width: 680px; }
  [data-seite="ueber"] .uu-kp { grid-template-columns: 1fr; gap: 24px; }
  [data-seite="ueber"] .uu-firma { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  [data-seite="ueber"] .uu-gruender { padding: 20px 20px 8px; border-radius: 22px; }
  [data-seite="ueber"] .uu-personen .person { grid-template-columns: 64px minmax(0, 1fr); gap: 16px; }
  [data-seite="ueber"] .uu-personen .person .person-bild { width: 64px; height: 64px; border-radius: 18px; font-size: 1.25rem; }
  [data-seite="ueber"] .uu-eckdaten { margin-top: 16px; }
  [data-seite="ueber"] .uu-eckdaten div { grid-template-columns: 72px minmax(0, 1fr); gap: 10px; padding: 12px 0; }
  [data-seite="ueber"] .uu-gebaut { padding: 22px 20px 6px; border-radius: 22px; }
  [data-seite="ueber"] .uu-gebaut h3 { font-size: 1.15rem; margin-bottom: 4px; }
  [data-seite="ueber"] .uu-gebaut a { grid-template-columns: 42px minmax(0, 1fr) 16px; gap: 14px; padding: 16px 0; }
  [data-seite="ueber"] .ug-ico { width: 42px; height: 42px; border-radius: 12px; }
  [data-seite="ueber"] .ug-ico svg { width: 22px; height: 22px; }
  [data-seite="ueber"] .uu-kp-karte { padding: 24px 20px; border-radius: 20px; }
  [data-seite="ueber"] .uu-kp-karte blockquote { padding-left: 16px; font-size: 1rem; }
  [data-seite="ueber"] .uu-firma-karte { padding: 24px 20px; border-radius: 20px; }
  [data-seite="ueber"] .uu-firma-karte dl div { grid-template-columns: 1fr; gap: 2px; }
}
/* Mail-Link in den Eckdaten: Tippfläche 44 px */
[data-seite="ueber"] .uu-eckdaten a { display: inline-flex; align-items: center; min-height: 44px; }

/* ===== 70-demo.css ===== */
/* ===== 70-demo.css: Demo-Seite, Kontaktblock der Startseite, Impressum, Datenschutzerklärung, 404 (08.11.2026) =====
   Bewegung nur über transform und opacity, „Reduzierte Bewegung“ zeigt jeweils den ruhigen Zustand. */

/* ---------- Anfrage-Formular (Demo-Seite und Kontaktblock) ---------- */
.anfrage-formular { container: anfrage / inline-size; color: var(--tinte); }
.anfrage-formular .af-kopf { margin-bottom: 22px; }
.anfrage-formular .af-titel { font-size: clamp(1.4rem, 1.25rem + .45vw, 1.65rem); line-height: 1.2; letter-spacing: -0.02em; color: var(--tinte); margin: 0; hyphens: manual; -webkit-hyphens: manual; }
.anfrage-formular p.af-text { margin: 8px 0 0; color: var(--text-2); font-size: 1rem; line-height: 1.5; }
.anfrage-formular .felder { gap: 16px 18px; }
.anfrage-formular .feld { align-content: start; }
.anfrage-formular .feld label { font-size: 1rem; color: var(--tinte); }
.anfrage-formular .feld .fehler { font-size: 1rem; line-height: 1.4; }
.anfrage-formular .feld textarea { min-height: 104px; }
@media (max-width: 760px) { .anfrage-formular .feld textarea { min-height: 116px; } }
.anfrage-formular .af-hinweis { display: flex; gap: 8px; align-items: flex-start; font-size: 1rem; line-height: 1.45; color: var(--text-2); }
.anfrage-formular .af-hinweis svg { width: 17px; height: 17px; margin-top: 2px; color: var(--petrol); flex: none; }
.anfrage-formular p.af-fehlerzeile { margin: 16px 0 0; padding: 10px 14px; border-radius: 12px; background: var(--notfall-weich); color: #a3262b; font-weight: 600; font-size: 1rem; }
.anfrage-formular p.af-fehlerzeile[hidden] { display: none; }
.anfrage-formular .btn-primaer, .anfrage-formular .btn-primaer:hover { color: #fff; }
.anfrage-formular .btn-primaer { background: var(--petrol); box-shadow: 0 1px 0 rgba(255,255,255,.25) inset, 0 10px 24px -10px rgba(43,75,255,.75); }
.anfrage-formular .btn-primaer:hover { background: var(--petrol-hover); }
.anfrage-formular .btn-rand { border-color: var(--linie-stark); color: var(--tinte); background: #fff; }
.anfrage-formular .btn-rand:hover { border-color: var(--tinte); background: #fff; }
.anfrage-formular p.af-recht, .anfrage-formular p.af-wie { margin: 12px 0 0; font-size: 1rem; line-height: 1.5; color: var(--text-2); }
.anfrage-formular p.af-wie { margin-top: 4px; color: var(--text-3); overflow-wrap: anywhere; }
.anfrage-formular a { color: var(--petrol); font-weight: 600; text-underline-offset: 3px; }
.anfrage-formular :focus-visible { outline-color: var(--petrol); }
@container anfrage (max-width: 540px) { .anfrage-formular .felder { grid-template-columns: minmax(0, 1fr); } }

/* Nach dem Absenden: neutrale Meldung, Kopieren als Ausweg für Webmail */
.anfrage-formular .af-ok { text-align: left; padding: 6px 0 2px; }
.anfrage-formular.gesendet .af-kopf { display: none; }
.anfrage-formular .af-ok-ico { width: 56px; height: 56px; border-radius: 18px; display: grid; place-items: center; background: #e7ebff; color: var(--petrol); margin-bottom: 18px; }
.anfrage-formular .af-ok .af-ok-ico svg { width: 30px; height: 30px; margin: 0; color: var(--petrol); }
.anfrage-formular p.af-ok-status { margin: 0; font-family: var(--display); font-weight: 600; font-size: 1.25rem; line-height: 1.35; letter-spacing: -0.01em; color: var(--tinte); }
.anfrage-formular p.af-ok-status:focus { outline: none; }
.anfrage-formular p.af-ok-status:focus-visible { outline: 3px solid var(--petrol); outline-offset: 4px; }
.anfrage-formular p.af-ok-text { margin: 12px 0 0; color: var(--text-2); overflow-wrap: anywhere; }
.anfrage-formular .af-ok-knoepfe { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.anfrage-formular .af-ok-knoepfe .btn { width: auto; margin-top: 0; }
.anfrage-formular .af-ok .btn svg { width: 18px; height: 18px; margin: 0; color: currentColor; }

/* ---------- Demo-Seite: Bühne mit Formular rechts (am Handy direkt unter H1 und Einleitung) ---------- */
[data-seite="demo"] .demo-hero { padding-bottom: 72px; }
.demo-raster {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  grid-template-areas: "kopf form" "fakten form"; grid-template-rows: auto 1fr; column-gap: 64px; row-gap: 34px; align-items: start;
}
.demo-kopf { grid-area: kopf; }
.demo-formular { grid-area: form; }
.demo-fakten { grid-area: fakten; }
[data-seite="demo"] .demo-kopf h1 { font-size: clamp(2.1rem, 1.45rem + 1.9vw, 3.15rem); max-width: 600px; margin-bottom: 20px; }
[data-seite="demo"] .demo-kopf .lead { max-width: 540px; margin-bottom: 0; }
/* Farbband nur hinter dem Formular, nie hinter Text */
[data-seite="demo"] .seiten-hero.buehne-dunkel::before { clip-path: polygon(47% 100%, 100% 20%, 100% 54%, 71% 100%); }
@media (prefers-reduced-motion: no-preference) {
  [data-seite="demo"] .demo-formular { animation: demo-auf .8s cubic-bezier(.2,.8,.2,1) .05s both; }
}
@keyframes demo-auf { from { transform: translateY(22px); } to { transform: none; } }
.demo-fakten { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; max-width: 520px; }
.demo-fakten li { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 16px; align-items: start; }
.demo-fakten .df-ico { width: 48px; height: 48px; border-radius: 15px; display: grid; place-items: center; background: #e7ebff; color: var(--petrol); }
.demo-fakten .df-ico svg { width: 26px; height: 26px; }
.demo-fakten b { display: block; color: #fff; font-weight: 600; font-size: 1.06rem; line-height: 1.35; }
.demo-fakten li > div > span { display: block; margin-top: 2px; color: #c9cff0; font-size: 1rem; line-height: 1.5; }
.demo-fakten a { color: #fff; font-weight: 600; text-underline-offset: 3px; white-space: nowrap; }
.demo-fakten a:hover { color: var(--mint); }
.demo-hero :focus-visible { outline-color: #fff; }
.demo-hero .anfrage-formular :focus-visible { outline-color: var(--petrol); }
@media (max-width: 1020px) {
  .demo-raster { grid-template-columns: minmax(0, 1fr); grid-template-areas: "kopf" "form" "fakten"; grid-template-rows: auto; row-gap: 28px; }
  [data-seite="demo"] .demo-hero { padding-bottom: 88px; }
  [data-seite="demo"] .seiten-hero.buehne-dunkel::before { clip-path: polygon(0 calc(100% - 22px), 100% calc(100% - 64px), 100% calc(100% - 34px), 0 100%); }
  .demo-fakten { max-width: 640px; }
}
@media (max-width: 760px) {
  [data-seite="demo"] .demo-hero { padding-bottom: 76px; }
  [data-seite="demo"] .demo-kopf h1 { margin-bottom: 16px; }
}

/* ---------- Demo-Seite: Ablauf und Beispiel aus dem Testlauf ---------- */
.demo-zwei { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 64px; align-items: start; }
.demo-ablauf .da-lead { margin: 16px 0 0; max-width: 520px; }
[data-seite="demo"] .ablauf li::after { display: none; }
.demo-ablauf .ablauf li { grid-template-columns: 96px minmax(0, 1fr); }
.demo-ablauf p.da-mehr { margin: 24px 0 0; color: var(--text-2); }
.demo-ablauf .da-mehr a, .demo-wege .dw-text a { color: var(--petrol); font-weight: 600; text-underline-offset: 3px; }
@media (max-width: 1020px) { .demo-zwei { grid-template-columns: minmax(0, 1fr); gap: 44px; } }
@media (max-width: 760px) { .demo-ablauf .ablauf li { grid-template-columns: 1fr; gap: 4px; } }

.demo-beispiel { margin: 0; }
.demo-beispiel .app-karte-kopf span { font-size: .8125rem; }
.demo-beispiel .db-teil + .db-teil { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--linie); }
.demo-beispiel .db-label { display: block; margin-bottom: 8px; font-size: .8125rem; font-weight: 600; color: var(--text-3); }
.demo-beispiel p.db-zitat { margin: 0; font-family: var(--display); font-weight: 500; font-size: 1.2rem; line-height: 1.35; color: var(--tinte); }
.demo-beispiel .db-mail { font-size: 1rem; }
.demo-beispiel p.db-notiz { display: flex; gap: 8px; align-items: flex-start; margin: 10px 0 0; font-size: 1rem; line-height: 1.5; color: var(--text-2); }
.demo-beispiel .db-notiz svg { width: 18px; height: 18px; margin-top: 3px; color: var(--petrol); flex: none; }
.demo-beispiel .db-ergebnis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.demo-beispiel .db-ergebnis em.marke-stufe { font-style: normal; }
.demo-beispiel .db-quelle { padding: 14px 24px 18px; border-top: 1px solid var(--linie); font-size: .8125rem; line-height: 1.5; color: var(--text-3); }
.demo-beispiel .db-quelle a { color: var(--petrol); font-weight: 600; text-underline-offset: 3px; }
/* Klarname und Platzhalter liegen übereinander; ruhiger Zustand: Platzhalter */
.db-ph { display: inline-grid; vertical-align: baseline; }
.db-ph > * { grid-area: 1 / 1; }
.db-ph .klar { visibility: hidden; justify-self: start; white-space: nowrap; }
.db-ph .db-ph-neu { justify-self: start; white-space: nowrap; }
@media (prefers-reduced-motion: no-preference) {
  .js .demo-beispiel .db-ph .klar { visibility: visible; opacity: 1; transition: opacity .3s ease; transition-delay: calc(1s + var(--i, 0) * .4s); }
  .js .demo-beispiel .db-ph .db-ph-neu { opacity: 0; transform: translateY(6px); transition: opacity .35s ease, transform .5s cubic-bezier(.34,1.56,.64,1); transition-delay: calc(1.08s + var(--i, 0) * .4s); }
  .js .demo-beispiel.da .db-ph .klar { opacity: 0; }
  .js .demo-beispiel.da .db-ph .db-ph-neu { opacity: 1; transform: none; }
  .js .demo-beispiel .db-ergebnis > div { opacity: 0; transform: translateY(10px); transition: opacity .5s ease, transform .6s cubic-bezier(.16,1,.3,1); transition-delay: calc(2s + var(--i, 0) * .14s); }
  .js .demo-beispiel.da .db-ergebnis > div { opacity: 1; transform: none; }
}
@media (max-width: 760px) {
  .demo-beispiel .app-karte-kopf span { display: none; }
  .demo-beispiel .app-karte-innen { padding: 18px 16px; }
  .demo-beispiel .db-ergebnis { padding: 14px; gap: 14px; }
  .demo-beispiel .db-quelle { padding: 12px 16px 16px; }
}
@media (max-width: 380px) { .demo-beispiel .db-ergebnis { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Demo-Seite: weitere Anfragen als Wegliste ---------- */
.dw-liste { list-style: none; margin: 0; padding: 8px 28px; background: #fff; border: 1px solid var(--linie); border-radius: 26px; }
.dw-liste li { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 22px; align-items: center; padding: 24px 0; }
.dw-liste li + li { border-top: 1px solid var(--linie); }
.dw-ico { width: 56px; height: 56px; border-radius: 18px; display: grid; place-items: center; background: #e7ebff; color: var(--petrol); }
.dw-ico svg { width: 30px; height: 30px; }
.dw-text h3 { font-size: 1.25rem; line-height: 1.3; margin-bottom: 6px; }
.dw-text p { margin: 0; color: var(--text-2); max-width: 720px; }
.dw-link { white-space: nowrap; min-height: 44px; }
@media (max-width: 760px) {
  .dw-liste { padding: 4px 18px; border-radius: 22px; }
  .dw-liste li { grid-template-columns: minmax(0, 1fr); gap: 12px; align-items: start; padding: 22px 0; }
  .dw-ico { width: 48px; height: 48px; border-radius: 15px; }
  .dw-ico svg { width: 26px; height: 26px; }
  .dw-link { white-space: normal; justify-self: start; }
}

/* ---------- Kontaktblock der Startseite (Farbblock Ultramarin, Arbeitsliste noch einmal groß) ---------- */
.kontakt-block.petrol::before { background: radial-gradient(700px 480px at 92% 0%, rgba(74,69,255,.9), transparent 62%), linear-gradient(115deg, #1f3cf0 10%, #2b4bff 55%, #3047f7 100%); }
@media (prefers-reduced-motion: no-preference) { .kontakt-block.petrol::before { animation: dreh 48s cubic-bezier(.3,.1,.3,1) 1 both; } }
.kb-raster {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  grid-template-areas: "kopf form" "unten form"; grid-template-rows: auto 1fr; column-gap: 64px; row-gap: 30px; align-items: start;
}
.kb-kopf { grid-area: kopf; }
.kb-formular { grid-area: form; }
.kb-unten { grid-area: unten; }
.kb-kopf h2 { color: #fff; margin-bottom: 18px; }
.kontakt-block .kb-kopf .lead { margin: 0; max-width: 540px; color: #eef1ff; }
.kontakt-block :focus-visible { outline-color: #fff; }
.kontakt-block .anfrage-formular :focus-visible { outline-color: var(--petrol); }
.kb-liste { background: #fff; color: var(--tinte); border-radius: 20px; overflow: hidden; box-shadow: 0 34px 80px -28px rgba(6,10,36,.6); max-width: 500px; }
.kb-liste .zeile { padding: 14px 18px; }
.kb-tausch, .kb-zahl { display: inline-grid; }
.kb-tausch > *, .kb-zahl > * { grid-area: 1 / 1; }
.kb-tausch { justify-items: end; }
.kb-tausch.kb-tausch-text { justify-items: start; vertical-align: top; }
.kb-tausch .nachher, .kb-zahl .nachher { opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .js .kb-unten.da .kb-tausch .vorher { animation: kb-druck .55s ease 1.3s both; }
  .js .kb-unten.da .kb-tausch .nachher { animation: kb-auf .45s cubic-bezier(.34,1.56,.64,1) 1.75s both; }
  .js .kb-unten.da .kb-zahl .vorher { animation: kb-weg .3s ease 1.9s both; }
  .js .kb-unten.da .kb-zahl .nachher { animation: kb-auf .4s ease 2s both; }
  .js .kb-unten.da .kb-tausch.kb-tausch-text .vorher { animation: kb-weg .3s ease 1.75s both; }
  .js .kb-unten.da .kb-tausch.kb-tausch-text .nachher { animation: kb-weg-zurueck .4s ease 1.85s both; }
}
@keyframes kb-druck { 0% { transform: none; opacity: 1; } 40% { transform: scale(.9); opacity: 1; } 100% { transform: scale(.9); opacity: 0; } }
@keyframes kb-weg { to { opacity: 0; } }
@keyframes kb-weg-zurueck { from { opacity: 0; } to { opacity: 1; } }
@keyframes kb-auf { from { opacity: 0; transform: scale(.82); } to { opacity: 1; transform: none; } }
.kontakt-block p.kb-beispiel { margin: 12px 0 0; max-width: 500px; font-size: 1rem; line-height: 1.5; color: #e3e6ff; }
/* Ansprechpartner: Platz für ein Foto (bis zur Freigabe die Initialen wie auf /ueber-uns/), Name, Rolle, direkter Mailweg */
.kontakt-block .kb-person { grid-template-columns: 64px minmax(0, 1fr); gap: 18px; align-items: start; margin: 32px 0 0; max-width: 520px; }
.kontakt-block .kb-person .person-bild { width: 64px; height: 64px; border-radius: 20px; background: #fff; color: var(--petrol); font-size: 1.3rem; box-shadow: 0 16px 34px -18px rgba(6,10,36,.75); }
.kontakt-block .kb-person b { color: #fff; font-size: 1.2rem; line-height: 1.3; }
.kontakt-block .kb-person .kb-rolle { display: block; margin-top: 3px; color: #eef1ff; line-height: 1.45; }
.kontakt-block p.kb-direkt { margin: 4px 0 0; color: #eef1ff; display: flex; flex-wrap: wrap; align-items: center; gap: 0 12px; }
.kontakt-block .kb-direkt a { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; color: #fff; font-weight: 600; font-size: 1.06rem; text-decoration: none; overflow-wrap: anywhere; }
.kontakt-block .kb-direkt a svg { width: 22px; height: 22px; color: #fff; }
.kontakt-block .kb-direkt a:hover { text-decoration: underline; text-underline-offset: 4px; }
.kontakt-block p.kb-links { display: flex; flex-wrap: wrap; gap: 0 28px; margin: 12px 0 0; }
.kontakt-block .kb-link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: #fff; font-weight: 600; text-decoration: none; }
.kontakt-block .kb-link svg { width: 18px; height: 18px; transition: transform .2s; }
.kontakt-block .kb-link:hover { text-decoration: underline; text-underline-offset: 4px; }
.kontakt-block .kb-link:hover svg { transform: translateX(3px); }
@media (max-width: 1020px) {
  .kb-raster { grid-template-columns: minmax(0, 1fr); grid-template-areas: "kopf" "form" "unten"; grid-template-rows: auto; row-gap: 32px; }
}
@media (max-width: 760px) {
  .kb-liste, .kontakt-block p.kb-beispiel { display: none; }
  .kontakt-block .kb-person { margin-top: 0; gap: 16px; grid-template-columns: 56px minmax(0, 1fr); }
  .kontakt-block .kb-person .person-bild { width: 56px; height: 56px; border-radius: 18px; font-size: 1.15rem; }
  .kontakt-block p.kb-links { margin-top: 8px; }
}
/* Begriffe, die nicht am Bindestrich umbrechen sollen (AV-Vertrag) */
:is(.kontakt-block, [data-seite="demo"], [data-seite="datenschutz"]) .nw { white-space: nowrap; }

/* ---------- Impressum und Datenschutzerklärung ---------- */
:is([data-seite="impressum"], [data-seite="datenschutz"]) .rt-kopf { padding-bottom: 36px; }
:is([data-seite="impressum"], [data-seite="datenschutz"]) .rt-kopf .lead { max-width: 680px; margin-bottom: 0; }
.rt-kopf h1 { hyphens: manual; -webkit-hyphens: manual; }
/* Brotkrümel dunkler, weil das helle Farbband rechts dahinter liegen kann */
:is([data-seite="impressum"], [data-seite="datenschutz"]) .rt-kopf .pfad { color: var(--text-2); }
.rt-kopf .lead a { color: var(--petrol-hover); font-weight: 600; text-underline-offset: 3px; }
.rt-abschnitt { padding-top: 0; }
.rt-raster { display: grid; grid-template-columns: minmax(0, 1fr) 290px; gap: 32px; align-items: start; }
/* Feste Plätze: das Verzeichnis steht im Code vor dem Text (Lesereihenfolge), am Desktop aber rechts */
.rt-karte { grid-column: 1; grid-row: 1; }
.rt-neben { grid-column: 2; grid-row: 1; }
.rt-karte { max-width: 900px; background: #fff; border: 1px solid var(--linie); border-radius: 26px; padding: 44px 52px 40px; }
.rt-karte .platzhalter-hinweis { margin-bottom: 30px; }
.rt-karte h2 { font-size: clamp(1.6rem, 1.2rem + 1vw, 2rem); line-height: 1.15; margin: 48px 0 14px; scroll-margin-top: 110px; }
.rt-karte h3 { font-size: 1.2rem; line-height: 1.3; letter-spacing: -0.01em; margin: 26px 0 8px; }
.rt-karte h2 + h3 { margin-top: 18px; }
.rt-karte p, .rt-karte li, .rt-karte dd { color: var(--text-2); }
.rt-karte p { margin: 0 0 .8em; }
.rt-karte a { color: var(--petrol); font-weight: 600; text-underline-offset: 3px; overflow-wrap: anywhere; }
.rt-karte p.rt-stand { margin: 36px 0 0; padding-top: 18px; border-top: 1px solid var(--linie); font-size: .8125rem; color: var(--text-3); }
/* Folgt der Stand direkt auf die Nachweis-Liste, reicht deren untere Linie */
.rt-karte .rt-liste + p.rt-stand { margin-top: 18px; padding-top: 0; border-top: 0; }
.rt-karte p.rt-hervor { padding: 14px 18px; border-radius: 14px; background: var(--petrol-hell); color: var(--tinte); }
.rt-kurz { margin: 0 0 8px; padding: 22px 26px; border-radius: 20px; background: var(--petrol-hell); }
.rt-karte p.rt-kurz-titel { margin: 0; font-family: var(--display); font-weight: 600; font-size: 1.2rem; color: var(--tinte); }
.rt-kurz .liste-haken { margin-top: 14px; gap: 10px; }
.rt-kurz .liste-haken li { color: var(--tinte); }
.rt-liste { margin: 8px 0 0; display: grid; gap: 0; }
.rt-liste > div { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 8px 24px; padding: 16px 0; border-top: 1px solid var(--linie); }
.rt-liste > div:last-child { border-bottom: 1px solid var(--linie); }
.rt-liste dt { font-weight: 600; color: var(--tinte); }
.rt-liste dd { margin: 0; }
.rt-neben { position: sticky; top: calc(var(--nav-h) + 40px); display: grid; gap: 14px; }
.rt-toc { background: #fff; border: 1px solid var(--linie); border-radius: 22px; padding: 18px 12px 12px; }
.rt-toc-titel { display: block; padding: 0 12px 6px; font-family: var(--display); font-weight: 600; font-size: 1rem; }
.rt-toc ul { list-style: none; margin: 0; padding: 0; display: grid; }
.rt-toc a { display: flex; align-items: center; min-height: 44px; padding: 6px 12px; border-radius: 12px; color: var(--text-2); text-decoration: none; font-weight: 500; transition: background-color .2s, color .2s; }
.rt-toc a:hover { background: var(--grund); color: var(--tinte); }
.rt-frage { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 14px; align-items: center; padding: 16px 18px; border-radius: 22px; background: var(--petrol-hell); }
.rt-frage-ico { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: #fff; color: var(--petrol); }
.rt-frage-ico svg { width: 24px; height: 24px; }
.rt-frage p { margin: 0; font-size: 1rem; line-height: 1.45; color: var(--text-2); }
.rt-frage a { color: var(--petrol); font-weight: 600; overflow-wrap: anywhere; }
@media (max-width: 1020px) {
  .rt-raster { grid-template-columns: minmax(0, 1fr); }
  .rt-neben { position: static; }
  .rt-karte, .rt-neben { grid-column: auto; grid-row: auto; }
  .rt-frage { display: none; }
  .rt-toc ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  :is([data-seite="impressum"], [data-seite="datenschutz"]) .rt-kopf { padding-bottom: 26px; }
  .rt-karte { padding: 26px 20px 24px; border-radius: 20px; }
  .rt-karte h2 { margin-top: 40px; }
  .rt-kurz { padding: 16px 16px; }
  .rt-liste > div { grid-template-columns: 1fr; gap: 4px; }
  .rt-toc { padding: 14px 8px 8px; border-radius: 20px; }
  .rt-toc ul { grid-template-columns: minmax(0, 1fr); }
  .rt-toc a { min-height: 44px; padding: 4px 12px; }
}

/* ---------- 404: vier Wege weiter ---------- */
[data-seite="404"] .w404 { min-height: 78vh; padding-bottom: 80px; }
@media (max-width: 760px) { [data-seite="404"] .w404 { padding-bottom: 48px; } }
.w404-innen { max-width: 900px; }
.w404 .lead { margin-bottom: 0; }
.w404-wege { list-style: none; margin: 32px 0 0; padding: 10px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; background: #fff; border: 1px solid var(--linie); border-radius: 26px; box-shadow: 0 30px 70px -40px rgba(20,30,90,.35); }
.w404-wege a { display: grid; grid-template-columns: 46px minmax(0, 1fr) 18px; gap: 14px; align-items: center; padding: 14px 16px; border-radius: 18px; text-decoration: none; color: var(--tinte); transition: background-color .2s; }
.w404-wege a:hover { background: var(--grund); }
.w404-ico { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: #e7ebff; color: var(--petrol); }
.w404-ico svg { width: 25px; height: 25px; }
.w404-text b { display: block; font-weight: 600; font-size: 1.125rem; line-height: 1.3; }
.w404-text small { display: block; margin-top: 2px; font-size: 1rem; line-height: 1.4; color: var(--text-3); }
.w404-wege a > svg { width: 18px; height: 18px; color: var(--petrol); transition: transform .2s; }
.w404-wege a:hover > svg { transform: translateX(3px); }
.w404 p.w404-mail { margin-top: 24px; color: var(--text-2); }
.w404-mail a { color: var(--petrol-hover); font-weight: 600; overflow-wrap: anywhere; }
@media (max-width: 640px) { .w404-wege { grid-template-columns: minmax(0, 1fr); padding: 6px; } }
/* Demo-Überschrift am breiten Desktop mindestens 48 px (bei 1024 px bleibt sie kleiner, sonst stehen Wörter allein) */
@media (min-width: 1200px) { [data-seite="demo"] .demo-kopf h1 { font-size: clamp(3rem, 1.45rem + 1.9vw, 3.15rem); } }

/* Freiwillige Angaben zugeklappt: kürzeres Formular */
.af-mehr { grid-column: 1 / -1; border-block: 1px solid var(--linie); }
.af-mehr summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; font-weight: 600; font-size: 1rem; color: var(--tinte); }
.af-mehr summary::-webkit-details-marker { display: none; }
.af-mehr summary small { font-weight: 400; color: var(--text-3); }
.af-mehr summary svg { width: 18px; height: 18px; flex: none; color: var(--petrol); transition: transform .2s; }
.af-mehr[open] summary svg { transform: rotate(45deg); }
.af-mehr > .felder { padding: 2px 0 16px; }

/* Arbeitsliste: Erledigtes verschwindet aus „Zu tun“, dann passen zwei Zeilen zu „2 Fälle“ */
@media (prefers-reduced-motion: no-preference) {
  .js .kb-unten.da .kb-liste .kb-wechsel { overflow: hidden; animation: kb-raus .6s cubic-bezier(.4,0,.2,1) 3s both; }
}
@keyframes kb-raus { from { max-height: 120px; } to { max-height: 0; opacity: 0; padding-top: 0; padding-bottom: 0; border-bottom-width: 0; } }

/* Kontaktblock der Startseite: Hinweis im Listenkopf, Nachrichtenfeld etwas niedriger (Längen-Budget) */
.kb-liste .liste-kopf { justify-content: flex-start; gap: 10px; }
.kb-liste .kb-bsp { margin-left: auto; font-size: .8125rem; color: var(--text-3); }
.kb-formular .feld textarea { min-height: 80px; }
@media (max-width: 760px) { .kb-formular .feld textarea { min-height: 96px; } }


/* ===== 91-kurz-test.css ===== */
/* ---------- So haben wir getestet, gekürzt: Kurzfassung im Aufklapper-Kopf, Einzelheiten darunter (Muster wie Sicherheit) ---------- */
/* Auf getöntem Grund heben sich die Aufklapper-Köpfe weiß ab */
[data-seite="test"] #probelauf .zl-block .tb-mehr > summary { background: #fff; }
[data-seite="test"] #probelauf .pl-einordnung { margin: 0 0 14px; }
[data-seite="test"] #live .lv-streuung { margin-bottom: 14px; }
[data-seite="test"] .zl-block .pl-auto { margin-top: 0; padding: 0; border: 0; background: transparent; }
[data-seite="test"] .zl-block .dp-raster { gap: 40px; }
/* Meldezeiten je Weg: dunkle Fläche im Aufklapper (vorher eigener dunkler Abschnitt) */
[data-seite="test"] .mz-box { border-radius: 24px; padding: 32px 36px; }
[data-seite="test"] .mz-box > .lead { margin: 0 0 22px; max-width: 760px; }
@media (max-width: 760px) {
  [data-seite="test"] .mz-box { padding: 22px 16px; border-radius: 20px; }
}
/* Offene Blöcke: Luft bis zum nächsten Aufklapper; Kacheln des automatischen Versands auf getöntem Grund weiß */
[data-seite="test"] .zl-block .tb-mehr[open] { padding-bottom: 26px; }
[data-seite="test"] .zl-block .pl-auto-raster div { background: #fff; border: 1px solid var(--linie); }
[data-seite="test"] .zl-block .dp-raster { align-items: start; }

/* ===== 92-kurz-notfaelle.css ===== */
/* =====================================================================
   NOTFÄLLE GEKÜRZT (09.11.2026): Kurzfassung im Aufklapper-Kopf, Einzelheiten darunter
   Muster wie Sicherheit (.tb-mehr, .zl-liste, .zl-block in 50-sicherheit-test.css)
   ===================================================================== */

/* Sprungziele #regeln und #messwerte enthalten keinen Aufklapper, damit der Sprung nichts aufklappt */
[data-seite="notfaelle"] .nf-k-liste { margin-top: 40px; }
[data-seite="notfaelle"] .nf-k-ziel .kopf { margin-bottom: 0; }

/* ---------- Notfallarten als Kacheln ---------- */
.nf-arten { list-style: none; margin: 36px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.nf-arten li { display: grid; gap: 4px; align-content: start; padding: 16px 18px 17px; border-radius: 16px; background: var(--grund); border: 1px solid var(--linie); box-shadow: inset 3px 0 0 var(--notfall); }
.nf-arten b { font-family: var(--display); font-weight: 600; font-size: 1.08rem; line-height: 1.3; color: var(--tinte); }
.nf-arten span { font-size: 1rem; line-height: 1.45; color: var(--text-2); }
@media (max-width: 1020px) { .nf-arten { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) {
  .nf-arten { margin-top: 26px; gap: 8px; }
  .nf-arten li { padding: 12px 14px 13px; border-radius: 14px; }
  .nf-arten b { font-size: 1rem; }
}
@media (max-width: 359px) { .nf-arten { grid-template-columns: 1fr; } }

/* ---------- Inhalte in den Aufklappern ---------- */
[data-seite="notfaelle"] .zl-block .nf-regel-raster { margin-top: 0; }
[data-seite="notfaelle"] .zl-block .nf-regel-raster .liste-haken { margin-top: 0; }
[data-seite="notfaelle"] .zl-block .nf-belegt { margin-top: 24px; }
[data-seite="notfaelle"] .zl-block .nf-antwort { align-items: start; }
[data-seite="notfaelle"] .zl-block .nf-antwort .liste-haken { margin-top: 0; }
[data-seite="notfaelle"] .zl-block .nf-spam { align-items: start; }
[data-seite="notfaelle"] .zl-block .nf-spam p { margin: 0; }
[data-seite="notfaelle"] .zl-block .nf-wege { margin-top: 0; }
[data-seite="notfaelle"] .zl-block .nf-hav .liste-haken { margin-top: 24px; }
@media (min-width: 1021px) {
  [data-seite="notfaelle"] .zl-block .nf-hav { gap: 48px; }
  [data-seite="notfaelle"] .zl-block .nf-hav .einf-foto { min-height: 0; }
}
@media (max-width: 1020px) {
  [data-seite="notfaelle"] .zl-block .nf-antwort .nf-antwort-text { order: -1; }
}

/* Statuszeile im Kopf des Havariedienst-Aufklappers */
.tb-mehr-text > .tb-status { display: inline-flex; align-items: flex-start; gap: 10px; margin: 2px 0 6px; font-size: 1rem; font-weight: 500; line-height: 1.45; color: var(--text-2); }
.tb-status i { width: 9px; height: 9px; margin-top: .45em; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 4px rgba(39,107,67,.16); flex: none; }

/* Getönter Grund: Aufklapper-Köpfe weiß */
[data-seite="notfaelle"] .getoent .zl-block .tb-mehr > summary { background: #fff; }

/* Dunkler Messwerte-Abschnitt: Aufklapper als weiße Tafeln */
[data-seite="notfaelle"] .nf-k-mess .nf-k-liste { margin-top: 56px; }
[data-seite="notfaelle"] .nf-k-mess .zl-block .tb-mehr { border-radius: 20px; background: #fff; color: var(--tinte); }
[data-seite="notfaelle"] .nf-k-mess .zl-block .tb-mehr > summary { background: #fff; border-color: transparent; }
[data-seite="notfaelle"] .nf-k-mess .zl-block .tb-mehr[open] { padding: 0 26px 26px; }
[data-seite="notfaelle"] .nf-k-mess .zl-block .tb-mehr[open] > summary { margin: 0 -26px 22px; }
[data-seite="notfaelle"] .nf-k-mess .nf-spam > div:first-child p,
[data-seite="notfaelle"] .nf-k-mess .nf-unter-tabelle { color: var(--text-2); }
[data-seite="notfaelle"] .nf-k-mess .nf-spam > div:first-child .liste-haken span { color: var(--tinte); }
@media (max-width: 760px) {
  [data-seite="notfaelle"] .nf-k-mess .nf-k-liste { margin-top: 40px; }
  [data-seite="notfaelle"] .nf-k-mess .zl-block .tb-mehr[open] { padding: 0 16px 18px; }
  [data-seite="notfaelle"] .nf-k-mess .zl-block .tb-mehr[open] > summary { margin: 0 -16px 18px; }
}

/* ---------- Grenzen als Frage ---------- */
.nf-grenzen-antwort h3 { margin: 22px 0 0; font-size: 1.1rem; line-height: 1.3; color: var(--tinte); }
.nf-grenzen-antwort .liste-haken { margin-top: 12px; gap: 10px; }
.nf-grenzen-antwort .liste-haken b { color: var(--tinte); }
/* gegen die Mint-Regel für Links auf dunklem Grund (35-notfaelle-selbstbau.css): im weißen Aufklapper Blau */
[data-seite="notfaelle"] .nf-k-mess .zl-block .tb-mehr.zl-weiss p a:not(.btn):not(.pfeil-link) { color: var(--petrol); }

/* ===== 93-kurz-mail.css ===== */
/* ===== KI-Mail-Assistent gekürzt (09.11.2026): Fall-Karte sichtbar, übrige Funktionen und „Postfach, Grenzen und Teststand“ als Aufklapper (details.tb-mehr, Muster Sicherheit) ===== */

/* Was der Assistent übernimmt: links die Fall-Karte, rechts vier Aufklapper */
[data-seite="mail"] .kzm-ue-raster { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: start; }
[data-seite="mail"] .kzm-ue-raster .km-ue-raster .km-ue-fall { grid-template-columns: minmax(0, 1fr); gap: 22px; align-items: start; }
[data-seite="mail"] .kzm-ue-liste .tb-mehr > summary { background: var(--grund); }
[data-seite="mail"] .kzm-ue-liste .tb-mehr[open] > summary { margin-bottom: 18px; }
[data-seite="mail"] .kzm-ue-inhalt { display: grid; gap: 14px; padding: 0 6px 6px; }
[data-seite="mail"] .kzm-ue-inhalt > p { margin: 0; color: var(--text-2); }
[data-seite="mail"] .kzm-ue-inhalt .km-ue-meldungen { margin-top: 0; }
[data-seite="mail"] .kzm-ue-inhalt .pfeil-link { justify-self: start; }

/* Postfach, Grenzen und Teststand: zwei Spalten mit je einer Liste von Aufklappern */
[data-seite="mail"] .kzm-pg-raster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start; }
[data-seite="mail"] #postfach-grenzen .tb-mehr[open] > summary { margin-bottom: 22px; }
[data-seite="mail"] .kzm-pf { grid-template-columns: minmax(0, 1fr); gap: 24px; align-items: start; }
[data-seite="mail"] .kzm-pf .km-pf-foto { min-height: 340px; }
[data-seite="mail"] .kzm-pf .liste-haken { margin: 0; }
[data-seite="mail"] .kzm-pf-lead { margin: 0 0 14px; font-weight: 600; color: var(--tinte); }
[data-seite="mail"] #teststand .km-pf-stand, [data-seite="mail"] #grenzen .km-gr-liste, [data-seite="mail"] #nie .km-nie-liste { margin: 0; padding: 0 6px; }
[data-seite="mail"] #teststand .km-pf-test-link { margin: 18px 0 6px; padding: 0 6px; }
[data-seite="mail"] #probe .km-probe-stand { margin: 0 0 12px; padding: 0 6px; }
[data-seite="mail"] #probe .km-probe-laeufe { padding: 0 6px; }
[data-seite="mail"] #probe .pfeil-link { margin: 16px 6px 6px; }
[data-seite="mail"] #nie .km-nie-liste { grid-template-columns: minmax(0, 1fr); }

@media (max-width: 1020px) {
  [data-seite="mail"] .kzm-ue-raster, [data-seite="mail"] .kzm-pg-raster { grid-template-columns: minmax(0, 1fr); gap: 14px; }
}
@media (max-width: 560px) {
  [data-seite="mail"] .kzm-ue-inhalt, [data-seite="mail"] #teststand .km-pf-stand, [data-seite="mail"] #grenzen .km-gr-liste, [data-seite="mail"] #nie .km-nie-liste, [data-seite="mail"] #probe .km-probe-stand, [data-seite="mail"] #probe .km-probe-laeufe, [data-seite="mail"] #teststand .km-pf-test-link { padding-left: 0; padding-right: 0; }
}

/* Fuß „Copilot oder fertiger Assistent?“ in der rechten Spalte unter den Aufklappern */
[data-seite="mail"] .kzm-ue-liste .km-ue-fuss { max-width: none; margin: 8px 0 0; padding: 0 6px; text-align: left; }

/* Anliegen: Notfall-Kasten und Alltag-Liste nebeneinander; offen steht die Tabelle über die volle Breite */
[data-seite="mail"] .kzm-an-paar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
[data-seite="mail"] .kzm-an-paar .km-an-mehr { margin-top: 0; }
[data-seite="mail"] .kzm-an-paar:has(.km-an-mehr[open]) { grid-template-columns: minmax(0, 1fr); }
[data-seite="mail"] .kzm-an-paar .km-an-nf-kopf { gap: 12px; }
[data-seite="mail"] .km-an-fuss { max-width: none; }

/* Automatisch: „Ab Werk ausgenommen“ rechts unter der Beispielkarte */
[data-seite="mail"] .km-au-raster { grid-template-areas: "text karte" "text werk"; grid-template-rows: auto 1fr; row-gap: 24px; }
[data-seite="mail"] .km-au-text { grid-area: text; }
[data-seite="mail"] .km-au-karte { grid-area: karte; position: static; }
[data-seite="mail"] .dunkel p.kzm-au-werk { grid-area: werk; align-self: start; margin: 0; }
[data-seite="mail"] #probe .kzm-probe-plan { margin: 0; padding: 14px 6px 0; border-top: 1px solid var(--linie); color: var(--text-2); }

@media (max-width: 1020px) {
  [data-seite="mail"] .kzm-an-paar { grid-template-columns: minmax(0, 1fr); }
  /* schmal: „Ab Werk ausgenommen“ wie vorher direkt unter den Listen, die Beispielkarte danach */
  [data-seite="mail"] .km-au-raster { grid-template-areas: "text" "werk" "karte"; grid-template-rows: auto; row-gap: 0; }
  [data-seite="mail"] .dunkel p.kzm-au-werk { margin: 22px 0 28px; }
}
@media (max-width: 560px) {
  [data-seite="mail"] .kzm-ue-liste .km-ue-fuss, [data-seite="mail"] #probe .kzm-probe-plan { padding-left: 0; padding-right: 0; }
}
/* Handy: Stufen kompakt, Marke links, Erklärung rechts */
@media (min-width: 360px) and (max-width: 440px) {
  [data-seite="mail"] .km-stufen li { grid-template-columns: 132px minmax(0, 1fr); gap: 10px; align-items: start; }
}

/* Fall-Karte: Symbol neben die Überschrift statt darüber */
[data-seite="mail"] .kzm-ue-raster .km-ue-fall-text { display: grid; grid-template-columns: 46px minmax(0, 1fr); align-items: center; gap: 12px 14px; }
[data-seite="mail"] .kzm-ue-raster .km-ue-fall-text p { grid-column: 1 / -1; }
/* Handy: die 11 Namen stehen auch in der ersten Tabellenspalte, zugeklappt reicht Titel und Hinweis */
@media (max-width: 760px) {
  [data-seite="mail"] .km-an-mehr:not([open]) .km-an-namen { display: none; }
}
/* Handy: Knopf oben rechts neben dem Titel, die Kurzfassung bekommt die ganze Breite (wie bei „Alltag, Geld und Verwaltung“) */
@media (max-width: 760px) {
  [data-seite="mail"] .kzm-ue-liste .tb-mehr > summary, [data-seite="mail"] #postfach-grenzen .tb-mehr > summary { position: relative; display: block; }
  [data-seite="mail"] .kzm-ue-liste .tb-mehr-text h3, [data-seite="mail"] #postfach-grenzen .tb-mehr-text h3 { min-height: 44px; padding-right: 52px; display: flex; align-items: center; }
  [data-seite="mail"] .kzm-ue-liste .tb-mehr-knopf, [data-seite="mail"] #postfach-grenzen .tb-mehr-knopf { position: absolute; top: 14px; right: 12px; }
}
/* Handy: Fall-Karte ohne äußeren Rahmen (sonst Karte in Karte), mehr Breite für den Fall */
@media (max-width: 560px) {
  [data-seite="mail"] .kzm-ue-raster .km-ue-raster .km-ue-fall { padding: 0; border: 0; background: none; box-shadow: none; }
  [data-seite="mail"] .kzm-ue-raster .km-ue-fall::before { display: none; }
  [data-seite="mail"] .kzm-ue-raster .km-ue-fall:hover { transform: none; }
  [data-seite="mail"] .km-stufen { margin-bottom: 20px; }
}
/* Handy: „… ansehen“ läuft direkt hinter der Kurzfassung weiter statt in eigener Zeile */
@media (max-width: 760px) {
  [data-seite="mail"] .kzm-ue-liste .tb-mehr-text, [data-seite="mail"] #postfach-grenzen .tb-mehr-text { display: block; }
  [data-seite="mail"] .kzm-ue-liste .tb-mehr-text > .tb-unter, [data-seite="mail"] #postfach-grenzen .tb-mehr-text > .tb-unter { display: inline; margin: 0 8px 0 0; }
  [data-seite="mail"] .kzm-ue-liste .tb-mehr-text h3, [data-seite="mail"] #postfach-grenzen .tb-mehr-text h3 { margin-bottom: 4px; }
  [data-seite="mail"] .kzm-ue-liste .tb-mehr:not([open]) .tb-mehr-auf, [data-seite="mail"] #postfach-grenzen .tb-mehr:not([open]) .tb-mehr-auf,
  [data-seite="mail"] .kzm-ue-liste .tb-mehr[open] .tb-mehr-zu, [data-seite="mail"] #postfach-grenzen .tb-mehr[open] .tb-mehr-zu { display: inline-block; }
}
[data-seite="mail"] .kzm-an-paar .km-an-mehr-zahl { text-wrap: balance; }

/* ===== 94-kurz-selbstbau.css ===== */
/* ---------- Copilot oder fertiger Assistent? gekürzt (09.11.2026): Microsoft-Bausteine als Aufklapper, Selbstbau-Teil in einem Abschnitt ---------- */
/* Aufklapper-Inhalt: frühere h2/h3 sind eine Stufe tiefer (h3 im Kopf, h4 darin), Größen wie vorher */
[data-seite="selbstbau"] .zl-block .funktion h4 { font-size: 1.3rem; line-height: 1.2; }
[data-seite="selbstbau"] .zl-block h4.sb-h3 { margin-top: 30px; font-size: clamp(1.2rem, 1.05rem + .45vw, 1.5rem); line-height: 1.2; }
[data-seite="selbstbau"] .sb-auf { gap: 48px; align-items: start; padding: 4px 4px 8px; }
[data-seite="selbstbau"] .sb-auf .lead { margin-top: 0; }
[data-seite="selbstbau"] #copilot-outlook .sb-unter { margin-bottom: 8px; }

/* Getönter Grund: Aufklapper-Kopf weiß, damit er sich abhebt */
[data-seite="selbstbau"] .getoent .zl-block .tb-mehr > summary { background: #fff; }
[data-seite="selbstbau"] .sb-pflege-block .sb-pflege { max-width: 860px; }
[data-seite="selbstbau"] .sb-reicht-rechts { display: grid; gap: 20px; align-content: start; }

/* Wann der Selbstbau reicht / Wann ein fertiger Assistent besser passt: zwei Karten nebeneinander, rechts darunter die Pflegeliste (Aufklapper) */
[data-seite="selbstbau"] .sb-reicht-raster { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: start; margin-top: 36px; }
[data-seite="selbstbau"] .sb-reicht-spalte { padding: 28px 30px; border-radius: 22px; background: #fff; border: 1px solid var(--linie); }
[data-seite="selbstbau"] .sb-reicht-spalte.wir { box-shadow: inset 0 3px 0 var(--petrol); }
[data-seite="selbstbau"] .sb-reicht-spalte .liste-haken { margin-top: 16px; }
@media (max-width: 1020px) { [data-seite="selbstbau"] .sb-reicht-raster { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 760px) {
  [data-seite="selbstbau"] .sb-reicht-spalte { padding: 22px 20px; }
  [data-seite="selbstbau"] .sb-auf { gap: 28px; padding: 0; }
}

/* Copilot und DSGVO als Aufklapper unter der Vergleichstabelle */
[data-seite="selbstbau"] .sb-dsgvo-block { margin-top: 32px; }
[data-seite="selbstbau"] .sb-dsgvo-spalte h4 { margin-bottom: 2px; font-size: clamp(1.2rem, 1.05rem + .45vw, 1.5rem); line-height: 1.2; }
[data-seite="selbstbau"] .sb-dsgvo-block .sb-schluss { margin-bottom: 8px; }

/* Vergleich: Überschrift in zwei statt drei Zeilen */
@media (min-width: 1021px) { [data-seite="selbstbau"] #vergleich.kopf { max-width: 920px; } }

/* ===== 95-kurz-telefon.css ===== */
/* ===== 95: /ki-telefonassistent/ gekürzt (09.11.2026): Aufklapper nach dem Muster der Sicherheitsseite (details.tb-mehr, zl-liste) ===== */
/* Voreinstellungen (dunkler Abschnitt): Aufklapper statt offener Tabelle */
[data-seite="telefon"] .tel-live .tb-mehr-text h3 { margin: 0; color: var(--tinte); }
[data-seite="telefon"] .tel-live .tb-mehr > summary { padding: 20px 18px 20px 26px; }
[data-seite="telefon"] .tel-live .tb-mehr[open] > summary { margin-bottom: 18px; }
/* Vergleich: Tabelle im Aufklapper (am Handy zu, am Rechner offen) */
[data-seite="telefon"] .tel-vg-mehr { margin-top: 4px; }
/* Aufklapper-Listen unter Notfall und im KI-Hinweis */
[data-seite="telefon"] .getoent .zl-block .tb-mehr > summary { background: #fff; }
[data-seite="telefon"] .tel-ki-raster .tel-zl { margin-top: 28px; }
.tel-zl-lead { margin: 0 0 18px; color: var(--text-2); max-width: 760px; }
[data-seite="telefon"] .tel-zl .liste-haken { margin-top: 0; }
[data-seite="telefon"] .tel-zl .tel-stufen { margin-top: 0; }
[data-seite="telefon"] .tel-zl .tel-vorlage { margin-top: 28px; }
[data-seite="telefon"] .tel-zl details.quellen { margin-top: 18px; }
@media (min-width: 1021px) { [data-seite="telefon"] .tel-ki-raster .tel-ansage { position: sticky; top: calc(var(--nav-h) + 48px); } }
/* Kosten und Pilotplätze in einem Abschnitt */
[data-seite="telefon"] .tel-pilot { margin-top: 56px; }
@media (max-width: 760px) { [data-seite="telefon"] .tel-pilot { margin-top: 36px; } }
[data-seite="telefon"] .tel-ki-raster { align-items: center; }
[data-seite="telefon"] .tel-ki-raster h2 + .tel-zl { margin-top: 28px; }
@media (min-width: 1021px) {
  [data-seite="telefon"] #kosten .tel-kosten-raster { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 48px; }
  [data-seite="telefon"] #kosten .tel-kosten { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; }
}
[data-seite="telefon"] .tel-vg-mehr .tel-fuss-notiz { margin: 14px 0 0; }
@media (min-width: 761px) { [data-seite="telefon"] .weiter-abschnitt + #kosten { padding-top: 64px; } }
/* Aufgeklappt: Ansage oben halten und beim Lesen mitlaufen lassen */
[data-seite="telefon"] .tel-ki-raster:has(.tel-zl details[open]) .tel-ansage { align-self: start; }