/* SPARWEB — Unterseiten (Generation 4, seit 18.08.2026).
 *
 * EIN Stylesheet für alles, was nicht die Startseite ist: Rechtstexte,
 * Ratgeber, Portfolio, Warum, Reward, 404. Seit der Umstellung auf das
 * Vanilla-4-Design SELBSTSTÄNDIG: Tokens, Grund, Kopf, Fuß, Knöpfe und
 * das `s-`-Vokabular stehen hier. `style.css` (Generation 3.0) wird von
 * den Unterseiten nicht mehr geladen — sie trug WebGL, Stationen und die
 * Violett-Palette, nichts davon braucht eine Seite, die gelesen wird.
 *
 * Formensprache = die der Startseite: Silber auf Schwarz, Liquid-Glass-
 * Pille als Kopf, die Fußzeile als Bar, Clash Display für Überschriften,
 * Space Grotesk für Text, Space Mono für Kicker und Zahlen. Die Palette
 * ist 1:1 die `:root` der Startseite — wer dort Farbe zurückholt, holt
 * sie hier mit (eine Wahrheit, viele Seiten).
 *
 * Kein WebGL, kein Stationssystem: Unterseiten werden gelesen, nicht
 * durchflogen. Der Grund ist derselbe Verlauf wie hinter der Startseite,
 * damit sie nicht wie ein fremdes Anhängsel wirken.
 */

/* ── Tokens ───────────────────────────────────────────────────────────── */

:root {
  --void:       #050506;
  --deep:       #101013;
  --haze:       #d3d3da;
  --accent:     #f2f2f5;
  --ink:        #f4f4f7;
  --ink-dim:    #a9a9b3;
  --linie:      rgba(255, 255, 255, .13);
  --linie-hell: rgba(255, 255, 255, .26);
  --glas:       rgba(24, 24, 32, .5);
  --flaeche:    rgba(255, 255, 255, .035);
  --ease:       cubic-bezier(.16, .9, .24, 1);
  --ease-aus:   cubic-bezier(.23, 1, .32, 1);
  /* Ein Raster, nicht drei: Abstände sind Vielfache von --r. */
  --r:          clamp(.9rem, 1.6vw, 1.25rem);
  --r-flaeche:  18px;
  --r-knopf:    999px;
  --kopf-rand:  max(14px, env(safe-area-inset-top));
  --kopf-h:     84px;
  --spalte:     min(100% - 2 * clamp(1.1rem, 5vw, 3rem), 1040px);
}

/* ── Grundlagen ───────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  min-height: 100svh;
  background: var(--void);
  color: var(--ink);
  font: 400 1rem/1.6 'Space Grotesk', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overflow-x: clip;
}
img, svg { max-width: 100%; height: auto; }
button, input, textarea, select { font: inherit; color: inherit; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }

/* Sprungmarke für Tastatur: unsichtbar, bis sie den Fokus hat. */
.skip {
  position: absolute; left: 12px; top: -60px; z-index: 50;
  padding: 10px 14px; border-radius: 10px;
  background: var(--ink); color: var(--void); text-decoration: none; font-weight: 600;
  transition: top .2s var(--ease);
}
.skip:focus { top: 12px; }

/* ── Der Grund ────────────────────────────────────────────────────────── */

/* Fest im Fenster, hinter allem. Derselbe Verlauf wie hinter der Start-
   seite, dazu ein sehr leiser Lichtschein oben — mehr nicht: hier steht
   durchgehend Fließtext, jede Aufhellung geht zulasten des Kontrasts. */
