/* ==========================================================================
   Korvia — Design System
   Modern, futuristisch, schlicht, elegant. Dark-first.
   ========================================================================== */

/* ---- Fonts (self-hosted, kein externer CDN-Call) ---------------------- */
@font-face {
  font-family: "Space Grotesk";
  src: url("../fonts/SpaceGrotesk-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Space Grotesk";
  src: url("../fonts/SpaceGrotesk-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Space Grotesk";
  src: url("../fonts/SpaceGrotesk-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/Inter-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/Inter-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* ---- Design Tokens ---------------------------------------------------- */
:root {
  /* Farben */
  --bg: #0a0c11;
  --bg-elev: #12151e;
  --surface: #171b26;
  --surface-2: #1d2230;
  --border: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.16);
  --text: #f2f4f7;
  --text-2: #a7b0c0;
  --muted: #737d8f;
  --accent: #7c6cff;
  --accent-2: #22d3ee;
  --accent-soft: rgba(124, 108, 255, 0.14);
  --grad: linear-gradient(120deg, #7c6cff 0%, #22d3ee 100%);
  --grad-text: linear-gradient(120deg, #a99bff 0%, #6ee7f5 100%);

  /* Typo */
  --font-display: "Space Grotesk", ui-sans-serif, system-ui, "Segoe UI", sans-serif;
  --font-body: "Inter", ui-sans-serif, system-ui, "Segoe UI", Roboto, sans-serif;

  /* Radius */
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-full: 999px;

  /* Spacing scale (8pt) */
  --s-1: 8px;
  --s-2: 16px;
  --s-3: 24px;
  --s-4: 32px;
  --s-5: 48px;
  --s-6: 64px;
  --s-7: 96px;
  --s-8: 128px;

  /* Layout */
  --maxw: 1120px;
  --nav-h: 68px;

  /* Motion */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.7);
  --glow: 0 0 0 1px var(--border), 0 20px 60px -25px rgba(124, 108, 255, 0.5);
}

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: calc(var(--nav-h) + 16px);
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  color: var(--text-2);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--text);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0;
  font-weight: 600;
}

p { margin: 0; }
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }

::selection { background: rgba(124, 108, 255, 0.35); color: #fff; }

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

/* ---- Layout helpers --------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: 24px;
}

.section { padding-block: var(--s-6); position: relative; }
.section--tight { padding-block: var(--s-5); }

/* Bildslot pro Sektion: liegt hinter dem Inhalt, bricht nichts, falls die Datei fehlt.
   Der dunkle Verlauf sorgt dafür, dass Text immer lesbar bleibt — auch ohne Bild. */
.section-media {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}
.section-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.34;
  filter: contrast(1.05);
}
.section-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, var(--bg) 0%, rgba(10, 9, 8, 0.55) 30%, rgba(10, 9, 8, 0.55) 70%, var(--bg) 100%);
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-2);
  margin-bottom: var(--s-2);
}
.eyebrow::before {
  content: "";
  width: 22px;
  height: 1px;
  background: var(--accent-2);
  opacity: 0.6;
}

/* max-width 860px (vorher 620px): Bei 46.4px Schriftgrösse (Space Grotesk 600,
   Letter-Spacing -0.02em, ab ~1046px Breite erreicht) braucht "Alles, was ein lokaler
   Betrieb braucht." rund 803px und "In vier Schritten zu deinem Auftritt." rund 748px
   (gemessen mit Canvas measureText) — 620px war für beide zu knapp und liess den ersten Satz
   innerhalb seines eigenen inline-block-Elements umbrechen, obwohl daneben Platz frei war.
   860px lässt beiden Luft, bleibt aber deutlich unter der vollen Containerbreite (1120px) —
   die Abschnittsüberschriften bleiben eine eigene, schmalere Spalte. Betrifft nur die drei
   Abschnitte "Was du bekommst", "So läuft's" und "Angebot einlösen"; deren einziger
   Fliesstext (der kurze Einlöse-Hinweis) bleibt bei 860px eine einzelne, kurze Zeile und
   wird nicht zur überlangen Lesezeile. */
