@import url('hotfix-utilities.css');
@import url('boxgrid.css');

/* ===================== Design Tokens ===================== */
:root {
  --cassiopeia-color-primary: #627E12;       /* barrierefreie Version von #779816 */
  --cassiopeia-color-link: #627E12;
  --header-background-color: #ffffff;
  --link-color: #627E12;
  --link-color-rgb: 119, 152, 22;
  --cassiopeia-color-hover: #007cc2;
  --link-hover-color: #007cc2;
  --link-hover-color-rgb: 66, 64, 119;
  --link-hover-mainmenu-color: #ffffff;
  --body-bg: #f7ffde;
  --body-font-size: 1.1rem;
  --text-color-weiss: #ffffff;

  /* Tabellen */
  --tbl-border: #e5e9ef;
  --tbl-bg: #fff;
  --tbl-head-bg: #f8f9fa;
  --tbl-hover: #f4f6f9;
  --tbl-radius: 6px;
  --tbl-pad: .6rem .8rem;

  /* KWB Grün alias */
  --kwb: #627E12;
}

/* ===================== Base ===================== */
html,
body {
  background-color: #f7ffde;
  font-family: 'Delicious';
  overflow-x: hidden;
}

body.kwb__startseite {
  margin: 0;
  padding: 0;
  width: 100vw;
  max-width: 100%;
}

.container-component > * + * {
  margin-right: 0;
}

/* ===================== Focus Styles ===================== */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid #FFD700;
  outline-offset: 1px;
}

:where(a[href], button, input, select, textarea, summary,
  [role="button"], [role="link"], [tabindex]:not([tabindex="-1"])):focus-visible {
  outline: 2px solid #FFD700;
  outline-offset: 1px;
  box-shadow: 0 0 0 3px #FFD700;
  border-radius: .375rem;
}

/* Sicherheitsnetz: niemals global Fokus komplett entfernen */
*:focus {
  outline-color: inherit;
}

.ra4-link,
.ra3-link,
.ra2-link,
.ra1-link {
  position: relative;
  display: block;
}

