/* 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.
 *
 * ── NEU AM 18.08.2026 (abends) ────────────────────────────────────────
 * KOPF: aus der breiten Punkte-Pille mit heller „Anfrage"-Kachel ist EIN
 *   Menü geworden — Marke links, Schalter „Menü" rechts, darunter ein
 *   deckendes Blatt mit sieben Einträgen (der letzte wechselt die Sprache
 *   und trägt eine Flagge aus dem CSS). Vorher gab es zwei Bauarten in
 *   einem Element: am Rechner fünf Punkte, auf dem Handy zwei davon
 *   sichtbar. Bedient wird das Blatt von `assets/seite.js` — EINE Datei
 *   für 13 Seiten, damit nichts driftet.
 * FUSS: die Glaszeile bündelt ihre Gruppen jetzt in zwei `.fuss-teil`.
 *   Damit bricht sie an einer gewollten Stelle um, und der Trennpunkt
 *   kann nicht mehr am Zeilenanfang landen. Unter 960 px wechselt sie
 *   die Bauart komplett: kein Glas, sondern ein ruhiger Block.
 *
 * VERTRAG DER KLASSEN (Markup steht zeichengleich auf allen Unterseiten,
 * pruefen.mjs vergleicht es):
 *   #kopf > .marke              Wortmarke, führt zur Startseite
 *   #kopf > nav.kopf-menue      `.offen` = Blatt sichtbar
 *     button.kopf-schalter#kopfSchalter  DIE Glaspille + .kopf-pfeil
 *     .kopf-liste#kopfMenue     das Blatt (Bezug ist #kopf, nicht die Pille)
 *       .kopf-punkt             Eintrag; `aria-current="page"` setzt das Skript
 *       .kopf-punkt.kopf-lang.lang  Sprachwechsel; Flagge nach `lang`-Attribut
 *   #fuss > .fuss-glas > .fuss-teil (2×)
 *     .fuss-logo · .fuss-gruppe.ist-kontakt · .ist-seiten · .ist-recht · .fuss-klein
 *   html.menue-offen            Handy: Seiten-Scroll gesperrt
 */

/* ── 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, EIN Menü rechts (18.08.2026) ──────────────── */

/* Bis zum 18.08. stand rechts eine breite Pille mit fünf Punkten, der
   letzte davon als helle „Anfrage"-Kachel — und auf dem Handy waren drei
   der fünf ausgeblendet. Das waren zwei Menüs in einem Element, und die
   helle Kachel las sich wie ein Knopf, der zur Hälfte im Glas steckt
   (Jordan: „buggy"). Jetzt gibt es EINEN Zustand in jeder Breite: Marke
   links, Schalter „Menü" rechts, ein deckendes Blatt darunter.

   Die Pille selbst ist zeichengleich die der Startseite (dort .kopf-glas
   im kompakten Zustand): 5 px Rahmenpolster, 44 px Tippziel, Radius 999,
   dasselbe Glas. Was hier FEHLT, fehlt mit Absicht — der Morph, die
   fließende Pille und der Zeigerreflex gehören zum Stationswechsel, und
   den hat eine Unterseite nicht.

   DAS BLATT LIEGT NEBEN DER PILLE, NICHT IN IHR — und das ist keine
   Geschmacksfrage. Ein Element mit `backdrop-filter` wird zum Bezugs-
   rahmen für ALLE absolut positionierten Kinder, auch ohne `position`.
   Solange das Blatt in der Glaspille steckte, maß sein `left: 0;
   right: 0` deshalb die PILLE aus: auf dem Handy war das Menü 112 px
   breit statt so breit wie die Spalte, und „English" stand halb außerhalb.
   Jetzt trägt die Pille selbst den Schalter (`.kopf-schalter`), das Blatt
   ist ihr Geschwister in `.kopf-menue`, und Bezug ist `#kopf` — fest im
   Fenster, ohne Filter, genau so breit wie die Textspalte.
   `top: calc(100% + 10px)` misst folglich die Kopfhöhe; die ist die
   Pillenhöhe, weil die Pille das höchste Kind ist. */