.section-head { max-width: 860px; margin-bottom: var(--s-5); }
/* Wichtig: -image statt -background- verwenden, damit Theme-Overrides (z. B. v2.css) das
   Gradient-Bild austauschen können, ohne die background-clip-Deklaration zu resetten.
   Das Kurzform-Property "background" setzt beim Überschreiben implizit background-clip
   zurück auf border-box — das war die Ursache für den unsichtbaren weissen Balken. */
.section-head h2 {
  font-size: clamp(1.9rem, 1.2rem + 2.6vw, 2.9rem);
  margin-bottom: var(--s-2);
  color: var(--text); /* Rückfall, falls background-clip: text nicht greift */
  background-image: linear-gradient(180deg, #ffffff 0%, rgba(255, 255, 255, 0.72) 100%);
  text-wrap: balance;
}
/* Siehe Kommentar bei .hero h1 .line: gleiche Technik für Section-Head-
   Überschriften mit zwei Sätzen (z. B. "… braucht. Nichts Überflüssiges."). */
.section-head h2 .line {
  display: inline-block;
}
@supports (background-clip: text) or (-webkit-background-clip: text) {
  .section-head h2 {
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}
.section-head p { font-size: 1.075rem; }

.gradient-text {
  color: var(--text); /* Rückfall, falls background-clip: text nicht greift */
  background-image: var(--grad-text);
}
/* WICHTIGER BEFUND: text-shadow auf einem Element mit background-clip: text +
   color: transparent lässt Chromium die Füllung selbst fast schwarz rendern, statt nur
   einen Schatten dahinterzulegen — der Verlauf wird dabei praktisch komplett verdeckt.
   Das war die eigentliche Ursache für den unsichtbaren Goldtext, nicht in erster Linie die
   Verlaufsfarbe. Getestet in Isolation (mit/ohne text-shadow, mit/ohne Video) und am
   lebenden Hero: erst das Ersetzen von text-shadow durch filter: drop-shadow() behebt es —
   drop-shadow schattiert die fertig gerenderte (bereits geclippte) Form, statt mit der
   Füllung selbst zu interferieren. text-shadow: none ist nötig, weil .hero h1 sonst seinen
   eigenen text-shadow an dieses Kind vererbt und den Fehler wieder auslöst.
   Gilt nur ab 768px (Video aktiv) — auf Mobil bleibt das Poster unverändert. */
@media (min-width: 768px) {
  .hero h1 .gradient-text {
    text-shadow: none;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.85)) drop-shadow(0 3px 12px rgba(0, 0, 0, 0.6))
      drop-shadow(0 7px 30px rgba(0, 0, 0, 0.5));
  }
}
@supports (background-clip: text) or (-webkit-background-clip: text) {
  .gradient-text {
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}

/* ---- Buttons ---------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.98rem;
  padding: 14px 24px;
  border-radius: var(--r-full);
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.18s var(--ease), box-shadow 0.25s var(--ease),
    background 0.25s var(--ease), border-color 0.25s var(--ease);
  min-height: 48px;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px) scale(0.99); }

.btn--primary {
  background: var(--grad);
  color: #080a0f;
  box-shadow: 0 12px 30px -12px rgba(124, 108, 255, 0.7);
}
.btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 44px -12px rgba(90, 200, 245, 0.6);
}
.btn--ghost {
  background: rgba(255, 255, 255, 0.02);
  border-color: var(--border-strong);
  color: var(--text);
}
.btn--ghost:hover {
  border-color: var(--accent);
  background: var(--accent-soft);
  transform: translateY(-2px);
}
.btn svg { width: 18px; height: 18px; }

/* ---- Navigation ------------------------------------------------------- */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  height: var(--nav-h);
  z-index: 100;
  display: flex;
  align-items: center;
  transition: background 0.3s var(--ease), border-color 0.3s var(--ease);
  border-bottom: 1px solid transparent;
}
.nav.is-scrolled {
  background: rgba(10, 12, 17, 0.72);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  border-bottom-color: var(--border);
}
.nav .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.nav-links {
  display: flex;
  align-items: center;
  gap: var(--s-4);
}
.nav-links a:not(.btn) {
  font-size: 0.95rem;
  color: var(--text-2);
  transition: color 0.2s var(--ease);
}
.nav-links a:not(.btn):hover { color: var(--text); }
.nav-links .btn { padding: 10px 20px; min-height: 42px; }

.brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.28rem;
  color: var(--text);
  letter-spacing: -0.01em;
}
.brand .logo-mark { width: 30px; height: 30px; }

.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  width: 44px;
  height: 44px;
  color: var(--text);
  cursor: pointer;
  align-items: center;
  justify-content: center;
}

/* ---- Hero ------------------------------------------------------------- */
.hero {
  position: relative;
  /* Ohne den entfernten Badge braucht die Überschrift wieder einen eigenen Abstand
     zur Nav, sonst klafft oben ein Loch bzw. sitzt sie zu hoch/tief. */
  padding-top: calc(var(--nav-h) + var(--s-6) + var(--s-4));
  padding-bottom: var(--s-6);
  overflow: hidden;
}

/* Videoslot: liegt hinter Aurora + Lichtband, bricht nichts, falls die Datei fehlt.
   Auf Mobil (< 768px) oder bei reduzierter Bewegung greift keine <source> — dann zeigt
   das Element nur sein poster-Bild, es wird kein Video geladen. Basiswerte hier sind
   unverändert die des Posters (Mobil bleibt exakt wie es war); die Bildausschnitt-,
   Helligkeits- und Verlaufs-Nachbesserung greift erst ab 768px, wo tatsächlich das
   Video läuft. */
.hero-media {
  position: absolute;
  inset: 0;
  z-index: -3;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.58;
  filter: contrast(1.05) saturate(1.02);
  pointer-events: none;
  background: var(--bg);
}
.hero::after {
  /* Basis (Mobil/Poster, unverändert): flächiger Verlauf, wie er vor der
     Nachbesserung war. Ab 768px wird das unten durch die gerichtete Vignette
     überschrieben, die kräftig in der Textspalte ist und an den Rändern
     schwächer, statt gleichmässig über allem zu liegen. */
  content: "";
  position: absolute;
  inset: 0;
  z-index: -3;
  background: linear-gradient(180deg, var(--bg) 0%, rgba(6, 6, 8, 0.88) 42%, rgba(6, 6, 8, 0.82) 68%, var(--bg) 100%);
  pointer-events: none;
}

/* Ab hier: Video ist tatsächlich aktiv (siehe <source media="(min-width: 768px)...">).
   Mobil/Poster bleibt unangetastet oberhalb dieser Grenze. */
@media (min-width: 768px) {
  .hero-media {
    /* Bildausschnitt bewusst gewählt: Rabe liegt im Quellmaterial etwa bei 10–43 % der
       Breite (Flug von links nach Bildmitte); 22 % Position hält ihn mit Rand sichtbar
       und zeigt zugleich mehr Küste/Wald rechts davon, statt ihn mittig wegzuschneiden. */
    object-position: 22% 42%;
    opacity: 0.74;
    filter: contrast(1.05) saturate(1.04) brightness(0.94);
  }
  .hero::after {
    /* Ganzflächige, weiche Abdunklung statt gerichteter Vignette (die als sichtbare
       Säule mit erkennbaren Rändern wahrgenommen wurde): eine gleichmässige Grundtönung
       über dem ganzen Hero, damit Rabe und Landschaft an den Rändern noch da sind, plus
       ein sehr breiter, elliptischer Zusatzverlauf über der Textspalte mit vielen kleinen
       Zwischenstufen statt eines harten Zweifarbenverlaufs — kein Knick, der als Kante
       auffällt, und keine gerade Seitenlinie, weil die Form rund statt rechteckig ist.
       Trägt bewusst weniger als vorher; den Rest der Lesbarkeit übernimmt der verstärkte
       Textschatten (siehe .hero h1 / .hero .lead / .gradient-text weiter unten). */
    background:
      linear-gradient(180deg, var(--bg) 0%, transparent 9%, transparent 90%, var(--bg) 100%),
      linear-gradient(180deg, rgba(5, 5, 7, 0.46) 0%, rgba(5, 5, 7, 0.40) 50%, rgba(5, 5, 7, 0.46) 100%),
      radial-gradient(
        ellipse 92% 96% at 50% 40%,
        rgba(5, 5, 7, 0.42) 0%,
        rgba(5, 5, 7, 0.40) 12%,
        rgba(5, 5, 7, 0.37) 24%,
        rgba(5, 5, 7, 0.32) 36%,
        rgba(5, 5, 7, 0.26) 48%,
        rgba(5, 5, 7, 0.19) 60%,
        rgba(5, 5, 7, 0.12) 72%,
        rgba(5, 5, 7, 0.06) 84%,
        rgba(5, 5, 7, 0) 100%
      );
  }
}

