/* ==========================================================================
   Gradion · Design-System
   Grundlage: Styleguide „Stand Startseite v10 und Logo 11a“ (Claude Design,
   Handoff 08.10.2026). Gilt für alle neuen Seiten unter /neu/ und später für
   die App. Neue Seiten setzen sich nur aus diesen Teilen zusammen.

   Regeln aus dem Styleguide, die hier gelten:
   - keine Schatten, kein Glas, keine Verläufe (Ausnahme: Hero-Abdunklung)
   - Orange ist Signal, keine Fläche: Navigation, ein Akzent je Abschnitt,
     die hervorgehobene Preiskarte (einzige große orange Fläche)
   - Red Hat Display nur für H1/H2, alles andere Hanken Grotesk
   - Linien: 1 px fein · 1,5 px Kontrolle · 2 px betont · 3 px Fokus
   ========================================================================== */

/* -------------------------------------------------------------------------
   Schriften, selbst ausgeliefert (kein Google Fonts von außen, Datenschutz).
   Hanken Grotesk und Red Hat Display, beide SIL Open Font License 1.1.
   Variable Schriften: eine Datei je Zeichensatz deckt alle Stärken ab.
   ------------------------------------------------------------------------- */
@font-face { font-family: 'Hanken Grotesk'; font-style: normal; font-weight: 400 600; font-display: swap;
  src: url('schriften/hanken-grotesk-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Hanken Grotesk'; font-style: normal; font-weight: 400 600; font-display: swap;
  src: url('schriften/hanken-grotesk-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Red Hat Display'; font-style: normal; font-weight: 500 600; font-display: swap;
  src: url('schriften/red-hat-display-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Red Hat Display'; font-style: normal; font-weight: 500 600; font-display: swap;
  src: url('schriften/red-hat-display-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  /* Graphit und Papier */
  --graphit: oklch(0.15 0.005 60);          /* #0D0B09 Text, Buttons, dunkle Blöcke */
  --graphit-hover: oklch(0.26 0.006 60);    /* #262321 */
  --graphit-2: oklch(0.3 0.006 60);         /* #302D2B */
  --text-gedaempft: oklch(0.47 0.01 60);    /* #5F5A55 */
  --papier: oklch(0.97 0.012 75);           /* #FAF4EC Seitenhintergrund */
  --papier-hell: oklch(0.985 0.004 80);     /* #FBFAF7 Wechsel-Abschnitte, Karten */
  --weiss: oklch(0.99 0.003 80);            /* #FDFCF9 */
  --chip: oklch(0.935 0.01 75);             /* #EDE9E2 */
  --chip-hover: oklch(0.91 0.01 75);        /* #E5E0DA */
  --linie: oklch(0.89 0.01 75);             /* #DFDAD4 */
  --auf-dunkel-gedaempft: oklch(0.82 0.006 70); /* #C7C3C0 */
  --auf-dunkel-linie: oklch(0.32 0.006 60);     /* #353230 */
  --nav-link: oklch(0.88 0.006 70);         /* #DAD7D3 */

  /* Grad-Orange */
  --orange: oklch(0.72 0.15 55);            /* #EB883B */
  --orange-label: oklch(0.78 0.14 58);      /* #F99F55 */

  /* Zweitton – noch nicht final, deshalb als eine Gruppe (Standard: Braun) */
  --zweitton: oklch(0.84 0.04 55);          /* #E0C4B2 Info-Karten */
  --zweitton-hell: oklch(0.94 0.015 60);    /* #F3E9E1 helle Info-Fläche */
  --zweitton-leer: oklch(0.8 0.035 55);     /* #D0B8A9 leere Kästchen */
  --zweitton-punkt: oklch(0.62 0.07 55);    /* #A87B5D leere Punkte */

  /* Status – nur für Zustände, nie als Deko */
  --gruen: oklch(0.6 0.12 148);
  --gruen-hell: oklch(0.94 0.04 148);
  --gruen-text: oklch(0.42 0.09 148);
  --rot: oklch(0.56 0.17 27);
  --rot-hell: oklch(0.94 0.035 27);
  --rot-text: oklch(0.46 0.15 27);

  --hero-schleier: oklch(0.11 0.004 60);

  /* Schrift */
  --schrift-display: 'Red Hat Display', 'Hanken Grotesk', system-ui, sans-serif;
  --schrift-text: 'Hanken Grotesk', system-ui, sans-serif;

  /* Maße */
  --inhalt: 1520px;   /* 09.10.: von 1320 erhöht, mehr Platz auf großen Bildschirmen */
  --rand: clamp(20px, 4vw, 56px);
  --abschnitt: clamp(64px, 7vw, 104px);
  --fokus: 0 0 0 3px oklch(0.72 0.15 55 / 0.35);
}

/* -------------------------------------------------------------------------
   Grundlage
   ------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--papier);
  color: var(--graphit);
  font-family: var(--schrift-text);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
a { color: var(--graphit); text-underline-offset: 4px; }
button, input, select, textarea { font: inherit; color: inherit; }
::selection { background: var(--orange); color: var(--graphit); }
:focus-visible { outline: none; box-shadow: var(--fokus); border-radius: 8px; }
.nur-vorleser {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* -------------------------------------------------------------------------
   Schrift-Stile
   ------------------------------------------------------------------------- */
.h1 {
  font-family: var(--schrift-display); font-weight: 500; margin: 0;
  font-size: clamp(48px, 6.2vw, 92px); letter-spacing: -0.045em; line-height: 0.98;
  text-wrap: balance;
}
.h2 {
  font-family: var(--schrift-display); font-weight: 500; margin: 0;
  font-size: clamp(40px, 4.8vw, 68px); letter-spacing: -0.04em; line-height: 1.02;
  text-wrap: balance;
}
.statement {
  margin: 0; font-weight: 500; font-size: clamp(28px, 3vw, 42px);
  letter-spacing: -0.03em; line-height: 1.16; text-wrap: pretty;
}
.h3 {
  margin: 0; font-weight: 500; font-size: clamp(24px, 2.2vw, 30px);
  letter-spacing: -0.02em; line-height: 1.15;
}
.lead {
  margin: 0; font-size: clamp(18px, 1.5vw, 20px); line-height: 1.55;
  color: var(--text-gedaempft); text-wrap: pretty;
}
.text { margin: 0; font-size: 17px; line-height: 1.55; color: var(--text-gedaempft); text-wrap: pretty; }
.label {
  font-size: 14px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--text-gedaempft);
}
.meta { font-size: 14px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; }
.klein { font-size: 15px; color: var(--text-gedaempft); }

/* Link im Fließtext: Unterstrich in Grad-Orange */
.textlink {
  font-weight: 500; text-decoration: underline; text-decoration-color: var(--orange);
  text-decoration-thickness: 2px; text-underline-offset: 4px;
}
.textlink:hover { text-decoration-color: var(--graphit); }

/* -------------------------------------------------------------------------
   Rahmen und Abschnitte
   ------------------------------------------------------------------------- */
.inhalt { max-width: var(--inhalt); margin: 0 auto; padding: 0 var(--rand); }
.abschnitt { padding: var(--abschnitt) 0; }
.abschnitt--hell { background: var(--papier-hell); }
.abschnitt__kopf { display: flex; flex-direction: column; gap: clamp(28px, 3.5vw, 44px); }
.abschnitt__kopf-reihe {
  display: flex; flex-wrap: wrap; gap: 24px 72px; align-items: flex-end;
}
.abschnitt__kopf-reihe > .h2 { flex: 1 1 460px; }
.abschnitt__kopf-reihe > .lead { flex: 1 1 380px; }
.abstand-inhalt { margin-top: clamp(36px, 4.5vw, 56px); }

/* -------------------------------------------------------------------------
   Logo (Wortmarke). Das Gradzeichen ist Grad-Orange, auf Orange weiß.
   ------------------------------------------------------------------------- */
.wortmarke { height: 28px; width: auto; overflow: visible; }
.wortmarke path, .wortmarke .wm-kreis { fill: none; stroke: currentColor; stroke-width: 7; }
.wortmarke .wm-ring { fill: none; stroke: var(--orange); stroke-width: 4; }

/* -------------------------------------------------------------------------
   Knöpfe
   Primär: Graphit mit hellem Pfeilquadrat · Sekundär: Chip mit dunklem
   Pfeilquadrat · Hell (auf Graphit/Foto) · Kontur nur in Preiskarten
   ------------------------------------------------------------------------- */
.knopf {
  display: inline-flex; align-items: center; gap: 12px; width: max-content; max-width: 100%;
  font-weight: 500; font-size: 16px; line-height: 1.2; text-decoration: none; cursor: pointer;
  border: none; border-radius: 12px; padding: 7px 7px 7px 18px;
  background: var(--graphit); color: var(--weiss); transition: background-color .15s;
}
.knopf:hover { background: var(--graphit-hover); color: var(--weiss); }
.knopf__pfeil {
  flex: none; width: 30px; height: 30px; border-radius: 7px; display: flex;
  align-items: center; justify-content: center; font-size: 15px;
  background: var(--weiss); color: var(--graphit);
}
.knopf--gross { font-size: 18px; gap: 14px; padding: 9px 9px 9px 24px; border-radius: 14px; }
.knopf--gross .knopf__pfeil { width: 38px; height: 38px; border-radius: 9px; font-size: 18px; }
.knopf--hell { background: var(--weiss); color: var(--graphit); font-size: 17px; gap: 14px; padding: 7px 7px 7px 20px; border-radius: 13px; }
.knopf--hell:hover { background: var(--chip); color: var(--graphit); }
.knopf--hell .knopf__pfeil { width: 34px; height: 34px; border-radius: 8px; background: var(--graphit); color: var(--weiss); }
.knopf--sekundaer { background: var(--chip); color: var(--graphit); gap: 14px; padding: 6px 6px 6px 18px; }
.knopf--sekundaer:hover { background: var(--chip-hover); color: var(--graphit); }
.knopf--sekundaer .knopf__pfeil { background: var(--graphit); color: var(--weiss); border-radius: 8px; }
.knopf--kontur {
  justify-content: center; width: 100%; font-size: 17px; padding: 14px 20px; border-radius: 12px;
  background: transparent; color: var(--graphit); border: 1px solid var(--graphit);
}
.knopf--kontur:hover { background: var(--graphit); color: var(--weiss); }
.knopf--voll { justify-content: center; width: 100%; font-size: 17px; padding: 14px 20px; }

.leiser-link {
  font-size: 16px; font-weight: 500; text-decoration: underline;
  text-decoration-color: var(--orange); text-decoration-thickness: 2px; text-underline-offset: 4px;
}
.leiser-link:hover { text-decoration-color: currentColor; }

/* -------------------------------------------------------------------------
   Navigation: schwebende Pill in Grad-Orange
   ------------------------------------------------------------------------- */
/* Kopfzeile nach Handoff „Kopfzeile“ (Claude Design, 09.10.2026):
   Oben auf der Seite eine breite Leiste in der Form der Hero-Karte (10 px Rand,
   24 px Radius), ab 12 px Scrollen federt sie zur schwebenden Pille zusammen
   (gradion.js setzt die --nav-*-Werte). Ohne JavaScript bleibt die breite Leiste. */
.nav {
  position: fixed; left: 50%; z-index: 40;
  top: var(--nav-top, 10px); width: var(--nav-breite, calc(100% - 20px)); max-width: 100%; box-sizing: border-box;
  transform: translateX(-50%) scale(var(--nav-sx, 1), var(--nav-sy, 1)); transform-origin: 50% 0;
  display: flex; align-items: center; justify-content: center; gap: 8px 30px; white-space: nowrap;
  padding: 9px var(--nav-pr, 16px) 9px var(--nav-pl, 16px); border-radius: var(--nav-radius, 24px) var(--nav-radius, 24px) var(--nav-radius-unten, 24px) var(--nav-radius-unten, 24px);
  overflow: hidden; isolation: isolate; color: var(--graphit);
  background: oklch(0.72 0.15 55 / var(--nav-alpha, 1));
  -webkit-backdrop-filter: blur(var(--nav-blur, 0px)); backdrop-filter: blur(var(--nav-blur, 0px));
  box-shadow: 0 calc(12px * var(--nav-pc, 0)) calc(34px * var(--nav-pc, 0)) oklch(0.2 0.03 50 / calc(0.3 * var(--nav-pc, 0))),
              0 1px 0 oklch(1 0 0 / calc(0.25 * var(--nav-pc, 0))) inset;
}
.nav > * { flex: none; }
.nav .wortmarke { height: var(--nav-logo, 30px); }
.nav__scheibe {
  position: absolute; border-radius: 50%; background: var(--orange); z-index: -1;
  pointer-events: none; left: 0; top: 0; width: 0; height: 0;
}
.nav__logo { display: flex; align-items: center; text-decoration: none; color: var(--graphit); }
.nav__logo .wm-ring { stroke: var(--weiss); }
.nav__links { display: flex; gap: 6px 24px; font-size: 16px; }
.nav__links a { color: var(--graphit); font-weight: 500; text-decoration: none; }
.nav__links a:hover { opacity: 0.65; }
.nav__links a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }
.mobilmenue a[aria-current="page"] { color: var(--orange); }
.nav__rechts { display: flex; align-items: center; gap: 18px; }
.nav__testen {
  display: flex; align-items: center; gap: 12px; background: var(--weiss); color: var(--graphit);
  font-weight: 500; font-size: 16px; padding: 7px 7px 7px 18px; border-radius: 13px; text-decoration: none;
}
.nav__testen:hover { background: var(--chip); }
/* Ein Knopf für beide Fälle: angemeldet „Anmelden“, sonst „Kostenlos testen“ (gradion.js).
 * Bis die Antwort da ist, bleibt er unsichtbar, damit der Text nicht vor den Augen wechselt.
 * Ohne JavaScript kommt er nach 1,2 s mit „Kostenlos testen“. */
[data-konto-knopf]:not(.konto-klar) { visibility: hidden; animation: konto-zeigen 0s linear 1.2s forwards; }
[data-konto-knopf].konto-klar { animation: konto-ein .15s ease-out; }
@keyframes konto-zeigen { to { visibility: visible; } }
@keyframes konto-ein { from { opacity: 0; } }
.nav__testen .knopf__pfeil { width: 32px; height: 32px; border-radius: 9px; background: var(--graphit); color: var(--weiss); }
.nav__kurz { display: none; }
.nav__menueknopf {
  display: none; width: 40px; height: 40px; border-radius: 11px; border: none; cursor: pointer;
  background: var(--graphit); color: var(--weiss); align-items: center; justify-content: center;
}

/* Funktionen-Aufklappmenü */
.nav__gruppe { position: relative; }
.nav__menue {
  position: fixed; display: none; flex-direction: column; min-width: 240px;
  background: var(--papier-hell); border: 1px solid var(--linie); border-radius: 14px; padding: 6px;
}
.nav__menue a { padding: 10px 12px; border-radius: 9px; text-decoration: none; font-weight: 500; font-size: 15px; }
.nav__menue a:hover { background: var(--chip); opacity: 1; }
.nav__menue a span { display: block; font-weight: 400; font-size: 14px; color: var(--text-gedaempft); }

/* Mobil-Menü (unter 820 px) */
.mobilmenue {
  position: fixed; top: 78px; left: 12px; right: 12px; z-index: 39; display: none;
  background: var(--graphit); color: var(--weiss); border-radius: 20px; padding: 10px 22px 22px;
}
.mobilmenue.offen { display: flex; flex-direction: column; }
.mobilmenue a.mobilmenue__zeile {
  display: flex; justify-content: space-between; align-items: center; padding: 15px 0;
  border-bottom: 1px solid var(--auf-dunkel-linie); color: var(--weiss);
  font-size: 20px; font-weight: 500; text-decoration: none;
}
.mobilmenue a.mobilmenue__zeile--unter { font-size: 17px; padding-left: 16px; color: var(--auf-dunkel-gedaempft); }
.mobilmenue a.mobilmenue__zeile span { color: var(--orange); }
.mobilmenue .knopf--hell { margin-top: 18px; width: 100%; justify-content: center; }

@media (max-width: 819px) {
  .nav { justify-content: space-between; padding-top: 7px; padding-bottom: 7px; }
  .nav__links, .nav__lang { display: none; }
  .nav__kurz { display: inline; }
  .nav__menueknopf { display: flex; }
  .nav__rechts { gap: 6px; }
  .nav__testen { height: 40px; padding: 0 14px; border-radius: 11px; font-size: 15px; }
  .nav__testen .knopf__pfeil { display: none; }
  .wortmarke, .nav .wortmarke { height: 24px; }
}

/* -------------------------------------------------------------------------
   Hero: Vollbild-Foto mit 10 px Rand, Abdunklung nur von unten.
   Die Karte beginnt unter der Kopfzeile (Bens Wunsch 09.10.: Orange und Braun
   nicht aufeinander). --hero-oben = Rand + Höhe der Kopfzeile + Abstand.
   ------------------------------------------------------------------------- */
.hero { --hero-oben: 84px; padding: var(--hero-oben) 10px 10px; }
@media (max-width: 819px) { .hero { --hero-oben: 74px; } }   /* Kopfzeile mobil 54 px hoch */
.hero__rahmen {
  position: relative; height: max(640px, calc(100vh - var(--hero-oben) - 10px)); border-radius: 24px; overflow: hidden;
  background: var(--graphit);
}
.hero__bild { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Hand mit Handy mittig, kommt von unten ins Bild; der Hintergrund liegt in .hero__bild.
 * Zwei Ebenen: hinten das Display (.hero__display, später der App-Screenshot, ohne Filter), davor die Hand
 * mit ausgeschnittenem Display (werkzeug/hero/display_ausschneiden.py), vorher auf iPhone-Proportionen
 * gestaucht (werkzeug/hero/handy_proportion.py). Maße des Lochs im Bild 1197×1242: x 378–816, y 87–1051
 * (Höhe/Breite 2,20, echtes iPhone 2,17), Ecken etwa 57×54 px. */
.hero__geraet { position: absolute; z-index: 1; left: 50%; bottom: 0; height: min(92%, 980px); aspect-ratio: 1197 / 1242; transform: translateX(-46%); pointer-events: none; }   /* vor dem Schleier: der darf den Screenshot nicht abdunkeln */
.hero__display {
  position: absolute; left: calc(31.58% - 2px); top: calc(7% - 2px); width: calc(36.67% + 4px); height: calc(77.7% + 4px);
  border-radius: 13% / 5.6%; overflow: hidden; background: oklch(0.985 0.004 80);
}
.hero__display img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.hero__handy { position: relative; display: block; width: 100%; height: 100%; }
/* Der Schleier liegt hinter dem Gerät (sonst dunkelt er den Screenshot ab). Damit die Hand unten trotzdem
 * so dunkel wird wie der Rest: derselbe Verlauf, aber mit der Hand als Maske – durchs Display-Loch fällt er nicht. */
.hero__geraet::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, oklch(0.11 0.004 60 / 0.75) 0%, oklch(0.11 0.004 60 / 0.3) 35%, oklch(0.11 0.004 60 / 0) 60%);
  -webkit-mask: url(../medien/hero/hand-handy.webp) center / 100% 100% no-repeat; mask: url(../medien/hero/hand-handy.webp) center / 100% 100% no-repeat;
}
/* Hand ans warme Licht des Hintergrunds angleichen (Test 21.10.2026; zum Zurücknehmen einfach diese Zeile löschen) */
.hero__handy { filter: brightness(0.9) sepia(0.12); }
/* Schmal: Text steht untereinander über die ganze Breite, also Bild oben, Text darunter */
@media (max-width: 819px) {
  .hero__rahmen { height: auto; display: flex; flex-direction: column; }
  .hero__geraet { position: relative; left: auto; bottom: auto; transform: translateX(4%); align-self: center; width: min(82%, 360px); height: auto; margin-top: 16px; }
  .hero .hero__inhalt { position: relative; margin-top: -48px; }
}
.hero__schleier {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top,
    oklch(0.11 0.004 60 / 0.8) 0%, oklch(0.11 0.004 60 / 0.35) 40%, oklch(0.11 0.004 60 / 0) 65%);
}
.hero__inhalt {
  position: absolute; z-index: 2; left: 0; right: 0; bottom: 0;
  max-width: var(--inhalt); margin: 0 auto; padding: 0 var(--rand) clamp(28px, 4vw, 48px);
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 32px 64px;
  color: var(--weiss);
}
.hero__links { flex: 1 1 520px; display: flex; flex-direction: column; gap: clamp(28px, 4vw, 56px); }
.hero__links .h1 { max-width: 11em; color: var(--weiss); }
.satzzeile { display: block; }   /* ein Satz je Zeile, kein Umbruch mitten im Satz */
.hero__fakten { color: var(--nav-link); }
.hero__fakten a { color: var(--weiss); text-underline-offset: 4px; }
.hero__rechts { flex: 0 1 380px; display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.hero__rechts .label { color: var(--orange-label); }
.hero__rechts p { margin: 0; font-size: 18px; line-height: 1.55; color: oklch(0.95 0.006 80); text-wrap: pretty; }
.hero__knoepfe { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; width: max-content; max-width: 100%; }
/* Zahlungs-Hinweis klein direkt unter dem Knopf, linksbündig wie alles im Kopf */
.hero__knopf { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; max-width: 100%; }
.hero__zahlung { font-size: 13px; color: var(--nav-link); }

/* -------------------------------------------------------------------------
   Bildplatz (bis echte Fotos und Screenshots da sind)
   ------------------------------------------------------------------------- */
.bildplatz {
  position: relative; border-radius: 22px; background: var(--chip);
  display: flex; align-items: flex-end; padding: 18px 20px; min-height: 220px;
  color: var(--text-gedaempft); font-size: 14px;
  border: 1.5px dashed oklch(0.47 0.01 60 / 0.45);
}
.bildplatz--dunkel { background: var(--zweitton-punkt); color: oklch(0.95 0.006 80); border-color: oklch(0.99 0.003 80 / 0.35); }
.bildplatz::before { content: "Bild folgt · "; font-weight: 600; margin-right: 4px; }

/* -------------------------------------------------------------------------
   Chips, Umschalter, Status
   ------------------------------------------------------------------------- */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { background: var(--papier-hell); border: 1px solid var(--linie); border-radius: 9px; padding: 8px 14px; font-size: 15px; }
.pill { border-radius: 999px; padding: 6px 12px; font-size: 14px; font-weight: 500; background: var(--chip); }
.pill--aktiv { background: var(--orange); }

.umschalter { display: inline-flex; gap: 4px; padding: 4px; background: var(--chip); border-radius: 12px; }
.umschalter button {
  font-size: 16px; font-weight: 500; padding: 9px 18px; border-radius: 9px; border: none; cursor: pointer;
  background: transparent; color: var(--graphit);
}
.umschalter button[aria-pressed="true"] { background: var(--papier-hell); }

.status { display: inline-flex; align-items: center; gap: 8px; }
.status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--gruen); }
.status--zu::before { background: var(--rot); }

