/* YAMI Guard – Landingpage
   Mobil zuerst. Breakpoints: 600px (große Handys, Tablets), 960px (Desktop), 1080px (Chat-Demo nebeneinander). */

/* ---------- Grundlagen ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;overflow-x:hidden;-webkit-tap-highlight-color:rgba(34,230,242,.15)}
img,svg{display:block;max-width:100%}
img{height:auto}
h1,h2,h3,h4,p,figure,ol,ul{margin:0}
ol,ul{padding:0;list-style:none}
button,input{margin:0;font:inherit;color:inherit}
[hidden]{display:none!important}
a:focus-visible,button:focus-visible{outline:none;box-shadow:var(--focus-ring);border-radius:var(--radius-sm)}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.01ms!important}
}
@media (max-width:360px){:root{--gutter:20px}}

.sprite{position:absolute;width:0;height:0;overflow:hidden}
.icon{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.nowrap{white-space:nowrap}
.visually-hidden{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip-link{position:absolute;left:16px;top:-80px;z-index:100;padding:12px 16px;border-radius:var(--radius-sm);background:var(--accent);color:var(--text-on-accent);font:700 14px/1 var(--font-heading)}
.skip-link:focus{top:16px;color:var(--text-on-accent);text-decoration:none}

/* ---------- Layout ---------- */
.container{max-width:calc(var(--container-max) + 2 * var(--gutter));margin:0 auto;padding:0 var(--gutter)}
.section{padding:72px 0;border-bottom:1px solid var(--border-subtle)}
.section--sunken{background:var(--surface-sunken)}
@media (min-width:960px){.section{padding:104px 0}}

/* ---------- Typografie ---------- */
.overline{font:600 var(--fs-overline)/1 var(--font-heading);letter-spacing:var(--ls-overline);text-transform:uppercase;color:var(--accent)}
.h2{font:400 clamp(28px,16px + 3.4vw,40px)/1.1 var(--font-display);letter-spacing:var(--ls-display);color:var(--text-strong);text-wrap:balance}
.statement{font:400 clamp(38px,20px + 5.6vw,72px)/1.04 var(--font-display);letter-spacing:var(--ls-display);color:var(--text-strong);text-wrap:balance}
.lead{font-size:17px;line-height:var(--lh-body);color:var(--text-muted);text-wrap:pretty}
.section-head{max-width:680px}
.section-head .h2{margin-top:14px}
.section-head .lead{margin-top:16px}
.section-head--center{margin:0 auto;text-align:center}
@media (min-width:960px){.lead{font-size:18px}}

/* ---------- Komponenten (aus dem Design System) ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:var(--control-h-md);padding:0 20px;border:1px solid transparent;border-radius:var(--radius-sm);font:700 15px/1 var(--font-heading);letter-spacing:.02em;white-space:nowrap;text-decoration:none;cursor:pointer;transition:background-color var(--dur-fast) var(--ease-out),box-shadow var(--dur-base) var(--ease-out),border-color var(--dur-fast),transform var(--dur-fast)}
.btn:hover{text-decoration:none}
.btn .icon{width:18px;height:18px}
.btn--lg{height:var(--control-h-lg);padding:0 26px;font-size:16px}
.btn--lg .icon{width:20px;height:20px}
.btn--primary{background:var(--accent);color:var(--text-on-accent);box-shadow:var(--glow-sm)}
.btn--primary:hover{background:var(--accent-hover);color:var(--text-on-accent);box-shadow:var(--glow-md)}
.btn--primary:active{background:var(--accent-press);transform:scale(.98)}
.btn:focus-visible{box-shadow:var(--focus-ring)}
.btn:disabled{opacity:.4;cursor:not-allowed;transform:none}

.badge{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 10px;border:1px solid var(--border-default);border-radius:var(--radius-pill);background:var(--yg-ink-700);color:var(--text-muted);font:700 11px/1 var(--font-heading);letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}
.badge__dot{width:6px;height:6px;border-radius:50%;background:currentColor;box-shadow:0 0 6px currentColor}
.badge--accent{border-color:var(--border-accent-soft);background:var(--surface-accent-tint-strong);color:var(--accent)}
.badge--danger{border-color:rgba(255,92,99,.4);background:var(--status-danger-bg);color:var(--status-danger)}

.tag{display:inline-flex;align-items:center;height:32px;padding:0 12px;border:1px solid var(--border-default);border-radius:var(--radius-sm);background:var(--surface-raised);color:var(--text-body);font:500 14px/1 var(--font-body);white-space:nowrap}
.tag--accent{border-color:var(--accent);background:var(--surface-accent-tint-strong);color:var(--text-strong)}

/* ---------- Kopfzeile ---------- */
.topbar{position:absolute;top:0;left:0;right:0;z-index:10}
.topbar__inner{display:flex;align-items:center;justify-content:space-between;gap:16px;height:68px}
.topbar__logo{display:block;flex:none}
.topbar__logo img{width:auto;height:36px}
.topbar__link{font:500 13px/1.3 var(--font-body);color:var(--text-muted);text-align:right}
.topbar__link span{color:var(--accent)}
.topbar__link:hover{color:var(--text-strong);text-decoration:none}
@media (min-width:960px){
  .topbar__inner{height:84px}
  .topbar__logo img{height:42px}
  .topbar__link{font-size:14px}
}

