/* Showcase-Hero der Audit-Checks (CONFIG.showcase, seit 09/2026 nur /angebots-check).
   Gerendert von showcaseHTML() in app.js, nur geladen von Seiten, die es nutzen:
   ohne CONFIG.showcase gibt es keine .sc-Klassen, die anderen Checks bleiben unberuehrt.
   Farben: Palette der Dokument-Anzeigen (ads/flagship_kw40/lib.py), hier als lokale
   Variablen, weil tokens.css sie nicht fuehrt. Groessen im Mockup in cqw (--u).
   Choreografie: Klassen auf <html> (sc-pending, sc-run, sc-done, sc-static,
   sc-cards-pending) und auf .sc-stage (sc-in, sc-fin), gesetzt von scInit(). */

#s-hero.sc{--night:#0B1A22;--petrol:#0E7FA3;--cyan:#29BFDE;--ice:#F2F6F8;--amber:#C98A1A;--sc-body:#44545C;--sc-mute:#63727A;--sc-hair:#DCE5EA;
 --ez:cubic-bezier(.22,1,.36,1);
 justify-content:flex-start;align-items:stretch;text-align:left;padding:108px 0 32px}
#s-hero.sc .sc-wrap{max-width:1272px;padding:0 32px;margin:0 auto;width:100%}

/* ---------- Hero */
.sc-hero{display:grid;grid-template-columns:minmax(0,1.42fr) minmax(0,1fr);gap:56px;align-items:end}
.sc-hl{min-width:0}
.sc-pill{margin-bottom:26px}
.sc-h1{font-family:Sora,var(--font-display);font-weight:600;font-size:clamp(40px,5.5vw,82px);line-height:1;letter-spacing:-.048em;color:var(--night);
 max-width:none;margin:0;text-align:left;background:none;-webkit-text-fill-color:currentColor;text-wrap:balance}
