/*
  Reißbrett — einzige Stylesheet-Datei (SPEC.md 16.1).
  Handgeschrieben, keine Utility-Klassen, keine Bibliothek. Mobile-first:
  Grundstile gelten für schmale Displays, @media (min-width: …) erweitert
  für breitere. Dark Mode ausschließlich über prefers-color-scheme, keine
  eigene Umschaltung (SPEC.md 16.1). Keine dekorativen Animationen.
*/

:root {
  --color-bg: #f7f5f0;
  --color-surface: #ffffff;
  --color-surface-raised: #fdfcf9;
  --color-text: #23211d;
  --color-text-muted: #5d5a52;
  --color-border: #d9d4c7;
  --color-accent: #3d5a6c;
  --color-accent-text: #ffffff;
  --color-focus: #1a56db;
  --color-danger: #7a2e20;
  --color-danger-bg: #f6e6e2;
  --color-status-frei-bg: #e3ede4;
  --color-status-frei-text: #234a2c;
  --color-status-vorgemerkt-bg: #f5ead0;
  --color-status-vorgemerkt-text: #5c4315;
  --color-status-belegt-bg: #dde6ee;
  --color-status-belegt-text: #1f3a52;
  --color-status-gesperrt-bg: #e6e3da;
  --color-status-gesperrt-text: #4c4a42;
  --color-status-rejected-bg: #f3ddd7;
  --color-status-rejected-text: #6e2416;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2.5rem;
  --radius: 0.6rem;
  --radius-small: 0.35rem;
  --max-width: 42rem;
  --tap-min: 2.75rem; /* ~44px Mindesttrefferfläche */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #191a17;
    --color-surface: #232420;
    --color-surface-raised: #2a2b26;
    --color-text: #eae7de;
    --color-text-muted: #b3ae9f;
    --color-border: #3c3c35;
    --color-accent: #9fc0d4;
    --color-accent-text: #12242e;
    --color-focus: #8ab4f8;
    --color-danger: #e3a08f;
    --color-danger-bg: #3c2620;
    --color-status-frei-bg: #24352a;
    --color-status-frei-text: #b7d9bd;
    --color-status-vorgemerkt-bg: #3a3320;
    --color-status-vorgemerkt-text: #e6cd8e;
    --color-status-belegt-bg: #24333f;
    --color-status-belegt-text: #b7cfe3;
    --color-status-gesperrt-bg: #33322c;
    --color-status-gesperrt-text: #c9c5b8;
    --color-status-rejected-bg: #3c2620;
    --color-status-rejected-text: #e3a08f;
  }
}

* {
  box-sizing: border-box;
}

html {
  color-scheme: light dark;
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
}

main {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: var(--space-4) var(--space-3) var(--space-5);
}

/* Demo-Modus-Hinweisstreifen, auf jeder Seite sichtbar (SPEC.md 22). */
.demo-banner {
  background: var(--color-status-vorgemerkt-bg);
  color: var(--color-status-vorgemerkt-text);
  text-align: center;
  font-weight: 600;
  padding: var(--space-2) var(--space-3);
}

h1, h2, h3 {
  line-height: 1.25;
  color: var(--color-text);
}

h1 {
  font-size: 1.5rem;
  margin: 0 0 var(--space-3);
}

h2 {
  font-size: 1.15rem;
  margin: var(--space-5) 0 var(--space-2);
}

a {
  color: var(--color-accent);
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
}

/* Erklärender Absatz direkt unter der Überschrift: sagt in einem Satz,
   wofür die Seite da ist (statt kommentarlos Formulare/Listen zu zeigen). */
.lead {
  color: var(--color-text-muted);
  margin: 0 0 var(--space-4);
}

/* Unauffälliger Verweis am Ende einer Seite, z. B. zur Historie von
   /termine aus — bewusst nicht Teil der Hauptnavigation. */
.muted-link {
  margin-top: var(--space-5);
}

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

/* Hauptnavigation: auf jeder angemeldeten Seite identisch (siehe
   templates/meta.html, {{define "nav"}}), damit sich die Anwendung beim
   Wechseln zwischen Bereichen nicht jedes Mal anders anfühlt. */
