/* Wildbadmühle Mitarbeiterportal – Design 2b, Variante A „Hell wie die Website“ (freigegeben 15.10.2026).
   Eigene Gestaltungsschicht über dem fertigen Portal-Build (Quellcode fehlt). Ändert nur das Aussehen, keine Funktion.
   Liegt unter /brand/ci/, eingebunden in index.html nach der Portal-CSS. Farben gelten im hellen Modus auch dann,
   wenn unter Administration › Designs andere Werte gespeichert sind (Portal setzt diese als Inline-Variablen). */

@font-face { font-family: "WBM Archivo"; src: url("fonts/archivo-latin-wdth-normal.woff2") format("woff2"); font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; }
@font-face { font-family: "WBM Nunito Sans"; src: url("fonts/nunito-sans-latin-300-normal.woff2") format("woff2"); font-weight: 300; font-display: swap; }
@font-face { font-family: "WBM Nunito Sans"; src: url("fonts/nunito-sans-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "WBM Nunito Sans"; src: url("fonts/nunito-sans-latin-700-normal.woff2") format("woff2"); font-weight: 500 700; font-display: swap; }
@font-face { font-family: "WBM Nunito Sans"; src: url("fonts/nunito-sans-latin-800-normal.woff2") format("woff2"); font-weight: 800 900; font-display: swap; }

:root {
  --wbm-brand: #A60C22; --wbm-brand-ink: #710B18; --wbm-night: #231F1D; --wbm-esp: #2F2E2D; --wbm-esp2: #5D5C5B;
  --wbm-sand: #98764D; --wbm-cream: #FFFCFC; --wbm-cream-deep: #F3ECE4; --wbm-line: #D9D1C7; --wbm-tint: #F6E3E5;
  --wbm-head: "WBM Archivo", "Arial Narrow", Arial, sans-serif;
  --wbm-body: "WBM Nunito Sans", "Segoe UI", Arial, sans-serif;
  font-family: var(--wbm-body) !important;
}

/* Farben nur im hellen Modus erzwingen; der dunkle Modus behält seine Farben, bekommt aber Schriften und Formen. */
:root:not([data-theme=dark]) {
  --primary: #A60C22 !important; --accent: #A60C22 !important; --accent-light: #F6E3E5 !important;
  --surface: #FFFCFC !important; --panel: #FFFFFF !important; --elevated: #FFFFFF !important; --dialog: #FFFFFF !important;
  --sidebar: #FFFFFF !important; --topbar: #FFFFFF !important; --buttonText: #FFFFFF !important;
  --text: #2F2E2D !important; --muted: #5D5C5B !important; --line: #D9D1C7 !important;
  --success: #2E6B3F !important; --success-light: #EAF3EC !important; --warning: #8A5A00 !important; --warning-light: #F7EEDC !important;
  --danger: #A60C22 !important; --danger-light: #F6E3E5 !important;
}

/* Schrift: alles zum Lesen in Nunito Sans (ersetzt die festen „Wildbad Avenir“-Angaben im Portal) */
body, button, input, select, textarea, .nav-group > h2, .nav-group > summary, .management-metrics strong { font-family: var(--wbm-body); }

/* Überschriften: Archivo schmal, kräftig, Versalien */
.page-content h1, .page-header h1, .today-hero h1, .login-form h1, .login-layout h1 {
  font-family: var(--wbm-head) !important; font-stretch: 72%; font-weight: 800; text-transform: uppercase;
  font-size: clamp(2rem, 1.4rem + 2.2vw, 3.25rem); line-height: .95; letter-spacing: 0; color: var(--text);
}
.page-content h2, .content-band h2, .today-card h2, .today-card > header h2, .dialog-header h2, [role=dialog] h2 {
  font-family: var(--wbm-head) !important; font-stretch: 72%; font-weight: 800; text-transform: uppercase;
  font-size: 1.45rem; line-height: 1; letter-spacing: 0;
}
.page-content h3 { font-family: var(--wbm-head); font-stretch: 72%; font-weight: 800; letter-spacing: 0; }
.management-metrics strong { font-family: var(--wbm-head) !important; font-stretch: 85%; }

/* Kopfzeile */
.topbar { border-bottom: 1px solid var(--line); }
.topbar-title { font-family: var(--wbm-head); font-stretch: 72%; font-weight: 800; font-size: 1.15rem; text-transform: uppercase; letter-spacing: .03em; }

/* Seitenleiste: Original-Logo, Bereichstitel in Archivo, aktiver Punkt zart rot mit roter Kante */
.brand img { content: url("logo.svg"); width: auto !important; height: 46px !important; object-fit: contain; }
.brand strong { font-family: var(--wbm-head); font-stretch: 72%; font-weight: 800; text-transform: uppercase; letter-spacing: .02em; font-size: 1.05rem; }
.brand small { font-size: 13px; color: var(--muted); }
.nav-group > h2, .nav-group > summary { font-family: var(--wbm-head) !important; font-stretch: 100%; font-weight: 800 !important; letter-spacing: .1em !important; color: var(--muted); }
.navigation a { border-radius: 0 !important; }
.navigation a:hover { background: var(--wbm-cream-deep); }
:root:not([data-theme=dark]) .navigation a.active { background: var(--wbm-tint) !important; color: var(--wbm-brand) !important; box-shadow: inset 3px 0 0 var(--wbm-brand); font-weight: 700; }

/* Knöpfe: eckig, Archivo, Versalien; Rot nur für Hauptknöpfe */
.button { border-radius: 2px !important; font-family: var(--wbm-head); font-weight: 800; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; }
.button:not(.button-primary) { border-color: var(--text); }
/* In Tabellen (Sortier-Köpfe, Zeilenaktionen) normale Schrift: Versalien wären in schmalen Spalten zu breit */
.desktop-data .button, table .button { font-family: var(--wbm-body); text-transform: none; letter-spacing: 0; font-size: 14px; font-weight: 700; }
.desktop-data th .button, table th .button { border-color: transparent; }
.button-primary:hover:not(:disabled) { background: var(--wbm-brand-ink) !important; border-color: var(--wbm-brand-ink) !important; box-shadow: none; }
.button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; }

/* Flächen: eckig, ohne Schatten, warme Linien */
.content-band, .today-card, .login-form, .schedule-access-card, .schedule-access-write-card, .data-list, .simple-list,
.server-grid > *, .technical-metrics > *, .management-metrics > *, [role=dialog], .dialog-header, .notice-info,
[class*="-card"], [class*="-panel"] { border-radius: 2px !important; box-shadow: none !important; }
.management-metrics > * { background: var(--surface); }
input:not([type=checkbox]):not([type=radio]):not([type=range]), select, textarea { border-radius: 2px !important; }

/* Anmeldeseite */
.login-layout { background: var(--wbm-cream) !important; border-top: 6px solid var(--primary); }
.login-form { border-color: var(--line); }