/* Web-Font "Inter" (selbst gehostet, Phase 1 UI-Modernisierung, 20.08.2026,
   Auftraggeber-Entscheidung nach Ist-Analyse: "moderne Webfonts einführen").
   Ersetzt die bisherige reine System-Font-Vorgabe (Arial) - Inter ist speziell
   für Bildschirm-/UI-Lesbarkeit bei kleinen Schriftgrößen entworfen und in
   praktisch jedem modernen Browser bereits als eigenständige Schriftdatei
   gut unterstützt (WOFF2). Bewusst SELBST GEHOSTET statt per Google-Fonts-
   CDN-Link geladen (kein Laufzeit-Request an einen externen Server, passt
   zum projektweiten "keine externen URLs zur Laufzeit"-Grundsatz sowie dem
   bestehenden Hausstandard für Vendor-Bibliotheken: lokal + versioniert
   abgelegt statt CDN).

   EIN Variable-Font-File statt einzelner Schnitte: Googles aktuelle CSS2-
   Auslieferung (Stand 20.08.2026, geprüft) liefert für Inter 400/600/700
   identische Dateien - die "statischen" Schnitte sind serverseitig bereits
   Instanzen derselben Variable-Font-Datei. Deshalb hier bewusst EINE Datei
   (`fonts/Inter-Variable.woff2`, WOFF2 v2, verifiziert per `file`) mit
   `font-weight: 100 900` (Gewichtsbereich statt Einzelwert) statt drei
   separaten @font-face-Blöcken - der Browser interpoliert daraus jeden
   angeforderten Schnitt (400/600/700 im Bestand genutzt) korrekt selbst.
   `font-display: swap` verhindert unsichtbaren Text während des Ladens
   (kurzzeitig Arial, dann Inter) statt eines Lade-Flashs. `--font-main`
   behält Arial als zweiten Fallback - fehlt die Font-Datei, fällt der
   gesamte Bestand automatisch und unauffällig auf die bisherige Optik
   zurück, nichts bricht. */
@font-face {
  font-family: 'Inter';
  src: url('fonts/Inter-Variable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --color-primary: #FF6900;
  --color-dark:    #373A36;
  --color-light:   #F2F2F2;
  --color-white:   #FFFFFF;
  --font-main:     'Inter', Arial, sans-serif;

  /* Statusfarben – Basis fuer Badges/Alerts in components.css.
     Werte uebernommen aus dem bereits uebereinstimmenden Bestand
     (alle vier management-Module + backoffice/genussrechte-Badges). */
  --color-ok:        #155724;
  --color-ok-bg:      #d4edda;
  --color-warn:      #856404;
  --color-warn-bg:    #fff3cd;
  --color-danger:    #721c24;
  --color-danger-bg:  #f8d7da;
  --color-info:      #004085;
  --color-info-bg:    #cce5ff;

  /* Radius-/Schatten-Skala (Phase 2, 20.08.2026; Werte in Phase 5 bewusst
     kräftiger nachgezogen, 20.08.2026 - Auftraggeber-Feedback nach Phase 2-4:
     "kaum ein Unterschied erkennbar"). Zwei Stufen statt verstreuter
     Einzelwerte: klein für Buttons/Formularfelder/Alerts, groß für Container
     (Cards/Kacheln/Tabellen). Zweischichtiger "Card"-Schatten (eng+diffus)
     statt eines einzelnen harten Schlagschattens. Da components.css/die vier
     Phase-4-Apps bereits durchgängig auf diese Variablen umgestellt sind,
     wirkt eine reine Werteänderung hier sofort überall gleichzeitig - kein
     erneuter Rollout in den Apps nötig. */
  --radius-sm: 8px;
  --radius-lg: 14px;
  --shadow-card: 0 1px 3px rgba(16, 24, 32, 0.06), 0 10px 28px rgba(16, 24, 32, 0.08);
  --shadow-card-hover: 0 4px 10px rgba(16, 24, 32, 0.10), 0 18px 40px rgba(16, 24, 32, 0.16);

  /* Helle Markenfarbe-Tönung (Phase 5, 20.08.2026) - formalisiert einen im
     Bestand bereits ad-hoc mehrfach hartkodiert verwendeten Hover-/Akzent-
     Farbton (u.a. .kachel:hover, .accordion-header.open, .tag:hover in
     mehreren Apps), hier erstmals als zentrales Token nutzbar. */
  --color-primary-bg: #FFF3EB;
}

body {
  font-family: var(--font-main);
  font-size: 14px;
  line-height: 1.5; /* Inter braucht mehr Zeilenhöhe als Arial für gute Lesbarkeit - bisher kein Wert gesetzt (Browser-Default ~1.2, für Fließtext/Tabellen zu eng) */
  color: var(--color-dark);
  background-color: var(--color-white);
}

.page-title {
  font-family: var(--font-main);
  font-size: 28px;
  font-weight: bold;
  color: var(--color-primary);
}

h1 {
  font-family: var(--font-main);
  font-size: 20px;
  font-weight: bold;
  color: var(--color-dark);
}

h2 {
  font-family: var(--font-main);
  font-size: 18px;
  font-weight: bold;
  color: var(--color-dark);
}

button,
.btn {
  background-color: var(--color-primary);
  color: var(--color-white);
  font-family: var(--font-main);
  font-weight: bold;
  padding: 8px 16px;
  border-radius: var(--radius-sm);
  border: none;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(16, 24, 32, 0.12);
  transition: background-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

button:hover,
.btn:hover {
  background-color: var(--color-dark);
  color: var(--color-white);
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(16, 24, 32, 0.2);
}

button:active,
.btn:active {
  transform: translateY(0);
  box-shadow: 0 1px 2px rgba(16, 24, 32, 0.12);
}

.bg-light {
  background-color: var(--color-light);
}

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

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