/*
 * Tokens der Websites (Phase 6.2) – zweistufig wie im Backend:
 *
 *   0. Werte ohne Markenbezug (:root): Formularmeldungen, Gebietskarte,
 *      Parteifarben der Wahlergebnisse – für jedes Theme gleich.
 *   1. Markenblock je Theme (:root[data-theme="…"]): was das Corporate Design
 *      setzt, je Wert mit Beleg. Nur hier und in 0 stehen Farbwerte.
 *   2. Akzente je Theme ([data-akzent="…"]): Fläche und Schrift darauf, genau
 *      wie in Shared\Darstellung\Themes (ein Test gleicht beides ab).
 *   3. Funktionsschicht (:root): Rollen, die ausschließlich auf 0 bis 2
 *      verweisen. Die übrigen Dateien benutzen nur diese Rollen.
 *   4. Rollen je Theme: Ein Theme, dessen Rollen anders liegen als beim
 *      CDU-Theme, setzt hier nur diese neu – wieder nur aus seinem Markenblock.
 *
 * Gebaut sind das CDU-Theme (25.09.2026), das der Abgeordneten (55b), das
 * der Jungen Union (73a, für ju-ploen.de) und die der übrigen sechs
 * Vereinigungen (73b). Formen, die keine Farbe sind (Logo überlappend, Titel
 * ohne Box, Knöpfe als Umriss …), stehen je Theme in 04-varianten.css.
 */

/* 0. Werte ohne Markenbezug, für alle Themes */
:root {
  /* Heller Fuß (67), nach dem Original cdu-sh.de (.l-footer: #e9eaec, Schrift #1b191d, Bogen weiß mit 50 %) */
  --marke-fuss-hell: #e9eaec;
  --marke-fuss-hell-text: #1b191d;
  --marke-fuss-hell-leise: #555b66;  /* Anschrift, 5,7:1 */
  --marke-fuss-hell-linie: #9aa0a9;  /* Rahmen der Profil-Knöpfe */
  --marke-fuss-hell-hover: #dcdfe3;
  --marke-fuss-hell-bogen: #f4f5f6;  /* Weiß mit 50 % auf dem Grau */
  --marke-abdunkeln: #1b191de6;   /* Grund hinter der Lightbox */
  --marke-stapel-schatten: #1b191d80;  /* Fotostapel der Alben, nach cdu-schoenkirchen-moenkeberg.de (kräftiger seit 07.10.2026) */
  /* Die „Fotos“ auf den Blättern unter dem Titelbild: vier gedeckte Verläufe, fest je Album (André, 07.10.2026) */
  --marke-stapel-0-a: #4f6475;  --marke-stapel-0-b: #9aabb9;  /* Graublau */
  --marke-stapel-1-a: #8a7350;  --marke-stapel-1-b: #cdb990;  /* Sand */
  --marke-stapel-2-a: #4d6b4a;  --marke-stapel-2-b: #9cb38f;  /* Grün */
  --marke-stapel-3-a: #2b5f66;  --marke-stapel-3-b: #7fa9ad;  /* Petrol */
  --marke-fehler: #a62231;        /* Fehler im Kontaktformular, aus cdu-ploen-v40 */
  --marke-fehler-link: #8b1d29;
  --marke-fehler-hell: #fff5f5;
  --marke-erfolg: #267049;        /* „Vielen Dank“, aus cdu-ploen-v40 */
  --marke-erfolg-hell: #edf8f2;
  --marke-formfeld: #748591;      /* Rahmen der Formularfelder, aus cdu-ploen-v40 */
  /* Gebietskarte (7.3b), aus der Karte der Ortsverbände von cdu-kreis-ploen-v27 */
  --marke-karte-grund: #f4f8f5;
  --marke-karte-rand: #dce8e3;
  --marke-karte-gebiet: #d6eae0;
  --marke-karte-grenze: #639c89;
  --marke-karte-punkt: #164e4c;
  --marke-karte-punkt-aktiv: #087c78;
  --marke-karte-ring: #ffbe48;
  --marke-karte-schrift: #355f53;
  --marke-karte-meer: #597d87;
  --marke-karte-linie: #56756e;
  /* Flächen der Gebietskarte (48b): verknüpftes Gebiet heller Grünton, Name darauf --marke-karte-schrift (4,85:1) */
  --marke-karte-flaeche: #b8dccb;
  /* Wahlergebnisse (7.3c): Parteifarben und Diagramm aus dem Altmodul des Kreisverbands (wahlergebnisse.php, cdu-kreis-ploen-v27) */
  --marke-partei-cdu: #252a30;
  --marke-partei-spd: #df1830;
  --marke-partei-gruene: #33823b;
  --marke-partei-fdp: #efc700;
  --marke-partei-afd: #1598cb;
  --marke-partei-linke: #b42f79;
  --marke-partei-ssw: #194f8f;
  --marke-partei-bsw: #792761;
  --marke-partei-sonstige: #879198;
  --marke-partei-andere: #697780;
  --marke-wahl-gitter: #edf0f1;
  --marke-wahl-achse: #87949c;
  --marke-wahl-wert: #172c3a;
  --marke-wahl-schrift: #24323e;
  --marke-wahl-status: #eaf5f2;
  --marke-wahl-status-text: #285f59;
  --marke-wahl-hinweis: #fff9ec;
  --marke-wahl-hinweis-rand: #d7a144;
  --marke-wahl-rand: #dce5e5;
  --marke-wahl-sprung-rand: #c7e2df;
  --marke-wahl-kopf: #edf3f3;
}