.s-raum {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(90% 60% at 50% -10%, rgba(255, 255, 255, .06), transparent 70%),
    linear-gradient(180deg, var(--deep) 0%, var(--void) 60%, #030304 100%);
}
body > main, body > footer, body > header { position: relative; z-index: 3; }

/* ── Kopf: Wortmarke links, Glaspille rechts ──────────────────────────── */

/* Dieselbe Pille wie auf der Startseite (dort .kopf-glas), hier ohne
   Morph und ohne Zeigerlicht: eine Unterseite hat keinen Stationswechsel,
   der Kopf muss nirgends hinfließen. Auf dem Handy bleiben nur Anfrage
   und Sprache in der Pille — die restlichen Ziele stehen in der Fußzeile,
   einen Wisch weit. */
#kopf {
  position: fixed;
  top: var(--kopf-rand);
  left: 0; right: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: var(--spalte);
  margin-inline: auto;
  pointer-events: none;
}
#kopf > * { pointer-events: auto; }
.marke {
  display: inline-flex;
  align-items: baseline;
  gap: .45rem;
  min-height: 44px;
  font: 500 .86rem/1 'Clash Display', 'Space Grotesk', sans-serif;
  letter-spacing: .14em;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
  touch-action: manipulation;
}
.marke b { font-weight: 600; }
.marke i { font-style: normal; font-size: .62rem; letter-spacing: .3em; color: var(--ink-dim); }
.kopf-glas {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 5px;
  border: 1px solid var(--linie);
  border-radius: var(--r-knopf);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .015)),
    var(--glas);
  -webkit-backdrop-filter: blur(18px) saturate(1.7);
          backdrop-filter: blur(18px) saturate(1.7);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .13),
    inset 0 -1px 0 rgba(0, 0, 0, .18),
    0 14px 34px rgba(4, 4, 6, .42);
}
.kopf-punkt {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 clamp(12px, 1.4vw, 20px);
  border-radius: var(--r-knopf);
  color: var(--ink-dim);
  font: 500 .72rem/1 'Space Grotesk', sans-serif;
  letter-spacing: .13em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  touch-action: manipulation;
  transition: color .28s var(--ease), background-color .28s var(--ease);
}
.kopf-punkt.kopf-cta { color: var(--ink); background: rgba(255, 255, 255, .08); }
.kopf-punkt.kopf-lang { opacity: .8; padding-inline: 12px; }
@media (hover: hover) {
  .kopf-punkt:hover { color: var(--ink); background: rgba(255, 255, 255, .06); }
  .marke:hover i { color: var(--ink); }
}
.kopf-punkt:active { color: var(--ink); }

/* ── Textspalte ───────────────────────────────────────────────────────── */

/* 68ch für reinen Fließtext (Rechtstexte): eine Zeile über die volle
   Seitenbreite verliert der Leser beim Umbruch.
   `s-wrap breit` für Seiten mit Tabellen, Karten und Vergleichen. */
.s-wrap {
  width: min(68ch, var(--spalte));
  margin-inline: auto;
  padding-block: calc(var(--kopf-h) + 8vh) 10vh;
}
.s-wrap.breit { width: var(--spalte); }

.s-kicker {
  display: flex; align-items: center; gap: .9rem;
  font-family: 'Space Mono', monospace; font-size: .68rem;
  letter-spacing: .3em; text-transform: uppercase; color: var(--haze);
}
.s-kicker::after {
  content: ''; flex: 1; max-width: 5rem; height: 1px;
  background: linear-gradient(to right, var(--linie-hell), transparent);
}
.s-wrap h1 {
  margin: 14px 0 0;
  font-family: 'Clash Display', 'Space Grotesk', sans-serif; font-weight: 400;
  font-size: clamp(2.2rem, 5.2vw, 3.6rem); line-height: 1.02; letter-spacing: -.02em;
  text-wrap: balance;
}
.s-wrap h1 em, .s-wrap h2 em, .s-wrap h3 em { font-style: normal; color: var(--ink-dim); }
.s-lead { margin-top: 22px; font-size: 1.05rem; line-height: 1.7; color: var(--ink-dim); max-width: 62ch; }
.s-stand { margin-top: 12px; font-size: .82rem; color: var(--ink-dim); }

.s-wrap h2 {
  margin: clamp(38px, 5vh, 58px) 0 0;
  font-family: 'Clash Display', 'Space Grotesk', sans-serif; font-weight: 400;
  font-size: clamp(1.35rem, 2.4vw, 1.8rem); line-height: 1.2; letter-spacing: -.015em;
  color: var(--ink);
}
/* Kleiner Anriss statt Trennlinie über die volle Breite: er markiert den
   Absatzanfang, ohne den Text in Kästen zu zerlegen. */
