/* Selbst gehostete Schriften — keine Anfrage an Google, kein zusätzlicher
   Verbindungsaufbau vor dem ersten Textbild. Nur latin und latin-ext.
   Erzeugt am 2026-08-23 aus der Google-Fonts-API. */

@font-face {
  font-family: "Familjen Grotesk";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/fonts/familjen-grotesk-400-700-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Familjen Grotesk";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/fonts/familjen-grotesk-400-700-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/fonts/inter-400-700-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/fonts/inter-400-700-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/jetbrains-mono-400-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/jetbrains-mono-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/jetbrains-mono-500-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/jetbrains-mono-500-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ==========================================================================
   Cirk – Website
   Design-Tokens aus design-system/MASTER.md (repair-ops).
   Farbe transportiert Workflow-Status, nie Dekoration.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */

:root {
  /* Flächen & Text – hell */
  --canvas:        #F6F6F3;
  --surface:       #FFFFFF;
  --sunk:          #EFEFEB;
  --border:        #DDDCD6;
  --border-strong: #C8C7BF;
  --ink:           #171717;
  --ink-soft:      #33322F;
  --muted:         #666662;
  --faint:         #8B8B84;

  /* Workflow-Signale (Fläche / Text-auf-Fläche / Marker) */
  --mint:          #D9EEE5;
  --mint-ink:      #2C6650;
  --lavender:      #E7E1F0;
  --lavender-ink:  #55467A;
  --coral:         #F1DDD8;
  --coral-ink:     #8A4B3C;
  --sand:          #F3E5B9;
  --sand-ink:      #756019;
  --danger:        #A33A2B;

  /* Interaktion */
  --btn-bg:        #171717;
  --btn-fg:        #F8F8F5;
  --focus:         #171717;

  /* Invertierter Block (Abschluss-CTA, Hinweiskarten) */
  --invert-bg:     #131312;
  --invert-fg:     #F6F6F3;
  --invert-muted:  #A3A29A;
  --invert-border: #2C2C27;

  /* Geometrie */
  --r-sm: 8px;
  --r:    10px;
  --r-lg: 14px;
  --r-xl: 18px;
  --pill: 999px;

  --shadow: 0 1px 2px rgb(0 0 0 / 4%);
  --shadow-lift: 0 1px 2px rgb(0 0 0 / 5%), 0 14px 40px -22px rgb(23 23 23 / 30%);

  /* Typografie */
  --font-display: "Familjen Grotesk", "Inter", "Segoe UI", system-ui, sans-serif;
  --font-ui: "Inter", "SF Pro Text", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", "Consolas", monospace;

  --t-xs:  0.75rem;    /* 12 */
  --t-sm:  0.875rem;   /* 14 */
  --t-base: 1rem;      /* 16 */
  --t-md:  1.0625rem;  /* 17 */
  --t-lg:  1.25rem;    /* 20 */
  --t-xl:  clamp(1.375rem, 2.4vw, 1.75rem);
  --t-2xl: clamp(1.75rem, 4vw, 2.5rem);
  --t-3xl: clamp(2rem, 5vw, 3.125rem);
  --t-hero: clamp(2.25rem, 7vw, 4rem);

  /* Raster */
  --wrap: 1160px;
  --wrap-narrow: 760px;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --section-y: clamp(4.5rem, 10vw, 8.5rem);
}

/* Hell ist die Vorgabe. Dunkel nur, wenn es im Fuß ausdrücklich gewählt wurde. */
:root[data-theme="dark"] {
  --canvas:        #0E0E0D;
  --surface:       #171715;
  --sunk:          #1D1D1A;
  --border:        #2C2C27;
  --border-strong: #3E3E37;
  --ink:           #F4F4F0;
  --ink-soft:      #DFDFD9;
  --muted:         #9B9B93;
  --faint:         #74746D;

  --mint:          #16302A;
  --mint-ink:      #90D5BC;
  --lavender:      #241F33;
  --lavender-ink:  #C1AFE5;
  --coral:         #33221C;
  --coral-ink:     #E9B09E;
  --sand:          #2D2712;
  --sand-ink:      #DDC57A;
  --danger:        #E4796A;

  --btn-bg:        #F4F4F0;
  --btn-fg:        #131312;
  --focus:         #F4F4F0;

  --invert-bg:     #1B1B18;
  --invert-fg:     #F6F6F3;
  --invert-muted:  #A3A29A;
  --invert-border: #33332C;

  --shadow: 0 1px 2px rgb(0 0 0 / 30%);
  --shadow-lift: 0 1px 2px rgb(0 0 0 / 35%), 0 14px 40px -22px rgb(0 0 0 / 70%);
}

/* --------------------------------------------------------------------------
   2. Basis
   -------------------------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
}

body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: var(--t-md);
  line-height: 1.6;
  font-feature-settings: "cv05" 1, "ss03" 1;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg { max-width: 100%; display: block; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.035em;
  margin: 0;
  text-wrap: balance;
  color: var(--ink);
}

p { margin: 0; }

a { color: inherit; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); text-underline-offset: 3px; }

ul, ol { margin: 0; padding: 0; }

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
  border-radius: 4px;
}

::selection { background: var(--sand); color: var(--ink); }

.tabular { font-variant-numeric: tabular-nums; }
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}

.skip {
  position: absolute; left: 1rem; top: -4rem; z-index: 200;
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--border); border-radius: var(--r);
  padding: 0.75rem 1.125rem; font-size: var(--t-sm); font-weight: 600;
  transition: top 0.18s ease;
}
.skip:focus { top: 1rem; }

/* --------------------------------------------------------------------------
   3. Layout-Bausteine
   -------------------------------------------------------------------------- */

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.wrap--narrow { max-width: var(--wrap-narrow); }

.section { padding-block: var(--section-y); }
.section--tight { padding-block: clamp(3rem, 6vw, 5rem); }
.section--sunk { background: var(--sunk); }
.section--edge { border-top: 1px solid var(--border); }

/* Abschnitts-Marke als Pille – gleiche Bauweise wie .pill in der Hero-Zeile,
   damit Kopfzeile und Abschnittsanfang dieselbe Sprache sprechen. Kein
   Versalsatz mehr: die Pille trägt die Auszeichnung, nicht die Buchstaben. */
.eyebrow {
  display: inline-flex; align-items: center; gap: 0.4375rem;
  width: fit-content; justify-self: start; align-self: start;
  padding: 0.4375rem 0.875rem 0.4375rem 0.6875rem;
  border: 1px solid var(--border); border-radius: var(--pill);
  background: var(--surface);
  box-shadow: var(--shadow);
  font-size: 0.8125rem; font-weight: 600;
  letter-spacing: -0.005em; line-height: 1.25;
  color: var(--ink-soft);
  margin: 0;
}

/* Das Symbol bleibt neutral – Farbe ist im System dem Workflow-Status
   vorbehalten und darf hier nicht dekorativ werden. */
.eyebrow svg {
  width: 15px; height: 15px; flex: none;
  color: var(--muted);
}

.eyebrow.mono { font-size: var(--t-xs); letter-spacing: 0; }

/* Auf gesenkten Flächen würde Weiß-auf-Grau zu hart abheben. */
.section--sunk .eyebrow { background: color-mix(in srgb, var(--surface) 62%, var(--sunk)); }

/* Etwas mehr Luft zur Überschrift, als der Grundabstand des Kopfes hergibt. */
.section-head > .eyebrow, .page-head > .eyebrow { margin-bottom: 0.25rem; }

.section-head { max-width: 40rem; display: flex; flex-direction: column; gap: 1rem; }
.section-head h2 { font-size: var(--t-2xl); letter-spacing: -0.045em; }
.section-head p:not(.eyebrow) { color: var(--muted); font-size: var(--t-md); max-width: 34rem; }

.lede { color: var(--muted); font-size: clamp(1.0625rem, 1.6vw, 1.1875rem); line-height: 1.55; }

/* --------------------------------------------------------------------------
   4. Buttons
   -------------------------------------------------------------------------- */

.btn {
  --btn-pad-y: 0.8125rem;
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  min-height: 44px;
  padding: var(--btn-pad-y) 1.25rem;
  border-radius: var(--r);
  border: 1px solid transparent;
  font-family: var(--font-ui);
  font-size: var(--t-sm); font-weight: 600; letter-spacing: -0.01em;
  text-decoration: none; cursor: pointer;
  white-space: nowrap;
  transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
  overflow: hidden;
}

.btn:active { transform: translateY(1px); }

.btn--primary { background: var(--btn-bg); color: var(--btn-fg); }
.btn--primary:hover { background: color-mix(in srgb, var(--btn-bg) 88%, var(--canvas)); }

/* Ein einzelner Glanz-Streifen beim Hovern – zurückhaltend, kein Glow */
.btn--primary::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 38%, color-mix(in srgb, var(--btn-fg) 22%, transparent) 50%, transparent 62%);
  transform: translateX(-120%);
  transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.3, 1);
  pointer-events: none;
}
.btn--primary:hover::after { transform: translateX(120%); }

