/* Mietwalter Landingpage — Layout und Komponenten.
 * Alle Farben, Abstände, Radien, Schatten und Zeiten kommen aus
 * styles/tokens.css. Kein Roh-Hex außerhalb der Token-Datei.
 */

/* ─────────────────────────────────────────────────────────────────────
 * Schriften — self-hosted (DSGVO: kein Google-CDN).
 * Nunito 700/800 = Display, Inter 400/500/600 = Text/UI,
 * JetBrains Mono 400 = Beträge.
 */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/fonts/inter-latin-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../assets/fonts/inter-latin-500-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../assets/fonts/inter-latin-600-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../assets/fonts/nunito-latin-700-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('../assets/fonts/nunito-latin-800-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/fonts/jetbrains-mono-latin-400-normal.woff2') format('woff2');
}

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

html {
  scroll-behavior: smooth;
  /* Sticky-Header darf Anker-Ziele nicht verdecken. */
  scroll-padding-top: 88px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--mw-bg);
  color: var(--mw-text);
  font-family: var(--mw-font-sans);
  font-size: var(--mw-text-body);
  line-height: var(--mw-text-body-line-height);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Gewichte nach DNA 12.5: Display und H1 in Nunito 800, H2 und H3 in 700.
 * Nunito kennt bewusst nur diese beiden Schnitte — „kein Black (900) in der
 * UI, zu knubbelig". */
h1, h2, h3 {
  font-family: var(--mw-font-display);
  margin: 0;
  letter-spacing: -0.01em;
}
h1 { font-weight: 800; }
h2, h3 { font-weight: 700; }
h4 {
  font-family: var(--mw-font-sans);
  font-weight: 600;
  font-size: var(--mw-text-h4);
  line-height: var(--mw-text-h4-line-height);
  margin: 0;
}
p { margin: 0; }

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

img { max-width: 100%; height: auto; display: block; }

/* Fokus — sichtbar, überall, aus dem Token. */
:focus-visible {
  outline: none;
  box-shadow: var(--mw-focus-shadow);
  border-radius: var(--mw-radius-sm);
}

.skip-link {
  position: absolute;
  left: var(--mw-space-4);
  top: calc(var(--mw-space-4) * -4);
  z-index: 100;
  padding: var(--mw-space-3) var(--mw-space-4);
  background: var(--mw-surface);
  color: var(--mw-text);
  border-radius: var(--mw-radius-md);
  box-shadow: var(--mw-shadow-md);
  transition: top var(--mw-duration-base) var(--mw-ease-standard);
}
.skip-link:focus { top: var(--mw-space-4); }

.shell {
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: var(--mw-space-5);
}

.prose { max-width: 65ch; }

/* Beträge: mono, tabellarisch, rechtsbündig (DNA 12.5). */
.num {
  font-family: var(--mw-font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--mw-text-mono);
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ─────────────────────────────────────────────────────────────────────
 * Buttons — pro Fläche genau eine dominante Aktion (DNA 12.7)
 */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--mw-space-2);
  padding: var(--mw-space-3) var(--mw-space-5);
  border-radius: var(--mw-radius-md);
  border: 1px solid transparent;
  font-family: var(--mw-font-sans);
  font-size: var(--mw-text-body);
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition:
    background-color var(--mw-duration-fast) var(--mw-ease-standard),
    border-color var(--mw-duration-fast) var(--mw-ease-standard),
    transform var(--mw-duration-fast) var(--mw-ease-standard);
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

/* Akzent/CTA — Honig mit dunklem Text. Sparsam: der Daumen-hoch-Moment. */
.btn--accent {
  background: var(--mw-accent);
  color: var(--mw-text-on-accent);
}
.btn--accent:hover {
  background: var(--mw-accent-hover);
  color: var(--mw-text-on-accent);
}

.btn--ghost {
  background: transparent;
  /* Ghost-Buttons stehen auch auf --mw-brand-subtle (Abschluss-CTA) —
   * --mw-brand wäre dort nur 4,46:1. */
  color: var(--mw-brand-hover);
  border-color: var(--mw-border-strong);
}
.btn--ghost:hover {
  background: var(--mw-brand-subtle);
  color: var(--mw-brand-hover);
}

.btn--lg { padding: var(--mw-space-4) var(--mw-space-6); font-size: var(--mw-text-body-lg); }

/* ─────────────────────────────────────────────────────────────────────
 * Chips
 */
.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--mw-space-1);
  padding: 2px var(--mw-space-2);
  border-radius: var(--mw-radius-full);
  font-size: var(--mw-text-caption);
  line-height: var(--mw-text-caption-line-height);
  font-weight: 500;
  white-space: nowrap;
}
.chip--beta {
  background: var(--mw-accent-subtle);
  color: var(--mw-text-on-accent);
  border: 1px solid var(--mw-accent);
}
[data-theme='dark'] .chip--beta { color: var(--mw-accent); }

