/* bfrw-mobil.css — nur Mobil-Darstellung (bis 992px). Desktop bleibt unverändert.
   Einbau: NACH css/responsive.css einbinden. */

/* Zusatz-Elemente (Anrufbalken) am Desktop ausblenden */
@media (min-width: 993px) {
  .bfrw-mobil-only { display: none !important; }
}

@media (max-width: 992px) {

  /* ---------- Schrift ---------- */
  body, #main, #right, #footer, #header,
  #main h1, #main h2, #main h3, #main p, #main li,
  #right h3, #right h4, #right p, #right li, #right td,
  .bfrw-callbar a {
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  }

  /* ---------- Header: ohne Hintergrundbild, sticky, Logo 180px ---------- */
  #header {
    position: sticky; top: 0; z-index: 998;
    min-height: 0;
    background-image: none !important;
    background-color: #fff;
    border-bottom: 2px solid rgba(32, 30, 29, 0.35);
  }
  #header .inside { background-image: none !important; }
  #header #logo_links img { max-width: 180px !important; height: auto; }
  #hamburger { top: 6px; }

  /* ---------- Grundraster ---------- */
  body { padding-bottom: 64px; }
  #main .inside { padding: 0 18px 24px; }
  #right .inside { padding: 0 18px 8px; }

  /* ---------- Typografie ---------- */
  #main h1 {
    font-size: 30px; line-height: 1.15; letter-spacing: -0.02em;
    margin: 18px 0 12px;
  }
  #main h2, #main h2.drei { font-size: 22px; line-height: 1.15; margin: 0 0 10px; }
  #main p { font-size: 15.5px; line-height: 1.55; margin: 0 0 12px; }
  #main p.zwei { font-weight: 600; }

  /* ---------- Abschnitte trennen ---------- */
  #main .mod_article > .ce_text + .ce_text {
    margin-top: 10px; padding-top: 0;
    border-top: 0;
  }
  #main .mod_article > .ce_text.first { margin-bottom: 0; }
  #main .mod_article > .ce_text.first p:last-child { margin-bottom: 2px; }

  /* ---------- Bilder: randlos, gleichmäßig hoch ---------- */
  #main .ce_text figure.image_container,
  #main .ce_text figure.image_container.float_right,
  #main .ce_text figure.image_container.float_left {
    float: none !important;
    width: calc(100% + 36px);
    margin: 0 -18px 16px !important;
  }
  #main .ce_text figure.image_container img {
    display: block;
    width: 100% !important; max-width: none !important;
    height: 210px !important;
    object-fit: cover;
  }

  /* ---------- Listen ----------
     Geaendert 07.09.2026: Der Entwurf setzte alle Aufzaehlungen als abgesetzte
     Zeilen mit Trennstrichen; das stoerte beim Lesen. **Alle** Listen werden
     jetzt einheitlich klassisch gesetzt — eingerueckt mit Aufzaehlungszeichen
     wie am Desktop, nur in mobiler Schriftgroesse (Operator-Entscheidung:
     Einheitlichkeit geht vor der groesseren Tippflaeche bei Link-Listen).
     Links bleiben rot und halbfett und damit im Textfluss gut erkennbar. */
  #main .mod_article ul,
  #main .mod_article ul.square {
    list-style: square;
    margin: 0 0 12px; padding: 0 0 0 22px;
  }
  #main .mod_article ul li,
  #main .mod_article ul.square li {
    list-style: square;
    margin: 0; padding: 4px 0;
    border: 0;
    font-size: 15.5px; line-height: 1.5;
    background: none;
  }
  #main .mod_article ul li a {
    display: inline-block; padding: 4px 0;
    font-weight: 600; color: #c30000;
  }


  /* ---------- Schlussabsatz als roter Block ---------- */
  #main .mod_article > .ce_text.last {
    margin-top: 20px !important; padding-top: 0 !important;
    border-top: 0 !important;
  }
  #main .mod_article > .ce_text.last p.zwei {
    font-size: 20px; line-height: 1.25; font-weight: 700; margin-bottom: 4px;
  }

  /* ---------- Seitenspalte: Adresse / Werkstatt / Öffnungszeiten ---------- */
  #right {
    margin-top: 24px !important;
    background: #201e1d; color: #fff;
  }
  #right .inside { padding: 4px 18px 22px; }
  #right, #right .inside, #right .ce_text, #right table,
  #right table tr, #right table td, #right table th {
    border: 0 !important;
  }
  #right .ce_text {
    padding-top: 18px; margin-top: 0;
    color: #fff;
  }
  #right h3, #right h4, #right p, #right span, #right td {
    color: #fff !important;
  }
  #right h3 { font-size: 19px; margin: 0 0 8px; }
  #right h4 { font-size: 15px; margin: 0; }
  #right ul { list-style: none; margin: 0; padding: 0; }
  #right ul li {
    list-style: none; margin: 0; padding: 3px 0;
    font-size: 15px; line-height: 1.5; color: #fff;
    border: 0; background: none;
  }
  #right ul li a { color: #fff; font-weight: 600; text-decoration: underline; }
  #right table { width: 100% !important; height: auto !important; }
  #right table td { padding: 6px 0; font-size: 15px; vertical-align: top; }
  #right table td:first-child { width: 84px; font-weight: 600; }

  /* Kein Abstand zwischen Adressblock und Copyright */
  #container { margin-bottom: 0 !important; padding-bottom: 0 !important; }
  #footer {
    margin-top: 0 !important; padding-top: 0 !important;
    background: #201e1d; border: 0 !important;
  }
  #footer .inside {
    margin-top: 0 !important;
    padding: 0 18px 34px !important;
    background: #201e1d; border: 0 !important;
  }
  #footer p.copy, #footer p.copy a {
    margin: 0 !important; color: #fff !important;
  }
  /* responsive.css setzt mobil `#footer p { background: #c30000 }` — der rote
     Streifen soll im dunklen Fussbereich aufgehen. */
  #footer p.copy {
    background: #201e1d !important;
    background-image: none !important;
    padding: 12px 0 0 !important;
  }

  /* ---------- Fester Anrufbalken ---------- */
  .bfrw-callbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 999;
    display: grid; grid-template-columns: 1fr 1fr 1fr;
    gap: 1px; background: rgba(255, 255, 255, 0.25);
    border-top: 2px solid #201e1d;
  }
  .bfrw-callbar a {
    display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 3px;
    min-height: 58px; padding: 6px 6px 8px;
    background: #201e1d; color: #fff;
    font-size: 11px; font-weight: 600; line-height: 1.2;
    letter-spacing: 0.02em; text-decoration: none;
  }
  .bfrw-callbar a svg { width: 22px; height: 22px; display: block; }
  .bfrw-callbar a.bfrw-call-fzb { background: #c30000; }
  .bfrw-callbar a:active { background: #8c0000; }
  .bfrw-callbar a:focus-visible { outline: 2px solid #fff; outline-offset: -4px; }

  /* ---------- Telefon-Hinweis (optional, s. Snippet) ---------- */
  .bfrw-tel-hinweis {
    display: block; margin: 14px 0 0;
    padding: 16px 18px 18px;
    background: #c30000; color: #fff; text-decoration: none;
  }
  .bfrw-tel-hinweis .bfrw-tel-label {
    display: block; font-size: 11px; letter-spacing: 0.16em;
    text-transform: uppercase; margin-bottom: 6px;
  }
  .bfrw-tel-hinweis .bfrw-tel-nummer {
    display: block; font-size: 26px; font-weight: 800; line-height: 1;
  }
}

/* ---------------------------------------------------------------
   Ergaenzung Einbau 2026-09-07:
   Der Chat-Button (css/chat.css) liegt mobil fixed unten rechts und
   wuerde den rechten Knopf des Anrufbalkens verdecken. Er wird um die
   Balkenhoehe nach oben gesetzt; das Chat-Fenster endet oberhalb des
   Balkens. Aenderung nur bis 992px, Desktop bleibt unberuehrt.
   --------------------------------------------------------------- */
@media (max-width: 992px) {
  #bfr-chat-btn { bottom: 76px !important; }
}
@media (max-width: 480px) {
  #bfr-chat-window {
    bottom: 64px !important;
    max-height: calc(95vh - 64px) !important;
    height: calc(95vh - 64px) !important;
  }
  #bfr-chat-btn { bottom: 68px !important; right: 16px !important; }
}

/* ---------------------------------------------------------------
   Ergaenzung Einbau 2026-09-07 (2): Spezifitaets-Korrekturen.
   Das Contao-Stylesheet setzt seitenspezifische Innenabstaende, z. B.
   `.startseite #main .inside{padding-right:8.22%}` und
   `.galerie #main .inside{padding-left:30px}`. Diese Selektoren sind
   spezifischer als `#main .inside`, deshalb blieben die randlosen
   Bilder rechts 14 px schmal. Nur bis 992px, Desktop unberuehrt.
   --------------------------------------------------------------- */
@media (max-width: 992px) {
  #main .inside { padding: 0 18px 24px !important; }
  #right .inside { padding: 4px 18px 22px !important; }
  #main .inside,
  .startseite #main .inside,
  .galerie #main .inside,
  .impressum #main .inside,
  .sitemap #main .inside { margin-left: 0 !important; margin-right: 0 !important; }

  /* Balkenhoehe ist 74 px (58 px Mindesthoehe + Innenabstand + Rahmen) */
  body { padding-bottom: 78px; }
}
@media (max-width: 992px) {
  #bfr-chat-btn { bottom: 88px !important; }
}
@media (max-width: 480px) {
  #bfr-chat-btn { bottom: 88px !important; right: 16px !important; }
  #bfr-chat-window {
    bottom: 74px !important;
    max-height: calc(95vh - 74px) !important;
    height: calc(95vh - 74px) !important;
  }
}

