/* TBZ Mitte – Variante 1: Modern Technical
   Nach nl-tbz_bremen.css einbinden. */
:root{
  --tbz-blue:#005baa; --tbz-blue-dark:#073b5c; --tbz-orange:#ff780e;
  --tbz-bg:#f4f7f9; --tbz-card:#fff; --tbz-text:#1f2d35; --tbz-muted:#64727b;
  --tbz-border:#dbe4e9; --tbz-radius:14px; --tbz-shadow:0 8px 28px rgba(22,45,58,.08);
}
body{background:var(--tbz-bg);color:var(--tbz-text);font-family:'Open Sans',Arial,sans-serif;font-size:16px;line-height:1.65;}
#main-header{background:#fff !important;border-bottom:1px solid var(--tbz-border);box-shadow:0 3px 16px rgba(20,40,50,.07);}
#main-header .logo{
  display:inline-flex;
  align-items:center;
  background:#fff;
  padding:9px 14px;
  margin:10px 0;
  border:1px solid #dce6eb;
  border-radius:12px;
  box-shadow:0 4px 14px rgba(23,48,62,.08);
}
#main-header .logo img{
  display:block;
  max-height:86px;
  width:auto;
}
.menu-container,.menu{background:#fff;}
.menu a{color:var(--tbz-text) !important;font-weight:600;text-decoration:none;}
.menu a:hover{color:var(--tbz-blue) !important;}
.sprachwechsel{padding-top:8px;opacity:.9;}
.container{max-width:1480px !important;width:92%;}
.jumbotron-tbz-startseite{height:540px !important;position:relative;border-radius:0 0 24px 24px;overflow:hidden;}
.jumbotron-tbz-startseite:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(7,39,58,.60),rgba(7,39,58,.16));}
.jumbotron-tbz-startseite>.container{position:relative;z-index:1;}
.jumbotron-tbz-startseite h1{font-size:64px !important;letter-spacing:-.03em;}
.jumbotron-tbz-startseite .tbz-h1-sub{font-size:26px !important;}
.jumbotron-tbz-startseite .btn{border:0;border-radius:12px;padding:13px 22px;margin:6px;box-shadow:0 8px 18px rgba(0,0,0,.16);transition:.18s ease;}
.jumbotron-tbz-startseite .btn:hover{transform:translateY(-2px);margin-top:6px;}
#single-blog{padding-top:26px;}
.main{background:var(--tbz-card);border:1px solid var(--tbz-border);border-radius:var(--tbz-radius);padding:28px 32px;box-shadow:var(--tbz-shadow);}
h1,h2,h3,h4,h5{font-family:'Raleway','Open Sans',sans-serif;color:var(--tbz-text);}
h1{font-size:clamp(2rem,4vw,3rem);letter-spacing:-.025em;}
.main h2,.startseite h2{background:transparent;border-left:0;padding:0 0 10px;margin-top:28px;border-bottom:2px solid var(--tbz-border);font-size:1.55em;position:relative;}
.main h2:after,.startseite h2:after{content:"";position:absolute;left:0;bottom:-2px;width:72px;height:3px;background:var(--tbz-orange);border-radius:3px;}
h3{font-size:1.25em;}
p,li{color:var(--tbz-text);}
a{color:var(--tbz-blue);text-underline-offset:3px;}
.tbz-sidebar,.sidebar-erweiterung{background:#fff;border:1px solid var(--tbz-border);border-radius:var(--tbz-radius);box-shadow:var(--tbz-shadow);padding:18px;margin-bottom:22px;}
.tbz-sidebar h2,.sidebar-erweiterung h2{background:transparent;color:var(--tbz-blue-dark);border:0;padding:.2em 0 .55em;margin-top:0;}
.tbz-sidebar ul{padding-left:20px;}
.tbz-sidebar ul li{background:transparent;margin-left:0;padding:5px 0;}
.news_event_box,.bilder_sidebar_box,.toolbox_container{background:transparent;}
.breadcrumbs{background:#fff;border:1px solid var(--tbz-border);border-radius:10px;padding:10px 14px;margin-bottom:18px;}
table{background:#fff;border:1px solid var(--tbz-border);border-radius:10px;overflow:hidden;}
tbody tr:nth-child(even) td{background:#f6f9fb;}
.nl-tbz-footer{background:#152630;border:0;margin-top:55px;padding-top:28px;}
.nl-tbz-footer .footer-title{color:#fff;letter-spacing:.03em;}.nl-tbz-footer p{color:#c4d0d6}.nl-tbz-footer a{color:#e7f2f7;}
@media(max-width:992px){.container{width:94%;}.main{padding:24px}.jumbotron-tbz-startseite h1{font-size:40px !important}}
@media(max-width:576px){body{font-size:15px}.container{width:92%}.main{padding:20px 18px;border-radius:10px}.tbz-sidebar{box-shadow:none}.nl-tbz-footer{margin-top:30px}#main-header .logo{padding:7px 10px;margin:8px 0;border-radius:10px}#main-header .logo img{max-height:72px}}


/* ===== Mega-Menü Override ===== */
.menu-container{background:#fff !important;border-top:1px solid rgba(219,228,233,.65);}
.menu > ul{max-width:1480px;margin:0 auto;}
.menu > ul > li{background:#fff !important;position:relative;transition:background-color .18s ease;}
.menu > ul > li > a{padding:1.15em 1em !important;color:var(--tbz-text) !important;font-weight:600;position:relative;}
.menu > ul > li > a:after{content:"";position:absolute;left:1em;right:1em;bottom:0;height:3px;background:var(--tbz-blue);transform:scaleX(0);transform-origin:center;transition:transform .18s ease;border-radius:3px 3px 0 0;}
.menu > ul > li:hover{background:#f6f9fb !important;}
.menu > ul > li:hover > a,.menu > ul > li > a:hover{color:var(--tbz-blue) !important;}
.menu > ul > li:hover > a:after{transform:scaleX(1);}
.menu > ul > li > ul{background:#fff !important;padding:26px 28px 30px !important;border-top:1px solid var(--tbz-border);border-bottom:1px solid var(--tbz-border);box-shadow:0 18px 35px rgba(22,45,58,.13);}
.menu > ul > li > ul > li{padding:0 18px 10px 0;}
.menu > ul > li > ul > li > a{color:var(--tbz-blue-dark) !important;font-weight:700;padding:.35em 0 .6em !important;border-bottom:2px solid #d9e5eb !important;}
.menu > ul > li > ul > li > ul{margin-top:6px !important;}
.menu > ul > li > ul > li > ul > li{padding:5px 0 !important;font-size:.92em !important;}
.menu > ul > li > ul > li > ul > li a{color:#52636d !important;padding:.38em .3em !important;border-radius:6px;transition:background-color .15s ease,color .15s ease,padding-left .15s ease;}
.menu > ul > li > ul > li > ul > li a:hover{background:#eef5f8;color:var(--tbz-blue) !important;padding-left:.65em !important;}
.menu > ul > li > ul.normal-sub{width:330px !important;padding:12px 18px !important;border-radius:0 0 10px 10px;}
.menu > ul > li > ul.normal-sub > li a{padding:.75em .5em !important;border-radius:6px;}
.menu-mobile{background:#fff;color:var(--tbz-text);border-top:1px solid var(--tbz-border);font-weight:600;}
.menu-mobile span{color:var(--tbz-blue) !important;}
@media only screen and (max-width:959px){
  .menu-container{border-top:1px solid var(--tbz-border);}
  .menu-mobile{padding:12px 16px !important;min-height:52px;}
  .menu > ul{max-width:none;background:#fff;box-shadow:0 12px 24px rgba(22,45,58,.09);}
  .menu > ul > li{border-top:1px solid #edf2f4;}
  .menu > ul > li > a{padding:1em 1.15em !important;}
  .menu > ul > li > a:after{display:none;}
  .menu-dropdown-icon:before{background:transparent !important;color:var(--tbz-blue) !important;padding:1em 1.2em !important;}
  .menu > ul > li > ul{padding:10px 18px 18px !important;box-shadow:none;border-top:1px solid var(--tbz-border);border-bottom:0;}
  .menu > ul > li > ul > li{padding-right:0;margin-top:12px !important;}
  .menu > ul > li > ul > li > a{font-size:1em;}
  .menu > ul > li > ul > li > ul > li a{padding:.55em .4em !important;}
  .menu > ul > li > ul.normal-sub{width:100% !important;border-radius:0;}
}

/* =====================================================
   Breiterer Contentbereich
   ===================================================== */

.container {
    max-width: 1920px !important;
    width: 97% !important;
}

/* =====================================================
   Bildungsangebote – moderne Link-Kacheln
   ===================================================== */

.three-col .teaser > ul {
    list-style: none;
    margin: 20px 0 25px 0;
    padding: 0;
}

.three-col .teaser > ul > li {
    margin: 8px 0;
    padding: 0;
}

.three-col .teaser > ul > li > a {
    position: relative;
    display: flex;
    align-items: center;

    min-height: 48px;

    padding: 10px 42px 10px 16px;

    background: #f5f8fa;
    border: 1px solid #dce5ea;
    border-radius: 9px;

    color: #23404f !important;
    font-weight: 600;
    line-height: 1.35;
    text-decoration: none !important;

    transition:
        background-color 0.2s ease,
        border-color 0.2s ease,
        transform 0.2s ease,
        box-shadow 0.2s ease;
}


/* Pfeil rechts */
.three-col .teaser > ul > li > a::after {
    content: "›";

    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-52%);

    font-size: 26px;
    font-weight: 400;
    line-height: 1;

    color: #0074ad;

    transition: transform 0.2s ease;
}


/* Hover */
.three-col .teaser > ul > li > a:hover {
    background: #ffffff;
    border-color: #9fc7db;

    transform: translateX(4px);

    box-shadow: 0 5px 14px rgba(20, 55, 72, 0.09);
}

.three-col .teaser > ul > li > a:hover::after {
    transform: translate(3px, -52%);
}


/* Vorhandene <br>-Umbrüche funktionieren weiterhin */
.three-col .teaser > ul > li > a br {
    display: block;
}

/* =====================================================
   Farbakzente entsprechend der Bildungsbereiche
   ===================================================== */

/* Studienqualifizierung */
.three-col .teaser.rot-weiss > ul > li > a {
    border-left: 4px solid #c94c4c;
}

.three-col .teaser.rot-weiss > ul > li > a::after {
    color: #c94c4c;
}


/* Duale Berufsausbildung */
.three-col .teaser.blau-weiss > ul > li > a {
    border-left: 4px solid #0074ad;
}

.three-col .teaser.blau-weiss > ul > li > a::after {
    color: #0074ad;
}


/* Berufsvorbereitung */
.three-col .teaser.gruen-weiss > ul > li > a {
    border-left: 4px solid #4b8f6a;
}

.three-col .teaser.gruen-weiss > ul > li > a::after {
    color: #4b8f6a;
}

/* =====================================================
   Duale Berufsausbildung – Bereichskarten
   ===================================================== */

:is(
    body#index,
    body#duale-teilzeitbildung,
    body#berufsvorbereitung,
    body#studienqualifizierung
) .three-col:has(> .col-md-4:not(.teaser)) > .col-md-4 {
    background: #ffffff;
    border: 1px solid #dfe7eb;
    border-radius: 14px;
    padding: 22px;
    box-shadow: 0 5px 18px rgba(20, 55, 72, 0.06);
}


/* Überschriften der drei Berufsbereiche */
:is(
    body#index,
    body#duale-teilzeitbildung,
    body#berufsvorbereitung,
    body#studienqualifizierung
) .three-col:has(> .col-md-4:not(.teaser)) > .col-md-4 > h2 {
    margin-top: 0;
    margin-bottom: 16px;

    font-size: 1.55rem;
    line-height: 1.2;
    color: #183847;
}


/* Leere h4 aus dem GetSimple-Content ausblenden */
:is(
    body#index,
    body#duale-teilzeitbildung,
    body#berufsvorbereitung,
    body#studienqualifizierung
) .three-col:has(> .col-md-4:not(.teaser)) > .col-md-4 > h4:empty,
:is(
    body#index,
    body#duale-teilzeitbildung,
    body#berufsvorbereitung,
    body#studienqualifizierung
) .three-col:has(> .col-md-4:not(.teaser)) > .col-md-4 > h4 {
    min-height: 0;
    margin: 0;
    padding: 0;
}


/* Bereichsbilder */
:is(
    body#index,
    body#duale-teilzeitbildung,
    body#berufsvorbereitung,
    body#studienqualifizierung
) .three-col:has(> .col-md-4:not(.teaser)) > .col-md-4 > p:first-of-type {
    margin: 0 0 18px 0;
}

:is(
    body#index,
    body#duale-teilzeitbildung,
    body#berufsvorbereitung,
    body#studienqualifizierung
) .three-col:has(> .col-md-4:not(.teaser)) > .col-md-4 > p:first-of-type img {
    display: block;

    width: 100%;
    height: 190px;
    object-fit: cover;

    border-radius: 10px;

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}


/* leichter Hover-Effekt */
:is(
    body#index,
    body#duale-teilzeitbildung,
    body#berufsvorbereitung,
    body#studienqualifizierung
) .three-col:has(> .col-md-4:not(.teaser)) > .col-md-4:hover > p:first-of-type img {
    transform: scale(1.015);
    box-shadow: 0 7px 18px rgba(20, 55, 72, 0.11);
}

/* =====================================================
   Duale Berufsausbildung – Ausbildungsberufe
   ===================================================== */

:is(
    body#index,
    body#duale-teilzeitbildung,
    body#berufsvorbereitung,
    body#studienqualifizierung
) .three-col:has(> .col-md-4:not(.teaser)) > .col-md-4 > ul {
    list-style: none;

    margin: 0;
    padding: 0;
}


:is(
    body#index,
    body#duale-teilzeitbildung,
    body#berufsvorbereitung,
    body#studienqualifizierung
) .three-col:has(> .col-md-4:not(.teaser)) > .col-md-4 > ul > li {
    margin: 7px 0;
    padding: 0;
}


/* Hauptlinks */
:is(
    body#index,
    body#duale-teilzeitbildung,
    body#berufsvorbereitung,
    body#studienqualifizierung
) .three-col:has(> .col-md-4:not(.teaser)) > .col-md-4 > ul > li > a:first-child {
    position: relative;

    display: flex;
    align-items: center;

    min-height: 46px;

    padding: 9px 38px 9px 14px;

    background: #f5f8fa;

    border: 1px solid #dce5ea;
    border-left: 4px solid #0074ad;

    border-radius: 8px;

    color: #23404f !important;

    font-weight: 600;
    line-height: 1.35;

    text-decoration: none !important;

    transition:
        background-color 0.18s ease,
        border-color 0.18s ease,
        transform 0.18s ease,
        box-shadow 0.18s ease;
}


/* Pfeil */
:is(
    body#index,
    body#duale-teilzeitbildung,
    body#berufsvorbereitung,
    body#studienqualifizierung
) .three-col:has(> .col-md-4:not(.teaser)) > .col-md-4 > ul > li > a:first-child::after {
    content: "›";

    position: absolute;

    right: 13px;
    top: 50%;

    transform: translateY(-52%);

    font-size: 23px;
    font-weight: 400;

    color: #0074ad;

    transition: transform 0.18s ease;
}


/* Hover */
:is(
    body#index,
    body#duale-teilzeitbildung,
    body#berufsvorbereitung,
    body#studienqualifizierung
) .three-col:has(> .col-md-4:not(.teaser)) > .col-md-4 > ul > li > a:first-child:hover {
    background: #ffffff;

    border-color: #9fc7db;
    border-left-color: #0074ad;

    transform: translateX(3px);

    box-shadow: 0 4px 12px rgba(20, 55, 72, 0.08);
}

:is(
    body#index,
    body#duale-teilzeitbildung,
    body#berufsvorbereitung,
    body#studienqualifizierung
) .three-col:has(> .col-md-4:not(.teaser)) > .col-md-4 > ul > li > a:first-child:hover::after {
    transform: translate(2px, -52%);
}

/* =====================================================
   Unterpunkte innerhalb eines Ausbildungsberufs
   z.B. Informationselektroniker
   ===================================================== */

:is(
    body#index,
    body#duale-teilzeitbildung,
    body#berufsvorbereitung,
    body#studienqualifizierung
) .three-col:has(> .col-md-4:not(.teaser)) > .col-md-4 > ul > li > ul {
    list-style: none;

    margin: 7px 0 12px 16px;
    padding: 0 0 0 12px;

    border-left: 2px solid #c9dde7;
}


:is(
    body#index,
    body#duale-teilzeitbildung,
    body#berufsvorbereitung,
    body#studienqualifizierung
) .three-col:has(> .col-md-4:not(.teaser)) > .col-md-4 > ul > li > ul > li {
    margin: 5px 0;
}


:is(
    body#index,
    body#duale-teilzeitbildung,
    body#berufsvorbereitung,
    body#studienqualifizierung
) .three-col:has(> .col-md-4:not(.teaser)) > .col-md-4 > ul > li > ul > li > a {
    display: block;

    padding: 7px 10px;

    background: #ffffff;

    border-radius: 6px;

    color: #4a6877 !important;

    font-size: 0.93rem;
    font-weight: 500;

    text-decoration: none !important;

    transition:
        background-color 0.18s ease,
        color 0.18s ease,
        padding-left 0.18s ease;
}


:is(
    body#index,
    body#duale-teilzeitbildung,
    body#berufsvorbereitung,
    body#studienqualifizierung
) .three-col:has(> .col-md-4:not(.teaser)) > .col-md-4 > ul > li > ul > li > a:hover {
    background: #eef6fa;
    color: #0074ad !important;

    padding-left: 14px;
}

/* =====================================================
   Abstand zwischen den drei Berufsbereich-Karten
   Drei Spalten mit sauberem Abstand
   ===================================================== */

:is(
    body#index,
    body#duale-teilzeitbildung,
    body#berufsvorbereitung,
    body#studienqualifizierung
) .three-col:has(> .col-md-4:not(.teaser)) {
    display: flex;
    flex-wrap: nowrap;
    gap: 18px;
}

/* Bootstrap-Spaltenbreite überschreiben */
:is(
    body#index,
    body#duale-teilzeitbildung,
    body#berufsvorbereitung,
    body#studienqualifizierung
) .three-col:has(> .col-md-4:not(.teaser)) > .col-md-4 {
    float: none;
    width: auto !important;
    max-width: none !important;

    flex: 1 1 0;
    min-width: 0;
}


/* Tablet / Smartphone: Karten untereinander */
@media (max-width: 991px) {

    :is(
    body#index,
    body#duale-teilzeitbildung,
    body#berufsvorbereitung,
    body#studienqualifizierung
) .three-col:has(> .col-md-4:not(.teaser)) {
        flex-wrap: wrap;
    }

    :is(
    body#index,
    body#duale-teilzeitbildung,
    body#berufsvorbereitung,
    body#studienqualifizierung
) .three-col:has(> .col-md-4:not(.teaser)) > .col-md-4 {
        flex: 0 0 100%;
        width: 100% !important;
    }

}


/* =====================================================
   Duale Berufsausbildung – Unterpunkte als kleine Karten
   z.B. Informationselektroniker: Bürosystemtechnik /
   Geräte und Systeme
   ===================================================== */

:is(
    body#index,
    body#duale-teilzeitbildung,
    body#berufsvorbereitung,
    body#studienqualifizierung
) .three-col:has(> .col-md-4:not(.teaser))
> .col-md-4 > ul > li > ul {
    list-style: none;
    margin: 8px 0 14px 18px;
    padding: 7px 0 7px 18px;
    border-left: 3px solid #9bcfe5;
}

:is(
    body#index,
    body#duale-teilzeitbildung,
    body#berufsvorbereitung,
    body#studienqualifizierung
) .three-col:has(> .col-md-4:not(.teaser))
> .col-md-4 > ul > li > ul > li {
    margin: 7px 0;
    padding: 0;
}

:is(
    body#index,
    body#duale-teilzeitbildung,
    body#berufsvorbereitung,
    body#studienqualifizierung
) .three-col:has(> .col-md-4:not(.teaser))
> .col-md-4 > ul > li > ul > li > a {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 42px;
    padding: 8px 36px 8px 14px;

    background: #ffffff;
    border: 1px solid #dce5ea;
    border-left: 4px solid #55b3d9;
    border-radius: 8px;

    color: #23404f !important;
    font-size: 1.25rem !important;
    font-weight: 600 !important;
    line-height: 1.3;
    text-decoration: none !important;

    box-shadow: 0 2px 7px rgba(20,55,72,.035);

    transition:
        background-color .18s ease,
        border-color .18s ease,
        transform .18s ease,
        box-shadow .18s ease;
}

:is(
    body#index,
    body#duale-teilzeitbildung,
    body#berufsvorbereitung,
    body#studienqualifizierung
) .three-col:has(> .col-md-4:not(.teaser))
> .col-md-4 > ul > li > ul > li > a::after {
    content: "›";
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-52%);
    color: #0084bd;
    font-size: 21px;
    font-weight: 500;
    line-height: 1;
    transition: transform .18s ease;
}

:is(
    body#index,
    body#duale-teilzeitbildung,
    body#berufsvorbereitung,
    body#studienqualifizierung
) .three-col:has(> .col-md-4:not(.teaser))
> .col-md-4 > ul > li > ul > li > a:hover {
    background: #f5fafc;
    border-color: #b9d9e7;
    border-left-color: #0084bd;
    color: #005baa !important;
    padding-left: 14px;
    transform: translateX(3px);
    box-shadow: 0 4px 12px rgba(20,55,72,.07);
}

:is(
    body#index,
    body#duale-teilzeitbildung,
    body#berufsvorbereitung,
    body#studienqualifizierung
) .three-col:has(> .col-md-4:not(.teaser))
> .col-md-4 > ul > li > ul > li > a:hover::after {
    transform: translate(2px, -52%);
}

@media (max-width: 576px) {
    :is(
    body#index,
    body#duale-teilzeitbildung,
    body#berufsvorbereitung,
    body#studienqualifizierung
) .three-col:has(> .col-md-4:not(.teaser))
    > .col-md-4 > ul > li > ul {
        margin-left: 8px;
        padding-left: 12px;
    }

    :is(
    body#index,
    body#duale-teilzeitbildung,
    body#berufsvorbereitung,
    body#studienqualifizierung
) .three-col:has(> .col-md-4:not(.teaser))
    > .col-md-4 > ul > li > ul > li > a {
        font-size: 0.92rem !important;
    }
}

:is(
    body#index,
    body#duale-teilzeitbildung,
    body#berufsvorbereitung,
    body#studienqualifizierung
) .three-col:has(> .col-md-4:not(.teaser))
> .col-md-4 > ul > li > ul > li > a {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 42px;
    padding: 8px 36px 8px 14px;

    background: #ffffff;
    border: 1px solid #dce5ea;
    border-left: 4px solid #55b3d9;
    border-radius: 8px;

    color: #23404f !important;
    font-size: 1.05rem !important;
    font-weight: 600 !important;
    line-height: 1.3;
    text-decoration: none !important;
}


/* =====================================================
   STARTSEITE – drei farbige Bildungsbereiche als Karten
   ===================================================== */

/* Drei Teaser-Spalten mit Abstand */
body#index .three-col:has(> .teaser) {
    display: flex;
    flex-wrap: nowrap;
    gap: 18px;
}

/* Die drei Startseiten-Teaser als Karten */
body#index .three-col:has(> .teaser) > .teaser {
    float: none;
    width: auto !important;
    max-width: none !important;
    flex: 1 1 0;
    min-width: 0;

    background: #ffffff !important;
    border: 1px solid var(--tbz-border);
    border-radius: 14px;
    padding: 22px;
    box-shadow: 0 5px 18px rgba(20,55,72,.06);

    overflow: hidden;
}

/* Überschriften innerhalb der Startseiten-Karten */
body#index .three-col:has(> .teaser) > .teaser > h2 {
    margin-top: 0;
    margin-bottom: 18px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--tbz-border);
    font-size: 1.45rem;
    line-height: 1.2;
    color: #183847 !important;
    background: transparent !important;
    position: relative;
}

/* Standard-Orange entfernen */
body#index .three-col:has(> .teaser) > .teaser > h2::after {
    width: 68px;
    height: 3px;
    bottom: -2px;
    border-radius: 3px;
}

/* Farbakzent Überschrift: Studienqualifizierung */
body#index .three-col:has(> .teaser) > .teaser.rot-weiss > h2::after {
    background: #c94c4c !important;
}

/* Farbakzent Überschrift: Duale Berufsausbildung */
body#index .three-col:has(> .teaser) > .teaser.blau-weiss > h2::after {
    background: #0074ad !important;
}

/* Farbakzent Überschrift: Berufsvorbereitung */
body#index .three-col:has(> .teaser) > .teaser.gruen-weiss > h2::after {
    background: #4b8f6a !important;
}

/* Das erste Bild in jeder Karte schmaler und abgerundet */
body#index .three-col:has(> .teaser) > .teaser > p:first-of-type {
    margin: 0 0 20px 0;
    text-align: center;
}

body#index .three-col:has(> .teaser) > .teaser > p:first-of-type > a {
    display: block;
}

body#index .three-col:has(> .teaser) > .teaser > p:first-of-type img {
    display: block;

    width: 92% !important;
    max-width: 92% !important;
    height: 190px !important;
    object-fit: cover;

    margin: 0 auto;

    border-radius: 10px;
    box-shadow: 0 4px 14px rgba(20,55,72,.07);

    transition:
        transform .22s ease,
        box-shadow .22s ease;
}

body#index .three-col:has(> .teaser) > .teaser > p:first-of-type img:hover {
    transform: scale(1.015);
    box-shadow: 0 7px 18px rgba(20,55,72,.11);
}

/* Etwas mehr Luft im Text */
body#index .three-col:has(> .teaser) > .teaser > p {
    margin-bottom: 16px;
}

/* "weiterlesen" unten als Button */
body#index .three-col:has(> .teaser) > .teaser > p:last-child > a {
    display: inline-flex;
    align-items: center;
    gap: 6px;

    padding: 9px 14px;

    background: #f5f8fa;
    border: 1px solid #dce5ea;
    border-radius: 8px;

    color: #23404f !important;
    font-weight: 600;
    text-decoration: none !important;

    transition:
        background-color .18s ease,
        border-color .18s ease,
        transform .18s ease;
}

body#index .three-col:has(> .teaser) > .teaser > p:last-child > a:hover {
    background: #ffffff;
    border-color: #9fc7db;
    transform: translateY(-1px);
}