#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; }

/* Die Wortmarke: Polster statt min-height. `align-items: baseline` legt
   die Kinder auf EINE Grundlinie — steht darüber eine min-height, bleibt
   die Grundlinie oben im Kasten kleben und der Schriftzug saß sichtbar
   zu hoch neben der Pille (derselbe Fehler stand in der Fußzeile). Mit
   Polster ist der Kasten so hoch wie sein Inhalt plus Tippfläche, und
   die Mitte stimmt wieder. 15 + 14 + 15 = 44 px. */
.marke {
  display: inline-flex;
  align-items: baseline;
  gap: .45rem;
  padding-block: 15px;
  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-menue { display: inline-flex; }

/* Der Schalter IST die Pille. Maße 1:1 aus index.html: dort sitzt der
   Schalter (44 px hoch, Polster 14–20) in einem Glas mit 5 px Rahmen-
   polster — 5 + 44 + 5 = 54 px hoch, Polster 19–25. Dieselbe Außenform,
   ein Element weniger. */
.kopf-schalter {
  display: inline-flex;
  align-items: center;
  gap: .55em;
  min-height: 54px;
  padding: 0 clamp(19px, 1.9vw, 25px);
  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);
  color: var(--ink);
  font: 500 .74rem/1 'Space Grotesk', sans-serif;
  letter-spacing: .16em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  touch-action: manipulation;
  transition: transform .16s var(--ease-aus), border-color .28s var(--ease);
}
.kopf-schalter:active { transform: scale(.97); }
@media (hover: hover) { .kopf-schalter:hover { border-color: var(--linie-hell); } }

/* Der Pfeil: zwei Striche, kein Zeichen aus der Schrift — ein „▾" wäre in
   jeder Schrift anders groß und säße anders auf der Grundlinie. */
.kopf-pfeil {
  width: 7px; height: 7px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  rotate: 45deg;
  translate: 0 -2px;
  opacity: .75;
  transition: rotate .2s var(--ease-aus), translate .2s var(--ease-aus);
}
.kopf-menue.offen .kopf-pfeil { rotate: 225deg; translate: 0 2px; }

/* ── Das Blatt ────────────────────────────────────────────────────────
   DECKEND, nicht durchscheinend: es liegt über Fließtext, und ein Blatt
   mit .5 Alpha lässt Buchstaben durch die Einträge laufen (auf der
   Startseite dasselbe Urteil, dort .8 über einem dunklen Canvas — hier
   steht heller Text dahinter, also noch dichter). Der Blur bleibt, damit
   die Kante am Rand nicht hart abschneidet.

   Erscheinen nach Emil Kowalski: ease-out, unter 200 ms, aus .96 statt
   aus dem Nichts, Ursprung ist die Pille — ein Menü wächst aus seinem
   Schalter. */
.kopf-liste {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  min-width: 260px;
  padding: 6px;
  border: 1px solid var(--linie-hell);
  border-radius: var(--r-flaeche);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .075), rgba(255, 255, 255, .012)),
    rgba(14, 14, 19, .96);
  -webkit-backdrop-filter: blur(26px) saturate(1.6);
          backdrop-filter: blur(26px) saturate(1.6);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .15),
    inset 0 -1px 0 rgba(0, 0, 0, .22),
    0 22px 48px rgba(4, 4, 6, .6);
  transform-origin: top right;
  opacity: 0;
  scale: .96;
  translate: 0 -6px;
  pointer-events: none;
  /* `visibility`, nicht nur `opacity`: ein Blatt mit opacity 0 ist für
     die Tastatur weiterhin da — man tabbt hinter dem Schalter durch
     sieben unsichtbare Links. Die Sichtbarkeit springt erst NACH der
     Ausblendung (Verzögerung = Dauer), sonst verschwände das Blatt
     schlagartig statt zu verklingen. */
  visibility: hidden;
  transition: opacity .16s var(--ease-aus),
              scale   .16s var(--ease-aus),
              translate .16s var(--ease-aus),
              visibility 0s linear .16s;
}
.kopf-menue.offen .kopf-liste {
  opacity: 1;
  scale: 1;
  translate: 0 0;
  pointer-events: auto;
  visibility: visible;
  transition-delay: 0s;
}

