/* Home — nine blocks, swiss grid. Only this page's styles; tokens come from site.css. */
:root{--edge:max(var(--gutter),calc((100vw - var(--wrap)) / 2 + var(--gutter)));--vpad:clamp(64px,8vw,120px)}
.foot{margin-top:0}
main>section{position:relative}
.way-in,.shelf-in,.probe-in,.limits-in,.faq-in,.stats-in{max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter)}
.way,.shelf,.probe,.limits,.faq{padding:var(--vpad) 0;border-top:1px solid var(--rule-strong)}
main>section h2{font-size:clamp(1.9rem,3.8vw,3.4rem)}

/* 1 · Lebenslage */
.hero{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);column-gap:clamp(24px,4vw,64px);padding:clamp(40px,5vw,80px) 0 0 var(--edge);min-height:min(88vh,780px)}
.hero-text{padding-bottom:clamp(40px,5vw,72px);align-self:center}
.hero h1{font-size:clamp(2.5rem,5.4vw,5rem);max-width:13ch;margin-bottom:.45em}
.hero-lede{max-width:46ch;margin-bottom:clamp(24px,3vw,40px)}
.sit-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule-strong);counter-reset:none}
.sit-list li{border-bottom:1px solid var(--rule)}
.sit-list a{display:grid;grid-template-columns:3.2rem minmax(0,1fr) auto;align-items:baseline;gap:0 14px;padding:clamp(12px,1.3vw,18px) 0;text-decoration:none;transition:padding .25s ease,background-color .25s ease}
.sit-n{font:800 1.05rem var(--f-display);color:var(--accent-ink)}
.sit-t b{display:block;font:700 clamp(1.15rem,1.9vw,1.7rem)/1.15 var(--f-display);letter-spacing:-.02em}
.sit-t small{display:block;font-size:.95rem;color:var(--muted);margin-top:.2em}
.sit-go{font:700 1.5rem var(--f-display);color:var(--ink);transition:transform .25s ease,color .25s ease}
.sit-list a:hover{padding-left:10px;background:var(--paper-2)}
.sit-list a:hover .sit-go{transform:translateX(6px);color:var(--accent)}
.hero-foot{display:flex;flex-wrap:wrap;align-items:center;gap:14px 28px;margin:clamp(20px,2.4vw,32px) 0 0;font:600 1rem var(--f-display)}
.hero-tag{font:600 .8rem var(--f-display);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);padding-left:28px;border-left:3px solid var(--accent)}
.hero-photo{margin:0;position:relative;overflow:hidden;min-height:420px;background:var(--paper-3)}
.hero-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:60% 50%;animation:slowzoom 2.6s cubic-bezier(.2,.7,.2,1) both}

/* 2 · Ticker */
.ticker{border-top:1px solid var(--rule-strong);border-bottom:1px solid var(--rule-strong);background:var(--paper-2);overflow:hidden;padding:clamp(14px,1.8vw,24px) 0}
.ticker-track{display:flex;width:max-content;animation:marquee 48s linear infinite}
.ticker:hover .ticker-track,.ticker:focus-within .ticker-track{animation-play-state:paused}
.ticker-list{display:flex;flex-shrink:0;list-style:none;margin:0;padding:0}
.ticker-list li{font:700 clamp(1.5rem,3vw,2.6rem)/1 var(--f-display);letter-spacing:-.02em;white-space:nowrap;padding-right:clamp(28px,3vw,52px);display:flex;align-items:center;gap:clamp(28px,3vw,52px)}
.ticker-list li::after{content:"";width:.5em;height:.5em;background:var(--accent);flex-shrink:0}
.ticker-list li:nth-child(even){color:var(--ink-2);font-weight:500;font-style:italic;font-family:var(--f-text)}

