/* ==========================================================================
   Der GEO-Effekt - geo-effekt.de
   Design-System: Navy + Gold (aus dem Marken-Logo abgeleitet)
   Typo: Space Grotesk (Headings) / DM Sans (Body)
   Aufbau: Tokens -> Basis -> Layout -> Komponenten -> Sektionen -> Responsive
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design-Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Marke (Werte stammen aus den Logo-SVGs) */
  --c-navy: #0e2240;
  --c-navy-deep: #081628;
  --c-navy-soft: #1a3358;
  --c-navy-line: #24406b;
  --c-gold: #c9a24b;
  --c-gold-bright: #e2bd6e;
  --c-cream: #f5f1e8;

  /* Flächen und Text */
  --c-surface: #ffffff;
  --c-surface-alt: var(--c-cream);
  --c-ink: #0b1524;
  --c-ink-soft: #4c5c72;
  --c-line: #e3ddd0;

  /* Semantik */
  --c-bad: #cf4136;
  --c-good: #2b9f68;

  /* Auf dunklem Grund */
  --c-on-dark: #f2f5fa;
  --c-on-dark-soft: #9fb2cc;

  /* Typografie */
  --font-head: "Space Grotesk", "Segoe UI", system-ui, sans-serif;
  --font-body: "DM Sans", "Segoe UI", system-ui, sans-serif;

  /* Abstände (spacious scale) */
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;

  /* Form */
  --radius-sm: 8px;
  --radius: 14px;
  --radius-lg: 22px;
  --shadow-sm: 0 2px 8px rgba(11, 21, 36, 0.06);
  --shadow: 0 12px 32px rgba(11, 21, 36, 0.1);
  --shadow-lg: 0 28px 64px rgba(8, 22, 40, 0.22);

  /* Motion-Tokens: kurze Distanz schnell, Sektionen langsamer */
  --t-fast: 160ms;
  --t-base: 240ms;
  --t-slow: 620ms;
  --ease-out: cubic-bezier(0.22, 0.68, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.4, 0.56, 1);

  --container: 1160px;
  --z-header: 100;
}

/* --------------------------------------------------------------------------
   2. Basis
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  /* Sticky Header darf Sprungziele nicht verdecken */
  scroll-padding-top: 96px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--c-surface);
  color: var(--c-ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  overflow-wrap: anywhere;
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-head);
  line-height: 1.12;
  letter-spacing: -0.02em;
  margin: 0 0 var(--space-4);
  text-wrap: balance;
}

h1 {
  font-size: clamp(2.2rem, 5.2vw, 3.9rem);
  font-weight: 700;
}
h2 {
  font-size: clamp(1.75rem, 3.6vw, 2.7rem);
  font-weight: 700;
}
h3 {
  font-size: clamp(1.15rem, 1.8vw, 1.4rem);
  font-weight: 600;
}

p {
  margin: 0 0 var(--space-4);
  max-width: 68ch;
}

a {
  color: inherit;
}

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

/* Sichtbarer Fokus, nie entfernen */
:focus-visible {
  outline: 3px solid var(--c-gold);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip-link {
  position: absolute;
  left: var(--space-4);
  top: -100px;
  z-index: 999;
  background: var(--c-gold);
  color: var(--c-navy);
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-sm);
  font-weight: 600;
  transition: top var(--t-base) var(--ease-out);
}
.skip-link:focus {
  top: var(--space-4);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

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

.section {
  padding-block: var(--space-24);
}

.section--tight {
  padding-block: var(--space-16);
}

.section--dark {
  background: var(--c-navy);
  color: var(--c-on-dark);
}
.section--dark p {
  color: var(--c-on-dark-soft);
}

.section--cream {
  background: var(--c-surface-alt);
}

.section-head {
  max-width: 62ch;
  margin-bottom: var(--space-12);
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-head);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--c-gold);
  margin-bottom: var(--space-4);
}
.eyebrow::before {
  content: "";
  width: 26px;
  height: 2px;
  background: var(--c-gold);
  flex: none;
}

.lead {
  font-size: clamp(1.05rem, 1.5vw, 1.22rem);
  color: var(--c-ink-soft);
}
.section--dark .lead {
  color: var(--c-on-dark-soft);
}

/* --------------------------------------------------------------------------
   4. Buttons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  /* 48px Höhe: über dem 44px-Mindestmaß für Touch */
  min-height: 52px;
  padding: var(--space-3) var(--space-8);
  border: 2px solid transparent;
  border-radius: 999px;
  font-family: var(--font-head);
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  touch-action: manipulation;
  transition: background var(--t-base) var(--ease-out),
    border-color var(--t-base) var(--ease-out),
    color var(--t-base) var(--ease-out),
    transform var(--t-fast) var(--ease-out),
    box-shadow var(--t-base) var(--ease-out);
}

.btn--primary {
  background: var(--c-gold);
  color: var(--c-navy);
  box-shadow: 0 8px 22px rgba(201, 162, 75, 0.32);
}
.btn--primary:hover {
  background: var(--c-gold-bright);
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(201, 162, 75, 0.42);
}
.btn--primary:active {
  transform: translateY(0) scale(0.985);
}

.btn--ghost {
  border-color: var(--c-navy-line);
  color: var(--c-on-dark);
}
.btn--ghost:hover {
  border-color: var(--c-gold);
  color: var(--c-gold);
}

.btn--outline {
  border-color: var(--c-navy);
  color: var(--c-navy);
}
.btn--outline:hover {
  background: var(--c-navy);
  color: var(--c-cream);
}

.btn[disabled],
.btn[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  align-items: center;
}

/* --------------------------------------------------------------------------
   5. Header
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: rgba(14, 34, 64, 0.86);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
  transition: background var(--t-base) var(--ease-out),
    padding var(--t-base) var(--ease-out);
}
.site-header[data-scrolled="true"] {
  background: rgba(8, 22, 40, 0.96);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  min-height: 74px;
  padding-block: var(--space-3);
}

.site-header__logo {
  display: inline-flex;
  align-items: center;
  flex: none;
  /* Bild ist 34px hoch, die Tastfläche muss 44px erreichen */
  min-height: 44px;
}
.site-header__logo img {
  height: 34px;
  width: auto;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: var(--space-8);
}
.site-nav a {
  color: var(--c-on-dark-soft);
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 500;
  padding: var(--space-2) 0;
  position: relative;
  transition: color var(--t-base) var(--ease-out);
}
.site-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: var(--c-gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t-base) var(--ease-out);
}
.site-nav a:hover,
.site-nav a[aria-current="page"] {
  color: var(--c-on-dark);
}
.site-nav a:hover::after,
.site-nav a[aria-current="page"]::after {
  transform: scaleX(1);
}

