/* FBB – Gestaltung im Stil von Wochenbrief / Weekly News (alle Seiten, zuletzt geladen).
   Grundlage: scratchpad fbb-review/styleguide-wochenbrief.md
   Aufbau
     1  Tokens (ein Farbsatz für Website, Popup, Fußzeile)
     2  Bausteine: Eyebrow, Buttons (3 Stile), Karte, Hinweisbox, Pill
     3  Willkommens-Dialog
     4  Drittanbieter-Platzhalter (Elfsight) und Newsletter-Formular (Rapidmail)
     5  Mitgliederwerbung im Fraktionsbereich zentral ausblendbar (fbb-site.js → CONFIG)
     6+ Seiten-Angleichung (onepage-Klassen) */

/* 1 ---------------------------------------------------------------- Tokens */
:root {
  --fbb-yellow: #FFD501;
  --fbb-yellow-light: #FFE148;
  --fbb-yellow-soft: #FFF3C4;
  --fbb-red: #E40121;
  --fbb-red-deep: #B8041A;
  --fbb-ink: #2B2A2B;
  --fbb-ink-site: #2B2A2B;
  --fbb-muted: #6A6765;
  --fbb-line: #E4E1DA;
  --fbb-paper: #F4F3F0;
  --fbb-white: #FFFFFF;
  --fbb-font-display: "Bree Serif", Georgia, "Times New Roman", serif;
  --fbb-font-body: "Bricolage Grotesque", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fbb-radius: 4px;
  --fbb-radius-photo: 4px;
  --fbb-radius-pill: 999px;
  --fbb-bar: linear-gradient(90deg, var(--fbb-ink) 0 60%, var(--fbb-red) 60% 100%);
  --fbb-hl: linear-gradient(transparent 78%, var(--fbb-yellow) 78% 92%, transparent 92%);
  --fbb-container: 1180px;
  --fbb-gutter: 16px;
}

/* 2 ---------------------------------------------------------------- Bausteine */
.fbb-eyebrow {
  margin: 0 0 12px;
  font: 700 12px/1.2 var(--fbb-font-body);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--fbb-ink);
}
.fbb-eyebrow::before {
  content: "";
  display: inline-block;
  width: 6px; height: 6px;
  margin-right: 8px;
  border-radius: 50%;
  background: var(--fbb-red);
  vertical-align: middle;
  position: relative; top: -1px;
}
.fbb-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 12px 22px;
  border: 0; border-radius: var(--fbb-radius);
  font: 600 15px/1.2 var(--fbb-font-body);
  text-decoration: none; text-align: center;
  cursor: pointer;
}
.fbb-btn--primary { background: var(--fbb-yellow); color: var(--fbb-ink); }
.fbb-btn--primary:hover { background: var(--fbb-yellow-light); }
.fbb-btn--dark { background: var(--fbb-ink); color: #fff; }
.fbb-btn--dark:hover { background: #000; }
.fbb-btn--outline, .fbb-btn--link { background: transparent; color: var(--fbb-ink); box-shadow: inset 0 0 0 1.5px var(--fbb-ink); }
.fbb-btn--outline:hover, .fbb-btn--link:hover { background: var(--fbb-ink); color: #fff; }
.fbb-btn:focus-visible, .fbb-dialog a:focus-visible, .fbb-embed a:focus-visible { outline: 3px solid var(--fbb-red); outline-offset: 2px; }
.fbb-note {
  background: var(--fbb-yellow-soft);
  border-left: 4px solid var(--fbb-yellow);
  border-radius: var(--fbb-radius);
  padding: 12px 16px;
}
.fbb-note p { margin: 0; }
.fbb-note a, .fbb-embed a:not(.fbb-btn), .fbb-rm-note a { color: var(--fbb-ink); text-decoration: underline; text-decoration-color: var(--fbb-red); text-underline-offset: 3px; }

/* 3 ---------------------------------------------------------------- Willkommens-Dialog */
.fbb-dialog {
  position: fixed; inset: 0; z-index: 2147483000;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  background: rgba(43, 42, 43, .55);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
}
.fbb-dialog[hidden] { display: none; }
.fbb-dialog__box {
  position: relative;
  width: 100%; max-width: 500px;
  padding: 36px 32px 32px;
  background: #fff;
  border-radius: var(--fbb-radius);
  box-shadow: 0 20px 60px rgba(0, 0, 0, .3);
  font-family: var(--fbb-font-body);
  color: var(--fbb-ink);
  animation: fbbDialogIn .3s ease;
  overflow: hidden;
}
.fbb-dialog__box::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 6px; background: var(--fbb-bar); }
.fbb-dialog__box:focus { outline: none; }
.fbb-dialog__title { margin: 0 0 12px; font: 400 26px/1.2 var(--fbb-font-display); color: var(--fbb-ink); }
.fbb-dialog__text { margin: 0 0 24px; font-size: 16px; line-height: 1.55; color: var(--fbb-ink); }
.fbb-dialog__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.fbb-dialog__actions .fbb-btn { flex: 1 1 180px; }
.fbb-dialog__close {
  position: absolute; top: 8px; right: 8px;
  width: 44px; height: 44px;
  border: 0; border-radius: var(--fbb-radius);
  background: transparent; color: var(--fbb-ink);
  font: 400 28px/1 var(--fbb-font-body); cursor: pointer;
}
.fbb-dialog__close:hover { background: var(--fbb-paper); }
.fbb-dialog__close:focus-visible { outline: 3px solid var(--fbb-red); outline-offset: 0; }
html.fbb-dialog-open { overflow: hidden; }
@keyframes fbbDialogIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .fbb-dialog__box { animation: none; } }

/* 4 ---------------------------------------------------------------- Drittanbieter */
.fbb-embed { width: 100%; font-family: var(--fbb-font-body); color: var(--fbb-ink); }
.fbb-embed__card {
  position: relative;
  padding: 28px 28px 32px;
  background: #fff;
  border: 1px solid var(--fbb-line);
  border-radius: var(--fbb-radius);
  overflow: hidden;
}
.fbb-embed__card::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 6px; background: var(--fbb-bar); }
.fbb-embed__title { margin: 0 0 16px; font: 400 clamp(22px, 2.4vw, 28px)/1.2 var(--fbb-font-display); }
.fbb-embed__note { font-size: 15px; line-height: 1.55; }
.fbb-embed__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; }
.fbb-embed__hint { margin: 16px 0 0; font-size: 13.5px; line-height: 1.45; color: var(--fbb-muted); }
.fbb-embed[data-state="loaded"] { min-height: 320px; }
/* Elfsight-Inhalte in FBB-Schrift und -Form */
.fbb-embed [class*="eapps-"], .fbb-embed [class*="eapps-"] * { font-family: var(--fbb-font-body) !important; }
.fbb-embed [class*="eapps-"] h1, .fbb-embed [class*="eapps-"] h2, .fbb-embed [class*="eapps-"] h3,
.fbb-embed [class*="eapps-"] [class*="Title"], .fbb-embed [class*="eapps-"] [class*="title"] {
  font-family: var(--fbb-font-display) !important; font-weight: 400 !important; text-transform: none !important; letter-spacing: 0 !important;
}
.fbb-embed [class*="eapps-"] img { border-radius: var(--fbb-radius) !important; }

