/* ===========================================================================
   id4web - Eigene Stile TH Datenschutz+ GmbH
   Portiert von custom.less (Bootstrap 3 / LESS) auf Bootstrap 5 / CSS.
   Farbwerte stammen aus der Messung am Bestand.
   =========================================================================== */

:root {
    --id4-primary: #f14b11;
    --id4-primary-dark: #c83d0c;   /* entspricht darken(@brand-primary, 9%) */
    /* Nur als HINTERGRUND hinter weisser Schrift verwenden.
       Weiss auf #f14b11 ergibt 3.65:1 und faellt unter die von WCAG AA
       geforderten 4.5:1. Dieser Ton kommt auf 4.52:1 und ist die kleinste
       Abdunklung, die besteht - optisch kaum vom Original zu unterscheiden.
       NICHT aufhellen: der Wert liegt dicht an der Grenze. */
    --id4-primary-bg: #d6420f;
    --id4-secondary: #146088;
    --id4-tertiary: #1c77a6;
    --id4-text: #555555;
}

/* --- GRUNDTYPOGRAFIE (Bestand: Open Sans 18px/1.65, Montserrat fuer Titel) --- */
body {
    font-weight: 400;
}

h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6,
.navbar-brand, .lead {
    font-family: 'Montserrat', sans-serif;
}

h1, .h1 {
    font-weight: 700;
    text-transform: uppercase;
    color: var(--id4-primary);
}

h2, .h2, h3, .h3, h4, .h4 {
    font-weight: 400;
}

/* Farbregel wie im Bestand gemessen:
   h1, h2, h4 und tiefer in der Markenfarbe, nur h3 in der Zweitfarbe. */
h2, .h2, h4, .h4, h5, .h5, h6, .h6 {
    color: var(--id4-primary);
}

h3, .h3 {
    color: var(--id4-secondary);
}

.lead {
    color: var(--id4-primary);
    padding-top: 1em;
}

/* --- LOGO --- */
.navbar-mainnavigation .navbar-brand-image img {
    max-height: 45px;
}

@media (min-width: 992px) {
    .navbar-mainnavigation .navbar-brand-image {
        padding-top: 3px;
        padding-bottom: 3px;
    }
    .navbar-mainnavigation .navbar-brand-image img {
        max-height: 100%;
    }
}

/* --- HAUPTNAVIGATION --- */

/* Rechtsbuendig wie im Bestand: ohne "margin-left: auto" streckt sich die
   Liste ueber die volle Breite und die Punkte stehen links darin.
   Abstand 10px wie im Bestand (Bootstrap Package 16 setzt sonst 13.5px). */
@media (min-width: 992px) {
    .navbar-mainnavigation .navbar-nav {
        margin-left: auto;
        justify-content: flex-end;
        column-gap: 10px;
    }
}

.navbar-mainnavigation .navbar-nav > .nav-item > .nav-link {
    font-weight: 400;
    background: var(--id4-primary-bg);
    color: #fff;
    white-space: nowrap;
    transition: background-color 150ms ease;
}

/* Bootstrap Package zeichnet eine 2px-Linie unter den aktiven Punkt.
   Auf farbigen Schaltflaechen stoert sie, daher abgeschaltet. */
.navbar-mainnavigation .navbar-nav > .nav-item > .nav-link::before,
.navbar-mainnavigation .navbar-nav > .nav-item > .nav-link::after {
    display: none;
    content: none;
}

/* Aktiver oder aufgeklappter Punkt komplett blau - einschliesslich des
   Pfeil-Knopfes, der ein eigenes Element ohne "active" ist. */
.navbar-mainnavigation .navbar-nav > .nav-item:hover > .nav-link,
.navbar-mainnavigation .navbar-nav > .nav-item:focus-within > .nav-link,
.navbar-mainnavigation .navbar-nav > .nav-item:has(> .nav-link.active) > .nav-link,
.navbar-mainnavigation .navbar-nav > .nav-item:has(> .nav-link.show) > .nav-link,
.navbar-mainnavigation .navbar-nav > .nav-item > .nav-link.active,
.navbar-mainnavigation .navbar-nav > .nav-item > .nav-link.show,
.navbar-mainnavigation .navbar-nav > .nav-item > .nav-link:hover,
.navbar-mainnavigation .navbar-nav > .nav-item > .nav-link:focus-visible {
    background: var(--id4-secondary);
    color: #fff;
}

