/* Bootstrap-5-Era-Overrides fuer den Marken-Look (ergaenzt das alte custom.css,
   das teils BS4-Selektoren nutzt). */

:root {
    --bs-primary: #680001;
    --bs-primary-rgb: 104, 0, 1;
    --bs-link-color: #680001;
    --bs-link-hover-color: #85180d;
}

/* Ueberschriften ausgewogen umbrechen (text-wrap: balance) — verteilt mehrzeilige
   Ueberschriften gleichmaessig auf die Zeilen, vermeidet einzelne Woerter in der
   letzten Zeile. Moderne Browser; aeltere brechen normal um (kein Nachteil). */
h1, h2, h3, h4, h5, h6,
.mainheader, .card-header, .card-title, figcaption {
    text-wrap: balance;
}

/* Bootstrap-4-Ausrichtungsklassen wiederherstellen: BS5 benannte sie in
   text-start/text-end um, der migrierte Content (Bildunterschriften mit
   'image-caption text-left', rechtsbuendige Textbloecke) nutzt aber noch die
   alten Namen -> sonst wirkungslos und faelschlich zentriert/geerbt. */
.text-left { text-align: left !important; }
.text-right { text-align: right !important; }

/* Links nicht unterstrichen wie im Original (Bootstrap 4 hatte
   text-decoration:none per Default, Bootstrap 5 unterstreicht) — nur farbig.
   Content-Links unterstreichen beim Hover; Navbar/Sidebar/Flaggen nie. */
a {
    text-decoration: none;
}
a:hover,
a:focus {
    text-decoration: underline;
}
.navbar a:hover,
.navbar a:focus,
.na-langflag:hover,
.na-langflag:focus,
.sidebar-nav a:hover,
.sidebar-nav a:focus,
nav.flex-column a:hover,
nav.flex-column a:focus,
.breadcrumb a:hover,
.footer a:hover,
footer a:hover {
    text-decoration: none;
}

/* Schmales, zentriertes 1140px-Layout wie das Original ("Narrow Jumbotron
   Template", Bootstrap 4). Bootstrap 5 ist per Default 1320px + Content war
   full-width. Alles in einen 1140-Container zentrieren, weiße Ränder. */
html, body { overflow-x: hidden; }
#page-wrapper {
    max-width: 1140px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 15px;
    padding-right: 15px;
}
.container,
.container-sm, .container-md, .container-lg, .container-xl, .container-xxl {
    max-width: 1140px !important;
}
/* Navbar/Jumbotron/Breadcrumb-Hintergründe innerhalb des 1140-Wrappers,
   damit die Bordeaux-Balken zentriert mit weißen Rändern erscheinen (Original). */
#page-wrapper .navbar,
#page-wrapper > nav {
    max-width: 1140px;
}

/* Header exakt wie Original: Logo-Balken (bordeaux, zentriert) oben,
   direkt darunter Hero, direkt darunter Navbar (kein Abstand). */
.na-logobar {
    background-color: #85180d;
    text-align: center;
    padding: 15px 0 10px;
}
.na-logobar img {
    max-height: 62px;
    width: auto;
    margin: 0 auto;
}
.na-hero {
    line-height: 0;
}
.na-hero > * { margin-bottom: 0 !important; }
/* Navbar direkt unter dem Hero, ohne oberen Abstand */
.na-hero + .navbar,
.na-hero + nav {
    margin-top: 0 !important;
}

/* Navbar in Marken-Bordeaux, weisse Links */
.navbar {
    background-color: #85180d !important;
}
/* Kompakte, fette Navbar-Links wie Original (custom.css "LI.nav-item A" greift
   nicht, weil t3sbootstrap div.nav-item statt li.nav-item rendert): 14px bold,
   Padding 10px/8px. Bootstrap-5-Default waere 16px/400 -> zu breit. */
.navbar .nav-link {
    font-size: 14px !important;
    font-weight: 700 !important;
    padding: 10px 8px !important;
}
/* Menue buendiger wie Original: erstes Item ~16px vom Rand (Live x=161) statt
   ~44px. t3sbootstrap stapelt .container-Padding (12px) + p-3 der navbar-nav
   (16px). Beide horizontalen Paddings entfernen -> Items starten am Wrapper. */
