/* ════════════════════════════════════════════════════════════════
   AICONIC · Awwwards-Konzept "Schweizer Präzisionsinstrument"
   Light-first · Inter only · Navy Haupt-Akzent · Gold als Signal
   ════════════════════════════════════════════════════════════════ */

/* Inter self-hosted (variable, wght 400-900) statt Google Fonts:
   spart 2 Fremd-Origins (DNS+TLS) + CSS-Roundtrip und ist nDSG-sauber
   (keine IP an Google). Dateien aus fonts.gstatic v20 gespiegelt;
   unicode-ranges identisch zu Googles css2-Antwort — latin-ext lädt
   der Browser nur, wenn die Seite solche Zeichen wirklich rendert. */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("../assets/fonts/inter-var-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
    U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("../assets/fonts/inter-var-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
    U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
    U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
}

:root {
  --bg: #fbfaf7;
  --surface: #f3f1ea;
  --ink: #0a1428;
  --ink-soft: #1c2a42;
  --muted: #5d6675;
  --line: rgba(10, 20, 40, 0.13);
  --gold: #b9912f;
  --gold-soft: rgba(185, 145, 47, 0.12);
  --navy: #0a1428;
  --navy-deep: #06101f;
  --card: #ffffff;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --radius: 0.75rem;
}

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

html {
  scroll-behavior: smooth;
}

html.lenis {
  height: auto;
  scroll-behavior: auto;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "Inter", system-ui, sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

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

a {
  color: inherit;
  text-decoration: none;
}

h1,
h2,
h3,
p,
ul,
ol,
fieldset {
  margin: 0;
  padding: 0;
}

ul,
ol {
  list-style: none;
}

fieldset {
  border: 0;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

.gold {
  color: var(--gold);
}

/* ── Typo-Bausteine ─────────────────────────────────────────── */

.label {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}

.eyebrow::before {
  content: "";
  width: 1.6rem;
  height: 1px;
  background: var(--gold);
}

.gold-dot {
  display: inline-block;
  width: 0.35rem;
  height: 0.35rem;
  border-radius: 50%;
  background: var(--gold);
}

.gold-line {
  display: block;
  width: 6rem;
  height: 3px;
  border-radius: 99px;
  background: var(--gold);
  margin: 2rem auto 0;
}

/* ── Buttons & Pills ────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.95rem 1.9rem;
  border-radius: 99px;
  border: 1px solid transparent;
  font: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.25s var(--ease), background 0.25s var(--ease),
    color 0.25s var(--ease), border-color 0.25s var(--ease);
}

.btn-primary {
  background: var(--ink);
  color: #fff;
}

.btn-primary:hover {
  background: var(--ink-soft);
  transform: translateY(-2px);
}

.btn-outline {
  border-color: var(--line);
  color: var(--ink);
  background: transparent;
}

.btn-outline:hover {
  border-color: var(--ink);
  transform: translateY(-2px);
}

.pill-badge {
  display: inline-block;
  padding: 0.4rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: 99px;
  font-size: 0.85rem;
  color: var(--muted);
}

/* ── Custom Cursor ──────────────────────────────────────────── */

.cursor-dot,
.cursor-ring {
  position: fixed;
  top: 0;
  left: 0;
  /* Der Mauszeiger liegt IMMER zuoberst — auch über Modals und dem
     Consent-Banner (240). pointer-events:none, verdeckt also nie Klicks. */
  z-index: 999;
  pointer-events: none;
  border-radius: 50%;
  display: none;
}

.cursor-dot {
  width: 6px;
  height: 6px;
  background: var(--navy);
  transition: background-color 0.25s var(--ease);
}

.cursor-ring {
  width: 34px;
  height: 34px;
  border: 1px solid rgba(10, 20, 40, 0.4);
  transition: width 0.3s var(--ease), height 0.3s var(--ease),
    border-color 0.3s var(--ease);
}

.cursor-ring.is-grown {
  width: 56px;
  height: 56px;
}

/* Über Navy-Bändern: Punkt + Ring in Gold (auf Weiss bleiben sie navy) */
.cursor-dot.on-navy {
  background: var(--gold);
}

.cursor-ring.on-navy {
  border-color: rgba(185, 145, 47, 0.7);
}

@media (pointer: fine) {
  .custom-cursor .cursor-dot,
  .custom-cursor .cursor-ring {
    display: block;
  }
  /* Nativen Pfeil ausblenden, sobald der eigene Cursor aktiv ist */
  .custom-cursor,
  .custom-cursor * {
    cursor: none;
  }
}

/* ── Mess-Skala (linke Kante, Desktop) ──────────────────────── */

.ruler {
  position: fixed;
  left: 1.4rem;
  top: 50%;
  transform: translateY(-50%);
  z-index: 40;
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 0.8rem;
}

.ruler-track {
  position: relative;
  display: block;
  width: 1px;
  height: 38vh;
  background: repeating-linear-gradient(
    to bottom,
    var(--line) 0,
    var(--line) 6px,
    transparent 6px,
    transparent 14px
  );
}

.ruler-progress {
  position: absolute;
  top: 0;
  left: -0.5px;
  width: 2px;
  height: 100%;
  background: var(--gold);
  transform: scaleY(0);
  transform-origin: top;
}

.ruler-readout {
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  writing-mode: vertical-rl;
}

@media (min-width: 1200px) {
  .ruler {
    display: flex;
  }
}

/* ── Navigation ─────────────────────────────────────────────── */

.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 60;
  transition: background 0.35s var(--ease), box-shadow 0.35s var(--ease);
}

.nav.is-scrolled {
  background: rgba(251, 250, 247, 0.82);
  backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 var(--line);
}

.nav-inner {
  max-width: 76rem;
  margin: 0 auto;
  padding: 1.1rem 1.5rem;
  display: flex;
  align-items: center;
  gap: 2.5rem;
}

.nav-logo {
  display: inline-flex;
  font-weight: 900;
  font-size: 1.1rem;
  letter-spacing: 0.05em;
}

/* ── Wordmark: offizielles Logo als CSS-Maske, Füllfarbe folgt --ink ── */

.wordmark {
  display: block;
  aspect-ratio: 1940 / 310;
  background-color: var(--ink);
  mask: url("../assets/wordmark-trim.png") center / contain no-repeat;
  -webkit-mask: url("../assets/wordmark-trim.png") center / contain no-repeat;
}

.wordmark-nav {
  height: 1.4rem;
}

.wordmark-footer {
  height: 2.1rem;
}

.nav-links {
  display: none;
  gap: 1.9rem;
  margin-left: auto;
}

.nav-links a {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--muted);
  transition: color 0.2s var(--ease);
}

.nav-links a:hover {
  color: var(--ink);
}

/* "Du bist hier": aktive Seite in der Nav. Bewusst GOLD statt hover-ink —
   Hover ist flüchtig ("kannst du hin"), aktiv ist permanent ("bist du").
   Nur Unterseiten setzen aria-current; die Homepage-Anker spy-en nicht. */
.nav-links a[aria-current="page"],
.mobile-menu nav a[aria-current="page"] {
  color: var(--gold);
  font-weight: 600;
}

.nav-cta {
  display: none;
  padding: 0.65rem 1.4rem;
  font-size: 0.85rem;
}

.nav-burger {
  margin-left: auto;
  width: 2.6rem;
  height: 2.6rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  background: none;
  border: 1px solid var(--line);
  border-radius: 50%;
  cursor: pointer;
}

.nav-burger span {
  display: block;
  width: 1.05rem;
  height: 1.5px;
  background: var(--ink);
  transition: transform 0.3s var(--ease);
}

.nav-burger.is-open span:first-child {
  transform: translateY(4.25px) rotate(45deg);
}

.nav-burger.is-open span:last-child {
  transform: translateY(-4.25px) rotate(-45deg);
}

@media (min-width: 900px) {
  /* 3-Spalten-Grid: Wordmark links, Links mittig, CTA rechts */
  .nav-inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
  }
  .nav-logo {
    justify-self: start;
  }
  .nav-links {
    display: flex;
    justify-self: center;
    margin-left: 0;
  }
  .nav-cta {
    display: inline-flex;
    justify-self: end;
    margin-left: 0;
  }
  .nav-burger {
    display: none;
  }
}

.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 55;
  background: var(--bg);
  display: flex;
  align-items: center;
  padding: 0 2rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s var(--ease), visibility 0.4s;
}

.mobile-menu.is-open {
  opacity: 1;
  visibility: visible;
}

.mobile-menu nav {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  width: 100%;
}

.mobile-menu a {
  font-size: clamp(1.3rem, 5.4vw, 1.55rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  padding: 0.65rem 0;
  border-bottom: 1px solid var(--line);
}

.mobile-menu .mobile-menu-cta {
  margin-top: 1.4rem;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--gold);
  border-bottom: 0;
}

/* ── Hero ───────────────────────────────────────────────────── */

.hero {
  position: relative;
  min-height: 100vh; /* Fallback, falls svh nicht greift -> Hero immer volle Höhe, Scroll-Hinweis bleibt unten */
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 7rem 1.5rem clamp(3.25rem, 6vw, 5rem);
}

#hero-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.hero-veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: radial-gradient(
    58% 50% at 50% 46%,
    rgba(251, 250, 247, 0.72) 0%,
    rgba(251, 250, 247, 0.25) 42%,
    var(--bg) 100%
  );
  pointer-events: none;
}

.hero-content {
  position: relative;
  z-index: 2;
  max-width: 66rem;
  text-align: center;
}

.hero-title {
  margin-top: 1.6rem;
  font-size: clamp(2.4rem, 6.6vw, 5rem);
  font-weight: 900;
  line-height: 1.04;
  letter-spacing: -0.04em;
}

.hero-title .line {
  display: block;
  overflow: hidden;
  padding-bottom: 0.08em;
  margin-bottom: -0.08em;
}

.hero-title .word {
  display: inline-block;
  will-change: transform;
}

/* FOUC-Schutz: Hero erst zeigen, wenn JS den versteckten Startzustand gesetzt
   hat. Bewusst nur visibility am Container (nicht transform/opacity an den
   animierten Elementen) — sonst kollidiert die Regel mit dem GSAP-Tween und der
   Titel bleibt unten hängen. Die Klasse setzt ein Inline-Script im <head> (nur
   wenn Bewegung an ist), greift also schon vor dem ersten Paint; main.js nimmt
   sie zurück, sobald der Hero startklar ist (oder GSAP fehlt). */
html.anim-pending #hero-content > :not(.hero-sub) {
  visibility: hidden;
}

.gold-word {
  color: var(--gold);
}

.hero .gold-line {
  margin-top: 1.8rem;
}

.hero-anchor {
  max-width: 42rem;
  margin: 1.5rem auto 0;
  font-size: clamp(1.15rem, 2.4vw, 1.5rem);
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.01em;
}

.hero-anchor-price {
  color: var(--gold);
  white-space: nowrap;
}

.hero-sub {
  max-width: 36rem;
  margin: 1.8rem auto 0;
  font-size: 1.1rem;
  color: var(--muted);
}

.hero-badges {
  margin-top: 1.6rem;
  display: flex;
  justify-content: center;
  gap: 0.8rem;
}

.hero-ctas {
  margin-top: 2.2rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
}

/* ── Hero: Beweis-Spalte (Text links, Arbeits-Karten rechts) ── */

.hero-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.12fr 0.88fr;
  gap: clamp(2rem, 4vw, 4.5rem);
  align-items: center;
  max-width: 80rem;
  width: 100%;
}

.hero-grid .hero-content {
  text-align: left;
  max-width: 40rem;
}

.hero-grid .hero-title {
  font-size: clamp(2.2rem, 4.2vw, 3.8rem);
}

.hero-grid .gold-line,
.hero-grid .hero-anchor,
.hero-grid .hero-sub {
  margin-left: 0;
  margin-right: 0;
}

.hero-grid .hero-ctas {
  justify-content: flex-start;
}

.hero-proof {
  position: relative;
  display: grid;
  gap: 1.1rem;
}

.proof-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.1rem 1.3rem;
  box-shadow: 0 18px 44px rgba(10, 20, 40, 0.09);
}

.proof-card:nth-child(1) { transform: rotate(-1.2deg) translateX(-8px); }
.proof-card:nth-child(2) { transform: rotate(0.9deg) translateX(16px); }
.proof-card:nth-child(3) { transform: rotate(-0.5deg) translateX(-2px); }

.proof-head {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
}

.proof-head::before {
  content: "";
  width: 0.42rem;
  height: 0.42rem;
  border-radius: 2px;
  background: var(--gold);
  transform: rotate(45deg);
  flex: none;
}