/* ---------- 1 · Hero ---------- */
.hero{position:relative;overflow:hidden;border-bottom:1px solid var(--border-subtle)}
.hero__bg{position:absolute;top:0;right:0;bottom:0;left:0;background:var(--bg-halo),var(--bg-grid);pointer-events:none}
.hero__bg::after{content:"";position:absolute;right:0;bottom:0;left:0;height:45%;background:linear-gradient(to bottom,rgba(5,9,13,0),var(--surface-page))}
.hero__inner{position:relative;display:grid;gap:32px;padding-top:84px;padding-bottom:64px}
.hero__stage{position:relative;justify-self:center;width:min(58vw,280px)}
.hero__mark{position:relative;width:100%;mix-blend-mode:lighten;transition:opacity .9s var(--ease-out)}
.hero__gl{position:absolute;top:-16%;right:-44%;bottom:-28%;left:-44%;opacity:0;pointer-events:none;transition:opacity .9s var(--ease-out)}
.hero__gl canvas{display:block;width:100%;height:100%}
.hero__stage.is-3d .hero__gl{opacity:1}
.hero__stage.is-3d .hero__mark,.hero__stage.is-3d .hero__floor{opacity:0}
.hero__floor{position:absolute;left:6%;right:6%;bottom:-9%;height:22%;border-radius:50%;background:radial-gradient(closest-side,rgba(34,230,242,.2),rgba(34,230,242,0));transition:opacity .9s var(--ease-out)}
.hero__floor::after{content:"";position:absolute;left:14%;right:14%;top:36%;bottom:36%;border-radius:50%;border:1px solid rgba(34,230,242,.18)}
.hero__content{display:grid;justify-items:start}
.hero__title{margin-top:20px;font:400 clamp(31px,18px + 4.2vw,60px)/1.08 var(--font-display);letter-spacing:var(--ls-display);color:var(--text-strong);text-wrap:balance}
.hero__accent{display:block;color:var(--accent);text-shadow:var(--glow-text)}
.hero__lead{max-width:34em;margin-top:18px;font-size:17px;line-height:var(--lh-body);color:var(--text-body);text-wrap:pretty}
.hero__cta{margin-top:28px}
@media (max-width:599px) and (max-height:720px){
  .hero__inner{gap:24px;padding-top:76px}
  .hero__stage{width:min(50vw,240px)}
}
@media (max-width:599px){
  .hero__cta{width:100%;height:auto;min-height:var(--control-h-lg);padding:14px 18px;white-space:normal;text-align:center;line-height:1.2}
}
@media (min-width:960px){
  .hero__inner{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);align-items:center;gap:56px;min-height:min(100vh,900px);padding-top:128px;padding-bottom:104px}
  .hero__stage{grid-column:2;grid-row:1;width:min(100%,440px)}
  .hero__content{grid-column:1;grid-row:1}
  .hero__lead{font-size:18px}
  .hero__cta{margin-top:36px}
}

