/* ==========================================================================
   Wow-System v1 · Sideflow_Design · Stand 28.09.2026
   Signature-Momente für Website-Remakes. Ohne Marke: alle Farben und Schriften
   kommen aus den Tokens der Kundenseite (marke.css), hier stehen nur Rückfälle.
   Regeln: nur transform, opacity, clip-path, filter animieren. Kein Scroll-Listener,
   Scroll-Bewegung läuft über CSS scroll-driven animations mit statischem Rückfall.
   Jeder Moment respektiert prefers-reduced-motion.
   ========================================================================== */

:root {
  --wow-papier: var(--paper, #F6F2EF);
  --wow-papier-2: var(--paper-2, #ECE4DF);
  --wow-tinte: var(--ink, #231D1F);
  --wow-tinte-2: var(--ink-2, #4A4044);
  --wow-leise: var(--muted, #6B5F63);
  --wow-akzent: var(--akzent, #7A3450);
  --wow-akzent-hell: var(--akzent-hell, #E7C3CF);
  --wow-dunkel: var(--ink-bg, #1E1719);
  --wow-fd: var(--font-display, "Instrument Serif", Georgia, serif);
  --wow-fb: var(--font-body, "Geist", system-ui, sans-serif);
  --wow-aus: cubic-bezier(.23, 1, .32, 1);      /* Eintritt, Rückmeldung */
  --wow-quint: cubic-bezier(.22, 1, .36, 1);    /* große Auftritte */
  --wow-inaus: cubic-bezier(.77, 0, .175, 1);   /* Bewegung auf der Fläche */
}

/* ---------- W1 · Vorhang-Hero ------------------------------------------ */
/* Das Foto öffnet sich aus einem Fenster in der Mitte, der Titel steigt
   zeilenweise aus einer Maske. Einmal beim Laden, danach Ruhe. */
.wow-vorhang { position: relative; min-height: 100dvh; overflow: hidden; isolation: isolate; display: grid; align-items: end; }
.wow-vorhang__bild { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.wow-vorhang__bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wow-vorhang__bild::after { content: ""; position: absolute; inset: 0; background: linear-gradient(185deg, rgb(20 14 16 / 0) 35%, rgb(20 14 16 / .62) 100%); }
.wow-zeile { display: block; overflow: hidden; padding-bottom: .12em; margin-bottom: -.12em; }
.wow-zeile > span { display: inline-block; }

@media (prefers-reduced-motion: no-preference) {
  .wow-js .wow-vorhang:not(.ist-bereit) .wow-vorhang__bild { clip-path: inset(44% 18% 44% 18% round 28px); }
  .wow-js .wow-vorhang:not(.ist-bereit) .wow-zeile > span { transform: translateY(115%); }
  .wow-js .wow-vorhang:not(.ist-bereit) .wow-nach { opacity: 0; }
  .wow-vorhang.ist-bereit .wow-vorhang__bild { animation: wow-vorhang-auf 1.5s var(--wow-inaus) both; }
  .wow-vorhang.ist-bereit .wow-vorhang__bild img { animation: wow-vorhang-zoom 2.6s var(--wow-quint) both; }
  .wow-vorhang.ist-bereit .wow-zeile > span { animation: wow-zeile-auf 1.1s var(--wow-quint) both; animation-delay: calc(.6s + var(--i, 0) * .09s); }
  .wow-vorhang.ist-bereit .wow-nach { animation: wow-blende .9s var(--wow-aus) both; animation-delay: 1.25s; }
}
@keyframes wow-vorhang-auf { from { clip-path: inset(44% 18% 44% 18% round 28px); } to { clip-path: inset(0 0 0 0 round 0); } }
@keyframes wow-vorhang-zoom { from { transform: scale(1.2); } to { transform: scale(1); } }
@keyframes wow-zeile-auf { from { transform: translateY(115%); } to { transform: none; } }
@keyframes wow-blende { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* ---------- W2 · Zoomfenster ------------------------------------------- */
/* Ein kleines Bild auf hellem Grund wächst beim Scrollen zur ganzen Fläche. */
.wow-zoom { position: relative; height: 250vh; view-timeline: --wow-zoom block; }
.wow-zoom__buehne { position: sticky; top: 0; height: 100dvh; overflow: hidden; display: grid; place-items: center; }
.wow-zoom__bild { position: absolute; inset: 0; overflow: hidden; }
.wow-zoom__bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wow-zoom__bild::after { content: ""; position: absolute; inset: 0; background: radial-gradient(55% 40% at 50% 52%, rgb(20 14 16 / .5), transparent 72%), linear-gradient(180deg, rgb(20 14 16 / .12), rgb(20 14 16 / .5)); }
.wow-zoom__vorher { position: absolute; top: 9vh; left: 0; right: 0; text-align: center; }
.wow-zoom__text { position: relative; text-align: center; color: #fff; padding: 0 24px; }

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .wow-zoom__bild { animation: wow-zoom-auf linear both; animation-timeline: --wow-zoom; animation-range: contain 0% contain 55%; }
    .wow-zoom__bild img { animation: wow-zoom-bild linear both; animation-timeline: --wow-zoom; animation-range: contain 0% contain 100%; }
    .wow-zoom__vorher { animation: wow-weg linear both; animation-timeline: --wow-zoom; animation-range: contain 0% contain 22%; }
    .wow-zoom__text { animation: wow-zoom-text linear both; animation-timeline: --wow-zoom; animation-range: contain 42% contain 70%; }
  }
}
@supports not (animation-timeline: view()) {
  .wow-zoom { height: auto; }
  .wow-zoom__buehne { position: relative; height: 86dvh; }
  .wow-zoom__vorher { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .wow-zoom { height: auto; }
  .wow-zoom__buehne { position: relative; height: 86dvh; }
  .wow-zoom__vorher { display: none; }
}
@keyframes wow-zoom-auf { from { clip-path: inset(24% 33% 24% 33% round 28px); } to { clip-path: inset(0 round 0); } }
@keyframes wow-zoom-bild { from { transform: scale(1.3); } to { transform: scale(1); } }
@keyframes wow-zoom-text { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
@keyframes wow-weg { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(-24px); } }

/* ---------- W3 · Stapel ------------------------------------------------ */
/* Leistungen als große Blätter, die sich beim Scrollen übereinanderlegen.
   --i (Index) und --schritt (100% / Anzahl) setzt wow.js. */
.wow-stapel { display: grid; gap: 6vh; view-timeline: --wow-stapel block; padding-bottom: 8vh; }
.wow-stapel__karte { position: sticky; top: calc(11vh + var(--i, 0) * 26px); min-height: 72vh; border-radius: 28px; overflow: hidden; transform-origin: 50% 0; isolation: isolate; box-shadow: 0 -12px 40px -18px rgb(35 29 31 / .35); }
.wow-stapel__karte::after { content: ""; position: absolute; inset: 0; background: var(--wow-dunkel); opacity: 0; pointer-events: none; z-index: 5; }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .wow-stapel__karte { animation: wow-stapel-weg linear both; animation-timeline: --wow-stapel; animation-range: contain calc(var(--i, 0) * var(--schritt, 25%)) contain calc((var(--i, 0) + 1) * var(--schritt, 25%)); }
    .wow-stapel__karte::after { animation: wow-stapel-dunkel linear both; animation-timeline: --wow-stapel; animation-range: contain calc(var(--i, 0) * var(--schritt, 25%)) contain calc((var(--i, 0) + 1) * var(--schritt, 25%)); }
    .wow-stapel__karte:last-child, .wow-stapel__karte:last-child::after { animation: none; }
  }
}
@media (prefers-reduced-motion: reduce) { .wow-stapel__karte { position: relative; top: auto; } }
@keyframes wow-stapel-weg { to { transform: scale(.92); } }
@keyframes wow-stapel-dunkel { to { opacity: .16; } }

/* ---------- W4 · Querfahrt --------------------------------------------- */
/* Senkrechtes Scrollen fährt eine Bildreihe seitwärts. Am Handy natürliches Wischen. */
.wow-quer { position: relative; height: calc(var(--n, 6) * 55vh); view-timeline: --wow-quer block; }
.wow-quer__buehne { position: sticky; top: 0; height: 100dvh; overflow: hidden; display: flex; flex-direction: column; justify-content: center; }
.wow-quer__spur { display: flex; gap: clamp(16px, 2.4vw, 36px); padding-inline: clamp(20px, 6vw, 96px); width: max-content; }
.wow-quer__spur > * { flex: 0 0 auto; width: clamp(260px, 34vw, 520px); }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) and (min-width: 768px) {
    .wow-quer__spur { animation: wow-quer linear both; animation-timeline: --wow-quer; animation-range: contain 0% contain 100%; }
  }
}
@keyframes wow-quer { to { transform: translateX(calc(-100% + 100vw)); } }
@supports not (animation-timeline: view()) { .wow-quer { height: auto; } .wow-quer__buehne { position: relative; height: auto; overflow: visible; } .wow-quer__spur { width: auto; overflow-x: auto; scroll-snap-type: x mandatory; } .wow-quer__spur > * { scroll-snap-align: start; } }
@media (max-width: 767.98px), (prefers-reduced-motion: reduce) {
  .wow-quer { height: auto; }
  .wow-quer__buehne { position: relative; height: auto; overflow: visible; padding-block: 8vh; }
  .wow-quer__spur { width: auto; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
  .wow-quer__spur::-webkit-scrollbar { display: none; }
  .wow-quer__spur > * { scroll-snap-align: center; width: 78vw; }
}

/* ---------- W5 · Bildfächer -------------------------------------------- */
/* Schmale Bildstreifen, einer öffnet sich (Zeiger am Rechner, Tippen am Handy). */
.wow-faecher { display: flex; gap: 10px; height: min(74vh, 660px); }
.wow-faecher__feld { position: relative; flex: 1 1 0; min-width: 0; overflow: hidden; border-radius: 22px; border: 0; padding: 0; background: var(--wow-dunkel); color: #fff; text-align: left; cursor: pointer; transition: flex-grow .75s var(--wow-quint); font: inherit; }
.wow-faecher__feld.ist-offen { flex-grow: 5; cursor: default; }
.wow-faecher__feld img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.12); transition: transform 1.1s var(--wow-quint), filter .6s ease; filter: saturate(.7) brightness(.8); }
.wow-faecher__feld.ist-offen img { transform: scale(1); filter: none; }
.wow-faecher__feld::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgb(20 14 16 / .7)); }
.wow-faecher__text { position: absolute; left: clamp(20px, 3vw, 36px); right: clamp(20px, 3vw, 36px); bottom: clamp(20px, 3vw, 32px); z-index: 2; opacity: 0; transform: translateY(16px); transition: opacity .35s ease, transform .35s var(--wow-aus); min-width: 280px; }
.wow-faecher__feld.ist-offen .wow-faecher__text { opacity: 1; transform: none; transition-delay: .3s; transition-duration: .7s; }
.wow-faecher__feld:focus-visible { outline: 3px solid var(--wow-akzent-hell); outline-offset: 3px; }
@media (max-width: 767.98px) {
  .wow-faecher { flex-direction: column; height: auto; }
  .wow-faecher__feld { flex: 0 0 72px; transition: flex-basis .7s var(--wow-quint); }
  .wow-faecher__feld.ist-offen { flex-basis: 380px; }
  .wow-faecher__text { min-width: 0; }
}
@media (prefers-reduced-motion: reduce) { .wow-faecher__feld, .wow-faecher__feld img, .wow-faecher__text { transition-duration: .01s !important; } }

/* ---------- W6 · Lichtkarten ------------------------------------------- */
/* Ein weicher Lichtkegel folgt dem Zeiger über Glaskarten, die Kante glimmt mit. */
.wow-licht { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.wow-licht__karte { position: relative; isolation: isolate; overflow: hidden; border-radius: 24px; padding: clamp(24px, 3vw, 40px); color: #fff; background: linear-gradient(160deg, rgb(255 255 255 / .12), rgb(255 255 255 / .04)); border: 1px solid rgb(255 255 255 / .14); box-shadow: inset 0 1px 0 rgb(255 255 255 / .16), 0 24px 60px -30px rgb(0 0 0 / .6); backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%); }
.wow-licht__karte::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(460px circle at var(--x, 50%) var(--y, -30%), color-mix(in oklab, var(--wow-akzent-hell) 42%, transparent), transparent 62%); opacity: 0; transition: opacity .5s ease; }
.wow-licht__karte::after { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: radial-gradient(280px circle at var(--x, 50%) var(--y, -30%), var(--wow-akzent-hell), transparent 70%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); opacity: 0; transition: opacity .5s ease; pointer-events: none; }
@media (hover: hover) and (pointer: fine) {
  .wow-licht__karte:hover::before, .wow-licht__karte:hover::after { opacity: 1; }
}
@media (prefers-reduced-transparency: reduce) { .wow-licht__karte { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgb(40 32 35 / .96); } }

/* ---------- W7 · Schriftfenster ---------------------------------------- */
/* Ein einziges großes Wort, durch das man in ein Foto sieht. Das Foto wandert beim Scrollen.
   Bild direkt im HTML setzen: style="background-image:url(…)" (ein url() in einer Variable
   würde relativ zu wow.css aufgelöst, nicht zur Seite). */
.wow-fenster { margin: 0; font: 400 clamp(96px, 22vw, 360px) / .86 var(--wow-fd); letter-spacing: -.03em; color: var(--wow-tinte); text-align: center; view-timeline: --wow-fenster block; padding-bottom: .06em; }
@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  .wow-fenster { background-size: 140% auto; background-position: 50% 30%; -webkit-background-clip: text; background-clip: text; color: transparent; }
  @supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
      .wow-fenster { animation: wow-fenster linear both; animation-timeline: --wow-fenster; animation-range: cover 0% cover 100%; }
    }
  }
}
@keyframes wow-fenster { from { background-position: 30% 20%; } to { background-position: 70% 80%; } }

/* ---------- W8 · Tiefenbühne ------------------------------------------- */
/* Drei Ebenen (Stoff, Foto, Glaskarte) bewegen sich verschieden: mit dem Zeiger über
   die Eigenschaft translate (wow.js), beim Scrollen über transform (CSS). */
.wow-tiefe { position: relative; min-height: 100dvh; overflow: hidden; isolation: isolate; display: grid; place-items: center; view-timeline: --wow-tiefe block; }
.wow-tiefe__ebene { position: absolute; will-change: translate, transform; }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .wow-tiefe__ebene { animation: wow-tiefe linear both; animation-timeline: --wow-tiefe; animation-range: exit 0% exit 100%; }
  }
}
@keyframes wow-tiefe { to { transform: translateY(calc(var(--tiefe, .5) * -160px)); } }