.site-nav {
  margin: 0 0 var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-border);
}

.site-nav__row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-3);
}

.site-nav__row a {
  display: inline-block;
  padding: var(--space-1) 0;
  font-weight: 600;
  text-decoration: none;
}

.site-nav__row a:hover {
  text-decoration: underline;
}

.site-nav__row--admin {
  margin-top: var(--space-2);
  font-size: 0.9rem;
}

.site-nav__row--admin a {
  color: var(--color-text-muted);
  font-weight: 400;
}

/* Eingeklappter Zusatzbereich, etwa "Von allen Geräten abmelden" im
   Profil — funktioniert ohne JavaScript (natives <details>). */
details {
  margin-top: var(--space-5);
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
}

details summary {
  cursor: pointer;
  font-weight: 600;
  min-height: var(--tap-min);
  display: flex;
  align-items: center;
}

details[open] summary {
  margin-bottom: var(--space-2);
}

/* Listen mit vertikalen Karten (SPEC.md 16.1: "Terminliste als vertikale
   Karten, nicht als Tabelle"). Gilt für alle Listenansichten, nicht nur
   /termine. */
main ul {
  list-style: none;
  margin: 0 0 var(--space-4);
  padding: 0;
  display: grid;
  gap: var(--space-3);
}

main ul[role="alert"] {
  display: block;
  list-style: disc;
  padding-left: var(--space-4);
  color: var(--color-danger);
}

main li {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--space-3);
}

.termin-card__meta {
  color: var(--color-text-muted);
  font-size: 0.9rem;
  margin: 0 0 var(--space-1);
}

/* Zustände: Text plus Hintergrund, nie Farbe allein (SPEC.md 16.1). */
.status {
  display: inline-block;
  padding: 0.15em 0.6em;
  border-radius: var(--radius-small);
  font-size: 0.85rem;
  font-weight: 600;
}

.status--frei,
.status--confirmed {
  background: var(--color-status-frei-bg);
  color: var(--color-status-frei-text);
}

.status--belegt {
  background: var(--color-status-belegt-bg);
  color: var(--color-status-belegt-text);
}

.status--vorgemerkt,
.status--pending {
  background: var(--color-status-vorgemerkt-bg);
  color: var(--color-status-vorgemerkt-text);
}

.status--gesperrt,
.status--cancelled {
  background: var(--color-status-gesperrt-bg);
  color: var(--color-status-gesperrt-text);
}

.status--rejected {
  background: var(--color-status-rejected-bg);
  color: var(--color-status-rejected-text);
}

/* Formulare: großzügige Trefferflächen, klare Beschriftung, funktionieren
   ohne JavaScript (SPEC.md 16.1). */
form {
  margin: var(--space-3) 0 0;
}

li form {
  margin-top: var(--space-3);
}

label {
  display: block;
  margin: var(--space-2) 0 var(--space-1);
  font-weight: 600;
}

label input[type="checkbox"] {
  width: auto;
  margin-right: var(--space-2);
}

input,
select,
textarea {
  width: 100%;
  min-height: var(--tap-min);
  padding: var(--space-2);
  font: inherit;
  color: var(--color-text);
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-small);
}

textarea {
  min-height: 5rem;
  resize: vertical;
}

button {
  display: inline-block;
  min-height: var(--tap-min);
  min-width: var(--tap-min);
  padding: var(--space-2) var(--space-4);
  margin: var(--space-2) var(--space-2) 0 0;
  font: inherit;
  font-weight: 600;
  color: var(--color-accent-text);
  background: var(--color-accent);
  border: none;
  border-radius: var(--radius-small);
  cursor: pointer;
}

button:hover {
  filter: brightness(1.08);
}

button:active {
  filter: brightness(0.95);
}

/* Größere Bildschirme: mehr Weißraum, Formularfelder nicht überbreit. */
@media (min-width: 40rem) {
  main {
    padding: var(--space-5) var(--space-4);
  }

  input,
  select,
  textarea {
    max-width: 28rem;
  }
}