/* ===========================================================================
   app.css — globale App-Ebene ÜBER Bootstrap 5.

   Farben, Abstände, Radien kommen ausschließlich aus tokens.css (ADR-075).
   Hier steht nur, WO sie hinwirken. Keine Farb-Literale.

   Diese Datei ist bewusst global und nicht scoped: sie überschreibt Bootstrap
   (.btn, .card, .form-control) und definiert die Status-Klassen, die von
   PostStatusDisplay in ZWEI Komponenten gerendert werden — Scoped CSS in einer
   davon würde in der anderen nicht greifen.
   =========================================================================== */

/* ---- Webfonts, selbst gehostet (ADR-075 Punkt 7, erledigt 07.08.2026; Body-Font auf
   Inter vereinheitlicht 07.08.2026 — siehe ENTSCHEIDUNGEN.md) --
   Fraunces (Display, nur Schnitt 600 aufrecht — die Landingpage braucht keinen zweiten) und
   Inter (Fließtext, 400/600/700) liegen als woff2 unter wwwroot/fonts/, Lizenz siehe
   docs/licenses/OFL-*.txt. KEIN <link> zu fonts.googleapis.com/fonts.gstatic.com: das würde bei
   jedem Seitenaufruf die IP des Besuchers in die USA übertragen — für eine deutsche Seite mit
   Impressum und AVV die bekannte Abmahnlage (LG München I, 3 O 17493/20). Die Dateien selbst
   sind einmalig von Google Fonts bezogene, lizenzkonform redistribuierbare OFL-Schriften —
   das ist Beschaffung, kein Laufzeit-Zugriff auf einen Drittanbieter.

   Inter statt Libre Franklin, damit Landingpage/App und die serverseitig generierten Social-
   Media-Bilder (SkiaSharp, ADR-039, PanelFonts.cs) dieselbe Schriftfamilie zeigen — eine
   Markenstimme statt zwei. Das ist eine EIGENE woff2-Kopie, unabhängig von den ttf-Ressourcen,
   die PanelFonts.cs für die Bild-Komposition einbettet: Server-Rendering und Browser sind zwei
   Zwecke, zwei Kopien sind korrekt.

   Nur „latin"-Subset (deckt Deutsch inkl. Umlaute/ß über die Latin-1-Supplement-Ränge ab) —
   kyrillisch/vietnamesisch/griechisch fehlen bewusst, dafür sind die Dateien klein (15–35 KB). */
