.rootline a, .rootline a:visited {
    color: #666;
    display: inline-block;
}
.rootline a:hover {
    color: #000;
}
.rootline a:after {
    display: inline-block;
    content: "|";
    margin: 0 .5rem;
}

.breadcrumb-item {
    display: flex;
    color: #004277 !important;
}

.breadcrumb-item + .breadcrumb-item::before {
    content: none !important;
}

.breadcrumb-item {
    display: inline-block;
    /* ggf. margin-right: 8px; oder Ähnliches */
}


.nav123 {
    padding-left: 1rem;
    padding-right: 1rem;
}

.nav-current {
    color: #004277;
}

.nav-active {
    color: #004277;
}

.metanav-current {
    color: #004277 !important;
}

/* Responsive Videos mit Fluid Styled Content */
.video-embed {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    margin-bottom: 1.5rem;
}

.video-embed iframe,
.video-embed video {
    position: absolute;
    top: 0;
    left: 0;
    max-width: 100%;
    width: 100% !important;
    height: 100% !important;
}

.ce-center:has(.video-embed) .ce-inner {
    position: relative;
    float: none;
    right: -50%;
}

.ce-left:has(.video-embed) .ce-gallery,
.ce-column:has(.video-embed) {
    float: none;
}

.ce-center:has(.video-embed) .ce-outer {
    position: relative;
    float: none;
    right: 50%;
}

.tx-indexedsearch-searchbox-sword.form-control {
    width: 100%;
    display: inline;
}

.tx-indexedsearch-info-sword {
    margin: 1rem 0 1rem 0;
}

span.tx-indexedsearch-info-sword-word {
    font-weight: bold;
}

.tx-indexedsearch-title {
    font-size: 120%;
}
.tx-indexedsearch-res {
    border-bottom: 1px solid #ddd;
    margin-bottom: 1rem;
}

#indexedssearch .tx-indexedsearch-info-sword,
#indexedssearch .tx-indexedsearch-info-sword-word,
#indexedssearch .tx-indexedsearch-browsebox,
#indexedssearch .tx-indexedsearch-res {
    display: none;
}

.wave {
    animation: wave-animation 5s infinite ease-in-out;
}

@keyframes wave-animation {
    0% {
        d: path("M0,30 Q360,-20 720,30 T1440,30 V60 H0 V30 Z");
    }
    50% {
        d: path("M0,30 Q360,20 720,-10 T1440,30 V60 H0 V30 Z");
    }
    100% {
        d: path("M0,30 Q360,-20 720,30 T1440,30 V60 H0 V30 Z");
    }
}

/* Aktive Sprache: leicht ausgegraut und durchgestrichen */
.active-language {
    color: #6c757d; /* Sekundärfarbe */
    text-decoration: line-through;
    cursor: not-allowed;
}

/* Andere Sprachen: normal */
.dropdown-item {
    color: #333;
    text-decoration: none;
}

/* Hover-Effekt für nicht aktive Sprachen */
.dropdown-item:hover {
    color: #004277;
    text-decoration: underline;
}

.tags-container {
    z-index: 10; /* Sicherstellen, dass die Tags über dem Bild angezeigt werden */
}

.btn-xs {
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
}

.line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.card-img-top.overlay.overlay-1:hover figcaption {
    opacity: 1;
}

.post-date {
    display: inline-flex; /* Hält das Icon und den Text zusammen */
    align-items: center; /* Zentriert das Icon und den Text vertikal */
    gap: 0.5rem; /* Abstand zwischen Icon und Text */
    white-space: nowrap; /* Verhindert Zeilenumbrüche */
}

.grid {
    position: relative;
}
.isotope {
    display: flex;
    flex-wrap: wrap;
    margin: -10px;
}
.item {
    margin: 10px;
    width: calc(33.333% - 20px); /* Beispiel für drei Spalten */
    box-sizing: border-box;
}
@media (max-width: 768px) {
    .item {
        width: calc(50% - 20px); /* Zwei Spalten für kleinere Bildschirme */
    }
}
@media (max-width: 576px) {
    .item {
        width: 100%; /* Eine Spalte für Mobilgeräte */
    }
}

.kesearchbox .form-floating {
    flex-grow: 1; /* Sorgt dafür, dass das Suchfeld flexibel den freien Platz einnimmt */
    margin-right: 0.5rem; /* Abstand zu den Buttons */
    min-width: 0; /* Verhindert, dass das Suchfeld bei wenig Platz überläuft */
}

