/* Aufbau: obere Leiste, Kopf, Hauptmenü, Brotkrumen, Raster, Seitenleiste, Fuß.
   Varianten der Darstellungsoptionen stehen in 04-varianten.css. */

/* Obere Leiste mit dem Metamenü */
.oben {
  background: var(--schmuck-verlauf) bottom / 100% 4px no-repeat, var(--oben);   /* Schmuckverlauf (JU, 73a), sonst none */
  color: var(--oben-text);
  font-family: var(--schrift-ui);
}

.oben .rahmen {
  display: flex;
  justify-content: flex-end;
  min-height: 36px;
}

.metamenue ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin: 0;
  padding: 8px 0;
  list-style: none;
  font-size: 0.8rem;
}

.metamenue a {
  color: var(--oben-text);
  text-decoration: none;
}

.metamenue a:hover,
.metamenue a[aria-current="page"] {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.oben :focus-visible {
  outline-color: var(--oben-text);
}

/* Kopf: Titelbox und Claim links, Logo rechts (Vorgabe „titel-links“) */
/* Titel und Menü in Inter 800: So erscheinen sie auf der Live-Seite, weil
   deren Sonderschnitte „Inter Menu“ und „Inter Header“ dort fehlen (404) und
   der Browser auf den schwersten vorhandenen Schnitt ausweicht. */
.kopf {
  /* Eigene Ebene wie die Menüleiste: Steht das Menü im Kopf (data-menue="kopf"),
     liegen seine Aufklappmenüs sonst unter der Bühne „Großes Bild“ (02.10.2026) */
  position: relative;
  z-index: 20;
  background: var(--kopf);
  color: var(--kopf-text);
  font-family: var(--schrift-ui);
}

/* Raster statt Flex: Die Marke nimmt, was sie braucht, das Logo wächst bis
   285 px und steht rechts in der Mitte (die zuletzt geltende Fassung von
   cdu-ploen-v40, dort am Dateiende nachgetragen) */
.kopf-innen {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  align-items: center;
  gap: clamp(10px, 3vw, 32px);
  min-height: 180px;
  padding-block: 34px;
}

.marke {
  display: block;
  min-width: 0;
  color: inherit;
  text-decoration: none;
}

/* Titel und Claim stehen in einer Zeile, solange das Skript (menue.js, Schritt 86)
   ihre Größe an den Platz anpasst; ohne Skript brechen sie um statt abgeschnitten
   zu werden. --titel-voll ist die Größe ohne Platzmangel, --titel-max die Schätzung
   vor dem Messen (auf dem Telefon kleiner), --titel-groesse setzt das Skript. */
.titelbox {
  --titel-max: var(--titel-voll);   /* an der Box, damit die Größe je Breite (--titel-voll) hier aufgelöst wird */
  display: table;
  max-width: calc(100vw - 2 * var(--rand));   /* sonst wächst die Spalte (max-content) mit, und nichts bricht um */
  padding: 5px 15px;
  background: var(--titelbox);
  color: var(--titelbox-text);
  font-family: var(--schrift-titel);
  font-size: var(--titel-groesse, var(--titel-max));
  font-weight: 800;
  line-height: 1.12;
}

.hat-js .titelbox:not(.titel-umbruch),
.hat-js .claim:not(.titel-umbruch) {
  white-space: nowrap;
}

/* Zeichenzahl des Titels, gerundet auf gerade Zahlen (Rahmen.php) – für die Schätzung auf dem Telefon */
[data-titel-laenge="8"] { --titel-zeichen: 8; }
[data-titel-laenge="10"] { --titel-zeichen: 10; }
[data-titel-laenge="12"] { --titel-zeichen: 12; }
[data-titel-laenge="14"] { --titel-zeichen: 14; }
[data-titel-laenge="16"] { --titel-zeichen: 16; }
[data-titel-laenge="18"] { --titel-zeichen: 18; }
[data-titel-laenge="20"] { --titel-zeichen: 20; }
[data-titel-laenge="22"] { --titel-zeichen: 22; }
[data-titel-laenge="24"] { --titel-zeichen: 24; }
[data-titel-laenge="26"] { --titel-zeichen: 26; }
[data-titel-laenge="28"] { --titel-zeichen: 28; }
[data-titel-laenge="30"] { --titel-zeichen: 30; }
[data-titel-laenge="32"] { --titel-zeichen: 32; }
[data-titel-laenge="34"] { --titel-zeichen: 34; }
[data-titel-laenge="36"] { --titel-zeichen: 36; }
[data-titel-laenge="38"] { --titel-zeichen: 38; }
[data-titel-laenge="40"] { --titel-zeichen: 40; }
[data-titel-laenge="42"] { --titel-zeichen: 42; }
[data-titel-laenge="44"] { --titel-zeichen: 44; }
[data-titel-laenge="46"] { --titel-zeichen: 46; }
[data-titel-laenge="48"] { --titel-zeichen: 48; }

.claim {
  display: table;
  max-width: calc(100vw - 2 * var(--rand));
  padding: 3px 15px;
  background: var(--claim);
  color: var(--claim-text);
  font-family: var(--schrift-text);
  font-size: 1.15rem;
  line-height: 1.55;
}

.logo {
  display: block;
  justify-self: end;
  width: 100%;
  max-width: 285px;
  min-width: 0;
}

.logo img {
  display: block;
  width: 100%;
  height: auto;
  background: var(--logo-grund);
}

/* Hauptmenü. Ohne JavaScript stehen alle Ebenen offen (statisch); mit
   JavaScript (.hat-js) klappen die Untermenüs auf Knopfdruck auf. */
.menueleiste {
  position: relative;
  z-index: 20;
  border-bottom: 1px solid var(--linie);
  background: var(--papier);
  font-family: var(--schrift-ui);
}

.menueleiste .rahmen {
  display: flex;
  align-items: center;
  min-height: 58px;
}

.menueleiste .hauptmenue {
  width: 100%;
}

.hauptmenue ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.hauptmenue > ul {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0 16px;
}

.hauptmenue li {
  position: relative;
  margin: 0;
}

.hauptmenue li > a,
.hauptmenue li > .ohne-ziel {
  display: block;
  padding: 16px 8px;
  color: var(--menue-text);
  font-family: var(--schrift-ui);
  font-size: 16px;
  font-weight: 800;
  line-height: 1.5;
  text-decoration: none;
}

.hauptmenue > ul > li > a,
.hauptmenue > ul > li > .ohne-ziel {
  letter-spacing: 0.015em;
  text-transform: uppercase;
}

.hauptmenue li:hover,
.hauptmenue li:focus-within,
.hauptmenue li.im-pfad,
.hauptmenue li:has(> a[aria-current="page"]) {
  background: var(--hell);
}

/* Schmuckverlauf (JU, 73a) unter dem gewählten Punkt der ersten Ebene; sonst none */
.hauptmenue > ul > li.im-pfad,
.hauptmenue > ul > li:has(> a[aria-current="page"]) {
  background: var(--schmuck-verlauf) bottom / 100% 4px no-repeat, var(--hell);
}

.hauptmenue ul ul {
  min-width: 250px;
  background: var(--flaeche);
}

.hauptmenue ul ul li > a,
.hauptmenue ul ul li > .ohne-ziel {
  padding: 13px 16px;
  color: var(--flaeche-text);
  font-size: 16px;
  text-transform: none;
  overflow-wrap: anywhere;
}

.hauptmenue ul ul li:hover,
.hauptmenue ul ul li:focus-within,
.hauptmenue ul ul li.im-pfad,
.hauptmenue ul ul li:has(> a[aria-current="page"]) {
  background: var(--flaeche-aktiv);
}

.hauptmenue ul ul li:hover > a,
.hauptmenue ul ul li:focus-within > a,
.hauptmenue ul ul li.im-pfad > a,
.hauptmenue ul ul li > a[aria-current="page"] {
  color: var(--flaeche-aktiv-text);
}

.hauptmenue ul ul :focus-visible {
  outline-color: var(--flaeche-aktiv-text);
  outline-offset: -3px;
}

/* Ebene 3: Gruppe im selben Aufklappfeld, keine Flyouts */
.hauptmenue ul ul ul {
  min-width: 0;
  margin: 0 0 0 10px;
  padding: 0 0 0 8px;
  border-left: 1px solid var(--unterebene-linie);
}

/* Mit JavaScript: Knopf neben jedem Punkt mit Untermenü, Untermenü darunter aufklappend */
.hat-js .hauptmenue li.hat-unter {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--treffer);
  align-items: stretch;
}

