/* Fonts */

@font-face {
    font-family: 'BerlinType';
    font-style: normal;
    font-weight: 400;
    src: url('/typo3conf/ext/braincity_sitepackage/Resources/Public/Fonts/BerlinTypeWeb-Regular.eot');
    /* IE9 Compat Modes */
    src: url('/typo3conf/ext/braincity_sitepackage/Resources/Public/Fonts/BerlinTypeWeb-Regular.eot?#iefix') format('embedded-opentype'),
        /* IE6-IE8 */
        url('/typo3conf/ext/braincity_sitepackage/Resources/Public/Fonts/BerlinTypeWeb-Regular.woff2') format('woff2'),
        /* Super Modern Browsers */
        url('/typo3conf/ext/braincity_sitepackage/Resources/Public/Fonts/BerlinTypeWeb-Regular.woff') format('woff');
    /* Modern Browsers */
    font-display: swap;
}

@font-face {
    font-family: 'BerlinType';
    font-style: normal;
    font-weight: 700;
    src: url('/typo3conf/ext/braincity_sitepackage/Resources/Public/Fonts/BerlinTypeWeb-Bold.eot');
    /* IE9 Compat Modes */
    src: url('/typo3conf/ext/braincity_sitepackage/Resources/Public/Fonts/BerlinTypeWeb-Bold.eot?#iefix') format('embedded-opentype'),
        /* IE6-IE8 */
        url('/typo3conf/ext/braincity_sitepackage/Resources/Public/Fonts/BerlinTypeWeb-Bold.woff2') format('woff2'),
        /* Super Modern Browsers */
        url('/typo3conf/ext/braincity_sitepackage/Resources/Public/Fonts/BerlinTypeWeb-Bold.woff') format('woff');
    /* Modern Browsers */
    font-display: swap;
}

body {
    font-family: 'BerlinType', sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 1rem;
}

.section.section-default>.frame-type-ws_slider {max-width:1400px;margin:0 auto;}
.pagelevel-0 .section.section-default>.frame-type-ws_slider{padding-top:0}

h1,
.h1,
h2,
.h2,
h3,
.h3,
h5,
.h5,
h6,
.h6 {
    margin-top: 0;
    margin-bottom: 0.5rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--bs-heading-color);
}




h1,
.h1,
h2,
.h2 {
    font-size: calc(1.625rem + 0.9vw);
}

/* H1 global 80px, auf kleineren Bildschirmen proportional kleiner */
h1,
.h1 {
    font-size: clamp(2.25rem, 6.5vw, 80px);
    hyphens: auto;
    overflow-wrap: break-word;
}

@media (min-width: 1200px) {

    h1,
    .h1 {
        font-size: 80px;
    }

    h2,
    .h2 {
        font-size: 30px;
    }
}

.frame-background-light .element-header,
h1.h1 {
    color: var(--nav-highlight);
}

