/* Mensura — Website.
 *
 * Die Farben, die Radien und die beiden Schriften sind die der Anwendung: der
 * Besucher soll die Seite und das Werkzeug als dasselbe Haus erkennen. Quelle
 * ist das Theme "modern" aus nice-gui (src/core/themes/modern.json) und die
 * Typografie aus src/core/ui_config.py — petrolblau auf blaugrauem Grund,
 * weisse Karten ohne Rahmen, Magenta als zweiter Akzent, Titel in Source
 * Serif 4 und der Rest in Google Sans Flex.
 *
 * Die Schriften liegen unter /fonts und werden nicht von Google geladen:
 * spart einen Drittabruf, eine Zeile in der Datenschutzerklaerung und die
 * Diskussion, die in Deutschland daran haengt.
 */

@font-face {
  font-family: 'Google Sans Flex';
  font-style: normal; font-weight: 100 1000; font-stretch: 100%; font-display: swap;
  src: url(/fonts/google-sans-flex-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: 'Google Sans Flex';
  font-style: normal; font-weight: 100 1000; font-stretch: 100%; font-display: swap;
  src: url(/fonts/google-sans-flex-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal; font-weight: 200 900; font-display: swap;
  src: url(/fonts/source-serif-4-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: 'Source Serif 4';
  font-style: normal; font-weight: 200 900; font-display: swap;
  src: url(/fonts/source-serif-4-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Die Schrift der Wortmarke. Der Designer liefert die endgueltige nach; bis
   dahin Sora, die dem Logo nachweislich am naechsten kommt. Sie steht nur in
   --brand-font, der Wechsel ist also eine Zeile. */
@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(/fonts/sora-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(/fonts/sora-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;
}

/* Theme "modern", unveraendert uebernommen. */
:root {
  color-scheme: light;
  --primary: #0B4A6F;
  --primary-container: #BEDDF1;
  --on-primary: #FFFFFF;
  --on-primary-container: #04283E;
  --tertiary: #E00069;
  --on-tertiary: #FFFFFF;
  --background: #DFE9F1;
  --surface: #FFFFFF;
  --surface-high: #E9F1F7;
  --on-surface: #0A1A22;
  --on-surface-variant: #274453;
  --outline: #5A7C90;
  --outline-variant: #AFC6D6;
  --success: #059669;
  --error: #B3261E;

  /* elevation_1 / _2 / _3 aus demselben Theme. */
  --elev-1: 0 1px 2px 0 rgb(10 26 34 / 0.06);
  --elev-2: 0 1px 3px 0 rgb(10 26 34 / 0.10), 0 1px 2px -1px rgb(10 26 34 / 0.06);
  --elev-3: 0 4px 8px -2px rgb(10 26 34 / 0.12), 0 2px 4px -2px rgb(10 26 34 / 0.08);
  --elev-4: 0 12px 20px -6px rgb(10 26 34 / 0.16), 0 6px 8px -6px rgb(10 26 34 / 0.10);

  --ui-font: 'Google Sans Flex', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
  --heading-font: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --brand-font: 'Sora', var(--ui-font);

  --radius: 0.5rem;      /* der Radius der Karten in der Anwendung */
  --radius-lg: 12px;     /* der der Panels */
  --wrap: 1160px;
}

/* Die Anwendung schaltet Themes ueber ein Benutzerprofil um; eine oeffentliche
   Seite hat keins, also folgt sie dem Betriebssystem. Dieselbe Palette, in die
   Dunkelheit gedreht: der Grund wird zum tiefsten Petrolton, die Karten steigen
   daraus auf, und Primaer wird aus dem primary_container geholt, weil #0B4A6F
   auf dunklem Grund nicht mehr lesbar ist. */
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --primary: #8FC5E6;
    --primary-container: #0F3A55;
    --on-primary: #04283E;
    --on-primary-container: #D6EAF8;
    --tertiary: #FF5C9D;
    --on-tertiary: #3D0021;
    --background: #071018;
    --surface: #10202B;
    --surface-high: #162C3A;
    --on-surface: #E8F1F6;
    --on-surface-variant: #AFC6D6;
    --outline: #6F8FA3;
    --outline-variant: #2C4756;
    --success: #34D399;
    --error: #F2B8B5;
    --elev-1: 0 1px 2px 0 rgb(0 0 0 / 0.40);
    --elev-2: 0 1px 3px 0 rgb(0 0 0 / 0.50), 0 1px 2px -1px rgb(0 0 0 / 0.40);
    --elev-3: 0 4px 8px -2px rgb(0 0 0 / 0.55), 0 2px 4px -2px rgb(0 0 0 / 0.45);
    --elev-4: 0 12px 20px -6px rgb(0 0 0 / 0.60), 0 6px 8px -6px rgb(0 0 0 / 0.50);
  }
}

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

html { scroll-behavior: smooth; scroll-padding-top: 5rem; }

body {
  margin: 0;
  background: var(--background);
  color: var(--on-surface);
  font: 400 16px/1.6 var(--ui-font);
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }

a { color: inherit; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* Titel wie in der Anwendung: Serif, 600, eng gefuehrt — .ad-page-title. */
h1, h2 {
  font-family: var(--heading-font);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0 0 .5em;
}
h1 { font-size: clamp(2.5rem, 5.4vw, 4.25rem); }
h2 { font-size: clamp(2rem, 4vw, 2.75rem); }
h3 {
  font-size: 1.0625rem; font-weight: 600; line-height: 1.35;
  letter-spacing: -0.005em; margin: 0 0 .5em;
}
p { margin: 0 0 1em; }

/* .ad-page-subtitle: der Satz unter dem Titel, Sans, 1.375rem. */
.lead {
  font-size: 1.375rem; line-height: 1.5;
  color: var(--on-surface-variant);
  max-width: 46ch; font-weight: 350;
}

/* ---------- Kopfzeile ---------- */

header.site {
  position: sticky; top: 0; z-index: 20;
  background: color-mix(in srgb, var(--background) 90%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--outline-variant);
}
header.site .wrap { display: flex; align-items: center; gap: 28px; height: 64px; }
/* Bildmarke und Wortmarke, wie sie auf dem Logo stehen. Das Symbol traegt
   sein eigenes Quadrat, deshalb keine zusaetzliche Flaeche darunter; die
   -0.014em sind die Sperrung, die das Original gegenueber der Schrift hat. */
.brand {
  display: inline-flex; align-items: center; gap: .6em;
  text-decoration: none; color: var(--on-surface);
}
.brand img { height: 26px; width: auto; display: block; border-radius: 4px; }
.brand span {
  font-family: var(--brand-font);
  font-weight: 400; font-size: 1.25rem; letter-spacing: -0.014em;
  white-space: nowrap;
}
@media (max-width: 480px) { .brand span { font-size: 1.05rem; } }
nav.site { margin-left: auto; display: flex; align-items: center; gap: 24px; }
nav.site a { text-decoration: none; color: var(--on-surface-variant); font-size: .95rem; }
nav.site a:hover { color: var(--on-surface); }
/* `nav.site a` ist spezifischer als `.btn` und faerbte dessen Schrift sonst in
   die Navigationsfarbe — dunkelblau auf dunkelblau. */
/* Der Sprachwechsel steht neben den Navigationspunkten, ist aber keiner:
   ein kurzes Kuerzel, das man findet, wenn man es sucht, und sonst uebersieht. */
nav.site a.sprache {
  font-size: .8rem; font-weight: 550; letter-spacing: .04em;
  padding: .3em .6em; border: 1px solid var(--outline-variant);
  border-radius: 6px; color: var(--on-surface-variant);
}
nav.site a.sprache:hover { color: var(--on-surface); border-color: var(--outline); }
nav.site a.btn { color: var(--on-primary); }
nav.site a.btn.ghost { color: var(--primary); }
@media (max-width: 760px) {
  nav.site a.hide-sm { display: none; }
  header.site .wrap { gap: 12px; }
}

/* ---------- Knöpfe ---------- */

.btn {
  display: inline-block; text-decoration: none; cursor: pointer;
  padding: .6em 1.25em; border-radius: var(--radius);
  border: 1px solid transparent; background: var(--primary); color: var(--on-primary);
  font-family: inherit; font-size: .95rem; font-weight: 500;
  box-shadow: var(--elev-1);
}
.btn:hover { background: color-mix(in srgb, var(--primary) 88%, var(--on-surface)); }
.btn.ghost {
  background: var(--surface); color: var(--primary);
  border-color: var(--outline-variant);
}
.btn.ghost:hover { background: var(--surface-high); }
.btn[disabled] { opacity: .55; cursor: default; }

/* Bilder aus der Anwendung. Der Rahmen ist der der Karten - gleicher Radius,
   dieselbe Schattenreihe -, damit ein Screenshot als Karte der Seite gelesen
   wird und nicht als eingeklebtes Fremdbild. Die feine Linie haelt ihn im
   dunklen Modus zusammen, wo der helle Screenshot sonst schwebt. */
/* Bild und Erklaerung nebeneinander. Bewusst nicht ueber die volle Breite:
   was gross und scharf dasteht, ist eine Vorlage zum Nachbauen. Die Dateien
   liegen in 1560 px - beim Hineinzoomen kommt also nicht mehr Detail dazu,
   als hier zu sehen ist. */
.shot { margin: 48px 0 0; }
.shot picture { display: block; }
.shot img {
  display: block; width: 100%; height: auto;
  border-radius: var(--radius-lg);
  box-shadow: var(--elev-4, var(--elev-3));
  outline: 1px solid var(--outline-variant);
  outline-offset: -1px;
}

.shot.side {
  display: grid; gap: 32px 40px; align-items: center;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
}
/* Die zweite Aufnahme spiegelt die erste: Bild rechts, Text links. Die
   Reihenfolge im Quelltext bleibt Bild-dann-Text, damit die Vorlesereihenfolge
   nicht von der Spaltenwahl abhaengt. */
.shot.side.gedreht { grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); }
.shot.side.gedreht > picture { order: 2; }
@media (max-width: 900px) {
  .shot.side { grid-template-columns: 1fr; }
  .shot.side.gedreht > picture { order: 0; }
}

.shot figcaption { color: var(--on-surface-variant); }
.shot-titel {
  font-family: var(--heading-font); font-size: 1.25rem; font-weight: 600;
  line-height: 1.3; letter-spacing: -0.015em;
  color: var(--on-surface); margin: 0 0 1em;
}
.shot-notes {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 14px; font-size: .92rem;
}
.shot-notes strong { color: var(--on-surface); font-weight: 550; }

/* ---------- Abschnitte ---------- */

section { padding: 84px 0; }
section.surface { background: var(--surface); }

/* Der Herkunftsabschnitt steht zwischen zwei Abschnitten auf dem Grundton und
   braucht einen eigenen Klang, sonst laufen die drei zu einem Band zusammen.
   --primary-container ist der Ton, den die Anwendung fuer genau das nimmt: die
   hervorgehobene Zeile, der aktive Reiter. */
section.band {
  background: var(--primary-container);
  color: var(--on-primary-container);
  padding: 64px 0;
}
section.band .eyebrow { color: var(--on-primary-container); }
section.band .lead { color: var(--on-primary-container); }

/* Die vier Angaben im Betriebsband: keine Karten - sie sollen als Aussagen
   des Bandes gelesen werden, nicht als vierte Kartenreihe der Seite. */
.facts { display: grid; gap: 28px 32px; grid-template-columns: repeat(4, 1fr); margin-top: 32px; }
@media (max-width: 1000px) { .facts { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .facts { grid-template-columns: 1fr; } }
.facts p { margin: 0; font-size: .95rem; }
.eyebrow {
  text-transform: uppercase; letter-spacing: .1em; font-size: .75rem;
  font-weight: 600; color: var(--primary); margin: 0 0 1em;
}

/* Der Titel darf die ganze Spalte fuellen: er bricht selbst, wo die Breite es
   verlangt, statt an einem <br> auf halber Strecke - das liess rechts eine
   leere Haelfte stehen. */
.hero { padding: 96px 0 88px; }
.hero .lead { max-width: 64ch; }
@media (min-width: 1100px) { .hero .lead { font-size: 1.45rem; } }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.hero-note { margin-top: 24px; font-size: .875rem; color: var(--on-surface-variant); }

.grid { display: grid; gap: 20px; grid-template-columns: repeat(3, 1fr); }
.grid.two { grid-template-columns: repeat(2, 1fr); gap: 40px; }
.grid.vier { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1000px) { .grid, .grid.vier { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 900px) { .grid.two { grid-template-columns: 1fr; } }
@media (max-width: 680px) { .grid { grid-template-columns: 1fr; } }

/* Die Karte der Anwendung: Flaeche, kleiner Radius, weicher Schatten, kein
   Rahmen — create_section_card ist "rounded-lg shadow-sm" auf
   --color-surface-container. */
.card {
  background: var(--surface); border-radius: var(--radius);
  box-shadow: var(--elev-2); padding: 24px;
}
.card p:last-child, .card ul:last-child { margin-bottom: 0; }

ul.plain { list-style: none; margin: 0; padding: 0; }
ul.plain li { padding: .4em 0 .4em 1.5em; position: relative; color: var(--on-surface-variant); }
ul.plain li::before {
  content: ""; position: absolute; left: 0; top: .95em;
  width: 7px; height: 7px; border-radius: 2px; background: var(--primary);
}

/* ---------- Preise ---------- */

.tiers { display: grid; gap: 20px; grid-template-columns: repeat(3, 1fr); align-items: stretch; }
@media (max-width: 900px) { .tiers { grid-template-columns: 1fr; } }
.tier { position: relative; display: flex; flex-direction: column; }
.tier.featured { box-shadow: var(--elev-3); outline: 2px solid var(--primary); }
.tier .tag {
  position: absolute; top: -12px; left: 24px;
  background: var(--tertiary); color: var(--on-tertiary);
  font-size: .7rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  padding: .3em .75em; border-radius: 4px;
}
.tier .size {
  font-family: var(--heading-font); font-size: 2.75rem; font-weight: 600;
  line-height: 1.15; letter-spacing: -0.02em; margin-bottom: .1em;
}
.tier h3 { margin-bottom: .5em; }
.tier .price { font-size: .95rem; color: var(--on-surface-variant); margin-bottom: 0; }

/* Die Trennlinie sitzt nicht unter dem Preis, sondern direkt ueber dem Knopf:
   der Preistext ist mal ein-, mal zweizeilig, und eine Linie, die deshalb in
   jeder Karte woanders steht, sieht aus wie ein Fehler. Mit margin-top:auto
   wandert sie ans untere Ende der Karte und steht in allen dreien auf
   derselben Hoehe. */
.tier-line {
  width: 100%; border: 0; border-top: 1px solid var(--outline-variant);
  margin: auto 0 20px;
}
.tier .btn { width: 100%; text-align: center; }

/* Die Torleiter. Sechs Stufen als Reihe, die drei berichteten hervorgehoben -
   die Trennung bei IL3 ist die Aussage, nicht die Aufzaehlung. */
.tore { margin-top: 52px; }
.tore-vorlauf, .tore-nachsatz { max-width: 78ch; color: var(--on-surface-variant); }
.tore-nachsatz { margin-top: 26px; }
.tore-nachsatz strong { color: var(--on-surface); font-weight: 550; }

.tore-leiter {
  list-style: none; margin: 26px 0 0; padding: 0;
  display: grid; gap: 10px; grid-template-columns: repeat(6, 1fr);
}
@media (max-width: 1000px) { .tore-leiter { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 620px)  { .tore-leiter { grid-template-columns: repeat(2, 1fr); } }

.tore-leiter li {
  background: var(--surface); border-radius: var(--radius);
  box-shadow: var(--elev-1); padding: 14px 14px 16px;
  border-top: 3px solid var(--outline-variant);
}
/* Ab IL3 zaehlt die Massnahme in der berichteten Zahl - das traegt die Farbe. */
.tore-leiter li.ab-hier { border-top-color: var(--primary); }

.tor-nr {
  display: block; font-family: var(--heading-font);
  font-size: 1.1rem; font-weight: 600; letter-spacing: -0.01em;
  color: var(--on-surface-variant);
}
.tore-leiter li.ab-hier .tor-nr { color: var(--primary); }
.tor-name { display: block; font-weight: 550; font-size: .95rem; margin: .1em 0 .35em; }
.tor-was { display: block; font-size: .85rem; color: var(--on-surface-variant); line-height: 1.4; }

/* Der Vergleich, den die Zielgruppe wirklich anstellt: die Maßnahmenliste in
   Excel. Steht als Karte unter der Grafik, nicht als weiterer Abschnitt - es
   ist ein Einwand, keine Saeule der Seite. */
.excel-karte { margin-top: 44px; }
.excel-karte > p:not(.shot-titel) { max-width: 78ch; color: var(--on-surface-variant); }
.excel-punkte {
  list-style: none; margin: 26px 0 0; padding: 0;
  display: grid; gap: 22px 32px; grid-template-columns: repeat(3, 1fr);
  font-size: .92rem; color: var(--on-surface-variant);
}
@media (max-width: 900px) { .excel-punkte { grid-template-columns: 1fr; } }
.excel-punkte strong { color: var(--on-surface); font-weight: 550; }

/* Base Case + Delta = Base Case after Measures. Die Grafik sagt in einer Zeile,
   was der Absatz daneben in dreien sagt; sie traegt keine eigene Aussage und
   ist deshalb per <title> beschriftet statt bebildert. Die Farben kommen aus
   denselben Variablen wie der Rest, damit sie im dunklen Modus mitwandert. */
.logik-figur { margin: 44px 0 0; }
.logik-figur svg { width: 100%; height: auto; display: block; }
.f-base  { fill: var(--surface); stroke: var(--outline-variant); }
.f-delta { fill: var(--primary); }
.f-after { fill: var(--primary-container); stroke: var(--primary); }
.f-label {
  font-family: var(--heading-font); font-size: 17px; font-weight: 600;
  fill: var(--on-surface); text-anchor: middle;
}
.f-sub {
  font-family: var(--ui-font); font-size: 12px;
  fill: var(--on-surface-variant); text-anchor: middle;
}
.f-on-delta { fill: var(--on-primary); }
.f-on-after { fill: var(--on-primary-container); }
.f-op {
  font-family: var(--ui-font); font-size: 24px; font-weight: 500;
  fill: var(--on-surface-variant); text-anchor: middle;
}

/* Die Vergleichstabelle unter den drei Preiskarten. Auf einem schmalen Schirm
   scrollt sie in ihrem eigenen Kasten, statt die Seite breit zu machen. */
.compare-wrap { margin-top: 32px; overflow-x: auto; }
.compare {
  width: 100%; min-width: 620px; border-collapse: collapse;
  background: var(--surface); border-radius: var(--radius);
  box-shadow: var(--elev-2); overflow: hidden; font-size: .95rem;
}
.compare caption {
  caption-side: top; text-align: left; padding: 0 0 12px;
  font-size: .95rem; color: var(--on-surface-variant);
}
.compare th, .compare td { padding: 12px 16px; text-align: left; }
.compare thead th {
  background: var(--surface-high); font-family: var(--heading-font);
  font-size: 1.25rem; font-weight: 600; letter-spacing: -0.02em;
}
.compare thead th:first-child { font-family: var(--ui-font); }
.compare tbody th { font-weight: 400; color: var(--on-surface-variant); }
.compare tbody td { text-align: center; }
.compare thead th:not(:first-child) { text-align: center; }
.compare tbody tr + tr th, .compare tbody tr + tr td {
  border-top: 1px solid var(--outline-variant);
}

/* Die Terminkarte, die an die Stelle des Formulars getreten ist. Der Knopf
   bekommt oben und unten Luft: er ist das Ziel der ganzen Seite und soll nicht
   an der Aufzaehlung kleben. Die 28 px oben fallen mit dem Abstand der Liste
   zusammen (Randverschmelzung), es bleiben also 28, nicht 54. */
.termin ul.plain { margin-bottom: 28px; }
.termin .btn { display: block; text-align: center; margin: 28px 0 20px; }
.termin .form-note { margin: 0; }

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

form.demo { display: grid; gap: 16px; grid-template-columns: repeat(2, 1fr); }
@media (max-width: 720px) { form.demo { grid-template-columns: 1fr; } }
form.demo .full { grid-column: 1 / -1; }
label { display: block; font-size: .85rem; font-weight: 500; margin-bottom: .4em; }
label .req { color: var(--on-surface-variant); font-weight: 400; }
input, textarea {
  width: 100%; font: inherit; font-size: .95rem; color: var(--on-surface);
  background: var(--surface); border: 1px solid var(--outline-variant);
  border-radius: 6px; padding: .6em .75em;
}
input:hover, textarea:hover { border-color: var(--outline); }
textarea { min-height: 120px; resize: vertical; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-note { font-size: .85rem; color: var(--on-surface-variant); }
.status {
  font-size: .92rem; padding: .8em 1em; border-radius: 6px;
  background: var(--surface-high); color: var(--on-surface-variant);
}
.status.ok { background: var(--primary-container); color: var(--on-primary-container); }
.status.err {
  background: color-mix(in srgb, var(--error) 14%, var(--surface));
  color: var(--error);
}

/* ---------- Fußzeile ---------- */

footer.site {
  background: var(--surface); border-top: 1px solid var(--outline-variant);
  padding: 32px 0 48px; color: var(--on-surface-variant); font-size: .875rem;
}
footer.site .wrap { display: flex; flex-wrap: wrap; gap: 18px 24px; align-items: center; }

/* Die Wortmarke traegt 682x110 in ihrem viewBox; hier zaehlt nur die Hoehe,
   die Breite folgt. 22px stellt sie auf dieselbe Grundlinie wie die Zeile
   daneben, ohne die Fusszeile zur zweiten Kopfzeile zu machen. */
.footer-logo { display: inline-flex; align-items: center; }
.footer-logo img { height: 22px; width: auto; display: block; }
footer.site nav { margin-left: auto; display: flex; gap: 20px; flex-wrap: wrap; }
footer.site a { color: var(--on-surface-variant); text-decoration: none; }
footer.site a:hover { color: var(--on-surface); }

/* ---------- Fließtextseiten (Impressum, Datenschutz) ---------- */

.prose { max-width: 68ch; padding: 56px 0 80px; }
.prose h1 { font-size: clamp(2.2rem, 4vw, 3rem); }
.prose h2 {
  font-size: 1.3rem; margin-top: 1.8em; letter-spacing: -0.01em; line-height: 1.3;
}
.prose ul { color: var(--on-surface-variant); }
.todo {
  background: color-mix(in srgb, var(--tertiary) 10%, var(--surface));
  border-left: 3px solid var(--tertiary);
  border-radius: var(--radius); padding: .9em 1.1em; font-size: .9rem;
}