.btn--ghost {
  background: var(--surface);
  color: var(--ink);
  border-color: var(--border);
}
.btn--ghost:hover { border-color: var(--border-strong); background: color-mix(in srgb, var(--surface) 80%, var(--sunk)); }

.btn--quiet { background: transparent; color: var(--muted); padding-inline: 0.75rem; }
.btn--quiet:hover { color: var(--ink); }

.btn--lg { min-height: 50px; padding: 0.9375rem 1.5rem; font-size: var(--t-base); }

/* Auf sehr schmalen Geräten darf die Beschriftung umbrechen – sonst schiebt
   „Im Shopify App Store installieren" den ganzen Block aus dem Bild. */
@media (max-width: 430px) {
  .btn { white-space: normal; text-align: center; line-height: 1.35; }
  .btn--lg { padding-inline: 1.125rem; }
  .btn-row .btn { width: 100%; }
}

.btn__icon { width: 1rem; height: 1rem; flex: none; }

.btn-row { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; max-width: 100%; }

/* Textlink mit wanderndem Pfeil */
.arrow-link {
  display: inline-flex; align-items: center; gap: 0.4375rem;
  padding-block: 0.25rem;
  font-size: var(--t-sm); font-weight: 600; color: var(--ink);
  text-decoration: none;
}
.arrow-link svg { width: 0.875rem; height: 0.875rem; transition: transform 0.22s cubic-bezier(0.2, 0.7, 0.3, 1); }
.arrow-link:hover svg { transform: translateX(4px); }

/* --------------------------------------------------------------------------
   5. Marke & Navigation
   -------------------------------------------------------------------------- */

.brand {
  display: inline-flex; align-items: center; gap: 0.5625rem;
  text-decoration: none; color: var(--ink);
  font-family: var(--font-display);
  font-size: 1.375rem; font-weight: 760; letter-spacing: -0.04em;
}
.brand__mark { width: 1.625rem; height: 1.625rem; flex: none; }

.nav {
  position: sticky; top: 0; z-index: 100;
  background: color-mix(in srgb, var(--canvas) 72%, transparent);
  border-bottom: 1px solid transparent;
  transition: background-color 0.25s ease, border-color 0.25s ease, backdrop-filter 0.25s ease;
}
.nav.is-stuck {
  background: color-mix(in srgb, var(--canvas) 82%, transparent);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom-color: var(--border);
}

.nav__inner {
  display: flex; align-items: center; gap: 1.5rem;
  min-height: 4.25rem;
}

.nav__links {
  display: flex; align-items: center; gap: 0.25rem;
  list-style: none; margin-inline: auto 0; margin-block: 0;
}
.nav__links a {
  display: inline-block; padding: 0.5rem 0.75rem;
  font-size: var(--t-sm); font-weight: 500; color: var(--muted);
  text-decoration: none; border-radius: var(--r-sm);
  transition: color 0.16s ease, background-color 0.16s ease;
}
.nav__links a:hover { color: var(--ink); background: color-mix(in srgb, var(--ink) 5%, transparent); }
.nav__links a[aria-current="page"] { color: var(--ink); }

.nav__actions { display: flex; align-items: center; gap: 0.5rem; margin-left: auto; }

.nav__toggle {
  display: none;
  width: 44px; height: 44px; margin-left: auto;
  align-items: center; justify-content: center;
  background: transparent; border: 1px solid var(--border);
  border-radius: var(--r-sm); color: var(--ink); cursor: pointer;
}
.nav__toggle span {
  display: block; width: 16px; height: 1.5px; background: currentColor;
  position: relative; transition: transform 0.22s ease, background-color 0.22s ease;
}
.nav__toggle span::before,
.nav__toggle span::after {
  content: ""; position: absolute; left: 0; width: 16px; height: 1.5px; background: currentColor;
  transition: transform 0.22s ease;
}
.nav__toggle span::before { top: -5px; }
.nav__toggle span::after { top: 5px; }
.nav__toggle[aria-expanded="true"] span { background: transparent; }
.nav__toggle[aria-expanded="true"] span::before { transform: translateY(5px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span::after { transform: translateY(-5px) rotate(-45deg); }

.nav__drawer { display: none; }

@media (max-width: 860px) {
  .nav__inner > .nav__links,
  .nav__inner > .nav__actions { display: none; }
  .nav__toggle { display: inline-flex; }

  .nav__drawer {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.3s cubic-bezier(0.2, 0.7, 0.3, 1);
    border-top: 1px solid transparent;
  }
  .nav__drawer > div { overflow: hidden; }
  .nav.is-open .nav__drawer { grid-template-rows: 1fr; border-top-color: var(--border); }
  .nav.is-open { background: var(--canvas); }

  .nav__drawer ul { list-style: none; padding: 0.75rem 0 0; display: grid; gap: 0.125rem; }
  .nav__drawer a {
    display: block; padding: 0.8125rem 0.25rem;
    font-size: var(--t-base); font-weight: 500; color: var(--ink); text-decoration: none;
  }
  .nav__drawer .btn-row { padding: 0.75rem 0 1.25rem; }
  .nav__drawer .btn { flex: 1; }
}

/* --------------------------------------------------------------------------
   6. Hero
   -------------------------------------------------------------------------- */

.hero { position: relative; padding-block: clamp(2rem, 3vw, 2.75rem) 0; overflow: hidden; }

/* Sehr leiser Farbschleier in den Icon-Farben. Deckkraft bewusst niedrig. */
.aurora {
  position: absolute; inset: -30% -10% auto; height: 46rem;
  pointer-events: none; z-index: 0;
  opacity: 0.55;
  filter: blur(90px);
  background:
    radial-gradient(38% 44% at 22% 42%, var(--coral) 0%, transparent 70%),
    radial-gradient(34% 40% at 52% 30%, var(--sand) 0%, transparent 70%),
    radial-gradient(40% 46% at 78% 48%, var(--lavender) 0%, transparent 70%);
  animation: drift 26s ease-in-out infinite alternate;
}
@keyframes drift {
  from { transform: translate3d(-2%, 0, 0) scale(1); }
  to   { transform: translate3d(3%, 2%, 0) scale(1.08); }
}

.hero__inner { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 1.375rem; }

.pill {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.4375rem 0.9375rem;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--pill);
  font-size: var(--t-xs); font-weight: 600; color: var(--muted);
  letter-spacing: -0.005em;
  text-decoration: none;
  transition: border-color 0.18s ease, color 0.18s ease;
}
.pill:hover { border-color: var(--border-strong); color: var(--ink); }

.hero h1 {
  font-size: var(--t-hero);
  font-weight: 700;
  letter-spacing: -0.055em;
  line-height: 0.98;
  max-width: 16ch;
}

.hero__lede { max-width: 44ch; color: var(--muted); font-size: clamp(1.0625rem, 1.9vw, 1.25rem); line-height: 1.5; }

.hero__note {
  display: flex; align-items: center; gap: 0.5rem;
  font-size: var(--t-xs); color: var(--faint);
}
.hero__note svg { width: 0.875rem; height: 0.875rem; flex: none; color: var(--mint-ink); }

/* Bühne für das Produkt-Mockup */
.hero__stage {
  position: relative; z-index: 1;
  margin-top: clamp(2rem, 4vw, 3.25rem);
  perspective: 1800px;
}
.hero__stage::after {
  /* weicher Auslauf nach unten, damit die Tabelle nicht hart abschneidet */
  content: ""; position: absolute; inset: auto 0 0; height: 9rem;
  background: linear-gradient(to bottom, transparent, var(--canvas) 88%);
  pointer-events: none; z-index: 3;
}

/* --------------------------------------------------------------------------
   7. Produkt-Mockup (nachgebautes Cirk-Dashboard)
   -------------------------------------------------------------------------- */

.mock {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-lift);
  overflow: hidden;
  font-size: var(--t-xs);
  text-align: left;
  transform-style: preserve-3d;
}

