/* ==========================================================================
   DP-Dynamic · Bewegung beim Scrollen

   Aufbau in drei Schichten:

   1. Einblenden beim Eintritt (JS: dp-animation.js setzt .ist-da)
      Mehrere Spielarten, damit nicht jeder Abschnitt gleich hereinkommt.
   2. Gestaffelte Kinder (--stufe wird vom Skript gesetzt)
   3. Scroll-gebundene Effekte ohne JavaScript, über animation-timeline.
      Wo der Browser das nicht kann, passiert schlicht nichts — die Seite
      bleibt vollständig bedienbar.

   Grundregel: Bewegung hat eine Aufgabe. Sie ordnet die Reihenfolge, zeigt
   Fortschritt oder gibt Rückmeldung. Nichts läuft in Endlosschleife.
   ========================================================================== */

:root {
  --dp-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dp-ease-weich: cubic-bezier(0.33, 1, 0.68, 1);
  --dp-dauer: 780ms;
  --dp-dauer-kurz: 460ms;
}

/* --------------------------------------------------------------------------
   1 · Eintritt
   -------------------------------------------------------------------------- */
[data-anim] {
  opacity: 0;
  will-change: opacity, transform;
  transition:
    opacity var(--dp-dauer) var(--dp-ease) var(--dp-verzug, 0ms),
    transform var(--dp-dauer) var(--dp-ease) var(--dp-verzug, 0ms),
    clip-path var(--dp-dauer) var(--dp-ease) var(--dp-verzug, 0ms),
    filter var(--dp-dauer) var(--dp-ease) var(--dp-verzug, 0ms);
}

/* Von unten herein. Der Standard für Fließtext und Karten. */
[data-anim="auf"]    { transform: translate3d(0, 28px, 0); }

/* Von der Seite. Für Inhalte, die neben einem Bild stehen. */
[data-anim="links"]  { transform: translate3d(-34px, 0, 0); }
[data-anim="rechts"] { transform: translate3d(34px, 0, 0); }

/* Leichtes Heranfahren. Für Bilder und Medienflächen. */
[data-anim="zoom"]   { transform: scale(1.045); }

/* Vorhang: der Inhalt wird von unten freigegeben. Für Überschriften. */
[data-anim="maske"] {
  clip-path: inset(0 0 100% 0);
  transform: translate3d(0, 14px, 0);
}

/* Weichzeichner, der scharf stellt. Sparsam, nur für Schlüsselbilder. */
[data-anim="scharf"] {
  filter: blur(9px);
  transform: scale(1.02);
}

[data-anim].ist-da {
  opacity: 1;
  transform: none;
  clip-path: inset(0 0 0 0);
  filter: none;
}

/* Nach dem Eintritt wird will-change zurückgenommen, sonst hält der Browser
   für jede Kachel dauerhaft eine eigene Ebene vor. */
[data-anim].ist-fertig { will-change: auto; }

/* --------------------------------------------------------------------------
   2 · Gestaffelte Kinder
   Das Skript vergibt --stufe je Kind. Die Reihenfolge wird dadurch lesbar,
   statt dass zehn Kacheln gleichzeitig aufblitzen.
   -------------------------------------------------------------------------- */
[data-stufen] > * {
  opacity: 0;
  transform: translate3d(0, 22px, 0);
  will-change: opacity, transform;
  transition:
    opacity var(--dp-dauer-kurz) var(--dp-ease) calc(var(--stufe, 0) * 70ms),
    transform var(--dp-dauer-kurz) var(--dp-ease) calc(var(--stufe, 0) * 70ms);
}
[data-stufen].ist-da > * { opacity: 1; transform: none; }
[data-stufen].ist-fertig > * { will-change: auto; }

/* --------------------------------------------------------------------------
   3 · Zahlen, die hochlaufen
   -------------------------------------------------------------------------- */
