:root,
[data-bs-theme=light] {
  --ar-primary: #0098c0;
  --ar-primary-rgb: 0, 152, 192;
  --bs-primary: #0098c0;
  --bs-primary-rgb: 0, 152, 192;
  --ar-secondary: #edf1f5;
  --ar-secondary-rgb: 237, 241, 245;
  --bs-secondary: #edf1f5;
  --bs-secondary-rgb: 237, 241, 245;
  --ar-warning: #edcb50;
  --ar-warning-rgb: 237, 203, 80;
  --bs-warning: #edcb50;
  --bs-warning-rgb: 237, 203, 80;
  --ar-info: #3f7fca;
  --ar-info-rgb: 63, 127, 202;
  --bs-info: #3f7fca;
  --bs-info-rgb: 63, 127, 202;
  --ar-success: #afca00;
  --ar-success-rgb: 175, 202, 0;
  --bs-success: #afca00;
  --bs-success-rgb: 175, 202, 0;
  --ar-danger: #ed5050;
  --ar-danger-rgb: 237, 80, 80;
  --bs-danger: #ed5050;
  --bs-danger-rgb: 237, 80, 80;
  --ar-light: #ffffff;
  --ar-light-rgb: 255, 255, 255;
  --bs-light: #ffffff;
  --bs-light-rgb: 255, 255, 255;
  --ar-dark: #121519;
  --ar-dark-rgb: 18, 21, 25;
  --bs-dark: #121519;
  --bs-dark-rgb: 18, 21, 25;
  --ar-link-color: #0098c0;
  --ar-link-hover-color: #007fa7;
  --bs-link-color: #0098c0;
  --bs-link-color-rgb: 0, 152, 192;
  --bs-link-hover-color: #007fa7;
  --ar-body-font-family: 'industry', sans-serif;
  --ar-heading-font-family: 'industry', sans-serif;
  --ar-root-font-size: 1rem;
  --ar-body-font-size: 0.875rem;
  --ar-link-decoration: none;
  --ar-border-width: 1px;
  --ar-border-radius: 0rem;
  --ar-border-radius-sm: calc(var(--ar-border-radius) * 0);
  --ar-border-radius-lg: calc(var(--ar-border-radius) * 0);
  --ar-border-radius-xl: calc(var(--ar-border-radius) * 0);
  --ar-border-radius-xxl: calc(var(--ar-border-radius) * 2.25);
}
[data-bs-theme=light] {
  --ar-body-bg: #ffffff;
  --bs-body-bg: #ffffff;
  --ar-body-bg-rgb: 255, 255, 255;
  --bs-body-bg-rgb: 255, 255, 255;
  --ar-body-color: #666666;
  --bs-body-color: #666666;
  --ar-body-color-rgb: 102, 102, 102;
  --bs-body-color-rgb: 102, 102, 102;
  --ar-secondary-color: #858c97;
  --bs-secondary-color: #858c97;
  --ar-heading-color: #121519;
  --bs-heading-color: #121519;
  --ar-border-color: #e3e9ef;
  --bs-border-color: #e3e9ef;
}
[data-bs-theme=light] .card {
  --ar-card-bg: #ffffff;
}
.btn-primary {
  --booost-btn-color: #fff;
  --booost-btn-hover-color: #fff;
  --ar-btn-bg: #0098c0;
  --ar-btn-border-color: #0098c0;
  --ar-btn-hover-bg: #007fa7;
  --ar-btn-hover-border-color: #007fa7;
  --ar-btn-active-bg: #007fa7;
  --ar-btn-active-border-color: #007fa7;
  --ar-btn-disabled-bg: #0098c0;
  --ar-btn-disabled-border-color: #0098c0;
}
.btn-outline-primary {
  --ar-btn-color: #0098c0;
  --ar-btn-border-color: #0098c0;
  --ar-btn-hover-bg: #0098c0;
  --ar-btn-hover-border-color: #0098c0;
  --ar-btn-active-bg: #0098c0;
  --ar-btn-active-border-color: #0098c0;
  --ar-btn-disabled-color: #0098c0;
  --ar-btn-disabled-border-color: #0098c0;
}
.btn-secondary {
  --booost-btn-color: #121519;
  --booost-btn-hover-color: #121519;
  --ar-btn-bg: #edf1f5;
  --ar-btn-border-color: #edf1f5;
  --ar-btn-hover-bg: #d4d8dc;
  --ar-btn-hover-border-color: #d4d8dc;
  --ar-btn-active-bg: #d4d8dc;
  --ar-btn-active-border-color: #d4d8dc;
  --ar-btn-disabled-bg: #edf1f5;
  --ar-btn-disabled-border-color: #edf1f5;
}
.btn-outline-secondary {
  --ar-btn-color: #edf1f5;
  --ar-btn-border-color: #edf1f5;
  --ar-btn-hover-bg: #edf1f5;
  --ar-btn-hover-border-color: #edf1f5;
  --ar-btn-active-bg: #edf1f5;
  --ar-btn-active-border-color: #edf1f5;
  --ar-btn-disabled-color: #edf1f5;
  --ar-btn-disabled-border-color: #edf1f5;
}
.btn-warning {
  --booost-btn-color: #121519;
  --booost-btn-hover-color: #121519;
  --ar-btn-bg: #edcb50;
  --ar-btn-border-color: #edcb50;
  --ar-btn-hover-bg: #d4b237;
  --ar-btn-hover-border-color: #d4b237;
  --ar-btn-active-bg: #d4b237;
  --ar-btn-active-border-color: #d4b237;
  --ar-btn-disabled-bg: #edcb50;
  --ar-btn-disabled-border-color: #edcb50;
}
.btn-outline-warning {
  --ar-btn-color: #edcb50;
  --ar-btn-border-color: #edcb50;
  --ar-btn-hover-bg: #edcb50;
  --ar-btn-hover-border-color: #edcb50;
  --ar-btn-active-bg: #edcb50;
  --ar-btn-active-border-color: #edcb50;
  --ar-btn-disabled-color: #edcb50;
  --ar-btn-disabled-border-color: #edcb50;
}
.btn-info {
  --booost-btn-color: #fff;
  --booost-btn-hover-color: #fff;
  --ar-btn-bg: #3f7fca;
  --ar-btn-border-color: #3f7fca;
  --ar-btn-hover-bg: #2666b1;
  --ar-btn-hover-border-color: #2666b1;
  --ar-btn-active-bg: #2666b1;
  --ar-btn-active-border-color: #2666b1;
  --ar-btn-disabled-bg: #3f7fca;
  --ar-btn-disabled-border-color: #3f7fca;
}
.btn-outline-info {
  --ar-btn-color: #3f7fca;
  --ar-btn-border-color: #3f7fca;
  --ar-btn-hover-bg: #3f7fca;
  --ar-btn-hover-border-color: #3f7fca;
  --ar-btn-active-bg: #3f7fca;
  --ar-btn-active-border-color: #3f7fca;
  --ar-btn-disabled-color: #3f7fca;
  --ar-btn-disabled-border-color: #3f7fca;
}
.btn-success {
  --booost-btn-color: #121519;
  --booost-btn-hover-color: #121519;
  --ar-btn-bg: #afca00;
  --ar-btn-border-color: #afca00;
  --ar-btn-hover-bg: #96b100;
  --ar-btn-hover-border-color: #96b100;
  --ar-btn-active-bg: #96b100;
  --ar-btn-active-border-color: #96b100;
  --ar-btn-disabled-bg: #afca00;
  --ar-btn-disabled-border-color: #afca00;
}
.btn-outline-success {
  --ar-btn-color: #afca00;
  --ar-btn-border-color: #afca00;
  --ar-btn-hover-bg: #afca00;
  --ar-btn-hover-border-color: #afca00;
  --ar-btn-active-bg: #afca00;
  --ar-btn-active-border-color: #afca00;
  --ar-btn-disabled-color: #afca00;
  --ar-btn-disabled-border-color: #afca00;
}
.btn-danger {
  --booost-btn-color: #fff;
  --booost-btn-hover-color: #fff;
  --ar-btn-bg: #ed5050;
  --ar-btn-border-color: #ed5050;
  --ar-btn-hover-bg: #d43737;
  --ar-btn-hover-border-color: #d43737;
  --ar-btn-active-bg: #d43737;
  --ar-btn-active-border-color: #d43737;
  --ar-btn-disabled-bg: #ed5050;
  --ar-btn-disabled-border-color: #ed5050;
}
.btn-outline-danger {
  --ar-btn-color: #ed5050;
  --ar-btn-border-color: #ed5050;
  --ar-btn-hover-bg: #ed5050;
  --ar-btn-hover-border-color: #ed5050;
  --ar-btn-active-bg: #ed5050;
  --ar-btn-active-border-color: #ed5050;
  --ar-btn-disabled-color: #ed5050;
  --ar-btn-disabled-border-color: #ed5050;
}
.btn-light {
  --booost-btn-color: #121519;
  --booost-btn-hover-color: #121519;
  --ar-btn-bg: #ffffff;
  --ar-btn-border-color: #ffffff;
  --ar-btn-hover-bg: #e6e6e6;
  --ar-btn-hover-border-color: #e6e6e6;
  --ar-btn-active-bg: #e6e6e6;
  --ar-btn-active-border-color: #e6e6e6;
  --ar-btn-disabled-bg: #ffffff;
  --ar-btn-disabled-border-color: #ffffff;
}
.btn-outline-light {
  --ar-btn-color: #ffffff;
  --ar-btn-border-color: #ffffff;
  --ar-btn-hover-bg: #ffffff;
  --ar-btn-hover-border-color: #ffffff;
  --ar-btn-active-bg: #ffffff;
  --ar-btn-active-border-color: #ffffff;
  --ar-btn-disabled-color: #ffffff;
  --ar-btn-disabled-border-color: #ffffff;
}
.btn-dark {
  --booost-btn-color: #fff;
  --booost-btn-hover-color: #fff;
  --ar-btn-bg: #121519;
  --ar-btn-border-color: #121519;
  --ar-btn-hover-bg: #000000;
  --ar-btn-hover-border-color: #000000;
  --ar-btn-active-bg: #000000;
  --ar-btn-active-border-color: #000000;
  --ar-btn-disabled-bg: #121519;
  --ar-btn-disabled-border-color: #121519;
}
.btn-outline-dark {
  --ar-btn-color: #121519;
  --ar-btn-border-color: #121519;
  --ar-btn-hover-bg: #121519;
  --ar-btn-hover-border-color: #121519;
  --ar-btn-active-bg: #121519;
  --ar-btn-active-border-color: #121519;
  --ar-btn-disabled-color: #121519;
  --ar-btn-disabled-border-color: #121519;
}
.accordion-button:not(.collapsed)::after {
  --ar-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='%230098c0'%3e%3cpath%20d='M.5%206.3c.6-.6%201.6-.6%202.3%200l9.3%209.3%209.3-9.3c.6-.6%201.6-.6%202.3%200%20.6.6.6%201.6%200%202.3L13.3%2018.8c-.6.6-1.6.6-2.3%200L.8%208.5c-.9-.8-.9-1.6-.3-2.2z'/%3e%3c/svg%3e");
}
/* lueftung - booost.theme_custom_css. Nur was Registry und Klassen nicht koennen.
   Farben ueber Theme-Variablen bzw. Light-only, damit der Dark Mode stimmt. */

