:root {
  --paper: #FBF8F2;
  --surface: #F2ECDD;
  --line: #DCD2B8;
  --ink: #24344D;
  --ink-soft: #5B6B82;
  --green: #4C6B54;
  --green-bg: #E4EAE0;
  --red: #A6472E;
}

* { box-sizing: border-box; }

/* Das hidden-Attribut wird sonst von jeder display-Regel ueberschrieben.
   Betrifft hier die Zeilen-Aktionen, die per display:flex gesetzt sind und
   im Bearbeiten-Modus trotzdem verschwinden sollen. */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-size: 15px;
}

h1, h3, h4 {
  font-family: 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;
  color: var(--ink);
  font-weight: 600;
  margin: 0 0 6px;
}
h1 { font-size: 26px; }
h3 { font-size: 17px; margin-top: 28px; }
h4 { font-size: 15px; margin-top: 20px; }

.subtitle { color: var(--ink-soft); margin: 0 0 24px; font-size: 14px; }
.muted { color: var(--ink-soft); font-size: 14px; }

.layout { display: flex; min-height: 100vh; }

.sidebar {
  width: 232px;
  flex-shrink: 0;
  border-right: 1px solid var(--line);
  padding: 22px 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.brand {
  font-family: 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;
  font-style: italic;
  font-size: 17px;
  font-weight: 600;
  padding: 0 10px;
  margin-bottom: 22px;
  line-height: 1.15;
}

.nav-item {
  display: block;
  padding: 9px 14px;
  border-radius: 6px;
  color: var(--ink-soft);
  text-decoration: none;
  font-size: 14px;
  font-family: 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;
}
.nav-item.indent { padding-left: 34px; }
.nav-item.active { background: var(--green-bg); color: var(--green); font-weight: 600; }
.nav-item:hover:not(.active) { background: var(--surface); }

.nav-divider { height: 1px; background: var(--line); margin: 14px 10px; }
.nav-section { padding: 0 14px; font-size: 13px; color: var(--ink-soft); margin-bottom: 4px; }

.content { flex: 1; padding: 28px 40px; overflow-x: auto; }

input[type="text"], input[type="password"], input[type="date"], select {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 6px;
  padding: 8px 10px;
  font-size: 14px;
  color: var(--ink);
  font-family: ui-sans-serif, system-ui;
  height: 38px;
  box-sizing: border-box;
  min-width: 0;
  max-width: 100%;
}

input[type="date"] {
  /* Safari auf dem iPhone gibt Datumsfeldern eine feste Eigenbreite, die
     width:100% ignoriert; dadurch laufen sie aus dem Layout. Mit
     appearance:none haelt sich das Feld an die Vorgabe. */
  -webkit-appearance: none;
  appearance: none;
}

select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%235B6B82' stroke-width='2'><path d='M6 8l4 4 4-4'/></svg>");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 12px;
  padding-right: 30px;
  cursor: pointer;
}

label { font-size: 12px; color: var(--ink-soft); display: block; margin-bottom: 5px; }

.btn-primary {
  border: none;
  background: var(--green);
  color: #fff;
  padding: 9px 16px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  font-family: ui-sans-serif, system-ui;
}
.btn-primary:hover { opacity: 0.9; }

.btn-icon {
  border: none;
  background: transparent;
  color: var(--red);
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  padding: 4px 8px;
}

/* Symbolknoepfe, die nichts zerstoeren. .btn-icon ist rot - das ist die
   Farbe fuers Loeschen und soll es auch bleiben, damit sich der eine
   gefaehrliche Knopf in der Zeile abhebt. */
.btn-icon-neutral { color: var(--ink-soft); }
.btn-icon-ok { color: var(--green); }

.card-form {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 20px;
  margin-bottom: 28px;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: end;
}
.card-form .field { display: flex; flex-direction: column; min-width: 160px; flex: 1; }
.card-form .field input, .card-form .field select { width: 100%; }
.card-form .field-date { min-width: 170px; flex: 0 0 180px; }
.filter-form { align-items: end; }
.filter-actions { display: flex; gap: 8px; align-items: center; }
.link-btn { text-decoration: none; display: inline-flex; align-items: center; }