/* Newsletter (Rapidmail-Formular im FBB-Stil) */
#rmOrganism, #rmOrganism .rmBase, #rmOrganism .rmSubscription, .rmBody.rmBody--embed { background: transparent !important; color: var(--fbb-ink) !important; font-family: var(--fbb-font-body) !important; }
#rmOrganism .rmBase { max-width: 560px; margin: 0 !important; }
#rmOrganism .rmBase__container { padding: 0 !important; }
#rmOrganism .rmSubscription .rmBase__el { font-size: 16px !important; margin-bottom: 20px !important; display: block !important; }
#rmOrganism .rmBase__el--label-pos-left { display: block !important; }
#rmOrganism .rmBase__compLabel {
  display: block !important; width: auto !important; margin: 0 0 6px !important; padding: 0 !important;
  font: 600 15px/1.3 var(--fbb-font-body) !important; color: var(--fbb-ink) !important; text-align: left !important;
}
#rmOrganism .rmBase__compLabel--required::after { content: " *"; color: var(--fbb-red); }
#rmOrganism .rmBase__compContainer { width: 100% !important; }
#rmOrganism input.rmBase__comp--input {
  box-sizing: border-box; width: 100% !important; min-height: 48px; padding: 10px 14px !important;
  border: 1px solid #8a8580 !important; border-radius: var(--fbb-radius) !important; background: #fff !important;
  font: 400 16px/1.4 var(--fbb-font-body) !important; color: var(--fbb-ink) !important; box-shadow: none !important;
}
#rmOrganism input.rmBase__comp--input:focus { outline: 3px solid var(--fbb-red) !important; outline-offset: 1px; border-color: var(--fbb-ink) !important; }
#rmOrganism input[aria-invalid="true"] { border-color: var(--fbb-red) !important; }
#rmOrganism .rmSubscription .rmBase__comp--text { font: 600 13px/1.3 var(--fbb-font-body) !important; letter-spacing: .08em; text-transform: uppercase; color: var(--fbb-muted) !important; }
#rmOrganism .vFormRadio__group { display: flex !important; flex-wrap: wrap; gap: 8px 20px; }
#rmOrganism .vFormRadio { display: inline-flex !important; align-items: center; gap: 8px; min-height: 44px; margin: 0 !important; font-size: 16px; cursor: pointer; }
#rmOrganism .vFormRadio__input { width: 20px; height: 20px; accent-color: var(--fbb-ink); margin: 0; position: static !important; opacity: 1 !important; }
#rmOrganism .vFormRadio__label { padding: 0 !important; }
#rmOrganism .vFormRadio__label::before, #rmOrganism .vFormRadio__label::after { display: none !important; }
#rmOrganism .rmBase__compError { display: none; margin-top: 6px; padding: 0 !important; background: none !important; color: var(--fbb-red-deep) !important; font: 600 14px/1.4 var(--fbb-font-body) !important; }
#rmOrganism .rmBase__compError.fbb-show, #rmOrganism .rmBase__compError:not(:empty) { display: block; }
#rmOrganism .rmSubscription .rmBase__el--cta { display: block !important; }
#rmOrganism .rmBase__comp--cta {
  min-height: 48px; padding: 12px 28px !important; border: 0 !important; border-radius: var(--fbb-radius) !important;
  background: var(--fbb-yellow) !important; color: var(--fbb-ink) !important;
  font: 600 16px/1.2 var(--fbb-font-body) !important; cursor: pointer;
}
#rmOrganism .rmBase__comp--cta:hover { background: var(--fbb-yellow-light) !important; }
#rmOrganism .rmBase__comp--cta:focus-visible { outline: 3px solid var(--fbb-red); outline-offset: 2px; }
#rmOrganism .fbb-rm-note { margin: 0 0 20px; padding: 12px 16px; background: var(--fbb-yellow-soft); border-left: 4px solid var(--fbb-yellow); border-radius: var(--fbb-radius); font: 400 14px/1.5 var(--fbb-font-body); color: var(--fbb-ink); }
#rmOrganism .fbb-rm-note p { margin: 0; }