.mock__chrome {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.6875rem 0.9375rem;
  border-bottom: 1px solid var(--border);
  background: var(--sunk);
}
.mock__dots { display: flex; gap: 0.375rem; }
.mock__dots i { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--border-strong); }
.mock__url {
  flex: 1; text-align: center;
  font-family: var(--font-mono); font-size: 0.6875rem; color: var(--faint);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.mock__body { padding: clamp(0.875rem, 2vw, 1.375rem); display: grid; gap: 0.875rem; }

.mock__tabs { display: flex; gap: 0.25rem; }
.mock__tabs span {
  padding: 0.3125rem 0.6875rem; border-radius: var(--r-sm);
  font-size: 0.75rem; font-weight: 500; color: var(--muted);
}
.mock__tabs span.is-on { background: var(--surface); border: 1px solid var(--border); color: var(--ink); font-weight: 600; }

.mock__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.mock__head b { font-family: var(--font-display); font-size: 1.125rem; letter-spacing: -0.04em; font-weight: 760; }

/* Die Workflow-Schiene: eine durchgehende Fläche, getrennt durch Linien */
.mock__rail {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--border); border-radius: var(--r);
  overflow: hidden;
}
.mock__stat { padding: 0.75rem 0.875rem; border-left: 1px solid var(--border); position: relative; }
.mock__stat:first-child { border-left: 0; }
.mock__stat::before { content: ""; position: absolute; inset: 0 0 auto; height: 2px; }
.mock__stat--a::before { background: var(--border); }
.mock__stat--b::before { background: var(--sand); }
.mock__stat--c::before { background: var(--lavender); }
.mock__stat--d::before { background: var(--coral); }
.mock__stat dt { font-size: 0.6875rem; color: var(--muted); font-weight: 500; }
.mock__stat dd {
  margin: 0.1875rem 0 0;
  font-family: var(--font-display); font-size: 1.375rem; font-weight: 700;
  letter-spacing: -0.04em; font-variant-numeric: tabular-nums; line-height: 1;
}
.mock__stat small { display: block; margin-top: 0.25rem; font-size: 0.625rem; color: var(--faint); }

.mock__grid { display: grid; grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr); gap: 0.875rem; align-items: start; }

.mock__panel { border: 1px solid var(--border); border-radius: var(--r); overflow: hidden; }
.mock__panel-head { padding: 0.75rem 0.875rem 0.625rem; display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; }
.mock__panel-head b { font-size: 0.8125rem; font-weight: 650; letter-spacing: -0.015em; }
.mock__panel-head span { font-size: 0.625rem; color: var(--faint); }

.mock__filters { display: flex; gap: 0.3125rem; padding: 0 0.875rem 0.75rem; flex-wrap: wrap; }
.mock__filters i {
  font-style: normal; padding: 0.25rem 0.5625rem; border-radius: var(--pill);
  border: 1px solid var(--border); font-size: 0.625rem; color: var(--muted);
}
.mock__filters i.is-on { background: var(--ink); border-color: var(--ink); color: var(--canvas); font-weight: 600; }

.mock__table { width: 100%; border-collapse: collapse; }
.mock__table th {
  text-align: left; padding: 0.4375rem 0.875rem;
  border-block: 1px solid var(--border);
  font-size: 0.5625rem; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--faint);
}
.mock__table td { padding: 0.5625rem 0.875rem; border-bottom: 1px solid var(--border); vertical-align: middle; font-size: 0.6875rem; }
.mock__table tr:last-child td { border-bottom: 0; }
.mock__case { font-family: var(--font-mono); font-size: 0.6875rem; font-weight: 500; }
.mock__prod { color: var(--ink-soft); }
.mock__cust { color: var(--muted); }
.mock__when { color: var(--faint); font-variant-numeric: tabular-nums; }

.tag {
  display: inline-flex; align-items: center; gap: 0.3125rem;
  padding: 0.1875rem 0.5rem; border-radius: var(--pill);
  font-size: 0.625rem; font-weight: 600; white-space: nowrap;
  background: var(--sunk); color: var(--muted);
}
.tag::before { content: ""; width: 0.375rem; height: 0.375rem; border-radius: 50%; background: currentColor; flex: none; }
.tag--new     { background: var(--sunk);     color: var(--muted); }
.tag--check   { background: var(--sand);     color: var(--sand-ink); }
.tag--ask     { background: var(--coral);    color: var(--coral-ink); }
.tag--repair  { background: var(--lavender); color: var(--lavender-ink); }
.tag--done    { background: var(--mint);     color: var(--mint-ink); }
.tag--flat::before { display: none; }

.mock__prio { display: flex; flex-direction: column; gap: 0.1875rem; }
.mock__prio b { font-size: 0.6875rem; font-weight: 600; }
.mock__prio small { font-size: 0.5625rem; color: var(--faint); }
.mock__prio small.is-late { color: var(--danger); font-weight: 600; }

.mock__side { display: grid; gap: 0.875rem; }

.mock__setup { border: 1px solid var(--border); border-radius: var(--r); padding: 0.875rem; }
.mock__setup-top { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; }
.mock__setup-top b { font-size: 0.8125rem; font-weight: 650; letter-spacing: -0.015em; }
.mock__setup-top span { font-size: 0.625rem; color: var(--faint); }
.mock__meter { height: 3px; border-radius: var(--pill); background: var(--sunk); margin: 0.625rem 0 0.75rem; overflow: hidden; }
.mock__meter i { display: block; height: 100%; width: 75%; background: var(--ink); border-radius: inherit; }
.mock__setup ul { list-style: none; display: grid; gap: 0.4375rem; font-size: 0.6875rem; }
.mock__setup li { display: flex; align-items: center; gap: 0.4375rem; color: var(--muted); }
.mock__setup li svg { width: 0.75rem; height: 0.75rem; flex: none; color: var(--border-strong); }
.mock__setup li.is-done { color: var(--ink); }
.mock__setup li.is-done svg { color: var(--mint-ink); }

.mock__hint {
  border-radius: var(--r); padding: 0.875rem;
  background: var(--invert-bg); color: var(--invert-fg);
  border: 1px solid var(--invert-border);
}
.mock__hint b { display: block; font-size: 0.8125rem; font-weight: 650; letter-spacing: -0.015em; }
.mock__hint p { margin-top: 0.375rem; font-size: 0.6875rem; color: var(--invert-muted); line-height: 1.45; }
.mock__hint span { display: inline-block; margin-top: 0.625rem; font-size: 0.6875rem; font-weight: 600; }

@media (max-width: 780px) {
  .mock__grid { grid-template-columns: 1fr; }
  .mock__side { display: none; }
  .mock__rail { grid-template-columns: repeat(2, 1fr); }
  .mock__stat:nth-child(3) { border-left: 0; }
  .mock__stat:nth-child(n+3) { border-top: 1px solid var(--border); }
  .mock__col-opt { display: none; }
}

/* --------------------------------------------------------------------------
   8. Vertrauens-Leiste
   -------------------------------------------------------------------------- */

.facts {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--border); border-radius: var(--r-lg);
  background: var(--surface);
  overflow: hidden;
}
.facts > div { padding: 1.25rem 1.375rem; border-left: 1px solid var(--border); }
.facts > div:first-child { border-left: 0; }
.facts dt { font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.facts dd { margin: 0.3125rem 0 0; font-size: var(--t-sm); color: var(--muted); line-height: 1.4; }

@media (max-width: 780px) {
  .facts { grid-template-columns: repeat(2, 1fr); }
  .facts > div:nth-child(3) { border-left: 0; }
  .facts > div:nth-child(n+3) { border-top: 1px solid var(--border); }
}
@media (max-width: 430px) {
  .facts { grid-template-columns: 1fr; }
  .facts > div { border-left: 0; }
  .facts > div + div { border-top: 1px solid var(--border); }
}

/* --------------------------------------------------------------------------
   9. Workflow-Schiene (Wie es funktioniert)
   -------------------------------------------------------------------------- */

.rail {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  display: grid; grid-template-columns: repeat(3, 1fr);
  border: 1px solid var(--border); border-radius: var(--r-lg);
  background: var(--surface);
  overflow: hidden;
}

.station { position: relative; padding: clamp(1.5rem, 3vw, 2rem); border-left: 1px solid var(--border); display: grid; gap: 0.875rem; align-content: start; }
.station:first-child { border-left: 0; }
.station::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; }
.station--1::before { background: var(--sand); }
.station--2::before { background: var(--lavender); }
.station--3::before { background: var(--mint); }