.s-wrap h2::before {
  content: ''; display: block; width: 26px; height: 1px;
  margin-bottom: 14px; background: var(--linie-hell);
}
.s-wrap h3 { margin: 26px 0 0; font-size: 1.02rem; font-weight: 600; color: var(--ink); }

.s-wrap p, .s-wrap li {
  margin-top: 14px; font-size: .95rem; line-height: 1.75; color: var(--ink-dim);
}
.s-wrap p + p { margin-top: 12px; }
.s-wrap b, .s-wrap strong { color: var(--ink); font-weight: 600; }

.s-wrap ul, .s-wrap ol { margin: 14px 0 0; padding-left: 0; list-style: none; display: grid; gap: 8px; }
.s-wrap li { position: relative; padding-left: 22px; margin-top: 0; }
.s-wrap ul > li::before {
  content: ''; position: absolute; left: 4px; top: .72em;
  width: 5px; height: 5px; border-radius: 50%; background: var(--haze); opacity: .8;
}
.s-wrap ol { counter-reset: s; }
.s-wrap ol > li { counter-increment: s; }
.s-wrap ol > li::before {
  content: counter(s, decimal-leading-zero); position: absolute; left: 0; top: .15em;
  font-family: 'Space Mono', monospace; font-size: .74rem; color: var(--haze);
}
.s-wrap ol > li { padding-left: 30px; }

.s-wrap a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; text-decoration-color: var(--linie-hell); }
/* Knöpfe und Bildschirmfenster sind keine Textlinks — der Unterstrich
   landete sonst unter der Adresszeile in der Fensterleiste.
   Die FARBE muss hier noch einmal stehen: `.s-wrap a` wiegt schwerer als
   `.btn-primary`, und ohne diese zwei Zeilen schrieb der helle Knopf
   weiß auf weiß — die Beschriftung war schlicht unsichtbar. */
.s-wrap a.btn, .s-wrap a.s-fenster { text-decoration: none; color: var(--ink); }
.s-wrap a.btn-primary { color: var(--void); }
.s-wrap a.btn-ghost { color: var(--ink-dim); }
@media (hover: hover) {
  .s-wrap a:not(.btn):not(.s-fenster):hover { text-decoration-color: var(--ink); }
  .s-wrap a.btn-primary:hover { color: var(--void); }
  .s-wrap a.btn-ghost:hover { color: var(--ink); }
}

/* Hervorgehobener Kasten für Fristen, Musterformulare und Merksätze —
   Glas, keine zweite Farbe. */
.s-box {
  margin-top: clamp(28px, 3.6vh, 40px);
  padding: clamp(20px, 2.6vw, 28px);
  border-radius: var(--r-flaeche);
  border: 1px solid var(--linie);
  background: var(--flaeche);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
}
.s-box > :first-child { margin-top: 0; }

/* ── Knöpfe ───────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 48px; padding: 0 clamp(18px, 2vw, 26px);
  border-radius: var(--r-knopf); border: 1px solid var(--linie-hell);
  background: transparent; color: var(--ink);
  font: 500 .78rem/1 'Space Grotesk', sans-serif; letter-spacing: .12em; text-transform: uppercase;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  touch-action: manipulation;
  transition: background-color .28s var(--ease), color .28s var(--ease), border-color .28s var(--ease), transform .28s var(--ease);
}
.btn-primary { background: var(--ink); color: var(--void); border-color: var(--ink); }
.btn-sm { min-height: 40px; padding-inline: 16px; font-size: .7rem; }
.btn-ghost { border-color: transparent; color: var(--ink-dim); }
@media (hover: hover) {
  .btn:hover { border-color: var(--ink); background: rgba(255, 255, 255, .06); }
  .btn-primary:hover { background: #fff; color: var(--void); }
  .btn-ghost:hover { color: var(--ink); background: rgba(255, 255, 255, .06); }
}
.btn:active { transform: scale(.98); }

/* ── Kennzahlenreihe ──────────────────────────────────────────────────── */

/* 1-px-Fugen statt Kästen: die Zahlen gehören zusammen, sie sind keine
   vier Karten. */
