/* ============================================================
   RETRIVA.CSS: Layout + Komponenten der Marketing-Website
   Design: "Glas am Tag". Mobile-first.
   Breakpoints: 640px, 960px, 1280px.
   Konvention: BEM-artig (block__element, block--modifier).
   Animations-Regel: nur transform und opacity in Transitions.
   Eine bewusste Ausnahme: grid-template-rows im Accordion.
   ============================================================ */

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  background: var(--sky);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  color: var(--ink);
  background: var(--sky);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Aurora-Layer: drei weiche Farbflecken, fix im Viewport.
   Helle Baender sind transparent, dadurch scheint die Aurora
   durch und die Frosted-Glass-Karten haben etwas zu verwischen. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(560px 560px at 10% 8%, rgba(110, 98, 229, 0.20), transparent 64%),
    radial-gradient(500px 500px at 92% 12%, rgba(14, 147, 132, 0.16), transparent 64%),
    radial-gradient(480px 480px at 46% 104%, rgba(244, 162, 107, 0.18), transparent 64%);
}

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

h1, h2, h3, h4 { margin: 0; font-family: var(--font-display); font-weight: 600; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; }

::selection { background: rgba(14, 147, 132, 0.18); color: inherit; }

/* Skip-Link */
.skip-link {
  position: absolute;
  top: -100px;
  left: var(--space-4);
  z-index: 200;
  padding: var(--space-2) var(--space-4);
  background: linear-gradient(135deg, var(--teal), var(--teal-deep));
  color: #FFFFFF;
  border-radius: var(--radius-sm);
  font-weight: 600;
  text-decoration: none;
}
.skip-link:focus-visible { top: var(--space-2); }

/* Globaler Fokus-Ring: 2px Teal mit Offset */
:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 3px;
  border-radius: var(--radius-xs);
}
.band--midnight :focus-visible { outline-color: var(--teal-night); }

/* ---- Layout ---- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--space-4);
}
.container--wide { max-width: var(--container-wide); }

@media (min-width: 640px)  { .container { padding-inline: var(--space-6); } }
@media (min-width: 960px)  { .container { padding-inline: var(--space-7); } }

/* Sektions-Baender: editorialer Rhythmus Tag / Nacht */
.band {
  position: relative;
  background: var(--s-bg);
  color: var(--s-fg);
  padding-block: var(--space-8);
  overflow: hidden;
}
@media (min-width: 960px) { .band { padding-block: var(--space-9); } }
@media (min-width: 1280px) { .band { padding-block: var(--space-10); } }

.band--flush-top { padding-top: 0; }
.band--flush-bottom { padding-bottom: 0; }

/* Tag-Band: dezente Aurora-Akzente pro Band, damit die
   Frosted-Glass-Karten ueberall Farbe zu verwischen haben */
.band--paper::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(560px 440px at 88% 10%, rgba(110, 98, 229, 0.10), transparent 65%),
    radial-gradient(600px 460px at 4% 90%, rgba(14, 147, 132, 0.09), transparent 65%),
    radial-gradient(460px 380px at 58% 112%, rgba(244, 162, 107, 0.09), transparent 65%);
}

/* Nacht-Band: Void mit Mesh-Glows in Teal und Iris */
.band--midnight {
  background:
    radial-gradient(820px 480px at 20% -10%, rgba(62, 211, 192, 0.10), transparent 60%),
    radial-gradient(720px 460px at 88% 110%, rgba(143, 138, 255, 0.12), transparent 60%),
    var(--void);
}

/* Sternenstaub auf Nacht-Baendern, kachelt sehr dezent */
.band--midnight::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.4;
  z-index: 0;
  background-image:
    radial-gradient(1px 1px at 12% 24%, rgba(255, 255, 255, 0.5) 50%, transparent 51%),
    radial-gradient(1px 1px at 78% 12%, rgba(255, 255, 255, 0.35) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 55% 68%, rgba(255, 255, 255, 0.3) 50%, transparent 51%),
    radial-gradient(1px 1px at 32% 86%, rgba(255, 255, 255, 0.4) 50%, transparent 51%),
    radial-gradient(1px 1px at 90% 55%, rgba(255, 255, 255, 0.3) 50%, transparent 51%);
  background-size: 560px 560px;
}

/* Grain: SVG feTurbulence als Data-URI, ca. 3% Opacity */
.band::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.03;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  z-index: 0;
}
.band > .container { position: relative; z-index: 2; }

/* Aurora-Glow statt Wasserzeichen: weicher Farbkreis, der per
   GSAP langsam driftet. Das § im Markup bleibt unsichtbar. */
