/* ============================================================
   newskurator.ch – Werbeseite
   ============================================================
   Bewusst ohne Bibliothek und ohne Schriftart von aussen: Die Seite wirbt
   damit, dass Daten das Haus nicht verlassen. Eine eingebundene Google-Schrift
   waere ein Widerspruch, den ein aufmerksamer Leser bemerkt.

   Farben stammen aus der Anwendung selbst (app/globals.css), damit Werbeseite
   und Programm zusammengehoeren: Akzent #4338ca / #6d28d9, dieselben drei
   Prioritaetsfarben.
   ============================================================ */

/* ============================================================
   Montserrat – dieselbe Schrift wie auf swiss-ai-experts.ch
   ============================================================
   **Selbst gehostet, nicht von Google geladen.** Dort hängt sie an
   `fonts.gstatic.com`; jeder Besucher schickt damit seine IP an Google,
   bevor er den Satz «Deine Daten verlassen unsere Server nicht» überhaupt
   gelesen hat. Die Datei liegt jetzt unter `/schriften/` – gleiches
   Schriftbild, keine fremde Anfrage. Montserrat steht unter der SIL Open
   Font License 1.1, Weitergabe und Selbsthosting sind ausdrücklich erlaubt.

   **Eine Datei für alle Strichstärken** (variable Schrift, 38 kB): Sieben
   einzelne Schnitte wären sieben Anfragen und rund 140 kB.

   `font-display: swap` – bis die Datei da ist, steht der Text in der
   Systemschrift. Unsichtbarer Text ist schlimmer als ein kurzer Wechsel.
   ------------------------------------------------------------ */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/schriften/montserrat-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                 U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
                 U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* Sagt dem Browser, dass die Seite BEIDE Erscheinungsbilder beherrscht.
     Ohne das bleiben seine eigenen Systemfarben – `Canvas`, `CanvasText` –
     auf den hellen Werten stehen, auch wenn der Besucher auf Dunkel steht.
     Getroffen hat es die Überschrift im Demo-Dialog: Ein `<dialog>` bekommt
     vom Browser `color: CanvasText`, also Schwarz, und stand damit fast
     unlesbar auf dem dunklen Kasten. Betrifft ebenso Eingabefelder,
     Bildlaufleisten und Auswahlmenüs. */
  color-scheme: light dark;
  --schrift: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
             'Helvetica Neue', Arial, sans-serif;
  --grund: #ffffff;
  --grund-2: #f6f7fb;
  --grund-3: #eef0f7;
  --text: #14162b;
  --text-2: #4a4f6a;
  --text-3: #6f7591;
  --rand: #dcdfeb;
  --akzent: #4338ca;
  --akzent-2: #6d28d9;
  --hoch: #dc2626;
  --mittel: #a16207;
  --tief: #047857;
  --radius: 14px;
  --breite: 1080px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--schrift);
  color: var(--text);
  background: var(--grund);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  /* Eine Spur enger als der Systemvorgabewert. Bei 17 px Fliesstext wirken
     die Systemschriften sonst leicht auseinandergezogen.

     **Kein `font-feature-settings: "cv02", "ss01"` und dergleichen.** Das
     sind Zeichenvarianten von Inter; SF Pro, Segoe UI und Roboto kennen sie
     nicht — die Zeile saehe aus, als wirke sie, und taete nichts. */
  letter-spacing: -0.011em;
  font-size: 17px;
}

img { max-width: 100%; height: auto; }
a { color: var(--akzent); }

.innen { max-width: var(--breite); margin: 0 auto; padding: 0 24px; }
.innen.schmal { max-width: 760px; }

/* ── Kopf ──────────────────────────────────────────────────── */
.kopf {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 24px;
  background: rgba(255,255,255,0.9);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--rand);
}

.marke {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  font-size: 17px;
  color: var(--text);
  text-decoration: none;
  letter-spacing: -0.01em;
}

/* ── Kopfmenue ───────────────────────────────────────────────
   Bis zum 19.08.2026 gab es dort KEINEN Hinweis, wo man gerade ist: fuenf
   gleich aussehende Woerter, und beim Ueberfahren wurde eines eine Spur
   heller. Auf einer Seite, die man scrollt, ist das die Frage, die man
   tatsaechlich hat.

   Der Zustand ist eine Kachel aus mattem Glas hinter dem Wort: ein weicher
   Verlauf, ein feiner heller Rand oben (das «Lichtkantchen», das Glas von
   einer flachen Flaeche unterscheidet) und `backdrop-filter`, damit der
   Hintergrund durchscheint statt uebermalt zu werden.

   ⚠️ **`backdrop-filter` macht das Element zum Bezugsrahmen fuer
   `position: fixed`-Nachfahren** – dieselbe Falle wie in den Einstellungen
   der Anwendung. Hier ist das unbedenklich, weil in einem Menuepunkt nichts
   Ueberlagerndes steckt; wer dort je einen Dialog unterbringt, muss es
   wissen. */
.kopf-nav { display: flex; align-items: center; gap: 6px; }
.kopf-nav a {
  position: relative;
  color: var(--text-2);
  text-decoration: none;
  font-size: 15px;
  font-weight: 500;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid transparent;
  transition: color .18s ease, background .18s ease,
              border-color .18s ease, box-shadow .18s ease;
}
.kopf-nav a:not(.knopf):hover,
.kopf-nav a:not(.knopf):focus-visible {
  color: var(--text);
  background: linear-gradient(160deg,
              color-mix(in srgb, var(--text) 12%, transparent),
              color-mix(in srgb, var(--text) 4%, transparent));
  border-color: color-mix(in srgb, var(--text) 14%, transparent);
  -webkit-backdrop-filter: blur(10px) saturate(1.4);
  backdrop-filter: blur(10px) saturate(1.4);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--text) 22%, transparent),
              0 6px 16px -10px rgba(0,0,0,0.5);
  outline: none;
}
/* Der Abschnitt, in dem man gerade steht. Kraeftiger als das blosse
   Ueberfahren und in der Akzentfarbe: «hier bist du» ist eine Aussage,
   «hier zeigt deine Maus hin» nur eine Rueckmeldung. */
.kopf-nav a.ist-hier {
  color: var(--text);
  background: linear-gradient(160deg,
              color-mix(in srgb, var(--akzent) 26%, transparent),
              color-mix(in srgb, var(--akzent) 8%, transparent));
  border-color: color-mix(in srgb, var(--akzent) 42%, transparent);
  -webkit-backdrop-filter: blur(12px) saturate(1.6);
  backdrop-filter: blur(12px) saturate(1.6);
  box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 28%, transparent),
              0 8px 20px -12px color-mix(in srgb, var(--akzent) 70%, transparent);
}
/* Wer «weniger Bewegung» eingestellt hat, bekommt den Zustand ohne
   Uebergang – die Aussage bleibt, das Gleiten faellt weg. */
@media (prefers-reduced-motion: reduce) {
  .kopf-nav a { transition: none; }
}

