/* SN School - Design "Feldbuch" wie shambalanyuki.co.tz (Papierweiss, schwarze Linien, Terrakotta, Serifen). Handy zuerst. */
:root{--bg:#fbfaf6;--card:#fbfaf6;--text:#222;--ink:#151515;--muted:#55524c;--line:#151515;--soft:#d8d3c7;--accent:#b5552b;--tint:#f3e3d8;
--ok:#2f6b2f;--bad:#a3261e;--r:4px;
--sans:Charter,"Bitstream Charter","Sitka Text",Cambria,Georgia,serif;--head:"Palatino Linotype",Palatino,"Book Antiqua",P052,Georgia,serif}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:64px}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--sans);font-size:19px;line-height:1.6}
.wrap{max-width:860px;margin:0 auto;padding:0 16px 16px}
a{color:var(--accent)}
h1,h2,h3,h4{font-family:var(--head);color:var(--ink);line-height:1.15}
h1{font-size:clamp(1.8rem,6vw,2.6rem);font-weight:400;font-style:italic;margin:.4em 0 .3em}
h2{font-size:1.4rem;margin:.2em 0 .5em}
h3{font-size:1.15rem;margin:1em 0 .4em}
img,svg{max-width:100%}

/* Kopf */
.top{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 0 8px;border-bottom:2px solid var(--line)}
.brand{display:flex;align-items:center;gap:8px;text-decoration:none;color:var(--ink);font-family:var(--head);font-size:1.25rem;font-style:italic;flex:1 1 auto;min-width:0}
.brand img{width:40px;height:44px;flex:none}
.brand i{color:var(--accent);font-style:normal;font-size:.8em;letter-spacing:.06em}
.back{font-size:.85rem;text-decoration:none;color:var(--ink);border-bottom:1px solid var(--accent);white-space:nowrap}
.lang{display:flex;gap:4px}
.lang button{padding:4px 10px;min-height:38px;font-size:.9rem}
.lang button.on{background:var(--ink);color:var(--bg)}
nav{display:flex;gap:6px}
nav.main{overflow-x:auto;white-space:nowrap;scrollbar-width:none;padding:8px 0;border-bottom:1px solid var(--line)}
nav.main::-webkit-scrollbar{display:none}
nav.main a{flex:none;text-decoration:none;color:var(--ink);font-weight:600;font-size:.95rem;padding:8px 10px;min-height:44px;display:inline-flex;align-items:center;border:1.5px solid transparent}
nav.main a.on{border-color:var(--accent);color:var(--accent)}
nav.sub{flex-wrap:wrap;margin-top:10px}
nav.sub a{font-size:.95rem;min-height:40px;padding:6px 14px;text-decoration:none;color:var(--ink);border:1.5px solid var(--line);display:inline-flex;align-items:center;background:var(--bg)}
nav.sub a.on{background:var(--ink);color:var(--bg)}

