/* ============================================================
   BySamox — Design System v2
   Drenched monochrome · Licht als Marke · Technor + Supreme
   Motion-Tokens: ein System, keine Zufalls-Animationen
   ============================================================ */

/* ------------------------------------------------------------
   Schriften lokal gehostet (DSGVO: kein externer Abruf,
   keine IP-Übertragung an Dritte). Quelle: Fontshare / ITF,
   Self-Hosting laut Fontshare-Lizenz erlaubt.
   ------------------------------------------------------------ */
@font-face {
  font-family: "Technor";
  src: url("assets/fonts/technor-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Technor";
  src: url("assets/fonts/technor-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Supreme";
  src: url("assets/fonts/supreme-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Supreme";
  src: url("assets/fonts/supreme-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@property --ang {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

:root {
  /* Farben */
  --bg:         oklch(0.12 0.010 260);
  --bg-deep:    oklch(0.09 0.008 260);
  --bg-raised:  oklch(0.16 0.012 260);
  --bg-overlay: oklch(0.20 0.014 260);
  --ink:        oklch(0.97 0.004 90);   /* warmes Weiß */
  --ink-soft:   oklch(0.79 0.008 260);
  --ink-faint:  oklch(0.63 0.010 260);
  --line:       oklch(0.28 0.010 260);
  --line-soft:  oklch(0.22 0.010 260);
  --beam:       oklch(0.93 0.02 250);
  --accent:     oklch(0.85 0.06 250);
  --accent-ink: oklch(0.15 0.02 250);

  /* Typografie */
  --font-display: "Technor", "Arial Narrow", sans-serif;
  --font-body: "Supreme", "Segoe UI", system-ui, sans-serif;
  --text-display: clamp(2.5rem, 5vw + 0.75rem, 4.75rem);
  --text-h2: clamp(1.75rem, 3vw + 0.5rem, 3rem);
  --text-h3: 1.375rem;
  --text-body: 1.0625rem;
  --text-small: 0.875rem;

  /* Spacing & Form */
  --container: min(1200px, 92vw);
  --section-gap: clamp(6rem, 13vh, 11rem);
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-pill: 999px;

  /* Motion-Tokens */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);       /* expo-out: Standard */
  --ease-soft: cubic-bezier(0.25, 1, 0.5, 1);      /* quart-out: große Flächen */
  --dur-fast: 150ms;
  --dur-med: 250ms;
  --dur-slow: 600ms;
  --dur-entrance: 800ms;
  --rise: 28px;            /* Standard-Bewegungslänge Reveals */
  --stagger: 70ms;         /* Standard-Stagger */
  --blur-in: 10px;         /* blur-to-sharp Startwert */

  /* Z-Scale */
  --z-atmo: -1;
  --z-nav: 100;
  --z-progress: 110;
  --z-grain: 120;
  --z-cursor: 130;

  color-scheme: dark;
}

/* ---------- Reset & Basis ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 5.5rem;
  /* Sub-Pixel-Rundungen auf sehr schmalen Geräten dürfen keinen
     waagerechten Bildlauf auslösen */
  overflow-x: clip;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: 1.65;
  letter-spacing: 0.01em;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

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

h1, h2, h3 { text-wrap: balance; margin: 0; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; }

a { color: var(--ink); }

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

.container { width: var(--container); margin-inline: auto; }

.section { padding-block: var(--section-gap); position: relative; }

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

/* Fokus */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip-link {
  position: absolute;
  top: -100%;
  left: 1rem;
  z-index: calc(var(--z-cursor) + 1);
  background: var(--ink);
  color: var(--bg);
  padding: 0.6rem 1rem;
  border-radius: var(--radius-sm);
  text-decoration: none;
  font-weight: 500;
}
.skip-link:focus-visible { top: 1rem; }

/* ============================================================
   Globale Atmosphäre
   ============================================================ */
.atmo {
  position: fixed;
  inset: 0;
  z-index: var(--z-atmo);
  overflow: hidden;
  background: radial-gradient(120% 100% at 50% 0%, var(--bg) 0%, var(--bg-deep) 100%);
}
.atmo__layer {
  position: absolute;
  inset: -25%;
  will-change: transform;
}
.atmo__layer--1 {
  background:
    radial-gradient(38% 30% at 74% 30%, oklch(0.30 0.018 250 / 0.5), transparent 70%),
    radial-gradient(30% 26% at 20% 75%, oklch(0.24 0.014 250 / 0.45), transparent 70%);
  animation: atmo-drift-1 46s var(--ease-soft) infinite alternate;
}
.atmo__layer--2 {
  background:
    radial-gradient(24% 20% at 30% 25%, oklch(0.26 0.016 260 / 0.35), transparent 70%),
    radial-gradient(20% 24% at 82% 78%, oklch(0.28 0.02 250 / 0.3), transparent 70%);
  animation: atmo-drift-2 62s var(--ease-soft) infinite alternate;
}
@keyframes atmo-drift-1 {
  from { transform: translate3d(-2%, -1.5%, 0) rotate(-1deg); }
  to   { transform: translate3d(2%, 2%, 0) rotate(1.5deg); }
}
@keyframes atmo-drift-2 {
  from { transform: translate3d(1.5%, 2%, 0) scale(1); }
  to   { transform: translate3d(-2%, -1.5%, 0) scale(1.06); }
}

/* Filmkorn */
.grain {
  position: fixed;
  inset: 0;
  z-index: var(--z-grain);
  pointer-events: none;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 140px 140px;
}

/* Vignette */
.vignette {
  position: fixed;
  inset: 0;
  z-index: var(--z-grain);
  pointer-events: none;
  background: radial-gradient(120% 100% at 50% 45%, transparent 62%, oklch(0.05 0.005 260 / 0.5) 100%);
}

/* ============================================================
   Cursor-Companion (nur .fine-pointer, per JS gesetzt)
   ============================================================ */
.cursor {
  display: none;
  position: fixed;
  top: 0; left: 0;
  z-index: var(--z-cursor);
  width: 34px; height: 34px;
  margin: -17px 0 0 -17px;
  border: 1px solid oklch(0.93 0.02 250 / 0.55);
  border-radius: var(--radius-pill);
  pointer-events: none;
  transition: width var(--dur-med) var(--ease-out), height var(--dur-med) var(--ease-out),
              margin var(--dur-med) var(--ease-out), background-color var(--dur-med) var(--ease-out);
  align-items: center;
  justify-content: center;
}
.fine-pointer .cursor { display: flex; }
.cursor__label {
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-ink);
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease-out);
  white-space: nowrap;
}
.cursor.is-interactive {
  width: 52px; height: 52px;
  margin: -26px 0 0 -26px;
  background: oklch(0.93 0.02 250 / 0.08);
}
.cursor.has-label {
  width: 84px; height: 84px;
  margin: -42px 0 0 -42px;
  background: var(--beam);
  border-color: var(--beam);
}
.cursor.has-label .cursor__label { opacity: 1; }
.cursor.is-down { transform: scale(0.85); }

/* ---------- Nach-oben-Button ---------- */
.to-top {
  position: fixed;
  right: clamp(1rem, 3vw, 2rem);
  bottom: clamp(1rem, 3vw, 2rem);
  z-index: var(--z-nav);
  width: 48px; height: 48px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-pill);
  background: oklch(0.16 0.012 260 / 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--line);
  color: var(--ink);
  cursor: pointer;
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition: opacity var(--dur-med) var(--ease-out),
              transform var(--dur-med) var(--ease-out),
              border-color var(--dur-med) var(--ease-out),
              box-shadow var(--dur-med) var(--ease-out);
}
.to-top.is-visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
.to-top:hover {
  border-color: var(--accent);
  box-shadow: 0 0 24px oklch(0.85 0.06 250 / 0.25);
}
.to-top svg { width: 18px; height: 18px; }

/* ---------- Scroll-Progress ---------- */
.scroll-progress {
  position: fixed;
  inset: 0 auto auto 0;
  height: 2px;
  width: 100%;
  transform-origin: 0 0;
  transform: scaleX(var(--scroll-p, 0));
  background: linear-gradient(90deg, var(--beam), var(--accent));
  z-index: var(--z-progress);
  pointer-events: none;
}

/* ---------- Typo-Bausteine ---------- */
.section__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-h2);
  line-height: 1.1;
  letter-spacing: 0;
  max-width: 20ch;
}

.section__lead {
  color: var(--ink-soft);
  max-width: 58ch;
  margin-top: 1.25rem;
  font-size: 1.125rem;
}