.chip--source {
  background: var(--mw-brand-subtle);
  /* --mw-brand auf --mw-brand-subtle ergibt nur 4,46:1. --mw-brand-hover
   * trägt in hell wie dunkel sicher über AA. */
  color: var(--mw-brand-hover);
  font-family: var(--mw-font-sans);
}
.chip--ok { background: var(--mw-success-bg); color: var(--mw-success-text); }
.chip--warn { background: var(--mw-warning-bg); color: var(--mw-warning-text); }
.chip--info { background: var(--mw-info-bg); color: var(--mw-info-text); }

.icon {
  width: 20px;
  height: 20px;
  flex: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}
.icon--sm { width: 16px; height: 16px; }
.icon--lg { width: 24px; height: 24px; }

/* ─────────────────────────────────────────────────────────────────────
 * Header — sticky, schrumpft beim Scrollen
 */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in oklab, var(--mw-bg) 88%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent;
  transition:
    border-color var(--mw-duration-base) var(--mw-ease-standard),
    background-color var(--mw-duration-base) var(--mw-ease-standard);
}
.site-header.is-stuck {
  border-bottom-color: var(--mw-border);
  background: color-mix(in oklab, var(--mw-bg) 96%, transparent);
}

.site-header__inner {
  display: flex;
  align-items: center;
  gap: var(--mw-space-4);
  min-height: 72px;
  transition: min-height var(--mw-duration-base) var(--mw-ease-standard);
}
.site-header.is-stuck .site-header__inner { min-height: 60px; }

/* Lockup = Walter-Kreis + Wortmarke. Schutzraum über den Gap. */
.lockup {
  display: inline-flex;
  align-items: center;
  gap: var(--mw-space-3);
  text-decoration: none;
  flex: none;
}
.lockup__mark {
  width: 40px;
  height: 40px;
  transition: width var(--mw-duration-base) var(--mw-ease-standard),
              height var(--mw-duration-base) var(--mw-ease-standard);
}
.site-header.is-stuck .lockup__mark { width: 34px; height: 34px; }
.lockup__word { height: 20px; width: auto; }
/* Wortmarke folgt dem Theme: dunkle Tinte auf hell, weiß auf dunkel. */
.lockup__word--on-dark { display: none; }
[data-theme='dark'] .lockup__word--on-light { display: none; }
[data-theme='dark'] .lockup__word--on-dark { display: block; }

.site-nav {
  display: flex;
  align-items: center;
  gap: var(--mw-space-5);
  margin-inline-start: var(--mw-space-5);
}
.site-nav a {
  color: var(--mw-text-muted);
  text-decoration: none;
  font-size: var(--mw-text-body-sm);
  font-weight: 500;
  padding: var(--mw-space-2) 0;
  transition: color var(--mw-duration-fast) var(--mw-ease-standard);
}
.site-nav a:hover { color: var(--mw-text); }

.site-header__actions {
  display: flex;
  align-items: center;
  gap: var(--mw-space-3);
  margin-inline-start: auto;
}

.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: var(--mw-radius-md);
  border: 1px solid var(--mw-border);
  background: var(--mw-surface);
  color: var(--mw-text-muted);
  cursor: pointer;
  transition: color var(--mw-duration-fast) var(--mw-ease-standard),
              border-color var(--mw-duration-fast) var(--mw-ease-standard);
}
.theme-toggle:hover { color: var(--mw-text); border-color: var(--mw-border-strong); }
.theme-toggle .icon--moon { display: none; }
[data-theme='dark'] .theme-toggle .icon--sun { display: none; }
[data-theme='dark'] .theme-toggle .icon--moon { display: block; }

/* ─────────────────────────────────────────────────────────────────────
 * Abschnitte
 */
.section { padding-block: var(--mw-space-8); }
.section--tight { padding-block: var(--mw-space-7); }
.section--alt { background: var(--mw-surface); }

.section__head { max-width: 62ch; margin-bottom: var(--mw-space-7); }
.section__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--mw-space-2);
  color: var(--mw-brand);
  font-size: var(--mw-text-caption);
  line-height: var(--mw-text-caption-line-height);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: var(--mw-space-3);
}
.section__title {
  font-size: var(--mw-text-h2);
  line-height: var(--mw-text-h2-line-height);
  margin-bottom: var(--mw-space-4);
}
.section__lead {
  font-size: var(--mw-text-body-lg);
  line-height: var(--mw-text-body-lg-line-height);
  color: var(--mw-text-muted);
}

/* ─────────────────────────────────────────────────────────────────────
 * Hero
 */
.hero {
  position: relative;
  padding-block: var(--mw-space-8) var(--mw-space-8);
  overflow: hidden;
}
/* Ruhiger Verlauf statt Farbfläche — Honig bleibt ein Akzent, kein Teppich. */
.hero::before {
  content: '';
  position: absolute;
  inset-inline: 0;
  top: -30%;
  height: 70%;
  background: radial-gradient(
    60% 60% at 70% 40%,
    var(--mw-brand-subtle) 0%,
    transparent 70%
  );
  pointer-events: none;
  z-index: 0;
}
.hero__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: var(--mw-space-8);
  align-items: center;
}
.hero__title {
  font-size: var(--mw-text-display);
  line-height: var(--mw-text-display-line-height);
  margin-bottom: var(--mw-space-5);
}
.hero__lead {
  font-size: var(--mw-text-body-lg);
  line-height: var(--mw-text-body-lg-line-height);
  color: var(--mw-text-muted);
  max-width: 58ch;
  margin-bottom: var(--mw-space-6);
}
.hero__promises {
  list-style: none;
  margin: 0 0 var(--mw-space-6);
  padding: 0;
  display: grid;
  gap: var(--mw-space-3);
}
.hero__promises li {
  display: flex;
  align-items: flex-start;
  gap: var(--mw-space-3);
  font-size: var(--mw-text-body);
}
.hero__promises .icon { color: var(--mw-success); margin-top: 2px; }

.hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mw-space-3);
  margin-bottom: var(--mw-space-4);
}
.hero__beta {
  font-size: var(--mw-text-body-sm);
  line-height: var(--mw-text-body-sm-line-height);
  color: var(--mw-text-muted);
  max-width: 54ch;
  margin-bottom: var(--mw-space-5);
}
.hero__trust {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--mw-space-2) var(--mw-space-4);
  font-size: var(--mw-text-body-sm);
  color: var(--mw-text-muted);
}
.hero__trust span { display: inline-flex; align-items: center; gap: var(--mw-space-2); }
.hero__trust .icon { color: var(--mw-brand); }

.hero__figure { justify-self: center; }
/* Walter: nicht spiegeln, nicht drehen, kein Schlagschatten (DNA 12.8). */
.hero__walter { width: min(100%, 380px); }

/* ─────────────────────────────────────────────────────────────────────
 * Feature-Abschnitt: Text + Demo
 */
.feature {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: var(--mw-space-8);
  align-items: center;
}
/* Jeder zweite Block spiegelt die Spalten — Rhythmus ohne Trennlinien.
 * Die Demo behält dabei die breitere Spalte: sie trägt die Nachbildung der
 * App, der Text kommt auch schmaler zurecht. */
.feature--mirrored { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); }
.feature--mirrored .feature__copy { order: 2; }

.feature__points {
  list-style: none;
  margin: var(--mw-space-6) 0 0;
  padding: 0;
  display: grid;
  gap: var(--mw-space-5);
}
.feature__points li { display: flex; gap: var(--mw-space-4); }
.feature__points .icon {
  color: var(--mw-brand);
  margin-top: 3px;
}
.feature__points strong {
  display: block;
  font-weight: 600;
  margin-bottom: 2px;
}
.feature__points span {
  color: var(--mw-text-muted);
  font-size: var(--mw-text-body-sm);
  line-height: var(--mw-text-body-sm-line-height);
}

/* Ehrlichkeits-Hinweis: was das Produkt bewusst NICHT tut. */
.note {
  margin-top: var(--mw-space-6);
  padding: var(--mw-space-4);
  border-inline-start: 3px solid var(--mw-border-strong);
  background: var(--mw-surface-2);
  border-radius: var(--mw-radius-sm);
  font-size: var(--mw-text-body-sm);
  line-height: var(--mw-text-body-sm-line-height);
  color: var(--mw-text-muted);
}
.section--alt .note { background: var(--mw-bg); }

/* ─────────────────────────────────────────────────────────────────────
 * App-Replik — nachgebaute Oberfläche, keine Screenshots
 */
.app-frame {
  background: var(--mw-surface);
  border: 1px solid var(--mw-border);
  border-radius: var(--mw-radius-lg);
  box-shadow: var(--mw-shadow-lg);
  overflow: hidden;
}
.section--alt .app-frame { background: var(--mw-bg); }

.app-frame__bar {
  display: flex;
  align-items: center;
  gap: var(--mw-space-3);
  padding: var(--mw-space-3) var(--mw-space-4);
  border-bottom: 1px solid var(--mw-border);
  background: var(--mw-surface-2);
}
.app-frame__dots { display: flex; gap: 6px; }
.app-frame__dots i {
  width: 9px; height: 9px;
  border-radius: var(--mw-radius-full);
  background: var(--mw-border-strong);
}
.app-frame__title {
  font-size: var(--mw-text-caption);
  line-height: var(--mw-text-caption-line-height);
  color: var(--mw-text-muted);
  font-weight: 500;
}
.app-frame__body { padding: var(--mw-space-5); }