/* 1. Markenblock: CDU (Manual der Bundespartei, Logodatei; Belege im Plan, „Designsystem“) */
:root[data-theme="standard"] {
  --marke-tuerkis: #52b7c1;      /* Cadenabbia-Türkis, Manual */
  --marke-navy: #2d3c4b;         /* Rhöndorf-Blau, Manual */
  --marke-gold: #ffa600;         /* Logodatei */
  --marke-schwarz: #1b191d;      /* Logodatei, Schrift der Wort-Bild-Marke */
  --marke-petrol: #17616b;       /* Eigenbau für den Linkkontrast (5,9:1 auf Weiß) */
  --marke-weiss: #ffffff;
  --marke-tinte: #202d38;        /* Fließtext, aus cdu-ploen-v40 */
  --marke-leise: #536371;        /* Nebentext, aus cdu-ploen-v40 */
  --marke-hell: #edf8f9;         /* Türkis-Tönung für Flächen, aus cdu-ploen-v40 */
  --marke-hell-stark: #dceff1;   /* Türkis-Tönung beim Überfahren */
  --marke-linie: #d9e2e5;        /* Linien, aus cdu-ploen-v40 */
  --marke-linie-dunkel: #81929f; /* Linien auf dunklem Grund, Pfeile */
  --marke-feld: #8797a0;         /* Rahmen von Eingabefeldern */
  --marke-fuss-text: #d0dce3;    /* Anschrift im Fuß */
  --marke-fuss-hover: #405767;   /* Profil-Knöpfe im Fuß beim Überfahren */
  --marke-fuss-bogen: #465361;   /* CDU-Bogen im Fuß: Rhöndorf-Blau mit 12 % Weiß (66; die CD-Tönung 70 % #737986 trüge keine weiße Schrift) */
  --marke-schatten: #2d3c4b18;
  --marke-transparent-hell: #ffffff70;
  --marke-aus-text: #617180;      /* gesperrter Blätterknopf, nach cdu-ploen-v40 (#657580) auf 4,5:1 abgedunkelt (7b.6) */
  --marke-aus-flaeche: #f5f7f8;

  --marke-schrift-text: "IBM Plex Serif", Georgia, serif;
  --marke-schrift-ui: "Inter", Arial, Helvetica, sans-serif;
  --marke-schrift-titel: var(--marke-schrift-ui);
  --marke-titel-em: 0.59;   /* mittlere Breite eines Titelzeichens in em (+5 %), für die Größe des Titels auf dem Telefon (86) */
}

/* 1. Markenblock: Abgeordnete, Farbwelt „Förde“ (55b, von André am
   01.10.2026 bestätigt). Bewusst ohne Farben und Zeichen der Partei:
   Trennung von Mandat und Partei. Schriften unter der OFL, lokal ausgeliefert. */
:root[data-theme="mandat"] {
  --marke-foerde: #183a5a;       /* Hauptfarbe: Meerblau der Förde */
  --marke-foerde-tief: #24507a;  /* Profil-Knöpfe im Fuß beim Überfahren */
  --marke-sand: #d6b26e;         /* Sand, nur Linien und Schmuck – trägt keine Schrift */
  --marke-grund: #f5f8fa;        /* Servicezeile */
  --marke-weiss: #ffffff;
  --marke-tinte: #1a2530;        /* Fließtext */
  --marke-leise: #4a5866;        /* Nebentext */
  --marke-hell: #e4edf3;         /* Fläche: Kästen, Menü beim Überfahren */
  --marke-hell-stark: #d3e0ea;
  --marke-linie: #cfdae3;
  --marke-linie-dunkel: #6f8699; /* Linien auf dunklem Grund */
  --marke-feld: #7d8c99;         /* Rahmen von Eingabefeldern */
  --marke-fuss-text: #c9d7e3;    /* Anschrift im Fuß auf Förde-Blau */
  --marke-schatten: #183a5a1a;
  --marke-transparent-hell: #ffffff70;
  --marke-aus-text: #5f6d79;
  --marke-aus-flaeche: #f5f8fa;

  --marke-schrift-text: "Atkinson Hyperlegible Next", Verdana, Arial, sans-serif;
  --marke-schrift-ui: "Atkinson Hyperlegible Next", Verdana, Arial, sans-serif;
  --marke-schrift-titel: "Fraunces", Georgia, "Times New Roman", serif;
  --marke-titel-em: 0.60;
}

/* 1. Markenblock: Junge Union (73a), neues Bundes-CD von junge-union.de; Werte aus der
   Tabelle „Themes der Vereinigungen“ (von André am 22.09.2026 freigegeben) und dem
   abgestimmten Entwurf kv-ju. Pink und Gelb tragen nie Schrift, sie sind nur Schmuck. */
:root[data-theme="ju"] {
  --marke-blau: #1f3b90;         /* Kopf, Links */
  --marke-marine: #1e2445;       /* Titelbox, obere Leiste, Knöpfe, Fuß */
  --marke-pink: #e81e68;         /* Schmuckverlauf, Anfang */
  --marke-gelb: #ffcc1a;         /* Schmuckverlauf, Ende */
  --marke-flaeche: #d2d8e9;      /* Fläche: geöffnete Menüs, Kästen */
  --marke-weiss: #ffffff;
  --marke-tinte: #202d38;        /* Fließtext, wie im Entwurf */
  --marke-leise: #536371;        /* Nebentext, wie im Entwurf */
  --marke-hell: #f5f7fa;         /* Tönung für Flächen, Menü beim Überfahren */
  --marke-hell-stark: #e6eaf3;
  --marke-linie: #d2d8e9;
  --marke-linie-dunkel: #8790ad; /* Linien auf dunklem Grund, Pfeile */
  --marke-feld: #7d869e;         /* Rahmen von Eingabefeldern */
  --marke-fuss-text: #c9cfe2;    /* Anschrift im Fuß auf Marine */
  --marke-fuss-hover: #2e3766;   /* Profil-Knöpfe im Fuß beim Überfahren */
  --marke-schatten: #1e244518;
  --marke-transparent-hell: #ffffff70;
  --marke-aus-text: #5a6478;
  --marke-aus-flaeche: #f5f7fa;

  --marke-schrift-text: "Archivo", Arial, Helvetica, sans-serif;
  --marke-schrift-ui: "Archivo", Arial, Helvetica, sans-serif;
  --marke-schrift-titel: "Archivo Black", "Archivo", Arial, sans-serif;
  --marke-titel-em: 0.64;
}