/* 5 ---------------------------------------------------------------- Mitglied werden (Fraktionsbereich) */
html.fbb-ohne-mitglied-gf.fbb-bereich-gf a[href="/mitglied-werden"],
html.fbb-ohne-mitglied-gf .fbb-footer[data-context="gf"] a[href="/mitglied-werden"],
html.fbb-ohne-mitglied-gf #fbb-gnav[data-context="gf"] .fbb-gnav__cta { display: none !important; }
/* Kopfzeile: „Jetzt Mitglied werden“ nur im Bereich Wählervereinigung (Feedback FBB 11/2026).
   Kopf ist seitenübergreifend → ausgeblendet über den Bereich der Hauptnavigation (gf), nicht über die Seite.
   onepage-Original-Button: visibility statt display, damit #fbb-gnav seine Ausrichtung behält. */
#fbb-gnav[data-context="gf"] .fbb-gnav__cta { display: none !important; }
body:has(#fbb-gnav[data-context="gf"]) #root .con-kit-section--type-header a[href*="mitglied-werden"] { visibility: hidden !important; }

/* 6 ---------------------------------------------------------------- onepage: Grundlagen */
/* Sektionstitel: einheitlich gelber Unterstrich-Balken statt Kringel, Kasten oder roter Linie */
#root .highlight-container { display: none !important; }
#root .con-kit-component-header .con-kit-quark-highlight,
#root .con-kit-component-text .con-kit-quark-highlight {
  background: var(--fbb-hl) !important;
  box-shadow: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 .04em !important;
  color: inherit !important;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
#root .con-kit-quark-highlight::before, #root .con-kit-quark-highlight::after { display: none !important; }

/* Buttons: drei Stile – Gelb (primär), Dunkel, Outline; Rot nur für „Mitglied werden“ */
#root .con-kit-component-button {
  --one-kit-radius: 4px !important;
  border-radius: 4px !important;
  min-height: 48px;
  font-family: var(--fbb-font-body) !important;
  font-weight: 600 !important;
}
#root .con-kit-component-button .con-kit-component-button__label { font-weight: 600 !important; font-size: 15px; }
#root a.con-kit-component-button[style*="--color-bg:228,1,33"]:not([href*="mitglied-werden"]) {
  --color-bg: 255,213,1 !important; --color-text: 43,42,43 !important; --color-bg--border: 255,213,1 !important;
}
#root a.con-kit-component-button[href*="mitglied-werden"] {
  --color-bg: 228,1,33 !important; --color-text: 255,255,255 !important; --color-bg--border: 228,1,33 !important;
}
#root a.con-kit-component-button[style*="--color-bg:242.25"],
#root a.con-kit-component-button[style*="--color-bg:255,255,255"]:not([href*="mitglied-werden"]) {
  --color-bg: 255,255,255 !important; --color-text: 43,42,43 !important;
  box-shadow: inset 0 0 0 1.5px var(--fbb-ink) !important;
}
#root a.con-kit-component-button:focus-visible { outline: 3px solid var(--fbb-red) !important; outline-offset: 2px; }
/* Kopf-Button: dezenter, aber Rot für „Mitglied werden“ */
.con-kit-section--type-header a.con-kit-component-button { min-height: 44px; }

