/* KLARA — Designrichtung A1 "Papier & Tafelgrün" */
:root{
  --paper:#faf7f0; --card:#fff; --line:#e6e1d4; --ink:#1c2b24; --muted:#6b7a70;
  --green:#2f6b52; --green-dark:#1f4636; --red:#bb4430; --amber:#d99a2b; --chalk:#f4efe6;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
body{font-family:'Segoe UI',system-ui,-apple-system,sans-serif;background:var(--paper);
     color:var(--ink);line-height:1.55;min-height:100vh}
.wrap{max-width:1080px;margin:0 auto;padding:14px 16px 46px}
a{color:var(--green);text-decoration:none}
.wm{font-family:'Segoe Print','Bradley Hand',cursive;font-weight:700;color:var(--green-dark)}

/* ---------- Kopfzeile ---------- */
header.top{display:flex;align-items:center;gap:13px;padding:12px 0 16px}
header.top .grow{flex:1;min-width:0}
.titel{font-size:20px;font-weight:700}
.unter{font-size:12.5px;color:var(--muted)}
.avatar{width:38px;height:38px;border-radius:999px;background:var(--green);color:#fff;
        display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px}

/* ---------- Knöpfe ---------- */
.btn{border:none;background:var(--green);color:#fff;font-family:inherit;font-weight:700;
     font-size:14px;padding:11px 18px;border-radius:11px;cursor:pointer;display:inline-block;
     box-shadow:0 3px 10px rgba(47,107,82,.28)}
.btn:hover{transform:translateY(-1px)}
.btn.ghost{background:var(--card);color:#4c5a51;border:1px solid var(--line);box-shadow:none}
.btn.dark{background:var(--green-dark);color:var(--chalk)}
.btn.rot{background:var(--red)}
.btn.klein{font-size:13px;padding:8px 14px}
.btn.voll{width:100%;text-align:center}
.icon-btn{border:1px solid var(--line);background:var(--card);border-radius:11px;width:40px;
          height:40px;font-size:18px;cursor:pointer;color:#4c5a51}

/* ---------- Chips ---------- */
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px;align-items:center}
.chip{font-size:12.5px;padding:5px 12px;border-radius:999px;font-weight:600;
      background:var(--card);color:#4c5a51;border:1px solid var(--line)}
.chip.warn{background:#fff3df;color:#8a5a12;border-color:#eed9b4}
.chip.rot{background:#fbe9e5;color:#8f2f1e;border-color:#f0cec6}

/* ---------- Karten ---------- */
.karte{background:var(--card);border:1px solid var(--line);border-radius:13px;
       padding:14px 16px;margin-bottom:12px}
.karte h3{font-size:14.5px;color:var(--green-dark);margin-bottom:8px}
.karte textarea,.karte input[type=text]{width:100%;border:1px solid var(--line);border-radius:9px;
       font-family:inherit;font-size:13.5px;padding:9px;background:#fdfcf8;resize:vertical}
.raster{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:720px){.raster{grid-template-columns:1fr}}

/* ---------- Sitzplan ---------- */
.plan{display:grid;gap:11px;margin-bottom:14px}
.platz{background:var(--card);border:1px solid var(--line);border-top:4px solid var(--green);
       border-radius:12px;padding:10px 6px 8px;text-align:center;position:relative;
       cursor:pointer;min-height:74px;box-shadow:0 2px 8px rgba(36,88,68,.07);
       display:flex;flex-direction:column;justify-content:center;user-select:none}
.platz:hover{transform:translateY(-2px)}
.platz .nm{font-weight:700;font-size:14px}
.platz .sub{font-size:10px;color:var(--muted);margin-top:2px;min-height:12px}
.platz.abwesend{background:#efece3;border-top-color:#c9c4b5;color:#a8a394;box-shadow:none}
.platz.abwesend .sub{color:#a8a394}
.platz.verspaetet{border-top-color:var(--amber);background:#fffaf1}
.platz.gewaehlt{box-shadow:0 0 0 3px var(--amber),0 6px 16px rgba(217,154,43,.35)}
.platz.leer{background:transparent;border:1.5px dashed #ddd8c8;box-shadow:none;cursor:default}
.platz.ziehbar{cursor:grab}
.platz.zieht{opacity:.4}
.platz.ziel{box-shadow:0 0 0 3px var(--green)}
.marke{position:absolute;top:-7px;right:-6px;min-width:21px;height:21px;border-radius:999px;
       font-size:11px;font-weight:800;display:flex;align-items:center;justify-content:center;
       padding:0 5px;box-shadow:0 2px 6px rgba(0,0,0,.2)}
.marke.plus{background:var(--green);color:#fff}
.marke.minus{background:var(--red);color:#fff;left:-6px;right:auto}

/* Lehrertisch: rechte Hälfte, mittig */
.lehrerzeile{display:grid;grid-template-columns:1fr 1fr;margin-top:16px}
.lehrerzeile .slot{grid-column:2;display:flex;justify-content:center}
@media(max-width:720px){.lehrerzeile{grid-template-columns:1fr}.lehrerzeile .slot{grid-column:1}}
.lehrertisch{background:var(--green-dark);color:var(--chalk);border-radius:14px;padding:12px 22px;
       text-align:center;cursor:pointer;box-shadow:0 5px 16px rgba(31,70,54,.3);min-width:210px}
.lehrertisch .tt{font-weight:700;font-size:14.5px}
.lehrertisch .ts{font-size:11px;opacity:.8;margin-top:2px}

/* ---------- Liste ---------- */
.liste{display:none;flex-direction:column;gap:7px;margin-bottom:16px}
.zeile{display:flex;align-items:center;gap:10px;background:var(--card);border:1px solid var(--line);
       border-left:4px solid var(--green);border-radius:11px;padding:8px 12px;cursor:pointer}
.zeile.abwesend{background:#efece3;border-left-color:#c9c4b5;color:#a8a394}
.zeile.verspaetet{border-left-color:var(--amber);background:#fffaf1}
.zeile .nm{font-weight:700;font-size:14px;width:56px}
.zeile .info{flex:1;font-size:12px;color:var(--muted)}
.tag{font-size:11px;font-weight:800;border-radius:999px;padding:2px 8px}
.tag.p{background:#e3efe9;color:var(--green)}
.tag.m{background:#f7e3de;color:var(--red)}

/* ---------- Werkzeugleiste ---------- */
.werkzeuge{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:14px}
.werkzeuge .btn.ghost.aktiv{background:var(--green);color:#fff;border-color:var(--green)}

/* ---------- Einstellungen ---------- */
.einstellungen{display:none;background:var(--card);border:1px solid var(--line);
       border-radius:13px;padding:14px 16px;margin-bottom:14px}
.einstellungen.offen{display:block}
.ezeile{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:9px;font-size:13px}
.ezeile label{color:var(--muted);min-width:132px}
.stepper{display:flex;align-items:center;gap:6px}
.stepper button{width:30px;height:30px;border:1px solid var(--line);background:var(--paper);
       border-radius:8px;font-size:16px;font-weight:700;cursor:pointer;color:#4c5a51;
       font-family:inherit;line-height:1}
.stepper span{min-width:26px;text-align:center;font-weight:700}

/* ---------- Dialog ---------- */
.overlay{position:fixed;inset:0;background:rgba(28,43,36,.45);display:none;
         align-items:center;justify-content:center;z-index:50;padding:16px}
.overlay.offen{display:flex}
.dialog{background:var(--card);border-radius:16px;padding:18px 20px;width:100%;max-width:440px;
        box-shadow:0 20px 60px rgba(0,0,0,.3);max-height:88vh;overflow-y:auto}
.dialog h3{font-size:16px;margin-bottom:2px}
.dialog .sub{font-size:12px;color:var(--muted);margin-bottom:12px}
.dzeile{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.dbtn{border:none;font-family:inherit;font-weight:700;font-size:13.5px;padding:10px 14px;
      border-radius:11px;cursor:pointer;flex:1 1 45%;text-align:center}
.dbtn.p{background:#e3efe9;color:var(--green)}
.dbtn.m{background:#f7e3de;color:var(--red)}
.dbtn.g{background:#f1efe8;color:#4c5a51}
.dbtn.a{background:#efece3;color:#6d675a}
.dbtn.d{background:var(--green-dark);color:var(--chalk)}
.dbtn.voll{flex:1 1 100%}
.dialog input{width:100%;border:1px solid var(--line);border-radius:9px;font-family:inherit;
              font-size:13.5px;padding:9px;margin-bottom:10px;background:#fdfcf8}
.dschliessen{background:none;border:none;color:var(--muted);font-size:13px;cursor:pointer;
             font-family:inherit;width:100%;padding:6px}
.dabschnitt{font-size:11.5px;font-weight:700;color:var(--muted);text-transform:uppercase;
            letter-spacing:.06em;margin:6px 0 7px}

/* ---------- Hinweis ---------- */
#hinweis{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(90px);
         background:var(--green-dark);color:var(--chalk);font-size:13.5px;font-weight:600;
         padding:11px 20px;border-radius:999px;box-shadow:0 8px 24px rgba(0,0,0,.3);
         transition:transform .25s;z-index:60;max-width:90vw;text-align:center}
#hinweis.zeigen{transform:translateX(-50%) translateY(0)}

/* ---------- Dashboard ---------- */
.jetzt{background:var(--green-dark);color:var(--chalk);border-radius:16px;padding:17px 20px;
       display:flex;align-items:center;gap:16px;margin-bottom:20px;flex-wrap:wrap;
       box-shadow:0 6px 20px rgba(31,70,54,.28)}
.jetzt .lbl{font-size:11px;text-transform:uppercase;letter-spacing:.1em;opacity:.75}
.jetzt .gross{font-size:19px;font-weight:700;margin-top:2px}
.jetzt .det{font-size:12.5px;opacity:.82;margin-top:2px}
.jetzt .go{margin-left:auto}
h3.abschnitt{font-size:13px;text-transform:uppercase;letter-spacing:.09em;color:var(--muted);
             margin:22px 0 11px;font-weight:700}
.kurse{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px}
.kurs{background:var(--card);border:1px solid var(--line);border-top:4px solid var(--green);
      border-radius:14px;padding:14px 16px;cursor:pointer;box-shadow:0 2px 8px rgba(36,88,68,.07)}
.kurs:hover{transform:translateY(-3px)}
.kurs.kv{border-top-color:var(--amber)}
.kurs .nm{font-weight:700;font-size:16px}
.kurs .fach{font-size:12.5px;color:var(--muted);margin-top:1px}
.kurs .meta{font-size:11.5px;color:var(--muted);margin-top:9px}
.kv-marke{background:#fdf6e7;color:#8a5a12;border-radius:999px;padding:1px 8px;
          font-weight:700;font-size:10.5px}

/* ---------- Tabellen ---------- */
table.daten{width:100%;border-collapse:collapse;font-size:13px}
table.daten th{text-align:left;padding:8px;color:var(--muted);font-size:12px;
               border-bottom:2px solid var(--line)}
table.daten td{padding:8px;border-bottom:1px solid #f0ede2}
table.daten tr:hover td{background:#fdfcf8}

/* ---------- Anmeldung ---------- */
.anmeldeseite{min-height:100vh;display:flex;align-items:center;justify-content:center;
              padding:20px;background:var(--green-dark)}
.anmeldebox{background:var(--card);border-radius:20px;padding:30px;width:100%;max-width:400px;
            box-shadow:0 24px 70px rgba(0,0,0,.4)}
.anmeldebox .marke{position:static;text-align:center;margin-bottom:20px;display:block;
                   background:none;box-shadow:none;height:auto}
.feld{margin-bottom:12px}
.feld label{display:block;font-size:12px;color:var(--muted);margin-bottom:4px;font-weight:600}
.feld input{width:100%;border:1px solid var(--line);border-radius:10px;font-family:inherit;
            font-size:14px;padding:11px 12px;background:#fdfcf8}
.feld input:focus{outline:2px solid var(--green);border-color:var(--green)}
.fehler{background:#fbe9e5;border:1px solid #f0cec6;color:#8f2f1e;border-radius:10px;
        padding:10px 12px;font-size:13px;margin-bottom:14px}
.leer{text-align:center;color:var(--muted);padding:30px 16px;font-size:14px}