.proof-time {
  margin-left: auto;
  letter-spacing: 0;
  text-transform: none;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.proof-title {
  margin-top: 0.55rem;
  font-weight: 700;
  font-size: 1.02rem;
  color: var(--ink);
}

.proof-line {
  margin-top: 0.2rem;
  font-size: 0.9rem;
  line-height: 1.45;
  color: var(--muted);
}

.proof-pill {
  display: inline-block;
  margin-top: 0.7rem;
  padding: 0.26rem 0.65rem;
  border-radius: 999px;
  font-size: 0.77rem;
  font-weight: 600;
  background: rgba(30, 122, 60, 0.1);
  color: #1e7a3c;
}

.proof-pill.is-gold {
  background: var(--gold-soft);
  color: #8a6a1d;
}

.proof-stars {
  margin-top: 0.45rem;
  color: var(--gold);
  letter-spacing: 0.18em;
  font-size: 1.05rem;
}

@keyframes proofIn {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
}

@media (prefers-reduced-motion: no-preference) {
  .proof-card { animation: proofIn 0.7s var(--ease) backwards; }
  .proof-card:nth-child(1) { animation-delay: 0.55s; }
  .proof-card:nth-child(2) { animation-delay: 0.75s; }
  .proof-card:nth-child(3) { animation-delay: 0.95s; }
}

@media (max-width: 960px) {
  .hero-grid {
    grid-template-columns: 1fr;
    gap: 2.4rem;
  }
  .hero-grid .hero-content {
    text-align: center;
    max-width: 38rem;
    margin: 0 auto;
  }
  .hero-grid .gold-line,
  .hero-grid .hero-anchor,
  .hero-grid .hero-sub {
    margin-left: auto;
    margin-right: auto;
  }
  .hero-grid .hero-ctas {
    justify-content: center;
  }
  .hero-proof {
    max-width: 24rem;
    margin: 0 auto;
    width: 100%;
  }
  .proof-card:nth-child(3) {
    display: none;
  }
}

.scroll-hint {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 0.7rem;
}

@media (min-height: 740px) {
  .scroll-hint {
    display: flex;
  }
}

/* Kurze Desktop-Fenster: Hero-Inhalt kompakter, damit der Scroll-Hinweis unten
   Platz hat und die Reassurance-Zeile nicht überlappt. */
@media (min-width: 700px) and (max-height: 880px) {
  .hero {
    padding-top: 4.5rem;
  }
  .hero-title {
    font-size: clamp(2.2rem, 5.2vw, 4.2rem);
    margin-top: 1.1rem;
  }
  .hero .gold-line {
    margin-top: 1.2rem;
  }
  .hero-anchor {
    margin-top: 1.1rem;
    font-size: clamp(1.05rem, 2vw, 1.3rem);
  }
  .hero-sub {
    margin-top: 1.2rem;
    font-size: 1rem;
  }
  .hero-ctas {
    margin-top: 1.5rem;
  }
}

.scroll-hint-track {
  position: relative;
  display: block;
  width: 1px;
  height: 3rem;
  background: var(--line);
  overflow: hidden;
}

.scroll-hint-pulse {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1rem;
  background: var(--gold);
  animation: scrollPulse 1.9s ease-in-out infinite;
}

@keyframes scrollPulse {
  0% {
    transform: translateY(-1rem);
  }
  70%,
  100% {
    transform: translateY(3.2rem);
  }
}

/* ── Quiz-Overlay ───────────────────────────────────────────── */

.quiz {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5rem 1.5rem 3rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s var(--ease), visibility 0.4s;
}

.quiz.is-open {
  opacity: 1;
  visibility: visible;
}

.quiz-close {
  position: fixed;
  top: 1.4rem;
  right: 1.6rem;
  background: var(--bg);
  z-index: 90;
  border: 1px solid var(--line);
  border-radius: 99px;
  padding: 0.55rem 1.2rem;
  font: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s;
}

.quiz-close:hover {
  color: var(--ink);
  border-color: var(--ink);
}

.quiz-stage {
  width: 100%;
  max-width: 40rem;
  text-align: center;
}

/* Mobile: langes Ergebnis scrollt von oben statt in den Schliessen-Button zu laufen.
   margin-block:auto zentriert kurze Fragen, gibt bei langem Inhalt den Scroll frei. */
@media (max-width: 759px) {
  .quiz {
    align-items: flex-start;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .quiz-stage {
    margin-block: auto;
  }
}

.quiz-progress {
  display: flex;
  justify-content: center;
  gap: 0.4rem;
  margin-bottom: 2rem;
}

.quiz-progress i {
  display: block;
  width: 2rem;
  height: 2px;
  background: var(--line);
  border-radius: 99px;
}

.quiz-progress i.done {
  background: var(--gold);
}

.quiz-q {
  font-size: clamp(1.5rem, 4.6vw, 2.2rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.quiz-options {
  margin-top: 2.2rem;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.quiz-option {
  display: flex;
  align-items: center;
  gap: 1rem;
  width: 100%;
  padding: 1.05rem 1.3rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font: inherit;
  font-size: 1rem;
  text-align: left;
  color: var(--ink);
  cursor: pointer;
  transition: border-color 0.2s var(--ease), transform 0.2s var(--ease),
    box-shadow 0.2s var(--ease);
}

/* Nur echte Zeigergeräte (Desktop): auf Touch bleibt :hover sonst kleben und
   die nächste Frage zeigt an der Tipp-Stelle einen falschen Gold-Rand. */
@media (hover: hover) {
  .quiz-option:hover {
    border-color: var(--gold);
    transform: translateY(-2px);
    box-shadow: 0 12px 28px -18px rgba(10, 20, 40, 0.35);
  }
}

.quiz-letter {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.8rem;
  height: 1.8rem;
  flex-shrink: 0;
  border: 1px solid var(--line);
  border-radius: 0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--muted);
}

.quiz-back {
  margin-top: 1.8rem;
  background: none;
  border: 0;
  font: inherit;
  font-size: 0.9rem;
  color: var(--muted);
  cursor: pointer;
}

.quiz-back:hover {
  color: var(--ink);
}

/* Gewählte Antwort (bleibt beim Zurückgehen sichtbar) */
.quiz-option.is-selected {
  border-color: var(--gold);
  box-shadow: inset 0 0 0 1px var(--gold);
}

.quiz-option.is-selected .quiz-letter {
  background: var(--gold);
  border-color: var(--gold);
  color: #fff;
}

/* ── Quiz-Resultat: personalisierter Mini-Report ────────────── */
.quiz-result-headline {
  margin-top: 0.4rem;
}

.quiz-result-note,
.quiz-result-estimate,
.quiz-result-how,
.quiz-result-gain {
  margin-top: 1rem;
  font-size: 1.02rem;
  line-height: 1.6;
  color: var(--muted);
  max-width: 54ch;
}

.quiz-result-estimate {
  color: var(--ink);
  font-weight: 600;
}

.quiz-result-headline + .gold-line {
  margin-top: 1.1rem;
}

.quiz-result-gain {
  color: var(--ink);
}

.quiz .hero-ctas {
  margin-top: 1.8rem;
}

/* E-Mail-Opt-in: "Auswertung schicken" → potenzieller Lead */
.quiz-mail {
  margin-top: 2rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--line);
}

.quiz-mail-label {
  font-weight: 600;
  color: var(--ink);
}

.quiz-mail-row {
  margin-top: 0.9rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.quiz-mail-input {
  flex: 1 1 12rem;
  min-width: 0;
  padding: 0.85rem 1rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font: inherit;
  font-size: 0.95rem;
  color: var(--ink);
  transition: border-color 0.2s var(--ease);
}

.quiz-mail-input:focus {
  outline: none;
  border-color: var(--gold);
}

.quiz-mail .btn {
  flex: 0 0 auto;
}

/* Honeypot: für Menschen unsichtbar, Bots füllen es */
.quiz-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.quiz-consent {
  margin-top: 0.8rem;
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--muted);
}

.quiz-mail-error {
  margin-top: 0.8rem;
  font-size: 0.88rem;
  color: #c0392b;
}

.quiz-mail-success {
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--ink);
}

/* ── Marquee ────────────────────────────────────────────────── */

.marquee {
  border-block: 1px solid var(--line);
  background: var(--surface);
  padding: 1.3rem 0;
}

.marquee-mask {
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #fff 12%, #fff 88%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #fff 12%, #fff 88%, transparent);
}

.marquee-track {
  display: flex;
  width: max-content;
  animation: marquee 20s linear infinite;
}

.marquee:hover .marquee-track {
  animation-play-state: paused;
}

.marquee-row {
  display: flex;
  align-items: center;
  gap: 3rem;
  padding-right: 3rem;
  flex-shrink: 0;
}

.marquee-row span {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  white-space: nowrap;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--muted);
}

.tick {
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 1px;
  background: var(--gold);
  transform: rotate(45deg);
}

@keyframes marquee {
  to {
    transform: translateX(-50%);
  }
}

/* ── Sections ───────────────────────────────────────────────── */

.section {
  padding: clamp(3.25rem, 6vw, 5rem) 1.5rem;
  position: relative;
}

/* Nummerierte Sektionen: mehr Luft oben, damit die grosse Hintergrundnummer
   nicht direkt am Sektionsanfang klebt. */
.section:has(.section-num) {
  padding-top: clamp(5rem, 9vw, 8.5rem);
}

.container {
  max-width: 76rem;
  margin: 0 auto;
}

.container-narrow {
  max-width: 52rem;
  text-align: center;
}

.section-head {
  position: relative;
  max-width: 46rem;
  margin: 0 auto;
  text-align: center;
}

.section-head-left {
  margin: 0;
  text-align: left;
}

.section-num {
  position: absolute;
  top: -0.55em;
  left: 50%;
  transform: translateX(-50%);
  z-index: -1;
  font-size: clamp(6rem, 16vw, 11rem);
  font-weight: 900;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px var(--line);
  pointer-events: none;
  user-select: none;
}

.section-head-left .section-num {
  left: 0;
  transform: none;
}

.section-title {
  margin-top: 1.3rem;
  font-size: clamp(1.9rem, 4.6vw, 3.2rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
}

.section-sub {
  margin-top: 1.2rem;
  font-size: 1.05rem;
  color: var(--muted);
}

/* ── Leistungen: Präzisions-Liste ───────────────────────────── */

.service-list {
  margin-top: 4.5rem;
  border-top: 1px solid var(--line);
}

.service-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.8rem;
  padding: 2.2rem 0.5rem;
  border-bottom: 1px solid var(--line);
  transition: background 0.3s var(--ease), padding 0.3s var(--ease);
}

/* Hover nur auf echten Hover-Geräten: auf Touch ersetzt der
   Scroll-Aktiv-Zustand (.is-active) das Gold-Highlight. */
@media (hover: hover) {
  .service-row:hover {
    background: var(--surface);
    padding-left: 1.2rem;
    padding-right: 1.2rem;
  }
}

.service-index {
  font-size: clamp(2.2rem, 5vw, 3.4rem);
  font-weight: 900;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1.2px rgba(10, 20, 40, 0.28);
  transition: -webkit-text-stroke-color 0.3s var(--ease);
}

@media (hover: hover) {
  .service-row:hover .service-index {
    -webkit-text-stroke-color: var(--gold);
  }
}

/* Mobiler Slider: aktive Karte trägt die Gold-Ziffer automatisch */
@media (max-width: 639px) {
  .service-row.is-active .service-index {
    -webkit-text-stroke-color: var(--gold);
  }
}

.service-body h3 {
  font-size: clamp(1.3rem, 2.6vw, 1.7rem);
  font-weight: 700;
  letter-spacing: -0.02em;
}

.service-body p {
  margin-top: 0.7rem;
  max-width: 38rem;
  color: var(--muted);
}

.service-tags {
  align-self: end;
}

@media (min-width: 800px) {
  .service-row {
    grid-template-columns: 7rem 1fr 15rem;
    gap: 2.5rem;
    align-items: start;
  }
  .service-tags {
    text-align: right;
    align-self: start;
    padding-top: 0.6rem;
    white-space: nowrap;
    letter-spacing: 0.06em;
  }
}

/* Mobile: Leistungen als horizontaler Scroll-Snap-Slider. Die nächste
   Karte lugt rechts rein (Peek), Punkte darunter zeigen die Position.
   Vier Kartenhöhen werden zu einer: Seite wirkt deutlich kürzer. */
@media (max-width: 639px) {
  .service-list {
    border-top: 0;
    display: flex;
    gap: 0.9rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline-start: 1.5rem;
    /* Full-bleed: Scroller läuft bis an die Viewport-Kante */
    margin-inline: -1.5rem;
    padding: 0.25rem 1.5rem 0.75rem;
    scrollbar-width: none;
  }
  .service-list::-webkit-scrollbar {
    display: none;
  }
  .service-row {
    flex: 0 0 82%;
    scroll-snap-align: start;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 1.6rem;
    box-shadow: 0 20px 44px -30px rgba(10, 20, 40, 0.35);
  }
}

/* Positions-Punkte zum Leistungen-Slider (nur mobil sichtbar) */
.service-dots {
  display: none;
}

@media (max-width: 639px) {
  .service-dots {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 1.1rem;
  }
  .service-dots i {
    display: block;
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 99px;
    background: var(--line);
    transition: background 0.25s var(--ease), width 0.25s var(--ease);
  }
  .service-dots i.active {
    width: 1.4rem;
    background: var(--gold);
  }
}

/* ── Navy-Bänder ────────────────────────────────────────────── */

.band-navy {
  background: var(--navy);
  color: #f2f5fa;
  --ink: #f2f5fa;
  --muted: #9aa6b8;
  --line: rgba(255, 255, 255, 0.14);
  --card: rgba(255, 255, 255, 0.045);
  --surface: rgba(255, 255, 255, 0.05);
}

.band-navy .section-num {
  -webkit-text-stroke-color: rgba(255, 255, 255, 0.13);
}

/* ── Lösungen: Karten-Stapel ────────────────────────────────── */

.stack {
  margin-top: 4rem;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.stack-card {
  position: sticky;
  top: 7rem;
  display: grid;
  /* minmax(0,1fr) statt 1fr: sonst spannen die festen Mini-Visual-
     Breiten die Karte über den Viewport auf (min-content-Falle) */
  grid-template-columns: minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #0e1a33;
  box-shadow: 0 30px 60px -35px rgba(0, 0, 0, 0.6);
}

.stack-card:nth-child(2) {
  top: 8.5rem;
}

.stack-card:nth-child(3) {
  top: 10rem;
}

/* ── Sektion 04 „Massgeschneidert": volle helle Karten ─────────
   Nur in #manufaktur (helle Sektion). Karte UND Visual-Panel
   hell, Text erbt dunkles --ink = lesbar. Die Mini-Mockups sind
   original fuer dunklen Grund gebaut (weiss-transparent) → hier fuer
   Hell umgefaerbt: dunkle Balken, weisse Elemente mit Rahmen/Schatten,
   Gold-Akzente kraeftiger. Navy-Band-Karten in Sektion 03
   (#loesungen) bleiben komplett unberuehrt (Scoping auf #manufaktur). */
#manufaktur .stack-card {
  background: var(--card);
  border: 1px solid var(--line);
  box-shadow: 0 14px 34px rgba(10, 20, 40, 0.08);
}

#manufaktur .stack-visual {
  background: var(--surface);
  border-top-color: var(--line);
}

#manufaktur .mini-card,
#manufaktur .mini-chiprow {
  background: var(--card);
  border-color: var(--line);
  box-shadow: 0 4px 12px rgba(10, 20, 40, 0.06);
}

