/* ==========================================================================
   ILLUMOR DESIGN SYSTEM — components.css
   ========================================================================== */

/* ==========================================================================
   LOGO
   --------------------------------------------------------------------------
   Im Header dezent (sm), beim Hover auf md. Präsent, ohne zu schreien.
   Schutzraum ist am Birnendurchmesser bemessen und als Padding gesetzt,
   damit er sich nicht wegoptimieren lässt.
   ========================================================================== */
.logo {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  color: var(--ink-primary);
  text-decoration: none;
  line-height: 1;
}
.logo__mark,
.logo__lockup {
  display: block;
  height: var(--logo-h, 2rem);
  width: auto;
  color: var(--tube-core);
  filter: var(--tube-stroke-sm);
  transition: filter var(--d-base) var(--ease-out);
}
.logo:hover .logo__mark,
.logo:hover .logo__lockup,
.logo:focus-visible .logo__mark,
.logo:focus-visible .logo__lockup {
  filter: var(--tube-stroke-md);
}
/* Im Hero darf das Logo voll leuchten. */
.logo--hero .logo__mark,
.logo--hero .logo__lockup { filter: var(--tube-stroke-lg); }

.logo--flat .logo__mark,
.logo--flat .logo__lockup { filter: none; }

/* Wortmarke als Text, wenn kein SVG-Lockup gebraucht wird. */
.logo__word {
  font-family: var(--f-display);
  font-size: var(--logo-word, 1.25rem);
  font-weight: 400;
  letter-spacing: var(--ls-wordmark);
  text-transform: uppercase;
  text-shadow: var(--tube-text-sm);
  transition: text-shadow var(--d-base) var(--ease-out);
}
.logo:hover .logo__word { text-shadow: var(--tube-text-md); }

/* Schutzraum = Birnendurchmesser. Auf 0.44 der Lockup-Höhe normiert. */
.logo-clearspace { padding: calc(var(--logo-h, 2rem) * 0.44); }

/* ==========================================================================
   ICON
   ========================================================================== */
.icon {
  display: block;
  width: var(--icon-size, 1.5rem);
  height: var(--icon-size, 1.5rem);
  flex: none;
  color: currentColor;
}
.icon--glow { filter: var(--tube-stroke-sm); }
.icon--lg { --icon-size: 2rem; }
.icon--xl { --icon-size: 2.75rem; }

/* Icon in einem Röhrenring — für Service-Karten. */
.icon-badge {
  display: grid;
  place-items: center;
  width: 3.5rem;
  aspect-ratio: 1;
  border-radius: var(--r-pill);
  color: var(--tube-core);
  box-shadow: var(--tube-edge-sm);
}

/* ==========================================================================
   BUTTONS
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: var(--btn-py, var(--sp-3)) var(--btn-px, var(--sp-6));
  border: 0;
  border-radius: var(--r-pill);
  font-family: var(--f-text);
  font-size: var(--btn-fs, var(--t-body-sm));
  font-weight: 500;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  background: transparent;
  color: var(--ink-primary);
  transition: transform var(--d-fast) var(--ease-out),
              box-shadow var(--d-base) var(--ease-out),
              background-color var(--d-fast) var(--ease-out),
              color var(--d-fast) var(--ease-out);
}
.btn:hover  { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--primary { background: var(--cta-fill); color: var(--cta-ink); box-shadow: var(--e-2); }
.btn--primary:hover { background: var(--cta-fill-hover); box-shadow: var(--e-3); }

.btn--tube { box-shadow: var(--tube-edge-sm); }
.btn--tube:hover { box-shadow: var(--tube-edge-md); }

.btn--ghost { color: var(--ink-secondary); padding-inline: var(--sp-3); }
.btn--ghost:hover { color: var(--ink-primary); }

.btn--icon { --btn-px: var(--sp-3); aspect-ratio: 1; box-shadow: var(--tube-edge-sm); }

.btn--sm { --btn-py: var(--sp-2); --btn-px: var(--sp-4); --btn-fs: var(--t-caption); }
.btn--lg { --btn-py: var(--sp-4); --btn-px: var(--sp-8); --btn-fs: var(--t-body); }
.btn--block { width: 100%; }

/* ==========================================================================
   HEADER · Navigation
   ========================================================================== */
