/* ==========================================================================
   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);

  --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. */
.nav__logo {
  height: 104px;
  width: auto;
  flex: none;
  display: block;
  mix-blend-mode: screen;
  /* Links und oben/unten traegt die Datei leeren Rand mit. Der wird
     herausgezogen, damit das Logo buendig zum Raster sitzt und die
     Navigationsleiste nicht unnoetig hoch wird. */
  margin: -22px 0 -22px -14px;
}
@media (max-width: 860px) {
  .nav__logo { height: 84px; margin: -18px 0 -18px -12px; }
}

.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); }

.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;
}

/* ==========================================================================
   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;
}

/* ==========================================================================
   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;
}

.field { display: grid; gap: 0.5rem; }
.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; }

.field__error {
  font-size: 0.82rem;
  color: #FCA5A5;
}

.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 schwarzen Grund. */
.footer__logo {
  height: 104px;
  width: auto;
  display: block;
  margin: -0.9rem 0 0.2rem -0.5rem;
  mix-blend-mode: screen;
}

/* Der Name steht hier trotzdem als Text: im Footer ist er die Ueberschrift
   des Blocks, und die Wortmarke im Bild ist bei dieser Groesse zu klein,
   um ihn zu ersetzen. */
.footer__name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.02rem;
  letter-spacing: -0.02em;
}
.footer__tag {
  margin-top: 0.5rem;
  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) {
  .about, .contact__grid { 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; }
}