/* Farbakzent am Kartenrand */
body#index .three-col:has(> .teaser) > .teaser.rot-weiss {
    border-top: 4px solid #c94c4c;
}

body#index .three-col:has(> .teaser) > .teaser.blau-weiss {
    border-top: 4px solid #0074ad;
}

body#index .three-col:has(> .teaser) > .teaser.gruen-weiss {
    border-top: 4px solid #4b8f6a;
}

/* Tablet / Smartphone */
@media (max-width: 991px) {
    body#index .three-col:has(> .teaser) {
        flex-wrap: wrap;
    }

    body#index .three-col:has(> .teaser) > .teaser {
        flex: 0 0 100%;
        width: 100% !important;
    }

    body#index .three-col:has(> .teaser) > .teaser > p:first-of-type img {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
    }
}


/* =====================================================
   KARTEN / SCHATTEN NUR AUF 4 AUSGEWÄHLTEN SEITEN
   GetSimple setzt den Seitenslug als body-ID.
   Seiten:
   - Startseite: index
   - Duale Berufsausbildung: duale-teilzeitbildung
   - Berufsvorbereitung: berufsvorbereitung
   - Studienqualifizierung: studienqualifizierung
   ===================================================== */

/* Gemeinsames Karten-Design für 2-, 3- und 4-Spalten-Blöcke
   ausschließlich auf den vier gewünschten Seiten */