.header {
  position: sticky;
  inset-block-start: 0;
  z-index: var(--z-header);
  background: var(--surface-overlay);
  backdrop-filter: blur(16px) saturate(150%);
  border-block-end: 1px solid var(--edge-subtle);
}
.header__in {
  display: flex;
  align-items: center;
  gap: var(--sp-6);
  padding-block: var(--sp-4);
}
.header__nav { display: none; margin-inline: auto; }
.header__actions { display: flex; align-items: center; gap: var(--sp-3); margin-inline-start: auto; }

@media (min-width: 60rem) {
  .header__nav { display: flex; gap: var(--sp-6); }
  .header__actions { margin-inline-start: 0; }
  .nav-toggle { display: none; }
}

.nav-link {
  position: relative;
  padding-block: var(--sp-2);
  font-size: var(--t-body-sm);
  font-weight: 500;
  color: var(--ink-secondary);
  text-decoration: none;
  transition: color var(--d-fast) var(--ease-out);
}
.nav-link::after {
  content: "";
  position: absolute;
  inset-block-end: 0;
  inset-inline: 0;
  height: 1px;
  background: var(--tube-core);
  box-shadow: var(--tube-edge-sm);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--d-base) var(--ease-out);
}
.nav-link:hover,
.nav-link[aria-current="page"] { color: var(--ink-primary); }
.nav-link:hover::after,
.nav-link[aria-current="page"]::after { transform: scaleX(1); }

/* Mobile-Schublade.
   Hier bewusst KEIN display: .btn liefert schon inline-flex, und die
   60rem-Regel weiter oben blendet den Knopf am Desktop aus. Eine spätere
   Regel gleicher Spezifität würde sie sonst einfach überschreiben. */
.drawer {
  position: fixed;
  inset: 0;
  z-index: var(--z-drawer);
  display: grid;
  place-items: start stretch;
  padding: var(--sp-6) var(--gutter);
  background: var(--surface-base);
  overflow-y: auto;
}
.drawer[hidden] { display: none; }
.drawer__head { display: flex; align-items: center; justify-content: space-between; margin-block-end: var(--sp-8); }
.drawer__nav { display: grid; gap: var(--sp-2); }
.drawer__nav a {
  padding: var(--sp-4) 0;
  font-family: var(--f-display);
  font-size: var(--t-h3);
  color: var(--ink-primary);
  text-decoration: none;
  border-block-end: 1px solid var(--edge-subtle);
}

/* ==========================================================================
   SECTION HEADER
   ========================================================================== */
.section-header { display: grid; gap: var(--sp-3); max-width: 44rem; margin-block-end: var(--sp-10); }
.section-header--center { margin-inline: auto; text-align: center; }
.section-header p { color: var(--ink-secondary); font-size: var(--t-body-lg); }

/* ==========================================================================
   HERO
   --------------------------------------------------------------------------
   Die Röhren liegen immer rechts der Textspalte, davor sitzt .deco-scrim.
   Kein Textkörper berührt je ein Rohr.
   ========================================================================== */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: clamp(3.5rem, 9vw, 7.5rem);
}
.hero__grid {
  position: relative;
  z-index: var(--z-content);
  display: grid;
  gap: var(--sp-10);
  align-items: center;
}
@media (min-width: 64rem) {
  .hero__grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
}
.hero__copy { display: grid; gap: var(--sp-5); max-width: 34rem; }
/* Die Größe kommt aus der t-display-*-Utility im Markup, damit pro Hero
   entschieden werden kann. Hier KEINE font-size setzen: gleiche Spezifität,
   spätere Regel - sie würde die Utility überschreiben. */
.hero__title { text-wrap: balance; }
/* KEIN GLOW AUF HEADLINES.
   Der Effekt gehört den echten Röhren, dem Logo und den Icons. Auf einer
   Display-Headline weicht er die Buchstabenkanten auf und konkurriert mit
   dem Rohr, das die Bühne trägt — dadurch wirken beide schwächer. Ein
   Akzentwort wird über das Gewicht hervorgehoben, nicht über Licht. */