.form-error {
  color: var(--red);
  font-size: 14px;
  margin: 10px 0 0;
}
.input-invalid {
  border-color: var(--red) !important;
  background: #FDF3F0 !important;
  color: var(--red) !important;
  font-weight: 600;
  box-shadow: 0 0 0 2px rgba(166, 71, 46, 0.15);
}
button:disabled {
  opacity: 1;
  background: #C9C9C2 !important;
  color: #6B6B63 !important;
  cursor: not-allowed;
}

.brand-block { padding: 0 10px; margin-bottom: 20px; }
.class-picker { margin-top: 8px; display: flex; gap: 6px; }
.class-picker select { width: 100%; font-size: 13px; padding: 6px 26px 6px 8px; height: 34px; }

.badge-default {
  background: var(--green-bg);
  color: var(--green);
  font-size: 11px;
  font-weight: 600;
  border-radius: 4px;
  padding: 2px 7px;
  margin-left: 6px;
  vertical-align: middle;
}

.trash-list { display: flex; flex-direction: column; gap: 12px; }
.trash-card {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 8px;
  padding: 14px 16px;
}
.trash-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  flex-wrap: wrap;
}
.trash-detail {
  margin: 10px 0 0;
  padding-left: 18px;
  font-size: 13px;
  color: var(--ink-soft);
}
.trash-detail li { margin-bottom: 3px; }
.trash-grades { margin-top: 8px; }
.trash-grades summary {
  cursor: pointer;
  font-size: 13px;
  color: var(--green);
}

kbd {
  font-family: ui-monospace, monospace;
  font-size: 0.85em;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 1px 5px;
}

.chart-box {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 10px;
  padding: 12px;
  margin-bottom: 20px;
  overflow-x: auto;
}
.chart { width: 100%; height: auto; display: block; }
.chart-title { margin-top: 24px; }
.chart-caption { margin: 0 0 6px; font-size: 14px; color: var(--ink-soft); }

.summary-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 22px;
}
.summary-item {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 16px;
  min-width: 140px;
  flex: 1;
}
.summary-label { display: block; font-size: 12px; color: var(--ink-soft); margin-bottom: 3px; }
.summary-value { font-size: 20px; font-weight: 600; }
.summary-value.small { font-size: 14px; font-weight: 400; }
.small { font-size: 12px; }

.add-form { display: flex; gap: 8px; margin-bottom: 18px; }
.add-form input[type="text"] { flex: 1; }
.add-form-competency select { max-width: 200px; }

table { width: 100%; border-collapse: collapse; font-size: 14px; }
thead tr { text-align: left; color: var(--ink-soft); font-weight: 400; }
th, td { padding: 9px 10px; }
th { font-size: 13px; font-weight: 400; }
tbody tr { border-top: 1px solid var(--line); }
.table-scroll { overflow-x: auto; }
/* Die Auswertungsmatrix soll sich an ihren Inhalt anpassen statt auf volle
   Breite zu ziehen. Sonst steht bei wenigen Faechern die Ueberschrift weit
   links und der Wert weit rechts, also nicht untereinander. */
.matrix { width: auto; min-width: 0; }
.matrix th, .matrix td { min-width: 90px; }
.matrix .name-col { width: 1px; white-space: nowrap; padding-right: 20px; }
.matrix th:not(.name-col) { text-align: center; }
.sticky-col { position: sticky; left: 0; background: var(--paper); }
.cell-center { text-align: center; }

.pill {
  display: inline-block;
  min-width: 34px;
  padding: 3px 8px;
  border-radius: 5px;
  color: #fff;
  font-weight: 600;
}
.list-row-actions { display: flex; align-items: center; gap: 14px; }

.error-banner {
  background: #FBEAE5;
  color: var(--red);
  border: 1px solid var(--red);
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 14px;
  margin-bottom: 16px;
}

.entries-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.weight-form { display: flex; align-items: center; gap: 6px; }
.weight-label { margin: 0; font-size: 12px; color: var(--ink-soft); }
.weight-input { width: 56px; text-align: center; }

.btn-secondary {
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink);
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 13px;
  cursor: pointer;
  font-family: ui-sans-serif, system-ui;
}
.btn-secondary:hover { background: var(--surface); }