.site-header .btn {
  min-height: 44px;
  padding-inline: var(--space-6);
  font-size: 0.93rem;
}

/* Menü-Knopf: erscheint erst, wenn die Leiste zu schmal wird */
.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  flex: none;
  background: transparent;
  border: 1px solid var(--c-navy-line);
  border-radius: var(--radius-sm);
  color: var(--c-on-dark);
  cursor: pointer;
  touch-action: manipulation;
  transition: border-color var(--t-base) var(--ease-out),
    color var(--t-base) var(--ease-out);
}
.nav-toggle:hover {
  border-color: var(--c-gold);
  color: var(--c-gold);
}
.nav-toggle svg {
  width: 22px;
  height: 22px;
}
/* Zwei Symbole im Knopf, je nach Zustand ist eines sichtbar */
.nav-toggle .icon-close {
  display: none;
}
.nav-toggle[aria-expanded="true"] .icon-open {
  display: none;
}
.nav-toggle[aria-expanded="true"] .icon-close {
  display: block;
}

/* --------------------------------------------------------------------------
   6. Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  background: var(--c-navy);
  color: var(--c-on-dark);
  overflow: hidden;
  padding-block: var(--space-24) var(--space-24);
}

/* Weiches Licht hinter dem Chat-Fenster, rein dekorativ */
.hero::before {
  content: "";
  position: absolute;
  top: -25%;
  right: -12%;
  width: 780px;
  height: 780px;
  background: radial-gradient(
    circle,
    rgba(201, 162, 75, 0.2) 0%,
    rgba(201, 162, 75, 0) 62%
  );
  pointer-events: none;
}

.hero__grid {
  position: relative;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: var(--space-16);
  align-items: center;
}

.hero h1 {
  margin-bottom: var(--space-6);
}
.hero h1 .accent,
.hero .wie-h1 .accent {
  color: var(--c-gold);
  /* Unterstrich zeichnet sich beim Laden ein */
  background-image: linear-gradient(var(--c-gold), var(--c-gold));
  background-repeat: no-repeat;
  background-position: 0 92%;
  background-size: 0% 3px;
  animation: underline-draw 900ms var(--ease-out) 700ms forwards;
}
@keyframes underline-draw {
  to {
    background-size: 100% 3px;
  }
}

.hero__sub {
  font-size: clamp(1.05rem, 1.6vw, 1.24rem);
  color: var(--c-on-dark-soft);
  margin-bottom: var(--space-8);
}

.hero__proof {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6) var(--space-8);
  margin-top: var(--space-12);
  padding-top: var(--space-6);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.hero__proof-item {
  display: flex;
  flex-direction: column;
}
.hero__proof-num {
  font-family: var(--font-head);
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--c-gold);
  /* Ziffern springen beim Zählen nicht */
  font-variant-numeric: tabular-nums;
}
.hero__proof-label {
  font-size: 0.86rem;
  color: var(--c-on-dark-soft);
}

/* --------------------------------------------------------------------------
   7. Chat-Animation (nachgebautes ChatGPT-UI, keine echte API)
   -------------------------------------------------------------------------- */
.chat {
  background: #10192b;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.chat__bar {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  background: rgba(255, 255, 255, 0.04);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.chat__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  flex: none;
}
.chat__title {
  margin-left: var(--space-2);
  font-size: 0.8rem;
  color: var(--c-on-dark-soft);
  letter-spacing: 0.02em;
}

.chat__body {
  padding: var(--space-6);
  /* Reservierte Höhe verhindert Springen beim Eintippen (CLS) */
  min-height: 362px;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.chat__msg {
  display: flex;
  gap: var(--space-3);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity var(--t-slow) var(--ease-out),
    transform var(--t-slow) var(--ease-out);
}
.chat__msg[data-visible="true"] {
  opacity: 1;
  transform: none;
}

.chat__avatar {
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--font-head);
  font-size: 0.72rem;
  font-weight: 700;
}
.chat__avatar--user {
  background: rgba(255, 255, 255, 0.14);
  color: var(--c-on-dark);
}
.chat__avatar--ai {
  background: var(--c-gold);
  color: var(--c-navy);
}

.chat__text {
  font-size: 0.97rem;
  line-height: 1.6;
  color: var(--c-on-dark);
  margin: 0;
  max-width: none;
}
.chat__text .muted {
  color: var(--c-on-dark-soft);
}

/* Blinkender Schreib-Cursor während des Tippens */
.chat__cursor {
  display: inline-block;
  width: 8px;
  height: 1.05em;
  margin-left: 2px;
  vertical-align: text-bottom;
  background: var(--c-gold);
  animation: caret 1s steps(2, start) infinite;
}
@keyframes caret {
  50% {
    opacity: 0;
  }
}

/* Die Trefferliste, die ChatGPT "nennt" */
.chat__list {
  list-style: none;
  margin: var(--space-3) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.chat__list li {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid transparent;
  font-size: 0.9rem;
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity 420ms var(--ease-out), transform 420ms var(--ease-out),
    background 420ms var(--ease-out), border-color 420ms var(--ease-out);
}
.chat__list li[data-visible="true"] {
  opacity: 1;
  transform: none;
}
.chat__list li[data-you="true"] {
  background: rgba(201, 162, 75, 0.16);
  border-color: var(--c-gold);
  color: var(--c-on-dark);
}
.chat__rank {
  font-family: var(--font-head);
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--c-on-dark-soft);
  flex: none;
  width: 18px;
}
.chat__list li[data-you="true"] .chat__rank {
  color: var(--c-gold);
}
.chat__tag {
  margin-left: auto;
  flex: none;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-navy);
  background: var(--c-gold);
  padding: 3px 9px;
  border-radius: 999px;
}