.hat-js .hauptmenue li.hat-unter > ul {
  grid-column: 1 / -1;
}

.unterknopf {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--treffer);
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
}

.unterknopf-dreieck {
  width: 0;
  height: 0;
  border-top: 6px solid currentColor;
  border-right: 5px solid transparent;
  border-left: 5px solid transparent;
}

.unterknopf[aria-expanded="true"] .unterknopf-dreieck {
  transform: rotate(180deg);
}

.hat-js .hauptmenue li.ist-offen,
.hat-js .hauptmenue li.ist-offen > a,
.hat-js .hauptmenue li.ist-offen > .unterknopf {
  background: var(--flaeche);
  color: var(--flaeche-text);
}

.menueknopf {
  display: none;
  align-items: center;
  gap: 12px;
  min-height: var(--treffer);
  padding: 10px 16px;
  border: 1px solid var(--dunkel);
  background: transparent;
  color: var(--dunkel);
  font-weight: 700;
}

.menueknopf-symbol {
  display: grid;
  gap: 4px;
}

.menueknopf-symbol span {
  display: block;
  width: 20px;
  height: 2px;
  background: currentColor;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

/* Offen wird der Knopf zum Schließen-Kreuz */
.menueknopf[aria-expanded="true"] .menueknopf-symbol span:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}