h1, h2, h3, .btn, .c-ambassador-slider__more, .swiper-slide-copyright,.card-title, .c-ambassador-card__name, .swiper-slide .caption-text .caption-title, blockquote  {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h2.element-header{margin-bottom: 1.5rem;
    font-size: 44px;
    font-weight: 700;
    line-height: 1.1;
    text-transform: uppercase;
    color: #1d1d1b;}

h3.element-header, h3.element-subheader{text-transform: uppercase;}

h4.element-subheader.h4 {    font-size: 1.25rem;
    font-weight: 700;
    Text-transform: uppercase;}

:root {
    --cardgroup-gap: 2rem;
    --swiper-theme-color: #E40422 !important;
    --swiper-pagination-bottom: 0px;
    --nav-highlight: #E40422;
    /* rot – aktives Element */
    --nav-hover: #d9d9d9;
    /* hellgrau – Hover anderer Elemente */
    --nav-highlight-text: #fff;
    --nav-divider: rgba(0, 0, 0, .2);
    --gallery-gap: 1.5rem;
    --gallery-columns: 1;
    --frame-link-color: #000;
    --bs-border-width: 2px;
        
}

.pt-6 {
    padding-top: 6.5rem !important;
}
.pb-6 {
    padding-bottom: 6.5rem !important;
}

.frame-background-light{--frame-link-color: #000;}
.pagelevel-0 .section.section-default{margin-top:0}

/* Hauptnavigation – Farben (gilt auch im transparenten Header) */
#page-header .navbar-nav .nav-link,
.navbar-default-transition:not(.navbar-transition) .navbar-nav > li > .nav-link {
    --bs-nav-link-color: #1d1d1b;
    --bs-nav-link-hover-color: #1d1d1b;
    --bs-navbar-active-color: var(--nav-highlight);
}

/* Hauptnavigation – Buttons (Desktop) */
@media (min-width: 992px) {
    #mainnavigation .navbar-nav {
        gap: .75rem;
        align-items: center;
    }

    #mainnavigation .navbar-nav > .nav-item {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        background: #fff;
        border: 1.5px solid #1d1d1b;
        border-radius: 10px;
        transition: border-color .2s ease;
    }

    #mainnavigation .navbar-nav > .nav-item:has(> .nav-link-main.active) {
        border-color: var(--nav-highlight);
    }

    /* Fokus-Rahmen um den ganzen Button statt nur um den Pfeil */
    #mainnavigation .navbar-nav .nav-link:focus,
    #mainnavigation .navbar-nav .nav-link:focus-visible {
        box-shadow: none;
        outline: none;
    }

    #mainnavigation .navbar-nav > .nav-item:has(> .nav-link:focus-visible),
    #mainnavigation .dropdown-nav > .nav-item:has(> .nav-link:focus-visible) {
        outline: 2px solid var(--nav-highlight);
        outline-offset: 2px;
    }

    #mainnavigation .navbar-nav > .nav-item > .nav-link-main {
        padding: .6rem 1.1rem;
        font-weight: 700;
        line-height: 1.2;
        white-space: nowrap;
    }

    #mainnavigation .navbar-nav > .nav-item:has(> .nav-link-toggle) > .nav-link-main {
        padding-right: .35rem;
    }

    /* Unterstrich des Bootstrap Package entfernen */
    #mainnavigation .navbar-nav > .nav-item > .nav-link-main:before {
        display: none;
    }

    #mainnavigation .navbar-nav > .nav-item > .nav-link-toggle,
    #mainnavigation .navbar-nav > .nav-item > .nav-link-toggle.show {
        color: #1d1d1b;
        padding: .6rem 1.1rem .6rem .35rem;
        border: 0;
        background: transparent;
    }

    /* Chevron */
    #mainnavigation .nav-link-toggle .nav-link-indicator:before {
        border-width: 2px 0 0 2px;
        padding: .3em 0 0 .3em;
        margin-top: -.25em;
        transform: rotate(-135deg);
    }

    #mainnavigation .nav-link-toggle.show .nav-link-indicator:before {
        margin-top: .25em;
        transform: rotate(45deg);
    }

    /* Dropdown: kein Container, jeder Unterpunkt ist ein eigener Button */
    #mainnavigation .navbar-nav > .nav-item > .dropdown-menu {
        top: 100%;
        left: .5rem;
        width: max-content;
        min-width: 0;
        margin-top: .35rem;
        padding: 0;
        background: transparent;
        border: 0;
        border-radius: 0;
        box-shadow: none;
    }

    /* unsichtbare Brücke, damit das Menü beim Hinüberfahren offen bleibt */
    #mainnavigation .navbar-nav > .nav-item > .dropdown-menu:before {
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        bottom: 100%;
        height: calc(.35rem + 2px);
    }

    #mainnavigation .dropdown-menu .dropdown-nav {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: .35rem;
    }

    #mainnavigation .dropdown-nav > .nav-item {
        background: #fff;
        border: 1.5px solid #1d1d1b;
        border-radius: 8px;
    }

    #mainnavigation .dropdown-menu .nav-link-dropdown {
        padding: .45rem .7rem;
        font-weight: 700;
        line-height: 1.2;
        white-space: nowrap;
    }

    #mainnavigation .dropdown-menu .nav-link-dropdown:before {
        display: none;
    }

    #mainnavigation .dropdown-menu .nav-link-dropdown:hover,
    #mainnavigation .dropdown-menu .nav-link-dropdown:focus,
    #mainnavigation .dropdown-menu .nav-link-dropdown:active {
        background: transparent;
    }

    #mainnavigation .dropdown-menu .nav-link-dropdown.active {
        color: var(--nav-highlight);
    }
}

