/* ==========================================================================
   LAUSITZ.APP DESIGN-TOKENS
   Zentrale Farb- und Gestaltungswerte. Diese Datei wird VOR dem jeweiligen
   Seiten-CSS geladen; neue Seiten und Refactorings nutzen die Variablen
   statt hartkodierter Hex-Werte.

   Verbindliche Werte (Beno/Claude, 24.07.2026):
   - Akzent ist #e8ff00 (nicht #ccff00 - der Ausreisser in organizer-shell
     wurde korrigiert).
   - App-Hintergrund ist #0f0f0f. Die Abweichungen #0a0a0a (Admin) und
     #090b11 (Jobs) sind am 06.08.2026 aufgeloest: beide Dateien nehmen den
     Token. Die Jobs-Seite hatte bis dahin ausserdem eine eigene, blaeulich-
     kuehle Palette (Flaechen rgba(18,23,34), Kopfzeile #141927, Text
     #f3f4f6, gedaempft #9aa4b2) - neben der neutral-grauen Datenbank-Ansicht
     sah sie aus wie ein anderes Produkt.
   ========================================================================== */

:root {
    /* Flaechen */
    --bg: #0f0f0f;            /* App-Hintergrund */
    --surface: #1a1a1a;       /* Karten, Panels, Platzhalterflaechen */
    --border: rgba(255, 255, 255, 0.1);

    /* Text */
    --text: #ffffff;
    --muted: #888888;

    /* Akzent */
    --accent: #e8ff00;
    --accent-contrast: #000000;   /* Text auf Akzentflaechen */
    --accent-soft: rgba(232, 255, 0, 0.15);  /* Chips, Badges, Hover-Flaechen */

    /* Panel-Flaeche (T-169). Der Wert stand in admin-analytics.css hart und
       in jobs-dashboard.css als --jd-panel/--jd-border - derselbe Wert,
       zweimal gepflegt. Bewusst NICHT --surface (#1a1a1a): Panels sind
       dunkler als Karten, das ist eine eigene Rolle. */
    --panel-surface: #111;
    --panel-border: #222;
}

/* ==========================================================================
   GEMEINSAME BASISKOMPONENTEN (T-169, 25.08.2026)

   Warum hier und nicht in einer eigenen Datei: eine neue Datei muesste in
   jeder HTML-Seite verlinkt werden. tokens.css wird bereits als ERSTES
   Stylesheet auf allen Seiten geladen, die diese Klassen benutzen - damit
   liegt die Basis ganz unten im Kaskaden-Stapel und jede Seitenregel, die
   spaeter kommt, gewinnt automatisch. Seiten weichen also nur noch ab,
   statt die Basis erneut zu formulieren.

   Aufgenommen wurde ausschliesslich, was in ALLEN bestehenden Definitionen
   identisch war (nachgemessen ueber getComputedStyle auf 13 Seiten). Was sich
   echt unterscheidet, bleibt in der jeweiligen Seitendatei stehen; die
   Begruendungen dazu stehen weiter unten.
   ========================================================================== */

.panel {
    background: var(--panel-surface, #111);
    border: 1px solid var(--panel-border, #222);
    border-radius: 12px;
}

/* .btn: gemeinsam ist nur die Bedienbarkeit, nicht das Aussehen. Farbe,
   Radius und Padding unterscheiden sich je Seite echt und bleiben dort.
   min-height gehoert hierher, weil das 44px-Tap-Ziel eine projektweite
   Konvention ist (CLAUDE.md) und bisher in vier von sieben Definitionen
   einzeln nachgetragen wurde - u.a. als T-136 in main.css, wo die
   Hero-Buttons ohne die Untergrenze auf 37px kamen. */
.btn {
    cursor: pointer;
    min-height: 44px;
}

/* Deaktivierter Zustand: in login.css und profil.css zeichengleich doppelt
   gepflegt. admin-analytics.css weicht bewusst ab (opacity .7, cursor wait -
   dort laufen Auswertungen, der Knopf ist "beschaeftigt", nicht gesperrt)
   und ueberschreibt das hier. */
.btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Untertitel unter der Seitenueberschrift. Identisch in admin-panel.css und
   organizer-shell.css. admin-analytics.css setzt bewusst einen helleren Ton
   und eine Lesebreite (max-width) und ueberschreibt das hier. */
.page-subtitle {
    color: #666;
    margin: 5px 0 0;
}

/* --------------------------------------------------------------------------
   BEWUSST NICHT ZUSAMMENGELEGT
   --------------------------------------------------------------------------
   .page-header - sieht nach einem Kandidaten aus (display:flex und
   justify-content:space-between stehen in admin-panel.css,
   admin-analytics.css und organizer-shell.css gleich), ist aber keiner:
   data-transaction.html erwartet die Klasse als schlichten Block und setzt
   nur margin-bottom. Diese Regel steht in einem <style>-Block IM HTML, also
   ausserhalb von public/css/ und damit ausserhalb dessen, was von hier aus
   ueberschrieben werden koennte. Ein globales display:flex wuerde Ueber-
   schrift und Untertitel dort nebeneinander legen statt untereinander.

   .back-link - drei Formen, die nur den Namen teilen: eine Chip-Form mit
   Rahmen (add-job.css, admin-analytics.css), eine Pillenform mit
   border-radius:999px (jobs-dashboard.css) und ein zentrierter Textlink
   ohne jeden Rahmen (login.css, display:block). Eine gemeinsame Basis mit
   display:inline-flex wuerde den Textlink in login.html aus der Zentrierung
   kippen. Dazu kommt: add-job.html laedt tokens.css gar nicht und koennte
   eine Basis von hier ohnehin nicht sehen.

   Ebenfalls aussen vor, weil sie tokens.css nicht laden und damit nicht
   erreichbar sind: add-job.html, add-event.html, 404.html, flyer-upload.html,
   organizer/index.html und signage-design/preview.html. Deren Definitionen
   bleiben unveraendert doppelt - das ist bekannt, nicht uebersehen.
   -------------------------------------------------------------------------- */