.chat__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-6) var(--space-6);
}
.chat__hint {
  font-size: 0.8rem;
  color: var(--c-on-dark-soft);
  margin: 0;
}
.chat__replay {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  padding: var(--space-2) var(--space-4);
  background: transparent;
  border: 1px solid var(--c-navy-line);
  border-radius: 999px;
  color: var(--c-on-dark-soft);
  font-family: var(--font-body);
  font-size: 0.84rem;
  cursor: pointer;
  touch-action: manipulation;
  transition: color var(--t-base) var(--ease-out),
    border-color var(--t-base) var(--ease-out);
}
.chat__replay:hover {
  color: var(--c-gold);
  border-color: var(--c-gold);
}

/* --------------------------------------------------------------------------
   8. Problem-Sektion
   -------------------------------------------------------------------------- */
.problem-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--space-6);
}

.problem-card {
  padding: var(--space-8);
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  transition: transform var(--t-base) var(--ease-out),
    box-shadow var(--t-base) var(--ease-out);
}
.problem-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow);
}
.problem-card__icon {
  width: 40px;
  height: 40px;
  margin-bottom: var(--space-4);
  color: var(--c-bad);
}
.problem-card h3 {
  margin-bottom: var(--space-2);
}
.problem-card p {
  margin: 0;
  color: var(--c-ink-soft);
  font-size: 0.97rem;
}

/* --------------------------------------------------------------------------
   9. SEO vs GEO
   -------------------------------------------------------------------------- */
.compare {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: var(--space-8);
  align-items: stretch;
}

.compare__card {
  padding: var(--space-8);
  border-radius: var(--radius);
  border: 1px solid var(--c-line);
  background: var(--c-surface);
}
.compare__card--geo {
  border-color: var(--c-gold);
  background: linear-gradient(
    180deg,
    rgba(201, 162, 75, 0.09) 0%,
    rgba(255, 255, 255, 1) 55%
  );
  box-shadow: var(--shadow);
}
.compare__label {
  font-family: var(--font-head);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-ink-soft);
  margin-bottom: var(--space-3);
}
.compare__card--geo .compare__label {
  color: var(--c-gold);
}
.compare__card h3 {
  margin-bottom: var(--space-4);
}
.compare__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.compare__list li {
  display: flex;
  gap: var(--space-3);
  font-size: 0.97rem;
  color: var(--c-ink-soft);
}
.compare__list svg {
  flex: none;
  width: 20px;
  height: 20px;
  margin-top: 3px;
  color: var(--c-gold);
}
.compare__plus {
  display: grid;
  place-items: center;
  font-family: var(--font-head);
  font-size: 1.7rem;
  font-weight: 700;
  color: var(--c-ink-soft);
}

/* --------------------------------------------------------------------------
   10. Case Study / Testimonials
   -------------------------------------------------------------------------- */
.case {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: var(--space-16);
  align-items: center;
}

.case__quote {
  font-family: var(--font-head);
  font-size: clamp(1.35rem, 2.6vw, 1.95rem);
  font-weight: 500;
  line-height: 1.38;
  color: var(--c-on-dark);
  margin: 0 0 var(--space-6);
  max-width: 22ch;
  text-wrap: balance;
}
.case__quote::before {
  content: "\201E";
  color: var(--c-gold);
}
.case__quote::after {
  content: "\201C";
  color: var(--c-gold);
}
.case__person {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}
.case__avatar {
  width: 48px;
  height: 48px;
  flex: none;
  border-radius: 50%;
  background: var(--c-gold);
  color: var(--c-navy);
  display: grid;
  place-items: center;
  font-family: var(--font-head);
  font-weight: 700;
}
.case__name {
  font-weight: 600;
  color: var(--c-on-dark);
}
.case__role {
  font-size: 0.88rem;
  color: var(--c-on-dark-soft);
}

.case__stats {
  display: grid;
  gap: var(--space-4);
}
.stat-card {
  padding: var(--space-6);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.11);
}
.stat-card__num {
  font-family: var(--font-head);
  font-size: 2rem;
  font-weight: 700;
  color: var(--c-gold);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.stat-card__label {
  font-size: 0.9rem;
  color: var(--c-on-dark-soft);
}

.voices {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-6);
  margin-top: var(--space-16);
}
.voice {
  display: flex;
  flex-direction: column;
  padding: var(--space-6);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.voice p {
  font-size: 0.95rem;
  color: var(--c-on-dark-soft);
  margin-bottom: var(--space-6);
}
/* Person steht unten, auch wenn die Zitate unterschiedlich lang sind */
.voice__person {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: auto;
}
.voice__name {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--c-on-dark);
}
.voice__role {
  font-size: 0.82rem;
  color: var(--c-on-dark-soft);
}

/* --------------------------------------------------------------------------
   10b. Porträts

   Ein Bild statt der Initialen. Die Maße bleiben gleich, damit sich
   nichts verschiebt, wenn für jemanden mal kein Foto vorliegt.
   -------------------------------------------------------------------------- */
.portrait {
  flex: none;
  border-radius: 50%;
  object-fit: cover;
  /* Bildausschnitt sitzt auf dem Gesicht, oberer Bereich zählt mehr */
  object-position: 50% 35%;
  background: rgba(255, 255, 255, 0.08);
}
.portrait--sm {
  width: 44px;
  height: 44px;
}
.portrait--md {
  width: 56px;
  height: 56px;
  border: 2px solid rgba(201, 162, 75, 0.4);
}
.portrait--lg {
  width: 72px;
  height: 72px;
  border: 2px solid var(--c-gold);
}

/* --------------------------------------------------------------------------
   11. GEO-Score-Sektion mit Counter
   -------------------------------------------------------------------------- */
.score {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: var(--space-16);
  align-items: center;
}

.score__dial {
  position: relative;
  width: min(300px, 100%);
  margin-inline: auto;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
}
.score__ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}
.score__track {
  fill: none;
  stroke: var(--c-line);
  stroke-width: 12;
}
.score__value {
  fill: none;
  stroke: var(--c-bad);
  stroke-width: 12;
  stroke-linecap: round;
  /* Umfang bei r=86: 2*pi*86 = 540.35 */
  stroke-dasharray: 540.35;
  stroke-dashoffset: 540.35;
  transition: stroke 900ms var(--ease-out);
}
.score__readout {
  position: relative;
  text-align: center;
}
.score__num {
  display: block;
  font-family: var(--font-head);
  font-size: 4.2rem;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--c-bad);
  transition: color 900ms var(--ease-out);
}
.score__num[data-state="good"] {
  color: var(--c-good);
}
.score__caption {
  display: block;
  font-size: 0.86rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-ink-soft);
  margin-top: var(--space-2);
}
.score__state {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-4);
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 0.84rem;
  font-weight: 600;
  background: rgba(207, 65, 54, 0.12);
  color: var(--c-bad);
  transition: background 900ms var(--ease-out), color 900ms var(--ease-out);
}
.score__state[data-state="good"] {
  background: rgba(43, 159, 104, 0.14);
  color: var(--c-good);
}
.score__state svg {
  width: 16px;
  height: 16px;
}