/* ── Finanzdashboard ────────────────────────────────────────────────── */
.kpi-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--mw-space-3);
  margin-bottom: var(--mw-space-5);
}
.kpi {
  padding: var(--mw-space-4);
  border: 1px solid var(--mw-border);
  border-radius: var(--mw-radius-md);
  background: var(--mw-surface);
  box-shadow: var(--mw-shadow-xs);
}
.section--alt .kpi { background: var(--mw-surface); }
.kpi__label {
  font-size: var(--mw-text-caption);
  line-height: var(--mw-text-caption-line-height);
  color: var(--mw-text-muted);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: var(--mw-space-2);
  /* „NETTOANFANGSRENDITE" ist länger als die Karte breit. Silbentrennung
   * (die Seite ist lang="de") statt Bruch an beliebiger Stelle — sonst steht
   * da „NETTOANFANGSR-ENDITE". overflow-wrap bleibt als Notnagel für Wörter,
   * die auch der Trennalgorithmus nicht unterbringt. */
  hyphens: auto;
  overflow-wrap: break-word;
}
.kpi__value {
  font-family: var(--mw-font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--mw-text-body-lg);
  font-weight: 500;
  color: var(--mw-text);
  margin-bottom: var(--mw-space-2);
  /* Ein Betrag gehört nie auf zwei Zeilen — „4.760,00" über „€" liest sich
   * wie zwei Angaben. */
  white-space: nowrap;
}
/* Nicht ableitbare Werte: ehrlich benennen, nie eine Schein-Null zeigen. */
.kpi__value--unknown {
  font-family: var(--mw-font-sans);
  font-size: var(--mw-text-body-sm);
  white-space: normal;
  /* Nicht --mw-text-subtle: das ist laut tokens.css Icon-/Placeholder-Farbe
   * und erreicht als Fließtext kein AA. */
  color: var(--mw-text-muted);
  font-style: italic;
}
/* Chips dürfen in der schmalen KPI-Karte umbrechen — .chip ist sonst
 * bewusst nowrap, hier ist die Karte aber schmaler als das Etikett. */
.kpi .chip { white-space: normal; }

.kpi__spark { display: block; width: 100%; height: 30px; overflow: visible; }
.kpi__spark path {
  fill: none;
  stroke: var(--mw-dv-series-1);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  /* Zeichnet sich beim Eintritt; Länge setzt das Skript. */
  stroke-dasharray: var(--spark-len, 0);
  stroke-dashoffset: var(--spark-len, 0);
  transition: stroke-dashoffset 1200ms var(--mw-ease-standard);
}
.is-live .kpi__spark path { stroke-dashoffset: 0; }

/* Ertragskaskade — Balken wachsen nacheinander aus der Grundlinie. */
.cascade { margin-bottom: var(--mw-space-4); }
.cascade__caption {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--mw-space-2) var(--mw-space-3);
  margin-bottom: var(--mw-space-3);
}
.cascade__caption h4 { font-size: var(--mw-text-body-sm); font-weight: 600; }
.cascade__rows { display: grid; gap: var(--mw-space-2); }
.cascade__row {
  display: grid;
  grid-template-columns: 11rem minmax(0, 1fr) 7rem;
  align-items: center;
  gap: var(--mw-space-3);
  font-size: var(--mw-text-body-sm);
}
.cascade__name { color: var(--mw-text-muted); }
.cascade__track {
  position: relative;
  height: 18px;
  background: var(--mw-surface-2);
  border-radius: var(--mw-radius-xs);
  overflow: hidden;
}
.cascade__bar {
  position: absolute;
  inset-block: 0;
  left: var(--bar-start, 0%);
  width: 0;
  background: var(--mw-dv-series-1);
  border-radius: var(--mw-radius-xs);
  transition: width var(--mw-duration-slow) var(--mw-ease-rise);
  transition-delay: var(--bar-delay, 0ms);
}
.is-live .cascade__bar { width: var(--bar-width, 0%); }
.cascade__bar--neg { background: var(--mw-dv-neg); }
.cascade__bar--result { background: var(--mw-dv-pos); }
/* Durchlaufposten (BK) ist kein Ertrag — visuell klar abgesetzt. */
.cascade__bar--pass {
  background: repeating-linear-gradient(
    135deg,
    var(--mw-dv-neutral) 0 6px,
    var(--mw-surface-2) 6px 12px
  );
  border: 1px solid var(--mw-dv-axis);
}
.cascade__value {
  text-align: end;
  font-family: var(--mw-font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--mw-text-body-sm);
  color: var(--mw-text);
}
.cascade__row--total .cascade__name,
.cascade__row--total .cascade__value { font-weight: 600; color: var(--mw-text); }

/* Herkunfts-Zeile — das Markenmotiv: jeder Wert zeigt auf seinen Beleg. */
.provenance {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--mw-space-2);
  padding: var(--mw-space-3);
  border: 1px dashed var(--mw-border-strong);
  border-radius: var(--mw-radius-md);
  background: var(--mw-brand-subtle);
  font-size: var(--mw-text-body-sm);
  opacity: 0;
  transform: translateY(6px);
  transition:
    opacity var(--mw-duration-slow) var(--mw-ease-standard) 900ms,
    transform var(--mw-duration-slow) var(--mw-ease-standard) 900ms;
}
.is-live .provenance { opacity: 1; transform: none; }
.provenance .icon { color: var(--mw-brand); }
.provenance em { font-style: italic; color: var(--mw-text-muted); }