/* ── Knöpfe ────────────────────────────────────────────────── */
.knopf {
  display: inline-block;
  letter-spacing: -0.005em;
  background: linear-gradient(135deg, var(--akzent), var(--akzent-2));
  color: #fff !important;
  text-decoration: none;
  font-weight: 600;
  font-size: 16px;
  padding: 13px 24px;
  border-radius: 11px;
  border: none;
  cursor: pointer;
  font-family: var(--schrift);
  transition: transform 0.15s, box-shadow 0.15s;
  box-shadow: 0 6px 18px rgba(67,56,202,0.22);
}
.knopf:hover { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(67,56,202,0.28); }
.knopf-klein { padding: 8px 16px; font-size: 15px; box-shadow: none; }
.knopf-still {
  background: transparent;
  color: var(--akzent) !important;
  border: 1px solid var(--rand);
  box-shadow: none;
}
.knopf-still:hover { border-color: var(--akzent); }
.knopf-hell { background: #fff; color: var(--akzent) !important; box-shadow: none; }

/* ── Aufhänger ─────────────────────────────────────────────── */
.held {
  padding: 92px 0 76px;
  background:
    radial-gradient(900px 420px at 15% -10%, rgba(109,40,217,0.10), transparent 60%),
    radial-gradient(700px 380px at 88% 0%, rgba(67,56,202,0.10), transparent 60%),
    var(--grund);
}
.held h1 {
  /* Kleiner als mit der Systemschrift: Montserrat baut deutlich breiter,
     bei 62 px brach die Zeile vierfach um und die zwei Knöpfe darunter
     standen untereinander. */
  font-size: clamp(33px, 4.4vw, 51px);
  line-height: 1.12;
  letter-spacing: -0.03em;
  font-weight: 800;
  margin-bottom: 22px;
}
.augenbraue {
  color: var(--akzent);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.01em;
  margin-bottom: 14px;
}
.lead { font-size: 19px; color: var(--text-2); max-width: 660px; }
.lead.mitte { margin-bottom: 34px; }
.held .lead { margin-bottom: 30px; }
.knopf-reihe { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.kleingedruckt { font-size: 14px; color: var(--text-3); }

/* ── Bänder ────────────────────────────────────────────────── */
.band { padding: 74px 0; border-top: 1px solid var(--rand); }
.band-hell { background: var(--grund-2); }
.band h2 {
  font-size: clamp(24px, 3vw, 33px);
  line-height: 1.2;
  letter-spacing: -0.02em;
  font-weight: 800;
  margin-bottom: 14px;
}
.band h3 { font-size: 18px; font-weight: 700; margin-bottom: 7px; letter-spacing: -0.01em; }
.band p { color: var(--text-2); }
.gross { font-size: 21px; color: var(--text) !important; margin-bottom: 36px; }

/* ── Dreispalter ───────────────────────────────────────────── */
.drei {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 30px;
  margin-top: 34px;
}
.drei p { font-size: 16px; }
/* **Drei Spalten, fest.** `auto-fit` brach in schmalen Containern auf 2+1
   um; die dritte Kachel stand dann verwaist neben leerer Flaeche. Drei
   zusammengehoerige Saeulen gehoeren auf eine Zeile (dieselbe Ueberlegung
   wie bei den vier Schritten). */
.drei-fest { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 860px) { .drei-fest { grid-template-columns: 1fr; } }

/* ── Schritte ──────────────────────────────────────────────────
   **Vier Spalten, fest.** `auto-fit` mit `minmax(250px, 1fr)` brach bei
   mittleren Breiten auf drei um – der vierte Schritt stand dann allein in
   einer zweiten Zeile und sah aus wie ein Nachtrag. Ein Ablauf aus vier
   Schritten gehört auf eine Zeile, sonst ist er kein Ablauf mehr.
   Darunter zwei mal zwei, ganz unten einer.

   Die Karten reagieren auf den Zeiger: Sie heben sich, der Rahmen nimmt die
   Akzentfarbe an, und die Nummer wächst. Das ist keine Dekoration – es zeigt,
   dass die Seite lebt, und führt den Blick von Schritt zu Schritt. */
.schritte {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}
@media (max-width: 1080px) { .schritte { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .schritte { grid-template-columns: 1fr; } }

.schritte li {
  background: var(--grund);
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  padding: 24px 22px;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.schritte li:hover {
  transform: translateY(-4px);
  border-color: var(--akzent);
  box-shadow: 0 14px 34px rgba(67,56,202,0.14);
}
.schritte li:hover .nummer {
  transform: scale(1.12);
  box-shadow: 0 4px 14px rgba(67,56,202,0.35);
}

/* Wer «weniger Bewegung» eingestellt hat, bekommt Farbe statt Sprung. */
@media (prefers-reduced-motion: reduce) {
  .schritte li, .schritte li:hover, .schritte li:hover .nummer { transform: none; transition: border-color .18s ease; }
}
.nummer {
  transition: transform .18s ease, box-shadow .18s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px; height: 30px;
  border-radius: 9px;
  background: linear-gradient(135deg, var(--akzent), var(--akzent-2));
  color: #fff;
  font-weight: 800;
  font-size: 15px;
  margin-bottom: 12px;
}
.schritte p { font-size: 16px; }

/* **Kein farbiger Balken links.** Er ist das Erkennungszeichen jedes
   maschinell gebauten Kastens geworden – man sieht ihn und denkt an die
   Vorlage, nicht an den Inhalt. Ein leicht getoenter Rand ringsum sagt
   dasselbe («hier steht etwas Besonderes»), ohne die Handschrift. */
.kreislauf {
  margin-top: 30px;
  background: var(--grund);
  border: 1px solid color-mix(in srgb, var(--akzent) 40%, var(--rand));
  border-radius: var(--radius);
  padding: 22px 24px;
}
.kreislauf h3 { color: var(--akzent); }

/* ── Karten ────────────────────────────────────────────────── */
.karten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 22px;
  margin-top: 34px;
}
.karten article {
  background: var(--grund-2);
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  padding: 24px 22px;
}
.karten p { font-size: 16px; }

/* ── Liste ─────────────────────────────────────────────────── */
.liste { margin: 26px 0 0; padding-left: 0; list-style: none; }
.liste li {
  position: relative;
  padding: 9px 0 9px 30px;
  color: var(--text-2);
  border-bottom: 1px solid var(--rand);
  font-size: 16px;
}
.liste li::before {
  content: '✓';
  position: absolute;
  left: 4px;
  color: var(--tief);
  font-weight: 700;
}

/* ── Anfrage ───────────────────────────────────────────────── */
.band-akzent {
  background: linear-gradient(140deg, var(--akzent), var(--akzent-2));
  color: #fff;
}
.band-akzent h2, .band-akzent .lead, .band-akzent p { color: rgba(255,255,255,0.94); }
.band-akzent .kleingedruckt { color: rgba(255,255,255,0.72); }

/* ------------------------------------------------------------
   Freie Demo-Plätze
   ------------------------------------------------------------
   Steht im violetten Band, deshalb weiss auf einer hellen Fläche und nicht
   umgekehrt. Drei Stufen: sachlich, knapp, belegt – die Farbe soll die
   Dringlichkeit tragen, damit der Satz selbst nüchtern bleiben kann.
   ------------------------------------------------------------ */
/* ⚠️ **Es darf nur EINEN Knopf geben.** Die Platzzahl sah wie einer aus –
   gefuellte Pille, Rahmen, 15px halbfett – und stand als zweites
   knopf-aehnliches Ding neben «Demo starten». Wer zwei Knoepfe sieht, muss
   erst herausfinden, welcher der richtige ist; und einer davon war gar
   keiner, sondern eine Auskunft.

   Ausserdem stand sie LINKS, weil `.plaetze` ausserhalb der zentrierten
   `.demo-ersatz` liegt – die beiden waren gegeneinander versetzt und sahen
   nach Versehen aus.

   Jetzt: zentriert, kleiner, ohne Fuellung – ein Hinweis, kein Ziel. Der
   farbige Rahmen bleibt nur, wenn es knapp wird; DANN ist es eine Aussage. */
.plaetze {
  margin: 26px auto 0;
  display: block;
  width: fit-content;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  font-size: 14px;
  font-weight: 600;
  color: rgba(255,255,255,0.8);
}
/* Knapp: jetzt faellt sie auf – aber immer noch kein Knopf. */
.plaetze-knapp {
  padding: 7px 14px;
  border-radius: 999px;
  background: rgba(251,191,36,0.20);
  border: 1px solid rgba(251,191,36,0.6);
  color: #fff;
}
/* Belegt: ein ganzer Satz, kein Etikett – deshalb ein Kasten mit Zeilen. */
.plaetze-voll {
  display: block;
  width: auto;
  max-width: 520px;
  padding: 12px 16px;
  border-radius: 12px;
  background: rgba(255,255,255,0.16);
  border: 1px solid rgba(255,255,255,0.4);
  color: #fff;
  font-weight: 500;
  font-size: 15px;
  line-height: 1.6;
  text-align: center;
}

.formular { margin-top: 30px; display: flex; flex-direction: column; gap: 16px; }
.feld-paar { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.formular label { display: flex; flex-direction: column; gap: 6px; font-size: 15px; font-weight: 600; }
.formular input, .formular textarea {
  font-family: var(--schrift);
  font-size: 16px;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.35);
  background: rgba(255,255,255,0.12);
  color: #fff;
  font-weight: 400;
}
.formular input::placeholder, .formular textarea::placeholder { color: rgba(255,255,255,0.6); }
.formular input:focus, .formular textarea:focus {
  outline: none;
  border-color: #fff;
  background: rgba(255,255,255,0.18);
}
.formular button { align-self: flex-start; }
.honigtopf { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ── Fuss ──────────────────────────────────────────────────── */
/* ── Fusszeile ─────────────────────────────────────────────────
   Zwei Zeilen statt einer Textwand: oben Marke und Wegweiser
   nebeneinander, unten – durch eine feine Linie getrennt – die Herkunft und
   ein letzter Weg zur Demo.

   **Keine Mailadresse.** Sie stand hier als einziger Kontaktweg und lud vor
   allem Adresssammler ein; wer schreiben will, füllt das Formular aus, und
   wer Kunde ist, meldet sich an. */
.fuss {
  padding: 44px 0 34px;
  background: var(--grund-3);
  border-top: 1px solid var(--rand);
}

.fuss-reihe {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 28px;
  flex-wrap: wrap;
}

.fuss-marke { display: flex; align-items: center; gap: 12px; }
.fuss-marke img { flex-shrink: 0; }
.fuss-name {
  display: block;
  font-weight: 800;
  font-size: 17px;
  letter-spacing: -0.01em;
  color: var(--text);
}
.fuss-haus {
  display: block;
  font-size: 13.5px;
  color: var(--text-3);
  margin-top: 2px;
}

.fuss-nav { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.fuss-nav a {
  color: var(--text-2);
  text-decoration: none;
  font-size: 14.5px;
  border-bottom: 1px solid transparent;
  transition: color .15s, border-color .15s;
}
.fuss-nav a:hover { color: var(--akzent); border-bottom-color: var(--akzent); }

.fuss-schluss {
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid var(--rand);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
}
.fuss-ort { color: var(--text-3); font-size: 13.5px; margin: 0; }

@media (max-width: 720px) {
  .fuss-reihe { flex-direction: column; gap: 20px; }
  .fuss-nav { gap: 6px 20px; }
  /* Der Knopf ist auf dem Telefon die wichtigste Zeile – er kommt zuerst. */
  .fuss-schluss { flex-direction: column-reverse; align-items: stretch; text-align: center; }
  .fuss-recht { justify-content: center; }
  .fuss-schluss .knopf { text-align: center; }
}

/* ── Rückmeldeseite ────────────────────────────────────────── */
.meldung { padding: 110px 0 90px; }
.meldung h1 { font-size: 34px; margin-bottom: 14px; letter-spacing: -0.02em; }

/* ── Schmale Schirme ───────────────────────────────────────── */
@media (max-width: 720px) {
  body { font-size: 16px; }
  .kopf { padding: 12px 16px; }
  .kopf-nav a:not(.knopf) { display: none; }
  .innen { padding: 0 18px; }
  .held { padding: 58px 0 50px; }
  .band { padding: 52px 0; }
  .lead { font-size: 17px; }
}

/* Wer den dunklen Modus eingestellt hat, bekommt ihn auch hier – die
   Anwendung kann es, die Werbeseite sollte nicht schlechter sein. */
@media (prefers-color-scheme: dark) {
  :root {
    --grund: #0d0d14;
    --grund-2: #14141f;
    --grund-3: #10101a;
    --text: #f2f2f7;
    --text-2: #b3b7cc;
    --text-3: #8b90a8;
    --rand: rgba(255,255,255,0.10);
    --akzent: #818cf8;
    --akzent-2: #a78bfa;
    --hoch: #f87171;
    --mittel: #fbbf24;
    --tief: #34d399;
  }
  .kopf { background: rgba(13,13,20,0.85); }
  .knopf { box-shadow: none; }
  .knopf-hell { background: #fff; color: #312e81 !important; }
  .band-akzent { background: linear-gradient(140deg, #312e81, #4c1d95); }
}


/* ------------------------------------------------------------
   Warteschirm während der Einrichtung
   ------------------------------------------------------------
   Liegt über allem, bis die Antwort da ist. `position: fixed` und ein
   eigener Hintergrund, damit von der Seite darunter nichts durchscheint —
   ein halbdurchsichtiger Schleier über einem Formular sieht aus, als sei
   etwas hängengeblieben.
   ------------------------------------------------------------ */
.wartet {
  position: fixed;
  inset: 0;
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: linear-gradient(140deg, var(--akzent), var(--akzent-2));
}
.wartet[hidden] { display: none; }

.wartet-karte {
  max-width: 460px;
  text-align: center;
  color: #fff;
}
.wartet-karte h2 { font-size: 26px; margin: 22px 0 10px; color: #fff; }
.wartet-karte p { color: rgba(255,255,255,0.88); font-size: 16px; margin: 0 0 8px; }
.wartet-zeit { font-variant-numeric: tabular-nums; color: rgba(255,255,255,0.7) !important; font-size: 14px !important; }
.wartet-klein { color: rgba(255,255,255,0.6) !important; font-size: 13px !important; margin-top: 16px !important; }

.wartet-ring {
  width: 46px;
  height: 46px;
  margin: 0 auto;
  border-radius: 50%;
  border: 3px solid rgba(255,255,255,0.28);
  border-top-color: #fff;
  animation: wartet-dreht 0.9s linear infinite;
}
@keyframes wartet-dreht { to { transform: rotate(360deg); } }

/* Wer «weniger Bewegung» eingestellt hat, bekommt statt des Rings einen
   ruhigen Punkt – die Auskunft «es läuft» bleibt. */
@media (prefers-reduced-motion: reduce) {
  .wartet-ring { animation: none; border-top-color: rgba(255,255,255,0.28); background: rgba(255,255,255,0.25); }
}


/* ------------------------------------------------------------
   Produktbilder
   ------------------------------------------------------------
   Echte Screenshots, keine Nachbildung: Was hier steht, muss der Besucher
   nach dem Anmelden wiedererkennen. Deshalb ein leichter Rahmen und ein
   Schatten statt einer Bildschirm-Attrappe – ein gezeichneter Laptop drumherum
   sagt nichts und kostet Platz.

   `width`/`height` stehen im Markup, damit die Seite beim Laden nicht springt.
   ------------------------------------------------------------ */
/* **Kleiner als vorher (940 px).** Der Screenshot ist Beleg, nicht Inhalt:
   In voller Breite drueckte er den Text, der die eigentliche Arbeit macht,
   unter die Bildschirmkante — und lesbar war er dort trotzdem nicht, weil
   eine Oberflaeche mit 2000 px Breite auf einer Werbeseite ohnehin nur als
   Gesamteindruck wirkt. Wer Einzelheiten sehen will, klickt (siehe `.lupe`). */
.schaubild {
  margin: 30px auto 8px;
  max-width: 600px;
}
.schaubild img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,0.08);
  box-shadow: 0 18px 50px rgba(20,20,50,0.16);
  background: #fff;
}
.schaubild figcaption {
  margin-top: 12px;
  font-size: 14px;
  color: var(--text-3);
  text-align: center;
}
/* Der Statuskasten ist hoch und schmal – in voller Breite wäre er eine Säule. */
.schaubild.schmal-bild { max-width: 250px; }

/* ------------------------------------------------------------
   Die vier Bewertungsknöpfe, nachgebaut
   ------------------------------------------------------------
   Hier genügt der Nachbau: Es geht um die Geste, nicht um den Beweis. Die
   Farben folgen der Steigerung aus der Anwendung – Gelb hebt hervor, Grün
   stimmt zu, Grau winkt ab, Rot verbietet.
   ------------------------------------------------------------ */
/* `.knopf-muster` – der stumme Nachbau der vier Knöpfe – ist am 17.08.2026
   entfallen; an seiner Stelle steht der Simulator, in dem man sie drücken
   darf. Die Farben der Knöpfe (`.mk-*`) bleiben, er nutzt dieselben. */
.mk {
  border-radius: 9px;
  padding: 10px 18px;
  font-size: 15px;
  font-weight: 600;
  border: 1px solid;
  white-space: nowrap;
}
.mk-stern  { color:#92400e; border-color:#d97706; background:rgba(251,191,36,.16); }
.mk-hoch   { color:#065f46; border-color:#059669; background:rgba(52,211,153,.16); }
.mk-runter { color:#334155; border-color:#64748b; background:rgba(148,163,184,.18); }
.mk-block  { color:#991b1b; border-color:#dc2626; background:rgba(248,113,113,.16); }

.knopf-reihe.mitte { justify-content: center; margin-top: 30px; }
.mitte.kleingedruckt { text-align: center; }

@media (max-width: 700px) {
  .schaubild { margin-top: 24px; }
  .schaubild figcaption { font-size: 13px; }
  .mk { font-size: 13.5px; padding: 8px 13px; }
}

/* Ein schmales Band, das nur eine Aufforderung trägt. */
.band-schmal-cta { background: var(--grund-3); padding: 46px 0; }
.band-schmal-cta .gross { margin: 0 0 6px; }


/* ------------------------------------------------------------
   Leben beim Überfahren – überall gleich
   ------------------------------------------------------------
   Dieselbe Geste wie bei den Schritten: leicht anheben, Rahmen in der
   Akzentfarbe. Eine Seite, auf der nichts reagiert, wirkt wie ein Ausdruck.
   ------------------------------------------------------------ */
.karten > *, .drei > * {
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  border-radius: var(--radius);
}
.karten > *:hover, .drei > *:hover {
  transform: translateY(-3px);
}
.karten > *:hover { border-color: var(--akzent); box-shadow: 0 14px 34px rgba(67,56,202,0.12); }

/* Die Produktbilder ebenfalls – sie laden zum Hinsehen ein. */
.schaubild img { transition: transform .25s ease, box-shadow .25s ease; }
.schaubild:hover img {
  transform: translateY(-4px) scale(1.006);
  box-shadow: 0 26px 64px rgba(20,20,50,0.22);
}

/* Die nachgebauten Bewertungsknöpfe reagieren wie echte. */
.mk { transition: transform .15s ease, box-shadow .15s ease; }
.mk:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(20,20,50,0.12); }

/* Knöpfe: ein Hauch Bewegung, kein Hüpfen. */
.knopf { transition: transform .15s ease, box-shadow .15s ease, background .15s ease; }
.knopf:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(67,56,202,0.28); }

@media (prefers-reduced-motion: reduce) {
  .karten > *:hover, .drei > *:hover, .schaubild:hover img,
  .mk:hover, .knopf:hover { transform: none; }
}


/* ------------------------------------------------------------
   Bildschirm mit perspektivischer Sicht
   ------------------------------------------------------------
   Der Screenshot steht in einem Gehäuse und ist leicht weggedreht – beim
   Überfahren richtet er sich auf. Zwei Gründe, warum das mehr ist als Zierat:
   Ein angeschnittener Winkel sagt «Bildschirmfoto» schneller als jede
   Bildunterschrift, und die Bewegung beim Aufrichten lädt zum Hinsehen ein.

   **`perspective` gehört auf den ELTERN, `transform` aufs Kind.** Steht
   beides am selben Element, wirkt die Perspektive nicht (jedes Element
   bekäme seinen eigenen Fluchtpunkt) – die Karte wäre dann bloss schief.

   **Kein `overflow: hidden` auf `.monitor`**: Der Schatten tritt aus, und der
   Fuss steht bewusst ausserhalb des Gehäuses.
   ------------------------------------------------------------ */
.monitor {
  perspective: 1700px;
  padding: 0 0 26px;
}

.monitor-schirm {
  /* Das Gehäuse: dunkler Rand, oben schmaler als unten – so sitzt ein
     Bildschirm wirklich. */
  background: linear-gradient(160deg, #2a2c3f, #16172a);
  border-radius: 14px;
  padding: 12px 12px 26px;
  box-shadow:
    0 2px 0 rgba(255,255,255,0.08) inset,
    0 30px 70px rgba(20,20,50,0.30);
  transform: rotateY(-9deg) rotateX(3.5deg);
  transform-origin: 50% 60%;
  transition: transform .55s cubic-bezier(.2,.7,.3,1), box-shadow .55s ease;
  position: relative;
}
.monitor-rechts .monitor-schirm { transform: rotateY(9deg) rotateX(3.5deg); }

/* Beim Überfahren dreht er sich frontal – und rückt dabei etwas näher. */
.monitor:hover .monitor-schirm,
.monitor:focus-within .monitor-schirm {
  transform: rotateY(0deg) rotateX(0deg) translateZ(24px);
  box-shadow: 0 40px 90px rgba(20,20,50,0.34);
}

.monitor-schirm img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 6px;
  border: none;
  box-shadow: none;
  background: #fff;
}

/* Der Standfuss. Ein Trapez aus zwei Formen: Hals und Platte. */
.monitor-fuss {
  width: 128px;
  height: 12px;
  margin: -6px auto 0;
  background: linear-gradient(180deg, #2a2c3f, #1a1b2c);
  border-radius: 0 0 10px 10px;
  box-shadow: 0 12px 22px rgba(20,20,50,0.22);
  position: relative;
}
.monitor-fuss::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -9px;
  transform: translateX(-50%);
  width: 210px;
  height: 9px;
  border-radius: 999px;
  background: linear-gradient(180deg, #23253a, #151626);
}

/* Der Rahmen ersetzt den Rand der Abbildung – sonst lägen zwei übereinander. */
.schaubild .monitor img { border: none; }
.schaubild:hover .monitor img { transform: none; box-shadow: none; }

@media (max-width: 720px) {
  /* Auf dem Telefon frontal: Ein gedrehter Bildschirm verliert dort Breite,
     die der Screenshot ohnehin schon knapp hat. */
  .monitor-schirm,
  .monitor-rechts .monitor-schirm { transform: none; padding: 8px 8px 18px; }
  .monitor-fuss { width: 96px; }
  .monitor-fuss::after { width: 150px; }
}

@media (prefers-reduced-motion: reduce) {
  .monitor-schirm { transition: none; }
  .monitor:hover .monitor-schirm { transform: rotateY(-9deg) rotateX(3.5deg); }
  .monitor-rechts:hover .monitor-schirm { transform: rotateY(9deg) rotateX(3.5deg); }
}


/* ------------------------------------------------------------
   Rollen – für wen sich der Kurator lohnt
   ------------------------------------------------------------
   Drei feste Spalten statt `auto-fit`: Bei neun Einträgen soll die Reihe
   sauber 3 × 3 aufgehen. Mit `auto-fit` brach sie je nach Breite auf zwei um,
   und dann stand der letzte allein – genau das Bild, das vorher schon
   störte.
   ------------------------------------------------------------ */
.rollen {
  display: grid;
  /* Zwei Spalten: Es sind vier Rollen — bei dreien stuende die vierte
     allein in einer zweiten Zeile und saehe aus wie ein Nachtrag. */
  grid-template-columns: repeat(2, 1fr);
  gap: 26px 30px;
  margin-top: 34px;
}
.rollen > div {
  padding: 20px 20px 18px;
  border-radius: var(--radius);
  border: 1px solid transparent;
  transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.rollen > div:hover {
  transform: translateY(-3px);
  background: var(--grund);
  border-color: var(--rand);
  box-shadow: 0 12px 30px rgba(20,20,50,0.10);
}
.rollen h3 { margin-bottom: 8px; }
.rollen p { font-size: 15.5px; margin: 0; }
.rollen-rest { margin-top: 22px; }

@media (max-width: 620px) { .rollen { grid-template-columns: 1fr; gap: 6px; } }
@media (prefers-reduced-motion: reduce) { .rollen > div:hover { transform: none; } }


/* ------------------------------------------------------------
   Preise
   ------------------------------------------------------------
   Drei Karten, die mittlere hervorgehoben. Sie ist nicht die teuerste,
   sondern die, die für die meisten passt – ein hervorgehobenes Höchstangebot
   wirkt wie ein Verkaufsversuch, eine hervorgehobene Mitte wie eine
   Empfehlung.

   Gleich hohe Karten über `align-items: stretch` (Grid-Vorgabe) und einen
   Knopf, den `margin-top: auto` nach unten drückt: Sonst stünden die Knöpfe
   auf drei verschiedenen Höhen, je nach Länge der Aufzählung.
   ------------------------------------------------------------ */
.preise {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-top: 38px;
}

.preis {
  display: flex;
  flex-direction: column;
  background: var(--grund);
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  padding: 28px 24px 26px;
  position: relative;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.preis:hover {
  transform: translateY(-4px);
  border-color: var(--akzent);
  box-shadow: 0 16px 40px rgba(67,56,202,0.14);
}

.preis h3 { font-size: 19px; margin: 0 0 6px; }

.preis-zahl {
  font-size: 40px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text);
  margin: 0 0 4px;
  line-height: 1.1;
}
.preis-zahl .waehrung { font-size: 17px; font-weight: 700; color: var(--text-3); margin-right: 5px; }
.preis-zahl .je { font-size: 15px; font-weight: 600; color: var(--text-3); margin-left: 4px; }

.preis-wer { color: var(--text-3); font-size: 14.5px; margin: 0 0 18px; }

.preis ul { list-style: none; padding: 0; margin: 0 0 22px; }
.preis li {
  font-size: 15px;
  color: var(--text-2);
  padding: 7px 0 7px 26px;
  position: relative;
  border-top: 1px solid var(--rand);
}
.preis li:first-child { border-top: none; }
.preis li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--akzent);
  font-weight: 700;
}

/* Die Ersparnis je Karte – nur im Jahrestakt sichtbar. Sie steht ueber der
   Zeile «einmal CHF … im Jahr», weil sie deren Zusammenfassung ist: Erst die
   Zahl, die man wissen will, dann die Herleitung. */
.preis-spar {
  display: inline-block;
  /* Die Karte ist ein Flex-Spalte – ohne das zieht sich die Marke ueber die
     ganze Breite und sieht aus wie ein Balken statt wie eine Marke. */
  align-self: flex-start;
  margin-bottom: 6px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--tief);
  background: color-mix(in srgb, var(--tief) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--tief) 32%, transparent);
}
.preis-spar[hidden] { display: none; }

/* ── Die vier Quellenarten ──────────────────────────────────
   Zwei Spalten, nicht drei: Vier Karten auf drei Spalten lassen die vierte
   allein in der zweiten Reihe stehen. Symbol links, Text rechts – so bleibt
   die Zeile lesbar breit, statt zu einer schmalen Saeule zu werden. */
.quellen-arten {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.quelle-art {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  background: var(--grund);
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  padding: 20px 22px;
}
.quelle-art h3 { font-size: 17px; font-weight: 700; margin-bottom: 6px; letter-spacing: -0.01em; }
.quelle-art p { font-size: 14.5px; line-height: 1.6; color: var(--text-2); }
@media (max-width: 780px) {
  .quellen-arten { grid-template-columns: 1fr; }
}

/* ── Was geht, was nicht ────────────────────────────────────
   Zwei Absaetze unter den Quellen-Kacheln. Der zweite nennt die Grenzen –
   nicht kleingedruckt, sondern gleichrangig: Wer sie erst in der Demo
   entdeckt, hat einen schlechteren Eindruck als der, dem sie vorher jemand
   gesagt hat. */
.quellen-fuss {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 26px;
}
.quellen-fuss p {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--text-2);
  padding: 16px 18px;
  border-radius: var(--radius);
  border: 1px solid var(--rand);
  background: var(--grund);
}
.quellen-plus strong { color: var(--tief); }
.quellen-minus strong { color: var(--text); }
@media (max-width: 720px) {
  .quellen-fuss { grid-template-columns: 1fr; }
}

/* ── Erklaerpunkt (i) ───────────────────────────────────────
   Manche Worte auf einer Preisseite muessen erklaert werden, ohne die Zeile
   zu verlaengern: «Leserzugang» ist eines davon – wer es nicht kennt,
   vermutet dahinter einen zweiten Kurator und rechnet den Tarif falsch.

   Die Blase haengt am `body`, nicht am Punkt. Ein Kasten als Nachfahre wird
   von jedem `overflow: hidden` beschnitten, und die Preiskarte hat gerundete
   Ecken – dieselbe Ueberlegung wie bei `Tooltips.tsx` in der Anwendung. */
.info-punkt {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; margin-left: 6px;
  border-radius: 50%;
  border: 1px solid var(--rand);
  background: var(--grund-2);
  color: var(--text-3);
  font-size: 10.5px; font-weight: 800; font-family: var(--schrift);
  line-height: 1; cursor: help; vertical-align: 1px;
  padding: 0;
  transition: color .15s ease, border-color .15s ease;
}
.info-punkt:hover, .info-punkt:focus-visible {
  color: var(--akzent); border-color: var(--akzent); outline: none;
}
.info-blase {
  position: fixed;
  z-index: 90;
  max-width: 280px;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--grund);
  border: 1px solid var(--rand);
  box-shadow: 0 18px 40px -14px rgba(0,0,0,0.45);
  color: var(--text-2);
  font-size: 13px; line-height: 1.5; font-family: var(--schrift);
  pointer-events: none;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity .14s ease, transform .14s ease;
}
.info-blase.ist-da { opacity: 1; transform: translateY(0); }

/* Der Knopf sitzt unten, auf gleicher Höhe wie in den Nachbarkarten. */
.preis .knopf { margin-top: auto; text-align: center; }

/* Die Mitte: kräftigerer Rahmen und ein Schild. */
.preis-mitte {
  border-color: var(--akzent);
  box-shadow: 0 14px 36px rgba(67,56,202,0.12);
}
.preis-marke {
  position: absolute;
  top: -11px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--akzent);
  color: #fff;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 999px;
  white-space: nowrap;
}

.preis-fuss { margin-top: 26px; color: var(--text-3); font-size: 14.5px; }

@media (max-width: 900px) { .preise { grid-template-columns: 1fr; max-width: 460px; margin-inline: auto; } }
@media (prefers-reduced-motion: reduce) { .preis:hover { transform: none; } }


/* ------------------------------------------------------------
   Bild neben Text
   ------------------------------------------------------------
   Der Statuskasten ist hoch und schmal – über dem Text stand er als Säule
   in der Mitte und drückte den eigentlichen Inhalt eine Bildschirmhöhe nach
   unten. Neben dem Text füllt er genau den Platz, den seine Form vorgibt.

   `align-items: start`, damit das Bild oben bündig steht und nicht neben
   einem längeren Text in die Mitte rutscht.
   ------------------------------------------------------------ */
.nebeneinander {
  display: grid;
  grid-template-columns: 1fr 260px;
  gap: 40px;
  align-items: start;
  margin-top: 30px;
}
.nebeneinander-text > :first-child { margin-top: 0; }
.nebeneinander-bild { margin: 0; max-width: 260px; }

@media (max-width: 860px) {
  /* Untereinander – aber das Bild ZUERST, wie zuvor: Auf einem schmalen
     Schirm nebeneinander zu zwingen, macht beides unlesbar. */
  .nebeneinander { grid-template-columns: 1fr; gap: 24px; }
  .nebeneinander-bild { max-width: 280px; margin-inline: auto; order: -1; }
}


/* ------------------------------------------------------------
   Umschalter monatlich / jährlich
   ------------------------------------------------------------
   Zwei Knöpfe in einer Schiene, der aktive gefüllt. Kein Kippschalter:
   Ein Schalter sagt nicht, welche der beiden Seiten gerade gilt – zwei
   beschriftete Knöpfe schon.
   ------------------------------------------------------------ */
.takt {
  display: inline-flex;
  gap: 4px;
  margin: 26px auto 0;
  padding: 4px;
  background: var(--grund-3);
  border: 1px solid var(--rand);
  border-radius: 999px;
}
.takt[hidden] { display: none; }
/* Die Schiene mittig, ohne den Fluss der Sektion zu stören. */
.preise, .takt { position: relative; }
.band .innen > .takt { display: inline-flex; }
.takt-wrap { text-align: center; }

.takt-knopf {
  border: none;
  background: none;
  border-radius: 999px;
  padding: 9px 20px;
  font-family: var(--schrift);
  font-size: 14.5px;
  font-weight: 600;
  color: var(--text-2);
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.takt-knopf:hover { color: var(--text); }
.takt-knopf.ist-aktiv {
  background: var(--akzent);
  color: #fff;
  box-shadow: 0 4px 12px rgba(67,56,202,0.25);
}
.takt-spar {
  font-size: 11.5px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(4,120,87,0.14);
  color: var(--tief);
}
.takt-knopf.ist-aktiv .takt-spar { background: rgba(255,255,255,0.22); color: #fff; }

.preis-jahr {
  font-size: 13px;
  color: var(--text-3);
  margin: 0 0 16px;
  min-height: 1.2em;
}

/* ============================================================
   Zum Vergrössern anklicken
   ============================================================
   Die Abbildungen stehen jetzt klein (600 px statt 940 px). Wer Einzelheiten
   sehen will — die Punktzahl an einer Story, die Stufen im Themenbaum —,
   klickt und bekommt sie bildschirmfüllend.

   **`<dialog>`, nicht ein selbstgebauter Kasten.** Der Browser übernimmt
   damit alles, was man sonst von Hand falsch macht: Esc schliesst, der
   Fokus bleibt gefangen, der Rest der Seite wird für Vorlesegeräte
   unsichtbar, und die Rückkehr landet wieder auf dem Auslöser.

   **Der Auslöser ist ein echter `<button>`.** Ein `onclick` auf dem `<img>`
   ist mit der Tastatur nicht erreichbar und wird von keiner Hilfstechnik als
   bedienbar gemeldet.
   ------------------------------------------------------------ */
.lupe-knopf {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
  font: inherit;
  color: inherit;
  border-radius: 6px;
}
.lupe-knopf:focus-visible {
  outline: 3px solid var(--akzent);
  outline-offset: 4px;
}

/* Der Hinweis steht in der Bildunterschrift, nicht als Schild über dem Bild:
   Ein Schild verdeckt genau das, was es anzusehen einlädt. */
.lupe-hinweis {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12.5px;
  color: var(--text-3);
  white-space: nowrap;
}
.schaubild figcaption .lupe-hinweis::before { content: "⤢"; font-size: 13px; }

/* Die Lupe: ein Rahmen um das Bild, kein nacktes Bild auf Schwarz.
   Ohne Rahmen und ohne Abstand sah der geöffnete Screenshot aus, als wäre
   die Seite abgestürzt — der Bildrand ging ohne Übergang in den Hintergrund
   über, und der Schliessen-Knopf schwebte irgendwo darüber. */
/* Die Lupe.
   ------------------------------------------------------------
   **Die Höhe muss durchgereicht werden, sonst hilft `max-height` am
   Dialog gar nichts.** Beim ersten Versuch stand am Dialog `max-height:
   92vh`, aber der Rahmen darin war unbegrenzt und `overflow: visible` liess
   ihn hinauswachsen: Bei einem fast quadratischen Screenshot (themen.png ist
   1866×1784) wurde der Kasten höher als das Fenster, der Schliessen-Knopf
   rutschte an den oberen Rand und die Bildunterschrift lag unterhalb des
   Sichtbaren. Deshalb jetzt eine Kette aus Flex: Der Rahmen ist begrenzt,
   die Unterschrift nimmt ihren Platz zuerst, das Bild bekommt den Rest —
   `min-height: 0` inklusive, sonst weigert sich ein Flex-Kind zu schrumpfen.
   ------------------------------------------------------------ */
dialog.lupe {
  /* **`margin: auto` muss zurückgeholt werden.** Ganz oben steht
     `* { margin: 0 }` — und genau daran hängt die Mitte eines `<dialog>`:
     Der Browser zentriert ihn über `inset: 0; margin: auto`, der Reset
     überschreibt das, und der Kasten klebt am linken Rand. */
  margin: auto;
  border: 0;
  padding: 0;
  background: none;
  max-width: min(1100px, 92vw);
  max-height: 90vh;
  overflow: visible;
}
dialog.lupe::backdrop {
  background: rgba(10,11,24,0.82);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
dialog.lupe[open] { animation: lupe-auf .28s cubic-bezier(.16,1,.3,1); }
@keyframes lupe-auf {
  from { opacity: 0; transform: scale(.96) translateY(10px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) { dialog.lupe[open] { animation: none; } }

.lupe-bild {
  position: relative;
  display: flex;
  flex-direction: column;
  max-height: 90vh;
  background: var(--grund);
  border: 1px solid var(--rand);
  border-radius: 18px;
  padding: 10px;
  box-shadow: 0 40px 90px -30px rgba(0,0,0,0.6);
}
dialog.lupe img {
  display: block;
  margin: 0 auto;
  flex: 0 0 auto;
  /* **Zwei Obergrenzen und `height: auto` — kein `object-fit`.** Mit
     `flex: 0 1 auto` schrumpfte zwar der Kasten des Bildes, nicht aber das
     Bild darin: Es wurde unten abgeschnitten statt kleiner. Bei `max-width`
     und `max-height` zusammen mit `height: auto` rechnet der Browser das
     Seitenverhältnis selbst und wählt die kleinere der beiden Grenzen. */
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: calc(90vh - 84px);
  border-radius: 9px;
  border: 1px solid var(--rand);
  background: #fff;
}
.lupe-text {
  flex: 0 0 auto;
  margin: 11px 6px 3px;
  color: var(--text-2);
  font-size: 13.5px;
  line-height: 1.5;
  text-align: center;
}
/* Der Schliessen-Knopf sitzt halb auf der Ecke. Bei `max-height: 90vh`
   bleiben oben 5vh Luft – genug, dass er nie aus dem Fenster ragt. */
.lupe-zu {
  position: absolute;
  top: -14px;
  right: -14px;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 2px solid var(--grund);
  background: var(--text);
  color: var(--grund);
  cursor: pointer;
  font-family: var(--schrift);
  box-shadow: 0 6px 18px rgba(0,0,0,0.35);
  transition: transform .18s ease;
  z-index: 2;
}
.lupe-zu:hover { transform: scale(1.09); }
.lupe-zu .sym { width: 18px; height: 18px; }

/* ============================================================
   Statussignal im Kopf
   ============================================================
   **Der Punkt erscheint erst, wenn der Kurator geantwortet hat.** Ein grüner
   Punkt, der fest im HTML steht, ist ein vorgetäuschtes Live-Signal — auf
   einer Seite, deren ganzes Argument Ehrlichkeit ist, wäre das der falsche
   Ort zum Schummeln. Die Klasse `ist-live` setzt das Skript, das ohnehin die
   freien Plätze holt; kommt keine Antwort, bleibt die Aussage über das
   Hosting stehen, nur ohne Punkt.
   ------------------------------------------------------------ */
.kopf-status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-2);
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--grund-2);
  border: 1px solid var(--rand);
  white-space: nowrap;
}
.kopf-status .punkt { display: none; }
.kopf-status.ist-live .punkt {
  display: block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--tief);
  box-shadow: 0 0 0 3px rgba(4,120,87,0.18);
}
/* Unter 1080 px hat der Kopf keinen Platz mehr – dort zählt die Navigation. */
@media (max-width: 1080px) { .kopf-status { display: none; } }

/* ============================================================
   Fakten-Leiste
   ============================================================
   Statt erfundener Kundenstimmen vier Zahlen, die sich nachprüfen lassen.
   **Keine Wirkungsversprechen wie «85 % weniger Rauschen»** — so etwas messen
   wir nirgends, und die erste Rückfrage danach wäre peinlich. Was hier steht,
   steht so auch im Code.
   ------------------------------------------------------------ */
.band-fakten {
  padding: 26px 0;
  background: var(--grund-2);
  border-top: 1px solid var(--rand);
  border-bottom: 1px solid var(--rand);
}
.fakten {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.fakt { text-align: center; }
.fakt-zahl {
  display: block;
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--akzent);
  line-height: 1.2;
}
/* Die Fahne traegt keine Ziffern und wirkt neben «10 Tage» sonst wie ein
   Versehen – sie braucht etwas mehr Groesse fuer dasselbe Gewicht. */
.fakt-zahl.fahne { font-size: 0; line-height: 1; }
.fakt-zahl.fahne svg { display: inline-block; vertical-align: middle; }
.fakt-text {
  display: block;
  font-size: 13px;
  color: var(--text-2);
  line-height: 1.45;
  margin-top: 3px;
}
@media (max-width: 720px) {
  .fakten { grid-template-columns: repeat(2, 1fr); gap: 20px 14px; }
  .fakt-zahl { font-size: 22px; }
}

/* ============================================================
   Der Simulator
   ============================================================
   Er ersetzt den stummen Nachbau der vier Knöpfe: Dieselbe Fläche, aber man
   darf drücken.

   **Die Zahlen sind die echten.** Der Score läuft von 0 bis 100, die Grenzen
   liegen bei 70 und 40 (`prioritaetFuer` in lib/db/queries.ts). Eine erfundene
   Skala von 1 bis 10 wäre beim ersten Blick ins Produkt aufgeflogen — und mit
   ihr alles andere auf dieser Seite.

   **Und die Wirkung ist die echte.** Eine Bewertung färbt die Story nicht um
   und multipliziert keinen Score; sie fliesst in das Lernprofil und damit in
   künftige Läufe. Was hier gezeigt wird, ist deshalb die Notiz «gemerkt», nicht
   ein neuer Balken.
   ------------------------------------------------------------ */
.simulator {
  max-width: 620px;
  margin: 26px auto 0;
  background: var(--grund);
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  padding: 20px 22px 22px;
  box-shadow: 0 10px 30px rgba(20,20,50,0.07);
}
.sim-tag {
  display: inline-block;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--akzent);
  background: var(--grund-2);
  border: 1px solid var(--rand);
  padding: 3px 9px;
  border-radius: 999px;
  margin-bottom: 9px;
}
.simulator > p.sim-lead { font-size: 14.5px; color: var(--text-2); margin-bottom: 16px; }

/* Die Story-Karte, in der Machart der Anwendung: farbiger Balken links,
   dessen Farbe die Punktzahl bestimmt. */
.sim-karte {
  border: 1px solid var(--rand);
  border-left: 4px solid var(--mittel);
  border-radius: 10px;
  padding: 14px 16px;
  background: var(--grund);
  transition: border-left-color .3s ease, opacity .3s ease;
}
.sim-karte.ist-hoch   { border-left-color: var(--hoch); }
.sim-karte.ist-mittel { border-left-color: var(--mittel); }
.sim-karte.ist-tief   { border-left-color: var(--tief); }
.sim-karte.ist-weg    { opacity: .45; }

.sim-kopf {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
  margin-bottom: 7px;
}
.sim-score {
  font-size: 12px;
  font-weight: 700;
  padding: 2px 9px;
  border-radius: 999px;
  border: 1px solid;
}
.sim-score.ist-hoch   { color: var(--hoch);   border-color: rgba(220,38,38,0.35);  background: rgba(220,38,38,0.07); }
.sim-score.ist-mittel { color: var(--mittel); border-color: rgba(161,98,7,0.35);   background: rgba(161,98,7,0.08); }
.sim-score.ist-tief   { color: var(--tief);   border-color: rgba(4,120,87,0.35);   background: rgba(4,120,87,0.07); }
.sim-score.ist-weg    { color: var(--text-3); border-color: var(--rand);           background: var(--grund-2); }
.sim-quelle { font-size: 12.5px; color: var(--text-3); }
.sim-karte h4 { font-size: 16.5px; line-height: 1.4; margin-bottom: 5px; letter-spacing: -0.012em; }
.sim-karte > p { font-size: 14.5px; color: var(--text-2); margin-bottom: 13px; }

/* Enger als im Briefing: Bei 15 px und 18 px Innenabstand brach «Nie wieder»
   in eine zweite Zeile um und stand dort allein – vier gleichwertige Knoepfe
   gehoeren nebeneinander, sonst sieht der letzte aus wie ein Nachtrag. */
.sim-knoepfe { display: flex; gap: 6px; flex-wrap: wrap; }
.sim-knoepfe .mk {
  cursor: pointer;
  font-family: var(--schrift);
  font-size: 13.5px;
  padding: 8px 12px;
}
.sim-knoepfe .mk[aria-pressed="true"] { box-shadow: 0 0 0 2px currentColor inset; }

/* Die Antwort des Kurators. `aria-live` steht im Markup – wer die Seite hört,
   soll die Wirkung mitbekommen, ohne dorthin navigieren zu müssen. */
.sim-antwort {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  margin-top: 14px;
  padding: 13px 15px;
  border-radius: 10px;
  background: var(--grund-2);
  border: 1px solid var(--rand);
}
.sim-antwort[hidden] { display: none; }
.sim-antwort .sim-zeichen { font-size: 19px; line-height: 1.3; flex-shrink: 0; }
.sim-antwort strong { display: block; font-size: 14.5px; margin-bottom: 2px; }
.sim-antwort p { font-size: 13.5px; color: var(--text-2); line-height: 1.55; }
.sim-fuss { font-size: 12.5px; color: var(--text-3); margin-top: 12px; text-align: center; }

/* ============================================================
   Häufige Fragen
   ============================================================
   `<details>`/`<summary>` — das Aufklappen kann der Browser selbst. Ein
   nachgebautes Akkordeon braucht JavaScript, Tastaturbedienung und
   `aria-expanded` von Hand und ist am Ende schlechter.
   ------------------------------------------------------------ */
.faq { max-width: 760px; margin: 26px auto 0; }
.faq details {
  border: 1px solid var(--rand);
  border-radius: 11px;
  background: var(--grund);
  margin-bottom: 10px;
  overflow: hidden;
}
.faq details[open] { border-color: var(--akzent); }
.faq summary {
  cursor: pointer;
  padding: 15px 46px 15px 18px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
  list-style: none;
  position: relative;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 21px;
  font-weight: 400;
  color: var(--akzent);
  line-height: 1;
}
.faq details[open] summary::after { content: "−"; }
.faq summary:hover { background: var(--grund-2); }
.faq summary:focus-visible { outline: 2px solid var(--akzent); outline-offset: -2px; }
.faq details > p {
  padding: 0 18px 16px;
  font-size: 15.5px;
  color: var(--text-2);
  line-height: 1.65;
}

/* ── Fusszeile: rechtliche Verweise ────────────────────────── */
.fuss-recht {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  align-items: center;
}
/* **Nicht `rgba(255,255,255,…)`.** Die Fusszeile steht auf `--grund-3`, und
   das ist im hellen Erscheinungsbild fast weiss – helle Schrift darauf war
   unlesbar. Tokens wirken in beiden Modi. */
.fuss-recht a { color: var(--text-3); text-decoration: none; font-size: 13.5px; }
.fuss-recht a:hover { color: var(--text); text-decoration: underline; }

@media (prefers-reduced-motion: reduce) {
  .sim-karte { transition: none; }
}

/* ============================================================
   Impressum und Datenschutz
   ============================================================
   Zwei schlichte Textseiten. Sie nutzen den Kopf und die Fusszeile der
   Startseite, damit man merkt, dass man dasselbe Haus nicht verlassen hat.
   ------------------------------------------------------------ */
.rechtsseite { border-top: none; padding-top: 46px; }
.rechtsseite h1 {
  font-size: clamp(28px, 4vw, 40px);
  letter-spacing: -0.025em;
  font-weight: 800;
  line-height: 1.15;
  margin-bottom: 18px;
}
.rechtsseite h2 {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.012em;
  margin: 34px 0 10px;
  padding-top: 20px;
  border-top: 1px solid var(--rand);
}
.rechtsseite p { margin-bottom: 13px; font-size: 16.5px; }
.rechtsseite .lead { margin-bottom: 8px; }
.rechtsseite .augenbraue a { text-decoration: none; }
.rechtsseite .liste { margin: 0 0 14px 20px; }
.rechtsseite .liste li { margin-bottom: 9px; font-size: 16.5px; color: var(--text-2); }
.rechtsseite code {
  font-family: 'SF Mono', Menlo, Consolas, monospace;
  font-size: 0.92em;
  background: var(--grund-2);
  border: 1px solid var(--rand);
  border-radius: 5px;
  padding: 1px 5px;
}
.rechts-stand {
  margin-top: 34px;
  padding-top: 18px;
  border-top: 1px solid var(--rand);
  font-size: 14px;
  color: var(--text-3);
}

/* ============================================================
   Atmosphäre — Licht hinter der Seite
   ============================================================
   Übernommen aus dem AI-Studio-Entwurf, aber ohne dessen Mittel: keine
   fremde Schrift, kein Tailwind, kein React. Was den Eindruck dort macht,
   ist reines CSS — drei weiche Farbschleier, ein Punktraster und Flächen,
   die durchscheinen.

   **Drei Schleier in EINEM Element.** `body::after` trägt alle drei als
   Radialverläufe. Der Entwurf nimmt dafür drei `div` mit `blur(140px)` –
   das sind drei Ebenen, die der Browser bei jedem Bildlauf neu weichzeichnen
   muss. Ein Verlauf kostet nichts und sieht gleich aus.

   `position: fixed`, damit die Schleier beim Scrollen stehen bleiben: Die
   Seite zieht daran vorbei, statt dass alles mitwandert.
   ------------------------------------------------------------ */

/* Der Grund wandert auf `html`, damit die beiden Ebenen unter `body` liegen
   können. Ohne das verdeckt der eigene Hintergrund des `body` sie. */
html { background: var(--grund); }
body { background: transparent; }

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background-image: radial-gradient(rgba(120,132,160,0.55) 1px, transparent 1px);
  background-size: 26px 26px;
  opacity: 0.34;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(700px 580px at 16%  0%,  rgba(99,102,241,0.38), transparent 64%),
    radial-gradient(620px 560px at 94% 22%,  rgba(56,189,248,0.32), transparent 64%),
    radial-gradient(760px 620px at 30% 62%,  rgba(139,92,246,0.26), transparent 64%),
    radial-gradient(640px 540px at 86% 92%,  rgba(67,56,202,0.22), transparent 64%);
}

@media (prefers-color-scheme: dark) {
  body::before { opacity: 0.26; }
  body::after {
    background:
      radial-gradient(700px 580px at 16%  0%,  rgba(99,102,241,0.34), transparent 64%),
      radial-gradient(620px 560px at 94% 22%,  rgba(34,211,238,0.22), transparent 64%),
      radial-gradient(760px 620px at 30% 62%,  rgba(139,92,246,0.26), transparent 64%),
      radial-gradient(640px 540px at 86% 92%,  rgba(67,56,202,0.24), transparent 64%);
  }
}

/* Die Bänder lassen das Licht durch. Vorher deckten sie es vollständig zu –
   der Aufwand oben wäre dann nur im Aufhänger sichtbar gewesen. */
.band-hell { background: color-mix(in srgb, var(--grund-2) 55%, transparent); }
.band-fakten { background: color-mix(in srgb, var(--grund-2) 48%, transparent); }
.fuss { background: color-mix(in srgb, var(--grund-3) 70%, transparent); }
.held { background: transparent; }

/* ============================================================
   Glasflächen
   ============================================================
   Eine Karte ist nicht mehr weiss, sondern durchscheinend, und was hinter
   ihr liegt, wird weichgezeichnet. Dazu ein heller Strich an der Oberkante –
   im Entwurf «specular»: das Licht, das sich an einer Glaskante bricht.

   **`backdrop-filter` nur dort, wo es zählt.** Auf jeder der rund vierzig
   Karten wäre es vierzig Weichzeichnungen je Bild – auf dem Telefon ruckelt
   das. Die kleinen Karten sind bloss durchscheinend, geblurrt wird bei den
   grossen Flächen.
   ------------------------------------------------------------ */
:root { --radius: 18px; }

.schritte li,
.karten article,
.rollen div,
.kreislauf {
  background: color-mix(in srgb, var(--grund) 62%, transparent);
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  position: relative;
}

.preis,
.faq details,
.simulator,
.kopf {
  backdrop-filter: blur(18px) saturate(155%);
  -webkit-backdrop-filter: blur(18px) saturate(155%);
}
.preis, .faq details, .simulator {
  background: color-mix(in srgb, var(--grund) 60%, transparent);
  position: relative;
}
.kopf { background: color-mix(in srgb, var(--grund) 62%, transparent); }

/* Der Lichtstrich an der Oberkante. `10%`/`90%` statt Kante zu Kante:
   Ein Reflex läuft aus, er hört nicht ab. */
.schritte li::before,
.karten article::before,
.rollen div::before,
.preis::before,
.simulator::before {
  content: "";
  position: absolute;
  top: 0;
  left: 10%;
  right: 10%;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.85), transparent);
}
@media (prefers-color-scheme: dark) {
  .schritte li::before,
  .karten article::before,
  .rollen div::before,
  .preis::before,
  .simulator::before {
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.16), transparent);
  }
}