/* ---------- W9 · Magnetknopf ------------------------------------------- */
[data-wow-magnet] { transition: translate .55s var(--wow-aus), transform .16s ease-out; }
[data-wow-magnet].ist-nah { transition: translate .18s var(--wow-aus), transform .16s ease-out; }
[data-wow-magnet] > span { display: inline-block; transition: translate .55s var(--wow-aus); }
[data-wow-magnet]:active { transform: scale(.97); }

/* ---------- W10 · Wort für Wort ---------------------------------------- */
/* Ein Absatz färbt sich beim Lesen Wort für Wort ein. --a/--b setzt wow.js. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    [data-wow="worte"] { view-timeline: --wow-worte block; }
    [data-wow="worte"] .wow-wort { animation: wow-wort linear both; animation-timeline: --wow-worte; animation-range: cover var(--a, 20%) cover var(--b, 50%); }
  }
}
@keyframes wow-wort { from { opacity: .16; } to { opacity: 1; } }

/* ---------- W11 · Kapselleiste ----------------------------------------- */
/* Oben eine volle Leiste, nach 160 px Scrollen zieht sie sich zur Glaskapsel zusammen. */
.wow-kapsel { position: fixed; top: 0; left: 0; right: 0; z-index: 50; padding: 14px clamp(12px, 3vw, 32px); pointer-events: none; }
.wow-kapsel__innen { position: relative; pointer-events: auto; max-width: var(--wow-kapsel-breite, 880px); margin: 0 auto; display: flex; align-items: center; gap: 28px; padding: 10px 10px 10px 26px; isolation: isolate; }
.wow-kapsel::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgb(20 14 16 / .38), transparent); z-index: -1; }
.wow-kapsel__innen::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 999px; background: color-mix(in oklab, var(--wow-papier) 78%, transparent); border: 1px solid rgb(255 255 255 / .55); box-shadow: 0 12px 36px -14px rgb(35 29 31 / .35), inset 0 1px 0 rgb(255 255 255 / .7); backdrop-filter: blur(16px) saturate(160%); -webkit-backdrop-filter: blur(16px) saturate(160%); opacity: 0; transform: scale(1.04, 1.2); }
.wow-kapsel.ist-kapsel .wow-kapsel__innen::before { opacity: 1; transform: none; }
.wow-kapsel.ist-kapsel::before { opacity: 0; }
.wow-kapsel::before, .wow-kapsel__innen::before { transition: opacity .45s var(--wow-aus), transform .6s var(--wow-quint); }
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .wow-kapsel::before { transition: none; animation: wow-weg-still linear both; animation-timeline: scroll(root); animation-range: 0 160px; }
    .wow-kapsel__innen::before { transition: none; animation: wow-kapsel linear both; animation-timeline: scroll(root); animation-range: 40px 200px; }
    .wow-kapsel:not(.wow-kapsel--hell) .wow-kapsel__innen { animation: wow-kapsel-farbe linear both; animation-timeline: scroll(root); animation-range: 40px 200px; }
  }
}
/* Über einem dunklen Hero startet die Schrift weiß; --hell für Seiten ohne Foto-Hero. */
.wow-kapsel__innen { color: #fff; }
.wow-kapsel--hell .wow-kapsel__innen, .wow-kapsel.ist-kapsel .wow-kapsel__innen { color: var(--wow-tinte); }
.wow-kapsel--hell::before { display: none; }
@keyframes wow-kapsel-farbe { from { color: #fff; } to { color: var(--wow-tinte); } }
@keyframes wow-weg-still { to { opacity: 0; } }
@keyframes wow-kapsel { from { opacity: 0; transform: scale(1.04, 1.2); } to { opacity: 1; transform: none; } }

/* ---------- W12 · Seitenwechsel ---------------------------------------- */
/* Echte Unterseiten (Regel 5) wechseln weich: das Bild fliegt von der Karte in den Kopf
   der nächsten Seite. Ohne JavaScript, nur gleiche Herkunft. */
@view-transition { navigation: auto; }
::view-transition-group(*) { animation-duration: .7s; animation-timing-function: var(--wow-quint); }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .45s; }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }