/* Kreis Design (Entwurf). Ergaenzt ks.css; Farben kommen von den .s-* Flaechen. */
.dz-hero{padding:clamp(40px,6vw,96px) 0 clamp(48px,6vw,88px)}
.dz-hero h1{font-size:clamp(64px,12vw,184px);line-height:.9;max-width:none;margin:0}
.dz-akz{color:var(--akz)}
.dz-hero .lead{margin-top:clamp(20px,2.4vw,32px);max-width:40ch;font-size:clamp(19px,1.7vw,24px);color:var(--fg)}
.dz-leist{list-style:none;margin:clamp(40px,5vw,72px) 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.dz-leist li{display:flex}
.lk{display:flex;flex-direction:column;position:relative;flex:1;min-height:clamp(200px,17vw,248px);padding:clamp(16px,1.6vw,24px);border-radius:20px;background:var(--bg);color:var(--fg);text-decoration:none;transition:transform .3s var(--ease)}
.lk:hover{transform:translateY(-5px)}
.lk:focus-visible{outline:3px solid var(--fg);outline-offset:3px}
.lk-nr{font-family:var(--mono);font-size:12px;letter-spacing:.14em;color:var(--mid)}
.lk-name{margin-top:auto;font-size:clamp(40px,4.6vw,68px);font-weight:800;letter-spacing:-.03em;line-height:1}
.lk-t{margin-top:10px;font-size:15px;line-height:1.4;color:var(--mid);max-width:28ch}
.lk-pf{position:absolute;right:clamp(14px,1.4vw,22px);top:clamp(14px,1.4vw,22px);width:26px;height:26px;transition:transform .3s var(--ease)}
.lk-pf .ra{display:block;width:100%;height:100%;margin:0;vertical-align:top}
.lk:hover .lk-pf{transform:none}
@media (max-width:860px){.dz-leist{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:480px){.lk{min-height:184px}.lk-t{font-size:14px}}

/* ---------- Vorher/Nachher ---------- */
.dz-dreid .kopfzeile{margin-bottom:clamp(28px,4vw,48px)}
.vn-raster{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:clamp(24px,2.6vw,40px) 24px}
.vn.s0,.vn.s1{grid-column:span 3}
.vn.s2,.vn.s3,.vn.s4{grid-column:span 2}
@media (max-width:999px){.vn-raster{grid-template-columns:repeat(2,minmax(0,1fr))}.vn.s0,.vn.s1,.vn.s2,.vn.s3{grid-column:span 1}.vn.s4{grid-column:span 2}}
@media (max-width:699px){.vn-raster{grid-template-columns:minmax(0,1fr)}.vn.s0,.vn.s1,.vn.s2,.vn.s3,.vn.s4{grid-column:span 1}}
.vn{margin:0}
.vn.s2 .vn-buehne,.vn.s3 .vn-buehne,.vn.s4 .vn-buehne{aspect-ratio:4/3}
.vn-buehne{position:relative;aspect-ratio:3/2;overflow:hidden;border-radius:16px;background:var(--kart);touch-action:pan-y;cursor:ew-resize;user-select:none;-webkit-user-select:none;isolation:isolate}
.vn-stufe{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;-webkit-user-drag:none;pointer-events:none}
.vn-stufe:not(:first-of-type){clip-path:inset(0 0 0 var(--cut,50%))}
.vn-chip{position:absolute;top:12px;z-index:3;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;padding:6px 10px;border-radius:999px;background:oklch(.2 .09 270 / .8);color:oklch(.97 .02 95);pointer-events:none}
.vn-chip.aus{visibility:hidden}
.vn-chip.m{left:var(--mitte,50%);transform:translateX(-50%)}.vn-chip.l{left:12px}.vn-chip.r{right:12px}
.vn-griff{position:absolute;z-index:4;top:0;bottom:0;left:var(--p,50%);width:48px;margin-left:-24px;display:flex;justify-content:center;outline:none;cursor:ew-resize}
.vn-griff::before{content:"";width:3px;height:100%;background:oklch(.985 .01 95);box-shadow:0 0 0 1px oklch(.2 .09 270 / .35)}
.vn-knauf{position:absolute;top:50%;left:50%;width:48px;height:48px;margin:-24px 0 0 -24px;border-radius:50%;display:grid;place-items:center;background:var(--kbg);color:var(--kfg);box-shadow:0 6px 18px oklch(.2 .09 270 / .45);transition:transform .2s var(--ease)}
.vn-knauf svg{width:24px;height:24px}
.vn-griff:hover .vn-knauf{transform:scale(1.08)}
.vn-griff:focus-visible .vn-knauf{outline:3px solid oklch(.985 .01 95);outline-offset:3px}
.vn figcaption{display:flex;flex-wrap:wrap;gap:2px 14px;align-items:baseline;margin-top:12px}
.vn figcaption b{font-size:18px;font-weight:800;letter-spacing:-.01em}
.vn figcaption span{font-size:14px;color:var(--mid)}

/* ---------- Video ---------- */
.dz-video-raster{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,clamp(260px,26vw,380px));gap:clamp(32px,7vw,112px);align-items:center}
.dz-video h2{font-size:clamp(36px,5vw,76px);line-height:1;margin:0 0 clamp(18px,2vw,28px)}
.dz-video .lead{color:var(--fg);max-width:36ch}
.dz-klein{font-family:var(--mono);font-size:12px;letter-spacing:.08em;color:var(--mid);margin:22px 0 0;max-width:46ch}
.dz-video-rahmen{border-radius:24px;overflow:hidden;background:var(--fg);padding:8px;box-shadow:0 30px 60px -34px oklch(.2 .09 270 / .6)}
.dz-video-rahmen video{display:block;width:100%;height:auto;aspect-ratio:9/16;border-radius:17px;background:oklch(.16 .07 275)}
@media (max-width:760px){.dz-video-raster{grid-template-columns:minmax(0,1fr)}.dz-video-rahmen{max-width:320px}}

/* ---------- Grafik ---------- */
.dz-grafik-raster{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,clamp(300px,45vw,640px));gap:clamp(32px,6vw,96px);align-items:center}
.dz-grafik h2{font-size:clamp(36px,5vw,76px);line-height:1;margin:0 0 clamp(18px,2vw,28px)}
.dz-grafik .lead{color:var(--fg);max-width:36ch}
.dz-grafik-bild{margin:0;border-radius:24px;background:oklch(.62 0 0);padding:clamp(10px,3%,28px);box-shadow:0 30px 60px -36px oklch(.2 .09 270 / .55)}
.dz-grafik-bild img{display:block;width:100%;height:auto;aspect-ratio:1}
@media (max-width:820px){.dz-grafik-raster{grid-template-columns:minmax(0,1fr)}}

