.gu-study-explorer {
    /* Deep links scroll here; leave room for the sticky header. */
    scroll-margin-top: 96px;

    --gu-se-burgundy: #70122a;
    --gu-se-red: #e42720;
    --gu-se-ink: #1a1a1a;
    --gu-se-muted: #555555;
    --gu-se-pink: #f5c3c2;
    --gu-se-border: #e5e4e2;
    --gu-se-surface: #ffffff;
    --gu-se-surface-muted: #f8f8f8;
    --gu-se-radius: 10px;
    --gu-se-radius-sm: 3px;
    --gu-se-font-heading: "Josefin Sans", "Trebuchet MS", sans-serif;

    display: block;
}

/* universal.css gibt jedem Kind von .ct-inner-content ohne .alignfull 30px
   seitlichen Innenabstand — die kämen zu denen des Containers hinzu. Das
   body-Präfix hebt die Spezifität über deren 0,2,0. */
body .ct-inner-content > .gu-study-explorer {
    padding-left: 0;
    padding-right: 0;
}

/* Oxygen's universal.css sets "h1, h2, h3, h4, h5 { text-transform: uppercase }"
   for the whole site. Browsers reset text-transform on form controls, so a card
   whose title sits in a <button> came out in title case while a plain card —
   bare text in the <h3> — shouted. One reset for the whole block, so every
   heading reads the way it was typed. Not the h2: the section title is in
   capitals like every section heading (--dhaw-h2-transform, 2026-09-21). */
.gu-study-explorer :is(h1, h3, h4, h5, h6) {
    text-transform: none;
}

/* Text only screen readers get: link purpose out of context, WCAG 2.4.4. */
.gu-study-explorer__sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* The grid/flex rules below would win over the UA rule for [hidden]. */
.gu-study-explorer [hidden] {
    display: none !important;
}

/* Breite, Zentrierung und seitlicher Innenabstand kommen aus .dhaw-container
   (assets/css/container.css) — hier nur der vertikale Abstand, sonst addieren
   sich beide Innenabstände. */
.gu-study-explorer__inner {
    padding-top: 88px;
    padding-bottom: 88px;
}

.gu-study-explorer :focus-visible {
    outline: 2px solid var(--gu-se-burgundy);
    outline-offset: 3px;
    border-radius: var(--gu-se-radius-sm);
}

.gu-study-explorer__eyebrow {
    font-family: var(--dhaw-eyebrow-font, "Open Sans", sans-serif);
    font-size: var(--dhaw-eyebrow-size, 15px);
    font-weight: 600;
    letter-spacing: var(--dhaw-eyebrow-tracking, 0.12em);
    text-transform: var(--dhaw-eyebrow-transform, uppercase);
    color: var(--gu-se-burgundy);
    margin: 0;
}

.gu-study-explorer__title {
    /* Größe aus --dhaw-h2-size (tokens.css), wie alle neuen Sektionen. */
    font-family: var(--gu-se-font-heading);
    font-size: var(--dhaw-h2-size, 30px);
    text-transform: var(--dhaw-h2-transform, uppercase);
    line-height: 1.2;
    font-weight: 600;
    color: var(--wp--preset--color--wine, #70122a);
    margin: 12px 0 40px;
    max-width: 640px;
}

/* Ebene 1 — degree level tabs */

.gu-study-explorer__tablist {
    display: flex;
    gap: 40px;
    border-bottom: 1px solid var(--gu-se-border);
    margin-bottom: 28px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.gu-study-explorer__tablist::-webkit-scrollbar {
    display: none;
}

.gu-study-explorer__tab {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    flex: none;
    background: none;
    border: none;
    border-radius: 0;
    margin: 0;
    padding: 8px 0 16px;
    cursor: pointer;
    font-family: inherit;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.2;
    text-align: left;
    white-space: nowrap;
    color: var(--gu-se-muted);
    transition: color 0.2s ease;
}

.gu-study-explorer__tab::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 2px;
    background: transparent;
}

.gu-study-explorer__tab:hover,
.gu-study-explorer__tab:focus-visible {
    color: var(--gu-se-burgundy);
}

.gu-study-explorer__tab.is-active {
    color: var(--gu-se-burgundy);
}

.gu-study-explorer__tab.is-active::after {
    background: var(--gu-se-red);
}

.gu-study-explorer__tab-icon {
    display: flex;
    flex: none;
}

.gu-study-explorer__intro {
    color: var(--gu-se-muted);
    font-size: 17px;
    line-height: 1.6;
    max-width: 640px;
    margin: 0 0 32px;
}

/* Ebene 2 — programme cards */

.gu-study-explorer__programs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.gu-study-explorer__card {
    /* Held as custom properties so hover and focus flip the whole card in one
       rule instead of one rule per element. */
    --gu-se-card-bg: var(--gu-se-surface-muted);
    --gu-se-card-title: var(--gu-se-burgundy);
    --gu-se-card-meta: var(--gu-se-muted);

    position: relative;
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
    width: 100%;
    margin: 0;
    padding: 28px;
    text-align: left;
    background: var(--gu-se-card-bg);
    border-radius: var(--gu-se-radius);
    transition: background-color 0.2s ease;
}

/* Hover and keyboard focus invert the card: burgundy ground, white type. Only
   the two interactive shapes — a plain card has nothing to activate. The arrow
   is deliberately left alone; its white disc is what stands out once the card
   behind it turns dark. */
.gu-study-explorer__card--expandable:hover,
.gu-study-explorer__card--link:hover,
.gu-study-explorer__card:has(.gu-study-explorer__card-trigger:focus-visible) {
    --gu-se-card-bg: var(--gu-se-burgundy);
    --gu-se-card-title: var(--gu-se-surface);
    /* 8.15:1 on the burgundy — the plain grey would drop to 1.6:1. */
    --gu-se-card-meta: rgba(255, 255, 255, 0.82);
}

.gu-study-explorer__card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    min-width: 0;
}

