/* =====================================================================
   Level11 – Landingpage. Regeln: siehe UI.md
   Farben 60/30/10 (hell, Karten, Gelb als Akzent), Skala 1.25, 8pt-Raster,
   5 Zustände je Element, nur transform/opacity animiert.
   Bildsprache nach der Referenz „Discover“: Farbverlauf-Hero, große Karten.
   ===================================================================== */
/* Schrift Hanken Grotesk, selbst gehostet (SIL Open Font License, siehe fonts/OFL.txt).
   Variable Schrift: pro Zeichenbereich eine Datei für alle Gewichte von 400 bis 800. */
@font-face{font-family:"Hanken Grotesk";font-style:normal;font-weight:400 800;font-display:swap;src:url(fonts/hanken-grotesk-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Hanken Grotesk";font-style:normal;font-weight:400 800;font-display:swap;src:url(fonts/hanken-grotesk-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
:root{
 --bg:#f7f6f3;--surface:#ffffff;--card:#efeee9;--ink:#101012;--head:#101012;--muted:#55555c;--line:#dedcd5;
 --accent:#ffd21f;--accent-hover:#f2c400;--link:#0b5cad;--primary:#101012;--ring:#101012;
 --chip-bg:#fff6cf;--card-line:#dedcd5;--card-bg:#ffffff;--shadow:0 1px 2px rgba(40,30,10,.05),0 14px 36px rgba(40,30,10,.08);
 --m1:#a9c6dd;--m2:#f7a47a;--m3:#ffd965;--m4:#f9d4b6;--m5:#e4f1e8;
 --mesh:var(--card);
 --logo-bg:#101012;--logo-fg:#ffffff;--logo-b:#101012;
 --win-bg:#fff;--device-shadow:0 50px 100px rgba(60,40,10,.24),0 14px 30px rgba(60,40,10,.12);--phone-shadow:0 50px 90px rgba(60,40,10,.3),0 14px 28px rgba(60,40,10,.18);
 --r-sm:6px;--r-md:10px;--r-lg:16px;--r-xl:20px;--r-pill:999px;--ease:cubic-bezier(.16,1,.3,1);
 --font:"Hanken Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:104px}
body{margin:0;background:var(--bg);color:var(--ink);font:400 16px/1.6 var(--font);-webkit-font-smoothing:antialiased}
[hidden]{display:none!important}
img,svg{max-width:100%}
a{color:inherit}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,summary:focus-visible,select:focus-visible{outline:2px solid var(--ring);outline-offset:3px}
.skip{position:absolute;left:16px;top:-64px;z-index:100;padding:12px 24px;border-radius:var(--r-sm);background:var(--ink);color:#fff;text-decoration:none;font-weight:700;transition:top .2s var(--ease)}
.skip:focus{top:16px}
.ico{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}

/* ===== Navigation: kleine Leiste mit gelbem Button ===== */
.nav{position:sticky;top:0;z-index:30;padding:16px 16px 0;margin-bottom:-80px}
.bar{max-width:960px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:10px 10px 10px 22px;border-radius:14px;background:rgba(244,243,240,.9);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.7);box-shadow:0 8px 30px rgba(60,40,10,.08)}
.logo{flex:none;display:inline-flex;align-items:center;gap:8px;min-height:44px;border-radius:8px;color:var(--ink);text-decoration:none;font-weight:800;font-size:21px;letter-spacing:-.04em}
.logo svg{display:block;flex:none}.logo b{font-weight:inherit;color:var(--logo-b)}
.logo .dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--accent);margin-left:2px;transform:translateY(5px)}
.links{display:flex;gap:2px}
.links a{display:inline-flex;align-items:center;min-height:44px;padding:0 11px;border-radius:8px;color:var(--ink);text-decoration:none;font-size:15px;font-weight:500;transition:background .2s var(--ease),transform .2s var(--ease)}
.links a:hover{background:rgba(16,16,18,.07)}
.links a:active{transform:scale(.98)}
.links a.on{background:rgba(16,16,18,.09);font-weight:700}
.navcta{display:inline-flex;align-items:center;min-height:44px;padding:0 22px;border:0;border-radius:8px;background:var(--accent);color:var(--ink);font:700 15px var(--font);cursor:pointer;transition:background .2s var(--ease),transform .2s var(--ease)}
.navcta:hover{background:var(--accent-hover)}.navcta:active{transform:scale(.98)}.navcta:disabled{opacity:.5;cursor:not-allowed}

/* ===== Menü am Handy: Burger-Knopf, Karte unter der Leiste (ab 1000 Pixel Breite unsichtbar) ===== */
.burger{display:none;position:relative;flex:none;width:44px;height:44px;padding:0;border:0;border-radius:8px;background:rgba(16,16,18,.06);color:var(--ink);cursor:pointer;transition:background .2s var(--ease),color .2s var(--ease),transform .2s var(--ease)}
.burger:hover{background:rgba(16,16,18,.1)}
.burger:active{transform:scale(.96)}
.burger i{position:absolute;left:13px;width:18px;height:2px;border-radius:1px;background:currentColor;transition:transform .3s var(--ease),opacity .2s var(--ease)}
.burger i:nth-child(1){top:15px}
.burger i:nth-child(2){top:21px}
.burger i:nth-child(3){top:27px}
.burger[aria-expanded="true"],.burger[aria-expanded="true"]:hover{background:var(--ink);color:#fff}
.burger[aria-expanded="true"] i:nth-child(1){transform:translateY(6px) rotate(45deg)}
.burger[aria-expanded="true"] i:nth-child(2){opacity:0;transform:scaleX(.2)}
.burger[aria-expanded="true"] i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.mcard{position:absolute;left:-1px;right:-1px;top:calc(100% + 9px);z-index:3;display:grid;gap:4px;padding:8px;border:1px solid rgba(255,255,255,.8);border-radius:14px;background:rgba(250,249,246,.98);box-shadow:0 18px 44px rgba(60,40,10,.18);opacity:0;transform:translateY(-6px);transition:opacity .22s var(--ease),transform .22s var(--ease)}
.mcard[hidden]{display:none}
.mcard.open{opacity:1;transform:none}
.mcard a{display:flex;align-items:center;justify-content:space-between;min-height:56px;padding:0 16px;border-radius:6px;color:var(--ink);font:600 18px var(--font);letter-spacing:-.01em;text-decoration:none;transition:background .2s var(--ease),transform .2s var(--ease)}
.mcard a:hover{background:rgba(16,16,18,.06)}
.mcard a:active{transform:scale(.99)}
.mcard a[aria-current]{background:rgba(16,16,18,.08);font-weight:800}
.mcard a .ico{width:18px;height:18px;color:var(--muted)}
.bscrim{position:fixed;inset:0;z-index:20;background:rgba(26,20,10,.22);opacity:0;transition:opacity .25s var(--ease)}
.bscrim.open{opacity:1}
.bscrim[hidden]{display:none}
html.menu-open{overflow:hidden;scrollbar-gutter:stable}
html.menu-open .mbar{opacity:0!important;pointer-events:none}
@media (max-width:1000px){
 .burger{display:block;margin-left:-8px}
 .navcta{margin-left:auto}
}
@media (max-width:359px){
 .bar{gap:8px;padding-left:16px}
 .navcta{padding:0 14px}
 .burger{margin-left:0}
}

/* ===== Buttons ===== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:56px;padding:0 32px;border:0;border-radius:10px;background:var(--accent);color:var(--ink);font:700 18px var(--font);text-decoration:none;cursor:pointer;transition:background .2s var(--ease),transform .2s var(--ease),box-shadow .2s var(--ease)}
.btn:hover{background:var(--accent-hover)}
.btn:active{transform:scale(.98)}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn.dark{background:var(--ink);color:#fff}.btn.dark:hover{background:#2a2a30}
.btn.outline{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink)}.btn.outline:hover{background:var(--ink);color:#fff}
.alink{position:relative;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 2px;border:0;border-radius:0;background:none;color:var(--ink);font:700 17px var(--font);text-decoration:none;cursor:pointer;transition:transform .2s var(--ease)}
.alink::after{content:"";position:absolute;left:2px;right:2px;bottom:6px;height:2px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .25s var(--ease)}
.alink:hover::after,.alink:focus-visible::after{transform:scaleX(1)}.alink:active{transform:scale(.98)}
.alink span{transition:transform .2s var(--ease)}.alink:hover span{transform:translateX(4px)}

/* ===== Hero: Farbverlauf, zentrierte Überschrift, Geräte ===== */
#neu{position:relative}
.hero{position:relative;overflow:hidden}
.hero-in{position:relative;max-width:1100px;margin:0 auto;padding:184px 24px 0;text-align:center}
h1{margin:0 auto;max-width:15ch;color:var(--ink);font-size:clamp(46px,7.2vw,108px);line-height:.98;font-weight:800;letter-spacing:-.055em;text-wrap:balance}
h1 .lt{font-weight:500}
.lead{margin:32px auto 0;max-width:34ch;font-size:clamp(19px,2vw,26px);line-height:1.4;color:#2c2c31}
.cta{margin-top:40px;display:flex;align-items:center;justify-content:center;gap:28px;flex-wrap:wrap}
.micro{margin:24px 0 0;font-size:14px;color:#46464c}

/* ===== Geräte-Anordnung (mittig, unten angeschnitten) ===== */
.stage{position:relative;max-width:1240px;margin:64px auto 0;padding:0 24px 104px}
.devs{position:relative;width:min(1040px,82vw);margin:0 auto}
.mbp{position:relative;width:100%}

/* ===== Sektionen ===== */
.sec{max-width:1240px;margin:0 auto;padding:120px 24px}
.sec-head{text-align:center;max-width:920px;margin:0 auto 72px}
.xl{margin:0;font-size:clamp(46px,6.4vw,92px);line-height:.98;font-weight:800;letter-spacing:-.055em;text-wrap:balance}
.lg{margin:0;font-size:clamp(34px,4.4vw,64px);line-height:1;font-weight:800;letter-spacing:-.05em;text-wrap:balance}
.sub{margin:24px auto 0;max-width:36ch;font-size:clamp(19px,1.9vw,24px);line-height:1.4;color:var(--muted)}
.intro{margin:20px 0 0;max-width:38ch;font-size:20px;line-height:1.5;color:var(--muted)}

/* Karten wie in der Referenz: groß, weich, Vorschau wächst unten heraus */
.cards2{display:grid;grid-template-columns:1fr 1fr;gap:40px}
.card{position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:center;min-height:600px;padding:56px 48px 0;border-radius:var(--r-xl);background:var(--card);text-align:center}
.card.mesh{background:var(--surface);border:1.5px solid var(--line)}
.bn{display:block;margin:-8px 0 -4px;font:800 clamp(72px,7vw,104px)/1 var(--font);letter-spacing:-.07em;color:var(--ink);opacity:.13}
.card.mesh .bn{opacity:1;color:var(--accent);-webkit-text-stroke:2px var(--ink)}
.card h3{margin:16px 0 12px;font-size:clamp(28px,2.8vw,38px);line-height:1.1;letter-spacing:-.04em}
.card>p{margin:0;max-width:30ch;font-size:19px;line-height:1.45;color:var(--muted)}
.card.mesh>p{color:#2c2c31}
.peek{width:100%;max-width:440px;margin-top:auto;padding-top:40px;transform:translateY(40px)}
.pcard{padding:24px 24px 72px;border-radius:14px 14px 0 0;background:#fff;box-shadow:0 -14px 50px rgba(60,40,10,.1);text-align:left}
.pcard .bar-top{display:flex;align-items:center;gap:6px;margin-bottom:20px}
.pcard .bar-top i{width:10px;height:10px;border-radius:50%;background:#e4e2db}.pcard .bar-top b{flex:1;max-width:200px;height:20px;margin-left:12px;border-radius:99px;background:#efeee9}
.sk{display:block;height:14px;margin-top:12px;border-radius:4px;background:#efeee9}.sk.w{height:96px;border-radius:10px;margin-top:0}.sk.s{width:60%}.sk.m{width:80%}
.spinrow{display:flex;align-items:center;gap:16px;margin-top:20px;font-weight:700}
.spin{width:36px;height:36px;border-radius:50%;border:4px solid #e7e5de;border-top-color:var(--ink);animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.prog{height:8px;margin-top:16px;border-radius:4px;background:#efeee9;overflow:hidden}.prog i{display:block;width:38%;height:100%;border-radius:inherit;background:var(--ink)}
.mess{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.mess b{display:block;height:44px;border-radius:6px}.mess b:nth-child(1){background:var(--accent)}.mess b:nth-child(2){background:#8fd0f0}.mess b:nth-child(3){background:#f58a4b}.mess b:nth-child(4){background:#c7b6f5}
.qm{position:absolute;right:20px;top:-18px;display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:var(--ink);color:#fff;font-size:30px;font-weight:800}
.dead{display:grid;place-items:center;margin-top:20px;height:88px;border-radius:8px;border:2px dashed #cfccc3;color:#7a776e;font-weight:700;font-size:15px}
.ok3{display:grid;gap:10px}
.ok3 div{display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:8px;background:#f5f4ef;font-weight:700}
.ok3 .ck{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:#8fd5c3;border:2px solid #17171c;flex:none}.ok3 .ck .ico{width:16px;height:16px;stroke-width:3}

/* Große Flächen */
.big{margin:0 auto;border-radius:var(--r-xl);background:var(--card);padding:80px 64px}
.big.mesh{background:var(--mesh)}

/* KI-Aussage: nur Schrift zwischen Problem und Bausteinen (kurz, ein Gedanke) */
.stcap{margin:32px auto 0;text-align:center;font-size:.9375rem;color:var(--muted)}
.stcap a{color:var(--ink);font-weight:700;text-underline-offset:3px}

/* Bausteine: Karten mit Bühne (So nicht / So schon), gleiche Größe wie „Fast weggeklickt“ */
.xgrid{display:grid;grid-template-columns:1fr 1fr;gap:40px}
.xcard{container-type:inline-size;display:flex;flex-direction:column;align-items:center;padding:56px 0 0;overflow:hidden;border-radius:var(--r-xl);background:var(--card);text-align:center}
.xcard.wide{grid-column:1/-1}
.xn{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--ink);color:#fff;font-weight:800;font-size:18px}
.xcard h3{margin:16px 24px 12px;font-size:clamp(28px,2.8vw,38px);line-height:1.1;letter-spacing:-.04em}
.xd{margin:0 24px;max-width:30ch;font-size:19px;line-height:1.45;color:var(--muted)}
.xchr{display:flex;align-items:center;gap:.45em;height:2.2em;padding:0 .9em;background:#f3f2ee;border-bottom:1px solid #e4e2da}
.xchr i{width:.6em;height:.6em;border-radius:50%;background:#dcd9d0}.xchr b{flex:1;max-width:55%;height:1.1em;margin-left:.6em;border-radius:99px;background:#e6e4dc}
.xst{position:relative;display:flex;align-items:center;flex:1;width:calc(100% - 48px);margin-top:40px;padding:2.6em 1.8em 2.2em;border-radius:1.2em;overflow:hidden;background:var(--mesh);font-size:clamp(8px,2.9cqw,16px);text-align:left}
.xcard.wide .xst{font-size:clamp(8px,1.7cqw,16px)}
.xrow{display:flex;align-items:flex-start;width:100%}
.xcard.wide .xrow{max-width:50em;margin:0 auto}
.xbad,.xgood{position:relative}
.xbad{width:52%;margin-top:4em;z-index:1}
.xgood{width:52%;margin-left:-4%;z-index:2}
.xbad::after,.xgood::after{content:"✕";position:absolute;z-index:5;display:grid;place-items:center;width:2.2em;height:2.2em;top:-.9em;left:-.9em;border-radius:50%;border:.2em solid #fff;background:#c0392b;color:#fff;font:800 1em var(--font);box-shadow:0 .3em .8em rgba(0,0,0,.25)}
.xgood::after{content:"✓";left:auto;right:-.9em;background:#1f9d68}
.xwin{position:relative;overflow:hidden;border-radius:1em;background:#fff;box-shadow:0 .15em .3em rgba(40,30,10,.08),0 1.4em 2.8em rgba(60,40,10,.16)}
.xbad .xwin,.xbad .xph{filter:grayscale(.6)}
/* Karten mit großem „So schon“-Fenster (Klarheit, Tempo): Fenster breiter, „So nicht“ darunter versetzt, damit nichts verdeckt wird */
.xbig .xbad{width:50%;margin-top:9em}
.xbig .xbad .xwb{padding-right:1.2em}
.xbig .xgood{width:70%;margin-left:-20%}
/* Lumi-Beispielseite im „So schon“-Fenster: große Schrift statt verkleinertem Bildschirmfoto, Tasse ohne Anschnitt (Ausschnitt 806×806 px aus mac-screen.jpg) */
.mh{display:grid;grid-template-columns:1.2fr .8fr;gap:.9em;align-items:center;padding:1.1em;background:#fdf5eb}
.mh-eb{display:block;font:700 .6em/1 var(--font);letter-spacing:.12em;text-transform:uppercase;color:#c9532b}
.mh-h{display:block;margin-top:.5em;font:700 1.45em/1.04 Georgia,"Times New Roman",serif;letter-spacing:-.02em;color:#2a1a10}
.mh-b{display:inline-block;margin-top:1em;padding:.55em 1.1em;border-radius:99px;background:#c9532b;color:#fff;font:700 .75em/1.2 var(--font)}
.mh-cup{display:block;justify-self:end;width:min(100%,7.4em);aspect-ratio:1;border-radius:8%;background:#c9532b url(img/mac-screen.jpg) 88.53% 43.02%/248.14% auto no-repeat}
.xph{position:relative;width:100%;aspect-ratio:9/18.6;padding:.4em;border-radius:1.9em;background:#050506;box-shadow:0 0 0 .15em #b6bac1,0 1.4em 2.8em rgba(60,40,10,.25)}
.xph>div{position:relative;height:100%;border-radius:1.5em;overflow:hidden;background:#fff}
.xph img{display:block;width:100%;height:100%;object-fit:cover;object-position:top}
.xrow.phr{justify-content:center;gap:2.4em}
.xrow.phr .xbad{width:10.6em;margin-top:2.6em}
.xrow.phr .xgood{width:10.6em;margin-left:0}
/* Beide Handys gleich groß: die Eingangsanimation verkleinert „So nicht“ hier nicht (Abdunkeln und Wegrücken bleiben) */
.xcard.in .xrow.phr .xbad>*{transform:translateX(-.8em)}
.xcap{display:grid;grid-template-columns:1fr 1fr;gap:24px;width:calc(100% - 48px);margin:24px 24px 32px;text-align:left}
.xlb{display:block;font:800 14px var(--font);letter-spacing:.04em;text-transform:uppercase}
.xlb.no{color:#b3261e}.xlb.yes{color:#14663d}
.xcp{display:block;margin-top:4px;font:500 16px/1.4 var(--font);color:#2c2c31}
.xwb{padding:1.2em}
.xbad .xwb{padding-right:calc(1.2em + 9%)}
.xbad .old{padding-right:calc(.8em + 9%)}
.bp-nav{display:flex;gap:.7em;margin-bottom:1em}.bp-nav i{flex:0 1 2.6em;min-width:0;height:.5em;border-radius:.2em;background:#cfd6de}
.bp-h{font:700 1.5em/1.15 Georgia,serif;color:#1f5fa6}
.bp-t{margin-top:.6em;font:400 .85em/1.4 Verdana,sans-serif;color:#7b8794}
.bp-img{height:4em;margin-top:.8em;border-radius:.4em;background:linear-gradient(135deg,#cfd6de,#e8ecf0)}
.fl{display:grid;gap:.5em}
.fl label{font:600 .8em var(--font);color:#555}
.fl i{display:block;height:1.5em;border-radius:.3em;background:#f1f0eb;border:1px solid #dcd9d0}
.fl .fsb{width:3.6em;height:1.1em;border-radius:.2em;background:#cfccc3;border:0}
.fh{font:800 1.5em/1.1 var(--font);letter-spacing:-.03em;margin-bottom:.6em;color:var(--ink)}
.fg i{height:2.2em}
.yb{display:block;height:2.8em;margin-top:.6em;border-radius:.6em;background:var(--accent);font:700 1.1em/2.55em var(--font);text-align:center;color:var(--ink)}
.yb.sm{display:inline-block;margin:0;height:2em;padding:0 1em;font-size:1em;line-height:2em}
.xisl{position:absolute;top:.35em;left:50%;width:3.4em;height:1em;margin-left:-1.7em;border-radius:99px;background:#000;z-index:2}
.pbad{padding:3.4em 1.4em 1em;font:400 .55em/1.35 Verdana,sans-serif;color:#7b8794}
.pbad b{display:block;margin-bottom:.4em;font:700 1.6em/1.2 Georgia,serif;color:#1f5fa6}
.pbad .sm{display:inline-block;margin-top:.8em;padding:.1em .6em;background:#cfd6de;font-size:.9em}
.ln{display:block;height:.6em;margin-top:.6em;border-radius:.3em;background:#e4e2db}.ln.s{width:60%}.ln.m{width:80%}
.blk{display:block;height:3.6em;border-radius:.6em;background:#efeee9}
.spin2{display:flex;align-items:center;gap:.8em;margin-top:.8em;font:700 1.1em var(--font)}
.spin2 i{width:1.3em;height:1.3em;border-radius:50%;border:.25em solid #e7e5de;border-top-color:var(--ink);animation:spin 1s linear infinite}
.prog2{height:.5em;margin-top:.8em;border-radius:.25em;background:#efeee9;overflow:hidden}.prog2 i{display:block;width:38%;height:100%;background:var(--ink)}
.live3{position:absolute;right:1.2em;bottom:-1.7em;z-index:3;display:inline-flex;align-items:center;gap:.5em;padding:.4em .9em;border-radius:99px;background:#e1f4ea;font:700 1.1em var(--font);color:#14663d}
.live3 i{width:.6em;height:.6em;border-radius:50%;background:#2fb67a}
.sr{font-family:Arial,sans-serif}
.sr .sq{margin-bottom:1em;padding:.5em .9em;border-radius:99px;box-shadow:0 0 0 1px #dcdfe3;font:400 1em var(--font);color:#555}
.sr .sru{font-size:.9em;color:#3c6e47}.sr .srt{margin-top:.2em;font-size:1.4em;line-height:1.2;color:#1a0dab}.sr .srd{margin-top:.3em;font-size:.95em;line-height:1.35;color:#4d5156}
.chips{display:grid;gap:.6em;margin:.6em 0}
.chips span{display:flex;align-items:center;gap:.8em;padding:.5em .8em;border-radius:.6em;background:#f5f4ef;font:700 1.1em var(--font)}
.chips i{display:grid;place-items:center;flex:none;width:1.3em;height:1.3em;border-radius:50%;background:#8fd5c3;font-size:.8em;font-style:normal}
.quote{display:flex;align-items:center;gap:.8em;padding:.6em;border-radius:.6em;background:#f5f4ef}
.quote u{flex:none;width:2.2em;height:2.2em;border-radius:50%;background:#dcd9d0}.quote>div{flex:1}
.legal{margin-top:.8em;font:500 .85em var(--font);color:#8a8a92}
.bt{display:block;margin-top:.6em;padding:.5em .6em;border-radius:.5em;font:700 1.1em/1.2 var(--font);text-align:center;color:var(--ink)}
.bt:first-child{margin-top:0}
.bt.b1{background:var(--accent)}.bt.b2{background:#ff9a5b}.bt.b3{background:#8fd0f0}.bt.b4{background:#fff;box-shadow:inset 0 0 0 .15em var(--ink)}
.bt.bt-main{padding:.8em .6em;font-size:1.2em}
.tl{display:block;margin-top:1em;font:700 1.1em var(--font);text-decoration:underline}
.rd-bad{color:#b4b4b4;font:400 .9em/1.15 Verdana,sans-serif}
.rd-good{color:#17171c;font:600 1.7em/1.35 var(--font);letter-spacing:-.02em}
.nv{display:flex;flex-wrap:wrap;align-items:center;gap:.5em .9em;font:600 1em var(--font)}
.nv.bad{color:#888;font-size:.9em}
.nv.good{font-size:1.1em}
.ct-low{margin-top:2em;padding-top:.6em;border-top:.1em dashed #cfccc3;font:400 .9em var(--font);color:#999}
.ct-top{display:flex;align-items:center;justify-content:space-between;gap:.6em;margin-bottom:1em}
.mailchip{padding:.4em .7em;border-radius:99px;background:#efeee9;font:700 1em var(--font)}
.pill{display:inline-block;padding:.5em 1em;border-radius:99px;background:#c9532b;color:#fff;font:700 1em var(--font)}
.t-good{display:block;font:700 2em/1.05 Georgia,serif;letter-spacing:-.02em;color:#2a1a10}
.old{position:relative;min-height:14em;padding:.8em;background:linear-gradient(#4a90d9,#1f5fa6 3.6em,#dfe7ee 3.6em);font:1em Verdana,sans-serif}
.old b{display:block;color:#fff;font:700 1.4em Georgia,serif;text-shadow:.1em .1em .1em #0a2a52}
.old .oban{display:inline-block;margin-top:2.4em;padding:1.2em 1.4em;background:radial-gradient(circle at 25% 40%,#ffe9a8,#f0a030 60%,#a85a10);border:.2em solid #fff;border-radius:.4em;color:#fff;font:700 1.2em Georgia,serif}
.old small{display:block;margin-top:1.2em;font-size:.8em;color:#456}
.fresh{display:grid;gap:1em;justify-items:start}
.fresh b{font:700 1.6em Georgia,serif}
.xtoggle{display:flex;justify-content:center;margin-top:56px}
.xtoggle .btn .ico{transition:transform .3s var(--ease)}
.xtoggle .btn[aria-expanded="true"] .ico{transform:rotate(180deg)}
.xmore{opacity:0;transform:translateY(16px);transition:opacity .4s var(--ease),transform .4s var(--ease)}
.xmore.show{opacity:1;transform:none}
.xsub{margin-top:96px}
.xcard.wide{grid-column:1/-1}
.bt{display:block;margin-top:.6em;padding:.5em .6em;border-radius:.5em;font:700 1.1em/1.2 var(--font);text-align:center;color:var(--ink)}
.bt:first-child{margin-top:0}
.bt.b1{background:var(--accent)}.bt.b2{background:#ff9a5b}.bt.b3{background:#8fd0f0}.bt.b4{background:#fff;box-shadow:inset 0 0 0 .15em var(--ink)}
.bt.bt-main{padding:.8em .6em;font-size:1.2em}
.tl{display:block;margin-top:1.2em;font:700 1.1em var(--font);text-decoration:underline}
.rd-bad{color:#b4b4b4;font:400 .9em/1.15 Verdana,sans-serif}
.rd-good{color:#17171c;font:600 1.7em/1.35 var(--font);letter-spacing:-.02em}
.nv{display:flex;flex-wrap:wrap;gap:.5em .9em;font:600 1em var(--font)}
.nv.bad{color:#888;font-size:.9em}
.nv.good{gap:.5em 1em;margin-bottom:.4em;font-size:1.2em}
.ct-low{margin-top:2.4em;padding-top:.6em;border-top:.1em dashed #cfccc3;font:400 .9em var(--font);color:#999}
.ct-top{display:flex;align-items:center;justify-content:space-between;gap:.6em;margin-bottom:1em}
.mailchip{padding:.4em .7em;border-radius:99px;background:#efeee9;font:700 1em var(--font)}
.old{position:relative;height:100%;min-height:12em;padding:.8em;background:linear-gradient(#4a90d9,#1f5fa6 3.6em,#dfe7ee 3.6em);border-radius:.4em;font:1em Verdana,sans-serif}
.old b{display:block;color:#fff;font:700 1.4em Georgia,serif;text-shadow:.1em .1em .1em #0a2a52}
.old .oban{display:inline-block;margin-top:2.4em;padding:1.2em 1.4em;background:radial-gradient(circle at 25% 40%,#ffe9a8,#f0a030 60%,#a85a10);border:.2em solid #fff;border-radius:.4em;color:#fff;font:700 1.2em Georgia,serif}
.old small{display:block;margin-top:1.2em;font-size:.8em;color:#456}
.fresh{display:grid;gap:1em;justify-items:start}
.fresh b{font:700 1.6em Georgia,serif}
.fresh .pill{margin-top:0}
.xcta{justify-content:center;margin-top:72px}
.inline-cta{display:flex;align-items:center;gap:24px;flex-wrap:wrap}
.inline-cta span{font-weight:700;font-size:18px}

/* Ablauf: drei Karten mit Vorschau */
.cards3{display:grid;grid-template-columns:repeat(3,1fr);gap:32px}
.card.step{min-height:560px;padding:48px 32px 0}
.fm{display:grid;gap:12px}
.fm .l{height:10px;width:32%;border-radius:3px;background:#dedcd5}
.fm .i{height:40px;border-radius:6px;background:#efeee9}
.fm .b{height:44px;margin-top:4px;border-radius:8px;background:var(--accent)}
.live{display:inline-flex;align-items:center;gap:8px;margin-top:16px;padding:4px 12px;border-radius:4px;background:#e1f4ea;font-weight:700;font-size:13px}
.live i{width:8px;height:8px;border-radius:50%;background:#2fb67a}

/* Pakete */
.pak{display:grid;grid-template-columns:1.05fr 1fr;gap:56px;align-items:stretch}
.main-pk{container-type:inline-size;position:relative;display:flex;flex-direction:column;padding:56px 48px 48px;border-radius:var(--r-xl);background:var(--surface);box-shadow:inset 0 0 0 1.5px var(--line)}
.rbadge{position:absolute;top:28px;right:28px;display:inline-flex;align-items:center;min-height:28px;padding:0 14px;border-radius:4px;background:var(--ink);color:#fff;font-size:12px;font-weight:800;letter-spacing:.04em}
.main-pk h3{margin:0;font-size:min(38px,13.8cqw);letter-spacing:-.04em}
.main-pk .pr{margin:28px 0 8px;font-size:clamp(56px,6vw,88px);line-height:1;font-weight:800;letter-spacing:-.06em}
.main-pk .pr small{font-size:20px;font-weight:600;letter-spacing:0;color:#46464c}
.main-pk .d{margin:0 0 32px;max-width:34ch;color:#2c2c31;font-size:18px}
.main-pk ul{list-style:none;margin:0 0 44px;padding:0;display:grid;gap:14px}
.main-pk li{display:flex;gap:12px;align-items:flex-start;font-weight:600}
.main-pk li .ico{width:22px;height:22px;margin-top:2px;stroke-width:3}
.main-pk .btn{margin-top:auto;align-self:flex-start}
.slim{display:grid;align-content:stretch}
.srow{display:grid;grid-template-columns:1fr auto;gap:8px 24px;align-items:center;padding:28px 0;border-top:1px solid var(--line)}
.srow:last-child{border-bottom:1px solid var(--line)}
.srow h3{margin:0;font-size:28px;letter-spacing:-.04em}
.srow p{margin:4px 0 0;max-width:42ch;font-size:15px;color:var(--muted)}
.srow .sp{margin:0;text-align:right;white-space:nowrap;font-size:22px;font-weight:800;letter-spacing:-.03em}
.srow .alink{grid-column:1/-1;justify-self:start}

/* Fragen */
.faq{display:grid;grid-template-columns:.8fr 1.2fr;gap:72px;align-items:start}
.faq-l .alink{margin-top:32px}
.acc details{border-top:1px solid rgba(16,16,18,.14)}
.acc details:last-child{border-bottom:1px solid rgba(16,16,18,.14)}
.acc summary{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:72px;padding:12px 0;font-weight:700;font-size:21px;letter-spacing:-.02em;cursor:pointer;list-style:none}
.acc summary::-webkit-details-marker{display:none}
.acc summary:hover{opacity:.7}
.acc summary .ico{transition:transform .3s var(--ease)}
.acc details[open] summary .ico{transform:rotate(180deg)}
.acc .a{padding:0 0 28px;max-width:56ch;font-size:17px;color:var(--muted)}
.acc details[open] .a{animation:aIn .3s var(--ease)}
@keyframes aIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* Anfrage */
.anf{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:start}
.anf .sub{margin-left:0;color:#2c2c31}

/* ===== Geräte =====
   Alles in Einheiten der Gerätebreite (cqw), nichts in festen Pixeln: Die Anordnung hat auf jedem
   Bildschirm exakt dieselben Proportionen und wird nur gleichmäßig skaliert.
   Maße nach Apple-Daten: MacBook Pro 16" (Deckel 355,7 mm, Display 3456×2234, Rand ca. 5 mm)
   und iPhone 16 Pro (71,5 × 149,6 mm, Display-Radius ca. 14 %, Dynamic Island 126×37 pt von 402 pt). */
.devs{container-type:inline-size}
.lid{position:relative;padding:1.4cqw 1.4cqw 1.6cqw;border:.2cqw solid #b6bac1;border-radius:2.4cqw 2.4cqw .5cqw .5cqw;background:#050506;box-shadow:inset 0 0 0 .08cqw #2a2c31,0 4.8cqw 9.6cqw rgba(60,40,10,.24),0 1.3cqw 2.9cqw rgba(60,40,10,.12)}
.msc{position:relative;aspect-ratio:3456/2234;border-radius:1cqw;overflow:hidden;background:#000;container-type:inline-size}
.wall{position:absolute;inset:0;background:radial-gradient(60% 80% at 18% 8%,#ffe9bf 0%,transparent 60%),radial-gradient(70% 80% at 92% 18%,#bcd6ff 0%,transparent 62%),linear-gradient(160deg,#dbe7ff,#f4e6ff)}
.menubar{position:absolute;left:0;right:0;top:0;height:2.2cqw;display:flex;align-items:center;justify-content:space-between;padding:0 1.6cqw;font:500 1cqw/1 -apple-system,BlinkMacSystemFont,"Inter",sans-serif;color:#15161a;background:rgba(255,255,255,.34);z-index:3}
.menubar .l,.menubar .r{display:flex;align-items:center;gap:1.5cqw}
.menubar b{font-weight:700}.menubar svg{display:block;height:1.1cqw;width:auto}
.notch{position:absolute;top:0;left:50%;transform:translateX(-50%);width:11cqw;height:2.2cqw;background:#000;border-radius:0 0 .8cqw .8cqw;z-index:4}
.notch::after{content:"";position:absolute;left:50%;top:.75cqw;width:.7cqw;height:.7cqw;margin-left:-.35cqw;border-radius:50%;background:#14213a;box-shadow:inset 0 0 0 .14cqw #26324a}
.safari{position:absolute;left:3.2%;right:3.2%;top:3.6cqw;bottom:-3cqw;display:flex;flex-direction:column;border-radius:1cqw 1cqw 0 0;overflow:hidden;background:#fff;box-shadow:0 2cqw 5cqw rgba(10,25,60,.3),0 0 0 1px rgba(0,0,0,.1)}
.tb{position:relative;display:flex;align-items:center;gap:.8cqw;height:4cqw;padding:0 1.5cqw;background:linear-gradient(#f7f7f9,#ececf0);border-bottom:1px solid #d6d6dc}
.tb i{display:block;width:1cqw;height:1cqw;border-radius:50%;background:#ff5f57}.tb i:nth-child(2){background:#febc2e}.tb i:nth-child(3){background:#28c840}
.tb .nav2{margin-left:1.6cqw;display:flex;gap:1.4cqw;color:#8a8a92;font-size:1.5cqw;line-height:1}
.tb .url{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:32cqw;height:2.5cqw;border-radius:.7cqw;background:#e4e4e9;color:#4b4b52;font:500 1.1cqw/2.5cqw -apple-system,BlinkMacSystemFont,"Inter",sans-serif;text-align:center}
.view{position:relative;flex:1;overflow:hidden;background:#fff}
.view img{display:block;width:100%;height:100%;object-fit:cover;object-position:top}
.phimg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top}
.msc::after,.scr::after{content:"";position:absolute;inset:0;z-index:6;pointer-events:none;background:linear-gradient(115deg,rgba(255,255,255,.14) 0%,rgba(255,255,255,0) 34%)}
/* Sockel: gleich breit wie der Deckel, Griffmulde mittig */
.base{position:relative;height:1.9cqw;margin:0;border-radius:0 0 2.4cqw 2.4cqw/0 0 1.9cqw 1.9cqw;background:linear-gradient(180deg,#e9ecf0,#aeb4be);box-shadow:0 .2cqw 0 #8d949e}
.base::before{content:"";position:absolute;left:50%;top:0;width:12cqw;height:.7cqw;margin-left:-6cqw;border-radius:0 0 1cqw 1cqw;background:linear-gradient(180deg,#b3bac4,#cdd2da)}
/* iPhone: --pw ist die Gerätebreite, alle Maße hängen daran */
.iph{--pw:20cqw;position:absolute;right:-3.5cqw;bottom:-5cqw;width:var(--pw);aspect-ratio:715/1496;padding:calc(var(--pw)*.016);border-radius:calc(var(--pw)*.17);background:linear-gradient(150deg,#e3e5e8 0%,#a3a6ac 26%,#eceef0 50%,#8d9096 78%,#c9cbd0 100%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.75),0 4.8cqw 8.6cqw rgba(60,40,10,.3),0 1.3cqw 2.7cqw rgba(60,40,10,.18)}
.bz{height:100%;padding:calc(var(--pw)*.022);border-radius:calc(var(--pw)*.154);background:#050506}
.iph .sbtn{position:absolute;width:calc(var(--pw)*.014);border-radius:calc(var(--pw)*.01);background:linear-gradient(90deg,#8d9096,#d3d5d9)}
.iph .s1{left:calc(var(--pw)*-.014);top:15%;height:3.6%}.iph .s2{left:calc(var(--pw)*-.014);top:21.5%;height:7.4%}.iph .s3{left:calc(var(--pw)*-.014);top:30.5%;height:7.4%}.iph .s4{right:calc(var(--pw)*-.014);top:26%;height:11.5%}
.scr{position:relative;height:100%;border-radius:calc(var(--pw)*.132);overflow:hidden;background:#fff;container-type:inline-size}
.sb{position:absolute;top:0;left:0;right:0;height:13.8cqw;display:flex;align-items:center;justify-content:space-between;padding:1.5cqw 8.4cqw 0 11cqw;z-index:5;font:600 4.5cqw/1 -apple-system,BlinkMacSystemFont,"Inter",sans-serif;color:#0b0b0d;letter-spacing:-.01em}
.sb .ic{display:flex;align-items:center;gap:1.2cqw}.sb svg{display:block;height:3.1cqw;width:auto}
.isl{position:absolute;top:2.8cqw;left:50%;transform:translateX(-50%);width:31.3cqw;height:9.2cqw;border-radius:999px;background:#000;z-index:6}
.hi{position:absolute;bottom:2cqw;left:50%;transform:translateX(-50%);width:34cqw;height:1.3cqw;border-radius:999px;background:#0b0b0d;z-index:5}

/* Formular */
.formcard{padding:40px;border-radius:var(--r-lg);background:#fff;box-shadow:0 30px 70px rgba(60,40,10,.14)}
.fld{display:grid;gap:8px;margin-bottom:24px}
.fld label,.fld .lb{font-weight:700;font-size:15px}.fld small{font-weight:500;color:var(--muted)}
.inp{width:100%;min-height:52px;padding:12px 16px;border-radius:var(--r-sm);border:1.5px solid #d6d3ca;background:var(--surface);color:var(--ink);font:500 16px var(--font);transition:border-color .2s var(--ease),box-shadow .2s var(--ease)}
[data-theme="dark"] .inp{border-color:#2f3947;background:#0c0f14}
.inp::placeholder{color:#7d8da1}
.inp:hover{border-color:#9db7d3}
.inp:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 4px rgba(16,16,18,.14)}
.inp:disabled{opacity:.5;cursor:not-allowed}
.inp.err{border-color:#c0392b;box-shadow:0 0 0 4px rgba(192,57,43,.12)}
textarea.inp{min-height:112px;resize:vertical}
.msg{min-height:20px;font-size:14px;color:#c0392b}
[data-theme="dark"] .msg{color:#ff8a7a}
.opts{position:relative;display:flex;gap:8px;flex-wrap:wrap}
.opts label{position:relative;display:inline-flex;align-items:center;min-height:44px;padding:0 20px;border-radius:6px;border:1.5px solid #d6d3ca;background:var(--surface);font-weight:600;font-size:15px;cursor:pointer;transition:background .2s var(--ease),border-color .2s var(--ease),transform .2s var(--ease),color .2s var(--ease)}
[data-theme="dark"] .opts label{border-color:#2f3947}
.opts label:hover{border-color:#9db7d3}.opts label:active{transform:scale(.98)}
.opts input{position:absolute;opacity:0;inset:0;cursor:pointer;margin:0}
.opts label:has(input:checked){background:var(--accent);border-color:var(--accent);color:var(--ink)}
.opts.has-ind label{background:transparent}
.opts.has-ind label:has(input:checked){background:transparent;border-color:var(--accent)}
.opt-ind{position:absolute;left:0;top:0;border-radius:6px;background:var(--accent);transform-origin:0 0;transition:transform .25s var(--ease);pointer-events:none}
.opts label:has(input:focus-visible){outline:2px solid var(--ring);outline-offset:3px}
.chk{display:block;position:relative;min-height:24px;padding-left:36px;font-size:14px;color:var(--muted);margin-bottom:8px}
.chk a{padding:11px 0;margin:-11px 0}
.chk input{position:absolute;left:0;top:0;width:24px;height:24px;margin:0;accent-color:var(--primary)}
.chk-msg{min-height:20px;margin:0 0 16px 36px}
.send-msg{margin:0 0 16px;font-size:14px;line-height:1.5;color:#c0392b}
.send-msg:empty{display:none}
.send-msg a{color:inherit;text-decoration:underline}
.fx-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.more{display:inline-flex;align-items:center;min-height:44px;margin-bottom:16px;padding:0;border:0;background:none;color:var(--primary);font:700 15px var(--font);cursor:pointer}
.more:hover{text-decoration:underline}
.trust{display:flex;gap:16px;flex-wrap:wrap;margin-top:16px;font-size:14px;color:var(--muted)}
.trust span{display:inline-flex;align-items:center;gap:8px}.trust .ico{width:16px;height:16px;color:var(--primary)}
.submit{width:100%}
.prog{height:6px;border-radius:99px;background:var(--line);overflow:hidden;margin-bottom:8px}.prog i{display:block;height:100%;border-radius:inherit;background:var(--primary);transition:width .4s var(--ease)}
.thx{text-align:center;padding:16px 0}
.okc{position:relative;display:grid;place-items:center;width:88px;height:88px;margin:0 auto 24px;border-radius:50%;background:#e5f3ec;color:#14663d;animation:okPop .5s var(--ease) both}.okc .ico{width:40px;height:40px;stroke-width:2.4}
.okc::after{content:"";position:absolute;inset:0;border-radius:50%;border:3px solid #8fd5c3;opacity:0;animation:okRing .9s var(--ease) .25s both}
.okc .ico{animation:okChk .45s var(--ease) .3s both}
.thx h3,.thx p,.thx .nx,.thx .btn{animation:okUp .5s var(--ease) .75s both}
.thx p{animation-delay:.85s}.thx .nx{animation-delay:.95s}.thx .btn{animation-delay:1.05s}
@keyframes okPop{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:none}}
@keyframes okChk{from{opacity:0;transform:scale(.3) rotate(-14deg)}to{opacity:1;transform:none}}
@keyframes okRing{from{opacity:.7;transform:scale(.95)}to{opacity:0;transform:scale(1.8)}}
@keyframes okUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.thx h3{margin:0 0 8px;font-size:31px;letter-spacing:-.03em;color:var(--head)}
.thx p{margin:0 auto;color:var(--muted);max-width:40ch}
.nx{display:grid;gap:12px;text-align:left;margin:32px 0}
.nx div{display:flex;gap:16px;align-items:center;padding:14px 20px;border-radius:8px;background:var(--chip-bg);border:1px solid var(--card-line)}
.nx .n{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--ink);color:#fff;font-weight:800;font-size:14px;flex:none}
.draftnote{margin-top:24px!important;font-size:12px;color:#7a5600!important}

/* Anfrage-Karte (Variante C, gewählt am 2026-10-17; Entwürfe in entwuerfe/anfrage-formular-ideen.html): am Desktop unten rechts, die Seite bleibt sichtbar und bedienbar; am Handy ein Blatt von unten */
dialog{position:fixed;z-index:120;inset:auto 32px 32px auto;margin:0;width:400px;max-width:calc(100vw - 32px);max-height:calc(100dvh - 64px);padding:0;border:0;border-radius:24px;background:var(--surface);color:var(--ink);box-shadow:0 1px 2px rgba(40,30,10,.06),0 12px 32px rgba(40,30,10,.14),0 32px 80px rgba(40,30,10,.22);overflow:auto;overscroll-behavior:contain}
dialog[open]{display:block;animation:dlgIn .3s var(--ease) backwards}
dialog.is-closing{animation:dlgOut .2s cubic-bezier(.4,0,1,1) forwards}
dialog::backdrop{background:rgba(26,20,10,.42);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);animation:dlgFade .3s var(--ease) backwards}
dialog.is-closing::backdrop{animation:dlgFadeOut .2s linear forwards}
@keyframes dlgIn{from{opacity:0;transform:translateY(16px) scale(.98)}}
@keyframes dlgOut{to{opacity:0;transform:translateY(8px) scale(.98)}}
@keyframes dlgSheet{from{transform:translateY(100%)}}
@keyframes dlgFade{from{opacity:0}}
@keyframes dlgFadeOut{to{opacity:0}}
html:has(dialog:modal){overflow:hidden;scrollbar-gutter:stable}
.dhead{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:16px 12px 0 24px}
.dh{margin:0;padding-top:10px;font-size:20px;font-weight:800;letter-spacing:-.03em;line-height:1.2}
.dt1,.dt2{display:block}
.dt2,dialog.is-sent .dt1{display:none}
dialog.is-sent .dt2{display:block}
.x{display:grid;place-items:center;flex:none;width:44px;height:44px;padding:0;border-radius:50%;border:0;background:transparent;color:var(--ink);cursor:pointer;transition:background .2s var(--ease),transform .2s var(--ease)}
.x:hover{background:rgba(16,16,18,.08)}.x:active{transform:scale(.94)}
.dbody{position:relative;padding:8px 24px 20px}
/* Beschriftungen stehen im Feld (Platzhalter) und bleiben für Vorlese-Programme erhalten */
dialog .fld>label{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
dialog .fld{gap:0;margin-bottom:12px}
dialog .msg{min-height:0}
dialog .msg:not(:empty){margin-top:6px}
dialog select.inp{appearance:none;-webkit-appearance:none;padding-right:44px;background:var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23101012' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center/18px;cursor:pointer}
dialog .chk{min-height:44px;margin:0;padding:10px 0 10px 36px}
dialog .chk input{top:10px}
dialog .chk a{padding:13px 0;margin:-13px 0}
dialog .chk-msg{min-height:0;margin:0 0 12px 36px}
dialog .chk-msg:not(:empty){margin-top:6px}
dialog .more{margin-bottom:4px}
dialog .inp::placeholder{color:#727279}
dialog .inp:hover{border-color:#a7a49a}
dialog .trust{justify-content:center;margin-top:12px}
dialog .trust span:nth-child(3){display:none}
dialog .thx{padding:8px 0 0}
dialog .thx h3{line-height:1.1}
dialog .thx p b{color:var(--ink);font-weight:700;overflow-wrap:anywhere}
dialog .thx .draftnote{margin:24px auto 0}
dialog .nx{gap:8px;margin:16px 0}
dialog .nx div{gap:12px;padding:10px 14px;border-radius:12px;font-size:15px;line-height:1.35}
dialog .nx .n{width:28px;height:28px;font-size:13px}
dialog .thx .okc{margin-bottom:12px}
dialog .thx p{margin:0 auto 12px}
.dupe{display:block}

@media (max-width:760px){
 dialog{inset:auto 0 0 0;width:100%;max-width:none;max-height:92dvh;border-radius:24px 24px 0 0}
 dialog[open]{animation:dlgSheet .35s var(--ease) backwards}
 dialog.is-closing{animation:dlgOut .2s cubic-bezier(.4,0,1,1) forwards}
 .dbody{padding:8px 20px calc(20px + env(safe-area-inset-bottom))}
}
@media (prefers-reduced-motion:reduce){dialog[open],dialog.is-closing,dialog::backdrop{animation:none}}

/* Footer: helle Fläche mit feinem Punktraster, große Aussage, Links mit Pfeil, schwebende Kacheln (Referenz: referenzen/10-footer, nur im Aufbau übernommen) */
.footer{padding:0 24px 24px}
.fpanel{position:relative;overflow:hidden;max-width:1240px;margin:0 auto;padding:64px 64px 16px;border-radius:44px;background:radial-gradient(rgba(16,16,18,.075) 1.1px,transparent 1.5px) 0 0/10px 10px,var(--card);box-shadow:inset 0 0 0 1px rgba(255,255,255,.7),0 1px 2px rgba(40,30,10,.04)}
.ftop{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:48px 96px;align-items:start}
.fhead{margin:32px 0 0;font-size:clamp(38px,5.2vw,72px);line-height:1;font-weight:800;letter-spacing:-.05em;color:var(--ink)}
.fhead span{display:block;font-weight:500;color:var(--muted)}
.flinks{display:grid;grid-template-columns:repeat(2,max-content);gap:0 56px;padding-top:8px}
.flinks ul{margin:0;padding:0;list-style:none}
.flinks a,.flink{display:inline-flex;align-items:center;gap:12px;min-height:44px;padding:0;border:0;border-radius:8px;background:none;color:var(--ink);font:500 17px var(--font);text-decoration:none;cursor:pointer;transition:transform .2s var(--ease)}
.flinks .ico{width:16px;height:16px;color:var(--muted);stroke-width:1.8;transition:transform .2s var(--ease),color .2s var(--ease)}
.flinks a:hover .ico,.flink:hover .ico{color:var(--ink);transform:translateX(4px)}
.flinks a:active,.flink:active{transform:scale(.98)}
.fbot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:0 24px;margin-top:72px;padding:12px 0;border-top:1px solid rgba(16,16,18,.1);font-size:14px;color:var(--muted)}
.flegal{display:flex;flex-wrap:wrap;gap:0 24px}
.fbot a{display:inline-flex;align-items:center;min-height:44px;color:var(--muted);text-decoration:none}.fbot a:hover{color:var(--ink);text-decoration:underline}
@media (max-width:1000px){
 .footer{padding:0 16px 88px}
 .fpanel{padding:48px 32px 12px;border-radius:36px}
 .fbot{margin-top:56px}
 .ftop{grid-template-columns:1fr;gap:24px}
 .fhead{margin-top:24px}
}
@media (max-width:600px){
 .fpanel{padding:40px 24px 8px;border-radius:32px}
 .fbot{margin-top:40px}
 .flinks{gap:0 32px}
 .flinks a,.flink{font-size:16px}
}
@media (max-width:359px){.flinks{grid-template-columns:1fr}}

/* Feste Anfrage-Leiste (Handy) */
.mbar{position:fixed;left:16px;right:16px;bottom:16px;z-index:40;display:none;transform:translateY(24px);opacity:0;transition:transform .35s var(--ease),opacity .35s var(--ease)}
.mbar.show{transform:none;opacity:1}
.mbar .btn{width:100%}

/* Entwurfs-Werkzeug */
.draftbar{position:fixed;left:16px;bottom:16px;z-index:60;display:flex;align-items:center;gap:4px;padding:4px;border-radius:var(--r-pill);background:rgba(11,31,58,.92);color:#fff;font-size:12px;box-shadow:0 10px 30px rgba(0,0,0,.3)}
.draftbar span{padding:0 12px;font-weight:700;color:var(--gold)}
.draftbar button,.draftbar a{display:inline-flex;align-items:center;min-height:36px;padding:0 14px;border:0;border-radius:var(--r-pill);background:transparent;color:#fff;font:600 12px var(--font);text-decoration:none;cursor:pointer}
.draftbar button:hover,.draftbar a:hover{background:rgba(255,255,255,.14)}
.draftbar button[aria-pressed="true"]{background:#fff;color:#0b1f3a}
.draftbar[hidden]{display:none}

/* Bewegung */
.reveal{opacity:0;transform:translateY(24px)}
/* Hero: Überschrift Wort für Wort, danach Text, Button und Geräte */
h1 .w{display:inline-block;opacity:0;transform:translateY(.38em)}
.is-new h1 .w{opacity:1;transform:none;transition:opacity .5s var(--ease) calc(.95s + var(--w)*55ms),transform .6s var(--ease) calc(.95s + var(--w)*55ms)}
.is-new .reveal{opacity:1;transform:none;transition:opacity .6s var(--ease) calc(1.6s + (var(--i) - 2)*90ms),transform .7s var(--ease) calc(1.6s + (var(--i) - 2)*90ms)}
/* Einblenden beim Scrollen: Überschrift zuerst, Karten nacheinander (80 ms Abstand), leicht größer werdend */
.rv{opacity:0;transform:translateY(20px);transition:opacity .45s var(--ease) var(--d,0s),transform .5s var(--ease) var(--d,0s)}
.rv.in{opacity:1;transform:none}
.card.rv,.xcard.rv,.main-pk.rv,.srow.rv{transform:translateY(32px) scale(.97);--d:calc(.15s + var(--k,0)*80ms);transition-duration:.5s,.55s}
.card.rv.in,.xcard.rv.in,.main-pk.rv.in,.srow.rv.in{transform:none}
.cards2>.rv:nth-child(even),.xgrid>.rv:nth-child(even){--k:1}
.cards3>.rv:nth-child(2){--k:1}.cards3>.rv:nth-child(3){--k:2}
.slim>.rv:nth-child(1){--k:1}.slim>.rv:nth-child(2){--k:2}.slim>.rv:nth-child(3){--k:3}.slim>.rv:nth-child(4){--k:4}
.instant *,.instant *::before,.instant *::after{transition:none!important;animation:none!important}
.instant .rv,.instant .reveal,.instant h1 .w{opacity:1!important;transform:none!important}

/* ===== Alte Seite (nur Effekt) ===== */
#old{position:fixed;inset:0;z-index:90;overflow:auto;font:13px/1.5 Verdana,Geneva,sans-serif;color:#333}
#old::before{content:"";position:fixed;inset:0;z-index:-1;background:#dfe7ee linear-gradient(#b9cde0,#dfe7ee 280px)}
#old *{box-sizing:border-box}
#old #wrap{width:min(960px,100%);margin:0 auto;padding:12px 0}
#old .o-top{height:36px;font-size:11px;color:#456;text-align:right;line-height:36px}
#old .o-header{background:linear-gradient(#4a90d9,#1f5fa6);border:1px solid #17497f;border-radius:10px 10px 0 0;padding:16px 24px;color:#fff;box-shadow:0 2px 6px rgba(0,0,0,.4)}
#old .o-header .oh1{margin:0;font:bold 30px Georgia,serif;max-width:none;letter-spacing:0;color:#fff;text-shadow:2px 2px 3px #0a2a52;text-align:left}
#old .o-header small{display:block;font:italic 13px Georgia,serif;color:#cfe3f8}
#old .o-nav{display:flex;flex-wrap:wrap;background:linear-gradient(#f9f9f9,#d4d4d4);border:1px solid #aaa;border-top:0;box-shadow:inset 0 1px 0 #fff}
#old .o-nav a{padding:10px 20px;color:#1f5fa6;font-weight:bold;border-right:1px solid #bbb;text-shadow:0 1px 0 #fff;font-size:13px}
#old .o-nav a.on{background:linear-gradient(#fff,#e8eef5);color:#c30}
#old .o-main{position:relative;z-index:0;display:flex;gap:16px;padding:16px}
#old .o-main::before{content:"";position:absolute;inset:0;z-index:-1;background:#fff;border:1px solid #aaa;border-top:0;box-shadow:0 4px 10px rgba(0,0,0,.25)}
#old .o-side{width:200px;flex:none}
#old .box{border:1px solid #9bb;border-radius:6px;margin-bottom:12px;background:linear-gradient(#fff,#eef3f7);box-shadow:1px 1px 3px rgba(0,0,0,.2)}
#old .box h3{margin:0;padding:6px 10px;font-size:12px;color:#fff;background:linear-gradient(#6aa7e0,#2a6cb5);border-radius:5px 5px 0 0;text-shadow:1px 1px 0 #135}
#old .box ul{margin:0;padding:8px 10px 8px 24px;font-size:12px}
#old .o-content{flex:1;min-width:0;color:#333}
#old .banner{height:230px;border:3px solid #fff;border-radius:6px;box-shadow:0 0 6px #666;background:radial-gradient(circle at 25% 40%,#ffe9a8,#f0a030 45%,#a85a10);position:relative;overflow:hidden}
#old .banner b{position:absolute;left:24px;top:30px;font:bold 34px Georgia,serif;color:#fff;text-shadow:2px 2px 4px #5a2e00;width:420px;max-width:70%;line-height:1.1}
#old .banner span{position:absolute;left:24px;bottom:24px;color:#fff;font-size:14px;text-shadow:1px 1px 2px #000;width:380px;max-width:70%}
#old .star{position:absolute;right:30px;top:24px;width:110px;height:110px;background:#e22;color:#fff;font:bold 20px/110px Arial;text-align:center;transform:rotate(12deg);clip-path:polygon(50% 0,61% 20%,82% 10%,80% 33%,100% 38%,86% 55%,98% 75%,76% 76%,72% 98%,53% 85%,35% 100%,30% 80%,8% 82%,18% 62%,0 46%,20% 36%,15% 14%,38% 20%)}
#old .dots{position:absolute;bottom:8px;right:12px;display:flex;gap:6px}#old .dots i{width:10px;height:10px;border-radius:50%;background:#fff;opacity:.6}#old .dots i:first-child{opacity:1}
#old .obtn{display:inline-block;margin:12px 8px 0 0;padding:8px 22px;border-radius:20px;border:1px solid #a30;color:#fff;font:bold 13px Verdana;background:linear-gradient(#ff8a4d,#d4400a);box-shadow:inset 0 1px 0 #ffc09a,0 2px 3px rgba(0,0,0,.4);text-shadow:0 -1px 0 #800}
#old h2{font:bold 20px Georgia,serif;color:#1f5fa6;border-bottom:2px solid #f90;padding-bottom:4px;margin:16px 0 8px;letter-spacing:0;text-align:left}
#old p{color:#333}
#old .cols{display:flex;gap:12px}#old .cols div{flex:1}
#old .o-footer{margin-top:8px;text-align:center;font-size:11px;color:#456}
/* Aufräumen: Die Teile der alten Seite fliegen einzeln nach außen weg, danach blendet der Hintergrund aus */
#old .o-top{--i:0;--dx:0vw;--dy:-45vh;--r:0deg}
#old .o-header{--i:1;--dx:-14vw;--dy:-55vh;--r:-6deg}
#old .o-nav{--i:2;--dx:18vw;--dy:-50vh;--r:5deg}
#old .box:nth-child(1){--i:3;--dx:-65vw;--dy:-10vh;--r:-16deg}
#old .box:nth-child(2){--i:4;--dx:-65vw;--dy:12vh;--r:14deg}
#old .box:nth-child(3){--i:5;--dx:-60vw;--dy:40vh;--r:-12deg}
#old .banner{--i:6;--dx:55vw;--dy:-30vh;--r:10deg}
#old .obtn{--i:7;--dx:50vw;--dy:24vh;--r:12deg}
#old h2{--i:8;--dx:30vw;--dy:55vh;--r:-8deg}
#old p{--i:8;--dx:36vw;--dy:48vh;--r:6deg}
#old .o-footer{--i:9;--dx:0vw;--dy:60vh;--r:0deg}
#old .o-main::before{--i:9;--dx:0vw;--dy:60vh;--r:0deg}
.is-new #old{pointer-events:none;overflow:hidden}
.is-new #old .op,.is-new #old .o-main::before{opacity:0;transform:translate(var(--dx),var(--dy)) rotate(var(--r));will-change:transform,opacity;transition:transform .8s cubic-bezier(.55,0,.8,.3) calc(var(--i)*45ms),opacity .45s linear calc(var(--i)*45ms + .35s)}
.is-new #old::before{opacity:0;transition:opacity .5s linear .55s}
.hint{position:fixed;left:50%;bottom:32px;z-index:95;transform:translateX(-50%);display:inline-flex;align-items:center;min-height:44px;padding:0 24px;border-radius:var(--r-pill);background:rgba(11,31,58,.92);color:#fff;font:600 14px var(--font);pointer-events:none;animation:pulse 1.8s var(--ease) infinite}
.is-new .hint{opacity:0;transition:opacity .3s var(--ease)}
@keyframes pulse{0%,100%{transform:translateX(-50%) scale(1)}50%{transform:translateX(-50%) scale(1.04)}}

/* Karten „So nicht / So schon“: Vorher -> Nachher, ca. 1,4 s */
.xcard .xbad{opacity:0;transform:scale(.97)}
.xcard .xgood{opacity:0;transform:translateY(32px)}
.xcard .xbad::after,.xcard .xgood::after{transform:scale(0)}
.xcard .xcap{opacity:0;transform:translateY(8px)}
.xcard.in .xbad{opacity:1;transform:none;transition:opacity .4s var(--ease) .25s,transform .4s var(--ease) .25s}
.xcard.in .xbad>*{opacity:.7;transform:translateX(-.8em) scale(.96);transition:opacity .45s var(--ease) .65s,transform .45s var(--ease) .65s}
.xcard.in .xgood{opacity:1;transform:none;transition:opacity .4s var(--ease) .65s,transform .5s var(--ease) .65s}
.xcard.in .xbad::after{transform:scale(1);transition:transform .3s var(--ease) .5s}
.xcard.in .xgood::after{transform:scale(1);transition:transform .3s var(--ease) 1.05s}
.xcard.in .xcap{opacity:1;transform:none;transition:opacity .35s var(--ease) 1.15s,transform .35s var(--ease) 1.15s}

/* ===== Hero-Geräte: Laptop kommt von rechts, klappt auf, Handy steigt auf ===== */
/* Geschlossen ist der Deckel eine dünne silberne Fläche (halb so dick wie der Sockel, wie bei einem echten MacBook).
   Beim Aufklappen ist er schwarz (Bildschirm aus) und wird nie breiter oder höher als der fertige Laptop:
   keine Perspektive, nur Drehung um die Scharnierkante. Der Bildschirm geht schon während des Aufklappens an. */
.lid::before{content:"";position:absolute;inset:0;z-index:9;border-radius:inherit;background:#050506;pointer-events:none;opacity:0}
.mbp::before{content:"";position:absolute;left:0;right:0;bottom:1.9cqw;height:1cqw;border-radius:.7cqw .7cqw .15cqw .15cqw;background:linear-gradient(#eceef1,#b2b8c1);box-shadow:inset 0 0 0 .12cqw rgba(255,255,255,.55);pointer-events:none;opacity:0}
.hero .mbp{transform:translateX(125%)}
.hero .lid{transform:rotateX(-90deg);transform-origin:50% 100%;box-shadow:inset 0 0 0 .08cqw #2a2c31}
/* Der weiche Schatten dreht sich nicht mit dem Deckel mit (sonst zieht er beim Aufklappen einen breiten Schleier), er blendet am Ende ein */
.hero .mbp::after{content:"";position:absolute;left:0;right:0;top:0;bottom:1.9cqw;z-index:-1;border-radius:2.4cqw 2.4cqw .5cqw .5cqw;box-shadow:0 4.8cqw 9.6cqw rgba(60,40,10,.24),0 1.3cqw 2.9cqw rgba(60,40,10,.12);pointer-events:none;opacity:0}
.hero .lid::before,.hero .mbp::before{opacity:1}
.hero .iph{opacity:0;transform:translateY(18cqw)}
.is-new .hero .mbp{transform:none;transition:transform 1.1s cubic-bezier(.22,.8,.2,1) 1.1s}
.is-new .hero .lid{transform:rotateX(0deg);transition:transform 1.4s cubic-bezier(.45,.05,.3,1) 1.6s}
.is-new .hero .mbp::before{opacity:0;transition:opacity .15s linear 1.75s}
.is-new .hero .lid::before{opacity:0;transition:opacity .6s linear 2.1s}
.is-new .hero .mbp::after{opacity:1;transition:opacity .6s linear 2.4s}
.is-new .hero .iph{opacity:1;transform:none;transition:opacity .6s var(--ease) 2.7s,transform .9s var(--ease) 2.7s}

/* ===== Responsiv ===== */
@media (max-width:1000px){
 .links{display:none}.bar{max-width:420px}
 .sec{padding:80px 20px}.big{padding:48px 28px}
 .cards2,.cards3,.pak,.faq,.anf{grid-template-columns:1fr;gap:32px}
 .pak,.anf{grid-template-columns:minmax(0,1fr)}
 .xgrid{grid-template-columns:1fr;gap:32px}
 .xcard{padding:40px 0 0}
 .xcard.wide .xst{font-size:clamp(8px,2.9cqw,16px)}
 .card{min-height:520px;padding:40px 28px 0}
 .hero-in{padding-top:144px}
 .stage{margin-top:40px;padding-bottom:80px}
 .devs{width:88vw}
 .formcard{padding:24px}
 .main-pk{padding:40px 28px 32px}
 .mbar:not([hidden]){display:block}
 .draftbar{bottom:88px}
 #old .o-side{display:none}
}
@media (max-width:560px){.srow{grid-template-columns:1fr}.srow .sp{text-align:left}.rbadge{position:static;align-self:flex-start;margin:0 0 16px}}
/* Handy: Anfrage-Bereich breiter, damit die weiße Karte fast die ganze Breite nutzt (vorher nur 294 von 390 Pixeln) */
@media (max-width:600px){
 #anfrage.sec{padding-left:12px;padding-right:12px}
 #anfrage .big{padding:32px 10px}
 #anfrage .anf-l{padding:0 14px}
 #anfrage .formcard{padding:24px 20px}
}
/* Handy: Banner der alten Seite im Intro. Überschrift und Text lagen übereinander und der Stern deckte das Wort „Willkommen“ ab. */
@media (max-width:600px){
 #old .banner{height:auto;min-height:230px;padding:20px 20px 36px}
 #old .banner b{position:static;display:block;width:auto;max-width:calc(100% - 92px);font-size:26px}
 #old .banner span{position:static;display:block;width:auto;max-width:calc(100% - 20px);margin-top:12px}
 #old .star{right:10px;top:14px;width:82px;height:82px;font-size:15px;line-height:82px}
 #old .o-top{height:auto;padding:10px 12px;line-height:1.5}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}.rv,.reveal,h1 .w,.xcard .xbad,.xcard .xgood,.xcard .xcap{opacity:1!important;transform:none!important}.xcard .xbad>*{opacity:.7;transform:translateX(-.8em) scale(.96)}.xcard .xbad::after,.xcard .xgood::after{transform:none!important}}

/* Hinweis unter den Preisen */
.p9-vat{margin:24px auto 0;max-width:62ch;text-align:center;font-size:14px;line-height:1.5;color:var(--muted)}