/* du.digital — Stylesheet aus den Design-Boards („Ganze Website“). Inter selbst gehostet.
   Breakpoints 734 / 1068 px. Blau #0A6CFF nur für Punkt-Quadrat, Bullets, Textlinks, aktive Nav. */
@font-face{font-family:Inter;font-style:normal;font-weight:400;font-display:swap;src:url("fonts/inter-latin-400-normal.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}
@font-face{font-family:Inter;font-style:normal;font-weight:400;font-display:swap;src:url("fonts/inter-latin-ext-400-normal.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+1EF2-1EFF,U+20A0-20AB,U+20AD-20C0,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Inter;font-style:normal;font-weight:500;font-display:swap;src:url("fonts/inter-latin-500-normal.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}
@font-face{font-family:Inter;font-style:normal;font-weight:500;font-display:swap;src:url("fonts/inter-latin-ext-500-normal.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+1EF2-1EFF,U+20A0-20AB,U+20AD-20C0,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Inter;font-style:normal;font-weight:600;font-display:swap;src:url("fonts/inter-latin-600-normal.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}
@font-face{font-family:Inter;font-style:normal;font-weight:600;font-display:swap;src:url("fonts/inter-latin-ext-600-normal.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+1EF2-1EFF,U+20A0-20AB,U+20AD-20C0,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Inter;font-style:normal;font-weight:700;font-display:swap;src:url("fonts/inter-latin-700-normal.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}
@font-face{font-family:Inter;font-style:normal;font-weight:700;font-display:swap;src:url("fonts/inter-latin-ext-700-normal.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+1EF2-1EFF,U+20A0-20AB,U+20AD-20C0,U+2C60-2C7F,U+A720-A7FF}
body{margin:0;background:#FFFFFF}
.pg{width:100%;background:#FFFFFF;color:#1D1D1F;font-family:Inter,-apple-system,system-ui,sans-serif;-webkit-font-smoothing:antialiased;font-size:17px;line-height:1.47;overflow-x:clip}
.pg *{box-sizing:border-box}
:where(.pg) a{color:#0A6CFF;text-decoration:none}
:where(.pg) p{margin:0}
.wrap{max-width:1120px;margin:0 auto;padding:0 20px}
.narrow{max-width:780px}
.c{text-align:center}
.mx{margin-left:auto;margin-right:auto}

/* type */
.h1{margin:0;font-size:44px;font-weight:700;letter-spacing:-0.035em;line-height:1.05}
.h2{margin:0;font-size:34px;font-weight:700;letter-spacing:-0.03em;line-height:1.08}
.h3{margin:0;font-size:24px;font-weight:700;letter-spacing:-0.025em;line-height:1.12}
.lead{font-size:19px;line-height:1.45;color:#6E6E73}
.mut{color:#6E6E73}
.eye{font-size:17px;font-weight:600;color:#6E6E73;margin:0 0 10px}
.small{font-size:14px;line-height:1.45;color:#6E6E73}
.price{font-size:28px;font-weight:600;letter-spacing:-0.02em;color:#1D1D1F}
.sq{display:inline-block;width:0.18em;height:0.18em;background:#0A6CFF;margin-left:0.05em}
.hsq{animation:settle 600ms cubic-bezier(.16,1,.3,1) 380ms both}
@keyframes settle{from{opacity:0;transform:translateY(-0.4em)}to{opacity:1;transform:none}}
@keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.rise{animation:rise 600ms cubic-bezier(.16,1,.3,1) both}
.d1{animation-delay:80ms}.d2{animation-delay:160ms}.d3{animation-delay:240ms}.d4{animation-delay:320ms}

/* buttons + links */
.btn{display:inline-flex;align-items:center;justify-content:center;height:50px;padding:0 26px;border-radius:999px;background:#1D1D1F;color:#FFFFFF!important;font-size:17px;font-weight:500;white-space:nowrap;transition:background 160ms ease,transform 100ms ease}
.btn:hover{background:#333336}
.btn:active{transform:scale(.98)}
.btn.sm{height:30px;padding:0 14px;font-size:13px}
.lnk{display:inline-flex;align-items:center;gap:4px;min-height:44px;color:#0A6CFF;font-size:17px;font-weight:500;white-space:nowrap}
.lnk:hover{text-decoration:underline;text-underline-offset:5px}
.lnk svg{flex:none}
.acts{display:flex;flex-wrap:wrap;align-items:center;gap:8px 28px;margin-top:32px}
.c .acts{justify-content:center}
.micro{margin-top:10px;font-size:13px;color:#6E6E73}

/* sections + tiles */
.sec{padding:72px 0}
.alt{background:#F5F5F7}
.hero{padding:56px 0 64px}
.tile{position:relative;border-radius:24px;background:#FFFFFF;padding:28px;overflow:clip}
.tile.g{background:#F5F5F7}
.tile.k{background:#1D1D1F;color:#F5F5F7}
.tile.k .mut,.tile.k .small{color:#A1A1A6}
.tile.k .lnk{color:#4D94FF}
.g2,.g3,.g4{display:grid;grid-template-columns:minmax(0,1fr);gap:16px}
.ph{display:block;width:100%;height:auto}
.frame{border-radius:24px;overflow:clip;background:#F5F5F7}
.mt8{margin-top:8px}.mt12{margin-top:12px}.mt16{margin-top:16px}.mt24{margin-top:24px}.mt32{margin-top:32px}.mt40{margin-top:40px}.mt48{margin-top:48px}.mt56{margin-top:56px}

/* hairline lists */
.rows{border-top:1px solid #D2D2D7}
.row{display:flex;gap:16px;align-items:baseline;padding:20px 0;border-bottom:1px solid #D2D2D7}
.row .n{flex:none;width:28px;font-size:14px;color:#6E6E73;font-variant-numeric:tabular-nums}
.row b{font-weight:600}
.bul{display:flex;gap:12px;align-items:baseline}
.bul:before{content:"";flex:none;width:6px;height:6px;background:#0A6CFF;transform:translateY(-3px)}

/* service list (home) */
.svc{display:grid;grid-template-columns:minmax(0,1fr) 40px;align-items:center;column-gap:16px;padding:22px 0;border-top:1px solid #D2D2D7;color:#1D1D1F!important}
.svc .sn{font-size:26px;font-weight:700;letter-spacing:-0.03em;line-height:1.1}
.svc .sd{display:block;margin-top:6px;font-size:15px;line-height:1.45;color:#6E6E73}
.svc .sp{display:block;margin-top:8px;font-size:15px;color:#1D1D1F;font-weight:500}
.svc .num{display:none}
.arw{width:40px;height:40px;border-radius:50%;border:1px solid #D2D2D7;display:inline-flex;align-items:center;justify-content:center;color:#1D1D1F;transition:background 160ms ease,border-color 160ms ease,color 160ms ease}
.svc:hover .arw{background:#1D1D1F;border-color:#1D1D1F;color:#FFFFFF}

/* stats */
.stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:1px solid #D2D2D7}
.stat{padding:22px 16px 22px 0;border-bottom:1px solid #D2D2D7}
.stat:nth-child(2n){padding-left:16px;border-left:1px solid #D2D2D7}
.stat b{display:block;font-size:40px;font-weight:700;letter-spacing:-0.035em;line-height:1.05}
.stat span{display:block;margin-top:6px;font-size:14px;line-height:1.4;color:#6E6E73}

/* header: floating bar */
.hd{position:sticky;top:0;z-index:30;padding:10px 10px 0}
.hdi{position:relative;max-width:1180px;margin:0 auto;height:56px;padding:0 6px 0 18px;display:flex;align-items:center;justify-content:space-between;border-radius:999px;background:rgba(255,255,255,.86);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);border:1px solid rgba(0,0,0,.08);box-shadow:0 1px 2px rgba(0,0,0,.04),0 14px 34px -18px rgba(0,0,0,.20)}
.logo{display:inline-flex;align-items:center;gap:10px;line-height:0;color:#1D1D1F!important}
.logo .wm{font-size:11px;font-weight:600;letter-spacing:0.32em;line-height:1;color:#1D1D1F}
.nv{display:none}
.nv a{position:relative;color:#6E6E73;font-size:15px;transition:color 160ms ease}
.nv a:hover{color:#1D1D1F}
.nv a.on{color:#1D1D1F;font-weight:500}
.nv a.on:after{content:"";position:absolute;left:50%;bottom:-11px;width:5px;height:5px;margin-left:-2.5px;background:#0A6CFF}
.nbtn{display:none}
.mm summary{list-style:none;cursor:pointer;width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:background 160ms ease}
.mm summary:hover{background:#F5F5F7}
.mm summary::-webkit-details-marker{display:none}
.mm .ic{position:relative;width:18px;height:10px}
.mm .ic:before,.mm .ic:after{content:"";position:absolute;left:0;right:0;height:1.5px;background:#1D1D1F;transition:transform 240ms cubic-bezier(.16,1,.3,1)}
.mm .ic:before{top:0}.mm .ic:after{bottom:0}
.mm[open] .ic:before{transform:translateY(4.25px) rotate(45deg)}
.mm[open] .ic:after{transform:translateY(-4.25px) rotate(-45deg)}
.mmp{position:absolute;left:0;right:0;top:calc(100% + 8px);background:#FFFFFF;padding:14px 24px 24px;border-radius:26px;border:1px solid rgba(0,0,0,.08);box-shadow:0 30px 50px -24px rgba(0,0,0,.25);animation:mmin 320ms cubic-bezier(.16,1,.3,1) both}
@keyframes mmin{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.mmp a{display:block;padding:7px 0;font-size:26px;font-weight:600;letter-spacing:-0.025em;color:#1D1D1F}
.mmp .btn{display:inline-flex;margin-top:18px;width:100%;padding:0 26px;font-size:17px;font-weight:500;letter-spacing:0}

/* local nav (product pages) */
.ln{position:sticky;top:0;z-index:20;height:52px;background:#FFFFFF;border-bottom:1px solid #E5E5EA}
.ln .wrap{height:100%;display:flex;align-items:center;justify-content:space-between}
.ln .t{font-size:19px;font-weight:600;letter-spacing:-0.015em}

/* details: FAQ + plus tiles */
.fq{border-bottom:1px solid #D2D2D7}
.fq summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:22px 0;font-size:19px;font-weight:600;letter-spacing:-0.01em;line-height:1.3}
.fq summary::-webkit-details-marker{display:none}
.fq p{padding:0 48px 24px 0;color:#6E6E73}
.pl{flex:none;position:relative;width:14px;height:14px;transition:transform 300ms cubic-bezier(.16,1,.3,1)}
.pl:before,.pl:after{content:"";position:absolute;background:currentColor;border-radius:1px}
.pl:before{left:0;right:0;top:6.25px;height:1.5px}
.pl:after{top:0;bottom:0;left:6.25px;width:1.5px}
details[open] > summary .pl{transform:rotate(45deg)}
.px{margin-top:20px}
.px summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:12px;font-size:15px;font-weight:500;color:#1D1D1F}
.px summary::-webkit-details-marker{display:none}
.px .pb{width:36px;height:36px;border-radius:50%;background:#1D1D1F;color:#FFFFFF;display:inline-flex;align-items:center;justify-content:center}
.px .pb .pl{width:12px;height:12px}
.px .pb .pl:before{top:5.25px}.px .pb .pl:after{left:5.25px}
.px[open] summary .lbl{display:none}
.px .body{margin-top:16px;color:#6E6E73;font-size:17px}

/* scroll rail (mobile) */
.rail{display:grid;grid-auto-flow:column;grid-auto-columns:84%;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding:0 20px 8px;margin:0 -20px;scrollbar-width:none}
.rail::-webkit-scrollbar{display:none}
.rail > *{scroll-snap-align:center}

/* phone mockup */
.phone{width:268px;height:548px;border-radius:46px;background:#1D1D1F;padding:9px;box-shadow:0 40px 60px -36px rgba(0,0,0,.45)}
.phone .scr{position:relative;height:100%;border-radius:38px;background:#FFFFFF;overflow:clip;padding:44px 18px 18px}
.phone .isl{position:absolute;top:11px;left:50%;width:84px;height:24px;margin-left:-42px;border-radius:12px;background:#1D1D1F}
.lk{display:flex;align-items:center;justify-content:space-between;height:46px;padding:0 16px;margin-top:8px;border-radius:14px;background:#F5F5F7;font-size:14px;font-weight:500;color:#1D1D1F}
.lk:after{content:"›";color:#86868B;font-size:18px}
.lk.b{background:#1D1D1F;color:#FFFFFF}
.lk.b:after{color:#A1A1A6}

/* browser mockup */
.br{border-radius:14px;background:#FFFFFF;border:1px solid #D2D2D7;overflow:hidden;box-shadow:0 40px 60px -40px rgba(0,0,0,.30)}
.br .bar{height:36px;border-bottom:1px solid #E5E5EA;display:flex;align-items:center;justify-content:center}
.br .url{height:22px;padding:0 40px;border-radius:6px;background:#F5F5F7;font-size:11px;line-height:22px;color:#6E6E73}

/* worksheet mockup */
.sheet{width:100%;max-width:340px;background:#FFFFFF;border-radius:6px;padding:26px 24px 30px;box-shadow:0 1px 0 rgba(0,0,0,.04),0 30px 50px -30px rgba(0,0,0,.30)}
.sheet .ln2{display:flex;gap:10px;align-items:flex-end;margin-top:16px;font-size:13px}
.sheet .ln2 i{flex:1;border-bottom:1px solid #C7C7CC;height:14px}

/* timeline mockup */
.tl{background:#FFFFFF;border-radius:20px;padding:6px 20px}
.tl .it{display:grid;grid-template-columns:48px minmax(0,1fr);gap:12px;padding:16px 0;border-bottom:1px solid #E5E5EA}
.tl .it:last-child{border-bottom:0}
.tl .tm{font-size:13px;color:#6E6E73;font-variant-numeric:tabular-nums;padding-top:2px}
.tl b{display:block;font-size:16px;font-weight:600;letter-spacing:-0.01em}
.tl span{display:block;font-size:14px;color:#6E6E73;margin-top:2px}

/* form */
.fld{display:block;margin-top:16px}
.fld span{display:block;font-size:14px;font-weight:500;margin-bottom:8px}
.in{width:100%;height:52px;border:1px solid #D2D2D7;border-radius:12px;padding:0 16px;font:inherit;font-size:17px;color:#1D1D1F;background:#FFFFFF;transition:border-color 160ms ease}
textarea.in{height:132px;padding:14px 16px;resize:vertical}
.in:focus{outline:none;border-color:#0A6CFF;box-shadow:0 0 0 3px rgba(10,108,255,.18)}
.opts{display:grid;grid-template-columns:minmax(0,1fr);gap:8px}
.opt{position:relative;display:block;cursor:pointer}
.opt input{position:absolute;opacity:0;pointer-events:none}
.opt span{display:flex;align-items:center;justify-content:space-between;min-height:52px;padding:12px 16px;border:1px solid #D2D2D7;border-radius:12px;background:#FFFFFF;font-size:16px;transition:border-color 160ms ease}
.opt span:after{content:"";flex:none;width:18px;height:18px;border-radius:50%;border:1px solid #C7C7CC;margin-left:12px}
.opt input:checked + span{border-color:#1D1D1F;box-shadow:inset 0 0 0 1px #1D1D1F}
.opt input:checked + span:after{border:5px solid #1D1D1F}
.opt input:focus-visible + span{box-shadow:0 0 0 3px rgba(10,108,255,.25)}
.step{display:flex;align-items:baseline;gap:12px}
.step i{font-style:normal;font-size:14px;color:#6E6E73;font-variant-numeric:tabular-nums}
.chk{display:flex;gap:12px;align-items:flex-start;margin-top:20px;font-size:14px;color:#6E6E73}
.chk input{width:20px;height:20px;margin:1px 0 0;accent-color:#1D1D1F;flex:none}

/* footer */
.ft{background:#F5F5F7;padding:40px 0 28px;font-size:12px;line-height:1.5;color:#6E6E73}
.ft .cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 20px;margin-top:28px}
.ft .fh{margin:0 0 8px;font-size:12px;font-weight:600;color:#1D1D1F}
.ft a{display:block;padding:3px 0;color:#424245!important}
.ft a:hover{text-decoration:underline}
.ft .bot{margin-top:32px;padding-top:16px;border-top:1px solid #D2D2D7;display:flex;flex-wrap:wrap;gap:6px 20px}
.ft .bot a{display:inline;padding:0}

@media (min-width:734px){
  .wrap{padding:0 40px}
  .h1{font-size:64px}
  .h2{font-size:48px}
  .h3{font-size:28px}
  .lead{font-size:21px}
  .eye{font-size:19px}
  .sec{padding:104px 0}
  .hero{padding:88px 0 96px}
  .tile{padding:40px;border-radius:28px}
  .frame{border-radius:28px}
  .g2{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
  .g3{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
  .g4{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
  .btn{height:52px;padding:0 28px}
  .stats{grid-template-columns:repeat(4,minmax(0,1fr))}
  .stat,.stat:nth-child(2n){padding:28px 20px;border-left:1px solid #D2D2D7}
  .stat:first-child{padding-left:0;border-left:0}
  .stat b{font-size:48px}
  .rail{grid-auto-flow:row;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-columns:auto;overflow:visible;padding:0;margin:0;gap:20px}
  .opts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ft .cols{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (min-width:1068px){
  .h1{font-size:80px}
  .h2{font-size:56px}
  .h3{font-size:32px}
  .sec{padding:128px 0}
  .hero{padding:112px 0 112px}
  .g3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .g4{grid-template-columns:repeat(4,minmax(0,1fr))}
  .hd{padding:16px 24px 0}
  .hdi{height:64px;padding:0 8px 0 26px}
  .nv{display:flex;gap:34px}
  .nbtn{display:inline-flex;align-items:center;gap:8px;height:48px;padding:0 22px;border-radius:999px;background:#1D1D1F;color:#FFFFFF!important;font-size:15px;font-weight:500;transition:background 160ms ease,transform 100ms ease}
  .nbtn:hover{background:#333336}
  .nbtn:active{transform:scale(.98)}
  .nbtn svg{transition:transform 200ms cubic-bezier(.16,1,.3,1)}
  .nbtn:hover svg{transform:translateX(2px)}
  .mm{display:none}
  .svc{grid-template-columns:56px minmax(0,1fr) minmax(0,1.1fr) 150px 48px;column-gap:24px;min-height:120px;padding:20px 0}
  .svc .num{display:block;font-size:15px;color:#6E6E73}
  .svc .sn{font-size:36px}
  .svc .sd{margin:0;font-size:17px}
  .svc .sp{margin:0;text-align:right;color:#6E6E73;font-weight:400}
  .arw{width:48px;height:48px}
  .split{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;align-items:center}
  .split > .a{grid-column:1 / span 6}
  .split > .b{grid-column:7 / span 6}
  .split.r > .a{grid-column:7 / span 6;order:2}
  .split.r > .b{grid-column:1 / span 6;order:1}
}
@media (prefers-reduced-motion:reduce){.pg *,.pg *:before,.pg *:after{animation:none!important;transition:none!important}}

.strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));max-width:720px;margin:44px auto 0;border-top:1px solid #D2D2D7;border-bottom:1px solid #D2D2D7;text-align:left}
.strip > div{padding:16px 10px}
.strip > div + div{border-left:1px solid #D2D2D7}
.strip .k{font-size:10px;font-weight:600;letter-spacing:0.14em;color:#6E6E73}
.strip .v{margin-top:6px;font-size:13px;color:#6E6E73;line-height:1.3}
.strip .v b{font-size:20px;font-weight:600;letter-spacing:-0.02em;color:#1D1D1F}
.creds{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 24px;margin-top:20px;font-size:14px;color:#6E6E73}
.steps3{display:grid;grid-template-columns:minmax(0,1fr);border-top:1px solid #D2D2D7;text-align:left}
.steps3 > div{padding:18px 0;border-bottom:1px solid #D2D2D7;display:flex;gap:16px;align-items:baseline}
.steps3 .n{flex:none;width:24px;font-size:13px;color:#6E6E73}
.steps3 b{font-size:19px;font-weight:600;letter-spacing:-0.01em}
.steps3 span.s{display:block;font-size:15px;color:#6E6E73}
.bleed{margin:28px -28px -28px}
.vis{height:280px;margin:-28px -28px 24px;display:flex;align-items:center;justify-content:center;overflow:clip}
.vis.w{background:#FFFFFF}
.man{font-size:28px;font-weight:600;letter-spacing:-0.025em;line-height:1.2}
.man .mut{color:#86868B}
.quote{font-size:30px;font-weight:600;letter-spacing:-0.025em;line-height:1.2}
.big{display:block;font-size:44px;font-weight:700;letter-spacing:-0.04em;line-height:1}
.words > div{padding:14px 0;border-bottom:1px solid #D2D2D7;font-size:24px;font-weight:600;letter-spacing:-0.02em}
.words{border-top:1px solid #D2D2D7}
.ideal{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:1px solid #D2D2D7}
.ideal > div{padding:16px 0;border-bottom:1px solid #D2D2D7;font-size:17px;font-weight:500}
.ideal > div:nth-child(2n){padding-left:16px;border-left:1px solid #D2D2D7}
.devs{position:relative;display:flex;justify-content:center;align-items:flex-end}
.devs .br{display:none;width:100%;max-width:700px}
.devs .phone{position:relative}
.ofe{display:grid;grid-template-columns:minmax(0,1fr);gap:8px;margin-top:20px}
.split > .b{margin-top:48px;display:flex;justify-content:center}
.phone,.br,.sheet,.tl{text-align:left}
.fg{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.fg .tile{padding:20px;border-radius:20px}
.fg .h3{font-size:17px!important}
.fg .mut{font-size:14px}
@media (min-width:734px){
  .fg{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
  .fg .tile{padding:32px;border-radius:28px}
  .fg .h3{font-size:21px!important}
  .fg .mut{font-size:17px}
  .strip > div{padding:20px 16px}
  .strip .k{font-size:11px;letter-spacing:0.18em}
  .strip .v{font-size:14px}
  .strip .v b{font-size:24px}
  .steps3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .steps3 > div{display:block;padding:24px 24px 24px 0}
  .steps3 > div + div{padding-left:24px;border-left:1px solid #D2D2D7}
  .steps3 .n{display:block;margin-bottom:6px}
  .bleed{margin:32px -40px -40px}
  .vis{height:320px;margin:-40px -40px 28px}
  .man{font-size:40px}
  .quote{font-size:44px}
  .big{font-size:80px}
  .words > div{font-size:28px}
  .ideal{grid-template-columns:repeat(4,minmax(0,1fr))}
  .ideal > div{padding:20px 16px;border-left:1px solid #D2D2D7}
  .ideal > div:nth-child(4n+1){padding-left:0;border-left:0}
  .devs .br{display:block}
  .devs .phone{position:absolute;right:4%;bottom:-36px;transform:scale(.82);transform-origin:bottom right}
}
@media (min-width:1068px){
  .svc > .in2{display:contents}
  .split > .b{margin-top:0}
  .man{font-size:48px}
  .quote{font-size:56px}
}

.wr{view-timeline-name:--wr;view-timeline-axis:block}
.wr .w{--to:#1D1D1F;color:var(--to)}
.wr .w.m{--to:#86868B}
/* Wort-Reveal: der Farbwert läuft über eine registrierte Custom Property in einen Text-Verlauf (background-clip:text),
   damit der helle Startton kein Kontrastfehler ist; ohne Support bleibt der Text einfach dunkel. */
@property --wc{syntax:"<color>";inherits:false;initial-value:#E1E1E6}
@keyframes wrk{from{--wc:#E1E1E6}to{--wc:var(--to)}}
@supports (animation-timeline: view()) and (background-clip: text){
  .wr .w{color:transparent;background-image:linear-gradient(var(--wc),var(--wc));-webkit-background-clip:text;background-clip:text;animation:wrk linear both;animation-timeline:--wr;animation-range:cover calc(10% + var(--p) * 42%) cover calc(18% + var(--p) * 42%)}
}
@media (prefers-reduced-motion:reduce){.wr .w{animation:none!important;color:var(--to)!important;background:none!important}}

.kf{padding:28px 20px 24px}
.kprog{display:flex;align-items:center;justify-content:space-between;gap:16px}
.kprog .lbl{font-size:13px;color:#6E6E73;font-variant-numeric:tabular-nums}
.kbar{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin-top:12px}
.kbar span{height:3px;border-radius:2px;background:#E5E5EA;position:relative;overflow:hidden}
.kbar span:after{content:"";position:absolute;inset:0;background:#1D1D1F;transform:scaleX(0);transform-origin:left;transition:transform 500ms cubic-bezier(.16,1,.3,1)}
.kbar span[data-on="true"]:after{transform:scaleX(1)}
.stp{animation:kin 460ms cubic-bezier(.16,1,.3,1) both}
@keyframes kin{from{opacity:0;transform:translateX(18px)}to{opacity:1;transform:none}}
.stp h2{margin:28px 0 0}
.stp .sub{margin-top:6px;color:#6E6E73;font-size:15px}
.kopts{display:grid;grid-template-columns:minmax(0,1fr);gap:8px;margin-top:24px}
.kopt{appearance:none;-webkit-appearance:none;display:flex;align-items:center;justify-content:space-between;width:100%;min-height:54px;padding:12px 16px;border:1px solid #D2D2D7;border-radius:14px;background:#FFFFFF;font:inherit;font-size:16px;color:#1D1D1F;text-align:left;cursor:pointer;transition:border-color 160ms ease,box-shadow 160ms ease,background 160ms ease}
.kopt:hover{border-color:#86868B}
.kopt:after{content:"";flex:none;width:20px;height:20px;border-radius:50%;border:1px solid #C7C7CC;margin-left:12px;box-sizing:border-box;transition:border 200ms cubic-bezier(.16,1,.3,1)}
.kopt[aria-checked="true"]{border-color:#1D1D1F;box-shadow:inset 0 0 0 1px #1D1D1F}
.kopt[aria-checked="true"]:after{border:6px solid #1D1D1F}
.kopt:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(10,108,255,.25)}
.kchip{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:20px;padding:12px 16px;border-radius:12px;background:#F5F5F7;font-size:14px;color:#6E6E73}
.kchip b{color:#1D1D1F;font-weight:600}
.kchip button,.kback{appearance:none;border:0;background:none;padding:0;font:inherit;font-size:15px;font-weight:500;color:#0A6CFF;cursor:pointer;min-height:44px}
.kchip button{font-size:14px;min-height:0}
.knav{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:32px;padding-top:20px;border-top:1px solid #E5E5EA}
.knav .btn{border:0;font:inherit;font-size:17px;font-weight:500;cursor:pointer;min-width:132px}
.knav .btn[aria-disabled="true"]{background:#D2D2D7;color:#FFFFFF;cursor:default}
.knav .btn[aria-disabled="true"]:active{transform:none}
.khint{font-size:13px;color:#6E6E73}
.kdone{text-align:center;padding:24px 0 8px}
.kdone .ok{width:64px;height:64px;margin:0 auto;border-radius:50%;background:#1D1D1F;color:#FFFFFF;display:flex;align-items:center;justify-content:center}
.kdone .ok svg{stroke-dasharray:24;stroke-dashoffset:24;animation:kdraw 520ms cubic-bezier(.16,1,.3,1) 160ms forwards}
@keyframes kdraw{to{stroke-dashoffset:0}}
.kside{display:grid;grid-template-columns:minmax(0,1fr);gap:0;margin-top:32px;border-top:1px solid #D2D2D7}
.kside > div{padding:18px 0;border-bottom:1px solid #D2D2D7;display:flex;justify-content:space-between;gap:16px;font-size:15px}
.kside span{color:#6E6E73}
@media (min-width:734px){
  .kf{padding:40px 44px 32px}
  .kopts{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .kopts .kopt:last-child{grid-column:1 / -1}
  .kside{grid-template-columns:repeat(3,minmax(0,1fr));border-bottom:1px solid #D2D2D7}
  .kside > div{display:block;border-bottom:0;padding:20px 20px 20px 0}
  .kside > div + div{padding-left:20px;border-left:1px solid #D2D2D7}
  .kside span{display:block;font-size:13px;margin-bottom:4px}
}
@media (prefers-reduced-motion:reduce){.stp,.kdone .ok svg{animation:none!important;stroke-dashoffset:0}}

.dp{width:262px;border-radius:44px;background:#1D1D1F;padding:9px;box-shadow:0 40px 60px -36px rgba(0,0,0,.45),inset 0 0 0 1px #3A3A3C;text-align:left}
.dp .scr{position:relative;border-radius:36px;overflow:hidden;background:var(--sb)}
.dp .sbar{position:relative;height:44px;display:flex;align-items:center;justify-content:space-between;padding:4px 18px 0 28px;color:var(--st);font-size:14px;font-weight:600;letter-spacing:-0.01em}
.dp .sbar i{position:absolute;top:10px;left:50%;width:74px;height:22px;margin-left:-37px;border-radius:12px;background:#000000}
.dp .sbar .ics{display:flex;align-items:center;gap:4px}
.dp .sbar .ics svg:first-child{width:15px}.dp .sbar .ics svg:nth-child(2){width:13px}.dp .sbar .ics svg:last-child{width:22px}
.dp img{display:block;width:100%;height:auto}
.dp .home{position:absolute;left:50%;bottom:7px;width:96px;height:4px;margin-left:-48px;border-radius:2px;background:var(--st);opacity:.85}
.bri{border-radius:12px;background:#FFFFFF;border:1px solid #D2D2D7;overflow:hidden;box-shadow:0 40px 60px -40px rgba(0,0,0,.30)}
.bri .bar{height:30px;border-bottom:1px solid #E5E5EA;display:flex;align-items:center;justify-content:center}
.bri .url{height:18px;padding:0 34px;border-radius:5px;background:#F5F5F7;font-size:10px;line-height:18px;color:#6E6E73}
.bri img{display:block;width:100%;height:auto}
.show{position:relative;display:flex;justify-content:center;align-items:flex-end}
.show .bri{display:none;width:100%;max-width:760px}
.show.only-d .bri{display:block}
.show .dp{position:relative}
.sw{display:flex;gap:10px;margin-top:20px}
.sw span{width:36px;height:36px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(0,0,0,.10)}
.rail.r4 .vis{height:360px;background:#F5F5F7}
.rail.r4 .vis .dp{flex:none;transform:scale(.6);transform-origin:center center}
.rail.r4 .vis .bri{width:88%;transform:translateY(8px)}
@media (min-width:734px){
  .show .bri{display:block}
  .show:not(.only-m):not(.only-d) .dp{position:absolute;right:3%;bottom:-40px;transform:scale(.86);transform-origin:bottom right}
  .rail.r4{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (min-width:1068px){
  .rail.r4{grid-template-columns:repeat(3,minmax(0,1fr))}
  .rail.r4 .tile{padding:28px}
  .rail.r4 .vis{margin:-28px -28px 24px;height:340px}
}

/* ---------- Ergänzungen zum Board ---------- */
:where(.pg) :is(h1,h2,h3){margin:0;font-weight:700}
:where(.pg) :is(ul,ol){margin:0;padding:0;list-style:none}
:where(.pg) :is(button,input,textarea){font:inherit;color:inherit}
:where(.pg) :focus-visible{outline:2px solid #0A6CFF;outline-offset:3px;border-radius:4px}
:where(.pg) .btn:focus-visible,:where(.pg) .nbtn:focus-visible{outline-offset:4px}
:where(.pg) .in:focus-visible,:where(.pg) .kopt:focus-visible{outline:none}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:fixed;top:12px;left:12px;z-index:50;padding:10px 16px;border-radius:999px;background:#1D1D1F;color:#FFFFFF!important;font-size:14px;font-weight:500;transform:translateY(-300%)}
.skip:focus{transform:none}
[id]{scroll-margin-top:90px}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
/* Blaue Textlinks auf Grau: gleicher Ton, dunkler für 4,5:1 Kontrast (axe) */
.alt .lnk,.tile.g .lnk,.kchip button,.alt .kback,.kside a{color:#0A5EDC}
.tile:not(.g) .lnk,.tile:not(.g) .kback{color:#0A6CFF}
/* Themen als echte Radios (Tastatur + Screenreader), Optik wie .kopt im Board */
.kopt input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.kopt{position:relative}
.kopt:has(input:checked){border-color:#1D1D1F;box-shadow:inset 0 0 0 1px #1D1D1F}
.kopt:has(input:checked):after{border:6px solid #1D1D1F}
.kopt:has(input:focus-visible){box-shadow:0 0 0 3px rgba(10,108,255,.25)}
/* Schritte nur mit JS nacheinander; ohne JS sind alle Felder sichtbar und das Formular sendet nativ */
.js .stp{display:none}
.js .stp.on{display:block}
.kdone{display:none}
.js .kdone.on{display:block}
.stp[hidden]{display:none}
.kprog,.kbar,.fnext,.fback,.kchip{display:none}
.js .kprog{display:flex}.js .kbar{display:grid}.js .fnext,.js .fback{display:inline-flex}.js .kchip{display:flex}
.js .stp + .stp{margin-top:0}
.stp + .stp{margin-top:40px}
.ferr{display:none;margin-top:8px;font-size:14px;font-weight:500;color:#1D1D1F}
.ferr.on{display:flex;gap:8px;align-items:baseline}
.ferr.on:before{content:"";flex:none;width:6px;height:6px;background:#1D1D1F;transform:translateY(-3px)}
.in[aria-invalid="true"]{border-color:#1D1D1F;box-shadow:inset 0 0 0 1px #1D1D1F}
.chk.err span{color:#1D1D1F;font-weight:500}
.knote{margin-top:14px;font-size:14px;color:#6E6E73;min-height:20px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.btn:disabled{background:#D2D2D7;cursor:default}
/* Rechtliches */
.legal h2{margin-top:40px;font-size:21px;font-weight:600;letter-spacing:-0.015em}
.legal h2:first-of-type{margin-top:48px}
.legal p{margin-top:12px;color:#6E6E73}
.legal ul{margin-top:12px;padding-left:20px;list-style:disc;color:#6E6E73}
.legal a{color:#0A6CFF;text-decoration:underline;text-underline-offset:3px}
.legal a:hover{text-decoration-thickness:2px}
/* 404 */
.code{display:block;font-size:96px;font-weight:700;letter-spacing:-0.05em;line-height:1;color:#D2D2D7}
@media (min-width:734px){.code{font-size:140px}}

/* ---------- Bewegung (nur CSS; ohne Unterstützung für Scroll-Timelines bleibt alles einfach sichtbar) ---------- */
/* filter statt opacity: halb eingeblendete Elemente am Falz lösen sonst Kontrast-Fehlalarme (axe) aus */
@keyframes rvin{from{filter:opacity(0);translate:0 22px}to{filter:opacity(1);translate:0 0}}
@keyframes imgin{from{scale:1.06}to{scale:1}}
@keyframes floaty{0%,100%{translate:0 0}50%{translate:0 -8px}}
@keyframes hdsh{to{background:rgba(255,255,255,.8);box-shadow:0 1px 2px rgba(0,0,0,.05),0 18px 40px -18px rgba(0,0,0,.28)}}
@supports (animation-timeline: view()){
  /* Textblöcke und Kacheln steigen beim Hereinscrollen auf */
  .sec .wrap :is(.eye,.h2,.lead):not(.tile *),
  .sec > .wrap > .tile, .split > .b, .rail, .svc, .fq, .sw, .kside > div,
  .steps3 > div, .stats > .stat, .fg > .tile, .g2 > .tile, .g3 > .tile, .ideal > div, .words > div,
  .phone .lk, .tl .it, .sheet .ln2{animation:rvin linear both;animation-timeline:view();animation-range:entry calc(var(--i,0) * 26px) entry calc(200px + var(--i,0) * 26px)}
  :is(.steps3,.stats,.fg,.g2,.g3,.ideal,.words,.tl,.sheet,.phone .scr > div) > :nth-child(2){--i:1}
  :is(.steps3,.stats,.fg,.g2,.g3,.ideal,.words,.tl,.sheet,.phone .scr > div) > :nth-child(3){--i:2}
  :is(.steps3,.stats,.fg,.g2,.g3,.ideal,.words,.tl,.sheet,.phone .scr > div) > :nth-child(4){--i:3}
  :is(.steps3,.stats,.fg,.g2,.g3,.ideal,.words,.tl,.sheet,.phone .scr > div) > :nth-child(5){--i:4}
  :is(.fg,.ideal,.words,.sheet) > :nth-child(6){--i:5} :is(.ideal,.sheet) > :nth-child(7){--i:6} :is(.ideal,.sheet) > :nth-child(8){--i:7}
  /* Fotos kommen minimal größer an und setzen sich */
  .frame > img.ph, .bleed > img.ph, .vis > img.ph{animation:imgin linear both;animation-timeline:view();animation-range:entry 0px entry 420px}
  /* Kopfleiste bekommt beim Scrollen mehr Tiefe */
  .hdi{animation:hdsh linear both;animation-timeline:scroll(root);animation-range:0 160px}
  /* Auf dem Handy ist die Projektreihe ein eigener Scrollbereich: dort keine inneren Scroll-Animationen */
  @media (max-width:733.98px){.rail :is(.it,.ln2,img.ph){animation:none}}
}
.float{animation:floaty 6s ease-in-out infinite}
@media (hover:hover){
  .tile:has(> .lnk, > .acts, .btn){transition:scale 400ms cubic-bezier(.16,1,.3,1),box-shadow 400ms cubic-bezier(.16,1,.3,1)}
  .tile:has(> .lnk, > .acts, .btn):hover{scale:1.012;box-shadow:0 30px 50px -30px rgba(0,0,0,.25)}
  .lnk svg{transition:translate 200ms cubic-bezier(.16,1,.3,1)} .lnk:hover svg{translate:2px 0}
  .svc .sn{transition:translate 300ms cubic-bezier(.16,1,.3,1)} .svc:hover .sn{translate:4px 0}
  .fq summary .pl{transition:transform 300ms cubic-bezier(.16,1,.3,1),scale 200ms ease} .fq summary:hover .pl{scale:1.15}
  .btn{box-shadow:0 0 0 0 rgba(0,0,0,0);transition:background 160ms ease,transform 100ms ease,box-shadow 300ms ease} .btn:hover{box-shadow:0 12px 24px -14px rgba(0,0,0,.45)}
}