/* ==========================================================================
   components.css — Wiederverwendbare Bausteine
   Buttons, Badges, Karten, Bildplatzhalter, Formulare, Accordion, Karussell,
   Marquee, Navigation, Back-to-Top. Alles, was mehrfach vorkommt.
   ========================================================================== */

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 0.75rem 1.375rem;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease),
              transform var(--dur-fast) var(--ease);
}

.btn svg { width: 1rem; height: 1rem; flex: none; }
.btn:active { transform: translateY(1px); }

.btn-primary {
  background: var(--action);
  color: var(--action-fg);
  box-shadow: var(--shadow-action);
}

.btn-primary:hover {
  background: var(--action-hover);
  color: var(--action-fg);
}

.btn-secondary {
  background: transparent;
  color: var(--text);
  border-color: var(--border-strong);
  box-shadow: none;
}

.btn-secondary:hover {
  background: var(--text);
  border-color: var(--text);
  color: var(--bg);
}

.btn-sm  { padding: 0.5rem 1rem; font-size: var(--fs-xs); }
.btn-lg  { padding: 0.9375rem 1.75rem; font-size: var(--fs-base); }
.btn-block { width: 100%; }

/* ==========================================================================
   Badges
   ========================================================================== */

.badge {
  display: inline-flex;
  align-items: center;
  padding: 0.1875rem 0.625rem;
  border-radius: var(--radius-full);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  line-height: 1.5;
}

.badge-accent {
  background: var(--accent-2);
  color: var(--on-accent);
}

.badge-pro {
  background: var(--accent-soft);
  color: var(--accent);
  letter-spacing: var(--tracking-wide);
  font-size: 0.6875rem;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--accent);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  margin-bottom: var(--space-3);
}

/* Kurzer goldener Strich vor dem Label — gibt der Sektionsmarke Gewicht. */
.eyebrow::before {
  content: "";
  width: 28px;
  height: 2px;
  background: var(--accent);
  flex: none;
}

/* ==========================================================================
   Karten
   ========================================================================== */

.card {
  position: relative;
  background: var(--bg-elevated);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}

/* Der Hover-Schatten liegt auf einem Pseudoelement und wird nur ein- und
   ausgeblendet. Ein animierter box-shadow würde die Karte stattdessen bei
   jedem Frame neu malen. */
.card::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  box-shadow: var(--shadow-md);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur) var(--ease);
}

.card:hover {
  border-color: var(--accent);
  transform: translateY(-3px);
}

.card:hover::after { opacity: 1; }

/* ==========================================================================
   Bildplatzhalter
   Graue Fläche mit sichtbarem Dateinamen. Später gegen echte <img> tauschen.
   ========================================================================== */

.img-slot {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  background:
    repeating-linear-gradient(
      45deg,
      rgba(255, 255, 255, .02) 0 10px,
      rgba(255, 255, 255, .045) 10px 20px
    ),
    var(--bg-subtle);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius);
  overflow: hidden;
}

.img-slot::after {
  content: attr(data-filename);
  position: absolute;
  inset-inline: 0;
  top: 50%;
  transform: translateY(-50%);
  padding-inline: var(--space-3);
  text-align: center;
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  color: var(--text-faint);
  word-break: break-word;
}

.img-slot--wide { aspect-ratio: 16 / 9; }

/* In Karten sitzt der Platzhalter bündig oben: nur unten eine Trennlinie. */
.img-slot--portrait {
  border: 0;
  border-bottom: 1px solid var(--border);
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

/* ==========================================================================
   Navigation
   ========================================================================== */

.site-header {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: var(--z-header);
  height: var(--header-h);
  display: flex;
  align-items: center;
  /* Bewusst ohne backdrop-filter: der Blur zwingt den Compositor, die Fläche
     hinter der fixierten Kopfzeile bei jedem Scroll-Frame neu zu unschärfen.
     Deckende Fläche kostet nichts. Eigener Farbton --bg-chrome, den sich
     die Kopfzeile mit dem Footer teilt. */
  background: var(--bg-chrome);
  transition: box-shadow var(--dur) var(--ease);
}


/* Dreispaltiges Raster: Marke links, Navigationspunkte mittig im Header,
   CTA rechts. Die äußeren Spalten sind flexibel (1fr) und gleich breit,
   dadurch sitzt die mittlere Spalte immer exakt in der Headermitte, egal
   wie breit Marke oder Button sind. Auf Mobilgeräten wird das per Media
   Query wieder auf ein einfaches Flex-Layout zurückgestellt. */
.nav {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--space-5);
}