/* ---------- 2 · Das Problem ---------- */
.problem__statement{max-width:14em;margin-top:16px}
.problem__body{max-width:36em;margin-top:28px}
.problem__body p{font-size:17px;line-height:1.65;color:var(--text-body);text-wrap:pretty}
.problem__body .problem__note{margin-top:16px;font-size:14px;color:var(--text-muted)}

.masche{max-width:520px;margin-top:40px}
.masche__caption{font:600 12px/1 var(--font-heading);letter-spacing:var(--ls-overline);text-transform:uppercase;color:var(--text-muted)}
.masche__card{margin-top:14px;overflow:hidden;border:1px solid var(--border-subtle);border-radius:var(--radius-lg);background:var(--surface-card)}
.masche__head{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--border-subtle);background:var(--surface-raised)}
.masche__who{display:flex;flex-direction:column;gap:3px}
.masche__name{font:700 14px/1 var(--font-heading);color:var(--text-strong)}
.masche__meta{font:400 12px/1 var(--font-body);color:var(--text-subtle)}
.masche__list{display:grid;gap:14px;padding:18px 16px 20px}
.masche__item{display:grid;justify-items:start;gap:6px}
.masche__msg{max-width:100%;padding:8px 12px;border:1px solid var(--border-subtle);border-radius:10px;background:var(--yg-ink-800);font-size:14px;line-height:1.4;color:var(--text-body)}
.masche__step{display:flex;align-items:center;gap:8px;padding-left:4px;font:600 11px/1.2 var(--font-heading);letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted)}
.masche__step::before{content:"";flex:none;width:14px;height:1px;background:var(--border-strong)}
@media (min-width:600px){
  .masche__item{grid-template-columns:minmax(0,auto) minmax(0,1fr);align-items:center;column-gap:14px}
  .masche__step{padding-left:0}
}
@media (min-width:960px){
  .problem__grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px}
  .problem__overline{grid-column:1/-1}
  .problem__statement{grid-column:1/11;max-width:none}
  .problem__body{grid-column:8/13;grid-row:3;align-self:start;margin-top:56px}
  .problem__body p{font-size:18px}
  .masche{grid-column:1/7;grid-row:3;max-width:none;margin-top:56px}
}

/* ---------- 3 · So funktioniert's ---------- */
.demo{display:grid;grid-template-areas:"s1" "chat" "s2" "phone" "s3";row-gap:36px;margin-top:48px}
.demo__s1{grid-area:s1}
.demo__chat{grid-area:chat}
.demo__s2{grid-area:s2}
.demo__phone{grid-area:phone}
.demo__s3{grid-area:s3}

.step{max-width:30em}
.step__num{display:flex;align-items:center;gap:14px;font:400 32px/1 var(--font-display);color:var(--accent)}
.step__num::after{content:"";flex:1;height:1px;background:var(--border-default)}
.step__title{margin-top:14px;font:700 20px/1.25 var(--font-heading);color:var(--text-strong)}
.step p{margin-top:8px;font-size:16px;line-height:var(--lh-body);color:var(--text-muted)}

.device-label{display:flex;align-items:center;gap:8px;margin-bottom:12px;font:600 12px/1 var(--font-heading);letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted)}
.device-label .icon{width:16px;height:16px}

.chat{overflow:hidden;border:1px solid var(--border-default);border-radius:var(--radius-lg);background:var(--surface-card);box-shadow:var(--shadow-lg)}
.chat__head{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--border-subtle);background:var(--surface-raised);color:var(--text-muted)}
.chat__head .icon{width:18px;height:18px}
.chat__title{font:700 14px/1 var(--font-heading);color:var(--text-strong)}
.chat__status{display:inline-flex;align-items:center;gap:6px;margin-left:auto;font:600 12px/1 var(--font-heading);color:var(--accent)}
.chat__status .icon{width:15px;height:15px}
.chat__list{display:grid;gap:10px;padding:16px}
.msg{justify-self:start;max-width:84%}
.msg--me{justify-self:end}
.msg__user{display:block;margin:0 4px 3px;font:500 11px/1.2 var(--font-body);color:var(--text-subtle)}
.msg--me .msg__user{text-align:right}
.msg__text{padding:8px 12px;border:1px solid var(--border-subtle);border-radius:10px;background:var(--yg-ink-800);font-size:14px;line-height:1.4;color:var(--text-body)}
.msg--me .msg__text{background:var(--yg-ink-600)}
.msg--flag .msg__text{position:relative;z-index:0;color:var(--text-strong)}
.msg__ring{position:absolute;top:-1px;right:-1px;bottom:-1px;left:-1px;z-index:-1;border:1px solid var(--accent);border-radius:10px;background:var(--surface-accent-tint-strong);box-shadow:var(--glow-sm);pointer-events:none}
.flag{display:flex;align-items:center;gap:6px;margin:8px 4px 0;font:700 11px/1 var(--font-heading);letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}
.flag .icon{width:14px;height:14px}