/* --------------------------------------------------------------------------
   12. Formular
   -------------------------------------------------------------------------- */
.signup {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-16);
  align-items: start;
}

.form-card {
  padding: var(--space-8);
  background: var(--c-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  color: var(--c-ink);
}
.form-card h3 {
  margin-bottom: var(--space-2);
}
.form-card > p {
  color: var(--c-ink-soft);
  font-size: 0.94rem;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: var(--space-4);
}
.field label {
  font-size: 0.9rem;
  font-weight: 600;
}
.field .req {
  color: var(--c-bad);
}
.field input {
  /* 52px: komfortabel für Touch, verhindert iOS-Auto-Zoom durch 16px+ */
  min-height: 52px;
  padding: 0 var(--space-4);
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--c-ink);
  background: var(--c-surface);
  border: 1.5px solid var(--c-line);
  border-radius: var(--radius-sm);
  transition: border-color var(--t-base) var(--ease-out),
    box-shadow var(--t-base) var(--ease-out);
}
.field input:hover {
  border-color: #c8c0ad;
}
.field input:focus {
  border-color: var(--c-gold);
  box-shadow: 0 0 0 3px rgba(201, 162, 75, 0.22);
  outline: none;
}
.field input[aria-invalid="true"] {
  border-color: var(--c-bad);
}
.field__hint {
  font-size: 0.82rem;
  color: var(--c-ink-soft);
}
.field__error {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--c-bad);
  min-height: 0;
}
.field__error:empty {
  display: none;
}

.form-card .btn {
  width: 100%;
}

/* --------------------------------------------------------------------------
   12b. Einwilligung

   Bewusst nicht vorausgewählt: Eine Einwilligung muss aktiv erteilt
   werden, ein voreingestelltes Häkchen ist keine.
   -------------------------------------------------------------------------- */
.einwilligung {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
  cursor: pointer;
}
.einwilligung input {
  flex: none;
  /* 22px plus Innenabstand ergibt eine bequem treffbare Fläche */
  width: 22px;
  height: 22px;
  margin: 2px 0 0;
  accent-color: var(--c-gold);
  cursor: pointer;
}
.einwilligung span {
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--c-ink-soft);
}
.einwilligung .req {
  color: var(--c-bad);
}
.einwilligung input[aria-invalid="true"] {
  outline: 2px solid var(--c-bad);
  outline-offset: 2px;
}
/* Die Fläche zum Antippen umfasst den ganzen Text, nicht nur das Kästchen */
.einwilligung:hover span {
  color: var(--c-ink);
}

.form-note {
  font-size: 0.8rem;
  color: var(--c-ink-soft);
  margin: var(--space-4) 0 0;
}

/* Statusmeldung unter dem Formular, kein Seiten-Reload */
.form-status {
  margin-top: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  font-size: 0.92rem;
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
}
.form-status:empty {
  display: none;
}
.form-status[data-tone="error"] {
  background: rgba(207, 65, 54, 0.1);
  color: #9d2f27;
}
.form-status[data-tone="success"] {
  background: rgba(43, 159, 104, 0.12);
  color: #1d7049;
}

/* Ladezustand des Buttons */
.btn__spinner {
  width: 17px;
  height: 17px;
  border: 2px solid rgba(14, 34, 64, 0.3);
  border-top-color: var(--c-navy);
  border-radius: 50%;
  animation: spin 700ms linear infinite;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.checklist {
  list-style: none;
  margin: var(--space-6) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.checklist li {
  display: flex;
  gap: var(--space-3);
  font-size: 1rem;
}
.checklist svg {
  flex: none;
  width: 21px;
  height: 21px;
  margin-top: 3px;
  color: var(--c-gold);
}

.meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: 1px solid rgba(255, 255, 255, 0.13);
}
.meta-row div {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 0.92rem;
  color: var(--c-on-dark-soft);
}
.meta-row svg {
  width: 18px;
  height: 18px;
  color: var(--c-gold);
  flex: none;
}

/* --------------------------------------------------------------------------
   13. Kurs-CTA
   -------------------------------------------------------------------------- */
.offer {
  max-width: 720px;
  margin-inline: auto;
  text-align: center;
  padding: var(--space-16) var(--space-8);
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}
.offer__price {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
}
.offer__old {
  font-size: 1.3rem;
  color: var(--c-ink-soft);
  text-decoration: line-through;
}
.offer__new {
  font-family: var(--font-head);
  font-size: 3rem;
  font-weight: 700;
  color: var(--c-navy);
  font-variant-numeric: tabular-nums;
}
.offer .checklist {
  max-width: 420px;
  margin-inline: auto;
  text-align: left;
  margin-bottom: var(--space-8);
}
.offer p {
  margin-inline: auto;
}

/* --------------------------------------------------------------------------
   14. Footer
   -------------------------------------------------------------------------- */
.site-footer {
  background: var(--c-navy-deep);
  color: var(--c-on-dark-soft);
  padding-block: var(--space-16) var(--space-8);
  font-size: 0.92rem;
}
.site-footer__top {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-8);
  padding-bottom: var(--space-8);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.site-footer__logo img {
  height: 32px;
  width: auto;
}
.site-footer nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-6);
}
.site-footer a {
  color: var(--c-on-dark-soft);
  text-decoration: none;
  transition: color var(--t-base) var(--ease-out);
}
/* Nur die Navigationslinks: volle Tastfläche. Links im Fließtext
   der Rechtszeile bleiben inline, dort gilt die Ausnahme. */
.site-footer nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.site-footer a:hover {
  color: var(--c-gold);
}
.site-footer__legal {
  padding-top: var(--space-6);
  font-size: 0.82rem;
  line-height: 1.6;
}
.site-footer__legal p {
  max-width: none;
  color: rgba(159, 178, 204, 0.75);
}

/* --------------------------------------------------------------------------
   15. Video-Seite (Kurzanleitung)
   -------------------------------------------------------------------------- */
