@charset "UTF-8";
:root {
  --color-primary: 58 138 63;
  --color-primary-dark: 33 106 42;
  --color-primary-light: 232 242 232;
  --color-accent: 242 192 37;
  --color-ink: 23 26 23;
  --color-ink-muted: 92 106 95;
  --color-background: 255 255 255;
  --color-surface: 246 248 246;
  --color-line: 226 231 227;
}

.max-w-8xl {
  max-width: 95rem;
}

.bg-main-color {
  background-color: #3a8a3f;
  color: white;
}

/* Sticky-Nav (CSS-Teil).
   Der Zustandswechsel wird von dist/stickynav.js gesteuert:
   sobald der Nav den oberen Viewport-Rand erreicht, bekommt er
   .nav-is-stuck und wird per position:fixed oben verankert. Ein
   Sentinel vor dem Nav übernimmt seine Höhe, damit kein Layout-
   Sprung entsteht. Gilt für page.html.twig und page--front.html.twig,
   da beide <nav class="bg-main-color"> verwenden. */
nav.bg-main-color.nav-is-stuck {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  -webkit-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* Top-Level-Nav-Styling: strikt mit >-Kombinator auf direkte Kinder
   der Nav-UL beschränken, damit die Regeln nicht ins Mega-Panel
   kaskadieren (dort haben Sublinks eigene Styles: block-Layout,
   grüne Textfarbe, kein UPPERCASE, kein weißes Text). */
.region-topnav ul.menu {
  margin-left: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
}

.region-topnav ul.menu > li {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.region-topnav ul.menu > li > a {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  color: white;
  text-transform: uppercase;
  padding: 0.5rem 1rem;
}

.region-topnav ul.menu > li > a.is-active,
.region-topnav ul.menu > li > a:hover {
  background-color: #216a2a;
}

.region-topnav ul.menu > li.menu-item {
  padding-top: 0;
}

/* ============================================================
   Mega-Dropdown (Hauptnavigation)
   ------------------------------------------------------------
   Struktur kommt aus templates/navigation/menu--main.html.twig
   Ebene 0 (li.mega-nav__item) -> Ebene 1 (Sektions-Spalten) ->
   Ebene 2 (Sublinks). Icons + Beschreibungen liefert der
   Preprocess-Hook fleiwindcss_preprocess_menu__main().
   Hover-Öffnen ist CSS-only (:hover + :focus-within), damit
   Tastatur-Navigation ohne JS funktioniert.
   Erst ab md (768px) wird die Nav horizontal und das Dropdown
   sichtbar — auf Mobile bleibt die Standard-Kollaps-Logik von
   Drupal/fleiwindcssmenu.js zuständig.
   ============================================================ */
/* Panel wird relativ zum jeweiligen Menüpunkt-<li> positioniert (öffnet
   also linksbündig unter dem gehoverten Hauptpunkt) und hat eine feste
   Breite (siehe .mega-panel unten). */
.mega-nav {
  position: static;
}

.mega-nav__item {
  position: relative;
}

.mega-nav__link {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.35rem;
}

.mega-nav__chev {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-transition: -webkit-transform 0.15s ease;
  transition: -webkit-transform 0.15s ease;
  transition: transform 0.15s ease;
  transition: transform 0.15s ease, -webkit-transform 0.15s ease;
}

.mega-nav__item.has-mega:hover .mega-nav__chev,
.mega-nav__item.has-mega:focus-within .mega-nav__chev {
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
}

/* Panel: standardmäßig versteckt. Kein display:none, damit Fokus-
   Übergänge per Tab weiter funktionieren — stattdessen visibility.
   Feste Breite, linksbündig am gehoverten <li>. */
.mega-panel {
  position: absolute;
  top: 100%;
  left: 0;
  width: 720px;
  max-width: 95vw;
  z-index: 40;
  opacity: 0;
  visibility: hidden;
  -webkit-transform: translateY(6px);
          transform: translateY(6px);
  -webkit-transition: opacity 0.15s ease, visibility 0s linear 0.15s, -webkit-transform 0.15s ease;
  transition: opacity 0.15s ease, visibility 0s linear 0.15s, -webkit-transform 0.15s ease;
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0s linear 0.15s;
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0s linear 0.15s, -webkit-transform 0.15s ease;
  pointer-events: none;
}

.mega-nav__item.has-mega:hover > .mega-panel,
.mega-nav__item.has-mega:focus-within > .mega-panel {
  opacity: 1;
  visibility: visible;
  -webkit-transform: translateY(0);
          transform: translateY(0);
  pointer-events: auto;
  -webkit-transition-delay: 0s;
          transition-delay: 0s;
}

.mega-panel__inner {
  position: relative;
  background: #ffffff;
  color: #171a17;
  border: 1px solid #e2e7e3;
  border-top: 3px solid #3a8a3f;
  -webkit-box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
          box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
  padding: 1.5rem 1rem;
  border-radius: 0 0 6px 6px;
  min-height: 340px;
}

/* Linke Spalte: Sektionsliste (Ebene 1). Feste Breite, damit das
   Flyout rechts einen definierten Anker hat. */
.mega-panel__sections {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 42%;
  border-right: 1px solid #e2e7e3;
  padding-right: 1rem;
}

.mega-panel__section-item {
  position: static;
  display: block;
}

/* Sektions-Link — Icon + Title/Description + Pfeil. Klickbar zur
   jeweiligen Übersichtsseite. */
.mega-panel__section {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  gap: 0.75rem;
  padding: 0.75rem 0.75rem 0.75rem 0.5rem;
  color: #3a8a3f;
  text-decoration: none;
  text-transform: none;
  border-radius: 4px;
  -webkit-transition: background-color 0.1s ease, color 0.1s ease;
  transition: background-color 0.1s ease, color 0.1s ease;
}

/* Erste Sektion ist per Default „aktiv" — sonst wirkt der Flyout-
   Bereich rechts leer, bis der User hovert. */
.mega-panel__section-item:first-child > .mega-panel__section {
  background-color: rgba(0, 0, 0, 0.04);
}
.mega-panel__section-item:first-child > .mega-panel__section .mega-panel__section-title {
  color: #216a2a;
}

.mega-panel__section-item:hover > .mega-panel__section,
.mega-panel__section-item:focus-within > .mega-panel__section {
  background-color: rgba(0, 0, 0, 0.04);
}
.mega-panel__section-item:hover > .mega-panel__section .mega-panel__section-title,
.mega-panel__section-item:focus-within > .mega-panel__section .mega-panel__section-title {
  color: #216a2a;
}

/* Default-Hervorhebung entfernen, sobald User im Sektionsbereich
   einen anderen Punkt hovert. */
.mega-panel__sections:hover .mega-panel__section-item:first-child:not(:hover) > .mega-panel__section,
.mega-panel__sections:focus-within .mega-panel__section-item:first-child:not(:focus-within) > .mega-panel__section {
  background-color: transparent;
}
.mega-panel__sections:hover .mega-panel__section-item:first-child:not(:hover) > .mega-panel__section .mega-panel__section-title,
.mega-panel__sections:focus-within .mega-panel__section-item:first-child:not(:focus-within) > .mega-panel__section .mega-panel__section-title {
  color: #3a8a3f;
}

.mega-panel__section-text {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  min-width: 0;
  -webkit-box-flex: 1;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
}

.mega-panel__section-title {
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1.2;
  color: #3a8a3f;
  -webkit-transition: color 0.1s ease;
  transition: color 0.1s ease;
}

.mega-panel__section-desc {
  font-size: 0.8rem;
  color: #5c6a5f;
  line-height: 1.3;
  margin-top: 0.15rem;
  text-transform: none;
  letter-spacing: normal;
}

.mega-panel__section-arrow {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  color: #3a8a3f;
  -webkit-transition: color 0.15s ease, -webkit-transform 0.15s ease;
  transition: color 0.15s ease, -webkit-transform 0.15s ease;
  transition: transform 0.15s ease, color 0.15s ease;
  transition: transform 0.15s ease, color 0.15s ease, -webkit-transform 0.15s ease;
  margin-top: 0.15rem;
}

.mega-panel__section-item:first-child > .mega-panel__section .mega-panel__section-arrow,
.mega-panel__section-item:hover > .mega-panel__section .mega-panel__section-arrow {
  -webkit-transform: translateX(3px);
          transform: translateX(3px);
  color: #216a2a;
}

.mega-panel__sections:hover .mega-panel__section-item:first-child:not(:hover) > .mega-panel__section .mega-panel__section-arrow {
  -webkit-transform: none;
          transform: none;
  color: #3a8a3f;
}

/* ---- Flyout (rechte Panel-Spalte, wechselt beim Hover einer Sektion) ---- */
.mega-panel__flyout {
  position: absolute;
  top: 1.5rem;
  bottom: 1.5rem;
  left: calc(42% + 1rem);
  right: 1rem;
  padding: 0 0 0 2rem;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: opacity 0.12s ease, visibility 0s linear 0.12s;
  transition: opacity 0.12s ease, visibility 0s linear 0.12s;
  overflow-y: auto;
}

/* Default: erstes Flyout sichtbar (damit rechts nie ein leerer Bereich
   sichtbar ist beim ersten Aufklappen). */
.mega-panel__section-item:first-child > .mega-panel__flyout {
  opacity: 1;
  visibility: visible;
  -webkit-transition-delay: 0s;
          transition-delay: 0s;
}

/* Aktiv hovered Sektion überstimmt (z-index 2, damit visuell auf dem
   Default-Flyout liegt). */
.mega-panel__section-item:hover > .mega-panel__flyout,
.mega-panel__section-item:focus-within > .mega-panel__flyout {
  opacity: 1;
  visibility: visible;
  z-index: 2;
  -webkit-transition-delay: 0s;
          transition-delay: 0s;
}

/* Default-Flyout ausblenden, wenn User woanders in der Liste hovert. */
.mega-panel__sections:hover .mega-panel__section-item:first-child:not(:hover) > .mega-panel__flyout,
.mega-panel__sections:focus-within .mega-panel__section-item:first-child:not(:focus-within) > .mega-panel__flyout {
  opacity: 0;
  visibility: hidden;
}

.mega-panel__flyout-header {
  font-size: 0.75rem;
  font-weight: 600;
  color: #5c6a5f;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.75rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid #e2e7e3;
}

.mega-panel__sublinks {
  list-style: none;
  margin: 0;
  padding: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 0.1rem;
}

.mega-panel__sublink {
  display: block;
  padding: 0.35rem 0;
  font-size: 0.9rem;
  color: #3a8a3f;
  text-decoration: none;
  text-transform: none;
}
.mega-panel__sublink:hover, .mega-panel__sublink:focus-visible, .mega-panel__sublink.is-active-trail {
  background: transparent;
  color: #216a2a;
}

/* Auf Mobile wird das Desktop-Mega-Menü komplett ausgeblendet;
   stattdessen übernimmt die eigenständige Mobile-Nav (Hamburger +
   Drawer, siehe weiter unten). Die Region bleibt im DOM, damit
   SEO/Crawler sie finden, wird aber visuell versteckt. */
@media (max-width: 767px) {
  .region-topnav {
    display: none;
  }
}
/* Breadcrumb — Standard-System-Block "Breadcrumbs".
   Der Wrapper (Hintergrund, Padding, max-width) sitzt in page.html.twig;
   hier nur die Liste selbst. */
.region-breadcrumb ol,
.breadcrumbs ol {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.875rem;
  line-height: 1;
  color: #5c6a5f;
}
.region-breadcrumb li,
.breadcrumbs li {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  line-height: 1;
}
.region-breadcrumb li + li::before,
.breadcrumbs li + li::before {
  content: "›";
  margin-right: 0.5rem;
  color: #5c6a5f;
  line-height: 1;
}
.region-breadcrumb a,
.breadcrumbs a {
  color: #3a8a3f;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  line-height: 1;
}
.region-breadcrumb a:hover,
.breadcrumbs a:hover {
  color: #216a2a;
  text-decoration: underline;
}
.region-breadcrumb a svg,
.breadcrumbs a svg {
  width: 1rem;
  height: 1rem;
  display: block;
}

/* ============================================================
   Startseiten-Bildslider + überlappender Teaser
   ------------------------------------------------------------
   Der Teaser (.over-bigteaser-25) wird um 25% SEINER EIGENEN
   Höhe nach oben in den Slider hineingezogen, damit die ersten
   Content-Container schon sichtbar sind, während der Slider
   noch läuft.

   Warum transform statt margin-top?
   Bei margin-top / margin-bottom beziehen sich Prozente auf die
   BREITE des Parents, nicht auf die Höhe. Bei CSS transform:
   translate() sind Prozente dagegen auf die eigene Größe bezogen
   → das ist die einzige verlässliche "25% der eigenen Höhe"-Angabe
   ohne JavaScript.

   Nebenwirkung: Da transform den normalen Fluss nicht verändert,
   entsteht unter dem Teaser ein Leerraum von 25% seiner Höhe.
   Falls stört: margin-bottom mit negativem Fixwert (z.B. -6rem)
   ergänzen oder das Folge-Element mit reduziertem Top-Padding
   versehen.
   ============================================================ */
.sliderarea {
  position: relative;
  z-index: 1;
}

.over-bigteaser-25 {
  position: relative;
  z-index: 10;
  -webkit-transform: translateY(-25%);
          transform: translateY(-25%);
}

.text-formatted h2 {
  color: #3a8a3f;
  font-weight: 600;
  font-size: 1.9rem;
}

.view h2 {
  color: #3a8a3f;
  font-weight: 600;
  font-size: 2.3rem;
}

.view p {
  margin-top: 2rem;
}

.text-formatted h3 {
  font-weight: 600;
  font-size: 1.7rem;
}

.text-formatted ul {
  background-color: #f8fafc;
  padding: 1rem;
  list-style: square;
  padding-left: 2rem;
}

.block-block-content > h2 {
  font-size: 1.6rem;
  color: #3a8a3f;
}

.views-row .views-field-title {
  border-bottom: 1px solid #3a8a3f;
}

/* Kachel-Layout für "Amtliche Bekanntmachungen" — grüner Hintergrund, weißer
   Text, Pfeil rechts, komplette Kachel klickbar. Wird sowohl auf der
   Startseite (View "…_start") als auch auf der Übersichtsseite (Haupt-View)
   verwendet. Die Selector-Klassen setzt Drupal automatisch aus dem
   View-Machine-Namen — greift also unabhängig davon, welches Twig-Template
   die View-Registry am Ende auswählt. */
.view-amtliche-bekanntmachungen .views-row,
.view-amtliche-bekanntmachungen-start .views-row,
.view-amtl-bekanntmachungen .views-row {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  background-color: #3a8a3f;
  color: #fff;
  border-radius: 0;
  padding: 1.25rem 1.25rem 4rem 1.25rem;
  text-align: left;
  -webkit-transition: background-color 0.15s ease;
  transition: background-color 0.15s ease;
  /* Titel füllt den verfügbaren Platz aus, damit alle Datumsfelder in
     einer Grid-Reihe auf derselben Höhe stehen. Der Grid-Wrapper streckt
     ohnehin alle Kacheln auf gleiche Höhe (align-items: stretch), sodass
     flex-grow den Titel-Bereich pro Kachel auf die "höchste Titelhöhe"
     der Reihe zieht. */
  /* Text und Links weiß, Trennlinie vom globalen .views-field-title raus. */
}
.view-amtliche-bekanntmachungen .views-row .views-field-title,
.view-amtliche-bekanntmachungen-start .views-row .views-field-title,
.view-amtl-bekanntmachungen .views-row .views-field-title {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
}
.view-amtliche-bekanntmachungen .views-row::after,
.view-amtliche-bekanntmachungen-start .views-row::after,
.view-amtl-bekanntmachungen .views-row::after {
  content: "→";
  position: absolute;
  right: 1rem;
  bottom: 1rem;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 9999px;
  border: 2px solid #fff;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  font-size: 1.15rem;
  line-height: 1;
  color: #fff;
  pointer-events: none;
}
.view-amtliche-bekanntmachungen .views-row:hover,
.view-amtliche-bekanntmachungen-start .views-row:hover,
.view-amtl-bekanntmachungen .views-row:hover {
  background-color: #216a2a;
}
.view-amtliche-bekanntmachungen .views-row, .view-amtliche-bekanntmachungen .views-row a, .view-amtliche-bekanntmachungen .views-row .views-field-title,
.view-amtliche-bekanntmachungen-start .views-row,
.view-amtliche-bekanntmachungen-start .views-row a,
.view-amtliche-bekanntmachungen-start .views-row .views-field-title,
.view-amtl-bekanntmachungen .views-row,
.view-amtl-bekanntmachungen .views-row a,
.view-amtl-bekanntmachungen .views-row .views-field-title {
  color: #fff;
}
.view-amtliche-bekanntmachungen .views-row .views-field-title,
.view-amtliche-bekanntmachungen-start .views-row .views-field-title,
.view-amtl-bekanntmachungen .views-row .views-field-title {
  border-bottom: none;
}
.view-amtliche-bekanntmachungen .views-row a,
.view-amtliche-bekanntmachungen-start .views-row a,
.view-amtl-bekanntmachungen .views-row a {
  text-decoration: none;
  /* Der erste Link deckt per Overlay die komplette Kachel ab. */
}
.view-amtliche-bekanntmachungen .views-row a::after,
.view-amtliche-bekanntmachungen-start .views-row a::after,
.view-amtl-bekanntmachungen .views-row a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* Kopfzeilen-Textbereich der "Amtliche Bekanntmachungen"-Übersichtsseite.
   Wrapper-Look (bg-white, border, shadow, mb) sitzt im Twig als Tailwind-
   Klassen — hier nur die innere Typografie, damit p/a/ul/li konsistent zum
   Rest der Seite aussehen. Akzent grün analog zur Kachelfarbe. */
.view-amtliche-bekanntmachungen .amtliche-bekanntmachungen-header,
.view-amtl-bekanntmachungen .amtliche-bekanntmachungen-header {
  color: #171a17;
  font-size: 1rem;
  line-height: 1.6;
}
.view-amtliche-bekanntmachungen .amtliche-bekanntmachungen-header > *:first-child,
.view-amtl-bekanntmachungen .amtliche-bekanntmachungen-header > *:first-child {
  margin-top: 0;
}
.view-amtliche-bekanntmachungen .amtliche-bekanntmachungen-header > *:last-child,
.view-amtl-bekanntmachungen .amtliche-bekanntmachungen-header > *:last-child {
  margin-bottom: 0;
}
.view-amtliche-bekanntmachungen .amtliche-bekanntmachungen-header p,
.view-amtl-bekanntmachungen .amtliche-bekanntmachungen-header p {
  margin: 0 0 0.75rem;
}
.view-amtliche-bekanntmachungen .amtliche-bekanntmachungen-header p:last-child,
.view-amtl-bekanntmachungen .amtliche-bekanntmachungen-header p:last-child {
  margin-bottom: 0;
}
.view-amtliche-bekanntmachungen .amtliche-bekanntmachungen-header a,
.view-amtl-bekanntmachungen .amtliche-bekanntmachungen-header a {
  color: #3a8a3f;
  text-decoration: underline;
}
.view-amtliche-bekanntmachungen .amtliche-bekanntmachungen-header a:hover,
.view-amtl-bekanntmachungen .amtliche-bekanntmachungen-header a:hover {
  color: #216a2a;
}
.view-amtliche-bekanntmachungen .amtliche-bekanntmachungen-header ul, .view-amtliche-bekanntmachungen .amtliche-bekanntmachungen-header ol,
.view-amtl-bekanntmachungen .amtliche-bekanntmachungen-header ul,
.view-amtl-bekanntmachungen .amtliche-bekanntmachungen-header ol {
  margin: 0 0 0.75rem 1.25rem;
}
.view-amtliche-bekanntmachungen .amtliche-bekanntmachungen-header li,
.view-amtl-bekanntmachungen .amtliche-bekanntmachungen-header li {
  margin-bottom: 0.25rem;
}

/* Startseiten-spezifische Ergänzungen: maximal 4 Kacheln + "Alle …"-Button,
   der auf die Übersichtsseite verlinkt. Auf der Übersichtsseite selbst
   werden alle Ergebnisse (mit Pager) angezeigt, deshalb keine Limitierung. */
.view-amtliche-bekanntmachungen-start .bekanntmachungen-start-tiles .views-row:nth-child(n+5) {
  display: none;
}

.view-amtliche-bekanntmachungen-start .bekanntmachungen-start-more__btn,
.view-amtl-bekanntmachungen .bekanntmachungen-start-more__btn {
  display: inline-block;
  background-color: #3a8a3f;
  color: #fff;
  padding: 0.6rem 1.25rem;
  font-weight: 600;
  text-decoration: none;
  -webkit-transition: background-color 0.15s ease;
  transition: background-color 0.15s ease;
}
.view-amtliche-bekanntmachungen-start .bekanntmachungen-start-more__btn:hover,
.view-amtl-bekanntmachungen .bekanntmachungen-start-more__btn:hover {
  background-color: #216a2a;
  color: #fff;
}

/* Kachel-Layout "Wichtige Infos" — gleiches Layout wie die amtlichen
   Bekanntmachungen, aber in Akzent-Gelb. Textfarbe bleibt dunkel, weil weißer
   Text auf $color-accent zu wenig Kontrast hat (WCAG). Wird sowohl auf der
   Startseite (View "wichtige_infos") als auch auf der Übersichtsseite (View
   "wichtige_info_seite") verwendet. */
.view-wichtige-infos .views-row,
.view-wichtige-info-seite .views-row {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  background-color: #f2c025;
  color: #171a17;
  border-radius: 0;
  padding: 1.25rem 1.25rem 4rem 1.25rem;
  text-align: left;
  -webkit-transition: background-color 0.15s ease;
  transition: background-color 0.15s ease;
  /* Siehe Kommentar im .view-amtliche-bekanntmachungen-Block. */
}
.view-wichtige-infos .views-row .views-field-title,
.view-wichtige-info-seite .views-row .views-field-title {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
}
.view-wichtige-infos .views-row::after,
.view-wichtige-info-seite .views-row::after {
  content: "→";
  position: absolute;
  right: 1rem;
  bottom: 1rem;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 9999px;
  border: 2px solid #171a17;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  font-size: 1.15rem;
  line-height: 1;
  color: #171a17;
  pointer-events: none;
}
.view-wichtige-infos .views-row:hover,
.view-wichtige-info-seite .views-row:hover {
  background-color: #e1ad0d;
}
.view-wichtige-infos .views-row, .view-wichtige-infos .views-row a, .view-wichtige-infos .views-row .views-field-title,
.view-wichtige-info-seite .views-row,
.view-wichtige-info-seite .views-row a,
.view-wichtige-info-seite .views-row .views-field-title {
  color: #171a17;
}
.view-wichtige-infos .views-row .views-field-title,
.view-wichtige-info-seite .views-row .views-field-title {
  border-bottom: none;
}
.view-wichtige-infos .views-row a,
.view-wichtige-info-seite .views-row a {
  text-decoration: none;
}
.view-wichtige-infos .views-row a::after,
.view-wichtige-info-seite .views-row a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* Kopfzeilen-Textbereich der "Wichtige Infos"-Übersichtsseite. Dezenter
   Einleitungsblock über den gelben Kacheln — linker Akzent-Balken stellt den
   optischen Bezug zur Kachelfarbe her, ohne selbst gelb zu leuchten. */
.view-wichtige-info-seite .wichtige-infos-header {
  margin: 0 0 2rem;
  padding: 1rem 1.25rem;
  background-color: #f8fafc;
  border-left: 4px solid #f2c025;
  color: #171a17;
  font-size: 1rem;
  line-height: 1.6;
}
.view-wichtige-info-seite .wichtige-infos-header > *:first-child {
  margin-top: 0;
}
.view-wichtige-info-seite .wichtige-infos-header > *:last-child {
  margin-bottom: 0;
}
.view-wichtige-info-seite .wichtige-infos-header p {
  margin: 0 0 0.75rem;
}
.view-wichtige-info-seite .wichtige-infos-header p:last-child {
  margin-bottom: 0;
}
.view-wichtige-info-seite .wichtige-infos-header a {
  color: #3a8a3f;
  text-decoration: underline;
}
.view-wichtige-info-seite .wichtige-infos-header a:hover {
  color: #216a2a;
}
.view-wichtige-info-seite .wichtige-infos-header ul, .view-wichtige-info-seite .wichtige-infos-header ol {
  margin: 0 0 0.75rem 1.25rem;
}
.view-wichtige-info-seite .wichtige-infos-header li {
  margin-bottom: 0.25rem;
}

/* Kopfzeilen-Textbereich der "Aktuelles aus den Sitzungen"-Übersichtsseite.
   Wrapper-Look (bg-white, border, shadow, mb) sitzt im Twig als Tailwind-
   Klassen — hier nur die innere Typografie, damit p/a/ul/li konsistent zum
   Rest der Seite aussehen. Akzent grün analog zur Kachelfarbe. */
.view-aktuelles-sitzungen .aktuelles-sitzungen-header,
.view-alle-sitzungen-seite .aktuelles-sitzungen-header,
.view-aktuelles-marktgemeinde .aktuelles-sitzungen-header {
  color: #171a17;
  font-size: 1rem;
  line-height: 1.6;
}
.view-aktuelles-sitzungen .aktuelles-sitzungen-header > *:first-child,
.view-alle-sitzungen-seite .aktuelles-sitzungen-header > *:first-child,
.view-aktuelles-marktgemeinde .aktuelles-sitzungen-header > *:first-child {
  margin-top: 0;
}
.view-aktuelles-sitzungen .aktuelles-sitzungen-header > *:last-child,
.view-alle-sitzungen-seite .aktuelles-sitzungen-header > *:last-child,
.view-aktuelles-marktgemeinde .aktuelles-sitzungen-header > *:last-child {
  margin-bottom: 0;
}
.view-aktuelles-sitzungen .aktuelles-sitzungen-header p,
.view-alle-sitzungen-seite .aktuelles-sitzungen-header p,
.view-aktuelles-marktgemeinde .aktuelles-sitzungen-header p {
  margin: 0 0 0.75rem;
}
.view-aktuelles-sitzungen .aktuelles-sitzungen-header p:last-child,
.view-alle-sitzungen-seite .aktuelles-sitzungen-header p:last-child,
.view-aktuelles-marktgemeinde .aktuelles-sitzungen-header p:last-child {
  margin-bottom: 0;
}
.view-aktuelles-sitzungen .aktuelles-sitzungen-header a,
.view-alle-sitzungen-seite .aktuelles-sitzungen-header a,
.view-aktuelles-marktgemeinde .aktuelles-sitzungen-header a {
  color: #3a8a3f;
  text-decoration: underline;
}
.view-aktuelles-sitzungen .aktuelles-sitzungen-header a:hover,
.view-alle-sitzungen-seite .aktuelles-sitzungen-header a:hover,
.view-aktuelles-marktgemeinde .aktuelles-sitzungen-header a:hover {
  color: #216a2a;
}
.view-aktuelles-sitzungen .aktuelles-sitzungen-header ul, .view-aktuelles-sitzungen .aktuelles-sitzungen-header ol,
.view-alle-sitzungen-seite .aktuelles-sitzungen-header ul,
.view-alle-sitzungen-seite .aktuelles-sitzungen-header ol,
.view-aktuelles-marktgemeinde .aktuelles-sitzungen-header ul,
.view-aktuelles-marktgemeinde .aktuelles-sitzungen-header ol {
  margin: 0 0 0.75rem 1.25rem;
}
.view-aktuelles-sitzungen .aktuelles-sitzungen-header li,
.view-alle-sitzungen-seite .aktuelles-sitzungen-header li,
.view-aktuelles-marktgemeinde .aktuelles-sitzungen-header li {
  margin-bottom: 0.25rem;
}

/* Startseiten-spezifische Ergänzungen: maximal 4 Kacheln + "Alle …"-Button,
   der auf die Übersichtsseite verlinkt. Auf der Übersichtsseite selbst
   werden alle Ergebnisse (mit Pager) angezeigt, deshalb keine Limitierung. */
.view-wichtige-infos .bekanntmachungen-start-tiles .views-row:nth-child(n+5) {
  display: none;
}
.view-wichtige-infos .bekanntmachungen-start-more__btn {
  display: inline-block;
  background-color: #f2c025;
  color: #171a17;
  padding: 0.6rem 1.25rem;
  font-weight: 600;
  text-decoration: none;
  -webkit-transition: background-color 0.15s ease;
  transition: background-color 0.15s ease;
}
.view-wichtige-infos .bekanntmachungen-start-more__btn:hover {
  background-color: #e1ad0d;
  color: #171a17;
}

/* Startseiten-Kacheln mit hellem Hintergrund — gleiches Kachel-Layout wie die
   amtlichen Bekanntmachungen, aber mit hellem Hintergrund und dunklem Text
   (weißer Text auf hellem BG hätte zu wenig Kontrast, WCAG). Pfeil in Primary-
   Grün als Akzent. Standard-Hintergrund ist Primary-Light; einzelne Views mit
   abweichendem Hintergrund werden weiter unten überschrieben. */
/* Startseiten-Limit: max. 4 Kacheln. Gilt NICHT für die Übersichtsseite
   ".view-alle-sitzungen-seite", die alle Ergebnisse mit Pager zeigen soll. */
.view-aktuelles-sitzungen .bekanntmachungen-start-tiles .views-row:nth-child(n+5) {
  display: none;
}

.view-aktuelles-sitzungen .views-row,
.view-alle-sitzungen-seite .views-row,
.view-termine-sitzungen .views-row,
.view-neues-aus-der-marktgemeinde .views-row,
.view-aktuelles-marktgemeinde .views-row {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  background-color: #e8f2e8;
  color: #171a17;
  border-radius: 0;
  padding: 1.25rem 1.25rem 4rem 1.25rem;
  text-align: left;
  -webkit-transition: background-color 0.15s ease;
  transition: background-color 0.15s ease;
  /* Siehe Kommentar im .view-amtliche-bekanntmachungen-Block. */
}
.view-aktuelles-sitzungen .views-row .views-field-title,
.view-alle-sitzungen-seite .views-row .views-field-title,
.view-termine-sitzungen .views-row .views-field-title,
.view-neues-aus-der-marktgemeinde .views-row .views-field-title,
.view-aktuelles-marktgemeinde .views-row .views-field-title {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
}
.view-aktuelles-sitzungen .views-row::after,
.view-alle-sitzungen-seite .views-row::after,
.view-termine-sitzungen .views-row::after,
.view-neues-aus-der-marktgemeinde .views-row::after,
.view-aktuelles-marktgemeinde .views-row::after {
  content: "→";
  position: absolute;
  right: 1rem;
  bottom: 1rem;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 9999px;
  border: 2px solid #3a8a3f;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  font-size: 1.15rem;
  line-height: 1;
  color: #3a8a3f;
  pointer-events: none;
}
.view-aktuelles-sitzungen .views-row:hover,
.view-alle-sitzungen-seite .views-row:hover,
.view-termine-sitzungen .views-row:hover,
.view-neues-aus-der-marktgemeinde .views-row:hover,
.view-aktuelles-marktgemeinde .views-row:hover {
  background-color: #d8e9d8;
}
.view-aktuelles-sitzungen .views-row, .view-aktuelles-sitzungen .views-row a, .view-aktuelles-sitzungen .views-row .views-field-title,
.view-alle-sitzungen-seite .views-row,
.view-alle-sitzungen-seite .views-row a,
.view-alle-sitzungen-seite .views-row .views-field-title,
.view-termine-sitzungen .views-row,
.view-termine-sitzungen .views-row a,
.view-termine-sitzungen .views-row .views-field-title,
.view-neues-aus-der-marktgemeinde .views-row,
.view-neues-aus-der-marktgemeinde .views-row a,
.view-neues-aus-der-marktgemeinde .views-row .views-field-title,
.view-aktuelles-marktgemeinde .views-row,
.view-aktuelles-marktgemeinde .views-row a,
.view-aktuelles-marktgemeinde .views-row .views-field-title {
  color: #171a17;
}
.view-aktuelles-sitzungen .views-row .views-field-title,
.view-alle-sitzungen-seite .views-row .views-field-title,
.view-termine-sitzungen .views-row .views-field-title,
.view-neues-aus-der-marktgemeinde .views-row .views-field-title,
.view-aktuelles-marktgemeinde .views-row .views-field-title {
  border-bottom: none;
}
.view-aktuelles-sitzungen .views-row a,
.view-alle-sitzungen-seite .views-row a,
.view-termine-sitzungen .views-row a,
.view-neues-aus-der-marktgemeinde .views-row a,
.view-aktuelles-marktgemeinde .views-row a {
  text-decoration: none;
}
.view-aktuelles-sitzungen .views-row a::after,
.view-alle-sitzungen-seite .views-row a::after,
.view-termine-sitzungen .views-row a::after,
.view-neues-aus-der-marktgemeinde .views-row a::after,
.view-aktuelles-marktgemeinde .views-row a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}
.view-aktuelles-sitzungen .bekanntmachungen-start-more__btn,
.view-alle-sitzungen-seite .bekanntmachungen-start-more__btn,
.view-termine-sitzungen .bekanntmachungen-start-more__btn,
.view-neues-aus-der-marktgemeinde .bekanntmachungen-start-more__btn,
.view-aktuelles-marktgemeinde .bekanntmachungen-start-more__btn {
  display: inline-block;
  background-color: #e8f2e8;
  color: #171a17;
  padding: 0.6rem 1.25rem;
  font-weight: 600;
  text-decoration: none;
  -webkit-transition: background-color 0.15s ease;
  transition: background-color 0.15s ease;
}
.view-aktuelles-sitzungen .bekanntmachungen-start-more__btn:hover,
.view-alle-sitzungen-seite .bekanntmachungen-start-more__btn:hover,
.view-termine-sitzungen .bekanntmachungen-start-more__btn:hover,
.view-neues-aus-der-marktgemeinde .bekanntmachungen-start-more__btn:hover,
.view-aktuelles-marktgemeinde .bekanntmachungen-start-more__btn:hover {
  background-color: #d8e9d8;
  color: #171a17;
}

/* Overrides für "Neues aus der Marktgemeinde" — Slate-50 statt Primary-Light
   als Hintergrund. Layout, Text- und Pfeilfarbe erbt aus dem gemeinsamen
   Block darüber. */
.view-neues-aus-der-marktgemeinde .views-row,
.view-aktuelles-marktgemeinde .views-row {
  background-color: #f8fafc;
}
.view-neues-aus-der-marktgemeinde .views-row:hover,
.view-aktuelles-marktgemeinde .views-row:hover {
  background-color: #e6edf4;
}
.view-neues-aus-der-marktgemeinde .bekanntmachungen-start-more__btn,
.view-aktuelles-marktgemeinde .bekanntmachungen-start-more__btn {
  background-color: #f8fafc;
}
.view-neues-aus-der-marktgemeinde .bekanntmachungen-start-more__btn:hover,
.view-aktuelles-marktgemeinde .bekanntmachungen-start-more__btn:hover {
  background-color: #e6edf4;
}

.region h2 {
  font-size: 1.3rem;
  color: #3a8a3f;
  margin-bottom: 2rem;
  font-weight: 600;
}

.views-field-field-beschluss-vom {
  padding: 0.125rem;
  color: #3a8a3f;
  background-color: white;
  display: inline-block;
  -ms-flex-item-align: start;
      align-self: flex-start; /* verhindert das Vollbreite-Strecken im Flex-Row-Container der Kacheln */
  font-size: 0.725rem;
}

/* Topbar-Zeilen (Telefon + Öffnungszeiten in page/page--front): Drupal packt
   pro Region eine Kaskade aus <div class="region">, <div class="block">,
   <div class="clearfix … field__item"> und <p> um den eigentlichen Text.
   Diese Wrapper würden im Flex-Container Zeilenumbrüche + full-width-Boxen
   erzeugen und Icons + Text vertikal auseinanderreißen. display:contents
   löst die Wrapper-Boxen im Layout auf; Inhalt und Vererbung bleiben. */
.topbar-line .region,
.topbar-line .block,
.topbar-line .field,
.topbar-line .field__item,
.topbar-line p {
  display: contents;
}
.topbar-line a {
  color: inherit;
}

.views-row .views-field-title a {
  display: block;
  padding: 0.325rem 0;
  font-weight: 600;
  font-size: 1.3rem;
}

header .text-formatted a:hover,
.view-title-area a {
  color: #3a8a3f;
}

.text-formatted h2,
.text-formatted p,
.text-formatted br,
.text-formatted h3,
.text-formatted h4,
.text-formatted h5,
.text-formatted hr {
  margin-bottom: 1.2rem;
}

.text-formatted p > a {
  color: #3a8a3f;
}

.text-formatted p > a:hover {
  border-bottom: 1px dashed;
}

footer ul.menu {
  margin-left: 0rem;
}

footer .navigation {
  margin-bottom: 2rem;
}

footer li.menu-item a {
  color: #3a8a3f;
}

footer li.menu-item:hover a {
  color: #3a8a3f;
}

/* ============================================================
   Mobile-Navigation (Hamburger + Off-Canvas-Drawer + Accordion)
   ------------------------------------------------------------
   Markup: templates/misc/mobile-nav.html.twig
   JS:     dist/mobile-nav.js
   Daten:  $mobile_main_menu aus fleiwindcss_preprocess_page()
   Nur <md sichtbar — Desktop bleibt beim Mega-Menü (siehe oben).
   ============================================================ */
/* Sichtbarkeits-Breakpoint: auf >=md werden alle Mobile-Nav-Elemente
   komplett ausgeblendet. Wir nutzen bewusst SCSS statt Tailwind-
   Utilities (md:hidden), damit die Mobile-Nav auch funktioniert,
   ohne dass Tailwind nach jedem Twig-Edit neu kompiliert werden muss. */
@media (min-width: 768px) {
  .mobile-nav-toggle,
  .mobile-nav-backdrop,
  .mobile-nav-drawer {
    display: none !important;
  }
}
/* Hamburger-Button im grünen Nav-Bar. Nutzt die bestehenden
   bg-main-color-Farben, kein zusätzlicher Hintergrund. */
.mobile-nav-toggle {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  color: #fff;
  background: transparent;
  border: 0;
  cursor: pointer;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: 0.9rem;
}
.mobile-nav-toggle:hover, .mobile-nav-toggle:focus-visible {
  background-color: #216a2a;
  outline: 0;
}
.mobile-nav-toggle svg {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
}

/* Backdrop + Drawer liegen im globalen Fluss; auf Desktop via
   .md:hidden ausgeblendet. Beim Scrollen des Dokuments darunter
   setzt .mobile-nav-locked den <html>-Overflow. */
.mobile-nav-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  -webkit-transition: opacity 0.2s ease;
  transition: opacity 0.2s ease;
  z-index: 60;
}
.mobile-nav-backdrop.is-open {
  opacity: 1;
}