.kopf-punkt {
  display: flex;
  align-items: center;
  min-height: 48px;
  padding: 0 14px;
  border-radius: 12px;
  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 .22s var(--ease), background-color .22s var(--ease);
}
.kopf-punkt[aria-current="page"] { color: var(--ink); background: rgba(255, 255, 255, .07); }
@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); }

/* ── Der Sprach-Eintrag ───────────────────────────────────────────────
   Er ist kein siebter Weg durch die Seite, sondern ein Schalter: die
   sechs darüber führen zum Inhalt, dieser wechselt die Sprache. Deshalb
   steht er abgesetzt hinter einer Haarlinie — und trägt eine Flagge,
   weil man sie schneller erkennt als zwei Buchstaben.

   Die Flagge kommt als Inline-SVG aus dem CSS, nicht aus dem Markup:
   das Kopf-Markup ist auf 13 Seiten zeichengleich (pruefen.mjs), und ein
   Fahnen-SVG in jeder Seite wären 13 Kopien. Welche Flagge, entscheidet
   das `lang`-Attribut des Links — deutsche Seiten verlinken nach
   `lang="en"` (Union Jack), englische zurück nach `lang="de"`. Ein
   eigener Klassenname dafür ginge nicht: pruefen.mjs vergleicht die
   Klassen der Sprachpaare und meldete den Unterschied als Drift. */