/* Weicher und weiter gestreut als bisher. Negativer Radius, damit der
   Schatten unter der Karte sitzt statt sie einzurahmen. */
.schritte li:hover  { box-shadow: 0 18px 40px -14px rgba(67,56,202,0.28); }
.karten article:hover,
.rollen div:hover   { box-shadow: 0 18px 38px -14px rgba(67,56,202,0.22); }
.preis              { box-shadow: 0 16px 40px -18px rgba(15,23,42,0.18); }
.simulator          { box-shadow: 0 20px 46px -20px rgba(15,23,42,0.20); }

/* ── Der Bildlaufbalken gehört zum Bild ──────────────────── */
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--text-3) 45%, transparent);
  border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover { background: var(--text-3); }

/* ============================================================
   Abschnitte fahren beim Erscheinen auf
   ============================================================
   Das ist der zweite Grund, warum der Entwurf lebendiger wirkt: Nichts
   steht einfach da, es kommt herein.

   **Ohne JavaScript bleibt alles sichtbar.** Die Regel greift erst, wenn
   das Skript `js-auffahrt` an `<html>` setzt – sonst wäre die halbe Seite
   für jeden unsichtbar, dessen Skript nicht lädt.
   ------------------------------------------------------------ */
.js-auffahrt .auffahrt {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .6s cubic-bezier(.16,1,.3,1), transform .6s cubic-bezier(.16,1,.3,1);
}
.js-auffahrt .auffahrt.ist-da { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .js-auffahrt .auffahrt { opacity: 1; transform: none; transition: none; }
}

