/* =============================================================================
   STUDIENGÄNGE BLOCK
   ============================================================================= */

/* =============================================================================
   SECTION
   ============================================================================= */
.studiengaenge {
    background-color: var(--color-bt-light);
    padding-block: 80px;
    padding-inline: var(--padding-x);
}
.studiengaenge__inner {
    max-width: 1110px;
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    gap: 32px;
}

/* =============================================================================
   HEADLINE
   ============================================================================= */
.studiengaenge__headline {
    font-family: var(--font-primary);
    font-weight: var(--font-weight-bold);
    font-size: 48px;
    line-height: 1;
    color: var(--color-white);
    text-align: left;
}
.studiengaenge__headline .text-accent { color: var(--color-accent); }

/* =============================================================================
   FILTER
   ============================================================================= */
.studiengaenge__filter-wrap {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}
.studiengaenge__filter-label {
    font-family: var(--font-body);
    font-weight: var(--font-weight-regular);
    font-size: 18px;
    line-height: 1.2;
    color: var(--color-white);
}
.studiengaenge__filter {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
}
.studiengaenge__filter-btn {
    background-color: var(--color-turquoise);
    border: none;
    color: var(--color-accent);
    font-family: var(--font-body);
    font-weight: var(--font-weight-regular);
    font-size: 14px;
    line-height: 1.2;
    letter-spacing: 3.5px;
    text-transform: uppercase;
    padding: 16px;
    cursor: pointer;
    transition: background-color var(--transition-base), color var(--transition-base);
    white-space: nowrap;
}
.studiengaenge__filter-btn:hover {
    background-color: var(--color-accent);
    color: var(--color-bt-dark);
}
.studiengaenge__filter-btn.is-active {
    background-color: var(--color-accent);
    color: var(--color-bt-dark);
}

/* =============================================================================
   COUNT
   ============================================================================= */
.studiengaenge__count {
    font-family: var(--font-body);
    font-size: 18px;
    line-height: 1.2;
    color: var(--color-accent);
    text-align: left;
    padding-top: 16px;
}
.studiengaenge__count-visible {
    font-weight: var(--font-weight-bold);
}

/* =============================================================================
   GRID
   ============================================================================= */
.studiengaenge__grid {
    display: grid;
    grid-template-columns: 1fr;
    align-items: start;
}

@media (min-width: 768px) {
    .studiengaenge__grid {
        gap: var(--space-md);
    }
}

/* Swiper-wrapper überschreibt display:grid — nur auf Mobile erlaubt */
@media (min-width: 768px) {
    .studiengaenge__grid.swiper-wrapper {
        display: grid !important;
        flex-wrap: unset !important;
        transform: none !important;
    }
}

/* =============================================================================
   CARD

   Struktur:
   .sg-card                         ← relativer Container, overflow:hidden
     .sg-card__image                ← Hintergrundbild, IMMER absolute inset:0
     .sg-card__header-area          ← Typ + Toggle + Titel, z-index:2, 206px hoch
     .sg-card__body-info            ← weißer Bereich, z-index:3, slidet bei Hover raus
     .sg-card__body-details         ← Details, z-index:2, immer unten positioniert

   Bei Hover:
   - .sg-card__body-info translateY(100%) → weißer Bereich verschwindet nach unten
   - .sg-card__image ist die ganze Zeit full-size dahinter
   - .sg-card__body-details wird sichtbar
   ============================================================================= */
.sg-card {
    position: relative;
    overflow: hidden;
    cursor: pointer;
}
.sg-card[data-hidden="true"] { display: none; }

/* Hintergrundbild — normal in header-area Höhe, bei Hover full-card */
.sg-card__image {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: calc(206px + 2px); /* exakt bis zur border-top von body-info */
    z-index: 0;
    background-color: var(--color-bt-dark);
    background-size: cover;
    background-position: center;
    transition: height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.sg-card__image::before {
    content: '';
    position: absolute;
    inset: 0;
    background-color: rgba(21, 57, 62, 0.55);
}
.sg-card.is-open .sg-card__image {
    height: calc(100% + 2px);
}



/* Header-Area: Typ + Toggle + Titel — 206px, immer über Bild */
.sg-card__header-area {
    position: relative;
    z-index: 2;
    height: 206px;
    padding: 16px 16px 32px;
    display: flex;
    flex-direction: column;
}

/* Border unten bei vollem Hover — bleibt am unteren Ende sichtbar */
.sg-card::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    background-color: var(--color-accent);
    z-index: 4;
    opacity: 0;
    transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.sg-card.is-open::after {
    opacity: 1;
}

.sg-card__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    width: 100%;
}

.sg-card__typ {
    font-family: var(--font-body);
    font-weight: var(--font-weight-regular);
    font-size: 16px;
    line-height: 1.2;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: var(--color-accent);
    display: block;
}

.sg-card__title {
    font-family: var(--font-primary);
    font-weight: var(--font-weight-bold);
    font-size: 32px;
    line-height: 1.1;
    color: var(--color-white);
    margin-top: auto;
    padding-right: 8px;
}

/* Toggle Button */
.sg-card__toggle {
    flex-shrink: 0;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 2px solid var(--color-accent);
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: background var(--transition-base);
}
.icon-arrow {
    width: 24px;
    height: 24px;
    color: var(--color-accent);
    display: block;
}
.sg-card__toggle-down { display: flex; }
.sg-card__toggle-up   { display: none; }

