/* ════════════════════════════════════════════════════════════════════════════════════════
   CraftSlot — Designsystem der Website (craftslot-107641, Festlegung Jens 16.10.2026)

   Eine Datei für alle Seiten: die Werbeseiten (index, funktionen, lohnkern, preise, faq) und seit R5
   auch die Rechtsseiten (impressum, datenschutz, agb, avv) — dort Kopf und Fuß wie überall, den
   Lesetext stellt ein kleiner Stilblock der Seite ein (.recht). AGB und AVV sind per SHA-256
   festgehalten (apps/office/lib/registrierung/fassung.ts): Jede Änderung an ihnen braucht dort
   eine neue Prüfsumme — eine Änderung HIER nicht. Statisch, ohne Build, ohne
   Framework, ohne Abruf bei Dritten. Eingebunden mit <link rel="stylesheet" href="assets/site.css">.

   Richtung: minimalistisch, angelehnt an Glassmorphism. Weiße Fläche, das CraftSlot-Blau läuft in
   wenigen großen, unscharfen Farbflächen hinein; Karten, Kopfleiste und Hervorhebungen sind mattes
   Glas (halbtransparentes Weiß, dünner heller Rand, sehr weicher Schatten). Kein Metall, kein
   Punktraster, keine Körnung (Jens 11.10.2026). Bewegung trägt nie Inhalt.

   Leistung: Die Farbflächen sind selbst schon weich (radial-gradient) — Glas darüber braucht keinen
   Weichzeichner, um matt zu wirken. backdrop-filter steht deshalb NUR auf Flächen, die stehen, während
   die Seite darunter rollt: Kopfleiste, Menü, Reiterleiste, Einwilligungsleiste (Klasse .frost).
   Ohne backdrop-filter (@supports not) werden diese Flächen deckend hell.

   Kontrast: gemessen gegen die ungünstigste Stelle (Glas über der kräftigsten Farbfläche), siehe
   design-system.md. Gelb und Grün als Schrift nur über --warn-text / --success-text.

   Wer hier eine Klasse umbenennt, prüft index.html, funktionen.html, lohnkern.html, preise.html, faq.html und die
   Skripte am Seitenende (sie setzen js, js-tabs, open, scrolled, rv, in, is-on zur Laufzeit).
   ════════════════════════════════════════════════════════════════════════════════════════ */

/* ── Schriften: selbst gehostet (craftslot-1a7afc). Dieselben Dateien und Familiennamen wie Office
   und Field (@fontsource-variable), Lizenz OFL, Texte liegen daneben. Pfad relativ zu DIESER Datei. */
@font-face {
  font-family: "IBM Plex Sans Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 100 700;
  src: url(fonts/ibm-plex-sans-latin-wght-normal.woff2) format("woff2-variations");
}
@font-face {
  font-family: "JetBrains Mono Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 100 800;
  src: url(fonts/jetbrains-mono-latin-wght-normal.woff2) format("woff2-variations");
}

:root {
  /* ── Grundtöne: kopiert aus packages/shared/src/tokens.css (Stand 16.10.2026). Die Seite hat
     keinen Build und kann die Datei nicht einbinden; links der Name der Website, rechts der in
     tokens.css. Werte nicht ändern, ohne tokens.css zu ändern. */
  --paper: #ffffff; /* --bg */
  --paper-2: #f5f8fc; /* --surface */
  --paper-3: #eef3f9; /* --surface-2 */
  --ink: #0c1a2b; /* --ink */
  --muted: #5a6b80; /* --muted — nur auf Weiß/dichtem Glas, nie auf einer Farbfläche */
  --line: #d8e1ec; /* --border */
  --blue: #1552ea; /* --primary */
  --blue-press: #1043c4; /* --primary-hover */
  --yellow: #f5b21a; /* --warn (nur Fläche, Rand, Zeichen) */
  --warn-text: #855600; /* --warn-text (Gelb als Schrift) */
  --green: #0e9f55; /* --success (nur Fläche, Rand, Zeichen) */
  --success-text: #08703b; /* --success-text (Grün als Schrift) */
  --danger: #d92d20; /* --danger */

  /* ── Nur Website ── */
  --ink-2: #33445a; /* Fließtext zweiter Ordnung — der Standard für Text auf Farbflächen */
  --blue-hi: #2a60ec;
  --blue-deep: #0a2a6e;
  --blue-soft: #eaf0ff;
  --edge: #738399; /* Rand von Bedienelementen: mind. 3:1 gegen Weiß */
  --night-1: #14263f; /* Telefonrahmen */
  --night-line: #2b4060;
  --on-blue: #ffffff;
  --on-blue-2: #e6edff;
  --yellow-soft: #fff3d1;
  --green-soft: #e6f6ec;

  /* ── Tiefe (Revision 1, Jens 16.10.2026: „etwas dunkleres Blau … spiel mit Licht und Schatten").
     Dunklere Stufen DESSELBEN Farbtons wie --blue (#1552ea, Farbton ≈ 223°), nur Helligkeit gesenkt.
     Nicht in packages/shared/src/tokens.css: Office und Field haben keine dunklen Bänder. Getragen
     werden damit nur Bühnen (.stage): Hero der Startseite, Abschluss-Band, Rechner auf /preise. */
  --night-0: #040c27; /* tiefste Stufe — Ecke der Bühne, Geräterahmen */
  --night-1b: #081b52; /* Grund der Bühne */
  --night-2: #0c2a7c; /* hellste Stelle des Grundes, ohne Licht */
  --on-night: #ffffff;
  --on-night-2: #cfdbfa; /* Fließtext auf Tiefblau — gemessen gegen die hellste Lichtstelle */
  --slot-light: #9dbcff; /* „Slot." und Beträge auf Tiefblau */
  /* Lichter: weiche, große Flächen auf der Bühne (radial-gradient, kein Weichzeichner). */
  --light-blue: rgba(43, 104, 255, 0.55);
  --light-sky: rgba(96, 178, 255, 0.34);
  --light-ice: rgba(170, 220, 255, 0.22);
  --light-0: rgba(43, 104, 255, 0);
  /* Glas auf Tiefblau: kaum Fläche, viel Kante. */
  --glass-d1: rgba(255, 255, 255, 0.06);
  --glass-d2: rgba(255, 255, 255, 0.11);
  --rim-d: rgba(255, 255, 255, 0.16);
  --rim-d-hi: rgba(255, 255, 255, 0.42);
  --shadow-deep: 0 50px 90px -40px rgba(4, 12, 39, 0.75), 0 22px 44px -24px rgba(4, 12, 39, 0.55);
  /* Knopf: oberste Stufe des blauen Glases (Licht von oben), unterste ist ein Ton unter --blue-press. */
  --btn-top: #1a4fe0;
  --thumb: 44px; /* Regler des Preisrechners: Tippziel */

  /* ── Farbflächen im Hintergrund: Blau, ein helleres Himmelblau, ein Hauch Gelb (nur Hero).
     Deckkraft ist die Stellschraube für den Kontrast — höher nur nach neuer Messung. */
  --blob-blue: rgba(21, 82, 234, 0.24);
  --blob-sky: rgba(64, 150, 255, 0.2);
  --blob-warm: rgba(245, 178, 26, 0.12);
  --blob-0: rgba(21, 82, 234, 0);

  /* ── Glas: drei Stufen Deckkraft. Rand hell (auf Farbe sichtbar) plus eine Haarlinie, damit
     die Karte auch auf reinem Weiß eine Kante hat. */
  --glass-1: rgba(255, 255, 255, 0.55); /* Karten im Fluss */
  --glass-2: rgba(255, 255, 255, 0.72); /* stehende Flächen mit Weichzeichner (.frost) */
  --glass-3: rgba(255, 255, 255, 0.86); /* dichte Flächen: Preis-Karte, Kopfleiste nach dem Rollen */
  --glass-solid: #fbfcfe; /* Rückfall ohne backdrop-filter */
  --glass-rim: rgba(255, 255, 255, 0.8);
  --glass-line: rgba(12, 40, 90, 0.09);
  --glass-blur: saturate(1.5) blur(18px);
  --glass-hi: inset 0 1px 0 rgba(255, 255, 255, 0.9);
  --shadow-1: 0 1px 2px rgba(12, 26, 43, 0.04), 0 8px 24px -14px rgba(12, 26, 43, 0.16);
  --shadow-2: 0 2px 6px rgba(12, 26, 43, 0.04), 0 24px 56px -28px rgba(12, 26, 43, 0.24);
  --shadow-blue: 0 10px 24px -12px rgba(21, 82, 234, 0.6);

  /* ── Maße ── */
  --r-1: 10px;
  --r-2: 16px;
  --r-3: 24px;
  --r-4: 32px;
  --r-pill: 999px;
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 72px;
  --s-9: 112px;
  --wrap: 1440px; /* ganze Breite: bei 1600 px bleiben 80 px Rand */
  --gutter: clamp(16px, 4vw, 56px);
  --measure: 68ch; /* Lesetext */
  --bar: 64px;
  --tap: 44px;

  /* ── Schrift ── */
  --sans: "IBM Plex Sans Variable", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono Variable", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --fs-xs: 14px;
  --fs-s: 15px;
  --fs-m: 17px;
  --fs-l: clamp(18px, 1rem + .35vw, 21px);
  --fs-h3: clamp(19px, 1rem + .4vw, 22px);
  --fs-h2: clamp(28px, 1.1rem + 2.1vw, 48px);
  --fs-h1: clamp(34px, 1.2rem + 3.4vw, 68px);
  --fs-num: clamp(40px, 1.6rem + 3vw, 72px);

  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --spring: cubic-bezier(0.34, 1.4, 0.5, 1);
  --focus: var(--blue);
}

/* ── Grundlage ──────────────────────────────────────────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
[hidden]:not([hidden="until-found"]) {
  display: none !important;
}
html {
  scroll-padding-top: calc(var(--bar) + var(--s-4));
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body {
  font-family: var(--sans);
  font-size: var(--fs-m);
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
main {
  overflow-x: clip;
} /* Farbflächen dürfen nie waagerecht scrollen lassen */
img,
svg {
  max-width: 100%;
}
img {
  height: auto;
}
a {
  color: inherit;
}
h1,
h2,
h3 {
  font-weight: 680;
  line-height: 1.12;
  letter-spacing: -.025em;
  text-wrap: balance;
  color: var(--ink);
}
p {
  text-wrap: pretty;
}
ul,
ol {
  list-style: none;
}
button,
input,
select {
  font: inherit;
  color: inherit;
}
::selection {
  background: rgba(21, 82, 234, 0.18);
}
:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: var(--r-1);
}
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.measure {
  max-width: var(--measure);
}
.mono {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
  word-spacing: -.3em;
}
.vh {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.skip {
  position: absolute;
  left: -999px;
  top: 0;
  z-index: 100;
  background: var(--ink);
  color: var(--paper);
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-1);
}
.skip:focus {
  left: var(--s-3);
  top: var(--s-3);
}
a.link,
.prose a {
  color: var(--blue-press);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
a.link:hover,
.prose a:hover {
  text-decoration-thickness: 2px;
}

/* ── Farbflächen: .wash am Abschnitt. Die Fläche liegt IM Abschnitt und ist an dessen Kanten schon
   null (Mittelpunkt y = Radius y, Ende bei 72 %) — keine Naht zum Nachbarn. Breite in %, Höhe in px,
   damit ein langer Abschnitt keine meterhohe Ellipse bekommt. Die zweite Fläche von --left/--right
   sitzt in % — in einem kurzen Abschnitt reichte sie über die Unterkante und risse dort ab. Die Maske
   lässt deshalb oben und unten auslaufen (feste Längen, damit ein langer Abschnitt nicht viel verliert). ── */
.wash {
  position: relative;
  isolation: isolate;
}
.wash::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(52% 460px at 50% 460px, var(--blob-blue), var(--blob-0) 72%);
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent,
    #000 120px,
    #000 calc(100% - 200px),
    transparent
  );
  mask-image: linear-gradient(
    to bottom,
    transparent,
    #000 120px,
    #000 calc(100% - 200px),
    transparent
  );
}
.wash--left::before {
  background: radial-gradient(46% 440px at 6% 440px, var(--blob-blue), var(--blob-0) 72%),
    radial-gradient(34% 360px at 96% 70%, var(--blob-sky), var(--blob-0) 72%);
}
.wash--right::before {
  background: radial-gradient(46% 440px at 94% 440px, var(--blob-blue), var(--blob-0) 72%),
    radial-gradient(34% 360px at 4% 75%, var(--blob-sky), var(--blob-0) 72%);
}
.wash--soft::before {
  opacity: 0.6;
}

/* ── Glas ───────────────────────────────────────────────────────────────────────────────── */
.glass,
.card {
  position: relative;
  background: var(--glass-1);
  border: 1px solid var(--glass-rim);
  border-radius: var(--r-3);
  box-shadow: 0 0 0 1px var(--glass-line), var(--glass-hi), var(--shadow-1);
}
/* Lichtkante: ein 1-px-Verlauf am Rand — oben links hell (das Licht kommt von dort), unten rechts
   ein Hauch Blau. Als Maske über dem Rand, damit das halbtransparente Glas nichts durchscheinen lässt. */
.glass::after,
.card::after {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: 0;
  padding: 1px;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.95),
    rgba(255, 255, 255, 0.15) 38%,
    rgba(21, 82, 234, 0) 62%,
    rgba(21, 82, 234, 0.22)
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.plan::after {
  display: none;
}
.glass--dense {
  background: var(--glass-3);
}
/* Weichzeichner: nur für stehende Flächen (Kopfleiste, Menü, Reiter, Leiste) — siehe Kopf. */
.frost {
  background: var(--glass-2);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
}
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .frost,
  .top:not(.open),
  .js-tabs .jump {
    background: var(--glass-solid) !important;
  }
}
.card {
  padding: var(--s-5);
}
.card h3 {
  font-size: var(--fs-h3);
  margin-bottom: var(--s-3);
}
.card p {
  color: var(--ink-2);
}
.card p + p,
.card p + .kw,
.card .kw + p {
  margin-top: var(--s-3);
}
a.card {
  display: block;
  text-decoration: none;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
a.card:hover {
  transform: translateY(-3px);
  box-shadow: 0 0 0 1px rgba(21, 82, 234, 0.22), var(--glass-hi), var(--shadow-2);
}

/* ── Knöpfe: „Flüssigglas" (Revision 1, Jens 16.10.2026: Liquid Buttons). Genau ZWEI Arten:
   1. Haupthandlung (.btn-primary, auch .btn-light im Abschluss-Band): dickes Glas, mit CraftSlot-Blau
      gefüllt, Schrift weiß.
   2. Nebenhandlung (.btn-ghost auf hell, .btn-glass/.btn-line auf Tiefblau): klares Glas.
   Glas heißt hier: helle Lichtkante oben UND unten (Licht, das durch den dicken Rand bricht), ein
   inneres Leuchten unten, weiche Spiegelung oben. Beim Überfahren folgt ein Lichtreflex dem Zeiger
   (--bx/--by, setzt ein kleines Skript; ohne Skript steht er mittig) und der Knopf quillt minimal
   (Federkurve), beim Drücken gibt er nach. Höhe 48 (sm 44) = Tippziel.
   Bewusst NICHT: Lichtbrechung über einen SVG-Filter (feDisplacementMap) — backdrop-filter mit url()
   zeichnen Firefox und Safari nicht, und ein Rückfall sähe anders aus als der Knopf. Die Brechung
   ist deshalb nur angedeutet (Kanten, inneres Leuchten).
   Weichzeichner (backdrop-filter) nur bei Nebenknöpfen auf einer Bühne — auf Weiß zeigte er nichts.
   „Bewegung reduzieren": kein Reflex, kein Quellen. „Transparenz reduzieren": deckend. ── */
.btn {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: 48px;
  padding: var(--s-3) var(--s-5);
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  text-align: center;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition:
    transform .34s var(--spring), box-shadow .25s var(--ease), background-color .16s ease,
    border-color .16s ease, color .16s ease;
}
/* Spiegelung oben: ein flacher heller Bogen in der oberen Hälfte (das dicke Glas wölbt sich). */
.btn::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 5%;
  right: 5%;
  top: 1px;
  height: 50%;
  border-radius: 999px 999px 40% 40% / 999px 999px 100% 100%;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0) 90%);
}
/* Lichtreflex: folgt dem Zeiger, nur beim Überfahren sichtbar. */
.btn::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background: radial-gradient(
    60px 40px at var(--bx, 50%) var(--by, 30%),
    rgba(255, 255, 255, 0.32),
    rgba(255, 255, 255, 0) 70%
  );
  opacity: 0;
  transition: opacity .25s ease;
}
.btn:hover::after {
  opacity: 1;
}
.btn:hover {
  transform: scale(1.035);
}
.btn:active {
  transform: scale(0.965);
  transition-duration: .08s;
}
.btn:focus-visible {
  outline-offset: 3px;
  border-radius: var(--r-pill);
}