/* **Beim Drucken ist nichts unsichtbar.** Der Beobachter feuert nur, was in
   den Blick kommt; ein Ausdruck oder ein Dienst, der die Seite als Ganzes
   abbildet, bekaeme sonst leere Flaechen. Genau so sah das erste Probebild
   aus — halbe Seite weiss, ohne dass etwas kaputt war. */
@media print {
  .js-auffahrt .auffahrt { opacity: 1 !important; transform: none !important; }
}

/* ============================================================
   Der Aufhänger bekommt eine rechte Hälfte
   ============================================================
   Vorher stand dort Text auf ganzer Breite und rechts daneben nichts – auf
   einem 27-Zoll-Schirm die halbe erste Bildschirmseite leer. Das war der
   Hauptgrund, warum die Seite «langweilig» wirkte, nicht die Farben.

   Das Briefing ist **gezeichnet, nicht abfotografiert**: bei dieser Grösse
   wirkt ein Screenshot ohnehin nur als Form, kostet aber 197 kB und ist auf
   keinem Bildschirm scharf.
   ------------------------------------------------------------ */
.held .innen {
  display: grid;
  /* 370 px und 40 px Abstand: Bei 420/54 blieben der Textspalte 534 px, und
     die beiden Knoepfe (zusammen rund 550 px) brachen um. Ein Aufhaenger mit
     zwei Knoepfen untereinander sieht aus, als waere einer ein Nachtrag. */
  grid-template-columns: minmax(0, 1fr) minmax(0, 344px);
  gap: 36px;
  align-items: center;
}
.held-text { min-width: 0; }