#manufaktur .mini-bar {
  background: rgba(10, 20, 40, 0.14);
}

#manufaktur .mini-bar.gold {
  background: var(--gold);
}

#manufaktur .mini-folder {
  background: rgba(185, 145, 47, 0.12);
  border-color: rgba(185, 145, 47, 0.4);
}

#manufaktur .mini-chips span {
  background: var(--card);
  border-color: var(--line);
  box-shadow: 0 2px 6px rgba(10, 20, 40, 0.05);
}

.stack-text {
  padding: 2.2rem;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.stack-text h3 {
  margin-top: 0.9rem;
  font-size: clamp(1.5rem, 3.4vw, 2.1rem);
  font-weight: 700;
  letter-spacing: -0.02em;
}

.stack-desc {
  margin-top: 0.9rem;
  max-width: 26rem;
  color: var(--muted);
}

.stack-outcome {
  margin-top: auto;
  padding-top: 2rem;
  display: flex;
  align-items: center;
  gap: 0.8rem;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--gold);
}

.outcome-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.2rem;
  height: 2.2rem;
  border: 1px solid rgba(185, 145, 47, 0.45);
  border-radius: 50%;
  font-size: 1rem;
}

.stack-visual {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 2.2rem;
  border-top: 1px solid var(--line);
  background: rgba(0, 0, 0, 0.22);
  min-height: 240px;
  min-width: 0;
}

/* Kompakte Mini-Visuals auf schmalen Screens, damit nichts überläuft */
@media (max-width: 640px) {
  .stack-text {
    padding: 1.6rem;
  }
  .stack-visual {
    padding: 1.6rem 1rem;
    gap: 0.6rem;
    min-height: 200px;
    --mini-link-travel: 1.6rem;
  }
  .mini-card {
    width: 7rem;
    padding: 0.7rem;
  }
  .mini-card-wide {
    width: 11rem;
  }
  .mini-link {
    width: 2rem;
  }
  .mini-chips {
    margin-right: 0;
  }
}

@media (min-width: 900px) {
  .stack-card {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  }
  .stack-visual {
    border-top: 0;
    border-left: 1px solid var(--line);
  }
  .stack-text {
    padding: 3rem;
  }
}

.stack-disclaimer {
  display: block;
  margin-top: 2.4rem;
  text-align: center;
  color: var(--muted);
}

/* Mini-Visuals in den Stapel-Karten */

.mini-card {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--line);
  border-radius: 0.6rem;
  padding: 0.9rem;
  width: 8.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  position: relative;
}

.mini-card-wide {
  width: 13rem;
}

.mini-card-done {
  border-color: rgba(185, 145, 47, 0.4);
}

.mini-check {
  position: absolute;
  top: -0.6rem;
  right: -0.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  background: var(--gold);
  color: var(--navy);
  border-radius: 50%;
  font-size: 0.7rem;
  font-weight: 700;
}

.mini-label {
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

.mini-bar {
  height: 4px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.16);
}

.mini-bar.gold {
  background: rgba(185, 145, 47, 0.65);
}

.w100 { width: 100%; }
.w90 { width: 90%; }
.w85 { width: 85%; }
.w75 { width: 75%; }
.w66 { width: 66%; }
.w50 { width: 50%; }

.mini-link {
  position: relative;
  display: block;
  width: 3.5rem;
  height: 1px;
  background: var(--line);
}

.mini-pulse {
  position: absolute;
  top: -2.5px;
  left: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold);
  animation: miniPulse 1.8s ease-in-out infinite;
}

@keyframes miniPulse {
  0% { transform: translateX(0); opacity: 0; }
  25% { opacity: 1; }
  75% { opacity: 1; }
  100% { transform: translateX(var(--mini-link-travel, 3.1rem)); opacity: 0; }
}

/* Fluss-Linien in den Massgeschneidert-Mockups (Konvergenz 3->1 + Kreuz-Routing) */
.stack-visual.has-flow {
  gap: 0;
}
.stack-visual.has-flow > .mini-chips,
.stack-visual.has-flow > .mini-col {
  align-self: center;
  height: 10rem;
  justify-content: space-between;
  margin: 0;
}
.mini-flow {
  flex: 0 0 3.4rem;
  align-self: center;
  height: 10rem;
  margin: 0 -2px;
  overflow: visible;
}
.mini-flow path {
  fill: none;
  vector-effect: non-scaling-stroke;
  stroke-linecap: round;
}
.mini-flow .mini-flow-base {
  stroke: var(--line);
  stroke-width: 1;
  opacity: 0.6;
}
.mini-flow .mini-flow-pulse {
  stroke: var(--gold);
  stroke-width: 1.6;
  stroke-dasharray: 6 60;
}
@media (prefers-reduced-motion: no-preference) {
  .mini-flow .mini-flow-pulse { animation: miniFlow 2.2s linear infinite; }
  .mini-flow path:nth-of-type(5) { animation-delay: 0.45s; }
  .mini-flow path:nth-of-type(6) { animation-delay: 0.9s; }
}
@keyframes miniFlow {
  to { stroke-dashoffset: -66; }
}
@media (max-width: 639px) {
  .mini-flow { flex-basis: 2.4rem; }
}

.mini-col {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.mini-chiprow {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--line);
  border-radius: 0.5rem;
  padding: 0.5rem 0.7rem;
  font-size: 0.65rem;
  font-weight: 500;
  color: var(--muted);
}

.mini-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(185, 145, 47, 0.7);
}

.mini-folder {
  background: rgba(185, 145, 47, 0.1);
  border: 1px solid rgba(185, 145, 47, 0.3);
  border-radius: 0.5rem;
  padding: 0.5rem 0.7rem;
  font-size: 0.65rem;
  font-weight: 500;
  color: var(--muted);
}

.mini-chips {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-right: 0.5rem;
}

.mini-chips span {
  border: 1px solid var(--line);
  border-radius: 99px;
  padding: 0.3rem 0.8rem;
  font-size: 0.65rem;
  color: var(--muted);
}

.mini-foot {
  margin-top: 0.3rem;
  font-size: 0.6rem;
  color: var(--muted);
}

/* ── Warum ──────────────────────────────────────────────────── */

.why-grid {
  margin-top: 4rem;
  display: grid;
  gap: 1.2rem;
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .why-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .why-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.why-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.8rem;
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease),
    border-color 0.3s var(--ease);
}

/* Mobile: Warum kompakt als 2x2-Grid — halbiert die Sektionshöhe und
   lässt den Stapel-Effekt der Lösungen als Highlight wirken. */
@media (max-width: 639px) {
  .why-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.8rem;
  }
  .why-card {
    padding: 1.1rem;
  }
  .why-tick {
    margin-bottom: 0.9rem;
  }
  .why-card h3 {
    font-size: 0.92rem;
  }
  .why-card p {
    font-size: 0.8rem;
    margin-top: 0.55rem;
  }
}

/* Hover nur auf echten Hover-Geräten: auf Touch übernimmt der
   Scroll-Aktiv-Zustand (.is-active) das Highlight. */
@media (hover: hover) {
  .why-card:hover {
    transform: translateY(-4px);
    border-color: rgba(185, 145, 47, 0.45);
    box-shadow: 0 18px 36px -22px rgba(10, 20, 40, 0.3);
  }
  /* Gold-Raute (45deg) dreht beim Hover zur aufrechten Quadrat-Lage (90deg).
     Sichtbar, weil ein Quadrat bei 45->135 wegen Symmetrie gleich aussähe. */
  .why-card:hover .why-tick {
    transform: rotate(90deg) scale(1.12);
  }
}

.why-tick {
  display: block;
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 2px;
  background: var(--gold);
  transform: rotate(45deg);
  margin-bottom: 1.4rem;
  transition: transform 0.55s var(--ease);
}

/* Mobile: Karte in der Bildschirmmitte wird aktiv — Raute macht eine
   halbe Drehung, Karte bekommt den Gold-Rahmen (Scroll statt Tap). */
@media (max-width: 639px) {
  .why-card.is-active {
    border-color: rgba(185, 145, 47, 0.45);
    box-shadow: 0 18px 36px -22px rgba(10, 20, 40, 0.3);
  }
  .why-card.is-active .why-tick {
    transform: rotate(225deg);
  }
}

.why-tick.small {
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  margin: 0.45rem 0 0;
  flex-shrink: 0;
}

.why-card h3 {
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.35;
}

.why-card p {
  margin-top: 0.7rem;
  font-size: 0.92rem;
  color: var(--muted);
}

/* ── Integrationen ──────────────────────────────────────────── */

/* Integrationen nutzt bewusst das Standard-Section-Padding, damit der
   Abstand zwischen allen Sektionen einheitlich ist. */

.integration-graphic {
  position: relative;
  width: 640px;
  max-width: 100%;
  aspect-ratio: 1100 / 620;
  margin: 3rem auto 0;
}

.integration-graphic .ig-lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  overflow: visible;
}

.ig-tile {
  position: absolute;
  z-index: 2;
  width: 12.5%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.78);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1.5px solid rgba(185, 145, 47, 0.45);
  border-radius: 22%;
  box-shadow: 0 12px 30px -10px rgba(185, 145, 47, 0.35),
    0 2px 6px rgba(0, 0, 0, 0.06);
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}

.ig-tile img {
  width: 56%;
  height: 56%;
  object-fit: contain;
}

@media (hover: hover) {
  .ig-tile:hover {
    transform: translate(-50%, -50%) translateY(-6px) scale(1.04);
    box-shadow: 0 22px 45px -12px rgba(185, 145, 47, 0.5),
      0 4px 10px rgba(0, 0, 0, 0.08);
  }
}

.ig-node {
  position: absolute;
  left: 50%;
  top: 90%;
  z-index: 3;
  transform: translate(-50%, -50%);
  width: 12.5%;
  aspect-ratio: 1;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 50% 35%, #fff 0%, #fdf6e6 55%, #f3e2b4 100%);
  border: 2px solid var(--gold);
  box-shadow: 0 0 0 8px rgba(185, 145, 47, 0.12),
    0 0 50px rgba(185, 145, 47, 0.45), 0 14px 36px -8px rgba(185, 145, 47, 0.5);
  animation: igPulse 3.2s ease-in-out infinite;
}

.ig-node .ig-a {
  width: 62%;
  height: auto;
  display: block;
}

@keyframes igPulse {
  0%, 100% {
    box-shadow: 0 0 0 8px rgba(185, 145, 47, 0.12),
      0 0 40px rgba(185, 145, 47, 0.35), 0 14px 36px -8px rgba(185, 145, 47, 0.5);
  }
  50% {
    box-shadow: 0 0 0 14px rgba(185, 145, 47, 0.06),
      0 0 70px rgba(185, 145, 47, 0.6), 0 14px 36px -8px rgba(185, 145, 47, 0.5);
  }
}

@media (prefers-reduced-motion: reduce) {
  .ig-node { animation: none; }
  .ig-lines circle { display: none; }
}

/* ── Flow-Diagramm ──────────────────────────────────────────── */

.flow-diagram {
  margin-top: 3.6rem;
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 0.4rem;
}

.flow-node {
  flex: 1 1 0;
  max-width: 15rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.55rem;
  padding: 1.7rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
}

.flow-icon {
  display: grid;
  place-items: center;
  width: 2.9rem;
  height: 2.9rem;
  border-radius: 50%;
  background: var(--gold-soft);
  color: var(--gold);
  margin-bottom: 0.3rem;
}

.flow-icon svg {
  width: 1.4rem;
  height: 1.4rem;
}

.flow-node-agent {
  border-color: rgba(185, 145, 47, 0.45);
  box-shadow: 0 18px 38px -26px rgba(185, 145, 47, 0.55);
}

.flow-node-agent .flow-icon {
  background: var(--gold);
  color: #fff;
}

.flow-step {
  font-size: 1.02rem;
  font-weight: 700;
}

.flow-detail {
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--muted);
}

.flow-arrow {
  flex: 0 0 1.8rem;
  align-self: center;
  position: relative;
  height: 2px;
  background: var(--line);
  border-radius: 2px;
}

.flow-arrow::after {
  content: "";
  position: absolute;
  right: -2px;
  top: 50%;
  width: 7px;
  height: 7px;
  border-top: 2px solid var(--muted);
  border-right: 2px solid var(--muted);
  transform: translateY(-50%) rotate(45deg);
}

.flow-pulse {
  position: absolute;
  top: 50%;
  left: 0;
  width: 7px;
  height: 7px;
  margin-top: -3.5px;
  border-radius: 50%;
  background: var(--gold);
  opacity: 0;
}

@media (prefers-reduced-motion: no-preference) {
  .flow-pulse {
    animation: flowPulse 2.4s var(--ease) infinite;
  }
  .flow-arrow:nth-of-type(2) .flow-pulse {
    animation-delay: 0.8s;
  }
  .flow-arrow:nth-of-type(3) .flow-pulse {
    animation-delay: 1.6s;
  }
}

@keyframes flowPulse {
  0% {
    left: 0;
    opacity: 0;
  }
  15% {
    opacity: 1;
  }
  85% {
    opacity: 1;
  }
  100% {
    left: 100%;
    opacity: 0;
  }
}

.flow-loop {
  margin-top: 2.2rem;
  text-align: center;
  font-size: 0.9rem;
  color: var(--muted);
}

.flow-loop-icon {
  display: inline-block;
  margin-right: 0.5rem;
  color: var(--gold);
  font-size: 1.05rem;
  vertical-align: -0.05em;
}

/* ── ROI-Rechner ────────────────────────────────────────────── */

.roi-card {
  margin-top: 3.4rem;
  display: grid;
  gap: 1.8rem;
  grid-template-columns: 1fr;
  padding: 2rem;
  border-radius: var(--radius);
  background: #fbfaf6;
  color: var(--navy);
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.45);
  /* Helle Karte im Navy-Band: Text-, Track- und Knopf-Variablen auf Hell-Modus */
  --ink: #0a1428;
  --muted: #5d6675;
  --line: rgba(10, 20, 40, 0.13);
}