.sg-card.is-open .sg-card__toggle { background: var(--color-accent); }
.sg-card.is-open .sg-card__toggle-down { display: none; }
.sg-card.is-open .sg-card__toggle-up   { display: flex; }
.sg-card.is-open .icon-arrow           { color: var(--color-bt-dark); }

/* Body Info — weißer Bereich, slidet bei Hover raus */
.sg-card__body-info {
    position: relative;
    z-index: 3;
    background-color: var(--color-white);
    border-top: 2px solid var(--color-accent);
    padding: 16px;
    min-height: 269px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 16px;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.sg-card.is-open .sg-card__body-info {
    transform: translateY(100%);
}

.sg-card__desc {
    font-family: var(--font-body);
    font-weight: var(--font-weight-regular);
    font-size: 16px;
    line-height: 1.4;
    color: var(--color-bt-light);
    margin: auto 0;
}
.sg-card__btn-front {
    width: 322px;
    max-width: 100%;
    height: 45px;
    font-size: 18px;
    margin-bottom: 8px;
}

/* Body Details — liegt hinter body-info, immer unten */
.sg-card__body-details {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 2;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.sg-card__meta { display: flex; flex-direction: column; gap: 8px; }
.sg-card__meta-row { display: flex; align-items: flex-start; gap: 8px; }
.sg-card__meta dt {
    font-family: var(--font-body);
    font-weight: var(--font-weight-bold);
    font-size: 16px;
    line-height: 1.2;
    color: var(--color-white);
    white-space: nowrap;
    margin: 0;
}
.sg-card__meta dd {
    font-family: var(--font-body);
    font-weight: var(--font-weight-regular);
    font-size: 16px;
    line-height: 1.4;
    color: var(--color-white);
    text-align: right;
    flex: 1;
    margin: 0;
}
.sg-card__btn-back {
    width: 322px;
    max-width: 100%;
    height: 45px;
    font-size: 18px;
}

/* =============================================================================
   DESKTOP ab 1024px
   ============================================================================= */
@media (min-width: 768px) {
    .studiengaenge {
        padding-block: var(--space-3xl);
        padding-inline: var(--padding-x-desktop);
    }
    .studiengaenge__grid {
        grid-template-columns: repeat(3, 1fr);
    }
    /* Swiper auf Desktop komplett deaktivieren */
    .studiengaenge__swiper {
        overflow: visible !important;
    }
    .studiengaenge__swiper .swiper-wrapper {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: var(--space-md) !important;
        transform: none !important;
        flex-wrap: unset !important;
        width: auto !important;
    }
    .studiengaenge__swiper .swiper-slide {
        width: auto !important;
        margin-right: 0 !important;
    }
}

/* =============================================================================
   SWIPER – Mobile Slider (nur unter 768px)
   ============================================================================= */
.studiengaenge__swiper {
    width: 100%;
    overflow: hidden;
}

.studiengaenge__grid.swiper-wrapper {
    display: flex;
    flex-wrap: nowrap;
}

@media (max-width: 767px) {
    /* Swiper bricht aus dem padding-Container aus nach rechts */
    .studiengaenge__swiper {
        margin-inline: calc(-1 * var(--padding-x));
        width: calc(100% + 2 * var(--padding-x));
        overflow: hidden;
    }

    .studiengaenge__grid {
        display: flex !important;
        grid-template-columns: unset !important;
    }

    .sg-card.swiper-slide {
        width: calc(100vw - 48px) !important;
        max-width: 354px;
        flex-shrink: 0;
        -webkit-tap-highlight-color: transparent;
    }

    /* Erster Slide: padding links via Swiper slidesOffsetBefore (im JS gesetzt) */
}

/* =============================================================================
   PAGINATION DOTS
   Alle Dots: 10px × 10px, quadratisch, Cyan — aktiver Dot: weiß
   ============================================================================= */
.studiengaenge__pagination {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding-top: 16px;
    min-height: 24px;
    /* Swiper .swiper-pagination-bullets-dynamic setzt left:50% + padding-left — überschreiben */
    position: relative !important;
    left: 0 !important;
    transform: none !important;
}

@media (min-width: 768px) {
    .studiengaenge__pagination {
        display: none !important;
    }
}

/* Basis-Dot: 10×10px, quadratisch, Cyan */
.studiengaenge__pagination .swiper-pagination-bullet {
    display: inline-block !important;
    width: 10px !important;
    height: 10px !important;
    border-radius: 0 !important;
    background-color: var(--color-accent) !important;
    opacity: 1 !important;
    margin: 0 4px !important;
    flex-shrink: 0;
    transition: width 0.2s ease, height 0.2s ease, background-color 0.2s ease;
    transform: none !important;
}

/* Vorletzter (2. von außen): 5px */
.studiengaenge__pagination .swiper-pagination-bullet.is-dot-sm {
    width: 5px !important;
    height: 5px !important;
}

/* Äußerste Dots: 2px */
.studiengaenge__pagination .swiper-pagination-bullet.is-dot-xs {
    width: 2px !important;
    height: 2px !important;
}

/* Aktiver Dot: weiß */
.studiengaenge__pagination .swiper-pagination-bullet-active {
    background-color: var(--color-white) !important;
}