.hero-bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  will-change: transform;
}
.hero-bg::before,
.hero-bg::after {
  /* drifting aurora glow */
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(30px);
  will-change: transform;
}
.hero-bg::before {
  top: -260px;
  left: 46%;
  width: 780px;
  height: 640px;
  max-width: 120vw;
  transform: translateX(-50%);
  background: radial-gradient(50% 50% at 50% 50%, rgba(124, 108, 255, 0.30) 0%, rgba(124, 108, 255, 0.08) 45%, transparent 72%);
  animation: aurora-a 22s var(--ease) infinite alternate;
}
.hero-bg::after {
  top: -180px;
  left: 62%;
  width: 640px;
  height: 520px;
  max-width: 110vw;
  transform: translateX(-50%);
  background: radial-gradient(50% 50% at 50% 50%, rgba(34, 211, 238, 0.22) 0%, rgba(34, 211, 238, 0.06) 48%, transparent 74%);
  animation: aurora-b 28s var(--ease) infinite alternate;
}
@keyframes aurora-a {
  0%   { transform: translateX(-50%) translate(0, 0) scale(1); }
  100% { transform: translateX(-50%) translate(-70px, 26px) scale(1.12); }
}
@keyframes aurora-b {
  0%   { transform: translateX(-50%) translate(0, 0) scale(1); }
  100% { transform: translateX(-50%) translate(90px, 34px) scale(1.15); }
}

