/* ============================================================
   ZL RÄUMUNGEN — Farbpaletten

   Zwei Ebenen:
     data-modus   bestimmt den Aufbau — "hell" (Standard) oder "dunkel"
     data-palette bestimmt die Farbstimmung innerhalb des Aufbaus

   Jede Palette tauscht nur Farb-Token. Struktur, Abstände und
   Typografie bleiben identisch, damit sich die Wirkung vergleichen
   lässt. Alle sind auf Lesbarkeit geprüft: Fliesstext mindestens
   4.5:1, grosse Schrift mindestens 3:1.

   Festgelegt auf "hell" + "anthrazit" (Standard in build/build.mjs).
   Die Design-Leiste zum Vergleichen ist entfernt, seit die Auswahl
   getroffen ist. Die übrigen Paletten bleiben hier stehen, falls die
   Farbstimmung später noch einmal gewechselt werden soll:
     MODUS=… PALETTE=… node build/build.mjs
   ============================================================ */

/* ============================================================
   HELLER AUFBAU — der Standard
   Die Grundflächen kommen aus hell.css; hier werden Textfarben,
   Akzent und die dunkle Fussfläche gesetzt. Höhere Spezifität,
   damit eine Palette die Grundflächen bei Bedarf überschreiben darf.
   ============================================================ */

/* ---------- 1. Klassisch — Navy und Rot aus dem Logo ---------- */
[data-modus="hell"][data-palette="klassisch"]{
  --navy:#122347; --navy-2:#1B3059; --navy-3:#24406E;
  --hd:#122347; --tx:#454F66; --tx-mut:#5F6A83;
  --acc:#CC0000; --acc-2:#A80000; --acc-hell:#FF5348;
}

/* ---------- 2. Sand — warm und einladend ---------- */
[data-modus="hell"][data-palette="sand"]{
  --pg:#FCFAF6; --card:#FFFFFF; --sunk:#F3EEE5;
  --navy:#2E2822; --navy-2:#3C342C; --navy-3:#4B4137;
  --hd:#2A241E; --tx:#524A41; --tx-mut:#6E6459;
  --acc:#C0290F; --acc-2:#9A200B; --acc-hell:#FF7048;
  --line:rgba(42,36,30,.12); --line-2:rgba(42,36,30,.22);
}

/* ---------- 3. Himmel — freundlich, luftig, hell ---------- */
[data-modus="hell"][data-palette="himmel"]{
  --pg:#F8FAFC; --card:#FFFFFF; --sunk:#EDF3F8;
  --navy:#14314F; --navy-2:#1D4166; --navy-3:#27537E;
  --hd:#14314F; --tx:#41556B; --tx-mut:#5A7089;
  --acc:#CC0000; --acc-2:#A50000; --acc-hell:#FF5C50;
  --line:rgba(20,49,79,.11); --line-2:rgba(20,49,79,.21);
}

/* ---------- 4. Salbei — ruhig, ungewöhnlich für die Branche ---------- */
[data-modus="hell"][data-palette="salbei"]{
  --pg:#F9FBF8; --card:#FFFFFF; --sunk:#EDF2EA;
  --navy:#25352A; --navy-2:#304435; --navy-3:#3D5643;
  --hd:#223227; --tx:#48564C; --tx-mut:#616E64;
  --acc:#C0281A; --acc-2:#991F14; --acc-hell:#FF6A52;
  --line:rgba(34,50,39,.12); --line-2:rgba(34,50,39,.22);
}

/* ---------- 5. Anthrazit — neutral und sachlich ---------- */
[data-modus="hell"][data-palette="anthrazit"]{
  --pg:#FAFAFA; --card:#FFFFFF; --sunk:#F0F0F0;
  --navy:#232629; --navy-2:#2F3337; --navy-3:#3C4147;
  --hd:#1E2124; --tx:#4A4E53; --tx-mut:#64696F;
  /* --acc-hell trägt 11px-Versalien auf der Hero-Fläche: dort mindestens 4.5:1 */
  --acc:#CC0000; --acc-2:#A30000; --acc-hell:#FF7A6E;
  --line:rgba(30,33,36,.12); --line-2:rgba(30,33,36,.22);
}