:is(
    body#index,
    body#duale-teilzeitbildung,
    body#berufsvorbereitung,
    body#studienqualifizierung
) :is(.two-col, .three-col, .four-col)
> [class*="col-md-"] {
    background: #ffffff;
    border: 1px solid #dfe7eb;
    border-radius: 14px;
    box-shadow: 0 5px 18px rgba(20, 55, 72, 0.06);

    transition:
        box-shadow 0.2s ease,
        transform 0.2s ease;
}

/* Etwas stärkerer Schatten beim Überfahren */
:is(
    body#index,
    body#duale-teilzeitbildung,
    body#berufsvorbereitung,
    body#studienqualifizierung
) :is(.two-col, .three-col, .four-col)
> [class*="col-md-"]:hover {
    box-shadow: 0 8px 24px rgba(20, 55, 72, 0.10);
}

/* Bilder in diesen Karten abrunden */
:is(
    body#index,
    body#duale-teilzeitbildung,
    body#berufsvorbereitung,
    body#studienqualifizierung
) :is(.two-col, .three-col, .four-col)
> [class*="col-md-"] img {
    max-width: 100%;
    height: auto;
    border-radius: 10px;
}


/* -----------------------------------------------------
   Abstände bei 2- und 4-Spalten-Bereichen
   ebenfalls nur auf diesen vier Seiten
   ----------------------------------------------------- */