.video-frame {
  position: relative;
  /* Platz vorab reservieren, damit beim Laden nichts springt */
  aspect-ratio: 16 / 9;
  background: #0b1524;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  display: grid;
  place-items: center;
  text-align: center;
  padding: var(--space-8);
}
.video-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.video-frame__placeholder svg {
  width: 60px;
  height: 60px;
  color: var(--c-gold);
  margin-bottom: var(--space-4);
}
.video-frame__placeholder p {
  color: var(--c-on-dark-soft);
  margin: 0 auto;
  font-size: 0.95rem;
}

/* --------------------------------------------------------------------------
   15g. Einstieg zur Anleitung

   Auf der Startseite steht kein Formular mehr, sondern eine anklickbare
   Karte, die auf die Anleitungsseite führt. Eingetragen wird nur dort,
   damit es genau eine Stelle dafür gibt.
   -------------------------------------------------------------------------- */
.video-cta {
  display: block;
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-lg);
  overflow: hidden;
  text-decoration: none;
  background: linear-gradient(
    150deg,
    rgba(26, 51, 88, 0.95) 0%,
    rgba(8, 22, 40, 0.98) 100%
  );
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: var(--shadow-lg);
  transition: transform var(--t-base) var(--ease-out),
    border-color var(--t-base) var(--ease-out);
}
.video-cta:hover {
  transform: translateY(-3px);
  border-color: var(--c-gold);
}

/* Angedeutetes Raster im Hintergrund, damit die Fläche nicht leer wirkt */
.video-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(
      rgba(255, 255, 255, 0.045) 1px,
      transparent 1px
    ),
    linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
  background-size: 34px 34px;
  mask-image: radial-gradient(circle at 50% 45%, #000 20%, transparent 72%);
  -webkit-mask-image: radial-gradient(circle at 50% 45%, #000 20%, transparent 72%);
}

.video-cta__inner {
  position: relative;
  height: 100%;
  display: grid;
  place-items: center;
  align-content: center;
  gap: var(--space-4);
  padding: var(--space-8);
  text-align: center;
}

.video-cta__play {
  width: 74px;
  height: 74px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--c-gold);
  color: var(--c-navy);
  box-shadow: 0 10px 30px rgba(201, 162, 75, 0.36);
  transition: transform var(--t-base) var(--ease-spring);
}
.video-cta:hover .video-cta__play {
  transform: scale(1.08);
}
.video-cta__play svg {
  width: 30px;
  height: 30px;
  /* Dreieck optisch mittig, nicht geometrisch */
  margin-left: 4px;
}

.video-cta__titel {
  font-family: var(--font-head);
  font-size: 1.22rem;
  font-weight: 600;
  color: var(--c-on-dark);
  margin: 0;
  max-width: none;
}
.video-cta__zeile {
  font-size: 0.9rem;
  color: var(--c-on-dark-soft);
  margin: 0;
  max-width: none;
}

/* Laufzeit-Schild unten rechts, wie man es von Videos kennt */
.video-cta__dauer {
  position: absolute;
  right: var(--space-4);
  bottom: var(--space-4);
  font-size: 0.78rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--c-on-dark);
  background: rgba(8, 22, 40, 0.82);
  border: 1px solid rgba(255, 255, 255, 0.14);
  padding: 4px 10px;
  border-radius: 6px;
}

@media (max-width: 768px) {
  .video-cta__play {
    width: 62px;
    height: 62px;
  }
  .video-cta__titel {
    font-size: 1.08rem;
  }
}

/* Testimonial-Video innerhalb eines dunklen Abschnitts */
.video-block {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-16);
  align-items: center;
  margin-top: var(--space-16);
  padding-top: var(--space-16);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.video-block .video-frame {
  margin: 0;
}
.video-block__play {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  font-size: 0.9rem;
  color: var(--c-on-dark-soft);
}
.video-block__play svg {
  width: 20px;
  height: 20px;
  color: var(--c-gold);
  flex: none;
}

@media (max-width: 1024px) {
  .video-block {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }
}

.agenda {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-4);
  counter-reset: agenda;
}
.agenda li {
  display: flex;
  gap: var(--space-4);
  padding: var(--space-6);
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  counter-increment: agenda;
}
.agenda li::before {
  content: counter(agenda, decimal-leading-zero);
  font-family: var(--font-head);
  font-weight: 700;
  color: var(--c-gold);
  flex: none;
}
.agenda p {
  margin: 0;
  color: var(--c-ink-soft);
  font-size: 0.96rem;
}
.agenda strong {
  display: block;
  color: var(--c-ink);
  font-family: var(--font-head);
  margin-bottom: 2px;
}

/* --------------------------------------------------------------------------
   15b. Kursseite: Module, Team, Preisblock, Fragen
   -------------------------------------------------------------------------- */
.modules {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-4);
  counter-reset: modul;
}
.module {
  display: flex;
  gap: var(--space-4);
  padding: var(--space-6);
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  counter-increment: modul;
  transition: border-color var(--t-base) var(--ease-out),
    transform var(--t-base) var(--ease-out);
}
.module:hover {
  border-color: var(--c-gold);
  transform: translateY(-3px);
}
.module::before {
  content: counter(modul, decimal-leading-zero);
  flex: none;
  font-family: var(--font-head);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
  color: var(--c-line);
  transition: color var(--t-base) var(--ease-out);
}
.module:hover::before {
  color: var(--c-gold);
}
.module h3 {
  font-size: 1.08rem;
  margin-bottom: 4px;
}
.module p {
  margin: 0;
  font-size: 0.94rem;
  color: var(--c-ink-soft);
}

/* Wer dahintersteckt */
.team {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-8);
}
.team-card {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
}
.team-card__avatar {
  flex: none;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(201, 162, 75, 0.16);
  border: 1px solid var(--c-gold);
  color: var(--c-gold);
  font-family: var(--font-head);
  font-size: 1.15rem;
  font-weight: 700;
}
.team-card h3 {
  margin-bottom: 2px;
}
.team-card__role {
  font-size: 0.86rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--c-gold);
  margin-bottom: var(--space-2);
}
.team-card p {
  margin: 0;
  font-size: 0.95rem;
}