.watermark {
  position: absolute;
  z-index: 1;
  width: clamp(22rem, 42vw, 38rem);
  height: clamp(22rem, 42vw, 38rem);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(110, 98, 229, 0.16), transparent 62%);
  color: transparent;
  font-size: 0;
  line-height: 0;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
  will-change: transform;
}
.watermark--hero { top: -8rem; right: -8rem; }
.watermark--cta { bottom: -10rem; left: -6rem; background: radial-gradient(circle, rgba(14, 147, 132, 0.14), transparent 62%); }
.band--midnight .watermark { background: radial-gradient(circle, rgba(143, 138, 255, 0.13), transparent 62%); }
.band--midnight .watermark--cta { background: radial-gradient(circle, rgba(62, 211, 192, 0.12), transparent 62%); }

/* Grid-Hilfen */
.grid { display: grid; gap: var(--space-5); }
@media (min-width: 640px)  { .grid--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px)  {
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
}

/* ---- Typo-Bausteine ---- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--s-accent, var(--teal));
  margin-bottom: var(--space-4);
}
.eyebrow::before {
  content: "";
  width: 1.5rem;
  height: 1px;
  background: var(--s-accent, var(--teal));
}

.section-title {
  font-size: var(--text-2xl);
  font-weight: 700;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
  max-width: 36ch;
}
@media (min-width: 960px) { .section-title { font-size: var(--text-3xl); } }

.section-lead {
  margin-top: var(--space-4);
  font-size: var(--text-lg);
  color: var(--s-fg-soft);
  max-width: 56ch;
}

.section-head { margin-bottom: var(--space-7); }
@media (min-width: 960px) { .section-head { margin-bottom: var(--space-8); } }

.highlight { color: var(--s-accent, var(--teal)); }
.highlight--flieder { color: var(--s-flieder, var(--iris)); }

.mono { font-family: var(--font-mono); }

/* ---- Buttons ---- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 0.875rem 1.625rem;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: transform var(--dur-base) var(--ease-spring), opacity var(--dur-fast) ease;
  will-change: transform;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0) scale(0.97); }

.btn--primary {
  background: linear-gradient(135deg, var(--teal), var(--teal-deep));
  color: #FFFFFF;
  box-shadow: var(--shadow-cta);
}
.btn--primary:hover { box-shadow: var(--shadow-cta-hover); }

.btn--ghost {
  background: var(--s-card, var(--glass));
  color: var(--s-fg, var(--ink));
  border-color: var(--s-card-line, var(--edge));
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
  box-shadow: var(--s-shadow, var(--shadow-card));
}
.btn--ghost:hover { border-color: var(--s-accent, var(--teal)); color: var(--s-accent, var(--teal)); }

.btn--lg { padding: 1.0625rem 2.125rem; font-size: var(--text-base); }

/* Magnetic-Wrapper (JS bewegt nur transform) */
.magnetic { display: inline-block; will-change: transform; }

/* ---- Navigation: schwebende Glas-Leiste ---- */
.nav {
  position: fixed;
  top: var(--nav-offset);
  left: var(--nav-offset);
  right: var(--nav-offset);
  z-index: 100;
  height: var(--nav-height);
  background: var(--glass);
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
  border: 1px solid var(--edge);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
}
.nav.is-scrolled { background: var(--glass-hi); box-shadow: var(--shadow-nav); }

.nav__inner {
  height: calc(var(--nav-height) - 2px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
}

.nav__brand {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.45rem;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-decoration: none;
  transition: transform var(--dur-base) var(--ease-spring);
  display: inline-block;
}
.nav__brand:hover { transform: translateY(-1px); }
.nav__brand:active { transform: translateY(0); }
.nav__brand-dot { color: var(--teal); }

.nav__links {
  display: none;
  align-items: center;
  gap: var(--space-5);
}
@media (min-width: 960px) { .nav__links { display: flex; } }

.nav__link {
  position: relative;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--ink-dim);
  text-decoration: none;
  padding: var(--space-2) 0;
  transition: opacity var(--dur-fast) ease;
}
.nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--teal), var(--iris));
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-base) var(--ease-reveal);
}
.nav__link:hover { color: var(--ink); }
.nav__link:hover::after, .nav__link.is-active::after { transform: scaleX(1); }
.nav__link:active { opacity: 0.7; }

.nav__cta { display: none; }
@media (min-width: 640px) { .nav__cta { display: inline-flex; } }

/* Hamburger */
.nav__toggle {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0.8125rem;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid var(--edge);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: transform var(--dur-base) var(--ease-spring);
}
.nav__toggle:hover { transform: translateY(-1px); border-color: var(--teal-line); }
.nav__toggle:active { transform: scale(0.94); }
@media (min-width: 960px) { .nav__toggle { display: none; } }

