:root {
  /* Laesst native Formularelemente (select, input type=date/time,
     Checkboxen, Scrollbars) im passenden hellen/dunklen Erscheinungsbild
     rendern, statt immer die helle Browser-Standardoptik zu erzwingen. */
  color-scheme: light;

  /* Markenfarben */
  --dlrg-red: #b3241c;
  --dlrg-red-dark: #8f1c16;
  --dlrg-red-soft: rgba(179, 36, 28, 0.08);
  /* Linkfarbe: im Dark-Mode heller, damit sie lesbar bleibt. */
  --link: #8f1c16;

  /* Flaechen & Text */
  --page-bg: #f0f1f3;
  --card-bg: #ffffff;
  --text: #1a1a1a;
  --muted: #5a5a5a;

  /* Linien: --border = staerkere Struktur, --grid = feines Tabellengitter */
  --border: #d9dade;
  --grid: #e4e5e8;

  /* Wochentags-Hinterlegung */
  --sunday-bg: #fbe4e3;
  --special-bg: #fdf3d0;
  --saturday-bg: #ffffff;
  --row-hover: #f5f6f8;

  --slot-empty-text: #4a4a4a;
  --slot-btn-bg: rgba(179, 36, 28, 0.06);

  --focus: #1a56db;

  /* Form & Tiefe */
  --radius: 10px;
  --radius-sm: 6px;
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06), 0 1px 3px rgba(16, 24, 40, 0.08);
  --shadow-md: 0 4px 12px rgba(16, 24, 40, 0.08), 0 2px 4px rgba(16, 24, 40, 0.06);
  --shadow-lg: 0 12px 32px rgba(16, 24, 40, 0.14);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background: var(--page-bg);
  color: var(--text);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  color: var(--link);
  text-underline-offset: 2px;
}

h2 { letter-spacing: -0.01em; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: -999px;
  top: auto;
  background: #fff;
  padding: 0.5rem 1rem;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  z-index: 1000;
}
.skip-link:focus {
  left: 0.5rem;
  top: 0.5rem;
}

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

/* ===== Kopfleiste ===== */
.site-header {
  background: linear-gradient(135deg, #c02a20 0%, var(--dlrg-red) 55%, var(--dlrg-red-dark) 100%);
  color: #fff;
  padding: 0.75rem 1.25rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  position: sticky;
  top: 0;
  z-index: 30;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
}
.site-header h1 {
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0;
}
.site-header h1 a {
  color: inherit;
  text-decoration: none;
}
.site-header h1 a:hover, .site-header h1 a:focus-visible {
  text-decoration: underline;
}
.site-header nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.btn-nav {
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.35);
  padding: 0.4rem 0.9rem;
  border-radius: 999px;
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.btn-nav:hover, .btn-nav:focus-visible {
  background: rgba(255, 255, 255, 0.28);
  border-color: rgba(255, 255, 255, 0.9);
}

/* Burger-Button: nur auf schmalen Bildschirmen sichtbar (siehe Media Query). */
.nav-toggle {
  display: none;
}
.nav-toggle-bar {
  display: block;
  width: 22px;
  height: 2px;
  margin: 0 auto;
  background: #fff;
  border-radius: 2px;
}

main {
  width: 100%;
  margin: 0 auto;
  padding: 1.25rem 1.5rem;
  box-sizing: border-box;
}

/* ===== Karten & Abschnitte ===== */
.card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 1.5rem;
  max-width: 420px;
  margin: 2rem auto;
}

.card h2 { margin-top: 0; }

/* Anmelde-Seiten (Zugang / Admin-Anmeldung) */
.login-page {
  display: flex;
  justify-content: center;
  padding-top: 3rem;
}
.login-page .card {
  width: 100%;
  text-align: center;
  padding: 2.25rem 1.75rem;
  box-shadow: var(--shadow-lg);
  border-top: 4px solid var(--dlrg-red);
}
.login-page .login-icon {
  width: 60px;
  height: 60px;
  margin-bottom: 0.85rem;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.12));
}
.login-page h2 {
  margin-bottom: 0.25rem;
  font-size: 1.4rem;
}
.login-page .login-subtitle {
  color: var(--muted);
  font-size: 0.9rem;
  margin: 0 0 1.5rem;
}
.login-page form {
  text-align: left;
}
.login-page button[type="submit"] {
  width: 100%;
  padding: 0.75rem;
  font-size: 1.05rem;
  margin-top: 0.25rem;
}