/* ---- Seitenweite Atmosphäre (driftende Gradient-Glows, fixed) --------- */
.atmosphere {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}
.atmosphere .glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  will-change: transform;
}
.atmosphere .g1 { width: 540px; height: 440px; left: -8%;  top: 6%;    background: radial-gradient(circle, rgba(124, 108, 255, 0.16), transparent 70%); animation: drift-1 26s ease-in-out infinite alternate; }
.atmosphere .g2 { width: 500px; height: 420px; right: -6%; top: 42%;   background: radial-gradient(circle, rgba(34, 211, 238, 0.13), transparent 70%);  animation: drift-2 32s ease-in-out infinite alternate; }
.atmosphere .g3 { width: 460px; height: 400px; left: 24%;  bottom: 0%; background: radial-gradient(circle, rgba(139, 92, 246, 0.12), transparent 70%);  animation: drift-3 30s ease-in-out infinite alternate; }
@keyframes drift-1 { to { transform: translate(64px, 44px) scale(1.08); } }
@keyframes drift-2 { to { transform: translate(-74px, 30px) scale(1.1); } }
@keyframes drift-3 { to { transform: translate(44px, -52px) scale(1.06); } }
.grid-overlay {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: linear-gradient(var(--border) 1px, transparent 1px),
    linear-gradient(90deg, var(--border) 1px, transparent 1px);
  background-size: 54px 54px;
  mask-image: radial-gradient(ellipse 80% 55% at 50% 20%, #000 30%, transparent 72%);
  -webkit-mask-image: radial-gradient(ellipse 80% 55% at 50% 20%, #000 30%, transparent 72%);
  opacity: 0.5;
}

.hero-inner { max-width: 820px; position: relative; z-index: 1; }
.hero h1 {
  font-size: clamp(2.4rem, 1.3rem + 4.6vw, 4.3rem);
  font-weight: 700;
  margin-bottom: var(--s-3);
  text-wrap: balance;
}
/* Zwei-Satz-Überschriften (Hero-H1, Section-Head-H2): jeder Satz als eigene
   inline-block-Einheit. Ein inline-block-Element ist im Zeilenumbruch ein
   atomarer Kasten — der Browser bricht zuerst zwischen den Kästen (am
   Leerzeichen im Markup) und nur dann innerhalb eines Kastens, wenn dessen
   eigener Inhalt selbst auf schmalen Screens nicht in eine Zeile passt.
   Kein hartes <br>, weil das auf schmalen Screens einen unsinnigen Umbruch
   erzwingen würde. text-wrap: balance zusätzlich auf dem Elternelement,
   damit auch innerhalb eines einzelnen Satzes keine einzelne Silbe/kein
   kurzes Wort allein auf der letzten Zeile hängen bleibt (bessere
   Browser-Unterstützung als text-wrap: pretty, das Orphans gezielter
   vermeidet, aber ausserhalb von Chromium kaum unterstützt ist). */
.hero h1 .line,
.hero h1 .gradient-text {
  display: inline-block;
}
.hero .lead {
  font-size: clamp(1.05rem, 0.98rem + 0.5vw, 1.28rem);
  max-width: 620px;
  margin-bottom: var(--s-4);
}
/* Textschatten, Gold-Kante und Ghost-Button-Tönung sind Teil der Video-Nachbesserung
   und gelten bewusst erst ab 768px — auf Mobil läuft weiterhin nur das (unveränderte)
   Poster, das bereits ohne diese Zusatzmittel ausreichend Kontrast hat. */
@media (min-width: 768px) {
  .hero h1 {
    /* Trägt jetzt den grösseren Teil der Lesbarkeit, seit die Fläche dahinter viel
       schwächer ist: enger Schatten zeichnet die Kontur nach, weiter Schatten hält
       auch dann Kontrast, wenn ein heller Videomoment durchläuft. */
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9), 0 3px 10px rgba(0, 0, 0, 0.75), 0 7px 34px rgba(0, 0, 0, 0.55);
  }
  .hero .lead {
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85), 0 2px 9px rgba(0, 0, 0, 0.65), 0 5px 24px rgba(0, 0, 0, 0.5);
  }
  /* Ghost-Button steht mit fast durchsichtiger Fläche direkt über dem Video —
     im Hero eine dezente eigene Tönung, damit er nicht von hellen Clip-Momenten
     überstrahlt wird. */
  .hero .btn--ghost {
    background: rgba(6, 6, 8, 0.5);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
  }
}
.hero-cta {
  display: flex;
  gap: var(--s-2);
  flex-wrap: wrap;
  align-items: center;
}
.hero-note {
  margin-top: var(--s-3);
  font-size: 0.9rem;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 8px;
}
.hero-note svg { width: 16px; height: 16px; color: var(--accent-2); }

/* ---- KPI strip (schlank statt wuchtig) --------------------------------- */
.kpi {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  overflow: hidden;
  margin-top: var(--s-4);
}
.kpi > div {
  background: var(--bg-elev);
  padding: 14px var(--s-2);
}
.kpi .num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.3rem, 1.05rem + 0.9vw, 1.7rem);
  color: var(--text);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  line-height: 1;
}
.kpi .num small { font-size: 0.55em; color: var(--accent-2); font-weight: 600; }
.kpi .lbl { margin-top: 5px; font-size: 0.78rem; color: var(--text-2); letter-spacing: 0.01em; }

/* ---- Cards: Leistungen ------------------------------------------------ */
.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-3);
}
.card {
  background: linear-gradient(180deg, var(--surface) 0%, var(--bg-elev) 100%);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--s-3);
  transition: transform 0.28s var(--ease), border-color 0.28s var(--ease),
    box-shadow 0.28s var(--ease);
  position: relative;
}
.card:hover {
  transform: translateY(-4px);
  border-color: var(--border-strong);
  box-shadow: var(--shadow);
}
.card-ic {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: var(--accent-soft);
  border: 1px solid var(--border-strong);
  margin-bottom: var(--s-2);
  color: var(--accent-2);
}
.card-ic svg { width: 20px; height: 20px; }
.card h3 { font-size: 1.1rem; margin-bottom: 8px; }
.card p { font-size: 0.93rem; }