.kopf-lang { position: relative; gap: 10px; margin-top: 8px; color: var(--ink); }
.kopf-lang::after {
  content: ''; position: absolute; left: 6px; right: 6px; top: -5px;
  height: 1px; background: var(--linie);
}
.kopf-lang::before {
  content: '';
  flex: none;
  width: 22px; height: 15px;
  border: 1px solid var(--linie-hell);
  border-radius: 3px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  /* Union Jack, 60×30 — die übliche Kurzform: Feld, weißes Andreaskreuz,
     versetzte rote Diagonalen (per clip-path halbiert), Georgskreuz. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 30'%3E%3CclipPath id='t'%3E%3Cpath d='M30,15h30v15zv15h-30zh-30v-15zv-15h30z'/%3E%3C/clipPath%3E%3Cpath d='M0,0v30h60V0z' fill='%23012169'/%3E%3Cpath d='M0,0 60,30M60,0 0,30' stroke='%23fff' stroke-width='6'/%3E%3Cpath d='M0,0 60,30M60,0 0,30' clip-path='url(%23t)' stroke='%23C8102E' stroke-width='4'/%3E%3Cpath d='M30,0v30M0,15h60' stroke='%23fff' stroke-width='10'/%3E%3Cpath d='M30,0v30M0,15h60' stroke='%23C8102E' stroke-width='6'/%3E%3C/svg%3E");
}
.kopf-lang[lang="de"]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 5 3'%3E%3Cpath d='M0 0h5v3H0z'/%3E%3Cpath fill='%23DD0000' d='M0 1h5v2H0z'/%3E%3Cpath fill='%23FFCE00' d='M0 2h5v1H0z'/%3E%3C/svg%3E");
}

/* ── 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 ────────────────────────────────────────────────── */

/* Eine ruhige Glaszeile — Marke · Kontakt · Seiten | Rechtliches · ©.

   ZWEI TEILE, DAMIT DER UMBRUCH GEWOLLT IST (18.08.2026). Vorher waren
   alle fünf Gruppen gleichrangige Kinder mit `flex-wrap`, und der
   Trennpunkt hing als ::before an jeder Gruppe. Bricht die Zeile, landet
   dieser Punkt am ZEILENANFANG — „• Impressum … • © 2026" sah aus wie
   eine vergessene Aufzählung. Jetzt bündelt `.fuss-teil` die Gruppen zu
   zwei Blöcken, innen ohne Umbruch: der Punkt kann nie an den Anfang
   rutschen, und wenn es eng wird, bricht die Zeile GENAU einmal — oben
   Marke/Kontakt/Seiten, unten Rechtliches/©.

   `justify-content: space-between` statt `margin-left: auto` am zweiten
   Teil: ein Auto-Rand schöbe den umgebrochenen Block auf Zeile 2 nach
   rechts, space-between lässt ihn dort links stehen, wo man ihn liest.

   Senkrecht zentriert alles: `align-items: center`. Der Schriftzug saß
   vorher zu hoch, weil `.fuss-logo` `align-items: baseline` MIT einer
   min-height verband — die gemeinsame Grundlinie klebt dann am oberen
   Rand des Kastens. Polster statt min-height richtet das. */
#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: .5rem clamp(1rem, 2.4vw, 2rem);
  min-height: 56px;
  padding: .45rem 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-teil { display: flex; flex-wrap: nowrap; align-items: center; flex: 0 0 auto; min-width: 0; }
/* Der zweite Teil dehnt sich und schiebt das © ans rechte Ende — egal ob
   er hinter dem ersten steht oder unter ihm. Ohne das hinge die zweite
   Zeile links in der Luft und die rechte Hälfte der Bar wäre leer. */
.fuss-teil:last-child { flex: 1 1 auto; justify-content: space-between; }
/* Der Trennpunkt gehört zwischen zwei Gruppen EINES Teils — dort kann er
   nicht an einen Zeilenanfang geraten, weil der Teil nicht umbricht. Vor
   dem © steht keiner: dort trennt schon der Abstand. */
.fuss-teil > nav:not(:first-child)::before {
  content: ''; flex: none; width: 3px; height: 3px; border-radius: 50%;
  background: var(--ink-dim); opacity: .5;
  margin-inline: clamp(.8rem, 1.7vw, 1.4rem);
}
.fuss-logo {
  display: inline-flex; align-items: baseline; gap: .45rem;
  padding-block: 10px;
  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: nowrap; align-items: center; gap: 0 clamp(.6rem, 1.2vw, 1rem); }
#fuss nav a {
  display: inline-flex; align-items: center; min-height: 36px;
  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; min-height: 36px;
  font-size: .68rem; letter-spacing: .04em; color: var(--ink-dim); opacity: .8; white-space: nowrap;
}

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

/* ── Fußzeile schmal: kein Glas mehr, ein ruhiger Block ───────────────
   Unter 960 px passt die Zeile nicht mehr in eine Reihe, und eine
   Glaspille, die vier Zeilen hoch ist, ist keine Pille — sie ist ein
   Kasten, der so tut. Also die Bauart wechseln statt sie zu quetschen:
   Haarlinie oben, Marke, Kontakt (48 px tippbar, weil man hier wirklich
   tippt), Seiten zweispaltig, Rechtliches einzeilig, © zuletzt. */