/* ---------- 6. Petrol — moderner Dienstleister ---------- */
[data-modus="hell"][data-palette="petrol"]{
  --pg:#F7FAFA; --card:#FFFFFF; --sunk:#E9F1F2;
  --navy:#123C46; --navy-2:#1A4E5A; --navy-3:#23616F;
  --hd:#0F343D; --tx:#3E5560; --tx-mut:#567079;
  --acc:#C41F13; --acc-2:#9B180E; --acc-hell:#FF6252;
  --line:rgba(15,52,61,.11); --line-2:rgba(15,52,61,.21);
}

/* ============================================================
   DUNKLER AUFBAU — als Alternative
   ============================================================ */
[data-modus="dunkel"]{
  --pg:#0D1B3E; --card:#132347; --sunk:#101D3C;
  --navy:#080D1A; --navy-2:#101A33; --navy-3:#18244A;
  --hd:#FFFFFF; --tx:rgba(255,255,255,.80); --tx-mut:rgba(255,255,255,.62);
  --acc:#FF3B2F; --acc-2:#E01F14; --acc-hell:#FF6B60;
  /* Auf dem helleren Rot des dunklen Aufbaus erreicht weisse Schrift nur
     3.55:1. Dunkle Schrift darauf kommt auf 5.57:1 — dasselbe Niveau wie
     Weiss auf dem satten Rot des hellen Aufbaus. */
  --acc-ink:#1A0402;
  --line:rgba(255,255,255,.14); --line-2:rgba(255,255,255,.26);
  --info:#5EC4E8;
  color-scheme:dark;
}
[data-modus="dunkel"][data-palette="anthrazit"]{
  --pg:#151719; --card:#1E2124; --sunk:#191C1F;
  --navy:#0C0D0F; --navy-2:#16181A; --navy-3:#212427;
  --acc:#FF4438; --acc-hell:#FF6E64;
  --line:rgba(255,255,255,.13); --line-2:rgba(255,255,255,.24);
}
[data-modus="dunkel"][data-palette="sand"]{
  --pg:#1B1815; --card:#26221D; --sunk:#201C18;
  --navy:#100E0C; --navy-2:#1A1714; --navy-3:#2A251F;
  --acc:#FF5A38; --acc-hell:#FF8464;
  --line:rgba(255,240,230,.13); --line-2:rgba(255,240,230,.24);
}

/* Im dunklen Aufbau brauchen einige Bausteine eigene Flächen */
[data-modus="dunkel"] .tile,
[data-modus="dunkel"] .usp-c,
[data-modus="dunkel"] .karte,
[data-modus="dunkel"] .kt-c,
[data-modus="dunkel"] .kontakt-c,
[data-modus="dunkel"] .stimme{background:var(--card)}
[data-modus="dunkel"] .ch-flaeche{fill:var(--navy-3); stroke:var(--line-2)}
[data-modus="dunkel"] .ch-see{fill:var(--navy-2)}
[data-modus="dunkel"] .pin-l{stroke:var(--pg)}
[data-modus="dunkel"] .sec-sunk .pin-l{stroke:var(--sunk)}
[data-modus="dunkel"] .preis-box{background:var(--navy-2)}
[data-modus="dunkel"] .legal th{background:var(--navy-2)}
[data-modus="dunkel"] .btn-b{color:#fff}
[data-modus="dunkel"] .btn-b:hover{background:#fff; color:var(--navy)}
[data-modus="dunkel"] .kick{color:var(--acc-hell)}
[data-modus="dunkel"] .kick::before{background:var(--acc-hell)}
[data-modus="dunkel"] .kt-c--kern{background:var(--navy-2)}

/* ---------- Akzent auf dunklem Grund ----------
   Kopf, Startbereich und Formular sind im dunklen Aufbau dunkel;
   dort braucht der Akzent die hellere Variante. */
[data-modus="dunkel"] .sec-dark .kick,
[data-modus="dunkel"] .hero .kick,
[data-modus="dunkel"] .form-sec .kick{color:var(--acc-hell)}
[data-modus="dunkel"] .sec-dark .kick::before,
[data-modus="dunkel"] .hero .kick::before,
[data-modus="dunkel"] .form-sec .kick::before{background:var(--acc-hell)}
[data-modus="dunkel"] .hero h1 em{color:var(--acc-hell)}
[data-modus="dunkel"] .tile--big .ic{color:var(--acc-hell)}

/* Der Fussbereich ist in beiden Aufbauten dunkel — dort gilt immer
   die hellere Akzentvariante. */
.ft .ft-kontakt svg,
.ft .ft-marken svg,
.ft-mehr a{color:var(--acc-hell)}