/* ==========================================================================
   padit — Landing Page, Entwurf B („Reicht das noch bis zum 28.?“)
   Zielgruppe 16–40. Kurze Sätze, große Zahlen, echte Screenshots.
   Farbwelt: die Tokens der App (lib/theme/index.ts) — Weiß und Graustufen
   wie im hellen Erscheinungsbild der App, Limette als Signal für „übrig“.
   ========================================================================== */

:root {
  color-scheme: light;

  /* Schrift- und Flächenfarben. Nur diese kippen im dunklen Erscheinungsbild —
     die dunklen Bänder (Hero, Fakten, .on-dark, Fußzeile) bleiben, wie sie sind. */
  --ink:        #111827;
  --ink-2:      #4b5563;
  --ink-3:      #6b7280;
  --ground:     #f9fafb;
  --surface:    #ffffff;
  --sunk:       #f3f4f6;
  --rule:       #e5e7eb;
  --track:      #e5e7eb;
  --link:       #1d4ed8;

  /* Umgekehrter Block auf dem jeweiligen Grund: Zahlensteine, Marker,
     der „so rechnet padit"-Balken. Hell wie dunkel der dunkelste Ton der Seite. */
  --block:      #111827;
  --block-ink:  #ffffff;

  /* Die App-Oberfläche im nachgebauten Screen. Dieselben Werte wie
     lib/theme/index.ts, damit der Nachbau neben den echten Aufnahmen besteht. */
  --app-bg:     #f9fafb;
  --app-card:   #ffffff;
  --app-border: #f3f4f6;
  --app-text:   #111827;
  --app-muted:  #6b7280;
  --app-faint:  #9ca3af;
  --app-neg:    #ef4444;
  --app-tag:    #2563eb;
  --app-tag-bg: rgba(37,99,235,.12);
  --app-rule:   rgba(17,24,39,.09);
  --app-bat:    rgba(17,24,39,.5);
  --app-day:    #111827;

  --blue:       #2563eb;
  --blue-deep:  #10265e;
  --blue-dark:  #0a0f1d;
  /* Akzent: Bernstein. Er steht ausnahmslos auf dunklem Grund — Kopfzeile,
     Hero, .on-dark-Bänder, die schwarzen Marker —, deshalb genügt ein Wert für
     beide Erscheinungsbilder. Warm, weil die App warm ist: ihre Symbole und
     Warnhinweise liegen im selben Bernstein. Damit er nicht mit den Diagrammen
     kollidiert, sind dort Orange und Gelb ausgebaut — die Markenfarbe hat den
     ersten Zugriff, die Datenfarben weichen aus, nicht umgekehrt. */
  --accent:      #fbbf24;
  --accent-soft: #fcd34d;
  --accent-ink:  #2b1d00;

  --pos:        #16a34a;
  --neg:        #e03131;
  --warn:       #eab308;

  --night:      #0b0e14;
  --night-2:    #1f2937;
  --night-ink:  #f3f4f6;
  --night-mut:  #9ca3af;
  --night-rule: rgba(255,255,255,.12);

  --font: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --wrap: 1180px;
  --r: 20px;

  --t1: clamp(2.05rem, 5.8vw, 4.4rem);   /* Hero */
  --t2: clamp(1.72rem, 4.4vw, 3.3rem);   /* Sektionstitel */
  --t3: clamp(1.35rem, 2.4vw, 1.75rem);  /* Unterüberschrift */
  --tb: clamp(1.02rem, 1.35vw, 1.16rem); /* Fließtext */
}

/* --- Dunkel -------------------------------------------------------------
   Drei Tiefen bleiben unterscheidbar: --ground für die gewöhnlichen Bänder,
   --sunk für die abgesetzten, --night für die, die schon hell dunkel waren.
   Sonst wäre die Seite unten eine einzige Fläche, und der Wechsel der Bänder
   trägt hier die Gliederung.
   Erst der Systemzustand, dann die ausdrückliche Wahl — in beide Richtungen,
   damit der Schalter auch gegen das System gewinnt. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --ink:       #f3f4f6;
    --ink-2:     #9ca3af;
    --ink-3:     #7d8798;
    --ground:    #111827;
    --surface:   #1f2937;
    --sunk:      #0d1119;
    --rule:      #374151;
    --track:     #374151;
    --link:      #93c5fd;
    --block:     #05070b;
    --block-ink: #f3f4f6;
    --neg:       #f87171;
    --pos:       #4ade80;
    --app-bg:     #0b0e14;
    --app-card:   #1f2937;
    --app-border: transparent;
    --app-text:   #f3f4f6;
    --app-muted:  #9ca3af;
    --app-faint:  #6b7280;
    --app-neg:    #f87171;
    --app-tag:    #93c5fd;
    --app-tag-bg: rgba(37,99,235,.22);
    --app-rule:   rgba(255,255,255,.07);
    --app-bat:    rgba(255,255,255,.6);
    --app-day:    #f3f4f6;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --ink:       #f3f4f6;
  --ink-2:     #9ca3af;
  --ink-3:     #7d8798;
  --ground:    #111827;
  --surface:   #1f2937;
  --sunk:      #0d1119;
  --rule:      #374151;
  --track:     #374151;
  --link:      #93c5fd;
  --block:     #05070b;
  --block-ink: #f3f4f6;
  --neg:       #f87171;
  --pos:       #4ade80;
  --app-bg:     #0b0e14;
  --app-card:   #1f2937;
  --app-border: transparent;
  --app-text:   #f3f4f6;
  --app-muted:  #9ca3af;
  --app-faint:  #6b7280;
  --app-neg:    #f87171;
  --app-tag:    #93c5fd;
  --app-tag-bg: rgba(37,99,235,.22);
  --app-rule:   rgba(255,255,255,.07);
  --app-bat:    rgba(255,255,255,.6);
  --app-day:    #f3f4f6;
}

* { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* `clip` statt `hidden`: `hidden` macht das Element zum Scrollcontainer der
     klebenden Kopfzeile — und der scrollt selbst nicht, also klebte sie nicht,
     sondern fuhr mit dem Inhalt davon. `clip` hält denselben seitlichen
     Überlauf zurück, ohne einen Scrollcontainer aufzumachen. */
  overflow-x: clip;
  /* Die Kopfzeile steht jetzt wirklich über dem Inhalt: Sprungziele müssen
     unter ihr anfangen, sonst liegt die Überschrift darunter. */
  scroll-padding-top: 78px;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--tb);
  line-height: 1.55;
  letter-spacing: -0.005em;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { margin: 0; font-weight: 700; letter-spacing: -0.035em; line-height: 1.06; }
