/* ===================== Evolta-Designschicht (wird als letzte CSS-Datei geladen) =====================
   Marke je Abteilung über body[data-mandant]: 'bau' = Evolta Personal (Elektro).
   Eine weitere Branche (z.B. Holzbau, Metallbau) bekommt hier nur einen eigenen Token-Block,
   dazu Logo in js/marke.js und Stammdaten in src/db.js (MANDANTEN_DEFAULT).
   Grundsätze wie auf der Webseite: Gelb auf Graphit, dunkle Schrift auf Gelb, kantige Ecken,
   keine farbigen Leuchtflächen und kein Glühen. */

/* ---------- Marken-Token ---------- */
:root {
  --ak: #FFCC00; --ak-rgb: 255, 204, 0; --ak-btn: #FFCC00; --ak-btn-2: #F2C200; --ak-btn-h: #FFD83D;
  --auf-ak: #111111;              /* Schrift und Symbole auf der Akzentfarbe */
  --radius: 8px;
  --licht-1: transparent;
  --bg: #0B0B0C; --app: #0F0F11; --sb: #121214;
  --flaeche: #151517; --flaeche-b: #141416; --flaeche-2: #1B1B1E; --flaeche-3: #232327; --feld: #0C0C0E; --knopf: #1B1B1E;
}
html[data-theme="light"] {
  --bg: #ECEBE7; --app: #F5F4F0; --sb: #FBFAF7;
  --flaeche-2: #F6F5F1; --flaeche-3: #ECEBE6; --feld: #F8F7F3;
  --licht-1: transparent;
}
body, body[data-mandant="bau"] {
  --ink: #FFCC00; --ak-grafik: #FFCC00; --fokus: #FFCC00; --ring: #FFCC00;
  --ak-bg: rgba(var(--ak-rgb), .09); --ak-ln: rgba(var(--ak-rgb), .45); --primary-glow: transparent;
  --licht-2: transparent;
}
html[data-theme="light"] body, html[data-theme="light"] body[data-mandant="bau"] {
  --ink: #7A5A00; --ak-grafik: #C79A00; --ring: #7A5A00;
  --ak-bg: rgba(var(--ak-rgb), .16); --ak-ln: rgba(176, 130, 0, .55);
}

/* ---------- Hintergrund: ruhig, ohne Lichtflächen ---------- */
.bg { background: var(--app); }
.bg::after { display: none; }

.mt-gruss::before, .vm-portal-kopf::before, .lg-licht { display: none; }
/* Begrüssung: gelbe Kante links statt Lichtschein */
.mt-gruss { box-shadow: inset 3px 0 0 var(--ak); }

/* ---------- Seitenleiste ---------- */
.sidebar.glass { background: var(--sb); }
.nav-item, .nav-main .nav-item { border-radius: 6px; }
.nav-item.active { box-shadow: inset 0 0 0 1px rgba(var(--ak-rgb), .28); background: rgba(var(--ak-rgb), .1); }
.nav-item.active::before { box-shadow: none; border-radius: 0; }
.mandant-switch, .thema-wahl { border-radius: 8px; }
.mandant-switch button, .thema-wahl button { border-radius: 5px; }

/* ---------- Flächen, Felder, Knöpfe: kantiger ---------- */
.glass { box-shadow: none; }
input, select, textarea { border-radius: 6px; }
.btn { border-radius: 6px; }
.btn.primary { background: var(--ak-btn); color: var(--auf-ak); box-shadow: none; }
.btn.primary:hover { background: var(--ak-btn-h); color: var(--auf-ak); }
.btn.primary svg.i { color: var(--auf-ak); }
.head-icon, .kpi-ic, .widget-icon, .stat-ic, .brand-logo { border-radius: 6px !important; }
.lkarte::before, .anm-karte::before, .nav-item.active::before { box-shadow: none; }

