/* =====================================================================
   Erft Digital · Neuauftritt „Schaufenster"
   Weißer Grund, große Schrift, die eigene Arbeit als Bild.
   Dunkle Bühnen nur für Arbeiten, Kontakt und eine Leistungskarte.
   ===================================================================== */
:root{
  --paper:#FFFFFF; --paper-2:#F2F5FA; --paper-3:#E9EEF6;
  --ink:#0A1A30; --ink-2:#44536B; --ink-3:#5C6B83;
  --line:#E1E7F0; --line-2:#C9D3E2;
  --blue:#2456DC; --blue-2:#1B45B8; --blue-soft:#EAF0FE; --ring:#4B7BEE;
  --stage:#06142A; --stage-2:#0B1F3D; --on-stage:#EAF1FB; --on-stage-2:#A9BCD8; --on-stage-line:rgba(234,241,251,.16); --stage-accent:#8FB6FF;
  --bar1:#3E8AD3; --bar2:#1E6DB3; --bar3:#0D2C54; --logo-erft:#0D2C54; --logo-digital:#2E6FBE;
  --live:#1F9D55; --bad:#C62828;
  --win-bar:#F1F4F8; --win-line:#E1E7EF; --win-dot:#D5DCE6; --win-url:#FFFFFF; --win-url-ink:#56667F;
  --f-display:"Space Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --f-body:Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --f-logo:Poppins, "Space Grotesk", ui-sans-serif, sans-serif;
  --hdr:4rem; --gutter:clamp(1.125rem,4vw,3.5rem); --max:85rem;
  --r-s:0.625rem; --r-m:1.125rem; --r-l:1.75rem;
  --sh-float:0 2.125rem 5rem -2.125rem rgba(10,26,48,.5), 0 0.625rem 1.5rem -0.875rem rgba(10,26,48,.22);
  --sh-card:0 -1.25rem 3.75rem -2.5rem rgba(10,26,48,.35);
  --ease:cubic-bezier(.22,1,.36,1); --ease-io:cubic-bezier(.65,0,.35,1);
  color-scheme:light;
}
:root[data-ed="dark"]{
  --paper:#07111F; --paper-2:#0C1A2E; --paper-3:#12243D;
  --ink:#EAF1FB; --ink-2:#B4C3DB; --ink-3:#94A8C6;
  --line:#1C2E49; --line-2:#2B4163;
  --blue:#6D9BFF; --blue-2:#8DB2FF; --blue-soft:#13264A; --ring:#8DB2FF;
  --stage:#030A16; --stage-2:#081a33; --on-stage:#EAF1FB; --on-stage-2:#A9BCD8; --on-stage-line:rgba(234,241,251,.16); --stage-accent:#8FB6FF;
  --bar3:#5E93D6; --logo-erft:#F5F9FF; --logo-digital:#7FB2EC;
  --live:#34D399;
  --win-bar:#1A2434; --win-line:#243247; --win-dot:#3A4A62; --win-url:#0F1826; --win-url-ink:#AFBDD2;
  --sh-float:0 2.125rem 5rem -1.875rem rgba(0,0,0,.75), 0 0.625rem 1.5rem -0.875rem rgba(0,0,0,.5);
  --sh-card:0 -1.25rem 3.75rem -2.5rem rgba(0,0,0,.8);
  color-scheme:dark;
}

/* ---------- Grundlagen ---------- */
/* Große Bildschirme: feste Stufen in ganzen Pixeln. So bleibt Schrift scharf (keine halben Pixel)
   und Browser-Zoom wirkt normal. Breite UND Höhe müssen reichen, damit die festgehefteten Bühnen ins Bild passen. */