/* ===================== Fonts ===================== */
@font-face {
  font-family: 'Delicious';
  src: url('../fonts/DeliciousLB.woff2') format('woff2'),
       url('../fonts/DeliciousLB.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

h1, .h1,
h2, .h2,
h3, .h3,
h4, .h4,
h5, .h5,
h6, .h6 {
  font-family: 'Delicious', sans-serif;
  font-weight: 600;
  color: #627E12;
  text-transform: uppercase;
}

summary span.h3,
summary span.h4,
summary h2.h4 {
  color: #ffffff;
}

b,
strong,
.strong {
  font-family: 'Delicious', var(--designFont-0);
  font-weight: 800;
}

.normal {
  font-weight: 500;
}

.list-style-none {
  list-style: none;
  padding-left: 0;
}

.center {
  text-align: center;
}

/* ===================== Header / Grundlayout ===================== */
header.container-header {
  background: #fff;
}

.header.container-header {
  position: relative;
  z-index: 200000;
}

.container-header .mod-menu > li + li {
  margin-left: 0;
}

.container-header .grid-child {
  display: flex;
  align-items: center;
  gap: 1rem;
  width: 100%;
  max-width: 100%;
  padding: 0;
}

.container-header .grid-child.bgcolor {
  background-color: #627E12;
}

.container-header .navbar-brand {
  width: 54%;
  margin-inline-end: auto;
  padding: 0;
  position: relative;
  right: 0;
}

.navbar-brand .brand-logo img {
  width: 100%;
  max-width: 370px;
  min-width: 200px;
  height: auto;
}

/* Suche (Modul) */
.container-header .suche {
  display: inline-block;
  position: relative;
  text-align: right;
  top: 0;
}

.container-header .suche .form-control {
  width: 100%;
  color: #627E12;
  appearance: none;
  background: #fff;
  border: 5px solid #627E12;
  border-radius: 5px;
  background-clip: padding-box;
  padding: .2rem 1rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
  display: block;
}

.container-header .suche .finder {
  padding: 5px 5px 5px 10px;
}

.suche input::placeholder {
  color: transparent;
}

.container-header .container-search {
  margin-top: 0 !important;
  margin-right: .5rem !important;
  background: #627E12;
  border-radius: 5px;
}

/* Such-Icon */
.container-header .sucheicon {
  display: inline-block;
  width: auto;
  margin-inline-end: auto;
  padding: 0;
  position: relative;
  top: 8px;
  right: 0;
}

.sucheicon ul {
  display: flex;
}

.sucheicon ul li {
  list-style: none;
  padding: 0 0 0 5px;
  min-width: 40px;
  max-width: 50px;
}

.sucheicon ul li.liste-suche {
  max-width: 80px;
}

.sucheicon ul li img {
  width: 80%;
}

/* Partnerlogos */
.container-header .logoicon {
  display: inline-block;
  width: auto;
  margin-inline-end: auto;
  padding: 0;
  position: relative;
  top: 0;
  right: 0;
}

.logoicon ul {
  display: flex;
}

.logoicon ul li {
  list-style: none;
  padding: 0 0 0 5px;
  min-width: 230px;
  max-width: 240px;
}

.logoicon ul li.liste-suche {
  max-width: 80px;
}

.logoicon ul li img {
  width: 100%;
}

.container-header .container-nav {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: .5rem 0;
}

.grid-child.container-nav {
  position: static;
  margin: 0 auto;
  width: 100%;
  max-width: 1320px;
  justify-self: center;
}

.container-header nav {
  margin-top: 0;
  padding: 0;
}

.container-header nav .mod-list li {
  padding: .25em .5rem;
  hyphens: auto;
}

/* ===================== Headerimage Startseite ===================== */
.kwb-header-image {
  width: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

.kwb-header-image__img {
  display: block;
  width: 100%;
  height: 420px;
  object-fit: cover;
  object-position: center center;
}

@media (max-width: 991.98px) {
  .kwb-header-image__img {
    height: 300px;
  }
}

@media (max-width: 767.98px) {
  .kwb-header-image__img {
    height: 180px;
    object-position: center top;
  }
}

@media (max-width: 480px) {
  .kwb-header-image__img {
    height: 140px;
  }
}

/* ===================== Breadcrumb ===================== */
.breadcrumb,
.mod-breadcrumbs.breadcrumb.kwb.px-3.py-2 {
  background-color: transparent !important;
  padding: 0 !important;
}

.mod-breadcrumbs__item.breadcrumb-item.active {
  color: #627E12;
  font-weight: 500;
}

/* ===================== Header Responsive ===================== */
@media (max-width: 1420px) {
  .container-header .navbar-brand {
    width: 77%;
  }
}

@media (max-width: 1395px) {
  .container-header .navbar-brand {
    width: 76%;
  }
}

@media (max-width: 1360px) {
  .container-header .navbar-brand {
    width: 75%;
  }
}

@media (max-width: 1319px) {
  .container-header .navbar-brand {
    padding: 0 0 0 20px;
  }
}

@media (max-width: 1280px) {
  .container-header .navbar-brand {
    width: 45%;
    left: 10px;
    right: 10px;
  }

  .container-header .suche {
    top: 6px;
  }

  .container-header .sucheicon {
    display: inline-block;
    width: auto;
    padding: 1rem;
    position: absolute;
    top: 26px;
    right: 35px;
  }
}

/* ===================== Header Mobil / Tablet (bis 1024px) =====================
   Logozeile im normalen Fluss (kein absolute, keine feste Höhe).
   Tablet: Logo links, Suche und Partnerlogos rechts.
   Handy (bis 600px): alles zentriert untereinander.
   ============================================================================ */
@media (max-width: 1024px) {

  header.container-header {
    height: auto;
  }

  .container-header .padding-05 > .container-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .5rem 1rem;
    max-width: 100%;
    margin: 0 auto;
    padding: .75rem 1rem;
  }

  /* Logo */
  .container-header .navbar-brand {
    position: static;
    flex: 0 1 auto;
    width: auto;
    margin: 0;
    padding: 0;
  }

  .navbar-brand .brand-logo img {
    width: 250px;
    max-width: 100%;
    min-width: 0;
    height: auto;
  }

  /* Such-Icon */
  .container-header .sucheicon {
    position: static;
    display: block;
    width: auto;
    margin: 0 0 0 auto;
    padding: 0;
  }

  .container-header .sucheicon ul {
    margin: 0;
    padding: 0;
  }

  .container-header .sucheicon ul li {
    width: 40px;
    min-width: 0;
    max-width: none;
    padding: 0;
  }

  .container-header .sucheicon ul li img {
    width: 100%;
  }

  /* Partnerlogos */
  .container-header .logoicon {
    position: static;
    display: block;
    width: auto;
    margin: 0;
    padding: 0;
  }

  .container-header .logoicon ul {
    align-items: center;
    gap: 1rem;
    margin: 0;
    padding: 0;
  }

  .container-header .logoicon ul li {
    width: 160px;
    min-width: 0;
    max-width: none;
    padding: 0;
  }

  .container-header .logoicon ul li img {
    width: 100%;
    height: auto;
  }
}

@media (max-width: 600px) {

  .container-header .padding-05 > .container-nav {
    flex-direction: column;
    justify-content: center;
    gap: .75rem;
    padding: .75rem 1rem;
  }

  .container-header .navbar-brand {
    width: 100%;
    text-align: center;
  }

  .navbar-brand .brand-logo img {
    width: 260px;
  }

  .container-header .sucheicon {
    margin: 0;
  }

  .container-header .logoicon {
    width: 100%;
  }

  .container-header .logoicon ul {
    justify-content: space-around;
  }

  .container-header .logoicon ul li {
    width: 42%;
    max-width: 180px;
    text-align: center;
  }
}

/* Breadcrumb auf dem Handy ausblenden */
@media (max-width: 768px) {
  .mod-breadcrumbs__wrapper,
  .mod-breadcrumbs {
    display: none;
  }
}

@media (min-width: 1024.98px) {
  .container-header .grid-child {
    display: block;
  }
}

@media (min-width: 1439.8px) {
  .container-header .container-nav {
    display: block;
  }
}

/* ===================== Hauptnavigation =====================
   Joomla-Menümodul, Position "menu", Layout "Collapsible Dropdown".
   Markup: .kwb-mega-wrap > nav.navbar > button.navbar-toggler
           + .navbar-collapse > ul.metismenu > li.metismenu-item
   Umschaltpunkt Desktop/Mobil: 1024px (wie der übrige Header)

   Hinweis: Cassiopeia setzt für .metismenu.mod-menu eigene Regeln
   (Unterstreichung bei .active, inline-flex bei Untermenü-Links, ::before am Button).
   Alle Selektoren hier beginnen deshalb mit ".kwb-mega-wrap .metismenu.mod-menu",
   damit sie diese Regeln sicher überstimmen.
   ============================================================ */

/* Pfeil-Grafiken (als Maske, übernehmen die Textfarbe) */
.kwb-mega-wrap {
  --kwb-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 5l6 6 6-6' fill='none' stroke='black' stroke-width='2.2'/%3E%3C/svg%3E");
  --kwb-triangle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 2l9 6-9 6z' fill='black'/%3E%3C/svg%3E");
  --kwb-arrow: var(--kwb-chevron);
}

/* Cassiopeia-Zierrat abschalten: Linien/Balken unter den Einträgen und am Button.
   !important nur hier, weil die Herkunft der Regel im Template nicht bekannt ist. */
.kwb-mega-wrap .metismenu.mod-menu .metismenu-item::before,
.kwb-mega-wrap .metismenu.mod-menu .metismenu-item::after,
.kwb-mega-wrap .metismenu.mod-menu .metismenu-item > a::before,
.kwb-mega-wrap .metismenu.mod-menu .metismenu-item > a::after,
.kwb-mega-wrap .metismenu.mod-menu .mm-toggler::before {
  content: none !important;
  display: none !important;
}

/* Eigener Pfeil (Desktop und Mobil) */
.kwb-mega-wrap .metismenu.mod-menu .mm-toggler::after {
  content: "";
  display: inline-block;
  position: static;
  width: .7em;
  height: .7em;
  margin: 0 0 0 .3em;
  padding: 0;
  border: 0;
  vertical-align: middle;
  background: currentColor;
  -webkit-mask: var(--kwb-arrow) center / contain no-repeat;
  mask: var(--kwb-arrow) center / contain no-repeat;
  transform: none;
  transition: transform .2s ease;
}

.kwb-mega-wrap .metismenu.mod-menu .mm-toggler[aria-expanded="true"]::after {
  transform: rotate(180deg);
}

/* ---------- Desktop ab 1025px ---------- */
@media (min-width: 1025px) {

  .kwb-mega-wrap .navbar {
    padding: 0;
  }

  .kwb-mega-wrap .navbar-toggler {
    display: none !important;
  }

  .kwb-mega-wrap .navbar-collapse {
    display: flex !important;
    flex-basis: auto;
  }

  .kwb-mega-wrap .metismenu.mod-menu {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .kwb-mega-wrap .metismenu.mod-menu > li.metismenu-item {
    position: relative;
    display: flex;
    align-items: center;
    padding: 0;
    border: 0;
    box-shadow: none;
    background: none;
  }

  /* Ebene 1 */
  .kwb-mega-wrap .metismenu.mod-menu > li.metismenu-item > a,
  .kwb-mega-wrap .metismenu.mod-menu > li.metismenu-item > .mm-toggler-nolink {
    display: inline-flex;
    align-items: center;
    padding: .6rem .6rem;
    overflow: visible;
    font-family: 'Delicious', sans-serif;
    font-size: 1.1rem;
    letter-spacing: .02em;
    text-transform: uppercase;
    text-decoration: none;
    color: #fff;
    background: none;
    border: 0;
    box-shadow: none;
  }

  /* Hover: nur der Text wird unterstrichen */
  .kwb-mega-wrap .metismenu.mod-menu > li.metismenu-item > a:hover,
  .kwb-mega-wrap .metismenu.mod-menu > li.metismenu-item > .mm-toggler-nolink:hover {
    text-decoration: underline;
    text-underline-offset: .25em;
  }

  /* Aktive Seite: fett, ohne Unterstreichung */
  .kwb-mega-wrap .metismenu.mod-menu > li.metismenu-item.active > a,
  .kwb-mega-wrap .metismenu.mod-menu > li.metismenu-item.active > .mm-toggler-nolink {
    font-weight: 800;
  }

  /* Pfeil-Button neben Einträgen mit Link und Untermenü */
  .kwb-mega-wrap .metismenu.mod-menu > li.metismenu-item > .mm-toggler-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: -.5rem;
    padding: .6rem .5rem;
    color: #fff;
    background: none;
    border: 0;
    cursor: pointer;
  }

  .kwb-mega-wrap .metismenu.mod-menu > li.metismenu-item > .mm-toggler-link::after {
    margin: 0;
  }

  /* Dropdown */
  .kwb-mega-wrap .metismenu.mod-menu > li.metismenu-item > .mm-collapse {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    min-width: 12rem;
    margin: 0;
    padding: .4rem 0;
    list-style: none;
    background: #fff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .15);
  }

  .kwb-mega-wrap .metismenu.mod-menu .mm-collapse:not(.mm-show) {
    display: none;
  }

  .kwb-mega-wrap .metismenu.mod-menu .mm-collapse > li.metismenu-item {
    display: block;
    padding: 0;
  }

  /* Links im Dropdown: volle Breite, keine Unterstreichung */
  .kwb-mega-wrap .metismenu.mod-menu .mm-collapse > li > a {
    display: block;
    width: 100%;
    padding: .35rem 1.4rem;
    overflow: visible;
    font-family: 'Delicious', sans-serif;
    font-size: .9rem;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    color: #627E12;
  }

  .kwb-mega-wrap .metismenu.mod-menu .mm-collapse > li > a:hover {
    color: #0F2646;
    background: #f7ffde;
  }

  /* Aktive Seite im Dropdown: fett mit hellgrüner Fläche */
  .kwb-mega-wrap .metismenu.mod-menu .mm-collapse > li.active > a {
    font-weight: 800;
    color: #0F2646;
    background: #f7ffde;
  }

  /* Fokus: Gold auf Grün, Navy auf Weiß */
  .kwb-mega-wrap .metismenu.mod-menu > li.metismenu-item > a:focus-visible,
  .kwb-mega-wrap .metismenu.mod-menu > li.metismenu-item > button:focus-visible {
    outline: 3px solid #FFD700;
    outline-offset: -3px;
    box-shadow: none;
  }

  .kwb-mega-wrap .metismenu.mod-menu .mm-collapse > li > a:focus-visible {
    outline: 3px solid #0F2646;
    outline-offset: -3px;
    box-shadow: none;
  }
}

/* ---------- Mobil bis 1024px: fixierte Leiste + Vollbild-Drawer ---------- */
@media (max-width: 1024px) {

  .kwb-mega-wrap {
    --kwb-arrow: var(--kwb-triangle);
  }

  /* Platz für die fixierte Leiste; Anker nicht unter der Leiste verstecken */
  body.kwb__startseite {
    padding-top: 56px;
  }

  html {
    scroll-padding-top: 56px;
  }

  /* Menü-Container ohne Abstand; dünner grüner Streifen unter den Logos */
  .container-header .grid-child.bgcolor {
    height: 12px;
    background-color: #627E12;
  }

  .container-header .bgcolor > .container-nav {
    margin: 0;
    padding: 0;
    max-width: 100%;
  }

  /* Grüne Leiste */
  .kwb-mega-wrap {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 56px;
    z-index: 1002;
    background: #627E12;
  }

  .kwb-mega-wrap .navbar {
    position: static;
    display: block;
    height: 56px;
    margin: 0;
    padding: 0;
  }

  /* Hamburger: fest in der Leiste, vertikal auf Höhe des Barrierefreiheits-Icons.
     Die drei Balken werden als Hintergrund gezeichnet. */
  .kwb-mega-wrap .navbar-toggler {
    position: absolute;
    top: 6px;
    right: 12px;
    z-index: 1002;
    display: block !important;
    width: 44px;
    height: 44px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background:
      linear-gradient(#fff, #fff) 50% 14px / 22px 2px no-repeat,
      linear-gradient(#fff, #fff) 50% 21px / 22px 2px no-repeat,
      linear-gradient(#fff, #fff) 50% 28px / 22px 2px no-repeat;
  }

  .kwb-mega-wrap .navbar-toggler .icon-menu {
    display: none;
  }

  .kwb-mega-wrap .navbar-toggler:focus-visible {
    outline: 3px solid #FFD700;
    outline-offset: 0;
    box-shadow: none;
  }

  /* Drawer: Vollbild. Beginnt bei 0 und reicht mit dem Innenabstand unter die Leiste,
     damit zwischen Leiste und Drawer keine feine Linie durchscheint. */
  .kwb-mega-wrap .navbar-collapse {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1001;
    overflow-y: auto;
    margin: 0;
    padding: 68px 12px 16px;
    background: #627E12;
    border: 0;
    box-shadow: none;
  }

  /* Bootstrap-Regeln für navbar-expand übersteuern */
  .kwb-mega-wrap .navbar-collapse.collapse:not(.show) {
    display: none !important;
  }

  .kwb-mega-wrap .navbar-collapse.show,
  .kwb-mega-wrap .navbar-collapse.collapsing {
    display: block !important;
  }

  /* Ebene 1: Rahmenboxen */
  .kwb-mega-wrap .metismenu.mod-menu {
    display: block;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .kwb-mega-wrap .metismenu.mod-menu > li.metismenu-item {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    margin: 0 0 6px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, .25);
    box-shadow: none;
    background: none;
  }

  .kwb-mega-wrap .metismenu.mod-menu > li.metismenu-item:first-child {
    border-color: transparent;
  }

  .kwb-mega-wrap .metismenu.mod-menu > li.metismenu-item > a,
  .kwb-mega-wrap .metismenu.mod-menu > li.metismenu-item > .mm-toggler-nolink {
    flex: 1 1 auto;
    padding: 14px 12px;
    overflow: visible;
    font-family: 'Delicious', sans-serif;
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-align: left;
    text-transform: uppercase;
    text-decoration: none;
    white-space: normal;
    color: #fff;
    background: none;
    border: 0;
    box-shadow: none;
  }

  /* Eintrag ohne Link: ganze Zeile ist der Button, Pfeil rechts */
  .kwb-mega-wrap .metismenu.mod-menu > li.metismenu-item > .mm-toggler-nolink {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
  }

  /* Eintrag mit Link: eigener Pfeil-Button rechts */
  .kwb-mega-wrap .metismenu.mod-menu > li.metismenu-item > .mm-toggler-link {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 48px;
    padding: 0;
    color: #fff;
    background: none;
    border: 0;
  }

  .kwb-mega-wrap .metismenu.mod-menu .mm-toggler::after {
    width: .85rem;
    height: .85rem;
    margin: 0;
  }

  /* Pfeil ▶ dreht beim Öffnen nach unten */
  .kwb-mega-wrap .metismenu.mod-menu .mm-toggler[aria-expanded="true"]::after {
    transform: rotate(90deg);
  }

  /* Aktiver Hauptpunkt */
  .kwb-mega-wrap .metismenu.mod-menu > li.metismenu-item.active {
    background: rgba(255, 255, 255, .12);
  }

  .kwb-mega-wrap .metismenu.mod-menu > li.metismenu-item.active > a,
  .kwb-mega-wrap .metismenu.mod-menu > li.metismenu-item.active > .mm-toggler-nolink {
    font-weight: 800;
  }

  /* Geöffnet und Hover: Blau wie bei den Kreiswerken */
  .kwb-mega-wrap .metismenu.mod-menu > li.metismenu-item:has(> .mm-toggler[aria-expanded="true"]) {
    background: #007cc2;
    border-color: #007cc2;
  }

  @media (hover: hover) {
    .kwb-mega-wrap .metismenu.mod-menu > li.metismenu-item:not(:first-child):hover {
      background: #007cc2;
      border-color: #007cc2;
    }
  }

  /* Untermenü: weiße Box im Fluss, volle Breite, nicht schwebend (alle Ebenen) */
  .kwb-mega-wrap .metismenu.mod-menu .mm-collapse {
    position: static;
    inset: auto;
    width: auto;
    min-width: 0;
    margin: 0;
    padding: 0;
    list-style: none;
    background: none;
    border: 0;
    box-shadow: none;
    transform: none;
  }

  .kwb-mega-wrap .metismenu.mod-menu > li.metismenu-item > .mm-collapse {
    flex: 0 0 100%;
    padding: 8px;
    background: #fff;
  }

  .kwb-mega-wrap .metismenu.mod-menu .mm-collapse > li.metismenu-item {
    display: block;
    padding: 0;
  }

  /* Links im Untermenü: volle Breite, schwarz, normal */
  .kwb-mega-wrap .metismenu.mod-menu .mm-collapse > li > a {
    display: block;
    width: 100%;
    padding: 10px 12px;
    overflow: visible;
    font-family: 'Delicious', sans-serif;
    font-size: 1rem;
    font-weight: 400;
    text-decoration: none;
    white-space: normal;
    color: #000;
    background: none;
    border: 0;
  }

  /* Überschriften im Untermenü (Einträge mit Unterpunkten) fett */
  .kwb-mega-wrap .metismenu.mod-menu .mm-collapse > li.parent > a,
  .kwb-mega-wrap .metismenu.mod-menu .mm-collapse .mm-toggler-nolink {
    font-weight: 700;
  }

  .kwb-mega-wrap .metismenu.mod-menu .mm-collapse .mm-collapse {
    padding-left: 12px;
  }

  .kwb-mega-wrap .metismenu.mod-menu .mm-collapse > li > a:hover,
  .kwb-mega-wrap .metismenu.mod-menu .mm-collapse > li > a:focus {
    color: #627E12;
    text-decoration: underline;
  }

  /* Aktive Seite im Untermenü: fett mit hellgrüner Fläche, ohne Unterstreichung */
  .kwb-mega-wrap .metismenu.mod-menu .mm-collapse > li.active > a {
    font-weight: 800;
    color: #627E12;
    background: #e0ebc8;
    border-radius: 4px;
    text-decoration: none;
  }

  /* Fokus: Gold auf Grün, Navy auf Weiß */
  .kwb-mega-wrap .metismenu.mod-menu > li.metismenu-item > a:focus-visible,
  .kwb-mega-wrap .metismenu.mod-menu > li.metismenu-item > button:focus-visible {
    outline: 3px solid #FFD700;
    outline-offset: -3px;
    box-shadow: none;
  }

  .kwb-mega-wrap .metismenu.mod-menu .mm-collapse > li > a:focus-visible {
    outline: 3px solid #0F2646;
    outline-offset: -3px;
    box-shadow: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .kwb-mega-wrap .metismenu.mod-menu .mm-toggler::after {
    transition: none;
  }
}

/* ===================== Banner Container (Cassiopeia Grid) Slider ===================== */
.site-grid > .container-banner.full-width {
  grid-column: full-start / full-end !important;
  margin: 0 !important;
  padding: 0 !important;
  position: relative !important;
  left: auto !important;
  right: auto !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box;
}

.site-grid > .container-banner.boxed-1320 {
  position: static !important;
  left: auto !important;
  right: auto !important;
  margin: 10px 0 -50px 0;
  grid-column: 1 / -1 !important;
  width: 100% !important;
  max-width: 1320px !important;
  margin-inline: auto !important;
  justify-self: center !important;
  box-sizing: border-box;
}

.site-grid > .container-banner.boxed-1320 #kwb-slider {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 auto !important;
  box-sizing: border-box;
}

.site-grid > .container-banner.boxed-1320 *[style*="100vw"] {
  width: 100% !important;
  max-width: 100% !important;
}

/* ===================== Beiträge – Layout Aktuelles ===================== */
.com-content-article .fields-container {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: clamp(12px, 2vw, 20px);
}

@media (min-width: 900px) {
  .com-content-article .fields-container {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr);
    grid-template-areas: "image text" "caption text";
    align-items: start !important;
  }
}

@media (max-width: 899.98px) {
  .com-content-article .fields-container {
    grid-template-columns: 1fr !important;
    grid-template-areas: "image" "caption" "text" !important;
  }
}

.com-content-article .field-entry.beitragsbild-bdg {
  grid-area: image;
}

.com-content-article .field-entry.beitragstext {
  grid-area: text;
}

.com-content-article .field-entry.alternativtext,
.com-content-article .field-label {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.com-content-article .field-entry.beitragsbild-bdg .field-value img {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: 0;
}

.com-content-article .field-entry.bildunterschrift {
  grid-area: caption;
  width: 100%;
  margin-top: -10px;
  padding: 20px;
  background: #627E12;
}

.com-content-article .field-entry.bildunterschrift .field-value {
  color: #ffffff;
  font-size: 1rem;
  line-height: 1.5;
  box-sizing: border-box;
}

.com-content-article .field-entry.beitragstext .field-value p {
  margin: 0 0 1rem;
}

.com-content-article .field-entry.beitragstext .field-value a {
  text-underline-offset: .15em;
}

@media (min-width: 990px) {
  .com-content-article .field-entry.bildunterschrift {
    width: 39.5%;
    position: absolute;
    top: 490px;
  }
}

/* ===================== Timeline (/wir/entwicklung) ===================== */
.vtl {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.vtl-row {
  display: grid;
  grid-template-columns: 6ch 40px 1fr;
  align-items: start;
  gap: 1rem;
}

.vtl-year {
  align-self: start;
  text-align: right;
  font-weight: 700;
  color: #0f2646;
  font-size: 1.2rem;
  line-height: 1.2;
  padding-top: .1em;
}

.vtl-track {
  position: relative;
  display: flex;
  justify-content: center;
  align-self: stretch;
}

.vtl-track::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 4px;
  background: #c7d2e0;
  transform: translateX(-50%);
}

.vtl-track::after {
  content: "";
  position: absolute;
  left: 50%;
  top: var(--dot-offset, .35em);
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #0f2646;
  border: 3px solid #fff;
  box-shadow: 0 0 0 3px #0f2646;
  transform: translate(-50%, 0);
}

.vtl-content {
  display: grid;
  grid-template-columns: minmax(220px, 32%) 1fr;
  gap: 1rem;
  align-items: start;
  padding-bottom: 1rem;
}

.vtl-media {
  margin: 0;
}

.vtl-media img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 6px;
  object-fit: cover;
}

.vtl-text h3 {
  margin: 0;
  font-size: 1.1rem;
  color: #0f2646;
}

.vtl-text p {
  margin: .25rem 0 0;
  color: #000000;
  line-height: 1.5;
}

@media (max-width: 800px) {
  .vtl-content {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 600px) {
  .vtl-row {
    grid-template-columns: 4ch 30px 1fr;
  }

  .vtl-year {
    font-size: 1rem;
  }
}

/* ===================== Lightbox (ohne JS) ===================== */
.dw-thumb img {
  width: 100%;
  height: auto;
  cursor: zoom-in;
}

.dw-lb,
.dw-2b,
.dw-3b {
  position: fixed;
  inset: 0;
  display: none;
  background: rgba(0, 0, 0, .85);
  padding: 16px;
  z-index: 9999;
}

#dw-lb:target,
#dw-2b:target,
#dw-3b:target {
  display: grid;
  place-items: center;
}

.dw-lb .close,
.dw-2b .close,
.dw-3b .close {
  position: fixed;
  inset: 0;
  display: block;
  z-index: 1;
}

.dw-lb img,
.dw-2b img,
.dw-3b img {
  position: relative;
  z-index: 2;
  display: block;
  cursor: zoom-out;
  max-width: calc(100vw - 32px);
  max-height: calc(100vh - 32px);
  object-fit: contain;
}

/* ===================== Responsive Videos ===================== */
.video-block {
  position: relative;
  aspect-ratio: 16 / 9;
  width: 100%;
  margin: 1rem 0;
  background: #000;
  overflow: hidden;
}

.video-block iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* ===================== Details/Summary Accordion (ra4-cards) ===================== */
details {
  background: #ffffff;
  margin-bottom: 10px;
  border-radius: 0;
}

.btn {
  text-align: left;
}

summary h2,
summary h2.h3,
summary.btn h2,
summary h3,
summary h3.h4,
summary.btn h3 {
  color: #ffffff;
}

/* Marker entfernen (WebKit) */
summary::-webkit-details-marker {
  display: none;
}

summary,
summary.btn {
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  background: #627E12;
  border-radius: 0;
  color: #ffffff;
}

summary:hover,
summary.btn:hover {
  background: #007cc2;
  color: #ffffff;
}

summary:focus,
summary.btn:focus {
  color: #ffffff;
}

summary.btn:focus,
summary h3:focus,
summary h3.h4:focus,
summary.btn h3:focus {
  outline: 5px solid #FFD700;
  outline-offset: 3px;
  box-shadow: 0 0 0 3px #FFD700;
  border-radius: .85rem;
}

summary::after {
  content: "▾";
  padding: 0 10px;
  font-size: 2rem;
  color: #ffffff;
  transition: transform .2s ease;
  unicode-bidi: isolate;
}

summary.btn::after {
  content: "▸";
  font-size: 2rem;
  color: #ffffff;
  transition: transform .2s ease;
  unicode-bidi: isolate;
}

details[open] summary::after,
details[open] summary.btn::after {
  transform: rotate(180deg);
}

/* ===================== Phoca Maps / Standortliste ===================== */
.phocaMap {
  margin-bottom: 1rem;
  border-radius: 12px;
  border: 0;
}

.phocamaps-box-border-grey .phocamaps-map {
  box-shadow: 0 0 0 0 rgba(0, 0, 0, 0) !important;
}

.leaflet-control a:focus {
  outline: 2px solid var(--kwb);
  outline-offset: 2px;
}

.standort-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
  padding: 0;
  margin: 1rem 0 0;
  list-style: none;
}

.standort-card {
  position: relative;
  background: #fff;
  border-top: 1px solid var(--kwb);
  border-radius: 0;
  padding: 14px 16px 12px 44px;
  min-height: 84px;
}

.standort-card::before {
  content: "📍";
  position: absolute;
  left: 12px;
  top: 12px;
  font-size: 20px;
  line-height: 1;
}

.standort-name {
  display: block;
  font-weight: 700;
  margin-bottom: 2px;
}

.standort-adresse {
  display: block;
  font-size: .95rem;
  color: #3b4656;
}

.standort-link {
  display: inline-block;
  margin-top: 8px;
  font-size: .93rem;
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.standort-link:focus,
.standort-link:hover {
  color: var(--kwb);
  border-bottom-color: var(--kwb);
  outline: 2px solid transparent;
}

/* ===================== Tabellen (responsive) ===================== */
.c-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  background: var(--tbl-bg);
  margin-top: 1rem;
}

.c-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: auto;
  font-size: 1.1rem;
}

.c-table__caption {
  text-align: left;
  font-weight: 600;
  margin: .5rem .9rem;
  color: #001f3f;
}

.c-table th,
.c-table td {
  padding: var(--tbl-pad);
  border-bottom: 1px solid var(--tbl-border);
  text-align: left;
  vertical-align: top;
}

.c-table thead th {
  font-weight: 600;
  background: #627E12;
  color: #fff;
}

.c-table thead th.width-5  { width: 5%; }
.c-table thead th.width-10 { width: 10%; }
.c-table thead th.width-20 { width: 20%; }
.c-table thead th.width-30 { width: 30%; }
.c-table thead th.width-40 { width: 40%; }
.c-table thead th.width-50 { width: 50%; }

.c-table tbody tr:hover {
  background: var(--tbl-hover);
}

/* Desktop: Sticky Header/Spalte */
@media (min-width: 901px) {
  .c-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
  }

  .c-table.is-sticky-col-1 th[scope="row"],
  .c-table.is-sticky-col-1 td:first-child,
  .c-table.is-sticky-col-1 thead th:first-child {
    position: sticky;
    left: 0;
    background: var(--tbl-bg);
    z-index: 1;
  }
}

/* Mobile: Card-Ansicht mit Badges */
@media (max-width: 640px) {

  .c-table,
  .c-table thead,
  .c-table tbody,
  .c-table th,
  .c-table td,
  .c-table tr {
    display: block;
  }

  .c-table thead {
    display: none;
  }

  .c-table tr {
    border: 1px solid #e5e9ef;
    border-radius: 6px;
    padding: .5rem .8rem 1.5rem .8rem;
    margin: .75rem 0;
    background: #fff;
  }

  .c-table th[scope="row"] {
    display: block;
    font-weight: 700;
    border: 0;
    padding: .6rem .8rem;
  }

  .c-table td {
    position: relative;
    border: 0;
    padding: .6rem .8rem .6rem 50%;
    white-space: normal;
    min-height: 2.2rem;
    hyphens: auto;
  }

  .c-table td:not([data-label])::before {
    content: none;
  }

  .c-table td::before {
    content: attr(data-label);
    position: absolute;
    left: .8rem;
    top: .6rem;
    width: calc(50% - 1.6rem);
    display: block;
    background: #627E12;
    color: #fff;
    padding: .15rem .4rem;
    border-radius: 4px;
    font-weight: 600;
    line-height: 1.2;
    white-space: normal;
  }
}

@media print {

  .c-table,
  .c-table thead,
  .c-table tbody,
  .c-table th,
  .c-table td,
  .c-table tr {
    display: table;
  }

  .c-table thead {
    display: table-header-group;
  }
}

/* ===================== Cassiopeia-Grid: Mobil / Tablet ===================== */
@media (max-width: 1024px) {

  /* Header & Banner im Grid vollflächig */
  .site-grid > .container-header,
  .site-grid > .container-banner {
    grid-column: full-start / full-end !important;
    margin: 0 auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }

  /* Gaps im Grid entfernen */
  body.wrapper-fluid .site-grid,
  .site-grid {
    grid-gap: 0 !important;
  }

  /* Innenabstand für Content-Container */
  .site-grid > div:not(.container-banner):not(.container-header) {
    padding-left: 15px !important;
    padding-right: 15px !important;
    box-sizing: border-box !important;
  }
}

/* ===================== Barrierefreiheits-Icon (Joomla Accessibility Toolbar) ===================== */
._access-icon {
  position: fixed !important;
  top: 42px !important;
  right: 16px !important;
  bottom: auto !important;
  left: auto !important;
  width: 39px !important;
  height: 39px !important;
  aspect-ratio: 1 / 1 !important;
  padding: 0 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  border-radius: 50% !important;
  border: 2px #fff solid;
  overflow: hidden !important;
  background-color: #627E12 !important;
  background-image: url('/images/02-icon/barrierefreiheit.webp') !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: cover !important;
  box-shadow: none !important;
  filter: none !important;
  text-shadow: none !important;
  transform: none !important;
  color: transparent !important;
  font-size: 0 !important;
  text-indent: 0 !important;
  line-height: 1 !important;
  z-index: 999999 !important;
  opacity: 1 !important;
}

._access-icon:hover {
  filter: brightness(1.05) !important;
}

._access-icon:focus,
._access-icon:focus-visible {
  outline: 2px solid #fff !important;
  outline-offset: 3px !important;
}

@media (max-width: 1360px) {
  ._access-icon {
    top: 42px !important;
    right: 9px !important;
    bottom: auto !important;
    left: auto !important;
  }
}

@media (max-width: 1024px) {
  ._access-icon {
    top: 9px !important;
    right: auto !important;
    bottom: auto !important;
    left: 16px !important;
  }
}

/* ===================== ConvertForms ===================== */
.com-content-article__body #cf_1,
.com-content-article__body #cf_2,
.com-content-article__body #cf_3,
.com-content-article__body #cf_4,
.com-content-article__body #cf_5,
.com-content-article__body #cf_6,
.com-content-article__body #cf_7,
.com-content-article__body #cf_8,
.com-content-article__body #cf_9,
.com-content-article__body #cf_12,
.com-content-article__body #cf_22 {
  --max-width: 100%;
}