.menueknopf[aria-expanded="true"] .menueknopf-symbol span:nth-child(2) {
  opacity: 0;
}

.menueknopf[aria-expanded="true"] .menueknopf-symbol span:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

@media (min-width: 901px) {
  .hat-js .hauptmenue > ul > li > ul {
    position: absolute;
    top: 100%;
    left: 0;
    width: 320px;
    max-width: min(340px, 85vw);
    max-height: 65vh;
    overflow-y: auto;
    overscroll-behavior: contain;
    box-shadow: 0 12px 24px var(--schatten);
  }

  .hat-js .hauptmenue > ul > li:last-child > ul {
    right: 0;
    left: auto;
  }

  .hat-js .hauptmenue li.hat-unter:not(.ist-offen) > ul {
    display: none;
  }
}

/* Schritt 63: dritte Ebene als eigenes Menü nach rechts (data-menue-ebene3="seitlich").
   Nur am großen Bildschirm, beim waagerechten Menü und mit Skript; menue.js setzt
   den Knopf ▸ und, wenn rechts kein Platz ist, die Klasse nach-links. Sonst bleibt
   die eingerückte Gruppe. Das Aufklappfeld darf dafür nicht abschneiden. */
@media (min-width: 901px) {
  .hat-js[data-menue-ebene3="seitlich"]:not([data-menue="seitlich"]) .hauptmenue > ul > li > ul {
    max-height: none;
    overflow: visible;
  }

  .hat-js[data-menue-ebene3="seitlich"]:not([data-menue="seitlich"]) .hauptmenue .ebene-3 {
    position: absolute;
    top: 0;
    left: 100%;
    width: 280px;
    max-width: min(300px, 40vw);
    margin: 0;
    padding: 0;
    border-left: 0;
    box-shadow: 0 12px 24px var(--schatten);
  }

  .hat-js[data-menue-ebene3="seitlich"]:not([data-menue="seitlich"]) .hauptmenue .nach-links > .ebene-3 {
    right: 100%;
    left: auto;
  }

  .hat-js[data-menue-ebene3="seitlich"]:not([data-menue="seitlich"]) .hauptmenue .ebene-2 > li.ist-offen,
  .hat-js[data-menue-ebene3="seitlich"]:not([data-menue="seitlich"]) .hauptmenue .ebene-2 > li.ist-offen > a,
  .hat-js[data-menue-ebene3="seitlich"]:not([data-menue="seitlich"]) .hauptmenue .ebene-2 > li.ist-offen > .ohne-ziel,
  .hat-js[data-menue-ebene3="seitlich"]:not([data-menue="seitlich"]) .hauptmenue .ebene-2 > li.ist-offen > .unterknopf {
    background: var(--flaeche-aktiv);
    color: var(--flaeche-aktiv-text);
  }
}

/* Der Knopf der zweiten Ebene zeigt zur Seite, in die das Menü aufgeht
   (am Telefon blendet ihn die Regel unten aus) */
.unterknopf-seitlich .unterknopf-dreieck,
.unterknopf-seitlich[aria-expanded="true"] .unterknopf-dreieck {
  transform: rotate(-90deg);
}

.nach-links > .unterknopf-seitlich .unterknopf-dreieck {
  transform: rotate(90deg);
}

@media (max-width: 1100px) {
  .hauptmenue > ul {
    gap: 0 4px;
  }

  .hauptmenue li > a,
  .hauptmenue li > .ohne-ziel {
    font-size: 0.88rem;
  }
}

/* Telefon und Tablet: ohne JavaScript stehen alle Punkte untereinander;
   mit JavaScript klappt der Menüknopf die Navigation auf und zu. */