.nav__toggle-bar {
  width: 100%;
  height: 2px;
  background: var(--ink);
  border-radius: 2px;
  transition: transform var(--dur-base) var(--ease-spring), opacity var(--dur-fast) ease;
}
.nav__toggle[aria-expanded="true"] .nav__toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] .nav__toggle-bar:nth-child(2) { opacity: 0; }
.nav__toggle[aria-expanded="true"] .nav__toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobiles Menue: Glas-Karte unter der Leiste */
.nav__menu {
  position: fixed;
  top: calc(var(--nav-height) + var(--nav-offset) + 0.5rem);
  left: var(--nav-offset);
  right: var(--nav-offset);
  z-index: 99;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-4);
  background: var(--glass-hi);
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
  border: 1px solid var(--edge);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-big);
  transform: translateY(-8px);
  opacity: 0;
  visibility: hidden;
  transition: transform var(--dur-base) var(--ease-reveal), opacity var(--dur-base) ease, visibility 0s linear var(--dur-base);
}
.nav__menu.is-open {
  transform: translateY(0);
  opacity: 1;
  visibility: visible;
  transition: transform var(--dur-base) var(--ease-reveal), opacity var(--dur-base) ease, visibility 0s;
}
@media (min-width: 960px) { .nav__menu { display: none; } }

.nav__menu-link {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  font-size: var(--text-lg);
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  transition: transform var(--dur-fast) ease, opacity var(--dur-fast) ease;
  display: block;
}
.nav__menu-link:hover { transform: translateX(4px); color: var(--teal); }
.nav__menu-link:active { opacity: 0.7; }
.nav__menu .btn { margin-top: var(--space-3); }

/* ---- Hero ---- */
.hero {
  padding-top: calc(var(--nav-height) + var(--nav-offset) + var(--space-8));
  padding-bottom: var(--space-8);
}
@media (min-width: 960px) {
  .hero { padding-top: calc(var(--nav-height) + var(--nav-offset) + var(--space-9)); padding-bottom: var(--space-9); }
}

.hero__layout {
  display: grid;
  gap: var(--space-7);
  align-items: center;
}
@media (min-width: 960px) {
  .hero__layout { grid-template-columns: minmax(0, 11fr) minmax(0, 9fr); gap: var(--space-7); }
}

.hero__title {
  font-size: clamp(2.5rem, 8vw, 3.5rem);
  font-weight: 700;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
}
/* 4.25rem statt --text-5xl (4.5rem): "Anwaltskanzleien." muss als
   laengstes Rotationswort einzeilig in die 11fr-Spalte passen. */
@media (min-width: 1280px) { .hero__title { font-size: 4.25rem; } }

/* Rotierendes Wort: Teal-zu-Iris-Verlauf.
   .swap-wrap haelt Wort + Satzpunkt zusammen, sonst bricht der Punkt
   bei langen Woertern (Anwaltskanzleien) allein in die naechste Zeile. */