.demo__phone{position:relative;justify-self:center;width:100%;max-width:290px}
.demo__phone::after{content:"";position:absolute;right:-16px;bottom:-1px;left:-16px;height:110px;background:linear-gradient(to bottom,rgba(5,9,13,0),var(--surface-page) 88%);pointer-events:none}
.phone{height:450px;overflow:hidden;padding:9px;border-radius:44px;background:#000;box-shadow:0 0 0 1px var(--border-default),var(--shadow-lg)}
.phone__screen{height:100%;overflow:hidden;padding:14px 14px 0;border-radius:36px;background:var(--bg-halo),var(--surface-page)}
.phone__status{display:flex;justify-content:flex-end;gap:5px;padding:4px 12px 0;color:var(--text-strong)}
.phone__status .icon{width:14px;height:14px}
.phone__lock{display:grid;justify-items:center;margin-top:18px;text-align:center;color:var(--text-muted)}
.phone__lock .icon{width:16px;height:16px}
.phone__date{margin-top:10px;font:600 13px/1 var(--font-heading);color:var(--text-body)}
.phone__time{margin-top:8px;font:400 60px/1 var(--font-display);letter-spacing:.02em;color:var(--text-strong)}
.notice{margin-top:28px;padding:12px 14px 14px;border:1px solid var(--border-default);border-radius:var(--radius-lg);background:var(--surface-raised)}
.notice__head{display:flex;align-items:center;gap:8px;font:600 11px/1 var(--font-heading);letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted)}
.notice__app-icon{width:20px;height:20px;border-radius:5px;object-fit:cover;background:#000}
.notice__when{margin-left:auto;font:400 12px/1 var(--font-body);letter-spacing:0;text-transform:none;color:var(--text-subtle)}
.notice__title{margin-top:10px;font:700 15px/1.3 var(--font-heading);color:var(--text-strong)}
.notice__text{margin-top:4px;font-size:13px;line-height:1.45;color:var(--text-muted)}
.notice .badge{margin-top:12px}

@media (min-width:600px) and (max-width:699px){
  .demo__chat{justify-self:center;width:100%;max-width:520px}
}
@media (min-width:700px) and (max-width:1079px){
  .demo{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);grid-template-areas:"s1 s1" "chat phone" "s2 s3";column-gap:32px;align-items:start}
}
@media (min-width:1080px){
  .demo{grid-template-columns:minmax(0,.9fr) minmax(0,1.25fr) minmax(0,.85fr);grid-template-rows:auto auto auto 1fr;grid-template-areas:"s1 chat phone" "s2 chat phone" "s3 chat phone" ". chat phone";column-gap:40px;row-gap:40px;align-items:start;margin-top:64px}
  .step__num{font-size:40px}
  .demo__phone{justify-self:start;margin-top:72px}
}

/* ---------- 4 · Was YAMI Guard anders macht ---------- */
.diff__local{display:grid;gap:40px;margin-top:48px;padding-bottom:56px;border-bottom:1px solid var(--border-subtle)}
.diff__big{font:700 clamp(26px,18px + 2vw,36px)/1.15 var(--font-heading);color:var(--text-strong);text-wrap:balance}
.diff__local-text p{max-width:32em;margin-top:16px;font-size:17px;line-height:var(--lh-body);color:var(--text-body)}

.diff__local-text p + p{margin-top:12px;color:var(--text-muted)}