/* ===== Formularelemente ===== */
label {
  display: block;
  font-weight: 600;
  margin-bottom: 0.3rem;
}

input[type="text"],
input[type="password"],
input[type="time"],
input[type="date"],
select {
  font-family: inherit;
  font-size: 1rem;
  color: var(--text);
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
input[type="text"],
input[type="password"] {
  width: 100%;
  padding: 0.6rem 0.7rem;
  margin-bottom: 1rem;
}
input[type="text"]:focus,
input[type="password"]:focus,
input[type="time"]:focus,
input[type="date"]:focus,
select:focus {
  border-color: var(--dlrg-red);
  box-shadow: 0 0 0 3px var(--dlrg-red-soft);
  outline: none;
}
/* Bei Tastaturfokus zusaetzlich den deutlichen A11y-Rahmen behalten. */
input:focus-visible,
select:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 1px;
}

.similar-name-group {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 1.25rem;
  margin-bottom: 1.25rem;
}
.similar-name-group fieldset {
  border: none;
  padding: 0;
  margin: 0 0 0.75rem;
}
.similar-name-group legend {
  font-weight: 600;
  padding: 0;
  margin-bottom: 0.4rem;
}
.similar-name-group .radio-option {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: normal;
  margin-bottom: 0.4rem;
  cursor: pointer;
}
.similar-name-group .radio-option input {
  width: auto;
  margin: 0;
}

.availability-field {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--dlrg-red-soft);
  padding: 0.85rem 1rem 1rem;
  margin-bottom: 1rem;
}
.availability-field legend {
  font-weight: 600;
  padding: 0 0.35rem;
}
/* Regulaere Wachzeit hinter "Ganzer Tag" - erklaerend, aber nicht dominant. */
.regular-time {
  color: var(--muted);
}

.availability-field .radio-option {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: normal;
  margin-bottom: 0.4rem;
  cursor: pointer;
}
.availability-field .radio-option input {
  width: auto;
  margin: 0;
}
.availability-time {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.5rem;
}
.availability-time[hidden] {
  display: none;
}
.availability-time label {
  display: inline;
  font-weight: normal;
  margin: 0;
}
.availability-time input[type="time"] {
  padding: 0.5rem;
}

.password-row {
  display: flex;
  gap: 0.5rem;
  align-items: flex-start;
}
.password-row input {
  flex: 1;
}
.btn-toggle-password {
  white-space: nowrap;
  flex-shrink: 0;
}

/* ===== Buttons ===== */
button, .btn {
  background: var(--dlrg-red);
  color: #fff;
  border: none;
  padding: 0.6rem 1.15rem;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  border-radius: var(--radius-sm);
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  box-shadow: var(--shadow-sm);
  transition: background-color 0.15s ease, box-shadow 0.15s ease, transform 0.06s ease;
}
button:hover, .btn:hover {
  background: var(--dlrg-red-dark);
  box-shadow: var(--shadow-md);
}
button:active, .btn:active {
  transform: translateY(1px);
  box-shadow: var(--shadow-sm);
}