:is(
    body#index,
    body#duale-teilzeitbildung,
    body#berufsvorbereitung,
    body#studienqualifizierung
) :is(.two-col, .four-col) {
    display: flex;
    flex-wrap: nowrap;
    gap: 18px;
}

:is(
    body#index,
    body#duale-teilzeitbildung,
    body#berufsvorbereitung,
    body#studienqualifizierung
) :is(.two-col, .four-col)
> [class*="col-md-"] {
    float: none;
    width: auto !important;
    max-width: none !important;
    flex: 1 1 0;
    min-width: 0;
}


/* Tablet / Smartphone */
@media (max-width: 991px) {

    :is(
        body#index,
        body#duale-teilzeitbildung,
        body#berufsvorbereitung,
        body#studienqualifizierung
    ) :is(.two-col, .four-col) {
        flex-wrap: wrap;
    }

    :is(
        body#index,
        body#duale-teilzeitbildung,
        body#berufsvorbereitung,
        body#studienqualifizierung
    ) :is(.two-col, .four-col)
    > [class*="col-md-"] {
        flex: 0 0 100%;
        width: 100% !important;
    }
}

/* =====================================================
   BERUFSVORBEREITUNG
   Link-Buttons in Grün
   ===================================================== */

body#berufsvorbereitung .three-col > .col-md-4 > ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