/* ---------------------------------------------------------------
   Ergaenzung 2026-09-07 (3): Chatbot als viertes Feld im Anrufbalken.
   Der schwebende Knopf aus css/chat.css entfaellt mobil; er verdeckte
   dauerhaft Seiteninhalt. Ausgeloest wird der Chat ueber js/mobil-bar.js,
   chat.js selbst bleibt unveraendert. Desktop unberuehrt.
   --------------------------------------------------------------- */
@media (max-width: 992px) {
  .bfrw-callbar { grid-template-columns: 1fr 1fr 1fr 1fr; }

  /* Der <button> muss die Knopf-Grundstile des Browsers ablegen,
     damit er sich wie die <a>-Felder verhaelt. */
  .bfrw-callbar button {
    -webkit-appearance: none; appearance: none;
    border: 0; margin: 0; cursor: pointer;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 3px;
    min-height: 58px; padding: 6px 6px 8px;
    background: #201e1d; color: #fff;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    font-size: 11px; font-weight: 600; line-height: 1.2;
    letter-spacing: 0.02em; text-decoration: none;
  }
  /* Ohne feste Masse nimmt ein SVG seine Standardgroesse (300x150) an und
     zieht die Leiste auf; die a-Regel weiter oben fasst den button nicht. */
  .bfrw-callbar button svg { width: 22px; height: 22px; display: block; }
  .bfrw-callbar button:active { background: #8c0000; }
  .bfrw-callbar button:focus-visible { outline: 2px solid #fff; outline-offset: -4px; }
  .bfrw-callbar #bfrw-callbar-chat.ist-offen { background: #3a3735; }

  /* Schwebenden Chat-Knopf mobil abschalten — ersetzt durch das Leistenfeld */
  #bfr-chat-btn { display: none !important; }
}

/* Bei sehr schmalen Geraeten (<= 360 px) reicht der Platz fuer die
   ausgeschriebene Rufnummer nicht mehr; dort etwas enger setzen. */
@media (max-width: 360px) {
  .bfrw-callbar a, .bfrw-callbar button {
    font-size: 10px; padding: 6px 2px 8px; letter-spacing: 0;
  }
  .bfrw-callbar a svg, .bfrw-callbar button svg { width: 20px; height: 20px; }
}

/* Auf den Galerieseiten gilt ein anderes box-sizing, dadurch war die Leiste
   dort 60 statt 74 px hoch. Masse deshalb kontextunabhaengig festlegen. */
@media (max-width: 992px) {
  .bfrw-callbar a, .bfrw-callbar button {
    box-sizing: border-box; min-height: 72px;
  }
}

/* ---------------------------------------------------------------
   Ergaenzung 2026-09-07 (4): Farbliche Hervorhebung auf den Chat.
   Operator-Entscheidung: Der Hinweis-Banner traegt wechselnde Meldungen
   (z. B. Brueckentage) und bewirbt den Chatbot nicht verlaesslich.
   Deshalb liegt das rote Feld jetzt auf „KI-Chat" statt auf dem Telefon.
   Die Rufnummer bleibt ausgeschrieben und dadurch weiter gut auffindbar.
   --------------------------------------------------------------- */
@media (max-width: 992px) {
  .bfrw-callbar a.bfrw-call-fzb { background: #201e1d; }
  .bfrw-callbar #bfrw-callbar-chat { background: #c30000; }
  .bfrw-callbar #bfrw-callbar-chat.ist-offen { background: #8c0000; }
  .bfrw-callbar a.bfrw-call-fzb:active { background: #3a3735; }
}

/* ---------------------------------------------------------------
   Ergaenzung 2026-09-07 (5): Hinweis-Banner ohne Vorabstand.
   `includes/header.php` gibt den Banner aus data/hinweis.json mit
   Inline-Style aus (`margin:1.5em 0 0`). Der Banner liegt in
   `#header .inside` und macht den klebenden Kopfbereich dadurch mobil
   unnoetig hoch. Inline-Styles lassen sich nur mit !important
   ueberschreiben; der Selektor trifft genau dieses eine Element
   (geprueft: einziges div mit style-Attribut in #header .inside).
   header.php selbst bleibt unveraendert. Desktop unberuehrt.
   --------------------------------------------------------------- */
@media (max-width: 992px) {
  /* Kopf-Fassung des Banners mobil ausblenden — sie wird durch die
     mitscrollende Fassung hinter </header> ersetzt (includes/mobil-hinweis.php). */
  #header .inside > div[style] { display: none !important; }

  .bfrw-hinweis-mobil {
    margin: 0; padding: 0.75em 18px;
    background-color: #c30000; color: #fff;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    font-size: 14px; line-height: 1.4;
  }
}

/* ---------------------------------------------------------------
   Ergaenzung 2026-09-07 (6): Flaeche unter dem Inhalt.
   `body` traegt aus dem Contao-Stylesheet `#f3f3f3`. Da `body` mobil
   78 px Innenabstand nach unten hat (Platz fuer den Anrufbalken), blitzte
   dieser helle Streifen zwischen dem dunklen Adress-/Fussbereich und dem
   Balken durch — und ebenso beim Ueberscrollen. `#wrapper` bleibt weiss,
   sichtbar ist `body` mobil nur unterhalb des Inhalts.
   --------------------------------------------------------------- */
@media (max-width: 992px) {
  body { background-color: #201e1d; }
}

/* ---------------------------------------------------------------
   Ergaenzung 2026-09-07 (7): Aufklappbares Werkstatt-Untermenue.
   Der Menuepunkt „Kfz-Werkstatt" behaelt seinen Link zur Uebersichtsseite;
   der Pfeil rechts daneben ist ein eigener Schalter, der die zehn
   Werkstatt-Seiten (TÜV bis Unfallinstandsetzung) ein- und ausblendet.
   Markup in includes/header.php, Bedienung in js/mobil-bar.js.
   Am Desktop sind Schalter und Untermenue ueber .bfrw-mobil-only aus.
   --------------------------------------------------------------- */
@media (max-width: 992px) {
  #header nav.mod_navigation ul.level_1 li { position: relative; }

  .bfrw-untermenue-schalter {
    position: absolute; top: 0; right: 0;
    display: flex; align-items: center; justify-content: center;
    width: 56px; height: 45px;
    -webkit-appearance: none; appearance: none;
    background: none; border: 0; padding: 0;
    color: #fff; cursor: pointer;
  }
  .bfrw-untermenue-schalter svg {
    width: 20px; height: 20px;
    transition: transform .18s ease;
  }
  .bfrw-untermenue-schalter[aria-expanded="true"] svg { transform: rotate(180deg); }
  .bfrw-untermenue-schalter:active { background: rgba(0, 0, 0, .15); }
  .bfrw-untermenue-schalter:focus-visible { outline: 2px solid #fff; outline-offset: -4px; }

  /* Platz fuer den Schalter, damit lange Beschriftungen nicht darunter laufen */
  #header nav.mod_navigation ul.level_1 li:has(> .bfrw-untermenue-schalter) > a,
  #header nav.mod_navigation ul.level_1 li:has(> .bfrw-untermenue-schalter) > span.active {
    padding-right: 60px;
  }

  /* Feste Farbe statt Transparenz: das Contao-Stylesheet faerbt `ul.level_2`
     spezifischer ein (rgb(225,1,27)) und gewann gegen `rgba(0,0,0,.18)`.
     Das Untermenue ist bewusst dunkler als das Hauptmenue (#c30000). */
  #header nav.mod_navigation ul.bfrw-untermenue {
    display: block;
    list-style: none; margin: 0; padding: 0;
    background-color: #a30000;
    border-top: 1px solid rgba(255, 255, 255, .2);
  }
  /* Auf das `hidden`-Attribut allein ist hier kein Verlass: im Bestands-CSS
     gewinnt eine Regel gegen die Browser-Vorgabe `[hidden]{display:none}`,
     das Untermenue stand dadurch mit `display:inline` da — unsichtbar, aber
     421 px Platz belegend, wodurch Impressum/Datenschutz/Sitemap aus der
     Liste gedraengt wurden. Deshalb hier ausdruecklich abgeschaltet. */
  #header nav.mod_navigation ul.bfrw-untermenue[hidden] { display: none !important; }
  ul.bfrw-untermenue li { border-bottom: 1px solid rgba(255, 255, 255, .12); }
  ul.bfrw-untermenue li:last-child { border-bottom: 0; }
  #header nav.mod_navigation ul.bfrw-untermenue li a,
  #header nav.mod_navigation ul.bfrw-untermenue li span.active {
    display: block; padding: 11px 20px 11px 38px;
    color: #fff; text-decoration: none;
    font-size: 14px; font-weight: normal;
  }
  #header nav.mod_navigation ul.bfrw-untermenue li span.active {
    font-weight: 600; background: rgba(0, 0, 0, .12);
  }
}

/* ---------------------------------------------------------------
   Ergaenzung 2026-09-07 (8): Navigation mit eigener Scrollflaeche.
   Die Navigation liegt in `#header`, und der klebt. Ein klebendes Element,
   das hoeher als der Bildschirm ist, laesst sich nicht wegscrollen — mit
   aufgeklapptem Werkstatt-Untermenue war der Kopf 974 px hoch, damit lagen
   die unteren Eintraege (Unfallinstandsetzung, Impressum, Datenschutz,
   Sitemap) dauerhaft ausserhalb bzw. hinter dem Anrufbalken.

   Die geoeffnete Navigation bekommt deshalb eine eigene Scrollflaeche:
   Bildschirmhoehe minus Logo-Streifen (78 px), Anrufbalken (74 px) und 6 px Luft.
   `dvh` beruecksichtigt die ein- und ausfahrende Browserleiste auf dem
   Handy; die `vh`-Zeile davor bleibt als Rueckfall fuer aeltere Browser.
   --------------------------------------------------------------- */
@media (max-width: 992px) {
  #header nav.mod_navigation.nav-open {
    max-height: calc(100vh - 158px);
    max-height: calc(100dvh - 158px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;   /* Seite darunter scrollt nicht mit */
  }
}

/* ---------------------------------------------------------------
   Ergaenzung 2026-09-07 (9): Pfad-Markierung im Menue.
   Steht der Besucher auf einer Werkstatt-Unterseite, wird „Kfz-Werkstatt"
   als zugehoerig markiert — sonst waere mobil nicht erkennbar, in welchem
   Bereich man sich befindet, weil das Untermenue zugeklappt startet.
   Deutlich schwaecher als die Markierung der aktuellen Seite (span.active),
   damit beide unterscheidbar bleiben.
   --------------------------------------------------------------- */
@media (max-width: 992px) {
  #header nav.mod_navigation ul.level_1 li a.trail {
    background-color: rgba(0, 0, 0, .12);
    font-weight: 600;
    box-shadow: inset 4px 0 0 #fff;
  }
}

/* ---------------------------------------------------------------
   Ergaenzung 2026-09-10: Seitenspalte Adresse / Fahrzeugbau /
   Werkstatt / Buchhaltung auf mittleren Breiten.
   Das Contao-Stylesheet laesst die Bloecke floaten (.adresse und
   .postadresse float:left, .open clear:both). Ab ca. 607 px rutschen sie
   dadurch je nach Hoehe versetzt nebeneinander ("verkantet").
   560-679 px: Floats aus, Bloecke sauber untereinander.
   680-992 px: festes Raster, je zwei Bloecke nebeneinander, Oeffnungszeiten
   links darunter. 680 px, damit "E-mail: mail@bfr-wisskirchen.de" in eine
   halbe Spalte passt. Nur #adresse (sidebar-default.php); unter 560 px und
   am Desktop (>= 993 px) unveraendert.
   --------------------------------------------------------------- */
@media (min-width: 560px) and (max-width: 992px) {
  #right #adresse > .ce_text { float: none; clear: none; }
}
@media (min-width: 680px) and (max-width: 992px) {
  #right #adresse {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 16px;
    align-items: start;
  }
  #right #adresse::before,
  #right #adresse::after { display: none; }
}

