/* WebsiteUpgrade: Bewegung beim Scrollen und Laden.
   Regeln: nur transform und opacity (läuft auf der GPU), alles nur ohne "Bewegung reduzieren",
   Inhalte bleiben ohne JavaScript und ohne Scroll-Timelines sichtbar.
   Zwei Schichten: (1) Einblendungen über IntersectionObserver (mo-in), (2) scrollgekoppelte Effekte über
   CSS Scroll-Driven Animations, nur wo der Browser sie kann; sonst steht der Endzustand. */

@view-transition { navigation: auto; }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }
.site-header { view-transition-name: site-header; }

@media (prefers-reduced-motion: no-preference) {

  :root { interpolate-size: allow-keywords; }

  /* ---------- Kopf: Schatten nach dem ersten Scrollen ---------- */
  .site-header { transition: box-shadow .35s var(--ease), background-color .35s var(--ease); }
  .site-header.mo-scrolled { box-shadow: 0 14px 30px -22px rgba(0, 0, 0, .9); }

  /* ---------- Lesefortschritt ---------- */
  .scroll-progress { position: fixed; inset: 0 0 auto 0; height: 2px; z-index: calc(var(--z-header) + 1); background: var(--gold); transform: scaleX(0); transform-origin: 0 50%; pointer-events: none; }
  @keyframes mo-progress { to { transform: scaleX(1); } }

  /* ---------- Hero: Wörter steigen auf, die goldene Zeile unterstreicht sich ---------- */
  .mo-w { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: .16em; margin-bottom: -.16em; padding-inline: .04em; margin-inline: -.04em; }
  .mo-wi { display: inline-block; transform: translateY(112%); animation: mo-word-up .95s var(--ease) both; animation-delay: calc(var(--i) * 70ms + 120ms); }
  @keyframes mo-word-up { to { transform: none; } }
  .hero h1 em { background: linear-gradient(var(--gold), var(--gold)) no-repeat 0 94% / 0 1.5px; animation: mo-underline 1.3s var(--ease) 1.05s both; }
  @keyframes mo-underline { to { background-size: 100% 1.5px; } }

  /* ---------- Überschriften: Zeile für Zeile aus der Maske ---------- */
  .mo .mo-ln { display: block; overflow: hidden; padding-bottom: .16em; margin-bottom: -.16em; padding-inline: .06em; margin-inline: -.06em; }
  .mo .mo-lni { display: block; transform: translateY(108%); transition: transform 1s var(--ease); transition-delay: calc(var(--l) * 110ms); }
  .mo .mo-in .mo-lni, .mo .mo-lni.mo-in { transform: none; }

  /* ---------- Einblendungen mit Staffelung ---------- */
  .mo .mo-r { opacity: 0; transform: translateY(24px); transition: opacity .8s var(--ease), transform .9s var(--ease); transition-delay: calc(var(--i, 0) * 80ms); }
  .mo .mo-r.mo-in { opacity: 1; transform: none; }
  .mo .mistake-list li.mo-r { transform: translateX(-24px); }
  .mo .mistake-list li.mo-r:nth-child(even) { transform: translateX(24px); }
  .mo .mistake-list li.mo-r.mo-in { transform: none; }
  .mo .price-plan.mo-r { transform: translateY(32px) scale(.97); }
  .mo .price-plan.mo-r.mo-in { transform: none; }

  /* gezeichnete Kreuze in der Fehlerliste */
  .mo .mistake-list h3 svg * { stroke-dasharray: 1; stroke-dashoffset: 1; }
  .mo .mistake-list li.mo-in h3 svg * { animation: mo-draw .7s var(--ease) calc(var(--i, 0) * 80ms + 260ms) forwards; }
  @keyframes mo-draw { to { stroke-dashoffset: 0; } }

  /* Prozess: Goldlinie zieht sich über jeden Schritt */
  .process-steps li::after { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px; background: var(--gold); transform: scaleX(0); transform-origin: 0 50%; transition: transform 1.2s var(--ease); transition-delay: calc(var(--i, 0) * 140ms + 150ms); }
  .process-steps li.mo-in::after { transform: scaleX(1); }

  /* Preise: Zahl zählt hoch (JS), Haken folgen, Rahmen des empfohlenen Pakets läuft einmal um */
  @property --mo-a { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
  .plan-complete::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; background: conic-gradient(from var(--mo-a), transparent 0 70%, var(--gold) 88%, transparent 100%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; opacity: 0; }
  .plan-complete.mo-in::before { animation: mo-spin 2.6s var(--ease) .5s 1 both; }
  @keyframes mo-spin { 0% { opacity: 1; --mo-a: 0deg; } 85% { opacity: 1; } 100% { opacity: 0; --mo-a: 360deg; } }

  /* FAQ: sanftes Aufklappen (wo der Browser es kann) */
  @supports selector(details::details-content) {
    .faq-list details::details-content { block-size: 0; overflow: hidden; transition: block-size .45s var(--ease), content-visibility .45s allow-discrete; }
    .faq-list details[open]::details-content { block-size: auto; }
  }

  /* Knöpfe: Pfeil rückt vor, ein heller Schimmer läuft über die Fläche */
  .button { position: relative; overflow: hidden; }
  .button::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .28) 50%, transparent 65%); transform: translateX(-130%); pointer-events: none; }
  .button:hover::after { transform: translateX(130%); transition: transform .85s var(--ease); }

  /* Formular: Felder heben sich beim Fokus */
  .form-field input, .form-field textarea { transition: border-color .25s var(--ease), box-shadow .25s var(--ease), transform .25s var(--ease); }
  .form-field input:focus, .form-field textarea:focus { transform: translateY(-1px); box-shadow: 0 10px 24px -16px rgba(229, 189, 100, .55); }

  /* ---------- Scrollgekoppelt (nur mit Scroll-Timelines) ---------- */
  @supports (animation-timeline: view()) {
    .scroll-progress { animation: mo-progress linear both; animation-timeline: scroll(root); }

    /* Hero: Überschrift weicht zurück, das Fenster mit den Arbeiten schwebt nach oben und schrumpft leicht */
    .hero h1 { animation: mo-hero-out linear both; animation-timeline: view(); animation-range: exit 0% exit 90%; }
    .showcase-frame { animation: mo-frame-out linear both; animation-timeline: view(); animation-range: exit 0% exit 100%; }
    @keyframes mo-hero-out { to { transform: translateY(42px); opacity: .35; } }
    @keyframes mo-frame-out { to { transform: translateY(-34px) scale(.965); } }

    /* Zweck: die drei Aussagen leuchten auf, wenn sie in die Mitte kommen; eine Goldlinie wächst mit */
    .purpose-details { position: relative; }
    .quality-line { animation: mo-focus linear both; animation-timeline: view(); animation-range: entry 15% cover 50%; }
    @keyframes mo-focus { from { opacity: .3; transform: translateX(-16px); } to { opacity: 1; transform: none; } }
    @media (min-width: 900px) {
      .purpose-details::before { content: ""; position: absolute; left: -38px; top: 0; bottom: 0; width: 1px; background: var(--gold); transform: scaleY(0); transform-origin: 50% 0; animation: mo-grow linear both; animation-timeline: view(); animation-range: entry 25% cover 60%; }
    }
    @keyframes mo-grow { to { transform: scaleY(1); } }

    /* Preise und Kontakt: Karten kommen leicht versetzt nach oben */
    .price-grid { animation: mo-rise linear both; animation-timeline: view(); animation-range: entry 0% entry 55%; }
    @keyframes mo-rise { from { transform: translateY(40px); } to { transform: none; } }
  }
}

@media (prefers-reduced-motion: reduce) {
  .scroll-progress { display: none; }
}

/* Ersatz für die Goldlinie bei "Dein Betrieb ist kein Standard" ohne Scroll-Timelines */
@media (prefers-reduced-motion: no-preference) and (min-width: 900px) {
  .mo-js .purpose-details { position: relative; }
  .mo-js .purpose-details::before { content: ""; position: absolute; left: -38px; top: 0; bottom: 0; width: 1px; background: var(--gold); transform: scaleY(var(--mo-line, 0)); transform-origin: 50% 0; }
}