/*
 * direct2host Design-Tokens
 *
 * Quelle: Anhang A der direct2host-referenz.md (Stand 02.10.2026).
 *
 * ACHTUNG – NÄHERUNGSWERTE:
 * Die Farbwerte unten sind aus dem PDF-Export vom 02.10.2026 gemessen.
 * Der HTML-Export mit den exakten Design-Tokens liegt noch nicht vor; Till
 * liefert ihn nach. Sobald er eintrifft, werden ausschließlich die Werte in
 * diesem Block aktualisiert – nirgends sonst im Repo. Das ist der einzige
 * Ort für Farbwerte.
 *
 * Beim Eintreffen des Exports: alle Werte mit dem Kommentar
 * "NÄHERUNG" durch die exakten Werte ersetzen und diesen Block-Hinweis
 * entfernen.
 */

:root {
  /* ------------------------------------------------------------------
   * Farben (NÄHERUNG – gemessene Werte aus PDF-Export 02.10.2026)
   * ------------------------------------------------------------------ */

  /* Grüntöne */
  --gruen-900: #0a1f18; /* NÄHERUNG — Hintergrund dunkler Flächen (Hero, Demo, Footer) */
  --gruen-800: #0d2a1f; /* NÄHERUNG — Karten und Abstufungen auf dunklem Grund */
  --gruen-700: #184030; /* NÄHERUNG — Linien, Hover auf dunklem Grund */

  /* Gold */
  --gold-500: #d0b068; /* NÄHERUNG — Akzent, kursive Akzentwörter, primäre Schaltfläche, Logo */

  /* Creme */
  --creme-100: #f4f1e8; /* NÄHERUNG — Hintergrund heller Flächen, Gastseite */
  --creme-50: #faf9f5; /* NÄHERUNG — Karten auf hellem Grund, Formularflächen */

  /* Semantische Text-Tokens */
  --text-dunkel: var(--gruen-900); /* Text auf hellem Grund */
  --text-hell: var(--creme-100); /* Text auf dunklem Grund */

  /* Stimmungsfarben — zurückhaltend, immer mit Text kombiniert */
  --stimmung-gut-hintergrund: #2d5a3d; /* NÄHERUNG — gedecktes Grün */
  --stimmung-gut-rahmen: #3d7a50; /* NÄHERUNG */
  --stimmung-gut-text: var(--creme-100);
  --stimmung-mittel-hintergrund: #8a7040; /* NÄHERUNG — gedecktes Gold */
  --stimmung-mittel-rahmen: #a08848; /* NÄHERUNG */
  --stimmung-mittel-text: var(--creme-100);
  --stimmung-schlecht-hintergrund: #8b3030; /* NÄHERUNG — gedecktes Rot, zurückhaltend */
  --stimmung-schlecht-rahmen: #a03838; /* NÄHERUNG */
  --stimmung-schlecht-text: var(--creme-100);

  /* ------------------------------------------------------------------
   * Typografie
   * ------------------------------------------------------------------ */

  /*
   * Überschriften: Serife mit echter Kursiven, selbst gehostet.
   * Georgia als Fallback. Kein Google-Fonts-Server (Referenz 6.5).
   * Akzentwörter in Überschriften: <em> in Gold (s. utilities unten).
   */
  --font-ueberschrift: 'LibertinusSerif', Georgia, 'Times New Roman', serif;

  /*
   * Fließtext und Oberfläche: Systemschrift, keine Webfont-Ladung.
   */
  --font-text: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Zeilenabstände */
  --zeilenabstand-ueberschrift: 1.1;
  --zeilenabstand-text: 1.5;

  /* ------------------------------------------------------------------
   * Abstände (8-Punkte-Raster)
   * ------------------------------------------------------------------ */
  --abstand-1: 0.25rem; /*  4px */
  --abstand-2: 0.5rem; /*  8px */
  --abstand-3: 0.75rem; /* 12px */
  --abstand-4: 1rem; /* 16px */
  --abstand-6: 1.5rem; /* 24px */
  --abstand-8: 2rem; /* 32px */
  --abstand-12: 3rem; /* 48px */
  --abstand-16: 4rem; /* 64px */

  /* ------------------------------------------------------------------
   * Radien
   * ------------------------------------------------------------------ */
  --control-gap: var(--abstand-3);
  --form-gap: var(--abstand-6);
  --control-shadow: var(--schatten-karte);
  --radius-s: 0.25rem;
  --radius-m: 0.5rem;
  --radius-l: 1rem;

  /* ------------------------------------------------------------------
   * Schatten
   * ------------------------------------------------------------------ */
  --schatten-karte: 0 2px 8px rgba(10, 31, 24, 0.12);
  --schatten-overlay: 0 8px 24px rgba(10, 31, 24, 0.24);

  /* ------------------------------------------------------------------
   * Schaltflächen
   * ------------------------------------------------------------------ */
  --schaltflaeche-primaer-hintergrund: var(--gold-500);
  --schaltflaeche-primaer-text: var(--gruen-900);
  --schaltflaeche-primaer-hover: #bfa050; /* NÄHERUNG — Gold abgedunkelt */

  /* ------------------------------------------------------------------
   * Statusmarken (Posteingang, Referenz 7.1)
   * ------------------------------------------------------------------ */
  --status-neu: #d0b068; /* Gold */
  --status-gesehen: #6b8e78; /* NÄHERUNG — gedämpftes Grün */
  --status-in-bearbeitung: #a08848; /* NÄHERUNG — gedämpftes Gold */
  --status-geklaert: #3d7a50; /* NÄHERUNG — Grün */
  --status-kein-handlungsbedarf: #4a5e56; /* NÄHERUNG — gedämpft */

  /* ------------------------------------------------------------------
   * Barrierefreiheit
   * ------------------------------------------------------------------ */
  /* Gold auf Dunkelgrün: WCAG AA nur für große Schrift (≥18 pt / 24 px).
   * Fließtext auf dunklem Grund ist creme, nicht gold. (Referenz A.2) */
  --mindest-kontrast-hinweis: 'Gold auf Dunkelgrün ist AA für große Schrift, nicht für Fließtext';
}

