/* ============================================================
   ContiNovo — Komponenten
   Nachbau der React-Primitives aus dem Claude-Design-Bundle
   (_ds_bundle.js) als flaches CSS. Kein React, kein Bundler in
   Produktion — das Design ist ein Prototyp, kein Liefercode.

   Nachgebaut sind nur die Komponenten, die auf der Startseite
   tatsächlich vorkommen. Bei neuem export ggf. gegenchecken.
   Header und Footer stehen in page.css, nicht hier — echtes HTML auf
   allen Seiten (index/impressum/datenschutz/horizont-scan), 404 hat
   bewusst keinen Header, s. Abschnitt 404-Seite in static-doku.md.

   Hover/Focus/Active laufen hier über echte CSS-Pseudoklassen. Im
   Prototyp waren das React-useState-Handler (onMouseEnter etc.) —
   die Wirkung ist dieselbe, aber CSS greift auch bei Tastatur-
   Fokus, was die JS-Variante nicht tat.
   ============================================================ */

/* ---------- Button ---------- */
/* Eine primäre (goldene) Aktion pro View; secondary ist Teal-Outline
   (auf Dunkel weiß-outline); ghost ist am leisesten. */
.btn {
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold);
  border: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex: none;
  white-space: nowrap;
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition:
    background var(--dur-base) var(--ease-out),
    transform var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-base) ease,
    border-color var(--dur-base) ease;
}
.btn:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 3px;
}
.btn:not(:disabled):active { transform: scale(.98); }
.btn:disabled { opacity: .45; cursor: not-allowed; }

.btn--sm { font-size: 13px; padding: 9px 16px; }
.btn--md { font-size: 15px; padding: 13px 22px; }
.btn--lg { font-size: 17px; padding: 16px 28px; }
.btn--full { width: 100%; }

.btn--primary { background: var(--accent); color: var(--text-on-accent); }
.btn--primary:not(:disabled):hover { background: var(--accent-hover); box-shadow: var(--shadow-2); }
.btn--primary:not(:disabled):active { background: var(--accent-press); }

.btn--secondary { background: transparent; color: var(--primary); border: 1.5px solid var(--primary); }
.btn--secondary:not(:disabled):hover { background: var(--primary); color: #fff; }

.btn--ghost { background: transparent; color: var(--link); }
.btn--ghost:not(:disabled):hover { background: var(--surface-sunken); color: var(--link); }

.btn--on-dark-secondary { background: transparent; color: #fff; border: 1.5px solid rgba(255, 255, 255, .6); }
.btn--on-dark-secondary:not(:disabled):hover { background: rgba(255, 255, 255, .12); border-color: #fff; color: #fff; }

/* ---------- Eyebrow ---------- */
/* Führt eine Headline an; steht nie allein. */
.eyebrow {
  display: block;
  font-weight: var(--fw-semibold);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--secondary);
}
.eyebrow--on-dark { color: var(--aqua-200); }
/* .eyebrow--lg existiert nur noch als Marker-Klasse im Markup: seit --fs-eyebrow
   selbst auf 15px/13px mobil steht, trug die Regel denselben Wert wie die Basis.
   Im Design-Export gewinnt an dieser Stelle wegen Quellreihenfolge dauerhaft der
   unbedingte 15px-!important-Wert — der Mobil-Wert greift dort nie. */

/* ---------- Checkbox (Consent) ---------- */
/* Natives input[type=checkbox] + accent-color, wie im Design-Export
   (Home.dc.html) - kein Custom-SVG-Checkbox mehr, s. .contact__consent in
   page.css. */

/* ---------- ServiceCard ---------- */
/* Helle Karte (Teal-50) mit weicher Elevation; das Hauptangebot ist die
   dunkle Teal-Variante — Hierarchie über Fläche, nicht über Lautstärke. */
.offer-card {
  position: relative;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--card-pad);
  box-shadow: var(--shadow-2);
  min-width: 0;
}
/* flex-end plus 2px Versatz am Titel: ausgerichtet wird an der Schriftlinie,
   nicht an der Icon-Box. */
.offer-card__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 14px;
  margin: 12px 0 8px;
}
.offer-card__icon {
  width: var(--icon-box);
  height: var(--icon-box);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
/* Der Chip-Ton kommt aus einer der Marken-Rampen. Aktuell nutzt die
   Startseite nur cerulean — bei neuem Export mit anderem Akzent hier
   gegenchecken (Design-System kennt außerdem aqua/teal, s. ACCENT_CHIP). */
.offer-card__icon--cerulean { background: var(--cerulean-100); color: var(--cerulean-700); }

.offer-card__title {
  font-family: var(--font-display);
  font-variation-settings: var(--fraunces-heading);
  font-weight: 600;
  font-size: var(--fs-subhead);
  line-height: 1;
  color: var(--text-primary);
  margin: 0;
  position: relative;
  top: 2px;
}
/* max-width in ch statt Prozent: greift nur, wenn die Karte einspaltig auf
   Container-Breite wächst (≤780px) — auf den schmalen Grid-Spalten der
   3er-Reihe ist die Zeile ohnehin schon kürzer. */
.offer-card__desc { font-size: var(--fs-body); color: var(--text-muted); margin-bottom: 16px; max-width: 46ch; }

.offer-card__bullets { list-style: none; padding: 0; margin: 0; font-size: var(--fs-body-s); }
.offer-card__bullets li {
  display: flex;
  gap: 8px;
  align-items: center;
  margin: 7px 0;
  font-weight: var(--fw-medium);
  color: var(--text-body);
  min-width: 0;
}
.offer-card__bullets li::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--secondary);
  flex: none;
}