.btn-secondary {
  background: #565a63;
}
.btn-secondary:hover { background: #3c3f46; }

.btn-danger {
  background: #a11616;
  padding: 0.25rem 0.55rem;
  font-size: 0.85rem;
  line-height: 1.2;
}
.btn-danger:hover { background: #7d0f0f; }

/* ===== Meldungen ===== */
.error-message {
  background: #fdeaea;
  border: 1px solid #e0a3a3;
  border-left: 4px solid #c0392b;
  color: #7d1c1c;
  padding: 0.75rem 0.9rem;
  border-radius: var(--radius-sm);
  margin-bottom: 1rem;
}

.flash-success {
  background: #e7f6e8;
  border: 1px solid #a3d2a6;
  border-left: 4px solid #2e7d32;
  color: #1b4d1e;
  padding: 0.75rem 0.9rem;
  border-radius: var(--radius-sm);
  margin-bottom: 1rem;
}

.year-nav {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}
.year-nav .current-year {
  font-weight: 700;
  font-size: 1.2rem;
}

.view-toggle {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}

/* ===== Überblick: naechste Wachtermine ===== */
/* Regulaere Wachzeiten oben in der normalen Ansicht - eine ruhige Zeile,
   die den Bezug fuer "ganzer Tag" liefert, ohne den Plan zu dominieren. */
.shift-times {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1.25rem;
  margin-bottom: 1.25rem;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--border);
  border-left: 4px solid var(--dlrg-red);
  border-radius: var(--radius-sm);
  background: var(--dlrg-red-soft);
}
.shift-times-label {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
}
.shift-time {
  display: flex;
  align-items: baseline;
  gap: 0.45rem;
}
.shift-time-day {
  font-weight: 600;
}
.shift-time-hours {
  font-variant-numeric: tabular-nums;
}

@media (max-width: 600px) {
  .shift-times {
    gap: 0.25rem 1rem;
  }
  .shift-times-label {
    flex-basis: 100%;
  }
}

.overview-details {
  margin-bottom: 1.5rem;
}
.overview-heading {
  font-size: 1rem;
  font-weight: 700;
  margin: 0 0 0.6rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
/* Als aufklappbarer Bereich (<summary>): Klick-Cursor, eigener Pfeil statt
   des Standard-Dreiecks, der sich beim Öffnen dreht. */
summary.overview-heading {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  width: fit-content;
  list-style: none;
  user-select: none;
}
summary.overview-heading::-webkit-details-marker {
  display: none;
}
summary.overview-heading::before {
  content: "▸";
  font-size: 0.9em;
  transition: transform 0.15s ease;
}
.overview-details[open] > summary.overview-heading::before {
  transform: rotate(90deg);
}
.overview {
  display: flex;
  gap: 0.85rem;
  flex-wrap: wrap;
  margin-bottom: 0;
}
.overview-card {
  flex: 1 1 280px;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1rem 1.1rem;
  border: 1px solid var(--border);
  border-left: 5px solid var(--dlrg-red);
  border-radius: var(--radius);
  background: var(--card-bg);
  box-shadow: var(--shadow-sm);
  color: inherit;
  text-decoration: none;
  transition: box-shadow 0.15s ease, transform 0.1s ease;
}
.overview-card:hover, .overview-card:focus-visible {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
.overview-full {
  border-left-color: #2e7d32;
}
.overview-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}
.overview-date {
  font-weight: 700;
  font-size: 1.05rem;
}
.overview-badge {
  flex-shrink: 0;
  font-size: 0.8rem;
  font-weight: 700;
  padding: 0.15rem 0.6rem;
  border-radius: 999px;
  background: var(--dlrg-red);
  color: #fff;
}
.overview-badge-full {
  background: #2e7d32;
}
.overview-bar {
  display: block;
  height: 7px;
  border-radius: 999px;
  background: var(--grid);
  overflow: hidden;
}
.overview-bar-fill {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: var(--dlrg-red);
  transition: width 0.4s ease;
}
.overview-bar-fill.is-full {
  background: #2e7d32;
}
.overview-status {
  font-size: 0.85rem;
  color: var(--muted);
}
.overview-roles {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.1rem;
}
.overview-chip {
  font-size: 0.78rem;
  font-weight: 600;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  background: var(--dlrg-red-soft);
  color: var(--dlrg-red-dark);
  border: 1px solid rgba(179, 36, 28, 0.2);
}

.slot-edit {
  display: inline-block;
  background: #565a63;
  color: #fff;
  padding: 0.25rem 0.55rem;
  font-size: 0.85rem;
  line-height: 1.2;
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition: background-color 0.15s ease;
}
.slot-edit:hover, .slot-edit:focus-visible {
  background: #3c3f46;
}

/* "Übernehmen" - der einladende Gegenpart zu .slot-edit, damit ein offener
   Vertretungsplatz auf einen Blick als Handlungsaufforderung erkennbar ist. */
.slot-take {
  display: inline-block;
  background: var(--dlrg-red);
  color: #fff;
  padding: 0.25rem 0.55rem;
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1.2;
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition: background-color 0.15s ease;
}
.slot-take:hover, .slot-take:focus-visible {
  background: #8f1c16;
}

/* Eintrag, für den eine Vertretung gesucht wird. */
.slot-replacement {
  outline: 2px dashed #a06a00;
  outline-offset: -2px;
  border-radius: var(--radius-sm);
}
.replacement-badge {
  display: inline-block;
  background: #a06a00;
  color: #fff;
  font-size: 0.7rem;
  font-weight: 600;
  padding: 0.12rem 0.45rem;
  border-radius: 999px;
  white-space: nowrap;
}

.slot-free {
  display: block;
  min-height: 2.5rem;
  padding: 0.4rem 0.5rem;
  color: var(--muted);
  font-size: 0.85rem;
  font-style: italic;
}

/* ===== Tabelle ===== */
.table-scroll {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

table.wachplan {
  border-collapse: collapse;
  table-layout: fixed;
  width: 100%;
  min-width: 1100px;
  font-size: 0.9rem;
}

/* Saison-Titel steht bewusst AUSSERHALB von .table-scroll und dockt beim
   Scrollen direkt unter der fixierten Menueleiste an. */
.season-title {
  position: sticky;
  top: var(--header-height, 56px);
  z-index: 20;
  margin: 0;
  padding: 0.6rem 0.9rem;
  font-size: 1.05rem;
  font-weight: 700;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-bottom: none;
  border-radius: var(--radius) var(--radius) 0 0;
}

.table-scroll {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

table.wachplan th,
table.wachplan td {
  border: 1px solid var(--grid);
  padding: 0.5rem 0.6rem;
  text-align: left;
  vertical-align: top;
  /* Feste Beschriftungen wie "Wachgänger" nicht mitten im Wort umbrechen. */
  overflow-wrap: normal;
  word-break: keep-all;
  hyphens: none;
}

/* Freitext darf umbrechen, damit lange Namen/Anmerkungen nicht ueberlaufen. */
.slot-name,
.remark-cell {
  overflow-wrap: anywhere;
  word-break: normal;
}

table.wachplan td:not(.remark-cell) {
  text-align: center;
}
table.wachplan td.cell-left {
  text-align: left;
}

/* Damit die Buttons in den Slot-Zellen die volle Zeilenhoehe fuellen (und so
   in einer Zeile alle gleich hoch sind), braucht die Zelle eine "definierte"
   Hoehe als Bezug fuer die height:100% der Kinder. Die 1px werden vom Inhalt
   ohnehin ueberschrieben - der Trick funktioniert in Chrome/Firefox/Safari. */
table.wachplan tbody td {
  height: 1px;
}

table.wachplan thead th {
  background: var(--dlrg-red);
  color: #fff;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-align: center;
}

/* Erste Spalte (Datum) bleibt beim seitlichen Scrollen links stehen. */
table.wachplan thead th:first-child {
  position: sticky;
  left: 0;
  z-index: 3;
}

table.wachplan tbody th[scope="row"] {
  position: sticky;
  left: 0;
  background: inherit;
  z-index: 1;
  font-weight: 600;
}

tr.row-saturday { background: var(--saturday-bg); }
tr.row-sunday { background: var(--sunday-bg); }
tr.row-special { background: var(--special-bg); }

/* Dezenter Zeilen-Hover fuer bessere Orientierung in der breiten Tabelle. */
table.wachplan tbody tr:hover {
  background: var(--row-hover);
}

/* Jedes Wochenende (Sa+So) deutlich vom naechsten abtrennen. */
tr.row-saturday > th,
tr.row-saturday > td,
tr.row-special > th,
tr.row-special > td {
  border-top: 3px solid var(--dlrg-red);
}
table.wachplan tbody tr:first-child > th,
table.wachplan tbody tr:first-child > td {
  border-top: 1px solid var(--grid);
}

.special-badge {
  display: inline-block;
  background: #a06a00;
  color: #fff;
  font-size: 0.7rem;
  font-weight: 600;
  padding: 0.12rem 0.45rem;
  border-radius: 999px;
  margin-right: 0.35rem;
}

.slot-filled {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.4rem;
  height: 100%;
}

.slot-name {
  font-weight: 600;
}

.slot-note {
  font-weight: 400;
  font-style: italic;
  font-size: 0.85em;
}

/* Freie Plaetze als echte Buttons. Sie fuellen die volle Zellenhoehe, damit
   in einer Zeile alle Buttons gleich gross sind (die Zeilenhoehe richtet sich
   nach dem laengsten Text), und der Text sitzt mittig zentriert. */
.slot-empty {
  height: 100%;
  width: 100%;
}
.slot-empty a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  min-height: 2.5rem;
  padding: 0.5rem 0.35rem;
  border: 1px solid var(--dlrg-red);
  border-radius: var(--radius-sm);
  text-align: center;
  text-decoration: none;
  color: var(--dlrg-red-dark);
  background: var(--slot-btn-bg);
  font-size: 0.85rem;
  font-weight: 600;
  transition: background-color 0.12s ease, color 0.12s ease, box-shadow 0.12s ease;
}
.slot-empty a:hover, .slot-empty a:focus-visible {
  background: var(--dlrg-red);
  color: #fff;
  border-color: var(--dlrg-red);
  box-shadow: var(--shadow-sm);
}

.inline-form {
  display: inline;
}

/* Nur fuer Screenreader sichtbare Beschriftungen (z.B. bei Spalten-Feldern,
   deren Bedeutung sich sehend aus der Tabellenspalte ergibt). */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Mehrere kleine Buttons nebeneinander (Spalten hoch/runter schieben). */
.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  justify-content: center;
}

/* Umbenennen-Formular in der Spaltenverwaltung: Feld + Button in einer Zeile. */
.slot-table .inline-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
}
/* Genug Breite, damit Eingabefeld und Button nebeneinander passen. */
.slot-table .cell-left {
  min-width: 18rem;
}
.slot-table .inline-form input[type="text"] {
  flex: 1 1 7rem;
  margin: 0;
}
.slot-table .inline-form button {
  margin: 0;
}

.filter-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin: 0.75rem 0;
}
.filter-form label {
  display: inline;
  margin: 0;
}
.filter-form select {
  padding: 0.5rem;
}

