/* ================= Prototyp · Modul „So geht's“ (Tintenlinie) =================
   Aufruf: <section class="sec" data-steps></section>; data-steps="hochzeit" (Save the Date als Schritt 0)
   oder data-steps="kompakt" (kleine Fassung für die Design-Seite). Rendert sich selbst (steps.js).
   Portiert aus Studie L5 (landing-schritte.html, Stand cc27743). Tokens aus base.css, mit Fallbacks.
   Endzustand ist das normale CSS; Bewegung nur unter .st-mo (vom Skript gesetzt, nicht bei html.rm oder
   „Bewegung reduzieren“). Animiert werden nur transform, opacity und stroke-dashoffset.
   Dunkel: Ziffern, Linie und Schnörkel in Weißdruck über --ink-line; die Mini-Screens zeigen App-UI und gehen über
   dieselben Tokens ins App-Dunkel. Die Einladung darin (Karte, Save the Date) bleibt hell und wird gedämpft. */

[data-steps]{
 --_bg:var(--bg,#F7F2EA);--_surface:var(--surface,#FFFDF9);--_sand:var(--sand,#EDE4D6);--_line:var(--line,#E2D7C6);
 --_ink:var(--ink,#2A221C);--_muted:var(--muted,#64584C);--_on:var(--on-ink,#FFFDF9);--_acc:var(--acc,#7E6129);
 --_inkl:var(--ink-line,var(--ink,#2A221C));--_shadow:var(--shadow,0 22px 40px -28px rgba(42,34,28,.55));
 --_serif:var(--serif,"Cormorant Garamond",Georgia,serif);--_sans:var(--sans,-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif);
 --_ease:var(--ease,cubic-bezier(.3,.7,.2,1));--_spring:var(--spring,cubic-bezier(.2,.9,.25,1.15));
 overflow-x:clip;color:var(--_ink)
}
:where([data-steps]) :where(.st-wrap){max-width:1240px;margin:0 auto;padding:0 16px}
@media (min-width:700px){:where([data-steps]) :where(.st-wrap){padding:0 40px}}
.st-eyebrow{display:flex;align-items:center;gap:12px;margin:0;font:400 12px/1.4 var(--_sans);letter-spacing:.16em;text-transform:uppercase;color:var(--_muted)}
.st-eyebrow::before{content:"";width:28px;height:1px;background:var(--_acc)}
.st-h2{margin:16px 0 0;font:500 clamp(36px,5vw,56px)/1.05 var(--_serif);letter-spacing:-.01em;max-width:14em}
.st-note{margin:28px 0 0;color:var(--_muted);font:400 16px/1.5 var(--_sans)}

/* Bühne mit Linie */
.st-stage{position:relative;margin-top:56px}
.st-list{list-style:none;margin:0;padding:0;display:grid;gap:72px;position:relative;z-index:1}
.st-wide .st-list{grid-template-columns:repeat(var(--n,3),minmax(0,1fr));column-gap:48px;gap:0 48px}
.st-wide.st-stage{padding-right:72px}
/* Screens auf einer Linie: Ziffer, Titel, Text und Screen teilen sich die Zeilen über alle Spalten (subgrid) */
.st-wide .st-step:has(.st-w){grid-row:span 4;grid-template-rows:subgrid;row-gap:14px}
/* Vier Schritte (Hochzeit): engere Spalten, damit die Screens größer werden */
.st-wide.st-stage[data-n="4"]{padding-right:56px}
.st-wide.st-stage[data-n="4"] .st-list{column-gap:28px}
.st-ln{position:absolute;left:0;top:0;width:100%;height:100%;max-width:none;overflow:visible;pointer-events:none;z-index:0}
.st-ln path{fill:none;stroke:var(--_inkl);stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:0}
.st-ln .p1{stroke-width:2.1}
.st-ln .p2{stroke-width:1.3;opacity:.85}
.st-ln .dot{fill:var(--_inkl);transform-box:fill-box;transform-origin:center;transition:opacity .4s ease,transform .5s var(--_spring)}
/* Look „Rosenrot“ (Hochzeitsseite, data-look von A): Der Schnörkel endet in einem kleinen Herz statt im Punkt */
.st-ln .heart{display:none;fill:var(--_acc);transform-box:fill-box;transform-origin:center;transition:opacity .4s ease,transform .5s var(--_spring)}
:root[data-look=rosenrot] .st-ln .heart{display:inline}
:root[data-look=rosenrot] .st-ln .dot{display:none}
.st-step{position:relative;display:grid;gap:14px;align-content:start}
.st-num{position:relative;display:block;height:118px;font:500 132px/1 var(--_serif);font-variant-numeric:lining-nums}
.st-num span{position:absolute;left:0;top:-12px}
.st-num .o{color:transparent;-webkit-text-stroke:1.2px var(--_inkl)}
.st-num .b{color:var(--_inkl);filter:blur(5px);opacity:0}
.st-num .s{color:var(--_inkl)}
.st-step h3{margin:0;font:500 34px/1.1 var(--_serif)}
.st-step p{margin:0;color:var(--_muted);font:400 17px/1.5 var(--_sans);max-width:24em}
.st-again{justify-self:start;display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 12px;margin-left:-12px;font:500 14px/1 var(--_sans);color:var(--_muted);background:none;border:0;border-radius:6px;cursor:pointer}
.st-again:hover{color:var(--_ink)}
.st-again:focus-visible{outline:2px solid var(--_ink);outline-offset:2px}
.st-cta{display:flex;margin-top:56px;position:relative;z-index:1}
.st-wide .st-cta{justify-content:flex-end}
.st-btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 24px;font:600 16px/1 var(--_sans);white-space:nowrap;background:var(--_ink);color:var(--_on);border-radius:4px;text-decoration:none}
.st-btn:focus-visible{outline:2px solid var(--_ink);outline-offset:3px}

/* Kompakt: kleine Ziffern, keine Screens */
[data-steps=kompakt] .st-num{height:76px;font-size:84px}
[data-steps=kompakt] .st-num span{top:-8px}
[data-steps=kompakt] .st-step h3{font-size:26px}
[data-steps=kompakt] .st-stage{margin-top:36px}
[data-steps=kompakt] .st-list{gap:44px}

/* Handy: Linie senkrecht links, Ziffern auf ihr; Schritte mit Screens etwas dichter */
.st-stage:not(.st-wide){padding-left:64px}
.st-stage:not(.st-wide) .st-list:has(.st-w){gap:52px}
.st-stage:not(.st-wide) .st-num{position:absolute;left:-64px;top:-10px;width:52px;height:64px;font-size:64px}
.st-stage:not(.st-wide) .st-num span{left:50%;top:-6px;translate:-50% 0}
.st-stage:not(.st-wide) .st-step h3{font-size:30px}
[data-steps=kompakt] .st-stage:not(.st-wide) .st-num{font-size:52px}
[data-steps=kompakt] .st-stage:not(.st-wide) .st-step h3{font-size:24px}

/* ---------- Mini-Screens (Illustration, role=img) ---------- */
.st-w{display:grid;gap:6px;min-width:0;container-type:inline-size}
.st-scr{position:relative;aspect-ratio:4/3;width:100%;max-width:400px;border:1px solid var(--_line);border-radius:10px;background:var(--_surface);box-shadow:var(--_shadow);overflow:hidden;font:400 max(12px,min(4.2cqi,17px))/1.3 var(--_sans);color:var(--_ink)}
.st-scr .st-top{display:flex;align-items:center;gap:.5em;height:12%;padding:0 4.5%;border-bottom:1px solid var(--_line);font-size:.8em;color:var(--_muted)}
.st-scr .st-top i{width:.55em;height:.55em;border-radius:50%;background:var(--_line)}
.st-scr .st-top span{margin-left:.4em}
.st-body{position:absolute;left:0;right:0;top:12%;bottom:0;padding:5%}
.st-edit{display:grid;grid-template-columns:44% 1fr;gap:6%;height:100%}
.st-ed{display:grid;align-content:start;gap:.35em}
.st-lbl{font-size:.75em;color:var(--_muted);margin-top:.35em}
.st-fld{position:relative;display:block;height:2em;padding:.4em .55em;border:1px solid var(--_line);border-radius:.35em;background:var(--_bg);white-space:nowrap;overflow:hidden}
.st-fo{position:absolute;inset:-1px;border:1.5px solid var(--_acc);border-radius:.35em;opacity:0}
.st-typed{font-weight:600}
.st-dim{color:var(--_muted)}
.st-thumbs{display:flex;gap:.35em}
.st-thumbs i{width:2.1em;height:2.1em;border-radius:.3em;background:var(--_sand)}
.st-cardw{display:grid;place-items:center}
.st-card{position:relative;width:78%;aspect-ratio:12/17;border-radius:4px;box-shadow:0 10px 20px -14px rgba(42,34,28,.7);background:#FAF5EB}
.st-card svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.st-sk path{fill:none;stroke:#2A221C;stroke-width:1.1;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:0}
.st-cn{position:absolute;left:0;right:0;top:57%;text-align:center;font:italic 500 1.05em/1 var(--_serif);color:#2A221C;white-space:nowrap}
.st-share{display:grid;grid-template-rows:auto 1fr;gap:5%;height:100%}
.st-pill{justify-self:start;display:inline-flex;align-items:center;gap:.45em;padding:.45em .8em;border-radius:.5em;background:var(--_ink);color:var(--_on);font-weight:600;font-size:.9em}
.st-pill svg{width:1.15em;height:1.15em;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linejoin:round}
.st-chat{display:grid;align-content:start;gap:.55em;padding:4%;border-radius:.5em;background:color-mix(in srgb,var(--_sand) 60%,transparent)}
.st-bub{justify-self:end;display:grid;gap:.25em;width:78%;padding:.4em;border-radius:.6em .6em .15em .6em;background:var(--_surface);box-shadow:0 1px 2px rgba(0,0,0,.08)}
.st-lk{display:flex;gap:.5em;align-items:center}
.st-lk .st-th{flex:none;width:2.6em;height:3.2em;border-radius:.25em;background:linear-gradient(#F2E6CF,#E8D2A2);border:1px solid #D8C49A}
.st-lk b{display:block;font-size:.85em}
.st-lk small{display:block;font-size:.72em;color:var(--_muted)}
.st-tk{justify-self:end;font-size:.72em;color:var(--_muted);letter-spacing:-.1em}
.st-rep{justify-self:start;max-width:70%;transform-origin:0 100%;padding:.45em .7em;border-radius:.6em .6em .6em .15em;background:var(--_surface);box-shadow:0 1px 2px rgba(0,0,0,.08);font-size:.8em}
.st-dash{display:grid;grid-template-rows:auto 1fr;gap:6%;height:100%}
.st-dtop{display:flex;align-items:center;gap:6%}
.st-ring{width:28%;flex:none;aspect-ratio:1;rotate:-90deg}
.st-ring circle{fill:none;stroke-width:7}
.st-ring .rb{stroke:var(--_line)}
.st-ring .rv{stroke:var(--_acc);stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:.3}
.st-cnt{display:block;font:500 2.6em/1 var(--_serif);font-variant-numeric:lining-nums tabular-nums}
.st-dtop small{display:block;font-size:.8em;color:var(--_muted)}
.st-rows{display:grid;align-content:start;gap:.7em}
.st-rw{display:grid;grid-template-columns:5.2em 1fr auto;align-items:center;gap:.6em;font-size:.85em}
.st-rw .st-v{color:var(--_muted);font-variant-numeric:tabular-nums}
.st-barx{height:.5em;border-radius:99px;background:var(--_line);overflow:hidden}
.st-barx i{display:block;height:100%;border-radius:99px;background:var(--_ink);transform-origin:0 50%;transform:scaleX(var(--v))}
/* 0 Save the Date */
.st-std{display:grid;place-items:center;align-content:center;gap:.4em;height:100%;text-align:center;border-radius:.4em;background:#FAF5EB;color:#2A221C}
.st-std .st-k{font-size:.72em;letter-spacing:.16em;text-transform:uppercase;color:#64584C}
.st-std .st-date{font:italic 500 1.5em/1 var(--_serif)}
.st-std .st-cnt{font-size:2.2em}
.st-std small{font-size:.75em;color:#64584C}

/* ---------- Bewegung (nur unter .st-mo) ---------- */
@keyframes st-draw{from{stroke-dashoffset:1}}
@keyframes st-on{from{opacity:0}}
@keyframes st-soak{0%{opacity:0;transform:scale(1.07)}35%{opacity:.9}100%{opacity:0;transform:scale(1)}}
@keyframes st-up{from{opacity:0;transform:translateY(14px)}}
@keyframes st-pop{from{opacity:0;transform:scale(.5)}}
@keyframes st-press{50%{transform:scale(.94)}}
@keyframes st-bar{from{transform:scaleX(0)}}
@keyframes st-focus{0%,100%{opacity:0}10%,85%{opacity:1}}
/* Treppe (Desktop ab 900 px, mit Szenen; steps.js setzt .st-stair und --st-top, auch bei reduzierter Bewegung;
   Gagandeep 11.10.2026): Nur Dachzeile und Überschrift kleben unter dem Kopf. Jede Spalte steht eine Stufe (--st-rise,
   40 % der Bildhöhe, 300 bis 480 px) tiefer, die Liste ist um die Stufen höher. Der Titel hat keinen eigenen Grund: Die
   Bühne wird ab seiner Unterkante auf 48 px weich ausgeblendet (Maske ab --st-cut, steps.js), darunter bleibt das echte
   Papier ohne Naht. Er löst sich mit dem Ende des Abschnitts (Ende von .st-wrap). Die Bühne reicht 48 px nach links,
   damit der Anlauf der Linie in der Maske liegt. */
@property --st-cut{syntax:'<length>';inherits:false;initial-value:-48px}
.st-stair{--st-rise:clamp(300px,40vh,480px)}
.st-stair .st-head{position:sticky;top:var(--st-top,104px);z-index:2}
.st-stair .st-stage{margin-left:-48px;padding-left:48px;-webkit-mask:linear-gradient(transparent,#000) 0 var(--st-cut)/100% 48px no-repeat,linear-gradient(#000,#000) 0 calc(var(--st-cut) + 48px)/100% 100% no-repeat;mask:linear-gradient(transparent,#000) 0 var(--st-cut)/100% 48px no-repeat,linear-gradient(#000,#000) 0 calc(var(--st-cut) + 48px)/100% 100% no-repeat}
.st-stair .st-step{top:calc(var(--i,0) * var(--st-rise))}
.st-stair .st-list{padding-bottom:calc((var(--n,3) - 1) * var(--st-rise))}
/* Fokus nicht unter dem klebenden Titel (WCAG 2.4.11): Abstand beim Hineinscrollen, --st-focus aus steps.js */
.st-stair .st-stage :is(a,button){scroll-margin-top:var(--st-focus,0px)}
.st-mo.st-sda .st-ln path{animation:st-draw linear both;animation-timeline:--st}
.st-mo .st-stage{view-timeline:--st block}
.st-mo .st-stage:not(.done) :is(.dot,.heart){opacity:0;transform:scale(.3)}
.st-mo .st-step:not(.on) .s{opacity:0}
.st-mo .st-step.on .b{animation:st-soak 1.3s ease-out both}
.st-mo .st-step.on .s{animation:st-on .8s ease .25s both}
.st-mo .st-step :is(h3,p,.st-w){transition:opacity .35s ease .15s,transform .35s var(--_ease) .15s}
.st-mo .st-step:not(.on) :is(h3,p,.st-w){opacity:0;transform:translateY(8px)}
.st-mo .st-step .st-w{transition-delay:.05s}
.st-mo .st-stage:not(.done) .st-cta{opacity:0;transform:translateY(8px)}
.st-mo .st-cta{transition:opacity .4s ease .15s,transform .4s var(--_ease) .15s}
.st-mo .st-scr.pre *{animation-play-state:paused!important}
.st-mo .st-scr:is(.pre,.run) .st-sk path{animation:st-draw .5s var(--_ease) calc(.15s + var(--d,0s)) both}
.st-mo .st-scr:is(.pre,.run) .st-ch{animation:st-on 1ms linear calc(.45s + var(--i)*.09s) both}
.st-mo .st-scr:is(.pre,.run) .st-fo{animation:st-focus 1.4s ease .3s both}
.st-mo .st-scr:is(.pre,.run) .st-cn{animation:st-on .5s ease 1.45s both}
.st-mo .st-scr:is(.pre,.run) .st-col{animation:st-on .8s ease 1.8s both}
.st-mo .st-scr:is(.pre,.run) .st-pill{animation:st-press .35s ease .1s both}
.st-mo .st-scr:is(.pre,.run) .st-bub{animation:st-up .6s var(--_spring) .45s both}
.st-mo .st-scr:is(.pre,.run) .st-tk{animation:st-on .3s ease 1.3s both}
.st-mo .st-scr:is(.pre,.run) .st-rep{animation:st-pop .45s var(--_spring) 1.6s both}
.st-mo .st-scr:is(.pre,.run) .rv{animation:st-draw 1.7s var(--_ease) .25s both}
.st-mo .st-scr:is(.pre,.run) .st-barx i{animation:st-bar 1s var(--_ease) calc(.7s + var(--i)*.2s) both}
.st-mo .st-scr:is(.pre,.run) .st-date{animation:st-up .6s var(--_spring) .2s both}
.st-mo .st-scr:is(.pre,.run) .st-std small{animation:st-on .5s ease 2s both}
@media (prefers-reduced-motion:reduce){[data-steps] *{animation:none!important;transition:none!important}}
[data-steps]:not(.st-mo) .st-again{display:none}
[data-steps]:not(.st-mo) .st-num .b{display:none}

/* ---------- Dunkel: was keine Farbe ist (Zweier-Muster, ohne Skript) ---------- */
@media (prefers-color-scheme:dark){
 :root:not([data-theme=light]) .st-scr{box-shadow:inset 0 1px 0 var(--rim),var(--_shadow)}
 :root:not([data-theme=light]) :is(.st-card,.st-std,.st-lk .st-th){filter:brightness(var(--media-dim,.9))}
}
:root[data-theme=dark] .st-scr{box-shadow:inset 0 1px 0 var(--rim),var(--_shadow)}
:root[data-theme=dark] :is(.st-card,.st-std,.st-lk .st-th){filter:brightness(var(--media-dim,.9))}