/* Wort-Reveal für Headlines (JS umhüllt Wörter; ohne JS ganz normal sichtbar) */
.sw-mask { display: inline-block; overflow: hidden; vertical-align: bottom; }
.sw { display: inline-block; }
.js .split-ready .sw {
  transform: translateY(115%);
  transition: transform 0.7s var(--ease-out);
  transition-delay: calc(var(--wi, 0) * 55ms);
}
.js .split-ready.is-visible .sw { transform: translateY(0); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 1rem;
  padding: 0.8rem 1.6rem;
  border-radius: var(--radius-pill);
  text-decoration: none;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  position: relative;
  transition: transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-med) var(--ease-out),
              border-color var(--dur-med) var(--ease-out),
              background-color var(--dur-med) var(--ease-out);
  will-change: transform;
}
.btn:active { transform: scale(0.96); }

.btn__arrow {
  display: inline-block;
  transition: transform var(--dur-med) var(--ease-out);
}
.btn:hover .btn__arrow { transform: translateX(4px); }

.btn--primary {
  background: var(--ink);
  color: var(--bg);
}
.btn--primary::after {
  /* Lichtkante */
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 1px 0 oklch(1 0 0 / 0.8);
  pointer-events: none;
}
.btn--primary:hover {
  box-shadow: 0 0 34px oklch(0.93 0.02 250 / 0.22);
}

.btn--ghost {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--line);
}
.btn--ghost:hover { border-color: var(--accent); }

.btn--lg { padding: 1rem 2.1rem; font-size: 1.0625rem; }
.btn--block { width: 100%; }
.btn--nav { padding: 0.55rem 1.25rem; font-size: 0.9375rem; }

/* ============================================================
   Navigation
   ============================================================ */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: var(--z-nav);
  /* Immer leicht abgesetzt: dezenter Blur, halbtransparente Fläche, feine Kante */
  background: oklch(0.12 0.010 260 / 0.42);
  backdrop-filter: blur(10px) saturate(120%);
  -webkit-backdrop-filter: blur(10px) saturate(120%);
  border-bottom: 1px solid oklch(0.28 0.010 260 / 0.5);
  box-shadow: 0 4px 18px oklch(0.05 0.005 260 / 0.18);
  will-change: transform;
  transition: background-color 0.3s var(--ease-out),
              border-color 0.3s var(--ease-out),
              box-shadow 0.3s var(--ease-out),
              transform 0.3s var(--ease-out);
}
/* Runter scrollen: Nav gleitet weg · hoch scrollen: fährt weich wieder ein.
   Etwas mehr als 100%, damit auch die 1px-Unterkante verschwindet. */
.nav.is-hidden { transform: translateY(-102%); }
/* Tastaturnutzer: fokussierte Nav darf nie versteckt sein */
.nav.is-hidden:focus-within { transform: translateY(0); }
/* Gescrollt: kompakter und deutlicher abgesetzt */
.nav.is-scrolled {
  background: oklch(0.12 0.010 260 / 0.78);
  backdrop-filter: blur(18px) saturate(130%);
  -webkit-backdrop-filter: blur(18px) saturate(130%);
  border-bottom-color: var(--line-soft);
  box-shadow: 0 10px 30px oklch(0.05 0.005 260 / 0.4);
}

.nav__inner {
  width: var(--container);
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: 2rem;
  padding-block: 1.05rem;
  transition: padding var(--dur-med) var(--ease-out);
}
.nav.is-scrolled .nav__inner { padding-block: 0.7rem; }

.nav__brand {
  display: inline-flex;
  align-items: center;
  min-height: 44px;              /* volle Trefferfläche für Touch */
  padding-right: 0.5rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.125rem;
  letter-spacing: 0.18em;
  text-decoration: none;
  margin-right: auto;
  cursor: pointer;
  transform-origin: 0 50%;
  transition: text-shadow var(--dur-med) var(--ease-out),
              transform var(--dur-med) var(--ease-out);
}
.nav__brand:hover {
  text-shadow: 0 0 24px oklch(0.93 0.02 250 / 0.6);
  transform: scale(1.04);
}
.nav__brand:active { transform: scale(0.99); }
.nav__brand:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 6px;
  border-radius: 4px;
}

.nav__links {
  display: flex;
  gap: 1.75rem;
}
.nav__links a {
  position: relative;
  text-decoration: none;
  color: var(--ink-soft);
  font-size: 0.9375rem;
  padding-block: 0.2rem;
  transition: color var(--dur-fast) var(--ease-out);
}
.nav__links a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 1px;
  background: var(--beam);
  transform: scaleX(0);
  transform-origin: 100% 50%;
  transition: transform var(--dur-med) var(--ease-out);
}
.nav__links a:hover, .nav__links a.is-active { color: var(--ink); }
.nav__links a:hover::after, .nav__links a.is-active::after {
  transform: scaleX(1);
  transform-origin: 0 50%;
}
.nav__links-cta { display: none; }

.nav__toggle {
  display: none;
  width: 44px;
  height: 44px;
  background: none;
  border: none;
  cursor: pointer;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  z-index: 2;
}
.nav__toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--ink);
  transition: transform var(--dur-med) var(--ease-out), opacity var(--dur-med);
}
.nav__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(4.5px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2) { transform: translateY(-4.5px) rotate(-45deg); }

/* ============================================================
   Hero
   ============================================================ */
.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  align-items: center;
  overflow: clip;
}