.s-zahlen {
  margin-top: clamp(30px, 4vh, 44px);
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px; background: var(--linie);
  border: 1px solid var(--linie); border-radius: var(--r-flaeche); overflow: hidden;
}
.s-zahlen div { padding: 20px 18px; background: var(--void); display: grid; gap: 6px; }
.s-zahlen b { font-family: 'Clash Display', 'Space Grotesk', sans-serif; font-size: 1.4rem; font-weight: 500; color: var(--ink); letter-spacing: -.01em; }
.s-zahlen span { font-size: .76rem; color: var(--ink-dim); }

/* ── Vergleichstabelle ────────────────────────────────────────────────── */

/* Der Scroller ist Pflicht, nicht Vorsicht: vier Spalten mit Fließtext
   passen auf 390 px unter keinen Umständen, und eine Tabelle, die den Body
   waagerecht scrollen lässt, bricht die ganze Seite. */
.s-tabelle { margin-top: 22px; overflow-x: auto; overscroll-behavior-x: contain; border-radius: var(--r-flaeche); border: 1px solid var(--linie); background: var(--void); }
.s-tabelle table { width: 100%; border-collapse: collapse; min-width: 620px; }
.s-tabelle th, .s-tabelle td {
  padding: 14px 16px; text-align: left; vertical-align: top;
  font-size: .87rem; line-height: 1.6; color: var(--ink-dim);
  border-bottom: 1px solid var(--linie);
}
.s-tabelle th {
  font-family: 'Space Mono', monospace; font-size: .68rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink); background: rgba(255, 255, 255, .04);
}
.s-tabelle tr:last-child td { border-bottom: 0; }
.s-tabelle b { color: var(--ink); }
/* Die eigene Zeile hebt sich ab, ohne zu schreien: heller Grundton und
   ein Anriss links, keine Einfärbung. */
.s-tabelle tr.ist-uns td { background: rgba(255, 255, 255, .05); color: var(--ink); }
.s-tabelle tr.ist-uns td:first-child { box-shadow: inset 2px 0 0 var(--haze); }

.s-quelle { margin-top: 10px; font-size: .76rem; color: var(--ink-dim); opacity: .8; }

/* Der Umsatzsteuer-Satz unter Preistabellen. Er gehört zur Tabelle, nicht
   zum Fließtext — deshalb kleiner und ohne den Absatzabstand von `p`. */
.tab-ust { margin: 16px 2px 0; max-width: 62ch; font-size: .8rem; line-height: 1.55; color: var(--ink-dim); opacity: .78; }

/* ── Typenliste (Leistung links, Preis rechts) ────────────────────────── */

.s-typen { margin-top: 22px; display: grid; gap: 1px; background: var(--linie);
           border: 1px solid var(--linie); border-radius: var(--r-flaeche); overflow: hidden; }
.s-typ {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 20px;
  align-items: center; padding: 20px 22px; background: var(--void);
}
.s-typ h3 { margin-top: 0; }
.s-typ p { margin-top: 6px; font-size: .88rem; }
.s-typ-preis { display: grid; gap: 3px; justify-items: end; text-align: right; }
/* Der Marktpreis wird durchgestrichen — er ist der Bezugspunkt, nicht das
   Angebot. Ohne die Linie liest man zwei Preise und weiß nicht, welcher gilt. */
.s-typ-preis .markt { font-size: .76rem; color: var(--ink-dim); opacity: .7; text-decoration: line-through; }
.s-typ-preis .unser { font-family: 'Clash Display', 'Space Grotesk', sans-serif; font-size: 1.35rem; font-weight: 500; color: var(--ink); }
.s-typ-preis .modell { font-size: .72rem; color: var(--ink-dim); }

/* ── Merkmalspillen ───────────────────────────────────────────────────── */

/* Der `.s-wrap`-Vorsatz ist Absicht, keine Redundanz: die allgemeine
   Listenregel weiter oben (`.s-wrap ul`) wiegt genauso schwer wie eine
   Klasse allein und legte sonst ihr Raster über die Pillen — sie standen
   als volle Zeilen untereinander statt nebeneinander. Dasselbe gilt für
   den Aufzählungspunkt: `.s-wrap ul > li::before` schlägt `.s-chips
   li::before`, weil es ein Element mehr benennt. */