/* Karten: 1 px Linie, 4 px Radius, weiß; Text 16 px */
#root .con-kit-molecule-textBlock[data-kit-frame="solid"],
#root .con-kit-molecule-grid-item[data-kit-frame="solid"],
#root .con-kit-component-list-item-accordion[data-kit-frame="solid"] {
  --one-kit-radius: 4px !important;
  border-radius: 4px !important;
}
#root .con-kit-molecule-textBlock[data-kit-frame="solid"][style*="--color-bg:242.25"] {
  --color-bg: 255,255,255 !important;
  --color-border: 228,225,218 !important;
  box-shadow: inset 0 0 0 1px var(--fbb-line);
}
#root .con-kit-container[data-kit-container-radius="16"] { --one-kit-radius: 4px !important; border-radius: 4px !important; }

/* FAQ: überall „+“ (statt + und ↓ gemischt), Frage Bree 18 px, Linien 1 px */
#root .con-kit-component-list-item-accordion { --color-border: 228,225,218 !important; }
#root .con-kit-component-list-item-accordion__head .con-kit-component-icon svg { display: none !important; }
#root .con-kit-component-list-item-accordion__head .con-kit-component-icon::before {
  content: "+"; display: block; width: 26px; text-align: center;
  font: 400 26px/20px var(--fbb-font-body); color: var(--fbb-ink); transition: transform .2s ease;
}
#root .con-kit-component-list-item-accordion[data-kit-frame="solid"] { box-shadow: inset 0 -1px 0 var(--fbb-line); }
#root .con-kit-component-list-item-accordion .con-kit-component-header--subheader { font-size: 18px !important; }
#root .con-kit-quark-highlight > svg { display: none !important; }
/* graue Hero-Zeilen („Bürgernah.“, „Mitmachen.“): Kontrast ≥ 4,5 : 1 */
#root .con-kit-quark-color[style*="--alpha-text:0.34"] { --color-text: 106,103,101 !important; --alpha-text: 1 !important; }
#root .con-kit-quark-color[style*="--alpha-text:0.64"] { --color-text: 74,72,73 !important; --alpha-text: 1 !important; }

/* Kategorie-Label (Eyebrow) über Sektionstiteln: Versal, roter Punkt (wie Wochenbrief) */
html[data-fbb-bereich="gf"] { --fbb-eb-hero: "Gemeinderatsfraktion"; }
html[data-fbb-bereich="wv"] { --fbb-eb-hero: "Wählervereinigung e. V."; }
#root [role="heading"][aria-level="1"]::before,
#root h1.con-kit-quark-h1::before,
#root [data-atom="header"].fbb-eb .con-kit-component-header::before,
#root section.cta .con-kit-component-header[data-font-kit-type="l"]::before,
#root [data-id="676b83ce-f918-4495-8707-7ba8cb3da67b"] .con-kit-component-header::before,
#root [data-id="b95b42cb-e27e-45d7-9e88-976062f17678"] .con-kit-component-header::before,
#root [data-id="q-DPV4YpdF9GIQR3bJsj2"] .con-kit-component-header::before,
#root [data-id="00c35f6b-09f9-4a43-a6be-bc39b85c310d"] .con-kit-component-header::before,
#root [data-id="ca2b39af-4ebf-44dc-af24-6c4927b116bd"] .con-kit-component-header::before,
#root [data-id="8f34703c-1cbc-4542-a9d0-1bf2d82fd0e1"] .con-kit-component-header::before,
#root [data-id="e03d8fe2-fc0b-4ca2-bc9f-4784a07d0105"] .con-kit-component-header::before,
#root [data-id="d352c006-a45e-4874-ad32-423808ff87e2"] .con-kit-component-header::before,
#root [data-id="b30b35bf-bf00-4799-ad51-5a97381fe343"] .con-kit-component-header::before {
  content: var(--fbb-eb, var(--fbb-eb-hero, ""));
  display: block;
  margin: 0 0 14px;
  font: 700 12px/1.2 var(--fbb-font-body);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--fbb-ink);
  padding-left: 14px;
  background: radial-gradient(circle at 3px 50%, var(--fbb-red) 3px, transparent 3.5px);
}
#root section.cta .con-kit-component-header[data-font-kit-type="l"] { --fbb-eb: "Mitmachen"; }
#root [data-id="676b83ce-f918-4495-8707-7ba8cb3da67b"] { --fbb-eb: "Stadt- und Ortschaftsräte"; }
#root [data-id="b95b42cb-e27e-45d7-9e88-976062f17678"] { --fbb-eb: "Unsere Ziele"; }
#root section.cta [data-id="0e451361-c437-4534-9ca1-1abb6c4796f8"] .con-kit-component-header[data-font-kit-type="l"] { --fbb-eb: "News & Presse"; }
#root [data-id="q-DPV4YpdF9GIQR3bJsj2"] { --fbb-eb: "Fragen & Antworten"; }
#root [data-id="00c35f6b-09f9-4a43-a6be-bc39b85c310d"] { --fbb-eb: "Über uns"; }
#root [data-id="ca2b39af-4ebf-44dc-af24-6c4927b116bd"] { --fbb-eb: "Werte"; }
#root [data-id="8f34703c-1cbc-4542-a9d0-1bf2d82fd0e1"] { --fbb-eb: "Haltung"; }
#root [data-id="e03d8fe2-fc0b-4ca2-bc9f-4784a07d0105"] { --fbb-eb: "Kontakt"; }
#root [data-id="d352c006-a45e-4874-ad32-423808ff87e2"] { --fbb-eb: "Themen"; }
#root [data-id="b30b35bf-bf00-4799-ad51-5a97381fe343"] { --fbb-eb: "Newsletter"; }
#root section[data-id="9202db9b-c1e2-47de-9080-6efb4a65199e"] { --fbb-eb-hero: "FBB-News"; }
/* zentrierte Titel: Label ebenfalls zentriert */
#root .con-kit-component-header::before { display: inline-block !important; }
#root .con-kit-component-header:has(> [data-kit-align-horizontal="left"])::before { display: table !important; margin-right: auto !important; margin-left: 0 !important; }

