:root{--paper:#EFF3EE;--card:#FFFFFF;--sunk:#E6EDE6;--ink:#15211A;--ink-2:#42544A;--muted:#77857B;--rule:#DDE5DC;--klee:#2E7350;--klee-2:#3E9268;--klee-soft:#DCEEE2;--gold:#B9821F;--gold-soft:#FAEED4;--rot:#C4402F;--rot-soft:#FADFDB;--amber:#8A5A0B;--amber-soft:#F6E7C6;--sh:0 2px 3px rgba(21,33,26,.04),0 18px 44px -22px rgba(21,33,26,.3)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--paper:#0E1512;--card:#18211C;--sunk:#131B16;--ink:#E6EDE7;--ink-2:#B6C3BA;--muted:#8B998F;--rule:#2A362E;--klee:#68BE8D;--klee-2:#7ACFA0;--klee-soft:#173224;--gold:#DCA94C;--gold-soft:#2E2513;--rot:#E57866;--rot-soft:#341A15;--amber:#E0B25C;--amber-soft:#2E2513;--sh:0 2px 3px rgba(0,0,0,.4),0 18px 44px -22px rgba(0,0,0,.85)}}
*{box-sizing:border-box} html,body{height:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:"Source Sans 3",-apple-system,BlinkMacSystemFont,sans-serif;font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased;display:flex;flex-direction:column;min-height:100%}
h1,h2,h3{font-family:Fraunces,Georgia,serif;letter-spacing:-.02em;line-height:1.1;text-wrap:balance;margin:0}
h1{font-size:clamp(1.9rem,6vw,2.5rem);font-weight:700} h2{font-size:clamp(1.3rem,4.4vw,1.65rem);font-weight:600} h3{font-size:1.1rem;font-weight:600}
p{margin:0;color:var(--ink-2)} p.lead{font-size:1.08rem;color:var(--ink)} a{color:var(--klee)}
.kicker{font-size:.76rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--klee)}
.mono{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:.8rem;color:var(--ink-2)} .sub{display:block;font-size:.82rem;color:var(--muted)} .klein{font-size:.9rem;color:var(--muted)} .opt{font-weight:400;color:var(--muted);font-size:.85rem}
.nav{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--rule);background:var(--card);flex-wrap:wrap}
.marke{font-weight:700;text-decoration:none;color:var(--ink)} .navlinks{display:flex;gap:16px;flex-wrap:wrap} .navlinks a{text-decoration:none;font-weight:600;font-size:.95rem}
.wrap{flex:1;width:100%;max-width:760px;margin:0 auto;padding-block:22px 40px;padding-inline:16px;display:flex;flex-direction:column;gap:16px}
.admin .wrap{max-width:1040px}
.fuss{padding:16px;text-align:center;font-size:.8rem;color:var(--muted);border-top:1px solid var(--rule)} .fuss a{color:var(--muted)}
.karte{background:var(--card);border-radius:18px;padding:26px 24px;box-shadow:var(--sh);display:flex;flex-direction:column;gap:14px} .karte.schmal{max-width:480px;margin:20px auto 0;width:100%} .karte.text p,.karte.text li{color:var(--ink-2)}
.kopf{display:flex;flex-direction:column;gap:10px}
.stat{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px} .stat>div{background:var(--card);border-radius:12px;padding:10px 14px;display:flex;flex-direction:column;min-width:110px;flex:1}
.stat b{font-family:Fraunces,serif;font-size:1.6rem;color:var(--klee);line-height:1;font-variant-numeric:tabular-nums} .stat b span{font-size:.95rem;color:var(--muted)} .stat>div>span{font-size:.8rem;color:var(--muted)}
.bar{height:8px;background:var(--rule);border-radius:4px;overflow:hidden} .bar i{display:block;height:100%;background:var(--klee)} .bar.klein{height:6px;width:120px}
.block{background:var(--card);border-radius:16px;padding:18px 20px;box-shadow:var(--sh)} .block.gesperrt{opacity:.6} .block.aktiv{outline:2px solid var(--klee-soft)}
.blockkopf{display:flex;gap:12px;align-items:baseline;flex-wrap:wrap;margin-bottom:8px} .blockkopf .sub{display:inline;margin-left:auto}
.module{list-style:none;margin:0;padding:0} .module li a,.module li .gesp{display:grid;grid-template-columns:22px 1fr auto;gap:10px;align-items:center;padding:10px 0;border-top:1px solid var(--rule);text-decoration:none;color:var(--ink)}
.module li a:hover .mt{color:var(--klee)} .module li.gesperrt .gesp{color:var(--muted)} .st{width:16px;height:16px;border-radius:50%;border:2px solid var(--rule)} .module li.fertig .st{background:var(--klee);border-color:var(--klee)} .module li.begonnen .st{border-color:var(--klee)} .mi{font-size:.85rem;color:var(--muted);white-space:nowrap}
.formular{display:flex;flex-direction:column;gap:12px} .formular label{display:flex;flex-direction:column;gap:5px;font-weight:600;font-size:.95rem} .formular label.check{flex-direction:row;align-items:flex-start;gap:10px;font-weight:400;color:var(--ink-2)} .formular label.check input{width:auto;flex:none;margin-top:5px} .formular label.check span{flex:1}
.formular.zeile{flex-direction:row;flex-wrap:wrap;align-items:flex-end;background:var(--card);border-radius:14px;padding:16px 18px} .formular.zeile label{flex:1;min-width:150px}
input,select,textarea{font-family:inherit;font-size:1rem;border:2px solid var(--rule);border-radius:10px;padding:10px 12px;background:var(--card);color:var(--ink);width:100%} input:focus,select:focus,textarea:focus{border-color:var(--klee);outline:none} input[disabled]{color:var(--muted)}
button{font-family:inherit;font-size:1rem;cursor:pointer;border-radius:12px;border:2px solid var(--rule);background:var(--card);color:var(--ink);padding:13px 18px;text-align:left;transition:transform .12s,border-color .15s,background .15s} button:active{transform:scale(.985)}
.go{background:var(--klee);border-color:var(--klee);color:#fff;font-weight:700;text-align:center;padding:14px 20px;text-decoration:none;display:block;border-radius:12px} .go:hover{background:var(--klee-2);border-color:var(--klee-2)} a.go.weiter{margin-top:6px}
.ghost{background:none;color:var(--muted);text-align:center;padding:10px 16px;font-size:.92rem} .ghost:hover{color:var(--ink);border-color:var(--muted)}
.aktionen{display:flex;gap:10px;flex-wrap:wrap;margin-top:8px} .aktionen .go{display:inline-block}
.fehler{color:var(--rot);background:var(--rot-soft);border-radius:10px;padding:10px 14px} .hinweis{color:var(--klee);background:var(--klee-soft);border-radius:10px;padding:10px 14px}
.box{border-radius:12px;padding:16px 18px} .box.merk{background:var(--klee-soft);color:var(--ink-2)} .box b{color:var(--ink)}
.chip{display:inline-block;border-radius:999px;padding:2px 10px;font-size:.78rem;font-weight:600;white-space:nowrap} .chip.gut{background:var(--klee-soft);color:var(--klee)} .chip.duenn{background:var(--gold-soft);color:var(--gold)} .chip.sehr{background:var(--amber-soft);color:var(--amber)} .chip.fehlt{background:var(--rot-soft);color:var(--rot)}
.tw{overflow-x:auto;background:var(--card);border-radius:14px;padding:6px 14px} table{border-collapse:collapse;width:100%;min-width:600px;font-size:.93rem} th{text-align:left;font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);padding:10px 8px;border-bottom:1px solid var(--rule)} td{padding:9px 8px;border-bottom:1px solid var(--rule);vertical-align:top} .num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap} tr.inaktiv{opacity:.55}
code{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:.95rem;letter-spacing:.06em} .codes{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px} .codes code{background:var(--card);border-radius:8px;padding:6px 10px}
.kartevorschau{border-top:1px solid var(--rule);padding:12px 0} .kartevorschau .kicker{font-size:.68rem;color:var(--muted)}
hr{border:0;border-top:1px solid var(--rule);margin:6px 0}
/* Modul-Kartenformat */
body.modul .wrap{max-width:620px;padding-top:10px} .top{display:flex;align-items:center;gap:13px;padding:8px 4px 4px} .pips{flex:1;display:flex;gap:4px} .pip{flex:1;height:6px;border-radius:3px;background:var(--rule);transition:background .3s} .pip.done{background:var(--klee)} .pip.now{background:var(--klee-2)}
.score{font-family:Fraunces,serif;font-weight:700;font-size:.95rem;color:var(--gold);white-space:nowrap} .score.hide{visibility:hidden}
.deck{flex:1;display:flex} .card{width:100%;background:var(--card);border-radius:20px;padding:30px 28px 26px;box-shadow:var(--sh);display:flex;flex-direction:column;gap:18px;animation:in .34s cubic-bezier(.2,.7,.3,1);margin:auto 0}
@keyframes in{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}} .card.shake{animation:shake .4s} @keyframes shake{0%,100%{transform:none}25%{transform:translateX(-7px)}75%{transform:translateX(7px)}}
.card p{font-size:1.04rem} .blk{font-size:.86rem;color:var(--muted);margin-top:-6px} .lz{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px} .lz li{display:grid;grid-template-columns:auto 1fr;gap:10px;color:var(--ink-2)} .lz li::before{content:"→";color:var(--klee);font-weight:700}
.hear{display:inline-flex;align-items:center;gap:9px;align-self:flex-start;border:2px solid var(--klee-soft);background:var(--klee-soft);color:var(--klee);font-weight:700;font-size:.92rem;padding:10px 16px;border-radius:11px} .hear:hover{border-color:var(--klee)} .wave{display:inline-flex;align-items:center;gap:2.5px;height:15px} .wave i{width:3px;background:var(--klee);border-radius:2px} .wave i:nth-child(1){height:6px}.wave i:nth-child(2){height:14px}.wave i:nth-child(3){height:9px}.wave i:nth-child(4){height:12px} .hear.playing .wave i{animation:w .8s ease-in-out infinite} @keyframes w{0%,100%{height:5px}50%{height:15px}}
.read{align-self:flex-start;font-size:.88rem;padding:8px 13px;border-radius:10px} .read.on{color:var(--klee);border-color:var(--klee)}
.opts{display:flex;flex-direction:column;gap:9px} .opt{width:100%;line-height:1.4;font-size:.99rem} .opt:hover{border-color:var(--klee)} .opt.right{border-color:var(--klee);background:var(--klee-soft);color:var(--klee);font-weight:700} .opt.wrong{border-color:var(--rot);background:var(--rot-soft);color:var(--rot)} .opt.dim{opacity:.42}
.fb{border-radius:12px;padding:15px 18px;font-size:.97rem;line-height:1.5;animation:in .28s ease} .fb.ja{background:var(--klee-soft);color:var(--klee)} .fb.nein{background:var(--rot-soft);color:var(--rot)}
.fehler li{list-style:none} ul.fehler{margin:0;padding:0;display:flex;flex-direction:column;gap:11px;background:none;color:inherit} ul.fehler li{display:grid;grid-template-columns:auto 1fr;gap:3px 12px;font-size:.97rem} ul.fehler .x{color:var(--rot);font-weight:700;grid-row:span 2} ul.fehler .ok{color:var(--klee);font-weight:700;grid-row:span 2} ul.fehler b{color:var(--ink)} ul.fehler span{color:var(--ink-2);font-size:.92rem}
.stp{display:flex;flex-direction:column;gap:10px} .stp div{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;background:var(--sunk);border-radius:11px;padding:12px 14px} .stp .n{grid-row:span 3;width:26px;height:26px;border-radius:50%;background:var(--klee);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-family:Fraunces,serif;font-weight:700;font-size:.85rem} .stp b{color:var(--ink)} .stp span{color:var(--ink-2);font-size:.95rem} .stp .warn{color:var(--gold);font-size:.88rem;font-weight:600}
.slots{display:flex;flex-direction:column;gap:7px} .slot{display:flex;align-items:center;gap:11px;border:2px dashed var(--rule);border-radius:11px;padding:11px 14px;min-height:52px;color:var(--muted);font-size:.95rem} .slot.full{border-style:solid;border-color:var(--klee);background:var(--klee-soft);color:var(--klee);font-weight:600} .slot.bad{border-style:solid;border-color:var(--rot);background:var(--rot-soft);color:var(--rot)} .slot .n{font-family:Fraunces,serif;font-weight:700;width:1.3em;flex:none}
.pool{display:flex;flex-wrap:wrap;gap:8px} .chip.used{display:none} button.chip{border:2px solid var(--rule);border-radius:11px;padding:10px 14px;font-size:.94rem;background:var(--card);color:var(--ink);white-space:normal} button.chip:hover{border-color:var(--klee)}
textarea{min-height:120px;resize:vertical} .hilfe{font-size:.9rem;color:var(--muted)} .hilfe.fehler{color:var(--rot);background:none;padding:0}
.medal{font-size:3.4rem;line-height:1;text-align:center} .summe{display:flex;flex-direction:column;gap:7px;background:var(--sunk);border-radius:13px;padding:17px 19px} .summe div{display:flex;justify-content:space-between;font-size:.95rem} .row{display:flex;gap:10px;align-items:center;flex-wrap:wrap} .row .go{flex:1}
:focus-visible{outline:2.5px solid var(--klee);outline-offset:3px;border-radius:6px} @media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}