.s-wrap ul.s-chips { margin-top: clamp(30px, 4vh, 44px); display: flex; flex-wrap: wrap; gap: 10px; padding-left: 0; }
.s-wrap ul.s-chips > li {
  margin-top: 0; padding: 9px 16px;
  display: inline-flex; align-items: center; gap: 8px;
  border-radius: var(--r-knopf); border: 1px solid var(--linie);
  background: var(--flaeche);
  font-size: .8rem; color: var(--ink-dim);
}
.s-wrap ul.s-chips > li::before { content: ''; position: static; width: 5px; height: 5px; border-radius: 50%; background: var(--haze); }

/* ── Zweispalter für gegenübergestellte Absätze ───────────────────────── */

.s-duo { margin-top: 22px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(22px, 3vw, 40px); }
.s-duo h3 { margin-top: 0; }

/* ── Dreier: drei gleichwertige Kacheln nebeneinander ─────────────────── */

/* Für Dinge, die es genau dreimal gibt (die Demo-Welten im Portfolio, die
   drei Care-Stufen). Kein eigenes Kartenkleid — die Kinder bringen ihres
   selbst mit (.s-fenster, .s-box); der Dreier verteilt nur. */
.s-trio { margin-top: clamp(30px, 4vh, 44px); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(22px, 3vw, 34px); align-items: start; }
.s-trio > * > :first-child { margin-top: 0; }
.s-trio .s-box { margin-top: 0; }

/* ── Aufklappbare Fragen ──────────────────────────────────────────────── */

/* <details> statt eigener Klapp-Logik: es funktioniert ohne JavaScript,
   ist von Haus aus bedienbar und durchsuchbar. */
.s-fragen { margin-top: 22px; display: grid; gap: 10px; }
.s-frage {
  border: 1px solid var(--linie); border-radius: var(--r-flaeche);
  background: var(--flaeche); overflow: hidden;
}
.s-frage summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 16px 20px; min-height: 52px; cursor: pointer;
  font-size: .94rem; color: var(--ink); list-style: none;
  touch-action: manipulation;
}
.s-frage summary::-webkit-details-marker { display: none; }
.s-frage summary::after {
  content: ''; flex: none; width: 9px; height: 9px;
  border-right: 1.4px solid var(--haze); border-bottom: 1.4px solid var(--haze);
  rotate: 45deg; translate: 0 -2px;
  transition: rotate .25s var(--ease);
}
.s-frage[open] summary::after { rotate: -135deg; translate: 0 2px; }
.s-frage p { margin: 0; padding: 0 20px 18px; font-size: .9rem; }
@media (hover: hover) { .s-frage summary:hover { background: rgba(255, 255, 255, .03); } }

/* ── Projektschaufenster (Portfolio) ──────────────────────────────────── */

.s-schau { margin-top: clamp(30px, 4vh, 44px); display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 56px); align-items: center; }

/* Fensterleiste, Scheibe im Bildschirmformat, Lichtkante: ein Screenshot
   ohne Gehäuse liest sich als Bild, mit Gehäuse als Website. */
.s-fenster {
  display: block; position: relative; border-radius: var(--r-flaeche); overflow: hidden;
  border: 1px solid var(--linie);
  background: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .02));
  box-shadow:
    0 46px 92px -30px rgba(0, 0, 0, .9),
    inset 0 1px 0 rgba(255, 255, 255, .12);
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}
.s-leiste {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  height: 38px; padding: 0 14px;
  background: rgba(255, 255, 255, .04);
  border-bottom: 1px solid var(--linie);
}
.s-punkte { display: flex; gap: 6px; }
.s-punkte i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 255, 255, .18); }
.s-punkte i:first-child { background: var(--haze); }
.s-url { font-family: 'Space Mono', monospace; font-size: .7rem; color: var(--ink-dim); text-align: center; }
.s-fenster img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; object-position: top center; }
@media (hover: hover) {
  .s-fenster:hover {
    transform: translateY(-6px);
    box-shadow:
      0 58px 110px -30px rgba(0, 0, 0, .95),
      inset 0 1px 0 rgba(255, 255, 255, .2);
  }
}