/* 7 ---------------------------------------------------------------- Startseite */
/* Kennzahlen als große Bree-Zahlen (wie „KW 43“), Beschriftung darunter */
#root section[data-id="vrRPQ2S_pZhwAw-KJhzUw"] .con-kit-component-grid-list .con-kit-quark-highlight {
  display: block;
  background: none !important;
  font-family: var(--fbb-font-display);
  font-size: clamp(34px, 21cqi, 84px) !important;
  line-height: .95;
  letter-spacing: -.01em;
  font-variant-numeric: tabular-nums;
  margin-bottom: 10px;
  white-space: nowrap;
}
#root section[data-id="vrRPQ2S_pZhwAw-KJhzUw"] .con-kit-component-grid-list .con-kit-component-header .con-kit-quark-paragraph {
  white-space: normal !important;
  font-family: var(--fbb-font-body) !important;
  font-weight: 600 !important;
  font-size: 17px !important;
  line-height: 1.35 !important;
}
#root section[data-id="vrRPQ2S_pZhwAw-KJhzUw"] .con-kit-component-grid-list .con-kit-component-header .con-kit-quark-paragraph:has(.con-kit-quark-highlight) { font-size: 17px !important; }
#root section[data-id="vrRPQ2S_pZhwAw-KJhzUw"] .con-kit-component-grid-list .con-kit-quark-color:has(> .con-kit-quark-highlight)::after { content: none; }
/* Gruppenfoto ohne Gelb-/Weißverlauf */
#root section[data-id="pcO0FOXRr5p1G59fNbXbQ"] .con-kit-component-image__overlay,
#root section[data-id="3abcc035-16f6-460c-9c66-521375320c76"] .con-kit-component-image__overlay { background: none !important; }
/* Handy: Buttons gleich breit, ohne Versatz */
@media (max-width: 767.98px) {
  #root .con-kit-component-link-group { width: 100%; }
  #root .con-kit-component-link-group > a.con-kit-component-button { width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; }
}

/* Cookie-Symbol: kleiner, unten links – verdeckt keine Buttons/Bilder mehr */
.con-kit-component-cookie-banner-bulka { left: 12px !important; right: auto !important; bottom: 12px !important; transform: scale(.8); transform-origin: left bottom; }