.grade-table { margin-bottom: 8px; }
.grade-table th, .grade-table td { padding: 6px 10px; }
.grade-input { width: 70px; text-align: center; }

/* Kompaktere Zeilen bei der Erfassung, damit mehr Schueler auf einen Blick
   sichtbar sind, das Notizfeld bis zum rechten Rand. Etwas Luft zwischen den
   Spalten bleibt, sonst kleben Name, Note und Notiz aneinander. */
.grade-table-tight { width: 100%; }
.grade-table-tight th, .grade-table-tight td { padding: 4px 14px; }
.grade-table-tight th:first-child, .grade-table-tight td:first-child {
  width: 1px;
  white-space: nowrap;
  padding-left: 4px;
  padding-right: 22px;
}
.grade-table-tight .note-cell { width: 100%; padding-right: 4px; }
.grade-table-tight .note-input { width: 100%; height: 34px; }
.grade-table-tight .grade-input { height: 34px; width: 78px; }

/* Umbenennen direkt in der Liste: die Felder sehen im Normalzustand aus wie
   reiner Text und werden erst im Bearbeiten-Modus als Eingabefelder
   sichtbar. Dadurch bleibt die Liste ruhig, ohne dass die Felder beim
   Umschalten ihre Position aendern. */
.inline-input {
  border: 1px solid transparent !important;
  background: transparent !important;
  flex: 1;
  min-width: 0;
  max-width: 340px;
  padding-left: 0 !important;
  cursor: default;
  font-size: 14px;
}
.inline-input.editing {
  border-color: var(--line) !important;
  background: #fff !important;
  padding-left: 10px !important;
  cursor: text;
}
.inline-input:focus { outline: none; }
.inline-input.editing:focus { border-color: var(--green) !important; }



/* Sortierbare Spaltenkoepfe */
th.sortable { padding: 0; }
th.sortable a {
  display: block;
  padding: 8px 10px;
  color: var(--ink-soft);
  text-decoration: none;
  white-space: nowrap;
}
th.sortable a:hover { color: var(--ink); background: var(--surface); }
.sort-arrow { font-size: 9px; margin-left: 4px; color: var(--green); }

