/* PostPlan-Produktseite — MD3 Expressive, Farben aus dem Cockpit (web/public/style.css). */
@font-face{font-family:"Outfit";font-weight:700;font-display:swap;src:url(fonts/outfit-700.woff2) format("woff2")}
@font-face{font-family:"DM Sans";font-weight:400;font-display:swap;src:url(fonts/dm-sans-400.woff2) format("woff2")}
@font-face{font-family:"DM Sans";font-weight:500;font-display:swap;src:url(fonts/dm-sans-500.woff2) format("woff2")}

:root{
  --bg:#111318;--bg2:#161920;--s1:#1d2027;--s2:#272a31;--s3:#32353c;
  --text:#e2e2e9;--muted:#c4c6d0;--line:#44474e;--outline:#8e9099;
  --primary:#adc6ff;--on-primary:#002e69;--tonal:#3e4759;--on-tonal:#dae2f9;
  --ok:#8fd8a3;--warn:#ffb36b;
  --glow:radial-gradient(1200px 700px at 80% -10%,rgba(173,198,255,.16),transparent 60%);
  --r-xl:28px;--r-l:20px;--r-m:12px;--r-full:999px;
  --ease:cubic-bezier(.2,0,0,1);--ease-spring:cubic-bezier(.34,1.56,.64,1);
  --display:"Outfit",system-ui,sans-serif;--body:"DM Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  color-scheme:dark;
}
@media (prefers-color-scheme: light){
  :root{
    --bg:#f9f9ff;--bg2:#f0f2fa;--s1:#ffffff;--s2:#e9edf6;--s3:#dfe3ec;
    --text:#191c20;--muted:#44474e;--line:#c4c6d0;--outline:#74777f;
    --primary:#2f5bd0;--on-primary:#ffffff;--tonal:#dae2f9;--on-tonal:#131c2b;
    --ok:#1b6c35;--warn:#8a4500;
    --glow:radial-gradient(1200px 700px at 80% -10%,rgba(47,91,208,.10),transparent 60%);
    color-scheme:light;
  }
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font:400 17px/1.6 var(--body);-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto}
a{color:var(--primary)}
h1,h2,h3{font-family:var(--display);font-weight:700;letter-spacing:-.02em;line-height:1.1;margin:0;text-wrap:balance}
h2{font-size:clamp(30px,4vw,46px);margin-bottom:14px}
h3{font-size:20px;margin-bottom:8px}
p{margin:0;text-wrap:pretty}
.wrap{width:min(1180px,100% - 32px);margin-inline:auto}
.narrow{width:min(820px,100% - 32px)}
section{padding:96px 0}
.sub{color:var(--muted);font-size:19px;max-width:720px;margin-bottom:44px}
.skip{position:absolute;left:-9999px;top:8px;background:var(--primary);color:var(--on-primary);padding:10px 16px;border-radius:var(--r-full);z-index:100}
.skip:focus{left:16px}
:focus-visible{outline:3px solid var(--primary);outline-offset:3px;border-radius:6px}
.ic{width:22px;height:22px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* Kopfzeile */
.top{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid color-mix(in srgb,var(--line) 60%,transparent)}
.top-in{display:flex;align-items:center;gap:20px;height:68px}
.logo{display:flex;align-items:center;gap:10px;color:var(--text);text-decoration:none;font:700 22px var(--display);letter-spacing:-.02em}
.mark{display:inline-block;width:16px;height:16px;background:var(--primary);transform:rotate(45deg);border-radius:3px}
.nav{display:flex;gap:4px;margin-left:auto}
.nav a{color:var(--muted);text-decoration:none;padding:8px 14px;border-radius:var(--r-full);font-weight:500;font-size:15px;transition:background .2s var(--ease),color .2s var(--ease)}
.nav a:hover{background:var(--s2);color:var(--text)}
.lang{position:relative}
.lang summary{list-style:none;display:flex;align-items:center;gap:6px;cursor:pointer;padding:8px 12px;border-radius:var(--r-full);border:1px solid var(--line);color:var(--text);font-weight:500;font-size:14px;min-height:40px}
.lang summary::-webkit-details-marker{display:none}
.lang summary:hover{background:var(--s2)}
.lang ul{position:absolute;right:0;top:calc(100% + 8px);list-style:none;margin:0;padding:8px;background:var(--s1);border:1px solid var(--line);border-radius:var(--r-l);box-shadow:0 18px 50px rgba(0,0,0,.35);min-width:180px}
.lang a{display:block;padding:10px 14px;border-radius:var(--r-m);color:var(--text);text-decoration:none}
.lang a:hover{background:var(--s2)}
.lang a[aria-current]{background:var(--tonal);color:var(--on-tonal);font-weight:500}

/* Knöpfe */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 26px;border-radius:var(--r-full);font:500 16px var(--body);text-decoration:none;transition:transform .25s var(--ease-spring),filter .2s var(--ease),background .2s var(--ease)}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:scale(.97)}
.btn.filled{background:var(--primary);color:var(--on-primary)}
.btn.filled:hover{filter:brightness(1.08)}
.btn.tonal{background:var(--tonal);color:var(--on-tonal)}
.btn.small{min-height:40px;padding:0 18px;font-size:14px}
.btn.big{min-height:56px;padding:0 34px;font-size:18px}