/* 1 · Haupthandlung: blaues Glas. Weiße Schrift 16 px/600 braucht 4,5:1 an der ungünstigsten Stelle —
   auch beim Überfahren, wenn der Zeiger-Reflex direkt hinter der Schrift liegt. Deshalb --btn-top nur
   knapp heller als --blue, Spiegelung höchstens 0,22 Weiß, Reflex höchstens 0,12, und beim Überfahren
   kein stärkerer Lichtsaum unten. Gemessen (Electron, 360 und 1280 px, alle Hauptknöpfe der vier
   Seiten, Zeiger auf 30/50/70 % der Höhe): ruhend mind. 5,3:1, beim Überfahren mind. 4,56:1. */
.btn-primary,
.btn-light {
  color: var(--on-blue);
  background: linear-gradient(180deg, var(--btn-top) 0%, var(--blue) 48%, #0f3cb6 100%);
  border-color: rgba(255, 255, 255, 0.22);
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, 0.7), inset 0 -1.5px 0 rgba(190, 215, 255, 0.55), inset
    0 -12px 18px -10px rgba(140, 190, 255, 0.75), inset 0 0 0 1px rgba(255, 255, 255, 0.08), 0 12px 26px
    -12px rgba(21, 82, 234, 0.85), 0 2px 5px -1px rgba(4, 12, 39, 0.3);
}
.btn-primary::before,
.btn-light::before {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0) 90%);
  height: 42%;
}
.btn-primary::after,
.btn-light::after {
  background: radial-gradient(
    56px 36px at var(--bx, 50%) var(--by, 30%),
    rgba(200, 225, 255, 0.12),
    rgba(200, 225, 255, 0) 70%
  );
}
.btn-primary:hover,
.btn-light:hover {
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, 0.8), inset 0 -1.5px 0 rgba(190, 215, 255, 0.7), inset
    0 -12px 18px -10px rgba(140, 190, 255, 0.75), inset 0 0 0 1px rgba(255, 255, 255, 0.1), 0 18px 34px
    -12px rgba(21, 82, 234, 0.95), 0 3px 8px -1px rgba(4, 12, 39, 0.3);
}
.btn-primary:active,
.btn-light:active {
  box-shadow: inset 0 2px 6px rgba(4, 12, 39, 0.35), inset 0 -1px 0 rgba(190, 215, 255, 0.5), 0 4px
    10px -6px rgba(21, 82, 234, 0.7);
}
/* Auf der Bühne leuchtet das blaue Glas etwas mehr. */
.stage .btn-primary,
.cta .btn-light {
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, 0.75), inset 0 -1.5px 0 rgba(190, 215, 255, 0.6), inset
    0 -12px 18px -10px rgba(140, 190, 255, 0.8), inset 0 0 0 1px rgba(255, 255, 255, 0.12), 0 14px 32px
    -10px rgba(43, 104, 255, 0.95), 0 0 0 1px rgba(150, 190, 255, 0.25);
}

/* 2 · Nebenhandlung auf hell: klares Glas mit sichtbarer Kante (Rand mind. 3:1 gegen Weiß). */
.btn-ghost {
  color: var(--ink);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(238, 243, 252, 0.7));
  border-color: var(--edge);
  box-shadow:
    inset 0 1.5px 0 #ffffff, inset 0 -1.5px 0 rgba(255, 255, 255, 0.9), inset 0 -10px 16px -10px
    rgba(21, 82, 234, 0.22), 0 8px 20px -12px rgba(12, 26, 43, 0.35);
}
.btn-ghost::after {
  background: radial-gradient(
    60px 40px at var(--bx, 50%) var(--by, 30%),
    rgba(21, 82, 234, 0.14),
    rgba(21, 82, 234, 0) 70%
  );
}
.btn-ghost:hover {
  color: var(--blue-press);
  border-color: var(--blue);
  box-shadow:
    inset 0 1.5px 0 #ffffff, inset 0 -1.5px 0 rgba(255, 255, 255, 0.9), inset 0 -12px 18px -10px
    rgba(21, 82, 234, 0.3), 0 12px 26px -12px rgba(21, 82, 234, 0.45);
}

/* 2 · Nebenhandlung auf Tiefblau: klares Glas — kaum Fläche, starke Kanten, Weichzeichner. */
.btn-line,
.btn-glass {
  color: var(--on-night);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.05));
  border-color: rgba(255, 255, 255, 0.45);
  -webkit-backdrop-filter: blur(10px) saturate(1.6);
  backdrop-filter: blur(10px) saturate(1.6);
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, 0.7), inset 0 -1.5px 0 rgba(255, 255, 255, 0.3), inset 0
    -12px 20px -12px rgba(150, 200, 255, 0.55), 0 14px 28px -14px rgba(0, 0, 0, 0.6);
}
.btn-line::before,
.btn-glass::before {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0) 90%);
}
.btn-line:hover,
.btn-glass:hover {
  border-color: rgba(255, 255, 255, 0.75);
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, 0.85), inset 0 -1.5px 0 rgba(255, 255, 255, 0.4), inset 0
    -14px 22px -12px rgba(150, 200, 255, 0.7), 0 18px 34px -14px rgba(0, 0, 0, 0.65), 0 0 24px -6px
    rgba(120, 180, 255, 0.55);
}
.btn-line:active,
.btn-glass:active {
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.35), inset 0 -1px 0 rgba(255, 255, 255, 0.3);
}
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .btn-line,
  .btn-glass {
    background: rgba(255, 255, 255, 0.16);
  }
}
.btn[aria-disabled="true"],
.btn[aria-disabled="true"]:hover {
  opacity: 0.45;
  cursor: default;
  box-shadow: none;
  transform: none;
}
.btn-sm {
  min-height: var(--tap);
  padding: var(--s-2) var(--s-4);
  font-size: var(--fs-s);
}
.btn-icon {
  width: 48px;
  padding: 0;
}
.btn .arr {
  flex: none;
  transition: transform .2s var(--ease);
}
.btn:hover .arr {
  transform: translateX(3px);
}
.actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin-top: var(--s-6);
}
.actions--center {
  justify-content: center;
}

/* ── Kennzeichen: „Testphase" (gelb, mit Punkt) und „Geplant" (hohler Punkt). Die Klasse plan-tag
   hält der Wahrheitstest fest. Farbe ist nie allein: das Wort steht immer da. ── */
.tag,
.plan-tag,
.tag-test {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  vertical-align: middle;
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 550;
  line-height: 1;
  letter-spacing: 0;
  padding: 6px 10px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink-2);
  white-space: nowrap;
}
.tag-test {
  background: var(--yellow-soft);
  border-color: var(--yellow);
  color: var(--warn-text);
}
.tag-test::before,
.plan-tag::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex: none;
}
.tag-test::before {
  background: var(--yellow);
  box-shadow: 0 0 0 1px var(--warn-text);
}
.plan-tag {
  border-style: dashed;
  border-color: var(--edge);
}
.plan-tag::before {
  background: var(--paper);
  box-shadow: 0 0 0 1.5px var(--muted);
}
.beta {
  margin-left: var(--s-2);
  padding: 5px 8px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* ── Kopfleiste: Glas, klebt oben. Navigation: Startseite · Funktionen · Lohnkern · Preise · FAQ · Anmelden ·
   „Kostenlos testen". Unter 1080 px klappt sie hinter den Menüknopf (Skript setzt .open an .top); ohne Skript
   bricht sie in eine zweite Zeile um. Beim Rollen wird das Glas dichter (.scrolled). ── */
.top {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--glass-2);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border-bottom: 1px solid transparent;
  transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.top.scrolled {
  background: var(--glass-3);
  border-bottom-color: var(--glass-line);
  box-shadow: var(--shadow-1);
}
.top-in {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  min-height: var(--bar);
}
.brand {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.035em;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}
.brand b {
  color: var(--blue);
  font-weight: 700;
}
.brand svg {
  flex: none;
  margin-right: var(--s-2);
}
.nav {
  display: flex;
  align-items: center;
  gap: var(--s-1);
  margin-left: auto;
}
.nav a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  padding: 0 var(--s-3);
  font-size: 16px;
  font-weight: 500;
  color: var(--ink-2);
  text-decoration: none;
  border-radius: var(--r-pill);
  transition: color .16s ease, background-color .16s ease;
}
.nav a:hover {
  color: var(--blue-press);
  background: var(--blue-soft);
}
/* Die eigene Seite (aria-current="page") und der Abschnitt im Blick (aria-current="true"): Farbe UND Strich. */
.nav a[aria-current] {
  color: var(--blue-press);
  background-image: linear-gradient(var(--blue), var(--blue));
  background-size: calc(100% - 2 * var(--s-3)) 2px;
  background-position: 50% calc(100% - 8px);
  background-repeat: no-repeat;
}
.nav .nav-cta {
  display: none;
  font-weight: 600;
  color: var(--blue-press);
}
.nav .nav-login {
  display: none;
}
.top-login {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  padding: 0 var(--s-3);
  font-size: 16px;
  font-weight: 600;
  color: var(--ink-2);
  text-decoration: none;
  border-radius: var(--r-pill);
}
.top-login:hover {
  color: var(--blue-press);
  background: var(--blue-soft);
}
.cta-short {
  display: none;
}
.nav-toggle {
  display: none;
  flex: none;
  width: var(--tap);
  height: var(--tap);
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--ink);
  background: var(--glass-3);
  border: 1px solid var(--edge);
  border-radius: var(--r-pill);
}
.progress {
  display: none;
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  pointer-events: none;
  background: linear-gradient(90deg, var(--blue), var(--blue-hi));
  transform: scaleX(var(--p, 0));
  transform-origin: 0 50%;
}
.js .progress {
  display: block;
}

/* ── Hero: Überschrift, ein Satz, zwei Knöpfe, drei bis fünf Punkte. Drei Farbflächen dahinter.
   .hero--split stellt rechts ein Bild (Telefon oder Fenster) daneben. ── */
/* Der Hero läuft unter die Kopfleiste (die oberste Farbfläche scheint durchs Glas); ohne Skript steht
   die Kopfleiste schmal nicht klebend — dann kein Versatz. */
.hero {
  position: relative;
  isolation: isolate;
  margin-top: calc(-1 * var(--bar));
  padding: calc(var(--bar) + var(--s-8)) 0 var(--s-8);
}
html:not(.js) .hero {
  margin-top: 0;
  padding-top: var(--s-8);
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(56% 560px at 58% 140px, var(--blob-blue), var(--blob-0) 72%),
    radial-gradient(36% 440px at 94% 420px, var(--blob-sky), var(--blob-0) 72%),
    radial-gradient(34% 380px at 6% 380px, var(--blob-warm), var(--blob-0) 72%);
  /* Ein kurzer Hero (Unterseiten) schnitte die Flächen sonst an der Unterkante hart ab. */
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 280px), transparent);
  mask-image: linear-gradient(to bottom, #000 calc(100% - 280px), transparent);
}
.hero-in {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-7);
  align-items: center;
}
.hero--center {
  text-align: center;
}
.hero--center .hero-text {
  margin: 0 auto;
  max-width: 58rem;
}
.hero--center .actions,
.hero--center .points {
  justify-content: center;
}
.hero h1 {
  font-size: var(--fs-h1);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -.035em;
}
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  margin-bottom: var(--s-4);
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 550;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--blue-press);
}
.lead {
  margin-top: var(--s-5);
  max-width: var(--measure);
  font-size: var(--fs-l);
  line-height: 1.55;
  color: var(--ink-2);
}
.hero--center .lead {
  margin-left: auto;
  margin-right: auto;
}
.points {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-5);
  margin-top: var(--s-5);
  font-size: var(--fs-s);
  font-weight: 500;
  color: var(--ink-2);
}
.points li {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
}
.points svg {
  flex: none;
  color: var(--success-text);
}
.hero-media {
  min-width: 0;
}
/* Das Band zum Designpartner im Hero: weiße Pille, gelber Punkt, Pfeil. */
.ribbon {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  min-height: var(--tap);
  margin-top: var(--s-5);
  padding: var(--s-2) var(--s-4);
  text-align: left;
  font-size: var(--fs-s);
  font-weight: 600;
  color: var(--blue-press);
  text-decoration: none;
  border-radius: var(--r-pill);
  background: var(--glass-3);
  border: 1px solid rgba(21, 82, 234, 0.35);
  box-shadow: var(--shadow-1);
  transition: transform .16s var(--ease), box-shadow .2s var(--ease);
}
.ribbon::before {
  content: "";
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--yellow);
  box-shadow: 0 0 0 1px var(--warn-text);
}
.ribbon:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-2);
}

/* ── Hero als Bühne (Startseite, Revision 1): eine tiefblaue Fläche mit gerundeten Ecken, die unter
   der hellen Kopfleiste beginnt. Höchstens sechs Bausteine links (Marke mit Leitsatz, H1, Untersatz,
   zwei Knöpfe, Vertrauenszeile), rechts die Geräte. ── */
.hero.hero--stage {
  margin-top: 0;
  padding: var(--s-3) clamp(8px, 1.4vw, 20px) 0;
}
html:not(.js) .hero.hero--stage {
  padding-top: var(--s-3);
}
.hero--stage::before {
  display: none;
}
.hero-stage {
  padding: clamp(40px, 6vw, 96px) 0 clamp(48px, 6vw, 104px);
}
.hero-stage .hero-in {
  position: relative;
  z-index: 2;
  gap: clamp(40px, 5vw, 72px);
}
.hero-stage h1 {
  margin-top: var(--s-6);
  max-width: 20ch;
  font-size: clamp(32px, 1rem + 2.5vw, 60px);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -.035em;
  color: var(--on-night);
}
.hero-stage .lead {
  margin-top: var(--s-4);
  max-width: 44ch;
  color: var(--on-night-2);
}
.hero-stage .actions {
  margin-top: var(--s-6);
}
/* Marke: das Zeichen groß, mit Lichtrand; daneben (schmal: darunter) der Leitsatz. */
.mark {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3) var(--s-5);
}
.mark-logo {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  font-size: clamp(30px, 1rem + 1.6vw, 42px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.04em;
  color: var(--on-night);
  white-space: nowrap;
}
.mark-logo b {
  font-weight: 700;
  color: var(--slot-light);
}
.mark-logo svg {
  flex: none;
  width: clamp(48px, 2rem + 1.6vw, 64px);
  height: auto;
  border-radius: 28%;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.28), 0 0 0 6px rgba(43, 104, 255, 0.16), 0 14px 34px
    -8px rgba(43, 104, 255, 0.9);
}
.hero-stage p.mark-claim {
  max-width: 26ch;
  padding-left: var(--s-5);
  border-left: 1px solid var(--rim-d-hi);
  font-size: var(--fs-s);
  font-weight: 600;
  line-height: 1.4;
  color: var(--on-night);
}
/* Vertrauenszeile: ein Haken in Licht, kein Kasten. */
.hero-stage p.trust {
  display: flex;
  align-items: flex-start;
  gap: var(--s-2);
  margin-top: var(--s-5);
  font-size: var(--fs-s);
  font-weight: 500;
  color: var(--on-night-2);
}
.trust svg {
  flex: none;
  margin-top: 2px;
  color: #7ee2a8;
  filter: drop-shadow(0 0 6px rgba(126, 226, 168, 0.55));
}

/* ── Geräte: Laptop mit Büro-Aufnahme, davor das Telefon mit der Monteur-App. Rahmen in CSS, in
   Tiefblau statt Metall; Licht von oben links (Spiegelung über dem Bildschirm), Schatten und ein
   Bodenlicht darunter. Beide Bilder sind echte Aufnahmen und bleiben unverändert (nur zugeschnitten:
   der Laptop zeigt den oberen Teil des Dashboards im Format 16:10). ── */
/* Revision 4 (Jens 17.10.2026: „Telefon unscharf"): beide Geräte stehen gerade — keine Neigung, kein
   Schweben, kein Folgen des Zeigers. Jede Verschiebung um Bruchteile eines Pixels und jede 3D-Drehung
   lässt den Browser das Bild neu abtasten; die Aufnahme würde weich. Die Bilder werden nur verkleinert. */