.held-schau { position: relative; }

.schau-karte {
  background: color-mix(in srgb, var(--grund) 82%, transparent);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid var(--rand);
  border-radius: 20px;
  padding: 16px 18px 18px;
  box-shadow: 0 28px 60px -24px rgba(20,20,50,0.35);
  /* Leicht gekippt: Das nimmt dem Kasten das Steife, ohne dass er schief
     aussieht. Beim Überfahren richtet er sich auf. */
  transform: perspective(1200px) rotateY(-7deg) rotateX(3deg);
  transform-origin: 50% 60%;
  transition: transform .6s cubic-bezier(.16,1,.3,1);
}
.held-schau:hover .schau-karte { transform: perspective(1200px) rotateY(0) rotateX(0); }

.schau-kopf {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 10px; padding-bottom: 11px; margin-bottom: 12px;
  border-bottom: 1px solid var(--rand);
}
.schau-titel { font-weight: 800; font-size: 16px; letter-spacing: -0.02em; }
.schau-datum { font-size: 11.5px; color: var(--text-3); }

.schau-zahlen { display: flex; gap: 8px; margin-bottom: 13px; }
.schau-zahlen span {
  flex: 1; text-align: center; border: 1px solid var(--rand);
  border-radius: 11px; padding: 8px 4px; font-size: 10.5px; color: var(--text-3);
  background: color-mix(in srgb, var(--grund-2) 60%, transparent);
}
.schau-zahlen b { display: block; font-size: 19px; color: var(--text); letter-spacing: -0.02em; }
.schau-zahlen .ist-hoch b   { color: var(--hoch); }
.schau-zahlen .ist-mittel b { color: var(--mittel); }