/* ---------- Mobile ---------- */
@media (max-width: 768px) {
  .layout { flex-direction: column; }

  .sidebar {
    width: 100%;
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-right: none;
    border-bottom: 1px solid var(--line);
    padding: 10px 10px;
    gap: 4px;
    align-items: center;
  }
  /* Die Marke fraesse sonst ein Drittel der Leiste, ohne Nutzen zu bringen.
     Der Klassen-Umschalter bleibt aber sichtbar, er wird gebraucht. */
  .brand { display: none; }
  .brand-block { padding: 0; margin: 0 8px 0 0; flex-shrink: 0; }
  .class-picker { margin: 0; }
  .class-picker select { width: auto; min-width: 130px; max-width: 170px; }
  .nav-divider { display: none; }
  .nav-section { flex-shrink: 0; padding: 0 8px; margin-bottom: 0; font-size: 12px; }
  .nav-item { white-space: nowrap; flex-shrink: 0; padding: 8px 12px; }
  .nav-item.indent { padding-left: 12px; }

  .content { padding: 20px 16px; }
  h1 { font-size: 22px; }

  .card-form, .filter-form {
    padding: 14px;
    gap: 10px;
  }
  /* Alle Felder inklusive der Datumsfelder auf volle Breite, damit das
     Datum nicht abgeschnitten wird und alles gleich aussieht wie bei
     Kompetenz. field-date hat auf dem Desktop eine feste Breite, die hier
     ausdruecklich ueberschrieben werden muss. */
  .card-form .field,
  .card-form .field-date {
    min-width: 100%;
    flex: 1 1 100% !important;
    width: 100%;
  }
  .card-form .field input,
  .card-form .field select,
  .card-form .field-date input {
    width: 100%;
    min-width: 0;
  }
  .filter-actions { width: 100%; }
  .filter-actions .btn-primary { flex: 1; justify-content: center; }

  /* Diese Formulare stehen normal nebeneinander und laufen sonst
     ueber den rechten Bildschirmrand hinaus. */
  .add-form, .add-form-competency {
    flex-wrap: wrap;
    gap: 10px;
  }
  .add-form input[type="text"],
  .add-form select,
  .add-form-competency select,
  .add-form-competency input[type="text"] {
    flex: 1 1 100%;
    min-width: 0;
    max-width: none;
    width: 100%;
  }
  /* Muss NACH der Regel oben stehen, sonst wird das schmale Gewichtsfeld
     von der 100%-Regel ueberschrieben und nimmt die volle Breite ein. */
  .add-form .weight-input,
  .add-form-competency input.weight-input {
    flex: 0 0 80px;
    width: 80px;
    max-width: 80px;
  }
  .add-form-competency button { flex: 1 1 auto; }
  .add-form button { flex: 1 1 100%; }

  input[type="text"], input[type="password"], input[type="date"], select, button {
    font-size: 16px; /* verhindert Auto-Zoom beim Fokussieren auf iOS */
  }

  .list-row-actions { flex-wrap: wrap; gap: 8px; }

  .entries-toolbar { gap: 10px; }

  /* Namen und Daten sollen nicht mitten im Wort umbrechen */
  td, th { white-space: nowrap; }
  .grade-table td:first-child { white-space: nowrap; }
  .grade-table td:last-child { white-space: normal; min-width: 140px; }

  /* Die Namensspalte in der Auswertung nimmt sonst unnoetig viel Platz
     weg. Sie soll nur so breit sein wie der laengste Name. */
  .matrix { min-width: 0; width: auto; }
  .matrix .name-col {
    width: 1px;
    white-space: nowrap;
    padding-right: 12px;
    font-size: 13px;
  }
  .matrix th, .matrix td { min-width: 0; }
  .matrix th:not(.name-col), .matrix td:not(.name-col) { padding: 8px 8px; }
  .matrix .pill { min-width: 30px; padding: 3px 7px; }

  /* Diagramme nicht auf Handybreite zusammenstauchen, sonst wird die
     Beschriftung unlesbar klein. Lieber im Kasten seitlich scrollen. */
  .chart-box { padding: 10px; }
  .chart { min-width: 480px; }

  .trash-head { flex-direction: column; align-items: stretch; }
  .trash-detail { padding-left: 16px; white-space: normal; }
  .trash-detail li { white-space: normal; }
}

.nowrap { white-space: nowrap; }

/* ---------- Anmeldung ---------- */
.login-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: var(--paper);
}
.login-box {
  width: 100%;
  max-width: 380px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 28px;
}
.login-brand {
  margin-bottom: 22px;
  padding: 0;
  font-size: 20px;
  text-align: center;
}
.login-box .field { margin-bottom: 14px; }
.login-box input { width: 100%; }
.login-btn { width: 100%; justify-content: center; display: block; text-align: center; }
.login-links { margin: 16px 0 0; font-size: 13px; text-align: center; color: var(--ink-soft); }

.ok-banner {
  background: var(--green-bg);
  color: var(--green);
  border: 1px solid var(--green);
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 14px;
  margin-bottom: 16px;
}
.btn-move {
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink-soft);
  border-radius: 5px;
  width: 28px;
  height: 28px;
  font-size: 11px;
  cursor: pointer;
  padding: 0;
}
.btn-move:hover:not(:disabled) { background: var(--surface); color: var(--ink); }
.btn-move:disabled { opacity: 0.3; cursor: default; background: #fff !important; color: var(--ink-soft) !important; }

/* Nachzuholen */
.missing-box { width: 18px; height: 18px; cursor: pointer; }
.resolve-form { display: flex; gap: 6px; align-items: center; }
.resolve-form .grade-input { width: 66px; }
.overdue { color: var(--red); font-weight: 600; }

.checkbox-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--ink);
  margin-bottom: 3px;
  cursor: pointer;
  min-height: 40px;
}
.checkbox-label input { width: 22px; height: 22px; }

/* Abmelden ist ein Formular, kein Link: ein GET-Logout liesse sich von
   fremden Seiten aus ausloesen. Der Knopf soll aber wie ein Link aussehen. */
.link-button {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: var(--ink-soft);
  cursor: pointer;
  text-align: left;
}
.link-button:hover { color: var(--ink); }
.logout-inline { display: inline; }
.logout-inline .link-button { color: var(--green); }