/* 1. Markenblöcke der übrigen Vereinigungen (73b): Werte aus der Tabelle „Themes der
   Vereinigungen“ (freigegeben am 22.09.2026) und den abgestimmten Entwürfen kv-<theme>.
   Tinte, Nebentext und Schatten wie bei der JU; Rot trägt Schrift nur, wo es 4,5:1 schafft. */

/* Schüler Union: Leitfaden Corporate Identity 2018 */
:root[data-theme="schueler-union"] {
  --marke-su-blau: #16344e;      /* Titelbox, obere Leiste, Überschriften, Fuß */
  --marke-blau: #00559c;         /* Kopf, Links */
  --marke-flaeche: #dad9d4;      /* Fläche: geöffnete Menüs, Kästen */
  --marke-weiss: #ffffff;
  --marke-tinte: #202d38;
  --marke-leise: #536371;
  --marke-hell: #efeeea;
  --marke-hell-stark: #e4e2dc;
  --marke-linie: #dad9d4;
  --marke-linie-dunkel: #8796a6;
  --marke-feld: #7d868e;
  --marke-fuss-text: #c9d3dd;
  --marke-fuss-hover: #24496b;
  --marke-schatten: #16344e18;
  --marke-transparent-hell: #ffffff70;
  --marke-aus-text: #5d6670;
  --marke-aus-flaeche: #f5f5f2;

  --marke-schrift-text: "Source Sans 3", Arial, Helvetica, sans-serif;
  --marke-schrift-ui: "Raleway", Arial, Helvetica, sans-serif;
  --marke-schrift-titel: "Raleway", Arial, Helvetica, sans-serif;
  --marke-titel-em: 0.57;
}

/* Frauen Union: Styleguide 2024 – Aubergine, Rhöndorf-Blau, Magenta, Cadenabbia-Türkis */
:root[data-theme="fu"] {
  --marke-aubergine: #961253;    /* Kopf (Akzent), Links */
  --marke-navy: #2d3c4b;         /* Rhöndorf-Blau: obere Leiste, Titelbox, Überschriften, Fuß */
  --marke-magenta: #e50071;      /* Claim, weiße Schrift 4,6:1 */
  --marke-tuerkis: #52b7c1;      /* Fläche, Rhöndorf-Blau darauf 4,8:1 */
  --marke-schwarz: #1b191d;
  --marke-weiss: #ffffff;
  --marke-tinte: #202d38;
  --marke-leise: #536371;
  --marke-hell: #f0f2f4;
  --marke-hell-stark: #e2e6ea;
  --marke-linie: #e4e2d2;
  --marke-linie-dunkel: #81929f;
  --marke-feld: #8797a0;
  --marke-fuss-text: #d0dce3;
  --marke-fuss-hover: #405767;
  --marke-schatten: #2d3c4b18;
  --marke-transparent-hell: #ffffff70;
  --marke-aus-text: #617180;
  --marke-aus-flaeche: #f5f7f8;

  --marke-schrift-text: "Inter", Arial, Helvetica, sans-serif;
  --marke-schrift-ui: "Inter", Arial, Helvetica, sans-serif;
  --marke-schrift-titel: var(--marke-schrift-ui);
  --marke-titel-em: 0.59;
}

/* Senioren-Union: Bundesauftritt senioren-union.de – Kopf aus schrägen Blauflächen,
   Rot als Akzent (Linien, Knöpfe); SU-Rot #eb2729 als #e62427 für 4,5:1 mit Weiß */
:root[data-theme="senioren-union"] {
  --marke-blau: #043068;         /* SU-Blau: obere Leiste, Titelbox, Überschriften, Fuß, Links */
  --marke-blau-hell: #004d7e;    /* Kopf, erste Fläche */
  --marke-blau-mitte: #00427a;   /* Kopf, mittlere Fläche */
  --marke-rot: #e62427;          /* Linien; Claim und Knöpfe über den Akzent */
  --marke-sand: #e4e2d2;         /* Fläche: geöffnete Menüs, Kästen, Linien */
  --marke-weiss: #ffffff;
  --marke-tinte: #202d38;
  --marke-leise: #536371;
  --marke-hell: #f0f2f4;
  --marke-hell-stark: #e2e6ea;
  --marke-linie: #e4e2d2;
  --marke-linie-dunkel: #7f93ab;
  --marke-feld: #7d8a99;
  --marke-fuss-text: #c7d3e3;
  --marke-fuss-hover: #154584;
  --marke-schatten: #04306818;
  --marke-transparent-hell: #ffffff70;
  --marke-aus-text: #5a6678;
  --marke-aus-flaeche: #f5f6f7;

  --marke-schrift-text: "Fira Sans", Arial, Helvetica, sans-serif;
  --marke-schrift-ui: "Fira Sans", Arial, Helvetica, sans-serif;
  --marke-schrift-titel: var(--marke-schrift-ui);
  --marke-titel-em: 0.53;
}