.kesearchbox .btn {
    flex-shrink: 0; /* Verhindert, dass die Buttons schrumpfen */
    white-space: nowrap; /* Verhindert, dass der Text umbricht */
    height: auto; /* Gleiche Höhe wie das Suchfeld */
    display: flex;
    align-items: center;
    justify-content: center;
}

.kesearchbox .container {
    gap: 0.5rem; /* Abstand zwischen Suchfeld und Buttons */
}

@media (max-width: 768px) {
    .kesearchbox .container {
        flex-wrap: wrap; /* Umbruch für mobile Geräte */
    }
    .kesearchbox .form-floating {
        flex: 1 1 100%; /* Volle Breite des Suchfelds auf mobilen Geräten */
        margin-right: 0; /* Kein seitlicher Abstand */
    }
    .kesearchbox .btn {
        flex: 1 1 100%; /* Buttons in voller Breite auf mobilen Geräten */
        margin: 0; /* Abstand entfernen */
    }
}

.img-mask.mask-1 {
    /* Beispiel: wir definieren eine maximale Breite */
    max-width: 600px;
    width: 100%;
    /* ggf. Ränder oder Abstände anpassen */
    margin: 0 auto;
}

.img-mask.mask-1 img {
    /* Bild selbst auf 100% der Maskenbreite skalieren */
    width: 100%;
    height: auto;
    /* Falls Ihr eine bestimmte Maske per clip-path oder shape-outside nutzt,
       könnte man hier noch weitere CSS-Regeln anpassen */
}

/* News List */
/* Der Container */
.overlay-container {
    position: relative;
    width: 100%;
    height: 300px; /* Einheitliche Höhe */
    overflow: hidden; /* Alles außerhalb wird abgeschnitten */
}

/* Das Bild */
.responsive-image {
    width: 100%;
    height: auto;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    min-height: 100%;
    object-fit: cover; /* Proportional zugeschnitten */
}

/* Das Overlay */
.overlay-content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center; /* Vertikale Zentrierung */
    justify-content: center; /* Horizontale Zentrierung */
    background: rgba(0, 0, 0, 0.5); /* Halbtransparentes schwarzes Overlay */
    opacity: 0; /* Unsichtbar, bis Hover */
    transition: opacity 0.3s ease-in-out; /* Sanfter Übergang */
    text-align: center;
}

/* Text im Overlay */
.overlay-content h5 {
    color: #fff !important; /* Weiß, ohne Überschreibung */
}

/* Hover-Effekt */
.overlay-container:hover .responsive-image {
    transform: translateX(-50%) scale(1.1); /* Skalierung bei Hover */
    transition: transform 0.3s ease-in-out; /* Sanfter Übergang */
}

.overlay-container:hover .overlay-content {
    opacity: 1; /* Overlay wird sichtbar */
}

.side-news-list ul {
    padding: 0;
    margin: 0;
    list-style: none;
}

.side-news-list li {
    border-bottom: 1px solid #ddd;
    padding-bottom: 10px;
    margin-bottom: 10px;
}

.side-news-list img {
    object-fit: cover;
    width: 80px;
    height: 80px;
}

body > div > main > div > div.news.news-single > div > div.wrapper.bg-light > div > div > div > div > div > div > div.d-flex.justify-content-between.align-items-center.card-body.pt-2 {
    padding-left: 0px !important;
    padding-right: 0px !important;
}

#c73 > div > div > div > div:nth-child(2) > div > a {
    color: #ddd;
}

/* =========================================================
   FORM – RADIO/CHECKBOX SPACING & FOCUS
   ========================================================= */

/* Grundabstände je Option (Desktop & Mobile) */
.form-check {
    padding-top: .375rem;
    padding-bottom: .375rem;
    margin-bottom: .125rem;
}

/* Label klickbar über volle Breite, bessere Zeilenhöhe */
.form-check-label {
    display: block;
    line-height: 1.35;
    cursor: pointer;
}

/* Input etwas größer und sauber vertikal ausgerichtet */
.form-check-input {
    width: 1.15rem;
    height: 1.15rem;
    margin-top: .3rem; /* justiert zur Label-Zeilenhöhe */
}