/* Perspektivischer Boden: gibt dem Raum Tiefe, statt Deko-Raster zu sein */
.hero__grid {
  position: absolute;
  inset: auto 0 0 0;
  height: 46vh;
  overflow: hidden;
  transform: perspective(520px) rotateX(66deg);
  transform-origin: 50% 100%;
  -webkit-mask-image: radial-gradient(85% 78% at 62% 100%, #000 8%, transparent 72%);
  mask-image: radial-gradient(85% 78% at 62% 100%, #000 8%, transparent 72%);
  opacity: 0.5;
}
/* Muster doppelt hoch und per transform verschoben: läuft auf der GPU,
   statt jeden Frame neu gezeichnet zu werden. */
.hero__grid::before {
  content: "";
  position: absolute;
  inset: -100% 0 0 0;
  background:
    linear-gradient(oklch(0.28 0.012 260 / 0.5) 1px, transparent 1px) 0 0 / 100% 46px,
    linear-gradient(90deg, oklch(0.28 0.012 260 / 0.5) 1px, transparent 1px) 0 0 / 46px 100%;
  animation: grid-drift 8s linear infinite;
  will-change: transform;
}
@keyframes grid-drift {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(0, 46px, 0); }
}

/* Lichtspalt — das Logo-Motiv, mehrschichtig für echten Glow */
.hero__beam {
  position: absolute;
  inset: -4%;
  background:
    /* harter Kern */
    linear-gradient(90deg, transparent 71.7%, oklch(0.98 0.01 250 / 0.95) 72%, oklch(0.98 0.01 250 / 0.95) 72.3%, transparent 72.6%),
    /* enger Glow */
    linear-gradient(90deg, transparent 69%, oklch(0.93 0.02 250 / 0.34) 72%, transparent 75.5%),
    /* weiter Lichtabfall in den Raum */
    linear-gradient(90deg, transparent 60%, oklch(0.9 0.03 250 / 0.11) 72%, transparent 90%),
    /* Raumlicht */
    radial-gradient(120% 90% at 76% 58%, oklch(0.34 0.018 250 / 0.55), transparent 56%);
  animation:
    beam-open 1.3s var(--ease-out) both,
    beam-breathe 18s var(--ease-soft) 2s infinite alternate;
  transform-origin: 72% 100%;
  will-change: transform;
}
@keyframes beam-open {
  from { opacity: 0; transform: scaleY(0.15); }
  to   { opacity: 1; transform: scaleY(1); }
}
@keyframes beam-breathe {
  from { scale: 1; opacity: 0.92; }
  to   { scale: 1.045; opacity: 1; }
}

/* Spiegelung des Lichtspalts auf dem Boden */
.hero__reflection {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 30vh;
  background:
    linear-gradient(90deg, transparent 68%, oklch(0.93 0.02 250 / 0.16) 72%, transparent 77%),
    radial-gradient(40% 100% at 72% 0%, oklch(0.9 0.03 250 / 0.1), transparent 70%);
  filter: blur(6px);
  -webkit-mask-image: linear-gradient(#000, transparent 85%);
  mask-image: linear-gradient(#000, transparent 85%);
  animation: reflect-in 1.6s var(--ease-out) 0.5s both;
}
@keyframes reflect-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.hero__floor {
  position: absolute;
  inset: auto 0 0 0;
  height: 26vh;
  background: radial-gradient(80% 130% at 72% 0%, oklch(0.4 0.018 250 / 0.32), transparent 60%);
}

/* Feiner Lichtstaub, langsam driftend. Wenige, große Abstände, kein Sternenfeld. */
.hero__dust { position: absolute; inset: 0; pointer-events: none; }
.hero__dust i {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--s);
  height: var(--s);
  border-radius: 50%;
  background: oklch(0.95 0.02 250);
  opacity: 0.24;
  box-shadow: 0 0 7px oklch(0.93 0.02 250 / 0.6);
  animation: dust-drift 22s var(--ease-soft) infinite alternate;
  animation-delay: var(--d);
  will-change: transform;
}
@keyframes dust-drift {
  from { transform: translate3d(0, 10px, 0); opacity: 0.1; }
  50%  { opacity: 0.32; }
  to   { transform: translate3d(16px, -22px, 0); opacity: 0.14; }
}

/* Cursor-Lichtschein (Position per JS) */
.hero__glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(340px circle at var(--gx, 50%) var(--gy, 50%), oklch(0.93 0.02 250 / 0.07), transparent 70%);
  transition: opacity 0.6s var(--ease-out);
}
.fine-pointer .hero__glow { opacity: 1; }

.hero__inner {
  position: relative;
  z-index: 1;
  padding-block: 8rem 6rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(3rem, 7vw, 6rem);
  align-items: center;
}
@media (min-width: 1024px) {
  .hero__inner {
    grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
  }
}
.hero__text { max-width: 34rem; }

/* ============================================================
   Bühne rechts: schwebendes Gerät mit Demo-Ansicht
   ============================================================ */
.hero__stage {
  position: relative;
  perspective: 1600px;
  animation: stage-in 1.4s var(--ease-out) 0.45s both;
}
@keyframes stage-in {
  from { opacity: 0; transform: translateY(28px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.device {
  position: relative;
  transform-style: preserve-3d;
  transform: rotateX(7deg) rotateY(-11deg) rotateZ(0.6deg);
  animation: device-float 9s var(--ease-soft) infinite alternate;
  will-change: transform;
}
@keyframes device-float {
  from { transform: rotateX(7deg) rotateY(-11deg) rotateZ(0.6deg) translateY(-6px); }
  to   { transform: rotateX(5deg) rotateY(-8deg)  rotateZ(0.2deg) translateY(10px); }
}

/* Deckel mit Gehäusekante */
.device__lid {
  position: relative;
  border-radius: 14px;
  padding: 3px;
  background: linear-gradient(150deg, oklch(0.46 0.008 260), oklch(0.24 0.006 260) 42%, oklch(0.32 0.008 260));
  box-shadow:
    0 2px 0 oklch(0.6 0.01 260 / 0.35) inset,
    0 30px 60px -20px oklch(0.04 0.005 260 / 0.75),
    0 60px 90px -40px oklch(0.04 0.005 260 / 0.6);
}
.device__bezel {
  position: relative;
  border-radius: 11px;
  padding: 12px 10px 14px;
  background: oklch(0.11 0.006 260);
  box-shadow: 0 0 0 1px oklch(0.5 0.01 260 / 0.25) inset;
}
.device__cam {
  position: absolute;
  top: 5px; left: 50%;
  translate: -50% 0;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: oklch(0.2 0.008 260);
  box-shadow: 0 0 0 1px oklch(0.3 0.01 260 / 0.6);
}
.device__screen {
  position: relative;
  aspect-ratio: 16 / 10;
  border-radius: 4px;
  overflow: hidden;
  background: var(--bg-deep);
}
/* Glasreflexion über dem Bildschirm */
.device__sheen {
  position: absolute;
  inset: 0;
  background: linear-gradient(112deg, oklch(0.95 0.01 250 / 0.13) 0%, transparent 34%, transparent 62%, oklch(0.95 0.01 250 / 0.06) 100%);
  pointer-events: none;
}

/* Unterteil in Perspektive */
.device__base {
  position: relative;
  height: 12px;
  margin: 0 -3.5%;
  border-radius: 0 0 10px 10px;
  background: linear-gradient(oklch(0.42 0.008 260), oklch(0.2 0.006 260));
  box-shadow: 0 12px 22px -8px oklch(0.04 0.005 260 / 0.8);
  transform: rotateX(-16deg);
  transform-origin: 50% 0;
}
.device__notch {
  position: absolute;
  top: 0; left: 50%;
  translate: -50% 0;
  width: 15%; height: 4px;
  border-radius: 0 0 5px 5px;
  background: oklch(0.15 0.006 260);
}

/* Weicher Schlagschatten auf dem Boden */
.device__shadow {
  position: absolute;
  left: 6%; right: 6%;
  bottom: -13%;
  height: 42px;
  border-radius: 50%;
  background: radial-gradient(50% 50% at 50% 50%, oklch(0.03 0.004 260 / 0.62), transparent 72%);
  filter: blur(14px);
  animation: shadow-breathe 9s var(--ease-soft) infinite alternate;
}
@keyframes shadow-breathe {
  from { transform: scale(0.95); opacity: 0.85; }
  to   { transform: scale(1.05); opacity: 0.62; }
}

/* ---------- Glassmorphism-Karten um das Gerät ---------- */
.hero-chip {
  position: absolute;
  z-index: 3;
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  color: var(--ink);
  white-space: nowrap;
  padding: 0.5rem 0.95rem;
  border-radius: var(--radius-pill);
  background: oklch(0.3 0.014 260 / 0.34);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border: 1px solid oklch(0.85 0.02 250 / 0.18);
  box-shadow:
    0 1px 0 oklch(1 0 0 / 0.14) inset,
    0 10px 26px -12px oklch(0.03 0.004 260 / 0.8);
  animation: chip-float 8s var(--ease-soft) infinite alternate;
  will-change: transform;
}
.hero-chip::before {
  content: "";
  display: inline-block;
  width: 5px; height: 5px;
  margin-right: 0.55rem;
  vertical-align: 0.12em;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 8px oklch(0.85 0.06 250 / 0.9);
}
@keyframes chip-float {
  from { transform: translate3d(0, -7px, 0); }
  to   { transform: translate3d(4px, 8px, 0); }
}
.hero-chip--1 { top: 2%;   left: -7%;  animation-delay: -0.5s; }
.hero-chip--2 { top: 20%;  right: -6%; animation-delay: -3.2s; }
.hero-chip--3 { top: 52%;  left: -11%; animation-delay: -6s; }
.hero-chip--4 { bottom: 6%; right: -3%; animation-delay: -1.8s; }
.hero-chip--5 { bottom: -6%; left: 8%;  animation-delay: -4.6s; }

.hero__tag {
  font-size: var(--text-small);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  animation: rise 0.7s var(--ease-out) 0.15s both;
}

.hero__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-display);
  line-height: 1.08;
  letter-spacing: -0.005em;
  margin-top: 1.75rem;
  max-width: 18ch;
}
.hero__line {
  display: block;
  overflow: hidden;
  padding-bottom: 0.1em;
  margin-bottom: -0.1em;
}
/* Ruhiger Zeilen-Reveal: aus der Maske heraus, dabei Laufweite
   zusammenziehen und Unschärfe auflösen. Kein Kippen, kein Federn. */
.hero__word {
  display: inline-block;
  animation: line-rise 1.15s var(--ease-out) both;
  animation-delay: calc(0.2s + var(--hw, 0) * 0.14s);
}
@keyframes line-rise {
  from {
    transform: translateY(102%);
    letter-spacing: 0.06em;
    filter: blur(7px);
    opacity: 0;
  }
  55% { opacity: 1; }
  to {
    transform: translateY(0);
    letter-spacing: -0.005em;
    filter: blur(0);
    opacity: 1;
  }
}

/* Akzentwort: helles Licht plus haarfeine Linie, die sich nach dem
   Reveal aufzieht. Als Hintergrund umgesetzt, damit die Linie auch
   dann sitzt, wenn das Wort auf schmalen Bildschirmen umbricht. */
.hero__accent {
  font-style: normal;
  color: var(--beam);
  text-shadow: 0 0 48px oklch(0.93 0.02 250 / 0.35);
  padding-bottom: 0.06em;
  background-image: linear-gradient(90deg, var(--beam), oklch(0.93 0.02 250 / 0.22));
  background-repeat: no-repeat;
  background-position: 0 100%;
  /* Basiswert ist die vollständige Linie: Ohne Animationsunterstützung
     ist sie sichtbar, statt zu fehlen. */
  background-size: 100% 2px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  animation: accent-underline 1.1s var(--ease-out) 1.1s both;
}
@keyframes accent-underline {
  from { background-size: 0% 2px; }
  to   { background-size: 100% 2px; }
}

.hero__sub {
  color: var(--ink-soft);
  font-size: 1.1875rem;
  max-width: 48ch;
  margin-top: 1.75rem;
  animation: rise 0.9s var(--ease-out) 0.8s both;
}

.hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 2.75rem;
  animation: rise 0.9s var(--ease-out) 0.98s both;
}

.hero__trust {
  margin-top: 2.5rem;
  font-size: var(--text-small);
  color: var(--ink-faint);
  letter-spacing: 0.04em;
  animation: rise 0.9s var(--ease-out) 1.14s both;
}

@keyframes rise {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

.hero__scrollhint {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  width: 1px;
  height: 48px;
  background: var(--line);
  overflow: hidden;
}
.hero__scrollhint span {
  position: absolute;
  inset: 0;
  background: var(--beam);
  animation: scrollhint 2.2s var(--ease-out) infinite;
}
@keyframes scrollhint {
  0% { transform: translateY(-100%); }
  60%, 100% { transform: translateY(100%); }
}

/* ---------- Trust-Leiste als nahtloses Marquee ---------- */
.trust {
  border-block: 1px solid var(--line-soft);
  padding-block: 1.1rem;
  overflow: hidden;
}
.trust__marquee {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.trust__track {
  display: flex;
  width: max-content;
  animation: marquee 30s linear infinite;
}
.trust:hover .trust__track { animation-play-state: paused; }
.trust__group {
  display: flex;
  align-items: center;
  gap: 3rem;
  padding-right: 3rem;
  list-style: none;
}
.trust__group li {
  font-size: var(--text-small);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
  display: flex;
  align-items: center;
  gap: 0.6rem;
  white-space: nowrap;
}
.trust__group li::before {
  content: "";
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 8px oklch(0.85 0.06 250 / 0.7);
}

/* ---------- Licht-Übergänge zwischen Sektionen ---------- */
.beam-divider {
  position: relative;
  height: 1px;
  width: var(--container);
  margin-inline: auto;
  background: linear-gradient(90deg, transparent, var(--line) 18%, oklch(0.93 0.02 250 / 0.7) 50%, var(--line) 82%, transparent);
}
.beam-divider::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  translate: -50% -50%;
  width: 180px; height: 26px;
  background: radial-gradient(50% 100% at 50% 50%, oklch(0.93 0.02 250 / 0.16), transparent 70%);
  pointer-events: none;
}

/* ---------- Reveal-System (JS verstärkt, ohne JS sichtbar) ---------- */
[data-reveal] { opacity: 1; transform: none; }
.js [data-reveal] {
  opacity: 0;
  transform: translateY(var(--rise));
  transition: opacity var(--dur-slow) var(--ease-out),
              transform var(--dur-slow) var(--ease-out),
              filter var(--dur-slow) var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}
.js [data-reveal].is-visible { opacity: 1; transform: translateY(0); }

/* Blur-to-sharp Variante für große Karten */
.js .price-card[data-reveal] { filter: blur(var(--blur-in)); }
.js .price-card[data-reveal].is-visible { filter: blur(0); }

/* Cursor-Tracking-Glow für Karten (per JS: --mx/--my in px) */
[data-glow] { position: relative; }
[data-glow]::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 50%), oklch(0.93 0.02 250 / 0.07), transparent 65%);
  opacity: 0;
  transition: opacity var(--dur-med) var(--ease-out);
  pointer-events: none;
  z-index: 1;
}
.fine-pointer [data-glow]:hover::before { opacity: 1; }