.convertforms .cf-btn {
  font-size: inherit !important;
  background-color: #627E12 !important;
  color: var(--button-color);
  padding: var(--button-padding);
  border-radius: 0 !important;
  border: 0 !important;
  position: relative;
  cursor: pointer;
}

.convertforms a {
  color: #627E12 !important;
}

/* =========================================================
   KWB Hinweis-Ticker (iOS/WebKit-sicher)
   ========================================================= */
.site-grid .container-top-b .boxed-1320 {
  overflow: hidden;
}

.kwb-ticker {
  display: flex;
  align-items: stretch;
  gap: 12px;
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;
  background: #627E12;
  border: 2px solid #627E12;
  border-radius: 0;
  box-shadow: none;
}

.kwb-ticker__label {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  background: #627E12;
  color: #fff;
  padding: 10px 14px;
  font-weight: 700;
  white-space: nowrap;
  border-radius: 0;
  box-shadow: none;
}

.kwb-ticker a {
  color: #ffffff;
}

.kwb-ticker__content {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  display: block;
  position: relative;
  font-size: 1.1em;
  padding: 10px 10px 0 0;
}

.kwb-ticker__track {
  display: inline-flex;
  align-items: center;
  gap: 40px;
  white-space: nowrap;
  padding-left: 100%;            /* iOS: von rechts hereinlaufen */
  will-change: transform;
  transform: translate3d(0, 0, 0);
  -webkit-animation: kwbMarquee var(--kwb-ticker-speed, 35s) linear infinite;
  animation: kwbMarquee var(--kwb-ticker-speed, 35s) linear infinite;
}