@media (max-width: 960px) {
  .fuss-glas {
    display: block;
    min-height: 0;
    padding: clamp(1.4rem, 5vw, 2rem) 0 0;
    border: 0;
    border-top: 1px solid var(--linie);
    border-radius: 0;
    background: none;
    -webkit-backdrop-filter: none;
            backdrop-filter: none;
    box-shadow: none;
  }
  .fuss-teil { display: block; }
  .fuss-teil > nav:not(:first-child)::before { display: none; }
  .fuss-logo { display: inline-flex; align-items: baseline; min-height: 44px; padding-block: 12px; font-size: .88rem; }
  .fuss-gruppe { flex-wrap: wrap; }
  /* Der `#fuss`-Vorsatz ist Pflicht, keine Zierde: die Grundregel oben
     heißt `#fuss nav a` und wiegt mit ihrer ID schwerer als jede Klasse.
     Ohne ihn blieben die Tippziele bei 36 px stehen — genau da, wo sie
     auf dem Handy nicht sein dürfen. */
  #fuss .ist-kontakt { display: grid; gap: 0; margin-top: .6rem; justify-items: start; }
  #fuss .ist-kontakt a { min-height: 48px; font-size: .86rem; color: var(--ink); }
  #fuss .ist-seiten {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 1rem; margin-top: .5rem;
  }
  #fuss .ist-seiten a { min-height: 48px; }
  #fuss .ist-recht {
    gap: 0 1.2rem; margin-top: .8rem; padding-top: .5rem;
    border-top: 1px solid var(--linie);
  }
  #fuss .ist-recht a { min-height: 44px; font-size: .72rem; }
  .fuss-klein { display: block; margin-top: .8rem; 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; }
  .marke { font-size: .78rem; }
  /* Das Blatt nimmt die ganze Textspalte: bei 390 px wäre ein 260 px
     breites Menü in der rechten Ecke ein Zettel neben dem Rand. Einträge
     56 px, weil hier mit dem Daumen getippt wird. */
  .kopf-liste { left: 0; right: 0; min-width: 0; padding: 8px; border-radius: 20px; }
  .kopf-punkt { min-height: 56px; padding: 0 16px; font-size: .76rem; }
  .kopf-lang { margin-top: 16px; }
  .kopf-lang::after { top: -9px; }
  /* Scroll-Sperre bei offenem Blatt (assets/seite.js setzt die Klasse).
     `overflow-x: clip` am body bleibt sonst wirkungslos gegen den Wisch
     hinter dem Menü. */
  html.menue-offen, html.menue-offen body { overflow: hidden; }

  /* Der Kopf ist fest, aber ohne Grund — am Rechner steht links neben
     der Wortmarke Luft, auf 390 px rollt der Text der Seite DURCH sie
     hindurch (Screenshot 18.08. spät: „SPARWEB AGENCY“ auf einer
     Zeile der Care-Tabelle). Also: sobald gerollt ist (seite.js setzt
     `html.gerollt` ab 24 px), tritt die Marke ab; die Pille bleibt und
     wird deckend, damit ihr „MENÜ“ nicht dieselbe Sorge hat. Ganz oben
     ist die Marke da — dort gibt es nichts, was sie verdecken könnte. */
  .marke { transition: opacity .25s var(--ease-aus), translate .25s var(--ease-aus); }
  html.gerollt:not(.menue-offen) .marke { opacity: 0; translate: 0 -6px; pointer-events: none; }
  .kopf-schalter {
    background:
      linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .015)),
      rgba(12, 12, 16, .84);
  }
}
@media (max-width: 520px) {
  .s-trio { grid-template-columns: 1fr; }
}

/* ══ HANDY: VERGLEICHE ALS KARTEN, NICHT ALS SCROLLER (18.08.2026) ═══════
   Zwei Bauarten, ein Prinzip — was auf 390 px nicht nebeneinander passt,
   steht untereinander, und zwar so, dass jede Einheit für sich lesbar
   ist:

   1. `.tab-karten` — die Karten, die assets/seite.js aus einer Tabelle
      mit `data-karten` baut (care „Drei Stufen“, preise „Was ist wo
      drin?“). Die Tabelle selbst wird versteckt (`.hat-karten`).
      Über 720 px passiert nichts: die Karten stehen zwar im DOM, sind
      aber `display: none` — die Tabelle bleibt der Vergleich.
   2. `.s-tabelle` (Kostentabelle) vergleicht ZEILEN — jede Zeile ist ein
      Weg zur Website. Da braucht es kein Skript: Zelle unter Zelle, die
      erste als Überschrift, das war's. */