/* ------------------------------------------------------------------
 * Utility: Kursives Goldwort in Überschriften
 * Verwendung: <h1>Gute Gastgeber hören <em>hin.</em></h1>
 * ------------------------------------------------------------------ */
h1 em,
h2 em,
h3 em {
  font-style: italic;
  color: var(--gold-500);
}

/* ------------------------------------------------------------------
 * Primäre Schaltfläche (Referenz A.4)
 * ------------------------------------------------------------------ */
.btn-primaer {
  display: inline-flex;
  align-items: center;
  gap: var(--abstand-2);
  padding: var(--abstand-3) var(--abstand-6);
  background: var(--schaltflaeche-primaer-hintergrund);
  color: var(--schaltflaeche-primaer-text);
  font-family: var(--font-text);
  font-weight: 600;
  border: none;
  border-radius: var(--radius-m);
  cursor: pointer;
  text-decoration: none;
}
.btn-primaer:hover {
  background: var(--schaltflaeche-primaer-hover);
}
.btn-primaer:focus-visible {
  outline: 2px solid var(--gold-500);
  outline-offset: 2px;
}

/* Sekundär: Text mit Pfeil, keine Fläche */
.btn-sekundaer {
  display: inline-flex;
  align-items: center;
  gap: var(--abstand-2);
  background: none;
  border: none;
  color: var(--text-dunkel);
  font-family: var(--font-text);
  font-weight: 500;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.btn-sekundaer-hell {
  color: var(--text-hell);
}

/* ------------------------------------------------------------------
 * Stimmungs-Karten (Referenz A.4)
 * ------------------------------------------------------------------ */
.stimmung-karte {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--abstand-2);
  padding: var(--abstand-4);
  border: 2px solid transparent;
  border-radius: var(--radius-l);
  background: var(--creme-50);
  cursor: pointer;
  font-family: var(--font-text);
  transition:
    border-color 0.1s,
    background 0.1s;
}
.stimmung-karte:focus-visible {
  outline: 2px solid var(--gold-500);
  outline-offset: 2px;
}

/* Gewählter Zustand: gefüllter Rahmen in Stimmungsfarbe */
.stimmung-karte[aria-checked='true'].stimmung--gut {
  border-color: var(--stimmung-gut-rahmen);
  background: var(--stimmung-gut-hintergrund);
  color: var(--stimmung-gut-text);
}
.stimmung-karte[aria-checked='true'].stimmung--mittel {
  border-color: var(--stimmung-mittel-rahmen);
  background: var(--stimmung-mittel-hintergrund);
  color: var(--stimmung-mittel-text);
}
.stimmung-karte[aria-checked='true'].stimmung--schlecht {
  border-color: var(--stimmung-schlecht-rahmen);
  background: var(--stimmung-schlecht-hintergrund);
  color: var(--stimmung-schlecht-text);
}

/* ------------------------------------------------------------------
 * Kanalwahl (Referenz A.4)
 * ------------------------------------------------------------------ */
.kanal-zeile {
  display: flex;
  align-items: flex-start;
  gap: var(--abstand-3);
  padding: var(--abstand-4);
  border: 2px solid var(--gruen-700);
  border-radius: var(--radius-m);
  background: var(--gruen-800);
  color: var(--text-hell);
  cursor: pointer;
}
.kanal-zeile input[type='radio'] {
  margin-top: var(--abstand-1);
  accent-color: var(--gold-500);
}
.kanal-zeile-titel {
  font-weight: 600;
  color: var(--text-hell);
}
.kanal-zeile-unterzeile {
  font-size: 0.875rem;
  color: var(--creme-100);
  opacity: 0.8;
}

/* ------------------------------------------------------------------
 * Statusmarke im Posteingang (Referenz A.4)
 * ------------------------------------------------------------------ */
.status-marke {
  display: inline-block;
  padding: 0.125rem var(--abstand-2);
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 600;
  font-family: var(--font-text);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: var(--gruen-800);
  color: var(--text-hell);
}
.status-marke--neu {
  background: var(--status-neu);
  color: var(--gruen-900);
}
.status-marke--gesehen {
  background: var(--status-gesehen);
}
.status-marke--in-bearbeitung {
  background: var(--status-in-bearbeitung);
}
.status-marke--geklaert {
  background: var(--status-geklaert);
}

/* ------------------------------------------------------------------
 * Versalien-Zwischenzeile (Referenz A.3)
 * ------------------------------------------------------------------ */
.versalien-zeile {
  font-family: var(--font-text);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--gold-500);
}

/* ------------------------------------------------------------------
 * Lob-Karte "So wird gute Arbeit sichtbar" (Referenz A.4, 7.4)
 * ------------------------------------------------------------------ */
.lob-karte {
  background: var(--gruen-800);
  border-radius: var(--radius-l);
  padding: var(--abstand-6);
  color: var(--text-hell);
  display: flex;
  flex-direction: column;
  gap: var(--abstand-4);
}