.sc-ln{display:block;overflow:hidden;padding:.02em 0 .1em;margin-bottom:-.1em}
.sc-li{display:block;will-change:transform}
.sc-k{font-size:.34em;letter-spacing:-.012em;line-height:1.2;color:var(--petrol);margin-bottom:.34em}
.sc-h1 em,.sc-st-h em{font-family:'IBM Plex Serif',Georgia,serif;font-style:italic;font-weight:500;letter-spacing:-.02em;padding-right:.04em;
 background:linear-gradient(95deg,var(--petrol) 10%,#1AA6CC 90%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:var(--petrol)}
.sc-hr{min-width:0;padding-bottom:8px}
.sc-sub{margin:0;font-family:Inter,'Roboto',sans-serif;font-size:18px;line-height:1.58;color:var(--sc-body);max-width:46ch;text-wrap:pretty}
.sc-act{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:28px}
.cta.sc-cta{margin:0;display:inline-flex;align-items:center;gap:16px;padding:9px 9px 9px 28px;font-size:16px;font-weight:600;background:var(--night);color:#fff;
 box-shadow:rgba(255,255,255,.22) 0 1px 0 0 inset,0 0 0 1px #050d12,0 14px 34px -10px rgba(11,26,34,.55)}
.sc-cta-i{width:40px;height:40px;border-radius:50%;background:var(--cyan);color:var(--night);display:grid;place-items:center;transition:transform .45s var(--ez)}
.sc-cta-i .mi{width:18px;height:18px;stroke:currentColor;stroke-width:2.4;fill:none;stroke-linecap:round;stroke-linejoin:round}
@media (hover:hover) and (pointer:fine){.cta.sc-cta:hover{background:#12303D}.cta.sc-cta:hover .sc-cta-i{transform:rotate(45deg)}}
.sc-fine{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--sc-mute)}
.sc-proof{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin-top:22px;font-size:12.5px;color:var(--sc-mute)}
.sc-proof img{height:14px;width:auto;vertical-align:-2px}
.sc-proof i{font-style:normal;color:var(--sc-hair)}

.sc-meta{display:flex;align-items:center;justify-content:space-between;gap:16px 28px;flex-wrap:wrap;margin-top:44px;padding-top:20px;border-top:1px solid var(--sc-hair)}
.sc-flow{display:flex;align-items:center;flex-wrap:wrap;gap:8px 10px}
.sc-flbl{font-family:'IBM Plex Mono',monospace;font-size:10.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--sc-mute);margin-right:6px}
.sc-fs{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;font-weight:600;color:var(--night);white-space:nowrap}
.sc-fs i{width:20px;height:20px;border-radius:50%;background:var(--night);color:#fff;display:grid;place-items:center;font:600 10.5px/1 'IBM Plex Mono',monospace;font-style:normal}
.sc-far{font-style:normal;color:#9FB2BB;font-size:13px}
.sc-chips{display:flex;flex-wrap:wrap;gap:8px}
.sc-chip{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:600;color:var(--night);padding:7px 13px 7px 11px;border:1px solid var(--sc-hair);border-radius:999px;background:rgba(255,255,255,.75);white-space:nowrap}
.sc-chip .ico{width:14px;height:14px;color:var(--petrol)}
.sc-eq{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:18px 0 0;text-align:left}
.sc-eq div{padding:2px 18px 2px 16px;border-left:1px solid var(--sc-hair);min-width:0}
.sc-eq div:first-child{padding-left:0;border-left:0}
.sc-eq dt{font-family:'IBM Plex Mono',monospace;font-size:10.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--petrol)}
.sc-eq dd{margin:4px 0 0;font-size:13.5px;line-height:1.42;color:var(--night);font-weight:500}

/* ---------- Showcase-Rahmen: Verlauf in der eigenen Palette, Mockup laeuft unten raus */
.sc-frame{position:relative;margin:44px 0 0;border-radius:32px;overflow:hidden;isolation:isolate;padding:28px clamp(18px,4.6vw,64px) 0;
 background:
  radial-gradient(42% 60% at 92% 4%,rgba(201,138,26,.30),rgba(201,138,26,0) 70%),
  radial-gradient(60% 80% at 4% 0%,rgba(41,191,222,.42),rgba(41,191,222,0) 66%),
  radial-gradient(90% 70% at 50% 118%,rgba(14,127,163,.62),rgba(14,127,163,0) 72%),
  linear-gradient(180deg,#EDF6F9 0%,#D5EBF2 48%,#A9D6E4 100%);
 box-shadow:inset 0 0 0 1px rgba(11,26,34,.06)}
.sc-frame::before{content:"";position:absolute;inset:0;z-index:-1;opacity:.5;
 background-image:linear-gradient(rgba(14,127,163,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(14,127,163,.07) 1px,transparent 1px);background-size:48px 48px;
 -webkit-mask-image:radial-gradient(80% 70% at 50% 0%,#000,transparent 75%);mask-image:radial-gradient(80% 70% at 50% 0%,#000,transparent 75%)}
.sc-float{position:absolute;z-index:-1;width:46%;aspect-ratio:1;right:-8%;top:-26%;border-radius:50%;pointer-events:none;
 background:radial-gradient(closest-side,rgba(236,170,58,.34),rgba(201,138,26,0));filter:blur(20px);animation:scFloat 16s ease-in-out infinite alternate}
@keyframes scFloat{from{transform:translate(0,0) scale(1)}to{transform:translate(-18%,14%) scale(1.18)}}
.sc-fcap{display:flex;align-items:center;gap:12px;margin:0 0 18px;font-family:'IBM Plex Mono',monospace;font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:rgba(11,26,34,.72)}
.sc-tag{flex:none;padding:5px 11px;border-radius:999px;background:var(--night);color:#fff;letter-spacing:.14em;font-size:10.5px;font-weight:600}

.sc-mock{container:scm/inline-size;position:relative;z-index:1;border-radius:18px 18px 0 0;overflow:hidden;margin-bottom:-7%;
 box-shadow:0 0 0 1px rgba(11,26,34,.08),0 2px 6px rgba(11,26,34,.06),0 40px 90px -30px rgba(6,40,56,.55)}

/* ---------- Mockup (alle Masse in Einheiten von --u, 1120 Einheiten = volle Breite) */
.mk{--u:calc(100cqw / 1120);font-family:Inter,'Roboto',sans-serif;font-size:calc(13 * var(--u));line-height:1.35;color:var(--night);background:#fff;text-align:left}
.mk svg{stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.mk-bar{display:flex;align-items:center;gap:calc(8 * var(--u));height:calc(46 * var(--u));padding:0 calc(16 * var(--u));background:#F4F7F9;border-bottom:1px solid #E3E9ED}
.mk-bar>i{width:calc(11 * var(--u));height:calc(11 * var(--u));border-radius:50%;background:#DCE3E7}
.mk-app{display:flex;align-items:center;gap:calc(8 * var(--u));margin-left:calc(10 * var(--u));font-weight:600;font-size:calc(13 * var(--u));white-space:nowrap}
.mk-wm b{font-weight:800;color:var(--night)}.mk-wm i{font-style:normal;font-weight:800;color:var(--petrol)}
.mk-app>span+span{color:#5A6B73;font-weight:500;padding-left:calc(8 * var(--u));border-left:1px solid #D5DEE3}
.mk-search{display:flex;align-items:center;gap:calc(8 * var(--u));margin-left:calc(28 * var(--u));width:calc(360 * var(--u));height:calc(30 * var(--u));padding:0 calc(11 * var(--u));
 border-radius:calc(8 * var(--u));background:#fff;border:1px solid #DCE4E8;color:#7C8B93;font-size:calc(12 * var(--u));white-space:nowrap;overflow:hidden}
.mk-search svg{width:calc(14 * var(--u));height:calc(14 * var(--u));flex:none}
.mk-bsp{margin-left:auto;font:600 calc(10.5 * var(--u))/1 'IBM Plex Mono',monospace;letter-spacing:.14em;text-transform:uppercase;color:#8A5A0E;
 background:rgba(201,138,26,.12);border:1px solid rgba(201,138,26,.45);border-radius:999px;padding:calc(5 * var(--u)) calc(11 * var(--u))}
.mk-body{display:grid;grid-template-columns:calc(200 * var(--u)) minmax(0,1fr)}
.mk-side{display:flex;flex-direction:column;background:#F7FAFB;border-right:1px solid #E6ECEF;padding:calc(16 * var(--u)) calc(12 * var(--u))}
.mk-nav{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:calc(2 * var(--u))}
.mk-nav li{position:relative;display:flex;align-items:center;gap:calc(10 * var(--u));padding:calc(9 * var(--u)) calc(10 * var(--u));border-radius:calc(8 * var(--u));color:#4A5A63;font-size:calc(13 * var(--u))}
.mk-nav li svg{width:calc(16 * var(--u));height:calc(16 * var(--u));flex:none}
.mk-nav li.on{background:#E2F3F8;color:var(--night);font-weight:600}
.mk-nav li.on svg{color:var(--petrol)}
.mk-nav li.on::before{content:"";position:absolute;left:calc(-12 * var(--u));top:22%;bottom:22%;width:calc(3 * var(--u));border-radius:0 3px 3px 0;background:var(--cyan)}
.mk-sfoot{margin-top:calc(22 * var(--u));display:flex;align-items:center;gap:calc(7 * var(--u));padding:calc(9 * var(--u)) calc(10 * var(--u));border:1px solid #E1E8EC;border-radius:calc(9 * var(--u));background:#fff;font-size:calc(11.5 * var(--u));color:#4A5A63;white-space:nowrap}
.mk-sfoot svg{width:calc(14 * var(--u));height:calc(14 * var(--u));color:var(--petrol);flex:none}
.mk-main{padding:calc(20 * var(--u)) calc(22 * var(--u)) calc(24 * var(--u));min-width:0}
.mk-head{display:flex;align-items:flex-end;justify-content:space-between;gap:calc(16 * var(--u))}
.mk-crumb{display:block;font:500 calc(10.5 * var(--u))/1.2 'IBM Plex Mono',monospace;letter-spacing:.1em;text-transform:uppercase;color:#6B7B83}
.mk-title{display:block;margin-top:calc(6 * var(--u));font:600 calc(21 * var(--u))/1.15 Sora,sans-serif;letter-spacing:-.02em}
.mk-btn{flex:none;background:var(--night);color:#fff;border-radius:999px;padding:calc(8 * var(--u)) calc(15 * var(--u));font-size:calc(12.5 * var(--u));font-weight:600}
.mk-stats{display:grid;grid-template-columns:1.25fr 1fr 1fr;gap:calc(12 * var(--u));margin-top:calc(16 * var(--u))}
.mk-stat{position:relative;border:1px solid #E1E8EC;border-radius:calc(12 * var(--u));padding:calc(13 * var(--u)) calc(15 * var(--u));background:linear-gradient(180deg,#fff,#F6FAFB);overflow:hidden}
.mk-stat::before{content:"";position:absolute;left:0;top:0;right:0;height:calc(3 * var(--u));background:linear-gradient(90deg,var(--petrol),var(--cyan))}
.mk-stat:nth-child(3)::before{background:linear-gradient(90deg,var(--amber),#E9B45A)}
.mk-stat b{display:block;font:600 calc(20 * var(--u))/1.1 Sora,sans-serif;letter-spacing:-.025em}
.mk-stat span{display:block;margin-top:calc(5 * var(--u));font-size:calc(12 * var(--u));color:#5A6B73;line-height:1.35}
.mk-grid{display:grid;grid-template-columns:minmax(0,1fr) calc(300 * var(--u));gap:calc(16 * var(--u));margin-top:calc(16 * var(--u));align-items:start}
.mk-sheet{border:1px solid #DCE4E8;border-radius:calc(12 * var(--u));overflow:hidden;background:#fff}
.mk-fbar{display:flex;align-items:center;gap:calc(8 * var(--u));padding:calc(9 * var(--u)) calc(12 * var(--u));background:#1E7145;color:#fff;font-size:calc(12.5 * var(--u))}
.mk-fic{width:calc(14 * var(--u));height:calc(14 * var(--u));border-radius:calc(3 * var(--u));background:#fff;opacity:.9;flex:none}
.mk-fn{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mk-ftag{margin-left:auto;font:600 calc(10 * var(--u))/1 'IBM Plex Mono',monospace;letter-spacing:.12em;text-transform:uppercase;background:rgba(255,255,255,.18);border-radius:999px;padding:calc(4 * var(--u)) calc(9 * var(--u))}
.mk-th,.mk-tr{display:grid;grid-template-columns:calc(52 * var(--u)) minmax(0,1fr) calc(96 * var(--u)) calc(196 * var(--u));align-items:center;gap:calc(10 * var(--u));padding:0 calc(14 * var(--u))}
.mk-th{height:calc(34 * var(--u));background:#F3F6F8;border-bottom:1px solid #E3E9ED;font-size:calc(11.5 * var(--u));font-weight:600;color:#56646C}
.mk-th span:nth-child(3),.mk-pr{text-align:right}
.mk-tr{min-height:calc(50 * var(--u));border-bottom:1px solid #EDF1F3;font-size:calc(13 * var(--u))}
.mk-pos{font:500 calc(12 * var(--u))/1 'IBM Plex Mono',monospace;color:#6B7B83}
.mk-art{min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:calc(4 * var(--u))}
.mk-an{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;font-weight:500}
.mk-art .mk-q{display:none}
.mk-pr{font-variant-numeric:tabular-nums;font-weight:600;white-space:nowrap}
.mk-q{display:inline-flex;align-items:center;gap:calc(5 * var(--u));max-width:100%;font-style:normal;font-size:calc(11.5 * var(--u));font-weight:600;color:#0A6A89;background:#E7F5FA;border:1px solid #BCE4F1;
 border-radius:999px;padding:calc(4 * var(--u)) calc(10 * var(--u)) calc(4 * var(--u)) calc(8 * var(--u));white-space:nowrap;overflow:hidden;text-overflow:ellipsis;box-shadow:0 0 0 calc(3 * var(--u)) rgba(41,191,222,.08)}
.mk-q svg{width:calc(12 * var(--u));height:calc(12 * var(--u));flex:none}
.mk-q.miss{color:#B42318;background:#FEF3F2;border-color:#FDA29B;box-shadow:none}
.mk-tr.bad{background:#FFF7F6}
.mk-tr.bad .mk-pr{color:#B42318;justify-self:end;padding:calc(2 * var(--u)) calc(12 * var(--u));border-radius:calc(6 * var(--u));box-shadow:inset 0 0 0 calc(2 * var(--u)) #E5484D;background:#FEE4E2}
.mk-note{display:flex;gap:calc(9 * var(--u));align-items:flex-start;padding:calc(11 * var(--u)) calc(14 * var(--u));background:#FEF3F2;color:#7A271A;font-size:calc(12 * var(--u));line-height:1.45}
.mk-note i{flex:none;width:calc(18 * var(--u));height:calc(18 * var(--u));border-radius:50%;background:#E5484D;color:#fff;display:grid;place-items:center;font-style:normal;font-weight:800;font-size:calc(11 * var(--u))}
.mk-aside{display:grid;gap:calc(14 * var(--u));min-width:0}
.mk-panel{border:1px solid #DCE4E8;border-radius:calc(12 * var(--u));padding:calc(13 * var(--u)) calc(14 * var(--u));background:#fff;min-width:0}
.mk-ph{display:flex;align-items:baseline;justify-content:space-between;gap:calc(8 * var(--u))}
.mk-ph b{font-size:calc(12.5 * var(--u));font-weight:600;white-space:nowrap}
.mk-ph span{font:500 calc(9.5 * var(--u))/1 'IBM Plex Mono',monospace;letter-spacing:.1em;text-transform:uppercase;color:#7C8B93;white-space:nowrap}
.mk-chart svg{display:block;width:100%;height:auto;aspect-ratio:300/120;margin-top:calc(10 * var(--u));overflow:visible}
.mk-grid-l{stroke:#E6ECEF;stroke-width:1;fill:none}
.mk-line{stroke:var(--petrol);stroke-width:2.4;fill:none}
.mk-dot{fill:#fff;stroke:var(--petrol);stroke-width:2.4}
.mk-area{stroke:none}
.mk-src ul{list-style:none;margin:calc(8 * var(--u)) 0 0;padding:0}
.mk-srow{display:flex;align-items:center;gap:calc(8 * var(--u));padding:calc(8 * var(--u)) 0;border-top:1px dashed #E1E8EC;font-size:calc(12 * var(--u))}
.mk-srow:first-child{border-top:0}
.mk-sp{flex:none;white-space:nowrap;width:calc(52 * var(--u));font:500 calc(11 * var(--u))/1 'IBM Plex Mono',monospace;color:#6B7B83}
.mk-st{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:500}
.mk-ok{flex:none;width:calc(18 * var(--u));height:calc(18 * var(--u));border-radius:50%;display:grid;place-items:center;background:#E3F6EC;color:#16803C;font-style:normal;font-weight:800;font-size:calc(11 * var(--u))}
.mk-ok svg{width:calc(11 * var(--u));height:calc(11 * var(--u));stroke-width:3}
.mk-more{margin-top:calc(16 * var(--u));border:1px solid #DCE4E8;border-radius:calc(12 * var(--u));padding:calc(13 * var(--u)) calc(14 * var(--u)) calc(30 * var(--u))}
.mk-sk{display:grid;grid-template-columns:calc(90 * var(--u)) 1fr calc(120 * var(--u)) calc(70 * var(--u));gap:calc(16 * var(--u));align-items:center;padding:calc(12 * var(--u)) 0;border-top:1px solid #EDF1F3}
.mk-sk:nth-child(2){border-top:0;margin-top:calc(4 * var(--u))}
.mk-sk i{display:block;height:calc(9 * var(--u));border-radius:4px;background:#E6ECEF}
.mk-sk i:first-child{background:#D5E9F0}
.mk-sk em{display:block;height:calc(20 * var(--u));border-radius:999px;background:#E7F5FA;border:1px solid #CDEAF3}
.mk-srow.miss .mk-st{color:#B42318}.mk-srow.miss .mk-ok{background:#FEE4E2;color:#B42318}

/* Schmaler Rahmen: Seitenleiste weg, Quelle unter dem Artikel, groessere Einheit */
@container scm (max-width:640px){
 .mk{--u:calc(100cqw / 400)}
 .mk-body{grid-template-columns:minmax(0,1fr);min-height:0}
 .mk-side,.mk-search,.mk-app>span+span{display:none}
 .mk-main{padding:calc(14 * var(--u)) calc(12 * var(--u)) calc(22 * var(--u))}
 .mk-title{font-size:calc(17 * var(--u))}
 .mk-btn{display:none}
 .mk-stats{grid-template-columns:1fr 1fr;gap:calc(8 * var(--u))}
 .mk-stat:first-child{grid-column:1/-1}
 .mk-stat b{font-size:calc(17 * var(--u))}
 .mk-stat span{font-size:calc(11 * var(--u))}
 .mk-grid{grid-template-columns:minmax(0,1fr)}
 .mk-aside{grid-template-columns:1fr 1fr;gap:calc(8 * var(--u))}
 .mk-th,.mk-tr{grid-template-columns:calc(34 * var(--u)) minmax(0,1fr) calc(78 * var(--u));padding:0 calc(10 * var(--u))}
 .mk-qc{display:none}
 .mk-art .mk-q{display:inline-flex;font-size:calc(10.5 * var(--u))}
 .mk-tr{padding-top:calc(7 * var(--u));padding-bottom:calc(7 * var(--u))}
 .mk-panel{padding:calc(10 * var(--u))}
 .mk-sp{width:calc(40 * var(--u));font-size:calc(10 * var(--u))}
 .mk-srow{font-size:calc(11 * var(--u))}
 .mk-ph{flex-wrap:wrap;row-gap:calc(4 * var(--u))}
 .mk-sp{width:calc(44 * var(--u))}
}

/* ---------- Warum-Zeile (Message-Match der Suchanzeige, C.whyTitle) */
.sc-why{margin-top:88px}
.sc-why h2{font-family:Sora,var(--font-display);font-weight:600;font-size:clamp(26px,3vw,40px);line-height:1.1;letter-spacing:-.035em;color:var(--night);max-width:24ch;margin:0}
.sc-why-g{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px;margin-top:32px}
.sc-why-g>div{border-top:1px solid var(--sc-hair);padding-top:20px;min-width:0}
.sc-wic{width:36px;height:36px;border-radius:11px;display:grid;place-items:center;background:linear-gradient(160deg,#E4F4F9,#CFEAF3);color:var(--petrol)}
.sc-wic .ico{width:17px;height:17px}
.sc-why-g b{display:block;margin-top:16px;font-size:16px;font-weight:600;color:var(--night);letter-spacing:-.01em}
.sc-why-g p{margin:6px 0 0;font-size:14.5px;line-height:1.5;color:var(--sc-body)}

/* ---------- Buehne mit drei Karten */
.sc-stage{margin-top:112px;padding-bottom:48px}
.sc-eb{margin:0 0 18px;font:600 12px/1 'IBM Plex Mono',monospace;letter-spacing:.16em;text-transform:uppercase;color:var(--petrol);display:flex;align-items:center;gap:12px}
.sc-eb::before{content:"";width:34px;height:2px;background:currentColor}
.sc-st-h{font-family:Sora,var(--font-display);font-weight:600;font-size:clamp(38px,5.2vw,76px);line-height:1;letter-spacing:-.048em;color:var(--night);margin:0;max-width:none;text-wrap:balance}
.sc-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:52px}
.sc-card{position:relative;display:block;width:100%;aspect-ratio:506/664;border:0;padding:0;margin:0;border-radius:28px;overflow:hidden;isolation:isolate;cursor:pointer;
 background:#0B1A22;color:#fff;text-align:left;font:inherit;box-shadow:0 1px 2px rgba(11,26,34,.1),0 34px 70px -34px rgba(11,26,34,.6);transition:transform .6s var(--ez),box-shadow .6s var(--ez)}
.sc-cm{position:absolute;left:0;right:0;top:-28px;bottom:-28px;z-index:-2;will-change:transform}
.sc-cm img{display:block;width:100%;height:100%;object-fit:cover;transform-origin:60% 45%;animation:scKen 26s ease-in-out infinite alternate;animation-delay:calc(var(--i) * -7s)}
@keyframes scKen{from{transform:scale(1.03)}to{transform:scale(1.12) translate3d(-1.8%,-1.2%,0)}}
.sc-glow{position:absolute;z-index:-1;left:12%;top:26%;width:70%;aspect-ratio:1;border-radius:50%;pointer-events:none;mix-blend-mode:screen;
 background:radial-gradient(closest-side,rgba(41,191,222,.28),rgba(41,191,222,0));filter:blur(10px);animation:scGlow 11s ease-in-out infinite alternate;animation-delay:calc(var(--i) * -3.5s)}
.sc-card:nth-child(1) .sc-glow{background:radial-gradient(closest-side,rgba(236,170,58,.24),rgba(201,138,26,0))}
@keyframes scGlow{from{transform:translate(-12%,6%) scale(.9);opacity:.55}to{transform:translate(16%,-10%) scale(1.2);opacity:1}}
.sc-card::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(0deg,rgba(6,15,20,.72) 0%,rgba(6,15,20,.28) 26%,rgba(6,15,20,0) 42%),linear-gradient(180deg,rgba(6,15,20,.35),rgba(6,15,20,0) 26%)}
.sc-card::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);pointer-events:none}
.sc-cn{position:absolute;left:28px;top:24px;right:24px;font-family:Sora,sans-serif;font-weight:300;font-size:clamp(54px,5.6vw,80px);line-height:.95;letter-spacing:-.055em;color:#fff;text-shadow:0 6px 40px rgba(0,0,0,.4);white-space:nowrap}
.sc-ct{position:absolute;left:28px;right:96px;bottom:30px;font-family:Inter,sans-serif;font-size:16.5px;line-height:1.42;font-weight:500;color:rgba(255,255,255,.94);text-shadow:0 2px 18px rgba(0,0,0,.5);text-wrap:pretty}
.sc-badge{position:absolute;right:24px;bottom:26px;width:54px;height:54px;border-radius:50%;background:#fff;color:var(--night);display:grid;place-items:center;
 box-shadow:0 10px 30px rgba(0,0,0,.35);transition:transform .5s var(--ez),background .3s}
.sc-badge .mi{width:22px;height:22px;stroke:currentColor;stroke-width:2.4;fill:none;stroke-linecap:round;stroke-linejoin:round;transition:transform .5s var(--ez)}
@media (hover:hover) and (pointer:fine){
 .sc-card:hover{transform:translateY(-6px);box-shadow:0 1px 2px rgba(11,26,34,.1),0 44px 80px -34px rgba(11,26,34,.7)}
 .sc-card:hover .sc-badge{background:var(--cyan);transform:scale(1.06)}
 .sc-card:hover .sc-badge .mi{transform:rotate(45deg)}
}
.sc-card:focus-visible{outline:3px solid var(--cyan);outline-offset:4px}

/* ---------- Choreografie. Ohne Klassen auf <html> ist alles sichtbar. */
@keyframes scRise{from{transform:translateY(108%)}to{transform:none}}
@keyframes scUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes scFade{from{opacity:0}to{opacity:1}}
@keyframes scDown{from{opacity:0;transform:translateY(-14px)}to{opacity:1;transform:none}}
@keyframes scFrame{from{opacity:0;transform:translateY(34px) scale(.985)}to{opacity:1;transform:none}}
@keyframes scClip{from{clip-path:inset(100% 0 0 0 round 18px 18px 0 0);transform:translateY(70px)}to{clip-path:inset(0 0 0 0 round 18px 18px 0 0);transform:none}}
@keyframes scLeft{from{opacity:0;transform:translateX(-10px)}to{opacity:1;transform:none}}
@keyframes scWipe{from{clip-path:inset(0 100% 0 0);opacity:.4}to{clip-path:inset(0 0 0 0);opacity:1}}
@keyframes scDraw{to{stroke-dashoffset:0}}
@keyframes scCard{from{opacity:0;transform:translateY(64px) scale(.965)}to{opacity:1;transform:none}}
@keyframes scPop{from{opacity:0;transform:scale(.4) rotate(-45deg)}to{opacity:1;transform:none}}

html.sc-pending .topbar{opacity:0}
html.sc-pending #s-hero.sc .sc-hero .sc-li{transform:translateY(108%)}
html.sc-pending #s-hero.sc :is(.sc-a,.sc-frame,.mk-nav li,.mk-stat,.mk-tr,.mk-srow,.mk-note,.mk-panel,.mk-more){opacity:0}
html.sc-pending #s-hero.sc .sc-mock{clip-path:inset(100% 0 0 0)}
html.sc-run:not(.sc-done) .topbar{animation:scDown .7s cubic-bezier(.22,1,.36,1) both}
html.sc-run:not(.sc-done) #s-hero.sc .sc-hero .sc-li{animation:scRise 1.05s var(--ez) var(--d,0s) both}
html.sc-run:not(.sc-done) #s-hero.sc .sc-a{animation:scUp .85s var(--ez) var(--d,0s) both}
html.sc-run:not(.sc-done) #s-hero.sc .sc-frame{animation:scFrame 1.1s var(--ez) var(--d,0s) both}
html.sc-run:not(.sc-done) #s-hero.sc .sc-mock{animation:scClip 1.25s var(--ez) var(--d,0s) both}
html.sc-run:not(.sc-done) #s-hero.sc .mk-nav li{animation:scLeft .6s var(--ez) var(--d,0s) both}
html.sc-run:not(.sc-done) #s-hero.sc .mk-stat{animation:scWipe .9s var(--ez) var(--d,0s) both}
html.sc-run:not(.sc-done) #s-hero.sc :is(.mk-tr,.mk-srow,.mk-note){animation:scUp .6s var(--ez) var(--d,0s) both}
html.sc-run:not(.sc-done) #s-hero.sc :is(.mk-panel,.mk-more){animation:scFade .6s ease var(--d,0s) both}
html.sc-run:not(.sc-done) #s-hero.sc .mk-line{stroke-dasharray:1;stroke-dashoffset:1;animation:scDraw 1.5s var(--ez) 2.2s forwards}
html.sc-run:not(.sc-done) #s-hero.sc .mk-area{animation:scFade 1.1s ease 2.6s both}
html.sc-run:not(.sc-done) #s-hero.sc .mk-dot{animation:scFade .4s ease 3.4s both}

html.sc-cards-pending .sc-stage .sc-li{transform:translateY(108%)}
html.sc-cards-pending .sc-stage :is(.sc-card,.sc-eb){opacity:0}
.sc-stage.sc-in:not(.sc-fin) .sc-li{animation:scRise 1.05s var(--ez) var(--d,0s) both}
.sc-stage.sc-in:not(.sc-fin) .sc-eb{animation:scUp .7s var(--ez) both}
.sc-stage.sc-in:not(.sc-fin) .sc-card{animation:scCard 1.15s var(--ez) calc(.3s + var(--i) * .14s) both}
.sc-stage.sc-in:not(.sc-fin) .sc-badge{animation:scPop .7s var(--ez) calc(.85s + var(--i) * .14s) both}

@media (prefers-reduced-motion:reduce){
 .sc-cm img,.sc-glow,.sc-float{animation:none!important}
 .sc-card,.sc-badge,.sc-badge .mi,.sc-cta-i{transition:none!important}
}

/* ---------- Tablet und Mobil */
@media (max-width:980px){
 .sc-hero{grid-template-columns:minmax(0,1fr);gap:26px;align-items:start}
 .sc-eq{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 0}
 .sc-eq div:nth-child(3){padding-left:0;border-left:0}
 .sc-why-g{grid-template-columns:repeat(2,minmax(0,1fr))}
 .sc-cards{grid-template-columns:minmax(0,1fr);gap:16px;max-width:560px}
 .sc-card{aspect-ratio:506/600}
}
@media (max-width:640px){
 #s-hero.sc{padding:92px 0 20px}
 #s-hero.sc .sc-wrap{padding:0 16px}
 .sc-pill{margin-bottom:20px;font-size:10.5px;letter-spacing:1.4px;padding:7px 13px}
 .sc-h1{font-size:clamp(34px,10.4vw,52px);letter-spacing:-.045em}
 .sc-k{font-size:.4em}
 .sc-sub{font-size:16.5px}
 .sc-act{gap:12px;margin-top:22px}
 .cta.sc-cta{width:100%;justify-content:space-between}
 .sc-meta{margin-top:30px;flex-direction:column;align-items:flex-start}
 .sc-far{display:none}
 .sc-flbl{width:100%}
 .sc-eq dd{font-size:13px}
 .sc-eq div{padding-right:10px}
 .sc-frame{margin-top:32px;border-radius:22px;padding:16px 12px 0}
 .sc-fcap{font-size:10px;gap:8px;margin-bottom:12px;letter-spacing:.04em}
 .sc-mock{border-radius:12px 12px 0 0;margin-bottom:-6%}
 .sc-why{margin-top:60px}
 .sc-why-g{grid-template-columns:minmax(0,1fr);gap:18px}
 .sc-stage{margin-top:72px}
 .sc-cards{margin-top:32px}
 .sc-card{border-radius:22px}
 .sc-cn{left:22px;top:20px;font-size:clamp(48px,15vw,64px)}
 .sc-ct{left:22px;right:84px;bottom:24px;font-size:15.5px}
 .sc-badge{right:20px;bottom:22px;width:48px;height:48px}
}