/* ==========================================================================
   Novawebtech — Startseite
   Gepinnte Welt: tiefes Anthrazit, Glas, Neon-Indigo/Cyan als Licht.
   Referenzen: AI-Tech X (Zurückhaltung, Typo-Skala, Rand-Glow)
               Blizzworx (Glaskarten, Pill-Buttons, Hairline-Ränder)
   ========================================================================== */

/* ————— Tokens ————— */
:root {
  /* Grund */
  --bg:            #0A0D14;
  --bg-2:          #0D1117;
  --surface:       #161B22;
  --surface-2:     #1C2128;
  --surface-hi:    #232A34;

  /* Licht */
  --violet:        #6366F1;
  --violet-deep:   #7C3AED;
  --cyan:          #38BDF8;
  --cyan-deep:     #06B6D4;

  /* Schrift */
  --text:          #F9FAFB;
  --text-2:        #A8B0BE;   /* 7.2:1 auf --bg */
  --text-3:        #7C8697;   /* 4.8:1 auf --bg — Untergrenze für Fließtext */

  /* Linien */
  --border:        rgba(255, 255, 255, 0.08);
  --border-hi:     rgba(255, 255, 255, 0.14);

  /* Maße */
  --shell:         1180px;
  --shell-narrow:  760px;
  --radius:        16px;
  --radius-sm:     11px;
  --radius-pill:   999px;

  /* Rhythmus: mehr Raum über einer Überschrift als darunter */
  --gap-section:   clamp(5.5rem, 11vw, 9.5rem);
  --gap-block:     clamp(2.5rem, 5vw, 4rem);

  /* Bewegung */
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft:     cubic-bezier(0.4, 0, 0.2, 1);
  /* Fuer Zustandswechsel direkt unter dem Zeiger. --ease-out springt vorne und
     kriecht hinten, --ease-soft startet traege -- beides faellt auf, wenn die
     Maus die Bewegung ausloest. Diese Kurve setzt sofort ein und bremst
     gleichmaessig aus. */
  --ease-grow:     cubic-bezier(0.33, 1, 0.68, 1);

  --font-display:  'Sora', ui-sans-serif, system-ui, sans-serif;
  --font-body:     'Manrope', ui-sans-serif, system-ui, sans-serif;
}

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

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3 {
  font-family: var(--font-display);
  margin: 0;
  text-wrap: balance;
}

p { margin: 0; }
img, svg, canvas { display: block; max-width: 100%; }

a { color: var(--cyan); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: #7DD3FC; }

::selection { background: var(--violet); color: #fff; }

/* Kein eigener Radius: der Fokusring folgt der Rundung des Elements selbst. */
:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
}

.skip-link {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, -120%);
  z-index: 200;
  padding: 0.75rem 1.25rem;
  background: var(--violet);
  color: #fff;
  font-weight: 600;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  text-decoration: none;
  transition: transform 0.2s var(--ease-out);
}
.skip-link:focus-visible { transform: translate(-50%, 0); color: #fff; }

/* ————— Shell ————— */
.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 5vw, 2.5rem);
}
.shell--narrow { max-width: var(--shell-narrow); }

.section { padding-block: var(--gap-section); position: relative; }
.section--tight { padding-block: clamp(3rem, 6vw, 4.5rem); }

.section__head { margin-bottom: var(--gap-block); max-width: 42ch; }

.section__title {
  font-size: clamp(1.9rem, 4.2vw, 3.1rem);
  font-weight: 300;
  line-height: 1.12;
  letter-spacing: -0.025em;
}

.section__lead {
  margin-top: 1.15rem;
  color: var(--text-2);
  font-size: clamp(1rem, 1.4vw, 1.1rem);
  max-width: 62ch;
}

/* ==========================================================================
   Navigation — Glas, weil sie über bewegtem Inhalt schwebt
   ========================================================================== */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  transition: background 0.35s var(--ease-soft), border-color 0.35s var(--ease-soft);
  border-bottom: 1px solid transparent;
}
.nav.is-stuck {
  background: rgba(10, 13, 20, 0.72);
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  border-bottom-color: var(--border);
}

.nav__inner {
  max-width: var(--shell);
  margin-inline: auto;
  padding: 1rem clamp(1.25rem, 5vw, 2.5rem);
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.nav__brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.02rem;
  letter-spacing: -0.02em;
  color: var(--text);
  text-decoration: none;
  margin-right: auto;
}
.nav__brand:hover { color: var(--text); }
.nav__brand-thin { font-weight: 300; color: var(--text-2); }

/* Das Logo ist ein fertiges Lockup: Zeichen und Wortmarke stecken beide in
   der Bilddatei, und die Datei bleibt unveraendert. Zwei Folgen davon:

   1. Der Name steht daneben nicht noch einmal als Text.
   2. Rund die Haelfte der Bildhoehe ist Rand. Damit das Lockup selbst auf
      brauchbare Groesse kommt, ist die Bildhoehe etwa doppelt so hoch
      angesetzt, wie das Logo am Ende wirkt.

   "screen" rechnet den mitgelieferten schwarzen Grund gegen den Seitengrund
   heraus, ohne die Datei anzufassen: Schwarz verschwindet, das Leuchten legt
   sich additiv darueber. Genau so ist die Grafik gemeint. */
/* Das Logo ist ein gestapeltes Lockup mit echter Transparenz: das Leuchten
   liegt als halbdurchsichtige Flaeche in der Datei, der Grund ist Alpha 0.
   Es braucht deshalb keinen Mischmodus, nur Hoehe.

   Oben und unten bringt die Datei je rund 13% Rand mit. Der wird mit
   negativen Aussenabstaenden herausgezogen, damit das Logo buendig im
   Raster sitzt und die Leiste nicht unnoetig hoch wird. */
.nav__logo {
  height: 74px;
  width: auto;
  flex: none;
  display: block;
  margin: -9px 0 -9px -4px;
}
@media (max-width: 860px) {
  .nav__logo { height: 62px; margin: -8px 0 -8px -3px; }
}