.kwb-ticker__item {
  white-space: nowrap;
  color: #ffffff;
  font-weight: 500;
}

/* Clone ist aria-hidden und nicht klickbar */
.kwb-ticker__item[aria-hidden="true"],
.kwb-ticker__item--clone {
  pointer-events: none;
}

@-webkit-keyframes kwbMarquee {
  from { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }
  to   { -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); }
}

@keyframes kwbMarquee {
  from { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }
  to   { -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); }
}

/* Pause nur auf Desktop mit echtem Hover */
@media (hover: hover) and (pointer: fine) {
  .kwb-ticker:hover .kwb-ticker__track {
    -webkit-animation-play-state: paused;
    animation-play-state: paused;
  }
}

/* Pause bei Tastatur-Fokus */
.kwb-ticker:focus-within .kwb-ticker__track {
  -webkit-animation-play-state: paused;
  animation-play-state: paused;
}

/* Standard: Elemente für reduzierte Bewegung aus */
.kwb-ticker__static,
.kwb-ticker__reduced {
  display: none;
}

/* Bewegung reduziert: Laufband aus, statische Variante an */
@media (prefers-reduced-motion: reduce) {
  .kwb-ticker__track {
    animation: none !important;
    -webkit-animation: none !important;
    transform: none !important;
    -webkit-transform: none !important;
    padding-left: 0 !important;
    display: none !important;
  }

  .kwb-ticker__content {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px 10px 10px 0;
  }

  .kwb-ticker__static {
    display: block;
    white-space: normal;
    color: #627E12;
    font-weight: 600;
  }

  .kwb-ticker__reduced {
    display: block;
    font-size: .95rem;
    line-height: 1.35;
    color: #627E12;
    opacity: .9;
  }
}