@media (min-width: 820px) {
  .roi-card {
    grid-template-columns: minmax(0, 1fr) 30rem;
    gap: 2.4rem;
    align-items: center;
    padding: 2.6rem;
  }
}

.roi-controls {
  display: flex;
  flex-direction: column;
  gap: 1.9rem;
}

.roi-label-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  margin-bottom: 0.75rem;
}

.roi-label-row label {
  font-size: 0.95rem;
  font-weight: 600;
}

.roi-output-inline {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
}

.roi-range {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  border-radius: 99px;
  background: linear-gradient(
    to right,
    var(--gold) var(--roi-fill, 10%),
    var(--line) var(--roi-fill, 10%)
  );
  outline: none;
  cursor: pointer;
}

.roi-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--navy);
  border: 3px solid #fff;
  box-shadow: 0 2px 9px rgba(10, 20, 40, 0.32);
  cursor: pointer;
}

.roi-range::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--navy);
  border: 3px solid #fff;
  box-shadow: 0 2px 9px rgba(10, 20, 40, 0.32);
  cursor: pointer;
}

.roi-result {
  text-align: center;
  padding: 1.8rem 1.5rem;
  border-radius: var(--radius);
  background: #ffffff;
  border: 1px solid rgba(10, 20, 40, 0.07);
  color: var(--navy);
  /* Text-Variablen auf Hell-Modus, damit Text, Trennlinie und der CTA-Button
     (btn-primary nutzt --ink) navy werden. */
  --ink: #0a1428;
  --muted: #5d6675;
  --line: rgba(10, 20, 40, 0.13);
}

/* Zwei Kennzahlen nebeneinander: Zeit und Geld */
.roi-figures {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 1.75rem;
  margin-top: 0.4rem;
}

.roi-figure {
  width: 12rem;
  text-align: center;
}

.roi-unit {
  font-size: 0.42em;
  font-weight: 700;
  color: var(--muted);
}

.roi-figure-cap {
  margin-top: 0.35rem;
}

.roi-figures-sep {
  width: 1px;
  background: var(--line);
  margin-block: 0.3rem;
}

@media (max-width: 639px) {
  .roi-figures {
    flex-direction: column;
    gap: 1.1rem;
    align-items: center;
  }
  .roi-figures-sep {
    width: 56%;
    height: 1px;
  }
}

.roi-amount {
  margin-top: 0.4rem;
  font-size: clamp(1.7rem, 3.5vw, 2.1rem);
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.roi-currency {
  display: block;
  font-size: 0.46em;
  font-weight: 700;
  color: var(--muted);
  margin-bottom: 0.15em;
}

.roi-note {
  margin-top: 0.95rem;
  font-size: 0.82rem;
  color: var(--muted);
  line-height: 1.5;
}

.roi-cta {
  margin-top: 1.4rem;
}

/* ── Aus der Praxis (Case) ──────────────────────────────────── */

.case-grid {
  display: grid;
  gap: 2.4rem;
  grid-template-columns: 1fr;
  align-items: center;
}

@media (min-width: 900px) {
  .case-grid {
    grid-template-columns: 1fr 1fr;
    column-gap: 3.5rem;
    align-items: end; /* Widget-Unterkante auf Höhe des letzten Textpunkts */
  }
}

.case-lead {
  margin-top: 1.6rem;
  font-size: 1.08rem;
  color: var(--muted);
}

.case-points {
  margin-top: 1.6rem;
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.case-points li {
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
  font-size: 0.95rem;
}

.case-panel {
  padding: 1.6rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
  box-shadow: 0 30px 60px -40px rgba(10, 20, 40, 0.4);
}

.case-panel-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.case-panel-title {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.case-live {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--gold);
}

.case-live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gold);
}

@media (prefers-reduced-motion: no-preference) {
  .case-live-dot {
    animation: caseLive 1.8s ease-in-out infinite;
  }
}

@keyframes caseLive {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.4;
    transform: scale(0.8);
  }
}

.case-tiles {
  margin-top: 1.3rem;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.7rem;
}

.case-tile {
  padding: 0.75rem 0.55rem;
  border-radius: calc(var(--radius) - 4px);
  background: var(--bg);
  border: 1px solid var(--line);
  text-align: center;
}

.case-tile-num {
  display: block;
  font-size: 1.1rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.case-ok {
  color: var(--gold);
}

.case-tile-label {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.7rem;
  color: var(--muted);
}

.case-activity {
  margin-top: 1.3rem;
}

.case-act-label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
}

.case-timeline {
  margin-top: 0.7rem;
  list-style: none;
}

.case-tl-row {
  display: grid;
  grid-template-columns: 3.1rem 1fr;
  gap: 0.6rem;
  align-items: start;
}

.case-tl-time {
  font-variant-numeric: tabular-nums;
  font-size: 0.72rem;
  line-height: 1.5;
  color: var(--muted);
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.case-tl-step-wrap {
  position: relative;
  border-left: 1px solid var(--line);
  padding: 0 0 0.45rem 0.85rem;
}

.case-tl-row:last-child .case-tl-step-wrap {
  border-left-color: transparent;
}

.case-tl-step-wrap::before {
  content: "";
  position: absolute;
  left: -4px;
  top: 0.35em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--muted);
}

.case-tl-step {
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--ink);
}

/* Menschlicher Kontrollpunkt: Gold-Akzent + Pause-Symbol */
.case-tl-row--check .case-tl-time {
  color: var(--gold);
}

.case-tl-row--check .case-tl-step-wrap {
  border-left-color: var(--gold);
}

.case-tl-row--check .case-tl-step-wrap::before {
  width: 9px;
  height: 9px;
  left: -5px;
  background: var(--gold);
  box-shadow: 0 0 0 3px var(--gold-soft);
}

.case-tl-row--check .case-tl-step {
  color: var(--gold);
  font-weight: 600;
}

.case-tl-pause {
  display: inline-block;
  width: 7px;
  height: 9px;
  margin-right: 0.45rem;
  border-left: 2px solid var(--gold);
  border-right: 2px solid var(--gold);
  vertical-align: middle;
}

/* ── Dark-Varianten: Flow + Praxis auf dem Navy-Band ────────── */

/* Flow-Knoten brauchen auf Navy etwas mehr Präsenz als der reine
   --card-Wert; der KI-Agent-Knoten behält seinen Gold-Akzent. */
.band-navy .flow-node {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.12);
}

/* Praxis-Panel als helleres Floating-Panel, Kacheln als dunkle Insets:
   liest sich auf Navy wie ein echtes Dark-Dashboard. */
.band-navy .case-panel {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: 0 30px 60px -40px rgba(0, 0, 0, 0.55);
}

.band-navy .case-tile {
  background: rgba(0, 0, 0, 0.2);
  border-color: rgba(255, 255, 255, 0.1);
}

/* Mobil: Knoten vertikal stapeln, Pfeile als Abwärts-Chevron. */
@media (max-width: 760px) {
  .flow-diagram {
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
  }
  .flow-node {
    width: 100%;
    max-width: 22rem;
    flex: 0 0 auto;
    flex-direction: row;
    text-align: left;
    align-items: center;
    gap: 1rem;
    padding: 1.1rem 1.2rem;
  }
  .flow-icon {
    margin-bottom: 0;
    flex-shrink: 0;
  }
  .flow-arrow {
    flex: 0 0 auto;
    width: 2px;
    height: 1.6rem;
    background: var(--line);
  }
  .flow-arrow::after {
    right: 50%;
    top: auto;
    bottom: -2px;
    transform: translateX(50%) rotate(135deg);
  }
  .flow-pulse {
    display: none;
  }
}

/* ── Manifest ───────────────────────────────────────────────── */

.manifest {
  text-align: center;
}

.manifest-statement {
  margin-top: 1.8rem;
  font-size: clamp(1.9rem, 5.4vw, 3.6rem);
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 1.15;
  max-width: 18ch;
  margin-inline: auto;
}

.manifest-statement .m-word {
  color: rgba(242, 245, 250, 0.22);
  transition: color 0.3s linear;
}

.manifest-statement .m-word.lit {
  color: #f2f5fa;
}

.manifest-text {
  max-width: 40rem;
  margin: 2rem auto 0;
  font-size: 1.08rem;
  color: var(--muted);
}

.promises {
  margin-top: 3.2rem;
  display: grid;
  gap: 2rem;
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .promises {
    grid-template-columns: repeat(3, 1fr);
  }
}

.promise .label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.promise p:last-child {
  margin-top: 0.6rem;
  font-size: 0.92rem;
  color: var(--muted);
}

/* ── Ablauf / Timeline ──────────────────────────────────────── */

.timeline {
  position: relative;
  max-width: 46rem;
  margin: 4.5rem auto 0;
}

.timeline-track,
.timeline-progress {
  position: absolute;
  left: 1.55rem;
  top: 1.5rem;
  bottom: 1.5rem;
  width: 1px;
}

.timeline-track {
  background: var(--line);
}

.timeline-progress {
  width: 2px;
  margin-left: -0.5px;
  background: var(--gold);
  transform: scaleY(0);
  transform-origin: top;
}

.timeline-list {
  display: flex;
  flex-direction: column;
  gap: 3rem;
}

.timeline-step {
  display: flex;
  gap: 1.6rem;
  align-items: flex-start;
}

.timeline-node {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.1rem;
  height: 3.1rem;
  flex-shrink: 0;
  background: var(--card);
  border: 1px solid rgba(185, 145, 47, 0.45);
  border-radius: 50%;
  font-size: 0.85rem;
  font-weight: 700;
  transition: border-color 0.4s var(--ease);
}

/* Nur der Rand reagiert auf den Scroll-Fortschritt; die Füllung bleibt wie
   im Ruhezustand (Card-Hintergrund, goldenes Icon), kein Gold-Fill. */
.timeline-node.is-filled {
  border-color: var(--gold);
}

.timeline-icon {
  color: var(--gold);
}

.timeline-step h3 {
  margin-top: 0.3rem;
  font-size: 1.2rem;
  font-weight: 700;
}

.timeline-step p:last-child {
  margin-top: 0.55rem;
  color: var(--muted);
}

/* Ablauf-Gabel: Erstgespraech -> zentraler Vergleichs-Strahl */
.flow-fork {
  max-width: 62rem;
  margin: 4.5rem auto 0;
}
.fork-start {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.9rem;
  max-width: 40rem;
  margin: 0 auto;
}
.fork-lane-sub {
  font-size: 0.85rem;
  color: var(--muted);
}
/* Verzweigungslinien Erstgespraech -> zwei Wege */
.fork-branch {
  display: block;
  width: 100%;
  max-width: 22rem;
  height: 2.6rem;
  margin: 0.4rem auto 1.6rem;
  overflow: visible;
}
.fork-branch path {
  fill: none;
  vector-effect: non-scaling-stroke;
  stroke-linecap: round;
}
.fork-branch-base {
  stroke: var(--line);
  stroke-width: 1;
  opacity: 0.6;
}
.fork-branch-pulse {
  stroke: var(--gold);
  stroke-width: 1.6;
  stroke-dasharray: 6 42;
}
@media (prefers-reduced-motion: no-preference) {
  /* Eigener Keyframe: Offset = Dash-Periode (6+42=48), sonst springt das
     Muster bei jedem Loop zurück ("lädt neu"). miniFlow (-66) ist für die
     Netflix-Flows mit Periode 66 — hier falsch. */
  .fork-branch-pulse { animation: forkFlow 1.8s linear infinite; }
}
@keyframes forkFlow {
  to { stroke-dashoffset: -48; }
}
/* Zentraler Vergleich: Weg 1 links | Zahlen-Strahl | Weg 2 rechts */
.fork-compare {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  column-gap: 2.4rem;
  row-gap: 2.8rem;
  align-items: start;
  max-width: 62rem;
  margin: 0 auto;
}
.fork-compare .timeline-track,
.fork-compare .timeline-progress {
  left: 50%;
  right: auto;
  margin-left: -0.5px;
  top: 5.5rem;
  bottom: 1.5rem;
}
.fork-compare .timeline-progress {
  margin-left: -1px;
}
.fc-head {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.fc-head.fc-left,
.fc-cell.fc-left {
  text-align: right;
  justify-self: end;
  max-width: 24rem;
}
.fc-head.fc-right,
.fc-cell.fc-right {
  text-align: left;
  justify-self: start;
  max-width: 24rem;
}
.fc-head.fc-left { align-items: flex-end; }
.fc-head.fc-right { align-items: flex-start; }
.fc-cell h3 {
  font-size: 1.2rem;
  font-weight: 700;
}
.fc-cell p {
  margin-top: 0.5rem;
  color: var(--muted);
}
@media (max-width: 759px) {
  .fork-branch { display: none; }
  .fork-compare {
    grid-template-columns: 1fr;
    row-gap: 0;
    max-width: 32rem;
    counter-reset: weg1 weg2;
    margin-top: 3rem; /* Luft zwischen Erstgespräch und Weg 1 */
  }
  /* Zentraler Desktop-Strahl + geteilte Knoten raus; Mobile hat pro Weg
     eine eigene vertikale Gold-Rail (unten via Pseudo-Elemente). */
  .fork-compare .timeline-track,
  .fork-compare .timeline-progress,
  .fork-compare .timeline-node,
  .fc-blank,
  .fc-empty {
    display: none;
  }
  /* Wege stapeln: Weg 1 (Kopf + 4 Schritte) dann Weg 2 */
  .fc-head.fc-left { order: 1; }
  .fc-cell.fc-left { order: 2; }
  .fc-head.fc-right { order: 3; margin-top: 2.6rem; }
  .fc-cell.fc-right { order: 4; }
  .fork-compare .fc-head {
    text-align: left;
    align-items: flex-start;
    justify-self: start;
    max-width: none;
    margin-bottom: 1.5rem;
  }
  /* Jede Zelle = Timeline-Schritt an der Gold-Rail */
  .fork-compare .fc-cell {
    text-align: left;
    align-items: flex-start;
    justify-self: start;
    max-width: none;
    position: relative;
    padding-left: 3.6rem;
    padding-bottom: 1.9rem;
  }
  .fc-cell.fc-left { counter-increment: weg1; }
  .fc-cell.fc-right { counter-increment: weg2; }
  /* Verbindungslinie füllt sich GOLDEN von oben nach unten, scroll-gekoppelt:
     JS setzt --fill (0..1) pro Zelle aus der Scroll-Position → Gradient wandert
     kontinuierlich runter (nicht sprunghaft Kreis-zu-Kreis). Startet am Kreis-
     UNTERrand (2.5rem), damit die Linie nicht in den Kreis hineinläuft. */
  .fork-compare .fc-cell::after {
    content: "";
    position: absolute;
    left: 1.25rem;
    top: 2.5rem;
    bottom: 0;
    width: 2px;
    background: linear-gradient(
      to bottom,
      var(--gold) calc(var(--fill, 0) * 100%),
      var(--line) calc(var(--fill, 0) * 100%)
    );
  }
  /* letzter Schritt je Weg (R4 = letztes div, L4 = vorletztes): keine Linie mehr */
  .fork-compare .fc-cell:nth-last-of-type(1)::after,
  .fork-compare .fc-cell:nth-last-of-type(2)::after {
    display: none;
  }
  /* Nummerierter Knoten: grau im Ruhezustand, leuchtet golden sobald die
     Fülllinie ihn erreicht (.is-lit via JS) */
  .fork-compare .fc-cell::before {
    position: absolute;
    left: 0;
    top: 0;
    width: 2.5rem;
    height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: var(--card);
    font-size: 0.78rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--muted);
    z-index: 1;
    transition: border-color 0.3s var(--ease), background 0.3s var(--ease),
      color 0.3s var(--ease);
  }
  .fc-cell.fc-left::before { content: counter(weg1, decimal-leading-zero); }
  .fc-cell.fc-right::before { content: counter(weg2, decimal-leading-zero); }
  .fork-compare .fc-cell.is-lit::before {
    border-color: var(--gold);
    background: var(--gold-soft);
    color: var(--gold);
  }
  .fork-compare .fc-cell h3 { margin-top: 0.2rem; }
}