/* Buttons */

.btn{display: inline-block;
    margin-top: 0.5rem;
    padding: .5rem 1.75rem;
    border-radius: 25px;
    color: #fff;
    font-weight: 700;
    text-decoration: none;
}

.btn.btn-outline-danger{color:black;}
.btn.btn-outline-danger:hover{color:white;}

/* Slider (ws_slider/Swiper) – Navigation unten links: ← Punkte → (wie talent.berlin) */
.swiper-navigation {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-top: 1rem;
}

.swiper-navigation .swiper-pagination {
    position: relative;
    text-align: start;
}

.swiper-navigation .swiper-pagination-bullets.swiper-pagination-horizontal {
    inset: auto;
    width: auto;
}

.swiper-navigation .swiper-button-prev,
.swiper-navigation .swiper-button-next {
    position: relative;
    inset: auto;
    width: auto;
    height: auto;
    margin-top: 0;
    padding: .25rem .5rem;
    border: 0;
    background: none;
    color: var(--nav-highlight);
    font-size: 1.5rem;
    font-weight: bold;
    line-height: 1;
}

.swiper-navigation .swiper-button-prev:after,
.swiper-navigation .swiper-button-next:after,
.swiper-navigation .swiper-button-prev svg,
.swiper-navigation .swiper-button-next svg {
    display: none;
}

.swiper-navigation .swiper-button-prev {
    padding-left: 0;
}


/* Slider – Slide: Bild mit runden Ecken, Text rechts (Headline + Textbox) */
.swiper-slide {
    position: relative;
}

.swiper-slide > img.img-fluid {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: 50px;
}

.swiper-slide .caption-text {
    position: absolute;
    top: 100px;
    right: 5%;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 1.5rem;
    max-width: 90%;
    text-align: right;
}

.swiper-slide .caption-text .caption-title {
    margin: 0;
    color: #fff;
    font-size: 80px;
    font-weight: 700;
    line-height: 1;
    text-transform: uppercase;
    text-shadow: 0 2px 12px rgba(0, 0, 0, .25);
    /* Umbrüche wie bei den Detail-Titeln: Zeilen ausgleichen, nur lange Wörter (ab 12 Zeichen) silbengetrennt */
    hyphens: auto;
    hyphenate-limit-chars: 12 5 5;
    -webkit-hyphenate-limit-before: 5;
    -webkit-hyphenate-limit-after: 5;
    overflow-wrap: anywhere;
    text-wrap: balance;
}

.swiper-slide .caption-text .caption-body {
    max-width: 380px;
    padding: .9rem 1.25rem;
    background: rgba(255, 255, 255, .85);
    border-radius: 12px;
    color: #1d1d1b;
    font-size: 1rem;
    line-height: 1.45;
    text-align: left;
}

.swiper-slide .caption-text .caption-body p:last-child {
    margin-bottom: 0;
}

@media (max-width: 1199.98px) {
    /* gleiche Größe wie h1 */
    .swiper-slide .caption-text .caption-title {
        font-size: clamp(2.25rem, 6.5vw, 80px);
    }
}

@media (max-width: 767.98px) {
    .swiper-slide > img.img-fluid {
        border-radius: 25px;
    }

    .swiper-slide .caption-text {
        top: 1.5rem;
        gap: .75rem;
    }

    .swiper-slide .caption-text .caption-body {
        display: none;
    }
}


/* Seitenheader mit Hintergrundbild (Frame-Klasse "pageheader", z.B. Brains of Berlin)
   Box so breit wie der Inhaltsbereich, runde Ecken, Headline rechts oben.
   "|" im Header-Feld erzeugt einen Zeilenumbruch (Partial Header/Header.html im Sitepackage). */