.badge { border-radius: 999px; padding: 5px 12px; font-size: 14px; font-weight: 500; }
.badge--gruen { background: var(--gruen-hell); color: var(--gruen-text); }
.badge--rot { background: var(--rot-hell); color: var(--rot-text); }

/* -------------------------------------------------------------------------
   Karten
   ------------------------------------------------------------------------- */
.karte { background: var(--papier-hell); border: 1px solid var(--linie); border-radius: 24px; padding: 32px; }
.infokarte {
  background: var(--zweitton); border-radius: 20px; padding: 22px 24px;
  display: flex; flex-direction: column; gap: 10px;
}
.infokarte .label { color: var(--graphit); }
.infokarte__zahl { font-size: clamp(36px, 3.4vw, 48px); font-weight: 500; letter-spacing: -0.035em; line-height: 1; }
.punkte { display: flex; justify-content: space-between; margin-top: 8px; }
.punkte span { width: 16px; height: 16px; border-radius: 50%; background: var(--graphit); }
.punkte span.leer { background: var(--zweitton-punkt); }

/* -------------------------------------------------------------------------
   Liste (Titel, Text, Meta, getrennt durch feine Linien)
   ------------------------------------------------------------------------- */
.liste { display: flex; flex-direction: column; }
.liste__eintrag { display: flex; flex-direction: column; gap: 12px; padding: 28px 0; border-bottom: 1px solid var(--linie); }
.liste__eintrag:first-child { padding-top: 0; }