.costs {
  max-width: 60rem;
  margin: 4.5rem auto 0;
}

.costs-label {
  display: block;
  text-align: center;
}

.costs-bridge {
  text-align: center;
  max-width: 44rem;
  margin: 1.4rem auto 2.6rem;
  color: var(--muted);
}

.costs-bridge strong {
  color: var(--ink);
}

.costs-label.costs-way-2 {
  margin-top: 3rem;
}

.costs-tco {
  text-align: center;
  max-width: 40rem;
  margin: 1.4rem auto 0;
  font-size: 0.85rem;
  color: var(--muted);
}

.costs-grid {
  margin-top: 1.6rem;
  display: grid;
  gap: 1.2rem;
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .costs-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 960px) {
  .costs-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.cost-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.9rem 1.5rem;
  text-align: center;
  transition: transform 0.3s var(--ease), border-color 0.3s var(--ease);
}

.cost-card:hover {
  transform: translateY(-4px);
  border-color: rgba(185, 145, 47, 0.45);
}

.cost-value {
  font-size: 1.55rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.cost-per {
  font-size: 0.62em;
  font-weight: 600;
  color: var(--muted);
}

.cost-card p:last-child {
  margin-top: 0.7rem;
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--muted);
}

.cost-card-link a {
  color: var(--gold);
  font-weight: 600;
  white-space: nowrap;
}

/* Mobile: Preis-Kacheln stapeln sich beim Scrollen wie die 3/4-Agenten
   (Sticky-Stack pro Weg). Nur ≤639px, wo das Raster ohnehin 1-spaltig ist —
   Desktop behält das 4er-Vergleichsraster. Solider --card-Hintergrund deckt
   die darunterliegende Karte; Schatten gibt die Schichtung. */
@media (max-width: 639px) {
  .costs-grid {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
  }
  .cost-card {
    position: sticky;
    top: 6rem;
    box-shadow: 0 14px 34px rgba(10, 20, 40, 0.1);
  }
  .cost-card:nth-child(2) {
    top: 7rem;
  }
  .cost-card:nth-child(3) {
    top: 8rem;
  }
  .cost-card:nth-child(4) {
    top: 9rem;
  }
}

/* ── Über uns ───────────────────────────────────────────────── */

.about-grid {
  display: grid;
  gap: 2.4rem;
  align-items: center;
  grid-template-columns: 1fr;
}

/* Desktop: Foto links über beide Reihen, Titel + Text rechts.
   Mobil gilt die DOM-Reihenfolge: Titel, Foto, Text. */
@media (min-width: 980px) {
  .about-grid {
    grid-template-columns: 0.85fr 1.15fr;
    grid-template-areas:
      "photo head"
      "photo text";
    column-gap: 3.5rem;
    row-gap: 2.2rem;
  }
  .about-head {
    grid-area: head;
    align-self: end;
  }
  .about-photo {
    grid-area: photo;
  }
  .about-text {
    grid-area: text;
    align-self: start;
  }
}

.about-photo {
  position: relative;
  max-width: 24rem;
  margin: 0 auto;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: 0 32px 64px -38px rgba(10, 20, 40, 0.5);
}

.about-photo img {
  /* Natürliches Seitenverhältnis (880x1168), kein Crop-Zoom. aspect-ratio
     reserviert die Höhe schon vor dem (lazy) Laden, sonst springt das Layout
     darunter (Manifest, Ablauf) auf Mobile und deren Scroll-Trigger verrutschen. */
  width: 100%;
  height: auto;
  aspect-ratio: 880 / 1168;
}

.about-photo-caption {
  position: absolute;
  inset: auto 0 0 0;
  padding: 1.2rem;
  background: linear-gradient(to top, rgba(6, 16, 31, 0.92), transparent);
  color: #fff;
}

.about-photo-caption p:first-child {
  font-size: 0.92rem;
  font-weight: 600;
}

.about-photo-caption .label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.2rem;
  color: rgba(255, 255, 255, 0.75);
}

.about-text > p {
  margin-top: 1.4rem;
  font-size: 1.08rem;
  color: var(--muted);
}

.about-text > p:first-child {
  margin-top: 0;
}

/* ── Kontakt ────────────────────────────────────────────────── */

.contact-grid {
  margin-top: 4rem;
  display: grid;
  gap: 1.6rem;
  grid-template-columns: 1fr;
}

@media (min-width: 980px) {
  .contact-grid {
    grid-template-columns: 0.9fr 1.1fr;
  }
}

.contact-aside {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 2.1rem;
  display: flex;
  flex-direction: column;
}

.contact-aside h3 {
  font-size: 1.15rem;
  font-weight: 700;
}

.contact-aside ul {
  margin-top: 1.6rem;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}

.contact-aside li {
  display: flex;
  gap: 0.9rem;
  color: var(--muted);
}

.contact-aside-foot {
  margin-top: auto;
  padding-top: 2rem;
}

.contact-form-wrap {
  position: relative;
  background: #fbfaf7;
  color: #0a1428;
  /* Helle Insel auf dem Navy-Band: Tokens zurück auf Light drehen,
     sonst erbt z.B. .btn-primary das helle --ink (weiss auf weiss). */
  --ink: #0a1428;
  --ink-soft: #1c2a42;
  --muted: #5d6675;
  --line: rgba(10, 20, 40, 0.13);
  --card: #ffffff;
  border-radius: var(--radius);
  border: 1px solid rgba(10, 20, 40, 0.1);
  padding: 2.1rem;
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.5);
}

@media (min-width: 980px) {
  .contact-form-wrap {
    padding: 2.6rem;
  }
}

.form-grid {
  display: grid;
  gap: 1.4rem;
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .form-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.field {
  margin-top: 1.4rem;
}

.form-grid .field {
  margin-top: 0;
}

form .form-grid {
  margin-top: 0;
}

.field label,
.field legend {
  display: block;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #5d6675;
  margin-bottom: 0.5rem;
}

.field input,
.field textarea,
.field select {
  width: 100%;
  padding: 0.85rem 1rem;
  font: inherit;
  color: #0a1428;
  background: #fff;
  border: 1px solid rgba(10, 20, 40, 0.16);
  border-radius: 0.6rem;
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}

.field input:focus,
.field textarea:focus,
.field select:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(185, 145, 47, 0.18);
}

.field select {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%235d6675' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.5rem;
}

.field textarea {
  resize: none;
}

.pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.pill {
  padding: 0.5rem 1.1rem;
  border: 1px solid rgba(10, 20, 40, 0.16);
  border-radius: 99px;
  font-size: 0.85rem;
  color: #5d6675;
  cursor: pointer;
  transition: all 0.2s var(--ease);
}

.pill:has(input:checked) {
  background: #0a1428;
  color: #fff;
  border-color: #0a1428;
}

.pill input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

.form-submit {
  width: 100%;
  justify-content: center;
  margin-top: 1.8rem;
}

.form-submit:disabled {
  cursor: wait;
  opacity: 0.7;
  transform: none;
}

.form-note {
  margin-top: 1.1rem;
  font-size: 0.74rem;
  line-height: 1.5;
  text-align: center;
  color: rgba(93, 102, 117, 0.85);
}

.form-note a {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.form-note a:hover {
  color: #0a1428;
}

/* hidden-Attribut muss gegen das display:flex gewinnen, sonst stehen
   Formular und Success-Screen gleichzeitig auf der Seite. */
.form-success[hidden] {
  display: none;
}

.form-success {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 24rem;
}

.form-success-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  border: 1px solid rgba(185, 145, 47, 0.4);
  background: rgba(185, 145, 47, 0.1);
  color: var(--gold);
  font-size: 1.6rem;
}

.form-success h3 {
  margin-top: 1.4rem;
  font-size: 1.6rem;
  font-weight: 800;
}

.form-success p {
  margin-top: 0.7rem;
  color: #5d6675;
  max-width: 22rem;
}

/* ── FAQ ────────────────────────────────────────────────────── */

.faq-list {
  margin-top: 3.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  text-align: left;
}

.faq-item {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color 0.25s var(--ease);
}

.faq-item.is-open {
  border-color: rgba(185, 145, 47, 0.4);
}

.faq-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  padding: 1.3rem 1.5rem;
  background: none;
  border: 0;
  font: inherit;
  font-weight: 600;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}

.faq-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.8rem;
  height: 1.8rem;
  flex-shrink: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--muted);
  font-weight: 400;
  transition: transform 0.3s var(--ease), color 0.3s, border-color 0.3s;
}

.faq-item.is-open .faq-icon {
  transform: rotate(45deg);
  color: var(--gold);
  border-color: rgba(185, 145, 47, 0.5);
}

.faq-a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.35s var(--ease);
}

.faq-item.is-open .faq-a {
  grid-template-rows: 1fr;
}

.faq-a > p {
  overflow: hidden;
  padding: 0 1.5rem;
  color: var(--muted);
  transition: padding 0.35s var(--ease);
}

.faq-item.is-open .faq-a > p {
  padding-bottom: 1.4rem;
}

.faq-more {
  margin-top: 2.6rem;
  color: var(--muted);
}

.faq-more a {
  font-weight: 600;
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--gold);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

/* Mobil: Link auf eigene Zeile */
@media (max-width: 639px) {
  .faq-more a {
    display: block;
    margin-top: 0.6rem;
  }
}

/* ── Footer ─────────────────────────────────────────────────── */

.footer {
  position: relative;
  background: var(--navy-deep);
  color: #f2f5fa;
  --ink: #f2f5fa;
  --muted: #8b97aa;
  --line: rgba(255, 255, 255, 0.12);
  overflow: hidden;
  padding: 5rem 1.5rem 2rem;
}

.footer-grid {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 3rem;
  grid-template-columns: 1fr;
}

@media (min-width: 800px) {
  .footer-grid {
    grid-template-columns: 1.3fr 1fr 1fr;
  }
}

.footer-desc {
  margin-top: 1.3rem;
  max-width: 20rem;
  color: var(--muted);
}

.swiss-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  margin-top: 1.6rem;
  border: 1px solid var(--line);
  border-radius: 99px;
  padding: 0.55rem 1.1rem;
}

.swiss-cross {
  width: 0.9rem;
  height: 0.9rem;
  fill: var(--gold);
}

.footer h3 {
  margin-bottom: 1.3rem;
}

.footer ul {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  font-size: 0.92rem;
}

.footer ul a {
  color: var(--muted);
  transition: color 0.2s;
}

.footer ul a:hover {
  color: #fff;
}

.footer-muted {
  color: var(--muted);
}

/* Outline-Wordmark wie auf der Live-Site: Maske + Band-Füllung auf dem
   Kind, die vier 1px-Konturschatten auf dem Eltern-Element (filter läuft
   vor mask, sonst schneidet die Maske den Schatten weg). */
.footer-watermark {
  position: absolute;
  inset: auto 0 0 0;
  display: flex;
  justify-content: center;
  transform: translateY(32%);
  pointer-events: none;
  user-select: none;
}

.wm-outline {
  display: block;
  width: 88vw;
  max-width: 72rem;
  filter: drop-shadow(1px 0 0 rgba(255, 255, 255, 0.14))
    drop-shadow(-1px 0 0 rgba(255, 255, 255, 0.14))
    drop-shadow(0 1px 0 rgba(255, 255, 255, 0.14))
    drop-shadow(0 -1px 0 rgba(255, 255, 255, 0.14));
}

.wm-fill {
  display: block;
  width: 100%;
  aspect-ratio: 1940 / 310;
  background-color: var(--navy-deep);
  mask: url("../assets/wordmark-trim.png") center / contain no-repeat;
  -webkit-mask: url("../assets/wordmark-trim.png") center / contain no-repeat;
}

.footer-base {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.8rem;
  margin-top: 4.5rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--line);
}

/* ── Legal-Seiten (Impressum, Datenschutz) ──────────────────── */

.legal-back {
  margin-left: auto;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--muted);
  transition: color 0.2s var(--ease);
}

.legal-back:hover {
  color: var(--ink);
}