.frame.pageheader {
    width: calc(100% - 40px);
    margin-inline: auto;
    min-height: 490px;
    border-radius: 50px;
    overflow: hidden;
    margin-top: 0.5rem;
}


.frame.pageheader .element-subheader.h5 {position: absolute;
    bottom: 2rem;
    left: 2rem;
    background: #1E1E1E55;
    padding: 0.5rem 1rem;
    border-radius: 30px;
    color: white;
    font-size: 1rem;
    border-radius: 40px;
    background: rgba(30, 30, 30, 0.25);}

@media (min-width: 576px) { .frame.pageheader { max-width: 500px; } }
@media (min-width: 768px) { .frame.pageheader { max-width: 680px; } }
@media (min-width: 992px) { .frame.pageheader { max-width: 920px; } }
@media (min-width: 1200px) { .frame.pageheader { max-width: 1100px; } }
@media (min-width: 1400px) { .frame.pageheader { max-width: 1400px; } 
}

.frame.pageheader .frame-container {
    max-width: none;
    padding: 100px 55px 3rem;
}

.frame.pageheader .frame-header {
    margin: 0;
}

.frame.pageheader .element-header {
        position: relative;
    margin: 0;
    color: #fff;
    font-size: 80px;
    font-weight: 700;
    line-height: 1;
    text-align: right;
    text-transform: uppercase;
    text-shadow: 0 2px 12px rgba(0, 0, 0, .2);
    /* Umbrüche wie bei Slider- und Detail-Titeln: Zeilen ausgleichen, nur lange Wörter (ab 12 Zeichen) silbengetrennt */
    hyphens: auto;
    hyphenate-limit-chars: 12 5 5;
    -webkit-hyphenate-limit-before: 5;
    -webkit-hyphenate-limit-after: 5;
    overflow-wrap: anywhere;
    text-wrap: balance;
}
.frame.pageheader  .frame-container.frame-container-default{position:unset}

@media (max-width: 1199.98px) {
    .frame.pageheader {
        min-height: 420px;
    }

    .frame.pageheader .element-header {
        font-size: clamp(2.25rem, 6.5vw, 80px);
    }
}

@media (max-width: 767.98px) {
    .frame.pageheader {
        min-height: 280px;
        border-radius: 25px;
    }

    .frame.pageheader .frame-container {
        padding: 2.5rem 1.5rem 2rem;
    }

    /* Copyright näher an die Ecke unten links */
    .frame.pageheader .element-subheader.h5 {
        bottom: 1rem;
        left: 1rem;
    }
}

/* Einleitungstext: Text-Element mit linksbündiger Überschrift (element-header text-left)
   → gleiches Raster wie die Botschafter-Kacheln (3 Spalten, 2rem Abstand):
     Überschrift in Spalte 1, Text bündig mit der zweiten Kachel-Spalte */
.frame-type-text .frame-inner:has(> .frame-header .element-header.text-left) {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 2rem;
    align-items: start;
}

.frame-type-text .frame-inner:has(> .frame-header .element-header.text-left) > .frame-header {
    margin: 0;
    /* Überschrift über alle Zeilen, damit die Absätze rechts direkt untereinander stehen */
    grid-column: 1;
    grid-row: 1 / span 50;
}

.frame-type-text .frame-inner:has(> .frame-header .element-header.text-left) .element-header {
    margin: 0;
    font-size: 44px;
    font-weight: 700;
    line-height: 1.1;
    text-transform: uppercase;
    color: #1d1d1b;
}

.frame-type-text .frame-inner:has(> .frame-header .element-header.text-left) > :not(.frame-header) {
    grid-column: 2 / span 2;
    font-size: 1rem;
}

@media (max-width: 991.98px) {
    .frame-type-text .frame-inner:has(> .frame-header .element-header.text-left) {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 1.5rem;
    }

    .frame-type-text .frame-inner:has(> .frame-header .element-header.text-left) > :not(.frame-header) {
        grid-column: 1;
    }

    .frame-type-text .frame-inner:has(> .frame-header .element-header.text-left) > .frame-header {
        grid-row: auto;
    }

    .frame-type-text .frame-inner:has(> .frame-header .element-header.text-left) .element-header {
        font-size: 2rem;
    }
}