/* Grafik: Chats bleiben auf dem Gerät, nur die Warnung geht über einen schmalen Weg ans Eltern-Handy */
.flow{display:grid;justify-items:center;width:100%;max-width:520px;margin:0 auto}
.flow__cloud{display:flex;flex-direction:column;align-items:center;gap:6px;font:600 11px/1 var(--font-heading);letter-spacing:.14em;text-transform:uppercase;color:var(--text-subtle)}
.flow__cloud .icon{width:32px;height:32px;stroke-width:1.75}
.flow__note{font:500 12px/1.35 var(--font-body);color:var(--text-subtle)}
.flow__blocked{position:relative;width:2px;height:72px;margin-top:10px;background:repeating-linear-gradient(to bottom,var(--border-strong) 0 5px,transparent 5px 10px)}
.flow__cut{position:absolute;top:50%;left:50%;display:flex;align-items:center;justify-content:center;width:26px;height:26px;margin:-13px 0 0 -13px;border:1px solid var(--border-default);border-radius:50%;background:var(--surface-sunken);color:var(--text-muted)}
.flow__cut .icon{width:13px;height:13px}
.flow__blocked .flow__note{position:absolute;top:50%;left:24px;width:110px;transform:translateY(-50%);text-align:left}
.flow__device{position:relative;display:grid;justify-items:center;gap:6px;width:100%;padding:18px 16px 24px;border:1px solid var(--border-accent-soft);border-radius:var(--radius-lg);background:var(--surface-accent-tint);box-shadow:0 0 48px rgba(34,230,242,.08)}
.flow__label{grid-column:1/-1;margin-bottom:10px;font:600 11px/1 var(--font-heading);letter-spacing:.14em;text-transform:uppercase;color:var(--accent);white-space:nowrap}
.flow__node{position:relative;display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 14px;border:1px solid var(--border-default);border-radius:var(--radius-sm);background:var(--surface-card);font:700 14px/1 var(--font-heading);color:var(--text-strong);white-space:nowrap}
.flow__node .icon{width:18px;height:18px;color:var(--text-muted)}
.flow__node--guard{border-color:var(--accent);color:var(--accent)}
.flow__node--guard .icon{color:var(--accent)}
.flow__node--guard::after{content:"";position:absolute;top:100%;left:50%;width:2px;height:25px;margin-left:-1px;background:var(--accent)}
.flow__arrow{width:18px;height:18px;color:var(--text-subtle);transform:rotate(90deg)}
.flow__path{position:relative;display:flex;flex-direction:column;align-items:center;gap:8px;padding:22px 0}
.flow__line{position:absolute;top:0;bottom:0;left:50%;width:2px;margin-left:-1px;background:var(--accent);transform-origin:50% 0}
.flow__packet{position:relative;z-index:2;display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 10px;border:1px solid var(--accent);border-radius:var(--radius-pill);background:var(--surface-sunken);font:700 11px/1 var(--font-heading);letter-spacing:.08em;text-transform:uppercase;color:var(--accent);white-space:nowrap}
.flow__packet .icon{width:14px;height:14px}
.flow__path .flow__note{position:relative;z-index:2;padding:2px 6px;background:var(--surface-sunken);text-align:center}
.flow__dot{position:absolute;z-index:1;top:0;left:50%;width:8px;height:8px;margin-left:-4px;border-radius:50%;background:var(--yg-teal-200);box-shadow:var(--glow-sm);opacity:0}
.flow__phone{display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 14px;border:1px solid var(--accent);border-radius:var(--radius-sm);background:var(--surface-card);font:700 14px/1 var(--font-heading);color:var(--text-strong);white-space:nowrap}
.flow__phone .icon{width:18px;height:18px;color:var(--accent)}
@media (min-width:420px){
  .flow{grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:48px}
  .flow__cloud,.flow__blocked{grid-column:1}
  .flow__blocked .flow__note{width:auto;white-space:nowrap}
  .flow__device{grid-column:1/-1;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:48px;padding-right:0;padding-left:0}
  .flow__arrow{position:absolute;top:52px;left:50%;margin-left:-9px;transform:none}
  .flow__path,.flow__phone{grid-column:2}
}
@media (min-width:960px){
  .diff__local{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:64px;margin-top:64px;padding-bottom:88px}
  .diff__local-text p{font-size:18px}
}