.legal-wrap {
  max-width: 46rem;
  margin: 0 auto;
  padding: 9rem 1.5rem 5rem;
}

.legal-wrap h1 {
  font-size: clamp(1.9rem, 4.6vw, 2.6rem);
  font-weight: 800;
  letter-spacing: -0.03em;
}

.legal-wrap h2 {
  margin-top: 2.6rem;
  font-size: 1.2rem;
  font-weight: 700;
}

.legal-wrap p {
  margin-top: 0.9rem;
  line-height: 1.7;
  color: var(--muted);
}

.legal-foot {
  max-width: 46rem;
  margin: 0 auto;
  padding: 1.6rem 1.5rem 2.5rem;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
}

.legal-foot a:hover {
  color: var(--ink);
}

/* ── Produkt: Aiconic Suite Showcase ────────────────────────── */

.produkt-showcase {
  margin-top: 4rem;
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.55fr);
  gap: 2.5rem;
  align-items: center;
}

.produkt-tabs {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.produkt-tab {
  text-align: left;
  padding: 1.15rem 1.25rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  transition: border-color 0.3s var(--ease), background 0.3s var(--ease);
}

.produkt-tab:hover {
  border-color: rgba(10, 20, 40, 0.28);
}

.produkt-tab.is-active {
  border-color: var(--gold);
  background: var(--gold-soft);
}

.produkt-tab-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--ink);
}

.produkt-tab.is-active .produkt-tab-title {
  color: var(--gold);
}

.produkt-tab-desc {
  font-size: 0.9rem;
  line-height: 1.4;
  color: var(--muted);
}

.produkt-frame {
  border-radius: 0.9rem;
  overflow: hidden;
  background: var(--card);
  border: 1px solid var(--line);
  box-shadow: 0 30px 60px -25px rgba(10, 20, 40, 0.35);
}

.browser-chrome {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.7rem 1rem;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}

.browser-dots {
  display: inline-flex;
  gap: 0.4rem;
}

.browser-dots i {
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 50%;
  background: rgba(10, 20, 40, 0.18);
}

.browser-url {
  font-size: 0.8rem;
  letter-spacing: 0.02em;
  color: var(--muted);
}

.browser-shot {
  position: relative;
  aspect-ratio: 1440 / 900;
  background: var(--bg);
}

.browser-img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top left;
  opacity: 0;
  transition: opacity 0.45s var(--ease);
}

.browser-img.is-active {
  opacity: 1;
}

.produkt-hotspots {
  position: absolute;
  inset: 0;
}

.produkt-hotspot {
  position: absolute;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0.35rem;
  cursor: pointer;
  transition: background 0.2s var(--ease), box-shadow 0.2s var(--ease);
}

.produkt-hotspot:hover,
.produkt-hotspot:focus-visible {
  background: rgba(185, 145, 47, 0.18);
  box-shadow: 0 0 0 2px var(--gold);
  outline: none;
}

.produkt-disclaimer {
  margin-top: 1.5rem;
  text-align: center;
}

@media (max-width: 860px) {
  .produkt-showcase {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .produkt-hotspots {
    display: none;
  }

  .produkt-tabs {
    flex-direction: row;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 0.5rem;
  }

  .produkt-tab {
    flex: 0 0 78%;
    scroll-snap-align: start;
  }
}

/* ── Reduced Motion ─────────────────────────────────────────── */

/* Bewusst minimal: dezente Animationen (Marquee, Fades, Pulses, Transitions)
   laufen auch bei "Bewegung reduzieren". Die schweren Effekte (3D-Hero,
   Parallax) sind in JS via reducedHeavy abgeschaltet. */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

/* ── 4 Dimensionen (Methode hinter dem Flow Audit) ──────────────
   Eigene Sektion vor dem Ablauf. Nutzt bestehende Tokens/Klassen
   (.section, .why-grid, .why-card, .label gold). Nur Anker/Abstand. */
#dimensionen {
  scroll-margin-top: 6rem;
}
#dimensionen .why-card .label {
  display: block;
  margin-bottom: 0.5rem;
}
.service-dims-link {
  margin-top: 0.9rem;
}

/* ════════════════════════════════════════════════════════════════
   KONFIGURATOR — Dein digitales Team (Suite ins Schaufenster)
   Nur bestehende Tokens: --card, --line, --gold, --gold-soft, --ink,
   --ink-soft, --muted, --bg, --surface, --radius, --ease.
   ════════════════════════════════════════════════════════════════ */
.team {
  background: var(--surface);
}
.team-usp {
  max-width: 46rem;
  margin: 1.8rem auto 0;
  text-align: center;
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--muted);
}
.team-usp strong {
  color: var(--gold);
}
/* ── Netflix-Style: Wert-Band-Zeilen mit horizontalem Swipe ── */
.suite-rows {
  margin-top: 2.6rem;
  display: flex;
  flex-direction: column;
  gap: 2.6rem;
}
.cat-row-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.5rem;
}
.cat-row-title {
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.2;
  color: var(--ink);
}
.cat-row-sub {
  margin-top: 0.35rem;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--muted);
  max-width: 34rem;
}
.cat-row-nav {
  display: flex;
  gap: 0.5rem;
  flex-shrink: 0;
}
/* JS blendet die Pfeile aus, wenn nichts zu scrollen ist — [hidden] braucht
   die Gegenregel, weil display:flex das UA-Stylesheet schlägt (CLAUDE.md 7.5). */
.cat-row-nav[hidden] {
  display: none;
}
.cat-arrow {
  width: 2.4rem;
  height: 2.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: 99px;
  background: var(--card);
  color: var(--ink);
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.2s var(--ease), border-color 0.2s var(--ease),
    color 0.2s var(--ease), opacity 0.2s var(--ease);
}
@media (hover: hover) {
  .cat-arrow:hover {
    border-color: var(--gold);
    color: var(--gold);
    background: var(--gold-soft);
  }
}
.cat-track-wrap.is-start .cat-arrow-prev,
.cat-track-wrap.is-end .cat-arrow-next {
  opacity: 0.3;
  pointer-events: none;
}
.cat-track-wrap {
  position: relative;
}
/* Rechte Kante: Fade-Hinweis „es geht weiter →" */
.cat-track-wrap::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 3rem;
  pointer-events: none;
  background: linear-gradient(to right, rgba(0, 0, 0, 0), var(--surface));
  opacity: 1;
  transition: opacity 0.25s var(--ease);
}
.cat-track-wrap.is-end::after {
  opacity: 0;
}
.cat-track {
  display: flex;
  gap: 1.1rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  /* Vertikales Padding: Fokus-Ring + Hover-Schatten haben Platz, weil
     overflow-x:auto das overflow-y implizit auf auto zwingt (würde sonst clippen). */
  padding: 0.7rem 0;
  scrollbar-width: none; /* Firefox */
}
.cat-track::-webkit-scrollbar {
  display: none; /* Chrome/Safari */
}
.cat-track > .agent-card {
  flex: 0 0 clamp(18rem, 23vw, 21rem);
  scroll-snap-align: start;
}
/* Preis-Block an den Kartenboden ziehen → gleiche Höhe pro Zeile fluchtet */
.cat-track > .agent-card .agent-price {
  margin-top: auto;
}
.cat-swipe-hint {
  display: none;
}
/* Mobile: Peek der Folgekarte + Wisch-Hinweis, Pfeile weg */
@media (max-width: 719px) {
  .cat-row-nav {
    display: none;
  }
  .cat-track > .agent-card {
    flex: 0 0 82%;
  }
  .cat-swipe-hint {
    display: block;
    margin-top: 0.55rem;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
  }
}

.agent-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.5rem 1.4rem 1.3rem;
  cursor: pointer;
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease),
    border-color 0.3s var(--ease);
}
@media (hover: hover) {
  .agent-card:hover {
    transform: translateY(-4px);
    border-color: rgba(185, 145, 47, 0.45);
    box-shadow: 0 18px 36px -22px rgba(10, 20, 40, 0.3);
  }
}

/* Native Checkbox: unsichtbar, aber fokussierbar (Tastatur/a11y) */
.agent-check {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
}
.agent-card:has(.agent-check:checked) {
  border-color: var(--gold);
  box-shadow: inset 0 0 0 1px var(--gold);
}
.agent-card:has(.agent-check:focus-visible) {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

/* Auswahl-Marke oben rechts */
.agent-mark {
  position: absolute;
  top: 1.2rem;
  right: 1.2rem;
  width: 1.25rem;
  height: 1.25rem;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--bg);
  transition: background 0.2s var(--ease), border-color 0.2s var(--ease);
}
.agent-mark::after {
  content: "✓";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  color: #fff;
  opacity: 0;
  transition: opacity 0.2s var(--ease);
}
.agent-check:checked ~ .agent-mark {
  background: var(--gold);
  border-color: var(--gold);
}
.agent-check:checked ~ .agent-mark::after {
  opacity: 1;
}

.agent-role {
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1.3;
  padding-right: 1.8rem;
}
.agent-what {
  margin-top: 0.55rem;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--muted);
}
.agent-benefit {
  margin-top: 0.55rem;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--ink);
  display: flex;
  gap: 0.4rem;
}
.agent-arrow {
  color: var(--gold);
  font-weight: 700;
}
.agent-proof {
  margin-top: 0.8rem;
  padding-top: 0.75rem;
  border-top: 1px dashed var(--line);
  font-size: 0.76rem;
  line-height: 1.5;
  color: var(--muted);
}
.agent-source {
  font-size: 0.68rem;
  font-style: italic;
  color: var(--muted);
  opacity: 0.8;
  white-space: nowrap;
}
.agent-price {
  margin-top: 1.1rem;
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.agent-per {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--muted);
}
.agent-setup {
  margin-top: 0.3rem;
  font-size: 0.72rem;
  line-height: 1.45;
  color: var(--muted);
}
.agent-once {
  white-space: nowrap;
}

/* "In Kürze"-Badge: Agenten, die frisch in die Suite kommen (noch nicht live) */
.agent-soon {
  position: absolute;
  top: 1.2rem;
  left: 1.4rem;
  padding: 0.16rem 0.5rem;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--gold);
  background: var(--gold-soft);
  border: 1px solid rgba(185, 145, 47, 0.35);
  border-radius: 99px;
}
.agent-card.is-soon .agent-role {
  padding-top: 1.5rem;
}
.agent-pick {
  margin-top: 1.1rem;
  padding: 0.6rem 1rem;
  border: 1px solid var(--line);
  border-radius: 99px;
  text-align: center;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--muted);
  transition: background 0.2s var(--ease), color 0.2s var(--ease),
    border-color 0.2s var(--ease);
}
.agent-pick-on {
  display: none;
}
.agent-check:checked ~ .agent-pick {
  background: var(--gold-soft);
  border-color: var(--gold);
  color: var(--gold);
}
.agent-check:checked ~ .agent-pick .agent-pick-add {
  display: none;
}
.agent-check:checked ~ .agent-pick .agent-pick-on {
  display: inline;
}

/* Robuster, JS-gesetzter Auswahl-Zustand (Klasse .is-selected via
   initConfigurator) — garantiert das Gold-Highlight unabhängig von der
   :has/:checked-Cascade. Spiegelt die Regeln oben. */
.agent-card.is-selected {
  border-color: var(--gold);
  box-shadow: inset 0 0 0 1px var(--gold);
}
.agent-card.is-selected .agent-mark {
  background: var(--gold);
  border-color: var(--gold);
}
.agent-card.is-selected .agent-mark::after {
  opacity: 1;
}
.agent-card.is-selected .agent-pick {
  background: var(--gold-soft);
  border-color: var(--gold);
  color: var(--gold);
}
.agent-card.is-selected .agent-pick .agent-pick-add {
  display: none;
}
.agent-card.is-selected .agent-pick .agent-pick-on {
  display: inline;
}

/* Auswahl-Leiste + CTA */
.team-bar {
  margin-top: 2rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1rem 1.4rem;
}
.team-bar-count {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.team-bar.has-selection .team-bar-count {
  color: var(--gold);
}

/* Custom-Brücke: Studio als sekundäre Option */
.team-custom {
  margin-top: 2.4rem;
  padding-top: 2rem;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.2rem;
}
.team-custom-text {
  max-width: 40rem;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--muted);
}
.team-custom-text strong {
  color: var(--ink);
}

/* ── Aiconic Suite: Pakete (4 Bündel) ───────────────────────── */
.pack-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.2rem;
  margin-top: 2.6rem;
}
/* Team-Bundles: 3 Karten → 3 Spalten (sonst bleibt Spalte 4 leer = linksbündig).
   Spiegelt #fundament .pack-grid. ID-Spezifität übersteuert die Basis-Breakpoints. */
#pakete .pack-grid {
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 980px) {
  #pakete .pack-grid {
    grid-template-columns: 1fr;
  }
}
.pack-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.7rem 1.4rem 1.5rem;
}
.pack-card.is-featured {
  border-color: var(--gold);
  box-shadow: 0 20px 44px -26px rgba(185, 145, 47, 0.5);
}
.pack-badge {
  position: absolute;
  top: -0.7rem;
  left: 1.4rem;
  padding: 0.2rem 0.7rem;
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fff;
  background: var(--gold);
  border-radius: 99px;
}
.pack-name {
  font-size: 1.2rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.pack-for {
  margin-top: 0.5rem;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--muted);
}
.pack-agents {
  list-style: none;
  margin: 1.1rem 0 0;
  padding: 1.1rem 0 0;
  border-top: 1px dashed var(--line);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  flex: 1;
}
.pack-agents li {
  position: relative;
  padding-left: 1.4rem;
  font-size: 0.9rem;
  line-height: 1.4;
  color: var(--ink);
}
.pack-agents li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--gold);
  font-weight: 700;
}
/* Optionaler Punkt (zusätzlich buchbar, nicht im Festpreis): „+" statt Haken. */
.pack-agents li.pack-opt::before {
  content: "+";
  font-size: 1.05rem;
  line-height: 1.25;
}
.pack-soon {
  display: inline-block;
  margin-left: 0.3rem;
  padding: 0.05rem 0.4rem;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--gold);
  background: var(--gold-soft);
  border-radius: 99px;
  vertical-align: middle;
}
.pack-price {
  margin-top: 1.3rem;
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.pack-per {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--muted);
}
.pack-setup {
  margin-top: 0.3rem;
  font-size: 0.74rem;
  line-height: 1.45;
  color: var(--muted);
}
.pack-cta {
  margin-top: 1.3rem;
  width: 100%;
  justify-content: center;
  padding: 0.7rem 1.4rem;
  font-size: 0.9rem;
}
.pack-note {
  margin-top: 2.2rem;
  text-align: center;
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--muted);
}
.pack-note a {
  color: var(--gold);
  font-weight: 600;
  white-space: nowrap;
}
@media (max-width: 980px) {
  .pack-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 560px) {
  .pack-grid {
    grid-template-columns: 1fr;
  }
}