.hero__lit { font-weight: 600; }
.hero__cta { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.hero__aside { position: relative; min-height: 18rem; display: grid; place-items: center; }

/* Variante: zentriert, Rohre oben und unten, Scrim von unten */
.hero--center { text-align: center; }
.hero--center .hero__grid { grid-template-columns: 1fr; justify-items: center; }
.hero--center .hero__copy { justify-items: center; max-width: 46rem; }
.hero--center .hero__cta { justify-content: center; }

/* Variante: die Bildmarke ist die Lichtquelle, aus der das Rohr austritt */
.hero__source {
  position: relative;
  display: grid;
  place-items: center;
  width: clamp(9rem, 22vw, 15rem);
  aspect-ratio: 1;
  color: var(--tube-core);
}
.hero__source svg { width: 100%; height: auto; filter: var(--tube-stroke-lg); }

/* ==========================================================================
   KPI · Kennzahlen-Leiste
   ========================================================================== */
.kpi-strip {
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 60rem) { .kpi-strip { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.kpi {
  display: grid;
  gap: var(--sp-1);
  padding: var(--sp-6);
  border-radius: var(--r-lg);
  background: var(--surface-raised);
  box-shadow: var(--e-2);
}
.kpi--tube { background: transparent; box-shadow: var(--tube-edge-sm); }
.kpi__value {
  font-family: var(--f-display);
  font-size: var(--t-kpi);
  font-weight: 400;
  line-height: 1;
  letter-spacing: var(--ls-display);
  font-variant-numeric: tabular-nums;
  text-shadow: var(--tube-text-sm);
}
.kpi__label { font-size: var(--t-body-sm); color: var(--ink-secondary); }
.kpi__note  { font-size: var(--t-caption); color: var(--ink-tertiary); }

/* Kompakte Variante für den Hero */
.kpi-inline {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-6) var(--sp-8);
  padding-block-start: var(--sp-2);
}
.kpi-inline > div { display: grid; gap: var(--sp-1); }
.kpi-inline .kpi__value { font-size: clamp(1.75rem, 3.5vw, 2.5rem); }
.kpi-inline .kpi__label { font-size: var(--t-caption); }

/* ==========================================================================
   TRUST-STRIP · Logo-Laufband
   ========================================================================== */
.marquee {
  position: relative;
  overflow: hidden;
  padding-block: var(--sp-6);
  /* Weiche Kanten, damit Logos nicht abrupt abgeschnitten werden */
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee__track {
  display: flex;
  width: max-content;
  gap: var(--sp-12);
  animation: marquee-scroll 38s linear infinite;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .marquee { mask-image: none; overflow-x: auto; }
  .marquee__track { animation: none; }
}
.marquee__item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  color: var(--ink-tertiary);
  font-size: var(--t-body-sm);
  font-weight: 500;
  white-space: nowrap;
  transition: color var(--d-fast) var(--ease-out);
}
.marquee__item:hover { color: var(--ink-primary); }
.marquee__item svg { width: 1.25rem; height: 1.25rem; }

/* ==========================================================================
   SERVICE-KARTEN · Meta groß, die übrigen kompakt
   ========================================================================== */
.services {
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: 1fr;
}
@media (min-width: 48rem)  { .services { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem)  { .services { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.service {
  position: relative;
  display: grid;
  align-content: start;
  gap: var(--sp-4);
  padding: var(--sp-8) var(--sp-6);
  border-radius: var(--r-lg);
  background: var(--surface-raised);
  box-shadow: var(--e-2);
  transition: box-shadow var(--d-base) var(--ease-out), transform var(--d-base) var(--ease-out);
}
.service:hover { transform: translateY(-4px); box-shadow: var(--e-3); }
.service__head { display: flex; align-items: center; gap: var(--sp-4); }
.service h3 { font-size: var(--t-h3); }
.service p { color: var(--ink-secondary); font-size: var(--t-body-sm); }
.service__list { display: grid; gap: var(--sp-2); font-size: var(--t-body-sm); color: var(--ink-secondary); }
.service__list li { display: grid; grid-template-columns: 1.25rem 1fr; gap: var(--sp-2); align-items: start; }
.service__list svg { width: 1.25rem; height: 1.25rem; color: var(--tube-core); }

/* Die hervorgehobene Karte: über zwei Spalten, Röhrenkante statt Schatten. */
.service--featured {
  background: transparent;
  box-shadow: var(--tube-edge-md);
  padding: var(--sp-10) var(--sp-8);
}
.service--featured:hover { box-shadow: var(--tube-edge-lg); }
.service--featured h3 { font-size: var(--t-h2); }
@media (min-width: 48rem) { .service--featured { grid-column: span 2; } }
@media (min-width: 64rem) { .service--featured { grid-column: span 3; } }
@media (min-width: 64rem) {
  .service--featured { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-8) var(--sp-10); align-items: start; }
  .service--featured .service__head { grid-column: 1 / -1; }
}
.service__flag {
  align-self: start;
  justify-self: start;   /* sonst zieht das Grid die Pille auf Spaltenbreite */
  padding: var(--sp-1) var(--sp-3);
  border-radius: var(--r-pill);
  background: var(--cta-fill);
  color: var(--cta-ink);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ==========================================================================
   MEDIA · Foto- und Videostrecke
   ========================================================================== */
.media-grid {
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 48rem) { .media-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.media {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-lg);
  background: var(--surface-sunken);
  box-shadow: var(--e-2);
  aspect-ratio: var(--media-ratio, 9 / 16);
}
.media--wide { --media-ratio: 16 / 9; grid-column: span 2; }
.media img,
.media video { width: 100%; height: 100%; object-fit: cover; }
.media__meta {
  position: absolute;
  inset-block-end: 0;
  inset-inline: 0;
  padding: var(--sp-8) var(--sp-4) var(--sp-4);
  background: linear-gradient(transparent, rgb(5 5 5 / 0.85));
  color: #fff;
  font-size: var(--t-caption);
}
.media__play {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  translate: -50% -50%;
  display: grid;
  place-items: center;
  width: 3.25rem;
  aspect-ratio: 1;
  border: 0;
  border-radius: var(--r-pill);
  background: rgb(255 255 255 / 0.14);
  backdrop-filter: blur(6px);
  color: #fff;
  cursor: pointer;
  box-shadow: 0 0 0 1px rgb(255 255 255 / 0.5), 0 0 18px rgb(240 246 255 / 0.4);
}
/* Platzhalterfläche, solange kein echtes Material vorliegt */
.media--placeholder {
  display: grid;
  place-items: center;
  background:
    repeating-linear-gradient(45deg,
      rgb(255 255 255 / 0.03) 0 10px,
      transparent 10px 20px),
    var(--surface-raised);
  color: var(--ink-tertiary);
  font-size: var(--t-caption);
  text-align: center;
  padding: var(--sp-4);
}

/* ==========================================================================
   TESTIMONIAL
   ========================================================================== */
.quotes { display: grid; gap: var(--sp-4); grid-template-columns: 1fr; }
@media (min-width: 60rem) { .quotes { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.quote {
  display: grid;
  align-content: space-between;
  gap: var(--sp-6);
  padding: var(--sp-8) var(--sp-6);
  border-radius: var(--r-lg);
  background: var(--surface-raised);
  box-shadow: var(--e-2);
}
.quote__mark { width: 2rem; height: 2rem; color: var(--tube-core); filter: var(--tube-stroke-sm); }
.quote blockquote { font-size: var(--t-body-lg); line-height: var(--lh-normal); }
.quote__by { display: flex; align-items: center; gap: var(--sp-3); }
.quote__avatar {
  width: 2.75rem; aspect-ratio: 1; flex: none;
  border-radius: var(--r-pill);
  background: var(--surface-sunken);
  display: grid; place-items: center;
  font-size: var(--t-body-sm); font-weight: 600; color: var(--ink-secondary);
  box-shadow: var(--e-1);
}
.quote__name { font-size: var(--t-body-sm); font-weight: 600; }
.quote__role { font-size: var(--t-caption); color: var(--ink-tertiary); }

/* ==========================================================================
   PROZESS · Zeitachse mit glühender Linie
   ========================================================================== */
.timeline { position: relative; display: grid; gap: var(--sp-10); padding-inline-start: var(--sp-8); }
.timeline::before {
  content: "";
  position: absolute;
  inset-block: 0.5rem 1rem;
  inset-inline-start: 0;
  width: 1px;
  background: var(--tube-core);
  opacity: 0.45;
  box-shadow: 0 0 8px rgb(var(--c-glow-tint) / 0.4);
}
[data-theme="light"] .timeline::before,
.theme-light .timeline::before { opacity: 0.9; box-shadow: 1px 0 3px rgb(var(--c-shade-tint) / 0.2); }

.timeline__step { position: relative; display: grid; gap: var(--sp-2); }
.timeline__step::before {
  content: "";
  position: absolute;
  inset-block-start: 0.45rem;
  inset-inline-start: calc(-1 * var(--sp-8));
  translate: -50% 0;
  width: 0.7rem; aspect-ratio: 1;
  border-radius: var(--r-pill);
  background: var(--surface-base);
  box-shadow: var(--tube-edge-sm);
}
.timeline__num {
  font-family: var(--f-mono);
  font-size: var(--t-caption);
  color: var(--ink-tertiary);
  letter-spacing: 0.08em;
}
.timeline__step p { color: var(--ink-secondary); font-size: var(--t-body-sm); max-width: 52ch; }

/* ==========================================================================
   FAQ · natives details/summary, kein JavaScript
   ========================================================================== */
.faq { display: grid; gap: var(--sp-2); max-width: 52rem; }
.faq details { border-block-end: 1px solid var(--edge-subtle); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
  padding-block: var(--sp-5);
  font-family: var(--f-display);
  font-size: var(--t-h4);
  font-weight: 500;
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary svg { width: 1.25rem; height: 1.25rem; flex: none; color: var(--ink-secondary); transition: rotate var(--d-base) var(--ease-out); }
.faq details[open] summary svg { rotate: 180deg; }
.faq details > p { padding-block-end: var(--sp-5); color: var(--ink-secondary); max-width: 62ch; }

/* ==========================================================================
   FORMULAR · die Conversion
   ========================================================================== */
.form { display: grid; gap: var(--sp-5); }
.form__row { display: grid; gap: var(--sp-5); }
@media (min-width: 40rem) { .form__row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.field { display: grid; gap: var(--sp-2); }
.field__label { font-size: var(--t-body-sm); font-weight: 500; color: var(--ink-secondary); }
.field__req { color: var(--ink-tertiary); font-weight: 400; }

.field :is(input, select, textarea) {
  width: 100%;
  padding: var(--sp-4) var(--sp-5);
  border: 0;
  border-radius: var(--r-md);
  background: transparent;
  color: var(--ink-primary);
  box-shadow: var(--tube-edge-sm);
  transition: box-shadow var(--d-base) var(--ease-out);
}
.field textarea { min-height: 8rem; resize: vertical; border-radius: var(--r-sm); }
.field :is(input, select, textarea)::placeholder { color: var(--ink-tertiary); }
.field :is(input, select, textarea):hover { box-shadow: var(--tube-edge-md); }
.field :is(input, select, textarea):focus-visible {
  outline: none;
  box-shadow: var(--tube-edge-md), 0 0 0 3px var(--tube-core);
}
/* :user-invalid meldet erst nach der Eingabe, nicht beim Laden */
.field :is(input, select, textarea):user-invalid {
  box-shadow: 0 0 0 1.5px var(--c-danger), 0 0 12px rgb(255 90 90 / 0.25);
}
.field__error { display: none; font-size: var(--t-caption); color: var(--c-danger); }
.field :is(input, select, textarea):user-invalid ~ .field__error { display: flex; gap: var(--sp-2); align-items: center; }

.choice-set { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.choice { position: relative; }
.choice input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.choice span {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-5);
  border-radius: var(--r-pill);
  font-size: var(--t-body-sm); font-weight: 500;
  color: var(--ink-secondary);
  box-shadow: 0 0 0 1px var(--edge-subtle);
  transition: box-shadow var(--d-fast) var(--ease-out), color var(--d-fast) var(--ease-out);
}
.choice span svg { width: 1rem; height: 1rem; }
.choice input:checked + span { color: var(--ink-primary); box-shadow: var(--tube-edge-sm); }
.choice input:focus-visible + span { box-shadow: var(--tube-edge-md), 0 0 0 3px var(--tube-core); }

.consent { display: grid; grid-template-columns: 1.25rem 1fr; gap: var(--sp-3); align-items: start; }
.consent input { width: 1.25rem; height: 1.25rem; accent-color: var(--tube-core); margin-block-start: 0.2em; }
.consent label { font-size: var(--t-body-sm); color: var(--ink-secondary); }
.consent a { color: var(--ink-primary); }

/* Honeypot: für Menschen und Screenreader unsichtbar, für Bots sichtbar */
.honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form__note { font-size: var(--t-caption); color: var(--ink-tertiary); }

/* ==========================================================================
   CTA-BAND
   ========================================================================== */
.cta-band {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  gap: var(--sp-6);
  justify-items: center;
  text-align: center;
  padding: clamp(2.5rem, 7vw, 5rem) var(--sp-6);
  border-radius: var(--r-xl);
  background: var(--surface-raised);
  box-shadow: var(--e-3);
}
.cta-band > * { position: relative; z-index: var(--z-content); }
.cta-band h2 { font-size: var(--t-h1); max-width: 30ch; }
.cta-band p { color: var(--ink-secondary); max-width: 52ch; }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.footer { padding-block: var(--sp-16) var(--sp-8); border-block-start: 1px solid var(--edge-subtle); }
.footer__grid { display: grid; gap: var(--sp-10); }
@media (min-width: 48rem) { .footer__grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; } }
.footer__col { display: grid; gap: var(--sp-3); align-content: start; }
.footer__col h3 { font-family: var(--f-text); font-size: var(--t-caption); font-weight: 600; letter-spacing: var(--ls-overline); text-transform: uppercase; color: var(--ink-tertiary); }
.footer__col a { font-size: var(--t-body-sm); color: var(--ink-secondary); text-decoration: none; }
.footer__col a:hover { color: var(--ink-primary); }
.footer__bottom {
  display: flex; flex-wrap: wrap; gap: var(--sp-4);
  justify-content: space-between; align-items: center;
  margin-block-start: var(--sp-12); padding-block-start: var(--sp-6);
  border-block-start: 1px solid var(--edge-subtle);
  font-size: var(--t-caption); color: var(--ink-tertiary);
}
.footer__social { display: flex; gap: var(--sp-3); }
.footer__social a { display: grid; place-items: center; width: 2.25rem; aspect-ratio: 1; border-radius: var(--r-pill); color: var(--ink-secondary); box-shadow: 0 0 0 1px var(--edge-subtle); }
.footer__social a:hover { color: var(--ink-primary); box-shadow: var(--tube-edge-sm); }
.footer__social svg { width: 1rem; height: 1rem; }

/* ==========================================================================
   STICKY MOBILE CTA
   ========================================================================== */
.sticky-cta {
  position: fixed;
  inset-block-end: 0; inset-inline: 0;
  z-index: var(--z-sticky);
  display: flex; gap: var(--sp-3); align-items: center;
  padding: var(--sp-3) var(--gutter) max(var(--sp-3), env(safe-area-inset-bottom));
  background: var(--surface-overlay);
  backdrop-filter: blur(16px);
  border-block-start: 1px solid var(--edge-subtle);
}
.sticky-cta__text { font-size: var(--t-caption); color: var(--ink-secondary); }
@media (min-width: 60rem) { .sticky-cta { display: none; } }

/* ==========================================================================
   HERO-VARIANTEN
   ========================================================================== */

/* -- A · Die Bildmarke als Lichtquelle ---------------------------------- */
/* Das Rohr tritt aus der Birne aus. Die Marke versorgt die Seite mit Licht. */
.hero--source .hero__aside { justify-items: center; }
.hero--source .hero__beam {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 46%;
  width: 78vw;
  translate: 0 -46%;
  color: var(--tube-core);
  opacity: 0.8;
  filter: var(--tube-stroke-lg);
  pointer-events: none;
}
[data-theme="light"] .hero--source .hero__beam,
.theme-light .hero--source .hero__beam { opacity: 0.22; }

/* -- C · Die Wachstumskurve -------------------------------------------- */
/* Die Röhre IST die Kurve. Die Kennzahlen sitzen NEBEN der Linie, nie darauf. */
.hero--curve .hero__chart { position: relative; width: 100%; max-width: 34rem; margin-inline: auto; }
.hero--curve .hero__chart svg {
  width: 100%;
  height: auto;
  color: var(--tube-core);
  filter: var(--tube-stroke-lg);
}
.hero__point {
  position: absolute;
  display: grid;
  gap: 0.1rem;
  translate: -50% 0;
  white-space: nowrap;
  pointer-events: none;
}
.hero__point b {
  font-family: var(--f-display);
  font-size: clamp(1.125rem, 2.4vw, 1.5rem);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  text-shadow: var(--tube-text-sm);
}
.hero__point span { font-size: 0.6875rem; color: var(--ink-secondary); letter-spacing: 0.04em; }

/* Kurven-Grundlinie, damit die Kurve nicht im Nichts hängt */
.hero--curve .hero__baseline {
  position: absolute;
  inset-block-end: 8%;
  inset-inline: 2% 0;
  height: 1px;
  background: var(--edge-subtle);
}

/* ==========================================================================
   HERO — Variante "Bühne"
   --------------------------------------------------------------------------
   Zwei Bühnen, ein Markup. Dark ist Referenzbild 3: die Röhre läuft über die
   volle Breite und trägt die Sektion. Light ist Referenzbild 1: eine schwere
   Kontur-Illustration rechts, viel Weißraum, der Text hat die linke Spalte
   für sich. Umgeschaltet wird über .theme-only--*, nicht über zwei Layouts.
   ========================================================================== */
.hero--stage { padding-block: clamp(4rem, 10vw, 8.5rem); }

.hero__stage {
  position: absolute;
  inset: 0;
  z-index: var(--z-deco);
  color: var(--tube-core);
  pointer-events: none;
  filter: var(--tube-stroke-lg);
  opacity: 0.92;
}
.hero__stage svg { width: 100%; height: 100%; display: block; }

/* Der Scrim ist hier nicht Kosmetik: er garantiert, dass die Röhre hinter
   der Textspalte auf die Flächenfarbe zurückfällt, egal wie breit das
   Fenster ist. */
.hero--stage .deco-scrim {
  --scrim-x: 26%;
  --scrim-y: 46%;
}

.hero__contour {
  width: min(100%, 24rem);
  margin-inline: auto;
  color: var(--tube-core);
  filter: var(--tube-stroke-lg);
}
.hero__contour svg { width: 100%; height: auto; display: block; }

.hero--stage .hero__copy { max-width: 36rem; }
.hero__eyebrow { display: flex; align-items: center; gap: var(--sp-3); }
.hero__eyebrow::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--edge-subtle);
  max-width: 6rem;
}

.hero__proof {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-5);
  font-size: var(--t-body-sm);
  color: var(--ink-secondary);
}
.hero__proof li { display: flex; align-items: center; gap: var(--sp-2); }
.hero__proof svg { width: 1.125rem; height: 1.125rem; color: var(--tube-core); flex: none; }

/* ==========================================================================
   REEL · Hochformat-Video im 9:16-Rahmen
   --------------------------------------------------------------------------
   Der stumme Loop ist die Standardfassung. Die Tonfassung wird erst geladen,
   wenn jemand sie anfordert - siehe js/media.js.
   ========================================================================== */
.reel {
  position: relative;
  margin: 0;
  aspect-ratio: 9 / 16;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--surface-sunken);
  box-shadow: var(--e-3);
  isolation: isolate;
}
.reel > video,
.reel > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.reel__tag {
  position: absolute;
  inset-block-start: var(--sp-3);
  inset-inline-start: var(--sp-3);
  padding: var(--sp-1) var(--sp-3);
  border-radius: var(--r-pill);
  font-size: var(--t-caption);
  letter-spacing: var(--ls-overline);
  text-transform: uppercase;
  color: var(--c-white);
  background: rgb(0 0 0 / 0.45);
  backdrop-filter: blur(6px);
}
.reel__sound {
  position: absolute;
  inset-block-end: var(--sp-3);
  inset-inline-end: var(--sp-3);
  display: grid;
  place-items: center;
  width: 2.5rem;
  aspect-ratio: 1;
  border: 0;
  border-radius: var(--r-pill);
  cursor: pointer;
  color: var(--c-white);
  background: rgb(0 0 0 / 0.45);
  backdrop-filter: blur(6px);
  transition: background var(--d-fast) var(--ease-out);
}
.reel__sound:hover { background: rgb(0 0 0 / 0.7); }
.reel__sound svg { width: 1.125rem; height: 1.125rem; }
.reel__cap {
  position: absolute;
  inset-block-end: 0;
  inset-inline: 0;
  padding: var(--sp-8) var(--sp-4) var(--sp-4);
  font-size: var(--t-body-sm);
  color: var(--c-white);
  background: linear-gradient(to top, rgb(0 0 0 / 0.72), rgb(0 0 0 / 0));
}

.hero__reel { width: min(100%, 19rem); margin-inline: auto; }

.reel-rail {
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 60rem) { .reel-rail { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ==========================================================================
   FIGURE · Foto mit Bildunterschrift
   ========================================================================== */
.figure {
  margin: 0;
  display: grid;
  gap: var(--sp-3);
}
.figure__frame {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-lg);
  background: var(--surface-sunken);
  box-shadow: var(--e-2);
  aspect-ratio: var(--figure-ratio, 3 / 4);
}
.figure__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: scale var(--d-slow) var(--ease-out);
}
a.figure:hover .figure__frame img,
.figure__frame:hover img { scale: 1.03; }
.figure--wide { --figure-ratio: 16 / 9; }
.figure--square { --figure-ratio: 1; }
.figure figcaption { font-size: var(--t-body-sm); color: var(--ink-secondary); }
.figure figcaption b { color: var(--ink-primary); font-weight: 600; }

/* ==========================================================================
   FILTER-LEISTE
   ========================================================================== */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-block-end: var(--sp-8);
}
.filter-bar button {
  padding: var(--sp-2) var(--sp-4);
  border: 0;
  border-radius: var(--r-pill);
  cursor: pointer;
  font: inherit;
  font-size: var(--t-body-sm);
  color: var(--ink-secondary);
  background: transparent;
  box-shadow: 0 0 0 1px var(--edge-subtle);
  transition: color var(--d-fast) var(--ease-out), box-shadow var(--d-fast) var(--ease-out);
}
.filter-bar button:hover { color: var(--ink-primary); }
.filter-bar button[aria-pressed="true"] {
  color: var(--ink-primary);
  box-shadow: var(--tube-edge-sm);
}

/* ==========================================================================
   ZÜNDSEQUENZ
   --------------------------------------------------------------------------
   Nur aktiv, solange js/hero-sequence.js die Klasse .hero--ignite gesetzt
   hat — also einmal pro Besuch. Der Endzustand ist der HTML-Zustand; fällt
   JS aus, steht der Hero sofort fertig da.
   ========================================================================== */
.hero--ignite .hero__stage :is(path, circle, rect, ellipse, line, polyline),
.hero--ignite .hero__contour :is(path, circle, rect, ellipse, line, polyline) {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: tube-draw 1800ms var(--ease-out) forwards;
}
.hero--ignite .hero__stage path:nth-of-type(2) { animation-delay: 200ms; }
.hero--ignite .hero__stage path:nth-of-type(3) { animation-delay: 420ms; }

.hero--ignite .hero__copy > * {
  animation: hero-rise 620ms var(--ease-out) both;
}
.hero--ignite .hero__copy > :nth-child(1) { animation-delay: 620ms; }
.hero--ignite .hero__copy > :nth-child(2) { animation-delay: 740ms; }
.hero--ignite .hero__copy > :nth-child(3) { animation-delay: 860ms; }
.hero--ignite .hero__copy > :nth-child(4) { animation-delay: 980ms; }
.hero--ignite .hero__copy > :nth-child(5) { animation-delay: 1100ms; }

.hero--ignite .hero__aside { animation: hero-rise 700ms var(--ease-out) 900ms both; }

@keyframes hero-rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .hero--ignite .hero__stage :is(path, circle, rect, ellipse, line, polyline),
  .hero--ignite .hero__contour :is(path, circle, rect, ellipse, line, polyline),
  .hero--ignite .hero__copy > *,
  .hero--ignite .hero__aside {
    animation: none;
    stroke-dashoffset: 0;
    opacity: 1;
    transform: none;
  }
}

/* Drei Kennzahlen statt vier: sonst reißt die letzte Spalte auf. */
@media (min-width: 60rem) {
  .kpi-strip--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Eine Kennzahl, die aus Worten besteht ("über 1 Mio. €"), braucht eine
   andere Skala als eine nackte Ziffer — sonst läuft sie aus der Karte. */
.kpi--wordy .kpi__value {
  font-size: clamp(1.75rem, 3.2vw, 2.625rem);
  letter-spacing: -0.015em;
  text-wrap: balance;
}

/* Schmale Viewports: die Bühne rutscht unter die Textspalte.
   Auf 400 px Breite schneidet "slice" die Kurve mitten durch den Fließtext —
   genau das, was hier nie passieren darf. Also wird die Deko-Ebene nach
   unten versetzt und der Scrim über der Textzone deckend geführt. */
@media (max-width: 63.99rem) {
  .hero__stage { inset-block-start: 46%; opacity: 0.85; }
  .hero--stage .deco-scrim {
    background: linear-gradient(
      180deg,
      rgb(var(--surface-base-rgb))        0%,
      rgb(var(--surface-base-rgb))        44%,
      rgb(var(--surface-base-rgb) / 0.5)  58%,
      rgb(var(--surface-base-rgb) / 0)    72%
    );
  }
}