/* bewegung.css - alle Übergänge der Glieks-Landingpage, in fünf Schichten:
   1 Ladefolge im Einstieg (Keyframes, gestaffelt über --v je Element),
   2 Erscheinen beim Scrollen (Beobachter in bewegung.js setzt g-vor/g-da, Kinder gestaffelt über --v),
   3 Berührung (Knopf, Fragenzeilen, Textlinks, Fotos, Kopfzeile nach dem Scrollen),
   4 Kartenzyklus (Zustandsmarken, Füllbalken, Schlusssatz) und Seitenwechsel (View Transitions),
   5 reduzierte Bewegung: der Block am Ende schaltet alles ab.
   Wird von index.html nach stil/glieks.css eingebunden. Setzt voraus: die Klassen aus glieks.css sowie
   skript/bewegung.js, das "js" und "g-gescrollt" am Wurzelelement, "g-vor"/"g-da" an Abschnitten und
   data-phase an der Karte setzt. Eine Kurve für alles; es werden nur transform, opacity, filter, Farben,
   box-shadow und die Hintergrundlinie der Textlinks animiert - nie das Layout. Ohne Skript ist alles sofort sichtbar. */

:root {
  --g-kurve: cubic-bezier(.2, .8, .2, 1);   /* die eine Kurve, weich ausklingend */
  --g-dauer-beruehrung: 320ms;              /* hover, focus */
  --g-dauer-heben:      400ms;              /* Anheben mit Schatten */
  --g-dauer-kopf:       300ms;              /* Haarlinie und Schatten der Kopfzeile */
  --g-dauer-laden:      800ms;              /* Ladefolge je Element */
  --g-dauer-karte-auf:  1000ms;             /* Karte beim Laden */
  --g-dauer-erscheinen: 900ms;              /* Erscheinen beim Scrollen */
  --g-dauer-bild:       1400ms;             /* Bilder beim Erscheinen */
  --g-dauer-seite:      400ms;              /* Seitenwechsel */
  --g-dauer-karte:      600ms;              /* Überblendung in der Karte */
}

html { scroll-behavior: smooth; }


/* ==========================================================================
   1 Ladefolge im Einstieg
   Grundbewegung: aus 20 px Tiefe einblenden. Die Karte kommt aus 32 px und wächst von .97 auf 1.
   Nur mit Skript (html.js); die Verzögerung steht als --v je Element.
   ========================================================================== */
@keyframes g-auftauchen {
  from { opacity: 0; transform: translateY(20px); }
}
@keyframes g-karte-auftauchen {
  from { opacity: 0; transform: translateY(32px) scale(.97); }
}
@keyframes g-hauch {
  from { opacity: 0; }
}

.js .g-lade { animation: g-auftauchen var(--g-dauer-laden) var(--g-kurve) var(--v, 0ms) both; }
.js .g-hero .g-arbeitsfenster { animation: g-karte-auftauchen var(--g-dauer-karte-auf) var(--g-kurve) 200ms both; }
.js .g-hero__karte::before { animation: g-hauch var(--g-dauer-bild) var(--g-kurve) 200ms both; }

.g-header__marke, .g-claim-tag { --v: 0ms; }
.g-hero h1              { --v: 120ms; }
.g-lead                 { --v: 240ms; }
.g-hero .g-small        { --v: 300ms; }
.g-question:nth-child(1) { --v: 320ms; }
.g-question:nth-child(2) { --v: 390ms; }
.g-question:nth-child(3) { --v: 460ms; }
.g-question:nth-child(4) { --v: 530ms; }
.g-hero__text > p:last-child { --v: 620ms; }
.g-arbeitsfenster-hinweis { --v: 560ms; }
.g-arbeitsfenster-aktion  { --v: 640ms; }


