/* ============================================================
   modern.css — neue CSS-Features (2026)
   1) Renn-Flaggen-Wipe: gelbe Streifen swipen einmal R→L
   2) Cross-Document View Transitions (@view-transition)
   3) Same-Document View Transitions (Formular-Schritte)
   4) Scroll-getriebene Reveals (animation-timeline: view())
   5) Kleinteile: Stepper-Check, Dropzone-States, disabled-Buttons
   ============================================================ */

/* ---------- 0) Scroll-Fortschritt — gelbe Tacho-Linie oben ----------
   Reines CSS (animation-timeline: scroll()). Ohne Browser-Support bleibt
   die Linie unsichtbar (scaleX(0)) — keine JS-Fallbacks nötig. */
.kb-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 101;
  background: linear-gradient(90deg, var(--kb-yellow), var(--kb-yellow-hover));
  transform: scaleX(0); transform-origin: 0 50%;
  pointer-events: none;
}
@supports (animation-timeline: scroll()) {
  .kb-progress {
    animation: kb-progress-grow linear both;
    animation-timeline: scroll();
  }
}
@keyframes kb-progress-grow {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* ---------- 1) Renn-Flaggen-Wipe ---------- */
.kb-wipe {
  position: fixed; inset: 0; z-index: 999;
  pointer-events: none; overflow: hidden;
}
.kb-wipe__svg {
  position: absolute; top: -2%; left: 0;
  width: 100%; height: 104%;
  transform: translateX(120%);
  animation: kb-wipe-sweep 1.05s cubic-bezier(0.7, 0, 0.18, 1) 0.15s forwards;
  filter: drop-shadow(-12px 0 24px rgba(10, 10, 10, 0.25));
}
@keyframes kb-wipe-sweep {
  from { transform: translateX(120%); }
  to   { transform: translateX(-135%); }
}
@media (prefers-reduced-motion: reduce) {
  .kb-wipe { display: none; }
}

/* ---------- 2) Cross-Document View Transitions ---------- */
/* Vorgehen nach rotecodefraktion.de: Opt-in + alle Regeln im
   reduced-motion-Query. Es slidet NUR der Seiteninhalt (<main> =
   page-content), die Navigation bleibt stehen. Footer-Links morphen
   per Shared-Element-Name in die Überschrift der Unterseite. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition {
    navigation: auto;
  }

  /* Header bleibt als eigene Gruppe an Ort und Stelle (morpht nur) */
  .kb-header { view-transition-name: kb-header; }

  /* Nur der Inhalt gleitet */
  main { view-transition-name: page-content; }

  ::view-transition-group(page-content) {
    animation-duration: 0.4s;
    animation-timing-function: cubic-bezier(0.45, 0, 0.2, 1);
  }
  ::view-transition-old(page-content) {
    animation-name: kb-page-slide-out;
  }
  ::view-transition-new(page-content) {
    animation-name: kb-page-slide-in;
  }

  /* Shared-Element-Morph: Footer-Link → große Überschrift der Unterseite.
     Namen müssen pro Seite eindeutig sein — daher je Ziel ein eigener. */
  .kb-footer a[href="impressum.html"],   #vt-impressum   { view-transition-name: vt-impressum; }
  .kb-footer a[href="datenschutz.html"], #vt-datenschutz { view-transition-name: vt-datenschutz; }
  .kb-footer a[href="ueber-uns.html"],   #vt-ueber-uns   { view-transition-name: vt-ueber-uns; }

  ::view-transition-group(vt-impressum),
  ::view-transition-group(vt-datenschutz),
  ::view-transition-group(vt-ueber-uns) {
    animation-duration: 0.45s;
    animation-timing-function: cubic-bezier(0.45, 0, 0.2, 1);
  }
  /* Geometrie der Snapshots vereinheitlichen (Safari-Jank-Fix aus dem Artikel) */
  ::view-transition-old(vt-impressum), ::view-transition-new(vt-impressum),
  ::view-transition-old(vt-datenschutz), ::view-transition-new(vt-datenschutz),
  ::view-transition-old(vt-ueber-uns), ::view-transition-new(vt-ueber-uns) {
    height: 100%;
    width: 100%;
  }
}
@keyframes kb-page-slide-out {
  to { translate: -100vw 0; }
}
@keyframes kb-page-slide-in {
  from { translate: 100vw 0; }
}

/* ---------- 3) Same-Document View Transition: Formular ---------- */
/* form.js wrappt Schrittwechsel in document.startViewTransition().
   Das Formular bekommt einen eigenen Snapshot und gleitet sauber. */
.kb-form { view-transition-name: kb-form-card; }
@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(kb-form-card) {
    animation: kb-step-out 180ms var(--kb-ease) both;
  }
  ::view-transition-new(kb-form-card) {
    animation: kb-step-in 260ms var(--kb-ease) both;
  }
}
@keyframes kb-step-out {
  to { opacity: 0; transform: translateY(-10px); }
}
@keyframes kb-step-in {
  from { opacity: 0; transform: translateY(14px); }
}