.export-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0.75rem 0;
}

.file-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin-top: 0.75rem;
}
.file-row input[type="file"] {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.5rem;
  background: var(--card-bg);
  color: var(--text);
  max-width: 100%;
}

.ical-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin: 0.75rem 0;
}
.ical-form label {
  display: inline;
  font-weight: normal;
  margin: 0;
  font-size: 0.85rem;
  color: var(--muted);
}
.ical-form select {
  padding: 0.5rem;
}

/* Reiht das Formular optisch in eine bestehende Flex-Toolbar ein. */
.ical-form--inline {
  display: contents;
}
.toolbar-divider {
  width: 1px;
  align-self: stretch;
  background: var(--border);
  opacity: 0.7;
}

/* Anmerkungs-Zelle: der innere Wrapper ist eine Flex-Spalte (die Zelle selbst
   bleibt Tabellenzelle, damit sie die Zeilenhoehe erhaelt). Eventueller
   Anmerkungstext steht oben, der "Anmerkung bearbeiten"-Button fuellt den Rest
   und wird so genauso hoch wie die "eintragen"-Buttons der anderen Spalten. */
.remark-cell {
  min-width: 10rem;
}
.remark-inner {
  display: flex;
  flex-direction: column;
  height: 100%;
  gap: 0.35rem;
}