/* Hero */
.hero{padding:72px 0 64px;background:var(--glow);overflow-x:clip}
.hero-in{display:grid;grid-template-columns:minmax(0,9fr) minmax(0,11fr);gap:40px;align-items:center}
.kicker{display:inline-block;color:var(--primary);font-weight:500;font-size:15px;letter-spacing:.04em;text-transform:uppercase;margin-bottom:18px}
.hero h1{font-size:clamp(36px,4.4vw,58px);line-height:1.04;margin-bottom:22px}
.lead{font-size:19px;color:var(--muted);margin-bottom:24px}
.ticks{list-style:none;padding:0;margin:0 0 32px;display:grid;gap:10px}
.ticks li{display:flex;gap:10px;align-items:center;font-weight:500}
.ticks .ic{color:var(--ok)}
.actions{display:flex;flex-wrap:wrap;gap:12px}
.hero-art{margin:-80px -140px -80px -50px}
.shot img{display:block;width:100%;height:auto}

/* Karten */
.grid2,.grid3,.grid4{display:grid;gap:20px}
.grid2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid4{grid-template-columns:repeat(4,minmax(0,1fr))}
.card,.feat{background:var(--s1);border:1px solid color-mix(in srgb,var(--line) 55%,transparent);border-radius:var(--r-xl);padding:28px}
.card p,.feat p{color:var(--muted)}
.problem{background:var(--bg2)}
.problem h2{max-width:780px;margin-bottom:36px}
.feat .ic{width:44px;height:44px;padding:10px;border-radius:14px;background:var(--tonal);color:var(--on-tonal);margin-bottom:18px;box-sizing:border-box}
.feat{transition:transform .3s var(--ease-spring),border-color .2s var(--ease)}
.feat:hover{transform:translateY(-4px);border-color:var(--primary)}

/* Zusammenarbeit: Hauptweg groß, Alternative bewusst zurückhaltend */
.model-main{position:relative;background:linear-gradient(160deg,color-mix(in srgb,var(--primary) 14%,var(--s1)),var(--s1) 55%);border:1px solid color-mix(in srgb,var(--primary) 45%,transparent);border-radius:var(--r-xl);padding:40px;display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:24px 48px;align-items:start}
.model-head p{color:var(--muted);font-size:18px}
.model-head h3{font-size:clamp(26px,3vw,36px);margin:14px 0 12px}
.badge{display:inline-block;padding:6px 14px;border-radius:var(--r-full);background:var(--primary);color:var(--on-primary);font-weight:500;font-size:14px}
.model-points{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 28px;grid-row:span 2}
.model-points li{display:flex;gap:14px;align-items:flex-start}
.model-points .num{width:34px;height:34px;font-size:16px;flex:none;margin:0}
.model-points h4{font:700 18px/1.25 var(--display);margin:4px 0 6px}
.model-points p{color:var(--muted);font-size:16px}
.model-main .btn{justify-self:start;align-self:end}
.model-alt{margin-top:20px;padding:22px 28px;border-radius:var(--r-l);border:1px dashed var(--line);color:var(--muted);max-width:820px}
.model-alt h3{font-size:17px;color:var(--text);margin-bottom:6px}
.model-alt p{font-size:15px}

/* Schritte */
.step-list{list-style:none;margin:0;padding:0;display:grid;gap:72px}
.step{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:48px;align-items:center}
.step:nth-child(even) .step-text{order:2}
.num{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--primary);color:var(--on-primary);font:700 20px var(--display);margin-bottom:16px}
.step h3{font-size:30px;margin-bottom:12px}
.step p{color:var(--muted);font-size:18px}

