/* NNG Webinar-Landingpage. Tile D: dunkler Rahmen, heller Mittelteil, Inter. */

@font-face{
  font-family:"Inter";
  src:url("fonts/inter-latin-wght.woff2") format("woff2");
  font-weight:100 900;
  font-style:normal;
  font-display:swap;
}

:root{
  --ink:oklch(0.16 0.004 100);
  --ink-2:oklch(0.22 0.004 100);
  --ink-line:oklch(0.30 0.005 100);
  --paper:oklch(0.99 0.003 100);
  --paper-2:oklch(0.965 0.003 100);
  --line:oklch(0.91 0.004 100);
  --muted:oklch(0.48 0.01 100);
  --on-ink:oklch(0.97 0.004 100);
  --on-ink-muted:oklch(0.76 0.006 100);

  --radius:10px;
  --gutter:20px;
  --ease:cubic-bezier(.16,1,.3,1);
  --font:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--font);font-size:1.0625rem;line-height:1.55;color:var(--ink);background:var(--paper);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{display:block;max-width:100%;height:auto}
h1,h2,h3,p,ol,ul{margin:0}
ol,ul{padding:0;list-style:none}
a{color:inherit}
:focus-visible{outline:2px solid currentColor;outline-offset:3px;border-radius:4px}

.wrap{width:100%;max-width:1120px;margin-inline:auto;padding-inline:var(--gutter)}

/* Typografie */
h1{font-size:clamp(2.05rem,8.4vw,3.9rem);font-weight:800;letter-spacing:-.035em;line-height:1.04;text-wrap:balance}
h2{font-size:clamp(1.75rem,6vw,2.85rem);font-weight:800;letter-spacing:-.03em;line-height:1.08;text-wrap:balance}
h3{font-size:1.1875rem;font-weight:700;letter-spacing:-.015em;line-height:1.25}
p{max-width:62ch}
.fine{font-size:.8125rem;line-height:1.45;color:var(--muted)}

/* Sektionen */
.sec{padding-block:clamp(56px,11vw,120px)}
.sec--dark{background:var(--ink);color:var(--on-ink)}
.sec--dark .fine{color:var(--on-ink-muted)}

/* Buttons: immer die Gegenfarbe zum Umfeld */
.btn{
  display:flex;align-items:center;justify-content:center;
  width:100%;min-height:52px;padding:14px 22px;
  font:700 1rem/1.2 var(--font);letter-spacing:-.005em;text-align:center;text-decoration:none;
  color:var(--ink);background:var(--paper);
  border:0;border-radius:var(--radius);cursor:pointer;
  transition:transform .25s var(--ease),background-color .25s var(--ease);
}
.btn:hover{background:oklch(0.94 0.004 100)}
.btn:active{transform:translateY(1px) scale(.985)}
.btn--ink{color:var(--paper);background:var(--ink)}
.btn--ink:hover{background:var(--ink-2)}

/* Formular */
.signup{display:grid;gap:14px}
.signup__step{display:grid;gap:14px}
.signup__step[hidden]{display:none}
.field{display:grid;gap:6px}
.field span{font-size:.875rem;font-weight:600}
.field input{
  width:100%;min-height:52px;padding:12px 14px;
  font:500 1rem var(--font);
  color:var(--ink);background:var(--paper);
  border:1.5px solid transparent;border-radius:var(--radius);
}
.field input:focus-visible{outline:2px solid var(--on-ink);outline-offset:2px}
.field input[aria-invalid="true"]{border-color:oklch(0.62 0.19 25)}
.signup--on-dark .field span{color:var(--on-ink)}
.signup--on-dark .field input{color:var(--on-ink);background:var(--ink-2);border-color:var(--ink-line)}
.signup--on-dark .field input:focus-visible{outline-color:var(--on-ink)}
.signup--on-dark a{color:var(--on-ink)}
.signup__done{font-size:1.375rem;font-weight:800;letter-spacing:-.02em}
.fine--lead{font-size:.9375rem;color:var(--on-ink-muted)}
.link-quiet{font-size:.9375rem;font-weight:600;text-align:center;padding-block:6px}

/* HERO (mobil zuerst) */
.hero{background:var(--ink);color:var(--on-ink);position:relative;overflow:clip}
.hero__bar{display:flex;align-items:center;justify-content:space-between;padding-block:16px;position:relative;z-index:2}
.logo{height:26px;width:auto;filter:invert(1)}
.hero__media{position:relative;height:clamp(200px,34svh,320px);margin-top:-58px}
.hero__media img{width:100%;height:100%;object-fit:cover;object-position:50% 14%;filter:grayscale(1) contrast(1.06)}
.hero__media::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,oklch(0.16 0.004 100 / .55) 0%,oklch(0.16 0.004 100 / 0) 30%,oklch(0.16 0.004 100 / 0) 45%,var(--ink) 100%)}
.hero__body{position:relative;z-index:1;display:grid;gap:16px;padding-bottom:36px;margin-top:-56px}
.chip{
  justify-self:start;
  padding:7px 12px;border:1px solid var(--ink-line);border-radius:999px;
  font-size:.8125rem;font-weight:600;color:var(--on-ink);background:oklch(0.16 0.004 100 / .7);
}
.hero__sub{font-size:1.0625rem;color:var(--on-ink-muted);max-width:44ch}
.hero .signup{margin-top:6px;max-width:440px}