.mobile-nav-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(88vw, 360px);
  background: #fff;
  color: #171a17;
  z-index: 61;
  -webkit-box-shadow: -20px 0 40px rgba(0, 0, 0, 0.2);
          box-shadow: -20px 0 40px rgba(0, 0, 0, 0.2);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-transform: translateX(100%);
          transform: translateX(100%);
  -webkit-transition: -webkit-transform 0.25s ease;
  transition: -webkit-transform 0.25s ease;
  transition: transform 0.25s ease;
  transition: transform 0.25s ease, -webkit-transform 0.25s ease;
  overflow: hidden;
}
.mobile-nav-drawer.is-open {
  -webkit-transform: translateX(0);
          transform: translateX(0);
}

.mobile-nav-drawer__header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  padding: 1rem 1.25rem;
  background: #3a8a3f;
  color: #fff;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
}

.mobile-nav-drawer__title {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.9rem;
}

.mobile-nav-drawer__close {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  background: transparent;
  color: #fff;
  border: 0;
  border-radius: 4px;
  cursor: pointer;
}
.mobile-nav-drawer__close:hover, .mobile-nav-drawer__close:focus-visible {
  background-color: #216a2a;
  outline: 0;
}

html.mobile-nav-locked {
  overflow: hidden;
}

/* Vollständig aufgeklappte Baum-Navigation im Drawer. Alle Ebenen
   sind sofort sichtbar — kein Accordion, kein Klick nötig, um ein
   Untermenü zu öffnen. */