.devices {
  position: relative;
  padding: 2% 0 12% 10%;
}
.devices::after {
  content: "";
  position: absolute;
  left: 6%;
  right: -4%;
  bottom: 0;
  height: 24%;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(
    50% 50% at 55% 50%,
    rgba(70, 140, 255, 0.55),
    rgba(70, 140, 255, 0) 70%
  );
}
.laptop {
  position: relative;
  margin: 0;
}
.laptop-lid {
  position: relative;
  padding: 2.4% 2.4% 3%;
  border-radius: 18px 18px 8px 8px;
  background: linear-gradient(170deg, #1b2c58 0%, #0d1838 55%, var(--night-0) 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.34), 0 40px
    70px -30px rgba(0, 0, 0, 0.7), 0 0 60px -20px rgba(60, 130, 255, 0.55);
}
/* Kamera */
.laptop-lid::before {
  content: "";
  position: absolute;
  top: 1%;
  left: 50%;
  width: 6px;
  height: 6px;
  margin-left: -3px;
  border-radius: 50%;
  background: #24365f;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}
.laptop-screen {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  border-radius: 6px;
  background: var(--paper);
}
.laptop-screen img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 0 0;
}
/* Spiegelung auf dem Glas — nur ein Hauch in der Ecke (Revision 4: die frühere, kräftigere Spiegelung
   legte einen weißen Schleier über die Aufnahmen und ließ sie flau wirken). */
.laptop-screen::after,
.handy-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(
    120deg,
    rgba(255, 255, 255, 0.1) 0%,
    rgba(255, 255, 255, 0) 18%,
    rgba(255, 255, 255, 0) 100%
  );
}
.laptop-base {
  position: relative;
  height: clamp(10px, 1.3vw, 18px);
  margin: 0 -7%;
  border-radius: 3px 3px 22px 22px / 3px 3px 100% 100%;
  background: linear-gradient(180deg, #31477e 0%, #18295a 40%, #0a1434 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 22px 30px -12px rgba(0, 0, 0, 0.7);
}
.laptop-base::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 16%;
  height: 40%;
  transform: translateX(-50%);
  border-radius: 0 0 8px 8px;
  background: #0c1a40;
}
.handy {
  position: absolute;
  left: 0;
  bottom: 3%;
  z-index: 2;
  width: 35%; /* Revision 4: größer — die Aufnahme wird weniger stark verkleinert */
  margin: 0;
}
.handy-frame {
  position: relative;
  padding: 6% 5.5%;
  border-radius: 18% / 8.5%;
  background: linear-gradient(160deg, #22356a 0%, #0c1636 50%, var(--night-0) 100%);
  box-shadow:
    inset 0 0 0 1.5px rgba(255, 255, 255, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.4), -24px
    40px 60px -24px rgba(0, 0, 0, 0.75), 0 0 46px -8px rgba(60, 130, 255, 0.6);
}
.handy-frame::before {
  content: "";
  position: absolute;
  z-index: 1;
  top: 3.4%;
  left: 50%;
  width: 26%;
  height: 2.6%;
  transform: translateX(-50%);
  border-radius: 99px;
  background: var(--night-0);
}
.handy-frame::after {
  inset: 6% 5.5%;
  border-radius: 13% / 6%;
}
.handy-frame img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 13% / 6%;
  background: var(--paper);
}
/* Eine Glasplatte hinter dem Laptop: die zweite Ebene, auf der das Glas erst wirkt. */
.devices::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -7%;
  right: -5%;
  width: 72%;
  height: 78%;
  border-radius: var(--r-4);
  pointer-events: none;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.02));
  box-shadow: inset 0 0 0 1px var(--rim-d), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
/* Glaskacheln über den Geräten — Werte aus den Aufnahmen (aria-hidden im HTML). Zwei Stück, kleine
   Flächen: hier darf backdrop-filter stehen. Ohne Filter (und bei „Transparenz reduzieren") deckend. */
.chip {
  position: absolute;
  z-index: 3;
  display: grid;
  gap: 2px;
  padding: 12px 16px;
  border-radius: 18px;
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  backdrop-filter: saturate(1.4) blur(14px);
  pointer-events: none;
}
.chip b {
  font-size: clamp(18px, 0.9rem + 0.8vw, 26px);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -.02em;
}
.chip-k {
  font-size: 12px;
  font-weight: 600;
  line-height: 1.25;
}
.chip--dunkel {
  color: var(--on-night);
  background: rgba(6, 18, 60, 0.84);
  box-shadow: inset 0 0 0 1px var(--rim-d), inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 18px 34px
    -14px rgba(0, 0, 0, 0.7);
}
.chip--dunkel .chip-k {
  color: var(--on-night-2);
}
.chip--hell {
  color: var(--ink);
  background: rgba(255, 255, 255, 0.86);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.9), 0 18px 34px -14px rgba(0, 0, 0, 0.55), 0 0
    30px -8px rgba(120, 180, 255, 0.7);
}
.chip--hell .chip-k {
  color: var(--ink-2);
}
.chip--uhr {
  right: 3%;
  bottom: 4%;
  grid-template-columns: auto auto;
  align-items: center;
  column-gap: var(--s-2);
}
.chip--uhr b,
.chip--uhr .chip-k:last-child {
  grid-column: 1 / -1;
}
.chip-punkt {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #6fe3a0;
  box-shadow: 0 0 0 3px rgba(111, 227, 160, 0.22), 0 0 10px rgba(111, 227, 160, 0.9);
}
.chip--stunden {
  right: -3%;
  top: -4%;
}
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .chip--dunkel {
    background: var(--night-1b);
  }
  .chip--hell {
    background: var(--paper);
  }
}
@media (min-width: 980px) {
  .hero-stage .hero-in {
    grid-template-columns: minmax(0, 10fr) minmax(0, 11fr);
  }
}
@media (max-width: 979px) {
  .hero-stage .hero-media {
    max-width: 680px;
    width: 100%;
    margin: 0 auto;
  }
  /* Der Fuß des Laptops ragt 7 % über das Gehäuse hinaus — Platz rechts, sonst schneidet ihn die Bühne. */
  .devices {
    padding-right: 7%;
  }
  /* Die helle Glasplatte hinter dem Laptop ragt rechts und oben über die Geräte hinaus; unter 980 px
     schnitt der Bühnenrand sie ab, und sie wirkte verrutscht (Review bei 360/768 px). */
  .devices::before {
    display: none;
  }
}
@media (max-width: 600px) {
  .hero-stage {
    border-radius: var(--r-3);
  }
  .hero-stage p.mark-claim {
    max-width: none;
    padding-left: 0;
    border-left: 0;
  }
  .devices {
    padding: 0 7% 14% 12%;
  }
  .handy {
    width: 37%;
  }
  .laptop-lid {
    border-radius: 10px 10px 5px 5px;
  }
  .chip {
    padding: 8px 11px;
    border-radius: 13px;
  }
  .chip--uhr {
    right: 0;
    bottom: 2%;
  }
  .chip--stunden {
    display: none;
  }
}

/* ── Abschnitt ──────────────────────────────────────────────────────────────────────────── */
.sec {
  position: relative;
  padding: var(--s-9) 0;
}
.sec--tight {
  padding: var(--s-8) 0;
}
/* Zwei helle Abschnitte direkt hintereinander: oben nur ein kleiner Zuschlag statt eines zweiten vollen
   Abstands — sonst stand dort die doppelte Luft (R5, Jens 17.10.2026: „Ein Monat in vier Schritten" →
   „Drei Sorgen", /preise Rechner → „Wer zählt"). Ergibt dasselbe Maß wie Vorteile → Ablauf: 144 px am
   Rechner, 104 px bis 900 px, 88 px am Telefon. Das Abschluss-Band (.sec--tight) behält seinen Abstand. */
.sec + .sec:not(.sec--tight) {
  padding-top: var(--s-6);
}
.sec-head {
  max-width: 52rem;
  margin-bottom: var(--s-7);
}
.sec-head--center {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
.sec-head h2 {
  font-size: var(--fs-h2);
}
.sec-head p:not(.eyebrow) {
  margin-top: var(--s-4);
  max-width: var(--measure);
  font-size: var(--fs-l);
  color: var(--ink-2);
}
.sec-head--center p {
  margin-left: auto;
  margin-right: auto;
}
.closing {
  margin-top: var(--s-8);
  font-size: clamp(24px, 1rem + 1.8vw, 40px);
  font-weight: 680;
  letter-spacing: -.022em;
  line-height: 1.18;
  text-wrap: balance;
}

/* ── Raster: auto-fit mit Mindestbreite (--min), zwei Spalten mit Bild (.split), Spaltenlinien. ── */
.grid {
  display: grid;
  gap: var(--s-5);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--min, 300px)), 1fr));
}
.grid > * {
  min-width: 0;
}
.grid--2 {
  --min: 420px;
}
/* Drei Einträge: 1 oder 3 Spalten; dazwischen zwei, und der dritte nimmt die ganze Breite — nie
   einer allein in einer halben Spalte (R5: /funktionen#geplant, /preise Vertrag · Einrichtung · Zahlung). */
.grid--3 {
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 640px) {
  .grid--3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .grid--3 > :nth-child(3):last-child {
    grid-column: 1 / -1;
  }
}
@media (min-width: 1000px) {
  .grid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .grid--3 > :nth-child(3):last-child {
    grid-column: auto;
  }
}
/* Vier Einträge: 1, 2 oder 4 Spalten — nie drei, sonst steht einer allein in der letzten Reihe
   (Revision 4, gemessen bei 1024 px auf /preise). */
.grid--4 {
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 560px) {
  .grid--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 1200px) {
  .grid--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
/* Preisbeispiele (/preise, fünf Einträge): am Telefon zwei Spalten, der letzte über die ganze Breite.
   „main" hebt die Regel über die gleichnamige im Seitenkopf der Preisseite. */
@media (max-width: 519px) {
  main .eg-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  main .eg-list li:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
}
/* Ein Verweis, der allein einen Listenpunkt füllt, bekommt eine höhere Klickfläche (ohne Versatz). */
.kw li > a:only-child {
  display: inline-block;
  padding-block: 11px;
  margin-block: -11px;
}
.split {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: var(--s-8);
  align-items: center;
}
.split--rev > :first-child {
  order: 2;
}
.split > * {
  min-width: 0;
}

/* ── Stichwortliste: kurzer blauer Strich vor jedem Punkt. ── */
.kw li {
  position: relative;
  padding-left: var(--s-5);
  color: var(--ink-2);
}
.kw li + li {
  margin-top: var(--s-1);
}
.kw li::before {
  content: "";
  position: absolute;
  left: var(--s-1);
  top: .78em;
  width: 8px;
  height: 2px;
  border-radius: 2px;
  background: var(--blue);
}
.kw a {
  color: var(--blue-press);
  text-underline-offset: 3px;
}
.kw--check li::before {
  left: 2px;
  top: .4em;
  width: 6px;
  height: 11px;
  border-radius: 0;
  background: none;
  border: solid var(--success-text);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* ── Aufklapper (details/summary). .acc ist der Baustein; .qa ist derselbe unter dem Namen der FAQ. ── */
.acc,
.qa {
  border-top: 1px solid var(--glass-line);
}
.acc:last-child,
.qa:last-child {
  border-bottom: 1px solid var(--glass-line);
}
.acc summary,
.qa summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--s-2) var(--s-4);
  min-height: 60px;
  padding: var(--s-3) var(--s-2);
  cursor: pointer;
  list-style: none;
  -webkit-tap-highlight-color: transparent;
  border-radius: var(--r-1);
}
.acc summary::-webkit-details-marker,
.qa summary::-webkit-details-marker {
  display: none;
}
.acc summary:focus-visible,
.qa summary:focus-visible {
  outline-offset: -3px;
}
.acc-t,
.qa h3 {
  grid-column: 1;
  font-size: var(--fs-m);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -.005em;
  color: var(--ink);
}
.acc summary .tag-test,
.acc summary .plan-tag,
.qa summary .tag-test,
.qa summary .plan-tag {
  grid-column: 1;
  grid-row: 2;
  justify-self: start;
}
.acc-ic,
.qa-ic {
  grid-column: 2;
  grid-row: 1 / span 2;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  color: var(--blue-press);
  background: var(--blue-soft);
  transition: background-color .16s ease, color .16s ease;
}
.acc-ic svg,
.qa-ic svg {
  transition: transform .25s var(--ease);
}
.acc summary:hover .acc-ic,
.qa summary:hover .qa-ic {
  background: var(--blue);
  color: var(--on-blue);
}
.acc[open] .acc-ic svg,
.qa[open] .qa-ic svg {
  transform: rotate(180deg);
}
.acc-body,
.qa-a {
  padding: 0 var(--s-2) var(--s-5);
}
.acc-body > * + *,
.qa-a > * + * {
  margin-top: var(--s-3);
}
.acc-body p,
.qa-a p {
  max-width: var(--measure);
  color: var(--ink-2);
}
.accs {
  padding: var(--s-2) var(--s-5);
} /* Gruppe von Aufklappern auf einer Glaskarte */

/* ── Reiter: ohne Skript Sprunglinks (.jump > a.tab), mit Skript (Klasse js-tabs am Abschnitt)
   eine klebende Glasleiste mit role=tablist. Passt zum vorhandenen Skript der Funktionen. ── */
.jump {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin-bottom: var(--s-7);
}
.tab {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  flex: none;
  min-height: var(--tap);
  padding: 0 var(--s-4);
  font-size: var(--fs-s);
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
  background: var(--glass-3);
  border: 1px solid var(--edge);
  border-radius: var(--r-pill);
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease, box-shadow .2s var(--ease), border-color
    .2s ease;
}
.tab svg {
  flex: none;
}
.tab:hover {
  border-color: var(--blue);
  color: var(--blue-press);
}
.js-tabs .jump {
  position: sticky;
  top: calc(var(--bar) + var(--s-2));
  z-index: 5;
  flex-wrap: nowrap;
  gap: var(--s-1);
  width: max-content;
  max-width: 100%;
  padding: 5px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  background: var(--glass-2);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-rim);
  border-radius: var(--r-pill);
  box-shadow: 0 0 0 1px var(--glass-line), var(--shadow-1);
}
.js-tabs .jump::-webkit-scrollbar {
  display: none;
}
.js-tabs .tab {
  border-color: transparent;
  background: transparent;
  color: var(--ink-2);
}
.js-tabs .tab:hover {
  background: var(--blue-soft);
  color: var(--blue-press);
}
.js-tabs .tab[aria-selected="true"] {
  background: var(--blue);
  color: var(--on-blue);
  box-shadow: var(--shadow-blue);
}
.js-tabs .tab:focus-visible {
  outline-offset: -3px;
  border-radius: var(--r-pill);
}
.js-tabs .tab[aria-selected="true"]:focus-visible {
  outline-color: var(--on-blue);
  outline-offset: -5px;
}

/* ── Funktionsgruppen (funktionen.html) — Klassen, die das vorhandene Reiter-Skript erzeugt:
   .tiles/.kerne (große Kacheln mit Stichworten), .rest (kleine Kacheln, .t-btn klappt auf), .t-row. ── */
.group {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--s-6) var(--s-8);
  align-items: start;
  scroll-margin-top: calc(var(--bar) + var(--s-8));
}
.group + .group {
  margin-top: var(--s-9);
}
.group-main {
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
}
.group-media {
  grid-column: 1;
  grid-row: 1;
  min-width: 0;
  position: sticky;
  top: calc(var(--bar) + 96px);
}
.group--plain {
  grid-template-columns: minmax(0, 1fr);
}
.group--plain .group-main {
  grid-column: 1;
}
.js-tabs .group + .group {
  margin-top: 0;
}
.group-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3) var(--s-4);
  margin-bottom: var(--s-5);
}
.group-head h3 {
  flex: 1 1 auto;
  min-width: 0;
  font-size: clamp(24px, 1rem + 1.4vw, 36px);
}
.group-ic,
.ic {
  flex: none;
  display: grid;
  place-items: center;
  width: var(--tap);
  height: var(--tap);
  border-radius: 50%;
  color: var(--blue-press);
  background: var(--blue-soft);
}
.ic--muted {
  color: var(--ink-2);
  background: var(--paper-3);
}
.js-tabs .group-ic {
  display: none;
}
.feats {
  display: grid;
  grid-template-columns: minmax(0, 1fr); /* R6: Spalten stehen am Dateiende (640/1000 px), nie auto-fill */
  gap: 0 var(--s-6);
}
.feats li {
  padding: var(--s-3) 0;
  border-top: 1px solid var(--glass-line);
  min-width: 0;
}
.feats b {
  display: block;
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
}
.feats .k {
  display: block;
  max-width: 60ch;
  margin-top: 2px;
  font-size: var(--fs-s);
  line-height: 1.5;
  color: var(--ink-2);
}
.feats .tag-test {
  margin-left: var(--s-1);
  padding: 4px 8px;
}
.tiles {
  gap: var(--s-3);
}
.tiles li {
  position: relative;
  padding: 0;
  border: 1px solid var(--glass-rim);
  border-radius: var(--r-2);
  background: var(--glass-1);
  box-shadow: 0 0 0 1px var(--glass-line), var(--glass-hi);
}
.kerne {
  align-items: stretch;
}
.kerne li {
  padding: var(--s-4) var(--s-4) var(--s-4) var(--s-5);
}
.kerne li::before {
  content: "";
  position: absolute;
  left: -1px;
  top: var(--s-4);
  bottom: var(--s-4);
  width: 3px;
  border-radius: 3px;
  background: var(--blue);
}
.kerne b {
  font-size: var(--fs-m);
  font-weight: 650;
  line-height: 1.3;
}
.kerne .k {
  max-width: none;
  margin-top: var(--s-1);
}
.t-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin-top: var(--s-5);
}
.t-mehr svg {
  flex: none;
  transition: transform .25s var(--ease);
}
.t-mehr[aria-expanded="true"] svg {
  transform: rotate(180deg);
}
/* R6 (Jens 17.10.2026): Kacheln einer Reihe sind gleich hoch — auch aufgeklappt (stretch statt start).
   Der Inhalt steht oben, Knopf und Kennzeichen an fester Stelle (.t-btn richtet oben aus). */
