*{box-sizing:border-box}html,body{height:100%}body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,Helvetica,Arial,sans-serif;background:#f6f7fb;color:#111;display:flex;flex-direction:column}
.app-header{display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem;align-items:center;padding:1rem 1.2rem;background:#0e7c86;color:#fff;box-shadow:0 2px 8px rgba(0,0,0,.15)}
.brand{display:flex;gap:.8rem;align-items:center}.brand .logo{font-size:2rem}.subtitle{margin:.2rem 0 0;opacity:.9}
.controls{display:flex;gap:.8rem;align-items:center;flex-wrap:wrap}
.controls .secondary{border:none;border-radius:12px;padding:.6rem .9rem;font-weight:600;cursor:pointer;background:#e8ecf3}
.toggle{display:flex;gap:.4rem;align-items:center;background:#095e65;padding:.3rem .5rem;border-radius:10px}
.toggle input{transform:scale(1.2)}
main{padding:1rem;max-width:1100px;margin:0 auto;flex:1;width:100%;display:flex;flex-direction:column;gap:1rem}
.intro .legend{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.6rem}
.chip{display:inline-flex;align-items:center;gap:.35rem;padding:.2rem .6rem;border-radius:999px;font-weight:700;font-size:.85rem;border:2px solid transparent;background:#eef4ff;border-color:#a8b6db}
.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}
.card{background:#fff;border-radius:16px;box-shadow:0 8px 24px rgba(0,0,0,.08);padding:1rem;border-left:10px solid transparent}
.card.info{border-left-color:#8e9aad;background:#f9f9fe}
.card h2{margin:.2rem 0 .4rem}.card h2 small{font-weight:600;opacity:.8}.tips{margin:.4rem 0 .6rem}.tips li{margin:.2rem 0}
.ex{background:#f7faff;border:1px dashed #cfd8ec;border-radius:10px;padding:.4rem .6rem;margin:.3rem 0}
.hl{padding:.08rem .3rem;border-radius:8px}
/* category colors */
.card.subj{border-left-color:#2ecc71}.hl.subj,.chip.subj{background:#e9f8ef;border-color:#2ecc71}
.card.pred{border-left-color:#3498db}.hl.pred,.chip.pred{background:#eaf4ff;border-color:#3498db}
.card.akk{border-left-color:#e74c3c}.hl.akk,.chip.akk{background:#ffe8e6;border-color:#e74c3c}
.card.dat{border-left-color:#9b59b6}.hl.dat,.chip.dat{background:#f3eaff;border-color:#9b59b6}
.card.gen{border-left-color:#7f8c8d}.hl.gen,.chip.gen{background:#ecf0f1;border-color:#7f8c8d}
.card.prepobj{border-left-color:#16a085}.hl.prepobj,.chip.prepobj{background:#e9fbfb;border-color:#16a085}
.card.praed{border-left-color:#f39c12}.hl.praed,.chip.praed{background:#fff8dc;border-color:#f39c12}
.card.adv{border-left-color:#8da8e5}
.hl.adv,.chip.adv{background:#eef4ff;border-color:#8da8e5}
/* adv subcolors */
.adv-zeit .hl.adv,.chip.adv-zeit{background:#fff1f1;border-color:#e74c3c}
.adv-ort .hl.adv,.chip.adv-ort{background:#eef7ff;border-color:#3498db}
.adv-art .hl.adv,.chip.adv-art{background:#f5efff;border-color:#9b59b6}
.adv-grund .hl.adv,.chip.adv-grund{background:#fff3e6;border-color:#e67e22}
.adv-ziel .hl.adv,.chip.adv-ziel{background:#e9f8ef;border-color:#2ecc71}
.adv-bed .hl.adv,.chip.adv-bed{background:#e7fcf7;border-color:#16a085}
.adv-einr .hl.adv,.chip.adv-einr{background:#efe7f6;border-color:#7e57c2}
.adv-mittel .hl.adv,.chip.adv-mittel{background:#fff8dc;border-color:#f1c40f}
.probe-card{background:#fff;border-radius:16px;box-shadow:0 8px 24px rgba(0,0,0,.08);padding:1rem}
.ask-table .table{display:grid;border:1px solid #e6e9f1;border-radius:14px;overflow:hidden}
.ask-table .row{display:grid;grid-template-columns:220px 1fr;border-bottom:1px solid #e6e9f1}
.ask-table .row:last-child{border-bottom:none}
.ask-table .c1{background:#f7f8fc;font-weight:700;padding:.5rem .7rem}
.ask-table .c2{padding:.5rem .7rem}
.app-footer{padding:1rem;text-align:center;color:#333}
/* Whiteboard mode */
.whiteboard body{background:#fff}.whiteboard .app-header{background:#0b5560}.whiteboard .grid{grid-template-columns:1fr}.whiteboard .card h2{font-size:1.6rem}.whiteboard .ex{font-size:1.2rem}
/* Print */
@media print{
  .app-header,.controls{display:none!important}
  body{background:#fff}
  .grid{grid-template-columns:1fr 1fr}
  .card{break-inside:avoid}
}