body#berufsvorbereitung .three-col > .col-md-4 > ul > li {
    margin: 7px 0;
    padding: 0;
}


/* Link-Kacheln */
body#berufsvorbereitung
.three-col > .col-md-4 > ul > li > a:first-child {
    position: relative;

    display: flex;
    align-items: center;

    min-height: 46px;
    padding: 9px 38px 9px 14px;

    background: #f5f8fa;

    border: 1px solid #dce5ea;
    border-left: 4px solid #4b8f6a;

    border-radius: 8px;

    color: #23404f !important;

    font-weight: 600;
    line-height: 1.35;

    text-decoration: none !important;

    transition:
        background-color .18s ease,
        border-color .18s ease,
        transform .18s ease,
        box-shadow .18s ease;
}


/* Pfeil rechts */
body#berufsvorbereitung
.three-col > .col-md-4 > ul > li > a:first-child::after {
    content: "›";

    position: absolute;
    right: 13px;
    top: 50%;

    transform: translateY(-52%);

    font-size: 23px;
    font-weight: 400;
    line-height: 1;

    color: #4b8f6a;

    transition: transform .18s ease;
}


/* Hover */
body#berufsvorbereitung
.three-col > .col-md-4 > ul > li > a:first-child:hover {
    background: #ffffff;

    border-color: #a8cfb8;
    border-left-color: #4b8f6a;

    transform: translateX(3px);

    box-shadow: 0 4px 12px rgba(75, 143, 106, .12);
}