.swap-wrap { white-space: nowrap; }
.swap-word {
  display: inline-block;
  color: var(--teal);
  will-change: transform, opacity;
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .swap-word {
    background: linear-gradient(110deg, var(--teal) 15%, var(--iris) 85%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}

.hero__sub {
  margin-top: var(--space-5);
  font-size: var(--text-lg);
  color: var(--s-fg-soft, var(--ink-dim));
  max-width: 52ch;
}

.hero__ctas {
  margin-top: var(--space-6);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.hero__note {
  margin-top: var(--space-4);
  font-size: var(--text-xs);
  font-family: var(--font-mono);
  color: var(--s-fg-muted, var(--ink-faint));
}

/* ---- Produkt-Mockup (reines HTML/CSS, kein Screenshot) ----
   Tag-Variante: weisses Frosted-Glass-Fenster wie im
   Referenz-Mockup. Auf Nacht-Baendern: dunkles Glas. ---- */
.mockup {
  position: relative;
  background: var(--glass);
  border: 1px solid var(--edge);
  border-radius: var(--radius-lg);
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
  box-shadow: var(--shadow-big);
  overflow: hidden;
  will-change: transform;
}

.mockup__bar {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--edge-soft);
  background: rgba(255, 255, 255, 0.45);
}
.mockup__dot { width: 9px; height: 9px; border-radius: 50%; background: rgba(28, 34, 48, 0.14); }
.mockup__dot--klee { background: var(--teal); box-shadow: 0 0 0 3px var(--teal-soft); }
.mockup__bar-title {
  margin-left: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--ink-faint);
}

.mockup__body {
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-height: 320px;
}

.mockup__msg {
  max-width: 88%;
  padding: var(--space-3) var(--space-4);
  border-radius: 20px;
  font-size: var(--text-sm);
  line-height: 1.55;
}
.mockup__msg--user {
  align-self: flex-end;
  background: linear-gradient(135deg, var(--iris), #5A4FD4);
  border: 0;
  border-bottom-right-radius: var(--radius-xs);
  color: #FFFFFF;
  box-shadow: 0 14px 32px rgba(110, 98, 229, 0.35), inset 0 1px 1px rgba(255, 255, 255, 0.35);
}
.mockup__msg--bot {
  align-self: flex-start;
  background: var(--glass-hi);
  border: 1px solid var(--edge);
  border-bottom-left-radius: var(--radius-xs);
  color: var(--ink);
  box-shadow: var(--shadow-card);
}

/* Nacht-Variante des Mockups (z. B. Konfidenz-Gate-Demo) */
.band--midnight .mockup {
  background: var(--night-glass);
  border-color: var(--night-edge);
  box-shadow: var(--shadow-night);
}
.band--midnight .mockup__bar {
  background: rgba(255, 255, 255, 0.04);
  border-bottom-color: var(--night-edge);
}
.band--midnight .mockup__dot { background: var(--night-edge-hi); }
.band--midnight .mockup__dot--klee { background: var(--teal-night); box-shadow: 0 0 10px rgba(62, 211, 192, 0.45); }
.band--midnight .mockup__bar-title { color: var(--fg-night-muted); }
.band--midnight .mockup__msg--user {
  background: linear-gradient(135deg, rgba(143, 138, 255, 0.28), rgba(143, 138, 255, 0.10));
  border: 1px solid var(--iris-night-line);
  color: var(--fg-night);
  box-shadow: 0 10px 30px rgba(143, 138, 255, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.band--midnight .mockup__msg--bot {
  background: var(--night-glass-2);
  border-color: var(--night-edge);
  color: var(--fg-night-soft);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10);
}

/* Antwort startet unsichtbar, JS blendet ein; ohne Motion sichtbar */
html.motion .mockup__msg--bot,
html.motion .mockup__sources { opacity: 0; }

/* Tipp-Cursor */
.mockup__caret {
  display: none;
  width: 2px;
  height: 1em;
  margin-left: 1px;
  vertical-align: text-bottom;
  background: rgba(255, 255, 255, 0.9);
  animation: caret-blink 0.9s step-end infinite;
}
html.motion .mockup__caret { display: inline-block; }
@keyframes caret-blink { 50% { opacity: 0; } }

/* Quellen-Pills mit Stempel-Animation (JS setzt .is-stamped) */
.mockup__sources {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-self: flex-start;
}
.source-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.375rem 0.75rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--teal-line);
  background: var(--teal-soft);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--teal);
}
.source-pill::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--teal);
  box-shadow: 0 0 0 3px var(--teal-soft);
}
.band--midnight .source-pill {
  border-color: var(--teal-night-line);
  background: var(--teal-night-soft);
  color: var(--teal-night);
}
.band--midnight .source-pill::before {
  background: var(--teal-night);
  box-shadow: 0 0 8px rgba(62, 211, 192, 0.5);
}
html.motion .source-pill { transform: scale(0.6) rotate(-6deg); opacity: 0; }
html.motion .source-pill.is-stamped {
  animation: stamp var(--dur-slow) var(--ease-spring) forwards;
}
@keyframes stamp {
  0%   { transform: scale(1.5) rotate(4deg); opacity: 0; }
  60%  { transform: scale(0.94) rotate(-1deg); opacity: 1; }
  100% { transform: scale(1) rotate(0deg); opacity: 1; }
}

/* Zarter Iris-Schimmer am Mockup-Rand fuer Tiefe */
.mockup::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(420px 200px at 80% 0%, rgba(110, 98, 229, 0.08), transparent 70%);
}
.band--midnight .mockup::after {
  background: radial-gradient(420px 200px at 80% 0%, rgba(143, 138, 255, 0.10), transparent 70%);
}

/* ---- Vertrauensband: Counter in Glass-Tiles + Marquee ---- */
.stats {
  display: grid;
  gap: var(--space-4);
}
@media (min-width: 640px) { .stats { grid-template-columns: repeat(3, 1fr); } }

.stat {
  text-align: center;
  padding: var(--space-6) var(--space-4);
  background: var(--s-card, var(--glass));
  border: 1px solid var(--s-card-line, var(--edge));
  border-radius: var(--radius-md);
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
  box-shadow: var(--s-shadow, var(--shadow-card));
}
.stat__value {
  font-family: var(--font-mono);
  font-size: var(--text-3xl);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--s-accent, var(--teal));
  line-height: 1.1;
}
.stat__affix { font-size: 0.6em; color: var(--s-fg-soft, var(--ink-dim)); }
.stat__label {
  margin-top: var(--space-2);
  font-size: var(--text-sm);
  color: var(--s-fg-soft, var(--ink-dim));
}

/* Marquee */
.marquee {
  position: relative;
  overflow: hidden;
  padding-block: var(--space-6) var(--space-2);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.marquee__track {
  display: flex;
  gap: var(--space-3);
  width: max-content;
  will-change: transform;
  animation: marquee-scroll 36s linear infinite;
}
@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.marquee:hover .marquee__track { animation-play-state: paused; }

.marquee__item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.5rem 1rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--edge);
  background: rgba(255, 255, 255, 0.72);
  box-shadow: 0 4px 12px rgba(28, 34, 48, 0.06);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--ink-dim);
  white-space: nowrap;
}
.marquee__item::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--teal);
  box-shadow: 0 0 0 3px var(--teal-soft);
}
.band--midnight .marquee__item {
  border-color: var(--night-edge);
  background: var(--night-glass);
  box-shadow: none;
  color: var(--fg-night-soft);
}
.band--midnight .marquee__item::before {
  background: var(--teal-night);
  box-shadow: 0 0 8px rgba(62, 211, 192, 0.5);
}

