/* Hero der Startseite: „Licht durch Blüten“ (Kirschzweig ums Handy, Licht, Blütenregen), übernommen aus
   design/html/proto/hero.css, nur hell. Alles unter .hero gekapselt; .h-petals hängt am body (hero.js).
   Endzustand ist das normale CSS; „Tinte zuerst“ läuft nur unter .hero.ink-play.
   Animiert werden nur transform, opacity und stroke-dashoffset. */

.hero{
 --pw:270px;
 --wc-leaf:#93A27A;--wc-o:.78;
 --ch1:#F6D6DE;--ch2:#FFF4F2;--chc:#C25775;--bud:#E99AAE;--bark:#5B4033;
 --ts:.6;
 position:relative;isolation:isolate;overflow:hidden;
}
.hero .wrap{max-width:1240px}
.hero-in{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr) 500px;align-items:center;gap:40px;padding-top:56px;padding-bottom:96px;min-height:min(820px,calc(100svh - 65px))}
.hero-copy{position:relative;z-index:2;display:grid;gap:22px;justify-items:start;min-width:0;max-width:560px}
.hero .acts{display:flex;align-items:center;gap:24px;flex-wrap:wrap}
.hero-art{position:relative;display:grid;place-items:center;min-width:0;min-height:640px}
.hero .phw{position:relative;width:var(--pw);height:calc(var(--pw)*2.05)}
@media (max-width:899px){
 .hero{--pw:220px}
 .hero-in{grid-template-columns:1fr;gap:12px;padding-top:32px;padding-bottom:56px;min-height:0}
 .hero-copy{gap:16px}
 .hero-art{min-height:0;padding:76px 0 30px}
}

/* Kursives Wort mit Federschwung: Tinte darunter, Gold blendet darüber ein */
.hero .iw,.hero .h1 em{position:relative;display:inline-block;font-style:italic;white-space:nowrap}
.hero .iw .wg{position:absolute;inset:0;color:var(--acc)}
.hero .sw{position:absolute;max-width:none;left:-2%;bottom:-.16em;width:104%;height:.3em;overflow:visible}
.hero .sw path{fill:none;stroke-linecap:round;stroke-width:2.2}
.hero .wi{color:var(--ink)}
.hero .wi .sw path{stroke:var(--ink-line)}
.hero .wg .sw path{stroke:var(--acc)}