.nav__links { display: flex; gap: 1.9rem; }
.nav__links a {
  color: var(--text-2);
  text-decoration: none;
  font-size: 0.92rem;
  font-weight: 500;
  position: relative;
  transition: color 0.2s var(--ease-soft);
}
.nav__links a::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -5px;
  height: 1px;
  background: linear-gradient(90deg, var(--cyan), var(--violet));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.32s var(--ease-out);
}
.nav__links a:hover { color: var(--text); }
.nav__links a:hover::after { transform: scaleX(1); }

/* ————— Sprachumschalter —————
   Zwei echte Links auf zwei echte Seiten. Kein Cookie, kein localStorage,
   keine automatische Weiterleitung nach Browsersprache: die Seite wirbt
   damit, nichts zu speichern, und eine Umleitung wuerde Suchmaschinen die
   jeweils andere Fassung verbergen. Wer EN will, klickt EN. */
.lang {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px;
  flex: none;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: rgba(22, 27, 34, 0.55);
}
.lang__opt {
  padding: 0.28rem 0.6rem;
  border-radius: var(--radius-pill);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--text-3);
  text-decoration: none;
  line-height: 1.2;
  transition: color 0.2s var(--ease-soft), background 0.24s var(--ease-soft);
}
.lang__opt:hover { color: var(--text); background: rgba(255, 255, 255, 0.05); }
.lang__opt[aria-current] {
  color: var(--text);
  background: rgba(99, 102, 241, 0.2);
  box-shadow: inset 0 0 0 1px rgba(99, 102, 241, 0.4);
}

.nav__toggle {
  display: none;
  width: 42px; height: 42px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  cursor: pointer;
  padding: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
}
.nav__toggle-bar {
  display: block;
  width: 17px; height: 1.5px;
  background: var(--text);
  border-radius: var(--radius-pill);
  transition: transform 0.3s var(--ease-out), opacity 0.2s;
}
.nav__toggle[aria-expanded="true"] .nav__toggle-bar:first-child { transform: translateY(3.25px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] .nav__toggle-bar:last-child  { transform: translateY(-3.25px) rotate(-45deg); }

.nav__mobile {
  display: none;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.5rem clamp(1.25rem, 5vw, 2.5rem) 1.5rem;
  background: rgba(10, 13, 20, 0.94);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}
.nav__mobile a:not(.btn) {
  color: var(--text-2);
  text-decoration: none;
  font-weight: 500;
  padding: 0.8rem 0;
  border-bottom: 1px solid var(--border);
}
.nav__mobile a:not(.btn):hover { color: var(--text); }
.nav__mobile .btn { margin-top: 1rem; }

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn {
  --btn-py: 0.95rem;
  --btn-px: 1.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: var(--btn-py) var(--btn-px);
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: 0.97rem;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  position: relative;
  isolation: isolate;
  transform: scale(1);
  transition: transform 0.3s var(--ease-out),
              box-shadow 0.35s var(--ease-out),
              border-color 0.25s var(--ease-soft),
              background 0.25s var(--ease-soft);
}
.btn--lg { --btn-py: 1.1rem; --btn-px: 2.25rem; font-size: 1.02rem; }
.btn--sm { --btn-py: 0.65rem; --btn-px: 1.15rem; font-size: 0.88rem; }
.btn--block { width: 100%; }

.btn--primary {
  background: linear-gradient(135deg, var(--violet) 0%, var(--violet-deep) 100%);
  color: #fff;
  box-shadow: 0 6px 20px -8px rgba(99, 102, 241, 0.85);
}
/* Wachsen + Leuchten. Der Fokus bekommt exakt dieselbe Behandlung, damit
   Tastaturbedienung nicht schlechter aussieht als die Maus. */
.btn--primary:hover,
.btn--primary:focus-visible {
  color: #fff;
  transform: scale(1.05);
  box-shadow:
    0 12px 30px -8px rgba(99, 102, 241, 0.75),
    0 0 38px rgba(124, 58, 237, 0.55);
}
.btn--primary:active { transform: scale(0.99); }

/* Pulsierender Glow — genau ein Element trägt ihn pro Viewport */
.btn--glow::after {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  background: linear-gradient(135deg, var(--violet), var(--cyan));
  filter: blur(13px);
  opacity: 0.42;
  z-index: -1;
  animation: pulse 3.6s var(--ease-soft) infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 0.30; transform: scale(0.97); }
  50%      { opacity: 0.60; transform: scale(1.04); }
}

.btn--ghost {
  background: rgba(255, 255, 255, 0.02);
  border-color: var(--border-hi);
  color: var(--text);
}
.btn--ghost:hover,
.btn--ghost:focus-visible {
  color: var(--text);
  border-color: rgba(56, 189, 248, 0.55);
  background: rgba(56, 189, 248, 0.07);
  transform: scale(1.05);
  box-shadow: 0 0 26px rgba(56, 189, 248, 0.28);
}
.btn--ghost:active { transform: scale(0.99); }

.btn__spinner {
  width: 15px; height: 15px;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: #fff;
  border-radius: 50%;
  display: none;
  animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.btn.is-loading { pointer-events: none; opacity: 0.85; }
.btn.is-loading .btn__spinner { display: block; }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero {
  position: relative;
  min-height: min(100svh, 900px);
  display: flex;
  align-items: center;
  padding-block: clamp(8rem, 16vh, 11rem) clamp(4rem, 9vh, 7rem);
  overflow: hidden;
}

/* Motiv, kein Hintergrund: das Video liegt neben dem Text, nicht dahinter.
   Hinter der Headline würde es den Kontrast der Schrift zerstören. */
.hero__media {
  position: relative;
  z-index: 2;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--border-hi);
  background: linear-gradient(150deg, var(--surface), var(--bg));
  box-shadow:
    0 30px 70px -30px rgba(0, 0, 0, 0.9),
    0 0 60px -20px rgba(99, 102, 241, 0.45);
}
.hero__media::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
  pointer-events: none;
}
.hero__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ==========================================================================
   Hero-Endlosschleife — Wireframe → Code → Website → Wireframe
   Drei Flächen auf einem Prisma, 360° in 10 s. Der Loop ist konstruiert,
   nicht getroffen: 360° ist dieselbe Lage wie 0°.
   Farben und Zeiten stehen in js/hero-loop.js unter CONFIG.
   ========================================================================== */