/* ---------- 4) Scroll-getriebene Reveals (reines CSS) ---------- */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .kb-shead,
    .kb-price-item,
    .kb-combo,
    .kb-faq__item,
    .kb-footer__top {
      animation: kb-scroll-rise both;
      animation-timeline: view();
      animation-range: entry 0% entry 38%;
    }
  }
}
@keyframes kb-scroll-rise {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---------- 4b) Hero-Entrance: gestaffeltes Aufsteigen (einmalig) ----------
   Endzustand ist der Basiszustand; animiert wird NUR aus dem Verborgenen,
   gated auf prefers-reduced-motion. Verzögert, bis der Wipe vorbeigezogen ist. */
@media (prefers-reduced-motion: no-preference) {
  .kb-hero__eyebrow,
  .kb-hero__title .fill,
  .kb-hero__title .outline,
  .kb-hero__ctas {
    animation: kb-hero-rise 700ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
  }
  .kb-hero__eyebrow { animation-delay: 0.45s; }
  .kb-hero__title .fill:first-child { animation-delay: 0.55s; }
  .kb-hero__title .outline { animation-delay: 0.65s; }
  .kb-hero__title .fill:last-child { animation-delay: 0.75s; }
  .kb-hero__ctas { animation-delay: 0.9s; }
}
@keyframes kb-hero-rise {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---------- 5) Kleinteile ---------- */

/* Stepper: Nummer vs. Check rein über Klassen (kein DOM-Bau nötig) */
.kb-stepper__dot .check { display: none; width: 14px; height: 14px; }
.kb-stepper__dot.is-done .check { display: block; }
.kb-stepper__dot.is-done .num { display: none; }

/* Dropzone: leerer Zustand vs. Datei-Chip */
.kb-dropzone__empty { display: contents; }
.kb-dropzone.has-file .kb-dropzone__empty { display: none; }

/* Buttons: disabled-State zentral statt Inline-Styles */
.kb-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

/* Live-Karten: verpixelt-geblurrte Video-Placeholder als CSS-Varianten */
.kb-card--v1 .kb-card__bg { background-image: radial-gradient(ellipse at 30% 40%, hsl(14 60% 32%) 0%, transparent 60%), radial-gradient(ellipse at 70% 70%, hsl(44 55% 25%) 0%, transparent 55%), linear-gradient(135deg, hsl(14 30% 16%) 0%, #0a0a0a 100%); }
.kb-card--v2 .kb-card__bg { background-image: radial-gradient(ellipse at 30% 40%, hsl(0 60% 32%) 0%, transparent 60%), radial-gradient(ellipse at 70% 70%, hsl(30 55% 25%) 0%, transparent 55%), linear-gradient(135deg, hsl(0 30% 16%) 0%, #0a0a0a 100%); }
.kb-card--v3 .kb-card__bg { background-image: radial-gradient(ellipse at 30% 40%, hsl(38 60% 32%) 0%, transparent 60%), radial-gradient(ellipse at 70% 70%, hsl(68 55% 25%) 0%, transparent 55%), linear-gradient(135deg, hsl(38 30% 16%) 0%, #0a0a0a 100%); }
.kb-card--v4 .kb-card__bg { background-image: radial-gradient(ellipse at 30% 40%, hsl(196 60% 32%) 0%, transparent 60%), radial-gradient(ellipse at 70% 70%, hsl(226 55% 25%) 0%, transparent 55%), linear-gradient(135deg, hsl(196 30% 16%) 0%, #0a0a0a 100%); }
.kb-card--v5 .kb-card__bg { background-image: radial-gradient(ellipse at 30% 40%, hsl(280 60% 32%) 0%, transparent 60%), radial-gradient(ellipse at 70% 70%, hsl(310 55% 25%) 0%, transparent 55%), linear-gradient(135deg, hsl(280 30% 16%) 0%, #0a0a0a 100%); }
.kb-card--v6 .kb-card__bg { background-image: radial-gradient(ellipse at 30% 40%, hsl(100 60% 32%) 0%, transparent 60%), radial-gradient(ellipse at 70% 70%, hsl(130 55% 25%) 0%, transparent 55%), linear-gradient(135deg, hsl(100 30% 16%) 0%, #0a0a0a 100%); }

/* „Jetzt anfragen"-Ankunft: Formular schwingt nach dem Wipe ein */
.kb-form.kb-arrive {
  animation: kb-arrive-pop 640ms var(--kb-ease) both;
}
@keyframes kb-arrive-pop {
  0%   { opacity: 0.4; transform: translateY(26px) scale(0.97); }
  55%  { opacity: 1; transform: translateY(-4px) scale(1.005); box-shadow: 0 0 0 6px var(--kb-yellow-soft); }
  100% { opacity: 1; transform: translateY(0) scale(1); box-shadow: 0 0 0 0 rgba(245, 197, 24, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .kb-form.kb-arrive { animation: none; }
}

/* Unterseiten (Impressum / Datenschutz / Über uns) */
.kb-subpage {
  min-height: 72vh;
  padding-top: 152px;
  padding-bottom: 96px;
  display: flex; flex-direction: column; align-items: flex-start; gap: 16px;
}
.kb-subpage .kb-shead__title { font-size: clamp(36px, 6vw, 72px); }
.kb-subpage__hint {
  font-family: var(--kb-font-mono); font-size: 12px;
  color: var(--kb-fg-3); letter-spacing: 0.08em; text-transform: uppercase;
  border: 1px dashed var(--kb-border-2); border-radius: var(--kb-r-sm);
  padding: 10px 14px;
}