.schau-liste { display: flex; flex-direction: column; gap: 7px; }
.schau-zeile {
  display: flex; align-items: flex-start; gap: 9px;
  border-left: 3px solid var(--rand);
  padding: 7px 9px; border-radius: 0 9px 9px 0;
  background: color-mix(in srgb, var(--grund-2) 55%, transparent);
}
.schau-zeile.ist-hoch   { border-left-color: var(--hoch); }
.schau-zeile.ist-mittel { border-left-color: var(--mittel); }
.schau-zeile.ist-tief   { border-left-color: var(--tief); }
.schau-punkt {
  flex-shrink: 0; font-size: 10.5px; font-weight: 700;
  padding: 1px 6px; border-radius: 999px; border: 1px solid var(--rand);
  color: var(--text-3); background: var(--grund);
}
.schau-zeile.ist-hoch   .schau-punkt { color: var(--hoch);   border-color: color-mix(in srgb, var(--hoch) 40%, transparent); }
.schau-zeile.ist-mittel .schau-punkt { color: var(--mittel); border-color: color-mix(in srgb, var(--mittel) 40%, transparent); }
.schau-zeile.ist-tief   .schau-punkt { color: var(--tief);   border-color: color-mix(in srgb, var(--tief) 40%, transparent); }
.schau-text { font-size: 12px; line-height: 1.4; color: var(--text-2); }

/* Die Notiz schiebt sich unter der Karte hervor – sie zeigt in einem Bild,
   worum es geht: Der Kurator merkt sich etwas. */
.schau-notiz {
  position: absolute; left: -14px; bottom: -22px;
  display: flex; align-items: center; gap: 8px;
  background: color-mix(in srgb, var(--grund) 88%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid color-mix(in srgb, var(--akzent) 40%, transparent);
  border-radius: 999px; padding: 8px 14px;
  font-size: 12px; font-weight: 600; color: var(--text-2);
  box-shadow: 0 14px 30px -12px rgba(67,56,202,0.35);
}
.schau-notiz-zeichen { font-size: 14px; }

@media (max-width: 980px) {
  /* Untereinander, und das Schaubild ohne Kippung: Auf schmalen Schirmen
     kostet die Drehung nur Breite. */
  .held .innen { grid-template-columns: 1fr; gap: 44px; }
  .schau-karte,
  .held-schau:hover .schau-karte { transform: none; }
  .schau-notiz { left: auto; right: 0; bottom: -20px; }
}
@media (max-width: 620px) {
  /* Auf dem Telefon ist der Aufhaenger schon lang genug. */
  .held-schau { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .schau-karte, .held-schau:hover .schau-karte { transition: none; }
}

/* ============================================================
   Kräftiger: Licht, das von den Elementen selbst ausgeht
   ============================================================
   Die Schleier im Hintergrund allein wirkten noch brav. Was den Unterschied
   macht, ist Licht, das aus den Bedienelementen kommt — der Hauptknopf
   glüht, der Aufhänger hat einen Schein hinter sich, und die hervorgehobene
   Preiskarte trägt einen farbigen Rand.
   ------------------------------------------------------------ */

/* Der Hauptknopf leuchtet in seiner eigenen Farbe statt in Grau. */
.knopf {
  box-shadow: 0 8px 24px -6px rgba(67,56,202,0.45),
              0 1px 0 rgba(255,255,255,0.22) inset;
}
.knopf:hover {
  box-shadow: 0 14px 34px -8px rgba(67,56,202,0.55),
              0 1px 0 rgba(255,255,255,0.28) inset;
}

/* Hinter dem Schaubild im Aufhänger ein weicher Schein. Er sitzt als eigene
   Ebene dahinter, nicht als `box-shadow`: Ein Schatten folgt der Form des
   Kastens, hier soll das Licht aber darüber hinausquellen. */
.held-schau::before {
  content: "";
  position: absolute;
  inset: -12% -8% -14% -8%;
  z-index: -1;
  pointer-events: none;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(99,102,241,0.38), transparent 72%);
  filter: blur(26px);
}

/* Die mittlere Preiskarte hebt sich jetzt wirklich ab. Vorher unterschied
   sie sich nur durch die Marke «meistgewählt» darüber. */
.preis-mitte {
  border-color: color-mix(in srgb, var(--akzent) 55%, transparent);
  box-shadow: 0 22px 50px -20px rgba(67,56,202,0.45);
}

/* Überschriften bekommen einen Verlauf. Nur die grossen: In einem
   Fliesstext wäre er Effekthascherei, über einem Abschnitt ist er das,
   was ihn vom Absatz darunter unterscheidet. */
/* **`background-image`, nicht `background`.** Die Kurzschreibweise setzt
   `background-clip` auf ihren Anfangswert `border-box` zurück — im dunklen
   Modus stand deshalb statt der Überschrift ein weisser Block: Der Verlauf
   wurde auf die ganze Fläche gemalt, und `color: transparent` machte den
   Text darin unsichtbar. Im hellen Modus fiel es nicht auf, weil dort die
   Clip-Angaben NACH dem `background` stehen. */
.held h1,
.band h2 {
  background-image: linear-gradient(150deg, var(--text) 32%, var(--akzent) 130%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
@media (prefers-color-scheme: dark) {
  .held h1,
  .band h2 { background-image: linear-gradient(150deg, var(--text) 40%, var(--akzent-2) 125%); }
}
/* Das Band mit farbigem Grund trägt weisse Schrift – dort würde der Verlauf
   den Titel verschlucken. */
.band-akzent h2 {
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  color: rgba(255,255,255,0.96);
}

/* Die Nummern der vier Schritte glühen in der Akzentfarbe. */
.nummer { box-shadow: 0 6px 18px -6px rgba(67,56,202,0.6); }

/* Der Trennstrich zwischen den Bändern verläuft, statt zu liegen: eine
   durchgezogene 1px-Linie über 1080 px wirkt wie ein Tabellenrand. */
.band { border-top: none; position: relative; }
.band::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--rand) 22%, var(--rand) 78%, transparent);
}