/* Karten-Liste (Bootstrap Package "menu_card_list", z.B. Startseite)
   Bild als Kachel 4:5, Titel + runder Pfeil unten, die ganze Kachel ist der Link
   (gleicher Stil wie die Botschafter-Kacheln). */
.frame-type-menu_card_list .element-header {
    margin-bottom: 3rem;
    font-size: 44px;
    font-weight: 700;
    line-height: 1.1;
    text-transform: uppercase;
    color: #1d1d1b;
}

.frame-type-menu_card_list .card-menu {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2rem;
    margin: 0;
}

.frame-type-menu_card_list .card-menu-item {
    width: auto;
    max-width: none;
    margin: 0;
    padding: 0;
}

.frame-type-menu_card_list .card {
    position: relative;
    aspect-ratio: 4 / 5;
    height: auto;
    overflow: hidden;
    border: 0;
    border-radius: 40px;
    background: #1d1d1b;
    box-shadow: 0 4px 18px rgba(0, 0, 0, .12);
    isolation: isolate;
}

.frame-type-menu_card_list .card-img-top {
    position: absolute;
    inset: 0;
    margin: 0;
}

.frame-type-menu_card_list .card-img-top picture,
.frame-type-menu_card_list .card-img-top img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0;
    transition: transform .4s ease;
}

.frame-type-menu_card_list .card:hover .card-img-top img {
    transform: scale(1.03);
}

/* Verlauf für die Lesbarkeit des Titels */
.frame-type-menu_card_list .card::after {
    content: '';
    position: absolute;
    inset: 40% 0 0 0;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, .7));
    z-index: 1;
    pointer-events: none;
}

.frame-type-menu_card_list .card-body {
    position: absolute;
    left: 0;
    right: 5.5rem;
    bottom: 0;
    z-index: 2;
    padding: 0 0 1.85rem 2.25rem;
    background: none;
}

.frame-type-menu_card_list .card-title {
    margin: 0;
    color: #fff;
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.1;
    text-transform: uppercase;
}

.frame-type-menu_card_list .card-text {
    display: none;
}

.frame-type-menu_card_list .card-footer {
    padding: 0;
    border: 0;
    background: none;
}

/* Link über die ganze Kachel, Text nur für Screenreader, Pfeil-Kreis rechts unten */
.frame-type-menu_card_list .card-link {
    position: absolute;
    inset: 0;
    z-index: 3;
    font-size: 0;
    color: transparent;
    border-radius: 40px;
}

.frame-type-menu_card_list .card-link::after {
    content: '';
    position: absolute;
    right: 1.75rem;
    bottom: 1.75rem;
    width: 2.75rem;
    height: 2.75rem;
    border: 2.5px solid #fff;
    border-radius: 50%;
    background: center / 24px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h13M13 6l6 6-6 6' fill='none' stroke='%23fff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    transition: background-color .2s ease;
}

.frame-type-menu_card_list .card-link:hover::after,
.frame-type-menu_card_list .card-link:focus-visible::after {
    background-color: #fff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h13M13 6l6 6-6 6' fill='none' stroke='%231d1d1b' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.frame-type-menu_card_list .card-link:focus-visible {
    outline: 3px solid var(--nav-highlight);
    outline-offset: 3px;
}

@media (max-width: 1199.98px) {
    .frame-type-menu_card_list .card-title {
        font-size: 1.4rem;
    }

    .frame-type-menu_card_list .card-body {
        padding: 0 0 1.4rem 1.5rem;
        right: 4.5rem;
    }

    .frame-type-menu_card_list .card-link::after {
        right: 1.25rem;
        bottom: 1.25rem;
    }
}

@media (max-width: 991.98px) {
    .frame-type-menu_card_list .element-header {
        margin-bottom: 2rem;
        font-size: 2rem;
    }

    .frame-type-menu_card_list .card-menu {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1.5rem;
    }

    .frame-type-menu_card_list .card,
    .frame-type-menu_card_list .card-link {
        border-radius: 30px;
    }
}

@media (max-width: 575.98px) {
    .frame-type-menu_card_list .card-menu {
        grid-template-columns: minmax(0, 1fr);
    }
}


