/* 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);
  }

  .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;
}