/* ============================================================
   Warum BySamox
   ============================================================ */
.why__grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: start;
}

.why__media {
  margin: 0;
  position: sticky;
  top: 7rem;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--line);
  transition: border-color var(--dur-med) var(--ease-out);
  transform-style: preserve-3d;
}
.why__media:hover { border-color: oklch(0.45 0.02 250); }
.why__media img { width: 100%; height: auto; }

/* Lichtreflex, der über die Karte zieht */
.why__media-sheen {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(115deg, transparent 30%, oklch(0.97 0.004 90 / 0.14) 48%, transparent 62%);
  transform: translateX(-120%);
  transition: transform 1.1s var(--ease-soft);
  pointer-events: none;
}
.why__media:hover .why__media-sheen { transform: translateX(120%); }

/* ============================================================
   Demo-Sektion: abstraktes Browser-Mockup (neutral, keine Marke)
   ============================================================ */
.brand-neutral {
  --m-bg: oklch(0.15 0.012 260);
  --m-surface: oklch(0.20 0.014 260);
  --m-ink: oklch(0.96 0.005 260);
  --m-soft: oklch(0.72 0.01 260);
  --m-accent: oklch(0.85 0.06 250);
  --m-font: var(--font-display);
}

.demo {
  position: relative;
  overflow: clip;
}
.demo__grid {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: center;
}
.demo__benefits {
  list-style: none;
  margin-top: 2rem;
  display: grid;
  gap: 0.75rem;
}
.demo__benefits li {
  position: relative;
  padding-left: 1.75rem;
  color: var(--ink-soft);
}
.demo__benefits li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 10px oklch(0.85 0.06 250 / 0.6);
}
.demo__cta { margin-top: 2.5rem; display: flex; flex-wrap: wrap; gap: 1rem; }
.demo__stage { position: relative; }

/* Schwebende UI-Chips um das Mockup */
.demo__chip {
  position: absolute;
  z-index: 3;
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  background: oklch(0.16 0.012 260 / 0.85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  padding: 0.4rem 0.95rem;
  animation: chip-float 7s var(--ease-soft) infinite alternate;
  pointer-events: none;
}
.demo__chip--1 { top: -16px; left: -4%; animation-delay: 0s; }
.demo__chip--2 { top: 34%; right: -6%; animation-delay: -2.5s; }
.demo__chip--3 { bottom: -12px; left: 12%; animation-delay: -5s; }
@keyframes chip-float {
  from { transform: translateY(-5px); }
  to   { transform: translateY(6px); }
}

/* ---------- Device-Mockups (reines CSS) ---------- */
.mock-laptop {
  position: relative;
  border-radius: 10px 10px 0 0;
  border: 1px solid var(--line);
  border-bottom: none;
  background: oklch(0.24 0.01 260);
  padding: 10px 10px 0;
  box-shadow: 0 30px 60px oklch(0.05 0.005 260 / 0.5);
}
.mock-laptop::after {
  content: "";
  display: block;
  position: absolute;
  left: -4%; right: -4%; bottom: -9px;
  height: 9px;
  border-radius: 0 0 10px 10px;
  background: linear-gradient(oklch(0.32 0.01 260), oklch(0.2 0.01 260));
}
.mock-laptop__screen {
  border-radius: 5px 5px 0 0;
  overflow: hidden;
  aspect-ratio: 16 / 10;
}

.mock-phone {
  position: absolute;
  right: -4%;
  bottom: -8%;
  width: 24%;
  min-width: 74px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: oklch(0.24 0.01 260);
  padding: 5px;
  box-shadow: 0 20px 44px oklch(0.05 0.005 260 / 0.55);
  z-index: 2;
}
.mock-phone__screen {
  border-radius: 10px;
  overflow: hidden;
  aspect-ratio: 9 / 19;
}
.mock-phone__notch {
  position: absolute;
  top: 9px; left: 50%;
  translate: -50% 0;
  width: 34%; height: 4px;
  border-radius: 999px;
  background: oklch(0.1 0.005 260 / 0.8);
  z-index: 2;
}

/* ---------- Miniatur-Seiten in den Mockups ---------- */
.mini {
  width: 100%;
  height: 100%;
  background: var(--m-bg);
  color: var(--m-ink);
  font-family: var(--m-font);
  display: flex;
  flex-direction: column;
  padding: 7% 8%;
  position: relative;
  overflow: hidden;
  container-type: inline-size;
}
.mini__nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: clamp(5px, 3.2cqw, 11px);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.9;
}
.mini__nav i {
  display: inline-block;
  width: clamp(10px, 8cqw, 26px);
  height: 1px;
  background: currentColor;
  opacity: 0.5;
}
.mini__hero { margin: auto 0; position: relative; z-index: 1; }
.mini__kicker {
  font-size: clamp(4px, 2.6cqw, 9px);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--m-accent);
  margin-bottom: 0.5em;
}
.mini__title {
  font-size: clamp(11px, 8.5cqw, 34px);
  line-height: 1.05;
  font-weight: 500;
  max-width: 12ch;
  text-wrap: balance;
}
.mini__sub {
  font-size: clamp(4.5px, 2.8cqw, 10px);
  color: var(--m-soft);
  margin-top: 0.9em;
  max-width: 30ch;
  font-family: var(--font-body);
}
.mini__cta {
  display: inline-block;
  width: fit-content;
  margin-top: 1.4em;
  font-size: clamp(4.5px, 2.8cqw, 10px);
  font-family: var(--font-body);
  letter-spacing: 0.06em;
  background: var(--m-accent);
  color: var(--m-bg);
  border-radius: 999px;
  padding: 0.7em 1.6em;
}
.mini__footer {
  display: flex;
  gap: 4%;
  margin-top: auto;
}
.mini__block {
  flex: 1;
  height: clamp(8px, 9cqw, 30px);
  border-radius: 3px;
  background: var(--m-surface);
  border: 1px solid color-mix(in oklch, var(--m-soft) 25%, transparent);
}
.mini__block--accent { background: color-mix(in oklch, var(--m-accent) 30%, var(--m-surface)); }