/* ---- Karten: Frosted Glass ---- */
.card {
  position: relative;
  background: var(--s-card);
  border: 1px solid var(--s-card-line, var(--s-line));
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
  box-shadow: var(--s-shadow);
  transition: transform var(--dur-base) var(--ease-spring);
  will-change: transform;
}
.card:hover { transform: translateY(-4px); }

/* Schatten-Wechsel ueber Pseudo-Element, damit nur opacity animiert */
.card::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  box-shadow: var(--s-shadow-hover);
  opacity: 0;
  transition: opacity var(--dur-base) ease;
  pointer-events: none;
  z-index: -1;
}
.card:hover::before { opacity: 1; }

.card__title {
  font-size: var(--text-xl);
  letter-spacing: -0.015em;
  margin-bottom: var(--space-3);
}
.card__text {
  font-size: var(--text-sm);
  color: var(--s-fg-soft);
}

/* Schmerzpunkt-Karten mit CSS-Illustrationen */
.pain__icon {
  position: relative;
  width: 3.5rem;
  height: 3.5rem;
  margin-bottom: var(--space-5);
  border-radius: var(--radius-md);
  background: var(--s-bg-soft);
  border: 1px solid var(--s-line);
  display: grid;
  place-items: center;
  overflow: hidden;
}

/* Illustration 1: Uhr (Recherchezeit) */
.ill-clock { position: relative; width: 1.75rem; height: 1.75rem; border: 2px solid var(--s-fg-muted); border-radius: 50%; }
.ill-clock::before, .ill-clock::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 50%;
  transform-origin: bottom center;
  background: var(--error);
  border-radius: 2px;
}
.ill-clock::before { width: 2px; height: 0.6rem; transform: translateX(-50%) rotate(40deg); }
.ill-clock::after  { width: 2px; height: 0.45rem; transform: translateX(-50%) rotate(140deg); background: var(--s-fg-muted); }

/* Illustration 2: Sprechblase mit Fragezeichen (Halluzination) */
.ill-halluc { position: relative; width: 1.9rem; height: 1.5rem; border: 2px solid var(--s-fg-muted); border-radius: 8px 8px 8px 2px; }
.ill-halluc::before {
  content: "?";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--error);
}

/* Illustration 3: Wolke durchgestrichen (Datenschutz) */
.ill-cloud { position: relative; width: 2rem; height: 1.1rem; }
.ill-cloud::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 2px solid var(--s-fg-muted);
  border-radius: 999px;
}
.ill-cloud::after {
  content: "";
  position: absolute;
  left: -10%;
  top: 50%;
  width: 120%;
  height: 2px;
  background: var(--error);
  border-radius: 2px;
  transform: rotate(-24deg);
}

/* Der Retriva-Dreh: starker Satz */
.pivot {
  margin-top: var(--space-8);
  text-align: center;
}
.pivot__line {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-2xl);
  line-height: 1.25;
  letter-spacing: var(--tracking-display);
  max-width: 30ch;
  margin-inline: auto;
}
@media (min-width: 960px) { .pivot__line { font-size: var(--text-3xl); } }

/* ---- Feature-Karten mit UI-Vignetten ---- */
.feature { display: flex; flex-direction: column; gap: var(--space-5); }

.feature__vignette {
  background: var(--s-bg-soft, var(--glass-deep));
  border: 1px solid var(--s-line);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--s-fg-soft);
  overflow: hidden;
}

.vignette-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-xs);
}
.vignette-row + .vignette-row { margin-top: var(--space-1); }
.vignette-row--active { background: var(--s-accent-soft, var(--teal-soft)); color: var(--s-accent, var(--teal)); }
.vignette-row--muted { color: var(--s-fg-muted); }

.vignette-chip {
  display: inline-flex;
  padding: 0.15rem 0.5rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--s-accent-line, var(--teal-line));
  background: var(--s-accent-soft, var(--teal-soft));
  color: var(--s-accent, var(--teal));
  font-size: 0.66rem;
}
.vignette-chip--flieder {
  border-color: var(--s-flieder-line, var(--iris-line));
  background: var(--s-flieder-soft, var(--iris-soft));
  color: var(--s-flieder, var(--iris));
}

.vignette-bar {
  height: 6px;
  border-radius: 3px;
  background: var(--s-line-hover);
  overflow: hidden;
  flex: 1;
}
.vignette-bar__fill {
  display: block;
  height: 100%;
  width: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--s-accent, var(--teal)), var(--s-flieder, var(--iris)));
  transform: scaleX(0.72);
  transform-origin: left;
}