.tab-karten, .tab-klapp { display: none; }
@media (max-width: 720px) {
  .hat-karten { display: none; }
  .tab-karten { display: grid; gap: 12px; }
  .tab-klapp { display: block; }
  .tab-klapp summary {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    min-height: 56px; padding: 14px 0; list-style: none; cursor: pointer;
    border-top: 1px solid var(--linie); border-bottom: 1px solid var(--linie);
    font: 500 1rem/1.35 'Space Grotesk', sans-serif; color: var(--ink);
    -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  }
  .tab-klapp summary::-webkit-details-marker { display: none; }
  .tab-klapp summary::after {
    content: '+'; flex: none; width: 30px; height: 30px; display: grid; place-items: center;
    border: 1px solid var(--linie); border-radius: 50%;
    font: 400 1.1rem/1 'Space Grotesk', sans-serif; color: var(--ink);
    transition: rotate .3s var(--ease-aus);
  }
  .tab-klapp[open] summary::after { rotate: 45deg; }
  .tab-klapp[open] summary { border-bottom-color: transparent; }
  .tab-klapp .tab-karten { padding-top: 12px; }
  .tab-karte {
    padding: 18px 18px 16px;
    border: 1px solid var(--linie);
    border-radius: 18px;
    background: rgba(255, 255, 255, .022);
  }
  .tab-karte.beliebt { background: rgba(255, 255, 255, .05); border-color: var(--linie-hell); }
  .tab-karte-kopf { display: grid; gap: 4px; padding-bottom: 14px; border-bottom: 1px solid var(--linie); }
  .tab-karte-kopf h3 { margin: 0; font: 400 1.5rem/1.05 'Clash Display', sans-serif; letter-spacing: -.01em; }
  .tab-karte-kopf p { margin: 0; font-size: .86rem; color: var(--ink-dim); }
  .tab-schild { justify-self: start; margin-bottom: 4px; padding: .18rem .55rem; border-radius: 999px; background: #ececf0; color: #101014; font: 500 .56rem/1.5 'Space Grotesk', sans-serif; letter-spacing: .13em; text-transform: uppercase; }
  .tab-preis { display: flex; align-items: baseline; gap: .6rem; margin-top: 8px; font: 700 1.25rem/1 'Space Mono', ui-monospace, monospace; letter-spacing: .01em; color: var(--ink); }
  .tab-preis small { font: 400 .64rem/1.3 'Space Grotesk', sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-dim); }
  .tab-liste { margin: 0; padding: 0; list-style: none; display: grid; }
  .tab-liste li {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 0 12px;
    min-height: 40px; align-items: center; padding: 8px 0;
    border-bottom: 1px solid var(--linie);
    font-size: .84rem; line-height: 1.4;
  }
  .tab-liste li:last-child { border-bottom: 0; padding-bottom: 0; }
  .tab-liste b { font-weight: 500; color: var(--ink); }
  .tab-liste span { color: var(--ink-dim); text-align: right; }
  /* Nur der Name der Leistung (Matrix ohne Text): eine Spalte. */
  .tab-liste li:not(:has(span)) { grid-template-columns: 1fr; }
  .tab-liste li:not(:has(span)) b::before { content: '■'; margin-right: .55rem; font-size: .5rem; vertical-align: .18em; color: var(--haze); }

  /* Die Kostentabelle: Zeile = Karte. */
  .s-tabelle { overflow: visible; border: 0; background: none; border-radius: 0; }
  .s-tabelle table { min-width: 0; display: block; }
  .s-tabelle thead { display: none; }
  .s-tabelle tbody, .s-tabelle tr { display: block; }
  .s-tabelle tr { padding: 14px 16px 16px; border: 1px solid var(--linie); border-radius: 16px; background: var(--void); }
  .s-tabelle tr + tr { margin-top: 10px; }
  .s-tabelle td { display: block; padding: 0; border: 0; }
  .s-tabelle td:first-child { margin-bottom: 4px; font-size: 1.05rem; line-height: 1.3; color: var(--ink); }
  .s-tabelle td:nth-child(2) { margin-bottom: 8px; font-family: 'Space Mono', ui-monospace, monospace; font-size: .8rem; color: var(--ink); }
  .s-tabelle td:nth-child(3) { font-size: .84rem; }
  .s-tabelle tr.ist-uns { border-color: var(--linie-hell); background: rgba(255, 255, 255, .05); }
  .s-tabelle tr.ist-uns td { background: none; box-shadow: none; }
}
@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; }
}