h1 { font-size: var(--t1); }
h2 { font-size: var(--t2); }
h3 { font-size: var(--t3); letter-spacing: -0.025em; line-height: 1.15; }
p  { margin: 0 0 1em; }
a  { color: inherit; }
img { max-width: 100%; display: block; }
ul { margin: 0; padding: 0; list-style: none; }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: 22px; }

.num { font-family: var(--mono); font-feature-settings: "tnum" 1; letter-spacing: -0.02em; }

.eyebrow {
  font-size: .76rem; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-3); margin: 0 0 14px;
}
.eyebrow--on { color: rgba(255,255,255,.62); }

.lede { font-size: clamp(1.08rem, 1.7vw, 1.3rem); line-height: 1.5; color: var(--ink-2); max-width: 46ch; }
.on-dark .lede, .hero .lede, .band--blue .lede { color: var(--night-mut); }
.band--blue .lede { color: rgba(255,255,255,.82); }

/* --- Buttons ------------------------------------------------------------ */
.btn {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 15px 24px; border-radius: 999px;
  font-size: 1rem; font-weight: 600; text-decoration: none;
  border: 1.5px solid transparent; cursor: pointer;
  transition: transform .14s ease, background .18s ease, border-color .18s ease;
}
.btn:active { transform: translateY(1px); }
.btn--accent { background: var(--accent); color: var(--accent-ink); }
.btn--accent:hover { background: var(--accent-soft); }
.btn--line  { border-color: rgba(255,255,255,.34); color: #fff; }
.btn--line:hover { border-color: #fff; }
.btn--sm { padding: 10px 18px; font-size: .92rem; }

/* --- Kopfzeile ---------------------------------------------------------- */
.top {
  position: sticky; top: 0; z-index: 50;
  background: rgb(17 24 40);
  border-bottom: 1px solid var(--night-rule);
}
.top__in { display: flex; align-items: center; gap: 26px; height: 62px; }
.brand { display: flex; align-items: center; gap: 9px; color: #fff; text-decoration: none; font-weight: 700; font-size: 1.12rem; letter-spacing: -.03em; }
/* Die Kopfzeile ist in beiden Erscheinungsbildern dunkel, und sie traegt
   bereits die Tinte des Zeichens (rgb(17 24 40) gegen #111827). Die Platte
   geht darin auf, stehen bleibt das weisse „p" mit der bernsteinfarbenen
   Punze — dasselbe Zeichen wie ueberall sonst, nur ohne sichtbaren Rand.
   Inline statt als Bild, damit es bei jeder Aufloesung scharf bleibt. */
.brand__mark { width: 40px; height: 40px; display: block; flex: none; }
.top nav { display: flex; gap: 22px; margin-left: auto; }
.top nav a { color: rgba(255,255,255,.72); text-decoration: none; font-size: .93rem; font-weight: 500; }
.top nav a:hover { color: #fff; }
.themetoggle {
  display: grid; place-items: center; width: 36px; height: 36px; flex: none;
  border-radius: 50%; border: 1px solid var(--night-rule); cursor: pointer;
  background: rgba(255,255,255,.07); color: rgba(255,255,255,.8);
  transition: background .16s ease, color .16s ease;
}
.themetoggle:hover { background: rgba(255,255,255,.14); color: #fff; }
.themetoggle .ms { font-size: 19px; }
@media (max-width: 860px) {
  .top nav { display: none; }
  .top__in { gap: 10px; }
  .themetoggle { margin-left: auto; }
}

/* --- Hero --------------------------------------------------------------- */
.hero {
  position: relative; overflow: hidden;
  background: var(--night);
  color: var(--night-ink);
  padding: clamp(56px, 8vw, 104px) 0 clamp(72px, 9vw, 120px);
}
.hero::before {
  content: ""; position: absolute; inset: -30% -10% auto -10%; height: 120%;
  background:
    radial-gradient(60% 55% at 78% 18%, rgba(37,99,235,.55), transparent 62%),
    radial-gradient(46% 44% at 12% 82%, rgba(251,191,36,.13), transparent 64%);
  pointer-events: none;
}
.hero__in { position: relative; display: grid; grid-template-columns: 1.16fr .84fr; gap: clamp(28px, 5vw, 70px); align-items: center; }
.hero h1 .u {
  background-image: linear-gradient(rgba(251,191,36,.85), rgba(251,191,36,.85));
  background-repeat: no-repeat;
  background-size: 100% .30em;
  background-position: 0 .76em;
  padding-inline: .04em;
}
/* Ein Wort in Limette statt unterlegt. Für Wörter mit Unterlänge: der Marker
   schneidet durch das „g", und Weiß auf Limette liest sich schlecht. */
.hero h1 .u--text { background: none; color: var(--accent); padding-inline: 0; }
.hero .lede { margin-top: 22px; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.hero__trust { margin-top: 20px; font-size: .9rem; color: var(--night-mut); display: flex; flex-wrap: wrap; gap: 8px 18px; }
.hero__trust span { display: inline-flex; align-items: center; gap: 7px; }
.hero__trust i { width: 5px; height: 5px; border-radius: 50%; background: var(--accent); display: inline-block; }

@media (max-width: 940px) {
  .hero__in { grid-template-columns: 1fr; }
  .hero { padding-top: 40px; }
}

/* --- Persona-Schalter --------------------------------------------------- */
.switch { margin-bottom: 16px; }
.switch__lbl { font-size: .82rem; color: var(--night-mut); margin-bottom: 9px; }
.switch__row { display: inline-flex; padding: 4px; gap: 4px; background: rgba(255,255,255,.08); border: 1px solid var(--night-rule); border-radius: 999px; }
.switch__row button {
  font: inherit; font-size: .88rem; font-weight: 600; color: rgba(255,255,255,.72);
  background: none; border: 0; padding: 8px 15px; border-radius: 999px; cursor: pointer;
  transition: background .16s ease, color .16s ease;
}
.switch__row button[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); }
/* Sobald der Hero einspaltig wird, steht das Telefon mittig — der Schalter
   gehört dazu und stünde links davon verloren. `.switch__row` ist inline-flex,
   also genügt die Textausrichtung des Blocks darüber. */
@media (max-width: 940px) {
  .switch { text-align: center; }
}

/* --- Telefon ------------------------------------------------------------ */
.phone {
  width: 100%; max-width: 316px; margin-inline: auto;
  background: #05070d; border-radius: 44px; padding: 9px;
  border: 1px solid rgba(255,255,255,.16);
  /*box-shadow: 0 38px 78px -32px rgba(0,0,0,.55), 0 0 0 1px rgba(0,0,0,.35);*/
}
.phone > * { border-radius: 36px; overflow: hidden; display: block; }
.phone--tilt {
  /* Die Ruhelage gehört dem gewählten Beispiel: jedes kippt anders.
     Voreinstellung ist „1. Job", das beim Laden ausgewählt ist. */
  --tilt: 2.4deg;
  transform: rotate(var(--tilt));
  transition: transform .5s ease;
}

/* Wechsel der Beispielzahlen: das Gerät wird einmal geschüttelt und legt sich
   dann in eine neue Schräge — Azubi nach links, 1. Job nach rechts, Familie
   wieder nach links. Die Ausschläge werden von Mal zu Mal kleiner und enden
   genau auf der neuen Ruhelage, sonst sähe man am Schluss einen Sprung.
   Die Anzeige blendet dabei kurz auf, damit die neuen Zahlen nicht
   hart umspringen. */
@keyframes phone-shake {
  0%   { transform: rotate(var(--tilt-from)) translateX(0); }
  12%  { transform: rotate(calc(var(--tilt-to) + 3.6deg)) translateX(7px); }
  28%  { transform: rotate(calc(var(--tilt-to) - 3.6deg)) translateX(-9px); }
  44%  { transform: rotate(calc(var(--tilt-to) + 2.3deg)) translateX(5px); }
  60%  { transform: rotate(calc(var(--tilt-to) - 2.2deg)) translateX(-5px); }
  76%  { transform: rotate(calc(var(--tilt-to) + 1.1deg)) translateX(2px); }
  88%  { transform: rotate(calc(var(--tilt-to) - 0.8deg)) translateX(-1px); }
  100% { transform: rotate(var(--tilt-to)) translateX(0); }
}
@keyframes ui-refresh {
  from { opacity: .4; }
  to   { opacity: 1; }
}
.phone--tilt.phone--shake { animation: phone-shake 700ms ease-out both; }
.phone--tilt.phone--shake .ui { animation: ui-refresh 420ms ease-out both; }

@media (prefers-reduced-motion: reduce) {
  .phone--tilt { transition: none; }
  .phone--tilt.phone--shake,
  .phone--tilt.phone--shake .ui { animation: none; }
}
.phone img { width: 100%; height: auto; }

/* `figure` bringt vom Browser `margin: 1em 40px` mit. Im Raster schrumpfte
   davon nur das Bild, in der Wischreihe stehen daraus 80 px zwischen zwei
   Aufnahmen. */
.shot { display: flex; flex-direction: column; align-items: center; gap: 14px; margin: 0; }
.shot figcaption { font-size: .84rem; color: var(--ink-2); text-align: center; max-width: 30ch; }
.on-dark .shot figcaption { color: var(--night-mut); }

/* --- Nachgebauter App-Screen im Hero ------------------------------------ */
.ui {
  background: var(--app-bg); color: var(--app-text); font-size: 13px; line-height: 1.35;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", var(--font);
  padding: 14px 13px 0; min-height: 560px; display: flex; flex-direction: column;
}
.ui__bar { display: flex; justify-content: space-between; font-size: 11.5px; font-weight: 600; color: var(--app-text); padding: 2px 6px 12px; }
.ui__bat { width: 22px; height: 11px; border: 1.2px solid var(--app-bat); border-radius: 3px; display: inline-block; position: relative; }
.ui__bat::after { content: ""; position: absolute; inset: 1.5px; background: var(--app-text); border-radius: 1px; }
.ui__head { display: flex; align-items: center; justify-content: space-between; padding: 0 4px 12px; }
.ui__head b { font-size: 17px; font-weight: 700; }
.ui__head span { font-size: 12px; color: var(--app-muted); }

.ui__hero { background: var(--blue); color: #fff; border-radius: 17px; padding: 15px 15px 16px; }
.ui__k { font-size: 11.5px; color: rgba(255,255,255,.82); font-weight: 600; }
.ui__v { font-size: 33px; font-weight: 800; letter-spacing: -.035em; margin: 3px 0 2px; font-variant-numeric: tabular-nums; }
.ui__d { font-size: 11.5px; color: rgba(255,255,255,.78); }
.ui__tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 13px; }
.ui__tile { background: rgba(255,255,255,.15); border-radius: 11px; padding: 8px 10px; }
.ui__tile span { display: block; font-size: 10.5px; color: rgba(255,255,255,.8); }
.ui__tile b { font-size: 13.5px; font-variant-numeric: tabular-nums; }
.ui__bar2 { height: 7px; border-radius: 999px; overflow: hidden; display: flex; margin: 11px 0 7px; background: rgba(255,255,255,.22); }
.ui__bar2 i { display: block; height: 100%; }
.ui__leg { display: flex; justify-content: space-between; font-size: 10.5px; color: rgba(255,255,255,.85); }
.ui__leg i { width: 7px; height: 7px; border-radius: 50%; display: inline-block; margin-right: 5px; }

.ui__card { background: var(--app-card); box-shadow: inset 0 0 0 1px var(--app-border); border-radius: 15px; padding: 13px 14px; margin-top: 11px; }
.ui__card .lab { font-size: 11.5px; color: var(--app-muted); font-weight: 600; }
.ui__card .big { font-size: 22px; font-weight: 800; letter-spacing: -.03em; font-variant-numeric: tabular-nums; margin-top: 2px; }
.ui__card .sub { font-size: 11px; color: var(--app-faint); margin-top: 2px; }
.ui__day { color: var(--app-day); }

.ui__list { margin-top: 11px; display: grid; gap: 1px; }
.ui__row { display: flex; align-items: center; gap: 10px; background: var(--app-card); padding: 10px 12px; }
.ui__row:first-child { border-radius: 15px 15px 4px 4px; }
.ui__row:last-child  { border-radius: 4px 4px 15px 15px; }
.ui__av { width: 27px; height: 27px; border-radius: 50%; flex: none; display: grid; place-items: center; font-size: 13px; }
.ui__row .t { font-size: 13px; font-weight: 600; }
.ui__row .s { font-size: 10.5px; color: var(--app-faint); }
.ui__row .a { margin-left: auto; font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
.ui__row .a.neg { color: var(--app-neg); }
.ui__row .a.mut { color: var(--app-muted); }
.ui__tag { display: inline-block; font-size: 8.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--app-tag); background: var(--app-tag-bg); border-radius: 4px; padding: 1px 4px; margin-right: 5px; }
.ui__tabs { margin-top: auto; display: grid; grid-template-columns: repeat(5,1fr); gap: 2px; padding: 9px 0 10px; border-top: 1px solid var(--app-rule); font-size: 8.5px; color: var(--app-faint); text-align: center; }
.ui__tabs div[data-on] { color: var(--blue); }
.ui__tabs i { display: block; font-size: 15px; font-style: normal; margin-bottom: 2px; }

/* --- Faktenband --------------------------------------------------------- */
.facts { background: var(--night); color: #fff; border-top: 1px solid rgba(255,255,255,.08); }
.facts ul { display: grid; grid-template-columns: repeat(4, 1fr); }
.facts li { padding: 26px 26px 30px; border-left: 1px solid rgba(255,255,255,.1); }
.facts li:first-child { border-left: 0; }
.facts b { display: block; font-size: 1.02rem; margin-bottom: 5px; }
.facts p {
  margin: 0; font-size: .89rem; color: rgba(255,255,255,.74); line-height: 1.45;
}
/* Schmaler wird die Spalte, nicht der Text: sonst kippt einer der vier
   Schritte auf fünf Zeilen und die Reihe steht schief. */
@media (max-width: 1180px) {
  .facts--steps li { padding: 24px 15px 28px; }
}

/* Vier Zeilen sind gesetzt: die Texte der vier Schritte sind darauf
   geschrieben, und die Höhe steht auch dann, wenn einer kürzer umbricht.
   Nur die Spalten — die Überschrift darüber bekäme sonst dieselbe Höhe
   verpasst und risse die Zeilen weit auseinander. Und nur, solange die vier
   nebeneinander stehen: untereinander gestapelt bräuchte niemand die
   reservierte Höhe, sie stünde bloß als Loch unter jedem Absatz. */
@media (min-width: 821px) {
  .facts--steps li p { min-height: calc(4 * 1.45em); }
}
@media (max-width: 820px) {
  .facts ul { grid-template-columns: 1fr 1fr; }
  .facts li:nth-child(3) { border-left: 0; }
  .facts li { padding: 20px; }
}
@media (max-width: 560px) {
  .facts ul { grid-template-columns: 1fr; }
  .facts li { border-left: 0; border-top: 1px solid rgba(255,255,255,.1); }
  .facts li:first-child { border-top: 0; }
  .cmp__top { font-size: .72rem; letter-spacing: .06em; }
}

/* Vier Schritte statt vier Behauptungen: das Band unter dem Hero erklärt den
   Ablauf, deshalb trägt jede Spalte ihre Nummer. */
.facts__lead { padding: 46px 0 22px; }
.facts__lead h2 {
  font-size: clamp(1.5rem, 2.8vw, 2.15rem); color: #fff; letter-spacing: -.03em;
}
.facts__lead p {
  margin: 10px 0 0; max-width: 48ch; line-height: 1.5;
  color: rgba(255,255,255,.72); font-size: .98rem;
}
.facts__n {
  display: grid; place-items: center; width: 26px; height: 26px; margin-bottom: 13px;
  border-radius: 50%; background: var(--accent); color: var(--accent-ink);
  font-family: var(--mono); font-size: .78rem; font-weight: 600;
}

.note { margin: 20px 0 0; font-size: .86rem; color: var(--ink-3); }

/* --- Sektionen ---------------------------------------------------------- */
section.band { padding: clamp(64px, 9vw, 116px) 0; }
.band--sunk { background: var(--sunk); }
.band--dark, .on-dark { background: var(--night); color: var(--night-ink); }
.band--blue { background: linear-gradient(160deg, #1d4ed8, #10265e 78%); color: #fff; }

.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 5vw, 72px); align-items: center; }
.split--flip > :first-child { order: 2; }
@media (max-width: 900px) {
  .split, .split--flip { grid-template-columns: 1fr; }
  .split--flip > :first-child { order: 0; }
}

.headline-max { max-width: 18ch; }

/* Merkpunkte mit Marker.
   Das Raster liegt auf der Liste, nicht auf der Zeile: sonst richtet sich jede
   Zeile nach der Breite ihres eigenen Schildchens und die Texte stehen
   treppenförmig. Mit `display: contents` an der Zeile teilen sich alle
   dieselbe Spalte — so breit wie das längste Schild. */
.points { display: grid; grid-template-columns: max-content 1fr; gap: 16px 14px; margin-top: 30px; }
.points li { display: contents; }
.points .pin {
  font-family: var(--mono); font-size: .9rem; font-weight: 600; letter-spacing: -.01em;
  background: var(--block); color: var(--accent); border-radius: 7px; padding: 5px 9px;
  white-space: nowrap; justify-self: stretch; text-align: center;
}
.on-dark .points .pin, .band--blue .points .pin { background: rgba(255,255,255,.13); color: var(--accent); }
.points p { margin: 0; font-size: .99rem; color: var(--ink-2); line-height: 1.5; }
.on-dark .points p, .band--blue .points p { color: rgba(255,255,255,.8); }
.points strong { color: var(--ink); font-weight: 600; }
.on-dark .points strong, .band--blue .points strong { color: #fff; }

/* --- Kalender vs. Gehalt ------------------------------------------------ */
.cmp { display: grid; gap: 22px; margin-top: 34px; }
.cmp__box { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r); padding: 18px 18px 16px; }
.cmp__wrap { padding-top: 24px; }
.cmp__box--on { background: var(--block); border-color: transparent; color: var(--block-ink); }
.cmp__top { display: flex; flex-wrap: wrap; gap: 4px 14px; justify-content: space-between; align-items: baseline; font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 600; color: var(--ink-3); margin-bottom: 12px; }
.cmp__box--on .cmp__top { color: rgba(255,255,255,.55); }
.cmp__track { position: relative; height: 44px; border-radius: 10px; background: var(--track); }
.cmp__track > .cmp__fill { overflow: hidden; }
.cmp__box--on .cmp__track { background: rgba(255,255,255,.1); }
.cmp__fill { position: absolute; inset-block: 0; border-radius: 10px; }
.cmp__mark { position: absolute; inset-block: -6px; width: 2px; background: var(--neg); }
.cmp__mark b { position: absolute; top: -22px; left: 50%; transform: translateX(-50%); font-size: .68rem; font-weight: 600; color: var(--neg); white-space: nowrap; font-family: var(--mono); }
.cmp__mark--pos { background: var(--pos); }
.cmp__mark--start b { left: 0; transform: none; }
.cmp__mark--end b { left: auto; right: 0; transform: none; }
.cmp__mark--pos b { color: var(--pos); }
.cmp__foot { margin: 14px 0 0; font-size: .92rem; color: var(--ink-2); }
.cmp__box--on .cmp__foot { color: rgba(255,255,255,.72); }

/* --- Gestapelter Balken: wohin das Gehalt geht -------------------------
   Fünf Abschnitte in einer Linie. Die Farben stammen aus der geprüften
   Reihenfolge der dataviz-Palette (blau, orange, violett, gelb, grün) — und
   zwar ohne Orange und Gelb: die gehören dem Akzent. Geprüft in beiden
   Erscheinungsbildern, schlechtestes Nachbarpaar ΔE 8.6 (protan). Dazu kommen zwei weitere Kodierungen,
   damit die Farbe nie allein trägt: 2px Fuge zwischen den Abschnitten,
   Schraffur auf „Außerplanmäßig“ und eine Legende mit allen Beträgen. */
:root {
  --seg-1: #2a78d6;  /* Wohnen */
  --seg-2: #e87ba4;  /* Sparen */
  --seg-3: #4a3aa7;  /* Kredit und weitere Verträge */
  --seg-4: #e34948;  /* Außerplanmäßig */
  --seg-5: #008300;  /* Bleibt übrig */
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --seg-1: #3987e5; --seg-2: #d55181; --seg-3: #9085e9; --seg-4: #e66767; --seg-5: #008300;
  }
}
:root[data-theme="dark"] {
  --seg-1: #3987e5; --seg-2: #d55181; --seg-3: #9085e9; --seg-4: #e66767; --seg-5: #008300;
}

.stack { position: relative; margin: 46px 0 0; }
.stack__bar { display: flex; height: 40px; border-radius: 5px; overflow: hidden; }
.stack__bar span {
  display: block; height: 100%; box-sizing: border-box;
  border-right: 2px solid var(--surface);
}
.stack__bar span:last-child { border-right: 0; }
.stack__bar .is-open {
  background-image: repeating-linear-gradient(115deg,
    rgba(255,255,255,.55) 0 5px, transparent 5px 11px);
}

/* „Bleibt übrig“ wird eigens ausgezeichnet — es ist die Zahl, um die es geht. */
.stack__note {
  position: absolute; bottom: calc(100% + 11px); text-align: center;
  font-size: .8rem; font-weight: 600; color: var(--seg-5);
}
.stack__note b { font-family: var(--mono); font-size: .92rem; margin-left: 8px; }
.stack__note::after {
  content: ""; position: absolute; left: 50%; top: calc(100% + 3px);
  width: 1px; height: 7px; background: var(--seg-5);
}

.stack__key {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
  gap: 12px 20px; margin: 22px 0 0;
}
.stack__key li { display: grid; grid-template-columns: 12px 1fr; gap: 9px; align-items: start; }
.stack__key i { width: 12px; height: 12px; border-radius: 3px; margin-top: 3px; }
/* Das Kästchen trägt dieselbe Schraffur wie sein Abschnitt im Balken. */
.stack__key i.is-open {
  background-image: repeating-linear-gradient(115deg,
    rgba(255,255,255,.6) 0 2px, transparent 2px 5px);
}
.stack__key b { display: block; font-size: .88rem; font-weight: 600; }
.stack__key span { font-family: var(--mono); font-size: .82rem; color: var(--ink-2); }
.stack__key em { font-style: normal; color: var(--ink-3); margin-left: 7px; }

/* Auf dem Telefon wird die Auszeichnung rechtsbündig und zweizeilig — mittig
   über dem grünen Abschnitt liefe sie sonst über den Kartenrand hinaus.
   Der grüne Abschnitt endet ohnehin rechts, der Strich zeigt also weiter
   hinein. */
@media (max-width: 620px) {
  .stack__bar { height: 34px; }
  .stack__note {
    left: auto !important; right: 0; width: auto; text-align: right;
    font-size: .72rem; line-height: 1.3;
  }
  .stack__note b { display: block; margin: 0; font-size: .84rem; }
  .stack__note::after { left: auto; right: 18px; }
}

/* --- Balkendiagramme ----------------------------------------------------
   Zwei Farben, beide geprüft (scripts/validate_palette.js): Blau für Geld,
   das weg ist, Grün für Geld, das bleibt oder bleiben könnte. Rot gegen Grün
   wäre bei Rot-Grün-Schwäche nicht zu unterscheiden gewesen (ΔE 3.8), Limette
   auf Weiß zu blass. „Außerplanmäßig“ trägt deshalb keine dritte Farbe,
   sondern dieselbe blaue mit Schraffur.
   Jeder Balken ist direkt beschriftet — die Farbe trägt nie allein. */
:root {
  --viz-blue:   var(--seg-1);
  --viz-green:  var(--seg-5);
  --viz-track:  #eef0f3;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --viz-track: #263141; }
}
:root[data-theme="dark"] { --viz-track: #263141; }

.bars { display: grid; gap: 16px; margin-top: 34px; }
.bars__box {
  background: var(--surface); border: 1px solid var(--rule);
  border-radius: var(--r); padding: 20px 22px 18px;
}
.bars__head {
  display: flex; flex-wrap: wrap; gap: 4px 14px; justify-content: space-between;
  align-items: baseline; margin-bottom: 20px;
}
.bars__head b { font-size: 1.06rem; }
.bars__head span { font-size: .8rem; color: var(--ink-3); }

.bars__list {
  display: grid; grid-template-columns: max-content 1fr max-content;
  align-items: center; gap: 9px 14px;
}
.bars__list li { display: contents; }
.bars__name { font-size: .93rem; font-weight: 600; }
.bars__track { height: 22px; background: var(--viz-track); border-radius: 4px; }
/* Rund nur am Datenende, eckig an der Grundlinie. */
.bars__track i {
  display: block; height: 100%; border-radius: 0 4px 4px 0; background: var(--viz-blue);
  min-width: 4px;
}
/* Ausgegeben, aber nicht geplant: dieselbe Farbe, andere Oberfläche. */
.bars__track i.is-open {
  background: repeating-linear-gradient(115deg,
    var(--viz-blue) 0 7px, transparent 7px 13px);
  box-shadow: inset 0 0 0 1.5px var(--viz-blue);
}
.bars__track i.is-left  { background: var(--viz-green); }
.bars__track i.is-off   { background: var(--ink-3); opacity: .55; }
.bars__val {
  font-family: var(--mono); font-size: .86rem; font-weight: 600;
  white-space: nowrap; text-align: right;
}
.bars__val em { font-style: normal; color: var(--ink-3); margin-left: 8px; font-size: .78rem; }
.bars__note { font-size: .78rem; color: var(--ink-3); font-weight: 400; margin-left: 8px; }

/* Zeile hervorheben, wenn die Maus darüber liegt — mehr braucht es nicht,
   es steht ohnehin jeder Wert daneben. */
.bars__list li:hover .bars__track { background: var(--rule); }

.bars__foot { margin: 18px 0 0; font-size: .93rem; color: var(--ink-2); }
.bars__foot strong { color: var(--ink); }

/* Auf dem Telefon bekommt jede Zeile ihr eigenes kleines Raster: Name und
   Betrag nebeneinander, der Balken darunter über die volle Breite. Mit
   `display: contents` ginge das nicht — dort stünde der Balken zwischen
   Name und Betrag. */
@media (max-width: 620px) {
  .bars__box { padding: 18px 15px 16px; }
  .bars__list { display: grid; grid-template-columns: 1fr; gap: 15px; }
  .bars__list li { display: grid; grid-template-columns: 1fr max-content; gap: 5px 10px; align-items: baseline; }
  /* Zeilen ausdrücklich setzen: der Balken spannt über beide Spalten und
     schöbe den Betrag sonst in eine dritte Zeile. */
  .bars__name  { grid-column: 1; grid-row: 1; }
  .bars__val   { grid-column: 2; grid-row: 1; }
  .bars__track { grid-column: 1 / -1; grid-row: 2; height: 18px; }
  .bars__note { display: block; margin: 2px 0 0; }
}

/* --- Vorher/Nachher ----------------------------------------------------- */
.rows { display: grid; gap: 10px; margin-top: 30px; }
.row2 {
  display: grid; grid-template-columns: 1fr auto 1fr; gap: 14px; align-items: center;
  background: var(--surface); border: 1px solid var(--rule); border-radius: 14px; padding: 13px 16px;
}
.row2 .raw { font-family: var(--mono); font-size: .76rem; color: var(--ink-3); line-height: 1.45; word-break: break-word; }
.row2 .arr { color: var(--ink-3); }
.row2 .clean b { display: block; font-size: 1rem; font-weight: 700; }
.row2 .clean span { font-size: .82rem; color: var(--ink-2); }
@media (max-width: 620px) { .row2 { grid-template-columns: 1fr; gap: 8px; } .row2 .arr { display: none; } }

/* --- Galerie ------------------------------------------------------------ */
.gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; margin-top: 46px; }
.gallery .phone { max-width: none; border-radius: 34px; padding: 7px; }
.gallery .phone > * { border-radius: 27px; }
/* Unterhalb der drei Spalten eine Reihe zum Wischen. Als Raster blieben von
   fünf Bildern in zwei Spalten drei Zeilen mit einer Lücke am Ende — und die
   Lücke sieht aus wie ein Fehler, nicht wie ein Ende. Gewischt wird dagegen
   so weit, wie es Bilder gibt. */
@media (max-width: 900px) {
  .gallery {
    display: flex; gap: 14px; margin-inline: -22px; padding: 0 22px 6px;
    overflow-x: auto; scroll-snap-type: x mandatory;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }
  .gallery::-webkit-scrollbar { display: none; }
  /* Das angeschnittene nächste Bild ist der ganze Hinweis darauf, dass es
     weitergeht — deshalb nie eine Breite, die glatt aufgeht. */
  .gallery > * { flex: 0 0 38%; scroll-snap-align: center; }
}
@media (max-width: 620px) {
  .gallery > * { flex: 0 0 62%; }
}

/* --- Karten ------------------------------------------------------------- */
.cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 42px; }
.card { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r); padding: 22px 20px 24px; }
.on-dark .card { background: var(--night-2); border-color: var(--night-rule); }
.card b { display: block; font-size: 1.04rem; margin-bottom: 7px; }
.card p { margin: 0; font-size: .92rem; color: var(--ink-2); line-height: 1.5; }
.on-dark .card p { color: var(--night-mut); }
.card .ico { font-size: 1.5rem; display: block; margin-bottom: 12px; }
@media (max-width: 900px) { .cards { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .cards { grid-template-columns: 1fr; } }

/* --- Kette (Datenschutz) ------------------------------------------------ */
.chain { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 36px; }
.chain__n { background: var(--night-2); border: 1px solid var(--night-rule); border-radius: 15px; padding: 16px 16px 18px; position: relative; }
.chain__n--on { border-color: var(--accent); background: rgba(251,191,36,.1); }
.chain__n b { display: block; font-size: .96rem; margin-bottom: 6px; }
.chain__n p { margin: 0; font-size: .82rem; color: var(--night-mut); line-height: 1.45; }
@media (max-width: 820px) { .chain { grid-template-columns: 1fr 1fr; } }

.twolist { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 14px; }
.twolist > div { background: var(--night-2); border: 1px solid var(--night-rule); border-radius: 15px; padding: 18px 20px 20px; }
.twolist h4 { font-size: .95rem; margin-bottom: 12px; }
.twolist li { display: flex; gap: 10px; font-size: .89rem; color: var(--night-mut); padding: 5px 0; }
.twolist .m { font-family: var(--mono); color: var(--accent); }
.twolist .m--no { color: #f87171; }
@media (max-width: 760px) { .twolist { grid-template-columns: 1fr; } }

/* --- Schritte ----------------------------------------------------------- */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 42px; counter-reset: s; }
.step { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r); padding: 24px 22px 26px; position: relative; }
.step::before {
  counter-increment: s; content: counter(s);
  font-family: var(--mono); font-size: .8rem; font-weight: 600;
  display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  background: var(--block); color: var(--accent); margin-bottom: 14px;
}
.step b { display: block; font-size: 1.06rem; margin-bottom: 7px; }
.step p { margin: 0; font-size: .93rem; color: var(--ink-2); }
@media (max-width: 820px) { .steps { grid-template-columns: 1fr; } }

/* --- Zitat / Ehrlichkeit ------------------------------------------------ */
.quote {
  font-size: clamp(1.5rem, 3.2vw, 2.3rem); font-weight: 700; letter-spacing: -.03em;
  line-height: 1.18; max-width: 20ch;
}
.quote em { font-style: normal; color: var(--accent); }

/* --- FAQ ---------------------------------------------------------------- */
.faq { max-width: 760px; margin-top: 36px; }
.faq details { border-top: 1px solid var(--rule); }
.faq details:last-child { border-bottom: 1px solid var(--rule); }
.faq summary {
  list-style: none; cursor: pointer; padding: 19px 40px 19px 0; position: relative;
  font-weight: 600; font-size: 1.04rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  font-family: var(--mono); font-size: 1.2rem; color: var(--ink-3);
}
.faq details[open] summary::after { content: "–"; }
.faq p { margin: -4px 0 20px; font-size: .97rem; color: var(--ink-2); max-width: 62ch; }

/* --- Abschluss ---------------------------------------------------------- */
.closer { text-align: center; }
.closer h2 { max-width: 16ch; margin-inline: auto; }
.closer .lede { margin: 22px auto 0; text-align: center; }
.closer__cta { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.closer__note { margin-top: 20px; font-size: .88rem; color: rgba(255,255,255,.6); }

footer { background: var(--night); color: rgba(255,255,255,.6); padding: 40px 0 54px; font-size: .88rem; }
footer .in { display: flex; flex-wrap: wrap; gap: 14px 28px; align-items: center; }
footer a { color: rgba(255,255,255,.78); text-decoration: none; }
footer a:hover { color: #fff; }
footer .sp { margin-left: auto; }

/* --- Rechtstexte -------------------------------------------------------- */
/* Impressum und Datenschutz tragen dieselbe Kopf- und Fußzeile wie die
   Startseite; hier steht nur, was eine reine Textseite zusätzlich braucht. */
.legal { max-width: 46rem; }
.legal h1 { font-size: clamp(1.9rem, 4vw, 2.6rem); letter-spacing: -.03em; line-height: 1.1; margin: 0 0 26px; }
.legal h2 {
  font-size: 1.18rem; letter-spacing: -.02em; margin: 40px 0 12px;
  padding-top: 20px; border-top: 1px solid var(--rule);
}
.legal h3 { font-size: 1rem; margin: 24px 0 6px; }
.legal p, .legal li { margin: 0; color: var(--ink-2); line-height: 1.62; }
.legal p + p { margin-top: .85rem; }
.legal ul { margin: .7rem 0 0; padding-left: 1.15rem; display: grid; gap: .4rem; }
.legal a { color: var(--link); }
/* Ein Knopf im Fließtext behält seine eigene Farbe.

   `.legal a` ist spezifischer als `.btn--accent` (0,1,1 gegen 0,1,0) und
   überschrieb es: Auf der 404-Seite stand die Schrift des Knopfes in der
   Linkfarbe — hell blau auf Bernstein, was im Dunkelmodus grau wirkt — statt
   im dunklen `--accent-ink`, das dort den Kontrast trägt. */
.legal a.btn--accent { color: var(--accent-ink); }
.legal a.btn--line   { color: #fff; }
.legal address { font-style: normal; color: var(--ink-2); line-height: 1.62; }
.legal strong { color: var(--ink); font-weight: 600; }


/* --- Sticky CTA (nur Telefon) ------------------------------------------- */
.dock {
  position: fixed; inset: auto 0 0 0; z-index: 60; display: none;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  background: rgba(11,14,20,.95); backdrop-filter: blur(12px);
  border-top: 1px solid var(--night-rule);
}
.dock .btn { width: 100%; justify-content: center; }
@media (max-width: 700px) { .dock { display: block; } body { padding-bottom: 76px; } }

/* --- Einblenden beim Scrollen ------------------------------------------- */
.rise { opacity: 0; transform: translateY(18px); transition: opacity .55s ease, transform .55s ease; }
.rise.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .rise { opacity: 1; transform: none; transition: none; } }

/* --- Material Symbols ---------------------------------------------------- */
.ms {
  font-family: "Material Symbols Rounded";
  font-weight: 400; font-style: normal; line-height: 1;
  display: inline-block; vertical-align: middle;
  font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24;
  -webkit-font-feature-settings: "liga"; font-feature-settings: "liga";
  -webkit-font-smoothing: antialiased; user-select: none;
}
.ui__av .ms { font-size: 15px; }
.card .ico { color: var(--blue); }