/* Header: live liegt ueber dem blauen Band (registry: border-bottom border-primary
   border-5) eine 4px Lime-Linie; das Band selbst ist live ~23px -> 12px. */
#header.navbar {
  border-bottom-width: 12px !important;
  box-shadow: inset 0 -4px 0 var(--bs-success);
}
/* Desktop wie live (Abgleich 2026-10-16, Review): Logo 142 px oben bei 59 px,
   Header 201 px hoch wie live. Band 24 px statt live 22: im Logo-SVG beginnen
   Lime-Linie und Band 1 px frueher als im Live-PNG und das Band ist 24 px hoch -
   mit 22 px sass die Linie im Logo 2 px hoeher als daneben (2026-10-29); Menüpunkte als Zellen über die volle
   Leistenhöhe (0 bis zur Lime-Linie) mit 1-px-Trennlinien #e4e7e7, aktiver Punkt
   hellgrau #f4f2f0; Suche 160 x 34 mit Lupe im Feld oben rechts, ohne Knopf */
@media (min-width: 992px) {
  #header.navbar.header-logo-overhang { border-bottom-width: 24px !important; padding-top: 0 !important; padding-bottom: 0 !important; }
  #header.navbar.header-logo-overhang > .container { align-items: stretch; position: relative; }
  #header .navbar-brand { flex-shrink: 0; padding: 59px 0 0 !important; margin-right: 0; }
  #header.navbar.header-logo-overhang .navbar-brand .header-logo { margin-bottom: -24px; }
  #header.navbar.header-logo-overhang.navbar-stuck .navbar-brand { padding-top: .5rem; }
  #header #navbarNav, #header #navbarNav > .navbar-nav { align-items: stretch; }
  #header .navbar-nav.navbar-divided > .nav-item { border-left: 1px solid #e4e7e7; margin: 0 -1px 0 0; }
  #header .navbar-nav.navbar-divided > .nav-item:last-child,
  #header .navbar-nav.navbar-divided > .nav-item:has(+ li.d-lg-none) { border-right: 1px solid #e4e7e7; }
  #header .navbar-brand > span { margin-right: 0 !important; }
  /* ::before bleibt frei: Arounds Hover-Brücke (.dropdown::before, 6px unter dem Punkt) - ohne sie
     schloss das Untermenü auf dem Weg nach unten (2026-10-28) */
  #header .navbar-nav.navbar-divided > .nav-item::after { display: none !important; }
  #header .navbar-nav > .nav-item > .nav-link { height: 100%; display: flex; align-items: flex-end; padding: 0 1.3rem 1.85rem !important; }
  :root:not([data-bs-theme="dark"]) #header .navbar-nav > .nav-item:has(> .nav-link.active) { background-color: #f4f2f0; }
  [data-bs-theme="dark"] #header .navbar-nav > .nav-item:has(> .nav-link.active) { background-color: rgba(255, 255, 255, .06); }
  #header .navbar-nav > .nav-item > .dropdown-toggle::after { display: none; }
  /* 2026-10-28: Suche mittig auf der Linie der Menütexte (gemessen: Textmitte = Feldmitte), darüber die Service-Links */
  #header form[action$="/@@search"] { position: absolute; top: auto; bottom: 26px; right: 28px; margin: 0; flex-wrap: nowrap; }
  #header form[action$="/@@search"] > .col-12 { width: auto; padding: 0 !important; }
  #header form[action$="/@@search"] > .col-12:has(> .btn) { display: none; }
  #header form[action$="/@@search"] .search-field {
    width: 160px; height: 34px; padding: 6px 12px 6px 31px; font-size: .875rem; font-weight: 300;
    border: 1px solid #e4e7e7; border-radius: 4px; background-color: var(--ar-body-bg) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 16 16' fill='%23afb8bb'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398l3.85 3.85a1 1 0 0 0 1.415-1.414zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: 12px center;
  }
  [data-bs-theme="dark"] #header form[action$="/@@search"] .search-field { border-color: var(--ar-border-color); }
}