/* Mobile: größere Tap-Ziele (>=44px) ohne Layout-Salat */
@media (max-width: 575.98px) {
    .form-check {
        padding-top: .5rem;
        padding-bottom: .5rem;
    }
    .form-check-label {
        min-height: 44px;
        display: flex;
        align-items: center;
    }
}

/* Abstand zwischen mehreren Optionen in Gruppen minimieren/angleichen */
.inputs-list .form-check:last-child {
    margin-bottom: 0;
}

/* =========================================================
   KLARE FOCUS-RINGE (Tastatur) – nutzt Bootstrap-Variablen
   ========================================================= */

:root {
    /* Fallback auf Bootstrap-Primary-RGB, falls Theme es nicht setzt */
    --_focus-rgb: var(--bs-primary-rgb, 13,110,253);
}

/* Textfelder & Selects */
.form-control:focus,
.form-select:focus {
    border-color: var(--bs-primary) !important;
    box-shadow: 0 0 0 .2rem rgba(var(--_focus-rgb), .25) !important;
    outline: 0;
}

/* Radios/Checkboxen */
.form-check-input:focus {
    border-color: var(--bs-primary) !important;
    box-shadow: 0 0 0 .2rem rgba(var(--_focus-rgb), .25) !important;
    outline: 0;
}

/* Checked-State an Primary anbinden (falls Theme es überschreibt) */
.form-check-input:checked {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
}

/* :focus-visible nur für Tastatur-Nutzer – wenn unterstützt */
.form-control:focus-visible,
.form-select:focus-visible,
.form-check-input:focus-visible {
    border-color: var(--bs-primary) !important;
    box-shadow: 0 0 0 .22rem rgba(var(--_focus-rgb), .28) !important;
    outline: 0;
}

/* =========================================================
   FLOATING LABELS & VALIDATION FINETUNING
   ========================================================= */

/* Floating-Labels: auf Fokus Label-Farbe dezent an Primary koppeln */
.form-floating > .form-control:focus ~ label,
.form-floating > .form-select:focus ~ label {
    color: var(--bs-primary);
    opacity: .85;
}

/* Invalid-State: Label mit einfärben, Feedback dichter ans Feld */
.form-control.is-invalid ~ label,
.form-select.is-invalid ~ label {
    color: var(--bs-danger);
}

.invalid-feedback,
.valid-feedback {
    margin-top: .25rem;
}

/* Textarea in Floating-Wrapper: Grundhöhe sinnvoll */
.form-floating > textarea.form-control {
    min-height: 150px;
}

/* =========================================================
   OPTIONAL: XS-Padding der Karten dämpfen (wenn Template p-12 nutzt)
   ========================================================= */
@media (max-width: 575.98px){
    .card-body.p-12 { padding: 1.5rem !important; } /* statt 3.5rem */
}

/* ===== Consent/Checkbox-Ausrichtung korrigieren ===== */
/* Eltern-Container als Flex: Text steht sauber NACH dem Häkchen */
.form-check {
    display: flex;
    align-items: flex-start; /* am oberen Zeilenbeginn ausrichten */
    gap: .5rem;             /* Abstand zwischen Häkchen und Text */
}

/* Checkbox selbst: minimal nach unten justieren, aber nicht zu viel */
.form-check-input {
    flex: 0 0 auto;
    margin-top: .2rem; /* vorher .3rem -> senkt Versatz */
}

/* Label sauber ohne Zusatzabstände */
.form-check-label {
    margin: 0;
    line-height: 1.4;
    display: block; /* bleibt voll klickbar */
}

/* Unsere frühere Mobile-Regel (display:flex; align-items:center) hier neutralisieren */
@media (max-width: 575.98px) {
    .form-check-label {
        display: block;      /* NICHT als Flex zentrieren */
        align-items: unset;  /* Sicherheitshalber zurücksetzen */
        min-height: 0;       /* kein künstlicher Ausgleich nötig */
    }
}

/* Consent/Checkbox – saubere Top-Ausrichtung */
.form-check.d-flex.align-items-start .form-check-input { margin-top: .2rem; }
.form-check .form-check-label { margin: 0; line-height: 1.4; }

/* ===== FORM: XS immer 1-spaltig ===== */
@media (max-width: 575.98px){
    /* Nur im Formular-Card-Kontext, damit nichts anderes leidet */
    .card.bg-soft-primary form .row > [class^="col-"],
    .card.bg-soft-primary form .row > [class*=" col-"]{
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }

    /* Großes Innenpadding entschärfen (dein Form.html nutzt p-12) */
    .card.bg-soft-primary .card-body.p-12{
        padding: 1.5rem !important; /* statt 3.5rem */
    }
}

/* ===========================
   FORM: Konsistenter Vertikalrhythmus auf XS
   =========================== */
@media (max-width: 575.98px){

    /* 1) Row-Gutter im Formular deaktivieren (sonst doppelter Abstand) */
    .card.bg-soft-primary form .row {
        --bs-gutter-y: 0 !important;
    }

    /* 2) Einheitlicher Abstand pro Feld-Wrapper */
    .card.bg-soft-primary form .form-floating,
    .card.bg-soft-primary form .form-select-wrapper,
    .card.bg-soft-primary form .inputs-list,
    .card.bg-soft-primary form .form-check {
        margin-bottom: 1rem !important; /* ~16px, clean */
    }

    /* 3) Kein extra Abstand nach dem letzten Feld vor den Actions */
    .card.bg-soft-primary form .form-check:last-child,
    .card.bg-soft-primary form .inputs-list:last-child,
    .card.bg-soft-primary form .form-select-wrapper:last-child,
    .card.bg-soft-primary form .form-floating:last-child {
        margin-bottom: 0 !important;
    }

    /* 4) Consent-Block: kleiner Abstand zwischen Checkbox und Info-Text */
    .card.bg-soft-primary form .form-check + * {
        margin-top: .5rem !important;
    }

    /* 5) XS: volle Breite erzwingen (falls noch nackte .col-6 vorkommen) */
    .card.bg-soft-primary form .row > [class^="col-"],
    .card.bg-soft-primary form .row > [class*=" col-"]{
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }

    /* 6) Großes Innenpadding der Karte dämpfen (lesbarer auf XS) */
    .card.bg-soft-primary .card-body.p-12{
        padding: 1.5rem !important;
    }
}

/* =========================================
   FORM – XS: sauberer, gleichmäßiger Abstand
   (ersetzt den vorherigen XS-Block)
   ========================================= */
@media (max-width: 575.98px){

    /* 0) Immer einspaltig auf XS */
    .card.bg-soft-primary form .row > [class^="col-"],
    .card.bg-soft-primary form .row > [class*=" col-"]{
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }

    /* 1) Kein Row-Gutter (sonst doppelter Abstand mit mb-*) */
    .card.bg-soft-primary form .row {
        --bs-gutter-y: 0 !important;
    }

    /* 2) Einheitlicher Abstand pro Feld-Wrapper: 1.25rem (20px) */
    .card.bg-soft-primary form .form-floating,
    .card.bg-soft-primary form .form-select-wrapper,
    .card.bg-soft-primary form .inputs-list,
    .card.bg-soft-primary form .form-check{
        margin-bottom: 1.25rem !important;
    }

    /* 3) Letztes Feld vor den Actions: kein Extra-Abstand */
    .card.bg-soft-primary form .form-floating:last-child,
    .card.bg-soft-primary form .form-select-wrapper:last-child,
    .card.bg-soft-primary form .inputs-list:last-child,
    .card.bg-soft-primary form .form-check:last-child{
        margin-bottom: 0 !important;
    }

    /* 4) Consent-Text: spürbarer Abstand unter dem Hakenblock */
    .card.bg-soft-primary form .form-check + *{
        margin-top: .75rem !important;
    }

    /* 5) Großes Innenpadding der Karte dämpfen (lesbarer auf XS) */
    .card.bg-soft-primary .card-body.p-12{
        padding: 1.5rem !important;
    }
}

/* =========================================
   FORM – XS: 1-spaltig + konsistenter Abstand
   ========================================= */