/* ---- Ablauf (Steps) --------------------------------------------------- */
.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-3);
  counter-reset: step;
}
.step {
  position: relative;
  padding: var(--s-2) var(--s-3);
  border-radius: var(--r-md);
  border: 1px solid var(--border);
  background: var(--bg-elev);
}
.step .step-n {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.85rem;
  color: #080a0f;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--grad);
  display: grid;
  place-items: center;
  margin-bottom: var(--s-2);
}
.step h3 { font-size: 1.02rem; margin-bottom: 6px; }
.step p { font-size: 0.9rem; }

/* ---- Preis ------------------------------------------------------------ */
.price-wrap {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: var(--s-3);
  align-items: stretch;
}
.price-card {
  position: relative;
  border-radius: var(--r-lg);
  padding: var(--s-5);
  border: 1px solid var(--border-strong);
  background: radial-gradient(120% 120% at 0% 0%, rgba(124, 108, 255, 0.14), transparent 55%),
    var(--surface);
  overflow: hidden;
}
.price-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: var(--grad);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0.5;
  pointer-events: none;
}
.price-tag { display: flex; align-items: baseline; gap: 10px; margin: var(--s-2) 0 var(--s-3); }
.price-tag .from { font-size: 0.95rem; color: var(--text-2); }
.price-tag .amount {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.6rem, 1.8rem + 3vw, 3.6rem);
  color: var(--text);
  letter-spacing: -0.03em;
}
.price-tag .unit { font-size: 1rem; color: var(--text-2); }
.price-list { list-style: none; padding: 0; margin: var(--s-3) 0 var(--s-4); display: grid; gap: 12px; }
.price-list li { display: flex; gap: 12px; align-items: flex-start; font-size: 0.98rem; }
.price-list svg { width: 20px; height: 20px; color: var(--accent-2); flex: none; margin-top: 2px; }
.price-side {
  border-radius: var(--r-lg);
  padding: var(--s-4);
  border: 1px solid var(--border);
  background: var(--bg-elev);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.price-side h3 { font-size: 1.2rem; margin-bottom: 12px; }
.price-side p { font-size: 0.98rem; margin-bottom: var(--s-3); }

/* ---- Kontakt ---------------------------------------------------------- */
.contact-wrap {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: var(--s-5);
  align-items: start;
}
.contact-info h2 { font-size: clamp(1.9rem, 1.2rem + 2.6vw, 2.9rem); margin-bottom: var(--s-2); text-wrap: balance; }
.contact-methods { margin-top: var(--s-4); display: grid; gap: var(--s-2); }
.contact-line { display: flex; align-items: center; gap: 14px; }
.contact-line .ic {
  width: 44px; height: 44px; flex: none;
  border-radius: 12px;
  display: grid; place-items: center;
  background: var(--accent-soft);
  border: 1px solid var(--border);
  color: var(--accent-2);
}
.contact-line .ic svg { width: 20px; height: 20px; }
.contact-line b { color: var(--text); font-weight: 500; display: block; font-size: 1.02rem; }
.contact-line span { font-size: 0.88rem; color: var(--muted); }

.form {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--s-4);
}
.field { margin-bottom: var(--s-3); }
.field label {
  display: block;
  font-size: 0.9rem;
  color: var(--text);
  margin-bottom: 8px;
  font-weight: 500;
}
.field label .req { color: var(--accent-2); }
.field input,
.field textarea {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1rem;
  padding: 13px 15px;
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
  min-height: 48px;
}
.field textarea { resize: vertical; min-height: 130px; }
.field input::placeholder,
.field textarea::placeholder { color: var(--muted); }
.field input:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.form .btn { width: 100%; margin-top: 6px; }
.form-note { font-size: 0.82rem; color: var(--muted); margin-top: 14px; text-align: center; }
.hp { position: absolute; left: -9999px; opacity: 0; }
.form-status { font-size: 0.95rem; margin-top: 14px; text-align: center; display: none; }
.form-status.ok { display: block; color: #34e0a1; }
.form-status.err { display: block; color: #ff8a8a; }

/* ---- Footer ----------------------------------------------------------- */
.footer {
  border-top: 1px solid var(--border);
  padding-block: var(--s-5) var(--s-4);
  margin-top: var(--s-6);
}
.footer-top {
  display: flex;
  justify-content: space-between;
  gap: var(--s-4);
  flex-wrap: wrap;
  align-items: flex-start;
}
.footer .brand { margin-bottom: 12px; }
.footer-tag { font-size: 0.95rem; max-width: 320px; color: var(--text-2); }
.footer-cols { display: flex; gap: var(--s-6); flex-wrap: wrap; }
.footer-col h4 {
  font-family: var(--font-display);
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--muted);
  margin-bottom: 14px;
  font-weight: 500;
}
.footer-col a { display: block; font-size: 0.95rem; color: var(--text-2); margin-bottom: 10px; }
.footer-col a:hover { color: var(--text); }
.footer-bottom {
  margin-top: var(--s-5);
  padding-top: var(--s-3);
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 0.85rem;
  color: var(--muted);
}

/* ---- Scroll reveal -----------------------------------------------------
   Sichtbarkeit ist der Normalfall: .reveal-Elemente sind ohne JavaScript
   (oder wenn das Skript scheitert) immer voll sichtbar. Erst wenn das
   früheste Kopf-Skript tatsächlich läuft, setzt es die Klasse "js" auf
   <html> — nur dann greift die Versteck-vor-Einblenden-Animation. */
.reveal { opacity: 1; transform: none; }
html.js .reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
  will-change: opacity, transform;
}
html.js .reveal.in { opacity: 1; transform: none; }
html.js .reveal[data-delay="1"] { transition-delay: 0.08s; }
html.js .reveal[data-delay="2"] { transition-delay: 0.16s; }
html.js .reveal[data-delay="3"] { transition-delay: 0.24s; }
html.js .reveal[data-delay="4"] { transition-delay: 0.32s; }