/* ==========================================================
   Mobile: Bedienbarkeit
   Tippflaechen unter etwa 44px sind auf dem Touchscreen schwer zu
   treffen (Richtwert aus WCAG 2.5.8 und den Apple-Richtlinien).
   Ausserdem brechen die Listenzeilen um, statt den Namen abzuschneiden.
   ========================================================== */
@media (max-width: 768px) {

  /* --- Tippflaechen vergroessern --- */
  .btn-primary, .btn-secondary { min-height: 44px; padding: 10px 16px; }
  .btn-icon {
    min-width: 44px;
    min-height: 44px;
    font-size: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .btn-move { min-width: 44px; min-height: 44px; font-size: 13px; }
  .missing-box { width: 26px; height: 26px; }
  /* Das Kaestchen selbst bleibt klein, die Zelle wird zur Tippflaeche. */
  .grade-table-tight td:has(.missing-box) { padding: 4px 10px; }
  .link-button { min-height: 44px; }
  .logout-inline .link-button { min-height: 0; }

  /* Nachholen: Notenfeld und Knopf nebeneinander lassen */
  .resolve-form { flex-wrap: nowrap; }
}

/* Kaestchen: das Element selbst bleibt klein, die umgebende Flaeche wird
   antippbar gemacht. */
.missing-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 40px;
  margin: 0;
  cursor: pointer;
}
.missing-cell { padding-left: 0 !important; padding-right: 0 !important; }
.logout-inline .link-button { padding: 6px 0; }

/* Erfassungstabelle auf dem Handy: vier Spalten muessen in 375px passen,
   sonst rutscht das Notizfeld aus dem Bild und laesst sich schlecht
   erreichen. Daher enge Abstaende und feste Breiten fuer die schmalen
   Spalten, der Rest geht an die Notiz. */
@media (max-width: 768px) {
  .grade-table-tight { table-layout: fixed; }
  .grade-table-tight th, .grade-table-tight td {
    padding: 4px 4px;
    white-space: normal;
  }
  .grade-table-tight th:first-child, .grade-table-tight td:first-child {
    width: auto;
    padding-left: 2px;
    padding-right: 6px;
    word-break: break-word;
  }
  .grade-table-tight th:nth-child(2), .grade-table-tight td:nth-child(2) { width: 62px; }
  .grade-table-tight th:nth-child(3), .grade-table-tight td:nth-child(3) { width: 46px; }
  .grade-table-tight th:nth-child(4), .grade-table-tight td:nth-child(4) { width: 34%; }
  .grade-table-tight .grade-input { width: 100%; }
  .grade-table-tight .note-input { width: 100%; min-width: 0; }
  .missing-label { min-width: 0; width: 100%; }
}

/* ==========================================================
   Tabellen in den Einstellungen
   Bewusst eine echte Tabelle statt Rasterzeilen: bei einem Raster pro Zeile
   berechnet jede Zeile ihre Spaltenbreiten selbst. Sobald eine Zeile in der
   letzten Spalte anderen Inhalt hat (Abzeichen statt Knopf), verrutschen
   alle uebrigen Spalten. Eine Tabelle richtet die Spalten ueber alle Zeilen
   hinweg gleich aus.
   ========================================================== */
.settings-table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
}
.settings-table thead tr { background: var(--surface); }
.settings-table th {
  text-align: left;
  font-size: 12px;
  font-weight: 400;
  color: var(--ink-soft);
  padding: 8px 12px;
  border-bottom: 1px solid var(--line);
}
.settings-table td {
  padding: 6px 12px;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}
.settings-table tbody tr:last-child td { border-bottom: none; }
.settings-table .inline-input { width: 100%; max-width: none; }

/* Spalten, die sich am Inhalt orientieren statt mitzuwachsen */
.settings-table .col-actions { width: 1px; white-space: nowrap; text-align: right; }
.settings-table .col-weight { width: 1px; white-space: nowrap; }
.settings-table .col-weight .inline-input { width: 62px; text-align: center; }
/* Gilt fuer jede Tabelle, nicht nur fuer .settings-table: die Eintragsliste
   hat seit dem zeilenweisen Bearbeiten dieselben Aktionen, ist aber eine
   gewoehnliche Tabelle. Die Regel fuer schmale Anzeigen weiter unten ist
   spezifischer und sticht diese weiterhin. */
