/* ==========================================================
   seite bereit. Hero-Grafik "Ablauf" (Varianten A und B)
   Skaliert über Container-Einheiten, kein JavaScript nötig.
   ========================================================== */
.sb-hero{
  --sb-papier-textur:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxNDAnIGhlaWdodD0nMTQwJz48ZmlsdGVyIGlkPSduJz48ZmVUdXJidWxlbmNlIHR5cGU9J2ZyYWN0YWxOb2lzZScgYmFzZUZyZXF1ZW5jeT0nLjg1JyBudW1PY3RhdmVzPScyJyBzdGl0Y2hUaWxlcz0nc3RpdGNoJy8+PGZlQ29sb3JNYXRyaXggdmFsdWVzPScwIDAgMCAwIC40MiAgMCAwIDAgMCAuMzIgIDAgMCAwIDAgLjIyICAwIDAgMCAuMTEgMCcvPjwvZmlsdGVyPjxyZWN0IHdpZHRoPScxMDAlJyBoZWlnaHQ9JzEwMCUnIGZpbHRlcj0ndXJsKCNuKScvPjwvc3ZnPg==");
  --sb-papier:var(--papier,#FBFAF7); --sb-karte:var(--karte,#FFFFFF);
  --sb-flaeche:var(--flaeche,#F4F1EC); --sb-linie:var(--linie,#E7E2DA);
  --sb-text:var(--text,#1C1714); --sb-leise:var(--leise,#6B625C);
  --sb-espresso:var(--gruen,#4B3427); --sb-espresso-dunkel:var(--gruen-dunkel,#3A281E);
  --sb-kupfer:var(--gold,#B5652B); --sb-kupfer-hell:var(--kupfer-hell,#E0915A); --sb-bronze:var(--bronze,#9C5523);
  --sb-gruen:#2E7A4C; --sb-gruen-punkt:#3AA060; --sb-gruen-flaeche:#E6F2E9;
  --sb-schatten:0 1px 2px rgba(58,40,30,.06),0 14px 34px -10px rgba(58,40,30,.22);
  container-type:inline-size; width:100%; max-width:640px; margin-inline:auto;
  font-family:"DM Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  color:var(--sb-text); line-height:1.25; -webkit-font-smoothing:antialiased;
}
.sb-hero *{box-sizing:border-box; margin:0}
.sb-stage{--u:calc(100cqw / 640); position:relative; height:calc(560 * var(--u))}

/* ---------- Linie und Stationen ---------- */
.sb-path{position:absolute; inset:0; width:100%; height:100%; z-index:0; pointer-events:none; overflow:visible}
.sb-path__line{fill:none; stroke:var(--sb-kupfer); stroke-width:1.6; stroke-dasharray:4 6; stroke-linecap:round; opacity:.7}
.sb-path__draw{fill:none; stroke:#fff; stroke-width:8; stroke-dasharray:1; stroke-dashoffset:0; animation:sb-draw 5s cubic-bezier(.4,0,.3,1) .3s both}
.sb-step{position:absolute; z-index:6; display:inline-flex; align-items:center; gap:calc(6 * var(--u)); padding:calc(3 * var(--u)) calc(11 * var(--u)) calc(3 * var(--u)) calc(3 * var(--u));
  background:var(--sb-karte); border:1px solid var(--sb-linie); border-radius:calc(20 * var(--u)); white-space:nowrap;
  font-size:calc(11.5 * var(--u)); font-weight:600; color:var(--sb-espresso-dunkel); box-shadow:0 1px 2px rgba(58,40,30,.06);
  animation:sb-fade .5s ease both}
.sb-step span{display:grid; place-items:center; width:calc(19 * var(--u)); height:calc(19 * var(--u)); border-radius:50%; background:var(--sb-kupfer); color:#fff; font-size:calc(10.5 * var(--u)); font-weight:700; line-height:1; font-variant-numeric:tabular-nums; text-box:trim-both cap alphabetic}
.sb-step--1{animation-delay:.2s} .sb-step--2{animation-delay:1.8s} .sb-step--3{animation-delay:3.2s} .sb-step--4{animation-delay:4.3s}

/* ---------- Karten allgemein ---------- */
.sb-card{position:absolute; background:var(--sb-karte); border-radius:calc(14 * var(--u)); box-shadow:var(--sb-schatten);
  animation:sb-in .7s cubic-bezier(.2,.7,.2,1) both}
.sb-wm{font-weight:400; letter-spacing:-.02em; color:var(--sb-text); white-space:nowrap}
.sb-wm b{font-weight:700} .sb-wm i{font-style:normal; color:var(--sb-kupfer); font-weight:700}
.sb-bar{display:block; height:calc(7 * var(--u)); border-radius:calc(4 * var(--u)); background:var(--sb-text)}
.sb-logo{flex:none; width:calc(16 * var(--u)); height:calc(16 * var(--u)); border-radius:calc(5 * var(--u)); background:linear-gradient(135deg,var(--sb-kupfer-hell),var(--sb-kupfer))}

/* ---------- 1 Brief ---------- */
.sb-env{height:calc(196 * var(--u)); background:none; box-shadow:none; border-radius:0; perspective:calc(700 * var(--u))}
/* Schatten nur am Umschlag, nicht als Filter über dem Ganzen: ein Filter rendert auch den Brieftext als Bild (unscharf) */
.sb-env__back{box-shadow:0 calc(12 * var(--u)) calc(22 * var(--u)) calc(-4 * var(--u)) rgba(58,40,30,.2), 0 1px 1px rgba(58,40,30,.08)}
.sb-env__back,.sb-env__front{position:absolute; left:0; right:0; bottom:0; height:calc(130 * var(--u)); border-radius:calc(10 * var(--u))}
.sb-env__back{background:#E6D9C6; z-index:0}
.sb-env__flap{position:absolute; left:0; right:0; top:calc(66 * var(--u)); height:calc(86 * var(--u)); z-index:1; background:#E9DDCB;
  clip-path:polygon(0 0,100% 0,50% 100%); transform-origin:50% 0; transform:rotateX(180deg);
  animation:sb-flap .9s cubic-bezier(.5,0,.3,1) .35s both}
.sb-env__slot{position:absolute; inset:0; z-index:2; overflow:hidden; border-radius:0 0 calc(10 * var(--u)) calc(10 * var(--u))}
.sb-env__letter{position:absolute; left:calc(12 * var(--u)); right:calc(12 * var(--u)); top:0; height:calc(150 * var(--u)); padding:calc(11 * var(--u)) calc(12 * var(--u)); background:#fff;
  border-radius:calc(8 * var(--u)); box-shadow:0 1px 3px rgba(58,40,30,.12); animation:sb-letter .8s cubic-bezier(.2,.7,.2,1) 1s both}
.sb-env__letter .sb-wm{font-size:calc(11 * var(--u))}
.sb-env__row{display:flex; gap:calc(8 * var(--u)); align-items:flex-start; margin-top:calc(8 * var(--u))}
.sb-env__title{font-size:calc(12.5 * var(--u)); font-weight:700; line-height:1.15; letter-spacing:-.01em}
.sb-env__sub{margin-top:calc(4 * var(--u)); font-size:calc(8.5 * var(--u)); color:var(--sb-leise)}
.sb-qr{flex:none; width:calc(42 * var(--u)); height:calc(42 * var(--u)); padding:calc(3 * var(--u)); border:1px solid var(--sb-linie); border-radius:calc(5 * var(--u)); fill:var(--sb-text)}
.sb-env__frontwrap{position:absolute; inset:0; z-index:3; filter:drop-shadow(0 -1px calc(1.5 * var(--u)) rgba(58,40,30,.14))}
.sb-env__front{clip-path:polygon(0 0,50% 62%,100% 0,100% 100%,0 100%);
  background-color:#F4ECDF; background-image:var(--sb-papier-textur),linear-gradient(180deg,#F7F0E6,#EFE5D6)}
.sb-env__seal{position:absolute; z-index:4; left:50%; top:calc(134 * var(--u)); width:calc(24 * var(--u)); height:calc(24 * var(--u)); margin-left:calc(-12 * var(--u)); border-radius:50%;
  display:grid; place-items:center; background:var(--sb-kupfer); color:#fff; font-size:calc(11 * var(--u)); font-weight:700;
  box-shadow:0 1px 2px rgba(58,40,30,.25), inset 0 0 0 calc(2 * var(--u)) rgba(255,255,255,.18)}

/* ---------- 2 Smartphone ---------- */
.sb-phone{width:calc(140 * var(--u)); height:calc(280 * var(--u)); padding:calc(6 * var(--u)); border-radius:calc(24 * var(--u)); background:#2B211B}
.sb-phone__screen{position:relative; height:100%; display:flex; flex-direction:column; border-radius:calc(18 * var(--u)); background:#fff; overflow:hidden}
.sb-phone__notch{position:absolute; top:calc(7 * var(--u)); left:50%; width:calc(38 * var(--u)); height:calc(9 * var(--u)); margin-left:calc(-19 * var(--u)); border-radius:calc(9 * var(--u)); background:#2B211B}
.sb-phone__head{display:flex; align-items:center; gap:calc(6 * var(--u)); padding:calc(24 * var(--u)) calc(10 * var(--u)) calc(8 * var(--u))}
.sb-phone__head .sb-logo{width:calc(14 * var(--u)); height:calc(14 * var(--u)); border-radius:calc(4 * var(--u))}
.sb-phone__name{font-size:calc(11 * var(--u)); font-weight:700}
.sb-burger{margin-left:auto; display:grid; gap:calc(2.5 * var(--u))} .sb-burger i{display:block; width:calc(11 * var(--u)); height:calc(1.5 * var(--u)); border-radius:calc(1 * var(--u)); background:var(--sb-text)}
.sb-phone__hero{margin:0 calc(8 * var(--u)); padding:calc(10 * var(--u)); border-radius:calc(10 * var(--u)); background:var(--sb-flaeche)}
.sb-tag{display:inline-block; margin-bottom:calc(6 * var(--u)); padding:calc(2 * var(--u)) calc(6 * var(--u)); border-radius:calc(6 * var(--u)); background:#fff; font-size:calc(10 * var(--u)); font-weight:600; color:var(--sb-bronze)}
.sb-phone__hero .sb-bar{margin-top:calc(4 * var(--u))}
.sb-phone__tiles{display:grid; grid-template-columns:1fr 1fr; gap:calc(6 * var(--u)); margin:calc(7 * var(--u)) calc(8 * var(--u)) 0}
.sb-phone__tiles .sb-tile{height:calc(30 * var(--u))}
.sb-phone__ask{margin-top:auto; padding:calc(9 * var(--u)) calc(10 * var(--u)) calc(12 * var(--u)); border-top:1px solid var(--sb-linie); text-align:center}
.sb-phone__ask p{font-size:calc(8 * var(--u)); color:var(--sb-leise)}
.sb-yes{position:relative; overflow:hidden; display:block; margin-top:calc(6 * var(--u)); height:calc(30 * var(--u)); line-height:calc(30 * var(--u)); border-radius:calc(9 * var(--u));
  background:var(--sb-kupfer); color:#fff; font-size:calc(11 * var(--u)); font-weight:700; white-space:nowrap;
  box-shadow:0 calc(4 * var(--u)) calc(10 * var(--u)) calc(-4 * var(--u)) rgba(181,101,43,.7); animation:sb-press .35s ease 2.5s both}
.sb-yes__ripple{position:absolute; left:76%; top:55%; width:calc(40 * var(--u)); height:calc(40 * var(--u)); margin:calc(-20 * var(--u)) 0 0 calc(-20 * var(--u)); border-radius:50%;
  background:rgba(255,255,255,.55); opacity:0; animation:sb-ripple .7s ease-out 2.6s both}
.sb-cursor{position:absolute; z-index:5; left:calc(76% - calc(9 * var(--u))); bottom:calc(-2 * var(--u)); width:calc(28 * var(--u)); height:calc(28 * var(--u)); overflow:visible;
  filter:drop-shadow(0 calc(2 * var(--u)) calc(3 * var(--u)) rgba(28,23,20,.3)); animation:sb-cursor 1s cubic-bezier(.3,.6,.3,1) 1.6s both}
.sb-cursor path{fill:#fff; stroke:var(--sb-espresso-dunkel); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round}

/* ---------- 3 Browser ---------- */
.sb-browser{overflow:hidden}
.sb-browser__bar{display:flex; align-items:center; gap:calc(8 * var(--u)); height:calc(32 * var(--u)); padding:0 calc(9 * var(--u)); background:var(--sb-flaeche); border-bottom:1px solid var(--sb-linie)}
.sb-dots{display:flex; gap:calc(4 * var(--u))} .sb-dots i{width:calc(7 * var(--u)); height:calc(7 * var(--u)); border-radius:50%; background:#D8CFC3}
.sb-url{flex:1; min-width:0; display:flex; align-items:center; gap:calc(4 * var(--u)); padding:calc(4 * var(--u)) calc(8 * var(--u)); border-radius:calc(7 * var(--u)); background:#fff;
  font-size:calc(11 * var(--u)); color:var(--sb-leise); white-space:nowrap; overflow:hidden}
.sb-url svg{flex:none; width:calc(8 * var(--u)); height:calc(8 * var(--u)); stroke:var(--sb-leise)}
.sb-swap{display:inline-grid; flex:none} .sb-swap>*{grid-area:1/1; justify-self:end; align-self:center}
.sb-pill{display:inline-flex; align-items:center; gap:calc(4 * var(--u)); padding:calc(3 * var(--u)) calc(8 * var(--u)); border-radius:calc(20 * var(--u)); font-size:calc(10 * var(--u)); font-weight:600; white-space:nowrap}
.sb-pill::before{content:""; width:calc(6 * var(--u)); height:calc(6 * var(--u)); border-radius:50%; background:currentColor}
.sb-pill--draft{background:#EEE8E0; color:#8F857C}
.sb-pill--online{background:var(--sb-gruen-flaeche); color:var(--sb-gruen)}
.sb-pill--online::before{background:var(--sb-gruen-punkt); animation:sb-pulse 1.2s ease-out 3.7s both}
.sb-browser__body{padding:calc(12 * var(--u)) calc(14 * var(--u)) calc(14 * var(--u))}
.sb-browser__head{display:flex; align-items:center; gap:calc(7 * var(--u))}
.sb-browser__head .sb-bar{width:calc(56 * var(--u)); height:calc(7 * var(--u))}
.sb-nav{margin-left:auto; display:flex; gap:calc(7 * var(--u))} .sb-nav i{display:block; width:calc(20 * var(--u)); height:calc(4 * var(--u)); border-radius:calc(2 * var(--u)); background:var(--sb-linie)}
.sb-browser__hero{margin-top:calc(10 * var(--u)); padding:calc(16 * var(--u)) calc(14 * var(--u)); border-radius:calc(10 * var(--u)); background:var(--sb-espresso-dunkel)}
.sb-browser__hero .sb-bar{height:calc(10 * var(--u)); background:#F3E9DF; margin-top:calc(6 * var(--u))}
.sb-browser__hero .sb-bar:first-child{margin-top:0}
.sb-browser__hero .sb-bar--dim{height:calc(5 * var(--u)); margin-top:calc(10 * var(--u)); background:rgba(243,233,223,.32)}
.sb-call{display:inline-flex; align-items:center; gap:calc(5 * var(--u)); margin-top:calc(12 * var(--u)); padding:calc(6 * var(--u)) calc(10 * var(--u)); border-radius:calc(7 * var(--u));
  background:var(--sb-kupfer); color:#fff; font-size:calc(10.5 * var(--u)); font-weight:700; white-space:nowrap}
.sb-call svg,.sb-hours svg{flex:none; width:calc(9 * var(--u)); height:calc(9 * var(--u))}
.sb-call svg{stroke:#fff}
.sb-hours{display:flex; flex-wrap:wrap; align-items:center; gap:calc(3 * var(--u)) calc(6 * var(--u)); padding:calc(9 * var(--u)) calc(2 * var(--u)); border-bottom:1px solid var(--sb-linie); font-size:calc(10.5 * var(--u)); color:var(--sb-leise)}
.sb-hours svg{stroke:var(--sb-bronze)} .sb-hours b{color:var(--sb-text); font-weight:600}
.sb-tiles{display:grid; grid-template-columns:repeat(3,1fr); gap:calc(8 * var(--u)); margin-top:calc(10 * var(--u))}
.sb-tile{display:block; height:calc(52 * var(--u)); border-radius:calc(8 * var(--u))}
.sb-tile--1{background:radial-gradient(circle at 28% 118%,#C9834F 0 40%,transparent 41%),linear-gradient(160deg,#F2DFC9,#E5BE98)}
.sb-tile--2{background:radial-gradient(circle at 74% 32%,#EFE4D5 0 17%,transparent 18%),linear-gradient(180deg,#8D6752,#5F4436)}
.sb-tile--3{background:linear-gradient(140deg,transparent 0 56%,rgba(156,85,35,.32) 56%),linear-gradient(200deg,#F5EEE5,#E2D2BF)}

/* ---------- 4 Kunden-Portal ---------- */
.sb-portal{padding:calc(14 * var(--u))}
.sb-portal__head{display:flex; align-items:center; gap:calc(8 * var(--u)); padding-bottom:calc(10 * var(--u)); border-bottom:1px solid var(--sb-linie)}
.sb-portal__title{font-size:calc(11.5 * var(--u)); font-weight:700}
.sb-portal__sub{margin-top:calc(1 * var(--u)); font-size:calc(8.5 * var(--u)); color:var(--sb-leise)}
.sb-entry{display:flex; align-items:center; justify-content:space-between; gap:calc(8 * var(--u)); padding:calc(8 * var(--u)) 0; border-bottom:1px solid var(--sb-linie); font-size:calc(10.5 * var(--u))}
.sb-badge{display:inline-flex; align-items:center; gap:calc(3 * var(--u)); padding:calc(2.5 * var(--u)) calc(7 * var(--u)); border-radius:calc(20 * var(--u)); font-size:calc(9.5 * var(--u)); font-weight:600; white-space:nowrap}
.sb-badge svg{width:calc(8 * var(--u)); height:calc(8 * var(--u)); stroke:currentColor}
.sb-badge--done{background:var(--sb-gruen-flaeche); color:var(--sb-gruen)}
.sb-badge--work{background:#F8EADB; color:var(--sb-bronze)}
.sb-chat{margin-top:calc(10 * var(--u)); animation:sb-bubble .5s cubic-bezier(.2,.7,.2,1) 4.9s both}
.sb-chat__from{font-size:calc(7.5 * var(--u)); color:var(--sb-leise)}
.sb-bubble{display:inline-block; margin-top:calc(3 * var(--u)); padding:calc(6 * var(--u)) calc(10 * var(--u)); border-radius:calc(10 * var(--u)) calc(10 * var(--u)) calc(10 * var(--u)) calc(3 * var(--u)); background:var(--sb-flaeche); font-size:calc(11 * var(--u))}

/* ---------- Tauschen (Status-Wechsel) ---------- */
.sb-swap__pre{opacity:0}
.sb-swap--status .sb-swap__pre{animation:sb-out .3s ease 3.3s both}
.sb-swap--status .sb-swap__post{animation:sb-pop .45s cubic-bezier(.3,1.5,.5,1) 3.35s both}
.sb-swap--entry .sb-swap__pre{animation:sb-out .3s ease 4.3s both}
.sb-swap--entry .sb-swap__post{animation:sb-pop .45s cubic-bezier(.3,1.5,.5,1) 4.35s both}

/* ==========================================================
   Variante A: Bogen von hinten links nach vorne rechts
   ========================================================== */
.sb-hero--a .sb-env{left:calc(10 * var(--u)); top:calc(22 * var(--u)); width:calc(200 * var(--u)); rotate:-5deg; z-index:1; animation-delay:0s}
.sb-hero--a .sb-phone{left:calc(146 * var(--u)); top:calc(108 * var(--u)); rotate:-2deg; z-index:3; animation-delay:.12s}
.sb-hero--a .sb-browser{left:calc(262 * var(--u)); top:calc(142 * var(--u)); width:calc(320 * var(--u)); rotate:1.5deg; z-index:2; animation-delay:.24s}
.sb-hero--a .sb-portal{left:calc(410 * var(--u)); top:calc(372 * var(--u)); width:calc(224 * var(--u)); rotate:-1.5deg; z-index:4; animation-delay:.36s}
.sb-hero--a .sb-step--1{left:calc(22 * var(--u)); top:calc(238 * var(--u))}
.sb-hero--a .sb-step--2{left:calc(30 * var(--u)); top:calc(372 * var(--u))}
.sb-hero--a .sb-step--3{left:calc(168 * var(--u)); top:calc(448 * var(--u))}
.sb-hero--a .sb-step--4{left:calc(286 * var(--u)); top:calc(524 * var(--u))}

/* ==========================================================
   Variante B: große Browserkarte mit drei Satelliten
   ========================================================== */
.sb-hero--b .sb-browser{left:calc(190 * var(--u)); top:calc(104 * var(--u)); width:calc(400 * var(--u)); z-index:2; animation-delay:0s}
.sb-hero--b .sb-browser__body{padding:calc(14 * var(--u)) calc(18 * var(--u)) calc(18 * var(--u))}
.sb-hero--b .sb-browser__hero{padding:calc(22 * var(--u)) calc(18 * var(--u))}
.sb-hero--b .sb-browser__hero .sb-bar{height:calc(12 * var(--u))}
.sb-hero--b .sb-tile{height:calc(66 * var(--u))}
.sb-hero--b .sb-env{left:calc(6 * var(--u)); top:calc(18 * var(--u)); width:calc(196 * var(--u)); rotate:-4deg; z-index:3; animation-delay:.15s}
.sb-hero--b .sb-phone{left:calc(58 * var(--u)); top:calc(262 * var(--u)); width:calc(128 * var(--u)); height:calc(256 * var(--u)); rotate:3deg; z-index:3; animation-delay:.25s}
.sb-hero--b .sb-portal{left:calc(404 * var(--u)); top:calc(378 * var(--u)); width:calc(226 * var(--u)); rotate:-1deg; z-index:3; animation-delay:.35s}
.sb-hero--b .sb-step--1{left:calc(14 * var(--u)); top:calc(230 * var(--u))}
.sb-hero--b .sb-step--2{left:calc(60 * var(--u)); top:calc(528 * var(--u))}
.sb-hero--b .sb-step--3{left:calc(486 * var(--u)); top:calc(70 * var(--u))}
.sb-hero--b .sb-step--4{left:calc(282 * var(--u)); top:calc(528 * var(--u))}

/* ---------- Mobil: kompakte 2 x 2 Anordnung ---------- */
@container (max-width:519px){
  .sb-stage{--u:calc(100cqw / 480); height:auto; display:grid; grid-template-columns:1fr 1fr;
    grid-template-areas:"t1 t2" "c1 c2" "t3 t4" "c3 c4"; column-gap:calc(14 * var(--u)); row-gap:calc(8 * var(--u)); align-items:start}
  .sb-path{display:none}
  .sb-hero .sb-stage>.sb-card,.sb-hero .sb-stage>.sb-step{position:relative; left:auto; top:auto; rotate:none}
  .sb-hero .sb-stage>.sb-step{justify-self:start}
  .sb-hero .sb-stage>.sb-step--3,.sb-hero .sb-stage>.sb-step--4{margin-top:calc(14 * var(--u))}
  .sb-hero .sb-env{grid-area:c1; justify-self:center; align-self:center; width:calc(200 * var(--u))}
  .sb-hero .sb-phone{grid-area:c2; justify-self:center; width:calc(140 * var(--u)); height:calc(280 * var(--u))}
  .sb-hero .sb-browser{grid-area:c3; width:100%}
  .sb-hero .sb-portal{grid-area:c4; width:100%}
  .sb-hero .sb-browser__body{padding:calc(10 * var(--u)) calc(11 * var(--u)) calc(12 * var(--u))}
  .sb-hero .sb-browser__hero{padding:calc(13 * var(--u)) calc(11 * var(--u))}
  .sb-hero .sb-tile{height:calc(42 * var(--u))}
  .sb-step--1{grid-area:t1} .sb-step--2{grid-area:t2} .sb-step--3{grid-area:t3} .sb-step--4{grid-area:t4}
}

/* ---------- Animationen: einmal, insgesamt unter 6 s ---------- */
@keyframes sb-in{from{opacity:0; translate:0 calc(14 * var(--u))}to{opacity:1; translate:0 0}}
@keyframes sb-fade{from{opacity:0; translate:0 calc(4 * var(--u))}to{opacity:1; translate:0 0}}
@keyframes sb-draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes sb-flap{0%{transform:rotateX(0deg); z-index:5; background:#EFE5D6}49%{z-index:5}51%{z-index:1}100%{transform:rotateX(180deg); z-index:1}}
@keyframes sb-letter{from{translate:0 calc(66 * var(--u))}to{translate:0 0}}
@keyframes sb-cursor{0%{opacity:0; translate:calc(26 * var(--u)) calc(30 * var(--u))}25%{opacity:1}70%{translate:0 0; scale:1}84%{scale:.86}100%{opacity:1; translate:0 0; scale:1}}
@keyframes sb-press{0%,100%{scale:1}45%{scale:.95; background:var(--sb-bronze)}}
@keyframes sb-ripple{0%{opacity:0}1%{opacity:.6; transform:scale(.2)}100%{opacity:0; transform:scale(2.6)}}
@keyframes sb-out{from{opacity:1}to{opacity:0}}
@keyframes sb-pop{from{opacity:0; scale:.8}to{opacity:1; scale:1}}
@keyframes sb-pulse{0%{box-shadow:0 0 0 0 rgba(58,160,96,.5)}100%{box-shadow:0 0 0 calc(7 * var(--u)) rgba(58,160,96,0)}}
@keyframes sb-bubble{from{opacity:0; translate:0 calc(6 * var(--u))}to{opacity:1; translate:0 0}}

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

/* Breiten der Platzhalter-Balken (statt Inline-Stil, CSP) */
.sb-w54{width:54%} .sb-w62{width:62%} .sb-w66{width:66%} .sb-w78{width:78%} .sb-w88{width:88%}

/* Nach dem Ablauf: Animationen abschalten (Klasse setzt buehne.js). Sonst hält der Browser die Karten als
   Bild-Ebenen fest, und Schrift wirkt auf großen Bildschirmen unscharf. Endzustand = Grundzustand der Regeln. */
.sb-hero.sb-ruhe *, .sb-hero.sb-ruhe *::before { animation: none !important; }

/* Schärfe: Karten gerade (schräger kleiner Text wird weich, auch auf Retina sichtbar) und reine Füllzeilen aus,
   die nur 6 bis 8 px groß wären. Die Bewegung kommt aus Anordnung, Weg und Animation. */
.sb-hero .sb-stage > .sb-card { rotate: none; }
.sb-env__sub, .sb-phone__ask p, .sb-portal__sub, .sb-chat__from { display: none; }