/* ==========================================================================
   2 Erscheinen beim Scrollen
   Nur mit Skript und nur für Abschnitte, die beim Laden unterhalb des Sichtfensters liegen. Nebenbefund 127
   (13.09.2026 - Nachtrag zu Y-170a: Inhalte der Kundenseite erst beim Scrollen sichtbar): der Ruhezustand
   dieses Blatts setzt NIE opacity:0 - ein Abschnitt ist ohne jedes Zutun voll sichtbar. Der Beobachter in
   bewegung.js setzt g-da erst, sobald ein Abschnitt tatsächlich ins Sichtfenster kommt, und löst damit eine
   EINMALIGE Animation AUS dem verdeckten Zustand aus (Animation, keine transition von einer opacity:0-Regel);
   bleibt g-da aus (kein Skript, reduzierte Bewegung, oder eine vollständige Seitenaufnahme ohne Bildlauf, bei
   der der Beobachter nie feuert), zeigt der Abschnitt unverändert seinen Ruhezustand - voll sichtbar, nur ohne
   die Zugabe-Bewegung (bewegung.js bleibt damit reine Zugabe, R-06 "ohne Skript ist alles sofort sichtbar" gilt
   jetzt auch unterhalb des ersten Sichtfensters, nicht nur oberhalb).
   Ein Abschnitt ohne Kinder (.g-kind) zieht als Ganzes ein; sonst ziehen die Kinder gestaffelt ein.
   Bilder wachsen dabei zusätzlich von 1.06 auf 1.
   ========================================================================== */
/* Y-291 (BS-177, 17.09.2026, Owner: "Alles zuckt, wenn ich es erscrolle"): die Zugabe-Bewegung beim
   Erscheinen ist entfernt. Vorher sprang ein Abschnitt beim Setzen von g-da erst um 32 px nach unten
   (Animationsstart aus dem Ruhezustand) und glitt dann hoch, Bilder sprangen auf 106 % und schrumpften
   zurueck - fuer den Betrachter ein Zucken bei jedem Abschnitt. Die Klassen g-erscheint/g-vor/g-da bleiben
   im Dokument und im Skript erhalten, wirken aber nicht mehr auf Lage oder Groesse; die Abschnitte sind
   in jedem Zustand voll sichtbar (R-06). */
.js .g-erscheint.g-vor,
.js .g-erscheint.g-da,
.js .g-erscheint.g-vor .g-kind,
.js .g-erscheint.g-da .g-kind,
.js .g-erscheint.g-vor .g-offer-art,
.js .g-erscheint.g-vor .g-problem__image,
.js .g-erscheint.g-vor .g-origin__landscape,
.js .g-erscheint.g-da .g-offer-art,
.js .g-erscheint.g-da .g-problem__image,
.js .g-erscheint.g-da .g-origin__landscape { opacity: 1; transform: none; animation: none; }

.g-problem__title           { --v: 120ms; }
.g-offer:nth-child(2)       { --v: 120ms; }
.g-offers-note              { --v: 240ms; }
.g-trust__item:nth-child(2) { --v: 100ms; }
.g-trust__item:nth-child(3) { --v: 200ms; }
.g-device-note              { --v: 300ms; }
.g-origin__landscape        { --v: 150ms; }

.g-produkt__lead              { --v: 80ms; }
.g-karussell                  { --v: 160ms; }
.g-produkt__aktion            { --v: 240ms; }


/* ==========================================================================
   3 Berührung
   Knopf und Fragenzeilen heben sich mit tiefem Schatten, der Pfeil gleitet, die Linie unter Textlinks wächst
   von links, Fotos zoomen im Rahmen und heben sich (Rahmen über translate, Bild über transform).
   ========================================================================== */
.g-button {
  transition: background-color var(--g-dauer-beruehrung) var(--g-kurve), border-color var(--g-dauer-beruehrung) var(--g-kurve),
              box-shadow var(--g-dauer-heben) var(--g-kurve), transform var(--g-dauer-heben) var(--g-kurve);
}
.g-button:hover { transform: translateY(-2px); }

.g-question {
  transition: background-color var(--g-dauer-beruehrung) var(--g-kurve), border-color var(--g-dauer-beruehrung) var(--g-kurve),
              box-shadow var(--g-dauer-heben) var(--g-kurve), transform var(--g-dauer-heben) var(--g-kurve);
}
.g-question:hover { transform: translateY(-3px); }
.g-question .g-icon { transition: transform var(--g-dauer-beruehrung) var(--g-kurve); }
.g-question:hover .g-icon { transform: translateX(6px); }

.g-nav a, .g-header__anmelden, .g-footer__links a, .g-link > span {
  transition: background-size var(--g-dauer-beruehrung) var(--g-kurve);
}


.g-header { transition: border-color var(--g-dauer-kopf) var(--g-kurve), box-shadow var(--g-dauer-kopf) var(--g-kurve); }