/* Häufige Fragen: native details/summary, kein eigenes Skript nötig */
.faq {
  max-width: 780px;
  margin-inline: auto;
  display: grid;
  gap: var(--space-3);
}
.faq details {
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  overflow: hidden;
}
.faq details[open] {
  border-color: var(--c-gold);
}
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  /* 56px: bequem zu treffen, auch auf dem Handy */
  min-height: 56px;
  padding: var(--space-4) var(--space-6);
  font-family: var(--font-head);
  font-size: 1.03rem;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
  touch-action: manipulation;
}
.faq summary::-webkit-details-marker {
  display: none;
}
.faq summary::after {
  content: "";
  flex: none;
  width: 11px;
  height: 11px;
  border-right: 2px solid var(--c-gold);
  border-bottom: 2px solid var(--c-gold);
  transform: rotate(45deg) translate(-3px, -3px);
  transition: transform var(--t-base) var(--ease-out);
}
.faq details[open] summary::after {
  transform: rotate(-135deg) translate(-3px, -3px);
}
.faq summary:hover {
  color: var(--c-gold);
}
.faq__body {
  padding: 0 var(--space-6) var(--space-6);
}
.faq__body p {
  margin: 0;
  color: var(--c-ink-soft);
  font-size: 0.97rem;
}
.faq__body p + p {
  margin-top: var(--space-3);
}

/* --------------------------------------------------------------------------
   15f. Der Agent: Netzwerk-Visualisierung

   Ein Feld aus Knoten, die sich langsam bewegen und untereinander
   Verbindungen zeigen. Im Ruhezustand ein leises Glimmen, während einer
   Auswertung laufen Impulse durch die Verbindungen.
   Gezeichnet wird auf einem Canvas, siehe js/agent.js.
   -------------------------------------------------------------------------- */
.agent {
  position: relative;
  aspect-ratio: 1 / 1;
  width: 100%;
  max-width: 460px;
  margin-inline: auto;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: radial-gradient(
    circle at 50% 45%,
    rgba(26, 51, 88, 0.85) 0%,
    rgba(8, 22, 40, 0.95) 70%
  );
  border: 1px solid rgba(255, 255, 255, 0.09);
}

.agent canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* Kern in der Mitte: das eigentliche Modell */
.agent__core {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  text-align: center;
  pointer-events: none;
  z-index: 2;
}
.agent__ring {
  position: absolute;
  width: 104px;
  height: 104px;
  border-radius: 50%;
  border: 1px solid rgba(201, 162, 75, 0.35);
  animation: agent-puls 3.4s ease-in-out infinite;
}
.agent__ring:nth-child(2) {
  width: 140px;
  height: 140px;
  animation-delay: 1.1s;
}
@keyframes agent-puls {
  0%,
  100% {
    opacity: 0.25;
    transform: scale(0.94);
  }
  50% {
    opacity: 0.7;
    transform: scale(1.04);
  }
}
.agent__label {
  position: relative;
  font-family: var(--font-head);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-gold);
  background: rgba(8, 22, 40, 0.82);
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid rgba(201, 162, 75, 0.4);
  white-space: nowrap;
}

/* Laufschrift unten: zeigt, welches Kriterium gerade drankommt */
.agent__status {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: var(--space-4) var(--space-6);
  background: linear-gradient(
    to top,
    rgba(8, 22, 40, 0.92) 40%,
    rgba(8, 22, 40, 0)
  );
  z-index: 2;
}
.agent__status p {
  margin: 0;
  font-size: 0.82rem;
  color: var(--c-on-dark-soft);
  font-variant-numeric: tabular-nums;
  min-height: 1.4em;
}
.agent__status strong {
  color: var(--c-gold);
  font-weight: 600;
}

/* Die sieben Kriterien als Kette unter dem Text */
.kriterien {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-6);
  padding: 0;
  list-style: none;
}
.kriterien li {
  font-size: 0.8rem;
  padding: 6px 13px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--c-on-dark-soft);
  transition: border-color var(--t-base) var(--ease-out),
    color var(--t-base) var(--ease-out),
    background var(--t-base) var(--ease-out);
}
.kriterien li[data-aktiv="true"] {
  border-color: var(--c-gold);
  background: rgba(201, 162, 75, 0.16);
  color: var(--c-on-dark);
}

@media (prefers-reduced-motion: reduce) {
  .agent__ring {
    animation: none;
    opacity: 0.45;
  }
}

@media (max-width: 1024px) {
  .agent {
    max-width: 380px;
  }
}

/* Der Ladezustand sieht aus wie eine Überschrift, ist aber keine:
   die Seite soll genau eine h1 haben, und das ist die im Eingabeschritt. */
.wie-h1 {
  font-family: var(--font-head);
  font-size: clamp(2.2rem, 5.2vw, 3.9rem);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.02em;
  margin: 0 0 var(--space-6);
  max-width: none;
  text-wrap: balance;
}

/* --------------------------------------------------------------------------
   15e. GEO-Score: Eingabe, Ladezustand, Ergebnis
   -------------------------------------------------------------------------- */

/* Eingabefeld und Knopf verschmelzen auf breiten Schirmen zu einer Leiste */
.check {
  max-width: 640px;
}
.check__row {
  display: flex;
  gap: var(--space-3);
  align-items: stretch;
}
.check__row input {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 56px;
  padding: 0 var(--space-6);
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--c-on-dark);
  background: rgba(255, 255, 255, 0.07);
  border: 1.5px solid var(--c-navy-line);
  border-radius: 999px;
  transition: border-color var(--t-base) var(--ease-out),
    box-shadow var(--t-base) var(--ease-out);
}
.check__row input::placeholder {
  color: rgba(159, 178, 204, 0.7);
}
.check__row input:focus {
  border-color: var(--c-gold);
  box-shadow: 0 0 0 3px rgba(201, 162, 75, 0.22);
  outline: none;
}
.check__row input[aria-invalid="true"] {
  border-color: var(--c-bad);
}
.check__row .btn {
  flex: none;
  min-height: 56px;
}
.check__hint {
  font-size: 0.85rem;
  color: var(--c-on-dark-soft);
  margin: var(--space-3) 0 0;
}
.check__error {
  margin: var(--space-3) 0 0;
  font-size: 0.92rem;
  font-weight: 500;
  color: #ff9d94;
}
.check__error:empty {
  display: none;
}