/* Reichere Variante für den Hero-Bildschirm */
.mini--rich { padding: 5% 6%; }
.mini--rich .mini__title { font-size: clamp(12px, 9cqw, 30px); }
.mini__navlinks { display: inline-flex; gap: clamp(4px, 2.4cqw, 9px); }
.mini__navlinks i {
  display: block;
  width: clamp(9px, 5cqw, 20px);
  height: clamp(2px, 0.9cqw, 3px);
  border-radius: 2px;
  background: currentColor;
  opacity: 0.35;
}
.mini__cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3.5%;
  margin-top: auto;
}
.mini__card {
  height: clamp(14px, 13cqw, 44px);
  border-radius: 4px;
  background: var(--m-surface);
  border: 1px solid color-mix(in oklch, var(--m-soft) 22%, transparent);
  position: relative;
  overflow: hidden;
}
.mini__card::after {
  content: "";
  position: absolute;
  left: 12%; right: 42%; top: 22%;
  height: clamp(2px, 1.1cqw, 4px);
  border-radius: 2px;
  background: color-mix(in oklch, var(--m-ink) 28%, transparent);
}
.mini__card--accent {
  background: color-mix(in oklch, var(--m-accent) 26%, var(--m-surface));
  border-color: color-mix(in oklch, var(--m-accent) 45%, transparent);
}

/* Neutrale Licht-Atmosphäre im Mockup (BySamox-Lichtspalt) */
.mini--neutral::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, transparent 68%, oklch(0.93 0.02 250 / 0.35) 69%, oklch(0.93 0.02 250 / 0.03) 71%, transparent 80%),
    radial-gradient(60% 50% at 74% 60%, oklch(0.3 0.016 250 / 0.5), transparent 60%);
}

/* Monogramme */
.monogram {
  display: inline-grid;
  place-items: center;
  width: clamp(14px, 10cqw, 40px);
  aspect-ratio: 1;
  border: 1px solid var(--m-accent);
  border-radius: 50%;
  color: var(--m-accent);
  font-family: var(--m-font);
  font-size: clamp(6px, 4cqw, 16px);
  letter-spacing: 0.02em;
}
.monogram--square { border-radius: 3px; }

.work__note {
  margin-top: 3rem;
  color: var(--ink-soft);
  font-size: 1.0625rem;
  max-width: 70ch;
}
.work__note a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;          /* volle Trefferfläche für Touch */
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--accent);
  transition: color var(--dur-fast) var(--ease-out);
}
.work__note a:hover { color: var(--beam); }

/* ============================================================
   Leistungen
   ============================================================ */
.services__featured {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.25rem;
  margin-top: 3.5rem;
}

.service-card {
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 1.75rem;
  overflow: hidden;
  transition: transform var(--dur-med) var(--ease-out),
              border-color var(--dur-med) var(--ease-out),
              box-shadow var(--dur-med) var(--ease-out);
}
/* Nur mit echtem Zeiger: auf Touch bliebe der Hover nach dem Tippen kleben */
@media (hover: hover) and (pointer: fine) {
  .service-card:hover {
    transform: translateY(-5px);
    border-color: oklch(0.45 0.02 250);
    box-shadow: 0 20px 40px oklch(0.05 0.005 260 / 0.4);
  }
}
.service-card h3 {
  font-size: var(--text-h3);
  font-weight: 500;
  margin-bottom: 0.6rem;
}
.service-card p { color: var(--ink-soft); font-size: 1rem; }

/* ---------- Leistungsbilder ---------- */
.service-card__media,
.feature__media {
  position: relative;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--bg-deep);
  aspect-ratio: 16 / 10;
}
.service-card__media { margin-bottom: 1.5rem; }
.feature__media { border-radius: var(--radius-md); }

.service-card__media img,
.feature__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.015);
  transition: transform 1.1s var(--ease-soft);
}
.service-card:hover .service-card__media img,
.feature__media:hover img { transform: scale(1.07); }

/* Einbettung in den dunklen Look: Verlauf zur Kartenfläche + Lichtkante */
.service-card__media::after,
.feature__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, oklch(0.12 0.010 260 / 0.28) 0%, transparent 42%, oklch(0.12 0.010 260 / 0.55) 100%),
    linear-gradient(115deg, transparent 62%, oklch(0.93 0.02 250 / 0.10) 70%, transparent 78%);
  pointer-events: none;
}

.services__more-title {
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-top: 4.5rem;
  margin-bottom: 1.75rem;
}

/* Marquee */
.marquee {
  overflow: hidden;
  border-block: 1px solid var(--line-soft);
  padding-block: 1rem;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee + .marquee { border-top: none; }
.marquee__track {
  display: flex;
  gap: 1rem;
  width: max-content;
  animation: marquee 42s linear infinite;
}
.marquee--reverse .marquee__track { animation-direction: reverse; animation-duration: 52s; }
.marquee:hover .marquee__track { animation-play-state: paused; }
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.marquee__track span {
  flex-shrink: 0;
  font-size: 0.9375rem;
  color: var(--ink-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  padding: 0.45rem 1.1rem;
  transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.marquee__track span:hover { color: var(--ink); border-color: var(--accent); }

/* ============================================================
   Pakete
   ============================================================ */
.pricing__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 1.25rem;
  margin-top: 3.5rem;
  align-items: start;
}

.price-card {
  position: relative;
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 2.25rem 2rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  transition: transform var(--dur-med) var(--ease-out),
              border-color var(--dur-med) var(--ease-out),
              filter var(--dur-slow) var(--ease-out),
              opacity var(--dur-slow) var(--ease-out);
}
.price-card:hover { border-color: oklch(0.45 0.02 250); }

.price-card--featured {
  background: var(--bg-overlay);
  border-color: transparent;
  box-shadow: 0 0 70px oklch(0.85 0.06 250 / 0.13);
}
/* Rotierende Lichtkante um das empfohlene Paket */
.price-card--featured::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: var(--radius-md);
  padding: 1px;
  background: conic-gradient(from var(--ang),
    oklch(0.85 0.06 250 / 0.15) 0%,
    var(--accent) 12%,
    oklch(0.93 0.02 250 / 0.9) 18%,
    var(--accent) 24%,
    oklch(0.85 0.06 250 / 0.15) 40%,
    oklch(0.85 0.06 250 / 0.15) 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  animation: border-spin 7s linear infinite;
  pointer-events: none;
}
@keyframes border-spin { to { --ang: 360deg; } }
@supports not (background: conic-gradient(from var(--ang), red, blue)) {
  .price-card--featured { border-color: var(--accent); }
  .price-card--featured::after { display: none; }
}

.price-card__badge {
  position: absolute;
  top: -0.8rem;
  left: 50%;
  transform: translateX(-50%);
  background: var(--accent);
  color: var(--accent-ink);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  padding: 0.3rem 1rem;
  border-radius: var(--radius-pill);
  white-space: nowrap;
  z-index: 2;
}

.price-card__head h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.125rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.price-card__price {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2.5rem, 3.5vw, 3.25rem);
  line-height: 1.1;
  margin-top: 0.5rem;
}
.price-card__note { color: var(--ink-soft); font-size: 0.9375rem; margin-top: 0.25rem; }

.price-card__list {
  list-style: none;
  display: grid;
  gap: 0.65rem;
  flex-grow: 1;
}
.price-card__list li {
  padding-left: 1.5rem;
  position: relative;
  color: var(--ink-soft);
  font-size: 1rem;
}
.price-card__list li::before {
  content: "—";
  position: absolute;
  left: 0;
  color: var(--accent);
}
.price-card__list li strong { color: var(--ink); font-weight: 500; }

/* ============================================================
   Prozess
   ============================================================ */
.process__grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: start;
}
.process__intro { position: sticky; top: 7rem; }

.timeline {
  list-style: none;
  position: relative;
  display: grid;
  gap: 2.75rem;
  padding-left: 0;
}
.timeline::before {
  content: "";
  position: absolute;
  left: 21px;
  top: 8px;
  bottom: 8px;
  width: 1px;
  background: var(--line);
}
.timeline::after {
  content: "";
  position: absolute;
  left: 21px;
  top: 8px;
  bottom: 8px;
  width: 1px;
  background: linear-gradient(var(--beam), var(--accent));
  transform-origin: top;
  transform: scaleY(var(--timeline-p, 0));
  transition: transform 0.2s linear;
}

.timeline__step {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 1.5rem;
  align-items: start;
}
.timeline__num {
  position: relative;
  z-index: 1;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--bg);
  border: 1px solid var(--line);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1rem;
  transition: border-color 0.4s var(--ease-out),
              color 0.4s var(--ease-out),
              box-shadow 0.4s var(--ease-out),
              transform 0.4s var(--ease-out);
}
.timeline__step.is-active .timeline__num {
  border-color: var(--accent);
  color: var(--beam);
  box-shadow: 0 0 22px oklch(0.85 0.06 250 / 0.35);
  transform: scale(1.08);
}
.timeline__step h3 { font-size: var(--text-h3); font-weight: 500; margin-bottom: 0.4rem; }
.timeline__step p { color: var(--ink-soft); max-width: 52ch; }

/* ============================================================
   Argumente
   ============================================================ */