/* News-Detailseiten: H1 nur 40px (statt globaler 80px) */
.news-single h1,
.news-single .h1 {
    font-size: 40px;
    line-height: 1.15;
}

@media (max-width: 575.98px) {
    .news-single h1,
    .news-single .h1 {
        font-size: 2rem;
    }
}


/* Footer: schwarz, 3 Spalten im Raster der Kacheln (Social | Logo | Links) */
.bp-page-footer {
    background: #000;
    color: #fff;
}

.bp-page-footer .footer-section-content {
    padding: 4.5rem 0 5rem;
    background: #000;
    color: #fff;
}

.bp-page-footer .footer-section-content .section-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2rem;
    margin: 0;
}

.bp-page-footer .footer-section-content-column {
    width: auto;
    max-width: none;
    margin: 0;
    padding: 0;
}

.bp-page-footer .frame,
.bp-page-footer .frame-container,
.bp-page-footer .frame-inner {
    margin: 0;
    padding: 0;
}

/* links: Überschrift + Social-Icons */
.bp-page-footer .frame-type-social_links .element-header {
    margin: 0 0 1.75rem;
    color: #fff;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.6;
    text-transform: uppercase;
}

.bp-page-footer .sociallinks-list {
    display: flex;
    gap: .75rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.bp-page-footer .sociallinks-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 10px;
    background: #fff;
    color: #000;
    text-decoration: none;
    transition: background-color .2s ease;
}

.bp-page-footer .sociallinks-link:hover,
.bp-page-footer .sociallinks-link:focus-visible {
    background: var(--nav-highlight);
    color: #fff;
}

.bp-page-footer .sociallinks-link-icon {
    font-size: 3.5rem;
    line-height: 1;
}

.bp-page-footer .sociallinks-link-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* Mitte: Logo (weiße Fläche, damit es auf Schwarz lesbar ist) */
.bp-page-footer .footer-section-content-column-middle {
    align-self: center;
}

.bp-page-footer .footer-section-content-column-middle .gallery-row,
.bp-page-footer .footer-section-content-column-middle .gallery-item,
.bp-page-footer .footer-section-content-column-middle figure {
    margin: 0;
    padding: 0;
}

.bp-page-footer .footer-section-content-column-middle img {
    display: block;
    width: 255px;
    max-width: 100%;
    height: auto;
    background: #fff;
}

/* rechts: Links */
.bp-page-footer .frame-type-menu_subpages ul {
    display: flex;
    flex-direction: column;
    gap: 1.75rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.bp-page-footer .frame-type-menu_subpages a {
    color: #fff;
    font-size: 1rem;
    text-decoration: none;
}

.bp-page-footer .frame-type-menu_subpages a:hover,
.bp-page-footer .frame-type-menu_subpages a:focus-visible {
    color: var(--nav-highlight);
}

.bp-page-footer a:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 3px;
}

@media (max-width: 767.98px) {
    .bp-page-footer .footer-section-content {
        padding: 3rem 0;
    }

    .bp-page-footer .footer-section-content .section-row {
        grid-template-columns: minmax(0, 1fr);
        gap: 2.5rem;
    }

    .bp-page-footer .footer-section-content-column-middle {
        order: -1;
    }

    .bp-page-footer .frame-type-menu_subpages ul {
        gap: 1rem;
    }
}

/* Footer – Korrekturen: Icons nebeneinander, LinkedIn-Glyph ist selbst ein Quadrat, Logo linksbündig */
.bp-page-footer .sociallinks-item {
    flex: 0 0 auto;
    width: auto;
    margin: 0;
    padding: 0;
}

/* LinkedIn wie Instagram: weiße Box (Größe/Ecken aus .sociallinks-link) mit schwarzem "in".
   Das Icon-Font-Zeichen ist selbst ein Quadrat, daher wird stattdessen nur das "in" als Maske gezeichnet. */
.bp-page-footer .sociallinks-link-linkedin .sociallinks-link-icon {
    display: none;
}