.station__no {
  font-family: var(--font-mono); font-size: var(--t-xs); font-weight: 500;
  color: var(--faint); letter-spacing: 0.06em;
}
.station h3 { font-size: var(--t-lg); letter-spacing: -0.03em; }
.station p { font-size: var(--t-sm); color: var(--muted); line-height: 1.55; }
.station ul { list-style: none; display: grid; gap: 0.4375rem; margin-top: 0.125rem; }
.station li { display: flex; gap: 0.5rem; font-size: var(--t-sm); color: var(--ink-soft); }
.station li svg { width: 0.875rem; height: 0.875rem; flex: none; margin-top: 0.3125rem; color: var(--faint); }

@media (max-width: 860px) {
  .rail { grid-template-columns: 1fr; }
  .station { border-left: 0; }
  .station + .station { border-top: 1px solid var(--border); }
}

/* --------------------------------------------------------------------------
   10. Funktionsraster
   -------------------------------------------------------------------------- */

.bento {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 1px;
  background: var(--border);
  border: 1px solid var(--border); border-radius: var(--r-lg);
  overflow: hidden;
}

.cell {
  position: relative;
  grid-column: span 2;
  background: var(--surface);
  padding: clamp(1.375rem, 2.6vw, 1.875rem);
  display: grid; gap: 0.625rem; align-content: start;
  isolation: isolate;
}
.cell--wide { grid-column: span 3; }

/* Das Zeigerlicht liegt jetzt im gemeinsamen System (Abschnitt 20). Beim
   Hovern hebt sich nur noch die Fläche selbst: ein Versatz würde die
   leuchtenden Trennlinien gegen die Nachbarzellen verschieben. */
.cell { transition: background-color 0.35s ease; }
.cell:hover { background-color: color-mix(in srgb, var(--surface) 93%, var(--ink)); }

.cell__icon {
  width: 2rem; height: 2rem; border-radius: var(--r-sm);
  display: grid; place-items: center;
  border: 1px solid var(--border);
  color: var(--ink);
}
.cell__icon svg { width: 1rem; height: 1rem; }
.cell__icon--mint { background: var(--mint); color: var(--mint-ink); border-color: transparent; }
.cell__icon--lav { background: var(--lavender); color: var(--lavender-ink); border-color: transparent; }
.cell__icon--sand { background: var(--sand); color: var(--sand-ink); border-color: transparent; }
.cell__icon--coral { background: var(--coral); color: var(--coral-ink); border-color: transparent; }

.cell h3 { font-size: var(--t-base); font-weight: 700; letter-spacing: -0.025em; margin-top: 0.375rem; }
.cell p { font-size: var(--t-sm); color: var(--muted); line-height: 1.55; }

.cell__chips { display: flex; flex-wrap: wrap; gap: 0.375rem; margin-top: 0.25rem; }

@media (max-width: 900px) { .cell, .cell--wide { grid-column: span 3; } }
@media (max-width: 620px) { .cell, .cell--wide { grid-column: span 6; } }

/* --------------------------------------------------------------------------
   11. Showcase mit Reitern
   -------------------------------------------------------------------------- */

.showcase { margin-top: clamp(2rem, 4vw, 3rem); }

.showcase__tabs {
  display: flex; gap: 0.25rem; flex-wrap: wrap;
  border: 1px solid var(--border); border-radius: var(--pill);
  padding: 0.3125rem; background: var(--surface);
  width: fit-content; max-width: 100%;
}
.showcase__tab {
  appearance: none; border: 0; cursor: pointer;
  padding: 0.5625rem 1rem; border-radius: var(--pill);
  background: transparent; color: var(--muted);
  font-family: var(--font-ui); font-size: var(--t-sm); font-weight: 600; letter-spacing: -0.01em;
  transition: background-color 0.2s ease, color 0.2s ease;
  min-height: 40px;
}
.showcase__tab:hover { color: var(--ink); }
.showcase__tab[aria-selected="true"] { background: var(--ink); color: var(--canvas); }

/* Auf schmalen Schirmen passen die drei Reiter nicht nebeneinander. Ein
   Umbruch macht aus der Pille einen zweizeiligen Klumpen, stattdessen
   bleibt eine Zeile und die Leiste laesst sich waagerecht schieben. Der
   angeschnittene letzte Reiter zeigt, dass es dort weitergeht; site.js
   schiebt den gewaehlten Reiter ins Bild. */
@media (max-width: 640px) {
  .showcase__tabs {
    gap: 0.1875rem;
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .showcase__tabs::-webkit-scrollbar { display: none; }
  .showcase__tab {
    flex: 0 0 auto;
    white-space: nowrap;
    padding-inline: clamp(0.5625rem, 2.6vw, 0.875rem);
    font-size: clamp(0.75rem, 3.3vw, 0.8125rem);
  }
}

.showcase__stack { margin-top: 1.5rem; display: grid; }
.showcase__panel {
  grid-area: 1 / 1;
  display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center;
  opacity: 0; visibility: hidden;
  transform: translateY(14px);
  transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.2, 0.7, 0.3, 1), visibility 0.4s;
}
.showcase__panel[data-active] { opacity: 1; visibility: visible; transform: none; }

.showcase__text { display: grid; gap: 0.875rem; align-content: start; }
.showcase__text h3 { font-size: var(--t-xl); letter-spacing: -0.04em; }
.showcase__text p { color: var(--muted); font-size: var(--t-base); line-height: 1.55; }
.showcase__text ul { list-style: none; display: grid; gap: 0.5625rem; margin-top: 0.25rem; }
.showcase__text li { display: flex; gap: 0.625rem; font-size: var(--t-sm); color: var(--ink-soft); line-height: 1.5; }
.showcase__text li svg { width: 1rem; height: 1rem; flex: none; margin-top: 0.25rem; color: var(--mint-ink); }

.showcase__art {
  border: 1px solid var(--border); border-radius: var(--r-lg);
  background: var(--surface); box-shadow: var(--shadow);
  overflow: hidden; padding: clamp(0.875rem, 2vw, 1.25rem);
  font-size: var(--t-xs);
}

@media (max-width: 900px) {
  .showcase__panel { grid-template-columns: 1fr; }
}

/* Bausteine der Showcase-Grafiken --------------------------------------- */

.chat { display: grid; gap: 0.625rem; }
.bubble { max-width: 82%; padding: 0.6875rem 0.8125rem; border-radius: var(--r); font-size: 0.75rem; line-height: 1.5; }
.bubble b { display: block; font-size: 0.6875rem; font-weight: 650; margin-bottom: 0.1875rem; }
.bubble time { display: block; margin-top: 0.375rem; font-size: 0.625rem; opacity: 0.7; }
.bubble--in { background: var(--lavender); color: var(--lavender-ink); justify-self: start; }
.bubble--out { background: var(--mint); color: var(--mint-ink); justify-self: end; }

.decision { display: flex; flex-wrap: wrap; gap: 0.4375rem; }
.decision button, .decision span {
  appearance: none; font-family: var(--font-ui);
  padding: 0.5rem 0.75rem; border-radius: var(--r-sm);
  border: 1px solid var(--border); background: var(--surface); color: var(--ink);
  font-size: 0.6875rem; font-weight: 600;
}
.decision .is-on { background: var(--ink); border-color: var(--ink); color: var(--canvas); }
.decision .is-no { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 40%, var(--border)); }