/* ---- Pakete / Shop ---------------------------------------------------- */
.plans {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-3);
  align-items: stretch;
}
.plan {
  position: relative;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, var(--surface) 0%, var(--bg-elev) 100%);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--s-4);
  transition: transform 0.28s var(--ease), border-color 0.28s var(--ease), box-shadow 0.28s var(--ease);
}
.plan:hover { transform: translateY(-4px); border-color: var(--border-strong); box-shadow: var(--shadow); }
.plan.featured { border-color: transparent; }
.plan.featured::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: var(--grad);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
.plan .badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--grad);
  color: #080a0f;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 5px 13px;
  border-radius: var(--r-full);
  white-space: nowrap;
}
.plan h3 { font-size: 1.28rem; margin-bottom: 6px; }
.plan .plan-sub { font-size: 0.92rem; color: var(--text-2); margin-bottom: var(--s-3); }
.plan .plan-price { display: flex; align-items: baseline; gap: 6px; margin-bottom: var(--s-3); }
.plan .plan-price .from { font-size: 0.85rem; color: var(--text-2); }
.plan .plan-price .amt {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 2.5rem;
  color: var(--text);
  letter-spacing: -0.02em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.plan .plan-price .cur { font-size: 1rem; color: var(--text-2); }
.plan ul { list-style: none; padding: 0; margin: 0 0 var(--s-4); display: grid; gap: 11px; flex: 1; }
.plan li { display: flex; gap: 10px; font-size: 0.95rem; align-items: flex-start; }
.plan li svg { width: 18px; height: 18px; color: var(--accent-2); flex: none; margin-top: 3px; }
.plan .btn { width: 100%; }

.abo {
  margin-top: var(--s-3);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  flex-wrap: wrap;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--s-3) var(--s-4);
  background: radial-gradient(120% 140% at 100% 0%, rgba(34, 211, 238, 0.08), transparent 55%), var(--bg-elev);
}
.abo .abo-txt h3 { font-size: 1.12rem; margin-bottom: 4px; }
.abo .abo-txt p { font-size: 0.92rem; color: var(--text-2); }
.abo .abo-price { display: flex; align-items: baseline; gap: 6px; }
.abo .abo-price .amt { font-family: var(--font-display); font-weight: 700; font-size: 1.9rem; color: var(--text); }
.abo .abo-price .cur { font-size: 0.9rem; color: var(--text-2); }