.bp-page-footer .sociallinks-link-linkedin::before {
    content: '';
    width: 2rem;
    height: 2rem;
    background: currentColor;
    -webkit-mask: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4.98 3.5a2.5 2.5 0 1 1 0 5 2.5 2.5 0 0 1 0-5zM3 9.75h4V21H3V9.75zm6.5 0h3.8v1.6h.06c.53-1 1.83-2.05 3.77-2.05 4.03 0 4.77 2.65 4.77 6.1V21h-4v-4.9c0-1.17-.02-2.68-1.63-2.68-1.64 0-1.89 1.28-1.89 2.6V21h-4V9.75z'/%3E%3C/svg%3E");
    mask: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4.98 3.5a2.5 2.5 0 1 1 0 5 2.5 2.5 0 0 1 0-5zM3 9.75h4V21H3V9.75zm6.5 0h3.8v1.6h.06c.53-1 1.83-2.05 3.77-2.05 4.03 0 4.77 2.65 4.77 6.1V21h-4v-4.9c0-1.17-.02-2.68-1.63-2.68-1.64 0-1.89 1.28-1.89 2.6V21h-4V9.75z'/%3E%3C/svg%3E");
}

.bp-page-footer .footer-section-content-column-middle .gallery-row {
    justify-content: flex-start;
}

.bp-page-footer .footer-section-content-column-middle .gallery-item {
    flex: 0 0 auto;
    width: auto;
    max-width: 100%;
}

/* Bootstrap Package dimmt die Icons (opacity .8) */
.bp-page-footer .sociallinks-link-icon {
    opacity: 1;
}

.cardshome{position:relative;margin-bottom:4rem;}
.cardshome:before, .bgmoved:before{content: ""; background: #9BCFAE;
    position: absolute;
    left: 0;
    right: 0;
    height: 100%;
    top: 50%;
}

.bgmoved{padding-bottom:8rem;}

/* Startseite: Zahlen-Kreise (Card Group mit Frame-Klasse "circleshome")
   Reihenfolge der Cards: 1 = grün (oben links), 2 = lila (unten, überlappt), 3 = rosa (rechts, groß).
   Positionen/Größen in % der Spaltenbreite, Schrift in cqi (skaliert mit dem Kreis). */
.circleshome {
    --circle-green: #90c9a5;
    --circle-purple: #8579b5;
    --circle-pink: #f2a8c3;
}

.circleshome .card-group-element {
    position: relative;
    display: block;
    aspect-ratio: 941 / 665;
    margin: 0;
}

.circleshome .card-group-element-item {
    position: absolute;
    width: auto;
    max-width: none;
    margin: 0;
    padding: 0;
    aspect-ratio: 1;
    z-index: 1;
}

.circleshome .card-group-element-item:nth-child(1) { width: 39.3%; left: 0;     top: 0; }
.circleshome .card-group-element-item:nth-child(2) { width: 38.3%; left: 13.8%; top: 45.8%; z-index: 2; }
.circleshome .card-group-element-item:nth-child(3) { width: 47.6%; left: 52.4%; top: 2.6%; }

.circleshome .card {
    container-type: inline-size;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    border: 0;
    border-radius: 50%;
    background: var(--circle-green);
    color: #fff;
    text-align: center;
    cursor: default;
    transition: transform .7s cubic-bezier(.22, 1, .36, 1);
}

.circleshome .card-group-element-item:nth-child(2) .card { background: var(--circle-purple); }
.circleshome .card-group-element-item:nth-child(3) .card { background: var(--circle-pink); }

/* Hover: nur skalieren, Stapelreihenfolge bleibt (lila liegt immer über grün) */
.circleshome .card-group-element-item:hover .card {
    transform: scale(1.1);
}

.circleshome .card-body {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 8% 4%;
    background: none;
}

.circleshome .card-title {
    margin: 0;
    color: #fff;
    font-size: 36cqi;
    font-weight: 700;
    line-height: 1;
}

.circleshome .card-subtitle {
    margin: 4cqi 0 0;
    color: #fff;
    font-size: 7cqi;
    font-weight: 700;
    line-height: 1.2;
}

