/* =========================================================================
   Advent Kalender Planner — Stylesheet

   Aufbau:
     1. Design-Tokens
     2. Reset & Grundlagen
     3. Layout-Shell (Header, Nav, Container, Footer)
     4. Flash-Meldungen
     5. Formulare
     6. Buttons
     7. Komponenten (Panel, Badge, Tabelle, Stat, Grid)
     8. Utilities
     9. Seitenspezifisches
    10. Responsive

   Farbschema ist unverändert übernommen. Alle Farbwerte leiten sich aus den
   vier Markenfarben plus der Textfarbe ab; es gibt keine weiteren Hex-Werte.
   ========================================================================= */

/* ============================ 1. Design-Tokens ============================ */

:root {
  /* --- Marke (unverändert) --- */
  --red: #8c1c13;
  --green: #2f5233;
  --white: #fdfdfb;
  --accent: #c7522a;
  --ink: #1f2933;

  /* --- Dieselben Farben als RGB-Tripel, damit rgba() sie nutzen kann --- */
  --red-rgb: 140, 28, 19;
  --green-rgb: 47, 82, 51;
  --white-rgb: 253, 253, 251;
  --accent-rgb: 199, 82, 42;
  --ink-rgb: 31, 41, 51;

  /* --- Flächen --- */
  --surface-page: linear-gradient(
    135deg,
    rgba(var(--green-rgb), 0.15),
    rgba(var(--red-rgb), 0.15)
  );
  --surface-card: var(--white);
  --surface-panel: rgba(var(--white-rgb), 0.7);
  --surface-tint-green: rgba(var(--green-rgb), 0.12);
  --surface-tint-green-strong: rgba(var(--green-rgb), 0.2);
  --surface-tint-red: rgba(var(--red-rgb), 0.12);
  --surface-tint-red-strong: rgba(var(--red-rgb), 0.2);
  --surface-tint-accent: rgba(var(--accent-rgb), 0.12);

  /* --- Rahmen --- */
  --border-soft: rgba(var(--green-rgb), 0.2);
  --border-input: rgba(var(--green-rgb), 0.35);
  --border-red: rgba(var(--red-rgb), 0.3);

  /* --- Text --- */
  --text: var(--ink);
  --text-muted: rgba(var(--ink-rgb), 0.78);
  --text-subtle: rgba(var(--ink-rgb), 0.72);
  --text-on-dark: var(--white);

  /* --- Abstände --- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-7: 1.75rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;

  /* --- Radien --- */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-pill: 999px;

  /* --- Schatten --- */
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-2: 0 10px 25px rgba(0, 0, 0, 0.08);
  --shadow-3: 0 12px 24px rgba(var(--red-rgb), 0.12);
  --focus-ring: 0 0 0 3px rgba(var(--accent-rgb), 0.35);

  /* --- Typografie --- */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --text-xs: 0.8125rem;
  --text-sm: 0.9375rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: clamp(1.25rem, 1.1rem + 0.7vw, 1.5rem);
  --text-2xl: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
  --text-stat: clamp(2rem, 1.4rem + 2.4vw, 2.5rem);
  --leading-tight: 1.2;
  --leading-normal: 1.55;
  --tracking-wide: 0.08em;
  --measure: 68ch;

  /* --- Layout --- */
  --container-max: 1200px;
  --container-pad: clamp(1rem, 4vw, 2rem);

  /* --- Bewegung --- */
  --transition: 0.2s ease;

  /* --- Caret für <select>, eingefärbt in --green --- */
  --select-caret: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%232f5233' d='M1.41 0 6 4.59 10.59 0 12 1.42 6 7.42 0 1.42z'/%3E%3C/svg%3E");
}

/* ========================= 2. Reset & Grundlagen ========================= */

* {
  box-sizing: border-box;
}

body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  background: var(--surface-page);
  color: var(--text);
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  -webkit-text-size-adjust: 100%;
}

h1,
h2,
h3 {
  line-height: var(--leading-tight);
  text-wrap: balance;
}

h1 {
  color: var(--red);
  font-size: var(--text-2xl);
  margin-top: 0;
}

h2 {
  font-size: var(--text-xl);
}

p {
  max-inline-size: var(--measure);
}