/* Galerie */
.gallery{background:var(--bg2)}
.shots{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}
.shots p{color:var(--muted);font-size:15px;margin-top:8px;text-align:center}
.thumb{display:block;width:100%;padding:0;border:0;background:none;cursor:zoom-in;border-radius:var(--r-l);transition:transform .3s var(--ease-spring)}
.thumb:hover{transform:scale(1.025)}
.viewer{border:0;padding:0;background:transparent;max-width:100vw;max-height:100vh;width:100vw;height:100vh;color:#fff}
.viewer::backdrop{background:rgba(5,6,9,.88)}
.viewer[open]{display:grid;grid-template-columns:64px minmax(0,1fr) 64px;align-items:center}
.viewer figure{margin:0;display:grid;justify-items:center;gap:14px;padding:24px 0}
.viewer img{max-height:82vh;width:auto;max-width:100%}
.viewer figcaption{font-size:16px;text-align:center;color:#e2e2e9}
.viewer button{width:52px;height:52px;border-radius:50%;border:0;background:rgba(255,255,255,.14);color:#fff;font-size:30px;line-height:1;cursor:pointer;justify-self:center}
.viewer button:hover{background:rgba(255,255,255,.26)}
.v-close{position:fixed;top:18px;right:18px}

/* Sicherheit + Stand */
.security .card h3{display:flex;gap:10px;align-items:center}
.security .card .ic{color:var(--primary)}
.note{margin-top:28px;padding:20px 24px;border-radius:var(--r-l);background:var(--s2);color:var(--muted);font-size:16px;max-width:900px}
.status{background:var(--bg2)}
.status .card{position:relative;padding-top:52px}
.dot{position:absolute;top:28px;left:28px;width:12px;height:12px;border-radius:50%}
.state-live .dot{background:var(--ok);box-shadow:0 0 0 6px color-mix(in srgb,var(--ok) 22%,transparent)}
.state-next .dot{background:var(--warn)}

/* FAQ */
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;padding:22px 40px 22px 0;font:700 20px/1.3 var(--display);position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:6px;top:18px;font-size:28px;color:var(--primary);transition:transform .25s var(--ease)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{color:var(--muted);padding:0 0 22px}

/* Abschluss + Fuß */
.cta{background:var(--glow),var(--bg2);text-align:center}
.cta-in p{color:var(--muted);font-size:19px;margin:0 auto 32px;max-width:600px}
.cta-mail{margin:22px auto 0;font-size:16px;color:var(--muted)}
.cta-mail a{font-weight:500;overflow-wrap:anywhere}
.foot a{overflow-wrap:anywhere}
.foot{padding:32px 0;border-top:1px solid var(--line);color:var(--muted);font-size:15px}
.foot-in{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
.foot .mark{width:10px;height:10px;margin-right:6px}

/* Bewegung beim Einblenden */
@media (prefers-reduced-motion: no-preference){
  .hero-text>*,.hero-art{animation:rise .7s var(--ease) both}
  .hero-text>:nth-child(2){animation-delay:.05s}.hero-text>:nth-child(3){animation-delay:.1s}.hero-text>:nth-child(4){animation-delay:.15s}.hero-text>:nth-child(5){animation-delay:.2s}
  .hero-art{animation:rise-art .9s var(--ease) .15s both}
  @keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
  @keyframes rise-art{from{opacity:0;transform:translateY(24px) scale(.98)}to{opacity:1;transform:none}}
}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none!important;animation:none!important}
}

/* Kleinere Bildschirme */
@media (max-width: 1080px){
  .grid4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .nav{display:none}
  .lang{margin-left:auto}
}
@media (max-width: 860px){
  section{padding:64px 0}
  .hero{padding:40px 0 48px}
  .hero-in,.step{grid-template-columns:minmax(0,1fr);gap:28px}
  .hero-art{margin:-40px -40px}
  .step:nth-child(even) .step-text{order:0}
  .grid2,.grid3,.shots{grid-template-columns:minmax(0,1fr)}
  .step-list{gap:56px}
  .model-main{grid-template-columns:minmax(0,1fr);padding:28px}
  .model-points{grid-template-columns:minmax(0,1fr);grid-row:auto}
}
@media (max-width: 560px){
  body{font-size:16px}
  .grid4{grid-template-columns:minmax(0,1fr)}
  .top-cta{display:none}
  .card,.feat{padding:22px}
  .actions .btn,.model-main .btn{flex:1 1 100%;justify-self:stretch}
  .model-alt{padding:18px 20px}
  .viewer[open]{grid-template-columns:44px minmax(0,1fr) 44px}
  .viewer button{width:40px;height:40px;font-size:24px}
}
main{overflow-x:clip}