@media (max-width: 900px) {
  .menueleiste .rahmen {
    display: block;
    min-height: 72px;
    padding-block: 14px;
  }

  .hat-js .menueknopf {
    display: flex;
    margin-inline: auto;
  }

  .hat-js .hauptmenue:not(.ist-offen) {
    display: none;
  }

  .hauptmenue > ul {
    display: block;
    padding-top: 12px;
  }

  .hauptmenue > ul > li > a,
  .hauptmenue > ul > li > .ohne-ziel {
    padding: 13px 8px;
    font-size: 20px;
  }

  .hauptmenue ul ul {
    min-width: 0;
    margin: 0 0 8px;
    background: transparent;
  }

  .hauptmenue ul ul li > a,
  .hauptmenue ul ul li > .ohne-ziel {
    padding: 12px 8px 12px 24px;
    color: var(--menue-text);
    font-weight: 400;
  }

  .hat-js .hauptmenue .unterknopf {
    display: none;
  }
}

/* Brotkrumen: eine dezente Zeile, die bei Bedarf umbricht */
.pfad {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 10px;
  margin-top: var(--luft-3);
  color: var(--text-leise);
  font-family: var(--schrift-ui);
  font-size: 0.85rem;
  line-height: 1.65;
}

.pfad ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 0;
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pfad li {
  display: flex;
  align-items: center;
  min-width: 0;
  overflow-wrap: anywhere;
}

.pfad li + li::before {
  content: "";
  flex: none;
  margin: 0 10px;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-left: 5px solid var(--linie-dunkel);
}

.pfad a {
  color: var(--link);
  text-decoration: none;
}

.pfad a:hover,
.pfad a:focus-visible {
  text-decoration: underline;
}

/* Raster: Inhalt und Seitenleiste */
.rumpf {
  display: grid;
  grid-template-areas: "inhalt leiste";
  grid-template-columns: minmax(0, 1fr) var(--leiste-breite);
  gap: var(--luft-5);
  align-items: start;
  padding-block: var(--luft-4) 72px;
}

.inhalt {
  grid-area: inhalt;
}

.leiste {
  grid-area: leiste;
}

.seitenmenue {
  grid-area: menue;
}

.inhalt,
.leiste {
  min-width: 0;
  font-size: 1.0625rem;
}

/* Bereiche als Container (Schritt 30): Regeln an der Wurzel eines Bausteins
   fragen die Breite des Bereichs ab, in dem er steht */
.inhalt,
.leiste,
.fuss-bausteine {
  container-type: inline-size;
}

.inhalt:focus {
  outline: none;
}

/* Seitenleiste: Bausteine als Kästen */
.leiste {
  display: grid;
  gap: var(--luft-3);
}

.leiste > * {
  padding: var(--luft-3);
  border-top: 4px solid var(--flaeche);
  border-image: var(--schmuck-verlauf) 1;   /* JU (73a): obere Kante als Verlauf; sonst none */
  min-width: 0;
  background: var(--hell);
  overflow-wrap: break-word;   /* anywhere nur als Notbehelf (30a); min-width hält lange Adressen im Kasten */
}

.leiste h2,
.leiste h3 {
  margin: 0 0 16px;
  color: var(--dunkel);
  font-family: var(--schrift-ui);
  font-size: 1.25em;
  line-height: 1.25;
}

.leiste p {
  margin: 0 0 12px;
}

.leiste p:last-child {
  margin-bottom: 0;
}

.leiste img {
  display: block;
  margin-inline: auto;
}

/* Fuß: Kontakt aus den Stammdaten, Linklisten als Bausteine */
.fuss {
  background: var(--fuss);
  color: var(--fuss-text);
  font-family: var(--schrift-ui);
}

.fuss-innen {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: 48px;
  padding-block: var(--luft-4);
}

.fuss-name {
  margin: 0 0 6px;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.2;   /* lange Namen brechen um (CDU Schönkirchen-Mönkeberg) */
}

.fuss address {
  margin-top: 12px;
  color: var(--fuss-leise);
  font-size: 0.9rem;
  font-style: normal;
  line-height: 1.85;
  overflow-wrap: anywhere;
}

.fuss a {
  color: var(--fuss-text);
  text-decoration: none;
}

.fuss a:hover {
  text-decoration: underline;
}

.fuss :focus-visible {
  outline-color: var(--fuss-text);
}

.fuss-profile {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
}

.fuss-profile a {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: var(--treffer);
  padding: 8px 12px;
  border: 1px solid var(--fuss-linie);
  font-size: 0.82rem;
}

.fuss-profile a:hover {
  background: var(--fuss-hover);
  text-decoration: none;
}