.g-karussell__buehne { transition: box-shadow var(--g-dauer-heben) var(--g-kurve); }
.g-karussell__punkt::before { transition: background-color var(--g-dauer-beruehrung) var(--g-kurve); }
.g-karussell__pause { transition: color var(--g-dauer-beruehrung) var(--g-kurve); }
.g-karussell__pause:hover { color: var(--g-petrol); }


/* ==========================================================================
   4 Kartenzyklus und Seitenwechsel
   Zustandsmarke und Stand blenden über und gleiten 8 px von rechts ein; visibility folgt der Deckkraft,
   damit Vorleseprogramme nur den sichtbaren Zustand bekommen. Die Segmente füllen sich von links,
   der Schlusssatz gleitet leicht hoch.
   ========================================================================== */
.g-lauf [data-bei] {
  transform: translateX(8px);
  transition: opacity var(--g-dauer-karte) var(--g-kurve), transform var(--g-dauer-karte) var(--g-kurve),
              visibility 0s linear var(--g-dauer-karte);
}
.g-lauf .g-lauf__satz { transform: translateY(6px); }
.g-lauf[data-phase="1"] [data-bei~="1"],
.g-lauf[data-phase="2"] [data-bei~="2"],
.g-lauf[data-phase="3"] [data-bei~="3"],
.g-lauf[data-phase="4"] [data-bei~="4"] { transform: none; transition-delay: 0s; }
.g-lauf__seg { transition: border-color var(--g-dauer-karte) var(--g-kurve); }
.g-lauf__seg::before { transition: transform var(--g-dauer-karte) var(--g-kurve); }

/* Produkt-Karussell: dieselbe Überblendung wie der Kartenzyklus, ohne das seitliche Gleiten (die Folien
   liegen nebeneinander aus Bild und Text, nicht in einer schmalen Zustandsmarke). */
.g-karussell__folie {
  transition: opacity var(--g-dauer-karte) var(--g-kurve), visibility 0s linear var(--g-dauer-karte);
}
.g-karussell[data-phase="1"] .g-karussell__folie[data-folie="1"],
.g-karussell[data-phase="2"] .g-karussell__folie[data-folie="2"],
.g-karussell[data-phase="3"] .g-karussell__folie[data-folie="3"] { transition-delay: 0s; }

/* Überblendung zwischen Seiten derselben Herkunft; Kopfzeile und Wortmarke bleiben stehen. */
@view-transition { navigation: auto; }
.g-header { view-transition-name: kopfzeile; }
.g-header .g-logo { view-transition-name: wortmarke; }
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: var(--g-dauer-seite);
  animation-timing-function: var(--g-kurve);
}


/* ==========================================================================
   5 Reduzierte Bewegung: nichts bewegt sich, alles steht sofort da, die Karte zeigt nur den letzten Zustand.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
  html { scroll-behavior: auto; }
  .js .g-erscheint.g-vor,
  .js .g-erscheint.g-vor .g-kind,
  .js .g-erscheint.g-vor .g-offer-art,
  .js .g-erscheint.g-vor .g-problem__image,
  .js .g-erscheint.g-vor .g-origin__landscape { opacity: 1; transform: none; }
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) { animation: none !important; }
  .g-lauf[data-phase] [data-bei] { opacity: 0; visibility: hidden; transform: none; }
  .g-lauf[data-phase] [data-bei~="4"] { opacity: 1; visibility: visible; }
  .g-lauf[data-phase] .g-lauf__seg:nth-child(n) { border-color: var(--g-petrol); }
  .g-lauf[data-phase] .g-lauf__seg:nth-child(n)::before { transform: scaleX(1); }

  /* Produkt-Karussell: keine selbsttätige Runde, kein Pause-Knopf ohne etwas zu pausieren - die Punkte bleiben bedienbar. */
  .g-karussell__pause { display: none; }
}

/* Anwendungsschau: feste Flaechen, nur ruhige Ueberblendung; kein Video/Autoton.
   Beleg: evidence/astra-landing-anwendungsschau.md. */
.g-boxwelt__szene { transition: opacity 650ms ease; }
.g-start__szene { transition: opacity 450ms ease, visibility 450ms; }
@media (prefers-reduced-motion: reduce) {
  .g-boxwelt__szene, .g-start__szene { transition: none; }
}