/* Aufklapp-Pfeil naeher an die Beschriftung ruecken.
   Bootstrap Package gibt Link und Pfeil-Knopf je 15px Innenabstand, wodurch
   der Pfeil 30px neben dem Text steht. */
@media (min-width: 992px) {
    .navbar-mainnavigation .navbar-nav > .nav-item:has(> .nav-link-toggle) > .nav-link-main {
        padding-right: 6px;
    }

    .navbar-mainnavigation .navbar-nav > .nav-item > .nav-link.nav-link-toggle {
        padding-left: 4px;
        padding-right: 12px;
    }
}

.navbar-mainnavigation .navbar-toggler {
    color: var(--id4-primary);
    border-color: var(--id4-primary);
}

/* Tastaturbedienung sichtbar machen (Politur, im Bestand nicht vorhanden) */
.navbar-mainnavigation .nav-link:focus-visible,
.card-menu a:focus-visible,
.btn:focus-visible {
    outline: 3px solid var(--id4-secondary);
    outline-offset: 2px;
}

/* --- DROPDOWN-UNTERMENUE --- */
@media (min-width: 992px) {
    .navbar-mainnavigation .navbar-nav > .nav-item > .dropdown-menu {
        /* Unterhalb des Menuepunkts oeffnen statt darueber - sonst verdeckt
           das Panel den Punkt selbst und seinen Nachbarn. Rechtsbuendig,
           damit es bei der rechts ausgerichteten Navigation nicht ueber den
           Containerrand hinausragt. */
        top: 100%;
        left: auto;
        right: 0;
        margin-top: 2px;
    }

    .navbar-mainnavigation .dropdown-menu {
        min-width: 290px;
        padding: 0;
        background: #fff;
        border: 1px solid rgba(0, 0, 0, 0.08);
        border-top: 3px solid var(--id4-primary);
        border-radius: 0;
        box-shadow: 0 12px 30px rgba(0, 0, 0, 0.16);
        overflow: hidden;
    }

    .navbar-mainnavigation .dropdown-menu .dropdown-nav {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .navbar-mainnavigation .dropdown-menu .nav-item + .nav-item > .nav-link-dropdown {
        border-top: 1px solid #ececec;
    }

    .navbar-mainnavigation .dropdown-menu .nav-link-dropdown {
        display: block;
        padding: 12px 24px;
        font-size: 18px;
        line-height: 1.35;
        color: var(--id4-secondary);
        background: transparent;
        white-space: normal;
        border-left: 3px solid transparent;
        transition: background-color 150ms ease, color 150ms ease, border-left-color 150ms ease;
    }

    /* Beim Ueberfahren bewusst OHNE die orange Leiste links - sie bleibt dem
       aktiven Eintrag vorbehalten, damit sie ihre Bedeutung behaelt. */
    .navbar-mainnavigation .dropdown-menu .nav-link-dropdown:hover,
    .navbar-mainnavigation .dropdown-menu .nav-link-dropdown:focus-visible {
        background: var(--id4-secondary);
        color: #fff;
        outline: none;
    }

    .navbar-mainnavigation .dropdown-menu .nav-link-dropdown.active {
        color: var(--id4-primary);
        background: rgba(241, 75, 17, 0.06);
        border-left-color: var(--id4-primary);
    }

    .navbar-mainnavigation .dropdown-menu .nav-link-dropdown.active:hover,
    .navbar-mainnavigation .dropdown-menu .nav-link-dropdown.active:focus-visible {
        background: var(--id4-secondary);
        color: #fff;
    }

    /* Dritte Ebene eingerueckt und leiser - sie stand im Bestand nicht im
       Menue, Bootstrap Package 16 gibt sie aber aus. */
    .navbar-mainnavigation .dropdown-menu .dropdown-nav[data-level="3"] {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .navbar-mainnavigation .dropdown-menu .dropdown-nav[data-level="3"] .nav-link-dropdown {
        padding: 9px 24px 9px 44px;
        font-size: 16px;
        color: #6f8391;
        border-top: 1px solid #f2f2f2;
    }

    .navbar-mainnavigation .dropdown-menu .dropdown-nav[data-level="3"] .nav-link-dropdown::before {
        content: "–";
        display: inline-block;
        width: 14px;
        margin-left: -14px;
        color: var(--id4-primary);
    }

    .navbar-mainnavigation .dropdown-menu .dropdown-nav[data-level="3"] .nav-link-dropdown:hover,
    .navbar-mainnavigation .dropdown-menu .dropdown-nav[data-level="3"] .nav-link-dropdown:focus-visible {
        background: var(--id4-secondary);
        color: #fff;
    }
}

/* Aufgeklapptes Untermenue in der mobilen Ansicht */
@media (max-width: 991.98px) {
    .navbar-mainnavigation .dropdown-menu .nav-link-dropdown {
        display: block;
        padding: 11px 20px;
        font-size: 17px;
        color: var(--id4-primary);
    }

    .navbar-mainnavigation .dropdown-menu .nav-item + .nav-item > .nav-link-dropdown {
        border-top: 1px solid #ececec;
    }

    .navbar-mainnavigation .dropdown-menu .nav-link-dropdown.active {
        color: var(--id4-secondary);
        font-weight: 600;
    }

    .navbar-mainnavigation .dropdown-menu .dropdown-nav[data-level="3"] .nav-link-dropdown {
        padding-left: 38px;
        font-size: 15px;
        color: #6f8391;
    }
}

/* --- SEKTIONEN UND RAHMEN --- */
.section-light {
    background: none;
}

.frame-background-light h4 a:not(.btn) {
    color: var(--id4-secondary);
}

.frame-background-light a.more {
    color: #fff;
}

.frame-background-primary,
.frame-background-secondary {
    color: #fff;
}

.frame-background-primary h1,
.frame-background-primary h2,
.frame-background-primary h3,
.frame-background-primary h4,
.frame-background-secondary h1,
.frame-background-secondary h2,
.frame-background-secondary h3,
.frame-background-secondary h4 {
    color: #fff;
}

.frame-ruler-after,
.frame-ruler-before {
    margin-bottom: 0.5em;
    border-color: var(--id4-secondary);
}

/* --- KEYVISUAL / CAROUSEL --- */
.carousel-box {
    background: rgba(255, 255, 255, 0.21) !important;
    border-radius: 3px;
}

.carousel-box h2, .carousel-box .h2,
.carousel-box h3, .carousel-box .h3 {
    color: var(--id4-secondary) !important;
}

.carousel-box h1, .carousel-box .h1 {
    color: var(--id4-primary) !important;
}

.carousel-box .btn-primary {
    background-color: transparent;
    border-color: var(--id4-secondary);
    color: var(--id4-secondary);
}

.carousel-box .btn-primary:hover,
.carousel-box .btn-primary:focus-visible {
    background: var(--id4-secondary);
    color: #fff;
}

/* Deko-Linien im Carousel (Uebernahme aus dem Bestands-Template) */
.pb-linien {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    pointer-events: none;
}

hr.pb-linie {
    border: 0;
    border-top: 5px solid var(--id4-primary);
    margin: 0;
    opacity: 1;
}

/* --- KARTENMENUE --- */
.card-menu .card {
    border: none;
    background-color: var(--id4-primary-bg);
}

.card-menu .card-body {
    padding: 15px;
    text-align: center;
    color: #fff;
}

.card-menu .card-body a {
    display: block;
}

.card-menu .card-footer {
    display: block;
    text-align: center;
}

.card-menu .card-title {
    text-align: center;
}

.card-menu .card a:not(.btn),
.card-menu .card a:not(.btn):hover {
    color: #fff;
    width: 100%;
    display: block;
}

.card-menu .card:hover .card-footer,
.card-menu .card:hover .card-body,
.card-menu .card:focus-within .card-footer,
.card-menu .card:focus-within .card-body {
    background-color: var(--id4-primary-dark);
    transition: background-color 200ms;
}

.card-menu .card:hover a,
.card-menu .card:focus-within a {
    color: #fff;
}

@media (max-width: 991.98px) {
    .card-menu .card-title {
        font-size: 1.05em;
        font-weight: 600;
    }
}

/* --- SCHALTFLAECHEN --- */
.btn {
    margin-top: 15px;
    padding: 10px 25px;
}

/* Bootstrap 5 errechnet die Schriftfarbe automatisch aus dem Hintergrund und
   landet auf Orange bei Schwarz. Der Bestand hat weisse Schrift. */
.btn-primary,
.btn-secondary,
.btn-tertiary {
    --bs-btn-color: #ffffff;
    --bs-btn-hover-color: #ffffff;
    --bs-btn-active-color: #ffffff;
    --bs-btn-disabled-color: #ffffff;
    color: #ffffff;
}

/* Orange Schaltflaechen auf den kontrastsicheren Ton - siehe --id4-primary-bg. */
.btn-primary {
    --bs-btn-bg: var(--id4-primary-bg);
    --bs-btn-border-color: var(--id4-primary-bg);
    --bs-btn-disabled-bg: var(--id4-primary-bg);
    --bs-btn-disabled-border-color: var(--id4-primary-bg);
}

.btn-outline-primary {
    --bs-btn-color: var(--id4-primary-bg);
    --bs-btn-border-color: var(--id4-primary-bg);
    --bs-btn-hover-bg: var(--id4-primary-bg);
    --bs-btn-hover-border-color: var(--id4-primary-bg);
}

.btn-primary:hover,
.btn-primary:focus-visible,
.btn-primary:active,
.btn-secondary:hover,
.btn-secondary:focus-visible,
.btn-secondary:active,
.btn-tertiary:hover,
.btn-tertiary:focus-visible,
.btn-tertiary:active {
    color: #ffffff;
}

/* Umrandete Varianten: gefuellter Zustand ebenfalls weiss */
.btn-outline-primary,
.btn-outline-secondary,
.btn-outline-tertiary {
    --bs-btn-hover-color: #ffffff;
    --bs-btn-active-color: #ffffff;
}

.btn-outline-default {
    border-color: #ffffff;
    color: #fff;
}

/* --- BILDMENUE --- */
.thumbnail-menu-caption-title {
    color: #fff !important;
}

/* --- TRENNLINIEN --- */
.frame > hr,
.frame-inner > hr {
    border: 0;
    border-top: 5px solid var(--id4-primary);
    margin: 0;
    padding: 0;
    margin-top: -1em;
    opacity: 1;
}

/* --- AUFZAEHLUNG MIT HAKEN --- */
.list-normal li {
    display: block;
    padding-left: 30px;
}

.list-normal li::before {
    content: "\2713";
    float: left;
    margin-left: -35px;
    color: var(--id4-primary);
}

/* --- ICONGRUPPE --- */
.icongroup-item-icon svg path {
    fill: var(--id4-primary);
}

/* --- ZITAT --- */
blockquote {
    padding: 0 0 0 55px;
    border: none;
    font-size: inherit;
    background: url("../Images/quote-left-solid.png") no-repeat left top;
}

/* --- NEWS --- */
.news-list-view .article .news-img-wrap,
.news-list-view .news-list-date {
    display: none !important;
}

.news-list-view .more {
    padding: 10px 20px;
    background: var(--id4-primary-bg);
    display: inline-block;
    color: #fff;
}

.news-single .teaser-text {
    font-size: inherit;
    color: var(--id4-primary);
}

.news-backlink-wrap {
    margin-top: 50px;
    padding: 10px 20px;
    background: var(--id4-primary-bg);
    display: inline-block;
}

.news-backlink-wrap a {
    color: #fff;
}

.article .news-list-date {
    color: var(--id4-secondary);
}

.news .footer {
    border: none;
}

/* ===========================================================================
   ANGLEICHUNG AN DEN BESTAND
   Werte aus der Messung der Bestandsseite (Bootstrap 3 / Bootstrap Package 11).
   Bootstrap Package 16 bietet dafuer keine Einstellungen, daher hier als CSS.
   Nicht angeglichen: Containerbreite - bleibt beim Standard von BP 16.
   =========================================================================== */

/* --- GRUNDSCHRIFT: 18px / 1.65 statt 16px / 1.5 --- */
:root {
    --bs-body-font-size: 18px;
    --bs-body-line-height: 1.65;
}

body {
    font-size: 18px;
    line-height: 1.65;
}

/* --- UEBERSCHRIFTEN: Groessenstaffelung des Bestands nachgebildet ---
   Bestand: font-size-base 18px, h1 1.253em, h2 1.123em, h3 1.031em, h4 0.9em
   mal Skalierung sm 1.00 (< 768px), md 1.30 (768-1199px), lg 1.63 (>= 1200px) */
h1, .h1 { font-size: 22.554px; }
h2, .h2 { font-size: 20.214px; }
h3, .h3 { font-size: 18.558px; }
h4, .h4 { font-size: 16.200px; }

@media (min-width: 768px) {
    h1, .h1 { font-size: 29.320px; }
    h2, .h2 { font-size: 26.278px; }
    h3, .h3 { font-size: 24.125px; }
    h4, .h4 { font-size: 21.060px; }
}

@media (min-width: 1200px) {
    h1, .h1 { font-size: 36.763px; }
    h2, .h2 { font-size: 32.949px; }
    h3, .h3 { font-size: 30.250px; }
    h4, .h4 { font-size: 26.406px; }
}

h1, .h1, h2, .h2, h3, .h3 { line-height: 1.3; }

/* --- NAVIGATIONSLEISTE: Hoehe und Logo wie im Bestand --- */
@media (min-width: 992px) {
    /* Im Bestand schrumpft die Leiste beim Scrollen von 140px auf 70px;
       Bootstrap Package setzt dafuer beim Scrollen die Klasse
       "navbar-transition". Ohne diese Staffelung wuerde die feste Hoehe das
       Schrumpfen blockieren. */
    .navbar-mainnavigation:not(.navbar-transition) {
        --mainnavigation-nav-height: 140px;
    }

    .navbar-mainnavigation.navbar-transition {
        --mainnavigation-nav-height: 70px;
    }

    .navbar-mainnavigation:not(.navbar-transition) .navbar-brand-image img {
        height: 65px;
        width: auto;
        max-height: none;
    }

    /* Logo im eingefahrenen Zustand: im Bestand gemessen 64px bei 70px
       Leistenhoehe - es fuellt die Leiste also fast aus. */
    .navbar-mainnavigation.navbar-transition .navbar-brand-image img {
        height: 58px;
        width: auto;
        max-height: none;
    }

    .navbar-mainnavigation.navbar-transition .navbar-brand-image {
        padding-top: 0;
        padding-bottom: 0;
    }
}

.navbar-mainnavigation .navbar-nav > .nav-item > .nav-link {
    padding: 8px 15px;
    font-size: 18px;
}

/* --- INHALTSABSTAENDE: 54px bzw. 63px wie im Bestand (statt 42px) --- */
.frame-default {
    padding-top: 54px;
    padding-bottom: 54px;
}

@media (min-width: 1200px) {
    .frame-default {
        padding-top: 63px;
        padding-bottom: 63px;
    }
}

/* --- FUSSBEREICH: Markenfarbe statt Dunkelgrau --- */
.footer-section-content {
    background-color: var(--id4-primary-bg) !important;
    color: #fff;
}

.footer-section-meta {
    background-color: var(--id4-primary-dark) !important;
    color: #fff;
}

/* Bootstrap 5 faerbt Links ueber --bs-link-color - auf dem orangen Grund
   ergibt das Orange auf Orange. Im Bestand sind sie weiss. */
.footer-section-content,
.footer-section-meta {
    --bs-link-color: #ffffff;
    --bs-link-color-rgb: 255, 255, 255;
    --bs-link-hover-color: #ffffff;
    --bs-link-hover-color-rgb: 255, 255, 255;
}

.footer-section-content,
.footer-section-meta,
.footer-section-content h1, .footer-section-content h2,
.footer-section-content h3, .footer-section-content h4 {
    color: #fff;
}

.footer-section-content a:not(.btn) {
    color: #fff;
    text-decoration: none;
}

/* Weiss, nicht hellgrau: #ddd auf dem Orange der Fusszeile (#c83d0c) ergibt
   nur 3.74:1 und faellt damit unter die von WCAG AA geforderten 4.5:1.
   Weiss kommt auf 5.09:1 und besteht die Pruefung. */
.footer-section-meta a:not(.btn) {
    color: #fff;
    text-decoration: none;
}

.footer-section-content a:not(.btn):hover,
.footer-section-content a:not(.btn):focus-visible {
    color: #fff;
    text-decoration: underline;
}

.footer-section-meta a:not(.btn):hover,
.footer-section-meta a:not(.btn):focus-visible {
    color: #fff;
    text-decoration: underline;
}

/* --- AKKORDEON: Beschriftung wie im Bestand (Markenfarbe, 19.8px, getoenter Kopf) --- */
.accordion {
    /* Bootstrap 5 steuert das Akkordeon ueber eigene Variablen */
    --bs-accordion-btn-color: var(--id4-primary);
    --bs-accordion-active-color: var(--id4-primary);
    --bs-accordion-btn-bg: rgba(0, 0, 0, 0.03);
    --bs-accordion-active-bg: rgba(0, 0, 0, 0.06);
    --bs-accordion-border-color: rgba(0, 0, 0, 0.125);
    --bs-accordion-btn-focus-box-shadow: none;
}

.accordion-button {
    /* Bootstrap Package 16 vererbt die Textfarbe nur, daher hier direkt setzen */
    color: var(--id4-primary);
    font-family: 'Montserrat', sans-serif;
    font-size: 19.8px;
    font-weight: 400;
}

.accordion-button:not(.collapsed) {
    color: var(--id4-primary);
}

.accordion-button:not(.collapsed) {
    box-shadow: none;
}

.accordion-button:focus-visible {
    outline: 3px solid var(--id4-secondary);
    outline-offset: -3px;
    box-shadow: none;
}

.accordion-item {
    border-color: rgba(0, 0, 0, 0.125);
}


/* --- CAROUSEL: Bildspalte wie im Bestand ---
   Bootstrap Package 11 hat die Folie als Tabelle mit zwei gleich breiten
   Zellen (je 670px) angelegt, das Foto war 600px breit. Version 16 nutzt Flex
   und gibt dem Text fast die ganze Breite - das Foto schrumpft auf 239px. */
@media (min-width: 992px) {
    .carousel-content-inner {
        align-items: center;
    }

    .carousel-content-inner > .carousel-text {
        flex: 1 1 50%;
        min-width: 0;
    }

    .carousel-content-inner > .carousel-image {
        flex: 0 1 50%;
        min-width: 0;
        text-align: center;
    }

    .carousel-content-inner > .carousel-image img {
        width: 100%;
        max-width: 600px;
        height: auto;
    }
}

/* --- BILDER NICHT ÜBER IHRE NATÜRLICHE GRÖSSE DEHNEN ---
   Bootstrap Package 16 setzt "width: 100%" auf Bilder in Galerien. Ein Logo
   mit 369px Breite wird dadurch auf die Spaltenbreite gedehnt und wirkt
   unscharf. Version 11 hat nur "max-width: 100%" gesetzt: groessere Bilder
   fuellen die Spalte, kleinere bleiben in ihrer eigenen Groesse.
   Gilt bewusst nur fuer Galerie-Bilder - Kachelmenue und Carousel sind
   ausgenommen, dort ist das Fuellen gewollt. */
.main-section .gallery-item img,
.footer-section-content .gallery-item img,
.footer-section-meta .gallery-item img,
.body-bg > .frame .gallery-item img {
    width: auto;
    max-width: 100%;
    height: auto;
}

/* --- FUSSBEREICH: Claim naeher ans Logo ---
   Auf Kundenwunsch. Logo-Block und Claim-Block haben je 63px Innenabstand,
   dadurch standen sie rund 84px auseinander (Bestand: 63px). */
.footer-section-content .frame-type-image {
    padding-bottom: 32px;
}

.footer-section-content .frame-type-image + .frame-type-text {
    padding-top: 34px;
}

/* --- SPRUNGLINKS: Kontrast --- */
/* Die Sprunglinks werden nur bei Tastaturbedienung sichtbar. Sie standen in
   der Markenfarbe auf Weiss - 3.65:1 und damit unter den von WCAG AA
   geforderten 4.5:1. Umgedreht: weisse Schrift auf der Markenfarbe im
   dunkleren Ton (#c83d0c) ergibt 5.09:1 und faellt beim Bedienen staerker
   auf, was bei einem Sprunglink erwuenscht ist. */
/* Auch unfokussiert kontrastsicher: das Element ist nur zugeschnitten, nicht
   ausgeblendet, und wird von Pruefwerkzeugen mitgemessen. */
.page-skip-link {
    color: var(--id4-primary-bg);
}

.page-skip-link:focus,
.page-skip-link:focus-visible {
    display: inline-block;
    padding: 12px 20px;
    color: #fff;
    background: var(--id4-primary-dark, #c83d0c);
    text-decoration: underline;
    outline: 3px solid #fff;
    outline-offset: -6px;
}

/* --- FLIESSTEXT-LINKS: Kontrast --- */
/* Bootstrap Package faerbt Links in der Markenfarbe #f14b11. Das ergibt
   3.65:1 auf Weiss und nur 3.01:1 auf den hellgrauen Inhaltsbloecken
   (#e9e9e9) - beides unter den von WCAG AA geforderten 4.5:1.
   #be3b0d ist der hellste Ton der Markenfamilie, der BEIDE Untergruende
   besteht: 5.50:1 auf Weiss, 4.53:1 auf Grau.
   Gilt nur fuer Links im Inhalt - Navigation, Schaltflaechen und Fusszeile
   setzen ihre Farben selbst und bleiben unberuehrt. */
:root {
    --bs-link-color: #be3b0d;
    --bs-link-color-rgb: 190, 59, 13;
    --bs-link-hover-color: #942e0a;
    --bs-link-hover-color-rgb: 148, 46, 10;
}

/* Bootstrap Package faerbt <a> unmittelbar aus der SCSS-Variablen und nicht
   ueber --bs-link-color. Die Variablen oben reichen deshalb nicht; es braucht
   eine eigene Regel. Bewusst auf den Inhaltsbereich begrenzt - Fusszeile,
   Navigation, Kacheln und Schaltflaechen bringen ihre Farben selbst mit. */
.main-section a:not(.btn):not(.card-link),
.body-bg > .frame a:not(.btn):not(.card-link) {
    color: #be3b0d;
}

.main-section a:not(.btn):not(.card-link):hover,
.main-section a:not(.btn):not(.card-link):focus-visible,
.body-bg > .frame a:not(.btn):not(.card-link):hover,
.body-bg > .frame a:not(.btn):not(.card-link):focus-visible {
    color: #942e0a;
}

/* --- KARUSSELL: Beschriftung der Sprungmarken sauber ausblenden --- */
/* Bootstrap Package legt den Folientitel als <span> in die Sprungmarke. Der
   Knopf ist 30px breit, der Text laeuft mit 132px darueber hinaus - weiss auf
   weiss. Unsichtbar fuer Sehende, aber Pruefwerkzeuge melden es als
   Kontrastfehler. Die Schaltflaeche traegt bereits ein aria-label
   ("Zu Folie wechseln: …"), das den Text ohnehin ersetzt; der span wird
   deshalb korrekt vor der Darstellung verborgen und bleibt zugaenglich. */
.carousel-indicators button > span {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}