@font-face {
    font-family: 'Fraunces';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('fonts/fraunces-600.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122;
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('fonts/inter-400.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('fonts/inter-600.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('fonts/inter-700.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---- Grundfläche -------------------------------------------------------
   Die Wurzel-Schriftgröße ist der Maßstab der GESAMTEN Oberfläche, nicht nur des Textes:
   jedes rem in Bootstrap und in unserem CSS hängt daran — Innenabstände, Knopfhöhen,
   Abstände. Das ist Absicht und der Grund, warum hier überhaupt etwas steht.

   ZWEI REGELN, beide aus Fehlern gelernt:

   1. NIE nach unten. Die erste Fassung dieser Datei setzte 0.875rem (14px) und machte damit
      die ganze App 12,5 % zu klein — nicht nur die Schrift. Bei 110 % Browser-Zoom passte
      sie wieder; das war die Rechenprobe.
   2. NIE in px, immer in Prozent. Ein fester px-Wert überschreibt die Schriftgröße, die der
      Nutzer in seinem Browser eingestellt hat — jemand, der auf 20px steht, braucht das.
      106.25 % heißt „6,25 % mehr als dein Standard", was auch immer der ist.

   Der Wert selbst kommt aus Owner-Rückmeldung am Standard von 16px: lesbar, aber einen
   Hauch zu klein. 106.25 % → 17px bei Standard-Einstellung. Wer kleinere Schrift für ein
   einzelnes Element braucht, nimmt --text-sm/--text-xs an der Komponente, nicht hier. */
html {
    font-size: 106.25%;
}

html, body {
    font-family: var(--font-body);
    background-color: var(--color-page);
    color: var(--color-text);
}

a, .btn-link {
    color: var(--color-brand-ink);
}

.content {
    padding-top: var(--space-4);
}

h1:focus {
    outline: none;
}

/* Seitentitel in der Display-Schrift, sparsam: Überschriften und die Wortmarke, nichts sonst.

   Diese Regel war auf .page gescopt — die Landingpage war von ADR-075 ausgenommen, und ihr
   Hero ist ihr auffälligstes Element. Der angekündigte Fall ist eingetreten (Nachtrag
   07.08.2026): die Abgrenzung ist aufgehoben, der .page-Präfix fällt weg. Grund ist die
   Anmeldestrecke aus ADR-066 — Landingpage, /start und Redeem liegen im PublicLayout, die App
   im MainLayout; ohne gemeinsame Schrift wechselt mitten im Signup die Stimme.

   Auf den öffentlichen Seiten auch h2: die Landingpage ist überschriftengetrieben, ein serifer
   Hero über durchgehend serifenlosen Abschnitten sähe nach Versehen aus. Hinter dem Login gibt
   es keine h2-Regel, weil es dort kaum h2 gibt.

   GRÖSSE bleibt getrennt. Die öffentlichen Seiten setzen ihre eigene (Home.razor.css: h1 auf
   clamp(2.2rem, 5.2vw, 3.6rem)); --text-xl würde den Hero auf 1,5rem zusammenstauchen. */
.page h1,
.public-page h1,
.public-page h2 {
    font-family: var(--font-display);
}

.page h1 {
    font-size: var(--text-xl);
    letter-spacing: -0.01em;
}

/* ---- Knöpfe (Bootstrap-Retheme über --bs-btn-*) -------------------------
   Bootstrap 5.3 baut JEDEN Knopf-Zustand aus Custom Properties (--bs-btn-bg,
   --bs-btn-hover-*, --bs-btn-active-*, --bs-btn-disabled-*). Wir überschreiben deshalb
   die Variablen und nicht die Farb-Deklarationen: eine Roh-Überschreibung erwischt nur
   die Zustände, die man selbst aufzählt — die erste Fassung dieser Datei vergaß so
   `disabled` und den Checked-Zustand der Umschalter (btn-check + label).

   WARUM das hier stehen muss (ADR-075, Befund aus dem Smoke): Bootstraps
   Kontextklassen sind KLASSENNAMEN, keine Farb-Literale. Eine Literal-Suche findet sie
   nicht — und deshalb überlebten 42 Verwendungen die erste Token-Scheibe und brachten
   Fremdfarben mit, am auffälligsten das Cyan von .btn-info an „Planen".

   Hover-/Active-Abstufungen kommen per color-mix aus DEMSELBEN Token, damit kein
   zweiter Farbwert entsteht, der auseinanderdriften kann. */
.btn {
    /* Fokus-Ring in Markengold statt Bootstrap-Blau, für alle Varianten. */
    --bs-btn-focus-shadow-rgb: 205, 168, 81;
}

/* Primär = Gold. Die EINE Hauptaktion je Fläche. */
.btn-primary {
    --bs-btn-color: var(--color-on-brand);
    --bs-btn-bg: var(--color-brand);
    --bs-btn-border-color: var(--color-brand);
    --bs-btn-hover-color: var(--color-on-brand);
    --bs-btn-hover-bg: var(--color-brand-hover);
    --bs-btn-hover-border-color: var(--color-brand-hover);
    --bs-btn-active-color: var(--color-on-brand);
    --bs-btn-active-bg: var(--color-brand-hover);
    --bs-btn-active-border-color: var(--color-brand-hover);
    --bs-btn-disabled-color: var(--color-on-brand);
    --bs-btn-disabled-bg: var(--color-brand);
    --bs-btn-disabled-border-color: var(--color-brand);
}

.btn-outline-primary {
    --bs-btn-color: var(--color-brand-ink);
    --bs-btn-border-color: var(--color-brand);
    --bs-btn-hover-color: var(--color-on-brand);
    --bs-btn-hover-bg: var(--color-brand);
    --bs-btn-hover-border-color: var(--color-brand);
    --bs-btn-active-color: var(--color-on-brand);
    --bs-btn-active-bg: var(--color-brand);
    --bs-btn-active-border-color: var(--color-brand);
    --bs-btn-disabled-color: var(--color-text-subtle);
    --bs-btn-disabled-border-color: var(--color-border);
}

/* Neutral = der Arbeitspferd-Knopf (27 Verwendungen: Werkzeugleisten, Umschalter,
   „Abbrechen", „Zurückziehen"). Bewusst ruhig — er soll NICHT um Aufmerksamkeit
   konkurrieren. Der Checked-Zustand der Umschalter ist die dunkle Kachel. */
.btn-outline-secondary {
    --bs-btn-color: var(--color-text-muted);
    --bs-btn-border-color: var(--color-border-strong);
    --bs-btn-hover-color: var(--color-text);
    --bs-btn-hover-bg: var(--color-surface-muted);
    --bs-btn-hover-border-color: var(--color-border-strong);
    --bs-btn-active-color: var(--color-surface);
    --bs-btn-active-bg: var(--color-text);
    --bs-btn-active-border-color: var(--color-text);
    --bs-btn-disabled-color: var(--color-text-subtle);
    --bs-btn-disabled-border-color: var(--color-border);
}

/* Zerstörend = unser Rot. Die Semantik „rot = unwiderruflich" ist richtig und bleibt;
   nur der Farbwert kommt jetzt aus dem Token statt von Bootstrap. */
.btn-outline-danger {
    --bs-btn-color: var(--color-danger);
    --bs-btn-border-color: var(--color-danger);
    --bs-btn-hover-color: var(--color-surface);
    --bs-btn-hover-bg: var(--color-danger);
    --bs-btn-hover-border-color: var(--color-danger);
    --bs-btn-active-color: var(--color-surface);
    --bs-btn-active-bg: var(--status-failed-fg);
    --bs-btn-active-border-color: var(--status-failed-fg);
    --bs-btn-disabled-color: var(--color-text-subtle);
    --bs-btn-disabled-border-color: var(--color-border);
}

.btn-danger {
    --bs-btn-color: var(--color-surface);
    --bs-btn-bg: var(--color-danger);
    --bs-btn-border-color: var(--color-danger);
    --bs-btn-hover-color: var(--color-surface);
    --bs-btn-hover-bg: var(--status-failed-fg);
    --bs-btn-hover-border-color: var(--status-failed-fg);
    --bs-btn-active-color: var(--color-surface);
    --bs-btn-active-bg: var(--status-failed-fg);
    --bs-btn-active-border-color: var(--status-failed-fg);
    --bs-btn-disabled-color: var(--color-surface);
    --bs-btn-disabled-bg: var(--color-danger);
    --bs-btn-disabled-border-color: var(--color-danger);
}

/* Vorwärts/bestätigend = unser Grün. --status-published-fg als FLÄCHE (nicht
   --status-published): der hellere Ton erreicht mit weißem Text nur ~4,0:1, der
   dunklere 7,3:1. Die Badge-Fläche und die Knopf-Fläche brauchen verschiedene Töne,
   weil auf der einen dunkler und auf der anderen weißer Text steht. */
.btn-success {
    --bs-btn-color: var(--color-surface);
    --bs-btn-bg: var(--status-published-fg);
    --bs-btn-border-color: var(--status-published-fg);
    --bs-btn-hover-color: var(--color-surface);
    --bs-btn-hover-bg: color-mix(in srgb, var(--status-published-fg) 85%, black);
    --bs-btn-hover-border-color: color-mix(in srgb, var(--status-published-fg) 85%, black);
    --bs-btn-active-color: var(--color-surface);
    --bs-btn-active-bg: color-mix(in srgb, var(--status-published-fg) 85%, black);
    --bs-btn-active-border-color: color-mix(in srgb, var(--status-published-fg) 85%, black);
    --bs-btn-disabled-color: var(--color-surface);
    --bs-btn-disabled-bg: var(--status-published-fg);
    --bs-btn-disabled-border-color: var(--status-published-fg);
}

.btn-outline-success {
    --bs-btn-color: var(--status-published-fg);
    --bs-btn-border-color: var(--status-published);
    --bs-btn-hover-color: var(--color-surface);
    --bs-btn-hover-bg: var(--status-published-fg);
    --bs-btn-hover-border-color: var(--status-published-fg);
    --bs-btn-active-color: var(--color-surface);
    --bs-btn-active-bg: var(--status-published-fg);
    --bs-btn-active-border-color: var(--status-published-fg);
    --bs-btn-disabled-color: var(--color-text-subtle);
    --bs-btn-disabled-border-color: var(--color-border);
}

/* Terminieren = unser Blau, dasselbe wie der Status „Geplant". Damit heißt Blau in der
   ganzen App dasselbe: „hat einen Termin". Ersetzt Bootstraps Cyan. */
.btn-info {
    --bs-btn-color: var(--color-surface);
    --bs-btn-bg: var(--status-scheduled-fg);
    --bs-btn-border-color: var(--status-scheduled-fg);
    --bs-btn-hover-color: var(--color-surface);
    --bs-btn-hover-bg: color-mix(in srgb, var(--status-scheduled-fg) 85%, black);
    --bs-btn-hover-border-color: color-mix(in srgb, var(--status-scheduled-fg) 85%, black);
    --bs-btn-active-color: var(--color-surface);
    --bs-btn-active-bg: color-mix(in srgb, var(--status-scheduled-fg) 85%, black);
    --bs-btn-active-border-color: color-mix(in srgb, var(--status-scheduled-fg) 85%, black);
    --bs-btn-disabled-color: var(--color-surface);
    --bs-btn-disabled-bg: var(--status-scheduled-fg);
    --bs-btn-disabled-border-color: var(--status-scheduled-fg);
}

/* .btn-warning bekommt bewusst NICHT Gold (abweichend vom ersten Entwurf): Gold heißt in
   Richtung C „die eine Hauptaktion", und die beiden Verwendungen sind KEINE Hauptaktionen
   und haben zudem entgegengesetzte Bedeutung — ConnectPanel „{Kanal} trennen" ist ein
   zerstörender Bestätigungsknopf, AdminTenants „Sperre aufheben" eine korrigierende
   Betreiber-Aktion. Ein Farbwert kann beides nicht richtig ausdrücken. Bis Scheibe 2 die
   Klassen trennt (trennen → danger, Sperre aufheben → neutral) tragen beide den
   neutral-kräftigen Ton: „bewusst tun", ohne falschen Alarm und ohne falsche Betonung. */
.btn-warning, .btn-outline-dark {
    --bs-btn-color: var(--color-text);
    --bs-btn-bg: transparent;
    --bs-btn-border-color: var(--color-text);
    --bs-btn-hover-color: var(--color-surface);
    --bs-btn-hover-bg: var(--color-text);
    --bs-btn-hover-border-color: var(--color-text);
    --bs-btn-active-color: var(--color-surface);
    --bs-btn-active-bg: var(--color-text);
    --bs-btn-active-border-color: var(--color-text);
    --bs-btn-disabled-color: var(--color-text-subtle);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--color-border);
}

/* ---- Karten / Flächen -------------------------------------------------- */
.card {
    background-color: var(--color-surface);
    border-color: var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

/* ---- Formularfelder ---------------------------------------------------- */
.form-control, .form-select {
    border-color: var(--color-border-strong);
}

.form-control:focus, .form-select:focus {
    border-color: var(--color-brand);
}

/* Platzhalter app-weit deutlich heller als der Eingabetext (P4): ein „z. B."-Platzhalter darf nie
   wie ein eingetragener Wert wirken. Bootstraps Default (~75 % Deckung auf Fast-Schwarz) las sich
   auf hellem Grund zu dunkel. Gilt konsistent für Input und Textarea. */
.form-control::placeholder {
    color: var(--color-text-placeholder);
    opacity: 1; /* Firefox reduziert die Deckung sonst zusätzlich */
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

.darker-border-checkbox.form-check-input {
    border-color: var(--color-border-strong);
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid var(--color-success-border);
}

.invalid {
    outline: 1px solid var(--color-danger-border);
}

.validation-message {
    color: var(--color-danger);
}

/* ---- Fokus: EIN Ring für alles ----------------------------------------
   Qualitätsboden (ADR-075): Tastatur-Fokus ist überall sichtbar. :focus-visible statt
   :focus, damit ein Mausklick keinen Ring hinterlässt. Der Bootstrap-Doppelschatten
   bleibt für die Formular-Elemente, weil er dort innen/außen trennt. */
:focus-visible {
    outline: 2px solid var(--color-brand);
    outline-offset: 2px;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem var(--color-surface), 0 0 0 0.25rem var(--color-brand);
}

/* ---- Status-Badges: EINE Quelle für alle fünf Ansichten ----------------
   Gerendert über PostStatusDisplay.CssClass — Panel, Liste, Grid, FB-Feed und Kalender
   lesen damit zwangsläufig dieselben Token (ADR-075, Entscheidung 5). Vorher lieferte
   PostStatusDisplay Bootstraps bg-secondary/bg-success/bg-info/bg-primary: eine zweite,
   konkurrierende Farbquelle neben der eigenen Palette. */
.status-badge {
    border: 1px solid transparent;
    font-weight: 500;
}

.status-badge.is-draft     { background-color: var(--status-draft-bg);     color: var(--status-draft-fg);     border-color: var(--status-draft); }
.status-badge.is-approved  { background-color: var(--status-approved-bg);  color: var(--status-approved-fg);  border-color: var(--status-approved); }
.status-badge.is-scheduled { background-color: var(--status-scheduled-bg); color: var(--status-scheduled-fg); border-color: var(--status-scheduled); }
.status-badge.is-published { background-color: var(--status-published-bg); color: var(--status-published-fg); border-color: var(--status-published); }
.status-badge.is-discarded { background-color: var(--status-discarded-bg); color: var(--status-discarded-fg); border-color: var(--status-discarded); }
.status-badge.is-failed    { background-color: var(--status-failed-bg);    color: var(--status-failed-fg);    border-color: var(--status-failed); }

/* ---- Umgebungs-Kennung ------------------------------------------------
   .env-badge/.env-led standen hier global, weil die Kapsel über der Arbeitsfläche lag und
   theoretisch überall hätte auftauchen können. Sie hat genau eine Fundstelle behalten und
   sitzt jetzt im Fuss der Schiene — damit gehört sie ins Scoped-CSS der Komponente
   (NavMenu.razor.css: .rail-env). Global stünde sie nur noch als toter Selektor da. */

/* ---- Blazor-Fehlerleiste ---------------------------------------------- */
.blazor-error-boundary {
    background: var(--color-danger);
    padding: var(--space-4);
    color: var(--color-rail-fg-strong);
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

/* ---- Bewegung: Vorliebe respektieren ---------------------------------- */
@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;
    }
}