@media (max-width: 575.98px){

    /* 0) Immer 1-spaltig */
    .card.bg-soft-primary .card-body form .row > [class^="col-"],
    .card.bg-soft-primary .card-body form .row > [class*=" col-"]{
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }

    /* 1) Row-Gutter-Y aus, sonst doppelter Abstand */
    .card.bg-soft-primary .card-body form .row{
        --bs-gutter-y: 0 !important;
    }

    /* 2) Abstand zwischen den KOLONNEN (nicht in den Feldern) */
    .card.bg-soft-primary .card-body form .row > [class^="col-"] + [class^="col-"],
    .card.bg-soft-primary .card-body form .row > [class^="col-"] + [class*=" col-"],
    .card.bg-soft-primary .card-body form .row > [class*=" col-"] + [class^="col-"],
    .card.bg-soft-primary .card-body form .row > [class*=" col-"] + [class*=" col-"]{
        margin-top: 1.35rem !important; /* ≈ 22px, gleichmäßig */
    }

    /* 3) Wrapper-interne Margins auf XS neutralisieren (sonst addiert es sich) */
    .card.bg-soft-primary .card-body form .form-floating,
    .card.bg-soft-primary .card-body form .form-select-wrapper,
    .card.bg-soft-primary .card-body form .inputs-list,
    .card.bg-soft-primary .card-body form .form-check{
        margin-bottom: 0 !important;
    }

    /* 4) Consent-Text etwas Luft unter dem Hakenblock */
    .card.bg-soft-primary .card-body form .form-check + *{
        margin-top: .85rem !important;
    }

    /* 5) Großes Karten-Padding entschärfen */
    .card.bg-soft-primary .card-body.p-12{
        padding: 1.5rem !important;
    }
}

/* =========================
   ke_search – Form & Results
   ========================= */

/* XS: Buttons 100% Breite */
@media (max-width: 575.98px){
    .kesearch_searchbox .d-grid .btn { width: 100%; }
}

/* Abstand zwischen Input und Buttons: mobil großzügig, ab md moderat */
.kesearch_searchbox .row > * + * { margin-top: 1.75rem; }
@media (min-width: 768px){
    .kesearch_searchbox .row > * + * { margin-top: 1rem; }
}

/* Eingabefeld: volle Breite + weiß (falls Plugin-CSS dazwischenfunkt) */
#form_kesearch_pi1 .form-floating > .form-control {
    width: 100% !important;
    background: #fff;
}

/* Suggest-Dropdown nicht clippen */
.kesearch_searchbox { overflow: visible; position: relative; }
/* z.B. höhere Ebene, falls es hinter Buttons/Icons verschwindet */
.kesearch_searchbox [class*="suggest"] { z-index: 20; }

/* ============================
   ke_search + ke_search_suggest – Rundungen wie dein Style
   ============================ */

/* Eine Stelle, die alles steuert */
.kesearch_searchbox { --search-radius: 0.5rem; } /* gern auf 1.25rem drehen, wenn du „sehr rund“ willst */

/* Karte selbst (falls Suggest-CSS sie kantiger macht) */
.kesearch_searchbox.card { border-radius: calc(var(--search-radius) * 1.25) !important; }

/* Eingabefeld in der Box immer schön rund */
#form_kesearch_pi1 .form-control,
#form_kesearch_pi1 input[type="search"] {
    border-radius: var(--search-radius) !important;
}

/* Buttons in der Box genauso rund */
#form_kesearch_pi1 .btn { border-radius: calc(var(--search-radius) * .9) !important; }

/* Autosuggest-Dropdown (Klassen variieren je nach Version → breit fassen) */
.kesearch_searchbox .autosuggest,
.kesearch_searchbox .autosuggest-results,
.kesearch_searchbox .autosuggest__results,
.kesearch_searchbox .kesearch-autosuggest,
.kesearch_searchbox ul[class*="suggest"],
.kesearch_searchbox div[class*="suggest"] {
    border-radius: var(--search-radius) !important;
    overflow: hidden;                          /* damit die abgerundeten Ecken sichtbar bleiben */
    box-shadow: 0 10px 24px rgba(0,0,0,.08);   /* optisch wie deine Cards */
    background: #fff;                          /* falls das Plugin transparent rendert */
    z-index: 20;                               /* über Buttons/Icons */
}

/* Manche Suggest-CSS nehmen dem Input unten die Rundung weg, wenn offen → wieder geben */
.kesearch_searchbox .form-control[class*="suggest"],
.kesearch_searchbox .form-control.autosuggest-open,
.kesearch_searchbox .form-control.suggest-open {
    border-bottom-left-radius: var(--search-radius) !important;
    border-bottom-right-radius: var(--search-radius) !important;
}

/* Falls die Karte das Dropdown „abschneidet“ */
.kesearch_searchbox { overflow: visible; position: relative; }