/* Ein sichtbarer Fokus für alles, was bedienbar ist. Bisher hatte nur
   `input` einen Fokusring, Buttons und Links gar keinen. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

@media (forced-colors: active) {
  :where(a, button, input, select, textarea, [tabindex]):focus-visible {
    outline-color: Highlight;
  }

  .btn,
  .panel,
  .badge {
    border: 1px solid currentColor;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* =========================== 3. Layout-Shell =========================== */

.skip-link {
  position: absolute;
  left: var(--space-2);
  top: var(--space-2);
  z-index: 100;
  transform: translateY(-200%);
  background: var(--white);
  color: var(--green);
  font-weight: 600;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-2);
  text-decoration: none;
}

.skip-link:focus-visible {
  transform: translateY(0);
}

header {
  background-color: var(--green);
  color: var(--text-on-dark);
  padding: var(--space-4) var(--container-pad);
}

/* Nur die Kopfnavigation: als Elementselektor griffen diese Regeln auch
   auf die Jahresnavigation der Kalenderseite über. */
header nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3);
  max-width: var(--container-max);
  margin: 0 auto;
}

.nav__menu {
  display: contents;
}

.nav-left,
.nav-right {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-4);
}

header nav a {
  text-decoration: none;
  color: var(--text-on-dark);
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: var(--space-1) 0;
}

header nav a:hover,
header nav a:focus-visible {
  text-decoration: underline;
}

/* Aktive Seite ist erkennbar, nicht nur durch die URL. */
header nav a[aria-current="page"] {
  text-decoration: underline;
  text-underline-offset: 5px;
  text-decoration-thickness: 2px;
}

.nav__toggle {
  display: none;
  align-items: center;
  gap: var(--space-2);
  background: rgba(var(--white-rgb), 0.14);
  color: var(--text-on-dark);
  border: 1px solid rgba(var(--white-rgb), 0.4);
  border-radius: var(--radius-md);
  font: inherit;
  font-weight: 600;
  min-height: 44px;
  padding: var(--space-2) var(--space-4);
  cursor: pointer;
}

.nav__toggle:hover {
  background: rgba(var(--white-rgb), 0.24);
}

.container {
  flex: 1;
  width: 100%;
  max-width: var(--container-max);
  margin: var(--space-8) auto;
  padding: 0 var(--container-pad);
}

.card {
  background: var(--surface-card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-2);
  padding: var(--space-8);
}

.card:focus {
  outline: none;
}

footer {
  text-align: center;
  padding: var(--space-4) var(--container-pad);
  color: var(--text-muted);
}

/* ========================= 4. Flash-Meldungen ========================= */

.flashes {
  display: grid;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.flash {
  padding: var(--space-3) var(--space-4);
  padding-left: var(--space-3);
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  border-left-width: 4px;
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}

/* Die Kategorien unterscheiden sich jetzt durch Farbe UND Zeichen — vorher
   trennten `info` und `success` nur 8 % Alpha derselben Grünfläche. */
.flash::before {
  font-weight: 700;
  line-height: inherit;
}

.flash.info {
  background: var(--surface-tint-green);
  color: var(--green);
  border-color: rgba(var(--green-rgb), 0.2);
  border-left-color: var(--green);
}

.flash.info::before {
  content: "i";
}

.flash.success {
  background: var(--surface-tint-green-strong);
  color: var(--green);
  border-color: rgba(var(--green-rgb), 0.3);
  border-left-color: var(--green);
}

.flash.success::before {
  content: "\2713";
}

.flash.warning {
  background: var(--surface-tint-accent);
  color: var(--accent);
  border-color: rgba(var(--accent-rgb), 0.3);
  border-left-color: var(--accent);
}

.flash.warning::before {
  content: "!";
}

.flash.danger {
  background: var(--surface-tint-red);
  color: var(--red);
  border-color: rgba(var(--red-rgb), 0.2);
  border-left-color: var(--red);
}

.flash.danger::before {
  content: "\2715";
}

/* ============================ 5. Formulare ============================ */

/* Kein globales `form { display: grid }` mehr — das erzwang ein Grid auch
   auf den Inline-Formularen in Tabellenzellen. Stapel werden explizit
   über .form-stack gesetzt. */

.form-stack {
  display: grid;
  gap: var(--space-4);
}

.form-inline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
}

label {
  font-weight: 600;
  color: var(--green);
}