/* Vertrauensliste: Titel links, Zeilen rechts */
.vertrauen { display: flex; flex-wrap: wrap; gap: 28px 80px; align-items: flex-start; }
.vertrauen > .h3 { flex: 1 1 280px; }
.vertrauen__zeilen { flex: 1.6 1 480px; display: grid; grid-auto-rows: 1fr; } /* alle Zeilen gleich hoch */
.vertrauen__zeile {
  display: flex; flex-wrap: wrap; gap: 4px 32px; align-content: center; align-items: center; padding: 20px 0; border-top: 1px solid var(--linie);
}
.vertrauen__zeile:last-child { border-bottom: 1px solid var(--linie); }
.vertrauen__zeile strong { flex: 0 1 240px; font-size: 18px; font-weight: 500; }
.vertrauen__zeile span { flex: 1 1 260px; font-size: 17px; line-height: 1.5; color: var(--text-gedaempft); }

/* -------------------------------------------------------------------------
   Dunkles Band (einmal pro Seite)
   ------------------------------------------------------------------------- */
.band { padding: 0 clamp(12px, 2vw, 24px); }
.band__flaeche { background: var(--graphit); color: oklch(0.97 0.006 80); border-radius: 32px; }
.band__flaeche .inhalt { padding-top: clamp(64px, 7vw, 96px); padding-bottom: clamp(64px, 7vw, 96px); }
.band .label { color: var(--auf-dunkel-gedaempft); }
.band .text { color: var(--auf-dunkel-gedaempft); }
.band a:not(.knopf) { color: var(--weiss); }
.schritte { display: grid; grid-auto-rows: 1fr; } /* alle Schritte gleich hoch, egal wie lang der Text */
.schritt {
  display: flex; flex-wrap: wrap; gap: 8px 28px; align-items: baseline; align-content: center; padding: 26px 0;
  border-top: 1px solid var(--auf-dunkel-linie);
}
.schritt:last-child { border-bottom: 1px solid var(--auf-dunkel-linie); }
.schritt__nr { flex: 0 0 40px; font-family: var(--schrift-display); font-size: 22px; font-weight: 600; color: var(--orange); }
.schritt__inhalt { flex: 1 1 260px; display: flex; flex-direction: column; gap: 8px; }
.schritt__titel { font-size: clamp(24px, 2.2vw, 30px); font-weight: 500; letter-spacing: -0.02em; }