.diff__pair{display:grid;gap:56px;margin-top:56px}
.diff__title{font:700 clamp(22px,18px + 1vw,26px)/1.25 var(--font-heading);color:var(--text-strong)}
.diff__item > p{max-width:34em;margin-top:12px;font-size:16px;line-height:var(--lh-body);color:var(--text-muted)}
@media (min-width:960px){
  .diff__pair{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:0;margin-top:88px}
  .diff__item--signals{padding-right:56px;border-right:1px solid var(--border-subtle)}
  .diff__item--lock{padding-left:56px}
}

.signals{display:grid;gap:10px;margin-top:24px}
.signals__row{display:grid;gap:12px;padding:14px 16px;border:1px solid var(--border-subtle);border-radius:var(--radius-md);background:var(--surface-card)}
.signals__row--alert{border-color:var(--border-accent-soft);background:var(--surface-accent-tint)}
.signals__who{display:flex;align-items:center;gap:10px;font:600 14px/1 var(--font-body);color:var(--text-strong)}
.avatar{display:flex;align-items:center;justify-content:center;flex:none;width:28px;height:28px;border:1px solid var(--border-default);border-radius:50%;background:var(--yg-ink-600);font:700 12px/1 var(--font-heading);color:var(--text-muted)}
.signals__tags{display:flex;flex-wrap:wrap;gap:6px}
.signals__result{display:flex;align-items:center;gap:8px;font:600 13px/1 var(--font-heading);color:var(--text-muted)}
.signals__result .icon{width:16px;height:16px}
.signals__row--alert .signals__result{color:var(--accent)}
.pips{display:inline-flex;gap:4px;margin-right:2px}
.pips i{width:8px;height:8px;border-radius:2px;background:var(--border-default)}
.pips i.is-on{background:var(--text-muted)}
.signals__row--alert .pips i.is-on{background:var(--accent)}
@media (min-width:600px){
  .signals__row{grid-template-columns:132px minmax(0,1fr) auto;align-items:center}
}

.locked{max-width:480px;margin-top:24px;overflow:hidden;border:1px solid var(--border-subtle);border-radius:var(--radius-md);background:var(--surface-card)}
.locked__screen{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;min-height:180px;aspect-ratio:16/9;background:var(--bg-grid),var(--surface-sunken)}
.locked__seal{position:relative;display:flex;align-items:center;justify-content:center;width:56px;height:56px;border:1px solid var(--border-accent-soft);border-radius:50%;background:var(--surface-raised);color:var(--accent)}
.locked__seal .icon{width:24px;height:24px}
.locked__label{position:relative;font:700 12px/1 var(--font-heading);letter-spacing:.12em;text-transform:uppercase;color:var(--text-strong)}
.locked__meta{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;border-top:1px solid var(--border-subtle);font:500 13px/1 var(--font-body);color:var(--text-muted)}
.locked__meta span{display:inline-flex;align-items:center;gap:8px}
.locked__meta .icon{width:16px;height:16px}

/* ---------- 5 · Der Plan ---------- */
.timeline{position:relative;display:grid;gap:40px;margin-top:48px;padding-left:36px}
.timeline::before{content:"";position:absolute;top:8px;bottom:8px;left:7px;width:2px;background:repeating-linear-gradient(to bottom,var(--border-strong) 0 6px,transparent 6px 12px)}
.timeline__item{position:relative}
.timeline__item::before{content:"";position:absolute;top:0;left:-36px;width:16px;height:16px;border:2px solid var(--border-strong);border-radius:50%;background:var(--surface-page)}
.timeline__item.is-current::before{border-color:var(--accent);background:var(--accent);box-shadow:var(--glow-md)}
.timeline__item.is-current::after{content:"";position:absolute;top:16px;left:-29px;width:2px;height:72px;background:linear-gradient(var(--accent),rgba(34,230,242,0))}
.timeline__when{display:flex;flex-wrap:wrap;align-items:center;gap:10px;font:600 12px/16px var(--font-heading);letter-spacing:var(--ls-overline);text-transform:uppercase;color:var(--text-muted)}
.is-current .timeline__when{color:var(--accent)}
.timeline__here{display:inline-flex;align-items:center;height:22px;padding:0 8px;border:1px solid var(--border-accent-soft);border-radius:var(--radius-pill);background:var(--surface-accent-tint-strong);font:700 10px/1 var(--font-heading);letter-spacing:.08em;color:var(--accent)}
.timeline__what{margin-top:10px;font:700 20px/1.25 var(--font-heading);color:var(--text-strong)}
.timeline__what + p{max-width:28em;margin-top:6px;font-size:16px;line-height:var(--lh-body);color:var(--text-muted)}
@media (min-width:960px){
  .timeline{grid-template-columns:repeat(4,minmax(0,1fr));gap:32px;margin-top:64px;padding-top:44px;padding-left:0}
  .timeline::before{top:7px;right:0;bottom:auto;left:8px;width:auto;height:2px;background:repeating-linear-gradient(to right,var(--border-strong) 0 6px,transparent 6px 12px)}
  .timeline__item::before{top:-44px;left:0}
  .timeline__item.is-current::after{top:-37px;left:16px;width:70%;height:2px;background:linear-gradient(to right,var(--accent),rgba(34,230,242,0))}
}