.wl {
  --wl-line: #FFFFFF;
  --wl-accent: #FF0000;
  --wl-dim: rgba(255, 255, 255, 0.32);

  position: absolute;
  inset: 0;
  background: #000;
  perspective: 1500px;
  perspective-origin: 50% 50%;
  overflow: hidden;
}

.wl__stage {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transform: rotateY(0deg);
  will-change: transform;
}

.wl__face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  padding: 7% 8%;
  background: #000;
  /* translateZ = Breite / (2 · tan 60°) hält die drei Flächen auf dem Prisma */
  transform-origin: 50% 50%;
}
.wl__face--a { transform: rotateY(0deg)   translateZ(var(--wl-z, 160px)); }
.wl__face--b { transform: rotateY(120deg) translateZ(var(--wl-z, 160px)); }
.wl__face--c { transform: rotateY(240deg) translateZ(var(--wl-z, 160px)); }

/* Ohne JS steht nur die erste Fläche; die anderen wären sonst verdreht sichtbar. */
.wl:not(.is-live) .wl__face--b,
.wl:not(.is-live) .wl__face--c { display: none; }

/* ————— Fläche 1: Wireframe ————— */
.wf { display: flex; flex-direction: column; height: 100%; gap: 4.5%; }
.wf > * { opacity: 1; }

.wf__bar {
  display: flex; align-items: center; justify-content: space-between;
  border: 1px solid var(--wl-line);
  padding: 1.6% 2.2%;
}
.wf__logo { display: block; width: 68px; height: 12px; border: 1px solid var(--wl-line); }
.wf__navs { display: flex; gap: 10px; }
.wf__navs i { display: block; width: 42px; height: 12px; border: 1px solid var(--wl-line); }

.wf__hero { flex: 1 1 auto; border: 1px solid var(--wl-line); min-height: 0; }
.wf__hero svg { width: 100%; height: 100%; display: block; }
.wf__hero path { stroke: var(--wl-line); stroke-width: 1; fill: none; }

.wf__btns { display: flex; gap: 14px; justify-content: center; }
.wf__btns span { display: block; width: 92px; height: 26px; border: 1px solid var(--wl-line); border-radius: 999px; }

.wf__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3.2%; height: 26%; }
.wf__grid span { border: 1px solid var(--wl-line); }
.wf__grid .is-accent { border-color: var(--wl-accent); }

.wf__foot { height: 8%; border: 1px solid var(--wl-line); }

/* ————— Fläche 2: Code ————— */
.cd {
  margin: 0;
  height: 100%;
  overflow: hidden;
  font-family: monospace;
  font-size: clamp(0.52rem, 1.05vw, 0.82rem);
  line-height: 1.7;
  color: var(--wl-dim);
  white-space: pre;
  tab-size: 2;
}
.cd .t { color: var(--wl-line); }
.cd .a { color: var(--wl-accent); }
.cd .c { color: rgba(255, 255, 255, 0.22); }
.cd__l { min-height: 1.7em; }
.cd__t { display: inline-block; }
.cd .caret {
  position: absolute;
  width: 0.55em; height: 1.05em;
  background: var(--wl-accent);
  opacity: 0;
}
.wl__face--b { position: absolute; }
.wl__face--b .cd { position: relative; }

/* ————— Fläche 3: fertige Website ————— */
.st { display: flex; flex-direction: column; height: 100%; gap: 4.5%; }

.st__bar {
  display: flex; align-items: center; justify-content: space-between;
  padding-bottom: 2.2%;
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}
.st__logo { display: block; width: 74px; height: 13px; background: var(--wl-line); }
.st__navs { display: flex; gap: 12px; }
.st__navs i { display: block; width: 38px; height: 8px; background: rgba(255, 255, 255, 0.45); }

.st__hero {
  flex: 1 1 auto;
  display: flex; flex-direction: column; justify-content: center; gap: 12px;
  min-height: 0;
}
.st__h1 { display: block; width: 72%; height: 20px; background: var(--wl-line); }
.st__h2 { display: block; width: 46%; height: 20px; background: var(--wl-line); }
.st__cta { display: flex; gap: 12px; margin-top: 8px; }
.st__cta b { display: block; width: 104px; height: 30px; background: var(--wl-accent); border-radius: 999px; }
.st__cta u { display: block; width: 88px; height: 30px; border: 1px solid var(--wl-line); border-radius: 999px; }

.st__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3.2%; height: 27%; }
.st__grid span { background: rgba(255, 255, 255, 0.1); border-top: 2px solid var(--wl-line); }
.st__grid span:nth-child(2) { border-top-color: var(--wl-accent); }

.st__foot { height: 8%; background: rgba(255, 255, 255, 0.07); }

/* Rand-Glow: Cyan links, Violett rechts — direkt aus der Referenz */
.hero__glow {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(58% 48% at 4% 42%,  rgba(56, 189, 248, 0.20), transparent 70%),
    radial-gradient(52% 55% at 97% 62%, rgba(124, 58, 237, 0.26), transparent 72%),
    radial-gradient(70% 50% at 50% 108%, rgba(99, 102, 241, 0.12), transparent 70%);
}

.hero__inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2.5rem, 5vw, 4rem);
  align-items: center;
}
@media (min-width: 1001px) {
  .hero__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); }

  /* Der Hero läuft breiter als der Rest der Seite, damit das Video wächst,
     ohne die Textspalte zu quetschen. 1180 → 1340 ergibt bei gleichem
     Spaltenverhältnis rund 83 px mehr Videobreite. */
  .hero .shell { max-width: 1340px; }
}
.hero__copy { max-width: 52ch; }