.mobile-nav {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
  overflow-y: auto;
  padding: 0.5rem 0;
}

.mobile-nav__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.mobile-nav__item {
  border-bottom: 1px solid #e2e7e3;
}
.mobile-nav__item:last-child {
  border-bottom: 0;
}

/* Zeile = Link + dekorativer Pfeil nebeneinander. */
.mobile-nav__row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.mobile-nav__link {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
  display: block;
  padding: 0.9rem 1.25rem;
  color: #171a17;
  text-decoration: none;
  font-weight: 500;
}
.mobile-nav__link:hover, .mobile-nav__link:focus-visible {
  background-color: rgba(0, 0, 0, 0.04);
  color: #216a2a;
  outline: 0;
}

.mobile-nav__item.is-active-trail > .mobile-nav__row > .mobile-nav__link {
  color: #3a8a3f;
  font-weight: 600;
}

/* Pfeil-Button — klappt das Untermenü des <li> auf/zu. Separates
   Klick-Ziel vom Link, damit die Übersichtsseite trotzdem direkt
   erreichbar ist. */
.mobile-nav__toggle {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 3rem;
  -ms-flex-item-align: stretch;
      -ms-grid-row-align: stretch;
      align-self: stretch;
  background: transparent;
  color: #3a8a3f;
  border: 0;
  border-left: 1px solid #e2e7e3;
  cursor: pointer;
}
.mobile-nav__toggle:hover, .mobile-nav__toggle:focus-visible {
  background-color: rgba(0, 0, 0, 0.04);
  outline: 0;
}
.mobile-nav__toggle svg {
  -webkit-transition: -webkit-transform 0.2s ease;
  transition: -webkit-transform 0.2s ease;
  transition: transform 0.2s ease;
  transition: transform 0.2s ease, -webkit-transform 0.2s ease;
}

