/* Varianten der Darstellungsoptionen (Plan, „Darstellung je Website“). Die
   Vorgaben (menue=waagerecht, kopf=titel-links, leiste=rechts, dichte=normal)
   stehen in 03-aufbau.css; hier nur die Abweichungen. Wo das Menü steht,
   entscheidet die Vorlage; die Regeln hier bestimmen, wie es dort aussieht.
   „dichte“ wirkt über die Tokens (01-tokens.css), „liste“ ab Phase 6.3.

   Jede Option steht für sich – mit einer Ausnahme, die hier ausdrücklich
   steht: Seitliches Menü und Seitenleiste teilen sich das Raster des Rumpfs,
   deshalb gibt es für ihre Kombinationen je eine Regel. */

/* kopf: Logo links, Titel daneben */
[data-kopf="logo-links"] .logo {
  order: -1;
  justify-self: start;
}

[data-kopf="logo-links"] .kopf-innen {
  grid-template-columns: minmax(0, 285px) minmax(0, 1fr);
}

/* kopf: Logo und Titel zentriert, untereinander */
[data-kopf="zentriert"] .kopf-innen {
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  text-align: center;
}

[data-kopf="zentriert"] .logo {
  order: -1;
  justify-self: center;
}

[data-kopf="zentriert"] .titelbox,
[data-kopf="zentriert"] .claim {
  margin-inline: auto;
}

/* menue: waagerecht im Kopf, unter Marke und Logo über die ganze Breite */
[data-menue="im-kopf"] .kopf .menueknopf,
[data-menue="im-kopf"] .kopf .hauptmenue {
  grid-column: 1 / -1;
}

[data-menue="im-kopf"] .kopf .hauptmenue > ul > li > a,
[data-menue="im-kopf"] .kopf .hauptmenue > ul > li > .ohne-ziel,
[data-menue="im-kopf"] .kopf .menueknopf {
  border-color: var(--kopf-text);
  color: var(--kopf-text);
}

/* menue: seitlich als Spalte links neben dem Inhalt */
[data-menue="seitlich"] .seitenmenue .hauptmenue > ul {
  display: block;
}

[data-menue="seitlich"] .seitenmenue .hauptmenue > ul > li {
  border-bottom: 1px solid var(--linie);
}

[data-menue="seitlich"] .seitenmenue .hauptmenue > ul > li > a,
[data-menue="seitlich"] .seitenmenue .hauptmenue > ul > li > .ohne-ziel {
  padding: 10px 8px;
  text-transform: none;
}

/* Seitlich klappen Untermenüs im Fluss unter ihrem Punkt auf, nicht als
   schwebende Box über Menü und Inhalt; die gehört zum waagerechten Menü */
@media (min-width: 901px) {
  [data-menue="seitlich"] .seitenmenue .hauptmenue > ul > li > ul {
    position: static;
    width: auto;
    min-width: 0;
    max-width: none;
    max-height: none;
    overflow: visible;
    box-shadow: none;
  }
}

/* Raster des Rumpfs: Inhalt, Seitenleiste und – seitlich – das Menü */
@media (min-width: 901px) {
  [data-leiste="links"] .rumpf {
    grid-template-areas: "leiste inhalt";
    grid-template-columns: var(--leiste-breite) minmax(0, 1fr);
  }

  [data-leiste="keine"] .rumpf {
    grid-template-areas: "inhalt";
    grid-template-columns: minmax(0, 1fr);
  }

  [data-menue="seitlich"][data-leiste="rechts"] .rumpf {
    grid-template-areas: "menue inhalt leiste";
    grid-template-columns: 240px minmax(0, 1fr) var(--leiste-breite);
  }

  [data-menue="seitlich"][data-leiste="links"] .rumpf {
    grid-template-areas: "menue inhalt" "leiste inhalt";
    grid-template-columns: 240px minmax(0, 1fr);
  }

  [data-menue="seitlich"][data-leiste="keine"] .rumpf {
    grid-template-areas: "menue inhalt";
    grid-template-columns: 240px minmax(0, 1fr);
  }
}