/* 3 · Wegweiser */
.way-in{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);column-gap:clamp(24px,4vw,72px);align-items:start}
.way-head{position:sticky;top:96px}
.way-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule-strong)}
.way-row{display:grid;grid-template-columns:clamp(120px,11.5vw,180px) minmax(0,1fr) auto;align-items:center;gap:0 clamp(16px,2.4vw,40px);padding:clamp(20px,2.4vw,34px) 0;border-bottom:1px solid var(--rule-strong)}
.way-n{font:800 clamp(4rem,8vw,7.5rem)/.85 var(--f-display);letter-spacing:-.05em;color:var(--ink);transition:color .3s ease}
.way-row:hover .way-n{color:var(--accent)}
.way-body h3{margin-bottom:.35em;font-size:clamp(1.25rem,2vw,1.75rem)}
.way-body p{margin:0;color:var(--ink-2);max-width:48ch;font-size:1rem}
.way-link{font:600 .95rem/1.3 var(--f-display);white-space:nowrap;align-self:end;padding-bottom:4px}

/* 4 · Kursregal */
.shelf-head{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:24px clamp(24px,4vw,72px);align-items:end;margin-bottom:clamp(28px,3.5vw,48px)}
.shelf-head h2{margin:0}
.chips{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-start}
.chips a{font:600 .9rem/1.2 var(--f-display);text-decoration:none;border:1.5px solid var(--ink);padding:.6rem .85rem;border-radius:var(--r);transition:background .2s,color .2s;min-height:40px;display:inline-flex;align-items:center}
.chips a:first-child{background:var(--ink);color:var(--paper)}
.chips a:hover{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.shelf-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(20px,2.4vw,36px) clamp(16px,2vw,28px);border-top:3px solid var(--ink);padding-top:clamp(20px,2.4vw,32px)}
.tile{display:flex;flex-direction:column;min-width:0}
.tile-photo{display:block;overflow:hidden;background:var(--paper-3);aspect-ratio:3/2}
.tile-photo img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.tile:hover .tile-photo img{transform:scale(1.04)}
.tile-body{display:flex;flex-direction:column;flex:1;padding-top:14px}
.tile h3{font-size:clamp(1.1rem,1.4vw,1.3rem);margin-bottom:.4em}
.tile h3 a{text-decoration:none}.tile h3 a:hover{color:var(--accent-ink)}
.tile-sum{font-size:.98rem;line-height:1.45;color:var(--ink-2);margin-bottom:.6em}
.tile-meta{font:500 .85rem var(--f-display);color:var(--muted);margin:0 0 .5em}
.tile-foot{margin:auto 0 0;display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding-top:10px;border-top:1px solid var(--rule);font:600 .92rem var(--f-display)}
.tile-foot .price{font-size:1.2rem}
.tile-lead{grid-column:span 2;grid-row:span 2}
.tile-lead .tile-photo{aspect-ratio:auto;flex:1;min-height:340px}
.tile-lead .tile-body{flex:0 0 auto}
.tile-lead h3{font-size:clamp(1.8rem,3vw,2.7rem);letter-spacing:-.025em}
.tile-lead .tile-sum{font-size:1.1rem;max-width:52ch}
.tile-kick{font:600 .8rem var(--f-display);letter-spacing:.1em;text-transform:uppercase;color:var(--accent-ink);margin:0 0 .6em}
.tile-buy{display:flex;flex-wrap:wrap;align-items:center;gap:12px 22px;margin-top:6px;font:600 1rem var(--f-display)}
.tile-price{font-size:clamp(1.8rem,2.6vw,2.4rem)}
.tile-fine{font-size:.85rem;color:var(--muted);margin:.7em 0 0}
.pfade{margin-top:clamp(40px,5vw,72px);border-top:1px solid var(--rule-strong);padding-top:clamp(24px,3vw,40px)}
.pfade-head{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:8px clamp(24px,4vw,72px);align-items:baseline;margin-bottom:24px}
.pfade-head h3,.pfade-head p{margin:0}
.pfade-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;background:var(--paper-2);border:1px solid var(--rule-strong)}
.pfad{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:16px;padding:18px;border-right:1px solid var(--rule-strong)}
.pfad:last-child{border-right:0}
.pfad-photo{display:block;overflow:hidden;background:var(--paper-3);align-self:start;aspect-ratio:4/5}
.pfad-photo img{width:100%;height:100%;object-fit:cover}
.pfad h4{font-size:1.25rem;margin-bottom:.4em}
.pfad h4 a{text-decoration:none}.pfad h4 a:hover{color:var(--accent-ink)}
.pfad-inc{list-style:none;margin:0 0 .7em;padding:0;font-size:.92rem;line-height:1.35;color:var(--ink-2)}
.pfad-inc li{padding:.22em 0;border-top:1px solid var(--rule)}
.pfad-foot{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;margin:0 0 .3em}
.pfad-foot .price{font-size:1.5rem}
.pfad-save{font:600 .88rem var(--f-display);color:var(--ok)}

