:root{--bg:#f4f3ef;--card:#fff;--soft:#f0efea;--text:#1f1e1c;--text2:#5f5e5a;--muted:#8a8984;--line:#e2e0d8;--line2:#cfcdc4;--acc:#185fa5;--accbg:#e6f1fb;--acctext:#0c447c;--rot:#a32d2d;--rotbg:#fcebeb;--gruen:#3b6d11;--gruenbg:#eaf3de;--gelb:#854f0b;--gelbbg:#faeeda;--grau:#c9c7bf}
@media (prefers-color-scheme:dark){:root{--bg:#1a1a19;--card:#242422;--soft:#2c2c2a;--text:#ecebe6;--text2:#b4b2a9;--muted:#888780;--line:#383835;--line2:#4a4a46;--acc:#378add;--accbg:#0c2c4f;--acctext:#b5d4f4;--rot:#f09595;--rotbg:#4a1b1b;--gruen:#97c459;--gruenbg:#1f3308;--gelb:#fac775;--gelbbg:#412402;--grau:#5a5a56}}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font:16px/1.5 system-ui,-apple-system,"Segoe UI",sans-serif;-webkit-text-size-adjust:100%}
button{font:inherit;color:inherit;background:var(--card);border:1px solid var(--line2);border-radius:10px;padding:10px 16px;cursor:pointer}
button:hover{background:var(--soft)}
button.haupt{background:var(--acc);color:#fff;border-color:var(--acc)}
button:disabled{opacity:.6}
input,select{font:inherit;color:inherit;background:var(--card);border:1px solid var(--line2);border-radius:10px;padding:12px;width:100%}
select{padding:8px;margin-top:3px}
.raster2 select{padding:8px}
.zeile.klickbar,.klickbar{cursor:pointer}
.zeile.klickbar:hover{background:var(--soft)}
.rotbg{background:var(--rot)}.gruenbg{background:var(--gruen)}
tr.summe td{font-weight:600;border-top:2px solid var(--line2)}
details.karte summary{list-style:none}
details.karte summary::-webkit-details-marker{display:none}
h1{font-size:20px;font-weight:600;margin:0}
h2{font-size:17px;font-weight:600;margin:0 0 10px}
h3{font-size:15px;font-weight:600;margin:0 0 8px}
a{color:var(--acc);cursor:pointer}
.klein{font-size:13px;color:var(--text2)}
.rot{color:var(--rot)}.gruen{color:var(--gruen)}.gelb{color:var(--gelb)}
.versteckt{display:none!important}
.kopf{display:flex;align-items:center;gap:16px;padding:10px 16px;padding-top:max(10px,env(safe-area-inset-top));background:var(--card);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:5}
.klein-knopf{padding:6px 12px;font-size:14px}
.tabs{display:flex;gap:4px}
.tabs a,.unten a{text-decoration:none;color:var(--text2);border-radius:8px}
.tabs a{padding:7px 12px}
.tabs a span{margin-right:6px}
.tabs a.an{background:var(--accbg);color:var(--acctext)}
.unten{display:none}
.inhalt{padding:16px;max-width:1000px;margin:0 auto}
.karte{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px 16px;margin-bottom:12px}
.karte.klickbar{cursor:pointer}
.zeile{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:9px 0;border-top:1px solid var(--line);flex-wrap:wrap}
.zeile:first-of-type{border-top:0}
.hinweis{padding:10px 12px;border-radius:10px;font-size:14px;margin-top:10px}
.hinweis.rot{background:var(--rotbg);color:var(--rot)}.hinweis.gruen{background:var(--gruenbg);color:var(--gruen)}.hinweis.gelb{background:var(--gelbbg);color:var(--gelb)}
.login{max-width:380px;margin:12vh auto;padding:0 16px}
.zwei{display:flex;gap:10px;margin-bottom:12px}
.gross-knopf{flex:1;height:84px;font-size:17px;line-height:1.3;position:relative}
.zaehlchen{display:block;font-size:12px;opacity:.9}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{padding:6px 11px;border-radius:8px;border:1px solid var(--line2);cursor:pointer;font-size:14px;background:var(--card)}
.chip.an{background:var(--accbg);color:var(--acctext);border-color:var(--acc)}
.diagramm{display:flex;align-items:flex-end;gap:5px;height:140px;margin-top:12px}
.diagramm .m{flex:1;display:flex;gap:1px;align-items:flex-end;height:100%}
.diagramm .s{flex:1;border-radius:3px 3px 0 0;min-height:1px}
.blau{background:var(--acc)}.grau{background:var(--grau)}
.achse{display:flex;gap:5px;margin-top:3px}.achse span{flex:1;text-align:center;font-size:11px;color:var(--muted)}
.leg{display:inline-block;width:9px;height:9px;border-radius:2px;margin:0 4px 0 10px}
.leg:first-child{margin-left:0}
.liste .pkt{display:flex;align-items:center;gap:10px;padding:12px 6px;border-top:1px solid var(--line);cursor:pointer;border-radius:8px}
.liste .pkt:hover{background:var(--soft)}
.sym{font-size:22px;width:30px;text-align:center}
.pfeil{color:var(--muted);font-size:20px}
.ortkopf{margin:14px 0 2px}
.fortschritt{height:6px;background:var(--soft);border-radius:4px;margin:6px 0 12px}.fortschritt div{height:6px;background:var(--acc);border-radius:4px}
.gross{font-size:30px!important;text-align:right;height:64px}
.zurueck{text-decoration:none;font-size:15px}
.knopfartig{display:inline-block;padding:10px 14px;border:1px solid var(--line2);border-radius:10px;cursor:pointer;background:var(--card)}
.vorschau{width:56px;height:56px;object-fit:cover;border-radius:8px;border:1px solid var(--line)}
table{width:100%;border-collapse:collapse;font-size:14px}
th{text-align:left;font-weight:600;color:var(--text2);font-size:12.5px;padding:6px;border-bottom:1px solid var(--line2)}
td{padding:7px 6px;border-bottom:1px solid var(--line);vertical-align:top}
td.b,th.b{text-align:right;white-space:nowrap}
.loeschen{color:var(--muted);text-decoration:none;margin-left:6px}
.loeschen:hover{color:var(--rot)}
.zwei-spalten{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:12px;align-items:start}
.zwei-spalten .karte{margin-bottom:0}
.raster2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.raster2 input{margin-top:3px;padding:8px}
details summary{cursor:pointer;color:var(--acc)}
.toast{position:fixed;left:50%;bottom:calc(84px + env(safe-area-inset-bottom));transform:translateX(-50%);background:var(--text);color:var(--bg);padding:10px 14px;border-radius:12px;display:flex;gap:12px;align-items:center;z-index:20;max-width:92vw;font-size:14px}
.toast button{background:transparent;color:var(--bg);border-color:var(--bg);padding:4px 10px;flex:none}
@media (max-width:760px){
  .tabs{display:none}
  .unten{display:flex;position:fixed;left:0;right:0;bottom:0;background:var(--card);border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom);z-index:5}
  .unten a{flex:1;text-align:center;padding:8px 0 10px;font-size:12px}
  .unten a span{display:block;font-size:22px;line-height:1.2}
  .unten a.an{color:var(--acc)}
  .inhalt{padding:12px 12px 96px}
  .raster2{grid-template-columns:1fr}
}