/* 8 ---------------------------------------------------------------- Karten mit farbigem Rahmen (Über uns, Themen) */
#root .con-kit-molecule-textBlock[data-kit-frame="line"] {
  --color-border: 228,225,218 !important;
  --one-kit-radius: 4px !important;
  border-radius: 4px !important;
}
#root .con-kit-molecule-textBlock[data-kit-frame="line"] .con-kit-component-text,
#root .con-kit-molecule-textBlock[data-kit-frame="solid"] .con-kit-component-text,
#root .con-kit-molecule-textBlock[data-kit-frame="line"] .con-kit-component-text .con-kit-quark-paragraph,
#root .con-kit-molecule-textBlock[data-kit-frame="solid"] .con-kit-component-text .con-kit-quark-paragraph {
  font-size: 16px !important; line-height: 1.55 !important;
}
#root .con-kit-molecule-textBlock[data-kit-frame="line"] .con-kit-component-header[data-font-kit-type="s"],
#root .con-kit-molecule-textBlock[data-kit-frame="solid"] .con-kit-component-header[data-font-kit-type="s"] {
  font-family: var(--fbb-font-display) !important; text-transform: none !important; letter-spacing: 0 !important;
}
#root .con-kit-molecule-textBlock[data-kit-frame="line"] .con-kit-component-header[data-font-kit-type="s"] .con-kit-quark-paragraph,
#root .con-kit-molecule-textBlock[data-kit-frame="solid"] .con-kit-component-header[data-font-kit-type="s"] .con-kit-quark-paragraph { font-size: 21px !important; line-height: 1.25 !important; font-family: var(--fbb-font-display) !important; }
/* Icon-Kachel: 40 px gelbes Quadrat */
#root .con-kit-molecule-textBlock[data-kit-frame="line"] .con-kit-component-icon--style-solid,
#root .con-kit-molecule-textBlock[data-kit-frame="solid"] .con-kit-component-icon--style-solid { --color-bg: 255,243,196 !important; --one-kit-radius: 4px !important; }
#root .con-kit-component-icon--style-solid .con-kit-component-icon__border { --one-kit-radius: 4px !important; border-radius: 4px !important; }
/* gelbe Markenkarten (Themen): Ink/Rot-Balken unten */
#root .con-kit-molecule-textBlock[data-kit-frame="solid"][style*="--color-bg:255,213,1"] { position: relative; overflow: hidden; }
#root .con-kit-molecule-textBlock[data-kit-frame="solid"][style*="--color-bg:255,213,1"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 6px; background: var(--fbb-bar); }
/* Themen: Kachelraster mit gleich hohen Zeilen */
@media (min-width: 992px) { #root .con-kit-layout[data-kit-grid-type="bento"] { grid-auto-rows: 1fr; } }

/* 9 ---------------------------------------------------------------- Stadträte */
html[data-fbb-seite="stadtrate"] #root .con-kit-fade-box:has(img[data-fbb-crop]),
html[data-fbb-seite="steckbrief"] #root .con-kit-fade-box:has(img[data-fbb-crop]) {
  aspect-ratio: 4 / 5; height: auto !important; border-radius: 4px; overflow: hidden; position: relative;
}
html[data-fbb-seite="stadtrate"] #root .con-kit-fade-box:has(img[data-fbb-crop])::after,
html[data-fbb-seite="steckbrief"] #root .con-kit-fade-box:has(img[data-fbb-crop])::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 6px; background: var(--fbb-bar); z-index: 2;
}
html[data-fbb-seite="stadtrate"] #root img[data-fbb-crop], html[data-fbb-seite="steckbrief"] #root img[data-fbb-crop] { object-fit: cover; width: 100%; height: 100%; }
/* Rollen-Badges einheitlich (Pill, hellgelb) */
#root .con-kit-atom-label-text {
  --color-bg: 255,243,196 !important; --color-text: 43,42,43 !important; --color-border: 255,243,196 !important;
  border-radius: 999px !important; --one-kit-radius: 999px !important;
  font: 700 11.5px/1.2 var(--fbb-font-body) !important; letter-spacing: .08em !important; text-transform: uppercase;
}
html[data-fbb-seite="stadtrate"] #root section.layout a.con-kit-component-button[href^="/"]:not([href*="mitglied"]) {
  --color-bg: 255,255,255 !important; box-shadow: inset 0 0 0 1.5px var(--fbb-ink) !important; min-height: 44px; white-space: nowrap;
}
html[data-fbb-seite="stadtrate"] #root section.layout a.con-kit-component-button[href^="/"]:not([href*="mitglied"]) .con-kit-component-button__label::after { content: "\00a0→"; }
html[data-fbb-seite="stadtrate"] #root section.layout a.con-kit-component-button .con-kit-component-button__label { white-space: nowrap; display: inline; }