/* ===========================
   KWB: Hinweisbanner (statisch, Top-B)
   =========================== */
.kwb_hinweisbanner {
  background: #e8f2cb;
  color: #627E12;
  border: 2px solid #627E12;
  box-shadow: none;
  border-radius: 0;
  padding: 16px 20px;
}

.kwb_hinweisbanner__inner {
  display: flex;
  align-items: center;
  gap: 18px;
}

.kwb_hinweisbanner__icon img {
  display: block;
  width: 150px;
  height: 150px;
  object-fit: contain;
}

.kwb_hinweisbanner__svg {
  width: 150px;
  height: 150px;
  color: #627E12;
  display: block;
}

.kwb_hinweisbanner__text {
  color: #627E12;
}

.kwb_hinweisbanner__text a {
  color: #627E12;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.kwb_hinweisbanner__text a:hover,
.kwb_hinweisbanner__text a:focus {
  text-decoration-thickness: 2px;
}

.kwb_startseite_hinweise {
  display: grid;
  gap: 12px;
}

@media (max-width: 768px) {
  .kwb_hinweisbanner__inner {
    align-items: flex-start;
  }

  .kwb_hinweisbanner__icon img,
  .kwb_hinweisbanner__svg {
    width: 90px;
    height: 90px;
  }
}

/* ===================== Seite "Wissenswertes": KWB Tabs ===================== */
.kwb-tabs {
  margin-top: 20px;
  width: 100%;
  max-width: 100%;
}

.kwb-tabs__list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 20px 0;
  padding: 0;
  width: 100%;
}

.kwb-tabs__tab {
  appearance: none;
  -webkit-appearance: none;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  width: 100%;
  min-width: 0;
  min-height: 100px;
  padding: 14px 16px;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  font-family: 'Delicious', sans-serif;
  text-align: left;
  cursor: pointer;
  transition: transform .2s ease, filter .2s ease, opacity .2s ease;
}

.kwb-tabs__tab:hover {
  transform: translateY(-2px);
  filter: brightness(1.03);
}

.kwb-tabs__tab:focus-visible {
  position: relative;
  z-index: 2;
}

.kwb-tabs__kicker {
  display: block;
  margin-bottom: 4px;
  font-size: .8rem;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-weight: 600;
}