.bars { display: grid; gap: 0.875rem; }
.bar__row { display: grid; gap: 0.3125rem; }
.bar__top { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; font-size: 0.75rem; }
.bar__top b { font-weight: 500; color: var(--ink-soft); }
.bar__top span { font-weight: 700; font-variant-numeric: tabular-nums; font-family: var(--font-display); }
.bar__track { height: 5px; border-radius: var(--pill); background: var(--sunk); overflow: hidden; }
.bar__fill { display: block; height: 100%; border-radius: inherit; width: 0; transition: width 1.1s cubic-bezier(0.2, 0.7, 0.3, 1); }
.bar__fill--mint { background: color-mix(in srgb, var(--mint-ink) 55%, var(--mint)); }
.bar__fill--lav { background: color-mix(in srgb, var(--lavender-ink) 55%, var(--lavender)); }
.bar__fill--sand { background: color-mix(in srgb, var(--sand-ink) 55%, var(--sand)); }
.bar__fill--coral { background: color-mix(in srgb, var(--coral-ink) 55%, var(--coral)); }
.bar__row small { font-size: 0.625rem; color: var(--faint); }

.form-mock { display: grid; gap: 0.6875rem; }
.form-mock label { display: grid; gap: 0.3125rem; font-size: 0.6875rem; color: var(--muted); font-weight: 500; }
.form-mock .field {
  border: 1px solid var(--border); border-radius: var(--r-sm);
  padding: 0.5625rem 0.6875rem; font-size: 0.75rem; color: var(--ink); background: var(--surface);
}
.form-mock .field--empty { color: var(--faint); }
.form-mock .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6875rem; }
.form-mock .drop {
  border: 1px dashed var(--border-strong); border-radius: var(--r-sm);
  padding: 1rem; text-align: center; font-size: 0.6875rem; color: var(--faint);
}

/* --------------------------------------------------------------------------
   12. Vorher / Nachher
   -------------------------------------------------------------------------- */

.compare {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  display: grid; grid-template-columns: 1fr 1fr;
  border: 1px solid var(--border); border-radius: var(--r-lg);
  overflow: hidden; background: var(--surface);
}
.compare__col { padding: clamp(1.5rem, 3vw, 2.125rem); border-left: 1px solid var(--border); }
.compare__col:first-child { border-left: 0; background: var(--sunk); }
.compare__col h3 { font-size: var(--t-base); font-weight: 700; letter-spacing: -0.025em; }
.compare__col > p { margin-top: 0.375rem; font-size: var(--t-sm); color: var(--muted); }
.compare ul { list-style: none; display: grid; gap: 0.75rem; margin-top: 1.25rem; }
.compare li { display: flex; gap: 0.625rem; font-size: var(--t-sm); line-height: 1.5; color: var(--ink-soft); }
.compare li svg { width: 1rem; height: 1rem; flex: none; margin-top: 0.25rem; }
.compare__col:first-child li { color: var(--muted); }
.compare__col:first-child li svg { color: var(--faint); }
.compare__col:last-child li svg { color: var(--mint-ink); }

@media (max-width: 780px) {
  .compare { grid-template-columns: 1fr; }
  .compare__col { border-left: 0; }
  .compare__col + .compare__col { border-top: 1px solid var(--border); }
}

/* --------------------------------------------------------------------------
   13. Rechtlicher Anlass
   -------------------------------------------------------------------------- */

.legal-note {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.75rem, 5vw, 4rem); align-items: start;
}
.legal-note__list { list-style: none; display: grid; gap: 0; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); overflow: hidden; }
.legal-note__list li {
  padding: 0.8125rem 1.125rem; font-size: var(--t-sm); color: var(--ink-soft);
  border-top: 1px solid var(--border);
  display: flex; align-items: center; gap: 0.625rem;
}
.legal-note__list li:first-child { border-top: 0; }
.legal-note__list li::before {
  content: ""; width: 0.375rem; height: 0.375rem; border-radius: 50%;
  background: var(--sand); flex: none;
}
/* Rechtlicher Vorbehalt – gesetzt wie eine Fußnote im Druck: kurzer Strich,
   kleinerer Grad, zurückgenommene Farbe. Kein Kasten: der Text ist eine
   Randbemerkung zum Abschnitt, keine eigene Karte daneben. */
.disclaimer {
  margin-top: 1.75rem; max-width: 46ch;
  font-size: var(--t-sm); color: var(--faint); line-height: 1.6;
}
.disclaimer::before {
  content: ""; display: block;
  width: 2.5rem; height: 1px; background: var(--border-strong);
  margin-bottom: 0.875rem;
}