/* 10 --------------------------------------------------------------- Steckbriefe (onepage-Vorlage) */
html[data-fbb-seite="steckbrief"] #root .con-kit-layout:has(h1) { justify-content: flex-start !important; }
html[data-fbb-seite="steckbrief"] #root .con-kit-col:has(h1) { margin-left: 0 !important; flex: 0 0 100% !important; max-width: 100% !important; width: 100% !important; }
@media (max-width: 767.98px) {
  html[data-fbb-seite="steckbrief"] #root .con-kit-fade-box:has(img[data-fbb-crop]) { max-width: 320px; margin: 0 auto; }
}
html[data-fbb-seite="steckbrief"] #root [data-atom="header"]:has(h1) { text-align: left !important; justify-content: flex-start !important; align-items: flex-start !important; }
html[data-fbb-seite="steckbrief"] #root h1.con-kit-quark-h1 { text-align: left !important; font-size: clamp(36px, 5vw, 56px) !important; line-height: 1.1 !important; }
html[data-fbb-seite="steckbrief"] #root .con-kit-component-text .con-kit-quark-paragraph { font-size: 17px !important; line-height: 1.6 !important; }
/* Spruch als Zitatkarte statt unterstrichenem Pseudo-Link */
html[data-fbb-seite="steckbrief"] #root .con-kit-component-text .con-kit-quark-paragraph:has(.con-kit-quark-highlight[data-highlight-type^="hand"]) {
  position: relative; margin: 20px 0 8px; padding: 20px 24px 22px 64px;
  background: var(--fbb-ink); color: #fff !important; border-radius: 4px;
  font: 400 20px/1.4 var(--fbb-font-display) !important;
}
html[data-fbb-seite="steckbrief"] #root .con-kit-component-text .con-kit-quark-paragraph:has(.con-kit-quark-highlight[data-highlight-type^="hand"])::before {
  content: "„"; position: absolute; left: 18px; top: -4px; font: 400 64px/1 var(--fbb-font-display); color: var(--fbb-yellow);
}
html[data-fbb-seite="steckbrief"] #root .con-kit-component-text .con-kit-quark-paragraph:has(.con-kit-quark-highlight[data-highlight-type^="hand"]) * { color: #fff !important; background: none !important; }
html[data-fbb-seite="steckbrief"] #root .con-kit-component-text .con-kit-quark-highlight[data-highlight-type="underline"] {
  display: inline; background: var(--fbb-yellow-soft) !important; color: var(--fbb-ink) !important;
  border-left: 4px solid var(--fbb-yellow) !important; padding: .25em .55em !important; border-radius: 0 4px 4px 0 !important;
  font: 400 19px/1.9 var(--fbb-font-display) !important;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
html[data-fbb-seite="steckbrief"] #root .con-kit-component-text .con-kit-quark-highlight:has(> svg:only-child) { display: none !important; }

/* 11 --------------------------------------------------------------- Unsere Geschichte: ab 1024 px Jahr/Bild links, Text rechts */
@media (min-width: 1024px) {
  html[data-fbb-seite="unsere-geschichte"] #root .con-kit-component-grid-timeline__progress-bar,
  html[data-fbb-seite="unsere-geschichte"] #root .con-kit-component-grid-timeline__icon { display: none !important; }
  html[data-fbb-seite="unsere-geschichte"] #root .con-kit-component-grid-timeline__container { display: block !important; }
  html[data-fbb-seite="unsere-geschichte"] #root .con-kit-component-grid-timeline__item {
    width: 100% !important; max-width: 1100px; margin: 0 auto !important; padding: 32px 0 !important;
    left: auto !important; right: auto !important; transform: none !important;
    border-top: 1px solid var(--fbb-line);
  }
  html[data-fbb-seite="unsere-geschichte"] #root .con-kit-component-grid-timeline__item > div { padding: 0 !important; margin: 0 !important; width: 100% !important; }
  html[data-fbb-seite="unsere-geschichte"] #root .con-kit-component-grid-timeline__item .con-kit-molecule-textBlock { width: 100% !important; text-align: left !important; }
  html[data-fbb-seite="unsere-geschichte"] #root .con-kit-component-grid-timeline__item .con-kit-component-atom-list {
    display: grid !important; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 48px; align-items: start;
  }
  html[data-fbb-seite="unsere-geschichte"] #root .con-kit-component-grid-timeline__item .con-kit-component-atom-list > [data-atom="header"] { grid-column: 1; grid-row: 1; }
  html[data-fbb-seite="unsere-geschichte"] #root .con-kit-component-grid-timeline__item .con-kit-component-atom-list > [data-atom="image"] { grid-column: 1; grid-row: 2; }
  html[data-fbb-seite="unsere-geschichte"] #root .con-kit-component-grid-timeline__item .con-kit-component-atom-list > [data-atom="plain-text"] { grid-column: 2; grid-row: 1 / span 2; }
  html[data-fbb-seite="unsere-geschichte"] #root .con-kit-component-grid-timeline__item [data-atom] { text-align: left !important; align-items: flex-start !important; justify-content: flex-start !important; }
}
html[data-fbb-seite="unsere-geschichte"] #root .con-kit-component-grid-timeline__item .con-kit-component-text .con-kit-quark-paragraph { font-size: 16px !important; line-height: 1.6 !important; }
html[data-fbb-seite="unsere-geschichte"] #root .con-kit-component-grid-timeline__item .con-kit-component-header .con-kit-quark-paragraph { font-family: var(--fbb-font-display) !important; font-size: clamp(36px, 4vw, 56px) !important; line-height: 1 !important; font-variant-numeric: tabular-nums; }
html[data-fbb-seite="unsere-geschichte"] #root .con-kit-component-grid-timeline__item .con-kit-fade-box { border-radius: 4px; overflow: hidden; }