/* Knoepfe und Formulare */
.btn,button{font:inherit;font-size:1rem;border:2px solid var(--line);background:transparent;color:var(--ink);border-radius:0;padding:10px 18px;text-decoration:none;cursor:pointer;min-height:48px;display:inline-flex;align-items:center;font-weight:700}
.btn:hover,button:hover{background:var(--ink);color:var(--bg)}
.btn.main,button.main{background:var(--ink);color:var(--bg)}
.btn.main:hover,button.main:hover{background:var(--accent);border-color:var(--accent)}
button:disabled{opacity:.5;cursor:wait}
input[type=number],input[type=text],textarea,select{font:inherit;font-size:1.05rem;padding:10px 12px;border:1.5px solid var(--line);border-radius:0;width:100%;max-width:360px;background:#fff}
textarea{max-width:100%;min-height:90px}
label{display:block;margin:10px 0 4px;font-weight:700}
.fb{margin-top:10px;font-weight:700}
.fb.ok{color:var(--ok)}.fb.bad{color:var(--bad)}

/* Karten */
.card{background:var(--card);border:1.5px solid var(--line);box-shadow:5px 5px 0 var(--line);border-radius:0;padding:20px;margin:20px 5px 20px 0;scroll-margin-top:64px}
.card p{margin:0 0 12px}
.muted{color:var(--muted);font-size:.9rem}
.banner{border:1px dashed var(--accent);color:#5a2a14;padding:10px 14px;font-size:.9rem;margin:14px 0}
.step{font-size:.8rem;color:var(--accent);letter-spacing:.12em;text-transform:uppercase;font-weight:700}
.big{font-size:1.6rem;font-weight:800}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:6px 14px}
.notice{border-left:4px solid var(--accent);background:var(--tint);padding:12px 16px;margin-top:14px}
.opt{display:block;width:100%;text-align:left;margin:8px 0;max-width:540px;font-weight:400;height:auto}
.opt.sel{background:var(--tint);border-color:var(--accent);color:var(--ink)}
.money{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:12px 0}
.money svg{height:auto}
table.sheet{border-collapse:collapse;width:100%}
table.sheet td,table.sheet th{border:1px solid var(--line);padding:8px;text-align:left}
table.sheet td.r,table.sheet th.r{text-align:right}
blockquote{margin:12px 0;padding:8px 14px;border-left:3px solid var(--line);font-style:italic}

/* Startseite */
.hero{text-align:center;padding:18px 0 4px}
.hero img{width:min(56vw,220px);height:auto}
.eyebrow{display:inline-block;color:var(--accent);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:4px 10px;font-size:.78rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;margin:10px 0 0}
.lead{max-width:56ch;margin:0 auto;color:var(--muted)}
.courses{display:grid;gap:4px 18px;grid-template-columns:1fr}
.course{display:flex;flex-direction:column}
.course h2{font-style:italic;font-weight:400}
.course .nr{font-family:var(--head);color:var(--accent);font-style:italic;font-size:1.3rem}
.course p{flex:1}
.course .pill{display:inline-block;border:1px solid var(--accent);color:var(--accent);font-size:.75rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:3px 8px;margin-bottom:8px;align-self:flex-start}
.course.soon{box-shadow:none;border-style:dashed}
.course.soon h2{color:var(--muted)}
.course .btn{align-self:flex-start}
@media (min-width:720px){.courses{grid-template-columns:1fr 1fr}.top{flex-wrap:nowrap}}

/* Sprunghilfen: Schritt-Leiste nur CSS sticky; unten "To top" links, "Next lesson" rechts */
.stepbar{position:-webkit-sticky;position:sticky;top:0;z-index:5;display:flex;gap:6px;flex-wrap:wrap;background:rgba(251,250,246,.96);padding:8px 0;border-bottom:1px solid var(--line);margin-top:8px}
.stepbar a{font-size:.9rem;padding:4px 12px;border:1.5px solid var(--line);color:var(--ink);text-decoration:none;min-height:40px;display:inline-flex;align-items:center;background:var(--bg)}
.jump{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin:28px 0 40px;padding-top:12px;border-top:1px dashed var(--line)}
.jump .btn.main{margin-left:auto}

/* Frage-Knopf und Notfallregel */
.ask{border-color:var(--accent);box-shadow:5px 5px 0 var(--accent)}
.askbtn{font-size:1.15rem;padding:14px 22px;width:100%;max-width:420px;justify-content:center}
.rule{border:2px solid var(--bad);background:#fbe9e6;padding:12px 16px;margin-top:14px;white-space:pre-line}
.rule b{display:block;color:var(--bad);margin-bottom:4px}

/* Lektionen aus Markdown */
html[lang=en] .l-sw,html[lang=sw] .l-en{display:none}
.lesson ul,.lesson ol{padding-left:1.3em}
.lesson li{margin:4px 0}

/* Mitglieder, Login, Admin */
.addr{font-family:ui-monospace,Consolas,monospace;font-size:.85rem;overflow-wrap:anywhere;background:#fff;border:1.5px solid var(--line);padding:8px 10px;margin:6px 0}
.amount{font-family:ui-monospace,Consolas,monospace;font-size:1.3rem;font-weight:800;color:var(--accent);overflow-wrap:anywhere}
table.list{border-collapse:collapse;width:100%;font-size:.9rem}
table.list td,table.list th{border-bottom:1px solid var(--soft);padding:8px 6px;text-align:left;vertical-align:top}
.st-pending{color:var(--accent);font-weight:700}.st-member{color:var(--ok);font-weight:700}.st-blocked{color:var(--bad);font-weight:700}
.tablewrap{overflow-x:auto}

/* Bestehende Lektionselemente */
.rc2{background:#fff;border:1px solid #bbb;padding:12px;box-shadow:0 3px 10px rgba(0,0,0,.12);font-size:.95rem;margin:8px 0}
.rc2.hand{font-family:'Segoe Print','Bradley Hand','Comic Sans MS',cursive;background:#fffbe6 repeating-linear-gradient(transparent,transparent 27px,#cde 28px);transform:rotate(-.8deg)}
.rc2.mono{font-family:ui-monospace,Consolas,monospace;border-style:dashed}
.rc2.sms{background:#e8f4e8;border-radius:16px;font-family:system-ui,sans-serif}
.rc2 .l{display:flex;justify-content:space-between;gap:8px}
.phones{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin:12px 0}
.phone{max-width:100%;height:auto}
table.faucets td,table.faucets th{vertical-align:top;font-size:.9rem}
.gamebox{font-family:ui-monospace,Consolas,monospace;font-size:1.05rem;overflow-wrap:anywhere;background:#fff;border:1.5px solid var(--line);padding:10px;margin:8px 0}
.gamebox.tgt{border-color:var(--accent);background:var(--tint)}
.gopt{display:block;width:100%;text-align:left;font-family:ui-monospace,Consolas,monospace;font-size:1rem;word-break:break-all;margin:8px 0;height:auto;font-weight:400}
.timer{font-weight:800;color:var(--bad)}
.chk{display:flex;gap:10px;align-items:center;margin:6px 0}
.chk input{width:28px;height:28px;flex:none}
@media (max-width:420px){.brand{font-size:1.05rem}.brand i{display:none}.back{font-size:.8rem}.card{padding:16px}}
[hidden]{display:none!important}
.lesson mark.ph,mark.ph{background:none;color:var(--bad);font-weight:700}
.lesson .rule p{margin:4px 0 0}