:root {
  --bg: #0f1720; --panel: #ffffff; --ink: #1a2330; --muted: #6b7787;
  --line: #e2e8f0; --accent: #1e6fd6; --accent-ink: #fff;
}
* { box-sizing: border-box; }
body {
  margin: 0; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--ink); background: #f4f6f9; line-height: 1.5;
}
header {
  display: flex; align-items: center; gap: 24px; flex-wrap: wrap;
  background: var(--bg); color: #fff; padding: 14px 22px;
}
.brand a { color: #fff; text-decoration: none; font-weight: 700; font-size: 18px; }
nav { display: flex; gap: 18px; }
nav a { color: #c7d2e0; text-decoration: none; font-size: 15px; }
nav a:hover { color: #fff; }
main { max-width: 1000px; margin: 0 auto; padding: 24px 20px 40px; }
footer { text-align: center; color: var(--muted); font-size: 13px; padding: 20px; }

h1 { font-size: 24px; margin: 0 0 16px; }
h2 { font-size: 17px; margin: 0 0 12px; }
h3 { font-size: 15px; margin: 0 0 12px; }
a { color: var(--accent); }

.course-heading {
  font-size: 15px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  color: var(--muted); margin: 28px 0 12px; padding-top: 20px; border-top: 2px solid var(--line);
}
.course-heading:first-of-type { margin-top: 0; padding-top: 0; border-top: none; }
.muted { color: var(--muted); }
.small { font-size: 13px; }

.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 720px) { .grid { grid-template-columns: 1fr; } }

.tile-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; margin-bottom: 24px; }
.course-tile {
  display: flex; flex-direction: column; gap: 4px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
  padding: 16px 18px; text-decoration: none; color: var(--ink);
}
.course-tile:hover { border-color: var(--accent); box-shadow: 0 2px 8px rgba(30,111,214,0.12); }
.course-tile strong { font-size: 15px; }
.card {
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
  padding: 18px; margin-bottom: 18px;
}
.card.narrow { max-width: 460px; }
.card.focus-card { border-left: 4px solid var(--accent); }

.list { list-style: none; padding: 0; margin: 0; }
.list li { padding: 8px 0; border-bottom: 1px solid var(--line); }
.list li:last-child { border-bottom: none; }

table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); font-size: 14px; }
th { color: var(--muted); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .03em; }
th .sort-link { color: var(--muted); text-decoration: none; display: inline-flex; align-items: center; gap: 4px; }
th .sort-link:hover { color: var(--accent); }
.sort-arrow { font-size: 10px; }

label { display: block; margin-bottom: 12px; font-size: 14px; font-weight: 600; }
input, select, textarea {
  display: block; width: 100%; margin-top: 5px; padding: 9px 10px;
  border: 1px solid #cbd5e1; border-radius: 8px; font: inherit; font-weight: 400;
}
button {
  background: var(--accent); color: var(--accent-ink); border: 0; border-radius: 8px;
  padding: 10px 16px; font: inherit; font-weight: 600; cursor: pointer;
}
button:hover { filter: brightness(1.07); }
.link-btn { background: none; color: var(--muted); padding: 2px 6px; font-size: 18px; }

.row-form { display: flex; flex-wrap: wrap; gap: 12px; align-items: end; }
.row-form label { margin-bottom: 0; }
.row-form .grow { flex: 1 1 200px; }
.check { display: flex; align-items: center; gap: 6px; font-weight: 400; }
.check input { width: auto; margin: 0; }