/* ---------- 6 · Wer steckt dahinter ---------- */
.about__grid{display:grid;gap:40px}
.about__photo{position:relative;width:100%;max-width:360px;aspect-ratio:4/5;overflow:hidden;border:1px dashed var(--border-strong);border-radius:var(--radius-lg);background:var(--surface-card)}
@supports not (aspect-ratio:4/5){.about__photo::before{content:"";display:block;padding-top:125%}}
.about__photo.has-photo{border-style:solid;border-color:var(--border-default)}
.about__placeholder{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:24px;text-align:center;color:var(--text-subtle)}
.about__placeholder .icon{width:32px;height:32px;margin-bottom:4px;stroke-width:1.75}
.about__placeholder-title{font:700 15px/1.3 var(--font-heading);color:var(--text-muted)}
.about__placeholder-file{font:12px/1.3 var(--font-mono);color:var(--text-subtle)}
.about__img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover}
.about__text .h2{margin-top:14px}
.about__text > p:not(.overline){max-width:36em;margin-top:16px;font-size:17px;line-height:1.65;color:var(--text-body);text-wrap:pretty}
.about__text .h2 + p{margin-top:20px}
.facts{display:flex;flex-wrap:wrap;gap:12px 24px;margin-top:28px;padding-top:24px;border-top:1px solid var(--border-subtle)}
.facts li{display:inline-flex;align-items:center;gap:8px;font:500 15px/1.3 var(--font-body);color:var(--text-body)}
.facts .icon{width:18px;height:18px;color:var(--accent)}
@media (min-width:720px){
  .about__grid{grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:center;gap:48px}
  .about__photo{max-width:none}
}
@media (min-width:960px){
  .about__grid{gap:72px}
}