/* "Anmerkung bearbeiten": gleicher Button-Look und gleiche Hoehe. Der Abstand
   zu evtl. Anmerkungstext kommt ueber gap des Wrappers - steht der Button
   allein (kein Text), fuellt er die volle Zellenhoehe ohne Extra-Abstand. */
.remark-edit {
  flex: 1;
  display: flex;
}
.remark-edit a {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 2.5rem;
  padding: 0.45rem 0.35rem;
  border: 1px solid var(--dlrg-red);
  border-radius: var(--radius-sm);
  text-align: center;
  text-decoration: none;
  color: var(--dlrg-red-dark);
  background: var(--slot-btn-bg);
  font-size: 0.85rem;
  font-weight: 600;
  transition: background-color 0.12s ease, color 0.12s ease;
}
.remark-edit a:hover, .remark-edit a:focus-visible {
  background: var(--dlrg-red);
  color: #fff;
}

.admin-banner {
  background: #2a2d33;
  color: #fff;
  padding: 0.55rem 1rem;
  text-align: center;
  font-size: 0.9rem;
}

/* Dezenter Info-Hinweis (z.B. Erklaerung oben im Admin-Wachplan). */
.info-note {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  background: var(--dlrg-red-soft);
  border: 1px solid var(--border);
  border-left: 4px solid var(--dlrg-red);
  border-radius: var(--radius-sm);
  padding: 0.8rem 1rem;
  margin-bottom: 1.25rem;
  font-size: 0.9rem;
}
.info-note a { font-weight: 600; }
.info-note-icon {
  flex-shrink: 0;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: var(--dlrg-red);
  color: #fff;
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.admin-section {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 1.25rem 1.5rem;
  margin-bottom: 1.5rem;
}

.admin-section h2 { margin-top: 0; }

ul.plain-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
ul.plain-list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--grid);
  gap: 0.5rem;
  flex-wrap: wrap;
}
ul.plain-list li:last-child { border-bottom: none; }