.tag {
  display: inline-block; background: #eef2f7; color: #475569; border-radius: 999px;
  padding: 2px 10px; font-size: 12px; font-weight: 600; margin-left: 6px;
}
.tag.warn { background: #fef3c7; color: #92600a; }
.count { color: var(--muted); font-weight: 400; }

.bar-track { background: #eef2f7; border-radius: 4px; height: 8px; min-width: 80px; }
.bar-fill { background: var(--accent); border-radius: 4px; height: 100%; }

.rate { display: inline-block; width: 26px; text-align: center; border-radius: 6px;
        font-weight: 700; color: #fff; padding: 2px 0; }
.r1 { background: #dc2626; } .r2 { background: #ea7a1c; } .r3 { background: #d4a017; }
.r4 { background: #4a9c3a; } .r5 { background: #1f8a4c; }
.r0 { background: #cbd5e1; color: #475569; }

.progress-table { table-layout: fixed; width: 100%; }
.progress-table td { vertical-align: top; }
.progress-table th:nth-child(1), .progress-table td:nth-child(1) { width: 38%; }
.progress-table th:nth-child(3), .progress-table td:nth-child(3) { width: 92px; }
.progress-table tr.untouched td { color: var(--muted); }

.history { display: flex; flex-wrap: nowrap; gap: 4px; overflow-x: auto; padding-bottom: 2px; }
a.rate { flex: none; text-decoration: none; cursor: pointer; }
a.rate:hover { filter: brightness(1.15); }

.enroll-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }

.pick-list { list-style: none; padding: 0; margin: 0 0 16px; }
.pick-item { padding: 10px 0; border-bottom: 1px solid var(--line); }
.pick-item:last-child { border-bottom: none; }
.pick-check {
  display: flex; align-items: center; gap: 8px; font-weight: 600;
  cursor: pointer; margin-bottom: 0;
}
.pick-check input { width: auto; margin: 0; }
.pick-check .num { display: inline-block; min-width: 22px; color: var(--muted); font-weight: 400; }
.pick-fields {
  display: none; flex-wrap: wrap; align-items: center; gap: 10px;
  margin: 10px 0 0 26px;
}
.pick-item.active .pick-fields { display: flex; }
.pick-fields select { width: auto; min-width: 170px; margin: 0; }
.pick-fields input[type="text"], .pick-fields input:not([type="checkbox"]) {
  width: auto; flex: 1 1 200px; margin: 0;
}
.pick-fields .check { margin: 0; }

.syllabus-list { max-height: 480px; overflow-y: auto; }
.syllabus-actions { display: flex; gap: 16px; margin-bottom: 10px; }
.link-btn-inline {
  background: none; border: none; color: var(--accent); cursor: pointer;
  padding: 0; font: inherit; font-weight: 600;
}
.link-btn-inline:hover { text-decoration: underline; }

.eval-list { list-style: none; padding: 0; margin: 0; }
.eval-item {
  display: flex; flex-wrap: wrap; align-items: end; gap: 12px;
  padding: 14px 0; border-bottom: 1px solid var(--line);
}
.eval-item:last-child { border-bottom: none; }
.eval-head { flex-basis: 100%; font-weight: 600; }
.eval-head .num { display: inline-block; min-width: 26px; color: var(--muted); }
.eval-head .rate, .eval-head .tag { margin-left: 6px; }
.eval-form { display: flex; flex-wrap: wrap; align-items: end; gap: 12px; flex: 1 1 auto; }
.eval-form label { margin-bottom: 0; }
.eval-form .grow { flex: 1 1 220px; }
.eval-del { margin-left: auto; }

/* Landeplatz-Picker: mehrspaltiges eval-form-Layout beibehalten, aber - wie bei
   den Uebungen - die Felder erst nach Anhaken der Checkbox zeigen. Gilt nur im
   .pick-item, die immer sichtbaren .eval-item .eval-form bleiben unberuehrt. */
.pick-item .eval-form { display: none; margin: 10px 0 0 26px; }
.pick-item.active .eval-form { display: flex; }

.editbox {
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
  padding: 6px 18px; margin-bottom: 18px;
}
.editbox summary {
  cursor: pointer; font-weight: 600; font-size: 14px; color: var(--muted);
  padding: 10px 0; list-style-position: inside;
}
.editbox[open] summary { margin-bottom: 8px; }
.danger-form { display: flex; align-items: center; gap: 12px; margin-top: 14px;
               padding-top: 14px; border-top: 1px solid var(--line); }
button.danger { background: #dc2626; }
button.danger:hover { filter: brightness(1.08); }

.flash { padding: 10px 14px; border-radius: 8px; margin-bottom: 16px; font-size: 14px; }
.flash.ok { background: #dcfce7; color: #14532d; }
.flash.error { background: #fee2e2; color: #7f1d1d; }

/* Pulldown mit Mehrfachauswahl (Rollen) */
.field { display: block; margin-bottom: 12px; font-size: 14px; font-weight: 600; }
.dropdown-check { position: relative; margin-top: 5px; max-width: 320px; }
.dropdown-check summary {
  list-style: none; cursor: pointer; padding: 9px 10px; font-weight: 400;
  border: 1px solid #cbd5e1; border-radius: 8px; background: #fff;
}
.dropdown-check summary::-webkit-details-marker { display: none; }
.dropdown-check summary::after { content: " ▾"; color: var(--muted); float: right; }
.dropdown-check .dropdown-panel {
  position: absolute; z-index: 10; left: 0; right: 0; margin-top: 4px;
  background: #fff; border: 1px solid #cbd5e1; border-radius: 8px;
  padding: 10px 12px; box-shadow: 0 4px 12px rgba(0, 0, 0, .1);
}
.dropdown-check .check { margin: 6px 0; }

/* Zeiten-Matrix (Logbuch-Stil): Spalte je Zeitart, Totals-Fusszeile */
.table-scroll { overflow-x: auto; }
.times-table th, .times-table td { padding: 8px 6px; white-space: nowrap; }
.times-table th.num, .times-table td.num { text-align: right; }
.times-table .totals-row td {
  font-weight: 700; border-top: 2px solid var(--line); border-bottom: none;
}

/* Zeitarten-Eingabe (Ticks + h:mm-Felder + Live-Total) */
.zeit-hint { font-weight: 400; margin-left: 4px; }
.zeiten-group {
  border: 1px solid var(--line); border-radius: 8px;
  padding: 4px 14px 10px; margin: 0 0 14px;
}
.zeiten-group legend { font-size: 14px; font-weight: 600; padding: 0 6px; }
.zeiten-list .pick-item { padding: 7px 0; }
.zeiten-list .pick-fields { margin: 6px 0 0 26px; }
.zeiten-list .zeit-input { width: 120px; flex: 0 0 120px; }
.zeiten-total { margin: 10px 0 0; font-size: 14px; }

/* Kommentar-Historie je Exercise (Aufklappzeile) + Debriefings-Karte */
.exercise-toggle { font-weight: 400; text-align: left; }
.progress-table tr.history-row td { background: #f8fafc; }
.comment-history { list-style: none; padding: 0; margin: 0; }
.comment-history li { padding: 3px 0; }
.comment-history .rate { width: 22px; font-size: 12px; padding: 1px 0; }
.debrief-text { white-space: pre-line; margin-top: 2px; }

/* Ein Save-Button fuer die ganze Session-Erfassung */
.save-all {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-top: 12px;
}

/* Uebungskatalog: schmales Nummernfeld in Add-/Edit-Formularen */
.num-input { width: 90px; }

/* Syllabus-Verwaltung: Stage-Koepfe, Zeilen mit Pfeilen/Dropdown */
.stage-head {
  display: flex; align-items: center; gap: 10px;
  margin: 20px 0 4px; padding-top: 14px; border-top: 2px solid var(--line);
}
.stage-head .stage-name-form { display: flex; align-items: center; gap: 8px; flex: 1 1 auto; }
.stage-head input { margin: 0; width: auto; flex: 0 1 300px; font-weight: 600; }
.stage-title {
  flex: 1 1 auto; font-size: 12px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; color: var(--muted);
}
.stage-empty { margin: 4px 0 10px; }
.stage-add-form { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); }
.move-btn {
  background: none; border: 1px solid var(--line); color: var(--muted);
  border-radius: 6px; padding: 2px 8px; font-size: 13px; font-weight: 700;
}
.move-btn:hover { color: var(--accent); border-color: var(--accent); filter: none; }
.syllabus-row { display: flex; align-items: center; gap: 10px; }
.syllabus-row .num { display: inline-block; min-width: 22px; color: var(--muted); }
.syllabus-row .grow { flex: 1 1 auto; }
.syllabus-row form { display: flex; gap: 4px; }
.syllabus-row select { margin: 0; width: auto; padding: 4px 6px; font-size: 13px; }

/* Checkliste: Editor auf der Syllabus-Seite + Abhaken auf dem Trainingsstand */
.checklist-typ { flex: none; width: 72px; font-size: 12px; color: var(--muted); }
.syllabus-row .stage-name-form { flex: 1 1 auto; align-items: center; gap: 8px; }
.syllabus-row .stage-name-form input { margin: 0; width: auto; flex: 1 1 auto; }
.checklist { list-style: none; padding: 0; margin: 0; }
.checklist li { padding: 3px 0; }
.checklist li.checklist-heading {
  font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  color: var(--muted); padding-top: 16px;
}
.checklist li:first-child { padding-top: 0; }
.checklist-checkbox form { margin: 0; }

/* Stage-Zwischenueberschriften im Trainingsstand + in der Erfassungsliste */
.progress-table tr.stage-row td {
  font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  color: var(--muted); padding-top: 18px;
}
.pick-stage {
  padding: 12px 0 2px; font-size: 12px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; color: var(--muted);
}

/* Einklappbare Cards (Trainingsstand) */
details.card > summary { cursor: pointer; list-style: none; }
details.card > summary::-webkit-details-marker { display: none; }
details.card > summary::before {
  content: "▸"; color: var(--muted); margin-right: 8px; font-size: 13px;
}
details.card[open] > summary::before { content: "▾"; }
details.card > summary h3 { display: inline; margin: 0; }
details.card[open] > summary { margin-bottom: 12px; }

/* Einklappbare Stages: Zeile im Trainingsstand, Toggle-Button im Syllabus */
.progress-table tr.stage-row td { cursor: pointer; }
.caret { color: var(--muted); margin-right: 6px; }
.stage-toggle {
  background: none; border: none; color: var(--muted); cursor: pointer;
  padding: 0 4px; font-size: 13px; font-weight: 700;
}
.stage-toggle:hover { color: var(--accent); filter: none; }

/* Kurs-/Syllabusname umbenennen (Syllabus-Seite) */
.course-rename-form { display: flex; align-items: center; gap: 8px; margin: -8px 0 4px; }
.course-rename-form input { margin: 0; width: auto; flex: 0 1 340px; font-weight: 600; }

/* Login-Status im Header (rechtsbuendig) + Abmelden */
.session-info { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.user-badge { color: #c7d2e0; font-size: 14px; }
.user-badge .muted { color: #8ea0b5; }
.logout-form { margin: 0; }
.logout-form button { color: #c7d2e0; }
.logout-form button:hover { color: #fff; filter: none; }

/* Login-Seite: schmale, zentrierte Karte */
.login-wrap { max-width: 380px; margin: 40px auto; }
.login-form { margin-top: 12px; }
.login-form button { width: 100%; margin-top: 6px; }

/* Print-to-PDF (Features 7/8): Navigation/Formulare/Buttons ausblenden,
   eingeklappte Details-Sektionen aufklappen, Farben fuers Drucken abschwaechen.
   Ueber den nativen Browser-Druck (window.print() -> "Als PDF speichern") -
   keine PDF-Bibliothek, siehe CLAUDE.md. */
@media print {
  header, footer, .editbox, form, .print-hide, button,
  .link-btn, .link-btn-inline { display: none !important; }
  details.card, details.card > summary { display: block !important; }
  details.card > summary::before { content: none !important; }
  main { max-width: 100%; padding: 0; }
  .card { border: none; box-shadow: none; padding: 0; margin-bottom: 16px; break-inside: avoid; }
  a { color: inherit; text-decoration: none; }
  body { background: #fff; }
  .table-scroll { overflow: visible; }
  table { font-size: 11px; }
}