.order-note {
  margin-top: var(--s-3);
  font-size: 0.9rem;
  color: var(--muted);
  text-align: center;
}

/* ---- Angebot einlösen (Referenznummer) -------------------------------- */
.redeem {
  max-width: 560px;
  margin: 0;
  background: radial-gradient(120% 120% at 0% 0%, rgba(124, 108, 255, 0.12), transparent 55%), var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-lg);
  padding: var(--s-3) var(--s-3) var(--s-2);
  text-align: center;
}
.redeem-form { display: flex; gap: 10px; margin-top: var(--s-2); }
.redeem-form input {
  flex: 1;
  min-width: 0;
  background: var(--bg);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1.05rem;
  letter-spacing: 0.04em;
  padding: 13px 15px;
  text-align: center;
  min-height: 50px;
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.redeem-form input::placeholder { color: var(--muted); letter-spacing: 0; }
.redeem-form input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.redeem-form .btn { flex: none; }
.redeem-note { margin-top: var(--s-2); font-size: 0.88rem; color: var(--muted); }
.redeem-status { margin-top: 12px; font-size: 0.92rem; min-height: 1.2em; }
.redeem-status.err { color: #ff8a8a; }
.redeem-status.ok { color: #34e0a1; }
.redeem-result {
  margin-top: var(--s-3);
  padding-top: var(--s-3);
  border-top: 1px solid var(--border);
  text-align: left;
  animation: redeemIn 0.4s var(--ease);
}
.redeem-result-desc { color: var(--text-2); font-size: 0.98rem; margin-bottom: var(--s-3); }
.redeem-result-prices { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: var(--s-2); }
.redeem-price {
  flex: 1;
  min-width: 160px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 14px 16px;
}
.redeem-price .lbl { display: block; font-size: 0.8rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 4px; }
.redeem-price .amt { font-family: var(--font-display); font-weight: 700; font-size: 1.6rem; color: var(--text); }
.redeem-price .amt small { font-size: 0.9rem; color: var(--text-2); font-weight: 500; }
.redeem-result-rabatt { color: var(--accent-2); font-size: 0.92rem; margin-bottom: var(--s-3); font-weight: 500; }
.redeem-result-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.redeem-result-actions .btn { flex: 1; min-width: 180px; }
@keyframes redeemIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ---- Responsive ------------------------------------------------------- */
@media (max-width: 900px) {
  .grid-3 { grid-template-columns: 1fr 1fr; }
  .steps { grid-template-columns: 1fr 1fr; }
  .kpi { grid-template-columns: 1fr 1fr; }
  .price-wrap { grid-template-columns: 1fr; }
  .contact-wrap { grid-template-columns: 1fr; gap: var(--s-4); }
  .plans { grid-template-columns: 1fr; max-width: 460px; margin-inline: auto; }
}
@media (max-width: 640px) {
  .section { padding-block: var(--s-5); }
  .nav-links { display: none; }
  .nav-toggle { display: inline-flex; }
  .nav-links.open {
    display: flex;
    position: absolute;
    top: var(--nav-h);
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    padding: 16px 24px 24px;
    background: rgba(10, 12, 17, 0.96);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--border);
  }
  .nav-links.open a { padding: 12px 4px; border-bottom: 1px solid var(--border); }
  .nav-links.open .btn { margin-top: 8px; }
  .grid-3 { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; }
  .kpi { grid-template-columns: 1fr 1fr; }
  .hero-cta { flex-direction: column; align-items: stretch; }
  .hero-cta .btn { width: 100%; }
  .redeem-form { flex-direction: column; }
  .redeem-form .btn { width: 100%; }
}

/* ---- Reduced motion --------------------------------------------------- */
@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;
  }
  .reveal, html.js .reveal { opacity: 1 !important; transform: none !important; }
  .atmosphere .glow { animation: none !important; }
}