/* ══════════════════════════════════════════════════════════════════
   Mein ImmoHelfer — Design-Tokens der nativen App-Shell (FE-1a, F-2)

   EINZIGE Quelle der Gestaltungswerte. Alle Werte sind gemessen aus der
   Alt-Shell (Nachweis fe1/nachweise/e0_altshell.md, Abschnitte 3 und 4;
   Alt-Quelle www-html/app/app.css). Anker je Block im Kommentar.

   - Gemeinsame Werte in :root.
   - Theme-Unterschiede NUR in [data-theme="marine"] / [data-theme="rot"]
     (Attribut am <html>, gesetzt von shell/theme-vorab.js und
     shell/theme.js). Alt: app.css:39-68 — Unterschiede genau --pri,
     --pri-hover, --pri-soft, --line, --topbar-rule, --logo.
   - Breakpoint: 900px (<=900 mobil, >=901 Desktop; Alt app.css:1205/1220).
     CSS-Variablen gelten in @media nicht; der Wert steht deshalb hier als
     Dokumentation (--bp-mobil) und woertlich in den @media-Regeln.
   ══════════════════════════════════════════════════════════════════ */

/* ─── Poppins, selbst gehostet (Alt app.css:9-36; Lizenz assets/fonts) ─ */
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/Poppins-Regular.woff2") format("woff2");
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../assets/fonts/Poppins-Medium.woff2") format("woff2");
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../assets/fonts/Poppins-SemiBold.woff2") format("woff2");
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../assets/fonts/Poppins-Bold.woff2") format("woff2");
}

:root {
  /* ── Gemeinsame Farben (in beiden Alt-Themes gleich, app.css:39-68) ── */
  --acc: #26A65B;
  --acc-hover: #1E8549;
  --acc-soft: rgba(38, 166, 91, .12);
  --surface: #f8f9fa;
  --flaeche: #fff;
  --text: #212529;
  --text-2: #333333;
  --muted: #6b7280;

  /* ── Status (app.css:96-100) ── */
  --ok: #198754;
  --warn: #ffc107;
  --err: #dc3545;
  --warn-text: #8a6100;
  --ok-soft: rgba(25, 135, 84, .10);
  --warn-soft: rgba(255, 193, 7, .18);
  --err-soft: rgba(220, 53, 69, .10);

  /* ── Feste Farben aus app.css (e0 4e) ── */
  --hover: rgba(17, 24, 39, .045);
  --schleier: rgba(17, 24, 39, .18);
  --schleier-dunkel: rgba(17, 24, 39, .35);
  --schleier-dialog: rgba(17, 24, 39, .28);
  --dunkel: #1f2937;                 /* Tooltip, Meldung */

  /* ── Alt-Modulfarben (cutover-nachlauf-2 Nacht, Alt-gegen-Neu): woertliche Werte der Alt-Modulseiten, nicht themeabhaengig ── */
  --alt-weiss: #fff;
  --alt-grau-knopf: #666;            /* GKR main.css:483 .btn-secondary, VV:230 Text */
  --alt-grau-knopf-hover: #555;      /* GKR main.css:489 */
  --alt-grau-flaeche: #f8f8f8;       /* GKR VV:186, Projektinfo main.css:209 */
  --alt-rot-gkr: #ce1126;            /* GKR Verlauf/Vergleich HH:244-252, VV:187-193 */
  --alt-gruen: #28a745;              /* GKR VV:204, :220-238 */
  --alt-gruen-flaeche: #e8f5e9;      /* GKR VV:219 */
  --alt-schatten: 0 2px 8px rgba(0, 0, 0, 0.1);         /* GKR main.css:58 --shadow */
  --alt-schatten-leicht: 0 2px 4px rgba(0, 0, 0, 0.05); /* GKR main.css:234 .form-section */
  /* 3-Angebote angebotsvergleich.html (= PDF angebot_pdf_generator COL): TC-Rot/-Gruen und Spaltenfarben Basis/Optimal/Premium */
  --alt-tc-rot: #E20000;             /* H:81 .pv-band, :97 Inklusiv-Titel, :135 Fuss */
  --alt-tc-gruen: #5a9320;           /* H:88 Kundenleiste, :93 Inklusiv-Linie, :137 Stoerer */
  --alt-av-basis: #2B6CB0;
  --alt-av-basis-flaeche: #e3eef8;
  --alt-av-basis-text: #1a4d80;
  --alt-av-optimal: #76b92b;
  --alt-av-optimal-flaeche: #f0f8e4;
  --alt-av-optimal-text: #5a9320;
  --alt-av-premium: #B8962E;
  --alt-av-premium-flaeche: #faf3dc;
  --alt-av-premium-text: #8a6f1a;
  --alt-av-kauf-text: #3d6a12;       /* H:47 st-kaufinteressent, :181 gal-badge-visu */
  --alt-av-bauherr-text: #2e7d32;    /* H:47 st-bauherr, :183 gal-badge-grundriss (Flaeche = --alt-gruen-flaeche) */
  --alt-av-einzig: #fef3c7;          /* H:121 .pv-si.u Verlauf */
  --alt-av-rahmen: #f4f4f2;          /* H:79 .pv-wrap */
  --alt-av-zuschnitt-grund: #1a1a1a; /* H:157 .crop-container */
  /* cutover-nachlauf-4 Nacht (Portale/Inserate, Alt-gegen-Neu), gleiche Regel: woertliche Alt-Werte, nicht themeabhaengig */
  --alt-info: #0dcaf0;               /* tc-design.css:27 --tc-info (Toast info :286, Kachel Portale PAH:164) */
  --alt-info-blau: #2980b9;          /* immowelt-verwaltung.html:617 Sync "Letzte Aktionen" */
  --alt-oauth1-flaeche: rgba(13, 202, 240, 0.15); /* portal-accounts.html:35 .badge-oauth1 */
  --alt-oauth1-text: #0a7c91;
  --alt-oauth2-flaeche: rgba(124, 58, 237, 0.1);  /* portal-accounts.html:36 .badge-oauth2 */
  --alt-oauth2-text: #7c3aed;
  --alt-meinestadt-flaeche: #ede7f6; /* automatik-ki.html:66 Badge meinestadt */
  --alt-meinestadt-text: #4527a0;
  --alt-toast-gruen: #2e7d32;        /* galerie-admin.html:140, hausvarianten.html:55, automatik-ki.html:159, inserate-konfiguration.html:287 */
  --alt-toast-rot: #c62828;          /* galerie-admin.html:141, hausvarianten.html:56, automatik-ki.html:158, inserate-konfiguration.html:296 */
  --alt-toast-blau: #1565c0;         /* galerie-admin.html:142 .toast.info */
  --alt-toast-dunkel: #323232;       /* hausvarianten.html:53 .toast (neutral); automatik-ki.html:156 #333 */
  --alt-vorschau-rahmen: #7db3e8;    /* inserate-konfiguration.html:713 .tp-lauf-vorschau border dashed */
  --alt-fs-paket-name: 1rem;         /* inserate-konfiguration-paket.html:38 .paket-name-edit (Alt-html ohne Groesse = 16px) */
  --alt-fs-paket-bez: 0.95rem;       /* inserate-konfiguration-paket.html:470 .item-bezeichnung */

  /* ── Schrift (app.css:110-116, e0 4b) ── */
  --font: Poppins, system-ui, -apple-system, sans-serif;
  --fs-body: 14px;
  --fs-klein: 12px;
  --fs-label: 11px;
  --fs-krume: 12.5px;
  --fs-zeile: 13px;
  --fs-titel: 14px;
  --fs-h-bereich: 20px;
  --fs-h-start: 24px;
  --fw-normal: 400;
  --fw-mittel: 500;
  --fw-halbfett: 600;
  --fw-fett: 700;
  --label-spacing: .05em;

  /* ── Layout (app.css:71-95, e0 4a) ── */
  --topbar-h: 52px;
  --sb-w: 280px;
  --sb-w-schmal: 64px;               /* eingeklappte Seitenleiste (Alt --sb-w-collapsed, cutover-nachlauf-2) */
  --drawer-w: 280px;
  --row-h: 36px;
  --pad: 24px;
  --gap-card: 16px;
  --gap-tile: 14px;
  --logo-w: 100px;
  --logo-h: 36px;
  --knopf-h: 34px;
  --avatar: 32px;
  --usermenue-w: 268px;
  --bp-mobil: 900px;                 /* nur Doku, s. Kopf */

  /* ── Radien (app.css:84-85, e0 4d) ── */
  --r-sm: 6px;
  --r-md: 10px;
  --r-chip: 20px;

  /* ── Schatten (e0 4e) ── */
  --schatten-menue: 0 6px 20px rgba(16, 24, 40, .10);
  --schatten-drawer: 8px 0 24px rgba(16, 24, 40, .14);
  --schatten-dialog: 0 18px 48px rgba(16, 24, 40, .24);
  --schatten-meldung: 0 6px 20px rgba(16, 24, 40, .22);
  --schatten-tooltip: 0 4px 12px rgba(0, 0, 0, .18);

  /* ── Marke Marine, THEME-UNABHAENGIG (KARTE-1 K-12: Login-Maske wie Alt admin-login.html :21-26,
        Werte 1:1 aus /css/mih-design.css). --pri folgt dem Theme, diese nicht. ── */
  --marine: #1B4A78;
  --marine-dunkel: #143A60;
  --marine-50: #EAF1F8;
  --marine-ring: rgba(27, 74, 120, .12);
}