.argument__grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: start;
}
.argument__sticky { position: sticky; top: 7rem; }

.argument__rows { display: grid; }
.argument__row {
  position: relative;
  padding-block: 2.75rem;
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 1.75rem;
  align-items: start;
  transition: opacity 0.5s var(--ease-out);
}
.argument__row:last-of-type { border-bottom: 1px solid var(--line); }

.argument__num {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2.25rem, 3.5vw, 3.25rem);
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px var(--line);
  transition: color 0.5s var(--ease-out), -webkit-text-stroke-color 0.5s var(--ease-out);
}
.argument__row.is-focus .argument__num {
  color: var(--beam);
  -webkit-text-stroke-color: transparent;
}
.argument__row h3 {
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1.3;
  margin-bottom: 0.6rem;
}
.argument__row p { color: var(--ink-soft); max-width: 55ch; }

/* ============================================================
   FAQ
   ============================================================ */
.faq__grid {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: start;
}

.faq__list { display: grid; }
.faq__item {
  border-top: 1px solid var(--line);
  transition: background-color var(--dur-med) var(--ease-out);
}
.faq__item:last-child { border-bottom: 1px solid var(--line); }
.faq__item.is-open { background: oklch(0.16 0.012 260 / 0.55); }

.faq__h { margin: 0; }
.faq__q {
  all: unset;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  width: 100%;
  cursor: pointer;
  padding: 1.5rem 0.75rem;
  font-family: var(--font-body);
  font-size: 1.125rem;
  font-weight: 500;
  color: var(--ink);
  transition: color var(--dur-fast) var(--ease-out);
}
.faq__q:hover { color: var(--beam); }
.faq__q:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
  border-radius: var(--radius-sm);
}

.faq__icon {
  position: relative;
  flex-shrink: 0;
  width: 18px; height: 18px;
}
.faq__icon::before, .faq__icon::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 16px; height: 1.5px;
  background: var(--ink-soft);
  translate: -50% -50%;
  transition: rotate var(--dur-med) var(--ease-out), background-color var(--dur-med);
}
.faq__icon::after { rotate: 90deg; }
.faq__item.is-open .faq__icon::before { background: var(--beam); }
.faq__item.is-open .faq__icon::after { rotate: 0deg; background: var(--beam); }

.faq__a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.45s var(--ease-out);
}
.faq__item.is-open .faq__a { grid-template-rows: 1fr; }
.faq__a-inner {
  overflow: hidden;
  visibility: hidden;
  transition: visibility 0s 0.45s;
}
.faq__item.is-open .faq__a-inner { visibility: visible; transition: visibility 0s; }
.faq__a-inner p {
  color: var(--ink-soft);
  padding: 0 0.75rem 1.75rem;
  max-width: 65ch;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.4s var(--ease-out), transform 0.4s var(--ease-out);
}
.faq__item.is-open .faq__a-inner p { opacity: 1; transform: translateY(0); transition-delay: 0.12s; }

/* ============================================================
   Kontakt
   ============================================================ */
.contact { overflow: clip; }
.contact__beam {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, transparent 0%, transparent 8%, oklch(0.93 0.02 250 / 0.35) 8.5%, oklch(0.93 0.02 250 / 0.02) 10%, transparent 18%),
    radial-gradient(100% 80% at 10% 50%, oklch(0.3 0.015 250 / 0.35), transparent 55%);
  pointer-events: none;
}

.contact__head { position: relative; margin-bottom: 4rem; }
.contact__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2rem, 4.5vw + 0.5rem, 4.25rem);
  line-height: 1.07;
  letter-spacing: -0.01em;
  max-width: 18ch;
}

.contact__grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: start;
}

.contact__channels {
  list-style: none;
  display: grid;
  gap: 1.5rem;
}
.contact__channel-label {
  display: block;
  font-size: var(--text-small);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
  font-weight: 500;
  margin-bottom: 0.2rem;
}
.contact__channels a {
  font-size: 1.25rem;
  text-decoration: none;
  color: var(--ink);
}
.contact__channels a {
  border-bottom: 1px solid var(--line);
  transition: border-color var(--dur-fast) var(--ease-out);
}
.contact__channels a:hover { border-color: var(--accent); }

.contact__form {
  display: grid;
  gap: 1.4rem;
  background: oklch(0.16 0.012 260 / 0.75);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: clamp(1.5rem, 3vw, 2.5rem);
}

/* Honeypot */
.hp-field {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

.form-field { position: relative; display: grid; gap: 0.45rem; }

.form-label-static { font-size: 0.9375rem; font-weight: 500; }

.form-field input,
.form-field select,
.form-field textarea {
  width: 100%;
  min-width: 0;
  background: var(--bg-overlay);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1rem;
  padding: 0.85rem 1rem;
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.form-field textarea { resize: vertical; }

.form-field input:focus-visible,
.form-field select:focus-visible,
.form-field textarea:focus-visible {
  outline: 2px solid transparent;   /* Platzhalter, siehe forced-colors unten */
  outline-offset: 0;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px oklch(0.85 0.06 250 / 0.18);
}

/* Windows-Kontrastmodus entfernt Rahmen- und Schattenfarben. Ohne echten
   Umriss wäre dort gar nicht erkennbar, welches Feld den Fokus hat. */
@media (forced-colors: active) {
  .form-field input:focus-visible,
  .form-field select:focus-visible,
  .form-field textarea:focus-visible {
    outline: 2px solid Highlight;
    outline-offset: 2px;
  }
}

/* Floating Labels */
.form-field--float { padding-top: 0; }
.form-field--float input, .form-field--float textarea { padding-top: 1.5rem; padding-bottom: 0.55rem; }
.form-field--float label {
  position: absolute;
  left: 1rem;
  top: 1.05rem;
  color: var(--ink-soft);
  font-size: 1rem;
  pointer-events: none;
  transform-origin: 0 0;
  transition: transform var(--dur-med) var(--ease-out), color var(--dur-med) var(--ease-out);
}
.form-field--float input:focus ~ label,
.form-field--float input:not(:placeholder-shown) ~ label,
.form-field--float textarea:focus ~ label,
.form-field--float textarea:not(:placeholder-shown) ~ label {
  transform: translateY(-0.62rem) scale(0.74);
  color: var(--ink-faint);
}
.form-field--float input:focus ~ label,
.form-field--float textarea:focus ~ label { color: var(--accent); }

.form-field.is-error input,
.form-field.is-error textarea { border-color: oklch(0.62 0.19 25); }
.form-error {
  font-size: var(--text-small);
  color: oklch(0.74 0.16 25);
}

.form-check {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.7rem;
  align-items: start;
}
.form-check input[type="checkbox"] {
  /* 24px ist das Mindestmaß für Klickziele nach WCAG 2.2 (2.5.8) */
  width: 24px; height: 24px;
  margin-top: 0.1rem;
  accent-color: oklch(0.85 0.06 250);
  cursor: pointer;
  flex-shrink: 0;
}
.form-check label {
  font-size: 0.9375rem;
  color: var(--ink-soft);
  cursor: pointer;
}
.form-check label a { color: var(--ink); }
.form-check .form-error { grid-column: 2; }
.form-check.is-error label { color: oklch(0.74 0.16 25); }

.form-success {
  font-size: 1rem;
  color: var(--beam);
  background: oklch(0.20 0.014 260);
  border: 1px solid var(--accent);
  border-radius: var(--radius-sm);
  padding: 0.9rem 1.1rem;
}
.form-success a { color: var(--beam); }

.contact__form-note {
  font-size: var(--text-small);
  color: var(--ink-faint);
  text-align: center;
}
.contact__form-note a { color: var(--ink-soft); }

/* ============================================================
   Footer
   ============================================================ */
.footer {
  border-top: 1px solid var(--line);
  padding-block: 3.5rem;
  position: relative;
}
.footer__inner {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 2.5rem;
}
.footer__wordmark {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: 0.18em;
  font-size: 1.125rem;
}
.footer__tagline { color: var(--ink-soft); margin-top: 0.75rem; font-size: 0.9375rem; }

/* Demoversion-Link in der Fußzeile: eigene Trefferfläche für Touch */
.footer__cta {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-top: 0.5rem;
  color: var(--ink);
  text-decoration: none;
  font-weight: 500;
  border-bottom: 1px solid var(--accent);
  transition: color var(--dur-fast) var(--ease-out);
}
.footer__cta:hover { color: var(--beam); }

.footer__nav, .footer__legal { display: grid; gap: 0.6rem; align-content: start; }
.footer__nav a, .footer__legal a {
  text-decoration: none;
  color: var(--ink-soft);
  font-size: 0.9375rem;
  width: fit-content;
  transition: color var(--dur-fast) var(--ease-out);
}
.footer__nav a:hover, .footer__legal a:hover { color: var(--ink); }
.footer__legal p { color: var(--ink-faint); font-size: 0.875rem; margin-top: 0.5rem; }

/* ============================================================
   Rechtsseiten
   ============================================================ */
.legal-page {
  padding-block: 10rem 6rem;
  max-width: 72ch;
}
.legal-page h1 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-h2);
  text-transform: uppercase;
  margin-bottom: 2rem;
}
.legal-page h2 { font-size: 1.375rem; font-weight: 500; margin: 2.5rem 0 0.75rem; }
.legal-page p { color: var(--ink-soft); margin-bottom: 1rem; }

