/* Cinematic product story. Native graphics, quiet surfaces, tactile controls. */
.learning-landing { overflow-x:clip; }
/* The document owns scrolling. App-wide main overflow + overscroll containment
   otherwise traps wheel/touch input in a tiny scroll range created by reveals. */
.learning-landing main { overflow:visible; overscroll-behavior:auto; scrollbar-gutter:auto; overflow-x:clip; }
.landing-wrap { width:min(1160px,calc(100% - 64px)); margin-inline:auto; }
.landing-skip { position:fixed; left:16px; top:-80px; z-index:1000; padding:12px; background:var(--learn-surface); }.landing-skip:focus { top:12px; }
.learning-landing .cinematic-nav { position:fixed; top:0; inset-inline:0; z-index:100; display:flex; align-items:center; justify-content:space-between; gap:24px; padding:18px max(32px,calc((100vw - 1160px)/2)); border-bottom:1px solid var(--learn-border); background:var(--learn-bg); box-shadow:none; }
.cinematic-nav > a img { width:150px; height:auto; }.cinematic-nav-links,.cinematic-nav-actions { display:flex; align-items:center; gap:28px; }.cinematic-nav-links a { color:var(--learn-muted); font-size:13px; font-weight:650; }.cinematic-nav-links a:hover { color:var(--learn-accent); }.cinematic-nav-actions { gap:16px; }.cinematic-nav .learning-icon-button { border:0; background:transparent; width:40px; height:40px; }
.learning-landing :is(.btn-primary,.btn-secondary) { display:inline-flex; justify-content:center; align-items:center; gap:12px; padding:16px 24px; text-decoration:none; }
.learning-landing :is(section,header,[id=kostenlos]) { scroll-margin-top:100px; }
.landing-eyebrow { display:block; color:var(--learn-muted); font-size:10px; font-weight:800; letter-spacing:.16em; margin-bottom:24px; }
.landing-hero { position:relative; display:grid; grid-template-columns:1.2fr 1fr; align-items:center; min-height:min(900px,100svh); gap:20px; padding-block:160px 100px; }
.landing-hero h1 { font-size:clamp(48px,5.2vw,76px); line-height:1.02; font-weight:900; letter-spacing:-.065em; position:relative; z-index:2; }
.landing-hero em,.landing-generator em { font-style:normal; color:var(--learn-accent); }
.landing-hero-copy > p { color:var(--learn-muted); font-size:16px; line-height:1.8; margin:30px 0; }
.landing-actions { display:flex; align-items:center; gap:20px; flex-wrap:wrap; }
.landing-text-link { display:inline-flex; align-items:center; gap:10px; min-height:44px; font-size:13px; font-weight:750; color:var(--learn-accent); }
.landing-trust { margin-top:21px; color:var(--learn-muted); font-size:11px; }
.cinema-stage { position:relative; height:490px; isolation:isolate; pointer-events:none; }
.cinema-halo { position:absolute; inset:8% -10%; background:radial-gradient(ellipse,#a899ef24,transparent 66%); border-radius:50%; z-index:-1; }
.cinema-infinity { position:absolute; top:75px; left:-12%; width:125%; color:var(--learn-accent); transform:translateY(var(--parallax-y,0px)) rotate(-17deg); filter:drop-shadow(0 12px 0 var(--learn-accent-edge)) drop-shadow(0 35px 28px #6552da26); }
.cinema-infinity svg { width:100%; height:auto; }
.cinema-card { position:absolute; background:var(--learn-surface); border:2px solid var(--learn-border); border-radius:22px; box-shadow:0 6px 0 var(--learn-border),0 25px 55px #101c3410; transform:translateY(var(--parallax-y,0px)) rotate(var(--card-turn,0deg)); }
.cinema-card-numbers { top:28px; right:5%; width:225px; padding:22px; --card-turn:8deg; }.cinema-card-numbers > i { color:var(--learn-accent); font-size:20px; margin-bottom:20px; }.cinema-card-numbers > div { display:flex; align-items:center; justify-content:space-between; font-size:25px; font-weight:850; }.cinema-card-numbers b { color:var(--learn-accent); background:var(--learn-tint); padding:4px 10px; border-radius:9px; }
.cinema-card-shapes { bottom:30px; left:10%; width:155px; padding:20px; --card-turn:-12deg; }.cinema-card-shapes svg { width:100%; }.cinema-spark { position:absolute; right:3%; bottom:62px; font-size:52px; color:#e7b74b; transform:translateY(var(--parallax-y,0px)) rotate(12deg); filter:drop-shadow(0 5px 0 #b98c2e); }
.landing-generator { display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:100px; padding-block:50px 130px; }
.landing-generator-copy h2,.landing-path h2 { font-size:clamp(34px,4vw,52px); line-height:1.08; font-weight:850; letter-spacing:-.045em; }.landing-generator-copy p,.landing-path p { color:var(--learn-muted); font-size:15px; line-height:1.8; max-width:340px; margin-top:24px; }
.landing-practice-preview { background:var(--learn-surface); border:2px solid var(--learn-border); border-radius:28px; box-shadow:0 8px 0 var(--learn-border); padding:28px; min-width:0; }
.landing-demo-head { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:18px; font-size:10px; font-weight:750; letter-spacing:.07em; color:var(--learn-muted); }.landing-demo-head .learning-icon-button { border:0; background:var(--learn-tint); }
.landing-practice-preview h2 { font-size:22px; line-height:1.3; font-weight:800; }
.landing-number-row { display:flex; gap:7px; margin:27px 0; }.landing-number-row > * { flex:1; min-width:0; border-radius:12px; padding:13px 2px; background:var(--learn-bg); text-align:center; font-weight:850; font-size:22px; font-variant-numeric:tabular-nums; }.landing-number-row strong { background:var(--learn-tint); color:var(--learn-accent); }
.landing-demo-answers { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }.landing-demo-answers button { min-height:50px; border:2px solid var(--learn-border); border-radius:13px; box-shadow:0 3px 0 var(--learn-border); font-weight:800; transition:transform .15s,background .15s,border-color .15s; }.landing-demo-answers button:not(:disabled):hover { border-color:var(--learn-accent); transform:translateY(-2px); }.landing-demo-answers button:not(:disabled):active { transform:translateY(3px); box-shadow:none; }.landing-demo-answers .correct { background:#e1f3d3; color:#37671d; border-color:#6eac44; box-shadow:0 3px 0 #6eac44; }.landing-demo-answers .incorrect { background:#ffede6; color:#a34932; border-color:#e7a48c; }.landing-demo-answers button:disabled:not(.correct) { opacity:.45; }
.landing-demo-feedback { min-height:68px; font-size:13px; line-height:1.7; color:var(--learn-muted); padding-top:20px; }.landing-demo-feedback.is-correct { color:#498329; }.dark .landing-demo-feedback.is-correct { color:#b3e393; }
.landing-demo-footer { display:flex; align-items:center; justify-content:space-between; gap:12px; padding-top:12px; border-top:1px solid var(--learn-border); }.demo-live { display:flex; align-items:center; gap:7px; font-size:10px; color:var(--learn-muted); }.demo-live i { width:6px; height:6px; border-radius:50%; background:#76b948; }.landing-demo-next { display:flex; align-items:center; gap:8px; color:var(--learn-accent); min-height:44px; font-size:12px; font-weight:800; }
.landing-section { padding-block:85px; }.landing-section-heading { margin-bottom:35px; }.landing-section-heading h2 { font-size:clamp(32px,3.8vw,48px); font-weight:850; line-height:1.1; letter-spacing:-.045em; }
.landing-exercises { display:grid; grid-template-columns:repeat(5,1fr); gap:14px; }.landing-exercise { position:relative; padding:24px 18px; border:1px solid var(--learn-border); border-radius:22px; background:var(--learn-surface); text-decoration:none; transition:transform .22s,border-color .22s; }.landing-exercise:hover { transform:translateY(-5px); border-color:var(--learn-accent); }.landing-exercise-icon { display:grid; place-items:center; width:48px; height:48px; border-radius:16px; color:var(--learn-accent); background:var(--learn-tint); font-size:22px; margin-bottom:30px; }.exercise-domain { font-size:10px; color:var(--learn-muted); }.landing-exercise h3 { font-size:15px; line-height:1.4; font-weight:800; margin-top:5px; }.exercise-arrow { position:absolute; top:26px; right:17px; color:var(--learn-muted); font-size:10px; }
.landing-path { display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:90px; padding-block:110px; }.landing-path .landing-text-link { margin-top:20px; }.landing-path p { max-width:430px; }.landing-path-copy strong { font-weight:700; color:var(--learn-text); }
.landing-path-preview { width:100%; max-width:430px; margin:auto; padding:26px 28px 18px; background:var(--learn-surface); border:2px solid var(--learn-border); border-radius:30px; box-shadow:0 8px 0 var(--learn-border),0 30px 65px #6552da0a; }
.path-preview-header { display:flex; justify-content:space-between; align-items:center; gap:12px; font-size:14px; font-weight:800; }.path-preview-header i { color:var(--learn-accent); margin-right:8px; }.path-preview-free { color:#568735; font-size:9px; letter-spacing:.1em; }.dark .path-preview-free { color:#b3e393; }
.path-preview-section { padding-top:25px; }.path-preview-section > span { display:block; color:var(--learn-muted); font-size:9px; font-weight:750; letter-spacing:.12em; }.path-preview-section strong { display:block; font-size:23px; letter-spacing:-.03em; margin-top:5px; }.path-preview-progress { height:7px; border-radius:10px; background:var(--learn-border); margin-top:13px; overflow:hidden; }.path-preview-progress > span { display:block; height:100%; width:40%; background:#83bd58; border-radius:inherit; }
.path-preview-stations { list-style:none; padding:20px 0 12px; margin:0; }.path-preview-stations li { display:flex; align-items:center; gap:22px; position:relative; min-height:81px; padding-left:18px; }.path-preview-stations li:nth-child(2),.path-preview-stations li:nth-child(4) { padding-left:40px; }.path-preview-stations li:nth-child(3) { padding-left:55px; }.path-preview-stations li:not(:last-child)::after { content:''; position:absolute; width:4px; height:25px; left:47px; bottom:-12px; border-radius:4px; background:var(--learn-border); transform:rotate(-17deg); }.path-preview-stations li:nth-child(2)::after,.path-preview-stations li:nth-child(4)::after { left:68px; }.path-preview-stations li:nth-child(3)::after { left:80px; transform:rotate(17deg); }.preview-node { display:grid; place-items:center; flex:0 0 56px; height:51px; position:relative; z-index:1; border-radius:50%; background:var(--learn-bg); color:var(--learn-muted); border:2px solid var(--learn-border); box-shadow:0 5px 0 var(--learn-border); font-size:20px; }.is-done > .preview-node { background:#e1f3d3; color:#568735; border-color:#a7cf8f; box-shadow:0 5px 0 #a7cf8f; }.is-current > .preview-node { color:white; background:var(--learn-accent); border-color:var(--learn-accent); box-shadow:0 5px 0 var(--learn-accent-edge),0 0 0 8px var(--learn-tint); transition:transform .2s; }.is-current > .preview-node:hover { transform:translateY(-3px); }.is-current > .preview-node:active { transform:translateY(3px); }.path-preview-stations strong { display:block; font-size:13px; font-weight:750; }.path-preview-stations small { display:block; font-size:10px; color:var(--learn-muted); margin-top:5px; }.path-preview-stations .is-next strong { color:var(--learn-muted); }.landing-path-preview figcaption { border-top:1px solid var(--learn-border); padding-top:13px; color:var(--learn-muted); font-size:10px; text-align:center; }
.landing-section-heading > p { max-width:660px; color:var(--learn-muted); font-size:15px; line-height:1.8; margin-top:22px; }.landing-exercise p { font-size:12px; line-height:1.7; color:var(--learn-muted); margin-top:12px; }
#pricing { border-top:1px solid var(--learn-border); }.landing-pricing-grid { display:grid; grid-template-columns:1fr 1fr; gap:24px; max-width:860px; margin:0 auto; }.landing-plan { display:flex; flex-direction:column; padding:32px; border:1px solid var(--learn-border); border-radius:26px; background:var(--learn-surface); }.landing-plan-core { border:2px solid var(--learn-accent); }.landing-plan-label { font-size:10px; font-weight:850; letter-spacing:.12em; color:var(--learn-muted); margin-bottom:22px; }.landing-plan h3 { font-size:24px; font-weight:800; line-height:1.2; }.landing-plan-price { font-size:50px; font-weight:900; letter-spacing:-.04em; margin-top:22px; }.landing-plan > p { font-size:12px; color:var(--learn-muted); margin:5px 0 15px; }.landing-plan > ul { display:grid; gap:15px; margin:20px 0 30px; font-size:13px; flex:1; }.landing-plan li { display:flex; align-items:center; gap:10px; line-height:1.5; }.landing-plan li i { color:#65a53a; }.landing-plan .offer-badge { align-self:flex-start; }.landing-plan .billing-details { margin-top:22px; }.landing-plan .billing-details p { font-size:11px; margin-top:8px; color:var(--learn-muted); }.landing-plan select { width:100%; background:var(--learn-surface); color:var(--learn-text); border:1px solid var(--learn-border); border-radius:10px; padding:10px; }.landing-plan #pricing-country-warning { font-size:12px; margin-top:12px; }
.landing-faq { max-width:820px; }.landing-faq details { border-bottom:1px solid var(--learn-border); }.landing-faq summary { cursor:pointer; padding:22px 0; font-weight:750; font-size:15px; }.landing-faq details p { font-size:14px; line-height:1.85; color:var(--learn-muted); padding-bottom:22px; }
.landing-final { text-align:center; padding-block:100px 130px; }.landing-final > i { font-size:55px; color:var(--learn-accent); }.landing-final h2 { font-size:clamp(32px,4.5vw,60px); font-weight:850; line-height:1.1; letter-spacing:-.05em; margin:28px 0; }.learning-landing footer { background:var(--learn-surface); }.learning-landing footer > div > div > div { flex-wrap:wrap; justify-content:center; }
[data-reveal] { transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.2,1); }.reveal-pending { opacity:0; transform:translateY(28px); }
@media(min-width:768px) and (prefers-reduced-motion:no-preference) { .cinema-stage { animation:cinema-arrive 1.1s cubic-bezier(.2,.7,.2,1) both; }.landing-hero-copy { animation:copy-arrive .8s ease-out both; } }
@keyframes cinema-arrive { from { opacity:0; transform:translateY(25px) rotate(3deg) scale(.94); } to { opacity:1; transform:none; } }@keyframes copy-arrive { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:none; } }
@media(max-width:1000px) { .landing-hero { gap:0; }.landing-hero h1 { font-size:58px; }.cinema-stage { height:400px; }.cinema-card-numbers { width:180px; right:0; }.cinema-card-shapes { width:125px; }.landing-generator,.landing-path { gap:45px; }.landing-exercises { grid-template-columns:repeat(3,1fr); } }
@media(max-width:767px) {
 .landing-wrap { width:calc(100% - 40px); }.learning-landing .cinematic-nav { padding:12px 20px; gap:10px; }.cinematic-nav > a img { width:125px; }.cinematic-nav-links { display:none; }.cinematic-nav-actions { gap:6px; }.cinematic-nav-actions .landing-text-link { font-size:12px; }.cinematic-nav-actions .learning-icon-button { width:36px; }
 .landing-hero { grid-template-columns:1fr; min-height:0; padding-block:130px 40px; }.landing-hero h1 { font-size:clamp(42px,9.8vw,68px); }.landing-hero-copy > p { font-size:14px; margin:23px 0; }.landing-actions { gap:12px; }.landing-actions .btn-primary { width:100%; }.landing-actions .landing-text-link { margin:auto; }.landing-trust { text-align:center; margin-top:10px; }.landing-eyebrow { font-size:9px; margin-bottom:20px; }.cinema-stage { height:300px; width:min(360px,100%); margin:24px auto 0; }.cinema-infinity { top:45px; width:105%; left:-2%; }.cinema-card-numbers { width:155px; padding:14px; right:2%; top:6px; }.cinema-card-numbers > i { font-size:15px; margin-bottom:12px; }.cinema-card-numbers > div { font-size:19px; }.cinema-card-shapes { width:104px; padding:12px; bottom:4px; left:10%; }.cinema-spark { bottom:23px; right:8%; font-size:34px; }
 .landing-generator { grid-template-columns:1fr; gap:30px; padding-block:25px 65px; }.landing-generator-copy h2 { font-size:38px; }.landing-generator-copy p { margin-top:18px; font-size:14px; }.landing-practice-preview { padding:20px; border-radius:22px; }.landing-practice-preview h2 { font-size:20px; }.landing-number-row { gap:5px; }.landing-number-row > * { font-size:20px; }.landing-demo-feedback { min-height:75px; font-size:12px; }
 .landing-section { padding-block:50px; }.landing-section-heading h2 { font-size:34px; }.landing-exercises { grid-template-columns:1fr; gap:8px; }.landing-exercise { display:grid; grid-template-columns:42px 1fr; gap:0 14px; align-items:center; padding:16px; border-radius:17px; }.landing-exercise-icon { grid-row:1/3; margin:0; width:42px; height:42px; font-size:19px; border-radius:13px; }.exercise-domain { font-size:9px; }.landing-exercise h3 { font-size:14px; margin-top:2px; padding-right:20px; }.landing-exercise p { grid-column:2; margin-top:7px; font-size:12px; }.landing-section-heading > p { font-size:14px; }.exercise-arrow { top:32px; right:18px; }
 .landing-path { grid-template-columns:1fr; gap:40px; padding-block:40px 80px; }.landing-path-copy { grid-row:1; }.landing-path-preview { max-width:380px; padding:22px 20px 16px; }.path-preview-stations li { gap:16px; }.path-preview-stations li:nth-child(3) { padding-left:42px; }.path-preview-stations li:nth-child(3)::after { left:68px; }.landing-path h2 { font-size:36px; }.landing-path p { font-size:14px; }
 .landing-pricing-grid { grid-template-columns:1fr; gap:20px; }.landing-plan { padding:26px; }.landing-faq summary { font-size:14px; }.landing-final { padding-block:60px 85px; }.landing-final h2 { font-size:36px; }
}
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto!important; }[data-reveal],.cinema-stage,.landing-hero-copy,.landing-demo-answers button,.landing-exercise,.preview-node { transition:none!important; animation:none!important; }.reveal-pending { opacity:1; transform:none; }[data-parallax] { --parallax-y:0px!important; } }