/* Mobile Ansicht nach Layout (Startseite + geöffnetes Menü). Wird als letzte CSS-Datei geladen.
   Menü: unter 992px (Navigation eingeklappt), übrige Anpassungen: unter 768px (Smartphone). */

/* ------------------------------------------------------------------ Menü (unter 992px) */
@media (max-width: 991.98px) {
    /* Hamburger / Schließen als roter Kreis mit weißen Linien */
    #page-header .navbar-toggler {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 45px;
        height: 45px;
        padding: 0;
        border: 0;
        border-radius: 50%;
        background: var(--nav-highlight, #e40422);
        box-shadow: none;
    }

    #page-header .navbar-toggler-icon,
    #page-header .navbar-toggler-icon::before,
    #page-header .navbar-toggler-icon::after {
        color: #fff;
        background-color: #fff;
    }

    #page-header .navbar-toggler-icon {
        width: 20px;
    }

    #page-header .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon {
        background-color: transparent;
    }

    /* geöffnetes Menü: über der ganzen Seite (am Header ausgerichtet, nicht am Container), lila Box mit allen
       Unterpunkten; seitlicher Rand wie der Inhalt (Smartphone 25px, Tablet Container 720px) */
    #page-header .container-mainnavigation {
        position: static;
    }

    #mainnavigation {
        position: absolute;
        top: 100%;
        right: 0;
        left: 0;
        z-index: 1030;
        height: calc(100dvh - 100%);
        overflow-y: auto;
        padding: 1.5rem max(25px, calc((100% - 680px) / 2)) 3rem;
        background: #fff;
    }

    #mainnavigation > .navbar-nav {
        padding: 3rem 2.75rem 2.75rem;
        border-radius: 40px;
        background: var(--circle-purple, #8579b5);
    }

    #mainnavigation .navbar-nav > .nav-item {
        display: block;
        margin: 0 0 2.25rem;
        border: 0;
    }

    #mainnavigation .navbar-nav > .nav-item:last-child {
        margin-bottom: 0;
    }

    #mainnavigation .navbar-nav > .nav-item > .nav-link-main {
        padding: 0;
        color: #fff;
        font-size: 1.25rem;
        font-weight: 700;
        line-height: 1.2;
        text-transform: uppercase;
    }

    #mainnavigation .navbar-nav > .nav-item > .nav-link-main:before,
    #mainnavigation .navbar-nav > .nav-item > .nav-link-toggle {
        display: none;
    }

    /* Unterpunkte immer sichtbar, mit Pfeil */
    #mainnavigation .navbar-nav > .nav-item > .dropdown-menu {
        position: static;
        display: block;
        margin: .5rem 0 0;
        padding: 0;
        border: 0;
        background: transparent;
        box-shadow: none;
    }

    #mainnavigation .dropdown-menu .dropdown-nav {
        display: block;
        columns: auto;
        margin: 0;
        padding: 0 0 0 .75rem;
        list-style: none;
    }

    #mainnavigation .dropdown-menu .nav-link-dropdown {
        display: flex;
        align-items: baseline;
        gap: .5rem;
        padding: .2rem 0;
        background: transparent;
        color: #fff;
        font-size: 1.125rem;
        font-weight: 400;
        line-height: 1.35;
    }

    #mainnavigation .dropdown-menu .nav-link-dropdown::before {
        content: '\2197';
        display: inline-block;
        position: static;
        width: auto;
        height: auto;
        border: 0;
        background: none;
        font-size: .8em;
        font-weight: 700;
        opacity: 1;
        transform: none;
    }

    #mainnavigation .navbar-nav .nav-link:hover,
    #mainnavigation .navbar-nav .nav-link:focus-visible,
    #mainnavigation .dropdown-menu .nav-link-dropdown:hover,
    #mainnavigation .dropdown-menu .nav-link-dropdown.active {
        background: transparent;
        color: #fff;
        text-decoration: underline;
    }

    /* Suche unter der Box */
    #mainnavigation .c-header-search {
        margin: 2.25rem 0 0;
    }

    #mainnavigation .c-header-search__input,
    #mainnavigation .c-header-search:hover .c-header-search__input,
    #mainnavigation .c-header-search:focus-within .c-header-search__input {
        height: 45px;
        border-radius: 12px;
        box-shadow: none;
    }

    #mainnavigation .c-header-search__button {
        top: 2px;
        right: 4px;
    }
}