/* Spaltenweise gefüllt (6.5d): ab drei Bausteinen stehen die ersten
   untereinander, wie „CDU & Fraktionen“ und „Mitgliedernetz & Medien“ live */
.fuss-bausteine {
  min-width: 0;
  column-gap: 32px;
  columns: 2;
}

.fuss-bausteine > * {
  break-inside: avoid;
}

.fuss-bausteine h2,
.fuss-bausteine h3 {
  margin: 0 0 16px;
  color: var(--fuss-text);
  font-size: 1rem;
  line-height: 1.4;
}

.fuss-bausteine ul {
  display: grid;
  gap: 5px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.88rem;
}

@media (max-width: 1100px) {
  :root {
    --leiste-breite: 250px;
  }

  .rumpf {
    gap: 36px;
  }
}

@media (max-width: 900px) {
  .kopf-innen {
    min-height: 160px;
  }

  .titelbox {
    --titel-voll: clamp(28px, 4.8vw, 43px);
  }

  .logo {
    max-width: clamp(140px, 32vw, 260px);
  }

  .rumpf {
    grid-template-areas: none;
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
  }

  .rumpf > * {
    grid-area: auto;
  }

  .leiste {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .fuss-innen {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }
}

@media (max-width: 540px) {
  .kopf-innen {
    gap: 10px;
    min-height: 144px;
    padding-block: 24px;
  }

  /* Schätzung ohne Skript: Platz in der Zeile (Breite minus Seitenränder und Innenabstand der Box)
     geteilt durch Zeichenzahl mal Zeichenbreite der Titelschrift, nicht unter 20 px (Schritt 86) */
  .titelbox {
    --titel-voll: clamp(24px, 6.2vw, 33px);
    --titel-max: min(var(--titel-voll), max(20px, calc((100vw - 2 * var(--rand) - 18px) / (var(--titel-zeichen, 20) * var(--titel-em, 0.59)))));
    padding: 5px 9px;
  }

  .claim {
    padding: 3px 8px;
    font-size: clamp(12px, 2.8vw, 14px);
    line-height: 1.5;
  }

  .logo {
    max-width: clamp(120px, 35vw, 182px);
  }

  /* Logo in eigener Zeile über dem Titel (Nachtrag zu 86, Andrés Entscheidung vom
     08.10.2026), wenn ein langer Titel es neben sich zusammendrücken würde. Vor dem
     Messen und ohne Skript schätzt die Titellänge (ab 20 Zeichen); menue.js
     entscheidet dann genau: logo-oben oder logo-daneben. Nur „Titel links“ –
     „Logo links“ hat eine feste Spalte, „zentriert“ steht ohnehin untereinander. */
  [data-kopf="titel-links"] .kopf-innen.logo-oben,
  [data-kopf="titel-links"]:is([data-titel-laenge^="2"], [data-titel-laenge^="3"], [data-titel-laenge^="4"]) .kopf-innen:not(.logo-daneben) {
    grid-template-columns: minmax(0, 1fr);
  }

  [data-kopf="titel-links"] .kopf-innen.logo-oben .logo,
  [data-kopf="titel-links"]:is([data-titel-laenge^="2"], [data-titel-laenge^="3"], [data-titel-laenge^="4"]) .kopf-innen:not(.logo-daneben) .logo {
    order: -1;
    justify-self: start;   /* Größe wie sonst auf dem Telefon bzw. je Theme (JU, FU) */
  }

  .metamenue ul {
    gap: 8px 12px;
    font-size: 0.7rem;
  }

  .pfad {
    margin-top: 18px;
    font-size: 0.8rem;
  }

  .rumpf {
    padding-block: 30px 44px;
  }

  .leiste {
    grid-template-columns: minmax(0, 1fr);
  }

  .fuss-bausteine {
    columns: 1;
  }
}

@media print {
  .oben,
  .menueleiste,
  .sprunglink,
  .fuss,
  .leiste,
  .logo {
    display: none;
  }

  .kopf {
    background: none;
  }

  .kopf-innen {
    min-height: 0;
    padding: 0 0 20px;
  }

  .titelbox {
    padding: 0;
    background: none;
    color: var(--text);
  }

  .claim {
    display: none;
  }

  .rumpf {
    display: block;
  }
}

/* Vorschau ohne Speichern (26c): das Band über der Seite, für die Redaktion */
.vorschau-band {
  position: sticky;
  top: 0;
  z-index: 50;
  margin: 0;
  padding: 10px 16px;
  background: var(--knopf);
  color: var(--knopf-text);
  font-family: var(--schrift-ui);
  font-size: 0.9375rem;
  text-align: center;
}