/* Öffentliche Produktseite und isolierte Lernprobe. */
:root{color-scheme:dark;--bg:#0c1219;--panel:#151f2b;--line:#2b3c4d;--text:#edf4fa;--muted:#a9bacb;--mint:#9af0bc;--blue:#83c7ff;--warn:#ffd67c}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font:17px/1.7 system-ui,-apple-system,sans-serif}a{color:var(--mint);text-underline-offset:4px}button,input,textarea,select{font:inherit}button,a{touch-action:manipulation}button{cursor:pointer}button:disabled{cursor:wait;opacity:.6}a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:3px solid var(--blue);outline-offset:4px}.skip{position:absolute;top:-100px;left:1rem;padding:.7rem;background:var(--panel);z-index:3}.skip:focus{top:1rem}.bar{max-width:1180px;margin:auto;padding:23px 28px;display:flex;justify-content:space-between;gap:22px;align-items:center;border-bottom:1px solid var(--line)}.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--text);font-size:1.2rem;font-weight:800}.brand img{width:32px;height:32px}.bar nav{display:flex;gap:22px;flex-wrap:wrap}.bar nav a{text-decoration:none;font-size:.92rem}main{max-width:1180px;padding:0 28px;margin:auto}.hero{display:grid;grid-template-columns:1.2fr 1fr;gap:60px;align-items:center;padding:78px 0 60px}.eyebrow{font-size:.76rem;letter-spacing:.16em;text-transform:uppercase;font-weight:800;color:var(--mint)}h1{font-size:clamp(2.5rem,5vw,4.9rem);line-height:1.09;letter-spacing:-.045em;margin:18px 0 25px}h1 em{font-style:normal;color:var(--mint)}h2{font-size:clamp(1.7rem,3vw,2.4rem);line-height:1.2;letter-spacing:-.025em}h3{font-size:1.15rem;line-height:1.4}.lead{font-size:1.1rem;color:var(--muted);max-width:620px}.actions{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin:25px 0}.button{display:inline-block;text-decoration:none;padding:12px 20px;border:1px solid var(--line);border-radius:10px;background:var(--panel);color:var(--text);font-weight:750}.button.primary{color:#0b2717;background:var(--mint);border-color:var(--mint)}.small{font-size:.86rem;color:var(--muted)}.terminal-card{background:linear-gradient(145deg,#172b29,var(--panel));border:1px solid #375c4b;border-radius:20px;box-shadow:0 30px 80px #0005;overflow:hidden}.terminal-head{padding:14px 23px;border-bottom:1px solid var(--line);color:var(--muted);font-size:.8rem}.terminal-body{padding:26px}.terminal-body pre{font:14px/1.8 ui-monospace,monospace;white-space:pre-wrap;overflow-wrap:anywhere}.terminal-body .good{color:var(--mint)}.proof{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line);border-radius:16px;background:var(--panel);padding:18px 0}.proof div{padding:12px 24px}.proof strong{font-size:1.7rem;display:block;color:var(--mint)}.proof span{font-size:.87rem;color:var(--muted)}.section{padding:60px 0;border-bottom:1px solid var(--line)}.section>p{max-width:720px;color:var(--muted)}.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.card{background:var(--panel);padding:26px;border:1px solid var(--line);border-radius:16px}.card p{color:var(--muted)}.card .number{color:var(--mint);font:700 .85rem ui-monospace,monospace}.split{display:grid;grid-template-columns:1fr 1fr;gap:32px}.checklist{padding-left:22px}.checklist li{margin:12px 0}.faq details{border-bottom:1px solid var(--line);padding:18px 0}.faq summary{cursor:pointer;font-weight:700}.faq p{color:var(--muted);max-width:780px}.cta{margin:48px 0;padding:36px;border:1px solid #375c4b;border-radius:18px;background:#142b22}.cta h2{margin-top:0}.cta p{color:var(--muted)}footer{max-width:1180px;margin:auto;padding:25px 28px 40px;display:flex;gap:18px;justify-content:space-between;flex-wrap:wrap;color:var(--muted);font-size:.84rem}.demo-heading{padding-top:36px}.demo-heading h1{font-size:clamp(2rem,5vw,3.3rem)}.demo-tabs{display:flex;gap:10px;flex-wrap:wrap;margin:24px 0}.demo-tabs button{border:1px solid var(--line);border-radius:10px;background:var(--panel);color:var(--text);padding:10px 15px}.demo-tabs [aria-pressed=true]{border-color:var(--mint);color:var(--mint)}.demo-panel{padding:20px 0 35px}.demo-panel h2{margin-top:0}.demo-panel p{color:var(--muted)}.code{white-space:pre-wrap;overflow-wrap:anywhere;background:#080f17;border:1px solid var(--line);border-radius:12px;padding:20px;font:14px/1.8 ui-monospace,monospace}.editor{width:100%;min-height:190px;resize:vertical;background:#080f17;border:1px solid var(--line);border-radius:12px;padding:20px;color:var(--text);font:15px/1.8 ui-monospace,monospace}.preview{padding:24px;background:#f8fbff;color:#142333;border-radius:12px;min-height:190px;overflow-wrap:anywhere}.preview h1{font-size:2rem;letter-spacing:normal;line-height:1.3;margin:0 0 15px}.preview p{color:#223649}.preview :last-child{margin-bottom:0}.feedback{min-height:1.7em;padding:12px 0;color:var(--mint)!important}.feedback.error{color:var(--warn)!important}.quiz-case{display:grid;grid-template-columns:1fr auto;align-items:center;gap:18px;padding:14px 0;border-bottom:1px solid var(--line)}select,input[type=text]{max-width:100%;background:#080f17;color:var(--text);padding:10px;border:1px solid var(--line);border-radius:8px}.command-row{display:flex;gap:12px;align-items:end}.command-row label{flex:1}.command-row input{width:100%}.terminal-output{height:320px;overflow:auto;background:#080f17;border:1px solid var(--line);padding:20px;border-radius:12px;font:14px/1.7 ui-monospace,monospace;overflow-wrap:anywhere}.terminal-output pre{white-space:pre-wrap;margin:0 0 15px;font:inherit}.goals{padding-left:22px}.goals .done{color:var(--mint)}.demo-progress{width:100%;accent-color:var(--mint);height:12px}.summary-box{margin:25px 0;background:#142b22;border:1px solid #375c4b;border-radius:16px;padding:25px}.demo-panel[hidden],.summary-box[hidden]{display:none}.error-line{color:var(--warn)}code{font-size:.92em}.demo-main{padding-bottom:20px}
@media(max-width:850px){.hero{grid-template-columns:1fr;gap:30px;padding-top:48px}.grid{grid-template-columns:1fr}.split{grid-template-columns:1fr}.proof{grid-template-columns:1fr 1fr}.section{padding:40px 0}}
@media(max-width:500px){body{font-size:16px}.bar{padding:16px;align-items:flex-start;flex-direction:column;gap:14px}.bar nav{gap:17px}main{padding:0 16px}.proof div{padding:10px 16px}.cta{padding:24px}.card{padding:21px}.quiz-case{grid-template-columns:1fr}.command-row{align-items:stretch;flex-direction:column}.command-row button{width:100%}footer{padding:22px 16px}.terminal-body{padding:20px}.button{padding:10px 15px}}

[hidden]{display:none!important}.grid>*{min-width:0}.bar nav{align-items:center}.bar{flex-wrap:wrap}.card a{overflow-wrap:anywhere}#html-task{padding:16px;border-left:3px solid var(--mint);background:var(--panel);color:var(--text)}

/* Beginner samples: one instruction, one action, one visible result. */
.demo-task{padding:16px;border-left:3px solid var(--mint);background:var(--panel);color:var(--text)!important;overflow-wrap:anywhere}.demo-counter{display:flex;align-items:center;gap:20px}.demo-counter output{font-size:3rem;font-weight:800;color:var(--mint)}.demo-tabs button{max-width:100%;text-align:left}.demo-panel .editor{min-height:140px}.demo-panel label{display:block}#js-answer{margin-top:10px}#terminal-output{margin:20px 0}.demo-panel pre{overflow-wrap:anywhere}