/* MIT: Styleguide 2019 – hell wie der Bundesauftritt, Hausfarben in der Schrift, keine
   dunklen Flächen. Links in einem um 4 % abgedunkelten Rot (5,2:1 auch auf der Tönung) */
:root[data-theme="mit"] {
  --marke-rot: #e6050f;          /* Claim, Knöpfe über den Akzent */
  --marke-rot-link: #d0040e;     /* Links und Fokus */
  --marke-schwarz: #000000;      /* Titel, Überschriften, Menü */
  --marke-grau: #e1e2e4;         /* obere Leiste, Kopfrand, Fuß, Fläche */
  --marke-weiss: #ffffff;
  --marke-tinte: #202d38;
  --marke-leise: #536371;
  --marke-hell: #f4f4f5;
  --marke-hell-stark: #e9e9eb;
  --marke-linie: #e1e2e4;
  --marke-linie-dunkel: #878787;
  --marke-feld: #7f8286;
  --marke-fuss-text: #333333;
  --marke-schatten: #00000014;
  --marke-transparent-hell: #ffffff70;
  --marke-aus-text: #5c5f64;
  --marke-aus-flaeche: #f4f4f5;

  --marke-schrift-text: "Source Sans 3", Arial, Helvetica, sans-serif;
  --marke-schrift-ui: "Source Sans 3", Arial, Helvetica, sans-serif;
  --marke-schrift-titel: var(--marke-schrift-ui);
  --marke-titel-em: 0.58;
}

/* KPV: Bundesauftritt kpv.de – Blau, Rot im Claim, Knöpfe als Umriss */
:root[data-theme="kpv"] {
  --marke-blau: #004985;         /* Kopf (Akzent), obere Leiste, Überschriften, Links, Fuß */
  --marke-rot: #e2010f;          /* Claim */
  --marke-grau: #e1e2e4;         /* Fläche */
  --marke-weiss: #ffffff;
  --marke-tinte: #202d38;
  --marke-leise: #536371;
  --marke-hell: #f0f0f0;
  --marke-hell-stark: #e3e3e3;
  --marke-linie: #e1e2e4;
  --marke-linie-dunkel: #7f9ab5;
  --marke-feld: #7d8790;
  --marke-fuss-text: #c6d6e6;
  --marke-fuss-hover: #0d5c9e;
  --marke-schatten: #00498518;
  --marke-transparent-hell: #ffffff70;
  --marke-aus-text: #5c6670;
  --marke-aus-flaeche: #f5f5f5;

  --marke-schrift-text: "Open Sans", Arial, Helvetica, sans-serif;
  --marke-schrift-ui: "Lato", Arial, Helvetica, sans-serif;
  --marke-schrift-titel: var(--marke-schrift-ui);
  --marke-titel-em: 0.54;
}

/* CDA: Bundesauftritt cda-bund.de – Schriften und Rhöndorf-Blau wie die CDU, Kopf weiß,
   Rot im Claim und unter dem aktiven Menüpunkt, Hellblau als Fläche */
:root[data-theme="cda"] {
  --marke-navy: #2d3c4b;         /* Rhöndorf-Blau: obere Leiste, Titelbox, Überschriften, Links, Fuß */
  --marke-rot: #e30517;          /* Linie unter dem aktiven Menüpunkt; Claim über den Akzent */
  --marke-hellblau: #72c0e6;     /* Fläche, Rhöndorf-Blau darauf 5,6:1 */
  --marke-schwarz: #1b191d;
  --marke-weiss: #ffffff;
  --marke-tinte: #202d38;
  --marke-leise: #536371;
  --marke-hell: #f0f0f0;
  --marke-hell-stark: #e4e4e6;
  --marke-linie: #e5e5e8;
  --marke-linie-dunkel: #81929f;
  --marke-feld: #8797a0;
  --marke-fuss-text: #d0dce3;
  --marke-fuss-hover: #405767;
  --marke-schatten: #2d3c4b18;
  --marke-transparent-hell: #ffffff70;
  --marke-aus-text: #617180;
  --marke-aus-flaeche: #f5f7f8;

  --marke-schrift-text: "IBM Plex Serif", Georgia, serif;
  --marke-schrift-ui: "Inter", Arial, Helvetica, sans-serif;
  --marke-schrift-titel: var(--marke-schrift-ui);
  --marke-titel-em: 0.59;
}