input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
select,
textarea {
  font: inherit;
  color: inherit;
  width: 100%;
  min-height: 44px;
  padding: var(--space-3);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-input);
  background-color: var(--white);
}

/* <select> war bisher komplett ungestylt und stand als rohes
   Betriebssystem-Dropdown neben den gestalteten Feldern. */
select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: var(--space-10);
  background-image: var(--select-caret);
  background-repeat: no-repeat;
  background-position: right var(--space-3) center;
  background-size: 12px 8px;
  cursor: pointer;
}

/* `border-color: transparent` im Fokus ist entfallen: es ließ die Feldgrenze
   in Forced-Colors-Modi ganz verschwinden. */
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  box-shadow: var(--focus-ring);
}

input[type="checkbox"] {
  width: 1.15rem;
  height: 1.15rem;
  accent-color: var(--green);
  cursor: pointer;
  flex: none;
}

.field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
}

.field__label {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2);
}

.field__optional {
  font-weight: 400;
  font-size: var(--text-sm);
  color: var(--text-subtle);
}

.field__required {
  color: var(--red);
  font-weight: 700;
}

.field__hint {
  font-size: var(--text-sm);
  color: var(--text-subtle);
  max-inline-size: var(--measure);
}

.field__errors {
  margin: 0;
  padding-left: var(--space-5);
  color: var(--red);
  font-size: var(--text-sm);
}

.field--invalid .field__control,
.field--invalid input,
.field--invalid select {
  border-color: var(--red);
  box-shadow: 0 0 0 1px var(--red);
}

.field--checkbox > .field__label {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 44px;
  cursor: pointer;
}

.field--checkbox .field__label label {
  cursor: pointer;
  margin: 0;
}

/* Feld + „Passwort generieren" + „Sichtbar".

   Das Eingabefeld bekommt eine eigene Zeile: nebeneinander blieben in der
   520px breiten Formularspalte nur rund 140px übrig — zu wenig, um ein
   erzeugtes Passwort überhaupt lesen zu können. */
.input-group {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: start;
  gap: var(--space-2) var(--space-3);
}

.input-group > input {
  grid-column: 1 / -1;
  width: 100%;
}

/* Fehlerzusammenfassung oberhalb des Formulars, mit Sprunglinks aufs Feld. */
.error-summary {
  border: 1px solid rgba(var(--red-rgb), 0.3);
  border-left: 4px solid var(--red);
  background: var(--surface-tint-red);
  color: var(--red);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  margin-bottom: var(--space-4);
}

.error-summary__title {
  margin: 0 0 var(--space-2);
  font-weight: 600;
  color: var(--red);
  font-size: var(--text-base);
}

.error-summary__list {
  margin: 0;
  padding-left: var(--space-5);
}

.error-summary__list a {
  color: inherit;
}

/* ============================= 6. Buttons ============================= */

/* Ein Button-System statt fünf fast identischer Einzeldefinitionen mit
   sieben verschiedenen Paddings. Klassenbasiert, damit <button>, <a> und
   das von WTForms erzeugte <input type="submit"> gleich aussehen. */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 44px;
  padding: var(--space-3) var(--space-5);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  font: inherit;
  font-weight: 600;
  line-height: var(--leading-tight);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  width: auto;
  max-width: 100%;
  transition: background var(--transition), border-color var(--transition),
    color var(--transition);
}

.btn--primary {
  background: var(--red);
  color: var(--white);
}

.btn--primary:hover {
  background: var(--accent);
}

.btn--secondary {
  background: var(--surface-tint-green);
  color: var(--green);
  border-color: var(--border-input);
}

.btn--secondary:hover {
  background: var(--surface-tint-green-strong);
}

.btn--danger {
  background: var(--surface-tint-red);
  color: var(--red);
  border-color: var(--border-red);
}

.btn--danger:hover {
  background: var(--surface-tint-red-strong);
}

.btn--ghost {
  background: transparent;
  color: var(--green);
}

.btn--ghost:hover {
  text-decoration: underline;
}

.btn--sm {
  min-height: 36px;
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
}

.btn--block {
  width: 100%;
}

.btn[disabled],
.btn[aria-disabled="true"] {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Doppelklick-Schutz: nicht über `disabled`, weil das den name=value des
   Submit-Buttons aus dem Payload entfernen würde. */
.btn.is-busy {
  opacity: 0.6;
  pointer-events: none;
}

/* =========================== 7. Komponenten =========================== */

.panel {
  background: var(--surface-panel);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-soft);
  padding: var(--space-6);
  min-width: 0;
}