/* PAIN */
.pain{display:grid;gap:36px}
.pain__list{display:grid}
.pain__list li{display:grid;grid-template-columns:44px 1fr;gap:14px;padding-block:22px;border-top:1px solid var(--line)}
.pain__list li:last-child{border-bottom:1px solid var(--line)}
.pain__n{font-size:2.5rem;font-weight:800;letter-spacing:-.05em;line-height:.9;color:var(--ink)}
.pain__list p{margin-top:6px;color:var(--muted)}
.pain__turn{font-size:clamp(1.3rem,4.6vw,1.75rem);font-weight:700;letter-spacing:-.02em;line-height:1.25;max-width:26ch;text-wrap:balance}

/* LEARN */
.sec--learn{background:var(--paper-2)}
.sec--learn h2{max-width:16ch}
.learn{display:grid;gap:12px;margin-top:32px}
.tile{padding:24px;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);display:grid;gap:10px;align-content:start}
.tile p{color:var(--muted)}
.tile--lead{background:var(--ink);color:var(--on-ink);border-color:var(--ink);gap:12px}
.tile--lead p{color:var(--on-ink-muted)}
.bars{display:grid;gap:8px;margin-top:10px}
.bars i{display:block;height:10px;border-radius:5px;background:var(--on-ink);transform-origin:left center;transform:scaleX(var(--w))}
.cta-row{display:grid;gap:10px;margin-top:28px;max-width:440px}

/* ABOUT */
.about__grid{display:grid;gap:28px}
.about__photo img{width:100%;aspect-ratio:4/3;object-fit:cover;object-position:50% 28%;border-radius:var(--radius)}
.about__text{display:grid;gap:14px;align-content:center}
.about__role{font-weight:600;color:var(--on-ink)}
.about__text p{color:var(--on-ink-muted)}
.about__text .about__role{color:var(--on-ink)}

/* PROOF */
.sec--proof h2{margin-bottom:28px}
.proof__scroller{
  display:grid;grid-auto-flow:column;grid-auto-columns:min(82%,340px);gap:12px;
  overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;
  padding:2px var(--gutter) 16px;scroll-padding-inline:var(--gutter);
  scrollbar-width:none;
}
.proof__scroller::-webkit-scrollbar{display:none}
.quote{scroll-snap-align:start;display:grid;gap:14px;align-content:start;padding:20px;border:1px solid var(--line);border-radius:var(--radius);background:var(--paper)}
.quote__photo{aspect-ratio:1/1;max-height:180px;width:100%;display:grid;place-items:center;border-radius:var(--radius);background:var(--paper-2);color:var(--muted);font-size:.875rem}
.quote__text{font-size:1.125rem;font-weight:600;letter-spacing:-.01em;line-height:1.35}
.quote__who{font-size:.875rem;color:var(--muted)}
.quote__who b{color:var(--ink)}
.quote__result{font-size:.9375rem;font-weight:700;padding-top:12px;border-top:1px solid var(--line)}
.sec--proof .wrap:last-child{padding-top:8px}

/* FAQ */
.sec--faq{background:var(--paper-2)}
.faq{display:grid;gap:28px}
.faq__list{display:grid;gap:8px;max-width:720px}
details{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius)}
summary{
  display:flex;justify-content:space-between;align-items:center;gap:16px;
  min-height:56px;padding:14px 18px;font-weight:700;letter-spacing:-.01em;cursor:pointer;list-style:none;
}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";flex:none;font-size:1.5rem;font-weight:400;line-height:1;transition:transform .3s var(--ease)}
details[open] summary::after{transform:rotate(45deg)}
details p{padding:0 18px 18px;color:var(--muted)}

/* FINALE */
.final__grid{display:grid;gap:28px}
.final__sub{margin-top:14px;color:var(--on-ink-muted)}
.final .signup{max-width:440px}

/* FOOTER */
.foot{padding-block:28px;border-top:1px solid var(--ink-line);font-size:.8125rem;color:var(--on-ink-muted)}
.foot__row{display:grid;gap:16px}
.foot nav{display:flex;gap:20px}
.foot a{text-decoration:none;color:var(--on-ink-muted)}
.foot a:hover{color:var(--on-ink)}
.foot .logo{height:20px;opacity:.9}