/* ---- Pipeline: horizontal gepinnte Scroll-Sektion ----
   Fallback ohne JS: vertikale Liste (Default).
   Mit JS + Motion traegt <html> die Klasse "motion",
   dann wird der Track horizontal und via ScrollTrigger gepinnt.
   Liegt auf einem Nacht-Band: dunkle Glas-Karten. */
.pipeline { position: relative; }

.pipeline__track {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.pipeline__step {
  position: relative;
  background: var(--s-card, var(--night-glass));
  border: 1px solid var(--s-card-line, var(--night-edge));
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
  box-shadow: var(--s-shadow, var(--shadow-night));
}

.pipeline__num {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--s-flieder, var(--iris-night));
  letter-spacing: var(--tracking-wide);
}
.pipeline__step-title {
  margin-top: var(--space-2);
  font-size: var(--text-xl);
  letter-spacing: -0.015em;
}
.pipeline__step-text {
  margin-top: var(--space-3);
  font-size: var(--text-sm);
  color: var(--s-fg-soft);
}

.pipeline__glyph {
  margin-top: var(--space-5);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--s-accent, var(--teal-night));
  padding: var(--space-3);
  border: 1px dashed var(--s-accent-line, var(--teal-night-line));
  border-radius: var(--radius-sm);
  background: rgba(10, 13, 22, 0.45);
  white-space: pre-line;
}

/* Horizontale Variante nur, wenn site.js den Pin aufsetzt
   (html.pipeline-pin), ab 960px. Sonst: vertikale Liste. */
@media (min-width: 960px) {
  html.pipeline-pin .pipeline__viewport { overflow: hidden; }
  html.pipeline-pin .pipeline__track {
    flex-direction: row;
    width: max-content;
    will-change: transform;
  }
  html.pipeline-pin .pipeline__step { width: min(420px, 38vw); flex-shrink: 0; }
}

/* Wandernder Teal-Glow in der Pipeline (ersetzt das Paragraphen-
   zeichen; der Glyph im Markup bleibt unsichtbar) */
.pipeline__para {
  display: none;
  position: absolute;
  top: -2.5rem;
  left: 0;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--teal-night);
  box-shadow: 0 0 18px rgba(62, 211, 192, 0.55), 0 0 44px rgba(62, 211, 192, 0.30);
  color: transparent;
  font-size: 0;
  line-height: 0;
  overflow: hidden;
  opacity: 0.85;
  will-change: transform;
}
@media (min-width: 960px) {
  html.pipeline-pin .pipeline__para { display: block; }
}

/* ---- Vergleichstabelle lokal vs. Cloud ---- */
.compare-wrap { overflow-x: auto; }

/* Wisch-Hinweis: auf schmalen Screens ragt die Tabelle ueber den
   Viewport hinaus, iOS zeigt keine Scrollbalken. Der Hinweis
   erscheint nur, solange die jeweilige Tabelle real ueberlaeuft,
   und scrollt beim ersten Wischen mit aus dem Bild. */
.compare-wrap::before {
  content: "Tabelle lässt sich seitlich wischen";
  display: none;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--s-fg-muted);
  margin-bottom: var(--space-3);
}
@media (max-width: 619px) {
  .compare-wrap:has(.compare)::before { display: block; }
}
@media (max-width: 839px) {
  .compare-wrap:has(.compare--wide)::before { display: block; }
}

.compare {
  width: 100%;
  min-width: 540px;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--s-card, var(--glass));
  border: 1px solid var(--s-card-line, var(--edge));
  border-radius: var(--radius-lg);
  overflow: hidden;
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
  box-shadow: var(--s-shadow, var(--shadow-card));
  font-size: var(--text-sm);
}
.compare th, .compare td {
  padding: var(--space-4);
  text-align: left;
  border-bottom: 1px solid var(--s-line);
}
.compare tr:last-child td { border-bottom: none; }
.compare thead th {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--s-fg-muted);
  background: var(--s-bg-soft);
}
.compare td:first-child { color: var(--s-fg); font-weight: 500; }
.compare td { color: var(--s-fg-soft); }
.compare__local { background: rgba(14, 147, 132, 0.05); }

/* Animiertes Teal-Haekchen: Pop via scale + opacity */
.check {
  display: inline-grid;
  place-items: center;
  width: 1.375rem;
  height: 1.375rem;
  border-radius: 50%;
  background: var(--s-accent-soft, var(--teal-soft));
  color: var(--s-accent, var(--teal));
  font-weight: 700;
  font-size: 0.75rem;
}
html.motion .check {
  transform: scale(0);
  opacity: 0;
}
html.motion .check.is-on {
  animation: check-pop var(--dur-slow) var(--ease-spring) forwards;
}
@keyframes check-pop {
  from { transform: scale(0) rotate(-30deg); opacity: 0; }
  to   { transform: scale(1) rotate(0deg); opacity: 1; }
}