/* ─── Theme marine (Vorgabe; Alt app.css:39-53) ───────────────────── */
:root,
[data-theme="marine"] {
  --pri: #1B4A78;
  --pri-hover: #143a5f;
  --pri-soft: rgba(27, 74, 120, .10);
  --line: #E5E7EB;
  --topbar-rule: 1px solid var(--line);
  --logo: url("../assets/logo/mih-logo-marine.svg");
}

/* ─── Theme rot (Alt app.css:54-68) ───────────────────────────────── */
[data-theme="rot"] {
  --pri: #E20000;
  --pri-hover: #b50000;
  --pri-soft: rgba(226, 0, 0, .10);
  --line: #C1C1C1;
  --topbar-rule: 3px solid var(--pri);
  --logo: url("../assets/logo/mih-logo-rot.svg");
}

/* Farbpunkte der Theme-Wahl zeigen immer die Theme-Farbe, unabhaengig vom
   aktiven Theme (Alt app.css:355-357). */
:root {
  --themepunkt-marine: #1B4A78;
  --themepunkt-rot: #E20000;
}

/* ─── Startseite / Kontextpanel (FE-2 TW-1a E3; Alt app.css:75, :86, :258-266, :622-660, :889, :973-995) ─ */
:root {
  --panel-w: 340px;
  --sheet-h: 66%;
  --fs-grosszahl: 34px;
  --fs-einstieg: 15px;
  --fs-zaehler: 10px;
  --fs-mini: 11.5px;
  --r-sheet: 16px;
  --schatten-sheet: 0 -8px 24px rgba(16, 24, 40, .16);
}

/* ─── Responsiv (Alt app.css:1202-1207) ──────────────────────────── */
@media (max-width: 1399px) {
  :root { --pad: 20px; }
}
@media (max-width: 900px) {
  :root { --pad: 16px; --logo-w: 128px; }
}