@media (max-width: 860px) { .legal-note { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   14. Tarife
   -------------------------------------------------------------------------- */

.plans {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: clamp(0.75rem, 1.4vw, 1.125rem);
  align-items: stretch;
}

/* Eigenständige Karte statt Rasterfeld: eigener Rand, eigener Verlauf.
   Der Verlauf läuft von der Fläche in die vertiefte Fläche – im hellen wie
   im dunklen Modus dieselbe Richtung, weil beide Tokens mitwechseln. */
.plan {
  position: relative;
  display: flex; flex-direction: column;
  padding: clamp(1.375rem, 2.4vw, 1.75rem);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background-color: var(--surface);
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.plan[data-glow] {
  background-image:
    var(--glow-wash-img, none),
    linear-gradient(155deg,
      color-mix(in srgb, var(--surface) 55%, transparent) 0%,
      color-mix(in srgb, var(--sunk) 80%, transparent) 100%);
}
.plan:hover { border-color: var(--border-strong); }

.plan--featured { border-color: var(--border-strong); box-shadow: var(--shadow-lift); }

/* Kopf: Tarifname, Preis, Einordnung – mittig, mit Trennlinie zur Liste */
.plan__head {
  display: grid; justify-items: center; gap: 0.625rem;
  text-align: center;
  padding-bottom: clamp(1.125rem, 2vw, 1.5rem);
  border-bottom: 1px solid var(--border);
}
.plan__name { display: flex; align-items: center; gap: 0.5rem; min-height: 1.375rem; }
.plan__name h3 { font-size: var(--t-sm); font-weight: 600; letter-spacing: 0.01em; color: var(--ink); }
.plan__badge {
  padding: 0.1875rem 0.5rem; border-radius: var(--pill);
  background: var(--mint); color: var(--mint-ink);
  font-size: 0.625rem; font-weight: 700; letter-spacing: 0.02em;
}
.plan__price { display: flex; align-items: baseline; gap: 0.25rem; }
.plan__price b {
  font-family: var(--font-display); font-size: clamp(2.25rem, 3.2vw, 2.625rem);
  font-weight: 600; letter-spacing: -0.05em; font-variant-numeric: tabular-nums; line-height: 1;
}
.plan__price span { font-size: var(--t-sm); color: var(--muted); }

.plan__cap { font-size: var(--t-sm); color: var(--muted); line-height: 1.5; }
@supports (background-clip: text) or (-webkit-background-clip: text) {
  .plan__cap {
    background-image: linear-gradient(155deg, var(--ink-soft), var(--muted));
    -webkit-background-clip: text; background-clip: text; color: transparent;
  }
}

/* Leistungsliste: enthalten und nicht enthalten stehen beide da, damit die
   Tarife ohne Sprung in die Vergleichstabelle lesbar sind. */
.plan__feats { list-style: none; display: grid; gap: 0.75rem; padding: clamp(1.125rem, 2vw, 1.5rem) 0; }
.plan__feats li { display: flex; align-items: center; gap: 0.625rem; font-size: var(--t-sm); color: var(--ink-soft); line-height: 1.4; }
.plan__feats li.is-off { color: var(--faint); }

.plan__mark {
  flex: none; width: 1.125rem; height: 1.125rem;
  border-radius: var(--pill);
  display: grid; place-items: center;
  background: var(--mint); color: var(--mint-ink);
}
.plan__mark svg { width: 0.6875rem; height: 0.6875rem; }
.plan__feats li.is-off .plan__mark { background: color-mix(in srgb, var(--border) 65%, transparent); color: var(--faint); }

.plan .btn { margin-top: auto; width: 100%; }

@media (max-width: 1040px) { .plans { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px)  { .plans { grid-template-columns: 1fr; } }

/* Vergleichstabelle auf der Preisseite */
.matrix-wrap { overflow-x: auto; margin-top: clamp(2.5rem, 5vw, 3.5rem); border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); }
.matrix { width: 100%; min-width: 40rem; border-collapse: collapse; }
.matrix th, .matrix td { padding: 0.875rem 1.125rem; text-align: left; font-size: var(--t-sm); border-bottom: 1px solid var(--border); }
.matrix thead th { font-size: var(--t-xs); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--faint); background: var(--sunk); }
.matrix tbody th { font-weight: 500; color: var(--ink-soft); }
.matrix td { text-align: center; color: var(--muted); font-variant-numeric: tabular-nums; }
.matrix tr:last-child th, .matrix tr:last-child td { border-bottom: 0; }
.matrix svg { width: 1rem; height: 1rem; margin-inline: auto; color: var(--mint-ink); }
.matrix .no { color: var(--faint); }

/* --------------------------------------------------------------------------
   15. FAQ
   -------------------------------------------------------------------------- */

.faq { margin-top: clamp(2rem, 4vw, 3rem); border-top: 1px solid var(--border); }
.faq__item { border-bottom: 1px solid var(--border); }
.faq__q {
  appearance: none; width: 100%; background: transparent; border: 0; cursor: pointer;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 1.5rem;
  padding: 1.375rem 0.25rem;
  font-family: var(--font-ui); font-size: var(--t-base); font-weight: 600; letter-spacing: -0.02em;
  color: var(--ink); text-align: left; line-height: 1.4;
  min-height: 44px;
}
.faq__q:hover { color: var(--muted); }
.faq__sign { position: relative; width: 1rem; height: 1rem; flex: none; margin-top: 0.25rem; }
.faq__sign::before, .faq__sign::after {
  content: ""; position: absolute; inset: 50% 0 auto; height: 1.5px; background: currentColor; border-radius: 2px;
  transition: transform 0.28s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.faq__sign::after { transform: rotate(90deg); }
.faq__q[aria-expanded="true"] .faq__sign::after { transform: rotate(0deg); }

.faq__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.32s cubic-bezier(0.2, 0.7, 0.3, 1); }
.faq__a > div { overflow: hidden; }
.faq__item.is-open .faq__a { grid-template-rows: 1fr; }
.faq__a p { padding-right: 3rem; padding-left: 0.25rem; font-size: var(--t-sm); color: var(--muted); line-height: 1.65; max-width: 62ch; }
.faq__a > div > p + p { margin-top: 0.75rem; }
.faq__a > div > :last-child { padding-bottom: 1.5rem; }

/* --------------------------------------------------------------------------
   16. Abschluss-CTA
   -------------------------------------------------------------------------- */

.cta {
  position: relative; overflow: hidden;
  border-radius: var(--r-lg);
  background: var(--invert-bg); color: var(--invert-fg);
  border: 1px solid var(--invert-border);
  padding: clamp(2.5rem, 6vw, 4.5rem) clamp(1.5rem, 5vw, 4rem);
  text-align: center;
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.125rem; justify-items: center;
}
.cta::before {
  content: ""; position: absolute; inset: auto -10% -60% ; height: 24rem;
  background:
    radial-gradient(30% 60% at 25% 50%, color-mix(in srgb, var(--coral) 55%, transparent), transparent 70%),
    radial-gradient(30% 60% at 55% 40%, color-mix(in srgb, var(--sand) 45%, transparent), transparent 70%),
    radial-gradient(30% 60% at 80% 55%, color-mix(in srgb, var(--lavender) 55%, transparent), transparent 70%);
  filter: blur(70px); opacity: 0.5; pointer-events: none;
}
.cta > * { position: relative; }
.cta h2 { font-size: var(--t-2xl); letter-spacing: -0.05em; color: var(--invert-fg); max-width: 18ch; }
.cta p { color: var(--invert-muted); max-width: 46ch; font-size: var(--t-base); }
.cta .btn--ghost {
  background: transparent; color: var(--invert-fg);
  border-color: color-mix(in srgb, var(--invert-fg) 24%, transparent);
}
.cta .btn--ghost:hover { border-color: color-mix(in srgb, var(--invert-fg) 45%, transparent); background: color-mix(in srgb, var(--invert-fg) 7%, transparent); }
.cta .btn--primary { background: var(--invert-fg); color: var(--invert-bg); }
.cta .btn--primary:hover { background: color-mix(in srgb, var(--invert-fg) 88%, var(--invert-bg)); }
.cta small { color: var(--invert-muted); font-size: var(--t-xs); }

/* --------------------------------------------------------------------------
   17. Footer
   -------------------------------------------------------------------------- */

.foot { border-top: 1px solid var(--border); padding-block: clamp(3rem, 6vw, 4.5rem) 2rem; }
.foot__grid {
  display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(4, minmax(0, 1fr));
  gap: clamp(1.75rem, 4vw, 3rem);
}
.foot__about { display: grid; gap: 0.875rem; align-content: start; max-width: 26rem; }
.foot__about p { font-size: var(--t-sm); color: var(--muted); line-height: 1.6; }
.foot__col h3 {
  font-family: var(--font-ui); font-size: var(--t-xs); font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--faint);
  margin-bottom: 0.875rem;
}
.foot__col ul { list-style: none; display: grid; gap: 0.125rem; }
.foot__col a { display: block; padding-block: 0.3125rem; font-size: var(--t-sm); color: var(--muted); text-decoration: none; transition: color 0.16s ease; }
.foot__col a:hover { color: var(--ink); }

.foot__bar {
  margin-top: clamp(2.5rem, 5vw, 3.5rem); padding-top: 1.5rem;
  border-top: 1px solid var(--border);
  display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; align-items: center; justify-content: space-between;
  font-size: var(--t-xs); color: var(--faint);
}
.foot__bar nav { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; }
.foot__bar a { display: inline-block; padding-block: 0.375rem; text-decoration: none; }
.foot__bar a:hover { color: var(--ink); }

.theme-toggle {
  appearance: none; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px;
  background: transparent; border: 1px solid var(--border); border-radius: var(--r-sm);
  color: var(--muted);
  transition: color 0.16s ease, border-color 0.16s ease;
}
.theme-toggle:hover { color: var(--ink); border-color: var(--border-strong); }
.theme-toggle svg { width: 1rem; height: 1rem; }
.theme-toggle .icon-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: none; }