/* ============================================================
   Mehrseitige Struktur: Seitenübergänge & Unterseiten-Hero
   ============================================================ */
/* Seitenübergang auf den Inhalt legen, nicht auf den body.
   Wichtig: Ein transform auf einem Vorfahren macht position: fixed
   relativ zu diesem Vorfahren. Läge die Animation auf dem body,
   würde die fixierte Navigation beim Scrollen mit nach oben wandern. */
.js main,
.js .footer { animation: page-enter 0.5s var(--ease-out) both; }
.js .footer { animation-delay: 0.06s; }
@keyframes page-enter {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
body.is-exiting main,
body.is-exiting .footer {
  animation: page-exit 0.22s var(--ease-out) both;
}
body.is-exiting .nav { opacity: 0; transition: opacity 0.18s var(--ease-out); }
@keyframes page-exit {
  to { opacity: 0; transform: translateY(-10px); }
}

.nav__links a[aria-current="page"] { color: var(--ink); }
.nav__links a[aria-current="page"]::after {
  transform: scaleX(1);
  transform-origin: 0 50%;
}

.page-hero {
  position: relative;
  padding-block: clamp(9rem, 22vh, 14rem) clamp(3rem, 8vh, 5rem);
  overflow: clip;
}
.page-hero__beam {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, transparent 0%, transparent 84%, oklch(0.93 0.02 250 / 0.5) 84.5%, oklch(0.93 0.02 250 / 0.04) 86%, transparent 94%),
    radial-gradient(90% 90% at 88% 30%, oklch(0.3 0.016 250 / 0.45), transparent 60%);
  pointer-events: none;
}
.page-hero__title {
  position: relative;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2.5rem, 5.5vw + 0.5rem, 5rem);
  line-height: 1.06;
  letter-spacing: -0.01em;
  max-width: 18ch;
}
.page-hero__lead {
  position: relative;
  color: var(--ink-soft);
  font-size: 1.1875rem;
  max-width: 56ch;
  margin-top: 1.5rem;
}

/* ---------- Sektions-Header mit Link rechts ---------- */
.section__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
}
.section__morelink {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;          /* volle Trefferfläche für Touch */
  color: var(--ink-soft);
  text-decoration: none;
  font-weight: 500;
  border-bottom: 1px solid var(--line);
  padding-bottom: 2px;
  white-space: nowrap;
  transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.section__morelink:hover { color: var(--beam); border-color: var(--accent); }

/* ---------- Leistungen-Seite: Feature-Blöcke ---------- */
.feature {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
  padding-block: clamp(3rem, 7vh, 5rem);
}
.feature + .feature { border-top: 1px solid var(--line-soft); }
.feature:nth-child(even) .feature__stage { order: -1; }

.feature__stage {
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
}

.feature h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.5rem, 2.4vw, 2.125rem);
  letter-spacing: 0;
}
.feature__body p { color: var(--ink-soft); margin-top: 1rem; max-width: 52ch; }
.feature__points {
  list-style: none;
  margin-top: 1.5rem;
  display: grid;
  gap: 0.6rem;
}
.feature__points li {
  position: relative;
  padding-left: 1.5rem;
  color: var(--ink-soft);
}
.feature__points li::before {
  content: "—";
  position: absolute;
  left: 0;
  color: var(--accent);
}

/* ---------- Home: kompakte Prozess-Vorschau ---------- */
.process-mini {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.25rem;
  margin-top: 3rem;
  counter-reset: pstep;
}
.process-mini__step {
  position: relative;
  border-top: 1px solid var(--line);
  padding-top: 1.25rem;
  counter-increment: pstep;
}
.process-mini__step::before {
  content: counter(pstep, decimal-leading-zero);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--accent);
}
.process-mini__step h3 { font-size: 1.125rem; font-weight: 500; margin-top: 0.5rem; }
.process-mini__step p { color: var(--ink-soft); font-size: 0.9375rem; margin-top: 0.4rem; }

/* ---------- Finale CTA-Sektion (Home) ---------- */
.closer {
  position: relative;
  text-align: center;
  padding-block: clamp(6rem, 14vh, 10rem);
  overflow: clip;
}
.closer__beam {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, transparent 44%, oklch(0.93 0.02 250 / 0.4) 50%, transparent 56%),
    radial-gradient(60% 60% at 50% 100%, oklch(0.32 0.016 250 / 0.4), transparent 65%);
  pointer-events: none;
}
.closer h2 {
  position: relative;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2rem, 4.5vw + 0.5rem, 4.25rem);
  line-height: 1.07;
  max-width: 20ch;
  margin-inline: auto;
}
.closer p {
  position: relative;
  color: var(--ink-soft);
  font-size: 1.125rem;
  max-width: 48ch;
  margin: 1.25rem auto 2.25rem;
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1024px) {
  .why__grid, .process__grid, .contact__grid, .argument__grid { grid-template-columns: 1fr; }
  .why__media { position: static; max-width: 480px; }
  .process__intro, .argument__sticky { position: static; }
  .faq__grid { grid-template-columns: 1fr; gap: 2rem; }
  .footer__inner { grid-template-columns: 1fr 1fr; }

  .demo__grid { grid-template-columns: minmax(0, 1fr); }
  .demo__stage { max-width: 560px; }

  /* Hero: Gerät rückt unter den Text, etwas kleiner und ruhiger */
  .hero__inner { padding-block: 7rem 5rem; }
  .hero__text { max-width: none; }
  .hero__stage { max-width: 520px; margin-inline: auto; width: 100%; }
  .hero-chip { font-size: 0.75rem; padding: 0.4rem 0.8rem; }
  .hero-chip--3, .hero-chip--5 { display: none; }
  .hero-chip--1 { left: -2%; }
  .hero-chip--2 { right: -2%; }
  .hero-chip--4 { right: 0; }
  .feature, .feature:nth-child(even) { grid-template-columns: 1fr; }
  .feature:nth-child(even) .feature__stage { order: 0; }
}

@media (max-width: 760px) {
  .nav__links {
    position: fixed;
    inset: 0;
    background: oklch(0.10 0.008 260 / 0.96);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    clip-path: circle(0px at calc(100% - 42px) 42px);
    visibility: hidden;
    transition: clip-path 0.65s var(--ease-out), visibility 0s 0.65s;
  }
  .nav__links.is-open {
    clip-path: circle(150% at calc(100% - 42px) 42px);
    visibility: visible;
    transition: clip-path 0.65s var(--ease-out), visibility 0s;
  }
  .nav__links a {
    font-size: 1.5rem;
    color: var(--ink);
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.45s var(--ease-out), transform 0.45s var(--ease-out), color var(--dur-fast);
  }
  .nav__links.is-open a {
    opacity: 1;
    transform: translateY(0);
    transition-delay: calc(0.15s + var(--li, 0) * 60ms);
  }
  .nav__links-cta { display: block; color: var(--beam) !important; }
  .nav__toggle { display: flex; }
  .btn--nav { display: none; }
  .nav__inner { justify-content: space-between; }


  .mock-phone { right: 2%; bottom: -6%; }
  .to-top { width: 44px; height: 44px; }

  /* Lange CTA-Labels dürfen auf schmalen Screens umbrechen */
  .btn--lg, .btn--block { white-space: normal; text-align: center; }

  /* Marquee auf Mobile langsamer und gut lesbar */
  .trust__track { animation-duration: 48s; }

  /* Hero-Bühne auf schmalen Bildschirmen: weniger Effektlast */
  .hero__stage { max-width: 380px; }
  .device { transform: rotateX(4deg) rotateY(-6deg); }
  .hero-chip--4 { display: none; }
  .hero-chip--1 { top: -3%; left: 0; }
  .hero-chip--2 { top: auto; bottom: 2%; right: 0; }
  .hero__grid { height: 32vh; opacity: 0.35; }
  .hero__dust i:nth-child(n+5) { display: none; }
  .demo__chip--2 { right: 0; }
  .demo__chip--1 { left: 0; }

  .argument__row { padding-block: 2rem; gap: 1.1rem; }

  .footer__inner { grid-template-columns: 1fr; gap: 2rem; }

  .hero__scrollhint { display: none; }
}

/* ============================================================
   Wisch-Karussell auf schmalen Bildschirmen

   Leistungs- und Paketkarten liegen auf dem Handy nicht mehr
   untereinander, sondern nebeneinander zum Wischen. Die erste
   Karte ist vollständig sichtbar, die nächste angeschnitten,
   damit sofort erkennbar ist, dass es weitergeht.

   Umgesetzt mit nativem Scroll-Snap: das läuft auf der GPU des
   Browsers, ist ruckelfrei und braucht kein JavaScript.
   ============================================================ */