/* Klebender Button */
.sticky{
  position:fixed;inset:auto 0 0 0;z-index:20;
  padding:10px var(--gutter) calc(10px + env(safe-area-inset-bottom));
  background:oklch(0.16 0.004 100 / .94);border-top:1px solid var(--ink-line);
  transform:translateY(110%);transition:transform .45s var(--ease);
}
.sticky.is-on{transform:none}
.sticky .btn{max-width:560px;margin-inline:auto;min-height:48px}

/* Bewegung nur unterhalb des Heros, und nur wenn erlaubt */
@media (prefers-reduced-motion:no-preference){
  .js .reveal{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease),transform .7s var(--ease);transition-delay:calc(var(--i,0) * 80ms)}
  .js .reveal.is-in{opacity:1;transform:none}
  .js .bars i{transform:scaleX(0);transition:transform 1.1s var(--ease);transition-delay:calc(var(--i,0) * 120ms + 250ms)}
  .js .tile.is-in .bars i{transform:scaleX(var(--w))}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .sticky{transition:none}
}

/* Tablet und Desktop */
@media (min-width:760px){
  :root{--gutter:32px}
  .hero{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);min-height:min(100svh,860px);align-items:stretch}
  .hero__bar{position:absolute;inset:0 auto auto 0;width:100%;max-width:1120px;left:50%;transform:translateX(-50%);padding-block:22px}
  .hero__body{grid-column:1;grid-row:1;margin-top:0;align-content:center;padding-block:110px 64px;padding-inline:max(var(--gutter),calc((100vw - 1120px) / 2 + var(--gutter))) 40px;max-width:none}
  .hero__body>*{max-width:560px}
  .hero__body h1{font-size:clamp(2.6rem,4.2vw,3.35rem);max-width:600px}
  .hero__body{padding-block:88px 40px;gap:14px}
  .hero__media{grid-column:2;grid-row:1;height:auto;margin:0}
  .hero__media img{object-position:50% 20%}
  .hero__media::after{background:linear-gradient(to right,var(--ink) 0%,oklch(0.16 0.004 100 / 0) 38%)}
  .pain{grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:64px;align-items:start}
  .pain h2{grid-column:1;position:sticky;top:48px}
  .pain__list{grid-column:2;grid-row:1 / span 2}
  .pain__turn{grid-column:1;align-self:end}
  .learn{grid-template-columns:1.25fr 1fr;grid-template-rows:auto auto}
  .tile--lead{grid-row:1 / span 2;padding:32px}
  .about__grid{grid-template-columns:1.1fr 1fr;gap:64px;align-items:center}
  .about__photo img{aspect-ratio:5/4}
  .proof__scroller{grid-auto-columns:340px;padding-inline:max(var(--gutter),calc((100vw - 1120px) / 2 + var(--gutter)))}
  .final__grid{grid-template-columns:1fr 1fr;column-gap:64px;align-items:center}
  .foot__row{grid-template-columns:auto 1fr auto;align-items:center}
  .foot nav{justify-content:center}
  .sticky{display:none}
}

/* ===== Konzept-Ebene (nur für die Präsentation, abschaltbar) ===== */
.no-concept .concept-only{display:none}

.cn{background:var(--paper-2);color:var(--ink);border-block:1px dashed oklch(0.75 0.005 100);font-size:.9375rem}
.cn__in{padding-block:20px;display:grid;gap:12px}
.cn__tag{font-size:.75rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.cn .cn__title{font-size:1.25rem;letter-spacing:-.015em;line-height:1.2;font-weight:800;text-wrap:balance;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:12px}
.cn .cn__title::after{content:"+";font-weight:400;font-size:1.4rem;line-height:1}
.cn.is-open .cn__title::after{content:"\2212"}
.cn dl{margin:0;display:grid;gap:10px}
.cn dl div{display:grid;gap:2px}
.cn dt{font-weight:700}
.cn dd{margin:0;max-width:72ch;color:var(--muted)}
.cb__toggle{
  justify-self:start;font:600 .8125rem var(--font);padding:8px 12px;border-radius:var(--radius);cursor:pointer;
  color:var(--ink);background:var(--paper);border:1px solid oklch(0.75 0.005 100);
}

/* Platzhalter sichtbar markieren, auf hell und dunkel */
.ph-mark{outline:1px dashed currentColor;outline-offset:2px;border-radius:3px;background:color-mix(in oklab,currentColor 12%,transparent)}
.no-concept .ph-mark{outline:none;background:none}

@media (max-width:759px){
  .cn:not(.is-open) dl{display:none}
}
@media (min-width:760px){
  .cn dl{grid-template-columns:1fr 1.6fr 1fr;gap:28px}
  .cn .cn__title{cursor:default}
  .cn .cn__title::after{content:none}
}