/*! * Schlanke, lokale Ersatz-Stylesheet für die auf dieser Seite tatsächlich * genutzten Bootstrap-5-Grid- und Utility-Klassen. Ersetzt bootstrap.min.css * vollständig – kein externes Framework mehr nötig. */ *, *::before, *::after { box-sizing: border-box; } /* Reserviert dauerhaft den Platz der vertikalen Scrollleiste (nur relevant bei klassischen, Platz beanspruchenden Desktop-Scrollleisten), damit die nutzbare Viewport-Breite nicht von der Seitenlänge abhängt. Ohne diese Regel verschiebt sich das (per .container zentrierte) Layout inkl. Logo je nach Seite um die Breite des Scrollbalkens, sobald eine Seite kürzer ist als der sichtbare Bereich und eine andere nicht. Bewusst OHNE zusätzliches "overflow-y: scroll": Das erzwang auf mobilen Browsern durchgängige Scrollbarkeit und führte dort – in Kombination mit der dynamisch ein-/ausblendenden Adressleiste – zu einem weißen Rand unterhalb des Footers (dem sichtbaren -Hintergrund unterhalb von ). Mobile Browser nutzen ohnehin transparente Overlay-Scrollleisten ohne eigenen Platzbedarf, weshalb "scrollbar-gutter" dort keine Wirkung entfalten muss – das eigentliche Problem betraf nur Desktop-Browser mit klassischer, Platz beanspruchender Scrollleiste. */ /* overflow-x auch am -Element (nicht nur ) kappen: Sonst verwenden mobile Browser bei minimalem horizontalem Overflow die überbreite Layout-Viewport-Breite als Bezugsrahmen für position:fixed- Elemente (Hamburger-Button, Nach-oben-Pfeil) und schieben sie rechts aus dem sichtbaren Bereich hinaus. */ html { overflow-x: hidden; scrollbar-gutter: stable; } body { margin: 0; } img { vertical-align: middle; max-width: 100%; } a { color: inherit; } .bi { display: inline-block; vertical-align: -0.125em; flex-shrink: 0; } /* ---------- Container ---------- */ .container { width: 100%; padding-right: 0.75rem; padding-left: 0.75rem; margin-right: auto; margin-left: auto; } @media (min-width: 576px) { .container { max-width: 540px; } } @media (min-width: 768px) { .container { max-width: 720px; } } @media (min-width: 992px) { .container { max-width: 960px; } } @media (min-width: 1200px) { .container { max-width: 1140px; } } @media (min-width: 1400px) { .container { max-width: 1320px; } } /* ---------- Grid: row / col ---------- */ .row { display: flex; flex-wrap: wrap; margin-right: -0.75rem; margin-left: -0.75rem; } .row > * { flex-shrink: 0; width: 100%; max-width: 100%; padding-right: 0.75rem; padding-left: 0.75rem; } .col-12 { flex: 0 0 auto; width: 100%; } @media (min-width: 768px) { .col-md-6 { flex: 0 0 auto; width: 50%; } } @media (min-width: 992px) { .col-lg-6 { flex: 0 0 auto; width: 50%; } .col-lg-8 { flex: 0 0 auto; width: 66.66666667%; } } @media (min-width: 1200px) { .col-xl-9 { flex: 0 0 auto; width: 75%; } .col-xl-10 { flex: 0 0 auto; width: 83.33333333%; } .col-xl-11 { flex: 0 0 auto; width: 91.66666667%; } } .mx-auto { margin-right: auto !important; margin-left: auto !important; } /* Gutter-Varianten (nur die genutzten) */ .g-4 { margin-right: -0.75rem; margin-left: -0.75rem; row-gap: 1.5rem; } .g-4 > * { padding-right: 0.75rem; padding-left: 0.75rem; } .gy-5 { row-gap: 3rem; } @media (min-width: 992px) { .gx-lg-5 { margin-right: -1.5rem; margin-left: -1.5rem; } .gx-lg-5 > * { padding-right: 1.5rem; padding-left: 1.5rem; } } /* ---------- Spacing utilities ---------- */ .m-0 { margin: 0 !important; } .mt-0 { margin-top: 0 !important; } .mb-0 { margin-bottom: 0 !important; } .mb-1 { margin-bottom: 0.25rem !important; } .mb-2 { margin-bottom: 0.5rem !important; } .mb-3 { margin-bottom: 1rem !important; } .mb-4 { margin-bottom: 1.5rem !important; } .mb-5 { margin-bottom: 3rem !important; } .mt-3 { margin-top: 1rem !important; } .mt-2 { margin-top: 0.5rem !important; } .mt-4 { margin-top: 1.5rem !important; } .mt-5 { margin-top: 3rem !important; } .me-2 { margin-right: 0.5rem !important; } .ms-auto { margin-left: auto !important; } .p-0 { padding: 0 !important; } .pt-3 { padding-top: 1rem !important; } .gap-3 { gap: 1rem !important; } /* ---------- Display / Flex utilities ---------- */ .d-block { display: block !important; } .d-flex { display: flex !important; } .flex-column { flex-direction: column !important; } .justify-content-between { justify-content: space-between !important; } .justify-content-center { justify-content: center !important; } .justify-content-end { justify-content: flex-end !important; } .align-items-center { align-items: center !important; } .align-items-start { align-items: flex-start !important; } .w-100 { width: 100% !important; } /* ---------- Typography utilities ---------- */ .small { font-size: 0.875em; } .lead { font-size: 1.25rem; font-weight: 300; } .h5 { font-size: 1.25rem; font-weight: 500; line-height: 1.2; margin: 0; } .fs-4 { font-size: calc(1.275rem + 0.3vw) !important; } .fs-5 { font-size: 1.25rem !important; } .fs-6 { font-size: 1rem !important; } .fw-bold { font-weight: 700 !important; } .fw-medium { font-weight: 500 !important; } .fw-light { font-weight: 300 !important; } .lh-base { line-height: 1.5 !important; } .text-uppercase { text-transform: uppercase !important; } .text-center { text-align: center !important; } .text-decoration-none { text-decoration: none !important; } .text-white { color: #fff !important; } .text-dark { color: var(--text-dark) !important; } .text-secondary { color: #6c757d !important; } @media (min-width: 768px) { .text-md-start { text-align: left !important; } .text-md-end { text-align: right !important; } } @media (min-width: 992px) { .text-lg-start { text-align: left !important; } } /* ---------- Borders ---------- */ .border-0 { border: 0 !important; } .border-top { border-top: 1px solid rgba(0,0,0,0.175); } .border-secondary { border-color: rgba(255,255,255,0.15) !important; } /* ---------- Background ---------- */ .bg-white { background-color: #fff !important; } /* ---------- Text-Farb-Utility (nutzt die pro Seite in :root definierte Variable) ---------- */ .text-muted { color: var(--text-muted-lightbg, #6c757d) !important; } /* ---------- Buttons ---------- */ .btn { display: inline-block; padding: 0.375rem 0.75rem; font-size: 1rem; font-weight: 400; line-height: 1.5; text-align: center; text-decoration: none; vertical-align: middle; cursor: pointer; user-select: none; border: 1px solid transparent; border-radius: 0.375rem; background-color: transparent; transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out; } .btn-link { color: var(--logo-blue); font-weight: 400; text-decoration: underline; border: none; background: none; } .btn-link:hover { color: var(--logo-blue); } /* ---------- Forms ---------- */ .form-control { display: block; width: 100%; padding: 0.375rem 0.75rem; font-size: 1rem; font-weight: 400; line-height: 1.5; background-color: transparent; background-clip: padding-box; border: 1px solid rgba(0,0,0,0.175); border-radius: 0.375rem; transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out; } .form-control::placeholder { opacity: 1; } @media (min-width: 576px) { .w-sm-auto { width: auto !important; } } /* ---------- Alerts ---------- */ .alert { position: relative; padding: 1rem; margin-bottom: 1rem; border: 1px solid transparent; border-radius: 0.375rem; } .alert-success { color: #0a3622; background-color: #d1e7dd; border-color: #a3cfbb; } .alert-danger { color: #58151c; background-color: #f8d7da; border-color: #f1aeb5; } /* ---------- Collapse (JS-gesteuert, siehe js/site.js) ---------- */ .collapse:not(.show) { display: none; } .collapse.show { display: block; } .collapsing { height: 0; overflow: hidden; transition: height 0.35s ease; } /* ---------- Navbar ---------- */ .navbar { position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; padding-top: 0.5rem; padding-bottom: 0.5rem; } .navbar > .container { display: flex; flex-wrap: inherit; align-items: center; justify-content: space-between; } .navbar-brand { padding-top: 0.3125rem; padding-bottom: 0.3125rem; margin-right: 1rem; font-size: 1.25rem; text-decoration: none; white-space: nowrap; } .navbar-nav { display: flex; flex-direction: column; padding-left: 0; margin: 0; list-style: none; } .nav-item { list-style: none; } .navbar-toggler { padding: 0.25rem 0.75rem; font-size: 1.25rem; line-height: 1; background-color: transparent; border: 1px solid rgba(0,0,0,0.15); border-radius: 0.375rem; cursor: pointer; } .navbar-collapse { flex-basis: 100%; flex-grow: 1; align-items: center; } .fixed-top { position: fixed; top: 0; right: 0; left: 0; z-index: 1030; } @media (min-width: 992px) { .navbar-expand-lg { flex-wrap: nowrap; justify-content: flex-start; } .navbar-expand-lg .navbar-nav { flex-direction: row; } .navbar-expand-lg .navbar-collapse { display: flex !important; flex-basis: auto; } .navbar-expand-lg .navbar-toggler { display: none; } .navbar-expand-lg .navbar-nav.w-100 { width: auto !important; } } @media (max-width: 991.98px) { .navbar-collapse.collapse:not(.show) { display: none; } } /* Für den Container innerhalb ul.navbar-nav aus Markup */ .navbar-nav.w-100.justify-content-end { width: 100%; } /* ---------- Sprachumschalter (Desktop: Teil des Menüs) ---------- */ .nav-link.lang-switch { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background-color: var(--logo-blue); color: #ffffff !important; font-size: 0.7rem !important; font-weight: 700; padding: 0 !important; margin: 0 0 0 12px !important; text-decoration: none; } .nav-link.lang-switch::after { display: none !important; } .nav-link.lang-switch:hover, .nav-link.lang-switch.active { background-color: var(--bg-dark); color: #ffffff !important; } @media (max-width: 991.98px) { /* Auf Mobilgeräten steckt der Umschalter im Klapp-Menü und würde dort benachbarte Einträge verdecken – daher hier ausgeblendet, stattdessen die feste Topbar-Variante (.lang-switch-mobile) verwenden. */ .navbar-nav .nav-link.lang-switch { display: none; } } /* ---------- Sprachumschalter (Mobile: feste Topbar neben dem Hamburger) ---------- */ .navbar-mobile-actions { display: flex; align-items: center; gap: 10px; } .lang-switch-mobile { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background-color: var(--logo-blue); color: #ffffff; font-size: 0.7rem; font-weight: 700; text-decoration: none; } .lang-switch-mobile:hover { background-color: var(--bg-dark); } @media (min-width: 992px) { .lang-switch-mobile { display: none; } }