/* Grenzen leicht unter den Monitorbreiten: mit Maus zeigt macOS feste Scrollbalken (ca. 15 bis 17 px) */
@media (min-width:1580px) and (min-height:860px){ html{font-size:17px} }
@media (min-width:1880px) and (min-height:930px){ html{font-size:18px} }
@media (min-width:2200px) and (min-height:1040px){ html{font-size:19px} }
@media (min-width:2500px) and (min-height:1160px){ html{font-size:20px} }
@media (min-width:2960px) and (min-height:1360px){ html{font-size:22px} }
@media (min-width:3760px) and (min-height:1740px){ html{font-size:24px} }
*,*::before,*::after{box-sizing:border-box}
html{scroll-padding-top:calc(var(--hdr) + 1rem); text-size-adjust:100%; -webkit-text-size-adjust:100%; hyphens:none}
html,body{overflow-x:clip}
body{margin:0; background:var(--paper); color:var(--ink); font:400 1.125rem/1.6 var(--f-body); font-feature-settings:"ss01" 0}
img{max-width:100%; display:block}
a{color:inherit}
button{font:inherit; color:inherit}
h1,h2,h3,p,ul,ol,figure,blockquote{margin:0}
ul,ol{padding:0; list-style:none}
[hidden]{display:none!important}
:focus-visible{outline:0.1875rem solid var(--ring); outline-offset:0.1875rem; border-radius:0.375rem}
::selection{background:var(--blue); color:#fff}
.wrap{width:calc(100% - 2*var(--gutter)); max-width:var(--max); margin-inline:auto}
.nw{white-space:nowrap}
.skip{position:fixed; left:0.75rem; top:-3.75rem; z-index:200; background:var(--ink); color:var(--paper); padding:0.625rem 1rem; border-radius:0.5rem; font-weight:700; text-decoration:none}
.skip:focus{top:0.75rem}

/* Lenis */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-stopped{overflow:hidden}

/* ---------- Typografie ---------- */
.label{display:inline-flex; align-items:center; gap:0.625rem; margin:0 0 1.25rem; font:700 0.8125rem/1 var(--f-body); letter-spacing:.12em; text-transform:uppercase; color:var(--blue)}
.label__mark{display:grid; gap:0.1562rem}
.label__mark i{display:block; width:0.875rem; height:0.1875rem; border-radius:1px; background:var(--bar1)}
.label__mark i:nth-child(2){background:var(--bar2)} .label__mark i:nth-child(3){background:var(--bar3)}
.label--stage{color:var(--stage-accent)}
.label--stage .label__mark i:nth-child(3){background:#5E93D6}
.h2{font:700 clamp(2.5rem,5.2vw,5.6rem)/.98 var(--f-display); letter-spacing:-.042em; text-wrap:balance}
.accent{color:var(--blue)}
.sec-head{margin-bottom:clamp(2.5rem,6vw,5.25rem)}
.sec-head--row{display:flex; align-items:flex-end; justify-content:space-between; gap:1.5rem; flex-wrap:wrap}
.more{display:inline-flex; align-items:center; gap:0.5rem; font-weight:700; color:var(--blue); text-decoration:none; font-size:1rem}
.more svg{width:1.125rem; height:1.125rem; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; transition:transform .25s var(--ease)}
.more:hover svg{transform:translateX(0.25rem)}

/* ---------- Knöpfe ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:0.625rem; height:3rem; padding:0 1.375rem; border-radius:62.4375rem; border:1.5px solid transparent; font:700 1rem/1 var(--f-body); text-decoration:none; cursor:pointer; white-space:nowrap; transition:background-color .2s, border-color .2s, color .2s}
.btn svg{width:1.125rem; height:1.125rem; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; transition:transform .25s var(--ease)}
.btn:hover svg{transform:translateX(0.25rem)}
.btn--primary{background:var(--blue); color:#fff}
.btn--primary:hover{background:var(--blue-2)}
:root[data-ed="dark"] .btn--primary{color:#06142A}
.btn--ghost{border-color:var(--line-2); color:var(--ink); background:transparent}
.btn--ghost:hover{border-color:var(--ink)}
.btn--light{background:#FFFFFF; color:#06142A}
.btn--light:hover{background:#DCE7FF}
.btn--lg{height:3.625rem; padding:0 1.875rem; font-size:1.0625rem}
.btn--sm{height:2.5rem; padding:0 1.125rem; font-size:0.9062rem}
.btn--block{display:flex; width:100%}

/* ---------- Logo ---------- */
.brand{display:inline-flex; align-items:center; gap:0.625rem; text-decoration:none}
.mark{height:1.75rem; width:auto; display:block; overflow:visible}
.mark .r1 rect{fill:var(--bar1)} .mark .r2 rect{fill:var(--bar2)} .mark .r3 rect{fill:var(--bar3)}
.word{font:600 1.25rem/1 var(--f-logo); letter-spacing:-.01em; white-space:nowrap}
.word .we{color:var(--logo-erft)} .word .wd{color:var(--logo-digital)}

/* ---------- Kopfzeile: eine Leiste, immer gleich ---------- */
.hdr{position:fixed; top:0; left:0; right:0; z-index:70; height:calc(var(--hdr) + env(safe-area-inset-top,0px)); padding-top:env(safe-area-inset-top,0px); background:var(--paper); border-bottom:1px solid var(--line); transition:box-shadow .3s}
.hdr.is-scrolled{box-shadow:0 0.5rem 1.5rem -1.125rem rgba(10,26,48,.35)}
.hdr__in{height:var(--hdr); width:calc(100% - 2*var(--gutter)); max-width:var(--max); margin-inline:auto; display:flex; align-items:center; gap:1.5rem}
.nav{display:flex; gap:clamp(0.875rem,1.9vw,1.75rem); margin-left:auto}
.nav a{position:relative; font:600 0.9375rem/1 var(--f-body); color:var(--ink-2); text-decoration:none; padding:0.625rem 0}
.nav a:hover,.nav a.is-on{color:var(--ink)}
.nav a::after{content:""; position:absolute; left:0; right:0; bottom:2px; height:2px; background:var(--blue); transform:scaleX(0); transform-origin:left; transition:transform .3s var(--ease)}
.nav a.is-on::after,.nav a:hover::after{transform:scaleX(1)}
.hdr__act{display:flex; align-items:center; gap:0.625rem}
.iconbtn{width:2.5rem; height:2.5rem; display:grid; place-items:center; border-radius:62.4375rem; border:1.5px solid var(--line); background:transparent; cursor:pointer}
.iconbtn:hover{border-color:var(--ink-3)}
.iconbtn svg{width:1.1875rem; height:1.1875rem; fill:none; stroke:var(--ink); stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round}
.iconbtn .i-sun{display:none}
:root[data-ed="dark"] .iconbtn .i-sun{display:block} :root[data-ed="dark"] .iconbtn .i-moon{display:none}
.burger{display:none; width:2.75rem; height:2.75rem; border:0; background:transparent; cursor:pointer; position:relative; margin-right:-0.5rem}
.burger span{position:absolute; left:0.6875rem; right:0.6875rem; height:2px; background:var(--ink); border-radius:2px; transition:transform .3s var(--ease), top .3s var(--ease)}
.burger span:nth-child(1){top:1.0625rem} .burger span:nth-child(2){top:1.5625rem}
.burger[aria-expanded="true"] span:nth-child(1){top:1.3125rem; transform:rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){top:1.3125rem; transform:rotate(-45deg)}
.mnav{position:fixed; left:0; right:0; bottom:0; top:calc(var(--hdr) + env(safe-area-inset-top,0px)); z-index:65; background:var(--paper); overflow:auto; overscroll-behavior:contain}
.mnav__in{width:calc(100% - 2*var(--gutter)); margin-inline:auto; padding-block:1.125rem 2.25rem; display:flex; flex-direction:column}
.mnav__in > a{font:600 clamp(1.7rem,6.4vw,2.3rem)/1.1 var(--f-display); letter-spacing:-.02em; text-decoration:none; padding:0.875rem 0; border-bottom:1px solid var(--line)}
.mnav__foot{display:grid; gap:0.875rem; margin-top:1.75rem}
.mnav__tel{text-align:center; font-weight:700; text-decoration:none; color:var(--ink-2); padding:0.5rem}
@media (max-width:1099px){ .nav,.hdr__cta{display:none} .burger{display:block} .hdr__act{margin-left:auto} }

/* ---------- Intro ---------- */
.intro{position:fixed; inset:0; z-index:100; display:none; place-items:center; pointer-events:none}
.intro__bg{position:absolute; inset:0; background:var(--paper)}
.intro__lock{position:relative}
html.intro-on #hdr .brand{visibility:hidden}
html.intro-on .intro{display:grid}
html.intro-on body{overflow:hidden}
.intro__lock{display:flex; align-items:center; gap:min(1.125rem, 3.4vw); max-width:92vw; transform-origin:left center}
.intro .mark{height:min(4rem, 13vw)}
.intro .word{font-size:min(calc(1.25rem * 64 / 28), 11.4vw)}

/* ---------- Fenster und Handys (gemeinsame Bauteile) ---------- */
.bar{height:2.125rem; display:flex; align-items:center; gap:0.375rem; padding:0 0.75rem; background:var(--win-bar); border-bottom:1px solid var(--win-line)}
.bar i{width:0.5625rem; height:0.5625rem; border-radius:50%; background:var(--win-dot); flex:none}
.url{display:inline-flex; align-items:center; gap:0.4375rem; min-width:0; margin-left:0.625rem; padding:0.3125rem 0.625rem; border-radius:0.4375rem; background:var(--win-url); color:var(--win-url-ink); font:600 0.75rem/1 var(--f-body); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.dot{width:0.4375rem; height:0.4375rem; border-radius:50%; background:var(--live); flex:none; box-shadow:0 0 0 0.1875rem color-mix(in srgb, var(--live) 22%, transparent)}
.view{position:relative; overflow:hidden; aspect-ratio:16/10; background:#0B1220}
.pan{position:absolute; left:0; top:0; width:100%; height:auto; max-width:none; will-change:transform; transform:translateY(0)}
.phone__in{position:relative; padding:0.4375rem; border-radius:1.75rem; background:#0B1220; box-shadow:var(--sh-float)}
.phone__in::before{content:""; position:absolute; z-index:2; top:0.875rem; left:50%; width:30%; height:0.8125rem; transform:translateX(-50%); border-radius:0.625rem; background:#0B1220}
.phone .view{aspect-ratio:9/19.5; border-radius:1.3125rem}
@keyframes pan{0%,10%{transform:translateY(0)} 90%,100%{transform:translateY(var(--pan,-62%))}}
.pan--auto,.hero .pan{animation:pan var(--dur,24s) var(--ease-io) var(--del,0s) infinite alternate}

/* ---------- 1 HERO ---------- */
.hero{position:relative; background:var(--paper)}
.hero__pin{position:relative; overflow:hidden; min-height:100vh; min-height:100svh}
.hero__grid{position:relative; z-index:3; min-height:100vh; min-height:100svh; padding-top:var(--hdr); display:flex; align-items:center}
.hero__copy{width:min(40rem, 43vw); padding-block:3rem}
.hero__h{font:700 clamp(2.7rem,5.9vw,7rem)/.92 var(--f-display); letter-spacing:-.048em; margin:0 0 1.75rem}
.hero__h .ln{display:block; overflow:hidden; padding-bottom:.06em; margin-bottom:-.06em}
.hero__h .ln > span{display:inline-block}
.hero__lead{font-size:clamp(1.1rem,1.35vw,1.3rem); line-height:1.55; color:var(--ink-2); max-width:34ch; margin-bottom:2.125rem}
.hero__cta{display:flex; flex-wrap:wrap; gap:0.75rem; margin-bottom:2.5rem}
.hero__facts{display:flex; flex-wrap:wrap; gap:0; border-top:1px solid var(--line); max-width:35rem}
.hero__facts li{flex:1 1 0; min-width:8.125rem; padding:1.125rem 1.125rem 0 0; display:grid; gap:0.25rem}
.hero__facts li + li{padding-left:1.125rem; border-left:1px solid var(--line)}
.hero__facts b{font:700 1.45rem/1 var(--f-display); letter-spacing:-.02em; white-space:nowrap}
.hero__facts span{font-size:0.9062rem; font-weight:500; color:var(--ink-2)}
.hero__wall{position:absolute; z-index:2; left:47%; right:0; top:calc(var(--hdr) + 6vh); bottom:7vh; container-type:size}
.win,.phone{position:absolute; margin:0}
.win__in{border-radius:0.875rem; overflow:hidden; background:var(--win-bar); box-shadow:var(--sh-float), 0 0 0 1px rgba(10,26,48,.06)}
.hero__wall .win__in,.hero__wall .phone__in{transition:opacity .9s var(--ease) var(--d,0s), translate 1.2s var(--ease) var(--d,0s)}
.hero__wall.pre .win__in,.hero__wall.pre .phone__in{opacity:0; translate:0 4.375rem}
.win--main{left:7%; top:17%; width:min(72cqw, 80cqh); z-index:3; --dur:26s}
.win--b1{left:36%; top:0; width:min(58cqw, 65cqh); z-index:1; --dur:30s; --del:-9s}
.win--b2{left:40%; top:58%; width:min(62cqw, 69cqh); z-index:2; --dur:28s; --del:-17s}
.phone--1{left:0; top:44%; width:min(17.5cqw, 19.5cqh); z-index:4; --dur:18s; --del:-5s}
.phone--2{left:85%; top:25%; width:min(14cqw, 15.5cqh); z-index:4; --dur:20s; --del:-12s}
/* Ältere Browser ohne Container-Einheiten: Größen wie bisher in Prozent der Bildwand */
@supports not (width: 1cqh){
  .win--main{width:72%} .win--b1{width:58%} .win--b2{width:62%} .phone--1{width:17.5%} .phone--2{width:14%}
}
.hero__veil{position:absolute; inset:0; z-index:6; background:var(--stage); opacity:0; pointer-events:none}
.hero__cue{position:absolute; z-index:4; left:50%; bottom:1.375rem; width:1.625rem; height:2.625rem; margin-left:-0.8125rem; border:2px solid var(--line-2); border-radius:0.875rem}
.hero__cue span{position:absolute; left:50%; top:0.5rem; width:0.25rem; height:0.5rem; margin-left:-2px; border-radius:2px; background:var(--ink-3); animation:cue 1.8s var(--ease-io) infinite}
@keyframes cue{0%{transform:translateY(0); opacity:1} 70%{transform:translateY(0.75rem); opacity:0} 100%{opacity:0}}

/* ---------- 2 ARBEITEN ---------- */
.work{position:relative; background:var(--stage); color:var(--on-stage)}
.work__pin{position:relative; overflow:hidden; min-height:100vh; display:flex; flex-direction:column; background:var(--tint-now, var(--stage)); transition:background-color .7s var(--ease)}
.work__head{display:flex; align-items:flex-end; justify-content:space-between; gap:1.5rem; padding-top:calc(var(--hdr) + 5vh)}
.work__head .h2{font-size:clamp(2.3rem,4.4vw,4.6rem)}
.work__meta{display:grid; justify-items:end; gap:0.75rem; padding-bottom:0.5rem}
.work__count{display:flex; align-items:baseline; gap:0.5rem; font:700 0.9375rem/1 var(--f-display); color:var(--on-stage-2)}
.work__count b{font-size:2.3rem; color:var(--acc-now, var(--stage-accent)); letter-spacing:-.03em; font-variant-numeric:tabular-nums}
.work__cells{display:flex; gap:0.3125rem}
.work__cells i{width:1.375rem; height:0.375rem; border-radius:1px; background:var(--on-stage-line); transition:background-color .4s}
.work__cells i.on{background:var(--acc-now, var(--stage-accent))}
.work__track{flex:1; display:flex; align-items:center; gap:7vw; padding:4vh calc((100% - min(76.25rem, 84vw)) / 2) 7vh}
.case{flex:0 0 min(76.25rem, 84vw); display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); gap:4.5vw; align-items:center}
.case__media{position:relative; padding:0 8% 6% 0}
.dev{border-radius:0.875rem; overflow:hidden; background:#151C28; box-shadow:0 2.5rem 5.625rem -2.5rem rgba(0,0,0,.85), 0 0 0 1px rgba(255,255,255,.06)}
.work .bar{background:#151C28; border-bottom-color:#232C3B}
.work .bar i{background:#343F52}
.work .url{background:#0D131D; color:#B7C3D6}
.case .phone{position:absolute; right:0; bottom:0; width:23%; z-index:2}
.case__no{display:block; font:700 0.9375rem/1 var(--f-display); letter-spacing:.04em; color:var(--acc); margin-bottom:1.125rem}
.case__name{font:700 clamp(2.2rem,3.7vw,4rem)/.98 var(--f-display); letter-spacing:-.04em; margin-bottom:0.875rem; text-wrap:balance}
.case__meta{font-weight:600; color:var(--on-stage-2); margin-bottom:1.25rem}
.case__line{font-size:1.125rem; line-height:1.6; max-width:34ch; margin-bottom:1.5rem}
.tags{display:flex; flex-wrap:wrap; gap:0.5rem; margin-bottom:1.875rem}
.tags li{padding:0.4375rem 0.8125rem; border:1px solid var(--on-stage-line); border-radius:62.4375rem; font-size:0.8438rem; font-weight:600; color:var(--on-stage)}
.case__link{display:inline-flex; align-items:center; gap:0.5rem; font-weight:700; color:var(--acc); text-decoration:none; padding-bottom:0.25rem; border-bottom:1.5px solid color-mix(in srgb, var(--acc) 45%, transparent)}
.case__link svg{width:1.125rem; height:1.125rem; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; transition:transform .25s var(--ease)}
.case__link:hover svg{transform:translate(0.1875rem,-0.1875rem)}
.case--end{grid-template-columns:1fr; place-items:center; min-height:52vh}
.end{max-width:38.75rem; text-align:center; display:grid; justify-items:center; gap:1.25rem}
.end__k{font:700 0.8125rem/1 var(--f-body); letter-spacing:.14em; text-transform:uppercase; color:var(--acc)}
.end__h{font:700 clamp(2.6rem,5vw,5.2rem)/.96 var(--f-display); letter-spacing:-.045em; text-wrap:balance}
.end__p{font-size:1.15rem; color:var(--on-stage-2); max-width:36ch}

/* ---------- 3 LEISTUNGEN ---------- */
.svc{padding-block:clamp(6rem,12vw,10.625rem) clamp(5rem,10vw,8.75rem); background:var(--paper)}
.stack{display:grid; gap:1.75rem}
.card{position:sticky; top:calc(var(--hdr) + 1.5rem); display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.12fr); min-height:min(40rem, calc(100vh - var(--hdr) - 3.75rem)); border-radius:var(--r-l); overflow:hidden; background:var(--paper-2); box-shadow:var(--sh-card); transform-origin:50% 0}
.card--b{top:calc(var(--hdr) + 2.375rem); background:var(--stage); color:var(--on-stage)}
.card--c{top:calc(var(--hdr) + 3.25rem); background:var(--paper-3)}
.card__text{padding:clamp(1.75rem,4.2vw,4rem); display:flex; flex-direction:column; justify-content:center; gap:1.375rem}
.card__h{font:700 clamp(2.5rem,4.6vw,4.8rem)/.95 var(--f-display); letter-spacing:-.045em}
.card__p{font-size:1.15rem; line-height:1.6; color:var(--ink-2); max-width:36ch}
.card--b .card__p{color:var(--on-stage-2)}
.card__rows{max-width:26.25rem}
.card__rows li{display:flex; justify-content:space-between; gap:1rem; padding:0.8125rem 0; border-top:1px solid var(--line-2); font-weight:600}
.card--b .card__rows li{border-top-color:var(--on-stage-line)}
.card__rows b{font-family:var(--f-display); font-weight:700; white-space:nowrap}
.card--b .more{color:var(--stage-accent)}
.card__vis{position:relative; overflow:hidden; min-height:21.25rem}
.vis-web .dev--card{position:absolute; left:8%; top:13%; width:100%; border-radius:0.875rem; box-shadow:var(--sh-float)}
.vis-web .dev--card .view{aspect-ratio:16/10.5}
.vis-web .phone--card{position:absolute; left:4%; bottom:-6%; width:25%; z-index:2; --dur:19s; --del:-6s}
.vis-web .dev--card .pan{--dur:26s}
.vis-shop{display:grid; place-items:center; background:radial-gradient(120% 90% at 70% 30%, #16305A 0%, transparent 60%)}
.phone--shop{position:relative; width:min(16.875rem, 46%); margin-block:2.5rem; --dur:16s}
.toast{position:absolute; display:grid; gap:0.25rem; min-width:13.125rem; padding:0.875rem 1rem; border-radius:0.875rem; background:#FFFFFF; color:#0A1A30; box-shadow:var(--sh-float); font-size:0.875rem; line-height:1.3}
.toast b{font:700 0.9375rem/1.2 var(--f-display)}
.toast span{color:#44536B; font-weight:500}
.toast--1{left:6%; top:20%; animation:toast 7s var(--ease) infinite}
.toast--2{right:6%; bottom:18%; animation:toast 7s var(--ease) 3.5s infinite}
@keyframes toast{0%{opacity:0; transform:translateY(0.875rem)} 10%,72%{opacity:1; transform:none} 84%,100%{opacity:0; transform:translateY(-0.5rem)}}
.meter{display:block; height:0.375rem; border-radius:0.375rem; background:#E6ECF5; overflow:hidden}
.meter i{display:block; height:100%; width:70%; background:#1F9D55; border-radius:0.375rem; animation:meter 7s var(--ease) 3.5s infinite}
@keyframes meter{0%,12%{width:38%} 46%,100%{width:70%}}
.vis-it{display:grid; place-items:center; padding:2.25rem}
.net{position:relative; width:min(32.5rem,100%); aspect-ratio:4/3}
.net__lines{position:absolute; inset:0; width:100%; height:100%; overflow:visible}
.net__lines path{fill:none; stroke:var(--line-2); stroke-width:2; stroke-dasharray:5 7; vector-effect:non-scaling-stroke}
.net__lines{z-index:0}
.net__node{position:absolute; z-index:2; width:44%; padding:0.875rem 1rem; border-radius:0.875rem; background:var(--paper); border:1px solid var(--line-2); display:grid; gap:0.1875rem; box-shadow:0 0.875rem 1.875rem -1.375rem rgba(10,26,48,.5); transform:translateY(-50%)}
.net__node b{font:700 0.9375rem/1.2 var(--f-display)}
.net__node span{font-size:0.8438rem; color:var(--ink-2); font-weight:500; overflow-wrap:anywhere}
.n1{left:0; top:23%} .n2{right:0; top:23%} .n3{left:0; top:77%} .n4{right:0; top:77%}
.n4 span::before{content:""; display:inline-block; width:0.4375rem; height:0.4375rem; border-radius:50%; background:var(--live); margin-right:0.4375rem; vertical-align:1px}
.sig{position:absolute; z-index:1; width:0.625rem; height:0.625rem; margin:-0.3125rem 0 0 -0.3125rem; border-radius:2px; background:var(--blue)}
.s1{top:23%; animation:sigx 3.4s linear infinite}
.s3{top:77%; animation:sigx 3.4s linear -1.7s infinite; background:var(--bar2)}
.s2{left:72.5%; animation:sigy 3.4s linear -.8s infinite; background:var(--bar1)}
.s4{left:27.5%; animation:sigy 3.4s linear -2.5s infinite; background:var(--bar2)}
@keyframes sigx{0%{left:27.5%; opacity:0} 12%{opacity:1} 88%{opacity:1} 100%{left:72.5%; opacity:0}}
@keyframes sigy{0%{top:23%; opacity:0} 12%{opacity:1} 88%{opacity:1} 100%{top:77%; opacity:0}}
.extras{margin-top:clamp(2.5rem,5vw,4rem); display:flex; flex-wrap:wrap; align-items:center; gap:0.875rem 1.375rem}
.extras__h{font:700 0.8125rem/1 var(--f-body); letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3)}
.chips{display:flex; flex-wrap:wrap; gap:0.625rem}
.chips li{padding:0.625rem 1rem; border:1px solid var(--line-2); border-radius:62.4375rem; font-size:0.9375rem; font-weight:600}
.chips b{font-family:var(--f-display); margin-left:0.25rem; color:var(--blue)}

/* ---------- 4 ABLAUF ---------- */
.flow{padding-block:clamp(5rem,10vw,9.375rem); background:var(--paper)}
.flow__body{position:relative}
.flow__rail{position:absolute; left:1.4375rem; right:1.4375rem; top:1.4375rem; height:2px; background:var(--line)}
.flow__fill{position:absolute; inset:0; background:var(--blue); transform-origin:left; transform:scaleX(1)}
.steps{position:relative; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(1.25rem,3vw,2.75rem)}
.step{display:grid; align-content:start; gap:0.75rem}
.step__n{width:3rem; height:3rem; display:grid; place-items:center; border-radius:50%; background:var(--paper); border:2px solid var(--blue); color:var(--blue); font:700 1.125rem/1 var(--f-display); margin-bottom:0.75rem}
.step h3{font:700 clamp(1.4rem,1.9vw,1.8rem)/1.1 var(--f-display); letter-spacing:-.025em}
.step p{color:var(--ink-2); font-size:1.0312rem; line-height:1.55}
.step__t{justify-self:start; margin-top:0.25rem; padding:0.375rem 0.75rem; border-radius:62.4375rem; background:var(--blue-soft); color:var(--blue); font-weight:700; font-size:0.8438rem}

/* ---------- 5 ÜBER MICH ---------- */
.about{background:var(--paper)}
.about__stage{position:relative; overflow:hidden; height:min(86vh, 53.75rem); min-height:35rem; background:var(--paper-2)}
.about__word{position:absolute; z-index:1; left:0; right:0; top:15%; font:700 clamp(5rem,19.5vw,24rem)/.82 var(--f-display); letter-spacing:-.055em; color:var(--ink); text-align:center; white-space:nowrap; pointer-events:none}
.about__word span{display:inline-block; will-change:transform}
.about__img{position:absolute; z-index:2; bottom:0; left:0; right:0; margin-inline:auto; height:92%; width:auto; max-width:none;
  -webkit-mask-image:linear-gradient(to right, transparent 0, #000 13%, #000 87%, transparent 100%), linear-gradient(to bottom, #000 70%, transparent 100%);
  -webkit-mask-composite:source-in; mask-image:linear-gradient(to right, transparent 0, #000 13%, #000 87%, transparent 100%), linear-gradient(to bottom, #000 70%, transparent 100%); mask-composite:intersect}
.about__tag{position:absolute; z-index:3; bottom:clamp(1.25rem,4vh,2.75rem); display:grid; gap:0.25rem; max-width:16.25rem; padding:0.875rem 1.125rem; border-radius:0.875rem; background:var(--paper); box-shadow:var(--sh-float)}
.about__tag b{font:700 0.9375rem/1.2 var(--f-display)}
.about__tag span{font-size:0.875rem; font-weight:500; color:var(--ink-2); line-height:1.35; overflow-wrap:anywhere; hyphens:auto}
.about__tag--l{left:var(--gutter)} .about__tag--r{right:var(--gutter)}
.about__grid{display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); gap:clamp(2rem,6vw,6rem); padding-block:clamp(4rem,8vw,7.5rem) clamp(6rem,11vw,10rem)}
.about__text p:not(.label){font-size:1.2rem; line-height:1.65; color:var(--ink-2); max-width:44ch; margin-top:1.625rem}
.facts li{display:grid; gap:2px; padding:1rem 0; border-top:1px solid var(--line)}
.facts b{font:700 1.15rem/1.25 var(--f-display)}
.facts span{font-size:0.9375rem; color:var(--ink-2); font-weight:500}
.quote{margin:1.625rem 0; font:600 clamp(1.3rem,1.8vw,1.6rem)/1.3 var(--f-display); letter-spacing:-.02em}

/* ---------- 6 PREISE ---------- */
.price{padding-block:clamp(6rem,12vw,10.625rem); background:var(--paper)}
.calc{display:grid; grid-template-columns:minmax(0,1.65fr) minmax(18.75rem,1fr); gap:clamp(1.5rem,3.4vw,3rem); align-items:start}
.calc__step{font:700 0.8125rem/1 var(--f-body); letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); margin:0 0 1rem}
.calc__step + .pkgs{margin-bottom:2.75rem}
.pkgs{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0.875rem}
.pkg{position:relative; display:grid; align-content:start; gap:0.5rem; text-align:left; padding:1.375rem 1.25rem 1.25rem; border-radius:var(--r-m); border:1.5px solid var(--line-2); background:var(--paper); cursor:pointer; transition:border-color .2s, background-color .2s}
.pkg:hover{border-color:var(--ink-3)}
.pkg[aria-checked="true"]{border-color:var(--blue); background:var(--blue-soft)}
.pkg__name{font:700 1.05rem/1.2 var(--f-display)}
.pkg__price{font:700 clamp(1.9rem,2.6vw,2.5rem)/1 var(--f-display); letter-spacing:-.035em; white-space:nowrap}
.pkg__price small{font-size:.5em; font-weight:600; letter-spacing:0; color:var(--ink-2); margin-right:0.25rem}
.pkg__d{font-size:0.9062rem; line-height:1.45; color:var(--ink-2)}
.pkg__w{font-size:0.8125rem; font-weight:700; color:var(--blue)}
.pkg__tick{position:absolute; top:1rem; right:1rem; width:1.375rem; height:1.375rem; border-radius:50%; border:1.5px solid var(--line-2); display:grid; place-items:center}
.pkg[aria-checked="true"] .pkg__tick{background:var(--blue); border-color:var(--blue)}
.pkg__tick svg{width:0.75rem; height:0.75rem; fill:none; stroke:#fff; stroke-width:3; stroke-linecap:round; stroke-linejoin:round; opacity:0}
.pkg[aria-checked="true"] .pkg__tick svg{opacity:1}
:root[data-ed="dark"] .pkg[aria-checked="true"] .pkg__tick svg{stroke:#06142A}
.mods{display:flex; flex-wrap:wrap; gap:0.625rem}
.mod{display:inline-flex; flex-wrap:wrap; align-items:center; column-gap:0.625rem; row-gap:2px; text-align:left; padding:0.6875rem 1rem; border-radius:62.4375rem; border:1.5px solid var(--line-2); background:var(--paper); font-size:0.9375rem; font-weight:600; cursor:pointer; transition:border-color .2s, background-color .2s}
.mod:hover{border-color:var(--ink-3)}
.mod b{font-family:var(--f-display); color:var(--blue); white-space:nowrap}
.mod[aria-pressed="true"]{border-color:var(--blue); background:var(--blue-soft)}
.mod[aria-pressed="true"]::before{content:""; width:0.5rem; height:0.5rem; border-radius:2px; background:var(--blue)}
.mod:disabled{cursor:not-allowed; opacity:.55}
.mod small{font-size:0.7812rem; font-weight:600; color:var(--ink-3); white-space:nowrap}
.sum{position:sticky; top:calc(var(--hdr) + 1.5rem); padding:clamp(1.5rem,2.6vw,2.25rem); border-radius:var(--r-l); background:var(--stage); color:var(--on-stage)}
.sum__k{font:700 0.7812rem/1 var(--f-body); letter-spacing:.12em; text-transform:uppercase; color:var(--on-stage-2); margin-bottom:0.75rem}
.sum__total{display:flex; align-items:baseline; font:700 clamp(3rem,4.6vw,4.6rem)/1 var(--f-display); letter-spacing:-.045em; font-variant-numeric:tabular-nums}
.sum__total span{font-size:.55em; letter-spacing:0}
.sum__weeks{margin:0.625rem 0 1.25rem; color:var(--stage-accent); font-weight:700}
.sum__list{display:grid; gap:0; margin-bottom:1.375rem}
.sum__list li{display:flex; justify-content:space-between; gap:0.75rem; padding:0.625rem 0; border-top:1px solid var(--on-stage-line); font-size:0.9375rem}
.sum__list li b{font-family:var(--f-display); white-space:nowrap}
.sum__run{padding:1.125rem 0 1.375rem; border-top:1px solid var(--on-stage-line)}
.run{display:grid; gap:0.5rem}
.run label{display:flex; align-items:center; gap:0.625rem; font-size:0.9375rem; cursor:pointer}
.run input{width:1.125rem; height:1.125rem; accent-color:#8FB6FF; margin:0}
.run label b{margin-left:auto; font-family:var(--f-display); white-space:nowrap}
.run__sum{display:flex; justify-content:space-between; margin-top:0.5rem; padding-top:0.625rem; border-top:1px dashed var(--on-stage-line); font-weight:700}
.sum__note{margin-top:0.875rem; font-size:0.8125rem; line-height:1.45; color:var(--on-stage-2)}

/* ---------- 7 BLOG ---------- */
.blog{padding-block:clamp(5rem,10vw,9.375rem); background:var(--paper-2)}
.posts{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(1rem,2vw,1.75rem)}
.post{display:grid; align-content:start; gap:0.875rem; text-decoration:none; cursor:pointer; background:none; border:0; padding:0; text-align:left}
.post__img{position:relative; overflow:hidden; border-radius:var(--r-m); aspect-ratio:16/10; background:var(--paper-3)}
.post__img img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease)}
.post:hover .post__img img{transform:scale(1.045)}
.post__ai{position:absolute; left:0.75rem; bottom:0.75rem; padding:0.3125rem 0.5625rem; border-radius:0.4375rem; background:rgba(6,20,42,.78); color:#fff; font-size:0.75rem; font-weight:700; letter-spacing:.02em}
.post__meta{font-size:0.8438rem; font-weight:600; color:var(--ink-3)}
.post__meta b{color:var(--blue); font-weight:700}
.post__t{font:600 clamp(1.25rem,1.6vw,1.5rem)/1.22 var(--f-display); letter-spacing:-.02em; text-wrap:balance}

/* ---------- 8 KONTAKT + FUSS ---------- */
.contact{background:var(--stage); color:var(--on-stage); padding-block:clamp(6rem,12vw,10.625rem) clamp(4.5rem,8vw,6.875rem)}
.contact__h{font:700 clamp(2.8rem,6.6vw,7rem)/.94 var(--f-display); letter-spacing:-.05em; max-width:13ch; text-wrap:balance}
.contact .accent{color:var(--stage-accent)}
.contact__grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); gap:clamp(2.25rem,6vw,6rem); margin-top:clamp(2.75rem,6vw,5rem); align-items:start}
.lines{display:grid}
.line{display:grid; gap:0.375rem; padding:1.25rem 0; border-top:1px solid var(--on-stage-line); text-decoration:none; color:var(--on-stage)}
a.line:hover b{color:var(--stage-accent)}
.line__k{font:700 0.7812rem/1 var(--f-body); letter-spacing:.12em; text-transform:uppercase; color:var(--on-stage-2)}
.line b{font:600 clamp(1.45rem,2.3vw,2.1rem)/1.15 var(--f-display); letter-spacing:-.02em; transition:color .2s; overflow-wrap:anywhere}
.lines__note{padding-top:1.125rem; border-top:1px solid var(--on-stage-line); color:var(--on-stage-2); font-size:0.9688rem}
.form{position:relative; display:grid; gap:1.125rem; padding:clamp(1.375rem,2.8vw,2.25rem); border-radius:var(--r-l); background:rgba(234,241,251,.05); border:1px solid var(--on-stage-line)}
.field{display:grid; gap:0.5rem; border:0; margin:0; padding:0; min-width:0}
.field label,.field legend{font-size:0.9062rem; font-weight:700; color:var(--on-stage); padding:0}
.field input,.field textarea{width:100%; padding:0.875rem 1rem; border-radius:0.75rem; border:1.5px solid rgba(234,241,251,.2); background:rgba(3,10,22,.35); color:var(--on-stage); font:500 1rem/1.4 var(--f-body)}
.field textarea{resize:vertical; min-height:7.5rem}
.field input:focus,.field textarea:focus{outline:none; border-color:#8FB6FF; box-shadow:0 0 0 0.1875rem rgba(143,182,255,.25)}
.field input::placeholder,.field textarea::placeholder{color:#8EA2C2}
.field.is-bad input,.field.is-bad textarea{border-color:#FF8A8A}
.topics{display:flex; flex-wrap:wrap; gap:0.5rem; margin-top:2px}
.topics label{position:relative; cursor:pointer}
.topics input{position:absolute; left:0; top:0; width:1px; height:1px; margin:0; opacity:0; pointer-events:none}
.topics span{display:inline-block; padding:0.5625rem 0.9375rem; border-radius:62.4375rem; border:1.5px solid rgba(234,241,251,.22); font-size:0.9062rem; font-weight:600; transition:background-color .2s, border-color .2s}
.topics input:checked + span{background:#FFFFFF; color:#06142A; border-color:#FFFFFF}
.topics input:focus-visible + span{outline:0.1875rem solid #8FB6FF; outline-offset:2px}
.consent{display:flex; gap:0.75rem; align-items:flex-start; font-size:0.875rem; line-height:1.5; color:var(--on-stage-2); cursor:pointer}
.consent input{width:1.25rem; height:1.25rem; margin:1px 0 0; flex:none; accent-color:#8FB6FF}
.consent.is-bad span{color:#FFB3B3}
.hp{position:absolute; left:-624.9375rem; width:1px; height:1px; overflow:hidden}
.form__err{color:#FFB3B3; font-weight:600; font-size:0.9062rem}
.form__note{font-size:0.8125rem; color:var(--on-stage-2)}
.form__prefill{display:flex; justify-content:space-between; gap:0.75rem; align-items:flex-start; padding:0.75rem 0.875rem; border-radius:0.75rem; background:rgba(143,182,255,.12); font-size:0.875rem; line-height:1.45}
.form__prefill button{flex:none; background:none; border:0; color:#8FB6FF; font-weight:700; cursor:pointer; padding:0}
.form__ok{display:grid; gap:0.375rem; padding:1.125rem; border-radius:0.875rem; background:rgba(52,211,153,.12); border:1px solid rgba(52,211,153,.35)}
.form__ok b{font:700 1.3rem/1.2 var(--f-display)}
.foot{background:var(--stage); color:var(--on-stage-2); border-top:1px solid var(--on-stage-line); font-size:0.9375rem}
.foot__grid{display:grid; grid-template-columns:minmax(0,1.6fr) repeat(3,minmax(0,1fr)); gap:2rem; padding-block:3.5rem 2.25rem}
.brand--foot .word .we{color:#FFFFFF} .brand--foot .word .wd{color:#7FB2EC} .brand--foot .mark .r3 rect{fill:#5E93D6}
.foot__brand p{margin-top:1rem; max-width:34ch; line-height:1.55}
.foot__col{display:grid; align-content:start; gap:0.625rem}
.foot__col a{text-decoration:none; color:var(--on-stage)}
.foot__col a:hover{color:#8FB6FF}
.foot__h{font:700 0.7812rem/1 var(--f-body); letter-spacing:.12em; text-transform:uppercase; color:var(--on-stage-2); margin-bottom:0.375rem}
.foot__base{display:flex; flex-wrap:wrap; justify-content:space-between; gap:0.625rem 1.5rem; padding-block:1.375rem 2.125rem; border-top:1px solid var(--on-stage-line); font-size:0.8438rem}

/* ---------- Leser ---------- */
.reader{position:fixed; left:0; right:0; bottom:0; top:calc(var(--hdr) + env(safe-area-inset-top,0px)); z-index:60; background:var(--paper); display:flex; flex-direction:column}
.reader__bar{display:flex; align-items:center; gap:1.125rem; height:3.5rem; flex:none}
.reader__back{display:inline-flex; align-items:center; gap:0.5rem; height:2.5rem; padding:0 0.875rem 0 0.625rem; border-radius:62.4375rem; border:1.5px solid var(--line-2); background:var(--paper); font-weight:700; font-size:0.9375rem; cursor:pointer}
.reader__back svg{width:1.125rem; height:1.125rem; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round}
.reader__prog{flex:1; height:0.1875rem; background:var(--line); border-radius:0.1875rem; overflow:hidden}
.reader__prog i{display:block; height:100%; width:100%; background:var(--blue); transform-origin:left; transform:scaleX(0)}
.reader__scroll{flex:1; overflow:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; border-top:1px solid var(--line)}
.art{max-width:47.5rem; padding-block:2.5rem 6.875rem}
.art__cover{position:relative; border-radius:var(--r-m); overflow:hidden; aspect-ratio:16/9; background:var(--paper-3); margin-bottom:0.75rem}
.art__cover img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.art__note{font-size:0.8125rem; color:var(--ink-3); margin-bottom:1.625rem}
.art__meta{font-size:0.875rem; font-weight:600; color:var(--ink-3); margin:1.125rem 0 0.75rem}
.art__meta b{color:var(--blue)}
.art h1{font:700 clamp(2rem,4vw,3.2rem)/1.04 var(--f-display); letter-spacing:-.035em; text-wrap:balance}
.art__dek{font-size:1.2rem; line-height:1.6; color:var(--ink-2); margin:1.125rem 0 1.625rem}
.art__take{padding:1.125rem 1.375rem; border-radius:var(--r-m); background:var(--paper-2); margin-bottom:2rem}
.art__take p{font-weight:700; margin-bottom:0.5rem}
.art__take li{position:relative; padding-left:1.125rem; margin:0.375rem 0; line-height:1.5}
.art__take li::before{content:""; position:absolute; left:0; top:.62em; width:0.5rem; height:0.1875rem; background:var(--blue)}
.art__body p{margin:0 0 1.1em; line-height:1.72}
.art__body h2{font:700 1.55rem/1.2 var(--f-display); letter-spacing:-.02em; margin:1.8em 0 .6em}
.art__body h3{font:700 1.25rem/1.25 var(--f-display); margin:1.5em 0 .5em}
.art__body ul,.art__body ol{padding-left:1.2em; margin:0 0 1.1em} .art__body ul{list-style:disc} .art__body ol{list-style:decimal}
.art__body li{margin:.3em 0; line-height:1.6}
.art__body a{color:var(--blue)}
.art__src{margin-top:2.5rem; padding-top:1.375rem; border-top:1px solid var(--line); font-size:0.9375rem}
.art__src h2{font:700 1.2rem/1.2 var(--f-display); margin-bottom:0.75rem}
.art__src li{margin:0.5rem 0; line-height:1.45; color:var(--ink-2)}
.art__src a{color:var(--blue); font-weight:600}
.art__nav{display:flex; justify-content:space-between; gap:1rem; margin-top:2.75rem; flex-wrap:wrap}


/* ---------- Große Bildschirme: gleiche Proportionen wie bei 1440 px, nur größer ---------- */
@media (min-width:1441px){
  :root{--max:90rem}
  .h2{font-size:4.68rem} .work__head .h2{font-size:3.96rem} .nav{gap:1.71rem}
  .hero__copy{width:38.7rem} .hero__h{font-size:5.31rem} .hero__lead{font-size:1.215rem}
  .work__track{gap:6.3rem; padding-inline:calc((100% - 75.6rem) / 2)} .case{flex-basis:75.6rem; gap:4.05rem}
  .case__name{font-size:3.33rem} .end__h{font-size:4.5rem}
  .card__text{padding:3.78rem} .card__h{font-size:4.14rem}
  .flow{padding-block:9rem} .steps{gap:2.7rem} .step h3{font-size:1.71rem}
  .about__word{font-size:17.55rem} .about__grid{gap:5.4rem; padding-block:7.2rem 9.9rem}
  .pkg__price{font-size:2.34rem} .sum__total{font-size:4.14rem}
  .blog{padding-block:9rem} .post__t{font-size:1.44rem}
  .contact__h{font-size:5.94rem} .contact__grid{gap:5.4rem} .line b{font-size:2.07rem}
}
/* ---------- Tablet und Handy ---------- */
@media (max-width:1023px){
  .hero__pin,.hero__grid{min-height:0}
  .hero__grid{display:block; padding-top:calc(var(--hdr) + 1.625rem)}
  .hero__copy{width:auto; max-width:40rem; padding-block:0.75rem 0}
  /* Eine ruhige Zweier-Komposition: ein Browserfenster, ein Handy, beide ganz im Bild */
  .hero__wall{position:relative; left:auto; right:auto; top:auto; bottom:auto; height:auto; aspect-ratio:4/3; max-height:26rem; width:calc(100% - 2*var(--gutter)); margin:2.25rem auto 0}
  .hero__cue{display:none}
  .hero__wall .win--b1,.hero__wall .win--b2,.hero__wall .phone--2{display:none}
  .win--main{left:0; top:8%; width:80%}
  .phone--1{left:auto; right:1%; top:15%; width:26%}
  .work__pin{padding-bottom:5.625rem; min-height:0; display:block}
  .work__head{padding-top:clamp(5rem,12vw,7.5rem)}
  .work__track{flex-direction:column; align-items:stretch; gap:5.25rem; padding:2.75rem var(--gutter) 0}
  .case{flex:none; grid-template-columns:minmax(0,1fr); gap:1.875rem}
  .case__media{padding:0 0 1.5rem 0}
  .case .phone{right:0; bottom:0; width:30%}
  .case .pan{animation:pan var(--dur,24s) var(--ease-io) var(--del,0s) infinite alternate; animation-play-state:paused}
  .case.in .pan{animation-play-state:running}
  .case .phone .pan{--dur:17s}
  .case--end{min-height:0; padding:1.875rem 0 0.625rem}
  .card{position:relative; top:auto; grid-template-columns:minmax(0,1fr); min-height:0}
  .card__vis{min-height:clamp(18.75rem, 70vw, 30rem)}
  .vis-web .dev--card{left:5%; top:9%; width:92%}
  .vis-web .phone--card{left:auto; right:5%; bottom:6%; width:28%}
  .vis-shop .phone--shop{width:min(16rem, 42%); margin-block:2.5rem}
  .flow__rail{left:1.4375rem; right:auto; top:1.4375rem; bottom:1.4375rem; width:2px; height:auto}
  .flow__fill{transform-origin:top}
  .steps{grid-template-columns:minmax(0,1fr); gap:2.125rem}
  .step{grid-template-columns:3rem minmax(0,1fr); column-gap:1.25rem}
  .step__n{grid-row:span 4; margin:0}
  .about__grid{grid-template-columns:minmax(0,1fr)}
  .calc{grid-template-columns:minmax(0,1fr)}
  .sum{position:relative; top:auto}
  .contact__grid{grid-template-columns:minmax(0,1fr)}
  .foot__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .foot__brand{grid-column:1/-1}
}
@media (max-width:760px){
  body{font-size:1.0625rem}
  .hero__facts li{min-width:0; padding:0.875rem 0.75rem 0 0}
  .hero__facts li + li{padding-left:0.75rem}
  .hero__facts b{font-size:1.2rem}
  .hero__facts span{font-size:0.8125rem}
  .btn--lg{height:3.375rem; padding:0 1.375rem; font-size:1rem}
  .hero__cta .btn{flex:1 1 100%}
  .work__head{display:block}
  .work__meta{display:none}
  .pkgs{grid-template-columns:minmax(0,1fr)}
  .posts{display:flex; overflow-x:auto; scroll-snap-type:x mandatory; gap:1rem; margin-right:calc(-1*var(--gutter)); padding-right:var(--gutter); padding-bottom:0.5rem}
  .post{flex:0 0 min(82%, 21.25rem); scroll-snap-align:start}
  .about__stage{height:clamp(27.5rem, 118vw, 40rem); min-height:0; padding-bottom:5.25rem}
  .about__word{top:20%; font-size:16vw}
  .about__img{height:calc(100% - 7.5rem); bottom:5.25rem}
  .about__tag{bottom:0.75rem; max-width:48%; padding:0.625rem 0.75rem}
  .about__tag b{font-size:0.8438rem} .about__tag span{font-size:0.7812rem}
  .toast{min-width:0; max-width:62%; padding:0.625rem 0.75rem; font-size:0.8125rem}
  .toast--1{left:4%; top:10%} .toast--2{right:4%; bottom:10%}
  .net__node{padding:0.625rem 0.6875rem} .net__node b{font-size:0.8438rem} .net__node span{font-size:0.7812rem}
  .foot__grid{grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.75rem 1.25rem}
  .foot__col:last-child{grid-column:1/-1; display:flex; flex-wrap:wrap; align-items:baseline; gap:0.5rem 1.25rem}
  .foot__col:last-child .foot__h{width:100%; margin-bottom:0}
}
/* ---------- Handy: Abstände zusammenziehen ---------- */
@media (max-width:760px){
  .sec-head{margin-bottom:2rem}
  .hero__h{margin-bottom:1.25rem}
  .hero__cta{margin-bottom:1.75rem}
  .hero__wall{margin-top:1.75rem}
  .work__head{padding-top:3.5rem}
  .work__track{gap:3rem; padding-top:1.75rem}
  .work__pin{padding-bottom:3rem}
  .case{gap:1.25rem}
  .svc{padding-block:3.5rem 3rem}
  .stack{gap:1rem}
  .extras{margin-top:2rem}
  .flow{padding-block:3rem}
  .steps{gap:1.5rem}
  .about__grid{padding-block:2.5rem 3rem; gap:1.75rem}
  .about__text p:not(.label){margin-top:1.25rem}
  .quote{margin:1.25rem 0}
  .price{padding-block:3.5rem}
  .calc__step + .pkgs{margin-bottom:2rem}
  .blog{padding-block:3rem}
  .contact{padding-block:3.5rem 2.5rem}
  .contact__grid{margin-top:2rem; gap:2rem}
  .foot__grid{padding-block:2.5rem 1.5rem}
  .foot__base{padding-block:1.25rem 2rem}
}
@media (max-width:420px){
  .hero__facts{flex-wrap:nowrap}
  .word{font-size:1.15rem}
}

/* ---------- Ruhig: reduzierte Bewegung und ?static=1 ---------- */
@media (prefers-reduced-motion:reduce){
  .pan,.pan--auto,.hero .pan,.case .pan,.sig,.hero__cue span,.toast,.meter i{animation:none!important}
  .sig{display:none}
}
html.static .pan,html.static .sig,html.static .hero__cue span,html.static .toast,html.static .meter i{animation:none!important}

/* ---------- Erfti: KI-Assistent ---------- */
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.erfti-fab{position:fixed; right:1.375rem; bottom:calc(1.375rem + env(safe-area-inset-bottom,0px)); z-index:66; display:inline-flex; align-items:center; gap:0.625rem; padding:0.5rem 1.125rem 0.5rem 0.5rem; border-radius:999px; border:1.5px solid var(--line-2); background:var(--paper); color:var(--ink); font:700 0.95rem/1 var(--f-body); cursor:pointer; box-shadow:var(--sh-float); transition:transform .2s var(--ease), border-color .2s}
.erfti-fab:hover{transform:translateY(-2px); border-color:var(--blue)}
.erfti-fab img{width:2.5rem; height:2.5rem; display:block}
.erfti{position:fixed; right:1.375rem; bottom:calc(1.375rem + env(safe-area-inset-bottom,0px)); z-index:67; width:min(25rem, calc(100vw - 2rem)); height:min(37.5rem, calc(100vh - var(--hdr) - 2.5rem)); display:flex; flex-direction:column; overflow:hidden; border-radius:var(--r-l); background:var(--paper); border:1px solid var(--line); box-shadow:var(--sh-float)}
.erfti__hd{display:flex; align-items:center; gap:0.75rem; padding:0.875rem 1rem; background:var(--stage); color:var(--on-stage)}
.erfti__hd img{width:2.75rem; height:2.75rem; flex:none}
.erfti__hd b{display:block; font:700 1.05rem/1.1 var(--f-display)} .erfti__hd small{display:block; color:var(--on-stage-2); font-size:0.8rem; margin-top:2px}
.erfti__hd .iconbtn{margin-left:auto; flex:none; border-color:var(--on-stage-line)} .erfti__hd .iconbtn svg{stroke:var(--on-stage)}
.erfti__log{flex:1; overflow-y:auto; overscroll-behavior:contain; padding:1rem; display:grid; gap:0.625rem; align-content:start; background:var(--paper-2)}
.msg{max-width:88%; padding:0.625rem 0.875rem; border-radius:1rem; font-size:0.95rem; line-height:1.5; white-space:pre-wrap; overflow-wrap:anywhere}
.msg--bot{justify-self:start; background:var(--paper); border:1px solid var(--line); border-bottom-left-radius:0.375rem}
.msg--me{justify-self:end; background:var(--blue); color:#fff; border-bottom-right-radius:0.375rem}
:root[data-ed="dark"] .msg--me{color:#06142A}
.msg--sys{justify-self:center; max-width:100%; font-size:0.8rem; color:var(--ink-3); background:none; padding:0.25rem 0; text-align:center}
.typing{display:inline-flex; gap:4px; padding:2px 0} .typing i{width:6px; height:6px; border-radius:50%; background:var(--ink-3); animation:typ 1s ease-in-out infinite} .typing i:nth-child(2){animation-delay:.15s} .typing i:nth-child(3){animation-delay:.3s}
@keyframes typ{0%,80%,100%{opacity:.25; transform:translateY(0)} 40%{opacity:1; transform:translateY(-3px)}}
.erfti__chips{display:flex; flex-wrap:wrap; gap:0.375rem; padding:0 1rem 0.625rem; background:var(--paper-2)}
.erfti__chips button{font:600 0.8rem/1 var(--f-body); padding:0.5rem 0.75rem; border-radius:999px; border:1px solid var(--line-2); background:var(--paper); color:var(--ink-2); cursor:pointer}
.erfti__chips button:hover{border-color:var(--blue); color:var(--blue)}
.erfti__in{display:flex; gap:0.5rem; margin:0; padding:0.75rem; border-top:1px solid var(--line); background:var(--paper)}
.erfti__in input{flex:1; min-width:0; font:500 16px/1.4 var(--f-body); padding:0.625rem 0.8rem; border-radius:0.75rem; border:1.5px solid var(--line-2); background:var(--paper); color:var(--ink)}
.erfti__in input:focus{outline:none; border-color:var(--blue); box-shadow:0 0 0 3px rgba(36,86,220,.18)}
.erfti__in .btn{padding:0 0.875rem}
.erfti__note{margin:0; padding:0 0.875rem 0.75rem; font-size:0.72rem; line-height:1.4; color:var(--ink-3); background:var(--paper)}
.msg--opts{display:grid; gap:0.375rem; max-width:92%} .msg--opts span{font-size:0.8rem; color:var(--ink-3)}
.msg--opts button{font:600 0.85rem/1.3 var(--f-body); text-align:left; padding:0.5rem 0.75rem; border-radius:0.75rem; border:1px solid var(--line-2); background:var(--paper-2); color:var(--ink); cursor:pointer}
.msg--opts button:hover{border-color:var(--blue); color:var(--blue)}
.erfti__hand{display:flex; flex-wrap:wrap; gap:0.5rem; margin-top:0.625rem}
.erfti__hand .btn{height:2.25rem; padding:0 0.875rem; font-size:0.85rem}
@media (max-width:560px){ .erfti{right:0.5rem; left:0.5rem; bottom:0.5rem; width:auto; height:min(80vh, calc(100vh - var(--hdr) - 1rem))} .erfti-fab span{display:none} .erfti-fab{padding:0.5rem} }
@media (prefers-reduced-motion:reduce){ .typing i{animation:none} }

/* ---------- nur echte Seite: Rechtstexte und 404 ---------- */
body.plain{min-height:100vh; min-height:100dvh; display:flex; flex-direction:column}
body.plain .foot{margin-top:auto}
main.legal{width:min(51.25rem, calc(100% - 2*var(--gutter))); margin:0 auto; padding:calc(var(--hdr) + clamp(2.5rem,7vw,5.5rem)) 0 6rem}
main.legal h1{font:700 clamp(2.2rem,4.4vw,3.4rem)/1.02 var(--f-display); letter-spacing:-.035em; margin:0 0 1.875rem}
main.legal h2{font:700 1.45rem/1.2 var(--f-display); letter-spacing:-.02em; margin:2.5rem 0 0.75rem}
main.legal h3{font:700 1.15rem/1.25 var(--f-display); margin:1.625rem 0 0.5rem}
main.legal p,main.legal li{color:var(--ink-2); line-height:1.7; font-size:1.02rem}
main.legal p{margin:0 0 0.875rem} main.legal ul,main.legal ol{margin:0 0 1rem 1.2em; list-style:disc} main.legal ol{list-style:decimal}
main.legal a{color:var(--blue); text-decoration:underline; text-underline-offset:0.1875rem; overflow-wrap:anywhere}
/* Admin-Leiste (nur eingeloggt, nur Unterseiten): Kopfzeile darunter */
body.admin-bar .hdr{top:2rem} body.admin-bar .mnav{top:calc(var(--hdr) + 2rem)}
@media (max-width:782px){ body.admin-bar .hdr{top:46px} body.admin-bar .mnav{top:calc(var(--hdr) + 46px)} }