.panel--form {
  width: min(100%, 520px);
  justify-self: start;
}

.panel--wide {
  grid-column: 1 / -1;
}

.panel__title {
  margin-top: 0;
  color: var(--green);
}

.grid-auto {
  display: grid;
  /* min(…, 100%) verhindert, dass eine große Mindestbreite die Seite
     auf schmalen Displays aufweitet. */
  grid-template-columns: repeat(auto-fit, minmax(min(var(--min, 220px), 100%), 1fr));
  gap: var(--space-6);
}

.badge {
  display: inline-flex;
  align-items: center;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  background: rgba(var(--green-rgb), 0.15);
  color: var(--green);
  font-weight: 600;
  text-decoration: none;
}

.badge--red {
  background: var(--surface-tint-red);
  color: var(--red);
}

.badge--solid {
  background: var(--green);
  color: var(--white);
}

.badge--sm {
  font-size: var(--text-xs);
}

a.badge:hover {
  background: rgba(var(--green-rgb), 0.25);
}

a.badge--solid:hover {
  background: var(--green);
}

/* Zustandstext in Tabellen („Ja" / „Nein") */
.tag-assigned {
  color: var(--green);
  font-weight: 600;
}

.tag-free {
  color: var(--red);
  font-weight: 600;
}

/* Waagerecht scrollender Bereich für die breiten Tabellen. Bisher schoben
   die 7- und 9-spaltigen Tabellen die gesamte Seite zur Seite. */
.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--radius-md);
  max-width: 100%;
  /* Muss der umgebende Block für absolut positionierte Nachfahren sein —
     sonst beziehen sich die .visually-hidden-Texte in den Zellen auf das
     Dokument, entgehen dem Zuschnitt und verbreitern die ganze Seite. */
  position: relative;
}

.table-scroll:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

/* Waagerecht knapper als der übrige Abstandsraster: bei neun Spalten
   entscheidet das darüber, ob die Tabelle auf dem Desktop ohne Scrollen
   passt. */
.data-table th,
.data-table td {
  padding: var(--space-3) var(--space-2);
  border-bottom: 1px solid rgba(var(--green-rgb), 0.15);
  text-align: left;
  vertical-align: top;
}

.data-table th {
  color: var(--green);
  text-transform: uppercase;
  font-size: var(--text-xs);
  letter-spacing: 0.05em;
}

/* Nur wirklich zu lange Werte (E-Mail-Adressen) umbrechen. Bewusst
   `break-word` und nicht `anywhere`: Letzteres beeinflusst auch die
   Spaltenberechnung und zerlegt dann selbst kurze Wörter wie „Benutzer". */
.data-table td {
  overflow-wrap: break-word;
}

.data-table__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.stat {
  background: var(--surface-tint-green);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  text-align: center;
}

.stat--free {
  background: var(--surface-tint-red);
}

.stat__value {
  margin: 0;
  font-size: var(--text-stat);
  font-weight: 600;
  line-height: var(--leading-tight);
  color: var(--green);
}

.stat--free .stat__value {
  color: var(--red);
}

.stat__label {
  margin: var(--space-1) 0 0;
  color: var(--text-muted);
}

/* ============================ 8. Utilities ============================ */

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.muted {
  color: var(--text-muted);
}

.lede {
  color: var(--text-muted);
  max-inline-size: var(--measure);
}

.micro-label {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--text-subtle);
}

.stack > * + * {
  margin-top: var(--space-4);
}

/* ======================== 9. Seitenspezifisches ======================== */

/* --- Anmeldung --- */

.login-container {
  max-width: 420px;
  margin: 0 auto;
}

/* --- Übersicht (index) --- */

.summary {
  display: flex;
  gap: var(--space-6);
  margin: var(--space-6) 0;
  flex-wrap: wrap;
}

.summary .stat {
  flex: 1 1 180px;
}

.day-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(120px, 100%), 1fr));
  gap: var(--space-4);
}

.day-card {
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  text-align: center;
  font-weight: 600;
  border: 1px solid rgba(var(--green-rgb), 0.25);
  background: rgba(var(--white-rgb), 0.5);
}

