/* Stundenplaner
   Werkzeug, keine Broschuere: dichte Tabellen, klare Kanten, druckbar.
   Palette aus dem Schulalltag -- Schiefertafel, Kreide, Rotstift, Pausenhof. */

:root{
  --schiefer:#22282e;   /* Tafel */
  --schiefer-2:#2c343c;
  --kreide:#f2f0ea;     /* Kreide auf Tafel */
  --papier:#fbfaf7;
  --linie:#d9d5cc;      /* Heftlinie */
  --linie-stark:#b4ae9f;
  --tinte:#1b1f24;
  --tinte-2:#5c6570;
  --rotstift:#b03a2e;   /* Korrektur */
  --gruen:#2e6b4f;      /* bestanden */
  --gelb:#c9932a;       /* Warnung */
  --blau:#31556e;       /* Akzent, Aktion */

  --r:3px;              /* fast keine Rundung: Formular, kein Consumer-App */
  --schrift:'Instrument Sans',system-ui,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace;
}

*{box-sizing:border-box;margin:0;padding:0}
[x-cloak]{display:none!important}

body{
  font-family:var(--schrift);
  background:var(--papier);
  color:var(--tinte);
  font-size:14px;
  line-height:1.45;
}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}

/* --- Kopf --- */
.top{
  display:flex;align-items:center;justify-content:space-between;
  gap:24px;padding:14px 22px;
  background:var(--schiefer);color:var(--kreide);
  border-bottom:3px solid var(--tinte);
}
.brand{display:flex;align-items:center;gap:12px}
.mark{
  display:grid;place-items:center;width:34px;height:34px;
  background:var(--kreide);color:var(--schiefer);
  font-weight:700;font-size:13px;letter-spacing:.04em;border-radius:var(--r);
}
.top h1{font-size:16px;font-weight:600;letter-spacing:-.01em}
.sub{font-size:12px;color:#9aa4ae}

.run{display:flex;align-items:center;gap:10px}
.field{display:flex;align-items:center;gap:6px;font-size:12px;color:#9aa4ae}
.field select{
  font-family:var(--mono);font-size:12px;padding:5px 7px;
  background:var(--schiefer-2);color:var(--kreide);
  border:1px solid #3d454e;border-radius:var(--r);
}

.btn{
  font-family:inherit;font-size:13px;font-weight:500;
  padding:7px 14px;border-radius:var(--r);cursor:pointer;
  border:1px solid transparent;transition:.12s;
}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn.primary{background:var(--kreide);color:var(--schiefer);font-weight:600}
.btn.primary:hover:not(:disabled){background:#fff}
.btn.ghost{background:transparent;color:var(--kreide);border-color:#4a535d}
.btn.ghost:hover:not(:disabled){border-color:var(--kreide)}
.btn.sm{padding:4px 10px;font-size:12px}

/* --- Fortschritt --- */
.progress{
  padding:10px 22px;background:#eeece5;
  border-bottom:1px solid var(--linie);color:var(--blau);
}
.progress-head{display:flex;align-items:baseline;gap:8px}
.lbl{font-size:11px;text-transform:uppercase;letter-spacing:.07em;color:var(--tinte-2)}
.obj{font-family:var(--mono);font-size:19px;font-weight:600;color:var(--tinte)}
.spark-note{margin-left:auto;font-size:11px;color:var(--tinte-2)}
.spark{width:100%;height:38px;margin-top:4px;opacity:.8}

/* --- Meldungen --- */
.alert{margin:14px 22px;padding:12px 14px;border-radius:var(--r);border-left:3px solid}
.alert.bad{background:#faf0ee;border-color:var(--rotstift)}
.alert h3{font-size:13px;font-weight:600;margin-bottom:6px;color:var(--rotstift)}
.alert ul{list-style:none;display:grid;gap:4px}
.alert li{font-size:13px;display:flex;gap:8px}
.alert li strong{
  font-family:var(--mono);font-size:11px;flex:0 0 auto;
  padding:1px 5px;background:#efdcd8;border-radius:2px;height:fit-content;
}
.hint{font-size:12px;color:var(--tinte-2);margin-top:6px}

/* --- Layout --- */
.grid-layout{
  display:grid;grid-template-columns:300px 1fr;
  gap:0;align-items:start;
}
@media(max-width:900px){.grid-layout{grid-template-columns:1fr}}

/* --- Regeln --- */
.panel{
  padding:18px;border-right:1px solid var(--linie);
  min-height:calc(100vh - 63px);background:#f6f4ef;
}
.panel h2{font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:.06em}
.panel-note{font-size:12px;color:var(--tinte-2);margin:4px 0 16px}
.con-group{margin-bottom:20px}
.con-group h3{
  font-size:11px;text-transform:uppercase;letter-spacing:.07em;
  color:var(--tinte-2);margin-bottom:8px;
  display:flex;justify-content:space-between;
}
.tag{font-weight:400;text-transform:none;letter-spacing:0}

.con{
  display:flex;gap:8px;padding:7px 8px;margin-bottom:2px;
  border-radius:var(--r);cursor:pointer;
  border:1px solid transparent;
}
.con:hover{background:#efece4;border-color:var(--linie)}
.con input[type=checkbox]{margin-top:3px;accent-color:var(--blau);flex:0 0 auto}
.con-body{display:grid;gap:1px;min-width:0;flex:1}
.con-name{
  font-family:var(--mono);font-size:11px;font-weight:500;
  display:flex;justify-content:space-between;align-items:center;gap:6px;
}
.con-desc{font-size:11px;color:var(--tinte-2);line-height:1.35}
.w{
  width:38px;font-family:var(--mono);font-size:11px;text-align:right;
  padding:1px 4px;border:1px solid var(--linie-stark);
  border-radius:2px;background:#fff;
}

/* Strafpunkte: zeigt, wo der Plan wehtut */
.pen{display:flex;align-items:center;gap:5px;margin-top:3px;height:9px}
.pen-bar{height:3px;background:var(--gelb);border-radius:2px;min-width:2px}
.pen-num{font-size:10px;color:var(--tinte-2)}

/* Regeln als eigene Registerkarte: Hart/Weich nebeneinander statt Seitenleiste */
.rules-body{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:start}
.rules-body .panel-note{grid-column:1 / -1;margin:0 0 4px}
@media(max-width:760px){.rules-body{grid-template-columns:1fr}}

/* --- Plan --- */
.plan{padding:18px 22px}
.tabs{display:flex;align-items:center;gap:2px;margin-bottom:14px}
.tabs button{
  font-family:inherit;font-size:13px;padding:6px 12px;cursor:pointer;
  background:none;border:none;border-bottom:2px solid transparent;
  color:var(--tinte-2);
}
.tabs button.on{color:var(--tinte);border-color:var(--schiefer);font-weight:600}
.who{
  margin-left:10px;font-size:12px;padding:4px 8px;
  border:1px solid var(--linie-stark);border-radius:var(--r);background:#fff;
}
.tabs .btn{margin-left:auto;color:var(--tinte-2);border-color:var(--linie-stark)}
.tabs .btn:hover{color:var(--tinte);border-color:var(--tinte)}

.empty{
  padding:60px 20px;text-align:center;color:var(--tinte-2);
  border:1px dashed var(--linie-stark);border-radius:var(--r);
}

/* Der Stundenplan selbst -- das ist die eigentliche Oberflaeche */
.tt{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--linie-stark)}
.tt th{
  font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;
  padding:8px 6px;background:var(--schiefer);color:var(--kreide);
  border-right:1px solid #3d454e;
}
.tt th.std{width:44px;background:var(--schiefer-2)}
.tt tbody th.std{
  background:#f0eee8;color:var(--tinte-2);font-size:12px;
  border-right:1px solid var(--linie-stark);
  border-bottom:1px solid var(--linie);
}
.tt td{
  height:52px;padding:0;vertical-align:top;
  border-right:1px solid var(--linie);
  border-bottom:1px solid var(--linie);
  position:relative;
}
.tt td:last-child,.tt th:last-child{border-right:none}

.les{
  height:100%;padding:5px 7px;display:flex;flex-direction:column;gap:1px;
  border-left:3px solid var(--linie-stark);
}
.fach{font-size:12px;font-weight:600;line-height:1.2}
.meta{font-size:10px;color:var(--tinte-2)}
.raum{font-size:10px;color:var(--blau)}

/* Signatur: der Plan zeigt selbst, wo er wehtut.
   Strafquellen glimmen an der Zellkante. */
.tt td.leer{background:repeating-linear-gradient(
  -45deg,transparent,transparent 5px,#f4f2ec 5px,#f4f2ec 6px)}
.tt td.luecke{background:#fdf4f2}
.tt td.luecke::after{
  content:'';position:absolute;inset:0;
  border:2px solid var(--rotstift);opacity:.35;pointer-events:none;
}
.tt td.spaet .les{border-left-color:var(--gelb)}
.tt td.block .les{border-left-color:var(--gruen)}

.legende{display:flex;gap:16px;margin-top:10px;font-size:11px;color:var(--tinte-2)}
.legende span{display:flex;align-items:center;gap:5px}
.sw{width:10px;height:10px;border-radius:2px;display:inline-block}
.sw.gap{background:#fdf4f2;border:1.5px solid var(--rotstift)}
.sw.late{background:var(--gelb)}
.sw.blk{background:var(--gruen)}

/* --- Ergänzungen: Gestuft-Toggle, Gewichtsregler, Pins --- */

/* Checkbox-Feld im dunklen Kopf (z.B. "Gestuft") */
.field.check{cursor:pointer;user-select:none}
.field.check input{accent-color:var(--blau);margin:0}

/* Prioritätsstufe neben dem Soft-Constraint-Namen (nur im gestuften Modus) */
.prio{
  font-size:9px;font-weight:600;color:#fff;background:var(--blau);
  padding:0 4px;border-radius:2px;letter-spacing:.02em;
}

/* Gewichts-Schieberegler unter der Zahl */
.w-slider{
  width:100%;margin:5px 0 1px;accent-color:var(--gelb);
  height:3px;cursor:pointer;
}

/* Pin-Anzeige in der Tab-Leiste */
.pin-info{
  margin-left:auto;font-size:12px;color:var(--tinte-2);
  display:flex;align-items:center;gap:6px;
}
.pin-info + .btn{margin-left:10px}
.link{
  background:none;border:none;padding:0;cursor:pointer;
  color:var(--blau);font-size:12px;font-family:inherit;text-decoration:underline;
}
.link:hover{color:var(--tinte)}

/* Fixierte Stunde: klar als "bleibt stehen" markiert */
.tt td{cursor:default}
.tt td.pin{cursor:pointer}
.tt td.pin .les{border-left-color:var(--blau);box-shadow:inset 0 0 0 2px rgba(49,85,110,.25)}
.pin-dot{position:absolute;top:2px;right:3px;font-size:9px;line-height:1}
/* In der Klassenansicht signalisieren, dass Zellen anklickbar sind */
.les{position:relative}

/* --- Anmeldeseite --- */
.login-body{min-height:100vh;display:grid;place-items:center;background:var(--schiefer);padding:20px}
.login-card{
  width:100%;max-width:340px;background:var(--papier);
  border-radius:var(--r);padding:26px;display:grid;gap:14px;
  border:1px solid var(--tinte);box-shadow:0 10px 40px rgba(0,0,0,.3);
}
.login-brand{display:flex;align-items:center;gap:12px;margin-bottom:6px}
.login-brand h1{font-size:16px;font-weight:600}
.login-brand .sub{font-size:12px;color:var(--tinte-2)}
.login-field{display:flex;flex-direction:column;gap:5px;font-size:12px;color:var(--tinte-2)}
.login-field input{
  font-family:inherit;font-size:14px;padding:8px 10px;
  border:1px solid var(--linie-stark);border-radius:var(--r);background:#fff;color:var(--tinte);
}
.login-field input:focus{outline:none;border-color:var(--blau)}
.login-card .btn.primary{margin-top:4px;justify-self:stretch;text-align:center}
.login-error{
  font-size:12px;color:var(--rotstift);background:#faf0ee;
  padding:8px 10px;border-radius:var(--r);border-left:3px solid var(--rotstift);
}

/* --- Benutzerleiste im Kopf --- */
.userbar{display:flex;align-items:center;gap:10px;color:#9aa4ae;font-size:12px}
.userbar .uname{color:var(--kreide);font-weight:500}
.rolle-chip{
  display:inline-flex;align-items:center;align-self:center;line-height:1;
  font-size:10px;text-transform:uppercase;letter-spacing:.04em;white-space:nowrap;
  background:var(--blau);color:#fff;padding:3px 7px;border-radius:9px;
}
.rolle-chip.rolle-viewer{background:#5c6570}
.rolle-chip.rolle-admin{background:var(--rotstift)}

/* --- Moduswahl (Plan / Daten) im Kopf --- */
.modus-tabs{display:flex;gap:2px;background:var(--schiefer-2);padding:3px;border-radius:var(--r)}
.modus-tabs button{
  font-family:inherit;font-size:13px;font-weight:500;padding:5px 16px;cursor:pointer;
  background:none;border:none;border-radius:2px;color:#9aa4ae;
}
.modus-tabs button.on{background:var(--kreide);color:var(--schiefer);font-weight:600}
.save-note{font-size:12px;color:#8fc7a8;font-weight:500}
.save-hint{font-size:11px;color:#9aa4ae;font-style:italic}

/* ================= Stammdaten-Editor ================= */
.editor{max-width:1080px;margin:0 auto;padding:18px 22px 80px}

.ed-sec{border:1px solid var(--linie);border-radius:var(--r);background:#fff;margin-bottom:12px}
.ed-head{
  width:100%;display:flex;align-items:center;gap:10px;
  padding:12px 16px;cursor:pointer;background:#f6f4ef;border:none;
  border-radius:var(--r);text-align:left;font-family:inherit;
}
.ed-head:hover{background:#f0eee7}
.ed-head h2{font-size:14px;font-weight:600}
.ed-caret{font-size:11px;color:var(--tinte-2);transition:transform .15s}
.ed-caret.auf{transform:rotate(90deg)}
.anz{
  margin-left:auto;font-size:11px;color:var(--tinte-2);
  background:#e7e4db;padding:1px 7px;border-radius:9px;
}
.ed-body{padding:16px;border-top:1px solid var(--linie)}
.ed-sub{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--tinte-2);margin:16px 0 8px}
.ed-label{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--tinte-2);margin:12px 0 6px}

/* Formularfelder */
.ed-fields{display:flex;flex-wrap:wrap;gap:14px}
.ed-f{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--tinte-2);flex:1;min-width:200px}
.ed-f.sm{flex:0 0 130px;min-width:0}
.editor input[type=text],.editor input[type=number],.editor select{
  font-family:inherit;font-size:13px;padding:6px 8px;color:var(--tinte);
  border:1px solid var(--linie-stark);border-radius:var(--r);background:#fff;width:100%;
}
.editor input:focus,.editor select:focus{outline:none;border-color:var(--blau)}
.editor input[type=checkbox]{accent-color:var(--blau);width:auto}
.ed-inline{display:flex;align-items:center;gap:5px;font-size:12px;color:var(--tinte-2);white-space:nowrap}
.ed-inline.chk{cursor:pointer;user-select:none}
.ed-inline select,.ed-inline input{width:auto}
.w4{width:52px;text-align:center}
.w6{width:72px}
.w-name{width:130px;font-weight:600}

/* Tage-Chips */
.chip-liste{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.tag-chip{display:flex;align-items:center;border:1px solid var(--linie-stark);border-radius:var(--r);overflow:hidden}
.tag-chip input{border:none!important;border-radius:0!important;width:120px}
.tag-chip .x{padding:0 8px}

.x{
  background:none;border:none;cursor:pointer;color:var(--tinte-2);
  font-size:16px;line-height:1;padding:2px 6px;border-radius:2px;
}
.x:hover{color:var(--rotstift);background:#faf0ee}

/* Tabellen (Fächer, Räume, Parallele) */
.ed-table-wrap{overflow-x:auto;margin-bottom:10px}
.ed-table{width:100%;border-collapse:collapse;font-size:13px}
.ed-table th{
  text-align:left;font-size:10px;text-transform:uppercase;letter-spacing:.05em;
  color:var(--tinte-2);font-weight:600;padding:4px 8px;border-bottom:1px solid var(--linie);
}
.ed-table td{padding:3px 6px;border-bottom:1px solid #efece4}
.ed-table td.mid{text-align:center}
.ed-table input,.ed-table select{width:100%}
.ed-table input.w4,.ed-table input.w6{width:auto}

/* Karten (Klassen, Lehrkräfte) */
.ed-card{border:1px solid var(--linie);border-radius:var(--r);padding:12px;margin-bottom:10px;background:var(--papier)}
.ed-card-head{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.ed-card-head .x{margin-left:auto}

/* Stundentafel-Raster */
.tafel{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:6px;margin-top:12px}
.tafel-zelle{
  display:flex;align-items:center;justify-content:space-between;gap:6px;
  padding:5px 8px;border:1px solid var(--linie);border-radius:var(--r);
  font-size:12px;background:#fff;
}
.tafel-zelle.aktiv{border-color:var(--blau);background:#f2f6f9}
.tf-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--tinte-2)}
.tafel-zelle.aktiv .tf-name{color:var(--tinte);font-weight:500}
.tafel-zelle input{width:44px!important;text-align:center;padding:3px 4px!important}
.tafel-sum{font-size:12px;color:var(--tinte-2);margin-top:10px}

/* Fach-Chips (Lehrkräfte) */
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{
  font-family:inherit;font-size:12px;padding:4px 10px;cursor:pointer;
  border:1px solid var(--linie-stark);border-radius:14px;background:#fff;color:var(--tinte-2);
}
.chip:hover{border-color:var(--blau)}
.chip.on{background:var(--blau);border-color:var(--blau);color:#fff;font-weight:500}
.leer-hint{font-size:12px;color:var(--tinte-2);font-style:italic}

/* Verfügbarkeits-Raster */
.verf-label{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.verf-hint{font-size:11px;color:var(--tinte-2);font-style:italic}
.verf-wrap{overflow-x:auto}
.verf-grid{border-collapse:collapse}
.verf-grid th{font-size:11px;color:var(--tinte-2);font-weight:500;padding:3px 6px}
.verf-grid th.klick{cursor:pointer;user-select:none}
.verf-grid th.klick:hover{color:var(--blau)}
.verf-grid td{
  width:30px;height:24px;border:1px solid var(--linie);cursor:pointer;
  background:#faf0ee;
}
.verf-grid td.ja{background:var(--gruen)}
.verf-grid td:hover{outline:2px solid var(--blau);outline-offset:-2px}

@media print{
  .top,.panel,.tabs,.progress,.alert,.legende,.editor,.modus-tabs{display:none}
  .grid-layout{grid-template-columns:1fr}
  .tt th{background:#ddd!important;color:#000!important;-webkit-print-color-adjust:exact}
}