/* Marke „mt“ – private Hausverwaltung (mt.heidelogik.de), Stand 14.10.2026.
   Ruhig und hochwertig: Petrol als Hauptfarbe, Messing als feiner Akzent, warmer Papierton,
   Überschriften in Source Serif 4, Fließtext Source Sans 3 (aus dem Rohling). Kein Logo – der Name
   aus „Absender & Briefkopf“ ist der Schriftzug. */

@font-face { font-family: 'Source Serif 4'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/source-serif-4-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Source Serif 4'; font-style: italic; font-weight: 400; font-display: swap; src: url('fonts/source-serif-4-latin-400-italic.woff2') format('woff2'); }
@font-face { font-family: 'Source Serif 4'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/source-serif-4-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Source Serif 4'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/source-serif-4-latin-700-normal.woff2') format('woff2'); }

:root {
  --brand: #1f5560;          /* Petrol */
  --brand-dark: #163f47;
  --brand-tint: #e8f0f0;
  --brand-tint-2: #f3f7f6;
  --brand-soft: #a9c6c8;
  --ink: #1d2b2f;
  --body: #3a4446;
  --muted: #6c7577;
  --faint: #9aa2a3;
  --line: #e4e1da;           /* warme Linien */
  --line-soft: #efece6;
  --bg: #f5f3ee;             /* Papierton */
  --panel: #ffffff;
  --radius: 6px;
  --radius-lg: 10px;
  --shadow: 0 1px 2px rgba(29, 43, 47, .05), 0 1px 3px rgba(29, 43, 47, .06);
  --shadow-md: 0 6px 16px -6px rgba(29, 43, 47, .14), 0 2px 6px -2px rgba(29, 43, 47, .06);
  --mt-messing: #c9a96e;     /* Akzent: Linien, Markierungen – nie für kleine Schrift auf Weiß */
  --mt-leiste: #163f47;
  --mt-serif: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --bild-farbton: 188;       /* generierte Hausbilder in Petrol */
}
/* Dunkles Design: alle neutralen Töne neu setzen – sonst gewännen die hellen Werte oben. */
[data-theme="dark"] {
  --brand: #5fa8ae;
  --brand-dark: #a9d3d6;
  --brand-tint: #15292c;
  --brand-tint-2: #11201f;
  --brand-soft: #22403f;
  --ink: #f1f4f3;
  --body: #cdd6d5;
  --muted: #95a3a2;
  --faint: #66716f;
  --line: #2a3533;
  --line-soft: #222b2a;
  --bg: #0f1615;
  --panel: #161f1e;
  --mt-leiste: #0b1716;
}

/* Überschriften in Serifenschrift – ruhig, nicht in Großbuchstaben */
.topbar h1, .login-card h1, .modal-head h2, .modal-head #modalTitle, .es-titel, .portal-card h2, .portal-main h1 { font-family: var(--mt-serif); font-weight: 600; letter-spacing: -.2px; }
.topbar h1 { font-size: 27px; }
.kpi .value { font-family: var(--mt-serif); font-weight: 600; letter-spacing: -.3px; }
.section-title { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: var(--brand); display: flex; align-items: center; gap: 12px; }
.section-title::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.topbar { box-shadow: inset 0 -2px 0 var(--mt-messing); border-bottom: 0; }

/* Knöpfe */
.btn { font-weight: 600; }
.btn-primary { background: var(--brand); border-color: var(--brand); }
.btn-primary:hover { background: var(--brand-dark); border-color: var(--brand-dark); }

/* Seitenleiste: dunkles Petrol, Messing als Markierung */
.sidebar { background: var(--mt-leiste); border-right: 0; }
.sidebar .brand-mark { background: rgba(255, 255, 255, .06); color: var(--mt-messing); box-shadow: inset 0 0 0 1px rgba(201, 169, 110, .55); border-radius: 10px; }
.sidebar .brand-text strong { color: #fff; font-family: var(--mt-serif); font-weight: 600; font-size: 18px; letter-spacing: 0; }
.sidebar .brand-text small { color: rgba(255, 255, 255, .55); letter-spacing: .1em; }
.sidebar .nav-label { color: rgba(255, 255, 255, .4); letter-spacing: .12em; }
#nav button { color: rgba(255, 255, 255, .82); }
#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, .08); color: #fff; box-shadow: inset 3px 0 0 var(--mt-messing); }
#nav button.active svg { color: var(--mt-messing); }
.sidebar-foot, .user-box, #nav { border-color: rgba(255, 255, 255, .1); }
.sidebar-foot { color: rgba(255, 255, 255, .5); }
.sidebar-foot .foot-brand { color: var(--mt-messing); }
.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: var(--mt-messing); }
.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); }

/* Karten */
.panel, .kpi { border-color: var(--line); }
.kpi-icon { border-radius: 50%; }
.es-balken span { background: var(--mt-messing); }

/* Anmeldeseite: Petrol-Verlauf, Karte mit Messingkante */
#loginOverlay { background: radial-gradient(1200px 600px at 15% 0%, #2c6b70 0%, transparent 60%), linear-gradient(150deg, #163f47 0%, #1f5560 55%, #234f57 100%); }
[data-theme="dark"] #loginOverlay { background: linear-gradient(150deg, #0b1716 0%, #12302f 100%); }
.login-card { border-radius: 12px; border-top: 3px solid var(--mt-messing); box-shadow: 0 24px 60px -20px rgba(0, 0, 0, .45); }
.login-brand .brand-mark { background: var(--brand); color: var(--mt-messing); border-radius: 10px; }
.login-brand .brand-text strong { font-family: var(--mt-serif); font-weight: 600; font-size: 19px; letter-spacing: 0; }

/* Mieterportal */
.portal-top { box-shadow: inset 0 -2px 0 var(--mt-messing); }
.portal-brand .brand-mark { background: var(--brand); color: var(--mt-messing); }
.portal-brand strong { font-family: var(--mt-serif); }