/* --- Marke -------------------------------------------------------------- */

.brand {
  display: inline-flex;
  align-items: center;
  flex: none;
  justify-self: start;
}

/* Die Wortmarke wird über die Höhe gesteuert, die Breite ergibt sich aus dem
   Seitenverhältnis (3,72:1). width/height am <img> reservieren den Platz schon
   vor dem Laden, damit beim Aufbau nichts springt. */
.brand-logo {
  height: 40px;
  width: auto;
  transition: opacity var(--dur) var(--ease);
}

.brand:hover .brand-logo { opacity: .75; }

/* Zwei Logo-Varianten übereinander, per data-theme umgeschaltet — reine
   CSS-Lösung, kein Bildtausch per JS nötig, kein Aufblitzen der falschen
   Version beim Laden. */
.brand-logo--dark { display: none; }

:root[data-theme="light"] .brand-logo--light { display: none; }
:root[data-theme="light"] .brand-logo--dark  { display: block; }

/* --- Menü --------------------------------------------------------------- */

/* display:contents löst die Wrapper-Box auf: .nav-list und .nav-cta werden
   dadurch direkte Grid-Kinder von .nav und lassen sich unabhängig
   positionieren (Liste mittig, CTA rechts), statt als ein Block zusammen
   rechts zu kleben. Mobil wird das per Media Query zurückgesetzt, weil
   .nav-menu dort als eigenständiges Overlay gebraucht wird. */
.nav-menu { display: contents; }

.nav-list {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  justify-self: center;
}

/* Enthält den Theme-Umschalter (Desktop) und den CTA-Button — zusammen die
   dritte Spalte, damit .nav-list weiterhin exakt mittig bleibt. */
.nav-menu-end {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  justify-self: end;
}

/* Gruppiert Theme-Umschalter (Mobil) und Menü-Button rechts im Kopf —
   auf Desktop ohnehin leer, da beide Kinder dort display:none sind, aber
   als eigene Box lieber ganz ausgeblendet, damit sie keine vierte
   Grid-Spalte beansprucht. */
.nav-bar-actions {
  display: none;
  align-items: center;
  gap: var(--space-2);
}

/* --- Theme-Umschalter ----------------------------------------------------
   Zwei Exemplare im Markup (Desktop neben dem CTA, Mobil neben dem
   Menü-Button) — welches sichtbar ist, steuern .theme-toggle--menu /
   .theme-toggle--bar über Breakpoints. Beide teilen sich Optik und
   Klick-Handler (theme-toggle.js bindet an alle [data-theme-toggle]). */
.theme-toggle {
  display: grid;
  place-items: center;
  flex: none;
  width: 42px;
  height: 42px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg);
  color: var(--text-muted);
  transition: color var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              background-color var(--dur) var(--ease);
}

.theme-toggle:hover {
  color: var(--accent);
  border-color: var(--accent);
}

.theme-toggle-icon { width: 19px; height: 19px; }

.theme-toggle-icon--moon { display: none; }

:root[data-theme="light"] .theme-toggle-icon--sun  { display: none; }
:root[data-theme="light"] .theme-toggle-icon--moon { display: block; }

.theme-toggle--menu { display: grid; }
.theme-toggle--bar  { display: none; }

/* Kopfzeile der Unterseiten (Rechner, Termin, Wer sind wir, Impressum,
   Datenschutz): Theme-Umschalter und Zurück-Link gemeinsam rechts. */
.subpage-actions {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.nav-link {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.5rem 0.625rem;
  white-space: nowrap;
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--text-muted);
  transition: color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}

.nav-link:hover,
.nav-link.is-active {
  color: var(--text);
  background: var(--bg-subtle);
}

.nav-link.is-active {
  color: var(--text);
  background: var(--accent-soft);
  box-shadow: inset 0 -2px 0 var(--accent);
}