/* ── Datenintegration: Tabs + Belegfluss ────────────────────────────── */
.tabs {
  display: flex;
  gap: var(--mw-space-2);
  padding: var(--mw-space-2);
  background: var(--mw-surface-2);
  border-radius: var(--mw-radius-md);
  margin-bottom: var(--mw-space-4);
  overflow-x: auto;
  scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tab {
  flex: 1 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--mw-space-2);
  padding: var(--mw-space-2) var(--mw-space-3);
  border: 1px solid transparent;
  border-radius: var(--mw-radius-sm);
  background: transparent;
  color: var(--mw-text-muted);
  font-family: var(--mw-font-sans);
  font-size: var(--mw-text-body-sm);
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color var(--mw-duration-fast) var(--mw-ease-standard),
              color var(--mw-duration-fast) var(--mw-ease-standard);
}
.tab:hover { color: var(--mw-text); }
.tab[aria-selected='true'] {
  background: var(--mw-surface);
  color: var(--mw-text);
  border-color: var(--mw-border);
  box-shadow: var(--mw-shadow-xs);
}
.tabpanel[hidden] { display: none; }

.ingest {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--mw-space-4);
  align-items: start;
}
.ingest__doc {
  position: relative;
  padding: var(--mw-space-4);
  border: 1px solid var(--mw-border);
  border-radius: var(--mw-radius-md);
  background: var(--mw-surface);
  box-shadow: var(--mw-shadow-xs);
  min-height: 190px;
}
.ingest__doc-title {
  display: flex;
  align-items: center;
  gap: var(--mw-space-2);
  font-size: var(--mw-text-body-sm);
  font-weight: 600;
  margin-bottom: var(--mw-space-3);
}
.ingest__doc-title .icon { color: var(--mw-brand); }
/* Angedeutete Belegzeilen — kein Text, nur Struktur. */
.ingest__lines { display: grid; gap: 7px; }
.ingest__lines i {
  display: block;
  height: 6px;
  border-radius: var(--mw-radius-full);
  background: var(--mw-surface-2);
}
.ingest__lines i:nth-child(3) { width: 72%; }
.ingest__lines i:nth-child(6) { width: 55%; }
/* Der Fundort auf der Seite — leuchtet auf, wenn der Wert extrahiert wird. */
.ingest__hit {
  height: 10px;
  border-radius: var(--mw-radius-xs);
  background: var(--mw-accent-subtle);
  border: 1px solid var(--mw-accent);
  width: 46%;
  opacity: 0;
  transition: opacity var(--mw-duration-base) var(--mw-ease-standard) 400ms;
}
.is-live .ingest__hit { opacity: 1; }

.ingest__out { display: grid; gap: var(--mw-space-2); }
.ingest__field {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--mw-space-3);
  padding: var(--mw-space-3);
  border: 1px solid var(--mw-border);
  border-radius: var(--mw-radius-sm);
  background: var(--mw-surface);
  font-size: var(--mw-text-body-sm);
  opacity: 0;
  transform: translateX(-10px);
  transition:
    opacity var(--mw-duration-base) var(--mw-ease-rise),
    transform var(--mw-duration-base) var(--mw-ease-rise);
  transition-delay: var(--field-delay, 0ms);
}
.is-live .ingest__field { opacity: 1; transform: none; }
.ingest__field b {
  font-weight: 500;
  color: var(--mw-text-muted);
  display: block;
  /* „Abrechnungszeitraum" ist breiter als die Spalte. */
  overflow-wrap: anywhere;
}
.ingest__field .num { color: var(--mw-text); }

/* ── Kommunikation: Dreispalter ─────────────────────────────────────── */
.mail {
  display: grid;
  /* 10rem, damit „Posteingang" samt Icon und Zähler auf eine Zeile passt —
   * Ordnernamen umzubrechen sieht nach Fehler aus, nicht nach Layout. */
  grid-template-columns: 10rem minmax(0, 1fr);
  gap: var(--mw-space-4);
}
.mail__folders { display: grid; gap: 2px; align-content: start; }
.mail__folder {
  display: flex;
  align-items: center;
  gap: var(--mw-space-2);
  padding: var(--mw-space-2);
  border-radius: var(--mw-radius-sm);
  font-size: var(--mw-text-body-sm);
  color: var(--mw-text-muted);
  min-width: 0;
  /* Ordnernamen bleiben auf einer Zeile; die Spalte ist breit genug dafür. */
  white-space: nowrap;
}
.mail__folder .icon { color: var(--mw-text-subtle); }
.mail__folder--active {
  background: var(--mw-brand-subtle);
  color: var(--mw-brand-hover);
  font-weight: 500;
}
.mail__folder--active .icon { color: var(--mw-brand); }
.mail__count {
  margin-inline-start: auto;
  font-family: var(--mw-font-mono);
  font-size: var(--mw-text-caption);
}

.mail__thread {
  min-width: 0;
  border: 1px solid var(--mw-border);
  border-radius: var(--mw-radius-md);
  background: var(--mw-surface);
  padding: var(--mw-space-4);
  display: grid;
  gap: var(--mw-space-3);
}
.mail__from {
  display: flex;
  align-items: center;
  gap: var(--mw-space-2);
  font-size: var(--mw-text-body-sm);
  font-weight: 600;
}
.mail__subject { font-size: var(--mw-text-body-sm); color: var(--mw-text-muted); }
.mail__draft {
  padding: var(--mw-space-3);
  border: 1px solid var(--mw-border);
  border-radius: var(--mw-radius-sm);
  background: var(--mw-surface-2);
  font-size: var(--mw-text-body-sm);
  line-height: var(--mw-text-body-sm-line-height);
  min-height: 4.5em;
}
/* Cursor beim „Tippen" des Entwurfs. */
.mail__caret {
  display: inline-block;
  width: 2px;
  height: 1em;
  vertical-align: text-bottom;
  background: var(--mw-brand);
  margin-inline-start: 1px;
  animation: mw-blink 1s steps(2, start) infinite;
}
@keyframes mw-blink { to { visibility: hidden; } }