/* 12 --------------------------------------------------------------- News, Newsletter, Mitglied werden */
html[data-fbb-seite="news"] #root .fbb-embed, html[data-fbb-seite="home"] #root .fbb-embed { text-align: left; }
#rmOrganism .fbb-rm-note, #rmOrganism .fbb-rm-note p { text-align: left !important; }
@media (min-width: 1024px) {
  html .fbb-form { max-width: 1298px; padding-left: 24px; padding-right: 24px; }
  html .fbb-form > * { max-width: 760px; }
}

/* 13 --------------------------------------------------------------- Rechtsseiten (Impressum, Datenschutz): gleicher Container wie die übrigen Seiten */
html:is([data-fbb-seite="impressum"], [data-fbb-seite="fraktion-impressum"], [data-fbb-seite="datenschutz"]) body { background: #fff; }
html:is([data-fbb-seite="impressum"], [data-fbb-seite="fraktion-impressum"], [data-fbb-seite="datenschutz"]) .nav__in { max-width: 1298px; padding: 16px 24px; }
html:is([data-fbb-seite="impressum"], [data-fbb-seite="fraktion-impressum"], [data-fbb-seite="datenschutz"]) .nav__logo img { height: 72px; }
html:is([data-fbb-seite="impressum"], [data-fbb-seite="fraktion-impressum"], [data-fbb-seite="datenschutz"]) main { max-width: 1298px; padding: 64px 24px 96px; }
html:is([data-fbb-seite="impressum"], [data-fbb-seite="fraktion-impressum"], [data-fbb-seite="datenschutz"]) main > * { max-width: 800px; }
html:is([data-fbb-seite="impressum"], [data-fbb-seite="fraktion-impressum"], [data-fbb-seite="datenschutz"]) main h1 { font-size: clamp(34px, 5vw, 52px); line-height: 1.1; margin-bottom: 12px; }
html:is([data-fbb-seite="impressum"], [data-fbb-seite="fraktion-impressum"], [data-fbb-seite="datenschutz"]) main h1::before {
  content: "Rechtliches"; display: block; margin: 0 0 14px; padding-left: 14px;
  font: 700 12px/1.2 var(--fbb-font-body); letter-spacing: .08em; text-transform: uppercase;
  background: radial-gradient(circle at 3px 50%, var(--fbb-red) 3px, transparent 3.5px);
}
html:is([data-fbb-seite="impressum"], [data-fbb-seite="fraktion-impressum"], [data-fbb-seite="datenschutz"]) main h2 { padding-top: 8px; border-top: 1px solid var(--fbb-line); }
html:is([data-fbb-seite="impressum"], [data-fbb-seite="fraktion-impressum"], [data-fbb-seite="datenschutz"]) .box { border-radius: 4px; border-color: var(--fbb-line); }
html:is([data-fbb-seite="impressum"], [data-fbb-seite="fraktion-impressum"], [data-fbb-seite="datenschutz"]) .note { background: var(--fbb-yellow-soft); border: 0; border-left: 4px solid var(--fbb-yellow); border-radius: 4px; color: var(--fbb-ink); }
html:is([data-fbb-seite="impressum"], [data-fbb-seite="fraktion-impressum"], [data-fbb-seite="datenschutz"]) main a { color: var(--fbb-ink); text-decoration-color: var(--fbb-red); text-underline-offset: 3px; }

/* Kopf: „Jetzt Mitglied werden“ überall rot (einziger roter Haupt-CTA) */
.fbb-gnav__cta, .nav__cta, .nav__links a.btn[href="/mitglied-werden"] { background: var(--fbb-red) !important; color: #fff !important; }
.fbb-gnav__cta:hover, .nav__cta:hover, .nav__links a.btn[href="/mitglied-werden"]:hover { background: var(--fbb-red-deep) !important; filter: none !important; }

/* 14 --------------------------------------------------------------- Performance/Barrierefreiheit: Inhalte nicht erst per Einblend-Animation zeigen
   (onepage blendet Texte erst nach dem Laden der Skripte ein → spätes LCP; ohne Bewegung auch besser bei Bewegungsempfindlichkeit) */
#root [data-kit-animation].con-kit-animation--prestart :is(.con-kit-animation__atom, .con-kit-animation__grid_item, .con-kit-col, .con-kit-row__container, [data-molecule]) { opacity: 1 !important; transform: none !important; }
#root [data-kit-animation] :is(.con-kit-animation__atom, .con-kit-animation__grid_item, .con-kit-col, .con-kit-row__container, [data-molecule]) { animation: none !important; }