/* ===== Grundlayout ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 13px;
  background: #f4f5f7;
  color: #222;
  min-height: 100vh;
}

/* ===== Pfeile bei Zahlenfeldern global entfernen ===== */
input[type="number"] { -moz-appearance: textfield; }
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* ===== Overlays (Login / Sperre) ===== */
.hidden { display: none !important; }

#login-overlay, #lock-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.45);
  display: flex; align-items: center; justify-content: center;
  z-index: 1000;
}

.lock-box {
  background: #fff;
  border-radius: 8px;
  padding: 32px 40px;
  min-width: 320px;
  text-align: center;
  box-shadow: 0 8px 32px rgba(0,0,0,.2);
}
.lock-box h2 { margin-bottom: 16px; color: #1a3c6b; }
.lock-box p  { margin-bottom: 20px; color: #555; }
.lock-box label { display: block; text-align: left; margin-bottom: 16px; color: #444; font-weight: bold; }
.lock-box input {
  width: 100%; margin-top: 6px;
  padding: 8px 12px; border: 1px solid #ccc;
  border-radius: 4px; font-size: 15px;
}
.login-buttons { display: flex; gap: 10px; justify-content: center; }

/* ===== Buttons ===== */
button {
  padding: 7px 18px;
  border: none; border-radius: 4px;
  background: #1a3c6b; color: #fff;
  cursor: pointer; font-size: 13px; font-weight: bold;
  transition: background .15s;
}
button:hover { background: #255090; }
button.secondary { background: #6c757d; }
button.secondary:hover { background: #5a6268; }
button.small { padding: 4px 12px; font-size: 12px; }
button.danger { background: #c0392b; }
button.danger:hover { background: #e74c3c; }

/* ===== Header ===== */
header {
  display: flex; align-items: center; justify-content: space-between;
  background: #1a3c6b; color: #fff;
  padding: 10px 20px;
  position: sticky; top: 0; z-index: 100;
}
.header-title { font-size: 17px; font-weight: bold; }
.header-abschnitt { display: flex; align-items: center; gap: 8px; }
#sel-abschnitt {
  padding: 4px 8px; border-radius: 4px;
  border: 1px solid #4a6fa5; background: #2a5298; color: #fff;
  font-size: 13px; font-weight: bold; cursor: pointer;
  max-width: 220px;
}
#sel-abschnitt:focus { outline: 2px solid #aac4f0; }
.header-status { display: flex; align-items: center; gap: 12px; }
#lock-info { font-size: 12px; color: #aac4f0; }

/* ===== Tabs ===== */
.tab-bar {
  display: flex; gap: 0;
  background: #fff;
  border-bottom: 2px solid #1a3c6b;
  padding: 0 16px;
  position: sticky; top: 46px; z-index: 99;
}
.tab-btn {
  background: none; color: #555;
  border: none; border-radius: 0;
  padding: 10px 22px;
  font-size: 14px; font-weight: normal;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
}
.tab-btn:hover { background: #eef2ff; color: #1a3c6b; }
.tab-btn.active { color: #1a3c6b; font-weight: bold; border-bottom-color: #1a3c6b; background: none; }

/* ===== Haupt-Content ===== */
main { padding: 12px 16px; }

.tab-content { display: none; }
.tab-content.active { display: block; }

.toolbar {
  display: flex; gap: 8px; align-items: center;
  margin-bottom: 10px;
}

.table-scroll { overflow-x: auto; }

/* ===== Allgemeine Tabellenstile ===== */
table {
  border-collapse: collapse;
  white-space: nowrap;
  background: #fff;
  table-layout: fixed;
}

th, td {
  border: 1px solid #ccc;
  padding: 2px 4px;
  font-size: 11px;
  vertical-align: middle;
  overflow: hidden;
  text-overflow: ellipsis;
}

th {
  background: #e8ecf3;
  font-weight: bold;
  text-align: center;
  position: sticky;
  top: 0;
  z-index: 10;
}

/* Eingabefelder in th und td einheitlich */
th input[type="text"],
th input[type="number"],
td input[type="text"],
td input[type="number"] {
  border: none;
  background: transparent;
  width: 100%;
  font-size: 11px;
  font-family: inherit;
  font-weight: inherit;
  color: inherit;
  padding: 0;
  text-align: inherit;
  display: block;
}
th input[type="number"],
td input[type="number"] { text-align: center; }

th input:focus,
td input:focus { outline: 2px solid #5580c8; border-radius: 2px; background: #fffbe6; }

/* ===== Lehrkräfte-Tabelle ===== */
#tbl-lehrkraefte { min-width: max-content; }
#tbl-lehrkraefte th:first-child,
#tbl-lehrkraefte td:first-child { position: sticky; left: 0; background: #e8ecf3; z-index: 5; width: 52px; }
#tbl-lehrkraefte td:first-child { background: #f7f8fb; }
#tbl-lehrkraefte th { width: 52px; }
#tbl-lehrkraefte th:nth-child(n+10):nth-child(-n+19) { width: 46px; } /* Fach-Spalten */
#tbl-lehrkraefte th:last-child { width: 28px; }

.col-computed { background: #f0f4fa; color: #444; text-align: center; }
.col-warning  { background: #fff3cd; }
.col-ok       { background: #d4edda; }
.col-over     { background: #f8d7da; }

/* ===== Sek-I-Tabelle ===== */
#tbl-sekI { min-width: max-content; }
#tbl-sekI th:first-child,
#tbl-sekI td:first-child {
  position: sticky; left: 0; z-index: 5;
  width: 46px; min-width: 46px;
  background: #f7f8fb;
}
#tbl-sekI th:first-child { background: #e8ecf3; }

#tbl-sonstiges { min-width: max-content; }
#tbl-sonstiges th:first-child,
#tbl-sonstiges td[rowspan] {
  position: sticky; left: 0; z-index: 5;
  min-width: 140px;
  background: #f7f8fb;
}
#tbl-sonstiges thead th { background: #e8ecf3; }
#tbl-sonstiges .seki-bemerkung { text-align: center; }
#tbl-sonstiges .seki-header-kl { width: 50px; min-width: 50px; }
#tbl-sonstiges .seki-stunden   { width: 20px; min-width: 20px; }
#tbl-sonstiges .seki-bemerkung { width: 30px; min-width: 30px; }
#tbl-sonstiges .seki-lehrer    { width: 50px; min-width: 50px; }

.seki-label-col  { font-weight: bold; width: 46px; }
/* Stunden-Spalte (schmal, nur Zahl) + Bemerkung-Spalte zusammen = 1 Klassenbreite */
.seki-stunden    { text-align: center; font-weight: bold; width: 26px; }
.seki-bemerkung  { text-align: left; width: 40px; font-size: 10px; color: #444; }
/* Lehrer-Zeile: colspan=2, also 26+40=66px breit */
.seki-lehrer     { text-align: center; width: 66px; }
.seki-lehrer input, .sekii-lehrer input { text-transform: uppercase; }
.seki-header-kl  { font-weight: bold; text-align: center; width: 66px; }
.seki-meta       { background: #f0f4fa; text-align: center; font-size: 10px; color: #555; width: 66px; }
.seki-meta.seki-label-col { font-size: 11px; color: #333; font-weight: bold; }
/* Keine Trennlinie innerhalb eines Fachs (Sek I) */
.seki-stunden    { border-right:  none !important; border-bottom: none !important; }
.seki-bemerkung  { border-left:   none !important; border-bottom: none !important; }
.seki-lehrer     { border-top:    none !important; }
/* Fach-Trennlinie dicker (Sek I) */
#tbl-sekI tbody .seki-label-col { border-bottom: 2px solid #555 !important; }
#tbl-sekI .seki-row-lehrer td   { border-bottom: 2px solid #555 !important; }

.seki-summe-row td  { background: #e8ecf3; font-weight: bold; text-align: center; pointer-events: none; user-select: none; }
.seki-korr-row td   { background: #f3f4f7; text-align: center; font-size: 11px; color: #666; }
.seki-summe-col     { background: #e8ecf3; font-weight: bold; text-align: center; width: 38px; pointer-events: none; user-select: none; }
.seki-empty      { background: #fff !important; }

/* Farbwähler im Klassenkopf */
.seki-header-kl input[type="color"] {
  width: 14px; height: 14px;
  border: none; padding: 0; cursor: pointer;
  background: none; vertical-align: middle;
  margin-left: 3px;
}

/* ===== Sek-II-Tabelle ===== */
#tbl-sekII { min-width: max-content; }
#tbl-sekII th:first-child,
#tbl-sekII td:first-child {
  position: sticky; left: 0; z-index: 5;
  width: 50px; min-width: 50px;
  background: #f7f8fb;
}
#tbl-sekII th:first-child { background: #e8ecf3; }

.sekii-label-col   { font-weight: bold; width: 50px; }
.sekii-jahrgang    { background: #1a3c6b; color: #fff; text-align: center; font-weight: bold; }
.sekii-kurs-header { background: #e8ecf3; text-align: center; width: 52px; }
/* Sek II: 2 Spalten pro Kurs (Stunden schmal + Kursart breiter = 62px gesamt) */
.sekii-stunden     { text-align: center; font-weight: bold; width: 26px; }
.sekii-stunden     { width: 24px; }
.sekii-kursart     { text-align: center; font-size: 10px; color: #555; width: 42px; }
.sekii-kursart input { width: 100%; box-sizing: border-box; text-align: center; }
.sekii-lehrer      { text-align: center; width: 52px; }
.sekii-summe-col   { background: #e8ecf3; font-weight: bold; text-align: center; width: 38px; }
/* Keine Trennlinie innerhalb eines Fachs (Sek II) */
.sekii-stunden   { border-right:  none !important; border-bottom: none !important; }
.sekii-kursart   { border-left:   none !important; border-bottom: none !important; }
.sekii-lehrer    { border-top:    none !important; }
/* Fach-Trennlinie dicker (Sek II) */
#tbl-sekII tbody .sekii-label-col { border-bottom: 2px solid #555 !important; }
#tbl-sekII tbody .sekii-summe-col { border-bottom: 2px solid #555 !important; }
#tbl-sekII .sekii-row-lehrer td   { border-bottom: 2px solid #555 !important; }
.sekii-summe-row td { background: #e8ecf3; font-weight: bold; text-align: center; pointer-events: none; user-select: none; }

/* ===== Dialog ===== */
.dialog-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.4);
  display: flex; align-items: center; justify-content: center;
  z-index: 500;
}
.dialog {
  background: #fff; border-radius: 8px;
  padding: 24px 28px;
  min-width: 400px; max-width: 90vw;
  max-height: 80vh; overflow-y: auto;
  box-shadow: 0 8px 32px rgba(0,0,0,.2);
}
.dialog h3 { margin-bottom: 16px; color: #1a3c6b; }
.dialog-footer { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
.dialog label:has(input[type=radio]) { padding: 6px 8px; border-radius: 4px; transition: background .15s; }
.dialog label:has(input[type=radio]):hover { background: #f0f4fb; }
.dialog label:has(input[type=radio]:checked) { background: #e3ecff; }

/* ===== Benachrichtigung ===== */
#toast {
  position: fixed; bottom: 24px; right: 24px;
  background: #1a3c6b; color: #fff;
  padding: 10px 20px; border-radius: 6px;
  font-size: 13px; z-index: 2000;
  opacity: 0; transition: opacity .3s;
  pointer-events: none;
}
#toast.show { opacity: 1; }

/* ===== Sortiermodus ===== */
button.active-sort { background: #255090; outline: 2px solid #aac4f0; }
tr.drag-over td, tr.drag-over th { background: #d0e4ff !important; }
tr.drag-src { opacity: 0.4; }

/* ===== Lehrkräfte Layout ===== */
.lk-layout  { display: flex; gap: 16px; align-items: flex-start; }

.wunsch-dialog {
  position: fixed;
  top: 80px;
  left: 60px;
  z-index: 500;
  background: #fff;
  border: 1px solid #aaa;
  border-radius: 6px;
  box-shadow: 0 4px 18px rgba(0,0,0,0.18);
  min-width: 280px;
  max-width: 45vw;
}
.wunsch-dialog.hidden { display: none; }
.wunsch-dialog-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #1a3c6b;
  color: #fff;
  padding: 7px 12px;
  border-radius: 5px 5px 0 0;
  cursor: grab;
  user-select: none;
  font-weight: bold;
  font-size: 13px;
}
.wunsch-dialog-header button {
  background: none;
  border: none;
  color: #fff;
  font-size: 18px;
  line-height: 1;
  padding: 0 2px;
  cursor: pointer;
  opacity: 0.8;
}
.wunsch-dialog-header button:hover { opacity: 1; }
#wunsch-dialog-tabs button {
  font-size: 11px !important;
  padding: 2px 8px !important;
  border: 1px solid rgba(255,255,255,0.5) !important;
  border-radius: 3px !important;
  opacity: 0.7 !important;
}
#wunsch-dialog-tabs button:hover { background: rgba(255,255,255,0.15) !important; opacity: 1 !important; }
#wunsch-dialog-tabs button.active {
  background: rgba(255,255,255,0.25) !important;
  border-color: #fff !important;
  opacity: 1 !important;
  font-weight: bold !important;
}
.wunsch-dialog-body {
  padding: 12px;
  font-size: 12px;
  overflow-x: auto;
}
.wunsch-dialog-body .lk-detail-table { min-width: 100%; }
.wunsch-dialog-body .lk-detail-table th,
.wunsch-dialog-body .lk-detail-table td { min-width: 52px; white-space: nowrap; }
.lk-left    { min-width: 0; flex-shrink: 1; }
#tab-lehrkraefte .table-scroll { max-width: calc(100vw - 360px); overflow-x: auto; }
.lk-controls { display: flex; align-items: center; gap: 8px; padding: 6px 0 8px 0; flex-wrap: wrap; }

.lk-detail  { width: 300px; min-width: 220px; flex-shrink: 0; border: 1px solid #ddd;
              border-radius: 6px; padding: 12px; background: #fafafa;
              position: sticky; top: 90px; align-self: flex-start; }
.lk-detail-hint  { color: #999; font-size: 13px; margin: 0; }
.lk-detail-title { margin: 0 0 10px 0; font-size: 16px; }
.lk-detail-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.lk-detail-table th, .lk-detail-table td { border: 1px solid #ddd; padding: 3px 6px; text-align: left; }
.lk-detail-table th { background: #e8ecf3; font-weight: bold; }
.lk-detail-sum td       { background: #e8ecf3; font-weight: bold; }
.lk-detail-ok td        { background: #d4edda; font-weight: bold; color: #155724; }
.lk-detail-warning td   { background: #fff3cd; font-weight: bold; color: #856404; }
.lk-detail-over td      { background: #f8d7da; font-weight: bold; color: #721c24; }
tr.lk-selected td   { background: #d6e8ff !important; }

/* ===== Klassenbuch ===== */
.kb-class-selector { display: flex; flex-wrap: wrap; gap: 4px; padding: 8px 0 12px; }
.kb-class-btn { padding: 4px 12px; border: 1px solid #aab; border-radius: 4px;
                background: #f0f2f6; color: #333; cursor: pointer; font-size: 13px; font-weight: bold; }
.kb-class-btn:hover  { background: #dde3ef; }
.kb-class-btn.active { background: #1a3c6b; color: #ffffff; border-color: #1a3c6b; }

.kb-tables-wrap { display: flex; flex-direction: column; gap: 24px; }
.kb-class-block h4 { margin: 0 0 6px; font-size: 13px; color: #1a3c6b; }

.kb-table { border-collapse: collapse; font-size: 12px; white-space: nowrap; }
.kb-table th, .kb-table td { border: 1px solid #ccc; padding: 3px 8px; }
.kb-table th { background: #e8ecf3; text-align: center; font-size: 11px; }
.kb-fach-col { font-weight: bold; background: #e8ecf3 !important; min-width: 50px; }
.kb-col-abschnitt { background: #d6e8ff !important; }
.kb-cell-abschnitt { }
.print-heading { display: none; }

/* ===== Änderungsmarkierung ===== */
.cell-changed { outline: 2px solid #c0392b !important; outline-offset: -2px; }
#btn-changes.active { background: #c0392b; color: #fff; }

/* ===== Schreibschutz ===== */
body.readonly th input,
body.readonly td input { pointer-events: none; }
body.readonly .toolbar button:not(#btn-print-sekI):not(#btn-print-sekII) { opacity: .4; pointer-events: none; }
body.readonly #btn-save, body.readonly #btn-release { display: none !important; }

/* ===== Drucklayout ===== */
@media print {
  @page { size: A4 landscape; margin: 0.7cm; }

  body { background: #fff; }

  #wunsch-dialog { display: none !important; }
  input.cell-nav-focus { outline: none !important; }

  header, nav.tab-bar, .toolbar, #login-overlay, #lock-overlay,
  .no-print, #btn-save, #btn-release, .dialog-overlay,
  .header-abschnitt { display: none !important; }

  main { padding: 0; }

  /* Tab-Sichtbarkeit wird per JavaScript gesteuert (.hidden / .active Klassen) */

  .table-scroll { overflow: visible; }

  table {
    table-layout: auto !important;
    width: 100% !important;
    font-size: 9pt !important;
    white-space: normal !important;
    border-collapse: collapse !important;
  }

  th, td {
    padding: 1px 2px !important;
    /* Kein !important auf border — Inline-Styles (leftBorder) sollen greifen */
    border: 1px solid #bbb;
    position: static !important;
    overflow: visible !important;
    word-break: break-word;
    vertical-align: middle;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
  }

  /* Fach-Trennlinien im Druck: Label-Spalte + Datenzeilen */
  #tbl-sekI  tbody .seki-label-col,
  #tbl-sekI  .seki-row-lehrer  td { border-bottom: 2px solid #555 !important; }
  #tbl-sekII tbody .sekii-label-col,
  #tbl-sekII .sekii-row-lehrer td  { border-bottom: 2px solid #555 !important; }

  /* Sek I: Spaltenbreiten beschränken */
  #tbl-sekI .seki-stunden   { width: 18px !important; min-width: 18px !important; max-width: 18px !important; }
  #tbl-sekI .seki-bemerkung { width: 30px !important; min-width: 30px !important; max-width: 30px !important; }
  #tbl-sekI .seki-lehrer    { width: 36px !important; min-width: 36px !important; max-width: 36px !important; }

  /* Sek II: Stunden schmal, Kursart breiter */
  #tbl-sekII .sekii-stunden { width: 18px !important; min-width: 18px !important; }
  #tbl-sekII .sekii-kursart { width: 36px !important; min-width: 36px !important; }
  #tbl-sekII .sekii-kursart input { width: 100% !important; min-width: 0 !important; box-sizing: border-box !important; }
  #tbl-sekII .sekii-lehrer  { width: 44px !important; min-width: 44px !important; }
  #tbl-sekII .sekii-kurs-header { width: 44px !important; }

  /* Inputs: Breite über ch-Einheiten begrenzen, damit Spalten schmal bleiben */
  input[type="text"],
  input[type="number"] {
    font-size: inherit !important;
    font-family: inherit !important;
    color: inherit !important;
    font-weight: inherit !important;
    background: transparent !important;
    border: none !important;
    min-width: 0 !important;
    display: inline-block !important;
  }

  /* Spaltenbreiten über Input-Breite steuern */
  .seki-stunden    input { width: 2ch !important; }
  .seki-bemerkung  input { width: 4ch !important; }
  .seki-lehrer     input { width: 5ch !important; }
  .seki-header-kl  input { width: 5ch !important; }
  .seki-meta       input { width: 5ch !important; }
  .seki-label-col  input { width: 7ch !important; }

  .sekii-kursart   input { width: 3ch !important; }
  .sekii-stunden   input { width: 2ch !important; }
  .sekii-lehrer    input { width: 5ch !important; }
  .sekii-label-col input { width: 7ch !important; }
  .sekii-kurs-header input { width: 4ch !important; }

  /* Löschen-Buttons, Farbwähler, Checkboxen und Korrektur-Zeile nicht drucken */
  td button, th button, input[type="color"], input[type="checkbox"] { display: none !important; }
  .seki-korr-row { display: none !important; }

  /* Leerseite verhindern */
  body { min-height: 0 !important; }
  .tab-content { display: none !important; }
  .tab-content.active { display: block !important; height: auto !important; overflow: visible !important; }

  /* Drucküberschrift */
  .print-heading { display: block !important; font-size: 14pt; font-weight: bold; margin-bottom: 6px; }
  .print-heading-date { font-size: 10pt; font-weight: normal; float: right; }

  /* Klassennamen im Sek-I-Header schwarz */
  #tbl-sekI .seki-header-kl { color: #000 !important; }

  /* Farben beibehalten */
  th:not(.seki-header-kl):not(.seki-meta) { background: #dde3ef !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  #tbl-sekI .seki-header-kl,
  #tbl-sekI .seki-meta { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .sekii-jahrgang { background: #1a3c6b !important; color: #000 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  [style*="background"] { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .seki-empty { background: #fff !important; }
  .col-warning, .col-ok, .col-over { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* ========================================================================== 
   Webspace-/SQLite-Layout nach dem Muster der Stundenplan-Analyse
   ========================================================================== */
:root {
  --uv-bg: #F6F3EE;
  --uv-surface: #FFFFFF;
  --uv-surface-2: #FAF8F4;
  --uv-text: #010D6E;
  --uv-muted: #66708B;
  --uv-line: #DDDDE5;
  --uv-primary: #010D6E;
  --uv-primary-2: #00084F;
  --uv-accent: #00B2FE;
  --uv-danger: #D4004B;
  --uv-good: #277a4b;
  --uv-shadow: 0 8px 28px rgba(1, 13, 110, .08);
  --uv-radius: 16px;
  --uv-sidebar: 248px;
}

html, body {
  background: var(--uv-bg);
  color: var(--uv-text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
body { font-size: 13px; }

.app-shell { min-height: 100vh; }
.sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  width: var(--uv-sidebar);
  padding: 22px 18px;
  background: var(--uv-primary);
  color: #fff;
  display: flex;
  flex-direction: column;
  z-index: 220;
}
.brand { display: flex; align-items: center; gap: 12px; padding: 4px 4px 22px; }
.brand strong { display: block; font-size: 18px; }
.brand span { display: block; color: #BFD8F2; font-size: 13px; margin-top: 2px; }
.brand-mark {
  width: 42px; height: 42px; border-radius: 12px;
  display: grid; place-items: center;
  background: var(--uv-accent); color: var(--uv-primary);
  font-weight: 900; letter-spacing: .05em;
}

.tab-bar.nav {
  position: static;
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 0;
  border: 0;
  background: transparent;
}
.tab-bar.nav .tab-btn {
  width: 100%;
  margin: 0;
  padding: 11px 12px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: #E3EDFA;
  text-align: left;
  font-size: 14px;
  font-weight: 650;
}
.tab-bar.nav .tab-btn:hover { background: rgba(255,255,255,.11); color: #fff; }
.tab-bar.nav .tab-btn.active {
  background: var(--uv-accent);
  color: var(--uv-primary);
  border: 0;
  font-weight: 800;
}

.sidebar-user { margin-top: auto; padding: 16px 10px 4px; border-top: 1px solid rgba(255,255,255,.2); }
.sidebar-user strong, .sidebar-user small { display: block; }
.sidebar-user small { margin: 4px 0 12px; color: #BFD8F2; }
.sidebar-meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.sidebar-meta #lock-info { color: #BFD8F2; font-size: 11px; }
.sidebar-version {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 4px 7px; border: 1px solid rgba(255,255,255,.28); border-radius: 999px;
  color: #BFD8F2; font-size: 9px; font-weight: 800; letter-spacing: .04em; white-space: nowrap;
}

.main-shell { margin-left: var(--uv-sidebar); min-width: 0; }
header.topbar {
  position: relative;
  top: auto;
  z-index: 120;
  min-height: 84px;
  padding: 14px 30px;
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto auto;
  gap: 18px;
  align-items: center;
  background: var(--uv-bg);
  color: var(--uv-text);
  border-bottom: 1px solid transparent;
}
.topbar-title-wrap { display: flex; align-items: center; min-width: 0; }
.topbar h1 { margin: 2px 0 0; color: var(--uv-primary); font-size: 28px; line-height: 1.05; letter-spacing: -.02em; }
.eyebrow { text-transform: uppercase; letter-spacing: .08em; color: var(--uv-muted); font-weight: 800; font-size: 10px; }
.menu-toggle { display: none; border: 0; background: transparent; color: var(--uv-primary); font-size: 24px; padding: 4px 8px; margin-right: 10px; }

.header-abschnitt, .header-status { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
#sel-abschnitt {
  min-width: 150px; max-width: 230px;
  padding: 8px 10px;
  border-radius: 9px;
  border: 1px solid #cfd8df;
  background: #fff;
  color: var(--uv-primary);
  font-size: 13px;
  font-weight: 800;
}
#sel-abschnitt:focus { outline: none; border-color: var(--uv-accent); box-shadow: 0 0 0 3px rgba(0,178,254,.15); }

button {
  border-radius: 9px;
  border: 1px solid var(--uv-primary);
  background: var(--uv-primary);
  color: #fff;
  font-family: inherit;
  font-weight: 800;
  transition: background .15s, border-color .15s, transform .05s;
}
button:hover { background: var(--uv-primary-2); border-color: var(--uv-primary-2); }
button:active { transform: translateY(1px); }
button.secondary { background: var(--uv-surface); color: var(--uv-text); border-color: var(--uv-line); }
button.secondary:hover { background: var(--uv-surface-2); border-color: #c9cad5; }
button.danger { background: var(--uv-surface); color: var(--uv-danger); border-color: rgba(212,0,75,.32); }
button.danger:hover { background: rgba(212,0,75,.06); color: var(--uv-danger); }
button.small { padding: 7px 11px; font-size: 12px; }
button.active, button.active-sort { box-shadow: inset 0 0 0 2px var(--uv-accent); }

.main { padding: 0 30px 40px; }
.panel {
  background: var(--uv-surface);
  border: 1px solid var(--uv-line);
  border-radius: var(--uv-radius);
  padding: 22px;
  box-shadow: var(--uv-shadow);
  margin-bottom: 22px;
  min-width: 0;
}
.panel h2 { margin: 0 0 4px; color: var(--uv-primary); font-size: 19px; }
.panel p { margin: 0; color: var(--uv-muted); line-height: 1.45; }
.panel-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 18px; margin-bottom: 18px; }
.page-actions { margin: 0; justify-content: flex-end; flex-wrap: wrap; }
.toolbar { flex-wrap: wrap; }

.table-scroll {
  overflow: auto;
  border: 1px solid var(--uv-line);
  border-radius: 12px;
  background: var(--uv-surface);
}
table { background: var(--uv-surface); }
th, td { border-color: var(--uv-line); }
th { background: var(--uv-bg); color: var(--uv-primary); }
th input:focus, td input:focus { outline: 2px solid var(--uv-accent); background: #fff; }

#tbl-lehrkraefte th:first-child,
#tbl-sekI th:first-child,
#tbl-sekII th:first-child,
#tbl-sonstiges thead th,
.seki-summe-row td,
.seki-summe-col { background: var(--uv-bg); }
#tbl-lehrkraefte td:first-child,
#tbl-sekI td:first-child,
#tbl-sekII td:first-child,
#tbl-sonstiges td[rowspan] { background: var(--uv-surface-2); }

.lk-detail {
  border-color: var(--uv-line);
  background: var(--uv-surface-2);
  border-radius: 12px;
}
.lk-controls, .kb-class-selector { margin-bottom: 12px; }
.korr-config { padding: 18px 0 0; max-width: 900px; }
.online-erhebung {
  margin: 24px 0 0;
  padding: 18px 20px;
  background: var(--uv-surface-2);
  border: 1px solid var(--uv-line);
  border-radius: 12px;
  max-width: 900px;
}

.wuensche-subtabs {
  display: flex;
  gap: 6px;
  border-bottom: 1px solid var(--uv-line);
  margin-bottom: 14px;
}
.wuensche-subtab {
  padding: 8px 13px;
  border: 0;
  border-bottom: 3px solid transparent;
  border-radius: 8px 8px 0 0;
  background: transparent;
  color: var(--uv-muted);
}
.wuensche-subtab:hover { background: var(--uv-surface-2); color: var(--uv-primary); border-color: transparent; }
.wuensche-subtab.active { background: transparent; color: var(--uv-primary); border-bottom-color: var(--uv-accent); box-shadow: none; }

.lock-box {
  border-radius: 16px;
  border: 1px solid var(--uv-line);
  box-shadow: 0 24px 70px rgba(1,13,110,.22);
  color: var(--uv-text);
}
.lock-box h2 { color: var(--uv-primary); margin: 4px 0 12px; }
.lock-box p { color: var(--uv-muted); }

.dialog-overlay { background: rgba(1,13,110,.34); backdrop-filter: blur(2px); }
.dialog {
  border-radius: 16px;
  border: 1px solid var(--uv-line);
  box-shadow: 0 24px 70px rgba(1,13,110,.18);
  color: var(--uv-text);
}
.dialog h3 { color: var(--uv-primary); margin: 4px 0 16px; }
.dialog-medium { max-width: 540px; }
.dialog-copy { color: var(--uv-muted); margin-bottom: 14px; font-size: 12px; line-height: 1.5; }
.dialog-choice-list, .check-list { display: grid; gap: 9px; margin-bottom: 16px; }
.dialog-choice {
  display: grid; grid-template-columns: auto 1fr; gap: 9px; align-items: start;
  padding: 10px 11px; border: 1px solid var(--uv-line); border-radius: 10px; background: var(--uv-surface-2); cursor: pointer;
}
.dialog-choice input { margin-top: 3px; }
.dialog-choice strong, .dialog-choice small { display: block; }
.dialog-choice small { margin-top: 3px; color: var(--uv-muted); font-size: 11px; line-height: 1.4; }
.check-list label { display: flex; gap: 8px; align-items: center; }
.field-label { font-weight: 800; display: block; margin-bottom: 6px; }
.dialog-input {
  width: 100%; padding: 9px 10px; border: 1px solid #cfd8df; border-radius: 9px; font-size: 13px; margin-bottom: 16px;
}
.dialog-input:focus { outline: none; border-color: var(--uv-accent); box-shadow: 0 0 0 3px rgba(0,178,254,.15); }
.code-sample {
  background: var(--uv-bg); border: 1px solid var(--uv-line); border-radius: 9px; padding: 12px;
  font-size: 10px; overflow-x: auto; line-height: 1.5; margin: 0 0 12px;
}
.hint-inline { color: var(--uv-muted); font-size: 12px; }

.nav-backdrop { display: none; }

@media (max-width: 1180px) {
  header.topbar { grid-template-columns: 1fr; gap: 10px; }
  .header-abschnitt, .header-status { justify-content: flex-start; }
  .header-status { position: absolute; top: 16px; right: 30px; }
}

@media (max-width: 900px) {
  :root { --uv-sidebar: 248px; }
  .sidebar { transform: translateX(-100%); transition: transform .2s ease; box-shadow: 18px 0 42px rgba(1,13,110,.18); }
  body.nav-open .sidebar { transform: translateX(0); }
  .main-shell { margin-left: 0; }
  .menu-toggle { display: inline-flex; }
  .nav-backdrop {
    position: fixed; inset: 0; z-index: 210;
    background: rgba(1,13,110,.28);
  }
  body.nav-open .nav-backdrop { display: block; }
  header.topbar { padding: 14px 18px; }
  .main { padding: 0 18px 30px; }
  .header-status { right: 18px; }
  .panel-head.responsive { flex-direction: column; }
  .page-actions { justify-content: flex-start; }
}

@media (max-width: 680px) {
  header.topbar { padding-top: 12px; }
  .topbar h1 { font-size: 22px; }
  .header-status { position: static; }
  .header-abschnitt, .header-status { width: 100%; }
  #sel-abschnitt { flex: 1 1 180px; max-width: none; }
  .main { padding: 0 10px 22px; }
  .panel { padding: 14px; border-radius: 12px; }
  .panel-head { margin-bottom: 12px; }
  .toolbar { gap: 6px; }
  button.small { padding: 7px 9px; }
  .lk-layout { grid-template-columns: 1fr; }
  .online-erhebung { padding: 14px; }
}

@media print {
  .sidebar, .topbar, .nav-backdrop { display: none !important; }
  .main-shell { margin-left: 0 !important; }
  .main { padding: 0 !important; }
  .panel { border: 0 !important; box-shadow: none !important; padding: 0 !important; }
  .table-scroll { border: 0 !important; border-radius: 0 !important; overflow: visible !important; }
}

/* Online-Erhebung: Inline-Altstyles optisch in das neue Layout ziehen. */
#online-erhebung h3 { color: var(--uv-primary) !important; border-bottom-color: var(--uv-accent) !important; }
#online-erhebung input[type="text"],
#online-erhebung input[type="number"] {
  border: 1px solid #cfd8df !important;
  border-radius: 9px !important;
  padding: 8px 9px !important;
  background: #fff !important;
  color: var(--uv-text) !important;
}
#online-erhebung input:focus { outline: none !important; border-color: var(--uv-accent) !important; box-shadow: 0 0 0 3px rgba(0,178,254,.13); }

/* ===== Anmeldung / Benutzerzugang ===== */
.auth-page {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 28px 16px;
  background: var(--uv-bg);
}
.auth-card {
  width: min(460px, 100%);
  background: var(--uv-surface);
  border: 1px solid var(--uv-line);
  border-radius: 20px;
  padding: 30px;
  box-shadow: 0 24px 70px rgba(1,13,110,.12);
}
.auth-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 28px; }
.auth-brand strong { display: block; color: var(--uv-primary); font-size: 20px; }
.auth-brand small { display: block; margin-top: 2px; color: var(--uv-muted); }
.auth-card h1 { margin: 5px 0 8px; color: var(--uv-primary); font-size: 26px; }
.auth-card > p { margin: 0 0 20px; color: var(--uv-muted); line-height: 1.55; }
.auth-form { display: grid; gap: 14px; margin-top: 18px; }
.auth-form label { display: grid; gap: 6px; color: var(--uv-primary); font-weight: 800; }
.auth-form label small { color: var(--uv-muted); font-weight: 500; }
.auth-form input, .settings-form input, .settings-form select, .settings-form textarea,
.protocol-compare select {
  width: 100%;
  padding: 10px 11px;
  border: 1px solid #cfd8df;
  border-radius: 9px;
  background: #fff;
  color: var(--uv-text);
  font: inherit;
}
.auth-form input:focus, .settings-form input:focus, .settings-form select:focus, .settings-form textarea:focus,
.protocol-compare select:focus {
  outline: none;
  border-color: var(--uv-accent);
  box-shadow: 0 0 0 3px rgba(0,178,254,.15);
}
.auth-form button { margin-top: 4px; padding: 10px 14px; }
.auth-links { margin-top: 18px; text-align: center; }
.auth-links a, .sidebar-account a { color: var(--uv-accent); font-weight: 750; text-decoration: none; }
.auth-links a:hover, .sidebar-account a:hover { text-decoration: underline; }
.auth-footer { margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--uv-line); color: var(--uv-muted); font-size: 11px; text-align: center; }
.auth-message { margin: 16px 0; padding: 11px 12px; border-radius: 10px; line-height: 1.45; }
.auth-message.error { background: rgba(212,0,75,.07); border: 1px solid rgba(212,0,75,.2); color: #9a0038; }
.auth-message.success { background: rgba(39,122,75,.08); border: 1px solid rgba(39,122,75,.22); color: #1e623b; }

/* ===== Benutzer, Speicherstatus, Einstellungen und Protokoll ===== */
.sidebar-account { margin-top: auto; padding: 14px 10px 12px; border-top: 1px solid rgba(255,255,255,.2); }
.sidebar-account strong { display: block; color: #fff; font-size: 13px; }
.sidebar-account small { display: block; margin-top: 3px; color: #BFD8F2; }
.sidebar-account .account-links { display: flex; gap: 10px; margin-top: 8px; font-size: 11px; }
.sidebar-user { margin-top: 0; }
.sidebar-meta #save-status { color: #BFD8F2; font-size: 11px; line-height: 1.25; }
.sidebar-meta #save-status.status-error { color: #ffb2ca; }
.sidebar-meta #save-status.status-saving { color: #fff; }
.sidebar-meta #save-status.status-saved { color: #BFD8F2; }
.nav-separator { height: 1px; margin: 8px 8px; background: rgba(255,255,255,.16); }
.role-badge, .status-badge {
  display: inline-flex; align-items: center; padding: 3px 7px; border-radius: 999px;
  background: var(--uv-bg); border: 1px solid var(--uv-line); color: var(--uv-primary); font-size: 10px; font-weight: 800;
}
.settings-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.settings-card { border: 1px solid var(--uv-line); border-radius: 12px; padding: 16px; background: var(--uv-surface-2); }
.settings-card h3 { margin: 0 0 6px; color: var(--uv-primary); }
.settings-card > p { margin-bottom: 14px; }
.settings-form { display: grid; gap: 12px; }
.settings-form label { display: grid; gap: 5px; font-weight: 750; color: var(--uv-primary); }
.settings-form textarea { min-height: 80px; resize: vertical; }
.settings-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.section-manager-list { display: grid; gap: 7px; margin-top: 12px; }
.section-manager-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 10px; border: 1px solid var(--uv-line); border-radius: 9px; background: #fff; }
.section-manager-row.active { border-color: var(--uv-accent); box-shadow: inset 3px 0 0 var(--uv-accent); }
.section-manager-row small { color: var(--uv-muted); }
.user-table { width: 100%; table-layout: auto; white-space: normal; }
.user-table th, .user-table td { padding: 7px 8px; font-size: 11px; }
.user-edit-grid { display: grid; grid-template-columns: 1fr 1.2fr .7fr .7fr 1fr auto; gap: 6px; align-items: center; }
.user-edit-grid input, .user-edit-grid select { min-width: 0; padding: 7px 8px; border: 1px solid var(--uv-line); border-radius: 7px; }
.protocol-toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: end; margin-bottom: 14px; }
.protocol-compare { display: grid; grid-template-columns: minmax(160px, 1fr) auto minmax(160px, 1fr) auto; gap: 8px; align-items: end; width: 100%; }
.protocol-compare label { display: grid; gap: 5px; font-weight: 750; }
.audit-list { display: grid; gap: 9px; }
.audit-meta { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 5px; color: var(--uv-muted); font-size: 10px; }
.change-list { margin: 9px 0 0; padding: 0; list-style: none; display: grid; gap: 5px; }
.change-list li { padding: 7px 8px; background: #fff; border: 1px solid var(--uv-line); border-radius: 8px; line-height: 1.4; overflow-wrap: anywhere; }
.change-value { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 10px; color: #334; }
.audit-actions { display: flex; gap: 7px; margin-top: 9px; }
.status-explanation { margin-top: 10px !important; padding: 10px 11px; border-left: 3px solid var(--uv-accent); background: rgba(0,178,254,.06); }

@media (max-width: 900px) {
  .settings-grid { grid-template-columns: 1fr; }
  .protocol-compare { grid-template-columns: 1fr; }
  .user-edit-grid { grid-template-columns: 1fr; }
}

/* ===== v0.2.0: zeitbasiertes Änderungsjournal ===== */
.save-status-wrap { display: grid; gap: 1px; min-width: 0; }
.save-status-label { color: #fff; font-size: 9px; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.sidebar-meta .save-status-wrap #save-status { display: block; }
.settings-card-wide { grid-column: 1 / -1; }
.protocol-compare input,
.protocol-filter input,
.user-form-grid input,
.user-form-grid select {
  width: 100%; min-width: 0; padding: 9px 10px; border: 1px solid #cfd8df; border-radius: 9px;
  background: #fff; color: var(--uv-text); font: inherit;
}
.protocol-compare input:focus,
.protocol-filter input:focus,
.user-form-grid input:focus,
.user-form-grid select:focus {
  outline: none; border-color: var(--uv-accent); box-shadow: 0 0 0 3px rgba(0,178,254,.15);
}
.protocol-compare-dates { grid-template-columns: minmax(220px, 1fr) auto minmax(220px, 1fr) auto; }
.protocol-filter { display: flex; flex-wrap: wrap; align-items: end; gap: 9px; margin: 12px 0 14px; }
.protocol-filter label { display: grid; gap: 5px; min-width: 210px; font-weight: 750; color: var(--uv-primary); }
.change-list-wrap { margin-top: 12px; }
.change-list { display: grid; gap: 7px; margin-top: 8px; }
.change-row { display: grid; gap: 5px; padding: 9px 10px; border: 1px solid var(--uv-line); border-radius: 9px; background: #fff; overflow-wrap: anywhere; }
.change-label { color: var(--uv-primary); font-size: 11px; }
.change-values { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 8px; align-items: start; font: 10px/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.change-before, .change-after { padding: 5px 7px; border-radius: 7px; background: var(--uv-surface-2); white-space: pre-wrap; }
.change-arrow { padding-top: 5px; color: var(--uv-muted); }
.change-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; margin-top: 2px; }
.empty-state { margin: 8px 0; color: var(--uv-muted); }
.audit-entry { border: 1px solid var(--uv-line); border-radius: 11px; padding: 12px 13px; background: #fff; }
.audit-entry-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.audit-entry-title { display: grid; gap: 3px; min-width: 0; }
.audit-entry-title strong { color: var(--uv-primary); }
.audit-entry-title small { color: var(--uv-muted); line-height: 1.4; }
.audit-badges { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 5px; }
.audit-badge { display: inline-flex; align-items: center; padding: 3px 7px; border: 1px solid rgba(0,178,254,.25); border-radius: 999px; background: rgba(0,178,254,.07); color: var(--uv-primary); font-size: 9px; font-weight: 850; white-space: nowrap; }
.audit-badge-muted { border-color: var(--uv-line); background: var(--uv-surface-2); color: var(--uv-muted); }
.audit-entry details { margin-top: 9px; }
.audit-entry summary { cursor: pointer; color: var(--uv-primary); font-size: 11px; font-weight: 800; }
.audit-entry-actions { display: flex; justify-content: flex-end; margin-top: 10px; }
.audit-pagination { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-top: 12px; color: var(--uv-muted); }
.section-manager-row { width: 100%; text-align: left; cursor: pointer; }
.section-manager-text { display: grid; gap: 2px; }
.user-create-box { padding: 12px; margin-bottom: 12px; border: 1px dashed var(--uv-line); border-radius: 10px; background: #fff; }
.user-create-box h4 { margin: 0 0 9px; color: var(--uv-primary); }
.user-form-grid { display: grid; grid-template-columns: 1fr 1.35fr .8fr 1.15fr; gap: 7px; margin-bottom: 8px; }
.user-list { display: grid; gap: 9px; }
.user-row { padding: 11px; border: 1px solid var(--uv-line); border-radius: 10px; background: #fff; }
.user-row-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 5px 0 8px; color: var(--uv-muted); }
.user-row-meta label { display: inline-flex; align-items: center; gap: 5px; font-weight: 750; color: var(--uv-primary); }

@media (max-width: 1100px) {
  .protocol-compare-dates { grid-template-columns: 1fr; }
  .protocol-compare-dates > span { display: none; }
  .user-form-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 620px) {
  .user-form-grid { grid-template-columns: 1fr; }
  .protocol-filter { display: grid; grid-template-columns: 1fr; }
  .protocol-filter label { min-width: 0; }
  .change-values { grid-template-columns: 1fr; }
  .change-arrow { padding: 0; transform: rotate(90deg); justify-self: center; }
  .audit-entry-head { display: grid; }
  .audit-badges { justify-content: flex-start; }
}

/* ===== v0.3.0: Untis-Lehrkräfteimport (GPU004.TXT) ===== */
.dialog-lk-import { width: min(1080px, 94vw); max-width: 1080px; }
.import-fileinfo {
  margin: 0 0 10px; padding: 9px 11px; border: 1px solid var(--uv-line); border-radius: 9px;
  background: var(--uv-surface-2); color: var(--uv-primary); font-size: 11px; font-weight: 800;
}
.import-summary { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 12px; }
.import-summary-badge {
  display: inline-flex; gap: 4px; align-items: baseline; padding: 5px 8px; border: 1px solid rgba(0,178,254,.24);
  border-radius: 999px; background: rgba(0,178,254,.07); color: var(--uv-primary); font-size: 10px;
}
.import-summary-badge strong { font-size: 12px; }
.import-options {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px 14px; margin-bottom: 12px;
  padding: 12px; border: 1px solid var(--uv-line); border-radius: 10px; background: #fff;
}
.import-options label { display: flex; align-items: flex-start; gap: 7px; color: var(--uv-primary); font-size: 11px; line-height: 1.4; }
.import-options input { margin-top: 2px; }
.import-option-warning { color: #8b4c00 !important; }
.import-mapping-note {
  margin-bottom: 12px; padding: 10px 11px; border-left: 3px solid var(--uv-accent); border-radius: 0 8px 8px 0;
  background: rgba(0,178,254,.06); color: var(--uv-muted); font-size: 10px; line-height: 1.5;
}
.import-mapping-note strong { color: var(--uv-primary); }
.import-preview-scroll { max-height: 320px; border: 1px solid var(--uv-line); border-radius: 10px; }
.import-preview-table { width: 100%; min-width: 850px; }
.import-preview-table th, .import-preview-table td { padding: 6px 8px; font-size: 10px; white-space: nowrap; }
.import-preview-table td:nth-child(3), .import-preview-table td:nth-child(6) { white-space: normal; }
.import-row-filtered, .import-row-skipped { opacity: .55; }
.import-row-duplicate, .import-row-invalid { background: rgba(212,0,75,.05); }
.lk-person-meta {
  display: grid; gap: 4px; margin: -4px 0 12px; padding: 8px 9px; border: 1px solid var(--uv-line); border-radius: 8px;
  background: var(--uv-surface-2); color: var(--uv-muted); font-size: 10px; overflow-wrap: anywhere;
}
.lk-person-meta strong { color: var(--uv-primary); }

@media (max-width: 760px) {
  .dialog-lk-import { width: 94vw; min-width: 0; padding: 18px; }
  .import-options { grid-template-columns: 1fr; }
}