.cross {
  display: inline-grid;
  place-items: center;
  width: 1.375rem;
  height: 1.375rem;
  border-radius: 50%;
  background: rgba(222, 91, 71, 0.12);
  color: var(--error);
  font-weight: 700;
  font-size: 0.7rem;
}

.law-note {
  margin-top: var(--space-5);
  padding: var(--space-4) var(--space-5);
  background: var(--s-card, var(--glass));
  border: 1px solid var(--s-card-line, var(--edge));
  border-left: 3px solid var(--s-accent, var(--teal));
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
  box-shadow: var(--s-shadow, var(--shadow-card));
  font-size: var(--text-sm);
  color: var(--s-fg-soft);
}
.law-note .mono { color: var(--s-accent, var(--teal)); }

/* ---- FAQ Accordion: Glass-Cards ----
   Bewusste Ausnahme von der Transform/Opacity-Regel:
   grid-template-rows 0fr -> 1fr fuer die Hoehe. */
.accordion {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  max-width: 46rem;
  margin-inline: auto;
}

.accordion__item {
  background: var(--s-card, var(--glass));
  border: 1px solid var(--s-card-line, var(--edge));
  border-radius: var(--radius-md);
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
  box-shadow: var(--s-shadow, var(--shadow-card));
  overflow: hidden;
}

.accordion__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  width: 100%;
  padding: var(--space-5);
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--s-fg);
  transition: opacity var(--dur-fast) ease;
}
.accordion__trigger:hover { opacity: 0.85; }
.accordion__trigger:active { opacity: 0.7; }
.accordion__trigger:focus-visible { outline-offset: -2px; }

.accordion__icon {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  border: 1px solid var(--s-accent-line, var(--teal-line));
  background: var(--s-accent-soft, var(--teal-soft));
  color: var(--s-accent, var(--teal));
  font-size: 1rem;
  line-height: 1;
  transition: transform var(--dur-base) var(--ease-spring);
}
.accordion__trigger[aria-expanded="true"] .accordion__icon { transform: rotate(45deg); }

.accordion__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur-base) var(--ease-reveal);
}
.accordion__item.is-open .accordion__panel { grid-template-rows: 1fr; }

.accordion__panel-inner {
  overflow: hidden;
  min-height: 0;
}
.accordion__panel-content {
  padding: 0 var(--space-5) var(--space-5);
  font-size: var(--text-sm);
  color: var(--s-fg-soft);
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity var(--dur-base) ease, transform var(--dur-base) var(--ease-reveal);
}
.accordion__item.is-open .accordion__panel-content {
  opacity: 1;
  transform: translateY(0);
}

/* ---- Abschluss-CTA: Nacht-Glas-Panel mit Teal/Iris-Glows ---- */
.cta-final {
  position: relative;
  border-radius: var(--radius-lg);
  padding: var(--space-8) var(--space-5);
  text-align: center;
  background:
    radial-gradient(640px 320px at 18% 0%, rgba(62, 211, 192, 0.16), transparent 65%),
    radial-gradient(620px 340px at 85% 100%, rgba(143, 138, 255, 0.18), transparent 65%),
    var(--night-glass);
  border: 1px solid var(--night-edge-hi);
  -webkit-backdrop-filter: blur(26px);
  backdrop-filter: blur(26px);
  box-shadow: var(--shadow-night-hover);
  overflow: hidden;
}
@media (min-width: 960px) { .cta-final { padding: var(--space-9) var(--space-8); } }

.cta-final__title {
  font-size: var(--text-2xl);
  font-weight: 700;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
  max-width: 24ch;
  margin-inline: auto;
}
@media (min-width: 960px) { .cta-final__title { font-size: var(--text-3xl); } }

.cta-final__text {
  margin-top: var(--space-4);
  color: var(--s-fg-soft, var(--fg-night-soft));
  max-width: 48ch;
  margin-inline: auto;
}

.cta-final__actions {
  margin-top: var(--space-6);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
}

/* ---- Footer: Nacht-Abschluss ---- */
.footer {
  background:
    radial-gradient(900px 420px at 82% 0%, rgba(143, 138, 255, 0.08), transparent 60%),
    radial-gradient(720px 380px at 8% 100%, rgba(62, 211, 192, 0.07), transparent 60%),
    var(--void);
  color: var(--fg-night-soft);
  border-top: 1px solid var(--night-edge);
  padding-block: var(--space-7) var(--space-6);
  font-size: var(--text-sm);
}
.footer :focus-visible { outline-color: var(--teal-night); }

.footer__grid {
  display: grid;
  gap: var(--space-6);
}
@media (min-width: 640px) { .footer__grid { grid-template-columns: 2fr 1fr 1fr; } }