body#berufsvorbereitung
.three-col > .col-md-4 > ul > li > a:first-child:hover::after {
    transform: translate(2px, -52%);
}


/* =====================================================
   BERUFSVORBEREITUNG – Link-Kacheln in Grün
   Funktioniert bei 2- und 3-spaltigen Bereichen
   ===================================================== */

body#berufsvorbereitung
:is(.two-col, .three-col)
> [class*="col-md-"]
> ul {
    list-style: none !important;
    margin: 14px 0 0 0 !important;
    padding: 0 !important;
}

body#berufsvorbereitung
:is(.two-col, .three-col)
> [class*="col-md-"]
> ul > li {
    margin: 7px 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

body#berufsvorbereitung
:is(.two-col, .three-col)
> [class*="col-md-"]
> ul > li > a:first-child {
    position: relative;

    display: flex !important;
    align-items: center;

    min-height: 46px;
    padding: 9px 38px 9px 14px !important;

    background: #f5f8fa !important;

    border: 1px solid #dce5ea !important;
    border-left: 4px solid #4b8f6a !important;
    border-radius: 8px;

    color: #23404f !important;

    font-weight: 600 !important;
    line-height: 1.35;

    text-decoration: none !important;

    transition:
        background-color .18s ease,
        border-color .18s ease,
        transform .18s ease,
        box-shadow .18s ease;
}

body#berufsvorbereitung
:is(.two-col, .three-col)
> [class*="col-md-"]
> ul > li > a:first-child::after {
    content: "›";

    position: absolute;
    right: 13px;
    top: 50%;

    transform: translateY(-52%);

    color: #4b8f6a !important;

    font-size: 23px;
    font-weight: 400;
    line-height: 1;

    transition: transform .18s ease;
}

body#berufsvorbereitung
:is(.two-col, .three-col)
> [class*="col-md-"]
> ul > li > a:first-child:hover {
    background: #ffffff !important;

    border-color: #a8cfb8 !important;
    border-left-color: #4b8f6a !important;

    transform: translateX(3px);

    box-shadow: 0 4px 12px rgba(75,143,106,.12);
}

body#berufsvorbereitung
:is(.two-col, .three-col)
> [class*="col-md-"]
> ul > li > a:first-child:hover::after {
    transform: translate(2px, -52%);
}

/* Falls GetSimple/Bootstrap eigene Bullet-Abstände setzt */
body#berufsvorbereitung
:is(.two-col, .three-col)
> [class*="col-md-"]
> ul > li::marker {
    content: "";
}


/* =====================================================
   MOBILE – Seitenbreite sauber an Display anpassen
   ===================================================== */

@media (max-width: 576px) {

    html,
    body {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
    }

    .container {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;

        padding-left: 10px !important;
        padding-right: 10px !important;

        box-sizing: border-box;
    }

    .main {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

}

/* =====================================================
   Mobile Menü – Pluszeichen immer exakt rechts
   ===================================================== */

@media only screen and (max-width: 959px) {

    .menu > ul > li.menu-dropdown-icon {
        position: relative;
    }

    .menu > ul > li.menu-dropdown-icon::before {
        position: absolute !important;
        right: 15px !important;
        top: 50% !important;

        transform: translateY(-50%) !important;

        float: none !important;

        padding: 12px 15px !important;
        margin: 0 !important;

        z-index: 10;
    }

    /* Platz für das + freihalten */
    .menu > ul > li.menu-dropdown-icon > a {
        padding-right: 70px !important;
    }

}

/* =====================================================
   MOBILE – Berufsinformationstabellen als Karten
   ===================================================== */

@media (max-width: 768px) {

    .two-col-right table,
    .two-col-right tbody,
    .two-col-right tr,
    .two-col-right td {
        display: block;
        width: 100% !important;
    }

    .two-col-right table {
        border: 0 !important;
        background: transparent !important;
    }

    .two-col-right tr {
        margin-bottom: 14px;

        background: #ffffff;

        border: 1px solid #dce5ea;
        border-radius: 10px;

        box-shadow: 0 3px 10px rgba(20, 55, 72, 0.05);

        overflow: hidden;
    }

    .two-col-right td {
        border: 0 !important;
        padding: 0 !important;
    }

    /* linke Spalte = Überschrift */
    .two-col-right td:first-child {
        padding: 10px 14px 7px 14px !important;

        background: #f5f8fa;

        color: #23404f;
        font-size: inherit !important;
        line-height: 1.35;
    }

    .two-col-right td:first-child strong {
        font-weight: 700;
    }

    /* rechte Spalte = Inhalt */
    .two-col-right td:nth-child(2) {
        padding: 10px 14px 13px 14px !important;

        background: #ffffff;

        color: #1f2d35;
        font-size: inherit !important;
        line-height: 1.5;
    }

    /* Links etwas hervorheben */
    .two-col-right td:nth-child(2) a {
        font-weight: 600;
        text-decoration: none;
    }

    /* Listen innerhalb einer Tabellenzelle */
    .two-col-right td:nth-child(2) ul {
        margin: 4px 0 0 0;
        padding-left: 20px;
    }

    .two-col-right td:nth-child(2) li {
        margin-bottom: 6px;
    }
}

/* =====================================================
   MOBILE – Logo sauber innerhalb des Displays halten
   ===================================================== */

@media (max-width: 576px) {

    #main-header .logo {
        display: block !important;

        width: 100% !important;
        max-width: 100% !important;

        padding: 8px !important;
        margin: 8px 0 !important;

        box-sizing: border-box;
        overflow: hidden;
    }

    #main-header .logo img {
        display: block;

        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        max-height: none !important;

        object-fit: contain;

        margin: 0 auto;
    }

}


/* =====================================================
   NORMALE SEITEN – Headerbild wie auf der Startseite
   Funktioniert ohne Anpassung von nl-tbz_normal.php
   ===================================================== */

.jumbotron-tbz-normal {
    position: relative;
    overflow: hidden;

    /* Bild vollständig und sauber im Header darstellen */
    background-size: cover !important;
    background-position: center center !important;

    /* nur die beiden unteren Ecken abrunden */
    border-radius: 0 0 24px 24px;
}

/* Grauschleier über dem Headerbild */
.jumbotron-tbz-normal::before {
    content: "";
    position: absolute;
    inset: 0;

    background: linear-gradient(
        90deg,
        rgba(7, 39, 58, 0.60),
        rgba(7, 39, 58, 0.16)
    );

    pointer-events: none;
    z-index: 0;
}

/* Inhalt ggf. oberhalb des Grauschleiers halten */
.jumbotron-tbz-normal > .container {
    position: relative;
    z-index: 1;
}