/* ---------- MetaItem ---------- */
/* Fakten-Zeile mit Icon ("15 Fragen, ca. 5 Minuten"). Steht auf der Startseite
   und auf der Horizont-Diagnose-Unterseite; der umgebende Zeilencontainer
   bleibt seitenspezifisch, weil die Abstände dort unterschiedlich sitzen. */
.meta-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-small);
  color: var(--text-muted);
}
.meta-item .icon { color: var(--secondary); flex: none; }

/* ---------- QuoteCard ---------- */
/* Testimonial auf dem tiefsten Teal, Fraunces italic. */
.quote-card {
  background: var(--surface-dark-deep);
  color: #fff;
  border-radius: var(--radius-lg);
  padding: 34px;
  min-width: 0;
}
.quote-card__quote {
  font-family: var(--font-display);
  font-variation-settings: 'opsz' 40, 'wght' 500, 'SOFT' 50, 'WONK' 0;
  font-weight: 500;
  font-style: italic;
  font-size: 22px;
  line-height: 1.4;
  color: var(--surface-0);
  margin: 0;
}
.quote-card__who { margin-top: 18px; font-weight: var(--fw-semibold); font-size: 14px; color: #fff; }
.quote-card__role { font-size: 13px; color: var(--aqua-200); }

/* ---------- ProcessTimeline ---------- */
/* Nummerierte Schritte nur, wo die Reihenfolge wirklich zählt. */
.timeline { position: relative; padding-left: 8px; }
.timeline__step {
  display: grid;
  grid-template-columns: var(--icon-box) 1fr;
  gap: 16px;
  position: relative;
  padding-bottom: 26px;
}
.timeline__step:last-child { padding-bottom: 0; }
/* Verbindungslinie zwischen den Kreisen — beim letzten Schritt entfällt sie,
   sonst liefe sie ins Leere. */
.timeline__step:not(:last-child)::before {
  content: "";
  position: absolute;
  left: calc(var(--icon-box) / 2 - 1px);
  top: var(--icon-box);
  bottom: 0;
  width: 2px;
  background: var(--teal-400);
}
.timeline__num {
  width: var(--icon-box);
  height: var(--icon-box);
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--fw-semibold);
  font-size: 15px;
  z-index: 1;
}
.timeline__body { min-width: 0; }
.timeline__title { font-weight: var(--fw-semibold); color: var(--teal-900); font-size: 16.5px; }
.timeline__text { font-size: var(--fs-body-s); color: var(--teal-800); }
/* Aktiver Schritt: Gold-50 ist hier als knapp begrenzte Hervorhebung
   zugelassen — nie als Sektions- oder Well-Ton. Aktuell nutzt die Startseite
   keinen aktiven Schritt; die Regel steht für spätere Verwendung bereit. */
.timeline__step--active .timeline__num { background: var(--accent); color: var(--text-on-accent); }
.timeline__step--active .timeline__body {
  background: var(--surface-highlight);
  border-radius: var(--radius-md);
  padding: 10px 14px;
  margin-top: -8px;
}

/* ---------- Formularfelder ---------- */
/* Input, Select und Textarea teilen sich dieselbe Feld-Chrome. */
.field__label {
  display: block;
  font-size: 13.5px;
  font-weight: var(--fw-semibold);
  color: var(--text-primary);
  margin-bottom: 7px;
}
.field__required { color: var(--danger); }

.field__control {
  font-family: var(--font-sans);
  font-size: 15px;
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-1);
  color: var(--text-body);
  outline: none;
  box-shadow: none;
  box-sizing: border-box;
  transition: border-color var(--dur-base) ease, box-shadow var(--dur-base) ease;
}
.field__control:focus {
  border-color: var(--focus-ring);
  box-shadow: 0 0 0 3px rgba(61, 143, 177, .2);
}
textarea.field__control { min-height: 96px; resize: vertical; }

/* Natives <select> mit appearance:auto erzwingt je nach Browser/OS eine
   eigene Mindesthöhe fürs Control-Chrome, unabhängig von box-sizing:border-
   box + Padding (v.a. macOS/Safari) - selbe Klasse Problem wie die Checkbox
   oben. appearance:none + eigener Chevron garantiert dieselbe 46px-Höhe wie
   Input in jedem Browser. */
.field__select-wrap { position: relative; }
select.field__control {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 40px;
}
.field__select-chevron {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--secondary);
  pointer-events: none;
}

/* ---------- ALTCHA-Obfuscation (E-Mail-Adressen) ---------- */
/* Button wird nie sichtbar — main.js entschlüsselt beim Laden automatisch
   und ersetzt ihn direkt durch den echten mailto:-Link, ohne Klick. */
altcha-widget[data-obfuscated] button { display: none; }

/* ---------- Icon ---------- */
/* Lucide-Outline-Subset, im Markup inline als <svg>. Die Klasse setzt nur,
   was im Prototyp die Icon-Komponente als Props gesetzt hat. */
.icon {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
}