/* Handyführerschein – seniorengerechtes Grunddesign:
   große Schrift, große Tippflächen, hoher Kontrast, eine Spalte */
:root{
  --bg:#f5f7f9; --card:#fff; --ink:#1b2631; --muted:#4f5d6a; --line:#d5dde4;
  --primary:#1f5f8b; --primary-ink:#fff; --ok:#2b8a3e; --ok-bg:#e6f4ea;
  --hint:#9c5b00; --hint-bg:#fff4e0; --err:#b42318; --err-bg:#fdecea;
  --radius:16px;
}
*{box-sizing:border-box}
html{font-size:20px;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;line-height:1.5}
.wrap{max-width:560px;margin:0 auto;padding:16px 16px calc(32px + env(safe-area-inset-bottom))}
h1{font-size:1.5rem;line-height:1.25;margin:.2em 0 .5em}
h2{font-size:1.25rem;line-height:1.3;margin:.2em 0 .5em}
p{margin:.4em 0 .8em}
a{color:var(--primary)}
.big{font-size:1.05rem}
.small{font-size:.85rem;color:var(--muted)}
.muted{color:var(--muted);font-size:.85rem}
.strong{font-weight:700}
.center{text-align:center}
.eyebrow{font-size:.8rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--primary);margin:0 0 .2em}

.hero{text-align:center;padding:24px 8px 8px}
.hero h1{font-size:1.75rem;margin-bottom:.2em}
.lead{font-size:1.1rem;color:var(--muted)}
.logo{width:72px;height:72px;margin:0 auto 8px;border-radius:20px;background:var(--primary);color:#fff;display:flex;align-items:center;justify-content:center}
.logo svg{width:48px;height:48px}

.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:20px;margin:16px 0}
.ok-card{border-color:var(--ok);background:var(--ok-bg)}
.small-print{font-size:.85rem;color:var(--muted)}
.pagehead{padding-top:8px}
.pagehead h1{margin-bottom:.1em}
.stack{display:flex;flex-direction:column;gap:12px;margin:16px 0}

.btn{display:flex;align-items:center;justify-content:center;width:100%;min-height:60px;padding:14px 20px;margin:12px 0 0;
  border-radius:14px;border:2px solid transparent;font:inherit;font-size:1.05rem;font-weight:700;text-align:center;text-decoration:none;cursor:pointer;
  -webkit-tap-highlight-color:transparent}