/* ---------- Dunkle Schrift auf allem, was die Akzentfarbe als Grund hat ---------- */
.mandant-switch button.active, .fchip.active, .fc.active, .pf-o b, .warn-bg,
.wahl.ak button[aria-pressed="true"], .fc.warn b, .fchip.warn b,
.tabs button.active, .tabs2 button.active, .seg button.active, .fgruppe.alle .fc.active, .frg-kopf .fc.active,
.ax-weg-opt:has(input:checked) .ax-weg-ic, .im-schritte li.aktiv .im-nr, .kd-reiter-knopf.hat-neu .kd-reiter-zahl,
.rr-zahl, .vm-zahl, .vx-filter-zahl, .vx-an-opt:has(input:checked) .vx-an-ic, .vx-an-person:has(input:checked) .vx-an-haken,
.mandant-switch .mi-ms-zahl, .pe-zahl, .mt-kern,
:is(#kv-raster, #company-table).kv-ablage-aktiv::before { color: var(--auf-ak) !important; }
.warn-bg { color: var(--auf-ak) !important; }
.mandant-switch button.active, .wahl.ak button[aria-pressed="true"], .mt-kern { box-shadow: none; }
.tabs button.active svg.i, .tabs2 button.active svg.i, .seg button.active svg.i { color: var(--auf-ak); }

/* ---------- Anmeldung (immer dunkel): Graphit mit Chip und Leiterbahnen wie auf der Webseite, nichts bewegt sich ---------- */
.anm, .anm[data-marke="bau"] {
  --ak: #FFCC00; --ak-rgb: 255, 204, 0; --ak-btn: #FFCC00; --ak-btn-2: #F2C200; --ak-btn-h: #FFD83D;
  --ink: #FFCC00; --ring: #FFCC00; --fokus: #FFCC00; --primary-glow: transparent;
  --flaeche: #151517; --flaeche-2: #1B1B1E; --feld: #0C0C0E; --knopf: #1B1B1E;
  --text: #F3F2EE; --muted: #A8A7A2; --muted-2: #8C8B86;
  background: #0E0E10;
}
html:has(> body > .anm:not(.hidden)), html:has(> body > .anm:not(.hidden)) > body { background: #0E0E10; }
.anm .anm-grund { background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 600'%3E%3Cg fill='none' stroke='%23FFCC00' stroke-width='2' stroke-opacity='.22'%3E%3Cpath d='M277 212V140H190V60M323 212V120H420V40M300 212V20M388 277H470V200H580M388 323H520V380H600M388 300H560M277 388V470H180V560M323 388V450H440V590M300 388V540M212 277H120V180H30M212 323H90V420H10M212 300H60'/%3E%3C/g%3E%3Cg fill='%23FFCC00' fill-opacity='.4'%3E%3Ccircle cx='190' cy='60' r='4'/%3E%3Ccircle cx='420' cy='40' r='4'/%3E%3Ccircle cx='300' cy='20' r='4'/%3E%3Ccircle cx='580' cy='200' r='4'/%3E%3Ccircle cx='560' cy='300' r='4'/%3E%3Ccircle cx='180' cy='560' r='4'/%3E%3Ccircle cx='300' cy='540' r='4'/%3E%3Ccircle cx='30' cy='180' r='4'/%3E%3Ccircle cx='60' cy='300' r='4'/%3E%3C/g%3E%3Cg stroke='%23FFCC00' stroke-width='3' stroke-opacity='.55'%3E%3Cpath d='M255 230v-18M277 230v-18M300 230v-18M323 230v-18M345 230v-18M255 370v18M277 370v18M300 370v18M323 370v18M345 370v18M230 255h-18M230 277h-18M230 300h-18M230 323h-18M230 345h-18M370 255h18M370 277h18M370 300h18M370 323h18M370 345h18'/%3E%3C/g%3E%3Crect x='230' y='230' width='140' height='140' rx='14' fill='%23141416' stroke='%23FFCC00' stroke-opacity='.7' stroke-width='3'/%3E%3Cpath transform='translate(300 300) scale(3.2) translate(-24.6 -23.5)' d='M26.6 11 16.5 25.3h7.4l-1.2 10.7 10-14.3h-7.4l1.3-10.7z' fill='%23FFCC00' fill-opacity='.85'/%3E%3C/svg%3E") right 7% top 38% / min(64vh, 44vw, 620px) min(64vh, 44vw, 620px) no-repeat,
    #0E0E10; }
.anm .anm-bild, .anm .anm-lichter, .anm .anm-grund::after, .anm .anm-flaeche { display: none; }
.anm .anm-karte { border-radius: 10px; background: #151517; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: 0 30px 70px rgba(0, 0, 0, .5); }
.anm .anm-karte::before { box-shadow: none; border-radius: 0; height: 3px; width: 72px; }
.anm .anm-zeichen { border-radius: 5px; border-color: #FFCC00; background: #141416 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath d='M26.6 11 16.5 25.3h7.4l-1.2 10.7 10-14.3h-7.4l1.3-10.7z' fill='%23FFCC00'/%3E%3C/svg%3E") center / 22px no-repeat; }
.anm .anm-zeichen::after { display: none; }
.anm .anm-claim { left: auto; right: 5%; bottom: 8%; max-width: 560px !important; text-align: right; }
.anm-los, .anm .anm-karte .btn.primary, .anm .anm-ms { color: var(--auf-ak) !important; background: var(--ak-btn) !important; box-shadow: none !important; border-radius: 6px !important; }
.anm .anm-los svg.i, .anm .anm-karte .btn.primary svg.i { color: var(--auf-ak); }
.anm input, .anm .anm-eingabe { border-radius: 6px !important; }
/* Gestapelt (Handy, Tablet hoch): Chip oben unter der Kopfzeile, Formular darunter ohne Überlappung */
@media (max-width: 900px) {
  .anm .anm-grund { background-position: center top 64px, 0 0; background-size: 190px 190px, auto; }
  .anm .anm-karte, .anm .anm-karte.anm-breit { margin-top: 270px; }
}

/* ---------- Markenfläche (js/marke.js): Graphit, ohne Farbschimmer ---------- */
.mk-flaeche, .im-schild .im-schild-logo { --mk-rgb: 255, 204, 0; background: #141416; border-radius: 8px; box-shadow: none; border-color: rgba(255, 255, 255, .08); }
.mk-flaeche::before, .im-schild .im-schild-logo::before { display: none; }
html[data-theme="light"] .mk-flaeche:not(.mk-immer-dunkel), html[data-theme="light"] .im-schild .im-schild-logo { background: #fff; box-shadow: none; border-color: var(--line); }
.mk-m .mk-logo, .mk-m[data-marke="bau"] .mk-logo { max-height: 36px; }
.mk-s .mk-logo { max-height: 28px; }
.mk-l .mk-logo, .logo-platte.mk-rahmen .mk-l .mk-logo { height: 34px; }
.im-schild .im-schild-logo::after { background-image: url(/brand/logo-evolta-dunkel.svg); }
html[data-theme="light"] .im-schild .im-schild-logo::after { background-image: url(/brand/logo-evolta-hell.svg); }