/* ============================================================
   Symbole
   ============================================================
   Gezeichnet, nicht als Emoji: Emoji zeichnet das Betriebssystem, auf jedem
   Gerät anders und **nicht einfärbbar** — dieselbe Überlegung wie bei
   `StufenPunkt` in der Anwendung. `currentColor`, damit ein Symbol die Farbe
   seiner Umgebung annimmt.
   ------------------------------------------------------------ */
.sym { width: 22px; height: 22px; display: block; flex-shrink: 0; }

/* Das Schweizerkreuz laeuft im Fliesstext mit und richtet sich deshalb an der
   Schriftgroesse aus, nicht an einer festen Pixelzahl. Gezeichnet statt als
   Emoji: Windows kennt keine Fahnen-Zeichen.

   **Es steht direkt im Markup, nicht als `<use>` aus dem Sprite** – und traegt
   `viewBox` sowie `width`/`height` als ATTRIBUTE. Der erste Anlauf am
   18.08.2026 hatte beides nicht: Ohne `viewBox` weiss der Browser nicht, wie
   der Inhalt zu skalieren ist, und ohne Attributgroesse faellt ein `<svg>` auf
   seine Vorgabe von **300 x 150 px** zurueck, sobald das Stylesheet fehlt oder
   noch aus dem Zwischenspeicher stammt. Genau so stand das Kreuz plotzlich
   riesig im Kopf und mitten im Text. Die Attribute sind der Rueckfall, das CSS
   die Feinarbeit. */
.sym-ch {
  width: 1.05em; height: 1.05em;
  display: inline-block; vertical-align: -0.16em;
  flex-shrink: 0;
}

/* Die getönte Platte, auf der ein Symbol sitzt. */
.sym-platte {
  width: 42px; height: 42px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 13px;
  background: color-mix(in srgb, var(--akzent) 12%, transparent);
  color: var(--akzent);
  border: 1px solid color-mix(in srgb, var(--akzent) 22%, transparent);
  transition: transform .22s cubic-bezier(.16,1,.3,1), background .22s ease;
  flex-shrink: 0;
}
/* Vier Tönungen, damit eine Reihe von Kacheln nicht monoton wirkt. */
.sym-platte.ton-rot   { background: color-mix(in srgb, var(--hoch) 12%, transparent);   color: var(--hoch);   border-color: color-mix(in srgb, var(--hoch) 24%, transparent); }
.sym-platte.ton-gelb  { background: color-mix(in srgb, var(--mittel) 14%, transparent); color: var(--mittel); border-color: color-mix(in srgb, var(--mittel) 26%, transparent); }
.sym-platte.ton-gruen { background: color-mix(in srgb, var(--tief) 12%, transparent);   color: var(--tief);   border-color: color-mix(in srgb, var(--tief) 24%, transparent); }

/* ============================================================
   Der Rolladen
   ============================================================
   Beim Überfahren fährt der Text herunter. Der Kniff ist
   `grid-template-rows: 0fr → 1fr`: Damit lässt sich eine Höhe animieren,
   die man nicht kennt — `height: auto` ist nicht animierbar, und ein fester
   Wert bräche, sobald ein Text eine Zeile länger wird.

   **Nur an Geräten mit Zeiger** (`@media (hover: hover)`). Auf einem
   Telefon gibt es kein Überfahren; dort stünde der Text sonst dauerhaft
   eingerollt und niemand käme daran.
   ------------------------------------------------------------ */
.rolladen { display: grid; grid-template-rows: 1fr; }
.rolladen > div { overflow: hidden; min-height: 0; }

/* **Der Rolladen gilt nur noch fuer die Funktions-Kacheln** (`.karten`).
   An den vier Schritten war er sperrig: Die Karte wuchs beim Ueberfahren,
   die Nachbarn sprangen, und der Text stand in einer schmalen Spalte, in der
   aus drei Zeilen sieben wurden. Dort steht die Erklaerung jetzt darunter
   ueber die volle Breite (siehe `.fluss`). */