/* ---------------------------------------------------------------
   Ergaenzung 2026-09-10 (2): Copyright-Zeile im Fuss mobil in 15 px,
   linksbuendig, ohne Sperrung und buendig mit dem Text darueber
   (Footer-Innenabstand 18 px + 18 px = 36 px wie in der Seitenspalte).
   Das Contao-Stylesheet setzt `#footer p` auf 12 px, zentriert und
   letter-spacing 1px; am Desktop (>= 993 px) bleibt das so.
   !important beim Innenabstand, weil die Regel oben ihn ebenso setzt.
   --------------------------------------------------------------- */
@media (max-width: 992px) {
  #footer p.copy {
    font-size: 15px; text-align: left; letter-spacing: normal;
    padding-left: 18px !important; padding-right: 18px !important;
  }
}

/* ---------------------------------------------------------------
   Ergaenzung 2026-09-11: Brotkrumen und Seitenspalten-Menue.
   (1) Die Listen-Regel `#main .mod_article ul li { list-style: square }`
       traf auch die Brotkrumen: vor jedem Eintrag stand ein Kaestchen,
       das zweite rutschte zwischen „GmbH" und „>". Brotkrumen daher ohne
       Aufzaehlungszeichen, ohne Einzug, mit dem Contao-Abstand von 8 px.
   (2) JPM- und Produkt-Seitenspalte bauen ihr Menue als `nav.mod_navigation`
       (Werkstatt: `.open` + `a.kfz`). Die Contao-Farben dort (#827e7e grau,
       aktiv/Pfad #0f0f0f fast schwarz) sind spezifischer als die weissen
       Regeln fuer `#right` und waren auf dem dunklen Grund kaum lesbar.
       Jetzt wie das Werkstatt-Menue: weiss, halbfett, unterstrichen, weisse
       Punktlinie; aktuelle Seite fett ohne Unterstreichung. Die Einrueckung
       der Unterebenen bleibt (zeigt die Gliederung). Nur `nav`, damit der
       Block „Partner Zulieferer" (ebenfalls .mod_navigation) mit seinem
       Logo-Link keine Linie bekommt.
   --------------------------------------------------------------- */