@media (max-width: 860px) {
  .foot__grid { grid-template-columns: 1fr 1fr; }
  .foot__about { grid-column: 1 / -1; }
}
@media (max-width: 480px) {
  .foot__grid { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   18. Rechtstexte / Fließtextseiten
   -------------------------------------------------------------------------- */

.page-head {
  padding-block: clamp(3rem, 7vw, 5rem) clamp(2rem, 4vw, 3rem);
  border-bottom: 1px solid var(--border);
  display: grid; gap: 1rem;
}
.page-head h1 { font-size: var(--t-3xl); letter-spacing: -0.05em; max-width: 20ch; }
.page-head p:not(.eyebrow) { color: var(--muted); max-width: 60ch; font-size: var(--t-md); }

.prose { padding-block: clamp(2.5rem, 5vw, 4rem); display: grid; gap: 2.5rem; }
.prose section { display: grid; gap: 0.875rem; }
.prose h2 { font-size: var(--t-lg); letter-spacing: -0.03em; }
.prose h3 { font-family: var(--font-ui); font-size: var(--t-base); font-weight: 650; letter-spacing: -0.015em; margin-top: 0.5rem; }
.prose p { color: var(--muted); font-size: var(--t-base); line-height: 1.7; max-width: 68ch; }
.prose ul { list-style: none; display: grid; gap: 0.625rem; max-width: 68ch; }
.prose ul li { position: relative; padding-left: 1.125rem; color: var(--muted); font-size: var(--t-base); line-height: 1.65; }
.prose ul li::before { content: ""; position: absolute; left: 0; top: 0.6875rem; width: 0.3125rem; height: 0.3125rem; border-radius: 50%; background: var(--border-strong); }
/* Anschrift trägt sich selbst – Name kräftig, Rest ruhig, großzügige Zeile.
   Ein Rahmen würde nur wiederholen, was die Überschrift schon sagt. */
.prose address {
  font-style: normal; color: var(--ink-soft);
  font-size: var(--t-md); line-height: 1.65; letter-spacing: -0.01em;
}
.prose address strong { display: inline-block; margin-bottom: 0.125rem; }
.prose a { color: var(--ink); font-weight: 500; }
.prose strong { color: var(--ink); font-weight: 650; }
.prose .note {
  margin-top: 0.375rem; max-width: 62ch;
  font-size: var(--t-sm); color: var(--faint); line-height: 1.6;
}
.prose .note::before {
  content: ""; display: block;
  width: 2.5rem; height: 1px; background: var(--border-strong);
  margin-bottom: 0.875rem;
}

.toc {
  position: sticky; top: 6rem; align-self: start;
  display: grid; gap: 0.5rem;
  padding-left: 1rem; border-left: 1px solid var(--border);
}
.toc { gap: 0.125rem; }
.toc a { display: block; padding-block: 0.3125rem; font-size: var(--t-sm); color: var(--muted); text-decoration: none; line-height: 1.4; }
.toc a:hover { color: var(--ink); }

.prose-layout { display: grid; grid-template-columns: minmax(0, 1fr) 15rem; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
@media (max-width: 900px) { .prose-layout { grid-template-columns: 1fr; } .toc { display: none; } }

/* --------------------------------------------------------------------------
   19. Bewegung
   -------------------------------------------------------------------------- */

[data-reveal] {
  opacity: 0;
  transform: translateY(26px) scale(0.985);
  filter: blur(5px);
  transition:
    opacity 0.8s cubic-bezier(0.16, 0.84, 0.3, 1),
    transform 0.8s cubic-bezier(0.16, 0.84, 0.3, 1),
    filter 0.6s ease;
  transition-delay: var(--d, 0ms);
}
[data-reveal].is-in { opacity: 1; transform: none; filter: none; }

/* Eingangs-Choreografie des Heros */
.hero [data-enter] {
  opacity: 0;
  transform: translateY(16px);
  animation: enter 0.85s cubic-bezier(0.2, 0.7, 0.3, 1) forwards;
  animation-delay: var(--d, 0ms);
}
@keyframes enter { to { opacity: 1; transform: none; } }

/* Das Dashboard klappt beim Laden herein und richtet sich dann beim Scrollen auf.
   --tilt und --scale setzt site.js aus der Scrollposition. */
.hero__stage .mock {
  opacity: 0;
  transform: perspective(1800px) rotateX(16deg) translateY(60px) scale(0.94);
  animation: settle 1.2s cubic-bezier(0.19, 0.86, 0.28, 1) 0.4s forwards;
  will-change: transform;
}
/* Ohne JavaScript bleibt es flach statt für immer gekippt. */
@keyframes settle {
  to {
    opacity: 1;
    transform: perspective(1800px) rotateX(var(--tilt, 0deg)) translateY(0) scale(var(--tscale, 1));
  }
}
.hero__stage .mock.is-settled {
  opacity: 1;
  animation: none;
  transform: perspective(1800px) rotateX(var(--tilt, 0deg)) scale(var(--tscale, 1));
}

/* Überschrift steigt zeilenweise hinter einer Maske hervor */
.hero h1 .line { display: block; overflow: hidden; padding-bottom: 0.06em; }
.hero h1 .line > span {
  display: block;
  transform: translateY(115%);
  animation: lineUp 1s cubic-bezier(0.16, 0.84, 0.3, 1) forwards;
}
.hero h1 .line:nth-child(1) > span { animation-delay: 0.14s; }
.hero h1 .line:nth-child(2) > span { animation-delay: 0.26s; }
@keyframes lineUp { to { transform: none; } }

/* Statuswechsel im Mockup */
.mock__live { transition: background-color 0.45s ease, color 0.45s ease; }

/* Die Zeile, die gerade wechselt, wird kurz hinterlegt */
.mock__table tr { transition: background-color 0.5s ease; }
.mock__table tr.is-active { background: color-mix(in srgb, var(--sand) 34%, transparent); }

/* Laufband -------------------------------------------------------------- */

.marquee {
  overflow: hidden;
  padding-block: 0.25rem;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.marquee__track {
  /* positioniert, damit offsetLeft der Elemente sich auf die Spur bezieht –
     sonst sitzt die Lupe um einen festen Betrag daneben */
  position: relative;
  display: flex; align-items: center; width: max-content;
  animation: marquee 46s linear infinite;
}
.marquee:hover .marquee__track,
.marquee:focus-within .marquee__track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* Lupe: --f ist der Fokuswert 0…1, den site.js pro Bild setzt.
   1 = mittig unter der Lupe, 0 = weit davon entfernt. */
.marquee__item {
  display: inline-flex; align-items: center;
  padding-inline: 1.875rem;
  font-family: var(--font-display);
  font-size: clamp(1.125rem, 2.2vw, 1.5rem); font-weight: 700;
  letter-spacing: -0.035em;
  color: var(--ink);
  white-space: nowrap;

  opacity: calc(0.22 + 0.78 * var(--f, 0));
  transform: scale(calc(1 + 0.3 * var(--f, 0)));
  transform-origin: center center;
  will-change: transform, opacity;
}
.marquee__item::after {
  content: ""; width: 0.3125rem; height: 0.3125rem; border-radius: 50%;
  background: var(--border-strong); margin-left: 1.875rem;
  opacity: calc(1 - 0.7 * var(--f, 0));
}

/* Ohne JavaScript bleibt --f leer: dann gleichmäßig gedämpft statt fast
   unsichtbar. Die Regel greift nur, solange site.js nichts gesetzt hat. */
.marquee:not(.hat-lupe) .marquee__item {
  opacity: 0.62; transform: none;
}

/* Gepinnter Showcase ----------------------------------------------------- */

.showcase__sticky { display: grid; gap: 1.5rem; }

@media (min-width: 901px) {
  /* Der Abschnitt ist absichtlich hoch: währenddessen bleibt der Inhalt
     stehen und die Ansicht wechselt mit der Scrollposition.
     Die vh-Werte sind gedeckelt – in einem Rahmen, der sich auf die
     Inhaltshöhe zieht, würde eine reine vh-Höhe sich selbst hochschaukeln. */
  [data-scrollsync] { min-height: min(250vh, 2000px); }
  .showcase__sticky {
    position: sticky; top: clamp(4.5rem, 14vh, 9rem);
    padding-block: 1rem;
  }

  /* Kein eigener Scrollbereich vorhanden: Pinnen ergäbe nur eine hohe
     Leerstelle. site.js setzt die Klasse, sobald es das erkennt. */
  [data-scrollsync].is-unpinned { min-height: 0; }
  [data-scrollsync].is-unpinned .showcase__sticky { position: static; }
  [data-scrollsync].is-unpinned .showcase__progress { display: none; }
}

.showcase__progress {
  display: flex; gap: 0.375rem; margin-top: 0.25rem;
}
.showcase__progress i {
  height: 2px; flex: 1; border-radius: var(--pill);
  background: var(--border); overflow: hidden;
}
.showcase__progress i::after {
  content: ""; display: block; height: 100%; width: 0;
  background: var(--ink); transition: width 0.35s ease;
}
.showcase__progress i.is-done::after { width: 100%; }
.showcase__progress i.is-on::after { width: var(--p, 0%); transition: width 0.1s linear; }

@media (max-width: 900px) { .showcase__progress { display: none; } }

/* Stationsbalken zeichnen sich beim Einblenden --------------------------- */

.station::before { width: 0; transition: width 0.9s cubic-bezier(0.16, 0.84, 0.3, 1); transition-delay: var(--d, 0ms); }
.station.is-in::before, .rail.is-in .station::before { width: 100%; }

/* Magnetische Schaltflächen ---------------------------------------------- */

.btn[data-magnetic] {
  transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease,
              transform 0.35s cubic-bezier(0.2, 0.7, 0.3, 1);
  transform: translate(var(--px, 0), var(--py, 0));
}
.btn[data-magnetic]:active { transform: translate(var(--px, 0), calc(var(--py, 0px) + 1px)); }

/* --------------------------------------------------------------------------
   20. Zeigerlicht
   --------------------------------------------------------------------------
   Ein einziger Lichtpunkt wandert mit dem Zeiger über die Seite. Jede Karte
   zeichnet davon nur den Ausschnitt, der sie trifft: einen Schimmer auf der
   Fläche und einen Leuchtstreifen auf der eigenen Kante.

   Das Skript setzt pro Gruppe (--gx/--gy) nur die Zeigerposition in
   Gruppenkoordinaten und pro Karte einmalig deren Versatz (--gox/--goy).
   Gerechnet wird in CSS – deshalb bleibt das Licht über Kartengrenzen hinweg
   zusammenhängend, und pro Bild fallen nur eine Handvoll Stilzuweisungen an.

   Ohne Skript, ohne Zeigergerät und bei reduzierter Bewegung bleibt --gon
   auf 0: dann ist der Effekt vollständig unsichtbar und nichts verschiebt
   sich im Layout.
   -------------------------------------------------------------------------- */

@property --gon {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}

:root {
  --glow-sat:  48;    /* hell: gedeckt – Tönung statt Neon */
  --glow-lum:  48;
  --glow-ring: 0.7;   /* Deckkraft des Kantenstreifens */
  --glow-core: 0.35;  /* weißer Kern im Kantenstreifen */
  --glow-wash: 0.06;  /* Schimmer auf der Fläche */
  --glow-r:    240;   /* Radius des Lichtpunkts in Pixeln */
}

:root[data-theme="dark"] {
  --glow-sat: 74; --glow-lum: 62;
  --glow-ring: 1; --glow-core: 0.85; --glow-wash: 0.12;
  --glow-r: 280;
}

[data-glow-group] { position: relative; transition: --gon 0.45s ease; }

/* Beide – Gruppe und Karte – rechnen die Zeigerposition in ihr eigenes
   Koordinatensystem um. Die Deklaration muss auf jedem Element stehen,
   weil --gox/--goy sonst schon beim Elternteil aufgelöst würden. */
[data-glow], [data-glow-group] {
  --glow-base:   44;   /* Grundton, pro Karte überschrieben */
  --glow-spread: 30;   /* wie weit der Ton über die Fensterbreite wandert */
  --glow-hue: calc(var(--glow-base) + (var(--gxp, 0.5) - 0.5) * var(--glow-spread));
  --glow-px:  calc((var(--gx, 0) - var(--gox, 0)) * 1px);
  --glow-py:  calc((var(--gy, 0) - var(--goy, 0)) * 1px);
  --glow-d:   calc(var(--glow-r) * 1px);

  /* Reichweite von Kern und Kantenstreifen. Große, freistehende Karten
     erhöhen sie, sonst erlischt ihr Rand, sobald der Zeiger in der Mitte
     steht – der Streifen reicht immer nur so weit wie sein Verlauf. */
  --glow-hot-scale:  0.26;
  --glow-edge-scale: 0.8;

  --glow-tint: hsl(var(--glow-hue) calc(var(--glow-sat) * 1%) calc(var(--glow-lum) * 1%) / calc(var(--glow-wash) * var(--gon, 0)));
  --glow-edge: hsl(var(--glow-hue) calc(var(--glow-sat) * 1%) calc(var(--glow-lum) * 1%) / calc(var(--glow-ring) * var(--gon, 0)));
  --glow-halo: hsl(var(--glow-hue) calc(var(--glow-sat) * 1%) calc(var(--glow-lum) * 1%) / calc(var(--glow-ring) * 0.5 * var(--gon, 0)));
  --glow-hot:  hsl(0 0% 100% / calc(var(--glow-core) * var(--gon, 0)));

  --glow-wash-img: radial-gradient(var(--glow-d) var(--glow-d) at var(--glow-px) var(--glow-py), var(--glow-tint), transparent 68%);
  --glow-edge-img:
    radial-gradient(calc(var(--glow-d) * var(--glow-hot-scale)) calc(var(--glow-d) * var(--glow-hot-scale)) at var(--glow-px) var(--glow-py), var(--glow-hot), transparent 75%),
    radial-gradient(calc(var(--glow-d) * var(--glow-edge-scale)) calc(var(--glow-d) * var(--glow-edge-scale)) at var(--glow-px) var(--glow-py), var(--glow-edge), transparent 78%);
}

[data-glow] { position: relative; }

/* Gemalt wird nur dort, wo es auch einen Zeiger gibt. Auf Touch-Geräten bliebe
   --gon ohnehin 0 – dann wären das durchsichtige Verlaufsebenen, die trotzdem
   gerastert werden müssten.

   Reduzierte Bewegung ist hier bewusst kein Ausschlusskriterium: der Streifen
   verschiebt nichts, er folgt nur dem Zeiger. Siehe auch site.js. */
@media (hover: hover) and (pointer: fine) {

  [data-glow] { background-image: var(--glow-wash-img); }

  /* Kantenstreifen: ein Rahmen, aus dem nur der Rand selbst sichtbar bleibt.
     inset:-1px legt ihn genau auf die Trennlinie zur Nachbarkarte. */
  [data-glow]::after,
  [data-glow-group]:is(.rail, .bento)::after {
    content: "";
    position: absolute;
    z-index: 3;
    border: 1px solid transparent;
    border-radius: inherit;
    pointer-events: none;
    background-image: var(--glow-edge-img);
    -webkit-mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0) border-box;
    -webkit-mask-composite: xor;
            mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0) border-box;
            mask-composite: exclude;
  }
  [data-glow]::after { inset: -1px; }

  /* Die Gruppen schneiden ihre Kinder ab (overflow:hidden), deshalb sitzt ihr
     eigener Streifen innen auf der Kante statt darüber. */
  [data-glow-group]:is(.rail, .bento)::after { inset: 0; }

  .plan::after { inset: -2px; border-width: 2px; border-radius: calc(var(--r-lg) + 2px); }

  /* Hof hinter den Karten – eine einzige weiche Fläche, sichtbar in den Fugen
     und am Außenrand. Als positioniertes ::before steht sie in der
     Zeichenreihenfolge vor den Karten, liegt also unter ihnen; ein negativer
     z-index würde sie dagegen hinter den Abschnittshintergrund schieben. */
  .plans::before {
    content: "";
    position: absolute; inset: -18px;
    pointer-events: none;
    background-image: radial-gradient(
      calc(var(--glow-d) * 0.85) calc(var(--glow-d) * 0.85)
      at calc(var(--glow-px) + 18px) calc(var(--glow-py) + 18px),
      var(--glow-halo), transparent 72%);
    filter: blur(24px);
  }
}

/* Grundtöne aus der Palette – das Licht nimmt den Akzent der Karte auf */
.station--1 { --glow-base: 44; }   /* Sand */
.station--2 { --glow-base: 268; }  /* Lavendel */
.station--3 { --glow-base: 158; }  /* Mint */

.cell:has(.cell__icon--mint)  { --glow-base: 158; }
.cell:has(.cell__icon--lav)   { --glow-base: 268; }
.cell:has(.cell__icon--coral) { --glow-base: 16; }
.cell:has(.cell__icon--sand)  { --glow-base: 44; }

.plan { --glow-base: 158; --glow-spread: 24; }

/* Tarifkarten stehen frei: die Kante darf zwei Pixel breit werden, und der
   Streifen muss die ganze Karte umrunden können. */
.plan { --glow-edge-scale: 1.05; --glow-hot-scale: 0.32; }
.plan--featured { --glow-base: 158; --glow-spread: 0; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  [data-reveal] { opacity: 1; transform: none; filter: none; }
  .hero [data-enter] { opacity: 1; transform: none; animation: none; }
  .hero h1 .line > span { transform: none; animation: none; }
  .hero__stage .mock { opacity: 1; transform: none; animation: none; }
  .aurora { animation: none; }
  .bar__fill { transition: none; }
  /* Ohne Bewegung wird aus dem Laufband ein ruhiges Stichwortband: die
     Verdopplung ist nur für den nahtlosen Umlauf da und entfällt, die Spur
     bricht um und bleibt vollständig sichtbar. Sonst stünde hier eine an der
     rechten Kante hart abgeschnittene halbe Liste. */
  /* Ausdrücklich so entschieden: das Laufband läuft auch hier weiter.
     Die Sammelregel oben in diesem Block kürzt jede Animation auf 0.001ms
     und beendet sie nach einem Durchlauf – beides wird hier zurückgenommen,
     sonst stünde das Band sofort still. Die Kantenmaske bleibt erhalten,
     das Pausieren beim Drüberfahren ebenso. */
  .marquee__track {
    animation-duration: 46s !important;
    animation-iteration-count: infinite !important;
  }
  .station::before { width: 100%; transition: none; }
  .btn[data-magnetic] { transform: none; }
  /* Das Zeigerlicht bleibt an – dann soll auch sein Auf- und Abblenden weich
     bleiben, sonst schaltet es hart um, sobald der Zeiger eine Gruppe
     erreicht. Die Regel oben würde es auf 0.001ms kürzen. */
  [data-glow-group] { transition-duration: 0.45s !important; }
  /* Ohne Bewegung wird der Abschnitt nicht gepinnt, sondern normal gelesen */
  [data-scrollsync] { min-height: 0 !important; }
  .showcase__sticky { position: static !important; }
}