@media (hover: hover) and (min-width: 900px) {
  .rolladen {
    grid-template-rows: 0fr;
    transition: grid-template-rows .42s cubic-bezier(.16,1,.3,1);
  }
  .rolladen > div > p {
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity .3s ease .06s, transform .3s ease .06s;
  }
  .karten .kachel:hover .rolladen,
  .karten .kachel:focus-within .rolladen { grid-template-rows: 1fr; }
  .karten .kachel:hover .rolladen > div > p,
  .karten .kachel:focus-within .rolladen > div > p { opacity: 1; transform: none; }

  /* Ein Hinweis, dass es etwas zu sehen gibt. Ohne ihn probiert es niemand.
     ⚠️ **Nur an Kacheln MIT Rolladen** – also denen unter `.karten`.
     `.kachel` allein trifft 24 Elemente in drei Abschnitten; die anderen 18
     haben nichts aufzuklappen, und weil nicht alle `position: relative`
     tragen, richtete sich der absolut gesetzte Strich am naechsten
     positionierten Vorfahren aus und stand als blauer Stummel am linken
     Rand des Bandes. Ein Hinweis auf etwas, das es dort nicht gibt – und
     dazu an der falschen Stelle. */
  .karten .kachel::after {
    content: "";
    position: absolute;
    left: 22px; bottom: 18px;
    width: 26px; height: 3px; border-radius: 2px;
    background: color-mix(in srgb, var(--akzent) 45%, transparent);
    transition: opacity .3s ease, width .3s ease;
  }
  .karten .kachel:hover::after,
  .karten .kachel:focus-within::after { opacity: 0; width: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .rolladen, .rolladen > div > p { transition: none; }
}

/* ── Die vier Schritte als Fluss ────────────────────────────
   Nummer und Symbol nebeneinander, darunter der Name — und die Erklaerung
   NICHT in der Karte, sondern darunter ueber die volle Breite. Der Grund
   steht im Markup: Eine Karte, die beim Ueberfahren waechst, schiebt ihre
   Nachbarn, und drei Zeilen werden in einer Viertelspalte zu sieben.

   Der Pfeil zwischen den Karten macht die Richtung sichtbar: Es sind vier
   Schritte NACHEINANDER, nicht vier Eigenschaften nebeneinander. */
.schritt-kopf { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.schritt-sym { width: 26px; height: 26px; color: var(--akzent); opacity: .55; }

.schritte li { padding: 0; background: none; border: 0; box-shadow: none; position: relative; }
.schritte li::before { content: none; }
.schritte li:hover { transform: none; box-shadow: none; }

/* Der Knopf ist die Karte. Ein `<button>`, weil er etwas TUT – damit
   erreicht ihn auch die Tastatur, und auf dem Telefon genuegt ein Tippen. */
.schritt {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  gap: 2px;
  padding: 20px 20px 18px;
  cursor: pointer;
  font-family: var(--schrift);
  border-radius: var(--radius);
  border: 1px solid var(--rand);
  background: color-mix(in srgb, var(--grund) 62%, transparent);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  backdrop-filter: blur(10px) saturate(140%);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.schritt-name { font-size: 17px; font-weight: 700; letter-spacing: -0.01em; color: var(--text); }

.schritt:hover,
.schritt:focus-visible {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--akzent) 55%, transparent);
  outline: none;
}
.schritt:hover .schritt-sym,
.schritt.ist-hier .schritt-sym { opacity: 1; }

/* Der gewaehlte Schritt ist kraeftiger als der bloss ueberfahrene: «hier
   stehst du» ist eine Aussage, «hier zeigt deine Maus hin» eine Rueckmeldung.
   Dieselbe Trennung wie im Kopfmenue. */
.schritt.ist-hier {
  border-color: var(--akzent);
  box-shadow: 0 14px 34px -16px rgba(67,56,202,0.45),
              inset 0 1px 0 color-mix(in srgb, #fff 26%, transparent);
}
.schritt.ist-hier .nummer { transform: scale(1.1); box-shadow: 0 4px 14px rgba(67,56,202,0.4); }

/* Der Pfeil nach rechts. Nur zwischen den Karten, nie nach der letzten –
   und nur, solange sie tatsaechlich nebeneinander stehen. */
@media (min-width: 1081px) {
  .schritte li + li::after {
    content: "";
    position: absolute;
    left: -16px;
    top: 42px;
    width: 10px; height: 10px;
    border-top: 2px solid color-mix(in srgb, var(--akzent) 45%, transparent);
    border-right: 2px solid color-mix(in srgb, var(--akzent) 45%, transparent);
    transform: rotate(45deg);
    pointer-events: none;
  }
}

/* Die Erklaerung: EIN Kasten, in dem die Texte uebereinanderliegen und
   ineinander ueberblenden. Uebereinander statt nacheinander, damit die
   Flaeche beim Wechsel nicht springt – `grid` legt sie alle in dieselbe
   Zelle, und die Hoehe richtet sich nach dem laengsten. */
/* **Der Zeiger sagt, wozu der Text gehoert.** Ohne ihn stand darunter ein
   Kasten, und dass er zur hervorgehobenen Karte gehoert, musste man aus der
   Farbe schliessen. Er wandert mit der Auswahl (`--zeiger` setzt das Skript
   auf die Mitte der aktiven Karte) und gleitet dabei – die Bewegung ist die
   Aussage: DIESE Karte, dieser Text. */
.schritt-text::before {
  content: "";
  position: absolute;
  top: -9px;
  left: var(--zeiger, 12.5%);
  width: 16px; height: 16px;
  margin-left: -8px;
  transform: rotate(45deg);
  border-top: 1px solid var(--akzent);
  border-left: 1px solid var(--akzent);
  border-top-left-radius: 3px;
  background: var(--grund);
  transition: left .26s cubic-bezier(.16,1,.3,1);
}
@media (prefers-reduced-motion: reduce) {
  .schritt-text::before { transition: none; }
}
/* Untereinander gibt es keine Spalten, auf die ein Zeiger zeigen koennte. */
@media (max-width: 1080px) {
  .schritt-text::before { display: none; }
}

.schritt-text {
  position: relative;
  display: grid;
  margin-top: 18px;
  padding: 20px 24px;
  border-radius: var(--radius);
  border: 1px solid color-mix(in srgb, var(--akzent) 40%, var(--rand));
  background: color-mix(in srgb, var(--grund) 62%, transparent);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  backdrop-filter: blur(10px) saturate(140%);
}
.schritt-erklaerung {
  grid-area: 1 / 1;
  font-size: 16px;
  line-height: 1.7;
  color: var(--text-2);
  opacity: 0;
  transform: translateY(5px);
  transition: opacity .26s ease, transform .26s ease;
  pointer-events: none;
}
.schritt-erklaerung.ist-da { opacity: 1; transform: none; pointer-events: auto; }
.schritt-erklaerung strong { color: var(--text); }

@media (prefers-reduced-motion: reduce) {
  .schritt, .schritt-erklaerung { transition: none; }
  .schritt:hover, .schritt.ist-hier .nummer { transform: none; }
}

/* Auf dem Telefon steht alles untereinander; ein Fluss nach rechts gibt es
   dort nicht, und der Kasten waere nur ein zweites Mal dieselbe Breite. */
@media (max-width: 700px) {
  .schritt { padding: 16px 18px; }
  .schritt-text { padding: 16px 18px; }
  .schritt-erklaerung { font-size: 15px; }
}
.nummer { margin-bottom: 0; }

/* ============================================================
   Kacheln mit Symbol
   ============================================================
   Dasselbe Muster für alle drei Reihen (Problem, Funktionen, Rollen) —
   Symbolplatte, Titel mit optionaler Marke, Text, darunter eine Fussnote.
   Eine eigene Gestaltung je Abschnitt sähe nach drei Websites aus.
   ------------------------------------------------------------ */
.kachel { display: flex; flex-direction: column; }
.kachel .sym-platte { margin-bottom: 15px; }
.kachel:hover .sym-platte { transform: scale(1.08); }
.kachel h3 {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; flex-wrap: wrap;
}
.kachel-marke {
  font-size: 11px; font-weight: 700; letter-spacing: 0.02em;
  padding: 2px 8px; border-radius: 999px; white-space: nowrap;
  background: color-mix(in srgb, var(--text-3) 14%, transparent);
  color: var(--text-3);
}
.kachel-fuss {
  margin-top: auto; padding-top: 13px;
  border-top: 1px solid var(--rand);
  font-size: 12.5px !important; color: var(--text-3) !important;
  display: flex; align-items: center; gap: 7px;
}
.kachel-fuss::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: currentColor; flex-shrink: 0; opacity: .6;
}
/* Die Fussnote gehört zur Kachel, nicht in den Rolladen – sie bleibt stehen. */
.drei .kachel { padding: 22px 22px 20px; }
.drei .kachel .kachel-fuss { margin-top: 14px; }

/* Die Rollen-Kacheln: kleiner, ohne Fussnote, aber mit demselben Symbol. */
.rollen div { padding-top: 22px; }
.kachel-rolle .sym-platte { width: 36px; height: 36px; border-radius: 11px; margin-bottom: 12px; }
.kachel-rolle .sym { width: 19px; height: 19px; }

/* Auch die sechs Funktionskarten rollen auf. Sie sind ungleich hoch, wenn
   der Text steht – zugerollt stehen die Titel auf einer Linie, und die
   Reihe wirkt zum ersten Mal aufgeräumt. */
@media (hover: hover) and (min-width: 900px) {
  .karten article { position: relative; padding-bottom: 34px; }
  .karten article:hover .rolladen,
  .karten article:focus-within .rolladen { grid-template-rows: 1fr; }
  .karten article:hover .rolladen > div > p,
  .karten article:focus-within .rolladen > div > p { opacity: 1; transform: none; }
  .karten article::after {
    content: "";
    position: absolute; left: 22px; bottom: 18px;
    width: 26px; height: 3px; border-radius: 2px;
    background: color-mix(in srgb, var(--akzent) 45%, transparent);
    transition: opacity .3s ease, width .3s ease;
  }
  .karten article:hover::after,
  .karten article:focus-within::after { opacity: 0; width: 0; }
}

/* Jede Kachel bemisst sich selbst. Ohne das strecken sich im Raster alle
   vier auf die Höhe der geöffneten — drei leere Kästen neben einem vollen. */
.schritte { align-items: start; }
.karten { align-items: start; }

/* ── Das Formular im Dialog ─────────────────────────────────── */
.demo-ersatz { text-align: center; margin-top: 18px; }
.demo-ersatz .knopf { margin-bottom: 14px; }
.demo-ersatz .kleingedruckt { color: rgba(255,255,255,0.78); max-width: 460px; margin: 0 auto; }

dialog.demo-dialog {
  margin: auto;
  border: 0; padding: 0; background: none;
  /* 90vh, nicht 92: Der Schliessen-Knopf ragt 14px ueber die obere Kante
     hinaus. Bei 92vh blieben ihm 4vh Luft – auf einem flachen Fenster
     (Notebook quer) zu wenig, und er stuende halb ausserhalb des Schirms. */
  max-width: min(620px, 94vw); max-height: 90vh; overflow: visible;
  /* ⚠️ **Kein `position: relative` hier.** Es stand vom 18. bis zum
     19.08.2026 darin, damit sich der Schliessen-Knopf am Dialog ausrichtet —
     und war die Ursache dafuer, dass die Seite beim Oeffnen an den ANFANG
     sprang: Ein modaler `<dialog>` ist beim Browser `position: fixed`; wird
     das ueberschrieben, steht er wieder im Textfluss ganz oben, und
     `showModal()` scrollt ihn ins Bild. Gemessen: scrollY 10939 → 0.
     Gebraucht wird es ohnehin nicht — `position: fixed` macht den Dialog
     bereits zum Bezugsrahmen fuer absolut gesetzte Kinder. */
  /* Die Farbe gehoert ausgeschrieben, nicht dem Browser ueberlassen: Sein
     `color: CanvasText` auf `<dialog>` gewinnt sonst gegen alles, was die
     Seite vererbt haette. `color-scheme` oben deckt es zwar ab, aber eine
     Ueberschrift soll nicht davon abhaengen. */
  color: var(--text);
}
dialog.demo-dialog::backdrop {
  background: rgba(10,11,24,0.78);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
dialog.demo-dialog[open] { animation: lupe-auf .28s cubic-bezier(.16,1,.3,1); }
.demo-karte {
  position: relative;
  background: var(--grund);
  border: 1px solid var(--rand);
  border-radius: 20px;
  padding: 30px 30px 28px;
  box-shadow: 0 40px 90px -30px rgba(0,0,0,0.55);
  max-height: 90vh;
  overflow-y: auto;
}
.demo-karte h2 { font-size: 24px; font-weight: 800; letter-spacing: -0.02em; margin-bottom: 8px; color: var(--text); }
.demo-lead { font-size: 15px; color: var(--text-2); margin-bottom: 20px; }
.demo-zu { top: -14px; right: -14px; }
/* Im Dialog steht das Formular auf hellem Grund – die weisse Fassung aus
   dem Akzentband waere dort unsichtbar. */
.demo-karte .formular input,
.demo-karte .formular textarea { background: var(--grund-2); }
.demo-karte .formular label > span { color: var(--text-2); }
.demo-karte .formular .kleingedruckt { color: var(--text-3); }
.demo-karte .formular .knopf-hell {
  background: linear-gradient(135deg, var(--akzent), var(--akzent-2));
  color: #fff !important;
  width: 100%;
}

/* ── Fusszeile in Spalten ───────────────────────────────────── */
.fuss-spalten {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 34px;
  align-items: start;
}
.fuss-marke { display: block; }
.fuss-marke img { margin-bottom: 10px; }
.fuss-satz { font-size: 13.5px; color: var(--text-3); margin: 12px 0 14px; max-width: 300px; }
.fuss-punkt {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12.5px; font-weight: 600; color: var(--text-3);
  padding: 5px 11px; border-radius: 999px;
  background: color-mix(in srgb, var(--grund-2) 70%, transparent);
  border: 1px solid var(--rand);
  visibility: hidden;
}
.fuss-punkt.ist-live { visibility: visible; }
.fuss-punkt .punkt {
  width: 7px; height: 7px; border-radius: 50%; background: var(--tief);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--tief) 22%, transparent);
}
.fuss-block { display: flex; flex-direction: column; gap: 9px; align-items: flex-start; }
.fuss-titel {
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--text-3); margin-bottom: 3px;
}
.fuss-block a { color: var(--text-2); text-decoration: none; font-size: 14.5px; }
.fuss-block a:hover { color: var(--akzent); }
.fuss-block a.knopf { color: #fff !important; margin-bottom: 3px; }
.fuss-schluss { justify-content: space-between; }
.fuss-ort { display: flex; align-items: center; gap: 8px; }
.fuss-ort .sym { width: 16px; height: 16px; color: var(--hoch); }
.fuss-jahr { font-size: 13px; color: var(--text-3); margin: 0; }

@media (max-width: 860px) {
  .fuss-spalten { grid-template-columns: 1fr 1fr; gap: 28px; }
  .fuss-marke { grid-column: 1 / -1; }
}
@media (max-width: 520px) {
  .fuss-spalten { grid-template-columns: 1fr; }
}

/* Das Formular stand bisher nur auf dem violetten Band – seine Felder waren
   für hellen Text auf dunklem Grund gemacht. Im Dialog liegt es auf Weiss,
   und Platzhalter wie Eingaben waren dort praktisch unsichtbar. */
.demo-karte .formular input,
.demo-karte .formular textarea { color: var(--text); border-color: var(--rand); }
.demo-karte .formular input::placeholder,
.demo-karte .formular textarea::placeholder { color: var(--text-3); opacity: 1; }
.demo-karte .formular input:focus,
.demo-karte .formular textarea:focus { border-color: var(--akzent); outline: none; }

/* Die beiden Knöpfe im Aufhänger eine Spur kleiner: Mit Montserrat sind sie
   zusammen 662 px breit und brachen bei 660 px Spaltenbreite um — zwei
   gleichrangige Knöpfe untereinander lesen sich wie ein Nachtrag. */
.held .knopf-reihe .knopf { font-size: 15.5px; padding: 12px 20px; }


/* Sprachumschalter im Kopf (P44). Bewusst leise: Er ist kein Angebot,
   sondern eine Auskunft fuer die, die ihn brauchen. */
.kopf-nav .sprach-wahl {
  margin-left: .25rem;
  padding: .3rem .6rem;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-size: .82rem;
  opacity: .75;
  text-decoration: none;
}
.kopf-nav .sprach-wahl:hover { opacity: 1; }


/* Hinweis auf die verbindliche Fassung (P44). Ruhig, aber nicht zu
   uebersehen: Er sagt etwas ueber die Geltung der ganzen Seite. */
.rechts-hinweis {
  margin: 0 0 1.5rem;
  padding: .8rem 1rem;
  border-left: 3px solid var(--akzent, #4f46e5);
  background: rgba(79, 70, 229, .06);
  border-radius: 0 8px 8px 0;
  font-size: .92rem;
  line-height: 1.6;
}