.footer__brand {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.375rem;
  color: var(--fg-night);
  text-decoration: none;
}
.footer__brand .nav__brand-dot { color: var(--teal-night); }
.footer__claim {
  margin-top: var(--space-3);
  max-width: 36ch;
  color: var(--fg-night-muted);
}

.footer__heading {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--fg-night-muted);
  margin-bottom: var(--space-3);
}

.footer__link {
  display: inline-block;
  padding-block: var(--space-1);
  color: var(--fg-night-soft);
  text-decoration: none;
  transition: transform var(--dur-fast) ease, opacity var(--dur-fast) ease;
}
.footer__link:hover { color: var(--teal-night); transform: translateX(2px); }
.footer__link:active { opacity: 0.7; }

/* Mail-Links in hellen Karten (Impressum, Datenschutz) */
.band--paper .footer__link { color: var(--teal); text-decoration: underline; text-underline-offset: 3px; }
.band--paper .footer__link:hover { color: var(--teal-deep); transform: none; }

.footer__meta {
  margin-top: var(--space-7);
  padding-top: var(--space-5);
  border-top: 1px solid var(--night-edge);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-3);
  font-size: var(--text-xs);
  color: var(--fg-night-muted);
  font-family: var(--font-mono);
}

/* ============================================================
   Welle 2: Unterseiten (technologie.html, vergleich.html)
   ============================================================ */

/* Subpage-Hero: kompakter als der Start-Hero */
.subhero {
  padding-top: calc(var(--nav-height) + var(--nav-offset) + var(--space-8));
  padding-bottom: var(--space-7);
}
@media (min-width: 960px) {
  .subhero {
    padding-top: calc(var(--nav-height) + var(--nav-offset) + var(--space-9));
    padding-bottom: var(--space-8);
  }
}
.subhero__title {
  font-size: clamp(2.25rem, 7vw, 3.25rem);
  font-weight: 700;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
  max-width: 24ch;
}
@media (min-width: 1280px) { .subhero__title { font-size: var(--text-4xl); } }
.subhero__lead {
  margin-top: var(--space-5);
  font-size: var(--text-lg);
  color: var(--s-fg-soft);
  max-width: 58ch;
}

/* Animiertes Koralle-Kreuz: Pop wie das Teal-Haekchen */
html.motion .cross {
  transform: scale(0);
  opacity: 0;
}
html.motion .cross.is-on {
  animation: cross-pop var(--dur-slow) var(--ease-spring) forwards;
}
@keyframes cross-pop {
  from { transform: scale(0) rotate(30deg); opacity: 0; }
  to   { transform: scale(1) rotate(0deg); opacity: 1; }
}

/* Neutraler Marker fuer ehrliche Zwischentoene in Tabellen */
.tilde {
  display: inline-grid;
  place-items: center;
  width: 1.375rem;
  height: 1.375rem;
  border-radius: 50%;
  background: var(--s-warn-soft, var(--peach-soft));
  color: var(--s-warn, var(--peach-ink));
  font-weight: 700;
  font-size: 0.8rem;
}

/* Interaktive Vergleichstabelle: Zeilen-Hover ohne Transition
   (Farbe wechselt sofort, animiert wird nur das Pop der Marker) */
.compare--wide { min-width: 760px; }
.compare--interactive tbody tr:hover td { background: rgba(14, 147, 132, 0.045); }
.compare--interactive tbody tr:hover td.compare__local { background: rgba(14, 147, 132, 0.11); }
.compare td .cell-note {
  display: block;
  margin-top: var(--space-1);
  font-size: var(--text-xs);
  color: var(--s-fg-muted);
}
.compare__marker {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

/* Hardware-Spezifikation: Mono-Zeilen auf Nacht-Glas-Karte */
.spec {
  background:
    radial-gradient(420px 220px at 85% -10%, rgba(143, 138, 255, 0.12), transparent 60%),
    radial-gradient(420px 240px at 0% 110%, rgba(62, 211, 192, 0.10), transparent 60%),
    var(--void);
  border: 1px solid var(--night-edge);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: var(--shadow-big);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
}
.spec__row {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: var(--space-3);
  border-bottom: 1px solid var(--night-edge);
  color: var(--fg-night-soft);
}
.spec__row:last-child { border-bottom: none; }
.spec__value { color: var(--teal-night); text-align: right; }

/* ---- Scroll-Reveals ----
   Nur aktiv mit JS und ohne reduzierte Bewegung:
   site.js setzt dann html.motion und animiert per GSAP fromTo.
   Ohne Motion bleibt alles sofort sichtbar. ---- */
html.motion .reveal { opacity: 0; }

/* ---- Reduced Motion: alles statisch ---- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .marquee__track { animation: none; transform: none; }
  .mockup__caret { display: none !important; }
  html.motion .reveal,
  html.motion .mockup__msg--bot,
  html.motion .mockup__sources,
  html.motion .source-pill,
  html.motion .check,
  html.motion .cross { transform: none; opacity: 1; }
}