.nav-chevron {
  width: 14px;
  height: 14px;
  transition: transform var(--dur) var(--ease);
}

[data-dropdown].is-open .nav-chevron { transform: rotate(180deg); }

/* --- Dropdown ----------------------------------------------------------- */

.nav-item--dropdown { position: relative; }

.dropdown {
  position: absolute;
  top: calc(100% + 0.625rem);
  left: 0;
  z-index: var(--z-dropdown);
  display: grid;
  gap: 6px;
  width: 300px;
  padding: var(--space-3);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity var(--dur) var(--ease),
              transform var(--dur) var(--ease),
              visibility var(--dur) var(--ease);
}

.dropdown--wide {
  width: 580px;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

[data-dropdown].is-open .dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Jeder Menüpunkt als klar abgegrenzte, nummerierte Box — macht die
   Reihenfolge der Bereiche auf einen Blick lesbar (01–10, Seitenreihenfolge).
   Nummer als Ring-Kreis, dieselbe Formsprache wie die Schrittkreise im
   Ablauf-Bereich (.flow-node) — sorgt für Wiedererkennung statt einer
   isolierten Extra-Optik nur fürs Menü. */
.dropdown-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: 0.625rem var(--space-3);
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: background-color var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              transform var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
}

.dropdown-item:hover {
  background: var(--accent-soft);
  border-color: var(--accent);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

.dropdown-num {
  flex: none;
  margin-top: 2px;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: var(--radius-full);
  background: var(--bg);
  border: 1.5px solid var(--accent);
  color: var(--accent);
  font-size: 0.625rem;
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
  transition: background-color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
}

.dropdown-text {
  display: grid;
  gap: 1px;
  min-width: 0;
}

.dropdown-title {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--text);
}

.dropdown-desc {
  font-size: 0.6875rem;
  color: var(--text-muted);
  line-height: 1.3;
}

/* --- Burger ------------------------------------------------------------- */

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 42px;
  height: 42px;
  padding: 0 9px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg);
}

.nav-toggle-bar {
  display: block;
  height: 2px;
  width: 100%;
  border-radius: 2px;
  background: var(--text);
  transition: transform var(--dur) var(--ease), opacity var(--dur-fast) var(--ease);
}

.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.nav-backdrop {
  position: fixed;
  inset: 0;
  z-index: var(--z-backdrop);
  background: rgba(0, 0, 0, .65);
  backdrop-filter: blur(2px);
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
}

.nav-backdrop.is-visible { opacity: 1; }

/* ==========================================================================
   Marquee (Partner-Laufband)
   ========================================================================== */

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

.marquee-track {
  display: flex;
  align-items: center;
  gap: var(--space-7);
  width: max-content;
  animation: marquee-scroll 30s linear infinite;
  will-change: transform;
}

/* Außerhalb des Sichtbereichs anhalten — sonst läuft die Animation und damit
   das Neuzeichnen der maskierten Ebene die ganze Sitzung durch.
   Gesetzt von main.js. */
.marquee:hover .marquee-track,
.marquee.is-paused .marquee-track { animation-play-state: paused; }

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

.partner-logo {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  color: var(--text-faint);
  white-space: nowrap;
  transition: color var(--dur) var(--ease);
}

.partner-logo:hover { color: var(--text); }
.partner-logo svg { width: 24px; height: 24px; flex: none; }

/* ==========================================================================
   Karussell
   ========================================================================== */

.carousel { position: relative; }

.carousel-viewport {
  overflow: hidden;
  padding-block: var(--space-2);
}

.carousel-track {
  display: flex;
  transition: transform var(--dur-slide) var(--ease-out);
  will-change: transform;
}

.carousel-slide {
  flex: 0 0 33.3333%;
  padding-inline: var(--space-3);
}

.carousel-slide > .card { height: 100%; }

.carousel-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  margin-top: var(--space-6);
}

.carousel-btn {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  background: var(--bg);
  color: var(--text);
  box-shadow: var(--shadow-xs);
  transition: background-color var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              color var(--dur) var(--ease);
}

.carousel-btn:hover {
  background: var(--action);
  border-color: var(--action);
  color: var(--action-fg);
}

.carousel-btn svg { width: 18px; height: 18px; }

