/* "Stadt Friedland" ist im Menü auf Dropdown "links" gestellt -> klappt aus dem Bildschirm. Immer nach rechts öffnen. */
body.ltr .sp-megamenu-parent > li:first-child .sp-dropdown.sp-dropdown-sub.sp-menu-left { left: 100% !important; }

/* Seitenbreite für Full HD (vorher 1240px). 1860 statt 1920, damit es auch mit Browser-Seitenleiste (~30px) + Scrollbalken vollständig passt */
.body-innerwrapper, #sp-header { max-width: 1860px !important; margin-left: auto; margin-right: auto; }

/* Amtslogo 20% kleiner (200px -> 160px Höhe), Kopfzeile weniger wuchtig */
#sp-logo .logo-image { height: 160px; width: auto; }

/* Dropdown deckend, damit das Suchfeld nicht durchscheint */
.sp-megamenu-parent .sp-dropdown .sp-dropdown-inner { background: #045f2b !important; }

/* Suche im Menü: Modul 100118 liegt auf Position "menu" -> rechts neben den Menüeinträgen, schmal */
#sp-menu .sp-column { width: 100%; }
#sp-menu .sp-column > .sp-module { order: 2; flex: 0 0 270px; margin: 0 0 0 auto; padding-right: 15px; }
#sp-menu .sp-column > .sp-module .form-control { height: 36px; font-size: 14px; padding: 4px 12px; }
/* Bis 1440px: Suche + Menü etwas kompakter, damit alles in eine Zeile passt */
@media (max-width: 1439.98px) {
  #sp-menu .sp-column > .sp-module { flex-basis: 190px; }
  #sp-menu .sp-megamenu-parent > li > a { font-size: 14px; }
}
/* Mobil steckt die Suche im Offcanvas-Menü */
@media (max-width: 991.98px) { #sp-menu .sp-column > .sp-module { display: none; } }

/* Förderer-Logo (EU) oben rechts rechtsbündig, Kante auf Höhe der Suchleiste */
/* !important nötig: Page Builder setzt inline text-align:left (Addon-Einstellung "Ausrichtung") */
#sppb-addon-1613718339385 { text-align: right !important; }

/* Wartungsmenü (Modul 210, Position "banner", nur für angemeldete Redakteure): waagerechte Leiste mit Aufklappmenüs, Farben wie das alte bm_cool_menu aus J3 */
.wartungsmenue { display: flex; flex-wrap: wrap; margin: 0; padding: 0; list-style: none; background: #2b547e; border: 1px solid #151b54; border-radius: 4px; }
.wartungsmenue li { position: relative; list-style: none; }
#sp-banner .wartungsmenue a, #sp-banner .wartungsmenue .nav-header { display: block; padding: 8px 14px; color: #fff; font-size: 14px; white-space: nowrap; text-decoration: none; }
#sp-banner .wartungsmenue a:hover, #sp-banner .wartungsmenue a:focus, #sp-banner .wartungsmenue .active > a { background: #2b65ec; color: #e5e4e2; }
.wartungsmenue ul { display: none; position: absolute; top: 100%; left: 0; z-index: 1000; min-width: 240px; margin: 0; padding: 0; background: #2b547e; border: 1px solid #151b54; }
.wartungsmenue li:hover > ul, .wartungsmenue li:focus-within > ul { display: block; }
/* Leiste vor den Kopfbereich legen, sonst verschwinden die Aufklappmenüs dahinter */
#sp-banner { position: relative; z-index: 1001; }

/* ===== Design-Überarbeitung 06.11.2026 (Farben unverändert) ===== */

/* Eine Schrift statt zwei: Überschriften, Menü und Karten nutzen wie der Text die Systemschrift (vorher Arial) */
.sppb-addon-title, .sppb-addon-article h3, .sp-megamenu-parent > li > a { font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif !important; }

/* Menü in Großbuchstaben braucht etwas Laufweite, sonst wirkt es gedrängt */
.sp-megamenu-parent > li > a { letter-spacing: 0.03em; }

/* Abschnittsüberschriften der Startseite (die 10 mit Verlauf, IDs aus Page-Builder-Seite 1 "Start"): gleicher Einzug wie die Karten, ruhige grüne Linie statt Verlauf (Verlauf vom Page Builder per ID gesetzt -> !important), große Schrift leicht enger */
#sppb-addon-1670944384943, #sppb-addon-1761811150976, #sppb-addon-1768989726129, #sppb-addon-1768989726096, #sppb-addon-1768989726099, #sppb-addon-1685452851171, #sppb-addon-1625030878267, #sppb-addon-1687928170004, #sppb-addon-1588581507546, #sppb-addon-1636637723272 { background: none !important; }
#sppb-addon-1670944384943 .sppb-addon-title, #sppb-addon-1761811150976 .sppb-addon-title, #sppb-addon-1768989726129 .sppb-addon-title, #sppb-addon-1768989726096 .sppb-addon-title, #sppb-addon-1768989726099 .sppb-addon-title, #sppb-addon-1685452851171 .sppb-addon-title, #sppb-addon-1625030878267 .sppb-addon-title, #sppb-addon-1687928170004 .sppb-addon-title, #sppb-addon-1588581507546 .sppb-addon-title, #sppb-addon-1636637723272 .sppb-addon-title { padding: 0 0 6px 16px !important; border-left: 4px solid #045f2b; letter-spacing: -0.01em; line-height: 1.2; font-size: 1.5rem !important; }

/* Kartentitel kleiner als die Abschnittsüberschrift (Rangfolge stimmte am Handy nicht) und bis zu 3 Zeilen statt nach 2 abgeschnitten */
.sppb-addon-article h3 { font-size: 1.15rem !important; line-height: 1.3 !important; -webkit-line-clamp: 3 !important; letter-spacing: -0.005em; }

/* "weiterlesen" als klarer Link mit Pfeil und ausreichend großer Klickfläche (vorher 22px hoch) */
.sppb-readmore { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }
.sppb-readmore::after { content: "\203A"; margin-left: 6px; font-size: 1.2em; }

/* Alle Buttons einheitlich: gleiche Rundung, mind. 44px hoch, sofortiges Feedback beim Drücken */
.sppb-btn { border-radius: 6px !important; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
.sppb-btn, .sppb-readmore, .carousel-indicators [data-bs-target] { transition: transform 100ms ease-out; }
.sppb-btn:active, .sppb-readmore:active { transform: scale(0.97); }

/* Slider-Punkte: Optik bleibt (8px), Klickfläche wächst auf 28px */
.carousel-indicators [data-bs-target] { padding: 10px !important; background-clip: content-box !important; margin: 0 !important; }

/* Menüleiste bleibt beim Scrollen oben; gleiches Grün, leicht durchscheinend */
#sp-header { position: sticky; top: 0; background-color: rgba(4, 95, 43, 0.94) !important; -webkit-backdrop-filter: blur(12px) saturate(160%); backdrop-filter: blur(12px) saturate(160%); }

/* Handy */
@media (max-width: 991.98px) {
  /* Kopfbereich nahm fast ein Drittel des Bildschirms ein: Logo 160px -> 80px */
  #sp-logo .logo-image { height: 80px; }
  #sp-section-2 { padding-top: 6px; padding-bottom: 6px; }
  /* Menü-Knopf: 44x44 statt 25px breit */
  #offcanvas-toggler { min-width: 44px; justify-content: center; order: 3; }
  /* Suche auch am Handy sichtbar, links neben dem Menü-Knopf (wichtigster Einstieg für Bürger) */
  #sp-menu .sp-column > .sp-module { display: block; flex: 1 1 auto; margin: 0 8px 0 12px; padding: 0; }
  #sp-menu .sp-column > .sp-module .form-control { height: 40px; font-size: 16px; }
}

/* Weniger Bewegung gewünscht: kein Drück-Effekt, kein Überblenden */
@media (prefers-reduced-motion: reduce) {
  .sppb-btn, .sppb-readmore, .carousel-indicators [data-bs-target] { transition: none; }
  .sppb-btn:active, .sppb-readmore:active { transform: none; }
}
/* Weniger Transparenz gewünscht: Menüleiste deckend */
@media (prefers-reduced-transparency: reduce) {
  #sp-header { background-color: #045f2b !important; -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* ===== Farbsystem 06.11.2026: eine Familie rund um das Amtsgrün #045f2b statt 7 loser Grün-/Grautöne ===== */
:root {
  --fl-green: #045f2b;        /* Amtsgrün (unverändert) – Kopf, Buttons, Links, Überschriften */
  --fl-green-dark: #03461f;   /* dunkler: Fußbereich, gedrückte Buttons – trennt Ebenen */
  --fl-green-deep: #022f15;   /* am dunkelsten: Copyright-Zeile */
  --fl-green-light: #edffd1;  /* helles Grün (bisher Menü) – nur noch Hover/aktiv auf dunklem Grund */
  --fl-tint: #f1f6f2;         /* sehr helles Grüngrau – Flächen, Seitenrand */
  --fl-line: #dde5df;         /* Linien/Kartenränder */
  --fl-text: #1d1f1e;         /* Fließtext, fast schwarz */
  --fl-text-2: #56635a;       /* Nebeninfo (Datum, Kategorie) – 6:1 Kontrast statt 3,5:1 bei #888 */
}

/* Grundfarben Text */
body { color: var(--fl-text); }
.sppb-meta-date, .sppb-meta-category, .sppb-meta-category a, .sppb-article-meta { color: var(--fl-text-2) !important; }

/* Seitenrand außerhalb der 1860px: helles Grüngrau statt kaltem Grau #e2e2e2 */
.body-wrapper { background-color: var(--fl-tint) !important; }

/* Menü: alle Hauptpunkte gleich (weiß), nur die aktuelle Seite markiert – bisher waren auf der Startseite 4 Punkte hellgrün/fett */
#sp-menu .sp-megamenu-parent > li > a { color: #fff !important; font-weight: 500 !important; }
#sp-menu .sp-megamenu-parent > li > a:hover, #sp-menu .sp-megamenu-parent > li:hover > a { color: var(--fl-green-light) !important; }
#sp-menu .sp-megamenu-parent > li.current-item > a { box-shadow: inset 0 -3px 0 var(--fl-green-light); }

/* Karten: feine grüngraue Kante, weichere Ecken, ruhiger Schatten; beim Überfahren hebt sich die Karte leicht ab */
.sppb-addon-article, .sppb-addon-feature { border-color: var(--fl-line) !important; border-radius: 12px !important; box-shadow: 0 1px 2px rgba(3, 70, 31, 0.06), 0 4px 14px rgba(3, 70, 31, 0.06) !important; overflow: hidden; transition: box-shadow 200ms ease-out; }
.sppb-addon-article:hover, .sppb-addon-feature:hover { box-shadow: 0 2px 4px rgba(3, 70, 31, 0.08), 0 10px 28px rgba(3, 70, 31, 0.12) !important; }

/* Buttons: Amtsgrün, beim Überfahren/Drücken dunkler */
.sppb-btn-primary { background-color: var(--fl-green) !important; border-color: var(--fl-green) !important; color: #fff !important; }
.sppb-btn-primary:hover, .sppb-btn-primary:active { background-color: var(--fl-green-dark) !important; border-color: var(--fl-green-dark) !important; }

/* Gut sichtbarer Tastatur-Fokus in Amtsgrün */
a:focus-visible, button:focus-visible, input:focus-visible, .sppb-btn:focus-visible { outline: 3px solid rgba(4, 95, 43, 0.45); outline-offset: 2px; }
#sp-header a:focus-visible, #sp-bottom a:focus-visible, #sp-footer a:focus-visible { outline-color: var(--fl-green-light); }

/* Termine: Neon-Grün #31f731 (inline gesetzt -> !important) durch Amtsgrün ersetzt */
.mod_events_latest_first, .mod_events_latest { border-color: var(--fl-green) !important; }

/* Bild-Overlay beim Überfahren: Limette -> Amtsgrün */
.sppb-addon-image-overlay { background-color: rgba(4, 95, 43, 0.35) !important; }

/* Slider: Punkte und Pfeile liegen auf dem grünen Balken -> weiß statt Schwarz bzw. Grau */
.carousel-indicators [data-bs-target] { background-color: #fff !important; opacity: 0.45; }
.carousel-indicators [data-bs-target].active { opacity: 1; }
.carousel-control-prev, .carousel-control-next { background-color: rgba(255, 255, 255, 0.18) !important; color: #fff !important; }
.carousel-control-prev:hover, .carousel-control-next:hover { background-color: rgba(255, 255, 255, 0.32) !important; }

/* Nach-oben-Knopf: grün statt grau */
.sp-scroll-up { background-color: rgba(4, 95, 43, 0.85) !important; color: #fff !important; }

/* Fußbereich dunkler als der Kopf: trennt Inhalt und Service-Bereich, Kopf bleibt das hellere Markengrün */
#sp-bottom { background-color: var(--fl-green-dark) !important; }
#sp-footer { background-color: var(--fl-green-deep) !important; }
/* Wolkenkante (Page-Builder-Form) im Fußbereich war in Amtsgrün gefüllt und nur deshalb unsichtbar -> an neues Fußgrün anpassen */
#sp-bottom .sppb-shape-container path { fill: var(--fl-green-dark) !important; }
#sp-bottom a:hover, #sp-footer a:hover { color: var(--fl-green-light) !important; }

@media (prefers-reduced-motion: reduce) { .sppb-addon-article, .sppb-addon-feature { transition: none; } }
@media (prefers-contrast: more) { :root { --fl-text-2: #333d36; --fl-line: #8a978e; } }

/* ===== Logofarben als Akzente 06.11.2026 (Variante 1): Dunkelgrün bleibt tragende Fläche, Hellgrün + Blau aus dem Amtslogo setzen Akzente ===== */
:root {
  --fl-lime: #90c01e;      /* Logo-Grün – nur Flächen/Linien/auf Dunkelgrün, nie als Text auf Weiß (2,2:1) */
  --fl-sky: #00a8d2;       /* Logo-Blau – Linien, Fokus; als Text auf Weiß zu hell (2,8:1) */
  --fl-sky-text: #007a99;  /* Logo-Blau abgedunkelt für Links im Text (4,9:1 auf Weiß) */
  --fl-logo-line: linear-gradient(90deg, var(--fl-lime), var(--fl-sky)); /* wie der Bogen im Logo */
}

/* Feine Logo-Linie unter der Menüleiste: greift den grün-blauen Bogen des Logos auf */
#sp-header { border-bottom: 3px solid transparent; border-image: var(--fl-logo-line) 1; }

/* Abschnittsüberschriften: Linie links im Verlauf Hellgrün -> Blau statt einfarbig */
#sppb-addon-1670944384943 .sppb-addon-title, #sppb-addon-1761811150976 .sppb-addon-title, #sppb-addon-1768989726129 .sppb-addon-title, #sppb-addon-1768989726096 .sppb-addon-title, #sppb-addon-1768989726099 .sppb-addon-title, #sppb-addon-1685452851171 .sppb-addon-title, #sppb-addon-1625030878267 .sppb-addon-title, #sppb-addon-1687928170004 .sppb-addon-title, #sppb-addon-1588581507546 .sppb-addon-title, #sppb-addon-1636637723272 .sppb-addon-title { border-image: linear-gradient(180deg, var(--fl-lime), var(--fl-sky)) 1; }

/* Menü: aktuelle Seite mit Logo-Grün markiert (Balken, kein Text -> 3,6:1 reicht) */
#sp-menu .sp-megamenu-parent > li.current-item > a { box-shadow: inset 0 -3px 0 var(--fl-lime); }

/* Links im Fließtext in Logo-Blau (abgedunkelt) – so unterscheiden sie sich von den grünen Überschriften */
.sppb-addon-text-block a:not(.sppb-btn), .sppb-addon-content p a:not(.sppb-btn), .article-body a:not(.btn), .com-content-article__body a:not(.btn), .sppb-readmore { color: var(--fl-sky-text) !important; }
.sppb-addon-text-block a:not(.sppb-btn):hover, .sppb-addon-content p a:not(.sppb-btn):hover, .sppb-readmore:hover { color: #005a71 !important; }

/* Kategorie an Beiträgen als kleine Marke mit Logo-Grün-Fläche (dunkler Text darauf: 7,7:1) */
.sppb-meta-category a { display: inline-block; padding: 1px 8px; border-radius: 999px; background: rgba(144, 192, 30, 0.2); color: #2f4a05 !important; font-weight: 500; }

/* Tastatur-Fokus in Logo-Blau */
a:focus-visible, button:focus-visible, input:focus-visible, .sppb-btn:focus-visible { outline-color: var(--fl-sky); }

/* Termine: Markierungslinie in Logo-Grün */
.mod_events_latest_first, .mod_events_latest { border-color: var(--fl-lime) !important; }

/* Slider: aktiver Punkt in Logo-Grün (auf Amtsgrün 3,6:1), übrige weiß */
.carousel-indicators [data-bs-target].active { background-color: var(--fl-lime) !important; opacity: 1; }

/* Fußbereich: Links beim Überfahren in Logo-Grün (5,1:1 auf Dunkelgrün), Logo-Linie oben als Abschluss */
#sp-bottom a:hover, #sp-footer a:hover { color: var(--fl-lime) !important; }
#sp-bottom { border-top: 3px solid transparent; border-image: var(--fl-logo-line) 1; }

/* Suchfeld: Fokus mit Logo-Blau */
#sp-menu .form-control:focus { border-color: var(--fl-sky); box-shadow: 0 0 0 3px rgba(0, 168, 210, 0.35); }
/* Fußbereich ausnehmen: dort bleiben Links weiß (blau auf Dunkelgrün wäre unlesbar), Hover in Logo-Grün */
#sp-bottom a, #sp-bottom .sppb-addon-content p a, #sp-bottom .sppb-addon-text-block a, #sp-footer a { color: #fff !important; }
#sp-bottom a:hover, #sp-bottom .sppb-addon-content p a:hover, #sp-bottom .sppb-addon-text-block a:hover, #sp-footer a:hover { color: var(--fl-lime) !important; }
/* Slider-Pfeile waren zu blass: kräftigere helle Fläche */
.carousel-control-prev, .carousel-control-next { background-color: rgba(255, 255, 255, 0.3) !important; opacity: 1 !important; }

/* Beitrags-Karten (Aktuelles): alle Karten einer Reihe gleich hoch, "weiterlesen" immer unten, Anrisstext max. 2 Zeilen – vorher 189–237px hoch, wirkte unruhig */
.sppb-addon-article-layout { display: flex; }
.sppb-addon-article-layout > .sppb-addon-article { flex: 1 1 auto; display: flex; flex-direction: column; width: 100%; }
.sppb-addon-article .sppb-article-info-wrap { flex: 1 1 auto; display: flex; flex-direction: column; }
.sppb-addon-article .sppb-article-introtext { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.sppb-addon-article .sppb-readmore { margin-top: auto; align-self: flex-start; }

/* Modul "Brohmer Berge – Termine" (mod_brohmerberge_termine, Startseite Spalte Veranstaltungen): gleicher Aufbau wie die Termine des Amtes daneben */
.bb-termine__liste { list-style: none; margin: 0 0 12px; padding: 0; }
.bb-termine__eintrag { display: flex; flex-direction: column; gap: 2px; padding: 6px 0 6px 10px; margin-bottom: 8px; border-left: 3px solid var(--fl-lime, #90c01e); }
.bb-termine__datum { font-size: 0.85rem; color: var(--fl-text-2, #56635a); }
.bb-termine__datum .icon-calendar { margin-right: 4px; }
.bb-termine__titel { font-weight: 600; color: var(--fl-green, #045f2b); line-height: 1.3; }
a.bb-termine__titel:hover { color: var(--fl-green-dark, #03461f); text-decoration: underline; }
.bb-termine__ort { font-size: 0.85rem; color: var(--fl-text-2, #56635a); }
.bb-termine__alle { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; color: var(--fl-sky-text, #007a99); }
.bb-termine__alle::after { content: "\203A"; margin-left: 6px; font-size: 1.2em; }
/* Brohmer-Berge-Termine nutzen jetzt die Breite von Spalte 2+3 (Page Builder col-md-8): Termine zweispaltig nebeneinander */
@media (min-width: 768px) {
  .bb-termine__liste { display: grid; grid-template-columns: 1fr 1fr; column-gap: 24px; }
}
/* Zeile "Sie möchten Veranstaltungen veröffentlichen lassen?" (Spalte 1625030878264) jetzt über die volle Breite unter den Terminen: als ruhiger Hinweiskasten */
#column-id-1625030878264 { background: var(--fl-tint, #f1f6f2); border: 1px solid var(--fl-line, #dde5df); border-radius: 12px; padding: 16px 20px !important; margin-top: 8px; }
/* Abstand Hinweiskasten -> nächster Abschnitt (Margin am Kasten selbst wird vom Page Builder überschrieben, daher am Spalten-Wrapper) */
#column-wrap-id-1625030878264 { padding-bottom: 40px !important; }
/* Handy: Brohmer-Berge-Termine untereinander -> nur die ersten 5 zeigen (wie links), Rest über "Alle Termine" */
@media (max-width: 767.98px) { .bb-termine__eintrag:nth-child(n+6) { display: none; } }

/* Termine des Amtes (JEvents-Modul 233) im gleichen Aufbau wie die Brohmer-Berge-Termine daneben: Datum, Titel, Ort untereinander, hellgrüne Linie links, kein Trennstrich */
.mod_events_latest_table { border-collapse: separate !important; border-spacing: 0 8px; margin-top: 0; }
.mod_events_latest_table td.mod_events_latest_first, .mod_events_latest_table td.mod_events_latest { border: 0 !important; border-left: 3px solid var(--fl-lime, #90c01e) !important; padding: 6px 0 6px 10px !important; }
.mod_events_latest_table .bb-termine__datum, .mod_events_latest_table .bb-termine__titel, .mod_events_latest_table .bb-termine__ort { display: block; margin-top: 2px; }
.mod_events_latest_table .bb-termine__ort:empty { display: none; }
.mod_events_latest_table .bb-termine__titel a { color: var(--fl-green, #045f2b); font-weight: 600; }
.mod_events_latest_table .bb-termine__titel a:hover { color: var(--fl-green-dark, #03461f); text-decoration: underline; }
/* "Alle Termine im Amt Friedland" wie "Alle Termine der Brohmer Berge" */
.mod_events_latest_callink { margin-top: 4px; }
.mod_events_latest_callink a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; color: var(--fl-sky-text, #007a99) !important; }
.mod_events_latest_callink a::after { content: "\203A"; margin-left: 6px; font-size: 1.2em; }
/* JEvents setzt Datum/Titel auf vertical-align:text-top -> "·", "–" und "Uhr" rutschten optisch nach unten */
.mod_events_latest_table .mod_events_latest_date, .mod_events_latest_table .mod_events_latest_content { vertical-align: baseline !important; font-size: inherit !important; color: inherit !important; }
/* "Alle Termine …"-Links der Amts- und der Brohmer-Berge-Spalte auf gleicher Höhe: Spalteninhalt bis zum unteren Rand strecken, Link mit margin-top:auto nach unten */
:is(#column-id-1625030878251, #column-id-1632309322216) { flex-direction: column; align-items: stretch !important; justify-content: flex-start !important; }
:is(#column-id-1625030878251, #column-id-1632309322216) > .sppb-column-addons { flex: 1 1 auto; display: flex; flex-direction: column; width: 100%; }
:is(#column-id-1625030878251, #column-id-1632309322216) .addon-root-module,
:is(#column-id-1625030878251, #column-id-1632309322216) .addon-root-module > [id^="sppb-addon-"],
:is(#column-id-1625030878251, #column-id-1632309322216) .addon-root-module .sppb-addon-module,
:is(#column-id-1625030878251, #column-id-1632309322216) .addon-root-module .sppb-addon-content,
:is(#column-id-1625030878251, #column-id-1632309322216) .bb-termine { flex: 1 1 auto; display: flex; flex-direction: column; }
.mod_events_latest_callink, .bb-termine__alle { margin-top: auto !important; }
.bb-termine__alle { align-self: flex-start; }

/* Hinweis "Veranstaltung veröffentlichen" (Startseite, Spalte 1625030878264): volle Breite dreiteilig – Symbol | Text mit Angaben-Liste | Button */
#column-id-1625030878264 { padding: 24px 28px !important; }
.va-hinweis { display: grid; grid-template-columns: auto 1fr auto; gap: 24px; align-items: center; }
.va-hinweis__icon { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, var(--fl-lime, #90c01e), var(--fl-sky, #00a8d2)); box-shadow: 0 4px 12px rgba(3, 70, 31, 0.15); }
.va-hinweis__titel { margin: 0 0 4px !important; font-size: 1.25rem !important; font-weight: 600; color: var(--fl-green, #045f2b); letter-spacing: -0.01em; }
.va-hinweis__text p { margin: 0 0 10px; color: var(--fl-text, #1d1f1e); }
.va-hinweis__liste { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 8px; }
.va-hinweis__liste li { padding: 3px 10px; border-radius: 999px; background: #fff; border: 1px solid var(--fl-line, #dde5df); font-size: 0.85rem; color: var(--fl-text-2, #56635a); }
.va-hinweis__aktion { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.va-hinweis__button { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 28px; border-radius: 999px; background: var(--fl-green, #045f2b); color: #fff !important; font-weight: 600; white-space: nowrap; transition: background-color 150ms ease-out, transform 100ms ease-out; }
.va-hinweis__button:hover { background: var(--fl-green-dark, #03461f); text-decoration: none; }
.va-hinweis__button:active { transform: scale(0.97); }
.va-hinweis__adresse { font-size: 0.85rem; color: var(--fl-sky-text, #007a99) !important; }
@media (max-width: 767.98px) {
  .va-hinweis { grid-template-columns: 1fr; gap: 16px; }
  .va-hinweis__icon { width: 48px; height: 48px; }
  .va-hinweis__aktion { align-items: stretch; }
}
@media (prefers-reduced-motion: reduce) { .va-hinweis__button { transition: none; } .va-hinweis__button:active { transform: none; } }
/* Button-Schrift weiß – muss die allgemeine Linkfarbe für Textblöcke (blau, !important) überstimmen */
.sppb-addon-text-block .va-hinweis a.va-hinweis__button, .sppb-addon-text-block .va-hinweis a.va-hinweis__button:hover { color: #fff !important; text-decoration: none; }

/* Karte "Sitz der Verwaltung" (OpenStreetMap-Addon): gleiche Rundung und Kante wie die Karten/Kästen daneben */
.sppb-addon-openstreetmap { border-radius: 12px; overflow: hidden; border: 1px solid var(--fl-line, #dde5df); box-shadow: 0 1px 2px rgba(3, 70, 31, 0.06), 0 4px 14px rgba(3, 70, 31, 0.06); }

/* Überschriften in Textblöcken (z. B. Datenschutz) in derselben Systemschrift wie der Text, ruhige Größen */
.sppb-addon-text-block h2, .sppb-addon-text-block h3, .sppb-addon-text-block h4 { font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; letter-spacing: -0.01em; }
.sppb-addon-text-block h3 { font-size: 1.3rem; margin-top: 1.6em; }

/* ===== Ausrichtung: eine gemeinsame Inhaltskante =====
   Vorher lagen Menü, Überschriften, Karten, Texte und Fußzeile 0/5/10/15/20/29/270px innerhalb des Seitenrahmens
   (verschiedene Abstände aus dem Page Builder). Jetzt: alles 20px (mobil 16px) innen – wie das Amtslogo.
   Der farbige Balken links an den Abschnittsüberschriften hängt bewusst in den Rand, ihr Text steht auf der Kante. */
:root { --fl-rand: 20px; }
@media (max-width: 991.98px) { :root { --fl-rand: 16px; } }
/* Menü: erster Eintrag (Text) auf die Logokante, Suchfeld rechts mit gleichem Abstand */
@media (min-width: 992px) {
  #sp-menu .sp-megamenu-parent { margin-left: calc(var(--fl-rand) - 7px) !important; }
  #sp-menu .sp-column > .sp-module { padding-right: var(--fl-rand); }
}
/* Seiteninhalt: Abschnitte bekommen den Rand, Elemente keine eigenen seitlichen Versätze mehr */
#sp-component .sppb-section:not(.sppb-section .sppb-section) { padding-left: var(--fl-rand) !important; padding-right: var(--fl-rand) !important; }
#sp-component .sppb-addon-wrapper { margin-left: 0 !important; margin-right: 0 !important; }
#sp-component .sppb-column-addons { margin-left: 0 !important; margin-right: 0 !important; padding-left: 0 !important; padding-right: 0 !important; }
#sp-component .sppb-addon-text-block { padding-left: 0 !important; padding-right: 0 !important; }
/* Fußzeile: Inhalt auf dasselbe Raster statt schmal mittig */
#sp-bottom .sppb-row-container { max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; }
#sp-bottom .container, #sp-footer .container { padding-left: var(--fl-rand); padding-right: var(--fl-rand); }
/* Einzelne Page-Builder-Versätze: Texte "Fragen und Antworten"/"Wege entstehen" (10px), Untertitel Veranstaltungen (5px), OSM-Karte (15px) */
#section-id-1768989726094 .clearfix[id^="sppb-addon-"], #sppb-addon-1625030878272 { padding-left: 0 !important; padding-right: 0 !important; }
#sp-component .sppb-addon-openstreetmap-wrapper { margin-left: 0 !important; margin-right: 0 !important; }
/* Abschnittsüberschriften: Balken hängt in den Rand, Text steht auf der Inhaltskante */
#sppb-addon-1670944384943 .sppb-addon-title, #sppb-addon-1761811150976 .sppb-addon-title, #sppb-addon-1768989726129 .sppb-addon-title, #sppb-addon-1768989726096 .sppb-addon-title, #sppb-addon-1768989726099 .sppb-addon-title, #sppb-addon-1685452851171 .sppb-addon-title, #sppb-addon-1625030878267 .sppb-addon-title, #sppb-addon-1687928170004 .sppb-addon-title, #sppb-addon-1588581507546 .sppb-addon-title, #sppb-addon-1636637723272 .sppb-addon-title { margin-left: calc(-1 * var(--fl-rand)) !important; }
/* Anschrift-Kasten (Schatten auf .sppb-column-addons) braucht seinen Innenabstand zurück */
#column-id-1636637723260 > .sppb-column-addons { padding-left: 20px !important; padding-right: 20px !important; }

/* ===== Unterseiten: volle Breite, gleiche Kante wie Startseite/Logo/Menü (--fl-rand) =====
   Page-Builder-Unterseiten hatten eigene Begrenzungen (Container 1320px mittig, Abschnitts-Außenränder z. B. 60px).
   Die mittige Spalte (erster Versuch) wurde verworfen – Inhalte laufen jetzt wie auf der Startseite über die ganze Breite. */
body:not(.itemid-437) #sp-component .sppb-section:not(.sppb-section .sppb-section) { margin-left: 0 !important; margin-right: 0 !important; }
body:not(.itemid-437) #sp-component .sppb-row-container, body:not(.itemid-437) #sp-component .sppb-container-inner { max-width: none !important; padding-left: 0 !important; padding-right: 0 !important; }
/* Joomla-Seiten (Beiträge, Kategorien, Kalender): eigener .container um die Zeile, dort 15px -> Rand */
body:not(.itemid-437) #sp-main-body > .container { padding-left: var(--fl-rand) !important; padding-right: var(--fl-rand) !important; }

/* Überschriften nie blau: verlinkte Titel (z. B. Beitragstitel in Aktuelles/Archiv) erbten die blaue Linkfarbe -> Grün wie alle Überschriften */
#sp-main-body :is(h1, h2, h3, h4, h5, h6) a, #sp-main-body :is(h1, h2, h3, h4, h5, h6) a:visited { color: var(--fl-green, #045f2b) !important; text-decoration: none; }
#sp-main-body :is(h1, h2, h3, h4, h5, h6) a:hover { color: var(--fl-green-dark, #03461f) !important; text-decoration: underline; text-underline-offset: 0.15em; }

/* Startseite "Friedland erleben" (+ "Die Gemeinden des Amtes"): Kacheln gleich hoch.
   Vorher: Spalten vertikal mittig (kürzere Karte 4px tiefer), Bibliotheksbild 600x409 statt 600x400 -> Titel/Knopf 8px versetzt.
   Jetzt: Karten füllen die Spalte, Bilder einheitlich 3:2 (zugeschnitten), Knopf immer unten. */
:is(#section-id-1685452851164, #section-id-1636553308512) .sppb-row { align-items: stretch !important; }
:is(#section-id-1685452851164, #section-id-1636553308512) :is(.sppb-column, .sppb-column-addons, .sppb-addon-wrapper, [id^="sppb-addon-"].clearfix, .sppb-addon-feature, .sppb-addon-content, .sppb-media-content) { display: flex; flex-direction: column; flex: 1 1 auto; }
:is(#section-id-1685452851164, #section-id-1636553308512) .sppb-img-container img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
:is(#section-id-1685452851164, #section-id-1636553308512) .sppb-media-content .sppb-btn { margin-top: auto; }
:is(#section-id-1685452851164, #section-id-1636553308512) .sppb-feature-box-title { align-self: flex-start; }

/* ===== Mega-Menü: einheitliche, helle Untermenüs (06.11.2026) =====
   Vorher: jedes Untermenü andere Breite/Ausrichtung, dunkelgrüne Flächen, unterstrichene Großbuchstaben-Titel.
   Jetzt eine Gestaltung für alle: helles Panel mit Logo-Farblinie, ruhige Gruppentitel, Einträge mit Flächen-Hover.
   - .fl-mega (Amt/Stadt/Gemeinden, Politik, Informationen): volle Breite, 4 gleiche Spalten auf der Inhaltskante
   - .fl-kompakt (Aktuelles, Veranstaltungen, Bürgerservice): 320px-Karte direkt unter dem Menüpunkt
   Klassen kommen aus den Helix-Menüeinstellungen (customclass), siehe aenderungen.md. */
#sp-menu .sp-column { position: relative; }
#sp-menu .sp-megamenu-parent, #sp-menu .sp-megamenu-parent > li.fl-mega { position: static; }
#sp-menu .sp-megamenu-parent > li.fl-mega > .sp-dropdown { left: 0 !important; right: 0 !important; width: auto !important; max-width: none !important; margin: 0 !important; padding: 0 !important; }
#sp-menu .sp-megamenu-parent > li.fl-kompakt > .sp-dropdown { left: 0 !important; right: auto !important; }
/* Menüpunkte füllen die ganze Balkenhöhe -> alle Panels setzen lückenlos an der Balkenunterkante an
   (vorher 12px Lücke zwischen Menüpunkt und Panel: Maus verließ beim Hineinfahren den Menüpunkt, Panel schloss sich) */
@media (min-width: 992px) {
  #sp-menu .sp-megamenu-parent > li { padding-top: 12px; padding-bottom: 12px; }
  #sp-menu .sp-megamenu-parent > li > .sp-dropdown { top: 100% !important; }
}

/* Panel */
#sp-menu .sp-megamenu-parent .sp-dropdown .sp-dropdown-inner {
  background: linear-gradient(90deg, var(--fl-lime, #90c01e), var(--fl-sky, #00a8d2)) top / 100% 3px no-repeat, #fff !important;
  box-shadow: 0 28px 48px -16px rgba(2, 47, 21, 0.30), 0 2px 8px rgba(2, 47, 21, 0.08) !important;
  border-radius: 0 0 14px 14px;
  padding: 24px 22px 22px !important;
}
#sp-menu .sp-megamenu-parent > li.fl-mega > .sp-dropdown .sp-dropdown-inner { padding: 30px var(--fl-rand) 32px !important; }
/* Spalten durch feine Linien trennen; erste Spalte bleibt auf der Kante */
#sp-menu .fl-mega > .sp-dropdown .row > [class*="col-"] + [class*="col-"] { border-left: 1px solid var(--fl-line, #dde5df); padding-left: 28px; }
#sp-menu .sp-dropdown ul.sp-mega-group, #sp-menu .sp-dropdown ul.sp-mega-group-child { margin: 0; padding: 0; list-style: none; }

/* Gruppentitel (Menüpunkt mit Unterpunkten; Link oder reine Überschrift) */
#sp-menu .sp-dropdown li > .sp-group-title {
  display: block; padding: 0 0 10px !important; margin: 0 0 8px; border-bottom: 1px solid var(--fl-line, #dde5df);
  font-size: 0.78rem !important; font-weight: 700 !important; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--fl-green, #045f2b) !important; text-decoration: none !important; background: none !important;
}
#sp-menu .sp-dropdown li > .sp-group-title:hover { color: var(--fl-green-dark, #03461f) !important; }
#sp-menu .sp-dropdown li > .sp-group-title { line-height: 1.3 !important; height: auto !important; }
/* Kompakte Listen: Einträge mit (versteckten) Unterpunkten wie normale Einträge zeigen */
#sp-menu .fl-kompakt .sp-dropdown li > .sp-group-title {
  margin: 0 -10px; padding: 7px 10px !important; border: 0; border-radius: 8px;
  font-size: 15px !important; font-weight: 400 !important; letter-spacing: 0; text-transform: none;
  line-height: 1.35 !important; color: var(--fl-text, #1d1f1e) !important;
}
#sp-menu .fl-kompakt .sp-dropdown li > .sp-group-title:hover { background: var(--fl-tint, #f1f6f2) !important; color: var(--fl-green, #045f2b) !important; }

/* Einträge */
#sp-menu .sp-dropdown li > a:not(.sp-group-title) {
  display: block; margin: 0 -10px; padding: 7px 10px !important; border-radius: 8px;
  font-size: 15px !important; line-height: 1.35; font-weight: 400 !important; letter-spacing: 0; text-transform: none !important;
  color: var(--fl-text, #1d1f1e) !important; text-decoration: none !important;
  transition: background-color 0.15s ease, color 0.15s ease;
}
#sp-menu .sp-dropdown li > a:not(.sp-group-title):hover,
#sp-menu .sp-dropdown li > a:not(.sp-group-title):focus-visible { background: var(--fl-tint, #f1f6f2) !important; color: var(--fl-green, #045f2b) !important; }
#sp-menu .sp-dropdown li.active > a:not(.sp-group-title) { color: var(--fl-green, #045f2b) !important; font-weight: 600 !important; }
#sp-menu .sp-dropdown li > a:focus-visible { outline: 2px solid var(--fl-sky, #00a8d2); outline-offset: 1px; }
/* Externe Seiten erkennbar machen */
#sp-menu .sp-dropdown a[href^="http"]:not([href*="friedland-mecklenburg.de"])::after { content: "\2197"; margin-left: 0.35em; font-size: 0.85em; color: var(--fl-text-2, #56635a); }

/* Sanftes Einblenden (nicht bei "Bewegung reduzieren") */
@media (prefers-reduced-motion: no-preference) {
  #sp-menu .sp-megamenu-parent > li > .sp-dropdown { animation: fl-menu-ein 0.18s cubic-bezier(0.2, 0.8, 0.2, 1); }
  @keyframes fl-menu-ein { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
}

/* ===== Überschriften einheitlich (07.11.2026) =====
   Vorher je nach Seite/Baustein H1 36–40px, H3 16–28px, Farben grün/schwarz/grau/weiß-auf-grau, teils Arial aus eingefügtem Text.
   Jetzt eine Hierarchie für den ganzen Inhaltsbereich: Grün, Systemschrift, 600, ruhigere Größen.
   Ausnahme: "Das Amt in Zahlen" (#lt-services, weiße Schrift auf Foto). Startseiten-Abschnittstitel (Balken) behalten 1.5rem über ihre eigene Regel. */
#sp-main-body :is(h1, h2, h3, h4, h5, h6):not(:where(#lt-services *)) {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif !important;
  font-weight: 600 !important;
  color: var(--fl-green, #045f2b) !important;
  line-height: 1.25 !important;
  letter-spacing: -0.01em;
}
/* Eingefügte Inline-Schriften/-Farben in Überschriften (z. B. Arial, Grau) neutralisieren; Symbole behalten ihre Schrift */
#sp-main-body :is(h1, h2, h3, h4, h5, h6):not(:where(#lt-services *)) :not(a):not([class*="fa"]):not([class*="icon"]) { font-family: inherit !important; color: inherit !important; font-size: inherit !important; }
#sp-main-body h1:not(:where(#lt-services *)) { font-size: 1.875rem !important; letter-spacing: -0.015em; }
#sp-main-body h2:not(:where(#lt-services *)) { font-size: 1.5rem !important; }
#sp-main-body h3:not(:where(#lt-services *)) { font-size: 1.25rem !important; }
#sp-main-body h4:not(:where(#lt-services *)) { font-size: 1.125rem !important; }
#sp-main-body h5:not(:where(#lt-services *)) { font-size: 1.0625rem !important; }
#sp-main-body h6:not(:where(#lt-services *)) { font-size: 0.9375rem !important; }
/* Wiederkehrende Bausteine mit fester Größe */
#sp-main-body :is(.blog, .com-content-category-blog, .blog-featured) :is(h2, h3).article-header, #sp-main-body :is(.blog, .com-content-category-blog) .article-header :is(h2, h3) { font-size: 1.25rem !important; }  /* Beitragstitel in Listen */
#sp-main-body .sppb-addon-articles :is(h2, h3) { font-size: 1.125rem !important; }                      /* Beitragskarten Startseite */
#sp-main-body .sppb-feature-box-title { font-size: 1.25rem !important; }                                /* Kacheln Friedland erleben / Gemeinden */
#sp-main-body .article-introtext :is(h1, h2, h3, h4, h5, h6) { font-size: 1.0625rem !important; }      /* Überschriften im Vorschautext nie größer als der Beitragstitel */
@media (max-width: 767.98px) {
  #sp-main-body h1:not(:where(#lt-services *)) { font-size: 1.625rem !important; }
  #sp-main-body h2:not(:where(#lt-services *)) { font-size: 1.375rem !important; }
}

/* ===== Cookie-Hinweis als schwebende Karte (07.11.2026) =====
   Vorher: schmaler Streifen über die ganze Breite, 13–15px Text, leicht zu übersehen. Jetzt: Karte unten links auf der
   Inhaltskante, 16px Text, Symbol, deutlicher Knopf. Doppelte ID, weil der Hinweis im Fuß sitzt (dort gelten weiße Links). */
#cookie-hinweis#cookie-hinweis {
  position: fixed; z-index: 99999; bottom: 20px; right: auto;
  left: max(var(--fl-rand, 20px), calc((100% - 1860px) / 2 + var(--fl-rand, 20px)));
  width: min(560px, calc(100% - 2 * var(--fl-rand, 20px)));
  display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; align-items: start;
  padding: 22px 24px 20px; border-radius: 16px;
  background: linear-gradient(90deg, var(--fl-lime, #90c01e), var(--fl-sky, #00a8d2)) top / 100% 4px no-repeat, #fff;
  color: var(--fl-text, #1d1f1e); font-size: 1rem; line-height: 1.5; text-align: left;
  box-shadow: 0 24px 60px -12px rgba(2, 47, 21, 0.35), 0 2px 10px rgba(2, 47, 21, 0.10);
}
#cookie-hinweis#cookie-hinweis[hidden] { display: none; }
#cookie-hinweis .fl-cookie__symbol { grid-row: span 3; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--fl-tint, #f1f6f2); color: var(--fl-green, #045f2b); }
#cookie-hinweis .fl-cookie__titel { margin: 2px 0 0; font-size: 1.0625rem; font-weight: 600; color: var(--fl-green, #045f2b); }
#cookie-hinweis .fl-cookie__text { margin: 0; color: var(--fl-text-2, #56635a); }
#cookie-hinweis .fl-cookie__aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; margin-top: 10px; }
#cookie-hinweis#cookie-hinweis button {
  min-height: 44px; padding: 10px 26px; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--fl-green, #045f2b); color: #fff; font-size: 1rem; font-weight: 600;
  transition: background-color 0.15s ease, transform 0.1s ease;
}
#cookie-hinweis#cookie-hinweis button:hover { background: var(--fl-green-dark, #03461f); }
#cookie-hinweis#cookie-hinweis button:active { transform: scale(0.97); }
#cookie-hinweis#cookie-hinweis button:focus-visible, #cookie-hinweis#cookie-hinweis a:focus-visible { outline: 3px solid var(--fl-sky, #00a8d2); outline-offset: 2px; }
#cookie-hinweis#cookie-hinweis a, #cookie-hinweis#cookie-hinweis a:visited { color: var(--fl-green, #045f2b) !important; text-decoration: underline; text-underline-offset: 0.15em; font-weight: 500; }
#cookie-hinweis#cookie-hinweis a:hover { color: var(--fl-green-dark, #03461f) !important; }
@media (max-width: 575.98px) {
  #cookie-hinweis#cookie-hinweis { left: 12px; width: calc(100% - 24px); bottom: 12px; padding: 18px 18px 16px; gap: 4px 12px; }
  #cookie-hinweis .fl-cookie__symbol { width: 36px; height: 36px; }
  #cookie-hinweis .fl-cookie__aktionen { grid-column: 1 / -1; }
  #cookie-hinweis#cookie-hinweis button { flex: 1 1 100%; }
}
/* Hereingleiten / Ausblenden (nicht bei "Bewegung reduzieren") */
@media (prefers-reduced-motion: no-preference) {
  #cookie-hinweis#cookie-hinweis:not([hidden]) { animation: fl-cookie-ein 0.45s cubic-bezier(0.2, 0.9, 0.25, 1.05) 0.6s backwards; }
  #cookie-hinweis#cookie-hinweis.ist-weg { transition: opacity 0.2s ease, transform 0.2s ease; opacity: 0; transform: translateY(12px); }
  @keyframes fl-cookie-ein { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
}

/* ===== Feinschliff (07.11.2026) – Grundfarben unverändert ===== */
/* "Das Amt in Zahlen": weiße Zahlen standen ohne Abdunklung auf dem roten Mohnfeld (schlecht lesbar).
   Dunkelgrüner Verlauf über dem Foto + leichter Schatten; die Kartenrahmen der Kacheln gehören hier nicht hin. */
#lt-services .sppb-row-overlay { background: linear-gradient(180deg, rgba(3, 50, 23, 0.55), rgba(3, 50, 23, 0.35)) !important; }
#lt-services .sppb-row-container { position: relative; }
#lt-services .sppb-addon-feature { border: 0 !important; box-shadow: none !important; background: transparent !important; }
#lt-services :is(h1, h2, h3, h4, h5, h6, p) { text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45); }
/* Überschrift "Das Amt in Zahlen" war im Page Builder für Tablet/Handy ausgeblendet -> Zahlen standen ohne Titel da */
#section-id-1588581507552 { display: block !important; }

/* Kacheln "Friedland erleben"/"Gemeinden": Titel klebte direkt am Foto */
:is(#section-id-1685452851164, #section-id-1636553308512) .sppb-feature-box-title { margin-top: 16px !important; }

/* Fußzeile: unterstrichene Überschriften wirkten wie Links; Akkordeon "Öffnungszeiten" war kleiner als der übrige Text */
#sp-bottom .sppb-addon-header .sppb-addon-title { text-decoration: none !important; font-size: 1.125rem !important; font-weight: 600 !important; margin-bottom: 12px !important; }
#sp-bottom .sppb-panel-title { font-size: 1rem !important; font-weight: 600 !important; }

/* Beitrags-Unterseiten: Inhalt klebte am Menübalken */
body.com-content #sp-main-body { padding-top: 32px; }

/* Seitenleiste "Aktuelles" (Kategorienliste): ruhige Navigationsliste statt Aufzählungspunkten */
#sp-right .categories-module, #sp-right .categories-module ul { list-style: none; margin: 0; padding: 0; }
#sp-right .categories-module :is(h5, h6) { margin: 0 !important; font-size: 1rem !important; font-weight: 600 !important; }
#sp-right .categories-module > li { border-bottom: 1px solid var(--fl-line, #dfe8e2); }
#sp-right .categories-module > li:last-child { border-bottom: 0; }
#sp-right .categories-module a { display: block; padding: 10px 0; text-decoration: none; }
#sp-right .categories-module ul { padding: 0 0 8px 14px; }
#sp-right .categories-module ul a { padding: 5px 0; font-weight: 400; font-size: 0.9375rem; color: var(--fl-text-2, #4a5a50) !important; }
#sp-right .categories-module a:hover { color: var(--fl-green, #045f2b) !important; text-decoration: underline; text-underline-offset: 3px; }

/* Textauswahl in Hausfarbe statt Browser-Blau */
::selection { background: rgba(144, 192, 30, 0.35); color: inherit; }
/* Zahlen auf einer Linie: zweizeilige Beschriftung ("amtsangehörige Gemeinden") schob die erste Zahl nach oben */
#lt-services .sppb-row { align-items: flex-start !important; }
/* Page Builder hatte je Zahlenblock andere Abstände (15/0/15/20px) -> einheitlich */
#lt-services .sppb-addon-wrapper { margin-top: 0 !important; }
#lt-services [id^="sppb-addon-"].clearfix { padding: 0 !important; }

/* ===== Seite "Neue Friedländer Zeitung" (07.11.2026) – Layout html/com_content/category/blog_zeitung.php =====
   Aktuelle Ausgabe + Termine oben nebeneinander, darunter alle Ausgaben nach Jahrgang (aufklappbar). */
.nfz { padding-bottom: 48px; }
.nfz-kopf { max-width: 70ch; margin-bottom: 28px; }
.nfz-kopf h1 { margin: 0 0 10px; }
.nfz-lead { font-size: 1.0625rem; line-height: 1.6; color: var(--fl-text-2, #4a5a50); margin: 0; }
.nfz-oben { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 32px; align-items: start; margin-bottom: 48px; }
.nfz-aktuell { background: #fff; border: 1px solid var(--fl-line, #dfe8e2); border-radius: 12px; padding: 28px; } /* weiß, weil das Logo-Bild einen weißen Hintergrund hat */
.nfz-logo { display: block; width: 100%; max-width: 360px; height: auto; margin-bottom: 20px; }
.nfz-aktuell h2 { margin: 0 0 6px !important; }
.nfz-datum { color: var(--fl-text-2, #4a5a50); margin: 0 0 20px; }
.nfz-aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.nfz-btn { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 22px; border-radius: 8px; background: var(--fl-green, #045f2b); color: #fff !important; font-weight: 600; text-decoration: none !important; transition: background-color 150ms ease-out; }
.nfz-btn:hover { background: var(--fl-green-dark, #03461f); }
.nfz-btn__info { font-weight: 400; opacity: 0.85; }
.nfz-verlag { font-weight: 500; text-underline-offset: 3px; }
.nfz-termine h2 { margin: 0 0 4px !important; }
.nfz-hinweis { color: var(--fl-text-2, #4a5a50); margin: 0 0 12px; }
.nfz-tabelle { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.nfz-tabelle th, .nfz-tabelle td { padding: 9px 12px; text-align: left; border-bottom: 1px solid var(--fl-line, #dfe8e2); }
.nfz-tabelle thead th { font-size: 0.8125rem; font-weight: 600; color: var(--fl-text-2, #4a5a50); border-bottom-width: 2px; }
.nfz-tabelle tbody th { font-weight: 600; color: var(--fl-text, #1d2b22); }
.nfz-tabelle .ist-vorbei :is(th, td) { color: #8a968e; font-weight: 400; }
.nfz-tabelle .ist-naechste :is(th, td) { background: rgba(144, 192, 30, 0.16); }
.nfz-marke { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px; background: var(--fl-green, #045f2b); color: #fff; font-size: 0.75rem; font-weight: 600; vertical-align: 1px; }
.nfz-archiv > h2 { margin: 0 0 12px !important; }
.nfz-jahr { border-bottom: 1px solid var(--fl-line, #dfe8e2); }
.nfz-jahr summary { display: flex; align-items: baseline; gap: 12px; padding: 14px 4px; cursor: pointer; list-style: none; }
.nfz-jahr summary::-webkit-details-marker { display: none; }
.nfz-jahr summary::after { content: ""; margin-left: auto; align-self: center; width: 9px; height: 9px; border-right: 2px solid var(--fl-green, #045f2b); border-bottom: 2px solid var(--fl-green, #045f2b); transform: rotate(45deg); transition: transform 200ms ease-out; }
.nfz-jahr[open] summary::after { transform: rotate(-135deg); }
.nfz-jahr summary:hover .nfz-jahr__zahl { text-decoration: underline; text-underline-offset: 4px; }
.nfz-jahr summary:focus-visible { outline: 3px solid var(--fl-sky, #00a8d2); outline-offset: 2px; }
.nfz-jahr__zahl { font-size: 1.25rem; font-weight: 600; color: var(--fl-green, #045f2b); }
.nfz-jahr__anzahl { color: var(--fl-text-2, #4a5a50); font-size: 0.9375rem; }
.nfz-liste { list-style: none; margin: 0; padding: 0 0 20px; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; }
.nfz-liste a { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 8px 12px; border: 1px solid var(--fl-line, #dfe8e2); border-radius: 8px; color: var(--fl-text, #1d2b22) !important; text-decoration: none !important; transition: background-color 150ms ease-out, border-color 150ms ease-out; }
.nfz-liste a svg { flex: none; color: var(--fl-green, #045f2b); }
.nfz-liste a:hover { background: var(--fl-tint, #f1f6f2); border-color: var(--fl-green, #045f2b); }
.nfz-liste__name { font-weight: 500; }
.nfz-liste__groesse { margin-left: auto; white-space: nowrap; font-size: 0.8125rem; color: var(--fl-text-2, #4a5a50); font-variant-numeric: tabular-nums; }
@media (max-width: 991.98px) { .nfz-oben { grid-template-columns: 1fr; } }
@media (max-width: 575.98px) { .nfz-aktuell { padding: 20px; } .nfz-liste { grid-template-columns: 1fr 1fr; } .nfz-liste a { padding: 8px 12px; } .nfz-liste a svg { display: none; } /* schmal: Symbol weg, damit Monat + Größe in eine Zeile passen */ .nfz-tabelle th, .nfz-tabelle td { padding: 8px 6px; } .nfz-btn { width: 100%; justify-content: center; } }
@media (prefers-reduced-motion: reduce) { .nfz-jahr summary::after, .nfz-btn, .nfz-liste a { transition: none; } }