.gu-study-explorer__card-title {
    margin: 0;
    font-family: var(--gu-se-font-heading);
    font-weight: 700;
    font-size: 19px;
    line-height: 1.35;
    color: var(--gu-se-card-title);
    transition: color 0.2s ease;
    min-width: 0;
    flex: 1;
    overflow-wrap: break-word;
}

/* Inside the <h3>, so <h3><button> stays valid HTML and the heading carries
   the programme name. ::after stretches the hit area over the whole card.

   :hover and :focus are spelled out because universal.css carries a global
   `a:hover { color: #70122a }`. A bare `.gu-study-explorer__card-trigger`
   (0,0,1,0) loses to it (0,0,1,1), so a link card's title turned burgundy on
   the burgundy hover ground and disappeared — while a button card, not being
   an <a>, was fine. Two classes beat one class plus one element. */
.gu-study-explorer__card-trigger,
.gu-study-explorer__card-trigger:hover,
.gu-study-explorer__card-trigger:focus {
    margin: 0;
    padding: 0;
    background: none;
    border: none;
    font: inherit;
    color: inherit;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}

/* The block-wide focus ring is burgundy, which would vanish on the inverted
   card — and the card is inverted exactly when this trigger has focus. */
.gu-study-explorer__card-trigger:focus-visible {
    outline-color: var(--gu-se-surface);
}

.gu-study-explorer__card-trigger::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: var(--gu-se-radius);
}

.gu-study-explorer__card-arrow {
    flex: none;
    width: 36px;
    height: 36px;
    border-radius: 999px;
    background: var(--gu-se-surface);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gu-se-burgundy);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.gu-study-explorer__card-meta {
    margin: 0;
    margin-top: auto;
    padding-top: 14px;
    font-size: 14px;
    font-weight: 400;
    /* Not the signal red: #e42720 on the muted card ground only reaches 4.3:1
       and fails WCAG AA for normal text. This grey is 7.02:1 (AAA). */
    color: var(--gu-se-card-meta);
    transition: color 0.2s ease;
}

/* Ebene 3 — specialisations */

/* Focus lands here when a card opens, so the group name is announced.
   Programmatic focus should not paint a ring. */
.gu-study-explorer__detail:focus {
    outline: none;
}

.gu-study-explorer__detail-head {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
}

.gu-study-explorer__back {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: none;
    background: none;
    border: none;
    margin: 0;
    padding: 0;
    cursor: pointer;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    color: var(--gu-se-burgundy);
}

.gu-study-explorer__back:hover,
.gu-study-explorer__back:focus-visible {
    color: var(--gu-se-red);
}

.gu-study-explorer__detail-divider {
    width: 1px;
    height: 16px;
    background: var(--gu-se-border);
}

.gu-study-explorer__detail-title {
    margin: 0;
    flex: 1;
    min-width: 0;
    font-family: var(--gu-se-font-heading);
    font-weight: 700;
    font-size: 18px;
    line-height: 1.3;
    color: var(--gu-se-ink);
}

.gu-study-explorer__detail-link {
    flex: none;
    font-size: 14px;
    font-weight: 600;
    color: var(--gu-se-burgundy);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.gu-study-explorer__detail-link:hover,
.gu-study-explorer__detail-link:focus-visible {
    color: var(--gu-se-red);
}

.gu-study-explorer__note {
    color: var(--gu-se-muted);
    font-size: 16px;
    font-style: italic;
}

@media (max-width: 991px) {
    .gu-study-explorer__inner {
        padding-top: 56px;
        padding-bottom: 56px;
    }

    .gu-study-explorer__title {
        margin-bottom: 28px;
    }

    .gu-study-explorer__tablist {
        gap: 28px;
    }

    .gu-study-explorer__programs {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767px) {
    /* Auf dem Telefon passen die drei Tabs nicht nebeneinander: die Beschriftungen
       der Live-Seite (Bachelorabschluss / MBA-Abschluss / Hochschulzertifikat)
       messen zusammen 427px, mit Icons und Abständen 567px — auf einem 390px
       breiten Gerät stehen nach dem Containerabstand 330px zur Verfügung.
       Deshalb umbrechen statt seitlich scrollen: der scrollbare Streifen
       versteckte seine Scrollleiste (scrollbar-width: none), der dritte Tab lag
       also unsichtbar außerhalb des Bildes. Nichts wies darauf hin.

       Die Icons bleiben sichtbar. Sie kosten je 24px (16px Symbol + 8px
       Abstand), damit misst eine Zeile aus den ersten beiden Tabs 342px: ab
       etwa 414px Gerätebreite stehen Bachelor und MBA nebeneinander und
       "Hochschulzertifikat" allein darunter, auf schmaleren Geräten steht jeder
       Tab in einer eigenen Zeile. Beides ist lesbar, nichts liegt mehr
       außerhalb des Bildes. */
    .gu-study-explorer__tablist {
        flex-wrap: wrap;
        overflow-x: visible;
        column-gap: 24px;
        row-gap: 4px;
    }

    .gu-study-explorer__programs {
        grid-template-columns: minmax(0, 1fr);
    }

    .gu-study-explorer__card {
        padding: 22px;
    }

    .gu-study-explorer__detail-head {
        flex-wrap: wrap;
        gap: 10px;
    }

    .gu-study-explorer__detail-divider {
        display: none;
    }

    .gu-study-explorer__detail-title {
        flex-basis: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .gu-study-explorer * {
        transition: none !important;
    }
}