/* Handy */
.hero .ph{position:absolute;inset:0;z-index:3;padding:calc(var(--pw)*.035);border-radius:calc(var(--pw)*.16);background:#15110E;box-shadow:0 0 0 1px #3A312A,var(--shadow)}
.hero .ph .scr{position:relative;height:100%;border-radius:calc(var(--pw)*.13);overflow:hidden;background:#FAF5EB}
.hero .ph .isl{position:absolute;z-index:4;left:50%;top:calc(var(--pw)*.065);width:28%;height:calc(var(--pw)*.08);translate:-50% 0;border-radius:99px;background:#15110E}
.hero .ph video,.hero .ph .poster,.hero .ph iframe{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border:0}
.hero .ph iframe{pointer-events:none}
.hero .inv-c,.hero .inv-s{position:absolute;inset:0}
.hero .inv-c svg,.hero .inv-s svg{display:block;width:100%;height:100%}
.hero .inv-s{opacity:0}
.hero .inv-s .ink{stroke:#2A221C}
/* Platzhalter-Gruß, bis eine echte Karte als Video kommt (data-video/data-poster) */
.hero .inv-n{position:absolute;left:0;right:0;top:54.6%;padding:0 9%;text-align:center;font:500 calc(var(--pw)*.1)/1.2 var(--serif);color:#2A221C;text-wrap:balance}
.hero .inv-n:lang(pa){font-weight:400;font-size:calc(var(--pw)*.085);line-height:1.45}

/* Zweig ums Handy: Tinte (Linien) über Aquarell (Flächen). Einheit: Handy 250 breit, Oberkante y 60, links x 175 */
.hero .br{position:absolute;max-width:none;overflow:visible;pointer-events:none;left:calc(var(--pw)*-.7);top:calc(var(--pw)*-.24);width:calc(var(--pw)*2.4)}
.hero .wc{position:absolute;left:calc(var(--pw)*-.7);top:calc(var(--pw)*-.24);width:calc(var(--pw)*2.4);height:calc(var(--pw)*2.8)}
.hero .wc .br{left:0;top:0;width:100%}
.hero .ink{fill:none;stroke:var(--ink-line);stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:0}
.hero .ctr{fill:var(--ink-line)}
.hero .wf{opacity:var(--wc-o)}
.hero .wl{fill:var(--wc-leaf)}
.hero .wch1{fill:var(--ch1)}.hero .wch2{fill:var(--ch2)}.hero .wchc{fill:var(--chc)}.hero .wbud{fill:var(--bud)}
.hero .ws{fill:none;stroke-linecap:round;stroke-dasharray:1}
.hero .ws.wbark{stroke:var(--bark);opacity:.42}
.hero .pop{transform-box:fill-box;transform-origin:center}

/* Tinte zuerst (ca. 1,5 s), danach Farbe; Zeiten × --ts */
@keyframes h-draw{from{stroke-dashoffset:1}}
@keyframes h-pop{from{transform:scale(.15) rotate(-60deg);opacity:0}}
@keyframes h-in{from{opacity:0}}
@keyframes h-out{from{opacity:1}}
.hero.ink-play .ink,.hero.ink-play .ws{animation:h-draw calc(var(--t,.8s)*var(--ts)) cubic-bezier(.45,.05,.3,1) calc(var(--d,0s)*var(--ts)) both}
.hero.ink-play .pop{animation:h-pop calc(.9s*var(--ts)) cubic-bezier(.2,.9,.25,1.2) calc(var(--d,0s)*var(--ts)) both}
.hero.ink-play .wc{animation:h-in calc(1.4s*var(--ts)) ease calc(1.7s*var(--ts)) both}
.hero.ink-play .inv-s{animation:h-out calc(.7s*var(--ts)) ease calc(2.5s*var(--ts)) both}
.hero.ink-play .inv-c{animation:h-in calc(1.1s*var(--ts)) ease calc(1.9s*var(--ts)) both}
.hero.ink-play .wi .sw .ink{--d:.15s;--t:.9s}
.hero.ink-play .wg{animation:h-in calc(.9s*var(--ts)) ease calc(1.9s*var(--ts)) both}

/* Licht-Canvas und Pause-Knopf (verborgen, wenn sich nichts bewegt) */
.hero .lt{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;display:block}
.hero .lt-pause{position:absolute;z-index:5;right:16px;bottom:16px;width:40px;height:40px;border-radius:50%;border:0;display:grid;place-items:center;background:color-mix(in srgb,var(--surface) 82%,transparent);box-shadow:0 0 0 1px var(--line);color:var(--ink);cursor:pointer}
.hero .lt-pause:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
.hero .lt-pause svg{width:14px;height:14px}
.hero .lt-pause .i-play,.hero.lt-paused .lt-pause .i-pause{display:none}
.hero.lt-paused .lt-pause .i-play{display:block}
.hero.h-calm .lt-pause{display:none}
.hero.lt-css .lt{display:none}
/* Ohne WebGL: ruhiges CSS-Licht in derselben Stärke */
.hero.lt-css::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(14% 18% at 70% 26%,rgba(255,226,160,.68),transparent 70%),radial-gradient(9% 12% at 86% 52%,rgba(255,226,160,.6),transparent 70%),radial-gradient(70% 80% at 100% 0%,rgba(110,74,30,.22),transparent 70%),radial-gradient(60% 70% at 100% 100%,rgba(110,74,30,.16),transparent 70%)}

/* Platz für das Handy schon vor hero.js (kein Nachrutschen) */
.hero .hero-phone{display:block;width:var(--pw);height:calc(var(--pw)*2.05)}

/* Fallende Blütenblätter: Ebene über dem Hero, nimmt keine Klicks an; je Blatt i > b > b > b
   (Fallen, Pendeln, Drehen, Wenden, hero.js), Textzonen per Maske */
.h-petals{position:absolute;left:0;z-index:7;pointer-events:none;overflow:hidden;contain:layout paint;
 --hp1:#F6D6DE;--hp3:#EBB3C2;--hps:rgba(194,87,117,.45);--hpv:rgba(194,87,117,.35)}
.h-petals i{position:absolute;left:0;top:0;width:22px;height:22px;opacity:0;will-change:transform,opacity}
.h-petals i b{display:block;width:100%;height:100%;will-change:transform}
.h-petals i svg{display:block;width:100%;height:100%;overflow:visible}
@media (max-width:699px){.h-petals i{width:19px;height:19px}}

@media (prefers-reduced-motion:reduce){.hero *,.hero *::before,.hero *::after{animation:none!important;transition:none!important}}