/* Seite /webdesign-agentur. Präfix wd-.
   Bewegung kommt aus webdesign.js: Text als Blur-Welle, Blöcke als Treppe.
   Ohne Skript oder bei reduzierter Bewegung ist alles sofort sichtbar. */

.wd{--mint:var(--color-turkis,#1de9b6);--tinte:#0a0e0d;--ld:#ffffff24;--ll:#0a0e0d1f;--ease:cubic-bezier(.22,1,.36,1)}
.wd-main{overflow-x:clip}
.wd-sec{position:relative;padding:clamp(5rem,13svh,9.5rem) 0}
.wd-dark{background:var(--color-ink-900,#0a0e0d);color:#fff;--line:var(--ld);--mut:#ffffffb8;--bg:#0a0e0d;--karte:#ffffff0a}
.wd-ink{background:var(--color-ink-800,#101514);color:#fff;--line:var(--ld);--mut:#ffffffb8;--bg:#101514;--karte:#ffffff0a}
.wd-paper{background:var(--color-paper,#f4f3f0);color:var(--tinte);--line:var(--ll);--mut:#0a0e0db8;--bg:#f4f3f0;--karte:#fff}
.wd-white{background:#fff;color:var(--tinte);--line:var(--ll);--mut:#0a0e0db8;--bg:#fff;--karte:#f4f3f0}
.wd [hidden]{display:none!important}

/* Startzustand, bis das Skript übernimmt (verhindert scharf → unscharf → scharf) */
html.wd-js:not(.wd-fehler):not(.wd-bereit) .wd :is([data-w],[data-hi=w]){opacity:.14;filter:blur(10px)}
html.wd-js:not(.wd-fehler):not(.wd-bereit) .wd :is([data-t],[data-hi=t]){clip-path:inset(100% 0 0 0)}
html.wd-js:not(.wd-fehler):not(.wd-bereit) .wd :is([data-hi=s],[data-ts]){opacity:0}

/* Wörter der Blur-Welle */
.wd-w{display:inline-block}
.wd-nb{white-space:nowrap}
.wd-dot{color:#0000;position:relative}
.wd-dot:after{content:"";background:var(--mint);border-radius:50%;width:.16em;height:.16em;position:absolute;bottom:.211em;left:.07em}
.wd-sep{background:var(--mint);border-radius:50%;width:.3em;height:.3em;margin:0 .7em;display:inline-block;translate:0 -.12em}

/* Köpfe */
body .wd .ds-h.wd-h{margin-top:1.1rem;font-size:clamp(2.2rem,4.4vw,4.4rem);line-height:1}
.wd-head{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:clamp(2rem,5vw,6rem);align-items:end;margin-bottom:clamp(3rem,7svh,5.5rem)}
.wd-head--solo{grid-template-columns:minmax(0,1fr)}
.wd-head--solo .wd-h{max-width:20ch}
.wd-lead{color:var(--mut);font-size:clamp(1.05rem,1.25vw,1.3rem);line-height:1.6;max-width:36em}
.wd-klein{font-family:var(--font-body);font-weight:500;font-size:.75rem;letter-spacing:.22em;text-transform:uppercase}
.wd-cta-row{display:flex;flex-wrap:wrap;align-items:center;gap:1.25rem 2rem;margin-top:clamp(2.5rem,6svh,4rem)}
.wd-cta-row p{font-family:var(--font-display);font-weight:600;letter-spacing:-.02em;font-size:clamp(1.25rem,1.9vw,1.9rem);line-height:1.2}

/* Medien: Bild liegt unten, Video blendet erst ein, wenn es läuft */
.wd-med{position:absolute;inset:0;display:block;overflow:hidden;background:#151b1a}
.wd-med picture{display:contents}
.wd-med img,.wd-med video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 0;display:block}
.wd-med video{opacity:0;transition:opacity .5s}
.wd-med video.is-an{opacity:1}

/* Browser-Rahmen */
.wd-br{background:#141a19;border:1px solid #ffffff1f;display:flex;flex-direction:column;position:relative}
.wd-br-bar{display:flex;align-items:center;gap:.8rem;height:1.9rem;padding:0 .75rem;border-bottom:1px solid #ffffff14;flex:none}
.wd-br-pts{display:flex;gap:.3rem}
.wd-br-pts i{width:.42rem;height:.42rem;border-radius:50%;background:#ffffff38}
.wd-br-url{font-size:.68rem;letter-spacing:.04em;color:#ffffff8f;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wd-br-view{position:relative;aspect-ratio:16/10}

/* Treppenmaske für große Einzelbilder */
.wd-ts{position:relative;overflow:hidden}
.wd-strip{position:absolute;top:-1px;bottom:-1px;background:var(--bg);transform-origin:50% 0;z-index:3;pointer-events:none}

/* ── 01 Hero ───────────────────────────────────────── */
.wd-hero{position:relative;min-height:100vh;min-height:100svh;display:flex;align-items:center;padding:clamp(7.5rem,16svh,10rem) 0 clamp(4rem,9svh,6rem);overflow:clip}
.wd-hero:before{content:"";position:absolute;inset:0;background:radial-gradient(52% 58% at 80% 44%,#1de9b624,#0000 72%);pointer-events:none}
.wd-hero-in{position:relative;z-index:2;width:100%}
.wd-hero-txt{max-width:min(45rem,54%)}
body .wd .ds-h.wd-hero-h{margin-top:1.4rem;font-size:clamp(2.6rem,4.55vw,4.8rem);line-height:.98;text-wrap:balance}
.wd-hero-h>span{display:block}
.wd-hero-sub{margin-top:1.75rem;color:#ffffffc7;font-size:clamp(1.05rem,1.3vw,1.3rem);line-height:1.6;max-width:34em}
.wd-hero-btns{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:2.4rem}
.wd-hero-trust{margin-top:2.4rem;color:#ffffff9e;font-size:.8rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;line-height:1.9}

.wd-stack{position:absolute;z-index:1;left:55.5%;top:54%;width:min(41vw,39rem);perspective:1700px;transform:translateY(-50%);pointer-events:none}
.wd-stack-in{position:relative;aspect-ratio:16/10.75;transform-style:preserve-3d;--f:0;transform:rotateX(calc(13deg - var(--f)*5deg)) rotateY(calc(-25deg + var(--f)*11deg)) rotateZ(calc(5deg - var(--f)*2deg))}
.wd-st-c{position:absolute;inset:0;transform-style:preserve-3d;transform:translate3d(calc(var(--i)*(2.9rem + var(--f)*3.6rem)),calc(var(--i)*(-3.5rem - var(--f)*4.2rem)),calc(var(--i)*-3.6rem))}
.wd-st-i{position:relative;height:100%;box-shadow:0 2.2rem 5rem #000000b3}
.wd-st-i .wd-br{height:100%}
.wd-st-i .wd-br-view{aspect-ratio:auto;flex:1}
.wd-st-i:after{content:"";position:absolute;inset:0;background:#0a0e0d;opacity:calc(var(--i)*.15);pointer-events:none}

/* ── 02 Logos ──────────────────────────────────────── */
.wd-logos{padding:clamp(2.5rem,6svh,4rem) 0 clamp(3.5rem,8svh,5.5rem);border-top:1px solid var(--ld)}
.wd-logos-t{color:#ffffff9e;text-align:center;margin-bottom:clamp(1.8rem,4svh,2.8rem)}
.wd-lauf{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,#0000,#000 9%,#000 91%,#0000);mask-image:linear-gradient(90deg,#0000,#000 9%,#000 91%,#0000)}
.wd-lauf-in{display:flex;width:max-content;animation:wd-lauf 70s linear infinite}
.wd-lauf:hover .wd-lauf-in{animation-play-state:paused}
.wd-lauf ul{display:flex;align-items:center;gap:clamp(2.6rem,5vw,5rem);padding-right:clamp(2.6rem,5vw,5rem);margin:0;list-style:none;flex:none}
.wd-lauf img{height:calc(clamp(22px,2.3vw,35px)*var(--k,1));width:auto;max-width:none;object-fit:contain;filter:brightness(0) invert(1);opacity:.82;display:block}
@keyframes wd-lauf{to{transform:translate3d(-50%,0,0)}}

/* ── 03 Verkäufer ──────────────────────────────────── */
.wd-vk-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.85fr);gap:clamp(2.5rem,7vw,8rem);align-items:start}
.wd-vk-txt p{font-family:var(--font-display);font-weight:500;letter-spacing:-.025em;font-size:clamp(1.45rem,2.25vw,2.2rem);line-height:1.22}
.wd-vk-txt p+p{margin-top:clamp(2.2rem,6svh,4rem)}
.wd-vk-karten{position:sticky;top:16vh;display:grid;gap:1rem}
.wd-vk-k{position:relative;padding:clamp(1.5rem,2.2vw,2.1rem);border:1px solid var(--ll);background:#fff;transition:opacity .5s var(--ease)}
.wd-vk-k h3{font-family:var(--font-display);font-weight:700;letter-spacing:-.03em;font-size:clamp(1.3rem,1.7vw,1.65rem);line-height:1.1}
.wd-vk-k ul{margin:1.1rem 0 0;padding:0;list-style:none;display:grid;gap:.65rem}
.wd-vk-k li{display:flex;align-items:center;gap:.8rem;font-size:1.02rem;font-weight:500}
.wd-vk-k svg{width:1.15rem;height:1.15rem;flex:none}
.wd-vk-k--schlecht{color:#0a0e0d}
.wd-vk-k--schlecht svg{color:#0a0e0d8f}
.wd-vk-k--gut{background:var(--color-ink-900,#0a0e0d);color:#fff;border-color:#0a0e0d}
.wd-vk-k--gut svg{color:var(--mint)}
.wd-vk-karten[data-aktiv=schlecht] .wd-vk-k--gut,.wd-vk-karten[data-aktiv=gut] .wd-vk-k--schlecht{opacity:.34}

/* ── 04 Sechs Faktoren ─────────────────────────────── */
.wd-sig .wd-head{margin-bottom:clamp(2rem,5svh,3.5rem)}
.wd-sig-stage{position:relative;display:grid;gap:1.25rem}
.wd-sig-top{display:none}
.wd-sig-screen{position:relative;max-width:44rem;width:100%;margin:0 auto 1rem}
.wd-sig-hot{display:none}
.wd-sig-svg{display:none}
.wd-sig-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.25rem;margin:0;padding:0;list-style:none}
.wd-sig-card{padding:1.15rem 1.25rem 1.3rem;border:1px solid var(--ld);background:#101514}
.wd-sig-nr{color:var(--mint);display:block}
.wd-sig-card h3{margin-top:.55rem;font-family:var(--font-display);font-weight:700;letter-spacing:-.03em;font-size:clamp(1.15rem,1.4vw,1.4rem);line-height:1.12}
.wd-sig-card p{margin-top:.55rem;color:#ffffffb8;font-size:.92rem;line-height:1.5}
.wd-sig-schluss{margin-top:clamp(3.5rem,9svh,6rem);font-family:var(--font-display);font-weight:600;letter-spacing:-.035em;font-size:clamp(1.7rem,3.3vw,3.3rem);line-height:1.08;max-width:22ch}

@media (min-width:1000px) and (min-height:760px){
  .wd-sig-pin{height:100vh;height:100svh;position:relative}
  .wd-sig-stage{display:block;height:100%}
  .wd-sig-top{display:flex;align-items:center;gap:1.25rem;position:absolute;left:50%;top:6.5%;transform:translateX(-50%);width:min(44%,36rem);color:#ffffff9e}
  .wd-sig-zahl{font-variant-numeric:tabular-nums;white-space:nowrap}
  .wd-sig-zahl b{color:#fff;font-weight:500}
  .wd-sig-bar{flex:1;height:1px;background:var(--ld);position:relative}
  .wd-sig-bar i{position:absolute;inset:0;background:var(--mint);transform:scaleX(0);transform-origin:0 50%}
  .wd-sig-screen{position:absolute;left:50%;top:53%;transform:translate(-50%,-50%);width:min(44%,36rem);margin:0;z-index:2}
  .wd-sig-hot{display:block;position:absolute;width:1.5rem;height:1.5rem;margin:-.75rem 0 0 -.75rem;border:1px solid var(--mint);border-radius:50%;z-index:4}
  .wd-sig-hot:after{content:"";position:absolute;inset:.45rem;border-radius:50%;background:var(--mint)}
  .wd-sig-svg{display:block;position:absolute;inset:0;width:100%;height:100%;z-index:3;pointer-events:none;overflow:visible}
  .wd-sig-svg path{fill:none;stroke:var(--mint);stroke-width:1.25;stroke-dasharray:1;stroke-dashoffset:0}
  .wd-sig-pin>.shell{height:100%}
  .wd-sig-cards{position:absolute;inset:0;display:block;z-index:4;pointer-events:none}
  .wd-sig-card{position:absolute;width:clamp(15rem,20.5vw,19.5rem)}
  .wd-sig-card:nth-child(odd){left:0}
  .wd-sig-card:nth-child(even){right:0}
  .wd-sig-card:nth-child(-n+2){top:11%}
  .wd-sig-card:nth-child(n+3):nth-child(-n+4){top:39.5%}
  .wd-sig-card:nth-child(n+5){top:68%}
}

/* ── 05 Vorher/Nachher ─────────────────────────────── */
.wd-vn-tabs{display:flex;flex-wrap:wrap;gap:.6rem;margin-bottom:1.5rem}
.wd-vn-tab{font:inherit;font-size:.9rem;font-weight:600;padding:.75rem 1.2rem;border:1px solid var(--ll);background:#0000;color:var(--tinte);cursor:pointer;transition:background .3s,color .3s,border-color .3s}
.wd-vn-tab:hover{border-color:#0a0e0d}
.wd-vn-tab[aria-selected=true]{background:#0a0e0d;color:#fff;border-color:#0a0e0d}
.wd-vn-stage{max-width:70rem}
.wd-vn-view{--p:50%;position:relative;aspect-ratio:16/10;overflow:hidden;touch-action:pan-y;cursor:ew-resize;user-select:none;-webkit-user-select:none;background:#151b1a}
.wd-vn-panel{position:absolute;inset:0}
.wd-vn-panel picture{display:contents}
.wd-vn-panel img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 0;display:block;pointer-events:none}
.wd-vn-alt{position:absolute;inset:0;clip-path:inset(0 calc(100% - var(--p)) 0 0)}
.wd-vn-lab{position:absolute;bottom:1rem;z-index:3;padding:.45rem .8rem;background:#0a0e0dd9;color:#fff;pointer-events:none}
.wd-vn-lab--v{left:1rem}
.wd-vn-lab--n{right:1rem;background:var(--mint);color:#0a0e0d}
.wd-vn-griff{position:absolute;top:0;bottom:0;left:var(--p);width:2px;margin-left:-1px;background:#fff;z-index:4;pointer-events:none;box-shadow:0 0 0 1px #0a0e0d26}
.wd-vn-griff span{position:absolute;top:50%;left:50%;width:3.25rem;height:3.25rem;margin:-1.625rem 0 0 -1.625rem;border-radius:50%;background:var(--mint);color:#0a0e0d;display:grid;place-items:center;box-shadow:0 .5rem 1.6rem #0006}
.wd-vn-griff svg{width:1.5rem;height:1.5rem}
.wd-vn-range{position:absolute;inset:0;width:100%;height:100%;opacity:0;margin:0;pointer-events:none}
.wd-vn-range:focus-visible~.wd-vn-griff span{outline:2px solid #0a0e0d;outline-offset:3px}
.wd-vn-cap{margin-top:1.25rem;color:var(--mut);font-size:1.02rem;line-height:1.55;max-width:46em}
.wd-vn-cap strong{color:var(--tinte);font-weight:700}

/* ── 06 Vier Säulen ────────────────────────────────── */
.wd-pf{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--ll);border:1px solid var(--ll)}
.wd-pf-z{position:relative;background:#fff;padding:clamp(1.8rem,3.2vw,3.2rem);overflow:hidden}
.wd-pf-z:before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--mint);transform:scaleX(0);transform-origin:0 50%;transition:transform .6s var(--ease)}
.wd-pf-z:hover:before{transform:scaleX(1)}
.wd-pf-kopf{display:flex;justify-content:space-between;align-items:flex-start}
.wd-pf-ico{width:2.9rem;height:2.9rem;color:#0a0e0d;transition:transform .6s var(--ease)}
.wd-pf-z:hover .wd-pf-ico{transform:translateY(-.4rem)}
.wd-pf-nr{color:#0a0e0d80}
.wd-pf-z h3{margin-top:clamp(1.6rem,4svh,2.6rem);font-family:var(--font-display);font-weight:700;letter-spacing:-.035em;font-size:clamp(1.45rem,2.1vw,2.1rem);line-height:1.08}
.wd-pf-z p{margin-top:.9rem;color:var(--mut);font-size:1.02rem;line-height:1.6;max-width:34em}

/* ── 07 UI und UX ──────────────────────────────────── */
.wd-ux-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:clamp(2.5rem,7vw,8rem);align-items:center}
.wd-ux-grid .wd-lead{margin-top:1.6rem}
.wd-ux-pkt{margin:2.2rem 0 0;padding:0;list-style:none;display:grid;gap:.85rem}
.wd-ux-pkt li{display:flex;align-items:center;gap:.9rem;font-weight:600;font-size:1.05rem}
.wd-ux-pkt li:before{content:"";width:.5rem;height:.5rem;border-radius:50%;background:var(--mint);flex:none}
.wd-ux-buehne{perspective:1200px;display:grid;place-items:center;min-height:clamp(22rem,56svh,32rem)}
.wd-ux-karte{--mx:50%;--my:30%;position:relative;width:min(100%,25.5rem);padding:clamp(1.5rem,2.2vw,2.1rem);background:#141a19;border:1px solid #ffffff24;transform-style:preserve-3d;box-shadow:0 2.5rem 5rem #00000080;overflow:hidden}
.wd-ux-karte:before{content:"";position:absolute;inset:0;background:radial-gradient(22rem circle at var(--mx) var(--my),#1de9b62e,#0000 60%);pointer-events:none}
.wd-ux-karte>*{position:relative}
.wd-ux-l{color:#ffffff9e}
.wd-ux-chips{display:flex;flex-wrap:wrap;gap:.55rem;margin-top:1.3rem}
.wd-ux-chip{font:inherit;font-weight:600;font-size:.95rem;padding:.8rem 1.15rem;border:1px solid #ffffff3d;background:#0000;color:#fff;cursor:pointer;transition:background .3s,color .3s,border-color .3s,transform .3s var(--ease)}
.wd-ux-chip:hover{border-color:#fff;transform:translateY(-2px)}
.wd-ux-chip[aria-pressed=true]{background:var(--mint);border-color:var(--mint);color:#0a0e0d}
.wd-ux-bar{height:2px;background:#ffffff24;margin-top:1.8rem;position:relative}
.wd-ux-bar i{position:absolute;inset:0;background:var(--mint);transform:scaleX(var(--f,0));transform-origin:0 50%;transition:transform .5s var(--ease)}
.wd-ux-go{margin-top:1.6rem;width:100%;height:3.25rem;font:inherit;font-weight:600;font-size:.95rem;border:1px solid #fff;background:#fff;color:#0a0e0d;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:.6rem;transition:background .3s,color .3s,border-color .3s,opacity .3s}
.wd-ux-go[disabled]{opacity:.35;cursor:default}
.wd-ux-go svg{width:1.05rem;height:1.05rem;display:none}
.wd-ux-karte.is-fertig .wd-ux-go{background:var(--mint);border-color:var(--mint)}
.wd-ux-karte.is-fertig .wd-ux-go svg{display:block}

/* ── 08 Website-Arten ──────────────────────────────── */
.wd-wa{padding:0}
.wd-wa-pin{padding:clamp(4.5rem,10svh,6.5rem) 0 clamp(2.5rem,6svh,4rem);display:flex;flex-direction:column;overflow:hidden}
.wd-wa .wd-head{margin-bottom:clamp(1.6rem,4svh,2.8rem)}
.wd-wa .wd-head--solo .wd-h{max-width:none}
.wd-wa-vp{overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.wd-wa-vp::-webkit-scrollbar{display:none}
.wd-wa-track{--cw:clamp(17.5rem,min(36vw,54svh),33rem);display:flex;gap:clamp(1.25rem,2.4vw,2.5rem);width:max-content;padding-inline:clamp(1.25rem,7.4vw,12rem)}
.wd-wa-card{width:var(--cw);flex:none;scroll-snap-align:center}
.wd-wa-vis{position:relative;padding:0 0 1.6rem}
.wd-wa-tel{position:absolute;right:5%;bottom:0;width:21%;aspect-ratio:780/1688;border:.3rem solid #0a0e0d;outline:1px solid #ffffff38;background:#0a0e0d;box-shadow:0 1.2rem 2.6rem #000000a6;z-index:2}
.wd-wa-nr{display:block;margin-top:1.1rem;color:var(--mint)}
.wd-wa-card h3{margin-top:.5rem;font-family:var(--font-display);font-weight:700;letter-spacing:-.035em;font-size:clamp(1.35rem,1.8vw,1.85rem);line-height:1.1}
.wd-wa-card p{margin-top:.6rem;color:#ffffffb8;font-size:.98rem;line-height:1.55;max-width:30em}
.wd-wa-card a{color:#fff;text-decoration:underline;text-decoration-color:var(--mint);text-underline-offset:.25em}
.wd-wa-lauf{height:1px;background:var(--ld);margin-top:clamp(1.4rem,3.5svh,2.4rem);position:relative}
.wd-wa-lauf i{position:absolute;inset:0;background:var(--mint);transform:scaleX(0);transform-origin:0 50%}
.wd-wa.is-pin .wd-wa-pin{height:100vh;height:100svh;justify-content:center}
.wd-wa.is-pin .wd-wa-vp{overflow:visible;scroll-snap-type:none}
html:not(.wd-bewegt) .wd-wa-lauf,.wd-wa:not(.is-pin) .wd-wa-lauf{display:none}

/* ── 09 Marke ──────────────────────────────────────── */
.wd-mk-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(2rem,6vw,7rem);align-items:end}
.wd-link{display:inline-flex;align-items:center;gap:.7rem;margin-top:1.8rem;font-weight:600;font-size:1.02rem;border-bottom:1px solid currentColor;padding-bottom:.3rem}
.wd-link svg{width:1rem;height:1rem;transition:transform .4s var(--ease)}
.wd-link:hover svg{transform:translateX(.3rem)}
.wd-mk-band{margin-top:clamp(3rem,8svh,5.5rem);overflow:hidden}
.wd-mk-strip{display:flex;gap:clamp(.9rem,1.6vw,1.6rem);width:max-content;padding-inline:clamp(1.25rem,7.4vw,12rem);will-change:transform}
.wd-mk-kachel{position:relative;width:clamp(16rem,29vw,30rem);aspect-ratio:4/3;flex:none;background:#e6e4de;overflow:hidden}
.wd-mk-kachel .wd-med{position:absolute;inset:0}
.wd-mk-leer{display:flex;flex-direction:column;justify-content:space-between;height:100%;padding:1.2rem 1.3rem;color:#0a0e0d8f}
.wd-mk-leer b{font-family:var(--font-display);font-weight:700;letter-spacing:-.03em;font-size:clamp(1.2rem,1.6vw,1.6rem);color:#0a0e0d}
.wd-mk-tag{position:absolute;left:1rem;bottom:1rem;z-index:2;padding:.4rem .7rem;background:#0a0e0dd9;color:#fff}
.wd-mk-cap{margin-top:1.5rem;color:var(--mut);font-size:1.02rem;line-height:1.55;max-width:44em}

/* ── 10 Beweis ─────────────────────────────────────── */
.wd-bw-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2.5rem,7vw,8rem);align-items:center}
.wd-bw-grid .wd-lead{margin-top:1.6rem}
.wd-bw-kacheln{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--ld);border:1px solid var(--ld)}
.wd-bw-k{background:#0a0e0d;padding:clamp(1.4rem,2.4vw,2.2rem);min-height:clamp(9.5rem,20svh,12.5rem);display:flex;flex-direction:column;justify-content:space-between}
.wd-bw-k .wd-klein{color:#ffffff9e}
.wd-bw-w{font-family:var(--font-display);font-weight:700;letter-spacing:-.045em;font-size:clamp(2rem,3.5vw,3.5rem);line-height:1;font-variant-numeric:tabular-nums}
.wd-bw-w small{display:block;margin-top:.5rem;font-family:var(--font-body);font-size:.85rem;font-weight:500;letter-spacing:0;color:#ffffff9e}
.wd-bw-note{margin-top:1.1rem;color:#ffffff9e;display:flex;align-items:center;gap:.7rem}
.wd-bw-note:before{content:"";width:.5rem;height:.5rem;border-radius:50%;background:var(--mint)}

/* ── 11 Technik ────────────────────────────────────── */
.wd-tk{display:flex;flex-wrap:wrap;justify-content:center;gap:.75rem;margin:0;padding:0;list-style:none}
.wd-tk li{--c:#fff;width:calc((100% - 3.75rem)/6);min-width:9.5rem;aspect-ratio:1.5;border:1px solid var(--ld);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.85rem;color:#ffffff8f;transition:background .4s,color .4s,border-color .4s}
.wd-tk svg{width:2rem;height:2rem;fill:currentColor;transition:fill .4s,transform .5s var(--ease)}
.wd-tk .wd-tk-wort{font-family:var(--font-display);font-weight:700;font-size:1.6rem;letter-spacing:-.04em;line-height:2rem;transition:color .4s,transform .5s var(--ease)}
.wd-tk span:last-child{font-size:.82rem;font-weight:600;letter-spacing:.02em}
.wd-tk li:hover{background:#f4f3f0;color:#0a0e0d;border-color:#f4f3f0}
.wd-tk li:hover svg{fill:var(--c);transform:translateY(-.2rem)}
.wd-tk li:hover .wd-tk-wort{transform:translateY(-.2rem)}

/* ── 12 Mensch plus KI ─────────────────────────────── */
.wd-ki-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(2.5rem,6vw,7rem);align-items:center}
.wd-ki-film{position:relative;aspect-ratio:1280/606}
.wd-ki-film img,.wd-ki-film video{object-position:50% 50%}
.wd-ki-grid .wd-lead{margin-top:1.6rem}

/* ── 13 Ablauf ─────────────────────────────────────── */
.wd-ab-liste{position:relative;margin:0;padding:0 0 0 clamp(2.2rem,5vw,4.5rem);list-style:none;max-width:60rem}
.wd-ab-liste ol{margin:0;padding:0;list-style:none}
.wd-ab-linie{position:absolute;left:.25rem;top:.6rem;bottom:.6rem;width:1px;background:var(--ld)}
.wd-ab-linie i{position:absolute;inset:0;background:var(--mint);transform-origin:50% 0}
.wd-ab-s{position:relative;display:grid;grid-template-columns:4.5rem minmax(0,1fr);gap:1rem;padding:clamp(1.4rem,3.4svh,2.2rem) 0;border-bottom:1px solid var(--ld)}
.wd-ab-s:first-of-type{padding-top:0}
.wd-ab-s:before{content:"";position:absolute;left:calc(-1*clamp(2.2rem,5vw,4.5rem));top:clamp(1.4rem,3.4svh,2.2rem);margin-top:.55rem;width:.55rem;height:.55rem;border-radius:50%;background:#0a0e0d;border:1px solid #ffffff5c;transition:background .4s,border-color .4s}
.wd-ab-s:first-of-type:before{top:0}
.wd-ab-s.is-on:before{background:var(--mint);border-color:var(--mint)}
.wd-ab-nr{color:var(--mint);padding-top:.55rem}
.wd-ab-s h3{font-family:var(--font-display);font-weight:700;letter-spacing:-.035em;font-size:clamp(1.5rem,2.3vw,2.3rem);line-height:1.08}
.wd-ab-s p{margin-top:.55rem;color:#ffffffb8;font-size:1.05rem;line-height:1.55;max-width:36em}
.wd-ab-dauer{margin-top:clamp(2rem,5svh,3rem);color:#ffffffb8;font-size:1.02rem;line-height:1.55;max-width:44em}
.wd-ab-dauer strong{color:#fff}

/* ── 14 Betreuung ──────────────────────────────────── */
.wd-bt{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}
.wd-bt-k{background:#fff;border:1px solid var(--ll);padding:clamp(1.6rem,2.4vw,2.3rem);min-height:clamp(13rem,26svh,16rem);display:flex;flex-direction:column}
.wd-bt-k .wd-klein{color:#0a0e0d80}
.wd-bt-k h3{margin-top:auto;padding-top:2rem;font-family:var(--font-display);font-weight:700;letter-spacing:-.035em;font-size:clamp(1.35rem,1.8vw,1.8rem);line-height:1.1}
.wd-bt-k p{margin-top:.7rem;color:var(--mut);font-size:1rem;line-height:1.55}

/* ── 15 Kundenstimmen ──────────────────────────────── */
.wd-fall{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);border:1px solid var(--ld);background:#101514}
.wd-fall-bild{position:relative;min-height:22rem;background:#151b1a}
.wd-fall-bild img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.wd-fall-in{padding:clamp(1.8rem,3.4vw,3.4rem);display:flex;flex-direction:column;justify-content:space-between;gap:2.2rem}
.wd-fall-logo{height:1.5rem;width:auto;filter:brightness(0) invert(1);opacity:.9;display:block}
.wd-fall-in>p{color:#ffffffc7;font-size:1.05rem;line-height:1.55}
.wd-fall-zahlen{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:1.2rem;margin:0}
.wd-fall-zahlen div{border-top:1px solid var(--ld);padding-top:1rem;display:flex;flex-direction:column-reverse;justify-content:flex-end}
.wd-fall-zahlen dd{margin:0;font-family:var(--font-display);font-weight:700;letter-spacing:-.045em;font-size:clamp(1.6rem,2.4vw,2.4rem);line-height:1;color:var(--mint);font-variant-numeric:tabular-nums;white-space:nowrap}
.wd-fall-zahlen dt{margin-top:.6rem;color:#ffffff9e;font-size:.85rem;font-weight:500;line-height:1.35}
.wd-ks{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem;margin-top:1rem}
.wd-ks-k{margin:0;border:1px solid var(--ld);padding:clamp(1.4rem,2vw,1.9rem);display:flex;flex-direction:column;justify-content:space-between;gap:2rem;min-height:17rem}
.wd-ks-k blockquote{margin:0;font-size:1.02rem;line-height:1.55;color:#ffffffe0}
.wd-ks-k figcaption{display:flex;align-items:center;gap:.8rem;font-size:.88rem;line-height:1.35}
.wd-ks-k figcaption img{width:2.75rem;height:2.75rem;border-radius:50%;object-fit:cover;flex:none}
.wd-ks-k figcaption b{display:block;font-weight:700}
.wd-ks-k figcaption span{color:#ffffff9e}

/* ── 16 Branchen ───────────────────────────────────── */
.wd-brn-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2.5rem,7vw,8rem);align-items:start}
.wd-chips{display:flex;flex-wrap:wrap;gap:.6rem;margin:2.2rem 0 0;padding:0;list-style:none}
.wd-chips li{padding:.75rem 1.15rem;border:1px solid var(--ll);background:#fff;font-weight:600;font-size:.95rem}

/* ── 17 FAQ ────────────────────────────────────────── */
.wd-faq-liste{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:start;column-gap:clamp(2.5rem,5vw,5.5rem)}
.wd-faq-col{border-bottom:1px solid var(--ld)}
.wd-faq-item{position:relative}
.wd-faq-line{background:var(--ld);height:1px;position:absolute;top:0;left:0;right:0}
.wd-faq-q{margin:0}
.wd-faq-btn{width:100%;text-align:left;font-family:var(--font-display);letter-spacing:-.01em;color:inherit;background:none;border:0;cursor:pointer;opacity:.7;display:flex;justify-content:space-between;align-items:center;gap:1.5rem;padding:clamp(1.3rem,2.8svh,1.8rem) 0;font-size:clamp(1.15rem,1.6vw,1.6rem);font-weight:600;line-height:1.2;transition:opacity .4s}
.wd-faq-btn:hover,.wd-faq-item.is-open .wd-faq-btn{opacity:1}
.wd-faq-ico{width:1.05rem;height:1.05rem;position:relative;flex:none}
.wd-faq-ico:before,.wd-faq-ico:after{content:"";position:absolute;left:0;right:0;top:50%;height:1.5px;margin-top:-.75px;background:currentColor;transition:transform .35s var(--ease)}
.wd-faq-ico:after{transform:rotate(90deg)}
.wd-faq-item.is-open .wd-faq-ico:after{transform:rotate(0)}
.wd-faq-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .35s var(--ease)}
.wd-faq-item.is-open .wd-faq-a{grid-template-rows:1fr}
.wd-faq-a-in{min-height:0;overflow:hidden}
.wd-faq-a p{opacity:.8;max-width:58ch;padding:0 2.5rem clamp(1.4rem,3svh,2rem) 0;font-size:clamp(1rem,1.1vw,1.15rem);line-height:1.6}

/* ── 18 Abschluss ──────────────────────────────────── */
.wd-ende{position:relative;height:100vh;height:100svh;min-height:640px;overflow:clip;background:#0a0e0d;color:#fff;display:flex;align-items:flex-end;justify-content:center}
.wd-ende-bg{position:absolute;inset:-16% 0 -12%}
.wd-ende-bg .wd-med{background:#0a0e0d;-webkit-mask-image:linear-gradient(#0000 0%,#0000000a 6%,#00000024 13%,#00000052 20%,#0000008c 28%,#000000c7 35%,#000000ed 40%,#000 44%);mask-image:linear-gradient(#0000 0%,#0000000a 6%,#00000024 13%,#00000052 20%,#0000008c 28%,#000000c7 35%,#000000ed 40%,#000 44%)}
.wd-ende-bg:after{content:"";position:absolute;inset:0;background:radial-gradient(70% 60% at 50% 55%,#0000 40%,#0a0e0d 100%),linear-gradient(#0a0e0d00 66%,#0a0e0d);opacity:.6;pointer-events:none}
.wd-ende-in{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;text-align:center;padding:0 1rem 14svh}
.wd-ende-in .eyebrow{color:#fff9}
body .wd .ds-h.wd-ende-h{max-width:15ch;font-size:clamp(2.6rem,6vw,7rem);line-height:1;text-shadow:0 2px 30px #0006}
.wd-ende-sub{margin-top:1.6rem;color:#ffffffb8;max-width:36em;font-size:clamp(1.1rem,1.3vw,1.25rem);line-height:1.6}
.wd-ende-btns{margin-top:2.4rem;display:flex;justify-content:center}

/* ── Ohne Bewegung ─────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  .wd-lauf-in{animation:none}
  .wd-lauf{overflow-x:auto}
}

/* ── Schmal: nur so, dass nichts bricht ────────────── */
@media (max-width:999px){
  .wd-head,.wd-vk-grid,.wd-ux-grid,.wd-mk-grid,.wd-bw-grid,.wd-ki-grid,.wd-brn-grid,.wd-fall{grid-template-columns:minmax(0,1fr)}
  .wd-head{align-items:start;gap:1.4rem}
  .wd-hero{display:block}
  .wd-hero-txt{max-width:none}
  .wd-stack{position:relative;left:auto;top:auto;transform:none;width:82%;margin:4.5rem 0 0 2%}
  .wd-st-c{transform:translate3d(calc(var(--i)*1.1rem),calc(var(--i)*-1rem),calc(var(--i)*-3rem))}
  .wd-vk-karten{position:static}
  .wd-mk-band{overflow-x:auto}
  .wd-vk-karten[data-aktiv] .wd-vk-k{opacity:1}
  .wd-pf,.wd-bt{grid-template-columns:minmax(0,1fr)}
  .wd-ks{grid-template-columns:repeat(2,minmax(0,1fr))}
  .wd-tk li{width:calc((100% - 1.5rem)/3);min-width:0}
  .wd-faq-liste{grid-template-columns:minmax(0,1fr)}
  .wd-faq-col+.wd-faq-col{border-top:0}
  .wd-fall-bild{min-height:0;aspect-ratio:1170/690}
}
@media (max-width:640px){
  .wd-hero-trust{letter-spacing:.1em}
  .wd-sep{margin:0 .5em}
  .wd-ks,.wd-bw-kacheln{grid-template-columns:minmax(0,1fr)}
  .wd-tk li{width:calc((100% - .75rem)/2)}
  .wd-fall-zahlen{grid-template-columns:minmax(0,1fr)}
  .wd-ab-s{grid-template-columns:minmax(0,1fr);gap:.2rem}
  .wd-ab-nr{padding-top:0}
  .wd-vn-griff span{width:2.75rem;height:2.75rem;margin:-1.375rem 0 0 -1.375rem}
  .wd-vn-lab{bottom:.6rem}
  .wd-vn-lab--v{left:.6rem}
  .wd-vn-lab--n{right:.6rem}
  .wd-wa-tel{border-width:.2rem}
}

@media (max-width:640px){.wd-sig-cards{grid-template-columns:minmax(0,1fr)}}