.carousel-dots {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.carousel-dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border-radius: var(--radius-full);
  background: var(--border-strong);
  transition: width var(--dur) var(--ease), background-color var(--dur) var(--ease);
}

.carousel-dot.is-active {
  width: 24px;
  background: var(--accent);
}

/* ==========================================================================
   Accordion
   ========================================================================== */

.accordion {
  display: grid;
  gap: var(--space-3);
}

.accordion-item {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  overflow: hidden;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.accordion-item.is-open {
  border-color: var(--accent);
  box-shadow: var(--shadow-md);
}

.accordion-item h3 { font-size: inherit; font-weight: inherit; }

.accordion-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  width: 100%;
  padding: var(--space-5);
  text-align: left;
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  color: var(--text);
  transition: color var(--dur) var(--ease);
}

.accordion-trigger:hover { color: var(--accent); }

.accordion-icon {
  width: 20px;
  height: 20px;
  flex: none;
  color: var(--accent);
  transition: transform var(--dur) var(--ease);
}

.accordion-item.is-open .accordion-icon { transform: rotate(135deg); }

.accordion-panel {
  height: 0;
  overflow: hidden;
  transition: height var(--dur) var(--ease);
}

.accordion-content {
  padding: 0 var(--space-5) var(--space-5);
  font-size: var(--fs-base);
}

/* ==========================================================================
   Formular
   ========================================================================== */

.form-field { display: grid; gap: var(--space-2); }

.form-field label {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--text);
}

.form-field input[type="text"],
.form-field input[type="email"],
.form-field select,
.form-field textarea {
  width: 100%;
  padding: 0.6875rem 0.875rem;
  background: var(--bg);
  border: 1.5px solid var(--border-strong);
  border-radius: var(--radius);
  font-size: var(--fs-sm);
  color: var(--text);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.form-field input::placeholder,
.form-field textarea::placeholder { color: var(--text-faint); }

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.form-field select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512' fill='%23a5a5aa'%3E%3Cpath d='M201.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L224 338.7 54.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 18px;
  padding-right: 2.5rem;
}

.form-field.has-error input,
.form-field.has-error select,
.form-field.has-error textarea {
  border-color: var(--danger);
  box-shadow: 0 0 0 3px var(--danger-soft);
}

.form-error {
  display: none;
  font-size: var(--fs-xs);
  color: var(--danger);
}

.form-field.has-error .form-error { display: block; }

.checkbox {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: var(--fs-sm);
  font-weight: var(--fw-normal);
  color: var(--text-muted);
  cursor: pointer;
}

.checkbox input {
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: var(--accent);
  cursor: pointer;
}

.checkbox a { color: var(--accent); text-decoration: underline; }

.form-status {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
}

.form-status.is-success {
  background: var(--info-soft);
  color: var(--info);
}

.form-status.is-error {
  background: var(--danger-soft);
  color: var(--danger);
}

/* Spam-Falle für Web3Forms: für Menschen unsichtbar, Bots füllen sie oft
   trotzdem aus, wodurch der Server die Einsendung stillschweigend verwirft. */
.form-honeypot { display: none; }

.form-hint {
  font-size: var(--fs-xs);
  color: var(--text-faint);
  text-align: center;
}

/* ==========================================================================
   Back-to-Top
   ========================================================================== */

.back-to-top {
  position: fixed;
  right: var(--space-5);
  bottom: var(--space-5);
  z-index: var(--z-float);
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: var(--radius-full);
  background: var(--action);
  color: var(--action-fg);
  box-shadow: var(--shadow-action);
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity var(--dur) var(--ease),
              transform var(--dur) var(--ease),
              visibility var(--dur) var(--ease),
              background-color var(--dur) var(--ease);
}

.back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.back-to-top:hover { background: var(--action-hover); }
.back-to-top svg { width: 20px; height: 20px; }

/* ==========================================================================
   Scroll-Reveal (Startzustand; Auslösung über scroll-reveal.js)
   ========================================================================== */

.reveal {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity var(--dur-reveal) var(--ease-out),
              transform var(--dur-reveal) var(--ease-out);
}

.reveal.is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; }
  .marquee-track { animation: none; }
}