/* Deutsche Komposita sind lang: „unvollständigen" allein misst über 7em.
   Ohne Silbentrennung läuft die Zeile aus der Textspalte in das Orbit-Feld. */
.hero__title {
  max-width: 15ch;
  font-size: clamp(2.4rem, 5.4vw, 4.7rem);
  font-weight: 300;
  line-height: 1.06;
  letter-spacing: -0.032em;
  -webkit-hyphens: auto;
  hyphens: auto;
  overflow-wrap: break-word;
}
.hero__title-accent {
  display: block;
  margin-top: 0.45em;
  font-size: 0.44em;
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--text-2);
}

.hero__sub {
  margin-top: 1.8rem;
  max-width: 52ch;
  font-size: clamp(1.02rem, 1.5vw, 1.16rem);
  color: var(--text-2);
}

.hero__actions {
  margin-top: 2.4rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
}

.hero__note {
  margin-top: 1.9rem;
  font-size: 0.9rem;
  color: var(--text-3);
  padding-left: 0.95rem;
  border-left: 1px solid rgba(56, 189, 248, 0.4);
}

.hero__scroll {
  position: absolute;
  bottom: 2.5rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
}
.hero__scroll-line {
  display: block;
  width: 1px; height: 54px;
  background: linear-gradient(to bottom, transparent, var(--border-hi) 35%, transparent);
  position: relative;
  overflow: hidden;
}
.hero__scroll-line::after {
  content: '';
  position: absolute;
  inset-inline: 0;
  height: 16px;
  background: linear-gradient(to bottom, transparent, var(--cyan));
  animation: trickle 2.6s var(--ease-soft) infinite;
}
@keyframes trickle {
  0%   { transform: translateY(-18px); opacity: 0; }
  35%  { opacity: 1; }
  100% { transform: translateY(56px); opacity: 0; }
}

/* ==========================================================================
   Zusagen — bewusst KEINE Karten: breite Zeilen mit Haarlinien.
   Die Kartenraster gehören den Leistungen; drei gleiche Raster hintereinander
   wären die faulste Seitenstruktur.
   ========================================================================== */
.pledges {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--border);
}

.pledge {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(1.25rem, 3vw, 2.5rem);
  align-items: start;
  padding-block: clamp(2rem, 4vw, 2.9rem);
  border-bottom: 1px solid var(--border);
  position: relative;
}
.pledge::after {
  content: '';
  position: absolute;
  left: 0; bottom: -1px;
  height: 1px;
  width: 100%;
  background: linear-gradient(90deg, var(--cyan), var(--violet), transparent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.7s var(--ease-out);
}
.pledge:hover::after { transform: scaleX(1); }

.pledge__icon {
  width: 52px; height: 52px;
  flex: none;
  display: grid;
  place-items: center;
  border: 1px solid var(--border-hi);
  border-radius: var(--radius-sm);
  background: linear-gradient(150deg, rgba(99, 102, 241, 0.13), rgba(56, 189, 248, 0.05));
  color: var(--cyan);
  transition: color 0.3s var(--ease-soft), border-color 0.3s var(--ease-soft),
              box-shadow 0.4s var(--ease-out);
}
.pledge__icon svg { width: 26px; height: 26px; }
.pledge:hover .pledge__icon {
  color: #fff;
  border-color: rgba(99, 102, 241, 0.6);
  box-shadow: 0 8px 26px -10px rgba(99, 102, 241, 0.9);
}

.pledge__body h3 {
  font-size: clamp(1.15rem, 2.1vw, 1.5rem);
  font-weight: 600;
  line-height: 1.28;
  letter-spacing: -0.02em;
  margin-bottom: 0.7rem;
}
.pledge__body p {
  color: var(--text-2);
  max-width: 68ch;
}


.section__title-hi { color: var(--cyan); }

.pledges__cta {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  text-align: center;
}
.pledges__cta-note {
  margin-top: 1.1rem;
  font-size: 0.88rem;
  color: var(--text-3);
  max-width: 46ch;
  margin-inline: auto;
}

/* ==========================================================================
   Vertrauens-Band — nur nachprüfbare Aussagen über diese Seite selbst
   ========================================================================== */
.band {
  background: linear-gradient(180deg, transparent, rgba(22, 27, 34, 0.55), transparent);
}
.band__grid {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(1.75rem, 5vw, 4.5rem);
  align-items: center;
}
.band__figure { text-align: center; }

.band__facts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.85rem;
  max-width: 46ch;
}
.band__facts li {
  position: relative;
  padding-left: 1.75rem;
  color: var(--text-2);
  font-size: 0.95rem;
}
.band__facts li::before {
  content: '';
  position: absolute;
  left: 0; top: 0.42em;
  width: 11px; height: 6px;
  border-left: 1.5px solid var(--cyan);
  border-bottom: 1.5px solid var(--cyan);
  transform: rotate(-45deg);
}

.band__num {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 6vw, 4.2rem);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--text);
}
.band__label {
  display: block;
  margin-top: 0.85rem;
  font-size: 0.9rem;
  color: var(--text-2);
}
.band__foot {
  margin-top: clamp(1.75rem, 3.5vw, 2.5rem);
  font-size: 0.87rem;
  color: var(--text-3);
  max-width: 62ch;
}

/* ==========================================================================
   Leistungs-Karten — Glas + Hover-Glow (aus der Blizzworx-Referenz)
   ========================================================================== */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
  gap: 1.15rem;
}

.card {
  position: relative;
  padding: clamp(1.6rem, 2.6vw, 2.1rem);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: linear-gradient(165deg, var(--surface) 0%, var(--surface-2) 100%);
  overflow: hidden;
  transition: transform 0.4s var(--ease-out), border-color 0.35s var(--ease-soft);
}
/* Glow sitzt auf einem Pseudo-Element, damit nur er faded — nicht der Text */
.card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(75% 60% at 50% 0%, rgba(99, 102, 241, 0.22), transparent 72%);
  opacity: 0;
  transition: opacity 0.45s var(--ease-soft);
  pointer-events: none;
}
.card:hover {
  transform: translateY(-4px);
  border-color: rgba(99, 102, 241, 0.42);
}
.card:hover::before { opacity: 1; }