/* Überschriften in Box (27d): Seitentitel, Zwischenüberschriften
   und Titel der Bausteine in den Farben der Titelbox, je Zeile eng um den Text
   (Entscheidung André 28.09.2026: wie cdu-sh.de, Zeilen ohne Lücke).
   h3 und h4 bleiben schlicht; ein Titel im Bild hat seine Box schon. */
:root[data-ueberschriften="box"] .inhalt h1:has(> .zeilenbox),
:root[data-ueberschriften="box"] .inhalt h2:has(> .zeilenbox),
:root[data-ueberschriften="box"] .baustein-titel {
  padding: 0;
  border-bottom: 0;
  font-family: var(--schrift-ui);
  font-weight: 800;
  line-height: 1.45;
}

/* Je Zeile eine Box; die Höhe der Fläche (Schrift plus 2 × 0.125em) reicht
   über die Zeilenhöhe von 1.45, so stoßen die Zeilen ohne Lücke aneinander. */
:root[data-ueberschriften="box"] .inhalt :is(h1, h2) > .zeilenbox,
:root[data-ueberschriften="box"] .baustein-titel > .zeilenbox {
  padding: 0.125em 12px;
  background: var(--titelbox);
  color: var(--titelbox-text);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

:root[data-ueberschriften="box"] .zeilenbox a {
  color: inherit;
}

/* Im Fuß keine Box (48d): Sie hätte die Farbe des Fußes, sichtbar wäre nur
   der Einzug von 12 px gegenüber den Zeilen darunter */
:root[data-ueberschriften="box"] .fuss .baustein-titel > .zeilenbox {
  padding: 0;
  background: none;
  color: inherit;
}

/* Mit Box keine Linie unter „Alle Meldungen“ – sie stünde als kurzer Strich
   neben dem Titel, der in Box selbst keine Linie hat (64) */
:root[data-ueberschriften="box"] .inhalt .baustein-meldungen > .baustein-mehr,
:root[data-ueberschriften="box"] .inhalt .baustein-meldungen > .reihe-steuerung {
  align-items: center;
  padding-bottom: 0;
  border-bottom: 0;
}

/* Im Karussell mittig zu Link und Pfeilen; als Block, damit jede Zeile ihre Box behält */
:root[data-ueberschriften="box"] .inhalt .meldungen-karussell > .baustein-titel,
:root[data-ueberschriften="box"] .inhalt .meldungen-kacheln-reihe > .baustein-titel {
  display: block;
  align-self: center;
}

/* Theme der Abgeordneten (55b): Adler und Name statt Titelbox und Parteilogo,
   das Menü am Rechner rechts daneben, im Fuß der Adler in Weiß. Hier stehen nur
   Maße, Schriftschnitte und die Lage im Raster; die Farben kommen aus den
   Rollen in 01-tokens.css. */
:root[data-theme="mandat"] .kopf {
  border-bottom: 1px solid var(--linie);
}

:root[data-theme="mandat"] .kopf-innen {
  grid-template-columns: auto minmax(0, max-content) minmax(0, 1fr);
  gap: 12px 20px;
  min-height: 0;
  padding-block: 20px;
}

:root[data-theme="mandat"] .logo {
  order: -1;
  justify-self: start;
  width: 64px;
  max-width: 64px;
}

:root[data-theme="mandat"] .titelbox,
:root[data-theme="mandat"] .claim {
  display: block;
  padding: 0;
  white-space: normal;
}

:root[data-theme="mandat"] .titelbox {
  font-size: clamp(1.5rem, 2.4vw, 1.875rem);
  font-weight: 600;
  line-height: 1.1;
}

:root[data-theme="mandat"] .claim {
  margin-top: 4px;
  font-family: var(--schrift-ui);
  font-size: 0.9375rem;
  line-height: 1.4;
}

:root[data-theme="mandat"] .hauptmenue li > a,
:root[data-theme="mandat"] .hauptmenue li > .ohne-ziel {
  font-weight: 700;
}

:root[data-theme="mandat"] .hauptmenue > ul > li > a,
:root[data-theme="mandat"] .hauptmenue > ul > li > .ohne-ziel {
  letter-spacing: 0;
  text-transform: none;
}

/* Der gewählte Punkt: Linie in der Hauptfarbe, nicht in Sand (zu wenig Kontrast) */
:root[data-theme="mandat"] .kopf .hauptmenue > ul > li.im-pfad > a,
:root[data-theme="mandat"] .kopf .hauptmenue > ul > li > a[aria-current="page"] {
  box-shadow: inset 0 -3px 0 var(--dunkel);
}

@media (min-width: 901px) {
  :root[data-theme="mandat"][data-menue="im-kopf"] .kopf .hauptmenue {
    grid-column: 3;
    justify-self: end;
    width: auto;
  }

  :root[data-theme="mandat"] .kopf .hauptmenue > ul {
    justify-content: flex-end;
    gap: 0;
  }

  :root[data-theme="mandat"] .kopf .hauptmenue > ul > li > a,
  :root[data-theme="mandat"] .kopf .hauptmenue > ul > li > .ohne-ziel {
    padding-inline: 10px 2px;
  }
}

/* Schmal steht der Menüknopf links unter Adler und Namen */
:root[data-theme="mandat"] .kopf .menueknopf {
  grid-column: 1 / -1;
  justify-self: start;
  margin-inline: 0;
}

/* Atkinson Hyperlegible läuft breiter als Inter: Platz für „Telefon“ */
:root[data-theme="mandat"] .kontakt-details > div {
  grid-template-columns: 5.5em minmax(0, 1fr);
}

:root[data-theme="mandat"] .inhalt h1,
:root[data-theme="mandat"] .inhalt h2,
:root[data-theme="mandat"] .baustein-titel,
:root[data-theme="mandat"] .fuss-name {
  font-weight: 600;
}

:root[data-theme="mandat"] .fuss {
  border-top: 4px solid var(--schmuck);
}

:root[data-theme="mandat"] .fuss-name {
  font-family: var(--schrift-titel);
}

:root[data-theme="mandat"] .fuss-name::before {
  content: "";
  display: block;
  width: 52px;
  aspect-ratio: 400 / 348;
  margin-bottom: 14px;
  background: url("../marken/mandat/adler-weiss.svg") no-repeat center / contain;
}

/* Heller Fuß (67): der Adler in Förde-Blau statt weiß */
:root[data-theme="mandat"][data-fuss="hell"] .fuss-name::before {
  background-image: url("../marken/mandat/logo.svg");
}

/* Themes der Vereinigungen (73b, Theme-Bausteine freigegeben am 22.09.2026): nur
   Formen, die keine Farbe sind; die Farben kommen aus den Rollen in 01-tokens.css.
   .logo-marke ist die Marke des Themes – ein hochgeladenes Logo bleibt, wie es ist. */

/* JU und Schüler Union: die Buchstaben-Marke klein rechts im Kopf */
:root[data-theme="ju"] .logo-marke,
:root[data-theme="schueler-union"] .logo-marke {
  max-width: 120px;
}

/* Frauen Union, Logo überlappend wie auf frauenunion.de: Das rote Feld (73,2 % der
   Logohöhe) endet auf der Unterkante des Kopfes, der CDU-Teil darunter steht in der
   Menüleiste, die rechts Platz dafür lässt. Nur am Rechner und mit dem Menü unter
   dem Kopf; schmal steht das Logo im Kopf. */
@media (min-width: 901px) {
  :root[data-theme="fu"][data-menue="waagerecht"][data-kopf="titel-links"]:has(.logo-marke) .kopf {
    z-index: 21;
  }

  :root[data-theme="fu"][data-menue="waagerecht"][data-kopf="titel-links"] .logo-marke {
    align-self: end;
    width: 131px;                            /* 170 px hoch bei 1201,9 × 1565 */
    margin-bottom: calc(-34px - 45.6px);     /* Innenabstand des Kopfes und der CDU-Teil (26,8 % von 170 px) */
  }

  :root[data-theme="fu"][data-menue="waagerecht"][data-kopf="titel-links"]:has(.logo-marke) .menueleiste .rahmen {
    padding-right: 150px;
  }
}

:root[data-theme="fu"] .logo-marke {
  max-width: 131px;
}

/* Senioren-Union: Kopf aus drei schrägen Blauflächen, rote Linien unter dem gewählten
   Menüpunkt, über den Kästen der Seitenleiste und über dem Fuß */
:root[data-theme="senioren-union"] .kopf {
  background: var(--kopf-flaechen);
}

:root[data-theme="senioren-union"] .hauptmenue > ul > li.im-pfad > a,
:root[data-theme="senioren-union"] .hauptmenue > ul > li > a[aria-current="page"],
:root[data-theme="cda"] .hauptmenue > ul > li.im-pfad > a,
:root[data-theme="cda"] .hauptmenue > ul > li > a[aria-current="page"] {
  box-shadow: inset 0 -5px 0 var(--schmuck);
}

:root[data-theme="senioren-union"] .leiste > * {
  border-top-color: var(--schmuck);
}

:root[data-theme="senioren-union"] .fuss {
  border-top: 5px solid var(--schmuck);
}

/* MIT, heller Modus: grauer Rand unter dem weißen Kopf, Titel und Claim ohne Box,
   kursiv in Versalien; Knöpfe mit 10 px Rundung */
:root[data-theme="mit"] .kopf {
  border-bottom: 25px solid var(--flaeche);
}

:root[data-theme="mit"] .titelbox,
:root[data-theme="mit"] .claim {
  padding: 0;
  font-style: italic;
  text-transform: uppercase;
}

:root[data-theme="mit"] .claim {
  padding-top: 2px;
  font-family: var(--schrift-ui);
  font-weight: 700;
}

:root[data-theme="mit"] .schaltflaeche,
:root[data-theme="mit"] .knopf,
:root[data-theme="mit"] .inhalt input[type="submit"],
:root[data-theme="mit"] .inhalt button[type="submit"] {
  border-radius: 10px;
}

/* KPV: Knöpfe als Umriss, beim Überfahren gefüllt */
:root[data-theme="kpv"] .schaltflaeche,
:root[data-theme="kpv"] .knopf,
:root[data-theme="kpv"] .inhalt input[type="submit"],
:root[data-theme="kpv"] .inhalt button[type="submit"] {
  border: 2px solid var(--knopf);
  background: var(--papier);
  color: var(--knopf);
}

:root[data-theme="kpv"] .schaltflaeche:hover,
:root[data-theme="kpv"] .knopf:hover,
:root[data-theme="kpv"] .inhalt input[type="submit"]:hover,
:root[data-theme="kpv"] .inhalt button[type="submit"]:hover {
  border-color: var(--knopf);
  background: var(--knopf);
  color: var(--knopf-text);
}

/* CDA: dünne Linie unter dem weißen Kopf (die rote Linie am Menüpunkt steht oben bei der Senioren-Union) */
:root[data-theme="cda"] .kopf {
  border-bottom: 1px solid var(--linie);
}

/* CDU-Bogen im Fuß (66): die drei Balken des Corporate Designs unten rechts,
   wie cdu-sh.de; als Maske, damit die Farbe aus den Tokens kommt. Nur beim
   CDU-Theme – bei Abgeordneten und Vereinigungen bleibt er aus. Er liegt
   hinter dem Text; der Kontrast der Fußschrift darauf ist geprüft. */
:root[data-theme="standard"][data-fuss-bogen="1"] .fuss {
  position: relative;
  isolation: isolate;
}

:root[data-theme="standard"][data-fuss-bogen="1"] .fuss::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--fuss-bogen);
  -webkit-mask: url("../marken/standard/bogen-hoch.svg") right bottom / 100% auto no-repeat;
  mask: url("../marken/standard/bogen-hoch.svg") right bottom / 100% auto no-repeat;
  pointer-events: none;
}

@media (min-width: 740px) {
  :root[data-theme="standard"][data-fuss-bogen="1"] .fuss::before {
    -webkit-mask: url("../marken/standard/bogen-breit.svg") right bottom / auto 100% no-repeat;
    mask: url("../marken/standard/bogen-breit.svg") right bottom / auto 100% no-repeat;
  }
}

@media print {
  :root[data-fuss-bogen="1"] .fuss::before {
    display: none;
  }
}