/* Vorsatz `.s-wrap` aus demselben Grund wie bei .s-chips. */
.s-wrap ul.s-tags { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 8px; padding-left: 0; }
.s-wrap ul.s-tags > li {
  margin-top: 0; padding: 6px 13px; border-radius: var(--r-knopf);
  border: 1px solid var(--linie);
  font-family: 'Space Mono', monospace; font-size: .7rem;
  letter-spacing: .05em; text-transform: uppercase; color: var(--ink-dim);
}
.s-wrap ul.s-tags > li::before { content: none; }
.s-wrap ul.s-tags > li.ist-modell { border-color: var(--linie-hell); color: var(--ink); }

/* ── Prämienpaar (Reward) ─────────────────────────────────────────────── */

.s-praemien { margin-top: clamp(28px, 3.6vh, 40px); display: grid; grid-template-columns: 1fr auto 1fr; gap: 16px; align-items: center; }
.s-praemie {
  padding: 24px 20px; text-align: center;
  border-radius: var(--r-flaeche); border: 1px solid var(--linie);
  background: var(--flaeche);
  display: grid; gap: 8px;
}
.s-praemie b { font-family: 'Clash Display', 'Space Grotesk', sans-serif; font-size: 2.2rem; font-weight: 500; color: var(--ink); letter-spacing: -.02em; }
.s-praemie span { font-size: .8rem; color: var(--ink-dim); line-height: 1.5; }
.s-pfeil { width: 34px; height: 1px; background: linear-gradient(90deg, var(--linie-hell), transparent); }

/* ── Abschluss-Aufruf ─────────────────────────────────────────────────── */

.s-cta {
  margin-top: clamp(44px, 6vh, 72px);
  padding: clamp(26px, 3.4vw, 40px);
  border-radius: var(--r-flaeche);
  border: 1px solid var(--linie);
  background:
    radial-gradient(120% 80% at 10% -10%, rgba(255, 255, 255, .09), transparent 60%),
    var(--flaeche);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
}
.s-cta h2 { margin-top: 0; }
.s-cta h2::before { content: none; }
.s-cta .s-knoepfe { margin-top: 24px; }
.s-riskfrei { margin-top: 14px; font-size: .78rem; color: var(--ink-dim); }

.s-knoepfe { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: clamp(34px, 4.4vh, 52px); }
.s-zurueck { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: .9rem; color: var(--ink-dim); text-decoration: none !important; }
@media (hover: hover) { .s-zurueck:hover { color: var(--ink); } }

/* Querverweise auf verwandte Seiten. Sie stehen am Ende, weil sie dort
   gebraucht werden — wer das Impressum liest, sucht oft den Datenschutz. */
.s-weiter { margin-top: clamp(34px, 4vh, 50px); display: flex; flex-wrap: wrap; gap: 10px; }
.s-weiter a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px;
  border-radius: var(--r-knopf); border: 1px solid var(--linie);
  font-size: .82rem; color: var(--ink-dim); text-decoration: none;
}
@media (hover: hover) { .s-weiter a:hover { border-color: var(--linie-hell); color: var(--ink); } }

/* ── 404 ──────────────────────────────────────────────────────────────── */

.s-leer { min-height: 100svh; display: grid; place-content: center; text-align: center; padding: clamp(1.1rem, 5vw, 3rem); }
.s-leer h1 { margin-top: 18px; }
.s-leer p { margin-inline: auto; max-width: 46ch; }
.s-leer .s-knoepfe { justify-content: center; }

/* ── Fußzeile: die Bar ────────────────────────────────────────────────── */

/* Zeichengleich mit der Bar der Startseite (dort in engine/fragen/
   fragen.css, hier ohne Landung): eine Glaspille, eine Zeile — Marke ·
   Kontakt · Seiten · Rechtliches · ©, Gruppen durch einen Punkt getrennt.
   Auf dem Handy bricht sie in Gruppen um. */
