/* © 2026 Patrick Dietz · Dietz Engineering. Alle Rechte vorbehalten.
   Ausgelagert aus index.html, damit die Content-Security-Policy ohne 'unsafe-inline' auskommt. */
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:100 700;font-display:swap;src:url(/fonts/ibm-plex-sans-latinext.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-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:100 700;font-display:swap;src:url(/fonts/ibm-plex-sans-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{
  --ink:#f4f1ec;--ink-dim:rgba(244,241,236,.62);--ink-faint:rgba(244,241,236,.24);
  --line:rgba(244,241,236,.14);--bg:#0a0a0b;--bg-soft:#111214;--bg-soft2:#16181b;
  --gold:#5E86C7;--gold-soft:rgba(94,134,199,.14);--on-accent:#fff;
  --accent-fill:#4670B2;--accent-fill-hover:#3F66A6;--err:#ec8a7a;
  --sans:'IBM Plex Sans',system-ui,sans-serif;
  --maxw:1200px;--pad:clamp(16px,5vw,60px);--ease:cubic-bezier(.22,1,.36,1);
  --logo:url("/brand/logo-dark.png");
}
html.theme-light{
  --ink:#121826;--ink-dim:rgba(18,24,38,.66);--ink-faint:rgba(18,24,38,.30);
  --line:rgba(18,24,38,.13);--bg:#f8f9fb;--bg-soft:#eef1f5;--bg-soft2:#e3e8ef;
  --gold:#1E2C47;--gold-soft:rgba(30,44,71,.10);
  --accent-fill:#1E2C47;--accent-fill-hover:#2B3F66;--err:#b3412f;
  --logo:url("/brand/logo-light.png");
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{overflow-x:clip;scroll-behavior:smooth;scroll-padding-top:calc(var(--navh,62px) + 16px);scroll-padding-bottom:calc(var(--dz-sp-sticky,0px) + var(--dz-sp-fb,0px) + var(--dz-sp-consent,0px))}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);font-weight:400;font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:clip;transition:background-color .6s var(--ease),color .6s var(--ease)}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
::selection{background:var(--accent-fill);color:var(--on-accent)}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:4px}
.skip{position:absolute;left:var(--pad);top:10px;z-index:1000;padding:10px 18px;border-radius:100px;border:1px solid var(--gold);background:var(--bg-soft);color:var(--ink);font-size:14px;transform:translateY(-200%)}
.skip:focus{transform:none}
.js .reveal{opacity:0;transform:translateY(22px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.js .reveal.in{opacity:1;transform:none}
[data-delay="1"]{transition-delay:.08s}[data-delay="2"]{transition-delay:.16s}[data-delay="3"]{transition-delay:.24s}
@media (prefers-reduced-motion:reduce){
  .sv-overlay,.sv-overlay.open,.sv-overlay .sv{transition:none!important}
  .js .reveal{opacity:1!important;transform:none!important;transition:none!important}
  *{animation:none!important;scroll-behavior:auto!important}
  *,*::before,*::after{transition-duration:.01ms!important;transition-delay:0s!important}
  .cta:hover,.work:hover,.pkg:hover{transform:none}
  .split-body:hover .half:hover{flex-grow:1}.split-body:hover .half:not(:hover) .motif{opacity:1}
  .half:hover .motif{transform:translate(-50%,var(--my,-50%)) scale(var(--ms,1))}
}
.nav{position:sticky;top:0;z-index:60;display:flex;justify-content:space-between;align-items:center;gap:14px;padding:14px var(--pad);background:color-mix(in srgb,var(--bg) 84%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.brand-logo{display:inline-block;background:var(--logo) left center/contain no-repeat;height:15px;width:150px;vertical-align:middle}
.nav-right{display:flex;gap:18px;align-items:center;font-size:13.5px;letter-spacing:.01em}
.nav-link{color:var(--ink-dim);transition:color .3s var(--ease)}.nav-link:hover{color:var(--ink)}
.nav-ctrl{display:flex;gap:8px;align-items:center}
select,.tbtn{background:var(--bg-soft);color:var(--ink);border:1px solid var(--line);border-radius:100px;padding:7px 12px;font:inherit;font-size:11px;letter-spacing:.1em;cursor:pointer;transition:border-color .3s var(--ease)}
.tbtn{width:36px;height:34px;padding:0;display:grid;place-items:center}
.tbtn svg{width:16px;height:16px}
.tbtn:hover,select:hover{border-color:var(--gold)}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad)}
.eyebrow{display:inline-block;font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--gold)}
h2.eyebrow{margin:0;font-weight:400;line-height:inherit}
.tag{font-size:13px;letter-spacing:.02em;color:var(--gold)}
.cta{display:inline-flex;align-items:center;gap:10px;padding:14px 26px;border-radius:100px;border:1px solid var(--ink-faint);font:inherit;font-size:15px;font-weight:500;letter-spacing:.005em;color:inherit;background:none;transition:background-color .3s var(--ease),border-color .3s var(--ease),color .3s var(--ease),transform .3s var(--ease);cursor:pointer}
.cta svg{width:12px;height:12px}
.cta:hover{background:var(--accent-fill);color:var(--on-accent);border-color:var(--accent-fill);transform:translateY(-2px)}
.cta.solid{background:var(--accent-fill);color:var(--on-accent);border-color:var(--accent-fill);font-weight:500}
.cta.solid:hover{background:var(--accent-fill-hover);border-color:var(--accent-fill-hover)}
.cta-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:34px}
.section{padding:clamp(64px,11vh,112px) 0;border-top:1px solid var(--line)}
.section.alt{background:var(--bg-soft)}
h2.sec{font-family:var(--sans);font-weight:600;font-size:clamp(26px,3.4vw,40px);line-height:1.15;letter-spacing:-.022em;margin:14px 0 0;max-width:24ch}
h2.sec em{font-style:normal;color:var(--gold)}
.sec-sub{max-width:58ch;margin:16px 0 0;font-size:16px;color:var(--ink-dim)}
html.intro:not(.intro-run) .split-head>*{opacity:0}
html.intro:not(.intro-done) .split-body .half,html.intro:not(.intro-done) .split-body .or,html.intro:not(.intro-done) .proof{opacity:0}
html.intro:not(.intro-on) .split-body{border-color:transparent;box-shadow:none;pointer-events:none}
html.intro .split-body{transition:border-color .9s var(--ease),box-shadow 1.2s var(--ease)}
.split-wrap{position:relative}
.ic{position:absolute;left:0;top:0;z-index:8;pointer-events:none;overflow:visible}
.ic path{fill:none;stroke-linecap:round;stroke-linejoin:round}
.ic .halo{stroke:#5E86C7;stroke-width:10;opacity:.22}
.ic .core{stroke:#a9c3ea;stroke-width:2}
html.theme-light .ic .core{stroke:#3f67a8}
html.theme-light .ic .halo{opacity:.16}
.ic .hd{fill:#fff}
.ic .hg{fill:#5E86C7;opacity:.35}
html.theme-light .ic .hd{fill:#1E2C47}
.ic-flash{position:absolute;z-index:7;width:760px;height:760px;margin:-380px 0 0 -380px;border-radius:50%;pointer-events:none;opacity:0;background:radial-gradient(circle,rgba(94,134,199,.55) 0,rgba(94,134,199,.16) 32%,transparent 64%)}
.iw{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.12em;margin-bottom:-.12em}
.iw>span{display:inline-block}
.split-head{text-align:center;padding:clamp(40px,7vh,72px) var(--pad) clamp(26px,4vh,40px)}
.split-head h1{font-weight:600;font-size:clamp(32px,4.4vw,56px);line-height:1.08;letter-spacing:-.03em;margin:14px auto 0;max-width:20ch}
.split-head h1 em{font-style:normal;color:var(--gold)}
.split-head p{margin:14px auto 0;max-width:46ch;font-size:clamp(15px,1.3vw,17px);color:var(--ink-dim)}
.split-wrap{padding:0 var(--pad) clamp(40px,6vh,64px)}
.split-ki{max-width:1400px;margin:10px auto 0;text-align:right;font-size:11.5px;color:var(--ink-dim)}
.split-body{position:relative;display:flex;max-width:1400px;margin:0 auto;height:clamp(520px,70vh,660px);border-radius:20px;overflow:hidden;box-shadow:0 50px 100px -60px rgba(0,0,0,.9);border:1px solid var(--line)}
html.theme-light .split-body{box-shadow:0 50px 100px -64px rgba(30,40,70,.5)}
/* Überschrift, Karten und der Belege-Streifen passen zusammen ins Fenster,
   damit sichtbar ist, dass die Seite weitergeht */
@media (min-width:761px){
  .split{display:flex;flex-direction:column;min-height:calc(100vh - var(--navh,62px) - 58px);min-height:calc(100svh - var(--navh,62px) - 58px)}
  .split-head{padding:clamp(22px,4.5vh,64px) var(--pad) clamp(16px,2.8vh,34px)}
  .split-head p{margin-top:clamp(8px,1.4vh,14px)}
  .split-head h1{font-size:clamp(30px,min(4.4vw,6.2vh),56px);margin-top:clamp(8px,1.4vh,14px)}
  .split-wrap{flex:1 1 auto;display:flex;flex-direction:column;padding-bottom:clamp(18px,3vh,40px)}
  .split-body{flex:1 1 auto;width:100%;height:auto;min-height:430px;max-height:680px}
}
/* Niedrige Fenster (z. B. Laptop mit Lesezeichenleiste): Überschrift einzeilig, Karten dürfen kleiner werden */
@media (min-width:761px) and (max-height:820px){
  .split-head h1{max-width:none}
  .split-body{min-height:340px}
}
/* Oben hält die Karte Platz für den Reiter frei (rund 33 px Reiter plus 14 px Luft), damit lange Texte bei niedrigen
   Fenstern nicht darunter rutschen. Bei kurzen Texten bleibt es beim normalen Rand, die Texte stehen unten. */
.half{--rand:clamp(24px,3.4vw,48px);--reiter-oben:clamp(16px,2vw,26px);--reiter-links:var(--rand);position:relative;flex:1 1 0;min-width:0;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;padding:var(--rand);padding-top:max(var(--rand),calc(var(--reiter-oben) + 47px));transition:transform .6s var(--ease),opacity .5s var(--ease)}
.half.eng{background:radial-gradient(120% 80% at 80% 0%,rgba(94,134,199,.24),transparent 60%),#0b0c0f;color:#f4f1ec}
.half.web{background:#120d0a;color:#f4f1ec}
.half.vo{background:#0a0c10;color:#f4f1ec}
.half::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;transition:opacity .5s var(--ease)}
.half.eng::before{background:linear-gradient(0deg,rgba(11,12,15,.97) 0%,rgba(11,12,15,.9) 45%,rgba(11,12,15,.66) 64%,transparent 86%)}
.half.web::before{background:linear-gradient(0deg,rgba(14,10,8,.97) 0%,rgba(14,10,8,.9) 45%,rgba(14,10,8,.66) 64%,transparent 86%)}
.half.vo::before{background:linear-gradient(0deg,rgba(10,12,16,.97) 0%,rgba(10,12,16,.9) 45%,rgba(10,12,16,.66) 64%,transparent 86%)}
/* Karten bleiben beim Darüberfahren gleich breit: kein Umbruch, kein Springen der Texte und der Leiste darunter */
.motif{position:absolute;left:50%;top:35%;width:min(78%,470px);transform:translate(-50%,-50%);transform-origin:50% 0;transition:transform .8s var(--ease),opacity .6s var(--ease),width .75s var(--ease)}
.half .motif{top:var(--mt,35%);width:min(calc(var(--hw,50vw) * .78),470px);transform:translate(-50%,var(--my,-50%)) scale(var(--ms,1));will-change:transform}
html:not(.fit-ready) .half .motif{transition:none}
.half:hover .motif{transform:translate(-50%,calc(var(--my,-50%) - 8px)) scale(calc(var(--ms,1) * 1.03))}
.split-body:hover .half:not(:hover) .motif{opacity:.4}
/* Der Textblock bildet keinen eigenen Rahmen, damit sich der Reiter an der Karte ausrichtet; die Texte liegen einzeln über dem Verlauf */
.half-copy{max-width:540px;transition:opacity .4s var(--ease),transform .5s var(--ease)}
.half-copy>*{position:relative;z-index:2}
.vt-sheet .tag{color:#8fb0e0}
.vt-sheet.web .tag{color:#1E2C47}
/* Bereich auf der Karte (Engineering, Vor Ort, Digital): als Reiter oben links, auf allen Karten auf derselben Höhe;
   gross, kräftig und auf dunkler Unterlage, über jedem Bild lesbar */
.half .tag{position:absolute;top:var(--reiter-oben);left:var(--reiter-links);z-index:3;margin:0;display:inline-block;padding:6px 15px;border-radius:100px;border:1px solid rgba(143,176,224,.5);background:rgba(6,8,11,.62);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);color:#d3e2fb;font-size:15px;font-weight:600;letter-spacing:.03em;line-height:1.25;text-transform:none}
.half.web .tag{color:#ffd6c0;border-color:rgba(227,162,127,.55)}
.half h2,.vt-sheet h2{margin:10px 0 0;font-size:clamp(24px,2.3vw,32px);font-weight:600;letter-spacing:-.025em;line-height:1.15}
.half p,.vt-sheet p{margin:10px 0 0;font-size:15px;line-height:1.55;opacity:.74;max-width:38ch}
.half .go,.vt-sheet .go{display:inline-flex;align-items:center;gap:12px;margin-top:20px;font-size:14px;font-weight:600;letter-spacing:.01em}
.half .go i,.vt-sheet .go i{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:#5E86C7;color:#fff;font-style:normal;transition:transform .4s var(--ease)}
.half:hover .go i{transform:translateX(6px)}
.half:focus-visible{outline:3px solid #5E86C7;outline-offset:-3px;border-radius:0}
.or{position:absolute;left:50%;top:50%;z-index:6;transform:translate(-50%,-50%);width:56px;height:56px;border-radius:50%;display:grid;place-items:center;background:#4670B2;color:#fff;font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;box-shadow:0 0 0 7px rgba(94,134,199,.2);pointer-events:none;transition:left .7s var(--ease),opacity .3s var(--ease)}
.split-body:has(.eng:hover) .or{left:60.78%}
.split-body:has(.web:hover) .or{left:39.22%}
.half.eng.leave{transform:translateX(-30%);opacity:0}
.half.web.leave{transform:translateX(30%);opacity:0}
.half.vo.leave{transform:scale(.94);opacity:0}
.split-body.going .or{opacity:0}
.sch .dr{fill:none;stroke:#5E86C7;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:0;animation:drawIn 1.3s cubic-bezier(.16,1,.3,1) both;animation-delay:var(--d,0s)}
.sch .rail{stroke:#8fb0e0;stroke-width:2.2}
.sch .jn{fill:#8fb0e0;animation:popIn .4s var(--ease) both;animation-delay:var(--d,1.4s)}
.sch text{fill:#8fb0e0;font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:.06em;animation:popIn .5s var(--ease) both;animation-delay:var(--d,1.6s)}
.sch .pls{fill:#dbe7ff;stroke:rgba(143,176,224,.32);stroke-width:7;paint-order:stroke}
.sch .pol{fill:#8fb0e0;font-size:16px;font-weight:600}
.sch .tm{fill:none;stroke:#8fb0e0;stroke-width:1.6;animation:popIn .4s var(--ease) both;animation-delay:var(--d,1.5s)}
.sch .tn{font-size:10px;font-weight:500;text-anchor:end;opacity:.85}
@keyframes drawIn{from{stroke-dashoffset:1}}
@keyframes popIn{from{opacity:0;transform:scale(.6)}}
.sch text,.sch .jn,.sch .tm{transform-box:fill-box;transform-origin:center}
html.theme-light .hero-sch .dr,.sch.sch-l .dr{stroke:#3f67a8}
html.theme-light .hero-sch .rail,.sch.sch-l .rail{stroke:#1E2C47}
html.theme-light .hero-sch .tm,.sch.sch-l .tm{stroke:#1E2C47}
html.theme-light .hero-sch .jn,.sch.sch-l .jn,html.theme-light .hero-sch text,.sch.sch-l text{fill:#1E2C47}
html.theme-light .hero-sch .pls,.sch.sch-l .pls{fill:#5E86C7;stroke:rgba(94,134,199,.3)}
.half .lp{width:min(calc(var(--hw,50vw) * .88),520px)}
.lp{border-radius:12px;overflow:hidden;background:#0a0a0b;color:#f4f1ec;font-family:var(--sans);box-shadow:0 34px 70px -30px rgba(10,14,30,.55);border:1px solid rgba(18,24,38,.18);text-align:left}
.lp-bar{display:flex;align-items:center;gap:6px;padding:8px 11px;background:#e9e6df;border-bottom:1px solid rgba(18,24,38,.1)}
.lp-bar i{width:8px;height:8px;border-radius:50%;background:#cfc8bf}
.lp-bar span{flex:1;margin-left:8px;padding:2px 10px;border-radius:100px;background:#fff;font-size:9px;color:#8a8178;white-space:nowrap;overflow:hidden}
.lp-page{position:relative;padding:12px 16px 14px;background:radial-gradient(90% 90% at 90% 0%,rgba(94,134,199,.28),transparent 60%),#0a0a0b}
.lp-nav{display:flex;align-items:center;gap:9px;padding-bottom:9px;border-bottom:1px solid rgba(244,241,236,.12)}
.lp-nav b{font-size:9px;font-weight:700;letter-spacing:.04em}
.lp-nav b span{font-weight:400;opacity:.6;margin:0 2px}
.lp-nav em{width:24px;height:3px;border-radius:2px;background:rgba(244,241,236,.35)}
.lp-nav em:first-of-type{margin-left:auto}
.lp-hero{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:6%;align-items:center;padding-top:14px}
.lp-txt small{display:block;font-size:7px;letter-spacing:.24em;text-transform:uppercase;color:#8fb0e0}
.lp-txt strong{display:block;margin-top:6px;font-size:clamp(14px,1.45vw,19px);font-weight:600;line-height:1.1;letter-spacing:-.02em}
.lp-txt strong em{font-style:normal;color:#8fb0e0}
.lp-txt i{display:block;height:4px;margin-top:9px;border-radius:2px;background:rgba(244,241,236,.35);width:88%}
.lp-txt i.s{margin-top:5px;width:66%}
.lp-btns{display:flex;gap:6px;margin-top:11px}
.lp-btns u{text-decoration:none;font-size:6.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;padding:5px 9px;border-radius:100px;background:#5E86C7;color:#fff;white-space:nowrap}
.lp-btns s{width:52px;border-radius:100px;border:1px solid rgba(244,241,236,.35)}
.lp-vis{position:relative;aspect-ratio:1/.84}
.lp-site{position:absolute;left:0;top:4%;width:86%;border-radius:6px;overflow:hidden;background:#f7f3ee;box-shadow:0 14px 28px -14px rgba(0,0,0,.8)}
.lp-site div{aspect-ratio:16/7;margin:5px;border-radius:4px;background:linear-gradient(115deg,rgba(34,28,23,.85),rgba(34,28,23,.3)),linear-gradient(160deg,#8d7560,#3a2d23)}
.lp-site p{display:flex;gap:4px;margin:0 5px 6px}
.lp-site p span{flex:1;height:18px;border-radius:3px;background:#fff}
.lp-site i{display:block;width:34px;height:7px;margin:0 0 5px 5px;border-radius:4px;background:#c0643a}
.lp-phone{position:absolute;right:0;bottom:2%;width:31%;aspect-ratio:9/18;border-radius:9px;border:2px solid #1d1b19;background:#f7f3ee;overflow:hidden}
.lp-phone div{height:44%;margin:10px 4px 0;border-radius:4px;background:linear-gradient(160deg,#8d7560,#3a2d23)}
.lp-phone i{position:absolute;left:4px;right:4px;bottom:4px;height:8px;border-radius:3px;background:#c0643a}
.lp-meta{display:flex;gap:18px;margin-top:12px;padding-top:9px;border-top:1px solid rgba(244,241,236,.12)}
.lp-meta b{font-size:11px;font-weight:600}
.lp-meta span{display:flex;flex-direction:column;gap:3px}
.lp-meta span i{width:34px;height:3px;border-radius:2px;background:rgba(244,241,236,.3)}
.rs{position:absolute;left:0;top:0;width:var(--rw,487px);aspect-ratio:1/.84;transform-origin:0 0;transform:scale(var(--rs,.4));
  --c-bg:#f7f3ee;--c-ink:#221c17;--c-dim:#6f655c;--c-acc:#c0643a;--c-soft:#ece4da;font-family:var(--sans);text-align:left}
.lp .rs .chk{opacity:0}
.rs .browser{position:absolute;left:0;top:4%;width:86%;border-radius:12px;overflow:hidden;border:1px solid var(--line);background:#fff;box-shadow:0 40px 90px -34px rgba(0,0,0,.75)}
html.theme-light .rs .browser{box-shadow:0 40px 80px -40px rgba(30,40,70,.4)}
.rs .btop{display:flex;align-items:center;gap:6px;padding:9px 12px;background:#ebe7e1;border-bottom:1px solid rgba(0,0,0,.06)}
.rs .dot{width:9px;height:9px;border-radius:50%;background:#cfc8bf}
.rs .baddr{margin-left:8px;flex:1;height:19px;border-radius:100px;background:#fff;display:flex;align-items:center;padding:0 10px;font-size:9px;color:#8a8178;white-space:nowrap;overflow:hidden}
.rs .site{background:var(--c-bg);color:var(--c-ink);font-family:var(--sans)}
.rs .snav{display:flex;justify-content:space-between;align-items:center;padding:12px 18px;font-size:8px;letter-spacing:.14em;text-transform:uppercase;color:var(--c-dim)}
.rs .snav b{font-family:var(--sans);font-weight:700;font-size:11px;letter-spacing:.02em;text-transform:none;color:var(--c-ink)}
.rs .snav span.links{display:flex;gap:12px}
.rs .shero{position:relative;margin:0 12px;border-radius:9px;overflow:hidden;aspect-ratio:16/7;background:linear-gradient(115deg,rgba(34,28,23,.82) 0 42%,rgba(34,28,23,.2) 75%),linear-gradient(160deg,#8d7560,#5a4636 55%,#3a2d23);display:flex;flex-direction:column;justify-content:center;padding:0 20px;color:#fff}
.rs .shero::after{content:"";position:absolute;right:-6%;top:-20%;width:55%;height:140%;background:repeating-linear-gradient(100deg,transparent 0 18px,rgba(255,255,255,.05) 18px 20px);pointer-events:none}
.rs .shero small{font-size:7px;letter-spacing:.26em;text-transform:uppercase;opacity:.8}
.rs .shero strong{font-family:var(--sans);font-weight:700;letter-spacing:-.02em;font-size:clamp(14px,1.8vw,21px);line-height:1.1;margin-top:6px;max-width:15ch}
.rs .sbtns{display:flex;gap:6px;margin-top:10px}
.rs .sbtns span{font-size:7px;letter-spacing:.1em;text-transform:uppercase;padding:5px 10px;border-radius:100px;border:1px solid rgba(255,255,255,.5)}
.rs .sbtns span:first-child{background:var(--c-acc);border-color:var(--c-acc)}
.rs .scards{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:12px}
.rs .scard{background:#fff;border-radius:7px;padding:9px;display:flex;flex-direction:column;gap:4px;box-shadow:0 1px 0 rgba(0,0,0,.04)}
.rs .scard i{width:14px;height:14px;border-radius:4px;background:var(--c-soft);display:block;position:relative}
.rs .scard i::after{content:"";position:absolute;inset:4px;border-radius:2px;background:var(--c-acc)}
.rs .scard b{font-size:8px;font-weight:600}
.rs .scard em{font-style:normal;font-size:6.5px;color:var(--c-dim);line-height:1.4}
.rs .phone{position:absolute;right:0;bottom:2%;width:31%;border-radius:22px;overflow:hidden;border:3px solid #1d1b19;background:var(--c-bg);box-shadow:0 30px 60px -22px rgba(0,0,0,.75)}
.rs .phone::before{content:"";position:absolute;top:6px;left:50%;transform:translateX(-50%);width:30%;height:4px;border-radius:100px;background:rgba(0,0,0,.25);z-index:2}
.rs .pv{aspect-ratio:9/18;display:flex;flex-direction:column;color:var(--c-ink)}
.rs .pv .pn{display:flex;justify-content:space-between;align-items:center;padding:16px 10px 8px;font-family:var(--sans);font-weight:700;font-size:8.5px}
.rs .pv .pn i{width:12px;height:8px;border-top:1.5px solid var(--c-ink);border-bottom:1.5px solid var(--c-ink);position:relative}
.rs .pv .pn i::after{content:"";position:absolute;left:0;right:0;top:50%;border-top:1.5px solid var(--c-ink);transform:translateY(-50%)}
.rs .pv .ph{margin:0 7px;border-radius:7px;aspect-ratio:1/.9;background:linear-gradient(115deg,rgba(34,28,23,.8),rgba(34,28,23,.25)),linear-gradient(160deg,#8d7560,#3a2d23);color:#fff;display:flex;align-items:flex-end;padding:8px;font-family:var(--sans);font-weight:700;letter-spacing:-.01em;font-size:10px;line-height:1.1}
.rs .pv .pl{margin:8px 7px 0;display:flex;flex-direction:column;gap:5px}
.rs .pv .pl span{height:5px;border-radius:3px;background:var(--c-soft)}
.rs .pv .pl span:nth-child(2){width:78%}.pv .pl span:nth-child(3){width:60%}
.rs .pv .pbar{margin-top:auto;display:flex;gap:5px;padding:7px;border-top:1px solid rgba(0,0,0,.06);background:#fff}
.rs .pv .pbar span{flex:1;text-align:center;font-size:6.5px;font-weight:600;letter-spacing:.05em;padding:6px 2px;border-radius:7px;background:var(--c-soft)}
.rs .pv .pbar span:first-child{background:var(--c-acc);color:#fff}
.rs .chk{position:absolute;display:inline-flex;align-items:center;gap:8px;padding:8px 14px 8px 10px;border-radius:100px;background:var(--bg-soft);border:1px solid var(--line);font-size:12px;color:var(--ink);white-space:nowrap;box-shadow:0 14px 30px -18px rgba(0,0,0,.6)}
.rs .chk::before{content:"✓";display:grid;place-items:center;width:18px;height:18px;border-radius:50%;background:var(--gold);color:var(--on-accent);font-size:10px;font-weight:600}
.rs .chk.c1{left:-4%;top:58%}
.rs .chk.c2{left:40%;top:-2%}
.rs .chk.c3{left:30%;bottom:-3%}
html.theme-light .lp{background:#f8f9fb;color:#121826}
html.theme-light .lp-page{background:radial-gradient(90% 90% at 90% 0%,rgba(30,44,71,.1),transparent 60%),#f8f9fb}
html.theme-light .lp-nav{border-bottom-color:rgba(18,24,38,.12)}
html.theme-light .lp-nav em,html.theme-light .lp-txt i,html.theme-light .lp-meta span i{background:rgba(18,24,38,.28)}
html.theme-light .lp-txt small,html.theme-light .lp-txt strong em{color:#1E2C47}
html.theme-light .lp-btns u{background:#1E2C47}
html.theme-light .lp-btns s{border-color:rgba(18,24,38,.3)}
html.theme-light .lp-meta{border-top-color:rgba(18,24,38,.12)}
.bi{animation:buildIn 1.15s cubic-bezier(.19,1,.22,1) both;animation-delay:var(--d,0s);backface-visibility:hidden}
.gw{animation:growW 1.1s cubic-bezier(.16,1,.3,1) both;animation-delay:var(--d,0s);transform-origin:left center}
@keyframes buildIn{from{opacity:0;translate:0 10px}}
@keyframes growW{from{scale:0 1}}
.lp{animation:frameIn 1.3s cubic-bezier(.19,1,.22,1) both;backface-visibility:hidden}
html.js:not(.anim-go) .split :is(.bi,.lp,.gw,.dr,.jn,text){animation-play-state:paused}
@keyframes frameIn{from{opacity:0;translate:0 22px;scale:.97}}
.proof{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--bg-soft)}
.proof-in{max-width:var(--maxw);margin:0 auto;padding:18px var(--pad);display:flex;flex-wrap:wrap;justify-content:center;gap:10px 30px;font-size:13.5px}
.proof-in span{display:inline-flex;align-items:center;gap:9px}
.proof-in span::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--gold)}
.pframe{position:relative;max-width:440px;justify-self:end;width:100%}
.pframe::before{content:"";position:absolute;inset:-14px;border:1px solid var(--line);border-radius:18px}
.portrait{position:relative;border-radius:16px;overflow:hidden;border:1px solid var(--line);aspect-ratio:4/5;background:var(--bg-soft2);box-shadow:0 40px 80px -46px rgba(0,0,0,.8)}
html.theme-light .portrait{box-shadow:0 40px 80px -50px rgba(30,40,70,.45)}
.portrait img{width:100%;height:100%;object-fit:cover;object-position:50% 22%}
.ai-tag{position:absolute;z-index:3;left:12px;top:12px;display:inline-flex;align-items:center;gap:6px;padding:6px 11px;border-radius:100px;border:1px solid rgba(255,255,255,.2);background:rgba(10,10,11,.68);font-size:12px;letter-spacing:.01em;color:#f4f1ec}
.ai-tag svg{width:11px;height:11px}
.pcap{position:absolute;left:-22px;bottom:26px;z-index:2;background:var(--bg-soft);border:1px solid var(--line);border-radius:12px;padding:12px 16px;box-shadow:0 20px 40px -24px rgba(0,0,0,.6)}
.pcap b{display:block;font-size:15px;font-weight:600;letter-spacing:-.01em}
.pcap span{font-size:13px;letter-spacing:.01em;color:var(--ink-dim)}
.vt-sheet{position:fixed;inset:0;z-index:500;pointer-events:none;overflow:hidden;will-change:clip-path;contain:strict}
.vt-sheet.eng{background-color:#0b0c0f;color:#f4f1ec}
.vt-sheet.web{background-color:#f4f6f9;color:#121826}
.vt-sheet.vt-dark{background-color:#06080b}
.vt-sheet *{animation:none!important;transition:none!important}
.vt-sheet .vt-motif{position:absolute;left:0;top:0;margin:0;transform-origin:0 0;will-change:transform}
.vt-sheet .vt-copy{position:absolute;left:0;top:0;margin:0;max-width:none;will-change:transform,opacity}
.vt-veil{position:absolute;inset:0;background:var(--bg);opacity:0}
.vt-glow{position:absolute;inset:0}
.vt-bgfade{position:fixed;left:0;right:0;bottom:0;z-index:500;pointer-events:none;opacity:0}
.vt-frame{position:fixed;left:0;top:0;border:0;margin:0;padding:0;opacity:0;visibility:hidden;pointer-events:none;z-index:-1;background:transparent}
.vt-frame.show{visibility:visible;z-index:501}
.vt-fly{position:fixed;inset:0;z-index:502;pointer-events:none;overflow:hidden}
.vt-fly *{animation:none!important;transition:none!important}
.vt-fly .vt-motif{position:absolute;left:0;top:0;margin:0;transform-origin:0 0;will-change:transform,opacity}
.vt-title{position:absolute;left:50%;bottom:10%;text-align:center;opacity:0;white-space:nowrap;will-change:transform,opacity}
.vt-title span{display:block;font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:#8fb0e0}
.vt-sheet.web .vt-title span{color:#1E2C47}
.vt-title b{display:block;margin-top:10px;font-size:clamp(26px,3.6vw,44px);font-weight:600;letter-spacing:-.03em}
.vt-title i{display:block;width:140px;height:2px;margin:20px auto 0;background:rgba(127,127,127,.3);overflow:hidden;position:relative}
.vt-title i::after{content:"";position:absolute;inset:0;background:#5E86C7;transform:translateX(-100%);animation:vtload .8s .25s cubic-bezier(.65,0,.35,1) forwards}
@keyframes vtload{to{transform:none}}
.about{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(40px,6vw,88px);align-items:start}
.about .pframe{position:sticky;top:100px;justify-self:start;margin-left:14px}
.facts{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:12px;overflow:hidden;margin-top:28px}
.facts div{background:var(--bg);padding:16px 18px}
.facts b{display:block;font-size:24px;font-weight:600;letter-spacing:-.02em}
.facts span{font-size:13px;letter-spacing:.01em;color:var(--ink-dim)}
.quals{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.quals span{border:1px solid var(--line);border-radius:100px;padding:6px 13px;font-size:12.5px;color:var(--ink-dim)}
.cv{margin-top:34px;border-top:1px solid var(--line)}
.cv details{border-bottom:1px solid var(--line)}
.cv summary{cursor:pointer;list-style:none;display:grid;grid-template-columns:112px minmax(0,1fr) 20px;gap:4px 16px;align-items:baseline;padding:16px 0}
.cv summary::-webkit-details-marker{display:none}
.cv summary::after{content:"+";color:var(--gold);font-size:18px;grid-column:3;grid-row:1}
.cv details[open] summary::after{content:"–"}
.cv .yr{font-size:12px;font-weight:600;letter-spacing:.06em;color:var(--gold);grid-row:1/3}
.cv .ti{font-size:16px;font-weight:600;letter-spacing:-.01em}
.cv .tg{grid-column:2;font-size:12.5px;color:var(--ink-dim)}
.cv details p{margin:0 0 16px 128px;font-size:14.5px;color:var(--ink-dim)}
.cv .nda{display:grid;grid-template-columns:112px 1fr;gap:16px;padding:14px 0;color:var(--ink-dim);font-size:13.5px}
.cv-links{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:18px;font-size:13.5px;letter-spacing:.01em}
.cv-links a{color:var(--gold);display:inline-block;padding:4px 0}
.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:56px}
.quote{margin:0;border:1px solid var(--line);border-radius:14px;background:var(--bg-soft);padding:22px 22px 20px;display:flex;flex-direction:column;gap:14px}
.quote p{margin:0;font-size:14.5px;line-height:1.6;color:var(--ink)}
.quote cite{margin-top:auto;font-style:normal;font-size:11.5px;color:var(--ink-dim)}
.quotes-eye{margin-top:56px}
.quotes-eye + .quotes{margin-top:18px}
.pay{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:36px}
.pay > div{border:1px solid var(--line);border-radius:14px;background:var(--bg);padding:26px clamp(20px,2.4vw,30px)}
.pay h3{margin:0 0 8px;font-size:18px;font-weight:600;letter-spacing:-.01em}
.pay p{margin:0;font-size:14.5px;color:var(--ink-dim)}
.pay-link{display:inline-block;margin-top:12px;padding:3px 0;font-size:14px;color:var(--gold);border-bottom:1px solid var(--ink-faint)}
.pay-link:hover{border-color:var(--gold)}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.chip{border:1px solid var(--line);border-radius:100px;padding:6px 13px;font-size:12.5px;color:var(--ink)}
.coda{position:relative;text-align:center;padding:clamp(72px,14vh,136px) 0;border-top:1px solid var(--line);overflow:clip}
.coda .wrap{position:relative}
.coda h2{font-weight:600;font-size:clamp(30px,4.2vw,50px);letter-spacing:-.03em;margin:16px auto 0;line-height:1.1;max-width:22ch}
.coda h2 em{font-style:normal;color:var(--gold)}
.coda .csub{max-width:52ch;margin:20px auto 0;font-size:16px;color:var(--ink-dim)}
.coda .cta-row{justify-content:center}
.coda .mail{display:inline-block;margin-top:22px;font-size:14px;color:var(--gold)}
.foot{border-top:1px solid var(--line);padding:26px var(--pad) 96px;display:flex;justify-content:space-between;gap:14px 24px;flex-wrap:wrap;font-size:13px;letter-spacing:.01em;color:var(--ink-dim)}
.foot-links{display:inline-flex;flex-wrap:wrap;gap:6px 18px;margin:-5px 0}
.foot a:hover{color:var(--ink)}
/* Tippziele mindestens 24 px hoch (WCAG 2.5.8), Optik unverändert */
.foot a{display:inline-block;padding:5px 0}
.coda .mail{padding:3px 0}
.foot-legal{flex-basis:100%;margin:0;font-size:12px;line-height:1.5;letter-spacing:0;text-transform:none}
.sv-overlay{position:fixed;inset:0;z-index:200;background:rgba(5,5,7,.72);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);display:grid;place-items:center;padding:20px;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .3s var(--ease),visibility 0s linear .3s}
.sv-overlay.open{opacity:1;visibility:visible;pointer-events:auto;transition:opacity .3s var(--ease),visibility 0s}
.sv{width:min(600px,100%);max-height:calc(100dvh - 40px);background:var(--bg-soft);border:1px solid var(--line);border-radius:20px;overflow:hidden;display:flex;flex-direction:column;transform:translateY(18px) scale(.98);transition:transform .3s var(--ease)}
.sv-overlay.open .sv{transform:none}
.sv-head{padding:20px 24px 0;display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
.sv-head h3{font-size:21px;font-weight:600;letter-spacing:-.02em;margin:0 0 4px;line-height:1.15}
.sv-head p{font-size:12.5px;color:var(--ink-dim);margin:0}
.sv-x{display:grid;place-items:center;flex:none;width:40px;height:40px;margin:-8px -10px 0 0;border-radius:50%;background:none;border:0;color:var(--ink-dim);font-size:24px;line-height:1;cursor:pointer;padding:0}
.sv-x:hover{color:var(--ink)}
.sv-prog{height:3px;background:var(--line);margin:18px 24px 0;border-radius:3px;overflow:hidden}
.sv-prog i{display:block;height:100%;background:var(--gold);width:0;transition:width .4s var(--ease)}
.sv-body{padding:22px 24px;overflow-y:auto}
.sv-step-t{font-size:13px;letter-spacing:.02em;color:var(--gold);margin-bottom:8px}
.sv-q{font-size:18.5px;font-weight:600;letter-spacing:-.01em;margin:0 0 18px;line-height:1.3}
.sv-q:focus{outline:none}
.sv-opts{display:flex;flex-wrap:wrap;gap:10px}
.sv-opt{border:1px solid var(--line);background:var(--bg);color:var(--ink);border-radius:100px;padding:10px 16px;font:inherit;font-size:13px;cursor:pointer;transition:border-color .3s,background-color .3s}
.sv-opt:hover{border-color:var(--ink-faint)}
.sv-opt.sel{border-color:var(--gold);background:var(--gold-soft)}
.sv-input,.sv-area{width:100%;background:var(--bg);border:1px solid var(--line);border-radius:12px;color:var(--ink);font:inherit;font-size:14px;padding:12px 14px;outline:none;margin-bottom:12px}
.sv-area{min-height:96px;resize:vertical}
.sv-input::placeholder,.sv-area::placeholder{color:var(--ink-dim);opacity:1}
.sv-input:focus,.sv-area:focus{border-color:var(--gold)}
.sv-input:focus-visible,.sv-area:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.sv-label{display:block;margin:0 0 6px;font-size:12.5px;color:var(--ink-dim)}
.sv-err{margin:-4px 0 12px;font-size:12.5px;color:var(--err)}
.sv-err:empty{display:none}
.sv-req{margin:0 0 12px;font-size:12.5px;color:var(--ink-dim)}
.sv-check{display:flex;gap:10px;align-items:flex-start;margin:2px 0 12px;font-size:13px;line-height:1.45;color:var(--ink);cursor:pointer}
.sv-check input{flex:none;width:18px;height:18px;margin:1px 0 0;accent-color:var(--gold)}
.sv-check input:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.sv-foot{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:16px 24px;border-top:1px solid var(--line)}
.sv-privacy{margin:0;padding:0 24px 16px;font-size:11.5px;line-height:1.45;color:var(--ink-dim);text-align:right}
.sv-privacy a{color:var(--gold);text-decoration:underline;text-underline-offset:2px}
.sv-back{min-height:40px;padding:0 6px;margin-left:-6px;background:none;border:0;color:var(--ink-dim);font:inherit;font-size:13px;cursor:pointer}
.sv-back:hover{color:var(--ink)}
.sv-next{background:var(--accent-fill);color:var(--on-accent);border:0;border-radius:100px;padding:11px 24px;font:inherit;font-size:14px;font-weight:500;letter-spacing:.01em;cursor:pointer}
.sv-next[disabled]{opacity:.4;cursor:not-allowed}
.sv-done{text-align:center;padding:18px 0}
.sv-done .big{font-size:22px;font-weight:600;letter-spacing:-.02em;margin:0 0 12px}
.sv-done p{color:var(--ink-dim);font-size:14px;line-height:1.6;margin:0 auto;max-width:36ch}
/* Kundenportal: Karte auf der Startseite */
.pt{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,72px);align-items:center;border:1px solid var(--line);border-radius:20px;background:var(--bg-soft);padding:clamp(24px,4.4vw,56px)}
.pt-points{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:9px;font-size:14.5px;line-height:1.5}
.pt-points li{position:relative;padding-left:20px}
.pt-points li::before{content:"";position:absolute;left:2px;top:.6em;width:6px;height:6px;border-radius:50%;background:var(--gold)}
.pt .cta-row{margin-top:28px}
.pt .cta svg{width:11px;height:11px}
.pt-note{margin:16px 0 0;font-size:13px;color:var(--ink-dim)}
/* Leitsatz über der Portal-Karte: blendet ruhig ein, danach zieht sich die kurze Linie auf.
   Ohne JS oder bei reduzierter Bewegung steht alles sofort da. Englisch auf allen Sprachen. */
.pq{margin:0 auto clamp(32px,5vw,56px);text-align:center}
.pq p{max-width:34ch;margin:0 auto;font-weight:500;font-size:clamp(19px,2.2vw,26px);line-height:1.35;letter-spacing:-.012em;text-wrap:balance}
.pq::after{content:"";display:block;width:40px;height:1px;margin:20px auto 0;background:var(--gold)}
.js .pq.reveal{transform:translateY(10px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.js .pq.reveal.in{transform:none}
@media (prefers-reduced-motion:no-preference){
  .js .pq::after{transform:scaleX(0);transition:transform .6s var(--ease) .5s}
  .js .pq.in::after{transform:none}
}
/* Vorschaubild der Karte: dieselbe Übersicht wie im Vorschau-Dialog (#ptApp), beim Laden geklont und
   per zoom auf die Spaltenbreite verkleinert. --pw/--ph = Ausschnitt in Pixeln des Beispiels. */
.pt-teaser{min-width:0;container:pt/inline-size}
.no-js .pt-teaser,.pt-teaser[hidden]{display:none}
.no-js .pt{grid-template-columns:minmax(0,1fr)}
.pt-shot{display:block;width:100%;margin:0;padding:0;border:0;border-radius:14px;background:none;color:inherit;font:inherit;text-align:left;cursor:pointer}
.pt-shot:focus-visible{outline-offset:5px;border-radius:16px}
.pt-win{display:block;border-radius:14px;border:1px solid var(--line);background:var(--bg);overflow:hidden;box-shadow:0 40px 80px -46px rgba(0,0,0,.8);transition:border-color .2s var(--ease),transform .2s var(--ease)}
html.theme-light .pt-win{box-shadow:0 40px 80px -50px rgba(30,40,70,.45)}
.pt-shot:hover .pt-win{border-color:var(--gold);transform:translateY(-3px)}
.pt-win-bar{display:flex;align-items:center;gap:6px;padding:9px 12px;border-bottom:1px solid var(--line);background:var(--bg-soft2)}
.pt-win-bar i{flex:none;width:8px;height:8px;border-radius:50%;background:var(--ink-faint)}
.pt-win-bar span{flex:1;min-width:0;margin-left:8px;padding:1px 12px;border-radius:100px;background:var(--bg);font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:10.5px;line-height:17px;color:var(--ink-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pt-view{--pw:700px;--ph:700px;display:block;width:var(--pw);height:var(--ph);overflow:hidden;zoom:.7;container-type:inline-size;pointer-events:none;-webkit-mask-image:linear-gradient(#000 82%,transparent);mask-image:linear-gradient(#000 82%,transparent)}
.pt-view>.pd-app{border:0;border-radius:0;min-height:100%}
.pt-view .pd-grid{grid-template-columns:minmax(0,1fr)}
@container pt (max-width:380px){.pt-view{--pw:400px;--ph:560px}}
@media (prefers-reduced-motion:reduce){.pt-shot:hover .pt-win{transform:none}}
/* Kundenportal: Vorschau-Dialog mit Führung (statisches Beispiel, keine Verbindung zum Portal) */
.pd-dlg{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:24px;border:0;background:rgba(5,5,7,.72);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);color:var(--ink);overflow:hidden;opacity:0;transition:opacity .2s var(--ease)}
.pd-dlg[open]{display:grid;place-items:center}
.pd-dlg::backdrop{background:transparent}
.pd-dlg.on{opacity:1}
.pd-box{display:flex;flex-direction:column;width:min(1180px,100%);height:min(780px,100%);background:var(--bg-soft);border:1px solid var(--line);border-radius:20px;overflow:hidden;box-shadow:0 40px 120px -40px rgba(0,0,0,.8);transform:translateY(12px) scale(.985);transition:transform .24s var(--ease)}
.pd-dlg.on .pd-box{transform:none}
.pd-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;padding:18px 20px 16px 24px;border-bottom:1px solid var(--line)}
.pd-head h2{margin:0;font-size:19px;font-weight:600;letter-spacing:-.015em;line-height:1.25}
.pd-head p{margin:4px 0 0;font-size:12.5px;line-height:1.5;color:var(--ink-dim)}
.pd-x{flex:none;display:grid;place-items:center;width:44px;height:44px;margin:-6px -6px 0 0;padding:0;border-radius:50%;border:1px solid var(--line);background:var(--bg);color:var(--ink);font:inherit;font-size:22px;line-height:1;cursor:pointer;transition:border-color .2s var(--ease)}
.pd-x:hover{border-color:var(--gold)}
.pd-main{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) 320px}
.pd-scroll{min-height:0;overflow:auto;overscroll-behavior:contain;padding:20px;container-type:inline-size}
.pd-scroll:focus-visible{outline-offset:-3px}
.pd-app{display:grid;grid-template-columns:184px minmax(0,1fr);border:1px solid var(--line);border-radius:14px;background:var(--bg);font-size:13px;line-height:1.45}
.pd-side{position:sticky;top:0;align-self:start;padding:16px 10px}
.pd-brand{display:flex;align-items:center;gap:9px;padding:0 6px 14px;font-size:13px}
.pd-brand i{display:grid;place-items:center;width:26px;height:26px;border-radius:7px;background:var(--accent-fill);color:var(--on-accent);font-style:normal;font-size:12px;font-weight:600}
.pd-nav{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.pd-nav li{display:flex;align-items:center;gap:10px;padding:7px 10px;border-radius:8px;color:var(--ink-dim)}
.pd-nav li::before{content:"";flex:none;width:12px;height:12px;border-radius:4px;border:1.5px solid currentColor;opacity:.7}
.pd-nav li.on{background:var(--gold-soft);color:var(--ink)}
.pd-nav li.on::before{border-color:var(--gold);background:var(--gold);opacity:1}
.pd-body{min-width:0;border-left:1px solid var(--line)}
.pd-top{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px 14px;margin:10px;padding:8px 10px;border-radius:10px}
.pd-org b{display:block;font-size:13.5px;font-weight:600}
.pd-org small,.pd-dim,.pd-files small,.pd-inv small,.pd-foot small{font-size:11.5px;color:var(--ink-dim)}
.pd-top-r{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.pd-pill,.pd-btn{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border:1px solid var(--line);border-radius:100px;font-size:11.5px;white-space:nowrap}
.pd-pill svg,.pd-btn svg,.pd-drop svg,.pd-files svg,.pd-help svg{flex:none;width:13px;height:13px;color:var(--gold)}
.pd-btn.solid{background:var(--accent-fill);border-color:var(--accent-fill);color:var(--on-accent)}
.pd-user{display:inline-flex;align-items:center;gap:8px;font-size:12px}
.pd-user i{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--accent-fill);color:var(--on-accent);font-style:normal;font-size:11px;font-weight:600}
.pd-content{display:flex;flex-direction:column;gap:12px;padding:0 10px 10px}
.pd-block{padding:12px 10px;border-radius:12px}
.pd-hi{margin:0;font-size:18px;font-weight:600;letter-spacing:-.01em}
.pd-dim{margin:2px 0 0}
.pd-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:14px}
.pd-stat{padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--bg-soft)}
.pd-stat b{display:block;font-size:19px;font-weight:600;letter-spacing:-.01em}
.pd-stat span{display:block;font-size:11.5px;color:var(--ink-dim)}
.pd-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-items:start}
.pd-card{display:flex;flex-direction:column;gap:8px;min-width:0;padding:14px;border:1px solid var(--line);border-radius:12px;background:var(--bg-soft)}
.pd-card-h{display:flex;justify-content:space-between;align-items:center;gap:8px}
.pd-eye{font-size:12.5px;letter-spacing:.02em;color:var(--gold)}
.pd-title{margin:0;font-size:15px;font-weight:600;letter-spacing:-.01em}
.pd-mono,.pd-rows code,.pd-inv code,.pd-tix code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:11.5px}
.pd-mono{margin:0;color:var(--ink-dim)}
.pd-badge,.pd-rows em,.pd-tix em{display:inline-flex;align-items:center;gap:6px;padding:2px 9px;border:1px solid var(--line);border-radius:100px;font-size:11px;font-style:normal;white-space:nowrap}
.pd-badge::before,.pd-rows em::before,.pd-tix em::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--gold)}
.pd-rows [data-s="p1"]::before,.pd-tix [data-s="t2"]::before{background:#4f9d74}
.pd-rows [data-s="p3"]::before{background:var(--ink-faint)}
.pd-badge.warn::before,.pd-tix [data-s="t1"]::before{background:#d19a3a}
.pd-rounds{display:flex;justify-content:space-between;gap:8px;font-size:12px;color:var(--ink-dim)}
.pd-meter{height:5px;border-radius:3px;background:var(--line);overflow:hidden}
.pd-meter i{display:block;width:33.3%;height:100%;background:var(--gold)}
.pd-rows,.pd-files,.pd-tix{list-style:none;margin:0;padding:0}
.pd-rows li{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:10px;padding:7px 0;border-top:1px solid var(--line);font-size:12.5px}
.pd-rows code{color:var(--ink-dim)}
.pd-drop{display:flex;align-items:center;gap:10px;padding:12px;border:1.5px dashed var(--ink-faint);border-radius:10px;font-size:12px;color:var(--ink-dim)}
.pd-files li{display:flex;align-items:center;gap:10px;padding:8px 0;border-top:1px solid var(--line)}
.pd-files li>span{min-width:0}
.pd-files b,.pd-tix b{display:block;font-size:12.5px;font-weight:500;overflow-wrap:anywhere}
.pd-files small{display:block}
.pd-inv{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 0;border-top:1px solid var(--line)}
.pd-inv small{display:block}
.pd-inv-r{display:flex;flex-direction:column;align-items:flex-end;gap:4px}
.pd-inv-r b{font-size:14px;font-weight:600}
.pd-foot{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.pd-tix li{display:flex;flex-direction:column;gap:5px;padding:9px 0;border-top:1px solid var(--line)}
.pd-tmeta{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:11.5px;color:var(--ink-dim)}
.pd-tix code{padding:1px 7px;border-radius:5px;background:var(--gold-soft);color:var(--ink)}
.pd-help{display:flex;align-items:center;gap:8px;margin:0;font-size:12px;color:var(--gold)}
.pd-app [data-tour]{transition:opacity .2s var(--ease),box-shadow .2s var(--ease)}
.pd-app.touring [data-tour]:not(.hl){opacity:.78}
.pd-app [data-tour].hl{box-shadow:0 0 0 2px var(--gold),0 0 0 7px var(--gold-soft)}
.pd-tour{display:flex;flex-direction:column;gap:14px;min-height:0;overflow:auto;padding:22px;border-left:1px solid var(--line)}
.pd-count{margin:0;font-size:13px;letter-spacing:.02em;color:var(--gold)}
.pd-dots{display:flex;gap:6px;margin-top:-4px}
.pd-dots i{flex:1;height:3px;border-radius:3px;background:var(--line)}
.pd-dots i.on,.pd-dots i.done{background:var(--gold)}
.pd-dots i.done{opacity:.5}
.pd-steps{list-style:none;margin:0;padding:0}
.pd-steps h3{margin:0 0 8px;font-size:19px;font-weight:600;letter-spacing:-.015em;line-height:1.25}
.pd-steps p{margin:0;font-size:14.5px;line-height:1.6;color:var(--ink-dim)}
@media (prefers-reduced-motion:no-preference){.pd-steps li:not([hidden]){animation:pdIn .22s var(--ease) both}}
@keyframes pdIn{from{opacity:0;transform:translateY(6px)}}
.pd-live{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.pd-btns{display:flex;justify-content:space-between;gap:10px;margin-top:auto}
.pd-back,.pd-next{min-height:44px;border-radius:100px;font:inherit;cursor:pointer}
.pd-back{padding:0 18px;border:1px solid var(--line);background:none;color:var(--ink);font-size:13px;transition:border-color .2s var(--ease)}
.pd-back:hover:not([disabled]){border-color:var(--ink-faint)}
.pd-back[disabled]{opacity:.4;cursor:default}
.pd-next{padding:0 24px;border:0;background:var(--accent-fill);color:var(--on-accent);font-size:14px;font-weight:500;letter-spacing:.01em}
.pd-next:hover{background:var(--accent-fill-hover)}
.pd-go{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;min-height:32px;font-size:12.5px;color:var(--gold)}
.pd-go:hover{text-decoration:underline;text-underline-offset:3px}
@container (max-width:640px){
  .pd-app{grid-template-columns:minmax(0,1fr)}
  .pd-side{display:none}
  .pd-body{border-left:0}
  .pd-grid{grid-template-columns:minmax(0,1fr)}
}
@container (max-width:470px){
  .pd-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pd-user span{display:none}
}
@media (max-width:960px){
  .pt{grid-template-columns:minmax(0,1fr)}
  .pt-teaser{max-width:560px}
}
@media (max-width:860px){
  .pd-main{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto}
  .pd-tour{max-height:48vh;gap:10px;padding:14px 16px 16px;border-left:0;border-top:1px solid var(--line)}
  .pd-steps h3{margin-bottom:4px;font-size:16.5px}
  .pd-steps p{font-size:13.5px;line-height:1.5}
  .pd-go{display:none}
}
@media (max-width:600px){
  .pd-dlg{padding:0}
  .pd-box{width:100%;height:100%;border:0;border-radius:0}
  .pd-head{padding:10px 10px 10px 16px}
  .pd-head h2{font-size:17px}
  .pd-x{margin:0}
  .pd-scroll{padding:12px}
}
html[lang|="zh"] .pd-eye,html[lang|="zh"] .pd-count,html[lang|="zh"] .pd-next{letter-spacing:.05em}
html[lang|="zh"] .eyebrow,html[lang|="zh"] .tag,html[lang|="zh"] .cta,html[lang|="zh"] .nav-right,html[lang|="zh"] .hero-meta,html[lang|="zh"] .ktab,html[lang|="zh"] .kopen,html[lang|="zh"] .facts span,html[lang|="zh"] .cv-links,html[lang|="zh"] .foot{letter-spacing:.05em}
@media (hover:none){.split-body:hover .half:hover{flex-grow:1}.split-body:hover .half:not(:hover) .motif{opacity:1}}
@media (max-width:1024px){
  .quotes{grid-template-columns:1fr}
}
@media (max-width:960px){
  .about{grid-template-columns:1fr}
  .about .pframe{position:relative;top:auto;max-width:380px;width:calc(100% - 28px)}
  .pay{grid-template-columns:1fr}
}
@media (max-width:760px){
  .split-body{flex-direction:column;height:auto}
  .half{min-height:440px}
  /* Handy: Text steht höher im Bild, Verlauf reicht deshalb weiter nach oben */
  .half.eng::before{background:linear-gradient(0deg,rgba(11,12,15,.97) 0%,rgba(11,12,15,.9) 52%,rgba(11,12,15,.55) 72%,transparent 92%)}
  .half.vo::before{background:linear-gradient(0deg,rgba(10,12,16,.97) 0%,rgba(10,12,16,.9) 52%,rgba(10,12,16,.55) 72%,transparent 92%)}
  .half.web::before{background:linear-gradient(0deg,rgba(14,10,8,.97) 0%,rgba(14,10,8,.9) 52%,rgba(14,10,8,.55) 72%,transparent 92%)}
  .half .motif{width:min(calc(var(--hw,100vw) * .8),380px)}
  .half .lp{width:min(calc(var(--hw,100vw) * .86),420px)}
  .or{left:50%!important}
  .nav-link{display:none}
  .brand-logo{height:13px;width:130px}
}
@media (max-width:640px){
  .facts{grid-template-columns:repeat(3,minmax(0,1fr))}
  .facts div{padding:14px 10px}
  .facts b{font-size:20px}
  .facts span{display:block;font-size:12px;letter-spacing:0;-webkit-hyphens:auto;hyphens:auto}
  .cv summary{grid-template-columns:1fr 20px}
  .cv .yr{grid-row:auto;grid-column:1}
  .cv .ti,.cv .tg{grid-column:1}
  .cv summary::after{grid-column:2;grid-row:1/4}
  .cv details p{margin-left:0}
  .cv .nda{grid-template-columns:1fr;gap:2px}
}
@media (max-width:400px){
  .cta{padding:13px 20px}
  .nav-ctrl select{padding:7px 8px}
}
/* ── Übernahme aus dem Design-Entwurf (10.10.2026) ── */
/* Menü am Handy: die Navigation bleibt oben erreichbar */
.nav-links{display:contents}
.menu-btn{display:none}
@media (max-width:900px){
  .menu-btn{display:inline-grid;place-items:center}
  .nav.menu-open .nav-links{display:flex;flex-direction:column;position:absolute;left:0;right:0;top:100%;padding:4px var(--pad) 12px;background:var(--bg);border-bottom:1px solid var(--line);box-shadow:0 26px 40px -30px rgba(0,0,0,.45)}
  .nav.menu-open .nav-links .nav-link{display:block;padding:14px 2px;font-size:15px;color:var(--ink);border-top:1px solid var(--line)}
  .nav.menu-open .nav-links .nav-link:first-child{border-top:0}
  .nav.menu-open .nav-links .nav-link[hidden]{display:none}
}
/* Leiste «Anfrage starten» am Handy, erscheint nach dem Seitenkopf */
.sticky-cta{position:fixed;left:0;right:0;bottom:0;z-index:70;display:none;align-items:center;justify-content:space-between;gap:12px;padding:10px var(--pad) calc(10px + env(safe-area-inset-bottom));background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-top:1px solid var(--line);transform:translateY(110%);transition:transform .3s var(--ease)}
.sticky-cta.on{transform:none}
.sticky-cta p{margin:0;font-size:13px;line-height:1.35;color:var(--ink-dim)}
.sticky-cta p strong{display:block;font-size:15px;font-weight:600;color:var(--ink)}
.sticky-cta .cta{flex:none;padding:12px 18px;white-space:nowrap}
@media (max-width:760px){.sticky-cta{display:flex}}
body.sticky-on .dzfb-card{bottom:calc(84px + env(safe-area-inset-bottom))}
/* Karten: Bild der jeweiligen Landingpage. Beim Zeigen: Maschine wird Röntgenbild, Arbeitstisch wird Abend mit fertiger Website. */
.half.web .half-bg{object-position:74% 50%}
.half.vo .half-bg{object-position:56% 50%}
.half-bg{position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover;object-position:64% 46%;transition:opacity .6s var(--ease),transform 1.2s var(--ease)}
.half-bg.half-x{opacity:0}
.half:hover .half-bg,.half:focus-visible .half-bg{transform:scale(1.03)}
.half:hover .half-x,.half:focus-visible .half-x{opacity:1}
@media (hover:none){.half-bg.half-x{opacity:1}}
@media (prefers-reduced-motion:reduce){.half-bg{transition:opacity .15s linear}.half:hover .half-bg{transform:none}}
/* Clips: Endbild ohne Skript, Abspielen/Pause-Knopf mit Ring, der auf jedem Bild sichtbar ist */
.clip-btn{position:absolute;right:12px;bottom:12px;z-index:2;display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 15px;border-radius:100px;border:1px solid rgba(255,255,255,.25);background:rgba(11,18,32,.74);color:#fff;font:inherit;font-size:13px;font-weight:500;letter-spacing:.01em;cursor:pointer;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.clip-btn svg{width:14px;height:14px}
.clip-btn .i-pause,.clip-btn[data-state="playing"] .i-play{display:none}
.clip-btn[data-state="playing"] .i-pause{display:block}
.clip-btn:focus-visible{outline:3px solid #fff;outline-offset:2px;box-shadow:0 0 0 7px #0b1220;border-radius:100px}
html:not(.js) .clip-btn{display:none}

/* Preise direkt auf den Kacheln der Startseite */
.half-price{margin:14px 0 0;font-size:14px;line-height:1.45;opacity:.92}
.half-price strong{font-weight:600;font-size:16px;opacity:1}
/* Handy: die drei Bereiche als Karteikarten. Jede Karte bleibt beim Scrollen etwas tiefer stehen (sticky), die nächste
   legt sich darüber, oben bleibt der Streifen mit dem Bereichsnamen als Reiter sichtbar, unten schaut die nächste Karte
   heraus. Ein Tipp auf einen verdeckten Streifen legt die Karten darüber nach rechts weg (Skript «Karteikarten»).
   Der Rahmen um die Karten entfällt hier, weil overflow:hidden das Mitwandern verhindern würde. Nur mit genug Höhe;
   sonst stehen die Karten untereinander wie bisher. */
@media (max-width:760px) and (min-height:600px){
  .split-body{--streifen:58px;--peek:64px;--v:calc(100svh - var(--navh,62px));display:block;overflow:visible;border:0;border-radius:0;box-shadow:none}
  html.theme-light .split-body{box-shadow:none}
  .split-body .half{position:sticky;top:calc(var(--navh,62px) + var(--k) * var(--streifen));height:calc(var(--v) - var(--k) * var(--streifen) - var(--peek));min-height:0;border-radius:18px 18px 0 0;border:1px solid var(--line);border-bottom:0;box-shadow:0 -14px 30px -20px rgba(0,0,0,.75)}
  .split-body .half:nth-child(1){--k:0}
  .split-body .half:nth-child(2){--k:1}
  .split-body .half:nth-child(3){--k:2;height:calc(var(--v) - 2 * var(--streifen))}
  .split-body .half{--reiter-oben:12px;--reiter-links:14px}
  .split-body .half::after{content:"";position:absolute;inset:0;z-index:4;background:rgba(4,5,8,.5);opacity:0;pointer-events:none;transition:opacity .35s var(--ease)}
  .split-body .half.unter::after{opacity:1}
  .split-body .half.unter .tag{z-index:5}
  /* Verdeckter Reiter: kleiner Winkel nach oben, die Karte lässt sich nach vorn holen */
  .split-body .half.unter .tag::after{content:"";display:inline-block;width:6px;height:6px;margin:0 2px 2px 10px;border-left:1.5px solid currentColor;border-top:1.5px solid currentColor;transform:rotate(45deg);vertical-align:middle}
}