/* Rücknahmefenster — echter Countdown, wie in der App bis 30 Sekunden. */
.undo {
  display: flex;
  align-items: center;
  /* Ohne Umbruch bestimmt diese Zeile die Mindestbreite des ganzen Threads
   * und sprengt ihn auf dem Telefon. */
  flex-wrap: wrap;
  gap: var(--mw-space-2) var(--mw-space-3);
  padding: var(--mw-space-3);
  border-radius: var(--mw-radius-md);
  background: var(--mw-info-bg);
  color: var(--mw-info-text);
  font-size: var(--mw-text-body-sm);
}
.undo__ring { flex: none; width: 28px; height: 28px; transform: rotate(-90deg); }
.undo__ring circle { fill: none; stroke-width: 3; }
.undo__ring .undo__track { stroke: var(--mw-border); }
.undo__ring .undo__bar {
  stroke: var(--mw-info);
  stroke-linecap: round;
  stroke-dasharray: var(--ring-len, 0);
  stroke-dashoffset: 0;
}
.undo__label { flex: 1 1 8rem; min-width: 0; }
.undo__btn {
  border: 1px solid currentColor;
  background: transparent;
  color: inherit;
  border-radius: var(--mw-radius-sm);
  padding: var(--mw-space-1) var(--mw-space-3);
  font-family: var(--mw-font-sans);
  font-size: var(--mw-text-body-sm);
  font-weight: 500;
  cursor: pointer;
}

/* ── Freigaben: Handlungsspielraum-Schalter ─────────────────────────── */
.autonomy__hint {
  font-size: var(--mw-text-body-sm);
  color: var(--mw-text-muted);
  margin-bottom: var(--mw-space-3);
}
.segmented {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--mw-space-1);
  padding: var(--mw-space-1);
  background: var(--mw-surface-2);
  border-radius: var(--mw-radius-md);
  margin-bottom: var(--mw-space-4);
}
.segmented button {
  padding: var(--mw-space-2) var(--mw-space-2);
  border: 1px solid transparent;
  border-radius: var(--mw-radius-sm);
  background: transparent;
  color: var(--mw-text-muted);
  font-family: var(--mw-font-sans);
  font-size: var(--mw-text-body-sm);
  font-weight: 500;
  cursor: pointer;
  transition: background-color var(--mw-duration-fast) var(--mw-ease-standard),
              color var(--mw-duration-fast) var(--mw-ease-standard);
}
.segmented button:hover { color: var(--mw-text); }
.segmented button[aria-pressed='true'] {
  background: var(--mw-surface);
  color: var(--mw-text);
  border-color: var(--mw-border);
  box-shadow: var(--mw-shadow-xs);
}

.vorgang {
  border: 1px solid var(--mw-border);
  border-radius: var(--mw-radius-md);
  background: var(--mw-surface);
  padding: var(--mw-space-4);
  display: grid;
  gap: var(--mw-space-3);
}
.vorgang__head {
  display: flex;
  align-items: center;
  gap: var(--mw-space-3);
}
.vorgang__head .icon { color: var(--mw-brand); }
.vorgang__title { font-size: var(--mw-text-body-sm); font-weight: 600; }
.vorgang__meta {
  font-size: var(--mw-text-caption);
  line-height: var(--mw-text-caption-line-height);
  color: var(--mw-text-muted);
}
.vorgang__body {
  font-size: var(--mw-text-body-sm);
  line-height: var(--mw-text-body-sm-line-height);
  color: var(--mw-text-muted);
}
.vorgang__actions { display: flex; flex-wrap: wrap; gap: var(--mw-space-2); }
.vorgang__actions .btn { padding: var(--mw-space-2) var(--mw-space-4); font-size: var(--mw-text-body-sm); }

/* Statuszeile: Farbe IMMER zusammen mit Icon und Text (DNA 12.7). */
.vorgang__status {
  display: flex;
  align-items: center;
  gap: var(--mw-space-2);
  padding: var(--mw-space-3);
  border-radius: var(--mw-radius-sm);
  font-size: var(--mw-text-body-sm);
}
.vorgang__status--auto { background: var(--mw-success-bg); color: var(--mw-success-text); }
.vorgang__status--notify { background: var(--mw-info-bg); color: var(--mw-info-text); }
.vorgang__status--approval { background: var(--mw-warning-bg); color: var(--mw-warning-text); }