/* App-Store-Badges: Platzhalter, bis die offiziellen Badges da sind */
.badges { display: flex; flex-wrap: wrap; gap: 12px; }
.storebadge {
  width: 160px; height: 52px; border-radius: 12px; border: 1.5px dashed currentColor;
  display: flex; align-items: center; justify-content: center; font-size: 14px; opacity: 0.75;
  text-decoration: none;
}
.badges--klein .storebadge { width: 128px; height: 40px; font-size: 13px; }

/* -------------------------------------------------------------------------
   Preiskarten
   ------------------------------------------------------------------------- */
.preise { display: flex; flex-wrap: wrap; gap: 20px; align-items: stretch; }
.preiskarte {
  flex: 1 1 300px; display: flex; flex-direction: column; gap: 14px;
  background: var(--papier-hell); border: 1px solid var(--linie); border-radius: 24px; padding: 32px;
}
.preiskarte--orange { background: var(--orange); border-color: var(--orange); }
.preiskarte__kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.preiskarte__name { font-size: 22px; font-weight: 500; }
.preiskarte__preis { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin-top: 8px; }
.preiskarte__betrag { font-size: 56px; font-weight: 500; letter-spacing: -0.04em; line-height: 1; }
.preiskarte__einheit { font-size: 16px; color: var(--text-gedaempft); }
.preiskarte__notiz { margin-top: auto; font-size: 13px; color: var(--text-gedaempft); text-align: center; }   /* ganz klein direkt über dem Knopf (Flex: Mensa-Vergleich), im freien Platz unter der Liste */
.preiskarte--orange .preiskarte__einheit, .preiskarte--orange .meta { color: var(--graphit); }
.preiskarte__leistung {
  display: flex; flex-direction: column; gap: 10px; margin-top: 10px; padding-top: 20px;
  border-top: 1px solid var(--linie); font-size: 17px;
}
.preiskarte--orange .preiskarte__leistung { border-top-color: oklch(0.15 0.005 60 / 0.2); }
.preiskarte .knopf { margin-top: auto; }
/* Kopf, Text, Preis, Leistungen und Knopf jeder Karte auf denselben Zeilen: die Linie über den
   Leistungen steht in allen Karten auf gleicher Höhe, auch wenn ein Preis zweizeilig wird. */