/* Desktop: Kreise ragen wie im Layout in das Slider-Bild darüber */
@media (min-width: 1200px) {
    .circleshome {
        margin-top: calc(-132px - 9.4%);
    }
}

@media (max-width: 767.98px) {
    .circleshome .card-group-element {
        aspect-ratio: 1 / 1.25;
    }

    .circleshome .card-group-element-item:nth-child(1) { width: 52%; left: 0;   top: 0; }
    .circleshome .card-group-element-item:nth-child(2) { width: 50%; left: 18%; top: 48%; }
    .circleshome .card-group-element-item:nth-child(3) { width: 52%; left: 48%; top: 18%; }
}

@media (prefers-reduced-motion: reduce) {
    .circleshome .card {
        transition: none;
    }
}


/* Seitenheader: Copytext des Elements als graue Box rechts unter der Headline (wie die Textbox im Startseiten-Slider) */
.frame.pageheader .frame-inner > p {
    /* positioniert, damit die Box über dem absolut positionierten Hintergrundbild liegt */
    position: relative;
    z-index: 1;
    width: fit-content;
    max-width: 380px;
    margin: 1.5rem 0 0 auto;
    padding: .9rem 1.25rem;
    background: rgba(255, 255, 255, .85);
    border-radius: 12px;
    color: #1d1d1b;
    font-size: 1rem;
    line-height: 1.45;
    text-align: left;
}

@media (max-width: 767.98px) {
    .frame.pageheader .frame-inner > p {
        max-width: 100%;
        margin-top: 1rem;
    }
}


/* Bild-Elemente mit nur einer Spalte: übliche runde Ecken (nur im Inhaltsbereich, nicht das Footer-Logo) */
#page-content .frame-type-image .gallery-item-size-1 img {
    border-radius: 40px;
}

@media (max-width: 767.98px) {
    #page-content .frame-type-image .gallery-item-size-1 img {
        border-radius: 25px;
    }
}


/* Akkordeon (Bootstrap Package): grüne Frage-Balken, Antwort als weiße Box mit grünem Rahmen */
.frame-type-accordion .accordion {
    --accordion-green: #9BCFAE;
    --accordion-dark: #1d1d1b;
    --bs-accordion-border-width: 0;
    --bs-accordion-bg: transparent;
    --bs-accordion-btn-icon: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27%3E%3Cpath d=%27M5 9l7 7 7-7%27 fill=%27none%27 stroke=%27%231d1d1b%27 stroke-width=%273%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27/%3E%3C/svg%3E");
    --bs-accordion-btn-active-icon: var(--bs-accordion-btn-icon);
    --bs-accordion-btn-icon-width: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
}

.frame-type-accordion .accordion-item {
    border: 0;
    background: none;
}

.frame-type-accordion .accordion-header {
    margin: 0;
}

.frame-type-accordion .accordion-button,
.frame-type-accordion .accordion-button:not(.collapsed) {
    gap: 1.5rem;
    padding: 1.6rem 2.5rem;
    border-radius: 999px !important;
    background: var(--accordion-green);
    color: var(--accordion-dark);
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.15;
    text-transform: uppercase;
    box-shadow: none;
}

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

.frame-type-accordion .accordion-button:focus {
    box-shadow: none;
}

.frame-type-accordion .accordion-body {
    margin-top: .2rem;
    padding: 1.75rem 2.5rem;
    border: 2px solid var(--accordion-green);
    border-radius: 40px;
    background: #fff;
    font-size: 1rem;
    line-height: 1.6;
}

.frame-type-accordion .accordion-body p:last-child,
.frame-type-accordion .accordion-body ul:last-child {
    margin-bottom: 0;
}

.frame-type-accordion .accordion-body ul {
    padding-left: 1.25rem;
}

@media (max-width: 991.98px) {
    .frame-type-accordion .accordion {
        gap: 1.5rem;
    }

    .frame-type-accordion .accordion-button,
    .frame-type-accordion .accordion-button:not(.collapsed) {
        padding: 1.1rem 1.75rem;
        font-size: 1.25rem;
    }

    .frame-type-accordion .accordion-body {
        padding: 1.25rem 1.5rem;
        border-radius: 25px;
    }
}