/* 2. Akzente des CDU-Themes: Kopf und geöffnete Menüs */
:root[data-theme="standard"][data-akzent="tuerkis"] { --akzent: #52b7c1; --akzent-text: #2d3c4b; }
:root[data-theme="standard"][data-akzent="navy"] { --akzent: #2d3c4b; --akzent-text: #ffffff; }
:root[data-theme="standard"][data-akzent="petrol"] { --akzent: #17616b; --akzent-text: #ffffff; }

/* 2. Akzente der Abgeordneten: geöffnete Menüs (der Kopf bleibt hell) */
:root[data-theme="mandat"][data-akzent="hell"] { --akzent: #e4edf3; --akzent-text: #1a2530; }
:root[data-theme="mandat"][data-akzent="foerde"] { --akzent: #183a5a; --akzent-text: #ffffff; }

/* 2. Akzente der Jungen Union: Kopf */
:root[data-theme="ju"][data-akzent="blau"] { --akzent: #1f3b90; --akzent-text: #ffffff; }
:root[data-theme="ju"][data-akzent="marine"] { --akzent: #1e2445; --akzent-text: #ffffff; }
:root[data-theme="ju"][data-akzent="gelb"] { --akzent: #ffcc1a; --akzent-text: #1e2445; }

/* 2. Akzente der übrigen Vereinigungen (73b). Der Akzent färbt die prägende Fläche des
   Themes: Titelbox (Schüler Union), Kopf (FU, KPV), Claim (CDA), Claim und Knöpfe
   (Senioren-Union), Knöpfe (MIT) */
:root[data-theme="schueler-union"][data-akzent="su-blau"] { --akzent: #16344e; --akzent-text: #ffffff; }
:root[data-theme="schueler-union"][data-akzent="blau"] { --akzent: #00559c; --akzent-text: #ffffff; }
:root[data-theme="fu"][data-akzent="aubergine"] { --akzent: #961253; --akzent-text: #ffffff; }
:root[data-theme="fu"][data-akzent="rhoendorf"] { --akzent: #2d3c4b; --akzent-text: #ffffff; }
:root[data-theme="fu"][data-akzent="tuerkis"] { --akzent: #52b7c1; --akzent-text: #2d3c4b; }
:root[data-theme="fu"][data-akzent="magenta"] { --akzent: #e50071; --akzent-text: #ffffff; }
:root[data-theme="senioren-union"][data-akzent="rot"] { --akzent: #e62427; --akzent-text: #ffffff; }
:root[data-theme="senioren-union"][data-akzent="blau"] { --akzent: #043068; --akzent-text: #ffffff; }
:root[data-theme="senioren-union"][data-akzent="blau-hell"] { --akzent: #004d7e; --akzent-text: #ffffff; }
:root[data-theme="senioren-union"][data-akzent="gold"] { --akzent: #ffa600; --akzent-text: #043068; }
:root[data-theme="mit"][data-akzent="rot"] { --akzent: #e6050f; --akzent-text: #ffffff; }
:root[data-theme="mit"][data-akzent="schwarz"] { --akzent: #000000; --akzent-text: #ffffff; }
:root[data-theme="mit"][data-akzent="gelb"] { --akzent: #fab900; --akzent-text: #000000; }
:root[data-theme="kpv"][data-akzent="blau"] { --akzent: #004985; --akzent-text: #ffffff; }
:root[data-theme="kpv"][data-akzent="rot"] { --akzent: #e2010f; --akzent-text: #ffffff; }
:root[data-theme="cda"][data-akzent="rot"] { --akzent: #e30517; --akzent-text: #ffffff; }
:root[data-theme="cda"][data-akzent="navy"] { --akzent: #2d3c4b; --akzent-text: #ffffff; }
:root[data-theme="cda"][data-akzent="hellblau"] { --akzent: #72c0e6; --akzent-text: #2d3c4b; }

/* 3. Funktionsschicht */
:root {
  /* Flächen und Schrift */
  --papier: var(--marke-weiss);
  --text: var(--marke-tinte);
  --text-leise: var(--marke-leise);
  --link: var(--marke-petrol);
  --hell: var(--marke-hell);
  --hell-stark: var(--marke-hell-stark);
  --linie: var(--marke-linie);
  --linie-dunkel: var(--marke-linie-dunkel);
  --feld-rahmen: var(--marke-feld);
  --fokus: var(--marke-petrol);
  --schatten: var(--marke-schatten);
  --schmuck: var(--marke-gold);            /* Zierlinien, trägt nie Schrift */
  --schmuck-verlauf: none;                 /* Theme-Baustein Schmuckverlauf (JU): Linie unter Leiste, Menüpunkt und Knöpfen */

  /* Rollen des Aufbaus (Plan, „Rollen im Frontend-Stylesheet“) */
  --oben: var(--marke-schwarz);            /* obere Leiste */
  --oben-text: var(--marke-weiss);
  --kopf: var(--akzent);                   /* Kopffläche */
  --kopf-text: var(--akzent-text);
  --flaeche: var(--akzent);                /* geöffnete Menüs, Kästen */
  --flaeche-text: var(--akzent-text);      /* Schrift der Fläche: Navy auf Türkis 4,8:1 statt Weiß 2,4:1 */
  --flaeche-aktiv: var(--marke-navy);      /* gewählter Punkt im geöffneten Menü */
  --flaeche-aktiv-text: var(--marke-weiss);
  --dunkel: var(--marke-navy);             /* Überschriften */
  --menue-text: var(--marke-schwarz);
  --titelbox: var(--marke-navy);
  --titelbox-text: var(--marke-weiss);
  --titelbox-hover: var(--marke-fuss-bogen);  /* Titelbox auf Bildern beim Überfahren (André, 06.10.2026: Variante C) */
  --titelbox-hover-text: var(--marke-weiss);
  --claim: var(--marke-gold);
  --claim-text: var(--marke-schwarz);
  --knopf: var(--marke-navy);
  --knopf-text: var(--marke-weiss);
  --knopf-hover: var(--link);              /* Knopf beim Überfahren */
  --knopf-hover-text: var(--knopf-text);
  --knopf-zweit-text: var(--knopf);        /* zurückhaltende Knöpfe: Schrift auf Papier oder Tönung (73b) */
  --fuss: var(--marke-navy);
  --buehne-verlauf: var(--marke-navy);     /* Bühne „Großes Bild“: Verlauf unter dem Text */
  --buehne-verlauf-text: var(--marke-weiss);
  --fuss-text: var(--marke-weiss);
  --fuss-leise: var(--marke-fuss-text);
  --fuss-linie: var(--marke-linie-dunkel);
  --fuss-hover: var(--marke-fuss-hover);
  --fuss-bogen: var(--marke-fuss-bogen);    /* CDU-Bogen im Fuß, Text liegt darüber */
  --unterebene-linie: var(--marke-transparent-hell);
  --logo-grund: var(--marke-weiss);
  --aus-text: var(--marke-aus-text);
  --aus-flaeche: var(--marke-aus-flaeche);
  --lightbox-grund: var(--marke-abdunkeln);
  --stapel-schatten: var(--marke-stapel-schatten);
  --stapel-0-a: var(--marke-stapel-0-a);
  --stapel-0-b: var(--marke-stapel-0-b);
  --stapel-1-a: var(--marke-stapel-1-a);
  --stapel-1-b: var(--marke-stapel-1-b);
  --stapel-2-a: var(--marke-stapel-2-a);
  --stapel-2-b: var(--marke-stapel-2-b);
  --stapel-3-a: var(--marke-stapel-3-a);
  --stapel-3-b: var(--marke-stapel-3-b);
  --stapel-a: var(--stapel-0-a);           /* je Album umgestellt (06-listen.css, data-stapel) */
  --stapel-b: var(--stapel-0-b);
  /* Formulare (Kontaktformular, 6.4b) */
  --fehler: var(--marke-fehler);
  --fehler-link: var(--marke-fehler-link);
  --fehler-hell: var(--marke-fehler-hell);
  --erfolg: var(--marke-erfolg);
  --erfolg-hell: var(--marke-erfolg-hell);
  --formfeld: var(--marke-formfeld);
  /* Gebietskarte über dem Baustein „Karten“ (7.3b) */
  --karte-grund: var(--marke-karte-grund);
  --karte-rand: var(--marke-karte-rand);
  --karte-gebiet: var(--marke-karte-gebiet);
  --karte-grenze: var(--marke-karte-grenze);
  --karte-punkt: var(--marke-karte-punkt);
  --karte-punkt-aktiv: var(--marke-karte-punkt-aktiv);
  --karte-ring: var(--marke-karte-ring);
  --karte-schrift: var(--marke-karte-schrift);
  --karte-meer: var(--marke-karte-meer);
  --karte-linie: var(--marke-karte-linie);
  /* Flächen der Gebietskarte (48b): verknüpft, beim Zeigen und mit Fokus wie ein Punkt */
  --karte-flaeche: var(--marke-karte-flaeche);
  --karte-flaeche-aktiv: var(--marke-karte-punkt-aktiv);
  /* Wahlergebnisse (7.3c) */
  --partei-cdu: var(--marke-partei-cdu);
  --partei-spd: var(--marke-partei-spd);
  --partei-gruene: var(--marke-partei-gruene);
  --partei-fdp: var(--marke-partei-fdp);
  --partei-afd: var(--marke-partei-afd);
  --partei-linke: var(--marke-partei-linke);
  --partei-ssw: var(--marke-partei-ssw);
  --partei-bsw: var(--marke-partei-bsw);
  --partei-sonstige: var(--marke-partei-sonstige);
  --partei-andere: var(--marke-partei-andere);
  --wahl-gitter: var(--marke-wahl-gitter);
  --wahl-achse: var(--marke-wahl-achse);
  --wahl-wert: var(--marke-wahl-wert);
  --wahl-schrift: var(--marke-wahl-schrift);
  --wahl-status: var(--marke-wahl-status);
  --wahl-status-text: var(--marke-wahl-status-text);
  --wahl-hinweis: var(--marke-wahl-hinweis);
  --wahl-hinweis-rand: var(--marke-wahl-hinweis-rand);
  --wahl-rand: var(--marke-wahl-rand);
  --wahl-sprung-rand: var(--marke-wahl-sprung-rand);
  --wahl-kopf: var(--marke-wahl-kopf);

  /* Schriften */
  --schrift-text: var(--marke-schrift-text);
  --schrift-ui: var(--marke-schrift-ui);
  --schrift-titel: var(--marke-schrift-titel);
  --titel-em: var(--marke-titel-em);
  --schrift-groesse: 16px;

  /* Maße */
  --breite: 1200px;
  --rand: 32px;
  /* Titel im Kopf (86): volle Größe, Schätzung vor dem Messen (03-aufbau.css passt beide je Breite an) */
  --titel-voll: clamp(2.1rem, 4vw, 3.125rem);
  --titel-max: var(--titel-voll);
  --luft-1: 6px;
  --luft-2: 12px;
  --luft-3: 24px;
  --luft-4: 44px;
  --luft-5: 64px;
  --leiste-breite: 280px;
  --treffer: 44px;

  /* Kleine Stufe für schmale Kästen (30e, nach .island-overview live);
     die Schwelle 18rem steht in den @container-Abfragen von 07-bausteine.css */
  --schrift-kasten: 0.9375rem;
  --schrift-kasten-titel: 1.125rem;
  --luft-kasten: 18px 16px;
  --abstand-kasten: 16px;
}

/* 4. Rollen der Abgeordneten: heller Kopf mit Adler und Namen statt
   Titelbox, leise Servicezeile, Fuß in Förde-Blau; Grundschrift 17 px,
   weil Atkinson Hyperlegible für Lesbarkeit gebaut ist und Raum braucht */
:root[data-theme="mandat"] {
  --link: var(--marke-foerde);
  --fokus: var(--marke-foerde);
  --schmuck: var(--marke-sand);
  --oben: var(--marke-grund);
  --oben-text: var(--marke-leise);
  --kopf: var(--marke-weiss);
  --kopf-text: var(--marke-tinte);
  --flaeche-aktiv: var(--marke-foerde);
  --dunkel: var(--marke-foerde);
  --menue-text: var(--marke-tinte);
  --titelbox: var(--marke-weiss);
  --titelbox-text: var(--marke-foerde);
  --titelbox-hover: var(--marke-foerde);    /* umgekehrt: Förde-Blau mit weißer Schrift */
  --titelbox-hover-text: var(--marke-weiss);
  --claim: var(--marke-weiss);
  --claim-text: var(--marke-leise);
  --knopf: var(--marke-foerde);
  --fuss: var(--marke-foerde);
  --buehne-verlauf: var(--marke-foerde);
  --fuss-hover: var(--marke-foerde-tief);
  --fuss-bogen: var(--marke-foerde);       /* kein Bogen bei Abgeordneten (Mandat statt Partei) */
  --schrift-groesse: 17px;
}

/* 4. Rollen der Jungen Union (73a): Kopf im Akzent (Vorgabe Blau), Leiste, Titelbox,
   Knöpfe und Fuß in Marine, Claim weiß, Fläche hellblau mit Marine darauf; der
   Verlauf Pink→Gelb als Schmuck (Theme-Baustein, freigegeben am 22.09.2026) */
:root[data-theme="ju"] {
  --link: var(--marke-blau);
  --fokus: var(--marke-blau);
  --schmuck: var(--marke-pink);
  --schmuck-verlauf: linear-gradient(90deg, var(--marke-pink), var(--marke-gelb));
  --oben: var(--marke-marine);
  --flaeche: var(--marke-flaeche);
  --flaeche-text: var(--marke-marine);
  --flaeche-aktiv: var(--marke-marine);
  --dunkel: var(--marke-marine);
  --menue-text: var(--marke-marine);
  --titelbox: var(--marke-marine);
  --titelbox-hover: var(--marke-blau);
  --claim: var(--marke-weiss);
  --claim-text: var(--marke-marine);
  --knopf: var(--marke-marine);
  --fuss: var(--marke-marine);
  --buehne-verlauf: var(--marke-marine);
  --fuss-bogen: var(--marke-marine);       /* kein CDU-Bogen bei der JU */
  --logo-grund: transparent;               /* die JU-Marke steht weiß auf dem Kopf, ohne weiße Fläche dahinter */
}

/* 4. Rollen der Schüler Union (73b): Kopf Blau, Titelbox im Akzent (Vorgabe SU-Blau),
   Leiste, Knöpfe und Fuß SU-Blau, Claim weiß; die Marke steht weiß auf dem Kopf */
:root[data-theme="schueler-union"] {
  --link: var(--marke-blau);
  --fokus: var(--marke-blau);
  --schmuck: var(--marke-blau);
  --oben: var(--marke-su-blau);
  --kopf: var(--marke-blau);
  --kopf-text: var(--marke-weiss);
  --flaeche: var(--marke-flaeche);
  --flaeche-text: var(--marke-su-blau);
  --flaeche-aktiv: var(--marke-su-blau);
  --dunkel: var(--marke-su-blau);
  --menue-text: var(--marke-tinte);
  --titelbox: var(--akzent);
  --titelbox-text: var(--akzent-text);
  --titelbox-hover: var(--marke-fuss-hover);
  --claim: var(--marke-weiss);
  --claim-text: var(--marke-su-blau);
  --knopf: var(--marke-su-blau);
  --fuss: var(--marke-su-blau);
  --buehne-verlauf: var(--marke-su-blau);
  --fuss-bogen: var(--marke-su-blau);      /* kein CDU-Bogen bei den Vereinigungen */
  --logo-grund: transparent;
}

/* 4. Rollen der Frauen Union (73b): Kopf im Akzent (Vorgabe Aubergine), Leiste, Titelbox,
   Knöpfe und Fuß Rhöndorf-Blau, Claim Magenta, Fläche Türkis; Logo überlappend (04) */
:root[data-theme="fu"] {
  --link: var(--marke-aubergine);
  --fokus: var(--marke-aubergine);
  --schmuck: var(--marke-tuerkis);
  --oben: var(--marke-navy);
  --flaeche: var(--marke-tuerkis);
  --flaeche-text: var(--marke-navy);
  --flaeche-aktiv: var(--marke-navy);
  --dunkel: var(--marke-navy);
  --menue-text: var(--marke-schwarz);
  --titelbox: var(--marke-navy);
  --titelbox-hover: var(--marke-aubergine);
  --claim: var(--marke-magenta);
  --claim-text: var(--marke-weiss);
  --knopf: var(--marke-navy);
  --fuss: var(--marke-navy);
  --buehne-verlauf: var(--marke-navy);
  --fuss-bogen: var(--marke-navy);
  --logo-grund: transparent;
}

/* 4. Rollen der Senioren-Union (73b): Kopf aus drei Blauflächen (Bildschicht in 04,
   die Rolle hält die hellste für den Kontrast), Rot für Linien und Knöpfe, Claim im
   Akzent (Vorgabe Rot), Fläche Sand; Grundschrift 18 px wie der Bundesauftritt */
:root[data-theme="senioren-union"] {
  --link: var(--marke-blau);
  --fokus: var(--marke-blau);
  --schmuck: var(--marke-rot);
  --oben: var(--marke-blau);
  --kopf: var(--marke-blau-hell);
  --kopf-flaechen: linear-gradient(118deg, var(--marke-blau-hell) 0 50%, var(--marke-blau-mitte) 50% 64%, var(--marke-blau) 64%);
  --kopf-text: var(--marke-weiss);
  --flaeche: var(--marke-sand);
  --flaeche-text: var(--marke-blau);
  --flaeche-aktiv: var(--marke-blau);
  --dunkel: var(--marke-blau);
  --menue-text: var(--marke-tinte);
  --titelbox: var(--marke-blau);
  --titelbox-hover: var(--marke-blau-hell);
  --claim: var(--akzent);
  --claim-text: var(--akzent-text);
  --knopf: var(--marke-rot);
  --knopf-zweit-text: var(--link);         /* Rot auf der Tönung nur 4,0:1 */
  --fuss: var(--marke-blau);
  --buehne-verlauf: var(--marke-blau);
  --fuss-bogen: var(--marke-blau);
  --schrift-groesse: 18px;
}

/* 4. Rollen der MIT (73b): heller Modus – Leiste, Kopfrand, Fuß und Fläche hellgrau mit
   Schwarz darauf, Titel und Claim ohne Box (04), Knöpfe im Akzent (Vorgabe Rot); im
   geöffneten Menü der gewählte Punkt weiß mit roter Schrift */
:root[data-theme="mit"] {
  --link: var(--marke-rot-link);
  --fokus: var(--marke-rot-link);
  --schmuck: var(--marke-rot);
  --oben: var(--marke-grau);
  --oben-text: var(--marke-schwarz);
  --kopf: var(--marke-weiss);
  --kopf-text: var(--marke-schwarz);
  --flaeche: var(--marke-grau);
  --flaeche-text: var(--marke-schwarz);
  --flaeche-aktiv: var(--marke-weiss);
  --flaeche-aktiv-text: var(--marke-rot);
  --dunkel: var(--marke-schwarz);
  --menue-text: var(--marke-schwarz);
  --titelbox: var(--marke-weiss);
  --titelbox-text: var(--marke-schwarz);
  --titelbox-hover: var(--marke-schwarz);
  --claim: var(--marke-weiss);
  --claim-text: var(--marke-rot);
  --knopf: var(--akzent);
  --knopf-text: var(--akzent-text);
  --knopf-hover: var(--marke-schwarz);     /* jeder Akzent, auch Gelb mit schwarzer Schrift, bleibt beim Überfahren lesbar */
  --knopf-hover-text: var(--marke-weiss);
  --knopf-zweit-text: var(--link);         /* Gelb trägt als Schrift auf Weiß nicht (1,7:1) */
  --fuss: var(--marke-grau);
  --fuss-text: var(--marke-schwarz);
  --fuss-leise: var(--marke-fuss-text);
  --fuss-linie: var(--marke-linie-dunkel);
  --fuss-hover: var(--marke-weiss);
  --fuss-bogen: var(--marke-grau);
  --buehne-verlauf: var(--marke-schwarz);
}

/* 4. Rollen der KPV (73b): Kopf im Akzent (Vorgabe Blau), Leiste und Fuß Blau, Titelbox
   weiß mit blauer Schrift, Claim Rot; Knöpfe als Umriss (04) */
:root[data-theme="kpv"] {
  --link: var(--marke-blau);
  --fokus: var(--marke-blau);
  --schmuck: var(--marke-rot);
  --oben: var(--marke-blau);
  --flaeche: var(--marke-grau);
  --flaeche-text: var(--marke-blau);
  --flaeche-aktiv: var(--marke-blau);
  --dunkel: var(--marke-blau);
  --menue-text: var(--marke-tinte);
  --titelbox: var(--marke-weiss);
  --titelbox-text: var(--marke-blau);
  --titelbox-hover: var(--marke-blau);
  --claim: var(--marke-rot);
  --claim-text: var(--marke-weiss);
  --knopf: var(--marke-blau);
  --fuss: var(--marke-blau);
  --buehne-verlauf: var(--marke-blau);
  --fuss-bogen: var(--marke-blau);
}

/* 4. Rollen der CDA (73b): Kopf weiß, Leiste, Titelbox, Knöpfe und Fuß Rhöndorf-Blau,
   Claim im Akzent (Vorgabe Rot), Fläche Hellblau; rote Linie unter dem aktiven Menüpunkt (04) */
:root[data-theme="cda"] {
  --link: var(--marke-navy);
  --fokus: var(--marke-navy);
  --schmuck: var(--marke-rot);
  --oben: var(--marke-navy);
  --kopf: var(--marke-weiss);
  --kopf-text: var(--marke-tinte);
  --flaeche: var(--marke-hellblau);
  --flaeche-text: var(--marke-navy);
  --flaeche-aktiv: var(--marke-navy);
  --dunkel: var(--marke-navy);
  --menue-text: var(--marke-schwarz);
  --titelbox: var(--marke-navy);
  --titelbox-hover: var(--marke-fuss-hover);
  --claim: var(--akzent);
  --claim-text: var(--akzent-text);
  --knopf: var(--marke-navy);
  --fuss: var(--marke-navy);
  --buehne-verlauf: var(--marke-navy);
  --fuss-bogen: var(--marke-navy);
}

/* 5. Fuß hell (67): für jedes Theme dieselben Werte, nach den Themes, damit sie gewinnen */
:root[data-fuss="hell"] {
  --fuss: var(--marke-fuss-hell);
  --fuss-text: var(--marke-fuss-hell-text);
  --fuss-leise: var(--marke-fuss-hell-leise);
  --fuss-linie: var(--marke-fuss-hell-linie);
  --fuss-hover: var(--marke-fuss-hell-hover);
  --fuss-bogen: var(--marke-fuss-hell-bogen);
}

/* Kompakt: alle Abstände eine Stufe enger (Darstellungsoption „dichte“) */
:root[data-dichte="kompakt"] {
  --luft-3: 16px;
  --luft-4: 28px;
  --luft-5: 40px;
}