/* ROURS FX · gussbadewannen.de · Regeln der Signatur-Effekte, aus dem freigegebenen Prototyp.
   Aussehen (Farben, Schrift, Raster, Abstände) steht in den Elementor-Klassen. Hier nur, was Bewegung, Zustände
   und eingefügte Teile braucht. html.js = Skript läuft, html.fx = Bewegung erlaubt (rours-fx.php).
   Diese Eigenschaften in Elementor nicht noch einmal setzen: position, height, transform, opacity, transition der fx-Teile. */

/* Elementor setzt Grundwerte mit zwei Klassen (.elementor .e-div-block-base{display;padding;min-width}, .elementor img{height:auto}).
   Regeln, die genau diese Eigenschaften brauchen, stehen darum mit html:root davor (gemessen 2026-11-14 an der Testseite). */
html:root :is(.fx-hero-bild,.fx-hero-weiss,.fx-dreh-halt,.fx-dreh-mass,.fx-mass-linie,.fx-mass-punkt,.fx-reise-ebene,.fx-reise-halt,.fx-punkt-grund,.fx-punkt,.fx-punkt-zahl,.fx-ablauf-spur,.fx-ablauf-punkt){min-width:0;padding:0}

/* ---------- Kopfleiste und Menü ---------- */
.fx-kopf{position:fixed;inset:0 0 auto 0;z-index:50}
.fx-kopf-grund{position:absolute;inset:0;z-index:-2;transition:opacity .2s}
html.js .fx-kopf:not(.kopf-fest),.menue-offen .fx-kopf{color:#fff}
html.js .fx-kopf:not(.kopf-fest) .fx-kopf-grund,.menue-offen .fx-kopf .fx-kopf-grund{opacity:0}
.kopf-fest .fx-kopf-btn,html:not(.js) .fx-kopf-btn{background:#121212;color:#FBFBFB}
.menue-offen .fx-kopf .fx-kopf-btn{background:#fff;color:#121212}
html:root .fx-schalter{display:none;touch-action:manipulation;cursor:pointer}

@media (max-width:1024px){
  html:root .fx-schalter{display:inline-flex}
  .fx-menue{position:fixed;inset:0;z-index:-1;height:100dvh;flex-direction:column;justify-content:center;align-items:flex-start;overscroll-behavior:contain;opacity:0;visibility:hidden;transform:translateY(-10px);transition:opacity .2s,transform .2s,visibility 0s .2s}
  .menue-offen .fx-menue{opacity:1;visibility:visible;transform:none;transition:opacity .2s,transform .2s}
}
@media (max-width:767px){
  html:root .fx-kopf-btn{display:none}              /* am Handy nur im offenen Menü */
  html.menue-offen .fx-kopf-btn{display:inline-flex}
  html.menue-offen .fx-kopf-name{display:none} /* sonst ragt „Schließen“ über den Rand */
}

/* ---------- fx-hero ---------- */
.fx-hero{position:relative;overflow:hidden}
.fx-hero-bild{position:absolute;inset:0;will-change:transform}
.fx-hero-weiss{position:absolute;left:0;right:0;bottom:0;height:170%;background:linear-gradient(to top,#FBFBFB 45%,rgba(251,251,251,0));transform:translateY(100%);pointer-events:none}
@media (max-width:767px){ html:root .fx-hero-weiss{display:none} }
/* Hero-Bild nach Seitenverhältnis wie <picture> im Prototyp (Elementor kennt nur Breiten): hochkant 4:5, sonst 16:9 */
html:root :is(.fx-hero-quer,.fx-hero-hoch){display:block;width:100%;height:100%;object-fit:cover}
@media (max-aspect-ratio:1/1){ html:root .fx-hero-quer{display:none} }
@media not all and (max-aspect-ratio:1/1){ html:root .fx-hero-hoch{display:none} }

/* ---------- fx-dreh: Halteszene mit Bildfolge ---------- */
.fx-dreh{position:relative}
.fx-dreh-halt{position:relative;height:100svh;min-height:560px;overflow:hidden}
html:root .fx-dreh-bild,.fx-dreh-flaeche{position:absolute;inset:0;width:100%;height:100%}
.fx-dreh-bild{object-fit:contain}
html:root .fx-dreh-mass{display:none;position:absolute;left:clamp(20px,2.8vw,40px);bottom:clamp(30px,3.2vw,48px);width:160px;height:10px}
.fx-mass-linie{position:absolute;left:0;right:0;top:50%;height:1px;background:#121212}
.fx-mass-punkt{position:absolute;left:-5px;top:0;width:10px;height:10px;border-radius:50%;background:#121212}
html.fx .fx-dreh{height:280svh}
html.fx .fx-dreh-halt{position:sticky;top:0;min-height:0}
html.fx .fx-dreh-bild{opacity:0}
html.fx .fx-dreh-mass{display:block}
html.fx .fx-dreh-titel,html.fx .fx-dreh-text{opacity:0;transform:translateY(16px);transition:opacity .5s,transform .5s cubic-bezier(.2,.7,.2,1)}
html.fx .dreh-fertig .fx-dreh-titel,html.fx .dreh-fertig .fx-dreh-text{opacity:1;transform:none}
@media (max-width:767px){
  html.fx .fx-dreh{height:230svh}
  html.fx .fx-dreh-mass{display:none}
}

/* ---------- fx-reise: Satz mit Farbumkehr, Punkt, Zahlen neben den Zeilen ---------- */
.fx-reise{position:relative}
html:root .fx-reise-ebene{display:none}
html.fx .fx-reise-ebene{display:block;position:absolute;inset:0;z-index:1;pointer-events:none}
.fx-reise-halt{position:sticky;top:0;height:100svh;overflow:hidden}
.fx-punkt{position:absolute;left:calc(clamp(20px,2.8vw,40px) + 8px);top:50%;width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:50%;background:#121212}
html:root .fx-punkt-grund{display:none}
.fx-punkt-zahl{position:absolute;left:calc(clamp(20px,2.8vw,40px) + 34px);top:50%;transform:translateY(-50%);display:grid;justify-items:start;opacity:0;transition:opacity .3s}
.zeilen-aktiv .fx-punkt-zahl{opacity:1}
.fx-zahl{grid-area:1/1;opacity:0;transform:translateY(14px);transition:opacity .3s,transform .3s cubic-bezier(.2,.7,.2,1)}
.fx-zahl.ist-aktiv{opacity:1;transform:none}
.fx-zahl-wort{grid-area:2/1}
.fx-kreis{position:relative}
html.fx .fx-kreis{height:230svh;z-index:2;color:#fff;mix-blend-mode:difference}
html.fx .fx-kreis-halt{position:sticky;top:0;height:100svh;min-height:0}
@media (max-width:767px){
  .fx-punkt{top:92px}
  html.fx .fx-kreis{margin-bottom:-16svh} /* ein Drittel weniger Weiß zwischen Satz und erstem Bild */
  html:root .fx-punkt-grund{display:block;position:absolute;inset:64px 0 auto 0;height:56px;background:#FBFBFB;border-bottom:1px solid #DCDAD7;opacity:0;transition:opacity .3s}
  .zeilen-aktiv .fx-punkt-grund{opacity:1}
  .fx-punkt-zahl{top:92px;left:50px;grid-auto-flow:column;align-items:baseline}
  .fx-zahl{transform:translateY(6px)}
  .fx-zahl-wort{grid-area:1/2}
}

/* ---------- fx-fuell: Füllung steigt von unten wie Wasser, 14 px gewölbte Oberfläche, Text färbt an der Wasserlinie um ---------- */
.hat-fuell{position:relative;overflow:hidden}
.fuell,.fuell-text{position:absolute;inset:0;display:flex;align-items:center;justify-content:inherit;padding:inherit;pointer-events:none;transition:transform .5s cubic-bezier(.3,.7,.2,1)}
.fuell{top:-14px;overflow:hidden;border-radius:50% 50% 0 0/14px 14px 0 0;background:currentColor;transform:translateY(101%)}
.fuell-text{top:14px;color:#FBFBFB;transform:translateY(calc(-101% - 14px))}
.dunkel .fuell-text,.fx-hero .fuell-text{color:#121212}
.hat-fuell:focus-visible .fuell,.hat-fuell:focus-visible .fuell-text{transform:none}
@media (hover:hover) and (pointer:fine){
  .hat-fuell:hover .fuell,.hat-fuell:hover .fuell-text{transform:none}
  html:not(.fx) .fx-fuell:hover{background:#121212;border-color:#121212;color:#FBFBFB}   /* weniger Bewegung: sofort gefüllt */
  html:not(.fx) .dunkel .fx-fuell:hover{background:#fff;border-color:#fff;color:#121212}
}
.fx-fuell{touch-action:manipulation;transition:transform .1s}
.fx-fuell:active{transform:scale(.97)}

/* ---------- fx-zeichnung: Strichzeichnung (Pfade mit pathLength="1") ---------- */
.fx-zeichnung{--z:1}
html.fx .fx-zeichnung{--z:0}
.fx-zeichnung .z-linie{fill:none;stroke:#121212;stroke-width:1.4;stroke-dasharray:1;stroke-dashoffset:calc(1 - clamp(0,(var(--z) - var(--ab,0)) * 2.4,1))}
.fx-zeichnung .z-hilfe{stroke:#A9A6A1;stroke-width:1}
.fx-zeichnung .z-punkt{fill:#121212;opacity:clamp(0,(var(--z) - var(--ab,0)) * 6,1)}
.fx-zeichnung .z-text{font:500 17px "Inter Tight",system-ui,sans-serif;fill:#121212;opacity:clamp(0,(var(--z) - .72) * 5,1)}

/* ---------- fx-parallax ---------- */
html:root .fx-parallax{position:absolute;left:0;top:-10%;width:100%;height:120%;object-fit:cover;will-change:transform}

/* ---------- fx-sicht: Linienkreuz ---------- */
.fx-kreuz-h{transform-origin:left}
.fx-kreuz-v{transform-origin:top}
html.fx .fx-kreuz-h{transform:scaleX(0);transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
html.fx .fx-kreuz-v{transform:scaleY(0);transition:transform 1.2s cubic-bezier(.2,.7,.2,1) .15s}
html.fx .ist-da .fx-kreuz-h,html.fx .ist-da .fx-kreuz-v{transform:none}

/* ---------- fx-ablauf ---------- */
.fx-ablauf{position:relative}
.fx-ablauf-spur{position:relative;height:1px;background:#121212}
.fx-ablauf-punkt{position:absolute;left:-8px;top:-8px;width:16px;height:16px;border-radius:50%;background:#121212;will-change:transform}
html.fx .fx-schritt{opacity:.26;transition:opacity .45s}
html.fx .fx-schritt.ist-aktiv{opacity:1}
@media (max-width:1024px){
  html.fx .fx-schritt{opacity:1}
  html:root .fx-ablauf-punkt{display:none}
}
@media (max-width:767px){
  .fx-ablauf-spur{position:absolute;left:0;top:8px;bottom:8px;width:1px;height:auto}
  html:root .fx-ablauf-punkt{display:block}
}

/* ---------- Weniger Bewegung: html.fx fehlt, alle Zustände oben stehen fertig. Nur das Menü blendet noch weich. ---------- */
@media (prefers-reduced-motion:reduce){
  .fx-menue,.menue-offen .fx-menue{transform:none}
  .fx-fuell:active{transform:none}
}