.card__icon {
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-hi);
  background: rgba(99, 102, 241, 0.1);
  color: var(--cyan);
  margin-bottom: 1.4rem;
  position: relative;
}
.card__icon svg { width: 24px; height: 24px; }

.card__title {
  font-size: 1.12rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  margin-bottom: 0.6rem;
  position: relative;
}
.card__text {
  color: var(--text-2);
  font-size: 0.95rem;
  position: relative;
}

/* ==========================================================================
   Preise — drei gleich breite Karten in einer Reihe.

   Einmalig oder monatlich steht in der Einheit neben der Zahl, nicht in der
   Kartenbreite. Kein align-items: start: die Karten ziehen auf gleiche Höhe,
   weil nebeneinander gestellte Optionen mit ungleichen Unterkanten sich wie
   ein Fehler lesen und nicht wie ein Vergleich.
   ========================================================================== */
.prices {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.15rem;
}

.price {
  position: relative;
  /* Spalte, damit der Anfrage-Button per margin-top:auto am Kartenboden
     haengt. Die drei Listen sind unterschiedlich lang; ohne das schwaemme
     jeder Button auf einer anderen Hoehe und die Reihe verloere ihre Linie. */
  display: flex;
  flex-direction: column;
  padding: clamp(1.7rem, 3vw, 2.4rem);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: linear-gradient(165deg, var(--surface) 0%, var(--surface-2) 100%);
  overflow: hidden;
  /* Diese Angabe gilt fuer das AUSKLINGEN des Leuchtens (die Regel im
     :hover-Block gilt fuer das Aufleuchten). Laenger als der Hinweg: das
     Licht soll verloeschen, nicht abgeschaltet werden. */
  transition: box-shadow 0.55s var(--ease-grow), border-color 0.55s var(--ease-grow);
}
/* Ruhiger Glow auf der Kartenfläche, dauerhaft. Nicht zu verwechseln mit dem
   Lichthof aus :hover — der liegt hinter der Karte, dieser hier darauf. */
.price::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(75% 55% at 50% 0%, rgba(99, 102, 241, 0.16), transparent 72%);
  pointer-events: none;
}
.price > * { position: relative; }

/* Leuchten hinter der Karte. Bewusst als box-shadow und nicht als weiteres
   Pseudo-Element: ein Schatten liegt immer hinter dem Hintergrund des eigenen
   Elements und wird von dessen `overflow: hidden` nicht beschnitten. Ein
   ::after muesste erst aus der Beschneidung und dann per negativem z-index
   nach hinten — und dessen Malreihenfolge kippt, sobald die Karte durch
   z-index selbst einen Stapelkontext aufmacht.

   z-index hebt die leuchtende Karte ueber ihre Nachbarn: sonst malt die
   naechste Karte ihren Hintergrund ueber den Lichthof der vorherigen. */
.price:hover {
  z-index: 1;
  border-color: rgba(99, 102, 241, 0.42);
  /* Zwei Lagen: ein enger, kraeftiger Kern in Indigo, darum ein weiter
     Cyan-Hof. Beide mit negativem Spread, damit das Licht aus der Karte
     heraustritt und nicht als Rahmen an ihrer Kante klebt. */
  box-shadow:
    0 14px 44px -12px rgba(99, 102, 241, 0.60),
    0 0 90px -24px rgba(56, 189, 248, 0.45);
  /* Hinweg kuerzer als Rueckweg: unter dem Zeiger soll die Karte antworten,
     nicht anlaufen. */
  transition: box-shadow 0.35s var(--ease-grow), border-color 0.35s var(--ease-grow);
}

.price__kicker {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cyan);
}

/* Baseline-Ausrichtung: „einmalig" sitzt auf der Grundlinie der Zahl,
   nicht auf ihrer Mitte. */
.price__amount {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.15rem 0.6rem;
  margin-top: 1.1rem;
  padding-bottom: 1.4rem;
  border-bottom: 1px solid var(--border);
}
.price__num {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 5.2vw, 3.5rem);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--text);
}
/* „ab" steht vor der Zahl, klein und gedimmt. Es gehört zur Aussage und darf
   nicht überlesen werden, aber es darf der Zahl auch nicht die Bühne nehmen —
   deshalb dieselbe Größe und Farbe wie die Einheit dahinter. */
.price__from,
.price__unit {
  font-size: 0.95rem;
  color: var(--text-3);
}

.price__list {
  list-style: none;
  /* Der untere Abstand ist der Mindestabstand zum Button. Freier Platz
     darueber hinaus geht an dessen margin-top:auto. */
  margin: 1.4rem 0 1.7rem;
  padding: 0;
  display: grid;
  gap: 0.85rem;
}
.price__list li {
  position: relative;
  padding-left: 1.75rem;
  color: var(--text-2);
  font-size: 0.95rem;
}
.price__list li::before {
  content: '';
  position: absolute;
  left: 0; top: 0.42em;
  width: 11px; height: 6px;
  border-left: 1.5px solid var(--cyan);
  border-bottom: 1.5px solid var(--cyan);
  transform: rotate(-45deg);
}

/* Der Anfrage-Button ist das eigentliche Ziel: er traegt den Fokus, den
   Linktext und funktioniert auch ohne JavaScript. Dass zusaetzlich die ganze
   Karte klickbar ist, ist nur Komfort fuer die Maus -- deshalb haengt der
   Zeigefinger auch an `.js`, sonst verspraeche er ohne Skript etwas, das
   nicht passiert. */
.price__cta { margin-top: auto; }
.js .price { cursor: pointer; }

/* Die Bedingungen unter den Karten. Bewusst leiser als die Karten selbst,
   aber nach Begriffen gegliedert statt als Absatzblock — der Preis für eine
   einzelne Änderung ist eine Zahl, die jemand gezielt sucht. */