[data-zahl] { font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------------------
   4 · Fortschrittsbalken am oberen Rand
   Zeigt, wie weit die Seite gelesen ist. Ohne JavaScript, rein über die
   Scroll-Zeitleiste des Browsers.
   -------------------------------------------------------------------------- */
.dp-fortschritt {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 2px;
  z-index: 60;
  background: transparent;
  pointer-events: none;
}
.dp-fortschritt span {
  display: block;
  height: 100%;
  width: 100%;
  transform-origin: 0 50%;
  transform: scaleX(0);
  background: linear-gradient(90deg, #FF9600, #FFB454);
}

/* Der Füllstand steckt in --dp-gelesen (0 bis 1) und wird von dp-nav.js
   gesetzt. Eine reine CSS-Scroll-Zeitleiste wäre eleganter, ließ sich hier
   aber nicht zuverlässig prüfen, und ein Balken, dessen Funktion man nicht
   nachweisen kann, ist keiner. */
.dp-fortschritt span {
  transform: scaleX(var(--dp-gelesen, 0));
}

/* --------------------------------------------------------------------------
   5 · Ruhiger Parallaxversatz für Schlüsselbilder
   Ebenfalls scroll-gebunden und ohne JavaScript. Der Versatz ist klein
   gehalten: er soll Tiefe andeuten, nicht auffallen.
   -------------------------------------------------------------------------- */
@supports (animation-timeline: view()) {
  [data-parallax] {
    animation: dp-parallax linear both;
    animation-timeline: view(block);
    animation-range: entry 0% exit 100%;
  }
  @keyframes dp-parallax {
    from { transform: translate3d(0, 22px, 0); }
    to   { transform: translate3d(0, -22px, 0); }
  }
}

/* --------------------------------------------------------------------------
   6 · Rückmeldung beim Bedienen
   -------------------------------------------------------------------------- */
.btn-primary, .btn-ghost, .dp-menue-liste a, .fuss-liste a {
  transition: background-color 0.28s var(--dp-ease),
              border-color 0.28s var(--dp-ease),
              color 0.28s var(--dp-ease),
              transform 0.18s var(--dp-ease),
              box-shadow 0.28s var(--dp-ease);
}
.btn-primary:active, .btn-ghost:active { transform: translateY(1px) scale(0.99); }

/* Karten heben sich beim Überfahren etwas deutlicher, aber ruhig. */
.card-hover { transition: transform 0.5s var(--dp-ease-weich), border-color 0.4s, background-color 0.4s; }

/* --------------------------------------------------------------------------
   7 · Reduzierte Bewegung
   Alles wird sofort sichtbar, nichts bewegt sich. Kein Inhalt darf von der
   Einstellung abhängen.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  [data-anim],
  [data-stufen] > * {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
    filter: none !important;
    transition: none !important;
    will-change: auto !important;
  }
  .dp-fortschritt { display: none; }
  [data-parallax] { animation: none !important; transform: none !important; }
  .btn-primary:active, .btn-ghost:active { transform: none; }
}

/* --------------------------------------------------------------------------
   8 · Ablauf: die Ziffernscheibe ist ein Knoten auf der Linie
   Sie muss decken. Vorher trug sie `glass-strong` (halbtransparent), und der
   Hover ersetzte die Fläche durch zehn Prozent Deckkraft -- dadurch schien
   die Verbindungslinie mitten durch die Scheibe.
   -------------------------------------------------------------------------- */
.ablauf-marke {
  background: var(--bg);
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow);
  transition: background-color 0.3s var(--dp-ease),
              border-color 0.3s var(--dp-ease);
}
.group:hover .ablauf-marke {
  /* Deckender Farbauftrag statt Alphawert, damit nichts durchscheint. */
  background: color-mix(in srgb, #FF9600 12%, var(--bg));
  border-color: rgba(255, 150, 0, 0.45);
}
@supports not (background: color-mix(in srgb, red 10%, blue)) {
  .group:hover .ablauf-marke { background: var(--surface-strong, var(--bg)); }
}

/* --------------------------------------------------------------------------
   9 · Markenclaim im Hero
   Vorher eine Glas-Pille mit 0.25em Sperrung -- also genau das Chip-Muster,
   das die Seite sonst losgeworden ist. Jetzt trägt der Claim sich selbst:
   schwerer Schnitt, enge Sperrung, kein Rahmen.
   -------------------------------------------------------------------------- */
.hero-claim {
  margin: 0;
  font-size: clamp(0.9375rem, 1.5vw, 1.0625rem);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--t75);
  line-height: 1.2;
}
.hero-claim .plus-orange {
  margin-inline: 0.28em;
  font-weight: 600;
}