@supports (grid-template-rows: subgrid) {
  .preise { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
  .preiskarte { display: grid; grid-row: span 5; grid-template-rows: subgrid; row-gap: 14px; }
  .preiskarte .knopf { align-self: end; }
}

/* -------------------------------------------------------------------------
   Akkordeon (Fragen)
   ------------------------------------------------------------------------- */
.akkordeon details { border-bottom: 1px solid var(--linie); }
.akkordeon summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 24px;
  padding: 24px 0; font-size: clamp(19px, 1.7vw, 22px); font-weight: 500; letter-spacing: -0.01em;
}
.akkordeon summary::-webkit-details-marker { display: none; }
.akkordeon summary::after { content: "+"; flex: none; font-size: 24px; line-height: 1; font-weight: 400; }
.akkordeon details[open] summary::after { content: "−"; }
.akkordeon details > div { margin: 0 0 24px; max-width: 640px; font-size: 17px; line-height: 1.6; color: var(--text-gedaempft); }

/* -------------------------------------------------------------------------
   Formulare
   ------------------------------------------------------------------------- */
.feld {
  width: 100%; font-size: 17px; color: var(--graphit); background: var(--weiss);
  border: 1px solid var(--linie); border-radius: 12px; padding: 13px 16px; outline: none;
}
.feld:focus { border-color: var(--graphit); box-shadow: var(--fokus); }
.feld--fehler { border-color: var(--rot); }
.feld-hinweis--fehler { font-size: 14px; color: var(--rot-text); }