.prices__terms {
  margin: clamp(1.6rem, 3vw, 2.2rem) 0 0;
  padding-top: clamp(1.6rem, 3vw, 2.2rem);
  border-top: 1px solid var(--border);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem clamp(2rem, 4vw, 3.5rem);
}

.prices__terms dt {
  margin-bottom: 0.45rem;
  font-family: var(--font-display);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--text-2);
}
.prices__terms dd {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.65;
  color: var(--text-3);
}
/* Der einzige hervorgehobene Wert im Kleingedruckten. */
.prices__terms strong {
  color: var(--text);
  font-weight: 600;
}

/* Der Umbruch auf eine Spalte steht weiter unten im 1000px-Block, zusammen
   mit .about und .contact__grid. Alle drei lösen dasselbe Problem — zwei
   Spalten werden zu schmal — und sollen es an derselben Stelle tun. */

/* ==========================================================================
   Ablauf — Zeitleiste mit mitwachsendem Strahl
   ========================================================================== */
/* Der Strahl liegt im Wrapper, nicht in der <ol>: ein <div> als direktes
   Kind einer Liste ist ungültiges HTML. */
.steps-wrap { position: relative; }

.steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.6rem;
  padding-top: 3.1rem;
}

.steps__beam {
  position: absolute;
  top: 10px;
  left: 0; right: 0;
  height: 1px;
  background: var(--border);
}
.steps__beam-fill {
  display: block;
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, var(--cyan), var(--violet));
  box-shadow: 0 0 12px rgba(99, 102, 241, 0.8);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1.1s var(--ease-out);
}
.steps__beam-fill.is-drawn { transform: scaleX(1); }

.step { position: relative; }
.step__dot {
  position: absolute;
  top: -3.1rem;
  left: 0;
  width: 9px; height: 9px;
  margin-top: 6px;
  border-radius: 50%;
  background: var(--bg);
  border: 1px solid var(--border-hi);
  transition: background 0.4s var(--ease-soft), box-shadow 0.4s var(--ease-out);
}
.step.is-lit .step__dot {
  background: var(--cyan);
  border-color: var(--cyan);
  box-shadow: 0 0 0 4px rgba(56, 189, 248, 0.16);
}

.step__index {
  display: block;
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--cyan);
  letter-spacing: 0.06em;
  margin-bottom: 0.55rem;
}
.step__title {
  font-size: 1.08rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  margin-bottom: 0.5rem;
}
.step__text {
  color: var(--text-2);
  font-size: 0.93rem;
}
.step__gate {
  margin-top: 0.95rem;
  padding: 0.75rem 0.9rem;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--text);
  background: rgba(99, 102, 241, 0.1);
  border: 1px solid rgba(99, 102, 241, 0.32);
  border-radius: var(--radius-sm);
}

/* ==========================================================================
   Über mich
   ========================================================================== */
.about {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
.about__copy p {
  color: var(--text-2);
  max-width: 60ch;
  margin-top: 1.35rem;
}

.about__panel {
  padding: clamp(1.6rem, 3vw, 2.1rem);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: linear-gradient(165deg, var(--surface), var(--surface-2));
  position: relative;
  overflow: hidden;
}
.about__panel::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(80% 55% at 100% 0%, rgba(56, 189, 248, 0.14), transparent 70%);
  pointer-events: none;
}
.about__panel-title {
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-bottom: 1.15rem;
  position: relative;
}
.about__list {
  list-style: none;
  margin: 0 0 1.4rem;
  padding: 0;
  display: grid;
  gap: 0.85rem;
  position: relative;
}
.about__list li {
  position: relative;
  padding-left: 1.6rem;
  font-size: 0.93rem;
  color: var(--text-2);
}
.about__list li::before {
  content: '';
  position: absolute;
  left: 0; top: 0.62em;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--cyan), var(--violet));
}
.about__panel-note {
  position: relative;
  font-size: 0.86rem;
  color: var(--text-3);
  padding-top: 1.2rem;
  border-top: 1px solid var(--border);
}

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq { border-top: 1px solid var(--border); }
.faq__item { border-bottom: 1px solid var(--border); }

/* <details>/<summary>: die Antworten sind auch ohne JavaScript erreichbar. */
.faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.45rem 0;
  color: var(--text);
  font-family: var(--font-display);
  font-size: clamp(1rem, 1.7vw, 1.14rem);
  font-weight: 500;
  letter-spacing: -0.015em;
  text-align: left;
  cursor: pointer;
  list-style: none;
  transition: color 0.22s var(--ease-soft);
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q::marker { content: ''; }
.faq__q:hover { color: var(--cyan); }
.faq__q:focus-visible { outline-offset: -2px; }

.faq__sign {
  position: relative;
  width: 15px; height: 15px;
  flex: none;
}
.faq__sign::before,
.faq__sign::after {
  content: '';
  position: absolute;
  top: 50%; left: 0;
  width: 15px; height: 1.5px;
  background: currentColor;
  border-radius: var(--radius-pill);
  transition: transform 0.36s var(--ease-out);
}
.faq__sign::after { transform: rotate(90deg); }
.faq__item[open] .faq__sign::after { transform: rotate(0deg); }
.faq__item[open] > .faq__q { color: var(--cyan); }

.faq__a {
  overflow: hidden;
  color: var(--text-2);
}
.faq__a p {
  padding-bottom: 1.6rem;
  max-width: 68ch;
  font-size: 0.96rem;
}
/* Zwischen zwei Absätzen einer Antwort reicht der halbe Abstand; die vollen
   1.6rem trennen die Antwort von der nächsten Frage, nicht Absatz von Absatz. */
.faq__a p:not(:last-child) { padding-bottom: 0.85rem; }

/* ==========================================================================
   Kontakt
   ========================================================================== */
.contact { position: relative; overflow: hidden; }
.contact__glow {
  background:
    radial-gradient(45% 55% at 88% 20%, rgba(124, 58, 237, 0.20), transparent 72%),
    radial-gradient(45% 50% at 6% 85%, rgba(56, 189, 248, 0.13), transparent 72%);
}
.contact .shell { position: relative; z-index: 1; }

