/* VetDream Event – gemeinsame Gestaltung (Webinterface und Team App).
   Farben nur über Variablen: Farbmodus (--t-*) per data-modus am <html>, Marke (--marke-*) je Mandant vom Layout.
   Keine festen Farben in Komponenten, keine <style>-Blöcke in Seiten. */

/* ---- Farbmodus: hell (Standard) ---- */
:root,
:root[data-modus="hell"] {
    --t-grund: #f6f7f6;
    --t-flaeche: #ffffff;
    --t-flaeche-2: #eceeed;
    --t-logo-grund: #f2f2f2;
    --t-text: #1c2221;
    --t-text-leise: #566260;
    --t-rand: #d3d9d7;
    --t-feld-rand: #6a7573;
    --t-fokus: #1f6fb5;
    --t-fehler: #a4262c;
    --t-fehler-grund: #fdeaea;
    --t-ok-grund: #e7f7ec;
    --t-ok-text: #14602d;
    --t-hinweis-grund: #fff4ce;
    --t-hinweis-text: #5c4300;
    --t-kopf-grund: var(--marke-primaer, #9aa5a3);
    --t-kopf-text: var(--marke-auf-primaer, #000000);
    --t-akzent: var(--marke-akzent, #33413f);
    --t-auf-akzent: #ffffff;
    --t-haupt: var(--marke-primaer, #8a9a96);
    --t-auf-haupt: var(--marke-auf-primaer, #000000);
    color-scheme: light;
}

/* ---- dunkel ---- */
:root[data-modus="dunkel"] {
    --t-grund: #121615;
    --t-flaeche: #1b2120;
    --t-flaeche-2: #242b2a;
    --t-logo-grund: #f2f2f2;
    --t-text: #e6ebea;
    --t-text-leise: #9fadaa;
    --t-rand: #34403e;
    --t-feld-rand: #7d8c89;
    --t-fokus: #6cb4f0;
    --t-fehler: #ff8a8f;
    --t-fehler-grund: #3d1a1c;
    --t-ok-grund: #16301f;
    --t-ok-text: #7fd49a;
    --t-hinweis-grund: #3b3115;
    --t-hinweis-text: #f3d98a;
    --t-kopf-grund: #1b2120;
    --t-kopf-text: #e6ebea;
    --t-akzent: var(--marke-primaer, #9aa5a3);
    --t-auf-akzent: #000000;
    --t-haupt: var(--marke-primaer, #8a9a96);
    --t-auf-haupt: var(--marke-auf-primaer, #000000);
    color-scheme: dark;
}

/* ---- automatisch: dunkel, wenn das Gerät dunkel eingestellt ist ---- */
@media (prefers-color-scheme: dark) {
    :root[data-modus="automatisch"] {
        --t-grund: #121615;
        --t-flaeche: #1b2120;
        --t-flaeche-2: #242b2a;
        --t-logo-grund: #f2f2f2;
        --t-text: #e6ebea;
        --t-text-leise: #9fadaa;
        --t-rand: #34403e;
        --t-feld-rand: #7d8c89;
        --t-fokus: #6cb4f0;
        --t-fehler: #ff8a8f;
        --t-fehler-grund: #3d1a1c;
        --t-ok-grund: #16301f;
        --t-ok-text: #7fd49a;
        --t-hinweis-grund: #3b3115;
        --t-hinweis-text: #f3d98a;
        --t-kopf-grund: #1b2120;
        --t-kopf-text: #e6ebea;
        --t-akzent: var(--marke-primaer, #9aa5a3);
        --t-auf-akzent: #000000;
        --t-haupt: var(--marke-primaer, #8a9a96);
        --t-auf-haupt: var(--marke-auf-primaer, #000000);
        color-scheme: dark;
    }
}

/* ---- Rotlicht: schwarzer Grund, nur Rottöne (schont die Nachtsicht im Wald) ---- */
:root[data-modus="rotlicht"] {
    --t-grund: #000000;
    --t-flaeche: #0d0000;
    --t-flaeche-2: #1a0000;
    --t-logo-grund: #2a0606;
    --t-text: #ff3b30;
    --t-text-leise: #e0443a;
    --t-rand: #5c0b07;
    --t-feld-rand: #c4352c;
    --t-fokus: #ff5a4f;
    --t-fehler: #ff6b61;
    --t-fehler-grund: #1a0000;
    --t-ok-grund: #1a0000;
    --t-ok-text: #ff5a4f;
    --t-hinweis-grund: #1a0000;
    --t-hinweis-text: #ff5a4f;
    --t-kopf-grund: #0d0000;
    --t-kopf-text: #ff3b30;
    --t-akzent: #e0443a;
    --t-auf-akzent: #000000;
    --t-haupt: #ff3b30;
    --t-auf-haupt: #000000;
    color-scheme: dark;
}

/* ---- Maße (für alle Modi gleich): Rundungen, Zielhöhen, Abstände ---- */
:root {
    --ve-r-karte: 12px;   /* Karten, Listenzeilen, Dialoge */
    --ve-r-knopf: 8px;    /* Knöpfe, Eingabefelder, Auswahlflächen */
    --ve-r-klein: 6px;    /* kleine Flächen: Marken, Triage-Streifen */
    --ve-r-chip: 999px;   /* Chips, Status, Balken */
    --ve-h: 44px;         /* kleinste Zielhöhe */
    --ve-h-haupt: 48px;   /* Hauptaktion */
}

/* ---- Grundlagen ---- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--t-grund);
    color: var(--t-text);
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 1rem;
    line-height: 1.5;
}

h1, h2, h3, p, dd, li { overflow-wrap: anywhere; }
h1 { font-size: 1.5rem; line-height: 1.25; margin: 0 0 .75rem; }
h2 { font-size: 1.15rem; margin: 0 0 .5rem; }
a { color: var(--t-akzent); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible { outline: 3px solid var(--t-fokus); outline-offset: 2px; }

/* ---- Rahmen ---- */
.ve-huelle { min-height: 100vh; display: flex; flex-direction: column; background: var(--t-grund); color: var(--t-text); }

.ve-kopf {
    display: flex; align-items: center; gap: .75rem; flex-wrap: wrap;
    padding: .5rem 1rem; background: var(--t-kopf-grund); color: var(--t-kopf-text);
    border-bottom: 1px solid var(--t-rand);
}
.ve-kopf a { color: inherit; text-decoration: none; }
.ve-kopf-marke { display: flex; align-items: center; gap: .6rem; font-weight: 600; min-height: var(--ve-h); }
/* Logo auf eigenem Grund: Die Linien des Logos haben die Markenfarbe und verschwänden sonst auf dem Kopf in derselben Farbe. */
.ve-kopf-logo { width: 40px; height: 40px; border-radius: 50%; object-fit: contain; background: var(--t-logo-grund); padding: 2px; box-sizing: border-box; }
.ve-kopf-nav { display: flex; gap: .25rem; margin-left: .5rem; }
.ve-kopf-nav a { padding: .6rem .75rem; min-height: 44px; display: inline-flex; align-items: center; border-radius: var(--ve-r-knopf); }
.ve-kopf-nav a:hover, .ve-kopf-nav a.active { background: var(--t-flaeche-2); color: var(--t-text); }
.ve-kopf-nav a.active { font-weight: 700; }
.ve-kopf-rechts { margin-left: auto; display: flex; align-items: center; gap: .75rem; font-size: .9rem; }
.ve-kopf-rechts a { display: inline-flex; align-items: center; min-height: var(--ve-h); padding: 0 .5rem; text-decoration: underline; }

.ve-kopf-nav a { white-space: nowrap; }
@media (max-width: 56rem) {
    /* Schmale Fenster: Marke und Abmelden in der ersten Zeile, das Menü darunter und seitlich wischbar */
    .ve-kopf { padding: .35rem .75rem; gap: .25rem .5rem; }
    .ve-kopf-marke { flex: 1 1 auto; min-width: 0; }
    .ve-kopf-rechts { order: 2; }
    .ve-kopf-rechts span { display: none; }
    .ve-kopf-nav { order: 3; flex: 1 0 100%; margin-left: 0; overflow-x: auto; scrollbar-width: none; padding-bottom: .15rem; }
    .ve-kopf-nav::-webkit-scrollbar { display: none; }
    .ve-inhalt { padding: 1rem .75rem 2rem; }
    h1 { font-size: 1.3rem; }
}
.ve-inhalt { flex: 1; width: 100%; max-width: 64rem; margin: 0 auto; padding: 1.25rem 1rem 2rem; }

/* ---- Bausteine ---- */
.ve-karte { background: var(--t-flaeche); border: 1px solid var(--t-rand); border-radius: var(--ve-r-karte); padding: 1rem 1.1rem; margin-bottom: 1rem; }
.ve-klein { font-size: .875rem; color: var(--t-text-leise); }
.ve-hinweis { color: var(--t-text-leise); }
.ve-fehler { color: var(--t-fehler); font-weight: 600; }

.ve-knopf {
    display: inline-flex; align-items: center; justify-content: center; gap: .4rem; text-align: center; line-height: 1.25;
    min-height: var(--ve-h); padding: .5rem 1rem; border-radius: var(--ve-r-knopf); cursor: pointer; font: inherit; text-decoration: none;
    border: 2px solid var(--t-feld-rand); background: var(--t-flaeche); color: var(--t-text);
}
/* Gesperrt: ruhige Fläche mit gestricheltem Rand statt Transparenz – die Beschriftung bleibt lesbar (Kontrast ≥ 4,5:1). */
.ve-knopf:disabled, .ve-knopf-primaer:disabled { background: var(--t-flaeche-2); color: var(--t-text-leise); border: 2px dashed var(--t-feld-rand, var(--t-rand)); cursor: not-allowed; filter: none; }
/* Zerstörende Aktion (Löschen, Verwerfen): immer Umriss in Fehlerfarbe, nie gefüllt */
.ve-knopf-gefahr { border-color: var(--t-fehler); color: var(--t-fehler); font-weight: 600; }
/* Reihe von Knöpfen: Abbrechen/Zurück zuerst (links), Hauptaktion zuletzt (rechts) */
.ve-aktionen { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }
.ve-knopf:hover { background: var(--t-flaeche-2); }
/* Hauptknopf überall in der Primärfarbe der Marke (wie in den Mockups), im Rotlicht rot. Bordeaux (--t-akzent) bleibt Akzent für Links und Markierungen. */
.ve-knopf-primaer { background: var(--t-haupt); color: var(--t-auf-haupt); border-color: var(--t-haupt); font-weight: 600; }
.ve-knopf-primaer:hover { background: var(--t-haupt); filter: brightness(1.08); }
/* Hauptaktion im Einsatz (z. B. „Neuer Hund“): Primärfarbe der Marke wie in den Mockups, im Rotlicht rot.
   Die Akzentfarbe (Bordeaux) bleibt Knöpfen im Webinterface vorbehalten; Rot ist im Einsatz Triage und Notfall. */
.ve-knopf-primaer.ve-knopf-haupt { background: var(--t-haupt); color: var(--t-auf-haupt); border-color: var(--t-haupt); }
.ve-knopf[aria-pressed="true"] { border-color: var(--t-akzent); box-shadow: inset 0 0 0 1px var(--t-akzent); font-weight: 600; }

.ve-modus-gruppe { display: flex; flex-wrap: wrap; gap: .5rem; margin: .5rem 0 0; }

.ve-formular { display: grid; gap: .9rem; max-width: 26rem; }
.ve-feld { display: grid; gap: .3rem; align-content: start; }
.ve-feld label { font-weight: 600; }
/* Eingabefelder überall gleich: 44 px hoch, Rand mit mindestens 3:1 Kontrast zum Grund */
.ve-feld input:where(:not([type="checkbox"], [type="radio"])), .ve-feld select, .ve-feld textarea, .ve-eingabe {
    min-height: var(--ve-h); padding: .5rem .7rem; font: inherit; border-radius: var(--ve-r-knopf);
    border: 2px solid var(--t-feld-rand); background: var(--t-flaeche); color: var(--t-text);
}
.ve-feld .invalid:where(input, select, textarea), .ve-eingabe[aria-invalid="true"] { border-color: var(--t-fehler); }
.ve-feld input::placeholder, .ve-feld textarea::placeholder, .ve-eingabe::placeholder { color: var(--t-text-leise); opacity: 1; }

.ve-anmelden { max-width: 28rem; margin: 8vh auto 0; padding: 0 1rem; }
.ve-anmelden-logo { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; display: block; margin: 0 auto 1rem; }

/* Leerzustand ohne Quelle (Regel 1: keine Ersatzwerte) */
.ve-keine-quelle {
    display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; padding: .75rem 1rem;
    background: var(--t-hinweis-grund); color: var(--t-hinweis-text); border-radius: var(--ve-r-knopf); border: 1px dashed var(--t-feld-rand);
}
.ve-badge { display: inline-block; padding: .1rem .55rem; border-radius: var(--ve-r-chip); font-size: .8rem; font-weight: 700; border: 1px solid currentColor; }

/* Ladegerüst: ruhige Blöcke, keine Dauer-Animation (Akku, Reduced Motion) */
.ve-lade { display: grid; gap: .6rem; }
.ve-lade-block, .ve-lade-text { background: var(--t-flaeche-2); border-radius: var(--ve-r-knopf); }
.ve-lade-block { height: 5rem; }
.ve-lade-text { height: .9rem; }
.ve-lade-text.kurz { width: 30%; }
.ve-lade-text.mittel { width: 60%; }
.ve-lade-text.lang { width: 90%; }
.ve-lade-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

.ve-verbindung { border: 2px solid var(--t-feld-rand); border-radius: var(--ve-r-karte); background: var(--t-flaeche); color: var(--t-text); padding: 1rem 1.25rem; max-width: 26rem; }
.ve-verbindung::backdrop { background: rgba(0, 0, 0, .55); }
.ve-verbindung-aktionen { display: flex; gap: .5rem; flex-wrap: wrap; }

/* Blazor: Fehleranzeige */
#blazor-error-ui { display: none; position: fixed; inset: auto 0 0 0; padding: .75rem 1rem; background: var(--t-hinweis-grund); color: var(--t-hinweis-text); z-index: 1000; }
#blazor-error-ui .dismiss { cursor: pointer; float: right; }

/* ---- Kacheln einer Sammelseite (z. B. Einstellungen) ---- */
.ve-kacheln { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: 1rem; margin-bottom: 1.5rem; }
.ve-kachel { display: flex; flex-direction: column; gap: .3rem; min-height: 5rem; margin: 0; color: inherit; text-decoration: none; }
.ve-kachel:hover, .ve-kachel:focus-visible { border-color: var(--marke-primaer); }
.ve-kachel strong { font-size: 1.05rem; }