/* ── Konfigurator: Live-Gesamtpreis in der Auswahl-Leiste ───────── */
.team-bar-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
}
.team-bar-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
}
.team-bar-total {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 0.2rem 0.8rem;
  font-variant-numeric: tabular-nums;
}
.team-bar-total[hidden] {
  display: none;
}
/* [hidden] muss die .btn-display-Regel schlagen (ID-Selektor gewinnt). */
#team-summary-open[hidden] {
  display: none;
}
.team-total-main {
  font-size: 1.2rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.team-total-per {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--muted);
}
.team-total-setup {
  font-size: 0.78rem;
  color: var(--muted);
}

/* ── Mitscrollende Auswahl-Leiste (sticky) ─────────────────────── */
.team-sticky {
  position: fixed;
  left: 50%;
  bottom: 1rem;
  z-index: 70;
  width: min(46rem, calc(100vw - 2rem));
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 10px 40px rgba(10, 20, 40, 0.16);
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 130%);
  transition: transform 0.35s var(--ease), opacity 0.35s var(--ease),
    visibility 0.35s;
}
.team-sticky.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}
.team-sticky-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.7rem 0.9rem 0.7rem 1.15rem;
}
.team-sticky-info {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  line-height: 1.3;
  font-variant-numeric: tabular-nums;
}
.team-sticky-count {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
}
.team-sticky-total {
  font-size: 0.98rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.team-sticky-setup {
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--muted);
}
.team-sticky-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}
.team-sticky .btn {
  padding: 0.55rem 0.95rem;
  font-size: 0.8rem;
}
@media (max-width: 559px) {
  .team-sticky {
    width: calc(100vw - 1rem);
    bottom: 0.5rem;
  }
  .team-sticky-inner {
    padding: 0.6rem 0.7rem;
    gap: 0.6rem;
  }
  .team-sticky-setup {
    display: none;
  }
  #sticky-summary-open {
    display: none;
  }
  .team-sticky .btn {
    padding: 0.5rem 0.8rem;
    font-size: 0.76rem;
  }
}
@media (prefers-reduced-motion: reduce) {
  .team-sticky {
    transition: opacity 0.2s linear, visibility 0.2s;
    transform: translate(-50%, 0);
  }
}

/* ── Zusammenfassungs-Modal (spiegelt .quiz) ───────────────────── */
.summary-modal {
  position: fixed;
  inset: 0;
  z-index: 85;
  background: var(--bg);
  display: flex;
  /* NICHT align-items:center — das ist die Flexbox-Overflow-Falle: Ist die Stage
     höher als der Viewport (viele Rollen gewählt), überläuft sie nach OBEN, und
     der übergelaufene Teil ist per Scroll nicht mehr erreichbar. Genau so waren
     Titel und CTA unsichtbar. flex-start + margin:auto auf der Stage zentriert
     bei kurzem Inhalt und scrollt sauber bei langem. */
  align-items: flex-start;
  justify-content: center;
  overflow-y: auto;
  /* NICHT "contain" — das verhindert nur das Scroll-CHAINING zum Dokument, erlaubt
     aber weiterhin den elastischen Bounce des Containers selbst. Auf macOS wandert
     dabei der visuelle Viewport, während dieses position:fixed-Modal am Layout-
     Viewport klebt: Es rutscht relativ zum Sichtbaren weg und gibt die Seite darunter
     frei — ohne dass sich seine Box, seine Deckkraft oder window.scrollY ändern.
     Genau deshalb sah in der Messung alles korrekt aus, während die Homepage
     durchschien. "none" schaltet den Bounce ab. */
  overscroll-behavior: none;
  -webkit-overflow-scrolling: touch;
  padding: 5rem 1.5rem 3rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s var(--ease), visibility 0.4s;
}
.summary-modal.is-open {
  opacity: 1;
  visibility: visible;
}
.summary-stage {
  width: 100%;
  max-width: 38rem;
  margin: auto;
  text-align: center;
}
/* Schliessen bleibt fixiert, damit er bei langer Liste immer erreichbar ist. */
.summary-modal .quiz-close {
  position: fixed;
}
@media (max-width: 759px) {
  .summary-modal {
    align-items: flex-start;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .summary-stage {
    margin-block: auto;
  }
}
.summary-title {
  font-size: clamp(1.5rem, 4vw, 2.1rem);
  margin-top: 0.3rem;
  color: var(--ink);
}
.summary-list {
  list-style: none;
  margin: 1.6rem 0 0;
  padding: 0;
  text-align: left;
}
.summary-list li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--line);
}
.summary-item-role {
  font-weight: 600;
  color: var(--ink);
}
.summary-item-price {
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  font-size: 0.9rem;
  white-space: nowrap;
}
.summary-item-price strong {
  color: var(--ink);
  font-weight: 700;
}
.summary-totals {
  margin-top: 1.5rem;
}
.summary-total-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.55rem 0;
  text-align: left;
}
.summary-total-row + .summary-total-row {
  border-top: 1px dashed var(--line);
}
.summary-total-label {
  color: var(--muted);
  font-size: 0.92rem;
}
.summary-total-val {
  font-weight: 800;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.summary-total-per {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--muted);
}
.summary-value-note {
  margin-top: 1.5rem;
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--muted);
}
.summary-fineprint {
  margin-top: 0.9rem;
  font-size: 0.72rem;
  color: var(--muted);
}

/* ── Bündel-Ersparnis (exakte Auswahl = ein Paket) ─────────────── */
/* Rabatt-Regel VOR der Auswahl (Option A). Führt bewusst mit der Einrichtung:
   der Monats-Rabatt ist klein (5%) und würde mehr versprechen, als er liefert —
   der Setup-Rabatt (bis 25%) ist der echte und hat eine sachliche Begründung
   (ein Onboarding statt vier). Eine Regel, die sich selbst erklärt, wirkt nicht
   wie ein Lockmittel. */
.team-rabatt-hint {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  max-width: 46rem;
  /* Zentriert unter der (ebenfalls zentrierten) Sektions-Einleitung — links
     angeschlagen wirkte der Block wie ein versehentlich stehengebliebener Zettel. */
  margin: 2.6rem auto 3rem;
  padding: 1rem 1.4rem;
  background: var(--gold-soft);
  border-left: 3px solid var(--gold);
  border-radius: var(--radius);
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--muted);
  text-align: left;
}
.team-rabatt-hint strong {
  color: var(--ink);
  font-weight: 600;
}
.gift-icon {
  flex: 0 0 auto;
  width: 1.05em;
  height: 1.05em;
  margin-top: 0.18em;
  color: var(--gold);
}
@media (max-width: 639px) {
  .team-rabatt-hint {
    margin-bottom: 1.8rem;
    font-size: 0.84rem;
  }
}

/* Betriebs-Rahmen: neutrale Zusicherung (nicht Gold wie der Rabatt), setzt den
   Vergleichsrahmen "betreuter Mitarbeiter" statt "Tool zum Selberbauen". */
.team-betrieb-hint {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  max-width: 46rem;
  margin: 1.6rem auto 0;
  padding: 1rem 1.4rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--muted);
  text-align: left;
}
.team-betrieb-hint strong {
  color: var(--ink);
  font-weight: 600;
}
.shield-icon {
  flex: 0 0 auto;
  width: 1.05em;
  height: 1.05em;
  margin-top: 0.18em;
  color: var(--gold);
}
@media (max-width: 639px) {
  .team-betrieb-hint {
    font-size: 0.84rem;
  }
}

/* ── Suite-Teaser (Homepage): 3 konkrete Mini-Agenten-Karten,
      jede verlinkt auf /suite. Spiegelt die agent-card-Optik verkleinert. */
.teaser-agents {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.2rem;
  max-width: 62rem;
  margin: 2.6rem auto 0;
}
.teaser-agent {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  padding: 1.5rem 1.4rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  text-decoration: none;
  transition: border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}
.teaser-agent:hover {
  border-color: var(--gold);
  transform: translateY(-3px);
  box-shadow: 0 18px 38px -24px rgba(185, 145, 47, 0.45);
}
.teaser-agent-role {
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.teaser-agent-what {
  font-size: 0.86rem;
  line-height: 1.55;
  color: var(--muted);
  flex: 1;
}
.teaser-agent-price {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--gold);
}
.teaser-ctas {
  justify-content: center;
  margin-top: 2.4rem;
}
/* Studio-Teaser: breites Abschluss-Band der Teaser-Sektion — der Zweitweg
   (massgeschneidert) mit echter Präsenz statt Fussnote. Ganze Karte klickbar. */
.teaser-studio {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.6rem;
  max-width: 62rem;
  margin: 2.2rem auto 0;
  padding: 1.6rem 1.8rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  text-decoration: none;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.teaser-studio:hover {
  border-color: var(--gold);
  box-shadow: 0 18px 38px -26px rgba(185, 145, 47, 0.4);
}
.teaser-studio-text {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.teaser-studio-title {
  font-size: 1.1rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.teaser-studio-sub {
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--muted);
  max-width: 38rem;
}
.teaser-studio-cta {
  flex: 0 0 auto;
  white-space: nowrap;
}
@media (max-width: 768px) {
  .teaser-studio {
    flex-direction: column;
    align-items: flex-start;
    padding: 1.3rem 1.3rem;
  }
}
/* ── Consent-Banner (schlafend bis zur ersten Pixel-ID in main.js) ── */
.consent-banner {
  position: fixed;
  left: 50%;
  bottom: 1.2rem;
  transform: translateX(-50%);
  z-index: 240;
  display: flex;
  align-items: center;
  gap: 1.4rem;
  width: min(94vw, 46rem);
  padding: 1.1rem 1.4rem;
  background: var(--navy);
  color: #f2f5fa;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius);
  box-shadow: 0 24px 60px -24px rgba(10, 20, 40, 0.55);
}
.consent-text {
  font-size: 0.85rem;
  line-height: 1.55;
  color: #c6cedb;
}
.consent-text strong {
  color: #f2f5fa;
}
.consent-text a {
  color: var(--gold);
  text-decoration: underline;
}
.consent-actions {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  flex: 0 0 auto;
}
.consent-actions .btn {
  padding: 0.55rem 1.1rem;
  font-size: 0.82rem;
  white-space: nowrap;
}
.consent-actions .btn-outline {
  color: #f2f5fa;
  border-color: rgba(255, 255, 255, 0.35);
}
.consent-settings-link {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  font-size: 0.8rem;
  color: var(--muted);
  cursor: pointer;
  text-decoration: underline;
}
@media (max-width: 639px) {
  .consent-banner {
    flex-direction: column;
    align-items: stretch;
    gap: 0.9rem;
    bottom: 0.8rem;
  }
  .consent-actions {
    flex-direction: row;
  }
  .consent-actions .btn {
    flex: 1;
  }
}

/* Dashboard-Zeiger in der Warum-Sektion: die Homepage erwähnt das Dashboard
   mehrfach im Text — hier bekommt das Versprechen sein Bild (Link → /suite). */
.why-dashboard {
  display: block;
  max-width: 46rem;
  margin: 2.4rem auto 0;
  text-decoration: none;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--card);
  transition: border-color 0.25s ease;
}
.why-dashboard:hover {
  border-color: var(--gold);
}
.why-dashboard img {
  display: block;
  width: 100%;
  height: auto;
}
.why-dashboard-caption {
  display: block;
  padding: 0.9rem 1.2rem;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--muted);
}

/* Trust-Schluss auf /suite: kompakte Vertrauensanker vor dem Kontakt. */
.suite-trust {
  padding-top: 0;
}
.suite-trust-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.2rem;
  max-width: 62rem;
  margin: 0 auto;
}
.suite-trust-item {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--muted);
}
.suite-trust-founder {
  margin-top: 1.6rem;
  text-align: center;
  font-size: 0.9rem;
  color: var(--muted);
}
.suite-trust-founder a {
  color: var(--gold);
  font-weight: 600;
  text-decoration: none;
}
.suite-trust-founder a:hover {
  text-decoration: underline;
}
@media (max-width: 768px) {
  .suite-trust-row {
    grid-template-columns: 1fr;
    gap: 0.8rem;
  }
}

/* Gabel-Köpfe im Ablauf sind Links auf /suite bzw. /manufaktur.
   Die Sub-Zeile ist DAUERHAFT gold (Link-Affordance ohne Hover) —
   grau-bis-Hover sah aus wie toter Text. */
.fork-lane-link {
  display: inline-block;
  text-decoration: none;
  color: inherit;
}
.fork-lane-link .fork-lane-sub {
  color: var(--gold);
}
.fork-lane-link:hover .fork-lane-sub {
  text-decoration: underline;
}
/* Kostenblock (gestrafft): zwei klickbare Weg-Karten statt 2×4 Preis-Duplikate —
   die vollen Preise leben kanonisch auf /suite (Konfigurator) und /manufaktur. */