.rest {
  align-items: stretch;
  margin-top: var(--s-4);
}
.rest[hidden] {
  margin-top: 0;
}
.rest li {
  transition: box-shadow .2s var(--ease), transform .16s var(--ease);
}
.rest li:hover {
  transform: translateY(-1px);
  box-shadow: 0 0 0 1px rgba(21, 82, 234, 0.3), var(--glass-hi), var(--shadow-1);
}
.rest li.open {
  box-shadow: 0 0 0 1px var(--blue), var(--glass-hi), var(--shadow-1);
  transform: none;
}
.t-btn {
  -webkit-appearance: none;
  appearance: none;
  display: flex;
  align-items: flex-start; /* R6: das Plus steht neben der ersten Titelzeile, nicht mittig */
  gap: var(--s-2);
  width: 100%;
  min-height: 52px;
  margin: 0;
  padding: 12px var(--s-3) 12px var(--s-4);
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.3;
  text-align: left;
  color: var(--ink);
  background: none;
  border: 0;
  border-radius: var(--r-2);
  cursor: pointer;
}
.t-btn:focus-visible {
  outline-offset: -2px;
}
.t-tx {
  flex: 1 1 auto;
  min-width: 0;
  padding-top: 4px; /* (28 px Plus − 20,8 px Zeile) ÷ 2: erste Zeile mittig neben dem Plus */
}
.t-ic {
  flex: none;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  color: var(--blue-press);
  background: var(--blue-soft);
  transition: transform .28s var(--ease), background-color .16s ease, color .16s ease;
}
.rest li:hover .t-ic,
.rest li.open .t-ic {
  background: var(--blue);
  color: var(--on-blue);
}
.rest li.open .t-ic {
  transform: rotate(45deg);
}
.rest .k {
  max-width: none;
  margin: 0;
  padding: 0 var(--s-4) var(--s-4);
}
.rest .k[hidden] {
  padding: 0;
}
/* R6: Das Kennzeichen steht in einer Kachel immer auf eigener Zeile unter dem Titel, bündig links —
   nicht mal neben, mal unter dem Titel mit Einzug (so zählt es auch beim Sortieren: eine Zeile). */
.tiles .tag-test {
  display: flex;
  width: fit-content;
  margin: 6px 0 0;
}
.group-note,
.note {
  margin-top: var(--s-5);
  padding: var(--s-1) 0 var(--s-1) var(--s-4);
  max-width: 70ch;
  font-size: 16px;
  font-weight: 500;
  color: var(--ink);
  border-left: 3px solid var(--blue);
}

/* ── Hinweis: Glas mit Kante. .hint--warn für „bitte beachten" (gelbe Kante, Schrift --warn-text). ── */
.hint {
  display: flex;
  gap: var(--s-3);
  align-items: flex-start;
  padding: var(--s-4) var(--s-5);
  border-radius: var(--r-2);
  background: var(--glass-3);
  box-shadow: inset 3px 0 0 var(--blue), 0 0 0 1px var(--glass-line);
  color: var(--ink);
}
.hint > svg {
  flex: none;
  margin-top: 3px;
  color: var(--blue-press);
}
.hint b {
  font-weight: 650;
}
.hint--warn {
  background: var(--yellow-soft);
  box-shadow: inset 3px 0 0 var(--yellow), 0 0 0 1px rgba(133, 86, 0, 0.18);
}
.hint--warn > svg,
.hint--warn b {
  color: var(--warn-text);
}

/* Die Aufnahmen stehen in <picture> (WebP in zwei Breiten, das PNG als Rückfall — scripts/website-seo/
   bilder.cjs). Die Hülle nimmt keinen Platz ein: Regeln wie `.phone img` und `.laptop-screen img`
   (height: 100 %) wirken wie ohne sie. */
picture {
  display: contents;
}

/* ── Telefonrahmen: das Bild darin bleibt unverändert (echte Aufnahme der Monteur-App). ── */
.phone-fig {
  margin: 0;
  min-width: 0;
}
.phone {
  position: relative;
  width: 100%;
  max-width: var(--phone-w, 300px);
  margin: 0 auto;
  padding: 11px 9px;
  border-radius: 42px;
  background: var(--night-1);
  box-shadow: inset 0 0 0 2px var(--night-line), 0 0 0 1px rgba(255, 255, 255, 0.6), var(--shadow-2);
}
.phone::before {
  content: "";
  position: absolute;
  top: 5px;
  left: 50%;
  width: 46px;
  height: 4px;
  margin-left: -23px;
  border-radius: 4px;
  background: var(--night-line);
}
.phone img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 32px;
  background: var(--paper);
}
.phone-fig figcaption,
.win figcaption,
.shot figcaption {
  margin-top: var(--s-3);
  text-align: center;
  font-size: var(--fs-s);
  font-weight: 500;
  color: var(--ink-2);
}

/* ── Bild mit Rahmen: Büro-Aufnahmen in einem Glasfenster (Leiste mit drei Punkten, optional Kennzeichen). ── */
.win {
  margin: 0;
  min-width: 0;
}
.win-frame {
  overflow: hidden;
  border-radius: var(--r-2);
  background: var(--glass-3);
  border: 1px solid var(--glass-rim);
  box-shadow: 0 0 0 1px var(--glass-line), var(--shadow-2);
}
.win-bar {
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  padding: var(--s-2) var(--s-4);
  border-bottom: 1px solid var(--glass-line);
}
.win-bar i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--line);
}
.win-bar .tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin-left: auto;
}
.win-frame a {
  display: block;
}
.win-frame a:focus-visible {
  outline-offset: -3px;
}
.win-frame img {
  display: block;
  width: 100%;
  height: auto;
  background: var(--paper);
}
/* Schlichtes Bild mit Rahmen ohne Fensterleiste */
.shot {
  margin: 0;
  min-width: 0;
}
.shot img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--r-2);
  border: 1px solid var(--glass-rim);
  box-shadow: 0 0 0 1px var(--glass-line), var(--shadow-2);
  background: var(--paper);
}

/* ── Bildfolge: ohne Skript untereinander; mit Skript eine Ansicht je Blick (wischen, Knöpfe). ── */
.reel {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-6);
}
.phones {
  --phone-w: 250px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.js .reel {
  grid-template-columns: none;
  grid-auto-flow: column;
  grid-auto-columns: 100%;
  gap: var(--s-5);
  margin: 0 calc(-1 * var(--s-3));
  padding: var(--s-3) var(--s-3) var(--s-5);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  align-items: start;
}
.js .reel::-webkit-scrollbar {
  display: none;
}
.js .reel > * {
  scroll-snap-align: center;
}
.js .reel .win-frame,
.js .reel .phone {
  box-shadow: 0 0 0 1px var(--glass-line), var(--shadow-1);
}
.reel-ctl {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-4);
}
.reel-n {
  min-width: 3.5em;
  text-align: center;
  font-size: var(--fs-s);
  color: var(--ink-2);
}

/* ── Designpartner-Band: kein Kasten. Eine Zeile auf heller Fläche zwischen zwei Haarlinien, die
   zu den Rändern auslaufen; große Zahlen in Mono. Zahlen hält der Wahrheitstest gegen CLAUDE.md §4.1. ── */
.dp-band {
  position: relative;
  padding: var(--s-7) 0;
}
.dp-band::before,
.dp-band::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(21, 82, 234, 0.35) 20%,
    rgba(21, 82, 234, 0.35) 80%,
    transparent
  );
}
.dp-band::before {
  top: 0;
}
.dp-band::after {
  bottom: 0;
}
.dp-in {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.4fr) minmax(0, 1.1fr);
  gap: var(--s-6) var(--s-7);
  align-items: center;
}
.dp-in > * {
  min-width: 0;
}
.dp-kicker {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.dp-kicker::before {
  content: "";
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--yellow);
  box-shadow: 0 0 0 1px var(--warn-text);
}
.dp-in h2 {
  margin-top: var(--s-3);
  font-size: clamp(26px, 1rem + 1.6vw, 40px);
}
.dp-prices {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-5) var(--s-7);
}
.dp-price {
  min-width: 0;
}
.dp-price .n {
  display: block;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  word-spacing: -.3em;
  font-size: var(--fs-num);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.05em;
  color: var(--blue-press);
  white-space: nowrap;
}
.dp-price .l {
  display: block;
  margin-top: var(--s-2);
  font-size: var(--fs-s);
  color: var(--ink-2);
}
.dp-price .was {
  color: var(--ink-2);
}
.dp-cond .kw li {
  font-size: var(--fs-s);
}
.dp-cond .actions {
  margin-top: var(--s-4);
}

/* ── Preis-Karte mit Rechner. IDs im HTML: maCount, calcCount, calcPrice, calcBreak, calcDp
   (der Wahrheitstest liest „var BASE = 49, PER = 19, DP_BASE = 24.5" aus dem Skript der Seite). ── */
.pricebox {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--s-7);
  align-items: center;
  padding: var(--s-7);
  border-radius: var(--r-4);
  background: var(--glass-3);
  border: 1px solid var(--glass-rim);
  box-shadow: 0 0 0 1px var(--glass-line), var(--glass-hi), var(--shadow-2);
}
.pricebox > * {
  min-width: 0;
}
.price-line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s-2) var(--s-4);
}
.price-line + .price-line {
  margin-top: var(--s-4);
  padding-top: var(--s-4);
  border-top: 1px solid var(--glass-line);
}
.price-n {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  letter-spacing: -.04em;
  word-spacing: -.3em;
  line-height: 1;
  color: var(--ink);
  font-size: var(--fs-num);
  white-space: nowrap;
}
.price-line--per .price-n {
  font-size: clamp(30px, 1.4rem + 2vw, 48px);
  color: var(--blue-press);
}
.price-l {
  font-size: var(--fs-m);
  font-weight: 500;
  color: var(--ink-2);
}
.price-fine {
  margin-top: var(--s-4);
  font-size: var(--fs-s);
  color: var(--ink-2);
}
.price-fine b {
  color: var(--ink);
  font-weight: 600;
}
.trial {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: var(--tap);
  margin-top: var(--s-5);
  padding: var(--s-2) var(--s-4);
  font-size: var(--fs-s);
  font-weight: 600;
  color: var(--success-text);
  background: var(--green-soft);
  border: 1px solid var(--green);
  border-radius: var(--r-pill);
}
.trial svg {
  flex: none;
}
/* ── Rechner als Instrument (Revision 1, Jens: „ausgefallener und im Glass Design … etwas
   Spektakuläres"). Eine kleine Bühne in Tiefblau; die Grundlage bleibt das native
   <input type="range"> (Maus, Touch, Tastatur, Bildschirmleser). Darüber nur Gestaltung:
   - eine gläserne Schiene, deren Füllung als Licht von links nach rechts läuft,
   - ein leuchtender Regler (Tippziel --thumb = 44 px, sichtbar ein Lichtkern),
   - eine Wertblase, die mit dem Regler wandert,
   - ein Lichtkegel auf der Bühne, der dem Regler folgt,
   - der Betrag zählt beim Ändern hoch oder herunter (Skript, aus bei „Bewegung reduzieren").
   Das Skript setzt --wert (0 … 1) an .calc; ohne Skript gilt der ausgelieferte Stand (3 Mitarbeiter,
   steht im style-Attribut). Alle Positionen rechnen mit derselben Formel wie der Browser für den
   Regler: Mitte = Daumen/2 + (Breite − Daumen) × Wert. ── */
.calc {
  /* Fokus auf Tiefblau gelb wie auf .stage — das Blau aus :root erreichte hier nur 1,5–2,7:1. */
  --focus: #ffd257;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-width: 0;
  padding: var(--s-6) var(--s-6) var(--s-5);
  border-radius: var(--r-3);
  color: var(--on-night);
  background: radial-gradient(
      44% 64% at calc(var(--thumb) / 2 + (100% - var(--thumb)) * var(--wert, 0)) 58%,
      rgba(70, 140, 255, 0.5),
      rgba(70, 140, 255, 0) 72%
    ), radial-gradient(40% 60% at 100% 0%, var(--light-sky), var(--light-0) 72%),
    linear-gradient(165deg, var(--night-2) 0%, var(--night-1b) 45%, var(--night-0) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.24), inset 0 0 0 1px rgba(255, 255, 255, 0.07),
    var(--shadow-deep);
}
/* Lichtreflex: ein schräger heller Streif über der Glasfläche oben links. */
.calc::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    115deg,
    rgba(255, 255, 255, 0.14) 0%,
    rgba(255, 255, 255, 0.04) 26%,
    rgba(255, 255, 255, 0) 40%
  );
}
.calc-t {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 550;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--on-night-2);
}
.calc-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--s-3);
  margin-top: var(--s-4);
}
.calc-head label {
  font-size: 16px;
  font-weight: 600;
  color: var(--on-night);
}
.calc-head .calc-hint {
  font-size: var(--fs-xs);
  color: var(--on-night-2);
}
/* Schiene mit Blase und Marken. Oben Platz für die Blase, unten für die Marken. */
.calc-track {
  position: relative;
  margin-top: var(--s-2);
  padding: 52px 0 26px;
}
.calc-range {
  -webkit-appearance: none;
  appearance: none;
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: var(--thumb);
  margin: 0;
  background: transparent;
  cursor: pointer;
  touch-action: manipulation;
}
.calc-range::-webkit-slider-runnable-track {
  height: 14px;
  border-radius: var(--r-pill);
  background: linear-gradient(90deg, #3b7bff, #63b4ff 70%, #c4ecff) 0 0 /
    calc(var(--thumb) / 2 + (100% - var(--thumb)) * var(--wert, 0)) 100% no-repeat,
    rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.45), inset 0 0 0 1px rgba(255, 255, 255, 0.14), 0 1px
    0 rgba(255, 255, 255, 0.12), 0 0 18px -2px rgba(80, 150, 255, 0.55);
}
.calc-range::-moz-range-track {
  height: 14px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.45), inset 0 0 0 1px rgba(255, 255, 255, 0.14);
}
.calc-range::-moz-range-progress {
  height: 14px;
  border-radius: var(--r-pill);
  background: linear-gradient(90deg, #3b7bff, #63b4ff 70%, #c4ecff);
  box-shadow: 0 0 18px -2px rgba(80, 150, 255, 0.7);
}
/* Der Regler: eine klare Glaslinse (Jens' Video) — 44 px Tippziel, sichtbar ein heller Glasrand mit
   Spiegelpunkt; in der Mitte scheint die leuchtende Füllung durch. Beim Ziehen quillt die Linse auf. */
.calc-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: var(--thumb);
  height: var(--thumb);
  margin-top: calc((14px - var(--thumb)) / 2);
  border: 0;
  border-radius: 50%;
  background: radial-gradient(
      circle closest-side at 38% 30%,
      rgba(255, 255, 255, 0.95),
      rgba(255, 255, 255, 0) 34%
    ),
    radial-gradient(
      circle closest-side,
      rgba(140, 195, 255, 0.22) 0 58%,
      rgba(255, 255, 255, 0.92) 66%,
      rgba(170, 210, 255, 0.55) 72%,
      rgba(255, 255, 255, 0) 76%
    );
  filter: drop-shadow(0 0 10px rgba(100, 165, 255, 0.9)) drop-shadow(0 6px 10px rgba(0, 0, 0, 0.45));
  transition: transform .3s var(--spring), filter .2s ease;
}
.calc-range::-moz-range-thumb {
  width: var(--thumb);
  height: var(--thumb);
  border: 0;
  border-radius: 50%;
  background: radial-gradient(
      circle closest-side at 38% 30%,
      rgba(255, 255, 255, 0.95),
      rgba(255, 255, 255, 0) 34%
    ),
    radial-gradient(
      circle closest-side,
      rgba(140, 195, 255, 0.22) 0 58%,
      rgba(255, 255, 255, 0.92) 66%,
      rgba(170, 210, 255, 0.55) 72%,
      rgba(255, 255, 255, 0) 76%
    );
  filter: drop-shadow(0 0 10px rgba(100, 165, 255, 0.9)) drop-shadow(0 6px 10px rgba(0, 0, 0, 0.45));
  transition: transform .3s var(--spring);
}
.calc-range:hover::-webkit-slider-thumb {
  transform: scale(1.08);
}
.calc-range:active::-webkit-slider-thumb {
  transform: scale(1.22);
  filter: drop-shadow(0 0 16px rgba(140, 195, 255, 1)) drop-shadow(0 6px 10px rgba(0, 0, 0, 0.45));
}
.calc-range:active::-moz-range-thumb {
  transform: scale(1.22);
}
/* Fokus: gelber Ring um den Regler (--focus aus .calc) — auf Tiefblau gut sichtbar (Farbe nicht
   allein: die Blase hebt sich zusätzlich an). Derselbe Ring liegt um den Schalter. */