/* Hinweis ist nur im Karussell sinnvoll, Standard also aus */
.swipe-hint { display: none; }

@media (max-width: 760px) {
  .services__featured,
  .pricing__grid {
    display: flex;
    flex-wrap: nowrap;
    /* Hebt das Grid der Desktop-Ansicht sicher auf */
    grid-template-columns: none;
    gap: 0.9rem;
    overflow-x: auto;
    overflow-y: visible;
    scroll-snap-type: x mandatory;
    /* Platz oben für das Badge der empfohlenen Karte, unten für Schatten */
    padding-block: 1rem 0.5rem;
    margin-block: -1rem -0.5rem;
    /* Wischen soll nicht die ganze Seite mitziehen */
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    /* Bildlaufleiste ausblenden, gewischt wird mit dem Finger */
    scrollbar-width: none;
  }
  .services__featured { margin-top: 2.5rem; }
  .pricing__grid { margin-top: 2.5rem; }
  .services__featured::-webkit-scrollbar,
  .pricing__grid::-webkit-scrollbar { display: none; }

  /* Der Container ist per Tastatur anwählbar (tabindex="0"), damit das
     Karussell auch mit den Pfeiltasten bedient werden kann. Dann muss der
     Fokus aber auch sichtbar sein, ohne vom Überlauf beschnitten zu werden. */
  .services__featured:focus-visible,
  .pricing__grid:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
    border-radius: var(--radius-md);
  }

  .service-card,
  .price-card {
    /* Feste Breite, kein Schrumpfen, kein Umbruch: 78 % der Spaltenbreite
       lässt die erste Karte vollständig stehen und schneidet die zweite
       deutlich sichtbar an. Prozent statt vw, weil die Spalte seitliches
       Padding hat: 85vw wäre breiter als die Spalte und würde die
       Nachbarkarte auf wenige Pixel zusammenquetschen. */
    flex: 0 0 78%;
    min-width: 78%;
    max-width: 78%;
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }

  /* Karten gleich hoch, damit beim Wischen nichts springt.
     Flexbox streckt von selbst, height: 100% wäre hier sogar schädlich. */
  .service-card,
  .price-card { height: auto; align-self: stretch; }

  /* Die empfohlene Karte nicht mehr hervorheben durch Verschiebung,
     das würde beim Wischen unruhig wirken */
  .price-card--featured { box-shadow: 0 0 40px oklch(0.85 0.06 250 / 0.1); }

  /* Kein Tilt-Effekt beim Wischen: das JS setzt sonst transform
     auf Karten, die gerade bewegt werden */
  .service-card[data-tilt],
  .price-card[data-tilt] { transform: none !important; }

  /* Hinweis unter dem Karussell */
  .swipe-hint {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1.25rem;
    font-size: var(--text-small);
    color: var(--ink-faint);
    letter-spacing: 0.04em;
  }
  .swipe-hint::after {
    content: "";
    width: 26px;
    height: 1px;
    background: linear-gradient(90deg, var(--accent), transparent);
  }
}

/* ============================================================
   Sicherheitsnetz: Endzustand der Einstiegs-Animationen

   Wird per JavaScript gesetzt, sobald alle Einstiegs-Animationen
   durchgelaufen sein müssten. Verhindert, dass Inhalte unsichtbar
   bleiben, falls eine Animation nicht startet oder stockt.
   Die Werte entsprechen exakt dem jeweiligen Endbild, es gibt
   also keinen Sprung, wenn die Animation normal gelaufen ist.
   ============================================================ */
.anim-safe main,
.anim-safe .footer,
.anim-safe .hero__tag,
.anim-safe .hero__sub,
.anim-safe .hero__cta,
.anim-safe .hero__trust,
.anim-safe .hero__stage,
.anim-safe .hero__reflection {
  animation: none;
  opacity: 1;
  transform: none;
}
.anim-safe .hero__beam {
  animation: beam-breathe 18s var(--ease-soft) infinite alternate;
  opacity: 1;
  transform: none;
}
.anim-safe .hero__word {
  animation: none;
  opacity: 1;
  transform: none;
  filter: none;
  letter-spacing: -0.005em;
}
.anim-safe .hero__accent { animation: none; background-size: 100% 2px; }
/* Auf Touch bleibt der Strahl ruhig, wie im Block weiter unten festgelegt */
@media (hover: none), (max-width: 900px) {
  .anim-safe .hero__beam { animation: none; }
}

/* ============================================================
   Stabilität auf Touch-Geräten

   Auf Smartphones und Tablets liefen im Hero zu viele
   GPU-Effekte gleichzeitig: mehrere Blur-Ebenen, ein
   3D-Kontext und animierte backdrop-filter. Besonders
   backdrop-filter auf bewegten Elementen zwingt den Browser,
   den Hintergrund pro Bild neu zu rendern. Auf schwächeren
   Grafikeinheiten führt das zu sichtbarem Flackern.

   Deshalb hier: Aussehen bleibt, Dauerbewegung und die
   teuersten Filter werden abgeschaltet. Der Einstiegs-Effekt
   beim Laden bleibt erhalten.
   ============================================================ */
@media (hover: none), (max-width: 900px) {
  /* Karten: echtes Glas kostet zu viel, solide Fläche sieht gleich aus */
  .hero-chip {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: oklch(0.21 0.014 260 / 0.94);
    animation: none;
    transform: none;
    will-change: auto;
  }

  /* Gerät: kein 3D-Kontext, keine Dauerbewegung */
  .device {
    animation: none;
    transform: rotateX(4deg) rotateY(-6deg);
    transform-style: flat;
    will-change: auto;
  }
  .device__shadow {
    animation: none;
    transform: none;
    filter: blur(9px);
    opacity: 0.75;
  }
  .hero__stage { perspective: none; }

  /* Hintergrundebenen: sichtbar, aber ohne Dauerlast */
  .hero__dust { display: none; }
  .hero__dust i { animation: none; will-change: auto; }
  .hero__grid::before { animation: none; }
  .hero__grid { opacity: 0.32; }
  .hero__beam {
    animation: beam-open 1.3s var(--ease-out) both;
    will-change: auto;
  }
  .hero__reflection { filter: blur(4px); }
  .atmo__layer { animation: none; will-change: auto; }

  /* Cursor-Lichtschein ist auf Touch ohnehin sinnlos */
  .hero__glow { display: none; }

  /* Buttons haben auf Touch keinen Magnet-Effekt, also auch keine
     dauerhafte Grafikebene nötig. Spart Speicher auf schwachen Geräten. */
  .btn { will-change: auto; }

  /* Marquees laufen weiter, aber ruhiger */
  .marquee__track { animation-duration: 60s; }

  /* Gleiches Problem in der Demo-Sektion weiter unten */
  .demo__chip {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: oklch(0.21 0.014 260 / 0.94);
    animation: none;
    transform: none;
  }
  .why__media, .service-card, .price-card { will-change: auto; }
}

/* ============================================================
   Reduced Motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    /* Auch die Verzögerung aufheben, sonst bleiben Texte für die Dauer
       des Delays unsichtbar (animation-fill-mode: both). */
    animation-delay: 0s !important;
    transition-duration: 0.01ms !important;
  }
  /* Hero-Headline sofort im Endzustand, ohne Maskenbewegung */
  .hero__word {
    transform: none;
    filter: none;
    opacity: 1;
    letter-spacing: -0.005em;
  }
  .hero__accent { background-size: 100% 2px; }
  /* Hero-Bühne: alles ruhig, aber vollständig sichtbar */
  .hero__stage { opacity: 1; transform: none; }
  .device { transform: rotateX(6deg) rotateY(-9deg); }
  .device__shadow { transform: none; opacity: 0.7; }
  .hero-chip { transform: none; }
  .hero__dust { display: none; }
  .hero__grid::before { animation: none; }
  .js [data-reveal], .js .price-card[data-reveal] {
    opacity: 1; transform: none; filter: none;
  }
  .js .split-ready .sw { transform: none; }
  .hero__scrollhint, .cursor { display: none !important; }
  .marquee__track { animation: none; flex-wrap: wrap; width: auto; }
  .trust__track { animation: none; width: auto; }
  .trust__group { flex-wrap: wrap; gap: 0.75rem 2rem; padding-right: 0; }
  .trust__group + .trust__group { display: none; }
  .trust__marquee { -webkit-mask-image: none; mask-image: none; }
  .demo__chip { animation: none; }
  .atmo__layer { animation: none; }
  .hero__glow { display: none; }
  .price-card--featured::after { animation: none; }
  .js main, .js .footer,
  body.is-exiting main, body.is-exiting .footer { animation: none; }
  body.is-exiting .nav { opacity: 1; }
}