.hint {
  font-size: 0.85rem;
  color: var(--muted);
}

.page-back {
  margin: 0 0 1rem;
}

@media (max-width: 600px) {
  main { padding: 0.75rem; }
  .site-header { padding: 0.7rem 1rem; }
  .site-header h1 { font-size: 1rem; }
  .toolbar-divider { display: none; }

  /* Burger-Menue: schlanke Kopfzeile, Navigation klappt darunter auf. */
  .nav-toggle {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 46px;
    height: 40px;
    padding: 0;
    background: rgba(255, 255, 255, 0.16);
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: var(--radius-sm);
    box-shadow: none;
  }
  .nav-toggle:hover, .nav-toggle:focus-visible {
    background: rgba(255, 255, 255, 0.28);
  }
  .site-header nav {
    display: none;
    flex-basis: 100%;
    flex-direction: column;
    gap: 0.4rem;
    margin-top: 0.6rem;
  }
  .site-header nav.is-open {
    display: flex;
  }
  .site-header nav .btn-nav {
    text-align: center;
    padding: 0.6rem 0.9rem;
  }

  /* Karten-Layout statt breiter Tabelle. */
  .table-scroll {
    overflow: visible;
    border: none;
    border-radius: 0;
    box-shadow: none;
  }
  table.wachplan {
    display: block;
    min-width: 0;
    font-size: 0.95rem;
  }
  table.wachplan thead { display: none; }
  table.wachplan tbody { display: block; }
  table.wachplan tbody tr {
    display: block;
    margin-bottom: 1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
  }
  table.wachplan tbody tr:hover { background: none; }
  table.wachplan tbody th[scope="row"] {
    display: block;
    position: static;
    left: auto;
    background: var(--dlrg-red);
    color: #fff;
    padding: 0.6rem 0.85rem;
    font-size: 1.05rem;
  }
  table.wachplan tbody td {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    text-align: left;
    height: auto;
    border: none;
    border-top: 1px solid var(--grid);
    padding: 0.5rem 0.85rem;
  }
  table.wachplan tbody td::before {
    content: attr(data-label);
    font-weight: 600;
    flex: 0 0 42%;
  }
  table.wachplan tbody td.hide-on-mobile { display: none; }
  .slot-filled, .slot-empty { flex: 1 1 56%; height: auto; }
  .slot-empty a {
    height: auto;
    min-height: 0;
    padding: 0.45rem 0.6rem;
  }
  .slot-empty a br { display: none; }
  .slot-free { min-height: 0; padding: 0; }

  /* Anmerkungs-Zelle im Karten-Layout: innerer Wrapper ist die "Wert"-Seite
     rechts neben dem Label; der Button waechst hier nicht auf Zeilenhoehe. */
  .remark-inner { flex: 1 1 56%; height: auto; }
  .remark-edit { flex: 0 1 auto; margin-top: 0; }
  .remark-edit a { min-height: 0; }

  /* Wochenend-Trennlinie im Karten-Layout: kraeftiger Balken oben. */
  tr.row-saturday > th[scope="row"],
  tr.row-special > th[scope="row"] {
    border-top: 4px solid var(--dlrg-red);
  }
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --page-bg: #101114;
    --card-bg: #1c1d21;
    --text: #eaeaea;
    --muted: #b0b0b0;
    --border: #3a3c42;
    --grid: #33353b;
    --sunday-bg: #43201f;
    --special-bg: #423715;
    --saturday-bg: #202226;
    --row-hover: #26282d;
    --slot-empty-text: #ddd;
    --slot-btn-bg: rgba(255, 255, 255, 0.05);
    --link: #f2a7a0;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.6);
  }
  input[type="text"], input[type="password"],
  input[type="time"], input[type="date"], select {
    background: #2a2b30;
    color: #eaeaea;
    border-color: #4a4c53;
  }
  .slot-empty a { color: #f0b8b4; }
  .remark-edit a { color: #f0b8b4; }
  .overview-chip {
    background: rgba(255, 255, 255, 0.07);
    color: #f0b8b4;
    border-color: rgba(240, 184, 180, 0.3);
  }
  .error-message {
    background: #3a1f1f;
    border-color: #7d3a3a;
    color: #f2c4c4;
  }
  .flash-success {
    background: #1e3320;
    border-color: #3f7d43;
    color: #bfe3c1;
  }
}

/* ===== Druck-Ansicht ===== */
@media print {
  @page { margin: 1cm; size: landscape; }
  body {
    background: #fff !important;
    color: #000 !important;
    font-size: 10pt;
  }
  .site-header,
  .admin-banner,
  .view-toggle,
  .year-nav,
  .overview,
  .hint,
  .skip-link,
  .slot-edit,
  .remark-edit,
  .remove-form,
  .flash-success,
  .error-message {
    display: none !important;
  }
  main { padding: 0; max-width: none; }
  .season-title {
    position: static;
    border: none;
    padding: 0 0 0.3cm 0;
    font-size: 14pt;
    background: #fff !important;
    color: #000 !important;
  }
  .table-scroll {
    overflow: visible !important;
    border: none !important;
    box-shadow: none !important;
    max-height: none !important;
  }
  table.wachplan {
    min-width: 0 !important;
    width: 100% !important;
    font-size: 8pt;
  }
  table.wachplan thead th {
    background: #ddd !important;
    color: #000 !important;
    position: static !important;
    border: 1px solid #000 !important;
  }
  table.wachplan tbody th[scope="row"] {
    position: static !important;
    background: #fff !important;
    color: #000 !important;
  }
  table.wachplan th,
  table.wachplan td {
    border: 1px solid #000 !important;
    color: #000 !important;
  }
  table.wachplan tbody tr:hover { background: none !important; }
  tr.row-sunday { background: #eee !important; }
  tr.row-special { background: #f4f4f4 !important; }
  tr.row-saturday { background: #fff !important; }
  .slot-empty a {
    border: none !important;
    background: none !important;
    color: transparent !important;
    font-size: 0;
    min-height: 0;
    padding: 0;
  }
  tr { page-break-inside: avoid; }
}