/* Picorix – Produktseite
   Leitmotiv: der Leuchttisch. Graphit als Raum, kühles Weiß als Licht, Nordlicht-Gold und -Blau als Glanz. */
:root{
  --ink:#16181d; --ink-2:#2b2e36; --muted:#646a73; --paper:#eef0ec; --light:#fbfcf9; --line:#d7dbd3;
  --gold:#e2b84a; --blue:#4f7cff;
  --sans:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif; --serif:"Fraunces",Georgia,serif;
  --ease:cubic-bezier(.2,.7,.2,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.6 var(--sans);-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:inherit}
svg{width:18px;height:18px}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}
.mk-wrap{max-width:1200px;margin:0 auto;padding:0 24px}
.mk-h2{font-family:var(--serif);font-weight:400;font-size:clamp(30px,4vw,48px);line-height:1.08;letter-spacing:-.015em;margin:0 0 18px;max-width:20ch;font-variation-settings:"opsz" 144,"SOFT" 50}
.mk-sub{color:var(--muted);font-size:18px;margin:0 0 36px;max-width:56ch}
.mk-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:14px 24px;border-radius:999px;background:var(--ink);color:#fff;text-decoration:none;font-weight:600;font-size:15px;border:1px solid var(--ink);transition:transform .15s var(--ease),background .15s}
.mk-btn:hover{background:var(--ink-2)}
.mk-btn:active{transform:translateY(1px)}
.mk-btn.ghost{background:transparent;color:var(--ink);border-color:#bfc4bb}
.mk-btn.ghost:hover{border-color:var(--ink)}
.mk-btn.light{background:#fff;color:var(--ink);border-color:#fff}

/* Navigation */
.mk-nav{position:absolute;top:0;left:0;right:0;z-index:20;display:flex;justify-content:space-between;align-items:center;padding:20px max(24px,calc((100vw - 1200px)/2 + 24px));color:#fff}
.mk-logo{display:flex;align-items:center;gap:10px;text-decoration:none;font-family:var(--serif);font-size:21px;font-variation-settings:"opsz" 48,"SOFT" 100}
.mk-mark{width:24px;height:24px;border-radius:6px;background:radial-gradient(circle at 70% 75%,var(--gold),transparent 60%),radial-gradient(circle at 25% 25%,var(--blue),transparent 62%),#22252c;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
.mk-nav nav{display:flex;align-items:center;gap:26px;font-size:14.5px}
.mk-nav nav a{text-decoration:none;opacity:.82}
.mk-nav nav a:hover{opacity:1}
.mk-nav .mk-cta{opacity:1;background:#fff;color:var(--ink);padding:9px 16px;border-radius:999px;font-weight:600}
@media (max-width:860px){.mk-nav nav a:not(.mk-cta):not(.mk-login){display:none}.mk-nav nav{gap:14px}}

/* Hero: der Leuchttisch */
.hero{background:var(--ink);color:#f2f1ee;padding:150px 0 110px;overflow:hidden;position:relative}
.hero::before{content:"";position:absolute;inset:auto -10% -40% 30%;height:90%;background:radial-gradient(50% 50% at 50% 50%,rgba(226,184,74,.16),transparent 70%);pointer-events:none}
.hero-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:56px;align-items:center}
.hero h1{font-family:var(--serif);font-weight:300;font-size:clamp(40px,5.6vw,74px);line-height:1.02;letter-spacing:-.025em;margin:0;font-variation-settings:"opsz" 144,"SOFT" 100}
.hero .lead{font-size:18.5px;color:#b9bdc5;margin:26px 0 34px;max-width:46ch;line-height:1.65}
.hero-act{display:flex;gap:12px;flex-wrap:wrap}
.hero .mk-btn{background:var(--gold);border-color:var(--gold);color:var(--ink)}
.hero .mk-btn:hover{background:#ecc560}
.hero .mk-btn.ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.3)}
.hero .mk-btn.ghost:hover{border-color:#fff}
.hero-fine{font-size:13px;color:#7f848d;margin-top:16px}

.table{position:relative;aspect-ratio:1.18;border-radius:18px;background:linear-gradient(160deg,#fdfefb,#eef1ea);box-shadow:0 0 0 1px rgba(255,255,255,.08),0 0 80px -10px rgba(255,253,240,.35),0 60px 120px -40px rgba(0,0,0,.8);
  animation:switch 1.6s .2s var(--ease) both}
@keyframes switch{0%{filter:brightness(.25)}35%{filter:brightness(.9)}45%{filter:brightness(.6)}100%{filter:none}}
.table-glow{position:absolute;inset:0;border-radius:inherit;background:radial-gradient(70% 60% at 50% 45%,rgba(255,255,255,.95),transparent 70%);pointer-events:none}
.slide{position:absolute;margin:0;width:31%;padding:3.2% 3.2% 6%;background:#f6f6f2;border-radius:4px;box-shadow:0 1px 0 rgba(0,0,0,.05),0 10px 22px -10px rgba(22,24,29,.4);
  animation:drop .9s var(--ease) both;animation-delay:calc(900ms + var(--d));transition:transform .4s var(--ease)}
@keyframes drop{from{opacity:0;transform:translateY(-16px) rotate(var(--r,0deg)) scale(1.04)}to{opacity:1;transform:rotate(var(--r,0deg))}}
.slide:hover{transform:rotate(0) translateY(-4px)!important;z-index:5}
.slide-win{aspect-ratio:3/2;overflow:hidden;border-radius:2px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}
.slide-win img{width:100%;height:100%;object-fit:cover}
.slide.s0{left:5%;top:7%;--r:-2deg;transform:rotate(-2deg)}
.slide.s1{left:36%;top:4%;--r:1.5deg;transform:rotate(1.5deg)}
.slide.s2{left:66%;top:9%;--r:-1deg;transform:rotate(-1deg)}
.slide.s3{left:9%;top:48%;--r:1deg;transform:rotate(1deg);width:40%}
.slide.s4{left:51%;top:44%;--r:-2.5deg;transform:rotate(-2.5deg)}
.slide.s5{left:72%;top:58%;--r:2deg;transform:rotate(2deg);width:24%}
.slide-heart{position:absolute;right:7%;bottom:2%;width:22px;height:22px;border-radius:50%;background:var(--gold);display:grid;place-items:center;color:var(--ink)}
.slide-heart svg{width:12px;height:12px;fill:currentColor}
.slide-pin{position:absolute;left:46%;top:38%;width:24px;height:24px;border-radius:50%;background:var(--gold);color:var(--ink);font-size:12px;font-weight:800;display:grid;place-items:center;box-shadow:0 0 0 3px rgba(0,0,0,.25)}
@media (max-width:900px){.hero{padding-top:120px}.hero-in{grid-template-columns:1fr}.table{margin-top:10px}}

/* Fakten */
.facts{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;padding-top:64px;padding-bottom:30px}
.facts div{border-top:1px solid var(--ink);padding-top:14px}
.facts strong{display:block;font-family:var(--serif);font-weight:500;font-size:21px;margin-bottom:6px;font-variation-settings:"opsz" 36}
.facts span{color:var(--muted);font-size:15px}
@media (max-width:760px){.facts{grid-template-columns:1fr}}

/* Ablauf – echte Reihenfolge, daher nummeriert */
.flow{padding-top:100px;padding-bottom:40px}
.steps{list-style:none;counter-reset:s;padding:0;margin:40px 0 0;display:grid;grid-template-columns:repeat(4,1fr);gap:26px}
.steps li{counter-increment:s;position:relative;padding-top:58px}
.steps li::before{content:counter(s);position:absolute;top:0;left:0;font-family:var(--serif);font-size:40px;font-weight:300;line-height:1;color:var(--ink);font-variation-settings:"opsz" 144}
.steps li::after{content:"";position:absolute;top:22px;left:44px;right:-14px;height:1px;background:var(--line)}
.steps li:last-child::after{display:none}
.steps h3{font-size:17px;margin:0 0 8px}
.steps p{margin:0;color:var(--muted);font-size:15px}
@media (max-width:900px){.steps{grid-template-columns:1fr 1fr}.steps li::after{display:none}}
@media (max-width:560px){.steps{grid-template-columns:1fr}}

/* Korrekturen */
.proof{margin-top:90px;background:#27282c;color:#e9e9e6;padding:96px 0}
.proof-in{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:56px;align-items:center}
.proof .mk-h2{color:#fff}
.proof p{color:#b4b7bd;font-size:17px;max-width:46ch}
.proof-demo{display:grid;grid-template-columns:1fr 210px;background:#0d0e10;border-radius:14px;overflow:hidden;box-shadow:0 40px 80px -40px rgba(0,0,0,.8)}
.pd-img{position:relative;align-self:center;margin:22px}
.pd-img img{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:2px}
.pd-pin{position:absolute;width:26px;height:26px;margin:-13px 0 0 -13px;border-radius:50%;background:var(--gold);color:var(--ink);font-size:12px;font-weight:800;display:grid;place-items:center;box-shadow:0 0 0 3px rgba(0,0,0,.35)}
.pd-side{border-left:1px solid rgba(255,255,255,.08);padding:18px 14px;font-size:13px}
.pd-h{font-weight:650;color:#fff;margin:0 0 12px!important;font-size:13px!important}
.pd-note{display:flex;gap:8px;background:rgba(255,255,255,.06);border-radius:9px;padding:9px;margin-bottom:8px;color:#e6e6e3;line-height:1.4}
.pd-note b{flex:none;width:20px;height:20px;border-radius:50%;background:var(--gold);color:var(--ink);font-size:11px;display:grid;place-items:center}
.pd-btns{display:flex;flex-direction:column;gap:6px;margin-top:16px}
.pd-btns span{display:flex;gap:6px;align-items:center;border:1px solid rgba(255,255,255,.16);border-radius:999px;padding:7px 11px;font-weight:600;color:#ddd}
.pd-btns span.on{background:var(--gold);border-color:var(--gold);color:var(--ink)}
.pd-btns svg{width:14px;height:14px}
.pd-btns .on svg{fill:currentColor}
@media (max-width:900px){.proof-in{grid-template-columns:1fr}.proof-demo{grid-template-columns:1fr}.pd-side{border-left:0;border-top:1px solid rgba(255,255,255,.08)}}

/* Designs */
.designs{padding-top:110px}
.dz{display:grid;grid-template-columns:repeat(5,1fr);gap:18px}
.dz-card h3{font-family:var(--serif);font-weight:500;font-size:22px;margin:14px 0 4px;font-variation-settings:"opsz" 48}
.dz-card p{margin:0;color:var(--muted);font-size:14px;line-height:1.5}
.dz-prev{aspect-ratio:3/4;border-radius:10px;overflow:hidden;box-shadow:0 1px 0 rgba(0,0,0,.04),0 22px 40px -26px rgba(22,24,29,.55);transition:transform .4s var(--ease)}
.dz-card:hover .dz-prev{transform:translateY(-4px)}
.dz-prev i{display:block;background:#999 center/cover}
.dz-aurora .dz-prev{background:#0f1012;display:flex;flex-direction:column;gap:3px}
.pv-hero{flex:1.4;background:center/cover;display:flex;align-items:flex-end;padding:10px;color:#fff;font-family:var(--serif);font-size:17px;line-height:1;box-shadow:inset 0 -60px 50px -30px rgba(0,0,0,.7)}
.pv-row{flex:1;display:flex;gap:3px;padding:3px}.pv-row i{flex:1}
.dz-editorial .dz-prev{background:#fff;border:1px solid #e6e6e0}
.pv-ed{position:relative;height:100%;padding:12px}
.pv-t{display:block;font-family:var(--serif);font-weight:300;font-size:28px;line-height:.9;letter-spacing:-.03em;border-top:1px solid #111;padding-top:6px}
.pv-ed .a{position:absolute;left:12px;top:42%;width:55%;aspect-ratio:3/2}
.pv-ed .b{position:absolute;right:12px;top:58%;width:34%;aspect-ratio:2/3}
.dz-noir .dz-prev{background:#000;color:#fff}
.pv-nr{height:100%;display:flex;align-items:center;gap:6px;padding:0 0 0 10px;overflow:hidden;font-family:"Space Grotesk",var(--sans)}
.pv-nr span{flex:none;width:38%;font-size:17px;font-weight:500;letter-spacing:-.03em;line-height:1}
.pv-nr i{flex:none;height:46%;aspect-ratio:2/3}.pv-nr i:nth-of-type(2){aspect-ratio:3/2}
.dz-atelier .dz-prev{background:#e7e7e4}
.pv-at{padding:14px 10px;height:100%;text-align:center;font-family:"Cormorant",serif;font-style:italic;font-size:21px;color:#2b2a28}
.pv-at div{columns:2;column-gap:7px;margin-top:8px}
.pv-at i{background-color:#fff;border:5px solid #fbfaf8;margin-bottom:7px;aspect-ratio:3/2;box-shadow:0 6px 12px -8px rgba(0,0,0,.4)}
.pv-at i:first-child{aspect-ratio:2/3}
.dz-story .dz-prev{background:#0c0d10}
.pv-st{height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:14px;padding:14px;color:#ebe9e4;text-align:center;font-family:"Instrument Serif",var(--serif);font-size:13px}
.pv-st i{width:100%;aspect-ratio:3/2}
.pv-st em{font-size:24px}
@media (max-width:1000px){.dz{grid-template-columns:repeat(3,1fr)}}
@media (max-width:620px){.dz{grid-template-columns:1fr 1fr}}

/* Größen */
.sizes{padding:110px 0 30px}
.size-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:30px;align-items:end}
.sz-box{display:block;border:1.5px solid var(--ink);border-radius:3px;margin-bottom:16px;background:var(--light)}
.sz-box.web{width:40%;aspect-ratio:3/2}
.sz-box.hd{width:60%;aspect-ratio:3/2;background:linear-gradient(135deg,var(--light),#e9eadf)}
.sz-box.raw{width:86%;aspect-ratio:3/2;border-style:dashed;background:transparent}
.size h3{margin:0 0 6px;font-size:18px}
.size p{margin:0;color:var(--muted);font-size:15px}
.sizes-note{margin-top:28px;color:var(--muted)}
@media (max-width:760px){.size-grid{grid-template-columns:1fr}}

/* Preise */
.pricing{padding-top:110px}
.cycle{display:inline-flex;background:#e0e3dc;padding:4px;border-radius:999px;margin-bottom:26px}
.cycle button{border:0;background:none;padding:8px 18px;border-radius:999px;font:inherit;font-size:14px;font-weight:600;color:var(--muted);cursor:pointer}
.cycle button.on{background:var(--ink);color:#fff}
.plans{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;align-items:stretch}
.plan{position:relative;background:var(--light);border:1px solid var(--line);border-radius:16px;padding:26px 22px;display:flex;flex-direction:column}
.plan.hi{background:var(--ink);color:#f2f1ee;border-color:var(--ink)}
.plan-tag{position:absolute;top:-12px;left:22px;background:var(--gold);color:var(--ink);font-size:12px;font-weight:700;padding:4px 10px;border-radius:999px}
.plan h3{margin:0;font-size:20px}
.plan-tl{color:var(--muted);font-size:14px;min-height:42px;margin:6px 0 10px}
.plan.hi .plan-tl{color:#a9adb5}
.plan-price{font-family:var(--serif);font-size:44px;line-height:1;margin:6px 0 4px;font-variation-settings:"opsz" 144}
.plan-price small{font-family:var(--sans);font-size:14px;color:var(--muted)}
.plan.hi .plan-price small{color:#a9adb5}
.plan-year{font-size:13px;color:var(--muted);margin:0 0 4px;min-height:20px}
.plan ul{list-style:none;padding:0;margin:16px 0 24px;font-size:14.5px;flex:1}
.plan li{padding:6px 0 6px 22px;position:relative;border-top:1px solid rgba(127,127,127,.18)}
.plan li::before{content:"";position:absolute;left:2px;top:12px;width:9px;height:5px;border-left:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:rotate(-45deg);opacity:.7}
.plan.hi .mk-btn{background:var(--gold);border-color:var(--gold);color:var(--ink)}
.club{margin:22px 0 0;color:var(--muted);font-size:15px}
.compare{margin-top:56px;background:var(--light);border:1px solid var(--line);border-radius:16px;padding:26px}
.compare h3{margin:0 0 14px;font-size:18px}
.compare table{width:100%;border-collapse:collapse;font-size:15px}
.compare th,.compare td{text-align:left;padding:12px 10px;border-top:1px solid var(--line);vertical-align:top}
.compare thead th{border-top:0;font-size:13px;color:var(--muted);font-weight:600}
.compare thead th:nth-child(2){color:var(--ink)}
.compare tbody th{font-weight:500;width:32%}
.compare td small{display:block;color:var(--muted);font-size:12.5px}
.compare td:nth-child(2){background:#f1f3ee}
.compare .fine{font-size:12.5px;color:var(--muted);margin:14px 0 0}
@media (max-width:980px){.plans{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.plans{grid-template-columns:1fr}.compare{padding:16px;overflow-x:auto}.compare table{min-width:520px}}

/* FAQ */
.faq{padding-top:110px;max-width:860px}
.faq details{border-top:1px solid var(--line);padding:18px 0}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;font-weight:600;font-size:17px;list-style:none;display:flex;justify-content:space-between;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-weight:300;font-size:24px;line-height:1;transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq p{color:var(--muted);margin:10px 0 0;max-width:64ch}

/* Abschluss */
.final{margin-top:120px;background:var(--ink);color:#fff;padding:100px 0;text-align:center;position:relative;overflow:hidden}
.final::before{content:"";position:absolute;inset:-40% 10% auto;height:120%;background:radial-gradient(40% 40% at 30% 60%,rgba(79,124,255,.25),transparent 70%),radial-gradient(40% 40% at 70% 60%,rgba(226,184,74,.22),transparent 70%)}
.final>*{position:relative}
.final h2{font-family:var(--serif);font-weight:300;font-size:clamp(32px,4.6vw,58px);line-height:1.06;margin:0 auto 34px;max-width:18ch;font-variation-settings:"opsz" 144,"SOFT" 100}

/* Footer & Rechtstexte */
.mk-foot{background:var(--ink);color:#9aa0a9;padding:20px 0 50px;font-size:14px;border-top:1px solid rgba(255,255,255,.06)}
.mk-foot-in{display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap;padding-top:30px}
.mk-foot .mk-logo{color:#fff;margin-bottom:10px}
.mk-foot nav{display:flex;flex-wrap:wrap;gap:10px 22px}
.mk-foot a{text-decoration:none}
.mk-foot a:hover{color:#fff}
.mk-legal{padding-top:140px;padding-bottom:90px;max-width:760px}
.mk-legal h1{font-family:var(--serif);font-weight:400;font-size:44px;margin:0 0 30px}
.mk-legal h2{font-size:18px;margin:34px 0 8px}
.mk-legal p{color:#3c4048}
body:has(.mk-legal) .mk-nav{color:var(--ink)}
body:has(.mk-legal) .mk-nav .mk-cta{background:var(--ink);color:#fff}
.mk-nav .mk-cta{white-space:nowrap}
@media (max-width:480px){.mk-nav .mk-login{display:none}.mk-nav .mk-cta{padding:8px 13px;font-size:13.5px}.mk-logo{font-size:19px}}

body:has(.mk-legal) .mk-nav .brand-logo{filter:invert(.92) hue-rotate(180deg)}
.mk-logo .brand-logo{display:block}