table .row-actions { display: flex; align-items: center; gap: 8px; justify-content: flex-end; }

/* Gesperrtes Notenfeld, wenn "fehlt" angehakt ist */
.grade-input.gesperrt {
  background: var(--surface) !important;
  color: var(--ink-soft);
  cursor: not-allowed;
}

/* Benutzer umbenennen */

/* Diagramme etwas kompakter darstellen */
.chart-box { padding: 10px 12px; margin-bottom: 16px; }
.chart-title { margin-top: 18px; }

@media (max-width: 768px) {
  /* Auf schmalen Bildschirmen wird aus jeder Tabellenzeile eine eigene
     Karte: nebeneinander waere zu eng, und seitliches Schieben ist hier
     unpraktisch, weil in jeder Zeile Knoepfe sitzen.
     Der Rahmen wandert dabei von der Tabelle auf die Zeile. Solange er um
     die ganze Tabelle lief, standen alle Zeilen in einem einzigen Kasten,
     getrennt nur durch einen Strich - bei mehreren Feldern je Zeile war
     nicht mehr zu sehen, welcher Wert zu welchen Knoepfen gehoert. */
  .settings-table, .settings-table tbody, .settings-table tr, .settings-table td {
    display: block;
    width: 100%;
  }
  .settings-table {
    border: none;
    background: transparent;
    border-radius: 0;
    overflow: visible;
  }
  .settings-table thead { display: none; }
  .settings-table tr {
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    padding: 10px 12px;
    margin-bottom: 10px;
  }
  /* Muss nach der Regel oben stehen und mindestens so spezifisch sein,
     sonst uebermalt das weisse Kartenblatt die Kennzeichnung gesperrter
     Konten. */
  .settings-table tr.zeile-gesperrt { background: var(--surface); }
  .settings-table tbody tr:last-child { margin-bottom: 0; }
  .settings-table td {
    border-bottom: none;
    padding: 0;
    margin-bottom: 8px;
    /* Lange E-Mail-Adressen muessen umbrechen duerfen. Die allgemeine
       Regel "td { white-space: nowrap }" weiter oben gilt fuer die
       Notentabellen und wuerde die Karte hier ueber den Rand schieben. */
    white-space: normal;
  }
  .settings-table td:last-child { margin-bottom: 0; }

  /* Ersatz fuer die ausgeblendete Kopfzeile: jede Zelle sagt selbst, was
     sie enthaelt. Ohne das stehen in der Benutzerverwaltung fuenf
     unbeschriftete Felder untereinander. */
  .settings-table td[data-label]::before {
    content: attr(data-label);
    display: block;
    font-size: 12px;
    color: var(--ink-soft);
    margin-bottom: 3px;
  }

  .settings-table .col-actions,
  .settings-table .col-weight { width: 100%; white-space: normal; text-align: left; }
  .settings-table .col-weight .inline-input { width: 70px; }

  /* Die Knoepfe sitzen abgesetzt unter den Werten und beginnen links wie
     alles andere in der Karte. Rechtsbuendig wirkten sie, als gehoerten
     sie schon zur naechsten Zeile. */
  .settings-table .col-actions {
    border-top: 1px solid var(--line);
    margin-top: 10px;
    padding-top: 10px;
  }
  .settings-table .row-actions { justify-content: flex-start; flex-wrap: wrap; }
  /* Passwort zuruecksetzen: Feld und Knopf brauchen eine eigene Zeile,
     sonst draengen sie die Symbolknoepfe aus der Karte. */
  .settings-table .row-actions .weight-form { flex: 1 1 100%; }
  .settings-table .row-actions .weight-form input { flex: 1 1 auto; min-width: 0; }
}

/* Ankreuzfeld im Formular: braucht mehr Breite als ein normales Feld,
   sonst bricht die Beschriftung mitten im Satz um. Es sitzt unten
   buendig mit den Eingabefeldern daneben. */