.costs-grid-2 {
  max-width: 56rem;
  margin-left: auto;
  margin-right: auto;
}
@media (min-width: 960px) {
  /* Basis-Grid springt hier auf 4 Spalten — die 2 Weg-Karten bleiben 2. */
  .costs.costs .costs-grid-2 {
    grid-template-columns: repeat(2, 1fr);
  }
}
a.cost-card-way {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  text-decoration: none;
  text-align: left;
}
a.cost-card-way:hover {
  border-color: var(--gold);
}
.cost-card-way p {
  color: var(--muted);
}
.cost-card-way .cost-value {
  color: var(--ink);
}
.cost-card-way .cost-card-cta {
  margin-top: auto;
  padding-top: 0.4rem;
  font-weight: 600;
  color: var(--gold);
}
@media (max-width: 768px) {
  .teaser-agents {
    grid-template-columns: 1fr;
    gap: 0.9rem;
  }
  .teaser-agent {
    padding: 1.2rem 1.2rem;
  }
}

/* Kopf-Hinweise nebeneinander (Betrieb + Rabatt) statt gestapelt — spart Höhe
   vor den Karten. Boxen füllen die Grid-Spalte (eigene max-width/margin raus). */
.team-hints {
  max-width: 62rem;
  margin: 1.8rem auto 3rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  align-items: stretch;
}
.team-hints > .team-betrieb-hint,
.team-hints > .team-rabatt-hint {
  max-width: none;
  margin: 0;
}
@media (max-width: 768px) {
  .team-hints {
    grid-template-columns: 1fr;
    gap: 0.9rem;
    margin-bottom: 2rem;
  }
}

.team-bundle {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.82rem;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
}
.team-bundle[hidden] {
  display: none;
}
/* Nudge bei genau einer Rolle (Option B): derselbe Slot, gedämpfter Ton —
   er stupst, er feiert nicht. Ein Rabatt, den man noch nicht hat, darf nicht
   aussehen wie einer, den man schon bekommen hat. */
.team-bundle.is-nudge {
  color: var(--muted);
}
.team-bundle.is-nudge .gift-icon {
  color: var(--muted);
  opacity: 0.75;
}
.team-bundle .gift-icon,
.team-sticky-bundle .gift-icon {
  width: 1em;
  height: 1em;
  margin-top: 0;
}
.team-bundle-strike,
.summary-bundle-strike {
  text-decoration: line-through;
  color: var(--muted);
  font-weight: 400;
}
.team-sticky-bundle {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
}
.team-sticky-bundle.is-nudge {
  color: var(--muted);
  font-weight: 600;
}
.team-sticky-bundle[hidden] {
  display: none;
}
.summary-bundle {
  margin-top: 1.4rem;
  padding: 1rem 1.2rem;
  border: 1px solid var(--gold);
  background: var(--gold-soft);
  border-radius: 12px;
  text-align: center;
}
.summary-bundle[hidden] {
  display: none;
}
.summary-bundle-head {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.95rem;
  color: var(--ink);
}
.summary-bundle-head .gift-icon {
  width: 1.05em;
  height: 1.05em;
  margin-top: 0;
  color: var(--gold);
}
.summary-bundle-head strong {
  color: var(--gold);
}
.summary-bundle-price {
  margin-top: 0.3rem;
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.summary-bundle-strike {
  font-size: 0.85rem;
  margin-left: 0.4rem;
}
.summary-bundle-save {
  margin-top: 0.2rem;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--gold);
}
.summary-bundle-setup {
  margin-top: 0.15rem;
  font-size: 0.75rem;
  color: var(--muted);
}

/* ── Daten-Fundament (Agenten-Readiness) ─────────────────────────
   Eigene Sektion nach den 4 Dimensionen. Nutzt die Pakete-Muster
   (.pack-grid/.pack-card) mit 3 Spalten; dazu die Brücken-Karte im
   Preisblock und kleine Fundament-Zeiger in den Agenten-Karten. */
#fundament {
  scroll-margin-top: 6rem;
}
#fundament .pack-grid {
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 980px) {
  /* 3 Tiers: bei 2 Spalten hinge die dritte Karte allein — direkt stapeln */
  #fundament .pack-grid {
    grid-template-columns: 1fr;
  }
}
.fundament-note {
  margin-top: 2.2rem;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.2rem;
}
.fundament-note p {
  margin: 0;
  padding: 1.1rem 1.3rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: 0.92rem;
  line-height: 1.65;
  color: var(--muted);
}
.fundament-note strong {
  color: var(--ink);
}
@media (max-width: 759px) {
  .fundament-note {
    grid-template-columns: 1fr;
  }
}

/* Optionaler Baustein am Fundament: Preiskatalog-Aufbau (Offerte-Ersteller).
   Gold-akzentuiert, getrennt vom Fundament-Festpreis. */
.fundament-baustein {
  /* Pflicht: das Element ist ein <label> (klickbare Karte) und damit per Default
     display:inline. Ein Inline-Element kann Hintergrund, Rahmen und vertikales
     Padding nicht als geschlossene Box tragen — der Gold-Rand erschien nur am
     ersten Zeilenfragment. Die Tier-Kacheln daneben entgehen dem nur, weil sie
     Grid-Items sind und dadurch automatisch blockifiziert werden. */
  display: block;
  margin-top: 1.8rem;
  padding: 1.3rem 1.5rem;
  background: var(--gold-soft);
  border: 1px solid var(--line);
  border-left: 3px solid var(--gold);
  border-radius: var(--radius);
}
.baustein-label {
  margin: 0 0 0.3rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold);
}
.baustein-title {
  margin: 0 0 0.5rem;
  font-size: 1.1rem;
  color: var(--ink);
}
.baustein-desc {
  margin: 0 0 0.8rem;
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--muted);
}
.baustein-tiers {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.6rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.92rem;
  color: var(--muted);
}
.baustein-tiers strong {
  color: var(--ink);
}

/* ── Fundament-Auswahl: Kacheln + Baustein sind Labels mit verstecktem Input
   (Radios = XOR-Stufe, Checkbox = Baustein), Auswahl-Optik wie bei den Agenten. */
.fundament-check {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
  pointer-events: none;
}
label.pack-card,
.fundament-baustein {
  cursor: pointer;
  user-select: none;
}
.pack-card.is-selected,
.fundament-baustein.is-selected {
  border-color: var(--gold);
  box-shadow: inset 0 0 0 1px var(--gold);
}
.fundament-baustein.is-selected {
  background: var(--gold-soft);
}
.pack-card:has(.fundament-check:focus-visible),
.fundament-baustein:has(.fundament-check:focus-visible) {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}
.pack-choose {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-top: 1.2rem;
  padding: 0.6rem 1rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  transition: background 0.2s var(--ease), border-color 0.2s var(--ease),
    color 0.2s var(--ease);
}
/* Team-Kacheln sind Artikel (kein Input): der Button trägt die Auswahl. */
.team-choose:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}
.pack-choose-on {
  display: none;
}
.is-selected .pack-choose {
  background: var(--gold);
  border-color: var(--gold);
  color: #fff;
}
.is-selected .pack-choose-off {
  display: none;
}
.is-selected .pack-choose-on {
  display: inline;
}

/* Bar/Sticky: Einmalig-Zeile (Fundament/Baustein), getrennt vom Monatlichen. */
.team-einmalig {
  margin: 0.15rem 0 0;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--gold);
}
.team-sticky-einmalig {
  color: var(--gold);
}

/* Zusammenfassung: eigener „Einmalige Projekte"-Block. */
.summary-einmalig {
  margin-top: 1.4rem;
  padding-top: 1.2rem;
  border-top: 1px dashed var(--line);
}
.summary-einmalig-head {
  margin: 0 0 0.6rem;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gold);
}
.summary-einmalig-list {
  list-style: none;
  margin: 0 0 0.6rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.summary-einmalig-list li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.95rem;
}
.summary-einmalig-note {
  margin: 0.6rem 0 0;
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--muted);
}

/* Brücken-Karte im Preisblock: gilt für beide Wege, rechnet nie mit */
.cost-bridge {
  margin: 1.6rem 0 2.4rem;
  padding: 1.1rem 1.4rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-left: 3px solid var(--gold);
  border-radius: var(--radius);
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--muted);
}
.cost-bridge strong {
  color: var(--ink);
}
.cost-bridge a {
  color: var(--gold);
  font-weight: 600;
}
.cost-bridge a:hover {
  text-decoration: underline;
}

/* Fundament-Zeiger in den Agenten-Karten (bewusst ohne Preis) */
.agent-fundament {
  margin-top: 0.55rem;
  font-size: 0.78rem;
  line-height: 1.4;
}
.agent-fundament a {
  color: var(--gold);
  font-weight: 600;
  text-decoration: none;
}
.agent-fundament a:hover {
  text-decoration: underline;
}

/* ════ Agenten-Detail-Modal ("Mehr erfahren" pro Karte) ════════════
   Nutzt die .summary-modal-Shell (flex-start + overflow-y, siehe dort);
   hier nur die Detail-Stage, der Schritt-Flow und der Karten-Trigger. */

/* Trigger in der Karte: dezenter Text-Button unter dem Auswahl-Pill.
   Sitzt in einem <label> um eine Checkbox — das Klick-Handling (preventDefault
   + stopPropagation) übernimmt initAgentDetails(), sonst togglet der Klick
   die Auswahl. */
.agent-more {
  margin-top: 0.65rem;
  padding: 0;
  border: none;
  background: none;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--gold);
  cursor: pointer;
  text-align: center;
  transition: color 0.2s var(--ease);
}
.agent-more:hover {
  text-decoration: underline;
}
.agent-more:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Stage: breiter als die Zusammenfassung, Fliesstext linksbündig,
   Kopf bleibt zentriert. */
.agent-detail-stage {
  max-width: 42rem;
  text-align: left;
}
.ad-head {
  text-align: center;
}
.ad-pitch {
  margin: 1rem auto 0;
  max-width: 34rem;
  font-size: 1.02rem;
  line-height: 1.6;
  color: var(--ink-soft);
}
.ad-section {
  margin-top: 2rem;
}
.ad-h {
  margin: 0 0 0.55rem;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--gold);
}
.ad-section p {
  margin: 0;
  font-size: 0.94rem;
  line-height: 1.65;
  color: var(--ink-soft);
}
.ad-beleg {
  margin-top: 0.7rem !important;
  padding-top: 0.7rem;
  border-top: 1px dashed var(--line);
  font-size: 0.84rem !important;
  color: var(--muted) !important;
}
.ad-selbst {
  padding: 1rem 1.2rem;
  background: var(--gold-soft);
  border: 1px solid rgba(185, 145, 47, 0.3);
  border-radius: var(--radius);
}
.ad-limits {
  list-style: none;
  margin: 0;
  padding: 0;
}
.ad-limits li {
  position: relative;
  padding: 0.3rem 0 0.3rem 1.1rem;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--muted);
}
.ad-limits li::before {
  content: "·";
  position: absolute;
  left: 0.2rem;
  color: var(--gold);
  font-weight: 800;
}

/* Schritt-Flow: nummerierte Gold-Punkte an einer wachsenden Linie.
   Desktop horizontal, ≤640px vertikal. Animation nur bei erlaubter Motion;
   unter reduced-motion steht alles sofort. */
.ad-flow {
  --ad-dot: 1.9rem;
  list-style: none;
  counter-reset: adstep;
  margin: 1.1rem 0 0;
  padding: 0;
  display: flex;
  gap: 0.8rem;
  position: relative;
}
.ad-flow::before {
  content: "";
  position: absolute;
  top: calc(var(--ad-dot) / 2);
  left: 5%;
  right: 5%;
  height: 2px;
  background: var(--gold);
  opacity: 0.45;
  transform-origin: left center;
}
.ad-step {
  counter-increment: adstep;
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
}
.ad-step-dot {
  width: var(--ad-dot);
  height: var(--ad-dot);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--gold);
  border-radius: 50%;
  background: var(--card);
  color: var(--gold);
  font-size: 0.72rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  z-index: 1;
}
.ad-step-dot::before {
  content: "0" counter(adstep);
}
.ad-step-label {
  margin-top: 0.55rem;
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--ink-soft);
  overflow-wrap: break-word;
  max-width: 100%;
}
@media (max-width: 640px) {
  .ad-flow {
    flex-direction: column;
    gap: 1rem;
    padding-left: 0.2rem;
  }
  .ad-flow::before {
    top: 5%;
    bottom: 5%;
    left: calc(0.2rem + var(--ad-dot) / 2);
    right: auto;
    width: 2px;
    height: auto;
    transform-origin: center top;
  }
  .ad-step {
    flex-direction: row;
    align-items: center;
    text-align: left;
    gap: 0.8rem;
  }
  .ad-step-label {
    margin-top: 0;
  }
}
@media (prefers-reduced-motion: no-preference) {
  .agent-detail .ad-flow::before {
    transform: scaleX(0);
    transition: transform 0.7s var(--ease) 0.15s;
  }
  .agent-detail.is-open .ad-flow::before {
    transform: scaleX(1);
  }
  .agent-detail .ad-step {
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.45s var(--ease), transform 0.45s var(--ease);
    transition-delay: calc(0.2s + var(--i, 0) * 0.14s);
  }
  .agent-detail.is-open .ad-step {
    opacity: 1;
    transform: none;
  }
  @media (max-width: 640px) {
    .agent-detail .ad-flow::before {
      transform: scaleY(0);
      transition: transform 0.7s var(--ease) 0.15s;
    }
    .agent-detail.is-open .ad-flow::before {
      transform: scaleY(1);
    }
  }
}

/* Preisblock: Live-Werte aus der Karte (kein eigener Preis-Datensatz) */
.ad-pricebox {
  margin-top: 2.2rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--line);
  text-align: center;
}
.ad-price {
  margin: 0;
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.ad-setup {
  margin: 0.25rem 0 0;
  font-size: 0.78rem;
  color: var(--muted);
}
.ad-bundle {
  margin: 0.7rem 0 0;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--gold);
}
.ad-ctas {
  margin-top: 1.6rem;
  justify-content: center;
}
.agent-detail .summary-fineprint {
  text-align: center;
}
#ad-select.is-on {
  background: var(--gold);
  border-color: var(--gold);
}
/* [hidden] muss eigene display-Regeln schlagen (gleiche Falle wie bei .btn,
   siehe Kommentar dort): sonst zeigt der Auswahl-CTA bei Soon-Agenten. */
#ad-select[hidden] {
  display: none;
}