.mobile-nav__item.is-open > .mobile-nav__row > .mobile-nav__toggle svg {
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
}

/* Untermenü ist standardmäßig zu — grid-template-rows-Trick für
   smoothe height-Animation ohne JS-Höhenmessung. */
.mobile-nav__submenu {
  display: -ms-grid;
  display: grid;
  -ms-grid-rows: 0fr;
  grid-template-rows: 0fr;
  -webkit-transition: grid-template-rows 0.25s ease;
  transition: grid-template-rows 0.25s ease;
  transition: grid-template-rows 0.25s ease, -ms-grid-rows 0.25s ease;
  background: #f6f8f6;
}
.mobile-nav__submenu > .mobile-nav__list {
  overflow: hidden;
}

.mobile-nav__item.is-open > .mobile-nav__submenu {
  -ms-grid-rows: 1fr;
  grid-template-rows: 1fr;
}

/* Verschachtelte Ebenen bekommen zunehmend Padding, damit die
   Hierarchie optisch lesbar bleibt. */
.mobile-nav__list--l1 .mobile-nav__link {
  padding-left: 2rem;
  font-weight: 500;
}

.mobile-nav__list--l2 .mobile-nav__link {
  padding-left: 2.75rem;
  font-weight: 400;
  font-size: 0.95rem;
}