/* Ladezustand: die Schritte laufen mit, damit die Wartezeit erklärt ist */
.check-steps {
  list-style: none;
  margin: var(--space-8) 0 0;
  padding: 0;
  display: grid;
  gap: var(--space-3);
  max-width: 460px;
}
.check-steps li {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: 0.95rem;
  color: var(--c-on-dark-soft);
  opacity: 0.45;
  transition: opacity var(--t-base) var(--ease-out),
    color var(--t-base) var(--ease-out);
}
.check-steps li[data-state="laeuft"],
.check-steps li[data-state="fertig"] {
  opacity: 1;
  color: var(--c-on-dark);
}
.check-steps__mark {
  flex: none;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 2px solid var(--c-navy-line);
}
.check-steps li[data-state="laeuft"] .check-steps__mark {
  border-color: var(--c-gold);
  border-top-color: transparent;
  animation: spin 800ms linear infinite;
}
.check-steps li[data-state="fertig"] .check-steps__mark {
  border-color: var(--c-gold);
  background: var(--c-gold);
}
.check-steps li[data-state="fertig"] .check-steps__mark::after {
  content: "";
  width: 9px;
  height: 5px;
  border-left: 2px solid var(--c-navy);
  border-bottom: 2px solid var(--c-navy);
  transform: rotate(-45deg) translate(1px, -1px);
}

/* Ergebnis */
.result__head {
  display: grid;
  /* Feste Spalte für den Ring: sonst zieht sich das Rad auf die Breite
     des Status-Schildchens zusammen und die Zahl wird winzig. */
  grid-template-columns: 260px 1fr;
  gap: var(--space-16);
  align-items: center;
}
.result__head .score__dial {
  width: 260px;
}
.result__head .score__state {
  /* Schildchen schmaler als der Ring, damit es nicht am Rand klebt */
  max-width: 190px;
  margin-inline: auto;
  font-size: 0.8rem;
}
.result__url {
  font-family: var(--font-body);
  font-size: 0.88rem;
  color: var(--c-ink-soft);
  word-break: break-all;
  margin-bottom: var(--space-2);
}
.result__verdict {
  font-family: var(--font-head);
  font-size: clamp(1.3rem, 2.4vw, 1.8rem);
  font-weight: 600;
  line-height: 1.3;
  margin-bottom: var(--space-4);
  text-wrap: balance;
}

/* Die sieben Kategorien */
.cats {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-16);
}
.cat {
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  overflow: hidden;
}
.cat > summary {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: var(--space-4);
  min-height: 64px;
  padding: var(--space-4) var(--space-6);
  cursor: pointer;
  list-style: none;
  touch-action: manipulation;
}
.cat > summary::-webkit-details-marker {
  display: none;
}
.cat__name {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 1.02rem;
}
.cat__score {
  font-family: var(--font-head);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  font-size: 1.1rem;
}
.cat__chevron {
  width: 11px;
  height: 11px;
  border-right: 2px solid var(--c-ink-soft);
  border-bottom: 2px solid var(--c-ink-soft);
  transform: rotate(45deg) translate(-3px, -3px);
  transition: transform var(--t-base) var(--ease-out);
}
.cat[open] .cat__chevron {
  transform: rotate(-135deg) translate(-3px, -3px);
}

/* Der Balken zeigt den Wert zusätzlich zur Farbe, damit die Aussage
   nicht allein an der Farbe hängt */
.cat__bar {
  grid-column: 1 / -1;
  height: 6px;
  border-radius: 999px;
  background: var(--c-line);
  overflow: hidden;
}
.cat__bar span {
  display: block;
  height: 100%;
  border-radius: 999px;
  transition: width 900ms var(--ease-out);
}
.cat[data-status="gruen"] .cat__score,
.cat[data-status="gruen"] .cat__bar span {
  color: var(--c-good);
  background: var(--c-good);
}
.cat[data-status="gelb"] .cat__score,
.cat[data-status="gelb"] .cat__bar span {
  color: #b8860b;
  background: #d69e2e;
}
.cat[data-status="rot"] .cat__score,
.cat[data-status="rot"] .cat__bar span {
  color: var(--c-bad);
  background: var(--c-bad);
}
.cat__score {
  background: none !important;
}

.cat__body {
  padding: 0 var(--space-6) var(--space-6);
  border-top: 1px solid var(--c-line);
  padding-top: var(--space-6);
}
.cat__label {
  font-family: var(--font-head);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-ink-soft);
  margin: 0 0 var(--space-3);
}
.cat__body ul {
  list-style: none;
  margin: 0 0 var(--space-6);
  padding: 0;
  display: grid;
  gap: var(--space-2);
}
.cat__body li {
  display: flex;
  gap: var(--space-3);
  font-size: 0.95rem;
  color: var(--c-ink-soft);
}
.cat__body li::before {
  content: "";
  flex: none;
  width: 5px;
  height: 5px;
  margin-top: 9px;
  border-radius: 50%;
  background: var(--c-ink-soft);
}
.cat__todo {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-4);
  background: var(--c-surface-alt);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-2);
}
.cat__todo:last-child {
  margin-bottom: 0;
}
.cat__impact {
  flex: none;
  align-self: flex-start;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: 999px;
  background: var(--c-line);
  color: var(--c-ink-soft);
}
.cat__impact[data-impact="hoch"] {
  background: var(--c-gold);
  color: var(--c-navy);
}
.cat__todo p {
  margin: 0;
  font-size: 0.95rem;
}

/* Die drei wichtigsten Maßnahmen, hervorgehoben */
.actions {
  display: grid;
  gap: var(--space-4);
  counter-reset: aktion;
}
.action {
  display: flex;
  gap: var(--space-4);
  padding: var(--space-6);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius);
  counter-increment: aktion;
}
.action::before {
  content: counter(aktion);
  flex: none;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--c-gold);
  color: var(--c-navy);
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.9rem;
}
.action p {
  margin: 0;
  color: var(--c-on-dark);
  font-size: 0.98rem;
}
.action__cat {
  display: block;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-gold);
  margin-bottom: 4px;
}

/* Hinweis, wenn ohne Schlüssel Beispieldaten gezeigt werden */
.demo-hinweis {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-6);
  background: rgba(201, 162, 75, 0.12);
  border: 1px solid var(--c-gold);
  border-radius: var(--radius);
  margin-bottom: var(--space-8);
}
.demo-hinweis svg {
  flex: none;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  color: var(--c-gold);
}
.demo-hinweis p {
  margin: 0;
  font-size: 0.92rem;
}