.contact__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}

.contact__points {
  list-style: none;
  margin: 2rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.8rem;
}
.contact__points li {
  position: relative;
  padding-left: 1.75rem;
  color: var(--text-2);
  font-size: 0.95rem;
}
.contact__points li::before {
  content: '';
  position: absolute;
  left: 0; top: 0.45em;
  width: 11px; height: 6px;
  border-left: 1.5px solid var(--cyan);
  border-bottom: 1.5px solid var(--cyan);
  transform: rotate(-45deg);
}

/* ————— Formular ————— */
.form {
  padding: clamp(1.6rem, 3vw, 2.2rem);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: rgba(22, 27, 34, 0.6);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  display: grid;
  gap: 1.15rem;
}

.form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.15rem;
  /* Ohne start dehnt das Grid beide Spalten auf die Hoehe der hoeheren. Eine
     Fehlermeldung unter "Name" macht dann das Eingabefeld von "E-Mail"
     hoeher, obwohl dort nichts falsch ist. */
  align-items: start;
}

/* start statt des voreingestellten Dehnens: die drei Zeilen (Label, Feld,
   Fehler) behalten ihre eigene Hoehe, auch wenn das Feld daneben mehr Platz
   braucht. Sonst waechst das Eingabefeld selbst mit. */
.field { display: grid; gap: 0.5rem; align-content: start; }
.field label {
  font-size: 0.87rem;
  font-weight: 500;
  color: var(--text-2);
}

.field input[type="text"],
.field input[type="email"],
.field select,
.field textarea {
  width: 100%;
  padding: 0.8rem 0.95rem;
  background: rgba(10, 13, 20, 0.6);
  border: 1px solid var(--border-hi);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 0.95rem;
  transition: border-color 0.22s var(--ease-soft), box-shadow 0.28s var(--ease-out);
}
.field textarea { resize: vertical; min-height: 110px; line-height: 1.6; }
/* #6B7280 wäre nur 4.0:1 auf dem dunklen Feld; Platzhaltertext braucht 4.5:1. */
.field ::placeholder { color: var(--text-3); opacity: 1; }

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--violet);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.22);
}

.field.has-error input,
.field.has-error select,
.field.has-error textarea { border-color: #F87171; }

/* Kurzer Hinweis, dass hier etwas vorausgefuellt wurde. Ohne ihn wechselt der
   Wert im Ruecken des Besuchers, waehrend die Seite noch zum Formular scrollt.
   Cyan statt Violett: das ist keine Fokus-Anzeige, das Feld hat den Fokus
   naemlich nicht. */
.field.is-prefilled select {
  border-color: rgba(56, 189, 248, 0.55);
  box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.14);
}

/* Der Platz fuer die Fehlermeldung ist immer da, auch wenn keine steht.
   Sonst schiebt die erste Meldung das halbe Formular nach unten, und wer
   gerade ins naechste Feld klicken wollte, trifft daneben.

   main.js nimmt dafuer beim Start das hidden-Attribut von den leeren
   Zeilen. Ohne JavaScript bleiben sie hidden -- dort gibt es auch keine
   Pruefung, die sie einblenden koennte, und der reservierte Platz waere
   nur totes Loch. */
.field__error {
  font-size: 0.82rem;
  line-height: 1.3;
  color: #FCA5A5;
  min-height: 1.3em;
  /* Zieht die Zeile dichter ans Feld, damit der reservierte Platz nicht wie
     ein zusaetzlicher Abstand zwischen zwei Feldern aussieht. */
  margin-top: -0.2rem;
  opacity: 0;
  transform: translateY(-3px);
  transition: opacity 0.22s var(--ease-soft), transform 0.22s var(--ease-out);
}
.field.has-error .field__error { opacity: 1; transform: none; }

.select-wrap { position: relative; display: grid; }
.select-wrap select { appearance: none; padding-right: 2.5rem; cursor: pointer; }
.select-wrap select option { background: var(--surface); color: var(--text); }
.select-wrap__chev {
  position: absolute;
  right: 0.95rem;
  top: 50%;
  transform: translateY(-50%);
  width: 16px; height: 16px;
  color: var(--text-2);
  pointer-events: none;
}

.field--check {
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: 0.7rem;
  margin-top: 0.2rem;
}
.field--check input {
  width: 18px; height: 18px;
  margin-top: 0.18rem;
  accent-color: var(--violet);
  cursor: pointer;
}
.field--check label {
  font-size: 0.85rem;
  line-height: 1.55;
  color: var(--text-3);
}
.field--check .field__error { grid-column: 1 / -1; }

/* Sichtbare Warnung, solange Platzhalter-Kontaktdaten hinterlegt sind. */
.form__setup {
  padding: 0.85rem 1rem;
  border: 1px dashed rgba(252, 211, 77, 0.5);
  border-radius: var(--radius-sm);
  background: rgba(252, 211, 77, 0.08);
  color: #FCD34D;
  font-size: 0.85rem;
  line-height: 1.55;
}

.form__status {
  font-size: 0.9rem;
  min-height: 1.2em;
  color: var(--text-2);
}
.form__status.is-ok { color: #6EE7B7; }
.form__status.is-bad { color: #FCA5A5; }

/* ==========================================================================
   Footer
   ========================================================================== */
.footer {
  border-top: 1px solid var(--border);
  padding-block: clamp(3rem, 6vw, 4.5rem) 2.5rem;
  background: var(--bg-2);
}
.footer__top {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 2rem;
  padding-bottom: 2.5rem;
  border-bottom: 1px solid var(--border);
}
/* Gleiches Lockup wie oben, gleiche Rechnung mit dem Rand der Datei. */
.footer__logo {
  height: 132px;
  width: auto;
  display: block;
  margin: -1.05rem 0 -0.35rem -0.45rem;
}

/* .footer__name ist entfallen: das Logo traegt den Schriftzug bei 132px
   gross und lesbar mit, ein zweiter darunter war eine Dopplung. */
.footer__tag {
  margin-top: 0.55rem;
  color: var(--text-3);
  font-size: 0.9rem;
  max-width: 40ch;
}
.footer__meta { display: grid; gap: 0.9rem; justify-items: start; }
@media (min-width: 720px) { .footer__meta { justify-items: end; } }

.footer__status {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.88rem;
  color: var(--text-2);
}
.footer__dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #34D399;
  box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.18);
  flex: none;
}
.footer__links { display: flex; gap: 1.35rem; }
.footer__links a {
  color: var(--text-3);
  text-decoration: none;
  font-size: 0.88rem;
}
.footer__links a:hover { color: var(--cyan); }

