/* Mikroanimationen fuer /willkommen/, /anleitung/ und die Krippenspiel-Seite (08.11.2026).
   Ruhig, warm, langsam. Nur transform/opacity (plus die schon vorhandenen Schatten beim Ueberfahren).
   ALLES steht in prefers-reduced-motion: no-preference - bei "reduce" greift nichts, alles ist sofort sichtbar.
   Versteckt wird nur, was pg-mikro-seiten.js mit .pg-mk-r markiert (ohne JS bleibt alles sichtbar).
   Wird NACH dem <style> der Seite geladen, damit gleiche Spezifitaet hier gewinnt. Keine "-hero"-Klassen. */

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

  /* ---------- Einblenden beim Scrollen ---------- */
  html.pg-mk .pg-mk-r:not(.pg-mk-in) { opacity: 0; }
  .pg-mk-in { animation: pg-mk-ein .7s cubic-bezier(.22, .61, .36, 1) var(--mk-d, 0s) backwards; }
  @keyframes pg-mk-ein { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
  @keyframes pg-mk-blende { from { opacity: 0; } to { opacity: 1; } }
  @keyframes pg-mk-auf { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: none; } }

  /* Aufgeklappte Antworten blenden sanft ein */
  .wk-frage[open] p, .anl details[open] p { animation: pg-mk-auf .45s ease-out; }

  /* ---------- Knoepfe: Schimmer beim Ueberfahren, sanfter Druck ---------- */
  .wk-knopf, .anl-knopf, .ks-cta-knopf { position: relative; overflow: hidden; isolation: isolate; }
  .wk-knopf::after, .anl-knopf::after, .ks-cta-knopf::after {
    content: ""; position: absolute; inset: 0; pointer-events: none; transform: translateX(-130%);
    background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, .34) 50%, transparent 62%);
  }
  .wk-knopf-rand::after { background: linear-gradient(105deg, transparent 38%, rgba(201, 152, 15, .22) 50%, transparent 62%); }
  .ks-cta-knopf::after { background: linear-gradient(105deg, transparent 38%, rgba(246, 196, 83, .55) 50%, transparent 62%); }
  .wk-knopf:hover::after, .wk-knopf:focus-visible::after,
  .anl-knopf:hover::after, .anl-knopf:focus-visible::after,
  .ks-cta-knopf:hover::after, .ks-cta-knopf:focus-visible::after { animation: pg-mk-glanz .95s ease-out 1; }
  @keyframes pg-mk-glanz { to { transform: translateX(130%); } }

  .wk-knopf:active { transform: translateY(0) scale(.98); }
  .anl-knopf, .st-nav button { transition: transform .15s ease, filter .2s ease; }
  .anl-knopf:active, .st-nav button:active { transform: scale(.98); }
  .ks-cta-knopf:active { transform: translateY(0) scale(.98); }

  /* ======================= /willkommen/ ======================= */

  /* Einstieg: Bild zoomt einmalig sehr langsam, Text steigt nacheinander auf */
  .wk-einstieg > img { transform-origin: 50% 60%; animation: pg-mk-zoom 24s ease-out both; will-change: transform; }
  @keyframes pg-mk-zoom { from { transform: scale(1); } to { transform: scale(1.06); } }
  .wk-einstieg-text > * { animation: pg-mk-ein .95s cubic-bezier(.22, .61, .36, 1) backwards; }
  .wk-einstieg-text > :nth-child(1) { animation-delay: .15s; }
  .wk-einstieg-text > :nth-child(2) { animation-delay: .32s; }
  .wk-einstieg-text > :nth-child(3) { animation-delay: .55s; }
  .wk-einstieg-text > :nth-child(4) { animation-delay: .7s; }
  .wk-einstieg-text > :nth-child(5) { animation-delay: .85s; }
  .wk-einstieg h2 em { animation: pg-mk-blende 1.6s ease-out .85s backwards; }

  /* Ruhiger "Atem"-Punkt vor der Vorzeile: ein Zyklus ca. 7 s */
  .wk-einstieg-text .wk-vorzeile::before {
    content: ""; display: inline-block; width: .5rem; height: .5rem; margin-right: .65rem; vertical-align: .08em;
    border-radius: 50%; background: #f3d27a; animation: pg-mk-atem 7s ease-in-out infinite;
  }
  @keyframes pg-mk-atem { 0%, 100% { transform: scale(.7); opacity: .5; } 50% { transform: scale(1.3); opacity: 1; } }

  /* Karten: einheitliches weiches Anheben (nur bei echtem Hover-Geraet, nicht auf dem Handy) */
  .wk-saeule { transition: transform .5s ease, box-shadow .5s ease; }
  .wk-fakt { transition: transform .4s ease, box-shadow .4s ease; }
  .wk-weg-sym, .wk-fakt-sym { transition: background-color .45s ease, transform .45s ease; }
  .wk-angebote .wk-sym { transition: transform .35s ease; }
  .wk-kontakt-link { transition: background .2s, border-color .2s, transform .3s ease; }
  @media (hover: hover) {
    .wk-saeule:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(90, 62, 43, .14); }
    .wk-fakt:hover { transform: translateY(-3px); box-shadow: 0 12px 26px rgba(90, 62, 43, .1); }
    .wk-weg:hover .wk-weg-sym, .wk-fakt:hover .wk-fakt-sym { background: rgba(201, 152, 15, .3); transform: scale(1.07); }
    .wk-angebote a:hover .wk-sym { transform: translateX(2px); }
    .wk-kontakt-link:hover { transform: translateX(3px); }
  }
  .wk-weg:focus-visible .wk-weg-sym { background: rgba(201, 152, 15, .3); transform: scale(1.07); }

  /* ======================= /anleitung/ ======================= */

  /* Schrittwechsel: weiches Gleiten in Richtung des Klicks (stepper.js setzt data-richtung) */
  .js-stepper .st-schritt { animation: anl-mk-vor .5s cubic-bezier(.22, .61, .36, 1) backwards; }
  .js-stepper:not([data-richtung]) .st-schritt { animation-name: pg-mk-ein; }
  .js-stepper[data-richtung="zurueck"] .st-schritt { animation-name: anl-mk-zurueck; }
  @keyframes anl-mk-vor { from { opacity: 0; transform: translateX(18px); } to { opacity: 1; transform: none; } }
  @keyframes anl-mk-zurueck { from { opacity: 0; transform: translateX(-18px); } to { opacity: 1; transform: none; } }
  .js-stepper .st-schritt .mock { animation: pg-mk-ein .6s cubic-bezier(.22, .61, .36, 1) .12s backwards; }

  /* Fortschritt: Linie waechst, Punkte "atmen" kurz, Haken erscheint */
  .st-leiste::after { transition: width .6s ease; }
  .st-punkt { transition: background .25s, border-color .25s, color .25s, transform .4s cubic-bezier(.3, 1.4, .5, 1); }
  .st-leiste .ist-aktiv .st-punkt { transform: scale(1.1); }
  .st-leiste .ist-erledigt .st-punkt::after { animation: anl-mk-haken .45s ease-out backwards; }
  @keyframes anl-mk-haken { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: none; } }
  @media (hover: hover) { .st-leiste button:hover .st-punkt { border-color: var(--anl-akzent); } }

  /* ======================= Krippenspiel ======================= */

  /* Anmeldekasten: ganz dezentes, warmes Schimmern alle ca. 11 s */
  .ks-cta { position: relative; overflow: hidden; isolation: isolate; }
  .ks-cta > * { position: relative; z-index: 1; }
  .ks-cta::after {
    content: ""; position: absolute; inset: 0; pointer-events: none; transform: translateX(-100%);
    background: linear-gradient(105deg, transparent 40%, rgba(255, 224, 150, .14) 50%, transparent 60%);
    animation: pg-mk-schimmer 11s ease-in-out 2.5s infinite;
  }
  @keyframes pg-mk-schimmer { 0% { transform: translateX(-100%); } 28%, 100% { transform: translateX(100%); } }
}

/* Sicherheitsnetz: Reduzierte Bewegung oder Druck zeigt alles sofort */
@media (prefers-reduced-motion: reduce), print {
  html.pg-mk .pg-mk-r:not(.pg-mk-in) { opacity: 1 !important; }
}