@media (max-width: 992px) {
  #main .mod_article .mod_breadcrumb ul {
    list-style: none; padding-left: 0;
  }
  #main .mod_article .mod_breadcrumb li {
    list-style: none; margin-right: 8px;
  }

  #right nav.mod_navigation {
    border-left: 0;
  }
  #right .mod_navigation h3 {
    font-size: 19px; margin: 0 0 8px; padding: 0 0 6px 18px;
  }
  #right nav.mod_navigation li {
    padding-top: 3px; padding-bottom: 3px;
    font-size: 15px; line-height: 1.5;
  }
  #right nav.mod_navigation li a,
  #right nav.mod_navigation li a.trail,
  #right nav.mod_navigation li a:hover,
  #right nav.mod_navigation li a:focus,
  #right nav.mod_navigation li span.active {
    padding: 8px;
    border-bottom: 1px dotted #fff;
    color: #fff;
    font-size: 15px;
  }
  #right nav.mod_navigation li a,
  #right nav.mod_navigation li a.trail {
    font-weight: 600; text-decoration: underline;
  }
  #right nav.mod_navigation li span.active {
    font-weight: 700; text-decoration: none;
  }
}

/* ---------------------------------------------------------------
   Ergaenzung 2026-09-11 (2): Blaetter-Navigation unter „Aktuelles".
   Contao setzt `.pagination{margin-left:400px}` — mobil lag die Leiste
   damit ganz ausserhalb des Bildschirms, die Meldungsseiten 2 bis 4 waren
   am Handy nicht erreichbar. Dazu griff die Listen-Regel (Kaestchen).
   Mobil jetzt ohne Einzug als umbrechende Reihe von Tippflaechen
   (mind. 44 px), aktuelle Seite rot gefuellt.
   --------------------------------------------------------------- */
@media (max-width: 992px) {
  #main .mod_article .pagination {
    margin: 28px 0 0; padding: 0 0 8px;
  }
  #main .mod_article .pagination p {
    margin: 0 0 10px;
    font-size: 14px; color: #555;
  }
  #main .mod_article .pagination ul {
    display: flex; flex-wrap: wrap; gap: 8px;
    list-style: none; margin: 0; padding: 0;
  }
  #main .mod_article .pagination ul li {
    float: none; list-style: none; margin: 0; padding: 0;
  }
  #main .mod_article .pagination ul li a,
  #main .mod_article .pagination ul li span {
    display: flex; align-items: center; justify-content: center;
    box-sizing: border-box;
    min-width: 44px; min-height: 44px; margin: 0; padding: 0 12px;
    border: 1px solid #c30000; border-radius: 4px;
    font-size: 15.5px; font-weight: 600; line-height: 1;
    text-decoration: none; color: #c30000; background: #fff;
  }
  #main .mod_article .pagination ul li span.current {
    color: #fff; background: #c30000;
  }
}