#main-navbar > .container {
    padding-left: 0 !important;
    padding-right: 16px !important;
}
#main-navbar .main-navbarnav {
    padding-left: 0 !important;
    padding-right: 0 !important;
}
.navbar .nav-link,
.navbar .navbar-brand {
    color: #fff !important;
}
/* Hamburger-Toggler (Mobil/zusammengeschoben): weisse Streifen + dezenter
   weisser Rand wie Original. t3sbootstrap setzt hier faelschlich navbar-light
   (dunkle Streifen), obwohl die Navbar dunkel-bordeaux ist. */
.navbar .navbar-toggler {
    border-color: rgba(255, 255, 255, 0.25);
    color: rgba(255, 255, 255, 0.6);
}
.navbar .navbar-toggler:focus {
    box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.2);
}
.navbar .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23ffffff' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
.navbar .nav-link:hover,
.navbar .nav-link:focus {
    color: rgba(255, 255, 255, 0.85) !important;
}
/* Aktiver Bereich wie eine Registerkarte: weisser Hintergrund, schwarzer Text,
   fuellt die VOLLE Navbar-Hoehe (Tab-Look wie Original).
   t3sbootstrap setzt 'active' auf die exakt aktuelle Seite und 'parent-active'
   auf die Bereichs-Eltern im Aktiv-Pfad (z.B. "Kloster" auf Unterseiten). */
.navbar .navbar-nav {
    align-items: stretch;
}
.navbar .navbar-nav > .nav-item {
    display: flex;
    align-items: stretch;
}
.navbar .navbar-nav > .nav-item > .nav-link {
    display: flex;
    align-items: center;
}
.navbar .nav-item.active > .nav-link,
.navbar .nav-link.active,
.navbar .nav-link.parent-active,
.navbar .nav-link.current {
    color: #000 !important;
    background-color: #fff !important;
}

/* Unterseiten: beide Spalten (Sekundaernav col-lg-3 + Inhalt col-lg-9) etwas
   hoeher ruecken — Top-Padding von pt-5 (48px) gleichmaessig auf 32px (~1/3
   weniger). col-lg-9 trifft nur Unterseiten (Home-Inhalt ist col-lg-8). */
.content-row > .sidebar-nav.pt-5,
.content-row > .col-lg-9.main-content {
    padding-top: 32px !important;
}

/* Sprach-Flaggen inline in der Navbar rechts (wie Original: DE/EN/RU) mit
   Umrandung, ohne weissen Rand ueber/unter der Flagge. object-fit:cover
   schneidet das weisse Padding der 16x16-webp-Icons weg; 1px-Rahmen wie Original. */
.na-langflags {
    gap: 6px;
    margin-left: auto;
}
.na-langflag {
    display: inline-flex;
    align-items: center;
    padding: 0;
    line-height: 0;
}
.na-langflag img,
.na-langflag svg {
    width: 20px;
    height: 15px;
    object-fit: cover;
    border: 1px solid #333;
    display: block;
}
.na-langflag .icon,
.na-langflag .icon-markup {
    line-height: 0;
    display: inline-flex;
}
.na-langflag.unavailable {
    opacity: 0.3;
    cursor: default;
    pointer-events: none;
}

/* Float-Intext-Bilder (t3sbootstrap: col-md-4 float-md-start/end, wenn
   inTextImgRowWidth='none') auf ihre echte Pixelbreite schrumpfen statt fixe
   33%-Spalte. Zusammen mit bootstrap.image.minimumWidth=0 ergibt das die
   kleinen Float-Bilder mit engem Textumfluss wie im Original (z.B. 48px-Wappen).
   Die w-25/33/50-Wrapper-Faelle (gallery mx-auto) bleiben unberuehrt. */
.gallery.float-md-start,
.gallery.float-md-end {
    width: auto !important;
    max-width: 50%;
}
.gallery.float-md-start .row,
.gallery.float-md-end .row {
    margin-left: 0;
    margin-right: 0;
}
.gallery.float-md-start .col-sm,
.gallery.float-md-end .col-sm {
    padding-left: 0;
    padding-right: 0;
    width: auto;
    flex: 0 0 auto;
}

/* Dezente Trennlinie ueber der Footer-Navigation (wie Original: 1px, ~10% schwarz,
   Content-Breite 1110, je 16px Abstand oben/unten). */
.na-footer-hr {
    border: 0;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    opacity: 1;
    margin: 16px 0;
}

/* Datenschutzkonforme Karte (OpenTopoMap, Click-to-Load) — ersetzt das alte
   Google-Maps-iframe. Placeholder statt grauem Rechteck. */