#fuss {
  width: var(--spalte);
  margin: 0 auto;
  padding-block: 0 max(1.2rem, env(safe-area-inset-bottom));
}
.fuss-glas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .25rem clamp(.8rem, 1.8vw, 1.5rem);
  min-height: 48px;
  padding: .35rem clamp(.9rem, 2vw, 1.5rem) .35rem clamp(1rem, 2.2vw, 1.6rem);
  border: 1px solid var(--linie);
  border-radius: var(--r-knopf);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .015)),
    var(--glas);
  -webkit-backdrop-filter: blur(18px) saturate(1.5);
          backdrop-filter: blur(18px) saturate(1.5);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .13),
    inset 0 -1px 0 rgba(0, 0, 0, .18),
    0 24px 60px -30px rgba(0, 0, 0, .9);
}
.fuss-logo {
  display: inline-flex; align-items: baseline; gap: .45rem;
  min-height: 34px;
  font: 500 .8rem/1 'Clash Display', 'Space Grotesk', sans-serif;
  letter-spacing: .14em; color: var(--ink); text-decoration: none; white-space: nowrap;
}
.fuss-logo b { font-weight: 600; }
.fuss-logo i { font-style: normal; font-size: .58rem; letter-spacing: .3em; color: var(--ink-dim); }
.fuss-gruppe { display: flex; flex-wrap: wrap; align-items: center; gap: 0 clamp(.55rem, 1.1vw, .9rem); }
.fuss-gruppe::before, .fuss-klein::before {
  content: ''; width: 3px; height: 3px; border-radius: 50%;
  background: var(--ink-dim); opacity: .55; margin-right: clamp(.55rem, 1.1vw, .9rem);
}
#fuss nav a {
  display: inline-flex; align-items: center; min-height: 34px;
  font-size: .74rem; color: var(--ink-dim); text-decoration: none; white-space: nowrap;
  touch-action: manipulation; transition: color .22s var(--ease);
}
@media (hover: hover) { #fuss nav a:hover, .fuss-logo:hover { color: var(--ink); } }
.fuss-klein {
  display: inline-flex; align-items: center; margin: 0 0 0 auto; min-height: 34px;
  font-size: .68rem; letter-spacing: .04em; color: var(--ink-dim); opacity: .8; white-space: nowrap;
}

/* ── Schmale Fenster ──────────────────────────────────────────────────── */

@media (max-width: 960px) {
  .fuss-glas { border-radius: 22px; padding: .6rem 1.1rem; gap: .2rem 1.2rem; }
  .fuss-gruppe::before, .fuss-klein::before { display: none; }
  .fuss-klein { margin-left: 0; flex-basis: 100%; white-space: normal; }
}
@media (max-width: 860px) {
  .s-schau, .s-duo { grid-template-columns: 1fr; }
  /* Der Dreier geht auf ZWEI, nicht direkt auf eins: drei Bildschirm-
     fenster untereinander sind auf dem Tablet eine sehr lange Rutsche. */
  .s-trio { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .s-zahlen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .s-typ { grid-template-columns: 1fr; gap: 12px; }
  .s-typ-preis { justify-items: start; text-align: left; }
  .s-praemien { grid-template-columns: 1fr; }
  .s-pfeil { display: none; }
}
@media (max-width: 720px) {
  :root { --kopf-h: 76px; }
  .s-wrap { padding-block: calc(var(--kopf-h) + 5vh) 8vh; }
  /* In der Pille bleiben Anfrage und Sprache; alles andere steht in der
     Fußzeile. Ein Dropdown wäre hier ein zweites Menü, das man pflegen
     muss — für zwei Ziele mehr lohnt es nicht. */
  .kopf-punkt:not(.kopf-cta):not(.kopf-lang) { display: none; }
  .marke { font-size: .78rem; }
}
@media (max-width: 520px) {
  .s-trio { grid-template-columns: 1fr; }
  .fuss-gruppe { flex-basis: 100%; }
  #fuss nav a { min-height: 44px; }
}
@media (max-width: 420px) {
  .s-zahlen { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}