.calc-range:focus {
  outline: none;
}
.calc-range:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 4px;
  border-radius: var(--r-pill);
}
.calc-range:focus-visible::-webkit-slider-thumb {
  box-shadow: 0 0 0 3px var(--night-1b), 0 0 0 6px var(--focus);
}
.calc-range:focus-visible::-moz-range-thumb {
  box-shadow: 0 0 0 3px var(--night-1b), 0 0 0 6px var(--focus);
}
.calc-range:focus-visible ~ .calc-bubble {
  transform: translate(-50%, -4px);
}
/* Wertblase: Glas, wandert mit dem Regler. */
.calc-bubble {
  position: absolute;
  top: 0;
  left: calc(var(--thumb) / 2 + (100% - var(--thumb)) * var(--wert, 0));
  z-index: 2;
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  min-width: 52px;
  justify-content: center;
  padding: 7px 12px;
  border-radius: 12px;
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  color: var(--night-0);
  background: linear-gradient(180deg, #ffffff, #e3eeff);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.7), 0 10px 22px -8px rgba(0, 0, 0, 0.55), 0 0 24px
    -4px rgba(120, 180, 255, 0.8);
  transform: translateX(-50%);
  transition: transform .2s var(--spring);
  pointer-events: none;
}
.calc-bubble::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -5px;
  width: 10px;
  height: 10px;
  margin-left: -5px;
  border-radius: 2px;
  background: #e3eeff;
  transform: rotate(45deg);
}
.calc-bubble small {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-2);
}
/* Marken unter der Schiene: 1, 50, 100, 150 — an der Stelle, an der der Regler bei diesem Wert steht. */
.calc-ticks {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 20px;
  pointer-events: none;
}
.calc-ticks span {
  position: absolute;
  top: 0;
  left: calc(var(--thumb) / 2 + (100% - var(--thumb)) * var(--at, 0));
  transform: translateX(-50%);
  font-size: 12px;
  font-weight: 500;
  color: var(--on-night-2);
}
/* Ring wie ein Drehregler (Jens' Vorlage: das Thermostat): zeigt, wie weit der Regler steht —
   270° Bogen, offen nach unten; in der Mitte der Betrag. Reine Anzeige (aria-hidden), bedient wird
   der Regler darunter. Ring, Knopf und Betrag liegen in derselben Rasterzelle übereinander. */
.calc {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}
/* Feste Rasterplätze: Ohne Skript ist .tarif hidden und fiele aus dem Raster — ohne feste Zeilen
   rückte dann die Aufschlüsselung in Zeile 2 und läge über dem Rad. */
.calc > .calc-t {
  grid-row: 1;
}
.calc > .tarif {
  grid-row: 2;
}
.calc > .calc-sub {
  grid-row: 4;
}
.calc > .calc-head {
  grid-row: 5;
}
.calc > .calc-track {
  grid-row: 6;
}
.calc > .calc-dp {
  grid-row: 7;
}
/* Ohne Skript kommt der Regler gesperrt: er zeigt den Beispielstand, lässt sich aber nicht ziehen. */
.calc-range:disabled {
  cursor: default;
}
.calc-range:disabled::-webkit-slider-thumb {
  cursor: default;
}
.calc-dial,
.calc-main {
  grid-row: 3;
  grid-column: 1;
  justify-self: center;
  width: min(260px, 82%);
  aspect-ratio: 1;
  margin-top: var(--s-4);
}
.calc-dial {
  position: relative;
  border-radius: 50%;
  background: radial-gradient(
      circle at 50% 30%,
      rgba(255, 255, 255, 0.14),
      rgba(255, 255, 255, 0.03) 62%
    ), rgba(4, 12, 39, 0.3);
  transition: box-shadow .45s ease;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.32), inset 0
    -24px 44px rgba(0, 0, 0, 0.35), 0 24px 48px -24px rgba(0, 0, 0, 0.7);
}
.calc-ring,
.calc-knob {
  position: absolute;
  inset: 6%;
  border-radius: 50%;
}
.calc-ring {
  background: conic-gradient(
    from 225deg,
    #3b7bff 0deg,
    #9ad8ff calc(var(--wert, 0) * 270deg),
    rgba(255, 255, 255, 0.1) calc(var(--wert, 0) * 270deg),
    rgba(255, 255, 255, 0.1) 270deg,
    rgba(255, 255, 255, 0) 270deg
  );
  -webkit-mask: radial-gradient(
    farthest-side,
    transparent calc(100% - 12px),
    #000 calc(100% - 11px)
  );
  mask: radial-gradient(farthest-side, transparent calc(100% - 12px), #000 calc(100% - 11px));
  filter: drop-shadow(0 0 8px rgba(90, 160, 255, 0.75));
}
.calc-knob {
  transform: rotate(calc(225deg + var(--wert, 0) * 270deg));
}
.calc-knob::after {
  content: "";
  position: absolute;
  top: -1px;
  left: 50%;
  width: 14px;
  height: 14px;
  margin-left: -7px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(120, 180, 255, 0.5), 0 0 16px 4px rgba(140, 200, 255, 0.9);
}
.calc-main {
  container-type: inline-size;
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  text-align: center;
}
.calc-main output {
  display: inline-block;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: 40px;
  line-height: 1.05;
  letter-spacing: -.03em;
  word-spacing: -.3em;
  color: var(--on-night);
  text-shadow: 0 0 28px rgba(110, 170, 255, 0.55);
}
@supports (width: 1cqi) {
  .calc-main output {
    font-size: min(56px, 17cqi);
  }
}
.calc-main span {
  font-size: var(--fs-s);
  color: var(--on-night-2);
}
.calc-sub {
  text-align: center;
}
.calc-sub {
  margin-top: var(--s-2);
  font-size: var(--fs-xs);
  color: var(--on-night-2);
}
.calc-dp {
  margin-top: var(--s-4);
  padding-top: var(--s-4);
  border-top: 1px solid var(--rim-d);
  font-size: 16px;
  color: var(--on-night-2);
}
.calc-dp b {
  color: var(--slot-light);
  font-weight: 650;
}

/* ── Schalter „Listenpreis ↔ Designpartner" (Jens' Video: Glaslinse auf einer Pille). Grundlage ist
   ein <input type="checkbox" role="switch">; die Pille ist sein <label>. Die Linse gleitet über die
   Pille und zeigt darunter vergrößert, was dort steht: Sie trägt eine zweite, vergrößerte Kopie der
   Wörter, die beim Gleiten genau gegenläufig verschoben wird — so bleibt die Kopie deckungsgleich mit
   der Pille, und nur die Linse wandert. Eingeschaltet (Designpartner) leuchtet die Pille hell, und
   ein blauer Lichtschein fällt nach unten auf den Betrag. Ohne Skript steht der Schalter nicht da
   (hidden; das Skript nimmt es weg) — die Zahlen darunter stimmen auch ohne ihn. ── */
.tarif {
  position: relative;
  justify-self: center;
  width: min(340px, 100%);
  margin-top: var(--s-4);
}
.tarif-in {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.tarif-pille {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
  min-height: 52px;
  padding: 4px;
  border-radius: var(--r-pill);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  background: rgba(255, 255, 255, 0.07);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18), inset 0 0 0 1px rgba(255, 255, 255, 0.12), inset 0 6px
    14px rgba(0, 0, 0, 0.35), 0 12px 26px -14px rgba(0, 0, 0, 0.7);
  transition: background-color .4s ease, box-shadow .4s ease;
}
/* Lichtschein nach unten — nur eingeschaltet. */
.tarif-pille::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: -10%;
  right: -10%;
  top: 55%;
  height: 300%;
  pointer-events: none;
  background: radial-gradient(
    50% 45% at 50% 0%,
    rgba(110, 175, 255, 0.85),
    rgba(90, 160, 255, 0) 72%
  );
  opacity: 0;
  transition: opacity .45s ease;
}
.tarif-wort {
  position: relative;
  padding: 0 var(--s-2);
  text-align: center;
  font-size: 15px;
  font-weight: 650;
  line-height: 1.2;
  color: var(--on-night-2);
  transition: color .3s ease;
}
/* Das Wort unter der Linse steht nur in der Linse (vergrößert) — sonst sähe man es doppelt. */
.tarif-pille > .tarif-wort {
  transition: color .3s ease, opacity .25s ease;
}
.tarif-in:not(:checked) + .tarif-pille > .tarif-wort:nth-of-type(2),
.tarif-in:checked + .tarif-pille > .tarif-wort:nth-of-type(3) {
  opacity: 0;
}
.tarif-linse {
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 4px;
  width: calc(50% - 4px);
  overflow: hidden;
  border-radius: var(--r-pill);
  pointer-events: none;
  background: rgba(255, 255, 255, 0.07);
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, 0.8), inset 0 -1.5px 0 rgba(255, 255, 255, 0.35), inset 0
    0 0 1px rgba(255, 255, 255, 0.4), inset 0 -10px 18px -10px rgba(170, 210, 255, 0.65), 0 10px 22px -10px
    rgba(0, 0, 0, 0.6);
  transform: translateX(0);
  transition: transform .55s var(--spring);
}
/* Die vergrößerte Kopie: so breit wie der Inhalt der Pille, gegenläufig verschoben. */
.tarif-linse-inhalt {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 200%;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
  transform: translateX(0) scale(1.16);
  transform-origin: 25% 50%;
  transition: transform .55s var(--spring), transform-origin .55s var(--spring);
}
.tarif-linse-inhalt .tarif-wort {
  color: var(--on-night);
}
/* Spiegelung oben auf der Linse */
.tarif-linse::after {
  content: "";
  position: absolute;
  left: 10%;
  right: 10%;
  top: 2px;
  height: 45%;
  border-radius: 999px 999px 40% 40% / 999px 999px 100% 100%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0));
}
.tarif-in:checked + .tarif-pille {
  background: rgba(240, 245, 255, 0.86);
  box-shadow:
    inset 0 1px 0 #ffffff, inset 0 0 0 1px rgba(255, 255, 255, 0.6), inset 0 -6px 14px rgba(
      21,
      82,
      234,
      0.18
    ), 0 0 34px -4px rgba(120, 180, 255, 0.75), 0 12px 26px -14px rgba(0, 0, 0, 0.6);
}
.tarif-in:checked + .tarif-pille::after {
  opacity: 1;
}
.tarif-in:checked + .tarif-pille .tarif-wort {
  color: var(--ink-2);
}
.tarif-in:checked + .tarif-pille .tarif-linse {
  transform: translateX(100%);
  background: rgba(255, 255, 255, 0.35);
}
.tarif-in:checked + .tarif-pille .tarif-linse-inhalt {
  transform: translateX(-50%) scale(1.16);
  transform-origin: 75% 50%;
}
.tarif-in:checked + .tarif-pille .tarif-linse-inhalt .tarif-wort {
  color: var(--ink);
}
/* Beim Gleiten: die Linse dehnt sich wie ein Tropfen, die Kopie verschwimmt kurz (Klasse vom Skript). */
.tarif.gleitet .tarif-linse {
  animation: tropfen .55s var(--ease);
}
.tarif.gleitet .tarif-linse-inhalt .tarif-wort {
  animation: verschwimmen .55s var(--ease);
}
@keyframes tropfen {
  45% {
    scale: 1.14 0.9;
  }
}
@keyframes verschwimmen {
  45% {
    filter: blur(1.2px);
  }
}
.tarif-in:focus-visible + .tarif-pille {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}
/* Schmale Telefone: „Designpartner" passte vergrößert nicht unter die Linse (bei 360 px angeschnitten).
   Kleinere Schrift und weniger Vergrößerung; die Pille bleibt 52 px hoch (Ziel ≥ 44 px). */
@media (max-width: 400px) {
  .tarif-wort {
    font-size: 13px;
    padding: 0 var(--s-1);
  }
  .tarif-linse-inhalt {
    transform: translateX(0) scale(1.08);
  }
  .tarif-in:checked + .tarif-pille .tarif-linse-inhalt {
    transform: translateX(-50%) scale(1.08);
  }
}
/* Zweite Zeile unter dem Rechner: zeigt den jeweils anderen Preis. */
.calc .calc-liste {
  display: none;
}
/* Designpartner an: das Licht der Pille fällt von oben auf den Ring. */
.calc.dp .calc-dial {
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.45), inset 0 34px
    46px -22px rgba(130, 185, 255, 0.55), inset 0 -24px 44px rgba(0, 0, 0, 0.35), 0 24px 48px -24px rgba(
      0,
      0,
      0,
      0.7
    ), 0 -12px 40px -16px rgba(110, 175, 255, 0.6);
}
.pricebox:has(.calc) {
  align-items: start;
}
.calc.dp .calc-liste {
  display: block;
}
.calc.dp .calc-dp-zeile {
  display: none;
}

/* ── Geplant: gestrichelte Karte; die Klasse plan und das <article> hält der Wahrheitstest. ── */
.plan {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-3);
  background: transparent;
  border: 1px dashed var(--edge);
  box-shadow: none;
}
.plan h3 {
  margin: 0;
}
.plan-note {
  padding: var(--s-3);
  border-radius: var(--r-1);
  background: var(--paper-2);
  font-size: var(--fs-s);
  color: var(--ink);
}
.plan-note a {
  padding-block: var(--s-3);
  color: var(--blue-press);
  text-underline-offset: 3px;
}

/* ── Bühne (.stage): Tiefblau mit weichen Lichtern, heller Kante oben und tiefem Schatten. Trägt den
   Hero der Startseite, das Abschluss-Band (.cta) und den Rechner auf /preise. Die Lichter sind
   radial-gradient (kein Weichzeichner); das eine bewegte Licht (::after) wandert langsam und steht
   bei „Bewegung reduzieren" still. Schrift: --on-night / --on-night-2, gemessen gegen die hellste
   Lichtstelle hinter Text. ── */
.stage,
.cta {
  --focus: #ffd257;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: var(--on-night);
  background: radial-gradient(48% 62% at 82% 18%, var(--light-blue), var(--light-0) 72%),
    radial-gradient(36% 50% at 100% 100%, var(--light-sky), var(--light-0) 72%),
    radial-gradient(42% 56% at 0% 0%, rgba(30, 72, 210, 0.42), var(--light-0) 72%),
    linear-gradient(165deg, var(--night-2) 0%, var(--night-1b) 42%, var(--night-0) 100%);
  border-radius: var(--r-4);
  box-shadow: var(--shadow-deep);
}
/* Kante: oben eine helle Lichtlinie, rundum ein Hauch Weiß. */
.stage::before,
.cta::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), inset 0 0 0 1px rgba(255, 255, 255, 0.07);
}
/* Das wandernde Licht. */
.stage::after,
.cta::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: -30%;
  left: 30%;
  width: 70%;
  aspect-ratio: 1;
  pointer-events: none;
  background: radial-gradient(closest-side, var(--light-ice), rgba(170, 220, 255, 0));
}
.stage h1,
.stage h2,
.stage h3 {
  color: var(--on-night);
}
.stage p {
  color: var(--on-night-2);
}
.stage a.link {
  color: var(--slot-light);
}
.cta {
  padding: var(--s-9) var(--s-6);
  text-align: center;
}
.cta h2 {
  font-size: var(--fs-h2);
  color: var(--on-night);
}
.cta p {
  max-width: 52ch;
  margin: var(--s-4) auto 0;
  font-size: var(--fs-l);
  color: var(--on-night-2);
}
.cta p a {
  padding-block: var(--s-3);
  text-underline-offset: 3px;
}
.cta .fine {
  margin-top: var(--s-5);
  font-size: var(--fs-s);
  font-weight: 500;
  color: var(--on-night-2);
}
.cta > * {
  position: relative;
  z-index: 2;
}
.cta .actions {
  justify-content: center;
}

/* ── Fuß. .foot-links braucht assets/einwilligung.js (hängt dort „Cookie-Einstellungen" an). ── */
.foot {
  padding: var(--s-7) 0 var(--s-6);
  border-top: 1px solid var(--glass-line);
  font-size: var(--fs-s);
  color: var(--ink-2);
}
.foot-in {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3) var(--s-6);
}
.foot-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--s-1);
}
.foot-links a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  padding: 0 var(--s-3);
  border-radius: var(--r-1);
  text-underline-offset: 3px;
}
.foot-links a:hover {
  color: var(--blue-press);
}
.foot-copy {
  margin-top: var(--s-4);
  padding-top: var(--s-4);
  border-top: 1px solid var(--glass-line);
}

/* ── Einwilligungsleiste (assets/einwilligung.js baut #cs-banner und bringt eigenen Stil mit, der
   später im Kopf steht). Hier nur die Fläche als Glas — die zwei Knöpfe bleiben, wie das Skript sie
   gestaltet: gleich groß, gleich aussehend. „body" hebt die Gewichtung über die des Skripts. ── */
body #cs-banner .cs-in {
  background: rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-rim);
  border-radius: var(--r-3);
  box-shadow: 0 0 0 1px var(--glass-line), var(--glass-hi), var(--shadow-2);
}
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  body #cs-banner .cs-in {
    background: var(--paper);
  }
}

/* ── Breiten ────────────────────────────────────────────────────────────────────────────── */
@media (min-width: 900px) {
  .hero--split .hero-in {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  }
}
@media (max-width: 1100px) {
  .group {
    gap: var(--s-6) var(--s-7);
  }
  .dp-in {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
  .dp-in > :first-child {
    grid-column: 1 / -1;
  }
}
@media (max-width: 900px) {
  .sec {
    padding: var(--s-8) 0;
  }
  .split {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s-6);
  }
  .split--rev > :first-child {
    order: 0;
  }
  .pricebox {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s-6);
    padding: var(--s-6);
  }
  .group {
    grid-template-columns: minmax(0, 1fr);
  }
  .group-main,
  .group-media {
    grid-column: 1;
    grid-row: auto;
  }
  .group-media {
    order: -1;
    position: static;
    max-width: 560px;
    width: 100%;
    margin: 0 auto;
  }
  .group-media .phones {
    --phone-w: 190px;
  }
  .js-tabs .jump {
    -webkit-mask-image: linear-gradient(
      90deg,
      transparent,
      black var(--ml, 0px),
      black calc(100% - var(--mr, 0px)),
      transparent
    );
    mask-image: linear-gradient(
      90deg,
      transparent,
      black var(--ml, 0px),
      black calc(100% - var(--mr, 0px)),
      transparent
    );
  }
}
/* Unter 1080 px: Navigation hinter den Menüknopf (seit Revision 3 fünf Einträge: Startseite · Funktionen ·
   Lohnkern · Preise · FAQ — gemessen: bei 1081 px bleiben 76 px zwischen Marke und Navigation). Ohne Skript bricht sie in eine zweite Zeile um. */