/* ------------------------------------------------------------------ Smartphone (unter 768px) */
@media (max-width: 767.98px) {
    /* seitlicher Rand 25px (Inhaltselemente: der innere .frame-container hat zusätzlich 20px) */
    .container {
        padding-right: 25px;
        padding-left: 25px;
    }

    .frame-group-container {
        padding-right: calc(25px - var(--bs-gutter-x, 40px) * .5);
        padding-left: calc(25px - var(--bs-gutter-x, 40px) * .5);
    }

    /* Elemente in Spalten: kein zusätzlicher Rand, Inhalt bündig an der Spaltenkante */
    .container .frame-group-container,
    .frame .frame > .frame-group-container {
        padding-right: 0;
        padding-left: 0;
    }

    .frame .frame.frame-background-none > .frame-group-container > .frame-group-inner > .frame-container {
        padding-right: 0;
        padding-left: 0;
    }

    /* Überschriften */
    #page-content h1.element-header,
    #page-content h2.element-header,
    .frame-type-menu_card_list .element-header,
    .frame-type-news_newsliststicky:has(.c-ambassador-slider) .element-header {
        font-size: 1.875rem;
        line-height: 1.15;
        hyphens: auto;
        hyphenate-limit-chars: 10 5 4;
        overflow-wrap: break-word;
    }

    /* Startseiten-Slider: Hochformat, Text links oben, nur Punkte */
    .section.section-default > .frame-type-ws_slider {
        padding-right: 25px;
        padding-left: 25px;
    }

    .section.section-default > .frame-type-ws_slider .swiper-slide > img.img-fluid {
        aspect-ratio: 5 / 8;
        border-radius: 25px;
    }

    .section.section-default > .frame-type-ws_slider .swiper-slide .caption-text {
        top: 1.75rem;
        right: 1.5rem;
        left: 1.5rem;
        align-items: flex-start;
        gap: 1rem;
        max-width: none;
        text-align: left;
    }

    .section.section-default > .frame-type-ws_slider .swiper-slide .caption-text .caption-title {
        font-size: 3.4rem;
        line-height: .95;
        text-align: left;
    }

    .section.section-default > .frame-type-ws_slider .swiper-slide .caption-text .caption-body {
        display: block;
        max-width: none;
        padding: 0;
        background: none;
        color: #fff;
        font-size: 1rem;
        text-shadow: 0 1px 8px rgba(0, 0, 0, .35);
    }

    .section.section-default > .frame-type-ws_slider .swiper-button-prev,
    .section.section-default > .frame-type-ws_slider .swiper-button-next {
        display: none;
    }

    .section.section-default > .frame-type-ws_slider .swiper-navigation {
        margin: .75rem 0 0 1.5rem;
    }

    /* Zahlen-Kreise: groß, überlappend, ragen in den Slider und über den Rand */
    /* Kreise ragen in den Slider (Sektion schneidet am Fensterrand ab) */
    .frame.circleshome {
        position: relative;
        z-index: 1;
        margin-top: -11.5rem;
        pointer-events: none;
    }

    .circleshome .card-group-element {
        aspect-ratio: 350 / 575;
    }

    .circleshome .card-group-element-item:nth-child(1) { width: 67%; left: -18%; top: 33.5%; }
    .circleshome .card-group-element-item:nth-child(2) { width: 70%; left: 30%;  top: 57%; }
    .circleshome .card-group-element-item:nth-child(3) { width: 71%; left: 36%;  top: 0; }

    .circleshome .card-title {
        font-size: 30cqi;
    }

    .circleshome .card-subtitle {
        font-size: 6.5cqi;
        font-weight: 400;
    }

    .circleshome .card-group-element-item:hover .card {
        transform: none;
    }

    /* Karten-Menüs: Querformat */
    .frame-type-menu_card_list .card {
        aspect-ratio: 350 / 190;
        height: auto;
        min-height: 0;
    }

    .frame-type-menu_card_list .card-img-top,
    .frame-type-menu_card_list .card-img-top picture,
    .frame-type-menu_card_list .card-img-top img {
        height: 100%;
    }

    .frame-type-menu_card_list .card-img-top img {
        width: 100%;
        object-fit: cover;
    }

    .frame-type-menu_card_list .card-title {
        font-size: 1.125rem;
    }

    .frame-type-menu_card_list .card-menu {
        gap: 1.75rem;
    }

    /* „Stories aus der Wissenschaft“ (rechtsbündige Überschrift auf Grün): links und weiß */
    .frame-type-menu_card_list .element-header.text-right {
        color: #fff;
        text-align: left !important;
    }

    /* Botschafter-Slider: ein großes Bild, Punkte direkt darunter, keine Pfeile */
    .c-ambassador-slider {
        row-gap: 1.25rem;
    }

    .c-ambassador-slider .c-ambassador-slider__track {
        aspect-ratio: 350 / 380;
    }

    .c-ambassador-slider__slide:not(.is-active) {
        display: none;
    }

    .c-ambassador-slider .c-ambassador-slider__slide.is-active {
        flex: 0 0 100%;
    }

    .c-ambassador-slider__aside {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }

    .c-ambassador-slider__nav {
        order: -1;
        margin: 0 0 1.5rem;
    }

    .c-ambassador-slider__arrow {
        display: none;
    }

    .c-ambassador-slider .c-ambassador-slider__name {
        font-size: 1.25rem;
    }

    .c-ambassador-slider .c-ambassador-slider__position {
        font-size: 1.125rem;
    }

    .c-ambassador-slider .c-ambassador-slider__quote p {
        font-size: 1.125rem;
        line-height: 1.35;
    }

    .c-ambassador-slider .c-ambassador-slider__quote {
        padding-left: 0;
    }

    .c-ambassador-slider .c-ambassador-slider__quote::before {
        display: none;
    }

    /* Footer: Social-Links, Links, Logo unten */
    .bp-page-footer .footer-section-content-column-middle {
        order: 3;
    }

    .bp-page-footer .footer-section-content .section-row {
        gap: 2.5rem;
    }

    /* Sticky-Buttons: Icons rechts, „Botschafter*in werden“ als senkrechter Reiter */
    .c-sticky-buttons {
        top: 37%;
        bottom: auto;
        transform: none;
    }

    /* doppelte Klasse: StickyButtons.css wird als Fluid-Asset nach dieser Datei geladen.
       Rundung vor der Drehung rechts = nach rotate(180deg) links (zur Seitenmitte) */
    .c-sticky-buttons .c-sticky-buttons__cta {
        padding: 1.5rem .7rem;
        border-radius: 0 22px 22px 0;
        font-size: .875rem;
        writing-mode: vertical-rl;
        transform: rotate(180deg);
    }
}

/* Sticky-Button: kurze Beschriftung („Botschafter*in werden“) nur mobil */
.c-sticky-buttons__cta-short {
    display: none;
}

@media (max-width: 767.98px) {
    .c-sticky-buttons__cta-long {
        display: none;
    }

    .c-sticky-buttons__cta-short {
        display: inline;
    }
}