.day-card--assigned {
  background: var(--surface-tint-red);
  border-color: rgba(var(--red-rgb), 0.25);
  color: var(--red);
}

.day-card--free {
  background: var(--surface-tint-green);
  border-color: rgba(var(--green-rgb), 0.25);
  color: var(--green);
}

.day-card__number {
  font-size: var(--text-lg);
  white-space: nowrap;
}

.legend {
  display: flex;
  gap: var(--space-4);
  margin-top: var(--space-6);
  flex-wrap: wrap;
}

.legend__item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
}

.legend__swatch {
  width: 14px;
  height: 14px;
  border-radius: 3px;
  flex: none;
}

.legend__swatch--assigned {
  background: rgba(var(--red-rgb), 0.6);
}

.legend__swatch--free {
  background: rgba(var(--green-rgb), 0.6);
}

/* --- Phasenübersicht (status) --- */

.status-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-4);
}

.phase-list {
  --min: 220px;
  gap: var(--space-5);
  margin-top: var(--space-8);
}

.phase-item {
  position: relative;
}

.phase-item.current {
  border-color: rgba(var(--red-rgb), 0.35);
  box-shadow: var(--shadow-3);
}

.phase-flag {
  position: absolute;
  top: -12px;
  left: 16px;
  background: var(--red);
  color: var(--white);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

.phase-item__title {
  margin: 0 0 var(--space-1);
  color: var(--green);
}

.phase-duration {
  font-weight: 600;
  margin-bottom: var(--space-3);
  color: var(--text-muted);
}

/* --- Profil --- */

.profile-layout {
  --min: 260px;
  gap: var(--space-8);
}

.profile-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--space-3);
}

.profile-list > li {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.profile-value {
  font-weight: 600;
  color: var(--green);
}

.status-form {
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  background: rgba(var(--green-rgb), 0.06);
  gap: var(--space-3);
}

.status-form .field--checkbox > .field__label {
  min-height: 36px;
}

/* --- Admin-Bereich --- */

.admin-dashboard {
  --min: 260px;
}

/* Bewusst einspaltig: Das Anlegen-Formular ist auf 520px begrenzt, eine
   zweite Rasterspalte daneben bliebe leer. Die Tabelle bekommt so die volle
   Kartenbreite und muss auf dem Desktop nicht mehr waagerecht scrollen. */
.admin-users-layout {
  display: grid;
  /* minmax(0, 1fr) statt der Vorgabe: Raster-Elemente haben min-width:auto
     und würden sonst von der breiten Tabelle aufgezogen, sodass die ganze
     Seite waagerecht scrollt statt nur der Tabellenbereich. */
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-6);
}

.info-list {
  list-style: none;
  padding: 0;
  margin: var(--space-4) 0 0;
  display: grid;
  gap: var(--space-2);
}

.info-list li {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  font-weight: 600;
}

/* --- Benutzer bearbeiten --- */

.edit-wrapper {
  max-width: 640px;
  margin: 0 auto;
}

/* --- Kalenderübersicht --- */

.year-nav {
  display: flex;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
  flex-wrap: wrap;
}

.assign-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-2);
  align-items: center;
  width: 100%;
}

.assign-form select {
  min-height: 36px;
  padding-block: var(--space-2);
}

/* ============================ 10. Responsive ============================ */

@media (max-width: 768px) {
  .nav__toggle {
    display: inline-flex;
  }

  .nav__menu {
    display: none;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-4);
    width: 100%;
  }

  .nav__menu.is-open {
    display: flex;
  }

  /* Ohne JavaScript bleibt die Navigation offen statt unerreichbar. */
  .no-js .nav__menu {
    display: flex;
  }

  .no-js .nav__toggle {
    display: none;
  }

  .nav-left,
  .nav-right {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
    width: 100%;
  }

  header nav a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
}

@media (max-width: 640px) {
  .container {
    margin-block: var(--space-6);
  }

  .card {
    padding: var(--space-5);
  }

  .panel {
    padding: var(--space-5);
  }

  /* Beide Buttons teilen sich die Zeile, statt nebeneinander zu quetschen. */
  .input-group {
    grid-template-columns: 1fr 1fr;
    justify-content: stretch;
  }

  .form-actions .btn {
    flex: 1 1 auto;
  }

  .status-header {
    align-items: flex-start;
  }
}