/* -------------------------------------------------------------------------
   Footer
   ------------------------------------------------------------------------- */
.footer { border-top: 1px solid var(--linie); }
/* Spalten so breit wie ihr Inhalt, der freie Platz verteilt sich gleichmäßig dazwischen */
.footer__inhalt {
  padding-top: 56px; padding-bottom: 48px; display: grid; gap: 40px 48px;
  grid-template-columns: minmax(220px, auto) repeat(5, auto); justify-content: space-between;
}
@media (max-width: 1100px) { .footer__inhalt { grid-template-columns: repeat(3, auto); } .footer__marke { grid-column: 1 / -1; } }
@media (max-width: 640px) { .footer__inhalt { grid-template-columns: repeat(2, auto); justify-content: start; column-gap: 56px; } }
.footer__marke { display: flex; flex-direction: column; gap: 3px; } /* Logo auf Höhe der Spaltentitel, Satz auf Höhe der ersten Linkzeile */
.footer__marke .wortmarke { height: 26px; width: auto; align-self: flex-start; margin-top: 4px; } /* Oberkante des Logos auf Höhe der Spaltentitel */
.footer__spalte { display: flex; flex-direction: column; gap: 10px; font-size: 16px; }
.footer__spalte a { text-decoration: none; }
.footer__spalte a:hover { opacity: 0.65; }
.footer__satz { padding-bottom: 40px; font-size: 15px; color: var(--text-gedaempft); }
/* Anmerkungen: hochgestellte Zahl im Text, Erklärungen aufklappbar unter dem Satz im Footer */
sup.fussnote { font-size: .7em; line-height: 0; margin-left: 1px; }
sup.fussnote a { text-decoration: none; color: inherit; }
sup.fussnote a:hover { color: var(--graphit); }
.fussnoten p sup { font-size: .75em; margin-right: 2px; }
.footer__satz--mit-fussnoten { padding-bottom: 16px; }
.fussnoten { margin-top: 10px; padding-top: 4px; border-top: 1px solid var(--linie); }
.fussnoten summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; font-size: 14px; line-height: 1; padding: 2px 0; color: var(--text-gedaempft); }
.fussnoten summary::-webkit-details-marker { display: none; }
.fussnoten summary:hover { color: var(--graphit); }
.fussnoten summary svg { transition: transform .2s; }
.fussnoten[open] summary svg { transform: rotate(180deg); }
.fussnoten p { margin: 6px 0 0; max-width: 46em; font-size: 14px; }

/* Umschalter mit Schieber (gradion.js): der helle Hintergrund des gewählten Knopfs ist ein eigenes
   Element, das federnd zum neuen Knopf gleitet. Ohne JavaScript bleibt der Hintergrund am Knopf. */
.umschalter--feder { position: relative; }
.umschalter--feder button { position: relative; z-index: 1; }
.umschalter--feder button[aria-pressed="true"] { background: transparent; }
.umschalter__schieber { position: absolute; top: 4px; bottom: 4px; left: 0; border-radius: 9px; background: var(--papier-hell); pointer-events: none; will-change: transform, width; }

/* Feder-Schieber in Segment-Schaltern (js/schieber.js): der Hintergrund des gewählten Knopfs gleitet
   als eigenes Element unter den Knöpfen; die Knöpfe selbst bleiben durchsichtig. */
.schieber-leiste { position: relative; }
.schieber-leiste > button { position: relative; z-index: 1; }
.schieber-leiste > button[aria-selected="true"], .schieber-leiste > button[aria-pressed="true"] { background: transparent; box-shadow: none; }
.schieber { position: absolute; top: 4px; bottom: 4px; left: 0; z-index: 0; border-radius: 12px; background: var(--graphit); pointer-events: none; will-change: transform, width; }