/* Navigation: live dunkles LKL-Blau #003460, aktiv/hover Primaerblau - nur Light Mode. */
:root:not([data-bs-theme="dark"]) #header .navbar-nav > .nav-item > .nav-link { color: #003460; }
/* :root prefix: same specificity as the light-only rule above, so active/hover win */
:root #header .navbar-nav > .nav-item > .nav-link:hover,
:root #header .navbar-nav > .nav-item > .nav-link.active { color: var(--bs-primary); }

/* Buttons: Markenblau #0098c0 hat mit Weiss nur 3,4:1 - Buttons eine Stufe dunkler
   (#007fa1, 4,6:1), in Light und Dark gleich; Ueberschriften/Band bleiben #0098c0. */
.btn-primary {
  --bs-btn-bg: #007fa1; --bs-btn-border-color: #007fa1;
  --bs-btn-hover-bg: #006a87; --bs-btn-hover-border-color: #006a87;
  --bs-btn-active-bg: #005e78; --bs-btn-active-border-color: #005e78;
  --bs-btn-color: #fff; --bs-btn-hover-color: #fff; --bs-btn-active-color: #fff;
}
/* the theme paints .btn-primary straight from the primary colour */
.btn.btn-primary { background-color: #007fa1 !important; border-color: #007fa1 !important; }
.btn.btn-primary:hover, .btn.btn-primary:focus-visible { background-color: #006a87 !important; border-color: #006a87 !important; }

/* Startseiten-Teaser: Lime-Quadrat mit weissem Icon links neben Titel/Text/Button
   wie live (cards_view setzt das Icon ueber den Titel; die Registry-Klassen
   text-primary/d-block/h1 kommen mit und werden hier ueberstimmt). */
.lkl-teaser .lkl-teaser-icon {
  display: inline-flex !important; width: var(--lkl-icon); height: var(--lkl-icon); margin: 0 !important;
  font-size: calc(var(--lkl-icon) / 2) !important; line-height: 1; color: #fff !important;
  background-color: var(--bs-success) !important;
}
/* auf allen Breiten Icon links (live auch mobil), mobil kleineres Quadrat */
.lkl-teaser { --lkl-icon: 4.5rem; display: grid; grid-template-columns: var(--lkl-icon) 1fr; column-gap: 1rem; margin-bottom: 0 !important; }
@media (min-width: 576px) { .lkl-teaser { --lkl-icon: 6.75rem; column-gap: .9375rem; } }
.lkl-teaser .card-body { display: contents; }
.lkl-teaser .card-body > div:first-child { grid-column: 1; grid-row: 1 / span 4; margin: 0 !important; }
.lkl-teaser .card-body > :not(:first-child), .lkl-teaser .card-footer { grid-column: 2; }
.lkl-teaser .card-title { margin-top: -.2rem; }
.lkl-teaser .card-footer { padding: .75rem 0 0 !important; margin: 0 !important; }
/* 2026-10-28: Original-Icons (PNG mit Lime-Quadrat, lead_icon_svg als <img>) statt Icon-Font,
   108px wie live, Text bei x 855 */
.lkl-teaser .lkl-teaser-img { display: block; width: var(--lkl-icon); height: var(--lkl-icon); }

/* ---- Visueller Abgleich 2026-10-16 (Messwerte in specs/report.md) ---- */

/* Inhaltsbreite 1040 px ab 1200 px wie live (booost 1140/1320) */
@media (min-width: 1200px) {
  .container, .container-sm, .container-md, .container-lg, .container-xl, .container-xxl { max-width: 1064px; }
}
/* Fließtext 14/20 wie live (Größe über theme_body_font_size; Saira 14 px ist
   so breit wie Industry 14 px), Hervorhebungen schwarz (nur hell) */
main p, main li { line-height: 20px; }
:root:not([data-bs-theme="dark"]) main p strong, :root:not([data-bs-theme="dark"]) main p b { color: #000; }
/* Seitentitel 32 px, -1 px, Zeile 38 wie live (Größe über fs-2) */
h1.fs-2 { line-height: 1.2; }
.fs-2.text-uppercase, .display-5.text-uppercase { letter-spacing: -1px; }
/* Navigation 18 px / 300 wie live (Industry Light) */
@media (min-width: 992px) {
  #header .navbar-nav > .nav-item > .nav-link { font-size: 1.125rem !important; font-weight: 300; }
}
/* Seitenkopfbilder 1040 x 406 wie live (2,56:1; Vokabular endet bei 21:9) */
@media (min-width: 768px) {
  .mosaic-booost\.tiles\.banner-tile .ratio-21x9 { --bs-aspect-ratio: 39.0625%; --ar-aspect-ratio: 39.0625%; }
}
/* Startseiten-Teaser: Titel 22/28,6, Abstand 1 px, Text 14/20, Button klein
   (live 13 px / 300, 28 px hoch) */
.lkl-teaser .card-title { font-size: 1.375rem !important; line-height: 28.6px; margin-bottom: .0625rem !important; }
.lkl-teaser .card-text, .lkl-teaser .card-body p { font-size: .875rem; line-height: 20px; }
.lkl-teaser .btn-sm { --ar-btn-padding-y: .3125rem; --ar-btn-padding-x: .5625rem; --bs-btn-padding-y: .3125rem; --bs-btn-padding-x: .5625rem; font-size: .8125rem; font-weight: 300; border-radius: 3px; }
/* Text-Tiles: eingebaute Unterkante (pb-lg-5 + mb-3) weg, Abstand nur aus den
   Zeilenklassen (pt-4 mt-2 pb-5) - der Page-Spec-Typ text nimmt grid_gutter nicht */
.text-blocks > .row { padding-bottom: 0 !important; }
.text-blocks .position-relative.mb-3 { margin-bottom: 0 !important; }
/* Kopfbild ohne Zusatzabstand über der Ratio-Box */
.mosaic-booost\.tiles\.banner-tile .jarallax > .position-relative { padding: 0 !important; }
/* Startseiten-Teaser: Zeilenabstand 242 px wie live */
@media (min-width: 768px) { .lkl-teaser-grid { --bs-gutter-y: 6rem; --ar-gutter-y: 6rem; } }
/* Standort-Karte 356 px hoch wie live (Tile stapelt Spacer auf 520 px) */
@media (min-width: 992px) {
  .mosaic-booost\.tiles\.map-tile .mosaic-tile-content > .position-relative.overflow-hidden { height: 356px; }
}
/* Mitarbeiter (team_v4_view): Name 20 px normal, Block zentriert wie live -
   die View liest card_title_css_class nicht (C, Bericht 2026-10-16) */
.mosaic-booost\.tiles\.listing-tile .pt-4.pb-3.text-body { text-align: center; }
.mosaic-booost\.tiles\.listing-tile .pt-4.pb-3.text-body > h3 { font-size: 1.25rem; font-weight: 400; line-height: 26px; }
.mosaic-booost\.tiles\.listing-tile .pt-4.pb-3.text-body .nav-link { justify-content: center; }
/* Phones wie live: Kopfbild 2,56:1 statt des festen 4:3 (banner.pt),
   Seitentitel 32 px */
@media (max-width: 767.98px) {
  .mosaic-booost\.tiles\.banner-tile .ratio-4x3 { --bs-aspect-ratio: 39.0625%; --ar-aspect-ratio: 39.0625%; }
}
h1.fs-2 { font-size: 2rem !important; }
/* Kontrast (beide Modi): Hervorhebung im Text wie die Buttons #007fa1
   (Weiß auf #0098c0 nur 3,4:1), Karten-Attribution dunkelblau auf der hellen Box */
.text-bg-primary { background-color: #007fa1 !important; color: #fff !important; }
.leaflet-control-attribution a { color: #003460 !important; }

/* Footer-Abgleich 2026-10-16: three 1/3 columns at live's x (200/557/913:
   30px gutter), grey #eee as live (dark: the theme's secondary surface),
   headings 14px capitals, text 14/20, link lists in the link colour without
   the nav padding, Facebook below the links, colophon slim on the same grey. */
#footer .row { --ar-gutter-x: 30px; }
#footer.bg-body-secondary { background-color: #eee !important; }
[data-bs-theme="dark"] #footer.bg-body-secondary { background-color: var(--ar-secondary-bg) !important; }
#footer .card-body > h2 { font-size: .875rem; font-weight: 700; letter-spacing: normal; line-height: 22px; margin-bottom: 0; }
#footer .card-body { line-height: 20px; }
#footer .card-body .nav-link { padding: 0 !important; margin: 0 !important; color: var(--ar-link-color) !important; line-height: 20px; }
/* Facebook line in the Links portlet as live: 40px mark, two lines of text beside it */
#footer .footer-facebook { margin-top: 1.25rem !important; margin-bottom: 0; }
#footer .footer-facebook a { display: inline-flex; align-items: center; gap: 1.6rem; color: var(--ar-link-color); text-decoration: none; }
#footer .footer-facebook .bi { font-size: 40px; line-height: 1; }

/* Footer wie im Original 2026-10-28: Newsletter-Anmeldung (Einleitung im
   Blocksatz, E-Mail-Feld über die ganze Spalte, Knopf darunter), "Links" in
   Linkfarbe wie live (dort ist die Überschrift ein Link), Facebook-Originallogo,
   "©2018 | styled by mediaStyle" klein, kursiv, halbtransparent. */
#footer .portlet-tile-text p { text-align: justify; margin-bottom: 1.375rem; }
#footer .n2g-subscription-form .input-group { flex-direction: column; align-items: flex-start; padding: 0; border: 0; border-radius: 0; }
#footer .n2g-subscription-form .input-group-text { display: none; }
#footer .n2g-subscription-form .form-control { width: 100%; height: 34px; margin: 0 !important; padding: 6px 10px; font-size: 14px; background-color: var(--ar-body-bg); border: 1px solid var(--ar-border-color) !important; border-radius: 2px !important; }
#footer .n2g-subscription-form .btn { width: 150px; height: 40px; margin: 20px 0 0 !important; font-size: 14px; border-radius: 2px !important; }
#footer .n2g-subscription-form .subscription-status { margin-top: .5rem; font-size: 14px; }
#footer .portlet-static-links .card-body > h2 { color: var(--ar-link-color); }
#footer .footer-facebook img { width: 40px; height: 40px; }
#footer .card-body > .footer { margin-top: 2px; line-height: 14px; }
#footer .card-body > .footer .footer-link { font-size: 11px; font-style: italic; opacity: .5; color: var(--ar-link-color); text-decoration: none; }
/* Footer-Überschriften wie live: das alte Theme setzt h5/h6 in "Open Sans",
   lädt sie aber nicht - die Besucher sehen Arial. */
#footer .card-body > h2 { font-family: "Open Sans", Arial, sans-serif; }

/* Header-Service-Links wie live (2026-10-28): "Dokumente & Downloads" und
   "Stellenangebote" sind Site-Actions; im Header nur diese zwei, rechtsbündig
   über der Suche, mit quadratischem Aufzählungszeichen rechts. Impressum und
   Datenschutz stehen im Footer. Phones: keine Meta-Links (wie live). */
#header ul.nav:has(> #siteaction-downloads) { display: none; }
@media (min-width: 992px) {
  #header ul.nav:has(> #siteaction-downloads) {
    display: flex; position: absolute; top: 25px; right: 10px; margin: 0;
    flex-direction: column; align-items: flex-end;
  }
  #header #siteaction-imprint, #header #siteaction-privacy { display: none; }
  #header ul.nav:has(> #siteaction-downloads) .nav-link {
    display: inline-flex; align-items: center; gap: 13px; padding: 0 !important; border: 0 !important;
    font-size: .875rem; line-height: 18px; font-weight: 300; color: #003460;
  }
  #header ul.nav:has(> #siteaction-downloads) .nav-link::after { content: ""; width: 6px; height: 6px; background-color: currentColor; }
  #header ul.nav:has(> #siteaction-downloads) .nav-link:hover { color: var(--bs-primary); }
  [data-bs-theme="dark"] #header ul.nav:has(> #siteaction-downloads) .nav-link { color: var(--ar-nav-link-color, var(--ar-body-color)); }
}

/* Projekte (cards_content_overlay_view) wie live beim Hover, 2026-10-28:
   Bild zoomt, dunkles Overlay 80 %, blauer Kreis mit Lupe, Titel 20px light. */
.tile-template-cards-content-overlay-view a.card-hover { overflow: hidden; }
.tile-template-cards-content-overlay-view a.card-hover img { transition: transform .4s ease-in-out; }
.tile-template-cards-content-overlay-view a.card-hover:hover img { transform: scale(1.1); }
.tile-template-cards-content-overlay-view a.card-hover > div:first-child { border-radius: 0 !important; }
.tile-template-cards-content-overlay-view a.card-hover .bg-black.opacity-30 { background-color: rgb(24, 28, 32) !important; opacity: .8 !important; }
.tile-template-cards-content-overlay-view a.card-hover .text-center { padding: 0 1.75rem; }
.tile-template-cards-content-overlay-view a.card-hover .text-center::before {
  content: ""; display: block; width: 60px; height: 60px; margin: 0 auto 15px; border-radius: 50%;
  background: rgba(0, 152, 192, .85) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 16 16' fill='%23fff'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398l3.85 3.85a1 1 0 0 0 1.415-1.414zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0'/%3E%3C/svg%3E") no-repeat center;
}
.tile-template-cards-content-overlay-view a.card-hover .text-center > div { font-size: 1.25rem !important; font-weight: 300 !important; line-height: 1.4; }

/* Dropdown wie live (2026-10-28): Farbe, Deckkraft, dunkler Modus, Ecken und
   fw-light kommen aus dem Navigation-Kontrollpanel (booost 1.2.4); nur die
   Schriftgröße = Fließtext (14px) hat keine Utility-Klasse. */
#header .dropdown-menu .dropdown-item { font-size: var(--ar-body-font-size); }

/* Fließtext-Überschriften wie live (2026-10-28): das alte Theme setzt h2 im
   Text 24px normal in Primärblau, h4 20px normal; booost-Tile-Überschriften
   tragen Klassen und bleiben unberührt. */
#content h2:not([class]) { font-size: 1.5rem; font-weight: 400; line-height: 1.3; color: var(--bs-primary); margin-bottom: 15px; }
#content h4:not([class]) { font-size: 1.25rem; font-weight: 400; line-height: 1.3; margin-bottom: 15px; }

/* News-Liste (blog_view) wie live: Titel 20px normal, Datum über dem Text,
   gestrichelte Linie zwischen den Einträgen. */
.tile-template-blog-view h3 { font-size: 1.25rem; font-weight: 400; line-height: 1.5; margin-bottom: .75rem; }
.tile-template-blog-view h3 a { color: inherit; }
.tile-template-blog-view .row.g-0 > div:last-child > div { display: flex; flex-direction: column; padding-top: .75rem !important; }
.tile-template-blog-view .row.g-0 > div:last-child > div > h3 { order: 0; }
.tile-template-blog-view .row.g-0 > div:last-child > div > .d-flex { order: 1; margin-top: 0 !important; }
.tile-template-blog-view .row.g-0 > div:last-child > div > p { order: 2; }
.tile-template-blog-view > div:not(:last-child) > .row.g-0,
.tile-template-blog-view > .masonry-grid-item:not(:last-child) > .row.g-0 { padding-bottom: 2.5rem; margin-bottom: 2.5rem !important; border-bottom: 1px dashed var(--ar-border-color); }

/* "Weitere News/Personen/Projekte" wie live (2026-10-28): Linie darüber,
   Überschrift in Versalien (h2_css_class), rechts eine schraffierte Linie. */
section[class*="related-items-"] { border-top: 1px solid var(--ar-border-color); padding-top: 2rem !important; }
section[class*="related-items-"] .related-items-header::after {
  content: ""; flex: 1 1 auto; height: 14px;
  background: repeating-linear-gradient(-45deg, var(--ar-border-color) 0 1px, transparent 1px 6px);
}

/* "Weitere Personen" (team_v3_view in der Leiste) wie live: quadratisches
   Foto, Name 16px fett, Funktion, Mail/Telefon als graue Kreise darunter
   (immer sichtbar), kein Weiterlesen. */
.related-items-team-v3-view .row { --ar-gutter-x: 30px; }
.related-items-team-v3-view .card-hover { max-width: none !important; padding-bottom: 0 !important; }
.related-items-team-v3-view .zoom-effect-wrapper, .related-items-team-v3-view .zoom-effect-img { border-radius: 0 !important; box-shadow: none !important; }
.related-items-team-v3-view .zoom-effect-img { aspect-ratio: 1 / 1; object-fit: cover; }
.related-items-team-v3-view .position-relative > .d-flex.opacity-0 {
  opacity: 1 !important; top: calc(100% + 98px); bottom: auto !important;
  justify-content: flex-start !important; padding: 0 !important; margin: 0 !important; gap: 8px;
}
.related-items-team-v3-view .position-relative > .d-flex .btn-icon {
  width: 28px; height: 28px; margin: 0 !important; border: 0; border-radius: 50% !important;
  font-size: 12px; color: #333 !important; background: #eee !important;
}
.related-items-team-v3-view .position-relative > .d-flex .btn-icon:hover { color: #fff !important; background: var(--bs-primary) !important; }
[data-bs-theme="dark"] .related-items-team-v3-view .position-relative > .d-flex .btn-icon { color: var(--ar-body-color) !important; background: var(--ar-secondary-bg) !important; }
.related-items-team-v3-view .col > .pt-4 { padding-top: 1.75rem !important; padding-bottom: 3.5rem !important; }
.related-items-team-v3-view .col > .pt-4 > h3 { font-size: 1rem; font-weight: 700; margin-bottom: 1.25rem !important; }
.related-items-team-v3-view .col > .pt-4 > .text-body-secondary { color: var(--ar-body-color) !important; }
.related-items-team-v3-view .col > .pt-4 > p:empty { display: none; }
/* ganze Karte klickbar (Link zur Person), Mail/Telefon bleiben eigene Links */
.related-items-team-v3-view .col { position: relative; }
.related-items-team-v3-view .col > .pt-4 > a.btn { position: static; width: 0; height: 0; padding: 0; border: 0; opacity: 0; overflow: hidden; }
.related-items-team-v3-view .col > .pt-4 > a.btn::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.related-items-team-v3-view .position-relative > .d-flex { z-index: 2; }
.related-items-team-v3-view .col:focus-within { outline: 2px solid var(--bs-primary); outline-offset: 4px; }

/* "Weitere News" (blog_grid_view in der Leiste) wie live: ohne Rahmen und
   Datum, Titel fett 15px, Text in Linkfarbe, kein Weiterlesen-Knopf. */
.related-items-blog-grid-view .card { border: 0; box-shadow: none; background: transparent; margin-bottom: 0 !important; }
.related-items-blog-grid-view .card-img-top { border-radius: 0; aspect-ratio: 238 / 171; object-fit: cover; }
.related-items-blog-grid-view .card-body { padding: 1.75rem 0 0 !important; margin-top: 0 !important; }
.related-items-blog-grid-view .card-title { font-size: .9375rem !important; line-height: 1.5; margin-bottom: 1.25rem !important; }
.related-items-blog-grid-view .card-body > .d-flex { display: none !important; }
/* klickbar wie live: der (unsichtbare) Weiterlesen-Link deckt die ganze Karte */
.related-items-blog-grid-view .card { position: relative; }
.related-items-blog-grid-view .card-footer { height: 0; padding: 0 !important; margin: 0 !important; }
.related-items-blog-grid-view .card-footer a { position: static; width: 0; height: 0; padding: 0; border: 0; opacity: 0; overflow: hidden; }
.related-items-blog-grid-view .card-footer a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.related-items-blog-grid-view .card:focus-within { outline: 2px solid var(--bs-primary); outline-offset: 4px; }
.related-items-blog-grid-view .card-text { color: var(--ar-link-color); }

/* News-Detail: live zeigt die Beschreibung nicht - sie wiederholt hier den
   Textanfang. */
.booost-detail-row .mosaic-IDublinCore-description-tile { display: none; }

/* Titelleiste der Detailseiten (News, Personen, Projekte) als blaues Band wie
   live (Records title_bar_background_color bg-primary + dark mode). Der Titel
   trägt site-weit text-primary (h1_css_class, auch Impressum/Datenschutz) -
   auf bg-primary wäre er unsichtbar (der Fehler der alten Site), im Band
   daher weiß. */
.bg-primary .text-primary { color: #fff !important; }
/* Das Band ist in booost so breit wie der Container; live geht es über die
   volle Fensterbreite - Hintergrund per Schatten nach außen verlängert. */
section.container.bg-primary[data-edit-panels], section.container.bg-primary:has(> .row > div > h1) {
  box-shadow: 0 0 0 100vmax var(--bs-primary); clip-path: inset(0 -100vmax);
}

/* Phones (2026-10-30): das Untermenü steht mobil inline ohne eigenen Hintergrund,
   der dunkle Dropdown-Modus (Navigation-Panel) liess seine Links weiss - weiss
   auf weiss, die Dienstleistungen waren unsichtbar. Mobil nehmen die Links die
   Navbar-Farben. booost.cms macht das ab 1.2.7 selbst: dann diesen Block löschen. */
@media (max-width: 991.98px) {
  .navbar-expand-lg .navbar-nav .dropdown-menu-dark {
    --ar-dropdown-color: var(--ar-navbar-color);
    --ar-dropdown-link-color: var(--ar-navbar-color);
    --ar-dropdown-link-hover-color: var(--ar-navbar-hover-color);
    --ar-dropdown-link-hover-bg: transparent;
    --ar-dropdown-link-active-color: var(--ar-navbar-active-color);
    --ar-dropdown-link-active-bg: transparent;
  }
}

body.template-folder_contents,
body[class*="controlpanel"],
body.template-sharing,
body.template-historyview {
  --ar-body-font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --ar-heading-font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
#edit-zone { font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; }