/* Marke Krähenhorst – Farben, Schriften und Formsprache von kraehenhorst.com (Stand 14.10.2026).
   Wird nach styles.css geladen und überschreibt nur Tokens und wenige Bausteine. */

@font-face { font-family: 'Work Sans'; font-style: normal; font-weight: 300; font-display: swap; src: url('fonts/work-sans-latin-300-normal.woff2') format('woff2'); }
@font-face { font-family: 'Work Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/work-sans-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Work Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/work-sans-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Work Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/work-sans-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Work Sans'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/work-sans-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/barlow-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/barlow-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/barlow-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/barlow-latin-700-normal.woff2') format('woff2'); }

:root {
  --brand: #00519e;          /* Krähenhorst-Blau (Logo, Überzeilen, Akzentstriche) */
  --brand-dark: #003b74;
  --brand-tint: #e7eef6;
  --brand-tint-2: #f3f6fa;
  --brand-soft: #aac4df;
  --ink: #303441;            /* Dunkelgrau-Blau der Website (Fußbereich, Überschriften) */
  --body: #333333;
  --muted: #676b75;
  --faint: #9a9da6;
  --line: #e2e4e8;
  --line-soft: #eeeff2;
  --bg: #f5f5f5;             /* hellgraue Flächen wie auf der Website */
  --panel: #ffffff;
  --radius: 3px;             /* Knöpfe und Felder: kaum gerundet */
  --radius-lg: 4px;
  --kh-leiste: #303441;
  --kh-akzent-hell: #4f95da; /* Blau auf dunklem Grund (Kontrast) */
  --kh-schrift-titel: 'Work Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
}
/* Dunkles Design: alle neutralen Töne neu setzen – sonst gewännen die hellen Werte von oben (gleiche Spezifität, spätere Datei). */
[data-theme="dark"] {
  --brand: #4f95da;
  --brand-dark: #a8caec;
  --brand-tint: #14263a;
  --brand-tint-2: #121a24;
  --brand-soft: #1f3b58;
  --ink: #f1f5f9;
  --body: #cbd5e1;
  --muted: #94a3b8;
  --faint: #64748b;
  --line: #2b333e;
  --line-soft: #232a33;
  --bg: #0f141a;
  --panel: #171d25;
  --kh-leiste: #12161d;
}

body { font-family: 'Barlow', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif; }
h1, h2, h3, .topbar h1, .section-title, .modal-head, .login-card h1, .es-titel, .kpi .value, thead th, .portal-card h2 { font-family: var(--kh-schrift-titel); }

/* Seitentitel wie die Überschriften der Website: dünn, Großbuchstaben, kurzer blauer Strich darunter */
.topbar h1 { font-weight: 300; text-transform: uppercase; letter-spacing: .03em; font-size: 25px; color: var(--ink); }
.topbar h1::after { content: ''; display: block; width: 52px; height: 3px; background: var(--brand); margin-top: 9px; }
.topbar-sub { margin-top: 8px; }

/* Abschnittstitel als blaue Überzeile (wie „KRÄHENHORST BAUUNTERNEHMEN“ auf der Website) */
.section-title { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--brand); }

/* Knöpfe: Work Sans, Großbuchstaben, leicht gesperrt, fast eckig */
.btn { font-family: var(--kh-schrift-titel); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; font-size: 12.5px; }
.btn-sm { font-size: 11.5px; }
.btn-primary { box-shadow: none; }

/* Seitenleiste dunkel wie der Fußbereich der Website, Logo in Weiß */
.sidebar { background: var(--kh-leiste); border-right: 0; }
.sidebar-foot, .user-box, #nav { border-color: rgba(255, 255, 255, .1); }
.user-box .ub-name { color: #fff; }
.user-box .ub-role { color: rgba(255, 255, 255, .55); }
.sidebar .btn { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .28); box-shadow: none; }
.sidebar .btn:hover { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .5); }
.sidebar .brand-logo { width: 176px; max-width: 100%; max-height: none; }
.sidebar .nav-label { color: rgba(255, 255, 255, .42); }
#nav button { color: rgba(255, 255, 255, .84); font-family: var(--kh-schrift-titel); font-weight: 400; font-size: 14.5px; }
#nav button svg { color: rgba(255, 255, 255, .45); }
#nav button:hover { background: rgba(255, 255, 255, .06); color: #fff; }
#nav button:hover svg { color: #fff; }
#nav button.active { background: rgba(255, 255, 255, .09); color: #fff; font-weight: 500; box-shadow: inset 3px 0 0 var(--kh-akzent-hell); }
#nav button.active svg { color: var(--kh-akzent-hell); }
.sidebar .brand-unter { color: rgba(255, 255, 255, .55); letter-spacing: .2em; }
.sidebar .brand-text strong { color: #fff; }
.sidebar .brand-text small { color: rgba(255, 255, 255, .55); }
.sidebar-foot { border-top-color: rgba(255, 255, 255, .1); color: rgba(255, 255, 255, .5); }
.sidebar-foot .foot-brand { color: #fff; }
.sidebar .theme-toggle { color: rgba(255, 255, 255, .8); }
.sidebar .theme-toggle:hover { background: rgba(255, 255, 255, .06); color: #fff; }
.sidebar .theme-toggle svg { color: rgba(255, 255, 255, .45); }
.sidebar .muted, .sidebar small { color: rgba(255, 255, 255, .55); }
.sidebar a { color: #fff; }

/* Generiertes Hausbild im Krähenhorst-Blau statt zufälliger Farben (Farbton in Grad, siehe util.js) */
:root { --bild-farbton: 209; }

/* Karten und Kacheln: kaum gerundet, ruhige Schatten */
.kpi-icon, .brand-mark, .es-haken { border-radius: 3px; }
.kpi .value { font-weight: 500; letter-spacing: -.3px; }

.login-brand .brand-logo { width: 210px; max-height: none; }
.portal-brand .brand-logo { width: 150px; max-height: none; }

/* Anmeldeseite: hellgrau mit dem feinen Punktraster der Website, blaue Oberkante */
#loginOverlay { background: #f5f5f5 radial-gradient(#d6d8dd 1px, transparent 1.2px) 0 0 / 22px 22px; }
[data-theme="dark"] #loginOverlay { background: #0f141a radial-gradient(#232a33 1px, transparent 1.2px) 0 0 / 22px 22px; }
.login-card { border-radius: 4px; border-top: 3px solid var(--brand); }
.login-card h1 { font-weight: 300; text-transform: uppercase; letter-spacing: .03em; }

/* Mieterportal */
.portal-top { border-bottom: 3px solid var(--brand); }
.portal-card h2 { font-weight: 400; text-transform: uppercase; letter-spacing: .04em; font-size: 17px; }