.footer__copy {
  margin-top: 2rem;
  font-size: 0.84rem;
  color: var(--text-3);
}

/* Sichtbare Markierung für alles, was der Kunde noch liefern muss */
.placeholder {
  color: #FCD34D;
  border-bottom: 1px dashed rgba(252, 211, 77, 0.55);
  font-style: italic;
}

/* ==========================================================================
   Rechtsseiten — reine Lesefläche, gleiche Welt, weniger Licht
   ========================================================================== */
.doc { padding-block: clamp(7.5rem, 14vh, 10rem) var(--gap-section); }

.doc__title {
  font-size: clamp(1.9rem, 4.2vw, 3.1rem);   /* Sektions-Stufe */
  font-weight: 300;
  letter-spacing: -0.03em;
  line-height: 1.1;
  margin-bottom: 2.25rem;
}

.doc h2 {
  font-size: 1.12rem;                        /* Karten-Titel-Stufe */
  font-weight: 600;
  letter-spacing: -0.015em;
  margin-top: 3rem;      /* mehr Raum über einer Überschrift als darunter */
  margin-bottom: 0.85rem;
}

.doc p {
  color: var(--text-2);
  max-width: 70ch;
  font-size: 0.97rem;
  margin-bottom: 1rem;
}

.doc__block { line-height: 1.9; }

.doc code {
  /* Generisches Schlüsselwort statt einer Font-Liste: das System des Lesers
     entscheidet. Eine eigene Mono-Marke gibt es in diesem System nicht. */
  font-family: monospace;
  font-size: 0.9em;
  padding: 0.12em 0.4em;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  border: 1px solid var(--border);
}

.doc__notice {
  padding: 1.15rem 1.35rem;
  margin-bottom: 2.5rem;
  border: 1px solid rgba(252, 211, 77, 0.32);
  border-radius: var(--radius-sm);
  background: rgba(252, 211, 77, 0.07);
  color: var(--text-2);
  font-size: 0.9rem;
  line-height: 1.65;
  max-width: 70ch;
}
.doc__notice strong { color: #FCD34D; display: block; margin-bottom: 0.35rem; }

/* ==========================================================================
   Reveal — Inhalt ist standardmäßig SICHTBAR. Erst wenn JS läuft, wird
   verborgen und animiert. Ohne JS bleibt die Seite vollständig lesbar.
   ========================================================================== */
.js .reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.85s var(--ease-out), transform 0.85s var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}
.js .reveal.is-in { opacity: 1; transform: none; }

/* ==========================================================================
   Responsiv
   ========================================================================== */
/* Auf breiten Schirmen die Textspalte sicher links vom Orbit-Feld halten,
   dessen linke Kante bei etwa 0.76w minus Radius liegt. Schmale Schirme
   brauchen die volle Breite, deshalb greift die Grenze erst hier. */

/* Der Verbindungsstrahl verschwindet nicht, er kippt in die Senkrechte. */
@media (max-width: 1000px) {
  /* Drei Karten direkt auf eine Spalte, ohne Zwischenstufe: bei zwei Spalten
     bliebe die dritte Karte allein in der zweiten Reihe stehen. */
  .about, .contact__grid, .prices { grid-template-columns: 1fr; }
  .prices__terms { grid-template-columns: 1fr; }

  .steps {
    grid-template-columns: 1fr;
    row-gap: 2.4rem;
    padding-top: 0;
    padding-left: 2.4rem;
  }
  .steps__beam {
    top: 0.5rem;
    bottom: 0.5rem;
    left: 4px;
    right: auto;
    width: 1px;
    height: auto;
  }
  .steps__beam-fill {
    width: 100%;
    height: 100%;
    transform: scaleY(0);
    transform-origin: top;
  }
  .steps__beam-fill.is-drawn { transform: scaleY(1); }
  .step__dot { top: 0.45rem; left: -2.4rem; margin-top: 0; }
}

@media (max-width: 860px) {
  .nav__links, .nav__cta { display: none; }
  .nav__toggle { display: flex; }
  .nav__mobile { display: flex; }                 /* ohne JS erreichbar */
  .js .nav__mobile { display: none; }
  .js .nav__mobile[data-open="true"] { display: flex; }
  .nav { background: rgba(10, 13, 20, 0.72); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
}

@media (max-width: 760px) {
  .band__grid { grid-template-columns: 1fr; gap: 2rem; }
  .band__figure { text-align: left; }
  .band__facts { max-width: none; }
}

@media (max-width: 620px) {
  .hero { min-height: auto; padding-block: 7.5rem 4rem; }
  .hero__title { max-width: none; }
  .hero__title-accent { font-size: 0.52em; }
  .form__row { grid-template-columns: 1fr; }
  .pledge { grid-template-columns: 1fr; gap: 1.1rem; }
  .footer__top { flex-direction: column; }
}

/* ==========================================================================
   Reduzierte Bewegung — jede Animation aus, Inhalt vollständig sichtbar
   ========================================================================== */
@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;
  }
  .js .reveal { opacity: 1; transform: none; }
  .steps__beam-fill { transform: scaleX(1) !important; }
  /* Kein Wachsen, aber der Glow bleibt: der Hover muss sichtbar bleiben. */
  .btn--primary:hover, .btn--primary:focus-visible,
  .btn--ghost:hover, .btn--ghost:focus-visible { transform: none; }
}