.field-check {
  flex: 1 1 250px !important;
  min-width: 250px !important;
  justify-content: flex-end;
}
.field-check .checkbox-label {
  align-items: flex-start;
  margin-bottom: 0;
  line-height: 1.3;
}
.field-check .checkbox-label input { margin-top: 2px; flex-shrink: 0; }
.block { display: block; }

@media (max-width: 768px) {
  .field-check { flex: 1 1 100% !important; min-width: 100% !important; }
}

/* Ankreuzfelder duerfen nicht von der allgemeinen Regel
   ".card-form .field input { width: 100% }" erfasst werden - sonst wird das
   Kaestchen auf Feldbreite gezogen und der Text daneben in schmale Reste
   gequetscht. Die Regel muss spezifischer sein als jene. */
.card-form .field input[type="checkbox"],
.card-form .field-check input[type="checkbox"] {
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  margin-top: 1px;
}
.field-check .checkbox-label span { flex: 1; min-width: 0; }

/* Der Name soll moeglichst in einer Zeile stehen. Erst wenn der Platz
   wirklich nicht reicht, darf der Browser trennen - dann aber an einer
   sprachlich richtigen Stelle (das lang="de" am html-Element liefert die
   Trennregeln). Ein fest eingebautes <br> waere falsch, weil es auch dann
   trennt, wenn genug Platz da ist. */
/* Automatische Silbentrennung liefert bei diesem Wort unschoene Stellen
   ("Leis-tungsaufzeich-nung"). Stattdessen steht im Text ein weiches
   Trennzeichen zwischen "Leistungs" und "aufzeichnung": unsichtbar, solange
   der Platz reicht, und sonst genau an der richtigen Stelle. */
.brand {
  hyphens: manual;
  -webkit-hyphens: manual;
  overflow-wrap: normal;
}
.login-brand { white-space: nowrap; }

/* ---------- Kopfleiste mit Benutzerbereich (rechts oben) ---------- */
.topbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 16px;
  margin: -8px 0 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
}
.topbar-user { color: var(--ink); font-weight: 600; }
.topbar-link {
  color: var(--ink-soft);
  text-decoration: none;
  padding: 6px 2px;
}
.topbar-link:hover { color: var(--ink); }
.topbar-form { margin: 0; }

@media (max-width: 768px) {
  .topbar { gap: 12px; margin-top: -4px; flex-wrap: wrap; }
  .topbar-link { min-height: 40px; display: flex; align-items: center; }
}

@media (max-width: 768px) {
  /* Beim Gewicht stehen Beschriftung und Feld nebeneinander statt
     untereinander - das Feld ist nur 70px breit, eine eigene Zeile dafuer
     waere verschenkter Platz. */
  .settings-table .col-weight { display: flex; align-items: baseline; gap: 8px; }
  .settings-table .col-weight[data-label]::before { margin-bottom: 0; }
}

/* Die Notenspalte zeigt eine mittig sitzende Pille. Damit Ueberschrift und
   Wert untereinander stehen, muss auch der Spaltenkopf zentriert sein -
   thead ist sonst generell linksbuendig. */
th.cell-center { text-align: center; }
th.sortable.cell-center a { text-align: center; }

/* Gesperrte Benutzerkonten sichtbar abheben */
.zeile-gesperrt { background: var(--surface); opacity: 0.75; }
.badge-gesperrt {
  background: #F0E2DC;
  color: var(--red);
  font-size: 11px;
  font-weight: 600;
  border-radius: 4px;
  padding: 2px 7px;
  margin-left: 6px;
  white-space: nowrap;
}

/* E-Mail-Felder wie Textfelder behandeln */
input[type="email"] {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 6px;
  padding: 8px 10px;
  font-size: 14px;
  color: var(--ink);
  font-family: ui-sans-serif, system-ui;
  height: 38px;
  box-sizing: border-box;
  min-width: 0;
  max-width: 100%;
}
.card-form .field input[type="email"] { width: 100%; }
.settings-table input[type="email"] { width: 100%; min-width: 130px; }
@media (max-width: 768px) {
  input[type="email"] { font-size: 16px; }
}