.kwb-tabs__title {
  display: block;
  font-size: 1rem;
  line-height: 1.25;
  font-weight: 700;
  text-transform: uppercase;
  overflow-wrap: break-word;
}

.kwb-tabs__tab[aria-selected="false"] {
  opacity: .92;
}

.kwb-tabs__tab[aria-selected="true"] {
  opacity: 1;
  transform: none;
}

/* Farbvarianten */
.kwb-tabs__tab--gruen   { background: #627E12; color: #ffffff; }
.kwb-tabs__tab--grau    { background: #6f6f6f; color: #ffffff; }
.kwb-tabs__tab--blau    { background: #007cc2; color: #ffffff; }
.kwb-tabs__tab--weitere { background: #e8f2cb; color: #627E12; }

.kwb-tabs__tab--gruen[aria-selected="true"]   { background: #50680f; }
.kwb-tabs__tab--grau[aria-selected="true"]    { background: #555555; }
.kwb-tabs__tab--blau[aria-selected="true"]    { background: #005f95; }
.kwb-tabs__tab--weitere[aria-selected="true"] { background: #d7e8a8; color: #4c640d; }

.kwb-tabs__panel {
  padding: 20px;
  background: #ffffff;
  width: 100%;
  max-width: 100%;
}

.js .kwb-tabs__panel[hidden] {
  display: none;
}

.kwb-tabs__panel-kicker {
  margin: 0 0 8px 0;
  color: #627E12;
  font-size: .9rem;
  line-height: 1.2;
  font-weight: 600;
  text-transform: uppercase;
}

.kwb-tabs__panel h3 {
  margin: 0 0 10px 0;
}

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

.kwb-tabs__noscript {
  margin-top: 10px;
  padding: 10px 15px;
  border-left: 4px solid #627E12;
  background: #e8f2cb;
}

@media (max-width: 1024px) {
  .kwb-tabs__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  .kwb-tabs__list {
    grid-template-columns: 1fr;
  }

  .kwb-tabs__tab {
    min-height: auto;
  }

  .kwb-tabs__panel {
    padding: 15px;
  }
}

/* ===================== Seite "Über uns": Unsere Ziele ===================== */
.kwb-ziele {
  background: #e8f2cb;
  padding: 20px;
}

.kwb-ziele .ra2-grid {
  gap: 20px;
}

.kwb-ziele__karte {
  background: #ffffff;
  border-radius: 0;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .08);
  overflow: hidden;
}

.kwb-ziele__karte .ra2-item {
  padding: 20px;
}

.kwb-ziele__karte .ra4-teaser {
  padding: 0;
  background: transparent;
}

.kwb-ziele__karte h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 12px 0;
}

.kwb-ziele__icon {
  display: inline-block;
  width: 40px;
  height: 40px;
  flex: 0 0 14px;
  border-radius: 50%;
  background: #627E12;
}

.kwb-ziele--netzwerk .kwb-ziele__icon       { background: #627E12; }
.kwb-ziele--infrastruktur .kwb-ziele__icon  { background: #007cc2; }
.kwb-ziele--wirtschaft .kwb-ziele__icon     { background: #d40000; }
.kwb-ziele--mobilitaet .kwb-ziele__icon     { background: #6f6f6f; }

.kwb-ziele .ra4-list {
  margin-top: .5rem;
  min-height: auto;
}

.kwb-ziele .ra4-list li {
  margin-bottom: .5rem;
}

@media (max-width: 768px) {
  .kwb-ziele {
    padding: 15px;
  }

  .kwb-ziele__karte .ra2-item {
    padding: 15px;
  }
}

/* ===================== Aktuelles: ACF H1 Überschrift ===================== */
.kwb-article-grid {
  display: flex;
  gap: 30px;
  align-items: flex-start;
}

.kwb-article-right {
  flex: 1 1 60%;
}

.kwb-article-img {
  width: 100%;
  height: auto;
  display: block;
}

.kwb-article-caption {
  margin-top: 12px;
  padding: 12px 14px;
  background-color: #627E12;
  color: #ffffff;
  font-size: .95rem;
  line-height: 1.4;
}

.kwb-article-h1 {
  margin: 0 0 14px 0;
}

@media (max-width: 900px) {
  .kwb-article-grid {
    flex-direction: column;
  }

  .kwb-article-left {
    flex: 1 1 auto;
  }
}

/* ===================== Ausnahmen Barrierefreiheitstest (externe Module) ===================== */
.cfupload-browse,
.dz-message {
  color: #000000 !important;
}

/* ===================== Screenreader-only ===================== */
.sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
  padding: 0;
  margin: 0;
}



/* =====================================================
   Grüne Boxen, aus KWB Leitbild – Unsere Werte
   barrierearm / responsive
   ===================================================== */

.kwb-values {
  background: transparent;
  color: #ffffff;
  margin: 3rem 0;
  padding: 0;
}

.kwb-values__inner {
    width: 100%;
    margin: 0;
    padding: 0;
}

.kwb-values__heading {
  margin: 0 0 1.5rem 0;
  font-size: clamp(1.4rem, 2vw, 2rem);
  line-height: 1.15;
  text-transform: uppercase;
}

.kwb-values__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(220px, 1fr));
  gap: 14px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.kwb-values__card {
  min-width: 0;
  list-style: none;
  background: #6f930f;
}

.kwb-values__item {
  position: relative;
  min-height: 285px;
  height: 100%;
  overflow: hidden;
  background: #6f930f;
  color: #ffffff;
  padding: clamp(1.3rem, 2vw, 2rem);
  box-sizing: border-box;
}

.kwb-values__wing {
  position: absolute;
  top: 0;
  right: 0;
  width: clamp(110px, 34%, 200px);
  height: auto;
  pointer-events: none;
}

.kwb-values__claim,
.kwb-values__item h3,
.kwb-values__label,
.kwb-values__item p {
  position: relative;
  z-index: 1;
}

.kwb-values__claim {
  margin: 0 0 .35rem 0;
  color: #ffffff;
  font-size: clamp(.85rem, 1vw, 1rem);
  line-height: 1.25;
}

/*.kwb-values__item h3 {
  color: #ffffff;
  margin: 0 0 1.1rem 0;
  font-size: clamp(1.7rem, 2.6vw, 3rem);
  line-height: .95;
  text-transform: uppercase;
  overflow-wrap: anywhere;
  hyphens: auto;
}*/

.kwb-values__item h3 {
    color: #ffffff;
    margin: 0 0 1.1rem 0;
    font-size: clamp(1.7rem, 2.4vw, 2.6rem);
    line-height: .95;
    text-transform: uppercase;

    /* Keine Silbentrennung */
    hyphens: none;
    word-break: normal;
    overflow-wrap: normal;
}

.kwb-values__label {
  display: inline-block;
  margin: 0 0 .9rem 0;
  padding: .25rem .5rem;
  background: #009fe3;
  color: #ffffff;
  font-size: .78rem;
  line-height: 1.2;
  font-weight: 700;
  text-transform: uppercase;
}

.kwb-values__item p {
  color: #ffffff;
  margin: 0 0 .85rem 0;
  font-size: .95rem;
  line-height: 1.45;
}


/*** Erste Karte ***/
.kwb-values__item p:first-child {
  margin-bottom: 0;
}

/* Lrste Karte über volle Breite */
.kwb-values__card:first-child {
  grid-column: span 3;
}

.kwb-values__card:first-child .kwb-values__item {
  min-height: 220px;
}




/*** Letzte Karte ***/
.kwb-values__item p:last-child {
  margin-bottom: 0;
}

/* Letzte Karte über volle Breite */
.kwb-values__card:last-child {
  grid-column: span 1;
}

.kwb-values__card:last-child .kwb-values__item {
  min-height: 220px;
}

/* Tablet */
@media (max-width: 1024px) {
  .kwb-values__grid {
    grid-template-columns: repeat(2, minmax(220px, 1fr));
  }

  .kwb-values__card:last-child {
    grid-column: span 2;
  }
}

/* Smartphone */
@media (max-width: 700px) {
  .kwb-values {
    margin: 2rem 0;
    padding: 2rem 0;
  }

  .kwb-values__inner {
    width: min(100% - 32px, 1320px);
  }

  .kwb-values__grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .kwb-values__card:last-child {
    grid-column: span 1;
  }

  .kwb-values__item {
    min-height: auto;
    padding: 1.4rem;
  }

  .kwb-values__card:last-child .kwb-values__item {
    min-height: auto;
  }

  .kwb-values__item h3 {
    font-size: clamp(2rem, 10vw, 3rem);
  }

  .kwb-values__wing {
    width: 130px;
  }
}

/* =====================================================
   Servicekarten BARNIM ENERGIE (/service)
   Modifier .kwb-values--service – hebt nur hier die
   Leitbild-Regeln auf (Spannweiten, Mindesthöhen, Farben)
   ===================================================== */

.kwb-values__ra4-grid {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.kwb-values--service {
  margin: 2.5rem 0;
}

.kwb-values--service .kwb-values__inner {
  width: 100%;
}

/* Spannweiten aus dem Leitbild neutralisieren */
.kwb-values--service .kwb-values__card,
.kwb-values--service .kwb-values__card:first-child,
.kwb-values--service .kwb-values__card:last-child {
  grid-column: auto;
  background: #627E12;
}

.kwb-values--service .kwb-values__item,
.kwb-values--service .kwb-values__card:first-child .kwb-values__item,
.kwb-values--service .kwb-values__card:last-child .kwb-values__item {
  min-height: 0;
  background: #627E12;
}

/* Blaue Überschrift-Plakette – Größe wie im bei KWB Leitbild */
.kwb-values--service h3.kwb-values__label {
  display: inline-block;
  margin: 0 0 1.1rem;
  padding: .25rem .5rem;
  background: #007cc2;
  font-size: clamp(1.7rem, 2.4vw, 2.6rem);
  line-height: .95;
  border-radius: 0;
}

.kwb-values--service .kwb-values__item p {
  margin: 0 0 1rem;
  font-size: 1rem;
}

/* Innere Linklisten: kein Extra-Einzug, gleiche Flucht in beiden Karten */
/* Innere Linklisten als Buttons */
.kwb-values--service .ra2-grid {
  gap: 8px 14px;
  margin: 0;
  padding: 0 !important; /* hebt .padding-20 auf */
}

.kwb-values--service .ra2-card {
  display: block;
  height: auto;
  background: transparent;
}

.kwb-values--service .ra1-teaser {
  padding: 0;
}

.kwb-values--service .ra1-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 0;
  min-height: 0;
}

/* display:block entfernt auch die ■-Marker */
.kwb-values--service .ra1-list > li {
  display: block;
  margin: 0;
  font-size: 1rem;
  line-height: 1.3;
}

.kwb-values--service .ra1-list > li > a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  min-height: 44px;
  padding: .55rem .85rem;
  background: #ffffff;
  border: 2px solid #ffffff;
  border-radius: 0;
  color: #627E12 !important;
  font-weight: 700;
  text-decoration: none;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

.kwb-values--service .ra1-list > li > a::after {
  content: "›";
  flex: 0 0 auto;
  font-size: 1.4em;
  line-height: 1;
  transition: transform .2s ease;
}

.kwb-values--service .ra1-list > li > a:hover,
.kwb-values--service .ra1-list > li > a:focus-visible {
  background: #007cc2;
  border-color: #007cc2;
  color: #ffffff !important;
}

.kwb-values--service .ra1-list > li > a:hover::after,
.kwb-values--service .ra1-list > li > a:focus-visible::after {
  transform: translateX(3px);
}

.kwb-values--service .ra1-list > li > a:focus-visible {
  outline: 3px solid #FFD700;
  outline-offset: 2px;
  box-shadow: none;
  border-radius: 0;
}

@media (prefers-reduced-motion: reduce) {
  .kwb-values--service .ra1-list > li > a,
  .kwb-values--service .ra1-list > li > a::after {
    transition: none;
  }
}

/* Tablet: Karten untereinander, volle Breite */
@media (max-width: 1024px) {
  .kwb-values__ra4-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Smartphone */
@media (max-width: 700px) {
  .kwb-values--service {
    margin: 2rem 0;
    padding: 0;
  }
}

@media (max-width: 480px) {
  .kwb-values--service .kwb-values__item {
    padding: 1.1rem;
  }
}

/* =====================================================
   Seite "Über uns" BARNIM ENERGIE
   ===================================================== */

/* Zwei Textspalten: mehr Luft für Fließtext */
.be-textspalten .ra2-grid {
  gap: 2rem;
  margin: 0;
  padding: 20px 0 0;
}

.be-textspalten p {
  margin: 0 0 1rem;
  line-height: 1.6;
}

/* Bild + grüner Textkasten: gleiche Höhe, gleicher Abstand */
.be-bildtext .ra2-grid {
  gap: 20px;
  align-items: stretch;
  margin: 0;
  padding: 20px 0 0;
}

.be-bildtext__bild {
  margin: 0;
  padding: 20px;
  background: #ffffff;
}

.be-bildtext__bild img {
  display: block;
  width: 100%;
  height: auto;
}

/* Rechte Spalte: plakative Typografie */
.be-bildtext__text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.4rem;
  margin: 0;
  padding: 50px;
  background: #627E12;
}

.be-bildtext__text p {
  margin: 0;
  padding: 0;
  background: none;
  color: #ffffff;
  font-size: clamp(1.15rem, 1.5vw, 1.4rem);
  line-height: 1.5;
}

/* Einleitung als Headline in Versalien */
.be-bildtext__text .be-gebiet__lead {
  font-size: clamp(1.8rem, 2.8vw, 2.6rem);
  line-height: 1.05;
  text-transform: uppercase;
}

.be-bildtext__text .be-gebiet__lead strong {
  color: #ffffff;
}

/* Gebiets-Sätze mit feiner Trennlinie */
.be-bildtext__text .be-gebiet__info {
  padding-top: 1.2rem;
  border-top: 1px solid rgba(255, 255, 255, .4);
}

/* Produktnamen als weiße Plaketten */
.be-bildtext__text .be-gebiet__info strong {
  display: inline-block;
  margin: .1em 0;
  padding: .05em .4em;
  background: #ffffff;
  color: #627E12;
  line-height: 1.3;
  white-space: nowrap;
}

@media (max-width: 768px) {
  .be-bildtext__text {
    padding: 24px;
  }
}

@media (max-width: 768px) {
  .be-textspalten .ra2-grid {
    gap: 0;
  }

  .be-bildtext .ra2-grid {
    gap: 14px;
  }

  .be-bildtext__text {
    padding: 20px;
  }
}

/* ==========================================================================
   DiWo 2026: Presseseite – Logo-Downloads (Ergänzung für das Ende von user.css)
   Logo und Download-Button stehen in jeder Karte untereinander.
   - Logo bekommt einen festen Abstand zum Button und wird etwas kleiner dargestellt,
     damit es nicht direkt auf dem grünen Balken aufsitzt
   - Button sitzt immer unten in der Karte (margin-top: auto), auch wenn die
     Logos unterschiedlich hoch sind -> Buttons einer Reihe liegen auf einer Linie
   ========================================================================== */

/* DiWo 2026: Karte als senkrechte Flex-Spalte, damit der Button nach unten geschoben werden kann */
.presse-downloads .ra3-item {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* DiWo 2026: Logo – Blockelement (kein Unterlängen-Spalt), begrenzte Breite, Abstand zum Button */
.presse-downloads .ra3-item img {
    display: block;
    width: 100%;
    max-width: 300px;
    height: auto;
    margin: 0 0 1.5rem 0;
}

/* DiWo 2026: Button an den unteren Kartenrand */
.presse-downloads .ra3-cta {
    margin-top: auto;
}

/* DiWo 2026: Abstand zwischen den Karten (nebeneinander und untereinander bei schmalen Ansichten) */
.presse-downloads {
    row-gap: 2.5rem;
}

/* ==========================================================================
   DiWo 2026: Kündigungsformular Barnim Energie (Convert Forms) – Ergänzung für das Ende von user.css
   Die Abschnittsüberschriften im Formular sind jetzt h2 (vorher h3, Sprung unter dem h1 der Seite).
   Damit der grüne Balken unabhängig von der Überschriftenebene bleibt, hängt das Aussehen
   an der Klasse .cf-abschnitt.
   ========================================================================== */

/* DiWo 2026: grüner Balken für Abschnittsüberschriften – KWB-Grün #627E12, weiße Schrift (Kontrast 4,9:1) */
.convertforms .cf-abschnitt {
    background: #627E12;
    color: #ffffff;
    font-size: 1.25rem;
    line-height: 1.3;
    padding: .5rem 1rem;
    margin: 1.5rem 0 .75rem 0;
}

/* DiWo 2026: erster Abschnitt ohne zusätzlichen Abstand nach oben */
.convertforms .cf-pflichthinweis + .cf-abschnitt {
    margin-top: .5rem;
}

/* DiWo 2026: Hinweis auf Pflichtfelder */
.convertforms .cf-pflichthinweis {
    margin: 0 0 .5rem 0;
    font-size: .9rem;
}

/* DiWo 2026: deutlich sichtbarer Tastaturfokus in Feldern und am Absende-Button (Fokus-Gold wie im restlichen Template) */
.convertforms input:focus-visible,
.convertforms select:focus-visible,
.convertforms textarea:focus-visible,
.convertforms button:focus-visible {
    outline: 3px solid #FFD700;
    outline-offset: 2px;
    box-shadow: 0 0 0 5px #0F2646;
}

/* DiWo 2026: Hover/Fokus des Absende-Buttons im üblichen Blau */
.convertforms .cf-btn:hover,
.convertforms .cf-btn:focus-visible {
    background-color: #007cc2 !important;
}

/* ==========================================================================
   DiWo 2026: Ergänzung für das Ende der user.css
   Preistabellen, Download-Kachel, Kontaktkachel Servicebüro, Textseiten
   ========================================================================== */

/* DiWo 2026: Download-Kachel neben der Kontaktkachel. Aufbau wie die Kontaktkachel:
   links 40 % Vorschau des Dokuments, rechts Titel und grüne Schaltfläche. */
.be-download {
  display: grid;
  grid-template-columns: 40% 60%;
  width: 100%;
  height: 100%;
  padding: 20px;
  color: #333;
  text-decoration: none;
}

/* DiWo 2026: Die Vorschau zeigt das ganze Dokument und wird nicht beschnitten. */
.be-download__bild {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid #d9d9d9;
}

/* DiWo 2026: Titel oben, Schaltfläche am unteren Rand der Kachel. */
.be-download__text {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-width: 0;
  padding-left: 1rem;
}

.be-download__titel {
  color: #627E12;
  font-size: 1.45rem;
  font-weight: 700;
  line-height: 1.2;
  text-transform: uppercase;
}

/* DiWo 2026: Gleiche Farben wie die grünen Schaltflächen der Seite. */
.be-download__cta {
  margin-top: auto;
  padding: .6rem .75rem;
  background: #627E12;
  color: #ffffff;
  font-weight: 600;
  text-align: right;
  transition: background-color .2s ease;
}

.be-download__cta::after {
  content: " ›";
}

.be-download:hover .be-download__cta,
.be-download:focus .be-download__cta {
  background: #007cc2;
}

/* DiWo 2026: Sichtbarer Tastaturfokus wie im Rest der Seite. */
.be-download:focus-visible {
  outline: 3px solid #FFD700;
  outline-offset: -3px;
}

/* DiWo 2026: Keine Überblendung, wenn reduzierte Bewegung eingestellt ist. */
@media (prefers-reduced-motion: reduce) {
  .be-download__cta {
    transition: none;
  }
}

/* DiWo 2026: Auf dem Smartphone steht die Vorschau über dem Text. */
@media (max-width: 640px) {
  .be-download {
    grid-template-columns: 1fr;
  }

  .be-download__text {
    padding: 1rem 0 0;
  }
}

/* DiWo 2026: Kachel des Servicebüros wie die Kontaktkachel. Das Bild wird nicht beschnitten
   und behält immer seine Proportionen. */
.be-kontakt__karte {
  height: 100%;
}

.be-kontakt__bild {
  display: block;
  width: 100%;
  height: auto;
}

/* DiWo 2026: Kachel Öffnungszeiten mit demselben Innenabstand wie die übrigen Kacheln. */
.be-kontakt__oeffnung {
  padding: 20px;
}

.be-kontakt__oeffnung .ra-list-3col {
  margin-top: .75rem;
}

/* DiWo 2026: Breitere erste Spalte für die ausgeschriebenen Wochentage. */
.be-kontakt__oeffnung .ra-list-3col li {
  grid-template-columns: 110px 155px auto;
}

/* DiWo 2026: Absätze auf den Textseiten bekommen die Breite und den Abstand der übrigen Seiten. */
.be-text p {
  margin: 0 0 1rem;
}

/* DiWo 2026: Lange Spaltennamen in der Kartenansicht. Das Schild steht im normalen Textfluss,
   damit es mit dem Text wächst und den Wert nicht überdeckt. */
@media (max-width: 640px) {
  .be-preis-table td {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: .75rem;
    align-items: start;
    padding: .6rem .8rem;
    hyphens: none;
  }

  .be-preis-table td::before {
    position: static;
    width: auto;
  }
}

/* DiWo 2026: Die Kachel nutzt immer die volle Breite, auch solange das Vorschaubild noch nicht geladen ist. */
.ra2-item:has(> .be-download) {
  width: 100%;
}

/* DiWo 2026: Unsichtbare Slides sind nicht klickbar und nicht per Tastatur erreichbar. */
.rw-hero-slide:not(.is-active) {
  visibility: hidden;
}

/* DiWo 2026: Die Leiste der Navigationspunkte ist so breit wie der Slider und lag über dem Button.
   Nur die Punkte selbst bleiben klickbar. */
.rw-hero-dots {
  pointer-events: none;
}

.rw-hero-dot {
  pointer-events: auto;
}

/* DiWo 2026: Kachel Kundenportal neben der Kontaktkachel. Die Schaltfläche steht immer am unteren Kachelrand. */
.be-kontakt__portal {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 20px;
}

/* DiWo 2026: Kreisdiagramm Stromkennzeichnung mit Legende, auf schmalen Bildschirmen untereinander. */
.be-strommix {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.5rem 2.5rem;
  margin: 1rem 0 0;
  padding: 20px;
  background: #fff;
}

.be-strommix__diagramm {
  display: block;
  flex: 0 1 300px;
  width: 100%;
  max-width: 300px;
  height: auto;
  margin-inline: auto;
}

/* DiWo 2026: Weißer Abstand zwischen den Kreisanteilen. */
.be-strommix__diagramm > path:not(.be-strommix__linie) {
  stroke: #fff;
  stroke-width: 2;
}

.be-strommix__linie {
  fill: none;
  stroke: #333;
  stroke-width: 1;
}

.be-strommix__wert {
  fill: #fff;
  font-size: 18px;
  font-weight: 700;
  text-anchor: middle;
  dominant-baseline: middle;
}

/* DiWo 2026: Werte außerhalb des Kreises in Textfarbe, die kleinen Anteile sind schmaler als ihr Text. */
.be-strommix__wert--aussen {
  fill: #333;
  font-size: 16px;
  dominant-baseline: auto;
}

.be-strommix__wert--aussen[text-anchor="end"] {
  text-anchor: end;
}

.be-strommix__legende {
  flex: 1 1 300px;
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.be-strommix__legende li {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  margin: 0 0 .6rem;
}

/* DiWo 2026: Farbfeld bleibt auch im Modus "Erzwungene Farben" sichtbar. */
.be-strommix__farbe {
  flex: 0 0 1rem;
  height: 1rem;
  margin-top: .3rem;
  forced-color-adjust: none;
}

/* DiWo 2026: Grafik im FAQ-Akkordeon passt sich der Breite an. */
.be-faq-grafik {
  display: block;
  max-width: 100%;
  height: auto;
}

/* DiWo 2026: Startseite "Vier gewinnt" - Icon und Text im festen Zweispalten-Raster.
   Vorher floatete das Icon, längerer Text rutschte in der dritten Zeile darunter. */
.be-vorteile .ra2-item {
  display: grid;
  grid-template-columns: clamp(56px, 15%, 92px) minmax(0, 1fr);
  column-gap: 1.25rem;
  align-items: start;
}

.be-vorteile .ra2-media {
  margin: 0;
}

.be-vorteile .ra2-img {
  display: block;
  float: none;
  width: 100%;
  height: auto;
}

.be-vorteile .ra2-teaser {
  padding: 0;
}

.be-vorteile .ra2-teaser h3 {
  margin-top: 0;
}

/* DiWo 2026: Header ab 1025px als Flex-Zeile: Logo links, Suche und Partnerlogos rechts.
   Vorher war das Logo zwischen 1025 und 1420px auf 75-77 % Breite festgelegt, dadurch brachen
   die Partnerlogos in eine zweite Zeile und Logo/Menü klebten am linken Rand. */
@media (min-width: 1025px) {
  .container-header .padding-05 > .container-nav {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 1rem 2rem;
    max-width: 1320px;
    margin: 0 auto;
    padding: .75rem 20px;
  }

  .container-header .padding-05 .navbar-brand {
    position: static;
    flex: 0 1 auto;
    width: auto;
    margin: 0 auto 0 0;
    padding: 0;
  }

  .container-header .padding-05 .sucheicon {
    position: static;
    top: auto;
    right: auto;
    margin: 0;
    padding: 0;
  }

  .container-header .padding-05 .logoicon {
    position: static;
    flex: 0 1 auto;
    margin: 0;
  }

  /* DiWo 2026: Menü mit demselben Seitenabstand wie die Logozeile. */
  .container-header .bgcolor > .container-nav {
    padding-left: 20px;
    padding-right: 20px;
  }
}

/* DiWo 2026: Bis 1439px Platz rechts für das fest positionierte Barrierefreiheits-Icon. */
@media (min-width: 1025px) and (max-width: 1439.98px) {
  .container-header .padding-05 > .container-nav {
    padding-right: 70px;
  }
}