.locked {
  display: flex;
  align-items: flex-start;
  gap: var(--mw-space-3);
  margin-top: var(--mw-space-4);
  padding: var(--mw-space-4);
  border: 1px solid var(--mw-border);
  border-radius: var(--mw-radius-md);
  background: var(--mw-surface-2);
  font-size: var(--mw-text-body-sm);
  line-height: var(--mw-text-body-sm-line-height);
  color: var(--mw-text-muted);
}
.locked .icon { color: var(--mw-text-subtle); margin-top: 2px; }

/* ─────────────────────────────────────────────────────────────────────
 * Sicherheit
 */
.trust-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--mw-space-5);
}
.trust-card {
  padding: var(--mw-space-5);
  border: 1px solid var(--mw-border);
  border-radius: var(--mw-radius-lg);
  background: var(--mw-surface);
}
.section--alt .trust-card { background: var(--mw-bg); }
.trust-card .icon { color: var(--mw-brand); margin-bottom: var(--mw-space-3); }
.trust-card h3 {
  font-size: var(--mw-text-h4);
  line-height: var(--mw-text-h4-line-height);
  font-family: var(--mw-font-sans);
  font-weight: 600;
  margin-bottom: var(--mw-space-2);
}
.trust-card p {
  font-size: var(--mw-text-body-sm);
  line-height: var(--mw-text-body-sm-line-height);
  color: var(--mw-text-muted);
}

/* ─────────────────────────────────────────────────────────────────────
 * Abschluss-CTA
 */
.closing {
  text-align: center;
  padding: var(--mw-space-8) var(--mw-space-5);
  border-radius: var(--mw-radius-xl);
  background: var(--mw-brand-subtle);
  border: 1px solid var(--mw-border);
}
.closing h2 {
  font-size: var(--mw-text-h2);
  line-height: var(--mw-text-h2-line-height);
  margin-bottom: var(--mw-space-4);
}
.closing p {
  color: var(--mw-text-muted);
  max-width: 56ch;
  margin-inline: auto;
  margin-bottom: var(--mw-space-6);
}
.closing__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mw-space-3);
  justify-content: center;
}

/* Beta-Streifen — ruhig, sachlich, kein Dringlichkeits-Theater. */
.beta-band {
  display: flex;
  align-items: flex-start;
  gap: var(--mw-space-3);
  max-width: 68ch;
  margin: 0 auto var(--mw-space-6);
  padding: var(--mw-space-4);
  border: 1px solid var(--mw-accent);
  border-radius: var(--mw-radius-md);
  background: var(--mw-accent-subtle);
  font-size: var(--mw-text-body-sm);
  line-height: var(--mw-text-body-sm-line-height);
  text-align: start;
  color: var(--mw-text);
}
.beta-band .icon { color: var(--mw-accent-hover); margin-top: 2px; }
[data-theme='dark'] .beta-band { color: var(--mw-text); }

/* ─────────────────────────────────────────────────────────────────────
 * Footer
 */
.site-footer {
  border-top: 1px solid var(--mw-border);
  padding-block: var(--mw-space-7);
  margin-top: var(--mw-space-8);
}
.site-footer__grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mw-space-5);
  align-items: center;
  justify-content: space-between;
}
.site-footer__claim {
  font-size: var(--mw-text-body-sm);
  color: var(--mw-text-muted);
  margin-top: var(--mw-space-2);
}
.site-footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mw-space-2) var(--mw-space-5);
  align-items: center;
  font-size: var(--mw-text-body-sm);
}
.site-footer__links a { color: var(--mw-text-muted); text-decoration: none; }
.site-footer__links a:hover { color: var(--mw-text); text-decoration: underline; }
.site-footer__legal {
  margin-top: var(--mw-space-5);
  padding-top: var(--mw-space-5);
  border-top: 1px solid var(--mw-border);
  font-size: var(--mw-text-caption);
  line-height: var(--mw-text-caption-line-height);
  color: var(--mw-text-muted);
}

/* ─────────────────────────────────────────────────────────────────────
 * Einblenden beim Scrollen — ruhig, einmalig, nie wiederholt (DNA 12.6)
 */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity var(--mw-duration-slow) var(--mw-ease-rise),
    transform var(--mw-duration-slow) var(--mw-ease-rise);
  transition-delay: var(--reveal-delay, 0ms);
}
.reveal.is-live { opacity: 1; transform: none; }

/* ─────────────────────────────────────────────────────────────────────
 * Responsiv — Kollaps bei 1024 und 640 px
 */
@media (max-width: 1024px) {
  .hero__grid,
  .feature {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--mw-space-6);
  }
  /* Auf schmalen Schirmen kommt die Demo zuerst — sie erklärt schneller. */
  .feature__demo { order: -1; }
  .feature--mirrored .feature__copy { order: 0; }
  .hero__figure { order: -1; }
  .hero__walter { width: min(60%, 260px); }
  .site-nav { display: none; }
}

@media (max-width: 860px) {
  .ingest { grid-template-columns: minmax(0, 1fr); }
  .mail { grid-template-columns: minmax(0, 1fr); }
  .mail__folders {
    grid-auto-flow: column;
    grid-auto-columns: max-content;
    overflow-x: auto;
    gap: var(--mw-space-2);
    scrollbar-width: none;
  }
  .mail__folders::-webkit-scrollbar { display: none; }
  .mail__count { display: none; }
}