.btn-primary{background:var(--primary);color:var(--primary-ink)}
.btn-primary:active{filter:brightness(.9)}
.btn-primary:disabled{background:#b8c4ce;color:#fff;cursor:not-allowed}
.btn-secondary{background:#fff;color:var(--primary);border-color:var(--primary)}
.btn-ghost{background:transparent;color:var(--primary);border-color:transparent;text-decoration:underline;font-weight:600}
.btn-choice{flex-direction:column;background:#fff;color:var(--ink);border-color:var(--line);min-height:84px;margin:0}
.btn-choice:active{border-color:var(--primary)}
.choice-title{font-size:1.2rem}
.choice-sub{font-size:.85rem;font-weight:400;color:var(--muted)}
form .btn{margin-top:16px}

label{display:block;font-weight:700;margin:14px 0 6px}
input{width:100%;min-height:56px;padding:12px 14px;font:inherit;font-size:1.05rem;border:2px solid var(--line);border-radius:12px;background:#fff;color:var(--ink)}
input:focus{outline:none;border-color:var(--primary)}
:focus-visible{outline:3px solid #f59f00;outline-offset:2px}

.ok{color:var(--ok)}
.err{background:var(--err-bg);color:var(--err);padding:12px 14px;border-radius:12px;font-weight:600}
.note{background:#eef4f9;border-left:5px solid var(--primary);padding:12px 14px;border-radius:8px}
.checks{list-style:none;padding:0;margin:8px 0}
.checks li{padding-left:32px;position:relative;margin:8px 0;font-size:1.05rem}
.checks li::before{content:"✓";position:absolute;left:4px;color:var(--ok);font-weight:700}
.plain{padding-left:20px}
details summary{font-weight:700;cursor:pointer;min-height:44px;display:flex;align-items:center}
.back{display:inline-flex;align-items:center;min-height:44px;font-weight:600;text-decoration:none}
.foot{text-align:center;font-size:.8rem;color:var(--muted);margin-top:32px}
.foot a{color:var(--muted)}
.testbadge{position:fixed;top:0;right:0;background:#f59f00;color:#000;font-size:.7rem;font-weight:700;padding:2px 10px;border-bottom-left-radius:8px;z-index:10}

.progress{height:14px;background:#e3e9ee;border-radius:7px;overflow:hidden;margin:12px 0 4px}
.progress-bar{height:100%;background:var(--ok);border-radius:7px}
.w0{width:0%}
.w1{width:1%}
.w2{width:2%}
.w3{width:3%}
.w4{width:4%}
.w5{width:5%}
.w6{width:6%}
.w7{width:7%}
.w8{width:8%}
.w9{width:9%}
.w10{width:10%}
.w11{width:11%}
.w12{width:12%}
.w13{width:13%}
.w14{width:14%}
.w15{width:15%}
.w16{width:16%}
.w17{width:17%}
.w18{width:18%}
.w19{width:19%}
.w20{width:20%}
.w21{width:21%}
.w22{width:22%}
.w23{width:23%}
.w24{width:24%}
.w25{width:25%}
.w26{width:26%}
.w27{width:27%}
.w28{width:28%}
.w29{width:29%}
.w30{width:30%}
.w31{width:31%}
.w32{width:32%}
.w33{width:33%}
.w34{width:34%}
.w35{width:35%}
.w36{width:36%}
.w37{width:37%}
.w38{width:38%}
.w39{width:39%}
.w40{width:40%}
.w41{width:41%}
.w42{width:42%}
.w43{width:43%}
.w44{width:44%}
.w45{width:45%}
.w46{width:46%}
.w47{width:47%}
.w48{width:48%}
.w49{width:49%}
.w50{width:50%}
.w51{width:51%}
.w52{width:52%}
.w53{width:53%}
.w54{width:54%}
.w55{width:55%}
.w56{width:56%}
.w57{width:57%}
.w58{width:58%}
.w59{width:59%}
.w60{width:60%}
.w61{width:61%}
.w62{width:62%}
.w63{width:63%}
.w64{width:64%}
.w65{width:65%}
.w66{width:66%}
.w67{width:67%}
.w68{width:68%}
.w69{width:69%}
.w70{width:70%}
.w71{width:71%}
.w72{width:72%}
.w73{width:73%}
.w74{width:74%}
.w75{width:75%}
.w76{width:76%}
.w77{width:77%}
.w78{width:78%}
.w79{width:79%}
.w80{width:80%}
.w81{width:81%}
.w82{width:82%}
.w83{width:83%}
.w84{width:84%}
.w85{width:85%}
.w86{width:86%}
.w87{width:87%}
.w88{width:88%}
.w89{width:89%}
.w90{width:90%}
.w91{width:91%}
.w92{width:92%}
.w93{width:93%}
.w94{width:94%}
.w95{width:95%}
.w96{width:96%}
.w97{width:97%}
.w98{width:98%}
.w99{width:99%}
.w100{width:100%}

/* Lektion */
.lesson-top{display:flex;justify-content:space-between;align-items:center}
.step h1{font-size:1.4rem}
.lesson-img{display:block;width:100%;height:auto;border-radius:12px;margin:8px 0 12px;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;pointer-events:none}
.navbar{margin-top:20px}
.feedback{padding:12px 14px;border-radius:12px;font-weight:600;font-size:1.05rem;min-height:1em}
.feedback:empty{display:none}
.feedback.ok{background:var(--ok-bg);color:var(--ok)}
.feedback.hint{background:var(--hint-bg);color:var(--hint)}
.answers{display:flex;flex-direction:column;gap:12px;margin:16px 0}
.answer{min-height:64px;padding:14px 18px;font:inherit;font-size:1.05rem;text-align:left;background:#fff;color:var(--ink);border:2px solid var(--line);border-radius:14px;cursor:pointer}
.answer.right{border-color:var(--ok);background:var(--ok-bg)}
.answer.wrong{border-color:var(--hint);background:var(--hint-bg)}
.yesno{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.yesno .btn{margin:0}
.praxis{margin-top:12px}
.badge{width:96px;height:96px;margin:8px auto}

/* Nachgebautes Handy */
.phone{margin:16px auto;max-width:320px;border-radius:36px;padding:14px 14px 10px;background:linear-gradient(160deg,#3a6ea5,#6a4c93);border:6px solid #1b1f24;color:#fff;
  -webkit-user-select:none;user-select:none}
.phone.android{border-radius:26px;background:linear-gradient(160deg,#2f7d6d,#335c81)}
.phone-status{font-size:.7rem;font-weight:700;text-align:center;opacity:.9;margin-bottom:10px}
.phone-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px 4px}
.app{display:flex;flex-direction:column;align-items:center;gap:4px;background:none;border:0;padding:4px 0;color:#fff;font:inherit;cursor:pointer;border-radius:12px;-webkit-tap-highlight-color:transparent}
.app svg{width:60px;height:60px;display:block;filter:drop-shadow(0 1px 2px rgba(0,0,0,.25))}
.app-label{font-size:.68rem;line-height:1.15;text-shadow:0 1px 2px rgba(0,0,0,.5);max-width:100%;overflow-wrap:anywhere;hyphens:auto}
.app.hit{background:rgba(255,255,255,.3);outline:3px solid #8ce99a}
.app.miss{animation:shake .5s}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
.phone-home{width:40%;height:5px;border-radius:3px;background:rgba(255,255,255,.8);margin:18px auto 2px}
@media (prefers-reduced-motion:reduce){.app.miss{animation:none}}

/* Admin */
.admin .wrap{max-width:960px}
.tbl{width:100%;border-collapse:collapse;font-size:.75rem}
.tbl th,.tbl td{border-bottom:1px solid var(--line);padding:6px 4px;text-align:left;vertical-align:top;word-break:break-word}
.mail{border-top:1px solid var(--line);padding:10px 0}
.mail a{word-break:break-all}

/* Academy */
.level{border-top:1px solid var(--line);padding-top:12px;margin-top:12px}
.level:first-of-type{border-top:0}
.level-soon{opacity:.6}
.draft{display:inline-block;background:#fff4e0;color:#9c5b00;font-size:.75rem;font-weight:700;padding:2px 10px;border-radius:999px;margin:0 0 8px}
.lesson-row{border-top:1px solid var(--line);padding-top:8px;margin-top:8px}
.lesson-row h3{font-size:1.1rem;margin:.3em 0}
select{width:100%;min-height:56px;padding:12px;font:inherit;font-size:1rem;border:2px solid var(--line);border-radius:12px;background:#fff;color:var(--ink)}

/* Wartungsmodus (1.1) */
.pre{white-space:pre-line}
.banner{background:#fff4e0;border:2px solid #e0a800;color:#6b3f00;border-radius:14px;padding:12px 14px;font-size:.9rem;margin:8px 0 0}
.banner-admin{background:#fdecea;border-color:#b42318;color:#7a1a12}
.countdown-card{background:#eef4f9;border:2px solid var(--primary);text-align:center}
.countdown-label{font-weight:700;color:var(--primary);margin:0}
.countdown{display:flex;justify-content:center;gap:12px;margin:8px 0}
.countdown div{display:flex;flex-direction:column;align-items:center;min-width:72px}
.countdown span{font-size:2rem;font-weight:700;line-height:1.1;font-variant-numeric:tabular-nums}
.countdown small{font-size:.7rem;color:var(--muted)}
textarea{width:100%;padding:12px 14px;font:inherit;font-size:1rem;border:2px solid var(--line);border-radius:12px;resize:vertical;box-sizing:border-box}
.check{display:flex;gap:10px;align-items:flex-start;font-weight:400;font-size:.8rem;color:var(--muted)}
.check input{width:24px;height:24px;min-height:0;flex:none;margin-top:2px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.switch{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:56px;padding:0 14px;border:2px solid var(--line);border-radius:14px;background:#fff;font-weight:600;margin:10px 0 0;cursor:pointer}
.switch input{appearance:none;-webkit-appearance:none;width:52px;height:32px;min-height:0;border-radius:16px;background:#b8c4ce;position:relative;flex:none;border:0;padding:0;cursor:pointer;transition:background .15s}
.switch input::after{content:"";position:absolute;top:3px;left:3px;width:26px;height:26px;border-radius:13px;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.3);transition:left .15s}
.switch input:checked{background:var(--ok)}
.switch input:checked::after{left:23px}
.switch small{display:block;font-weight:400;font-size:.7rem;color:var(--muted)}
.fields{background:#f5f7f9;border-radius:12px;padding:4px 12px 12px;margin-top:10px}
.status{display:inline-block;padding:4px 12px;border-radius:999px;font-size:.75rem;font-weight:700;background:#e3e9ee}
.status-an{background:#fdecea;color:#b42318}
.status-geplant{background:#fff4e0;color:#9c5b00}
.card-head{display:flex;justify-content:space-between;align-items:center;gap:12px}

label .hint{display:block;font-weight:400;font-size:.7rem;color:var(--muted)}