/* ---------- 7 · Anmeldung ---------- */
.signup{border-bottom:0;background:var(--bg-halo),var(--surface-page)}
.signup__inner{max-width:calc(640px + 2 * var(--gutter))}
.signup__card{margin-top:36px;padding:24px 20px;border:1px solid var(--border-default);border-radius:var(--radius-md);background:var(--surface-raised);box-shadow:var(--shadow-md),var(--inset-top)}
.field-label{display:block;margin-bottom:8px;font:600 13px/1.2 var(--font-heading);letter-spacing:.02em;color:var(--text-strong)}
.signup__row{display:grid;gap:12px}
.input{position:relative}
.input .icon{position:absolute;top:50%;left:14px;width:18px;height:18px;margin-top:-9px;color:var(--text-subtle);pointer-events:none;transition:color var(--dur-fast)}
.input input{width:100%;height:var(--control-h-lg);padding:0 14px 0 42px;border:1px solid var(--border-default);border-radius:var(--radius-sm);outline:none;background:var(--surface-input);color:var(--text-strong);font:400 16px/1 var(--font-body);-webkit-appearance:none;appearance:none;transition:border-color var(--dur-fast),box-shadow var(--dur-base)}
.input input::placeholder{color:var(--text-subtle);opacity:1}
.input input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(34,230,242,.15)}
.input:focus-within .icon{color:var(--accent)}
.input input[aria-invalid="true"]{border-color:var(--status-danger)}
.signup__row .btn{width:100%}
.field-hint{margin-top:10px;font-size:14px;line-height:1.4;color:var(--text-muted)}
.field-error{margin-top:6px;font-size:14px;line-height:1.4;color:var(--status-danger)}
.signup__consent{margin-top:16px;padding-top:16px;border-top:1px solid var(--border-subtle);font-size:13px;line-height:1.5;color:var(--text-subtle)}
.signup__trap{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.signup__done{display:flex;flex-direction:column;align-items:center;padding:12px 0;text-align:center;outline:none}
.signup__done .icon{width:40px;height:40px;color:var(--status-success)}
.signup__done h3{margin-top:14px;font:700 22px/1.3 var(--font-heading);color:var(--text-strong)}
.signup__done p{margin-top:8px;font-size:15px;line-height:var(--lh-body);color:var(--text-muted)}
@media (min-width:600px){
  .signup__card{padding:28px}
  .signup__row{grid-template-columns:minmax(0,1fr) auto}
  .signup__row .btn{width:auto}
}

.social{margin-top:44px;text-align:center}
.social__title{font:600 12px/1 var(--font-heading);letter-spacing:var(--ls-overline);text-transform:uppercase;color:var(--text-muted)}
.social__list{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:16px}
.social__list a{display:inline-flex;align-items:center;gap:6px;height:var(--control-h-md);padding:0 16px;border:1px solid var(--border-accent-soft);border-radius:var(--radius-sm);font:700 15px/1 var(--font-heading);letter-spacing:.02em;color:var(--text-strong);transition:background-color var(--dur-fast),border-color var(--dur-fast)}
.social__list a:hover{border-color:var(--accent);background:var(--surface-accent-tint);color:var(--text-strong);text-decoration:none}
.social__list .icon{width:16px;height:16px;color:var(--accent)}

/* ---------- 8 · Footer ---------- */
.footer{border-top:1px solid var(--border-subtle);background:var(--surface-sunken)}
.footer__inner{display:grid;justify-items:start;gap:16px;padding-top:40px;padding-bottom:40px}
.footer__logo img{width:auto;height:34px}
.footer__claim{font-size:14px;color:var(--text-subtle)}
.footer__nav{display:flex;flex-wrap:wrap;gap:0 24px}
.footer__nav a{display:inline-flex;align-items:center;min-height:44px;font:500 14px/1 var(--font-body);color:var(--text-muted)}
.footer__nav a:hover,.footer__nav a[aria-current="page"]{color:var(--text-strong)}
.footer__copy{font-size:13px;color:var(--text-subtle)}
@media (min-width:960px){
  .footer__inner{grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:8px 32px}
  .footer__copy{grid-column:1/-1}
}

/* ---------- Unterseiten (Impressum, Datenschutz, Kontakt, 404) ---------- */
.topbar--static{position:relative;border-bottom:1px solid var(--border-subtle)}
.topbar__back{display:inline-flex;align-items:center;gap:6px;min-height:44px;font:600 14px/1 var(--font-heading);color:var(--text-muted)}
.topbar__back:hover{color:var(--text-strong);text-decoration:none}
.topbar__back .icon{width:18px;height:18px}
.legal{padding:56px 0 96px;background:var(--bg-halo),var(--surface-page)}
.legal__inner{max-width:calc(var(--container-narrow) + 2 * var(--gutter))}
.legal__title{margin-top:14px;font:400 clamp(32px,20px + 3.4vw,48px)/1.1 var(--font-display);color:var(--text-strong);text-wrap:balance}
.legal__notice{margin-top:28px;padding:14px 16px;border:1px solid rgba(255,184,74,.4);border-radius:var(--radius-md);background:var(--status-warning-bg);font-size:15px;line-height:1.5;color:var(--text-body)}
.legal__notice strong{color:var(--status-warning)}
.legal h2{margin-top:40px;font:700 20px/1.3 var(--font-heading);color:var(--text-strong)}
.legal p{margin-top:10px}
.legal .todo{color:var(--text-subtle)}
.legal .btn{margin-top:32px}