/* ==========================================================================
   RGN Marketing · Webdesign
   Eigene Bauteile dieser Seite. Token und Grundraster aus design.css,
   geteilte Sektionen aus style.css.
   ========================================================================== */

/* ══ HERO — Geräte mit einer gebauten Website darin ══════════════════════ */
.hero--web .kicker{display:block;margin-bottom:.9rem}
/* Zeile 1 ist einzeilig gesetzt (white-space:nowrap). Bei 28 Zeichen und
   font-stretch 76 % trägt sie rund 13,97 px Breite je px Schriftgrad — gemessen,
   nicht geschätzt. 6,75cqi hält auf 320, 390, 768 und 1440 px Abstand zum Rand. */
.hero--web .hero__h2 .zeile1{font-size:clamp(1.15rem,6.75cqi,3rem)}
.hero--web .hero__h2 .zeile2{font-size:clamp(1.35rem,8.2cqi,3.4rem)}
.hero--web.raster::before{
  mask-image:radial-gradient(ellipse 62% 76% at 74% 46%,#000 24%,transparent 74%)}

/* ── Drei Handys: in der Mitte die größte gebaute Seite, links und rechts je
   eine kleinere dahinter. Keine Attrappen — echte Kundenseiten. ──────────── */
.hdy-b{display:flex;flex-direction:column;min-width:0}
.hdy{position:relative;display:flex;align-items:center;justify-content:center;
  width:100%;padding-block:clamp(.5rem,2vw,1.6rem)}
.hdy__g{position:relative;flex:0 0 auto;margin:0;
  opacity:0;transform:translateY(26px) scale(.96);
  transition:opacity .7s var(--fed-weich),transform .9s var(--fed-weich)}
.laeuft .hdy__g{opacity:1;transform:none}
.hdy__g--links{z-index:1;width:clamp(122px,15.4vw,208px);margin-right:-5%;
  transform:translateY(46px) rotate(-3.2deg) scale(.96);transition-delay:.12s}
.laeuft .hdy__g--links{transform:translateY(22px) rotate(-3.2deg)}
.hdy__g--mitte{z-index:3;width:clamp(158px,19.6vw,266px);transition-delay:0s}
.hdy__g--rechts{z-index:2;width:clamp(122px,15.4vw,208px);margin-left:-5%;
  transform:translateY(46px) rotate(3.2deg) scale(.96);transition-delay:.22s}
.laeuft .hdy__g--rechts{transform:translateY(22px) rotate(3.2deg)}

.hdy__rahmen{display:block;position:relative;
  padding:clamp(5px,.62vw,8px);border-radius:clamp(20px,2.3vw,32px);
  background:linear-gradient(158deg,#39424C 0%,#12171C 58%,#0A0D10 100%);
  box-shadow:0 36px 64px -26px rgba(14,17,19,.6),0 8px 20px -10px rgba(14,17,19,.4),
             inset 0 0 0 1px rgba(255,255,255,.14)}
.hdy__rahmen img{display:block;width:100%;height:auto;
  border-radius:clamp(15px,1.8vw,25px);background:var(--papier-2)}
/* Die Insel sitzt im Rahmen, nicht im Bildschirmfoto — sonst deckt sie
   die Kopfzeile der Kundenseite ab. */
.hdy__insel{position:absolute;left:50%;top:clamp(9px,1vw,13px);z-index:2;
  transform:translateX(-50%);width:26%;height:clamp(6px,.7vw,10px);
  border-radius:999px;background:#080B0D}
.hdy__g--mitte .hdy__rahmen{box-shadow:0 44px 78px -28px rgba(14,17,19,.68),
  0 10px 24px -10px rgba(14,17,19,.45),inset 0 0 0 1px rgba(255,255,255,.16)}

@media (max-width:1040px){
  /* Mobil zuerst die Handys, danach der Text — das Bild ist das Erste,
     was man sieht. */
  .hero--web .hdy-b{order:-1;margin-bottom:.4rem}
  .hero--web .hdy{padding-block:.2rem 0}
  .hdy__g--mitte{width:clamp(146px,38vw,210px)}
  .hdy__g--links,.hdy__g--rechts{width:clamp(112px,29vw,164px)}
}
@media (max-width:380px){
  .hdy__g--links,.hdy__g--rechts{margin-inline:-7%}
}
@media (prefers-reduced-motion:reduce){
  .hdy__g,.laeuft .hdy__g--links,.laeuft .hdy__g--rechts{transition:none}
}

/* Mobil kommen die Geräte VOR die Überschrift — das Erste, was man sieht.
   Der Laptop rückt nach links und wird schmaler, das Handy steht ganz vorn
   rechts davor, die Anfrage schwebt über der rechten oberen Ecke. */

/* ══ WORAN ES LIEGT ══════════════════════════════════════════════════════ */
.wo{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(.9rem,1.8vw,1.4rem);
  margin-top:clamp(2rem,4vw,3rem)}
.wo__k{position:relative;display:flex;flex-direction:column;background:var(--ink-2);
  border:1px solid rgba(255,255,255,.1);border-radius:var(--r-lg);
  padding:clamp(1.3rem,2.4vw,1.9rem);opacity:0;transform:translateY(10px);
  transition:border-color .25s var(--e-ui)}
.laeuft .wo__k{animation:feedRein .6s var(--fed-weich) var(--d,0s) forwards}
.wo__k:hover{border-color:rgba(255,255,255,.26)}
.wo__nr{font-family:'Geist Mono',ui-monospace,monospace;font-size:.625rem;
  letter-spacing:.09em;color:rgba(255,255,255,.4)}
.wo__bild{position:relative;height:104px;margin:.9rem 0 clamp(1.1rem,2vw,1.5rem);
  border-radius:12px;background:rgba(255,255,255,.045);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);overflow:hidden}
.wo__t{font-size:1.0625rem;font-weight:700;letter-spacing:-.03em;color:#fff}
.wo__x{margin:.5rem 0 0;font-size:.875rem;line-height:1.6;color:var(--tx-inv-mut)}

/* 01 Ladebalken, der zu spät fertig wird */
.wol{position:absolute;left:14%;right:14%;top:52%;height:6px;margin-top:-3px;
  border-radius:4px;background:rgba(255,255,255,.12)}
.wol__b{position:absolute;inset:0;border-radius:4px;background:#fff;transform-origin:0 50%}
.laeuft .wol__b{animation:woLad 3.6s var(--fed-weich) .4s infinite}
@keyframes woLad{0%{transform:scaleX(0);opacity:1}55%{transform:scaleX(.62);opacity:1}
  72%,100%{transform:scaleX(.62);opacity:.22}}
.wol__weg{position:absolute;right:0;top:-26px;font-style:normal;font-size:.5625rem;
  font-family:'Geist Mono',ui-monospace,monospace;letter-spacing:.06em;text-transform:uppercase;
  color:#FF9A8E;opacity:0}
.laeuft .wol__weg{animation:woWeg 3.6s var(--fed-weich) .4s infinite}
@keyframes woWeg{0%,70%{opacity:0;transform:translateY(4px)}
  78%,92%{opacity:1;transform:none}100%{opacity:0;transform:translateY(4px)}}

/* 02 Trefferliste, in der du fehlst */
.wos{position:absolute;inset:0;padding:16px 18px;display:grid;
  grid-template-columns:auto 1fr;gap:10px;align-content:center}
.wos__lupe{width:14px;height:14px;border-radius:50%;
  border:1.5px solid rgba(255,255,255,.45);position:relative;margin-top:2px}
.wos__lupe::after{content:"";position:absolute;right:-4px;bottom:-4px;width:6px;height:1.5px;
  background:rgba(255,255,255,.45);transform:rotate(45deg)}
.wos__liste{display:grid;gap:7px}
.wos__liste b{display:block;height:5px;border-radius:3px;background:rgba(255,255,255,.18)}
.wos__liste b:nth-child(1){width:78%} .wos__liste b:nth-child(2){width:62%}
.wos__liste b:nth-child(3){width:70%} .wos__liste b:nth-child(4){width:54%}
.wos__du{grid-column:2;font-style:normal;font-size:.5625rem;
  font-family:'Geist Mono',ui-monospace,monospace;letter-spacing:.05em;text-transform:uppercase;
  color:#FF9A8E;border-top:1px dashed rgba(255,154,142,.45);padding-top:6px;margin-top:2px;
  opacity:0}
.laeuft .wos__du{animation:feedRein .5s var(--fed-weich) 1s forwards}

/* 03 Knopf, der zu weit unten liegt */
.wov{position:absolute;inset:0;display:grid;place-items:center;align-content:center;gap:9px}
.wov__z{display:grid;gap:6px;width:56%}
.wov__z i{display:block;height:5px;border-radius:3px;background:rgba(255,255,255,.16)}
.wov__z i:last-child{width:64%}
.wov__knopf{background:rgba(255,255,255,.14);color:rgba(255,255,255,.5);border-radius:5px;
  padding:5px 12px;font-size:.5625rem;font-weight:600;transform:translateY(18px);opacity:.35}
.laeuft .wov__knopf{animation:wovHoch 3.8s var(--fed-weich) .6s infinite}
@keyframes wovHoch{0%,45%{transform:translateY(18px);opacity:.35;background:rgba(255,255,255,.14);color:rgba(255,255,255,.5)}
  62%,88%{transform:translateY(0);opacity:1;background:#fff;color:var(--ink)}
  100%{transform:translateY(18px);opacity:.35;background:rgba(255,255,255,.14);color:rgba(255,255,255,.5)}}

/* ══ WAS DIE SEITE DIR BRINGT ════════════════════════════════════════════ */
.vt__kopf{display:flex;align-items:flex-end;gap:clamp(1.2rem,3vw,2.5rem);flex-wrap:wrap}
.vt__kopf h2{margin:0}
.vt__kopf .kicker{display:block;margin-bottom:.9rem}
.vt__btn{margin-left:auto;white-space:nowrap}
.vt{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(.9rem,1.8vw,1.4rem);
  margin-top:clamp(2rem,4vw,3rem)}
.vt__k{display:flex;flex-direction:column;background:#fff;border:1px solid var(--li);
  border-radius:var(--r-card);padding:clamp(1.2rem,2.2vw,1.6rem);box-shadow:var(--sh-1);
  opacity:0;transform:translateY(10px);
  transition:border-color .22s var(--e-ui),box-shadow .22s var(--e-ui),transform .22s var(--e-ui)}
.laeuft .vt__k{animation:feedRein .6s var(--fed-weich) var(--d,0s) forwards}
.vt__k:hover{border-color:var(--graphit);box-shadow:var(--sh-2)}
.laeuft .vt__k:hover{transform:translateY(-3px)}
.vt__bild{position:relative;height:126px;margin-bottom:clamp(1rem,1.8vw,1.35rem);
  border-radius:14px;overflow:hidden;
  background:linear-gradient(180deg,#FBFBFC 0%,var(--papier-2) 100%);
  box-shadow:inset 0 0 0 1px var(--li-soft)}
.vt__nr{font-family:'Geist Mono',ui-monospace,monospace;font-size:.625rem;
  letter-spacing:.09em;color:var(--tx-mut)}
.vt__t{display:block;margin-top:.4rem;font-size:1.0625rem;font-weight:700;letter-spacing:-.03em}
.vt__x{margin:.5rem 0 0;font-size:.875rem;line-height:1.6;color:var(--tx-mut)}

/* 01 Ein Treffer steigt auf Platz 1 */
.vser{position:absolute;inset:0;padding:16px 18px;display:grid;gap:8px;align-content:center}
.vser i{display:block;height:8px;border-radius:4px;background:var(--papier-3)}
.vser__z:nth-of-type(1){width:74%} .vser__z:nth-of-type(2){width:62%}
.vser__du{position:relative;display:flex!important;align-items:center;gap:7px;
  height:auto!important;background:transparent!important;order:0}
.vser__du b{display:grid;place-items:center;width:17px;height:17px;border-radius:5px;
  background:var(--ink);color:#fff;font-size:.5625rem;font-weight:700;
  font-family:'Geist Mono',ui-monospace,monospace;flex:0 0 auto}
.vser__du::after{content:"";flex:1;height:8px;border-radius:4px;background:var(--ink)}
.laeuft .vser__du{animation:vserAuf 4.2s var(--fed-weich) .5s infinite}
@keyframes vserAuf{0%,18%{order:9;opacity:.45}28%,86%{order:0;opacity:1}100%{order:9;opacity:.45}}

/* 02 Der Umkreis wächst und nimmt die Orte auf. Der Kreis ist größer als der
   Ausschnitt — so liest sich das wie ein Kartenausschnitt, nicht wie ein Ring. */
.vsic{position:absolute;inset:0;overflow:hidden}
.vsic__kreis{position:absolute;left:50%;top:50%;width:300px;height:300px;
  margin:-150px 0 0 -150px;border-radius:50%;
  border:1.5px dashed rgba(42,48,51,.28);
  background:radial-gradient(circle,rgba(42,48,51,.07) 0%,rgba(42,48,51,.02) 70%,transparent 72%);
  transform:scale(.18)}
.laeuft .vsic__kreis{animation:vsicWachsen 6s var(--fed-weich) .5s infinite}
@keyframes vsicWachsen{
  0%{transform:scale(.18);opacity:0} 8%{opacity:1}
  55%,86%{transform:scale(1);opacity:1} 100%{transform:scale(1);opacity:0}
}
.vsic__mitte{position:absolute;left:50%;top:50%;width:13px;height:13px;
  margin:-6.5px 0 0 -6.5px;border-radius:50%;background:var(--ink);z-index:2;
  box-shadow:0 0 0 0 rgba(42,48,51,.3)}
.laeuft .vsic__mitte{animation:puls 2.8s var(--fed-weich) infinite}
.vsic__km{position:absolute;left:50%;top:50%;transform:translate(6px,-62px);
  font-style:normal;font-family:'Geist Mono',ui-monospace,monospace;font-size:.5rem;
  letter-spacing:.05em;text-transform:uppercase;color:var(--tx-mut);opacity:0}
.laeuft .vsic__km{animation:vsicKm 6s var(--fed-weich) .5s infinite}
@keyframes vsicKm{0%,42%{opacity:0}52%,86%{opacity:1}100%{opacity:0}}

/* Die Orte schalten sich ein, sobald der Umkreis sie erreicht */
.vsic__o{position:absolute;z-index:2;font-size:.5625rem;font-weight:600;
  color:var(--tx-mut);background:#fff;border:1px solid var(--li);
  border-radius:var(--r-pill);padding:.18rem .55rem;white-space:nowrap}
.vsic__o--a{left:12%;top:22%} .vsic__o--b{right:10%;top:30%} .vsic__o--c{left:24%;bottom:16%}
.laeuft .vsic__o{animation:vsicOrt 6s var(--fed-weich) infinite}
.laeuft .vsic__o--a{animation-delay:.5s}
.laeuft .vsic__o--b{animation-delay:.5s}
.laeuft .vsic__o--c{animation-delay:.5s}
@keyframes vsicOrt{
  0%,22%{background:#fff;border-color:var(--li);color:var(--tx-mut)}
  30%,86%{background:var(--ink);border-color:var(--ink);color:#fff}
  100%{background:#fff;border-color:var(--li);color:var(--tx-mut)}
}
/* Die weiter außen liegenden Orte kippen später */
.laeuft .vsic__o--b{animation-name:vsicOrtSpaet}
.laeuft .vsic__o--c{animation-name:vsicOrtSpaeter}
@keyframes vsicOrtSpaet{
  0%,34%{background:#fff;border-color:var(--li);color:var(--tx-mut)}
  42%,86%{background:var(--ink);border-color:var(--ink);color:#fff}
  100%{background:#fff;border-color:var(--li);color:var(--tx-mut)}
}
@keyframes vsicOrtSpaeter{
  0%,44%{background:#fff;border-color:var(--li);color:var(--tx-mut)}
  52%,86%{background:var(--ink);border-color:var(--ink);color:#fff}
  100%{background:#fff;border-color:var(--li);color:var(--tx-mut)}
}

/* 03 Anfragen stapeln sich */
.vanf{position:absolute;inset:0;display:grid;align-content:center;gap:7px;padding:0 18px}
.vanf__k{height:24px;border-radius:7px;background:#fff;border:1px solid var(--li);
  box-shadow:var(--sh-1);position:relative;opacity:0;transform:translateY(10px)}
.vanf__k::before{content:"";position:absolute;left:9px;top:50%;width:6px;height:6px;
  margin-top:-3px;border-radius:50%;background:var(--live)}
.vanf__k::after{content:"";position:absolute;left:23px;right:12px;top:50%;height:5px;
  margin-top:-2.5px;border-radius:3px;background:var(--papier-3)}
.laeuft .vanf__k{animation:vanfRein 4s var(--fed-weich) infinite}
.laeuft .vanf__k:nth-child(2){animation-delay:.45s}
.laeuft .vanf__k:nth-child(3){animation-delay:.9s}
@keyframes vanfRein{0%{opacity:0;transform:translateY(10px)}
  14%,86%{opacity:1;transform:none}100%{opacity:0;transform:translateY(10px)}}

/* ══ SO ENTSTEHT DEINE SEITE — Miniaturen ════════════════════════════════
   Die Schritt-Liste .st selbst liegt in style.css, sie wird auch auf der
   Unternehmensprofil-Seite benutzt. */

/* 01 Ein Gespräch — mit Sprechblasen-Zipfeln und Tippanzeige, damit es als
   Unterhaltung lesbar ist und nicht als Balkenstapel. */
.sg{position:absolute;inset:0;display:grid;align-content:center;gap:8px;padding:0 16px}
.sg__b{position:relative;display:block;height:17px;border-radius:9px}
.sg__b--sie{width:66%;justify-self:start;background:rgba(255,255,255,.16);
  border-bottom-left-radius:3px;opacity:0;transform:translateX(-8px)}
.sg__b--du{width:76%;justify-self:end;background:#fff;
  border-bottom-right-radius:3px;opacity:0;transform:translateX(8px)}
.st__s.laeuft .sg__b--sie{animation:sgRein .5s var(--fed-weich) .7s forwards}
.st__s.laeuft .sg__b--du{animation:sgRein .5s var(--fed-weich) 1.15s forwards}
@keyframes sgRein{to{opacity:1;transform:none}}
.sg__tipp{display:flex;gap:4px;justify-self:start;align-items:center;height:14px;
  padding:0 8px;border-radius:8px;background:rgba(255,255,255,.1);
  border-bottom-left-radius:3px;opacity:0}
.st__s.laeuft .sg__tipp{animation:sgRein .4s var(--fed-weich) 1.6s forwards}
.sg__tipp s{width:4px;height:4px;border-radius:50%;background:rgba(255,255,255,.6);
  text-decoration:none}
.st__s.laeuft .sg__tipp s{animation:sgTipp 1.3s ease-in-out 1.8s infinite}
.st__s.laeuft .sg__tipp s:nth-child(2){animation-delay:1.95s}
.st__s.laeuft .sg__tipp s:nth-child(3){animation-delay:2.1s}
@keyframes sgTipp{0%,60%,100%{opacity:.35;transform:none}30%{opacity:1;transform:translateY(-2px)}}

/* 02 Eine Seite entsteht: Rahmen zuerst, dann Überschrift, Text und Bild */
.sb{position:absolute;inset:0;display:grid;place-items:center;padding:12px 16px}
.sb__rahmen{position:relative;display:block;width:100%;height:100%;
  border-radius:8px;background:rgba(255,255,255,.06);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);overflow:hidden}
.sb__leiste{position:absolute;left:0;right:0;top:0;height:11px;
  background:rgba(255,255,255,.1)}
.sb__leiste::after{content:"";position:absolute;left:7px;top:4px;width:3px;height:3px;
  border-radius:50%;background:rgba(255,255,255,.4);
  box-shadow:6px 0 0 rgba(255,255,255,.4),12px 0 0 rgba(255,255,255,.4)}
.sb__h{position:absolute;left:10px;top:21px;height:7px;width:0;border-radius:3px;
  background:#fff}
.st__s.laeuft .sb__h{animation:sbTippen .55s var(--fed-weich) .75s forwards}
@keyframes sbTippen{to{width:52%}}
.sb__z{position:absolute;left:10px;height:4px;width:0;border-radius:2px;
  background:rgba(255,255,255,.28)}
.sb__z{top:35px} .sb__z--kurz{top:44px}
.st__s.laeuft .sb__z{animation:sbZeile .45s var(--fed-weich) 1.05s forwards}
.st__s.laeuft .sb__z--kurz{animation-delay:1.25s}
@keyframes sbZeile{to{width:44%}}
.sb__z--kurz{--w:34%}
.st__s.laeuft .sb__z--kurz{animation-name:sbZeileKurz}
@keyframes sbZeileKurz{to{width:34%}}
.sb__bild{position:absolute;right:10px;top:21px;width:30%;height:32px;border-radius:5px;
  background:rgba(255,255,255,.2);opacity:0;transform:scale(.85)}
.st__s.laeuft .sb__bild{animation:sgRein .5s var(--fed-weich) 1.5s forwards}

/* 03 Der Prüfstand: ein Wert, der sich aufbaut, und drei Punkte, die
   nacheinander abgehakt werden. Ein Ring allein sah aus wie ein Ladebalken. */
.swp{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  gap:clamp(12px,2.4vw,20px);padding:0 14px}
.swp__ring{position:relative;display:flex;flex-direction:column;align-items:center;
  justify-content:center;flex:0 0 auto;
  width:58px;height:58px;border-radius:50%;
  background:conic-gradient(var(--live) calc(var(--f,0) * 1%),rgba(255,255,255,.14) 0)}
.st__s.laeuft .swp__ring{animation:cwvFuellen 1.4s var(--fed-weich) .6s forwards}
@property --f{syntax:'<number>';inherits:false;initial-value:0}
@keyframes cwvFuellen{to{--f:var(--p)}}
.swp__ring::after{content:"";position:absolute;inset:4px;border-radius:50%;
  background:var(--ink-2);box-shadow:inset 0 0 0 1px rgba(255,255,255,.07)}
.swp__ring b{position:relative;z-index:1;font-size:.9375rem;font-weight:700;
  letter-spacing:-.03em;color:#fff;line-height:1}
.swp__ring s{position:relative;z-index:1;margin-top:-1px;text-decoration:none;
  font-family:'Geist Mono',ui-monospace,monospace;font-size:.4375rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--tx-inv-mut)}

.swp__liste{display:grid;gap:7px;align-content:center}
.swp__zeile{display:flex;align-items:center;gap:7px;font-style:normal;
  font-size:.6875rem;color:var(--tx-inv-mut);white-space:nowrap;
  opacity:0;transform:translateX(-6px)}
.st__s.laeuft .swp__zeile{animation:sgRein .45s var(--fed-weich) forwards}
.st__s.laeuft .swp__zeile:nth-child(1){animation-delay:1.0s}
.st__s.laeuft .swp__zeile:nth-child(2){animation-delay:1.3s}
.st__s.laeuft .swp__zeile:nth-child(3){animation-delay:1.6s}
/* Der Haken wird gezeichnet, nicht eingeblendet — das liest sich als Prüfung. */
.swp__zeile s{position:relative;flex:0 0 auto;width:14px;height:14px;border-radius:50%;
  background:rgba(47,191,113,.16);box-shadow:inset 0 0 0 1px rgba(47,191,113,.45)}
.swp__zeile s::after{content:"";position:absolute;left:4.9px;top:4.3px;width:4px;height:2px;
  border-left:1.5px solid var(--live);border-bottom:1.5px solid var(--live);
  transform:rotate(-45deg) scale(0);transform-origin:0 100%}
.st__s.laeuft .swp__zeile s::after{animation:swpHaken .35s var(--fed-weich) forwards}
.st__s.laeuft .swp__zeile:nth-child(1) s::after{animation-delay:1.25s}
.st__s.laeuft .swp__zeile:nth-child(2) s::after{animation-delay:1.55s}
.st__s.laeuft .swp__zeile:nth-child(3) s::after{animation-delay:1.85s}
@keyframes swpHaken{to{transform:rotate(-45deg) scale(1.6)}}

/* 04 Livegang: die Adresse tippt sich in die Leiste, dann springt das
   Live-Zeichen an und die Zugänge wandern rüber. */
.swl{position:absolute;inset:0;display:grid;align-content:center;justify-items:center;
  gap:10px;padding:0 16px}
.swl__leiste{position:relative;display:flex;align-items:center;gap:6px;
  width:min(100%,220px);height:26px;padding:0 10px;border-radius:13px;
  background:rgba(255,255,255,.09);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
.swl__schloss{position:relative;flex:0 0 auto;width:7px;height:6px;border-radius:1px;
  background:var(--live);text-decoration:none;opacity:0}
.swl__schloss::before{content:"";position:absolute;left:1px;top:-4px;width:5px;height:5px;
  border:1.5px solid var(--live);border-bottom:0;border-radius:3px 3px 0 0}
.st__s.laeuft .swl__schloss{animation:sgRein .3s var(--fed-weich) 1.5s forwards}
.swl__url{font-style:normal;font-family:'Geist Mono',ui-monospace,monospace;
  font-size:.625rem;color:rgba(255,255,255,.8);white-space:nowrap;overflow:hidden;
  width:0}
.st__s.laeuft .swl__url{animation:swlTippen 1.1s steps(16,end) .5s forwards}
@keyframes swlTippen{to{width:88px}}

.swl__badge{display:inline-flex;align-items:center;gap:5px;padding:3px 10px 3px 8px;
  border-radius:var(--r-pill,999px);background:rgba(47,191,113,.16);
  box-shadow:inset 0 0 0 1px rgba(47,191,113,.4);
  font-size:.625rem;font-weight:700;letter-spacing:.02em;color:#8ef0bb;
  opacity:0;transform:translateY(6px) scale(.9)}
.st__s.laeuft .swl__badge{animation:swlAn .5s var(--fed-weich) 1.8s forwards}
@keyframes swlAn{to{opacity:1;transform:none}}
.swl__badge s{position:relative;width:7px;height:7px;border-radius:50%;
  background:var(--live);text-decoration:none;box-shadow:0 0 0 0 rgba(47,191,113,.55)}
.st__s.laeuft .swl__badge s{animation:puls 2.4s var(--fed-weich) 2.3s infinite}

/* Die drei Zugänge rutschen nach dem Livegang herüber — Domain, Mail, Konto. */
.swl__schluessel{display:flex;gap:5px}
.swl__schluessel s{width:16px;height:4px;border-radius:2px;text-decoration:none;
  background:rgba(255,255,255,.26);opacity:0;transform:translateX(-8px)}
.st__s.laeuft .swl__schluessel s{animation:sgRein .4s var(--fed-weich) forwards}
.st__s.laeuft .swl__schluessel s:nth-child(1){animation-delay:2.3s}
.st__s.laeuft .swl__schluessel s:nth-child(2){animation-delay:2.45s}
.st__s.laeuft .swl__schluessel s:nth-child(3){animation-delay:2.6s}

@media (max-width:420px){
  .swp{gap:10px}
  .swp__ring{width:50px;height:50px}
  .swp__zeile{font-size:.625rem}
}

@media (max-width:1000px){
  .wo,.vt{grid-template-columns:1fr}
  .vt__btn{margin-left:0}
}
@media (max-width:700px){
  /* Auf dem Handy trägt der Text — die Miniatur wandert unter die Beschreibung */
  .st__s{grid-template-columns:clamp(40px,11vw,48px) minmax(0,1fr)}
  .st__bild{grid-column:1/-1;height:84px}
  .st__schiene{left:calc(clamp(40px,11vw,48px) / 2)}
  .st__nr{width:clamp(40px,11vw,48px);height:clamp(40px,11vw,48px);font-size:.75rem}
}
@media (max-width:560px){
  .vt__btn,.st__fuss .btn{width:100%;justify-content:center}
}