/* 5 · Lernzeit in Zahlen */
.stats{background:var(--ink);color:var(--paper);padding:var(--vpad) 0;border-top:6px solid var(--accent)}
.stats .eyebrow{color:#D9C47A}
.stats h2{max-width:16ch}
.stats-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:clamp(28px,4vw,56px) 0 0;border-top:1px solid rgba(244,241,234,.35)}
.stat{display:flex;flex-direction:column-reverse;justify-content:flex-end;padding:clamp(18px,2.4vw,32px) clamp(12px,2vw,28px) 0 0;border-right:1px solid rgba(244,241,234,.2);margin-right:clamp(12px,2vw,28px)}
.stat:last-child{border-right:0}
.stat dt{font:600 .95rem/1.3 var(--f-display);letter-spacing:.04em;color:#D5D8DD;margin-top:.6rem}
.stat dd{margin:0}
.stat-n{display:block;font:800 clamp(3.6rem,9vw,8.4rem)/.9 var(--f-display);letter-spacing:-.05em;color:var(--paper)}
.stats-note{margin:clamp(24px,3vw,40px) 0 0;max-width:60ch;font-size:.95rem;color:#C9CDD3}

/* 6 · Sparrechner-Probe */
.probe-in{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:clamp(32px,5vw,88px);align-items:start}
.probe-text .lead{margin-bottom:1.4em}
.probe-form{display:grid;gap:14px;margin-bottom:1.2em;padding:20px 0;border-top:1px solid var(--rule-strong);border-bottom:1px solid var(--rule)}
html:not(.js) .probe-form{display:none}
.probe-field label{margin-bottom:.3rem}
.probe-field small{display:block;margin-top:.35rem;font-size:.85rem;color:var(--muted)}
.probe-out{background:var(--paper-2);border-top:6px solid var(--ink);padding:clamp(20px,3vw,40px)}
.probe-big{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:20px clamp(16px,3vw,40px);align-items:end}
.probe-k{display:block;font:600 .8rem/1.3 var(--f-display);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:.5rem}
.probe-v{display:block;font:800 clamp(1.8rem,3.4vw,3rem)/1 var(--f-display);letter-spacing:-.03em;overflow-wrap:anywhere}
.probe-v-end{font-size:clamp(2.4rem,5vw,4.6rem);color:var(--ink)}
.probe-fine{font-size:.92rem;color:var(--ink-2);margin:1.2rem 0 1.6rem;max-width:56ch}
.probe-table{font-size:.95rem;background:var(--paper)}
.probe-table caption{caption-side:top;text-align:left;font:600 .8rem var(--f-display);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);padding-bottom:.6rem}
.probe-table th,.probe-table td{border-top:1px solid var(--rule-strong);padding:.7rem .8rem}
.probe-table tbody th{font:600 .95rem var(--f-display);text-transform:none;letter-spacing:0;color:var(--ink)}
.probe-table td{font-variant-numeric:tabular-nums}

/* 7 · Grenzen */
.limits-in{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1.1fr) minmax(0,.8fr);column-gap:clamp(24px,3.5vw,56px);row-gap:clamp(24px,3vw,40px)}
.limits-head{grid-column:1/-1}
.limits-head h2{margin:0;max-width:20ch}
.limits-col h3{font-size:1.1rem;letter-spacing:.02em;padding-bottom:.7rem;margin:0;border-bottom:3px solid var(--ink)}
.limits-not h3{border-bottom-color:var(--accent)}
.limits-col ul{list-style:none;margin:0;padding:0}
.limits-col li{position:relative;padding:.9rem 0 .9rem 2.1rem;border-bottom:1px solid var(--rule);font-size:1rem;line-height:1.45;color:var(--ink-2)}
.limits-col li b{display:block;font:700 1.05rem/1.3 var(--f-display);color:var(--ink);margin-bottom:.1rem}
.limits-col li::before{content:"";position:absolute;left:.15rem;top:1.25rem;width:.9rem;height:.5rem;border-left:3px solid var(--ok);border-bottom:3px solid var(--ok);transform:rotate(-45deg)}
.limits-not li::before{content:"\00D7";width:auto;height:auto;border:0;transform:none;top:.55rem;left:.1rem;font:700 1.7rem/1 var(--f-display);color:var(--err)}
.limits-photo{margin:0;grid-row:2;grid-column:3;overflow:hidden;background:var(--paper-3);min-height:360px;position:relative}
.limits-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* 8 · Fragen */
.faq-in{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);column-gap:clamp(32px,6vw,104px);align-items:start;grid-template-areas:"head list"}
.faq-head{grid-area:head;position:sticky;top:96px}
.faq-list{grid-area:list;border-top:1px solid var(--rule-strong)}
.faq details{border-bottom:1px solid var(--rule-strong)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:1.2rem 0;font:700 clamp(1.1rem,1.6vw,1.4rem)/1.25 var(--f-display);letter-spacing:-.01em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font:500 2rem/1 var(--f-display);color:var(--accent-ink);transition:transform .25s ease;flex-shrink:0}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq summary:hover{color:var(--accent-ink)}
.faq details p{margin:0 0 1.3rem;max-width:58ch;color:var(--ink-2)}