@media (max-width: 1080px) {
  .nav-toggle {
    display: inline-flex;
    order: 3;
  }
  .top-cta {
    order: 2;
    margin-left: auto;
  }
  .nav .nav-cta {
    display: inline-flex;
  }
  .nav .nav-login {
    display: inline-flex;
  }
  .top-login {
    display: none;
  }
  .top-in {
    flex-wrap: wrap;
  }
  .js .nav {
    display: none;
  }
}
/* Tablet (601–1080 px, Revision 4): Platz genug für „Anmelden" neben „Kostenlos testen" — dann nicht
   noch einmal im Menü. Am Telefon bleibt es im Menü. */
@media (min-width: 601px) and (max-width: 1080px) {
  .js .top-login {
    display: inline-flex;
    order: 2;
    margin-left: auto;
  }
  .js .top-login + .top-cta {
    margin-left: 0;
  }
  .js .nav .nav-login {
    display: none;
  }
}
@media (max-width: 1080px) {
  /* Das Menü ist deckend: Ein Weichzeichner wirkt hier nicht — .top hat selbst backdrop-filter und ist
     damit „Backdrop Root"; die Seite schien ungefiltert durch die Einträge (gemessen 16.10.2026). */
  .js .top.open {
    background: var(--paper);
  }
  .js .top.open .nav {
    display: flex;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin: 0;
    padding: var(--s-2) var(--gutter) var(--s-4);
    max-height: calc(100vh - var(--bar));
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--paper);
    border-bottom: 1px solid var(--glass-line);
    box-shadow: var(--shadow-2);
  }
  .js .top.open .nav a {
    min-height: 52px;
    padding: 0 var(--s-2);
    font-size: var(--fs-m);
    border-bottom: 1px solid var(--glass-line);
    border-radius: 0;
  }
  .js .top.open .nav a[aria-current] {
    font-weight: 650;
    background-image: none;
    box-shadow: inset 3px 0 0 var(--blue);
  }
  html:not(.js) .nav {
    order: 4;
    width: 100%;
    margin: 0 0 var(--s-2);
    flex-wrap: wrap;
  }
  html:not(.js) .nav-toggle {
    display: none;
  }
  html:not(.js) .top {
    position: static;
  }
}
@media (max-width: 600px) {
  /* Fließtext am Telefon mindestens 16 px (Revision 4) — auch die kleinere Stufe --fs-s. */
  :root {
    --fs-m: 16px;
    --fs-s: 16px;
    --s-8: 56px;
    --s-9: 72px;
    --bar: 60px;
  }
  .top-in {
    gap: var(--s-2);
  }
  .js .top-in {
    flex-wrap: nowrap;
  }
  .top-cta {
    padding-inline: var(--s-3);
  }
  .cta-long {
    display: none;
  }
  .cta-short {
    display: inline;
  }
  .hero {
    padding-top: calc(var(--bar) + var(--s-6));
  }
  html:not(.js) .hero {
    padding-top: var(--s-6);
  }
  .actions .btn {
    flex: 1 1 100%;
  }
  .ribbon {
    border-radius: var(--r-2);
  }
  .card {
    padding: var(--s-4);
  }
  .pricebox {
    padding: var(--s-5) var(--s-4);
  }
  .cta {
    padding: var(--s-8) var(--s-4);
    border-radius: var(--r-3);
  }
  .dp-in {
    grid-template-columns: minmax(0, 1fr);
  }
  .phones {
    --phone-w: 236px;
  }
  .hero-media .phone {
    --phone-w: 260px;
  }
  html:not(.js) .phones {
    grid-template-columns: minmax(0, 1fr);
  }
  .accs {
    padding: var(--s-1) var(--s-3);
  }
  .t-row .btn {
    flex: 1 1 100%;
  }
}

/* ── Bewegung: Zugabe. Ohne Skript und bei „Bewegung reduzieren" steht alles sofort ruhig da.
   Die Klasse rv setzt NUR ein Skript (Einblenden beim Hereinscrollen), im HTML steht sie nirgends. ── */
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
  .reel {
    scroll-behavior: smooth;
  }
  .rv {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity .6s var(--ease), transform .6s var(--ease);
    transition-delay: var(--rd, 0ms);
  }
  .rv.in {
    opacity: 1;
    transform: none;
  }
  .js-tabs .group.is-on {
    animation: panel-in .4s var(--ease) both;
  }
  .js-tabs .group.is-on .tiles li {
    animation: tile-in .45s var(--ease) both;
    animation-delay: calc(var(--i, 0) * 22ms);
  }
  .rest li.open .k {
    animation: k-in .3s var(--ease) both;
  }
  .acc[open] .acc-body,
  .qa[open] .qa-a {
    animation: k-in .3s var(--ease) both;
  }
  /* Bühne: das eine Licht wandert langsam (nur transform — keine Neuberechnung des Layouts). */
  .stage::after,
  .cta::after {
    animation: licht 18s ease-in-out infinite alternate;
  }
  /* Rechner: der Betrag leuchtet bei jeder Änderung kurz auf (Klasse puls setzt das Skript). */
  .calc.puls output {
    animation: puls .45s var(--ease);
  }
  @keyframes licht {
    from {
      transform: translate3d(-18%, 0, 0) scale(1);
    }
    to {
      transform: translate3d(14%, 22%, 0) scale(1.15);
    }
  }
  @keyframes puls {
    0% {
      text-shadow: 0 0 28px rgba(110, 170, 255, 0.55);
      transform: translateY(0);
    }
    35% {
      text-shadow: 0 0 40px rgba(170, 210, 255, 1);
      transform: translateY(-2px);
    }
    100% {
      text-shadow: 0 0 28px rgba(110, 170, 255, 0.55);
      transform: translateY(0);
    }
  }
  @keyframes panel-in {
    from {
      opacity: 0;
      transform: translateY(10px);
    }
    to {
      opacity: 1;
      transform: none;
    }
  }
  @keyframes tile-in {
    from {
      opacity: 0;
      transform: translateY(8px);
    }
    to {
      opacity: 1;
      transform: none;
    }
  }
  @keyframes k-in {
    from {
      opacity: 0;
      transform: translateY(-4px);
    }
    to {
      opacity: 1;
      transform: none;
    }
  }
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition: none !important;
    animation: none !important;
    scroll-behavior: auto !important;
  }
  .btn,
  a.card,
  .tiles li,
  .ribbon,
  .calc-bubble {
    transform: none !important;
  }
  .calc-bubble {
    translate: -50% 0;
  }
  .btn::after {
    display: none;
  }
  .rv {
    opacity: 1 !important;
    transform: none !important;
  }
  .progress {
    display: none !important;
  }
}

/* ── Drucken: was hinter Reitern, Aufklappern oder Kacheln liegt, steht da. ── */
@media print {
  .rv {
    opacity: 1 !important;
    transform: none !important;
  }
  .top {
    position: static;
    background: none !important;
  }
  .hero::before,
  .wash::before {
    display: none;
  }
  .progress,
  .nav-toggle,
  .jump,
  .reel-ctl,
  .t-row,
  .t-ic,
  #cs-banner {
    display: none !important;
  }
  [hidden="until-found"] {
    content-visibility: visible !important;
  }
  .group[hidden],
  .feats[hidden] {
    display: grid !important;
  }
  .k[hidden] {
    display: block !important;
  }
  .js-tabs .group + .group {
    margin-top: var(--s-8);
  }
  .js .reel {
    grid-auto-flow: row;
    grid-auto-columns: auto;
    grid-template-columns: minmax(0, 1fr);
    overflow: visible;
  }
  .card,
  .win,
  .tiles li,
  .phone-fig,
  .plan {
    break-inside: avoid;
  }
  .glass,
  .card,
  .pricebox {
    box-shadow: none !important;
    border-color: var(--line) !important;
  }
}

/* ════════════════════════════════════════════════════════════════════════════════════════
   Ergänzungen für die Startseite (index.html) und die FAQ — Webdesigner, craftslot-107641.
   Überwiegend neue Klassen; geändert sind oben nur die Szene (ein Rahmen statt Kästen, Runde 2)
   und die Masken der Farbflächen. Werte nur aus den Tokens.
   ════════════════════════════════════════════════════════════════════════════════════════ */

/* Hero: die H1 der Startseite ist ein ganzer Satz (99 Zeichen) — eine Stufe kleiner als --fs-h1. */
.hero h1.h1-lang {
  font-size: clamp(32px, 1.1rem + 2.5vw, 56px);
  line-height: 1.08;
}
.hero-claim {
  margin-top: var(--s-3);
  max-width: var(--measure);
  font-size: var(--fs-l);
  font-weight: 650;
  line-height: 1.4;
  color: var(--ink);
}
.hero-text .trial {
  display: flex;
  width: fit-content;
  max-width: 100%;
}

/* Designpartner: die Preiszahl richtet sich nach der Breite IHRER Spalte (Container-Einheit cqi).
   Mit fester Größe (--fs-num, bis 72 px) lief „24,50 €" auf /preise bei 1280 und 1600 px über die
   190 px breite Spalte in die zweite Zahl (Review craftslot-107641, Runde 1). Die zwei Preise stehen
   deshalb in einem Raster mit festen Spalten — die Eindämmung (container-type) nimmt einem Element
   seine Inhaltsbreite, in einer Flex-Zeile schrumpfte es auf null. Ohne cqi gilt die erste Größe. */
.dp-in .dp-prices {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-5);
}
.dp-price {
  container-type: inline-size;
}
/* „24,50 €" in Mono: 7 Zeichen à 0,6 em, abzüglich Laufweite und Wortabstand ≈ 3,6 em → 25cqi. */
.dp-price .n {
  font-size: clamp(30px, 1rem + 2vw, 48px);
}

/* Startseite: das Band kompakt — Überschrift, zwei Preise, ein Satz, ein Knopf. Beispiele und
   Bedingungen stehen auf /preise. */
.dp-band--kompakt {
  padding: var(--s-6) 0;
}
.dp-band--kompakt .dp-in {
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.1fr) minmax(0, .8fr);
  gap: var(--s-5) var(--s-7);
}
.dp-band--kompakt .dp-price .n {
  font-size: clamp(30px, 1rem + 1.6vw, 44px);
}
@supports (width: 1cqi) {
  .dp-price .n {
    font-size: min(var(--fs-num), 25cqi);
  }
  .dp-band--kompakt .dp-price .n {
    font-size: min(52px, 25cqi);
  }
}
/* Startseite (Revision 1): ein Satz trägt die Zahlen, sein Ende ist der Link auf /preise#partner. */
.dp-satz > p:first-child {
  font-size: var(--fs-l);
  font-weight: 600;
  line-height: 1.45;
  color: var(--ink);
}
.dp-satz a.link {
  font-family: var(--mono);
  font-weight: 700;
  word-spacing: -.2em;
}
.card-link {
  margin-top: var(--s-3);
  font-size: var(--fs-s);
  font-weight: 600;
}
.card-link a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
}
.dp-sub {
  margin-top: var(--s-3);
  max-width: 40ch;
  font-size: var(--fs-s);
  color: var(--ink-2);
}
/* Der Alltag folgt dicht auf das Band — er ist, was die Startseite erzählt. */
.dp-band--kompakt + .sec {
  padding-top: var(--s-7);
}
.dp-band--kompakt .dp-cond .actions {
  margin-top: 0;
}
.dp-more {
  margin-top: var(--s-1);
  font-size: var(--fs-s);
  font-weight: 600;
}
.dp-more a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
}

@media (max-width: 1100px) {
  .dp-band--kompakt .dp-in {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}
@media (max-width: 860px) {
  .dp-band--kompakt .dp-in {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Pfad über der H1 der Unterseiten (/funktionen, /preise). Jeder Link ist ein volles Tippziel. */
.crumbs ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2);
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 550;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.crumbs li + li::before {
  content: "/";
  margin-right: var(--s-2);
  color: var(--ink-2);
}
.crumbs a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--tap);
  min-height: var(--tap);
  color: var(--blue-press);
  text-underline-offset: 3px;
}
.hero--center .crumbs ol {
  justify-content: center;
}

.grid .card .ic {
  margin-bottom: var(--s-4);
}

/* Ein Link unter einem Abschnitt („Was CraftSlot bewusst nicht macht"). */
.sec-more {
  margin-top: var(--s-6);
  font-size: var(--fs-m);
  font-weight: 600;
}
.sec-more a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
}

/* Fragen: Überschrift links, Aufklapper rechts. */
.split--fragen {
  align-items: start;
}
.split--fragen .sec-head {
  margin-bottom: 0;
}
.split--fragen .sec-head a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  font-weight: 600;
}

/* Telefon im Abschluss-Band (Startseite und FAQ). */
.cta .cta-tel {
  margin-top: var(--s-3);
  font-size: var(--fs-m);
}
.cta-tel span {
  white-space: nowrap;
}
.cta-tel a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  padding: 0 var(--s-2);
  font-weight: 600;
  color: var(--on-blue);
  text-underline-offset: 3px;
  white-space: nowrap;
}

@media (max-width: 600px) {
  /* Telefon im Hero kleiner: der Alltag soll auf dem Handy früher kommen. */
  .hero-media .phone {
    --phone-w: 210px;
  }
  .hero-text .trial {
    width: auto;
    border-radius: var(--r-2);
  }
}

/* „Transparenz reduzieren" im System: alles Glas deckend. Auch der Rückfall für Geräte, die den
   Filter zwar kennen, aber nicht zeichnen (in Electron ohne Grafikbeschleunigung gemessen). Steht
   bewusst am ENDE der Datei: Gleich gewichtete Regeln weiter oben (.btn-glass, .chip, .tarif-pille …)
   setzen Fläche und Weichzeichner selbst — vor ihnen stehend, verlöre dieser Block gegen sie. */