/* Der Kopf trägt auf dem Telefon nur noch eine Aktion: Lockup, Beta,
 * Theme-Umschalter und den CTA. „Anmelden" bleibt über den Fuß erreichbar —
 * sonst schiebt sich die Leiste über den Rand hinaus. */
@media (max-width: 720px) {
  .site-header__actions .btn--ghost { display: none; }
  .site-header__actions { gap: var(--mw-space-2); }
  .site-header__actions .btn { padding: var(--mw-space-2) var(--mw-space-4); }
  .lockup__word { height: 17px; }
}

@media (max-width: 400px) {
  /* Ganz schmal wird aus der Wortmarke der Kreis allein — er ist ab 32 px
   * lesbar (DNA 12.3), die Wortmarke bräuchte mindestens 96 px. */
  .lockup__word { display: none; }
  [data-theme='dark'] .lockup__word--on-dark { display: none; }
  .theme-toggle { display: none; }
}

@media (max-width: 640px) {
  :root { --mw-text-display: 2.25rem; --mw-text-h2: 1.6rem; }
  .shell { padding-inline: var(--mw-space-4); }
  .section { padding-block: var(--mw-space-7); }
  .kpi-row { grid-template-columns: minmax(0, 1fr); }
  .cascade__row { grid-template-columns: 7.5rem minmax(0, 1fr); }
  /* Der Betrag bekommt die volle Breite, sonst bricht „−29.400,00 €" um. */
  .cascade__value { grid-column: 1 / -1; text-align: start; }
  .app-frame__body { padding: var(--mw-space-4); }
  /* Volle Breite — und die Beschriftung darf umbrechen. .btn ist sonst
   * bewusst nowrap, auf 375 px passt „Ich habe schon einen Zugang" aber
   * nicht auf eine Zeile. */
  .hero__cta .btn,
  .closing__actions .btn {
    flex: 1 1 100%;
    white-space: normal;
  }
  /* Die drei Autonomiestufen nebeneinander werden auf dem Telefon zu eng —
   * gestapelt sind die Beschriftungen ohnehin besser lesbar. */
  .segmented { grid-template-columns: minmax(0, 1fr); }
  .segmented button { text-align: start; padding-inline: var(--mw-space-3); }
  .site-footer__grid { flex-direction: column; align-items: flex-start; }
}

/* ─────────────────────────────────────────────────────────────────────
 * Bewegung aus — Endzustand sofort, nichts animiert (DNA 12.6)
 */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
  }
  .reveal { opacity: 1; transform: none; }
  .kpi__spark path { stroke-dashoffset: 0; }
  .cascade__bar { width: var(--bar-width, 0%); }
  .provenance,
  .ingest__field { opacity: 1; transform: none; }
  .ingest__hit { opacity: 1; }
  .mail__caret { animation: none; }
}

/* ─────────────────────────────────────────────────────────────────────
 * Rechtsseiten — Inhalt kommt aus dem Static-Pages-Modul der App
 */
.legal { padding-block: var(--mw-space-8); }
.legal__title {
  font-size: var(--mw-text-h1);
  line-height: var(--mw-text-h1-line-height);
  margin-bottom: var(--mw-space-6);
}
.legal__content { max-width: 68ch; }
.legal__content h2 {
  font-size: var(--mw-text-h3);
  line-height: var(--mw-text-h3-line-height);
  margin-top: var(--mw-space-7);
  margin-bottom: var(--mw-space-3);
}
.legal__content h3,
.legal__content h4,
.legal__content h5 {
  font-family: var(--mw-font-sans);
  font-size: var(--mw-text-h4);
  line-height: var(--mw-text-h4-line-height);
  font-weight: 600;
  margin-top: var(--mw-space-6);
  margin-bottom: var(--mw-space-2);
}
.legal__content p,
.legal__content ul { margin-bottom: var(--mw-space-4); }
.legal__content ul { padding-inline-start: var(--mw-space-5); }
.legal__content li { margin-bottom: var(--mw-space-2); }
.legal__content hr {
  border: 0;
  border-top: 1px solid var(--mw-border);
  margin-block: var(--mw-space-6);
}
.legal__stamp {
  margin-top: var(--mw-space-6);
  font-size: var(--mw-text-caption);
  color: var(--mw-text-subtle);
}

/* ─────────────────────────────────────────────────────────────────────
 * Fokus-Ring — bewusst als letzte Regel der Datei.
 *
 * Zustandsselektoren wie .tab[aria-selected='true'] oder
 * .segmented button[aria-pressed='true'] setzen einen eigenen box-shadow und
 * sind spezifischer als ein blankes :focus-visible. Ohne diesen Block
 * verschluckt der aktive Tab seinen eigenen Fokus-Ring — die Seite wäre mit
 * der Tastatur nicht mehr sauber bedienbar.
 */
:focus-visible,
.tab[aria-selected='true']:focus-visible,
.segmented button[aria-pressed='true']:focus-visible,
.app-frame :focus-visible {
  outline: none;
  box-shadow: var(--mw-focus-shadow);
}