/* 9 · Abschluss-Band */
.band{min-height:clamp(420px,52vw,640px);display:flex;align-items:center;overflow:hidden;background:var(--ink);color:var(--paper)}
.band>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 40%;animation:slowzoom 3s ease-out both}
.band::before{content:"";position:absolute;inset:0;background:rgba(20,24,31,.74);z-index:1}
.band::after{content:"";position:absolute;left:0;top:0;bottom:0;width:clamp(10px,1.2vw,18px);background:var(--accent);z-index:2}
.band-in{position:relative;z-index:3;width:100%;max-width:var(--wrap);margin:0 auto;padding:var(--vpad) var(--gutter)}
.band h2{font-size:clamp(2.4rem,6vw,5.4rem);font-weight:800;max-width:13ch;margin-bottom:.4em}
.band-p{font-size:clamp(1.1rem,1.5vw,1.4rem);max-width:40ch;color:#E3E5E8}
.band-cta{display:flex;flex-wrap:wrap;align-items:center;gap:16px 32px;margin:1.8rem 0 0}
.band .btn-accent:hover{background:var(--paper);border-color:var(--paper);color:var(--ink)}
.band-link{font:600 1.05rem var(--f-display);color:var(--paper)}
.band :focus-visible{outline-color:var(--paper)}

@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes slowzoom{from{transform:scale(1.07)}to{transform:scale(1)}}

@media (max-width:1100px){
  .shelf-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pfade-grid{grid-template-columns:1fr}.pfad{border-right:0;border-bottom:1px solid var(--rule-strong)}
  .stats-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:860px){
  .hero{grid-template-columns:1fr;padding-right:var(--edge)}.hero-photo{min-height:340px;margin-right:calc(-1 * var(--edge))}
  .way-in,.probe-in,.faq-in,.shelf-head,.pfade-head,.limits-in{grid-template-columns:1fr}
  .faq-in{grid-template-areas:"head" "list"}.way-head,.faq-head{position:static}
  .way-row{grid-template-columns:auto 1fr}.way-link{grid-column:2}
  .limits-photo{grid-row:auto;grid-column:auto}
}
@media (prefers-reduced-motion:reduce){
  .ticker{overflow-x:auto}
  .ticker-track{animation:none}
  .hero-photo img,.band>img{animation:none}
}