/* biome-ignore lint/correctness/noUnknownMediaFeatureName: Media Queries Level 5, Biome 1.9 kennt sie noch nicht */
@media (prefers-reduced-transparency: reduce) {
  .frost,
  .top,
  .js-tabs .jump,
  body #cs-banner .cs-in {
    background: var(--glass-solid) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
  .glass,
  .card,
  .tiles li {
    background: var(--paper);
  }
  .tarif-pille {
    background: var(--night-2);
  }
  .tarif-in:checked + .tarif-pille {
    background: #eef3ff;
  }
  .chip,
  .btn-line,
  .btn-glass {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .btn-line,
  .btn-glass {
    background: var(--night-2);
  }
  .chip--dunkel {
    background: var(--night-1b);
  }
  .chip--hell {
    background: var(--paper);
  }
}

/* ════════════════════════════════════════════════════════════════════════════════════════
   Revision 3 (Jens 16.10.2026): Startseite ohne Szenen-Tafeln. Neu: Gewerke (.gw), fünf Vorteile auf
   einer tiefblauen Bühne (.vt), Ablauf als eine Glasbahn (.bahn), Vertrauen als eine Glastafel
   (.tafel), die Seite /lohnkern mit Rechenstraße (.strasse) und Einstell-Kacheln (.regler).
   Kein Raster gleich großer weißer Kästen: Die Vorteile stehen gestaffelt (zwei Spalten, die rechte
   um eine halbe Fläche versetzt), der erste — Buchhaltung — geht über die ganze Breite.
   Kein backdrop-filter hier: Das Glas auf der Bühne ist ein Verlauf aus Weiß mit Kante (siehe Kopf).
   ════════════════════════════════════════════════════════════════════════════════════════ */

/* ── Gewerke (Revision 4, Jens 17.10.2026: „besser aufteilen, alle dieselbe Logofarbe"): ein Raster
   gleich großer Kacheln, Symbol links, Name rechts — alle Symbole gleich (hell, blauer Strich).
   Zehn Kacheln: 1 Spalte am Telefon, 2 auf Tablet, 5 ab 1240 px — zehn geht in 2 und 5 auf, es bleibt
   nie eine allein in der letzten Reihe. Alle Kacheln einer Liste gleich hoch (grid-auto-rows: 1fr).
   Stehen still (keine Laufschrift: bewegter Inhalt neben Text bräuchte einen Halt-Knopf, WCAG 2.2.2). ── */
.gw-in {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-6);
}
.gw-in .sec-head {
  margin-bottom: 0;
}
.gw-liste {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-auto-rows: 1fr;
  gap: var(--s-3);
}
.gw {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  min-height: 60px;
  padding: var(--s-2) var(--s-4) var(--s-2) var(--s-2);
  font-size: var(--fs-m);
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink);
  background: var(--glass-1);
  border: 1px solid var(--glass-rim);
  border-radius: var(--r-2);
  box-shadow: 0 0 0 1px var(--glass-line), var(--glass-hi), var(--shadow-1);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.gw-ic {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  color: var(--blue-press);
  background: linear-gradient(160deg, #ffffff, var(--blue-soft));
  border-radius: 12px;
  box-shadow: inset 0 0 0 1px rgba(21, 82, 234, 0.16), 0 6px 14px -8px rgba(21, 82, 234, 0.55);
}
.gw-in p.gw-und {
  margin: 0;
  font-size: var(--fs-m);
  font-weight: 500;
  color: var(--ink-2);
}
@media (hover: hover) {
  .gw:hover {
    transform: translateY(-2px);
    box-shadow: 0 0 0 1px rgba(21, 82, 234, 0.2), var(--glass-hi), var(--shadow-2);
  }
}
@media (max-width: 519px) {
  .gw {
    min-height: 54px;
    padding-block: 5px;
  }
  .gw-ic {
    width: 40px;
    height: 40px;
  }
}
@media (min-width: 520px) {
  .gw-liste {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
/* 900–1239 px: Überschrift links, die Kacheln rechts in zwei Spalten. */
@media (min-width: 900px) {
  .gw-in {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    column-gap: var(--s-8);
    row-gap: var(--s-4);
    align-items: center;
  }
  .gw-liste,
  .gw-in p.gw-und {
    grid-column: 2;
  }
  .gw-in .sec-head {
    grid-row: 1 / span 2;
  }
}
/* Ab 1240 px: Überschrift und Satz nebeneinander oben, darunter alle zehn in zwei Reihen zu fünf. */
@media (min-width: 1240px) {
  .gw-in {
    grid-template-columns: minmax(0, 1fr);
    row-gap: var(--s-4);
  }
  .gw-in .sec-head {
    grid-row: auto;
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    column-gap: var(--s-8);
    align-items: end;
    max-width: none;
    margin-bottom: var(--s-3);
  }
  .gw-in .sec-head p {
    margin-top: 0;
    max-width: 52ch;
  }
  .gw-liste,
  .gw-in p.gw-und {
    grid-column: 1;
  }
  .gw-liste {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

/* ── Vorteile: eine tiefblaue Bühne, fünf Glasflächen. Reihenfolge im HTML = Lesereihenfolge. ── */
.vt-sec {
  padding: var(--s-6) clamp(8px, 1.4vw, 20px);
}
.vt-buehne {
  padding: clamp(48px, 6vw, 104px) 0;
}
.vt-buehne::after {
  left: -10%;
  top: 30%;
}
.vt-buehne > .wrap {
  position: relative;
  z-index: 2;
}
.vt-kopf {
  max-width: 46rem;
}
.vt-kopf h2 {
  font-size: var(--fs-h2);
  letter-spacing: -.03em;
  line-height: 1.08;
  text-wrap: balance;
}
.vt-kopf p {
  margin-top: var(--s-4);
  max-width: 56ch;
  font-size: var(--fs-l);
}
/* Revision 4 (Jens 17.10.2026: „zu durcheinander"): Überschrift über die ganze Breite, darunter der
   hervorgehobene Vorteil über die ganze Breite, darunter vier gleich große Kacheln in EINER Reihe —
   4 Spalten ab 1140 px, 2 ab 640 px, sonst 1. Gleich hoch (Raster dehnt), die Links unten bündig
   (margin-top: auto). Keine versetzten Spalten. */
.vorteile {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-4);
}
.vorteile > .vt-kopf {
  margin-bottom: var(--s-4);
}
.vt-kopf,
.vt--haupt {
  grid-column: 1 / -1;
}
@media (min-width: 640px) {
  .vorteile {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--s-5);
  }
}
@media (min-width: 1140px) {
  .vorteile {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--s-5) 20px;
  }
}
.vorteile > * {
  min-width: 0;
}
.vt {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(24px, 2.6vw, 40px);
  border-radius: var(--r-3);
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.035) 60%),
    rgba(4, 12, 39, 0.28);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), inset 0 0 0 1px var(--rim-d), 0 30px 60px
    -36px rgba(2, 6, 22, 0.9);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.vt-ic {
  display: inline-grid;
  place-items: center;
  align-self: flex-start;
  width: 60px;
  height: 60px;
  margin-bottom: var(--s-5);
  color: #ffffff;
  border-radius: 18px;
  background: linear-gradient(160deg, rgba(120, 165, 255, 0.55), rgba(43, 104, 255, 0.22));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), inset 0 0 0 1px rgba(255, 255, 255, 0.18), 0
    14px 30px -12px rgba(43, 104, 255, 0.85);
}
.vt-ic svg {
  filter: drop-shadow(0 0 6px rgba(190, 215, 255, 0.6));
}
.stage .vt h3 {
  font-size: clamp(24px, 1rem + 1.2vw, 34px);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -.028em;
  text-wrap: balance;
}
.stage .vt p {
  margin-top: var(--s-3);
  max-width: 52ch;
  font-size: var(--fs-m);
  line-height: 1.55;
}
/* Stichworte als ruhige Liste mit Haken (Revision 4 — vorher Pillen, die in schmalen Kacheln
   ungleich umbrachen). */
.vt-tags {
  display: grid;
  gap: var(--s-2);
  margin-top: var(--s-5);
}
.vt-tags li {
  position: relative;
  padding-left: 24px;
  font-size: var(--fs-s);
  font-weight: 550;
  line-height: 1.4;
  color: var(--on-night);
}
.vt-tags li::before {
  content: "";
  position: absolute;
  left: 3px;
  top: .38em;
  width: 10px;
  height: 5px;
  border-left: 2px solid #7ee2a8;
  border-bottom: 2px solid #7ee2a8;
  transform: rotate(-45deg);
}
.vt-link {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  align-self: flex-start;
  min-height: var(--tap);
  margin-top: auto;
  padding-top: var(--s-4);
  font-size: var(--fs-s);
  font-weight: 650;
  color: var(--slot-light);
  text-decoration: underline;
  text-decoration-color: rgba(157, 188, 255, 0.45);
  text-underline-offset: 4px;
}
.vt-link:hover {
  color: #ffffff;
  text-decoration-color: currentColor;
}
.vt-link svg {
  transition: transform .2s var(--ease);
}
.vt-link:hover svg {
  transform: translateX(3px);
}
@media (hover: hover) {
  .vt:hover {
    transform: translateY(-4px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), inset 0 0 0 1px var(--rim-d-hi), 0 40px
      70px -36px rgba(2, 6, 22, 0.95);
  }
}
/* Der hervorgehobene Vorteil: helleres Glas, ein Licht in der Ecke, rechts die Rechenstraße im Kleinen. */
.vt--haupt {
  background: radial-gradient(
      70% 90% at 100% 0%,
      rgba(96, 150, 255, 0.24),
      rgba(96, 150, 255, 0) 70%
    ), linear-gradient(160deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.05) 60%),
    rgba(4, 12, 39, 0.24);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.34), inset 0 0 0 1px rgba(255, 255, 255, 0.26), 0
    40px 80px -40px rgba(2, 6, 22, 0.95);
}
.stage .vt--haupt h3 {
  font-size: clamp(28px, 1rem + 2vw, 46px);
}
.vt:not(.vt--haupt) {
  padding: clamp(22px, 2vw, 30px);
}
.vt:not(.vt--haupt) .vt-ic {
  width: 52px;
  height: 52px;
  border-radius: 16px;
}
.stage .vt:not(.vt--haupt) h3 {
  font-size: clamp(21px, 0.95rem + 0.55vw, 25px);
}
.stage .vt p.vt-fine {
  margin-top: var(--s-5);
  padding-left: var(--s-4);
  font-size: var(--fs-s);
  font-weight: 550;
  color: var(--on-night);
  box-shadow: inset 2px 0 0 var(--slot-light);
}
/* „statt … jetzt …": links gedämpft (durchgestrichen nur als Linie, der Text bleibt lesbar), rechts
   hell mit Lichtpunkt. Die Wörter „Statt"/„Jetzt" stehen sichtbar über den Spalten und für
   Vorleseprogramme in jeder Zeile (.vh). */
.vt-statt {
  margin-top: var(--s-5);
  border-radius: var(--r-2);
  background: rgba(4, 12, 39, 0.32);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
  overflow: hidden;
}
.stage .vt p.vt-statt-kopf {
  display: none;
  max-width: none;
  margin-top: 0;
}
.vt-statt li {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-1);
  padding: var(--s-3) var(--s-4);
  font-size: var(--fs-s);
  line-height: 1.45;
}
.vt-statt li + li {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.vt-alt {
  color: var(--on-night-2);
  text-decoration: line-through;
  text-decoration-color: rgba(207, 219, 250, 0.55);
  text-decoration-thickness: 1px;
}
.vt-neu {
  position: relative;
  padding-left: 20px;
  font-weight: 600;
  color: var(--on-night);
}
.vt-neu::before {
  content: "";
  position: absolute;
  left: 2px;
  top: .5em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #7ee2a8;
  box-shadow: 0 0 8px rgba(126, 226, 168, 0.8);
}
@media (min-width: 600px) {
  .stage .vt p.vt-statt-kopf {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: var(--s-4);
    padding: var(--s-3) var(--s-4) var(--s-2);
    font-family: var(--mono);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--slot-light);
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  }
  .vt-statt-kopf span + span {
    padding-left: 20px;
  }
  .vt-statt li {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: var(--s-4);
  }
}
.vt-weiter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4) var(--s-6);
  margin-top: var(--s-7);
  padding-top: var(--s-6);
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}
.stage .vt-weiter p {
  flex: 1 1 32ch;
  max-width: 60ch;
  font-size: var(--fs-l);
  font-weight: 550;
  color: var(--on-night);
}
/* Der hervorgehobene Vorteil: ab 1000 px Text links, „statt … jetzt …" rechts. */
.vt-haupt-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
@media (min-width: 1000px) {
  #v-buchhaltung {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: var(--s-7);
    align-items: start;
  }
  /* Die Tabelle „statt … jetzt …" steht senkrecht mittig neben dem Text (Jens 17.10.2026). */
  #v-buchhaltung .vt-statt {
    margin-top: 0;
    align-self: center;
  }
}
/* ── Ablauf: EINE Glasbahn mit vier Stationen und einer Linie dazwischen — keine Kastenreihe. ── */
.bahn {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  padding: var(--s-3) var(--s-5);
  border-radius: var(--r-4);
  background: var(--glass-1);
  border: 1px solid var(--glass-rim);
  box-shadow: 0 0 0 1px var(--glass-line), var(--glass-hi), var(--shadow-2);
}
.bahn li {
  position: relative;
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  column-gap: var(--s-4);
  padding: var(--s-4) 0;
}
.bahn li + li {
  border-top: 1px solid var(--glass-line);
}
.bahn-n {
  grid-row: 1 / span 2;
  display: inline-grid;
  place-items: center;
  width: 52px;
  height: 52px;
  font-family: var(--mono);
  font-size: 18px;
  font-weight: 650;
  color: #ffffff;
  border-radius: 50%;
  background: linear-gradient(160deg, var(--blue-hi), var(--blue-press));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 0 0 6px rgba(21, 82, 234, 0.1),
    var(--shadow-blue);
}
.bahn h3 {
  align-self: end;
  font-size: var(--fs-h3);
}
.bahn p {
  margin-top: var(--s-1);
  color: var(--ink-2);
}
@media (min-width: 900px) {
  .bahn {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    padding: var(--s-7) var(--s-6) var(--s-6);
  }
  .bahn li {
    display: block;
    padding: 0 var(--s-4);
  }
  .bahn li + li {
    border-top: 0;
  }
  /* Linie von Station zu Station, hinter den Kreisen. */
  .bahn li:not(:last-child)::after {
    content: "";
    position: absolute;
    z-index: 0;
    top: 26px;
    left: calc(var(--s-4) + 60px);
    right: calc(-1 * var(--s-4) + 8px);
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--blue), rgba(21, 82, 234, 0.18));
  }
  .bahn-n {
    position: relative;
    z-index: 1;
    margin-bottom: var(--s-4);
  }
}

/* ── Vertrauen: EINE Glastafel, drei Aussagen, Haarlinien dazwischen. ── */
.tafel {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  padding: var(--s-2) var(--s-5);
  border-radius: var(--r-4);
  background: var(--glass-1);
  border: 1px solid var(--glass-rim);
  box-shadow: 0 0 0 1px var(--glass-line), var(--glass-hi), var(--shadow-2);
}
.tafel-teil {
  padding: var(--s-5) 0;
}
.tafel-teil + .tafel-teil {
  border-top: 1px solid var(--glass-line);
}
.tafel-teil .ic {
  margin-bottom: var(--s-4);
}
.tafel-teil h3 {
  font-size: var(--fs-h3);
}
.tafel-teil p {
  margin-top: var(--s-2);
  color: var(--ink-2);
}
.tafel-teil .card-link {
  margin-top: var(--s-2);
}
@media (min-width: 900px) {
  .tafel {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    padding: var(--s-6) 0;
  }
  .tafel-teil {
    padding: var(--s-2) var(--s-6);
  }
  .tafel-teil + .tafel-teil {
    border-top: 0;
    border-left: 1px solid var(--glass-line);
  }
}

/* ══ /lohnkern ═══════════════════════════════════════════════════════════════════════════ */
/* Die Grenze steht oben, groß: bewertete Zeiten je Lohnart — keine Lohnabrechnung. */
.lk-grenze {
  display: flex;
  gap: var(--s-4);
  align-items: flex-start;
  max-width: 46rem;
  margin: var(--s-6) auto 0;
  padding: var(--s-5) var(--s-6);
  text-align: left;
  border-radius: var(--r-3);
  background: var(--glass-3);
  border: 1px solid var(--glass-rim);
  box-shadow: inset 4px 0 0 var(--blue), 0 0 0 1px var(--glass-line), var(--shadow-2);
}
.lk-grenze > svg {
  flex: none;
  margin-top: 2px;
  color: var(--blue-press);
}
.lk-grenze p {
  font-size: var(--fs-l);
  line-height: 1.45;
  color: var(--ink);
}
.lk-grenze p b {
  font-weight: 700;
}
.lk-grenze p + p {
  margin-top: var(--s-2);
  font-size: var(--fs-m);
  color: var(--ink-2);
}

/* Rechenstraße: eine Folge von Stationen auf heller Fläche, verbunden durch eine Lichtlinie. Schmal
   untereinander (Linie links), ab 1100 px in einer Reihe (Linie oben durch die Kreise). */