/* ---------- Lookbook-Wand ---------- */
.dz-lookbook{padding-bottom:0}
.dz-lookbook .kopfzeile{margin-bottom:clamp(28px,4vw,48px)}
.wandrahmen{container-type:inline-size;max-width:1680px;margin:0 auto}
.wand{--z:calc((100cqw - 33px) / 12);list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-auto-flow:row dense;grid-auto-rows:var(--z);gap:3px}
.kachel{position:relative;overflow:hidden;min-width:0;outline:none}
.b1{grid-column:span 1}.b2{grid-column:span 2}.b3{grid-column:span 3}.b4{grid-column:span 4}
.h1{grid-row:span 1}.h2{grid-row:span 2}.h3{grid-row:span 3}
.kachel img{position:absolute;display:block;transition:transform .5s var(--ease)}
.k-fuell img{inset:0;width:100%;height:100%;object-fit:cover}
.k-logo img{inset:calc(var(--z) * var(--r,.12));width:calc(100% - 2 * var(--z) * var(--r,.12));height:calc(100% - 2 * var(--z) * var(--r,.12));object-fit:contain}
.kachel:hover img,.kachel:focus-visible img{transform:scale(1.05)}
.r6{--r:.06}.r8{--r:.08}.r10{--r:.10}.r12{--r:.12}.r14{--r:.14}.r16{--r:.16}.r18{--r:.18}.r20{--r:.20}.r24{--r:.24}
.kachel:focus-visible{outline:3px solid oklch(.985 .01 95);outline-offset:-6px;box-shadow:inset 0 0 0 6px oklch(.2 .09 270)}
.kn{position:absolute;left:8px;bottom:8px;max-width:calc(100% - 16px);display:flex;flex-direction:column;gap:1px;padding:7px 11px;border-radius:10px;background:oklch(.2 .09 270 / .94);color:oklch(.97 .02 95);opacity:0;transform:translateY(4px);transition:opacity .2s var(--ease),transform .2s var(--ease);pointer-events:none;line-height:1.2}
.kn b{font-size:14px;font-weight:800}
.kn i{font-style:normal;font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:oklch(.82 .05 270)}
.kachel:hover .kn,.kachel:focus-visible .kn,.kachel:focus .kn{opacity:1;transform:none}
.kachel.b1 .kn{left:5px;bottom:5px;padding:5px 8px}
.kachel.b1 .kn i{display:none}
/* feste Wandfarben (unabhaengig von Hell/Dunkel) */
.f-blau{background:oklch(.42 .2 268)}.f-gelb{background:oklch(.915 .17 98)}.f-koralle{background:oklch(.72 .17 40)}
.f-creme{background:oklch(.965 .03 95)}.f-rosa{background:oklch(.84 .1 345)}.f-nacht{background:oklch(.24 .13 268)}
.f-indigo{background:oklch(.29 .16 272)}.f-petrol{background:oklch(.35 .095 192)}.f-wein{background:oklch(.36 .15 15)}
.f-aubergine{background:oklch(.21 .09 285)}.f-malve{background:oklch(.35 .13 335)}.f-tiefnacht{background:oklch(.16 .07 275)}
.f-weiss{background:oklch(.985 .01 95)}
.nd{display:none}
@media (max-width:699px){
  .nd{display:revert}.nm{display:none}
  .wand{--z:calc((100cqw - 9px) / 4);grid-template-columns:repeat(4,minmax(0,1fr))}
  .kn{opacity:0}
}
.leer{background-image:radial-gradient(circle at 50% 50%,transparent 0 22%,oklch(1 0 0 / .08) 22% 24%,transparent 24%)}

/* ---------- Schluss ---------- */
.dz-schluss{padding:clamp(72px,10vw,150px) 0}
.dz-schluss h2{font-size:clamp(40px,7vw,112px);line-height:.95;margin:0;max-width:14ch}
.dz-schluss .lead{margin-top:clamp(18px,2vw,28px);color:var(--fg)}
.dz-schluss .tun{margin-top:clamp(24px,3vw,40px)}

@media (prefers-reduced-motion:reduce){
  .lk,.lk-pf,.kachel img,.kn,.vn-knauf{transition:none}
  .lk:hover,.kachel:hover img,.kachel:focus-visible img{transform:none}
}