.mobile-nav__list--l2 {
  background: #fff;
}

/* Download-Feld "field_download" — rendert die PDF-Links als Karten-Raster
   mit Button-Optik und einheitlichem PDF-Icon. Das zugehörige Template
   liegt unter templates/field/field--field-download.html.twig. Zielt NUR
   auf dieses Feld, damit andere Datei-Felder (Audio-, Bild-Felder,
   generische file-link-Ausgaben) unverändert bleiben. */
.field--name-field-download {
  /* Zellen und Zwischen-Wrapper auf volle Höhe strecken, damit alle Buttons
     einer Reihe exakt gleich hoch sind — auch wenn ein Titel umbricht. */
  /* file-link.html.twig gibt
     <span class="file file--application-pdf"><a>...</a></span> aus.
     Das PNG-Icon aus css/components/file.css hier ausblenden, Span als
     reiner Button-Wrapper, der die Zelle komplett füllt. */
}
.field--name-field-download .field__label {
  font-size: 1.25rem;
  font-weight: 600;
  color: #171a17;
  margin-bottom: 0.75rem;
}
.field--name-field-download .field__items {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: minmax(0, 1fr);
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 0.75rem;
}
@media (min-width: 640px) {
  .field--name-field-download .field__items {
    -ms-grid-columns: (minmax(0, 1fr))[2];
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 1024px) {
  .field--name-field-download .field__items {
    -ms-grid-columns: (minmax(0, 1fr))[3];
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.field--name-field-download .field__item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: 100%;
}
.field--name-field-download .file {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  min-height: 0;
  background: none;
}
.field--name-field-download .field__item a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.75rem;
  width: 100%;
  height: 100%;
  padding: 0.875rem 1rem;
  background-color: #fff;
  border: 1px solid #e2e7e3;
  border-radius: 0.5rem;
  color: #171a17;
  text-decoration: none;
  font-weight: 500;
  line-height: 1.35;
  -webkit-transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease, -webkit-box-shadow 0.15s ease;
  transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease, -webkit-box-shadow 0.15s ease;
  transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
  transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, -webkit-box-shadow 0.15s ease;
  /* PDF-Icon als Inline-SVG — rot, dokumentartig, mit "PDF"-Label.
     Als data-URI, damit kein Extra-Request und keine Asset-Pipeline. */
  /* Dateiname-Text darf umbrechen, soll aber die Button-Breite füllen. */
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  word-break: break-word;
}
.field--name-field-download .field__item a::before {
  content: "";
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  width: 1.5rem;
  height: 1.75rem;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 28' fill='none'><path d='M4 2h11l5 5v17a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2z' fill='%23ffffff' stroke='%23b91c1c' stroke-width='1.5'/><path d='M15 2v5h5' stroke='%23b91c1c' stroke-width='1.5' fill='none'/><text x='5.5' y='21' font-family='Arial,Helvetica,sans-serif' font-size='6' font-weight='700' fill='%23b91c1c'>PDF</text></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
.field--name-field-download .field__item a:hover, .field--name-field-download .field__item a:focus-visible {
  border-color: #3a8a3f;
  background-color: #e8f2e8;
  color: #216a2a;
  outline: 0;
  -webkit-box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
          box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}