.na-map {
    height: 400px;
    width: 100%;
    background: #e9e9e9;
    border: 1px solid #d0d0d0;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0.5rem 0 1rem;
}
.na-map.na-map-loaded {
    display: block;
}
.na-map-consent {
    text-align: center;
    padding: 1.5rem;
    max-width: 460px;
}
.na-map-consent p {
    font-size: 0.9rem;
    color: #555;
    margin-bottom: 1rem;
}
.na-map .leaflet-container {
    height: 100%;
}

/* Archiv-/Nachrichten-Titel-Liste (menu_subpages): kompakt, Pfeil-Icon davor,
   hoehenbegrenzt + per CSS scrollbar (bei langen Listen wie dem Nachrichten-Archiv). */
ul.menusubpages {
    list-style: none;
    padding-left: 0;
    margin: 0.4rem 0 1.5rem;
    /* Hoehe wird per JS (na-lists.js) auf die Nachbar-Spalte gekappt; dieser
       Wert ist der Fallback ohne JS. Scrollen ist rein CSS. */
    max-height: 40em;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(133, 24, 13, 0.35) transparent;
}
/* Weicher Fade-Out am unteren Rand, solange die Liste scrollt (Klasse setzt
   na-lists.js). Am Listenende (na-at-bottom) verschwindet der Fade. */
ul.menusubpages.na-fade {
    -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 3em), transparent);
    mask-image: linear-gradient(to bottom, #000 calc(100% - 3em), transparent);
    transition: -webkit-mask-image 0.2s, mask-image 0.2s;
}
ul.menusubpages.na-fade.na-at-bottom {
    -webkit-mask-image: linear-gradient(to bottom, #000 100%, transparent);
    mask-image: linear-gradient(to bottom, #000 100%, transparent);
}
ul.menusubpages > li.nav-item {
    margin: 0;
}
ul.menusubpages .nav-link {
    position: relative;
    display: block;
    padding: 2px 0 2px 1.3em !important;
    line-height: 1.3;
    font-size: 15px;
    font-weight: 600;
    color: #680001;
}
ul.menusubpages .nav-link::before {
    content: "\25B8"; /* ▸ kleiner Pfeil in Marken-Bordeaux */
    position: absolute;
    left: 0;
    top: 0.02em;
    color: #85180d;
    font-weight: 700;
}
ul.menusubpages .nav-link:hover,
ul.menusubpages .nav-link:focus {
    color: #85180d;
    text-decoration: underline;
}
ul.menusubpages::-webkit-scrollbar {
    width: 8px;
}
ul.menusubpages::-webkit-scrollbar-thumb {
    background: rgba(133, 24, 13, 0.35);
    border-radius: 4px;
}

/* Buttons */
.btn-primary {
    --bs-btn-bg: #85180d;
    --bs-btn-border-color: #85180d;
    --bs-btn-hover-bg: #680001;
    --bs-btn-hover-border-color: #680001;
}

/* Calendarize/Extbase-Paginator: inline wie alte UL.pagination
   (Markup ist .f3-widget-paginator, nicht .pagination) */
.f3-widget-paginator {
    list-style: none !important;
    padding-left: 0;
    margin: 1.2rem 0 2rem;
}
.f3-widget-paginator li {
    display: inline;
    margin: 0 2px;
}
.f3-widget-paginator li:not(:last-child)::after {
    content: " |";
    color: #666;
}
.f3-widget-paginator li.current {
    font-weight: bold;
    color: #000;
}
.f3-widget-paginator a {
    color: #680001;
}
/* Englische Widget-Labels (fluid, in v14 nicht dt.) auf Deutsch ersetzen */
.f3-widget-paginator li.next a,
.f3-widget-paginator li.previous a {
    font-size: 0;
}
.f3-widget-paginator li.next a::after {
    content: "nächste";
    font-size: 1rem;
}
.f3-widget-paginator li.previous a::after {
    content: "vorherige";
    font-size: 1rem;
}

/* Linke Sidebar-Navigation (t3sbootstrap sidebar) im alten Stil:
   graue Links mit Unterstrich, wie NAV.flex-column im alten custom.css */
.sidebar nav a,
nav.flex-column a {
    color: #666 !important;
    border-bottom: 1px solid #666;
    padding: 0.2rem 0 !important;
    font-size: 15px;
    display: block;
}
/* Bewusste Verbesserung ggue. dem alten Original: der aktuelle Punkt der
   Sekundaernavigation erscheint fett. */
.sidebar-nav nav a.active,
.sidebar nav a.active,
nav.flex-column a.active,
nav.flex-column a.nav-link.active {
    font-weight: 700 !important;
}