.strasse {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-3);
  counter-reset: strasse;
}
/* Schmal: je Station ein Stück Linie von ihrem Kreis bis zum nächsten (die Karten sind verschieden hoch). */
.strasse > li:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 26.5px;
  top: 28px;
  height: calc(100% + var(--s-3));
  width: 3px;
  border-radius: 3px;
  background: var(--blue);
  box-shadow: 0 0 12px rgba(21, 82, 234, 0.4);
}
.strasse > li:nth-last-child(2)::after {
  background: linear-gradient(180deg, var(--blue), #0e9f55);
}
.strasse > li {
  position: relative;
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  column-gap: var(--s-4);
  align-items: start;
  min-width: 0;
}
.strasse-n {
  position: relative;
  z-index: 1;
  display: inline-grid;
  place-items: center;
  width: 56px;
  height: 56px;
  color: #ffffff;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 28%, var(--blue-hi), var(--blue-press) 70%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 0 0 6px var(--paper), 0 0 0 7px
    rgba(21, 82, 234, 0.18), var(--shadow-blue);
}
.strasse > li:last-child .strasse-n {
  background: radial-gradient(circle at 35% 28%, #3cc47e, var(--success-text) 75%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 0 0 6px var(--paper), 0 0 0 7px
    rgba(14, 159, 85, 0.2), 0 10px 24px -12px rgba(14, 159, 85, 0.8);
}
.strasse-karte {
  padding: var(--s-4) var(--s-5);
  border-radius: var(--r-2);
  background: var(--glass-1);
  border: 1px solid var(--glass-rim);
  box-shadow: 0 0 0 1px var(--glass-line), var(--glass-hi), var(--shadow-1);
}
.strasse-karte .strasse-nr {
  display: block;
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .06em;
  color: var(--blue-press);
}
.strasse-karte h3 {
  margin-top: var(--s-1);
  font-size: var(--fs-h3);
}
.strasse-karte p {
  margin-top: var(--s-2);
  font-size: var(--fs-s);
  line-height: 1.55;
  color: var(--ink-2);
}
.strasse-karte .tag-test {
  margin-top: var(--s-3);
}
@media (min-width: 1100px) {
  .strasse {
    grid-template-columns: repeat(var(--n, 7), minmax(0, 1fr));
    gap: var(--s-3);
  }
  .strasse > li:not(:last-child)::after {
    display: none;
  }
  .strasse::before {
    content: "";
    position: absolute;
    border-radius: 3px;
    box-shadow: 0 0 14px rgba(21, 82, 234, 0.45);
    left: 28px;
    /* bis zur Mitte des letzten Kreises: eine Spaltenbreite weniger 28 px */
    right: calc((100% - (var(--n, 7) - 1) * var(--s-3)) / var(--n, 7) - 28px);
    top: 26px;
    bottom: auto;
    width: auto;
    height: 3px;
    background: linear-gradient(90deg, var(--blue-hi), var(--blue), #0e9f55);
  }
  .strasse > li {
    display: flex;
    flex-direction: column;
    gap: var(--s-4);
  }
  .strasse-karte {
    flex: 1 1 auto;
    padding: var(--s-4) var(--s-3) var(--s-4) var(--s-4);
  }
  .strasse-karte h3 {
    font-size: 18px;
    -webkit-hyphens: auto;
    hyphens: auto;
  }
}

/* Einstell-Kacheln: Bedienteile auf einer tiefblauen Bühne (Jens' Vorlage: Regler, Schalter, Werte).
   Jede Kachel zeigt EIN Beispiel — gekennzeichnet; das Bedienteil ist Bild (aria-hidden), der Wert
   steht daneben als Text. */
.regler-buehne {
  padding: clamp(48px, 6vw, 96px) 0;
}
.regler-in {
  position: relative;
  z-index: 2;
  padding: 0 clamp(16px, 4vw, 56px);
}
.regler-raster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: var(--s-4);
  margin-top: var(--s-7);
}
.regler {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: var(--s-5);
  border-radius: var(--r-3);
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0.04) 65%),
    rgba(4, 12, 39, 0.3);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), inset 0 0 0 1px var(--rim-d), 0 26px 50px
    -32px rgba(2, 6, 22, 0.9);
}
.regler--breit {
  grid-column: span 2;
}
.regler-kopf {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-3);
}
.stage .regler h3 {
  font-size: var(--fs-h3);
  line-height: 1.25;
}
.regler-bsp {
  flex: none;
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 0 var(--s-2);
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--on-night);
  border-radius: var(--r-pill);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.34);
}
.regler-wert {
  margin-top: var(--s-4);
  font-family: var(--mono);
  font-size: clamp(26px, 1rem + 1.2vw, 34px);
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
  line-height: 1.1;
  color: #ffffff;
}
.stage .regler p {
  margin-top: var(--s-3);
  font-size: var(--fs-s);
  line-height: 1.55;
}
.regler-bild {
  margin-top: var(--s-4);
}
/* 24-Stunden-Band mit Fenster (z. B. Nacht 20–06): --a und --b in Stunden; über Mitternacht zwei Teile. */
.rg-band {
  position: relative;
  height: 14px;
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
}
.rg-band i {
  position: absolute;
  top: 0;
  bottom: 0;
  border-radius: 7px;
  background: linear-gradient(90deg, #6f9cff, #b5ccff);
  box-shadow: 0 0 14px rgba(120, 165, 255, 0.75);
}
.rg-skala {
  position: relative;
  height: 16px;
  margin-top: var(--s-2);
  font-family: var(--mono);
  font-size: 12px;
  color: var(--on-night-2);
}
.rg-skala span {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
}
.rg-skala span:first-child {
  transform: none;
}
.rg-skala span:last-child {
  transform: translateX(-100%);
}
/* Schalter: eine Pille mit Glaslinse. */
.rg-schalter {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
}
.rg-schalter span {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: 36px;
  padding: 0 var(--s-3) 0 6px;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--on-night-2);
  border-radius: var(--r-pill);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16);
}
.rg-schalter span::before {
  content: "";
  width: 34px;
  height: 22px;
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.14)
    radial-gradient(circle at 11px 50%, #c9d6f3 7px, transparent 7.5px);
}
.rg-schalter span.an {
  color: #ffffff;
  background: rgba(43, 104, 255, 0.22);
  box-shadow: inset 0 0 0 1px rgba(157, 188, 255, 0.5);
}
.rg-schalter span.an::before {
  background: radial-gradient(circle at 23px 50%, #ffffff 7px, transparent 7.5px),
    linear-gradient(90deg, #2a60ec, #6f9cff);
  box-shadow: 0 0 12px rgba(111, 156, 255, 0.7);
}
/* Stufen (z. B. Verpflegung 6/14/28 €): Säulen mit Höhe --h (0 … 1). */
.rg-stufen {
  display: flex;
  align-items: flex-end;
  gap: var(--s-2);
  height: 92px;
}
.rg-stufen span {
  flex: 1 1 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  height: calc(var(--h, 0.5) * 100%);
  padding-top: 6px;
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 650;
  color: #0a1d55;
  border-radius: 10px 10px 4px 4px;
  background: linear-gradient(180deg, #c7d7ff, #6f9cff);
  box-shadow: 0 0 16px rgba(111, 156, 255, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.7);
}
/* Regler: Spur mit Füllung bis --v (0 … 1) und Knopf. */
.rg-regler {
  position: relative;
  height: 28px;
}
.rg-regler::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 11px;
  height: 6px;
  border-radius: 3px;
  background: linear-gradient(
    90deg,
    #6f9cff calc(var(--v, 0.5) * 100%),
    rgba(255, 255, 255, 0.14) 0
  );
}
.rg-regler::after {
  content: "";
  position: absolute;
  top: 2px;
  left: calc(var(--v, 0.5) * 100% - 12px);
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #ffffff, #c7d7ff);
  box-shadow: 0 0 0 4px rgba(111, 156, 255, 0.28), 0 4px 10px rgba(2, 6, 22, 0.6);
}
/* Kleine Werteleiste: Felder nebeneinander (z. B. Zuschlagssätze). */
.rg-felder {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(84px, 1fr));
  gap: var(--s-2);
}
.rg-felder span {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--s-2) var(--s-3);
  font-size: 12px;
  font-weight: 550;
  color: var(--on-night-2);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.07);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
}
.rg-felder b {
  font-family: var(--mono);
  font-size: 18px;
  font-weight: 650;
  color: #ffffff;
}
@media (max-width: 760px) {
  .regler--breit {
    grid-column: auto;
  }
}
.lk-fragen {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-5);
  margin-top: var(--s-6);
}
.lk-fragen a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  font-weight: 600;
  color: var(--blue-press);
  text-underline-offset: 3px;
}

/* Sprunglinks in Überschriften (Rechenstraße, Einstell-Kacheln): die ganze Überschrift ist das Ziel. */
.lk-sprung {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: rgba(21, 82, 234, 0.35);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 4px;
}
.lk-sprung:hover {
  color: var(--blue-press);
  text-decoration-color: currentColor;
}
.stage .lk-sprung {
  text-decoration-color: rgba(157, 188, 255, 0.5);
}
.stage .lk-sprung:hover {
  color: var(--slot-light);
}
/* Revision 4: Die Überschrift allein war nur 24 px hoch (Ziel ≥ 44 px). Die Klickfläche reicht deshalb
   über die ganze Karte der Rechenstraße bzw. über den Kopf der Einstell-Kachel — darin steht nichts
   anderes, das man bedienen kann. */
.strasse-karte,
.regler-kopf {
  position: relative;
}
.strasse-karte .lk-sprung::after,
.regler-kopf .lk-sprung::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}
.regler-kopf .lk-sprung::after {
  inset: -10px -6px;
}
@media (hover: hover) {
  .strasse-karte:has(.lk-sprung:hover) {
    box-shadow: 0 0 0 1px rgba(21, 82, 234, 0.25), var(--glass-hi), var(--shadow-2);
  }
}
/* Einzelheiten: je Bereich ein Abschnitt, als Glas auf heller Fläche. */
.lk-teile {
  display: grid;
  gap: var(--s-5);
  max-width: var(--wrap);
  margin: 0 auto;
  padding: var(--s-8) var(--gutter) 0;
}
.lk-teil {
  position: relative;
  min-width: 0;
  padding: clamp(24px, 3vw, 44px);
  border-radius: var(--r-4);
  background: var(--glass-1);
  border: 1px solid var(--glass-rim);
  box-shadow: 0 0 0 1px var(--glass-line), var(--glass-hi), var(--shadow-1);
  scroll-margin-top: calc(var(--bar) + var(--s-4));
}
.lk-teil-kopf h2 {
  font-size: clamp(24px, 1rem + 1.3vw, 36px);
  letter-spacing: -.025em;
}
.lk-teil-kopf h2 .tag-test {
  margin-left: var(--s-2);
}
.lk-teil-kopf p {
  margin-top: var(--s-2);
  max-width: 56ch;
  font-size: var(--fs-l);
  color: var(--ink-2);
}
.lk-teil > .lk-liste,
.lk-teil > .lk-paar,
.lk-teil > .lk-modelle {
  margin-top: var(--s-5);
}
.lk-paar {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-4);
}
.lk-paar > div {
  min-width: 0;
  padding: var(--s-5);
  border-radius: var(--r-2);
  background: var(--glass-3);
  box-shadow: 0 0 0 1px var(--glass-line);
}
.lk-paar > div:last-child {
  background: var(--blue-soft);
  box-shadow: inset 0 0 0 1px rgba(21, 82, 234, 0.18);
}
.lk-paar h3,
.lk-modell h3 {
  margin-bottom: var(--s-3);
  font-size: var(--fs-h3);
}
.lk-liste {
  display: grid;
  gap: var(--s-2);
}
.lk-liste li {
  position: relative;
  padding-left: 26px;
  line-height: 1.5;
  color: var(--ink-2);
}
.lk-liste li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: .42em;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--blue) 3px, transparent 3.5px), var(--blue-soft);
  box-shadow: inset 0 0 0 1px rgba(21, 82, 234, 0.3);
}
/* „Du stellst ein": ein kleiner Regler statt des Punkts — Farbe ist nicht allein, die Spalte trägt die Überschrift. */
.lk-liste--ein li::before {
  width: 18px;
  height: 10px;
  top: .55em;
  left: 0;
  border-radius: 5px;
  background: radial-gradient(circle at 13px 50%, #ffffff 3px, transparent 3.5px), var(--blue);
  box-shadow: none;
}
/* „nicht": ein Strich im Ring statt des Punkts. */
.lk-liste--nein li::before {
  background: linear-gradient(var(--muted), var(--muted)) center / 8px 2px no-repeat, var(--paper);
  box-shadow: inset 0 0 0 1px var(--edge);
}
.lk-liste b {
  color: var(--ink);
}
.lk-fein,
.lk-ein {
  margin-top: var(--s-4);
  max-width: var(--measure);
  font-size: var(--fs-s);
  color: var(--ink-2);
}
.lk-ein b {
  color: var(--ink);
}
.lk-modelle {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  gap: var(--s-4);
}
.lk-modell {
  min-width: 0;
  padding: var(--s-5);
  border-radius: var(--r-2);
  background: var(--glass-3);
  box-shadow: 0 0 0 1px var(--glass-line);
}
.lk-modell:first-child {
  box-shadow: inset 0 3px 0 var(--blue), 0 0 0 1px var(--glass-line);
}
.lk-zusatz {
  font-size: var(--fs-s);
  font-weight: 500;
  color: var(--ink-2);
}
@media (max-width: 600px) {
  .lk-grenze {
    gap: var(--s-3);
    padding: var(--s-4);
  }
  .regler-in {
    padding: 0 var(--s-3);
  }
}
.lk-zwei {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-5);
}
.lk-hinweis {
  flex-wrap: wrap;
  margin-top: var(--s-5);
}
.lk-teil--grenzen {
  background: transparent;
  border: 1.5px dashed var(--edge);
  box-shadow: none;
}
@media (min-width: 900px) {
  .lk-teil--paar {
    display: grid;
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    gap: var(--s-4) var(--s-7);
    align-items: start;
  }
  .lk-teil--paar > .lk-paar,
  .lk-teil--paar > .lk-modelle {
    margin-top: 0;
  }
  .lk-teil--paar > .lk-fein,
  .lk-teil--paar > .lk-ein {
    grid-column: 2;
    margin-top: 0;
  }
  .lk-paar {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
  .lk-zwei {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
  .lk-teil--grenzen .lk-liste {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: var(--s-7);
  }
}
@media (prefers-reduced-motion: reduce) {
  .vt,
  .gw,
  .vt-link svg {
    transform: none !important;
  }
}
@media print {
  .vt,
  .regler {
    background: var(--night-1b);
  }
}

/* ════════════════════════════════════════════════════════════════════════════════════════
   R5 (craftslot-107641, 17.10.2026): Funde der Responsive-Prüfung — je Regel der Fund in einem Satz.
   Steht am Ende, damit sie gleich gewichtete Regeln weiter oben ablöst.
   ════════════════════════════════════════════════════════════════════════════════════════ */

/* Laptop-Bereich: die Abschnitte atmen weniger (gemessen 1280 × 800: Leerbänder bis 224 px). */
@media (min-width: 901px) and (max-width: 1440px) {
  :root {
    --s-9: 96px;
  }
}

/* /funktionen 600–900 px: sechs Reiter passten nicht (812 > 705 px, „Deine Daten" nur am Rand).
   Ohne Symbole passen sie in eine Zeile; reicht der Platz trotzdem nicht, brechen sie um — mittig,
   ohne Auslauf-Maske, denn dann gibt es nichts mehr zu wischen. */
@media (min-width: 600px) and (max-width: 900px) {
  .js-tabs .jump {
    flex-wrap: wrap;
    justify-content: center;
    width: auto;
    overflow: visible;
    border-radius: var(--r-3);
    -webkit-mask-image: none;
    mask-image: none;
  }
  .js-tabs .tab svg {
    display: none;
  }
}

/* Startseite, Designpartner-Band: Spalten oben bündig; bis 1300 px zwei Spalten unter der
   Überschrift, damit der Preis-Satz nicht in der schmalen Mittelspalte umbricht. */
.dp-band--kompakt .dp-in {
  align-items: start;
}
@media (min-width: 861px) and (max-width: 1300px) {
  .dp-band--kompakt .dp-in {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
  .dp-band--kompakt .dp-in > :first-child {
    grid-column: 1 / -1;
  }
}

/* /preise: die Preis-Karte wird vom Rechner hochgezogen — die linke Spalte steht mittig daneben
   statt oben mit leerem Band darunter (gemessen 1024 px: 315 px Inhalt bei 674 px Höhe). */
@media (min-width: 901px) {
  .pricebox:has(.calc) > :first-child {
    align-self: center;
  }
}

/* /lohnkern, drei Lohnmodelle: nie 2 + 1 — eine, zwei mit der dritten über die Breite, oder drei. */
.lk-modelle {
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 560px) {
  .lk-modelle {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .lk-modelle > :nth-child(3):last-child {
    grid-column: 1 / -1;
  }
}
@media (min-width: 1180px) {
  .lk-modelle {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .lk-modelle > :nth-child(3):last-child {
    grid-column: auto;
  }
}

/* /lohnkern, Werteleiste am Telefon: vier Felder als 2 + 2 statt 3 + 1 („Mehrarbeit" stand allein). */
@media (max-width: 600px) {
  .rg-felder {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Startseite: vor und nach der tiefblauen Vorteils-Bühne bringt die Bühne ihren eigenen Innenabstand
   mit — außen genügt ein kleinerer (gemessen 1280 px: 181 bzw. 205 px Leerband). */
.sec:has(+ .vt-sec) {
  padding-bottom: var(--s-7);
}
.vt-sec + .sec {
  padding-top: var(--s-7);
}

/* craftslot-107641 (R5, Nachgang; R6): Funktionskacheln in festen Spalten statt `auto-fill` — bei
   1280 px ergab `auto-fill` vier Spalten, und die fünfte Kernfunktion stand allein.
   R6 (Jens 17.10.2026): Die Spaltenzahl richtet sich nach der Breite der Spalte, in der die Kacheln
   stehen (Container-Abfrage auf .group-main), nicht nach dem Fenster — bei 1024 px ist die Spalte
   neben dem Bild nur ~510 px breit, drei Kacheln wären dort 160 px schmal gewesen („Rufbereitschaft"
   lief unter das Plus). Unter 400 px eine, ab 400 px zwei, ab 620 px drei Spalten.
   Keine Kachel allein in der letzten Reihe — für jede Liste (Kern, „Weitere", ohne Skript die ganze
   Gruppe) und zugeklappt wie aufgeklappt (dieselben Kacheln, nur höher):
   · zwei Spalten: eine ungerade letzte Kachel zieht sich über die Breite;
   · drei Spalten, gebaut aus sechs Halbspalten (jede Kachel nimmt zwei): Bleibt bei 3n + 1 Kacheln
     eine allein, werden die letzten vier zu 2 + 2 (je drei Halbspalten) — sortiert sind das die
     längsten, die Breite kommt ihnen zugute. Bei 3n + 2 bleibt die letzte Reihe zu zweit, gleich breit. */
.group-main {
  container-type: inline-size;
}
.t-tx {
  overflow-wrap: break-word;
  hyphens: auto;
}
@container (width >= 400px) and (width < 620px) {
  .group .feats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .group .feats > li:last-child:nth-child(2n + 3) {
    grid-column: 1 / -1;
  }
}
@container (width >= 620px) {
  .group .feats {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  .group .feats > li {
    grid-column: span 2;
  }
  .group .feats:has(> li:last-child:nth-child(3n + 4)) > li:nth-last-child(-n + 4) {
    grid-column: span 3;
  }
}