/* ---------- Sicherungsseite ---------- */
.backup-box {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 8px;
}
.backup-teil {
  flex: 1 1 320px;
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 8px;
  padding: 14px 16px;
}
.backup-teil h4 { margin: 0 0 6px; }
.backup-teil .add-form { margin-top: 10px; margin-bottom: 0; flex-wrap: wrap; }
.backup-teil input[type="file"] {
  flex: 1 1 200px;
  min-width: 0;
  font-size: 13px;
  padding: 7px 0;
}
/* Roter Knopf fuer den zerstoererischen Vorgang, damit er sich klar von den
   ungefaehrlichen Schaltflaechen abhebt. */
.btn-icon-text {
  border: 1px solid var(--red);
  background: #fff;
  color: var(--red);
  border-radius: 6px;
  padding: 9px 16px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  font-family: ui-sans-serif, system-ui;
}
.btn-icon-text:hover { background: #FBEAE5; }
@media (max-width: 768px) {
  .btn-icon-text { min-height: 44px; width: 100%; }
  .backup-teil input[type="file"] { flex: 1 1 100%; }
}

/* Fehlerseite. Steht bewusst ausserhalb des .layout-Rasters, weil sie ohne
   Navigationsleiste auskommt - die braucht Daten, die im Fehlerfall gerade
   fehlen koennen. */
.fehlerseite {
  max-width: 560px;
  margin: 12vh auto 0;
  padding: 28px 32px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
}
.fehlerseite h1 { margin-top: 0; }
.fehlerseite p { line-height: 1.5; }
.fehlerseite code {
  background: var(--surface);
  padding: 2px 6px;
  border-radius: 4px;
}

@media (max-width: 600px) {
  .fehlerseite { margin: 6vh 12px 0; padding: 20px; }
}

/* --- Hilfe-Fenster ---------------------------------------------------
   <dialog> bringt Modalitaet, Escape und Fokusfang selbst mit. Gestaltet
   werden muss nur das Aussehen und ::backdrop, das ohne Regel durchsichtig
   waere. */
.hilfe {
  width: min(680px, calc(100vw - 32px));
  max-height: min(80vh, 900px);
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--paper);
  color: var(--ink);
  overflow: hidden;
}
.hilfe::backdrop { background: rgba(36, 52, 77, 0.45); }

.hilfe-kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}
.hilfe-kopf h2 { margin: 0; font-size: 18px; }

.hilfe-inhalt {
  padding: 4px 20px 16px;
  overflow-y: auto;
  /* Kopf und Fuss sind zusammen rund 120 px hoch. */
  max-height: calc(min(80vh, 900px) - 120px);
  line-height: 1.55;
}
.hilfe-inhalt h3 { font-size: 15px; margin: 18px 0 4px; }
.hilfe-inhalt p { margin: 6px 0; }
.hilfe-inhalt ul { margin: 6px 0; padding-left: 20px; }
.hilfe-inhalt li { margin: 4px 0; }
.hilfe-inhalt code {
  background: var(--surface);
  border-radius: 4px;
  padding: 1px 5px;
  font-size: 13px;
}
.hilfe-inhalt kbd {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 1px 5px;
  font-size: 12px;
}

.hilfe-fuss {
  display: flex;
  justify-content: flex-end;
  padding: 12px 20px;
  border-top: 1px solid var(--line);
  background: var(--surface);
}

@media (max-width: 768px) {
  .hilfe { max-height: calc(100vh - 24px); }
  .hilfe-inhalt { max-height: calc(100vh - 150px); }
}

/* --- Meldungen ------------------------------------------------------- */
.meldung {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 12px 16px;
  margin-bottom: 12px;
}
.meldung-kopf { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
/* Erledigtes bleibt lesbar, tritt aber zurueck. */
.meldung-erledigt { opacity: 0.6; }
.meldung-text {
  white-space: pre-wrap;   /* Absaetze aus dem Textfeld erhalten */
  margin: 8px 0 12px;
  line-height: 1.5;
}
.meldung .row-actions { justify-content: flex-start; }

/* Volle Breite im Karten-Formular. Die Regel gab es schon einmal und war
   beim Aufraeumen entfallen, weil sie damals niemand nutzte. */
.card-form .field-wide { flex: 1 1 100%; min-width: 0; }

/* Mehrzeiliges Feld im Karten-Formular */
.meldung-form textarea {
  width: 100%;
  font: inherit;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  color: var(--ink);
  resize: vertical;
}