/* Panels werden per Skript umgeschaltet */
[data-panel][hidden] {
  display: none !important;
}

@media (max-width: 768px) {
  .check__row {
    flex-direction: column;
  }
  .check__row .btn {
    width: 100%;
  }
  .result__head {
    grid-template-columns: 1fr;
    gap: var(--space-8);
    text-align: center;
  }
  .result__head .score__dial {
    margin-inline: auto;
  }
  .cat > summary {
    grid-template-columns: 1fr auto;
    row-gap: var(--space-3);
  }
  .cat__chevron {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   15c. Rechtstexte (Impressum, Datenschutz)
   -------------------------------------------------------------------------- */
.legal {
  max-width: 760px;
  margin-inline: auto;
}
.legal__stand {
  font-size: 0.88rem;
  color: var(--c-ink-soft);
  margin-bottom: var(--space-12);
}
.legal h2 {
  font-size: clamp(1.25rem, 2vw, 1.55rem);
  margin-top: var(--space-12);
  padding-top: var(--space-6);
  border-top: 1px solid var(--c-line);
}
.legal h2:first-of-type {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}
.legal h3 {
  font-size: 1.05rem;
  margin-top: var(--space-6);
}
.legal p,
.legal li {
  font-size: 0.98rem;
  color: var(--c-ink-soft);
}
.legal address {
  font-style: normal;
  padding: var(--space-4) var(--space-6);
  background: var(--c-surface-alt);
  border-left: 3px solid var(--c-gold);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  margin-bottom: var(--space-4);
  line-height: 1.7;
}
.legal a {
  color: var(--c-navy);
  text-decoration: underline;
  text-underline-offset: 3px;
}
/* Telefon und E-Mail im Adressblock sind eigene Ziele, keine
   Verweise im Fließtext. Sie brauchen darum eine echte Tastfläche. */
.legal address a {
  display: inline-block;
  padding-block: 5px;
}
.legal a:hover {
  color: var(--c-gold);
}
.legal ul {
  padding-left: var(--space-6);
}
.legal li {
  margin-bottom: var(--space-2);
}

/* Hinweiskasten für Stellen, die noch geprüft werden müssen */
.notice {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-6);
  background: rgba(201, 162, 75, 0.1);
  border: 1px solid var(--c-gold);
  border-radius: var(--radius);
  margin-bottom: var(--space-12);
}
.notice svg {
  flex: none;
  width: 20px;
  height: 20px;
  margin-top: 3px;
  color: var(--c-gold);
}
.notice p {
  margin: 0;
  font-size: 0.92rem;
  color: var(--c-ink);
}

/* --------------------------------------------------------------------------
   15d. Fehlerseite
   -------------------------------------------------------------------------- */
.error-page {
  min-height: 62vh;
  display: grid;
  place-items: center;
  text-align: center;
  padding-block: var(--space-24);
}
.error-page__code {
  font-family: var(--font-head);
  font-size: clamp(4rem, 14vw, 8rem);
  font-weight: 700;
  line-height: 1;
  color: var(--c-gold);
  margin-bottom: var(--space-4);
}
.error-page p {
  margin-inline: auto;
}

/* --------------------------------------------------------------------------
   16. Scroll-Reveal
   -------------------------------------------------------------------------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity var(--t-slow) var(--ease-out),
    transform var(--t-slow) var(--ease-out);
  /* Kein Layout-Reflow: nur transform und opacity */
  will-change: opacity, transform;
}
[data-reveal][data-revealed="true"] {
  opacity: 1;
  transform: none;
  will-change: auto;
}

/* --------------------------------------------------------------------------
   17. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .hero__grid,
  .case,
  .score,
  .signup {
    grid-template-columns: 1fr;
    gap: var(--space-12);
  }
  .compare {
    grid-template-columns: 1fr;
  }
  .compare__plus {
    padding-block: var(--space-2);
  }
  .case__quote {
    max-width: 30ch;
  }
}

@media (max-width: 768px) {
  :root {
    --space-24: 64px;
    --space-16: 48px;
  }
  .nav-toggle {
    display: inline-flex;
  }
  .site-header__inner {
    min-height: 66px;
    flex-wrap: wrap;
  }

  /* Navigation klappt unter der Leiste auf, statt zu verschwinden */
  .site-nav {
    display: none;
    order: 3;
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding-bottom: var(--space-4);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    margin-top: var(--space-2);
  }
  .site-nav[data-open="true"] {
    display: flex;
  }
  .site-nav a {
    min-height: 48px;
    display: flex;
    align-items: center;
    font-size: 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  }
  .site-nav a::after {
    display: none;
  }

  /* Der Sprungpunkt aus der Kopfzeile bekommt in der Klappliste
     die Betonung, die auf dem Handy sonst der Knopf hätte */
  .site-nav a[href="#anleitung"],
  .site-nav a[href="anleitung.html"] {
    color: var(--c-gold);
    font-weight: 600;
  }

  .hero {
    padding-block: var(--space-16);
  }
  .hero__proof {
    gap: var(--space-6);
  }
  .chat__body {
    min-height: 330px;
    padding: var(--space-4);
  }
  .offer {
    padding: var(--space-12) var(--space-6);
  }
}

/* Unter dieser Breite passen Logo, Knopf und Schaltfläche nicht mehr
   nebeneinander. Statt die Zeile umbrechen zu lassen, entfällt die
   Schaltfläche: der gleiche Weg steht im Menü und direkt darunter im Hero. */
@media (max-width: 560px) {
  .site-header .btn {
    display: none;
  }
}

@media (max-width: 480px) {
  body {
    font-size: 16px;
  }
  .container {
    padding-inline: var(--space-4);
  }
  .btn {
    width: 100%;
  }
  .btn-row {
    gap: var(--space-3);
  }
  .site-header .btn {
    width: auto;
  }
  .hero__proof-item {
    min-width: 45%;
  }
}

/* --------------------------------------------------------------------------
   18. Reduzierte Bewegung
   Alles bleibt bedienbar, nur die Bewegung entfällt. Endzustand sofort.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  [data-reveal] {
    opacity: 1;
    transform: none;
  }
  .hero h1 .accent,
  .hero .wie-h1 .accent {
    background-size: 100% 3px;
  }
  .chat__msg,
  .chat__list li {
    opacity: 1;
    transform: none;
  }
}