/* FH Wedel - Headerbild (Spec 9.3) nach
   design-system/ui_kits/website/header-ohne-karussell.html und
   header-basis.css. Mindestens 340 px hoch, unter 821 px immer linksbuendig.

   Welle (Handoff 03.10.2026, TASK-89): festes Seitenverhaeltnis 1920:200,
   also 10,4 % der Header-Breite (bis 150 px bei 1440 px Seitenbreite),
   mindestens 40 px; darunter schneidet die SVG (preserveAspectRatio slice)
   seitlich ab statt zu stauchen. Sie ist eine Maske (--fhw-welle, im
   Template gesetzt) ueber der Farbe --fhw-wellenfarbe; diese folgt per
   :has() der ersten Flaeche im Inhaltsbereich (Vertrag
   fhw-flaeche--weiss|grau|blau). Der Header ist ein Container
   (container-type), damit Text und Schaltflaechen mit
   calc(max(10.42cqw, 40px) + 24px) immer oberhalb der Welle bleiben. */

.fhw-headerbild {
    --fhw-wellenhoehe: max(10.42cqw, 2.5rem);
    position: relative;
    overflow: clip;
    overflow-clip-margin: 12px;
    min-height: 21.25rem;
    background: var(--fh-blau);
    color: var(--text-invers);
    container-type: inline-size;
}

/* ---------- Text ---------- */
.fhw-headerbild__text {
    position: relative;
    z-index: 3;
    max-width: 32rem;
}

.fhw-headerbild .fhw-headerbild__dachzeile {
    margin: 0 0 var(--space-3);
}

.fhw-headerbild__titel {
    margin: 0 0 var(--space-3);
    font-size: var(--text-h2);
    line-height: var(--leading-heading);
}

.fhw-headerbild__subline {
    margin: 0 0 1.125rem;
    font-size: var(--text-body-m);
    line-height: var(--leading-body);
}

.fhw-headerbild__text > :last-child {
    margin-bottom: 0;
}

.fhw-headerbild__aktionen {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
}

/* Buttons nach .btn in header-basis.css: 48 px, mobil 44 px */
.fhw-headerbild .fhw-headerbild__button {
    min-height: 2.75rem;
    padding: 0 1.125rem;
    font-size: var(--text-body-m);
}

/* Farben nach header-buttons.html (Handoff 03.10.2026, TASK-90), die
   fhw:button nicht kennt: Blau traegt im Header immer eine 1 px weisse
   Kante, Hellblau dunkelblaue Schrift; Hover 90 % Farbe + 10 % Schwarz
   (Tokens). Rot, Gelb ("gold") und weiss umrandet kommen aus button.css. */
.fhw-headerbild .fhw-button.fhw-headerbild__button--blau,
.fhw-headerbild .fhw-button.fhw-headerbild__button--blau:hover {
    border-color: var(--fh-weiss);
    color: var(--text-invers);
}

.fhw-headerbild .fhw-button.fhw-headerbild__button--blau {
    background: var(--fh-blau);
}

.fhw-headerbild .fhw-button.fhw-headerbild__button--blau:hover {
    background: var(--fh-blau-mittel);
}

.fhw-headerbild .fhw-button.fhw-headerbild__button--hellblau,
.fhw-headerbild .fhw-button.fhw-headerbild__button--hellblau:hover {
    color: var(--fh-blau);
}

.fhw-headerbild .fhw-button.fhw-headerbild__button--hellblau {
    border-color: var(--fh-blau-hell);
    background: var(--fh-blau-hell);
}

.fhw-headerbild .fhw-button.fhw-headerbild__button--hellblau:hover {
    border-color: var(--fh-blau-hell-dunkel);
    background: var(--fh-blau-hell-dunkel);
}

/* ---------- Brotkrumen (TASK-175.10) ----------
   Studiengangsseite v4, Infos & Events v1: 14 px in Hellblau ueber der
   Dachzeile, Trenner "/", die aktuelle Seite in Weiss ohne Link. Hellblau
   auf Dunkelblau 6,7:1 (Flaeche und Textfeld sind beide Dunkelblau). */
.fhw-brotkrumen {
    margin: 0 0 1.125rem;
    color: var(--fh-blau-hell);
    font-size: var(--text-body-s);
    line-height: var(--leading-tight);
}

.fhw-brotkrumen__liste {
    display: flex;
    flex-wrap: wrap;
    gap: 0 0.375rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.fhw-brotkrumen__eintrag + .fhw-brotkrumen__eintrag::before {
    content: "/";
    margin-right: 0.375rem;
}

.fhw-headerbild .fhw-brotkrumen__link {
    color: inherit;
    text-decoration: none;
}

.fhw-headerbild .fhw-brotkrumen__link:hover,
.fhw-headerbild .fhw-brotkrumen__link:focus-visible {
    color: var(--text-invers);
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

.fhw-brotkrumen__eintrag[aria-current] {
    color: var(--text-invers);
}

/* ---------- Meldung "Aktuell" (TASK-175.10) ----------
   Startseite v8 (.hdnews): weisse Karte mit 6 px gelber Kante links unter
   den Aktionen, Dachzeile Dunkelblau, Titel als H2 (24 px, mobil 20 px ueber
   das Token), Link Dunkelblau mit roter Unterstreichung, Hover Rot. Die Karte
   fuellt die Breite des Textblocks, mobil also das ganze Textfeld. Die
   Farben setzen die Regeln der dunklen Flaeche (.fhw-dunkel) zurueck. */
.fhw-headerbild__meldung {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    margin-top: var(--space-4);
    padding: 1.125rem 1.25rem 1.25rem;
    border-left: 6px solid var(--fh-gelb);
    border-radius: var(--radius-m);
    background: var(--surface-card);
    color: var(--text-body);
    text-align: left;
}

.fhw-headerbild .fhw-headerbild__meldung .fhw-headerbild__meldung-dachzeile {
    margin: 0;
    color: var(--fh-blau);
}

.fhw-headerbild .fhw-headerbild__meldung-titel {
    margin: 0;
    color: var(--text-heading);
    font-size: var(--text-h3);
    line-height: var(--leading-subhead);
}

.fhw-headerbild__meldung-text {
    margin: 0;
    font-size: var(--text-body-m);
    line-height: var(--leading-body);
}

.fhw-headerbild .fhw-headerbild__meldung-link {
    align-self: flex-start;
    margin-top: 0.5rem;
    color: var(--fh-blau);
    font-weight: var(--weight-bold);
    text-decoration: underline;
    text-decoration-color: var(--fh-rot);
    text-decoration-thickness: 2px;
    text-underline-offset: 5px;
}

.fhw-headerbild .fhw-headerbild__meldung-link:hover,
.fhw-headerbild .fhw-headerbild__meldung-link:focus-visible {
    color: var(--fh-rot);
    text-decoration-color: var(--fh-rot);
}

/* ---------- Welle ---------- */
.fhw-headerbild__welle,
.fhw-headerbild__naht {
    position: absolute;
    right: 0;
    left: 0;
    z-index: 4;
    display: block;
    /* width fest: sonst zoege min-height ueber das Seitenverhaeltnis die
       Breite mit (unter 384 px breiter als der Header) */
    width: 100%;
    height: auto;
    min-height: 2.5rem;
    aspect-ratio: 1920 / 200;
    pointer-events: none;
    background: var(--fhw-wellenfarbe);
    -webkit-mask: var(--fhw-welle) no-repeat center bottom / 100% 100%;
    mask: var(--fhw-welle) no-repeat center bottom / 100% 100%;
}

.fhw-headerbild__welle {
    --fhw-wellenfarbe: var(--surface-page);
    bottom: -1px;
}

.fhw-seite:has(.fhw-inhaltsbereich > :first-child.fhw-flaeche--grau) .fhw-headerbild__welle {
    --fhw-wellenfarbe: var(--surface-section);
}

.fhw-seite:has(.fhw-inhaltsbereich > :first-child.fhw-flaeche--blau) .fhw-headerbild__welle {
    --fhw-wellenfarbe: var(--surface-dark);
}

/* ---------- A Farbflaeche ---------- */
.fhw-headerbild--flaeche {
    display: flex;
    align-items: center;
}

.fhw-headerbild--flaeche .fhw-headerbild__innen {
    padding-block: 2rem calc(var(--fhw-wellenhoehe) + 1.25rem);
}

/* ---------- B Bild mit Textfeld (mobil: Bild oben, gerade Kante) ---------- */
.fhw-headerbild--bild {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 13.125rem auto;
}

.fhw-headerbild--bild .fhw-headerbild__bild {
    position: relative;
    grid-row: 1;
    background: var(--fh-blau);
}

.fhw-headerbild--bild .fhw-headerbild__textfeld {
    position: relative;
    z-index: 3;
    grid-row: 2;
    padding: 1.375rem var(--fhw-seitenrand) var(--space-5);
    background: var(--fh-blau);
}

.fhw-headerbild--bild .fhw-headerbild__welle {
    display: none;
}

/* Naht: blaue Welle auf dem Motiv, leitet ins Textfeld ueber */
.fhw-headerbild__naht {
    --fhw-wellenfarbe: var(--fh-blau);
    bottom: -2px;
}

/* ---------- C Nur Bild ---------- */
.fhw-headerbild--nur-bild {
    background: transparent;
    color: var(--text-body);
}

.fhw-headerbild--nur-bild .fhw-headerbild__motiv {
    position: relative;
    height: 18.75rem;
    background: var(--fh-blau);
}

.fhw-headerbild__unten {
    padding-top: var(--space-4);
    background: var(--surface-page);
}

.fhw-headerbild__unten .fhw-headerbild__titel {
    color: var(--text-heading);
}

.fhw-headerbild__unten .fhw-inhalt > :last-child {
    margin-bottom: 0;
}

/* C: Buttons ab 821 px auf dem Motiv ueber der Welle, links oder rechts
   (header-buttons.html); darunter unter dem Text. Je eine Ausgabe ist
   ausgeblendet (Template). */
.fhw-headerbild__auf-motiv {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: none;
    align-items: flex-end;
    padding-bottom: calc(var(--fhw-wellenhoehe) + 1.5rem);
    pointer-events: none;
}

.fhw-headerbild__auf-motiv .fhw-headerbild__aktionen {
    pointer-events: auto;
}

.fhw-headerbild--rechts .fhw-headerbild__auf-motiv .fhw-headerbild__aktionen {
    justify-content: flex-end;
}

.fhw-headerbild__unter-text:not(:empty) {
    margin-top: 1.125rem;
}

/* Der Text unter der Welle steht auf der Farbe der ersten Flaeche */
.fhw-seite:has(.fhw-inhaltsbereich > :first-child.fhw-flaeche--grau) .fhw-headerbild__unten {
    background: var(--surface-section);
}

.fhw-seite:has(.fhw-inhaltsbereich > :first-child.fhw-flaeche--blau) .fhw-headerbild__unten {
    --btn-outline-fg: var(--fh-weiss);
    --btn-outline-hover: color-mix(in srgb, var(--fh-weiss) 14%, transparent);
    --link: var(--fh-weiss);
    --link-hover: var(--fh-weiss);
    background: var(--surface-dark);
    color: var(--text-invers);
}

.fhw-seite:has(.fhw-inhaltsbereich > :first-child.fhw-flaeche--blau) .fhw-headerbild__unten .fhw-headerbild__titel {
    color: var(--text-invers);
}

.fhw-seite:has(.fhw-inhaltsbereich > :first-child.fhw-flaeche--blau) .fhw-headerbild__unten .fhw-dachzeile {
    color: var(--text-dachzeile-invers);
}

/* Motiv: randlos, ohne Toenung (header-ohne-karussell.html) */
.fhw-headerbild__bild picture,
.fhw-headerbild__motiv picture {
    position: absolute;
    inset: 0;
}

.fhw-headerbild__foto {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ---------- Ab 821 px: 340 px hoch ----------
   Als Mindesthoehe (min-height oben): der Kopf ist 340 px hoch und waechst
   nur, wenn der Inhalt sonst abgeschnitten wuerde (lange Texte, zwei Buttons
   im schmalen Textfeld, Textvergroesserung 200 %); Abweichung 11. */
@media (min-width: 51.3125rem) {

    .fhw-headerbild .fhw-headerbild__button {
        min-height: 3rem;
        padding: 0 1.25rem;
    }

    .fhw-headerbild--flaeche .fhw-headerbild__innen {
        padding-block: 1.75rem calc(var(--fhw-wellenhoehe) + 1.5rem);
    }

    /* A Text rechts: Block an die rechte Kante, Text rechtsbuendig */
    .fhw-headerbild--flaeche.fhw-headerbild--rechts .fhw-headerbild__innen {
        display: flex;
        justify-content: flex-end;
    }

    .fhw-headerbild--flaeche.fhw-headerbild--rechts .fhw-headerbild__text {
        text-align: right;
    }

    .fhw-headerbild--flaeche.fhw-headerbild--rechts .fhw-headerbild__aktionen,
    .fhw-headerbild--flaeche.fhw-headerbild--rechts .fhw-brotkrumen__liste {
        justify-content: flex-end;
    }

    .fhw-headerbild__meldung {
        padding: 1.375rem 1.75rem 1.5rem;
    }

    /* B: goldener Schnitt, Motiv 61,8 %, Textfeld 38,2 %; die Ausrichtung
       nennt die Seite des Textfelds, das Bild steht gegenueber */
    .fhw-headerbild--bild {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.618fr);
        grid-template-rows: minmax(0, 1fr);
    }

    .fhw-headerbild--bild.fhw-headerbild--links .fhw-headerbild__textfeld {
        grid-column: 1;
        grid-row: 1;
    }

    .fhw-headerbild--bild.fhw-headerbild--links .fhw-headerbild__bild {
        grid-column: 2;
        grid-row: 1;
    }

    .fhw-headerbild--bild.fhw-headerbild--rechts {
        grid-template-columns: minmax(0, 1.618fr) minmax(0, 1fr);
    }

    .fhw-headerbild--bild.fhw-headerbild--rechts .fhw-headerbild__bild {
        grid-column: 1;
        grid-row: 1;
    }

    .fhw-headerbild--bild.fhw-headerbild--rechts .fhw-headerbild__textfeld {
        grid-column: 2;
        grid-row: 1;
    }

    .fhw-headerbild--bild .fhw-headerbild__textfeld {
        display: flex;
        align-items: center;
        padding: var(--space-5) 1.875rem calc(var(--fhw-wellenhoehe) + 1.5rem);
    }

    .fhw-headerbild--bild .fhw-headerbild__titel {
        margin-bottom: 0.625rem;
        font-size: var(--text-h3);
    }

    .fhw-headerbild--bild .fhw-headerbild__subline {
        margin-bottom: var(--space-4);
        font-size: var(--text-body-s);
    }

    .fhw-headerbild--bild .fhw-headerbild__welle {
        display: block;
    }

    .fhw-headerbild__naht {
        display: none;
    }

    .fhw-headerbild--nur-bild .fhw-headerbild__motiv {
        height: 21.25rem;
    }

    .fhw-headerbild__auf-motiv {
        display: flex;
    }

    .fhw-headerbild__unter-text {
        display: none;
    }
}

/* ---------- D Studienplatzfinder (TASK-49) ----------
   Nach header-ohne-karussell.html und header-basis.css (.finder, .feld,
   .mfinder.dock): weisse Karte, Labels 12 px SemiBold Dunkelblau, Auswahl
   48 px, roter Button. Ab 821 px im Header (Flaeche: Select | Select |
   Button; Bild: zwei Spalten, Button darunter, vertauschter goldener
   Schnitt), darunter als Karte unter dem Header, die 46 px ueber die
   Unterkante ragt (Dock). */
.fhw-finder {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-3);
    margin: 0;
    padding: var(--space-4);
    border-radius: var(--radius-m);
    background: var(--surface-card);
    box-shadow: var(--shadow-card);
    color: var(--text-body);
    text-align: left;
}

.fhw-finder__feld {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    min-width: 0;
}

.fhw-finder__label {
    color: var(--fh-blau);
    font-size: var(--text-caption);
    font-weight: var(--weight-semibold);
}

.fhw-finder__auswahl {
    position: relative;
    display: block;
}

/* Pfeil als Rahmen-Winkel in Dunkelblau (keine Bilddatei, keine Hexwerte) */
.fhw-finder__auswahl::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 0.875rem;
    width: 0.5rem;
    height: 0.5rem;
    border-right: 2px solid var(--fh-blau);
    border-bottom: 2px solid var(--fh-blau);
    transform: translateY(-70%) rotate(45deg);
    pointer-events: none;
}

.fhw-finder__select {
    appearance: none;
    width: 100%;
    min-height: 3rem;
    box-sizing: border-box;
    margin: 0;
    padding: 0 2.375rem 0 0.875rem;
    border: 1px solid var(--grau-300);
    border-radius: var(--radius-s);
    background: var(--surface-card);
    color: var(--grau-900);
    font-family: var(--font-body);
    font-size: var(--text-body-m);
}

.fhw-finder .fhw-finder__knopf {
    justify-content: center;
    min-height: 3rem;
}

/* Mobil: Karte im Dock unter dem Header, Platz dafuer im Header */
.fhw-headerbild__finder {
    display: none;
}

.fhw-headerbild__dock {
    padding: 0 var(--fhw-seitenrand) var(--space-4);
    background: var(--surface-page);
}

.fhw-seite:has(.fhw-inhaltsbereich > :first-child.fhw-flaeche--grau) .fhw-headerbild__dock {
    background: var(--surface-section);
}

.fhw-seite:has(.fhw-inhaltsbereich > :first-child.fhw-flaeche--blau) .fhw-headerbild__dock {
    background: var(--surface-dark);
}

.fhw-finder--dock {
    position: relative;
    z-index: 6;
    margin-top: -2.875rem;
}

/* Mobil: Text unten im Header, fester Abstand zur Karte (Kit: ca. 32 px
   zwischen Text und Karte, die Karte ragt 46 px ueber die Kante) */
.fhw-headerbild--flaeche.fhw-headerbild--finder {
    align-items: flex-end;
}

.fhw-headerbild--flaeche.fhw-headerbild--finder .fhw-headerbild__innen {
    padding-bottom: 4.875rem;
}

.fhw-headerbild--bild.fhw-headerbild--finder .fhw-headerbild__textfeld {
    padding-bottom: 3.75rem;
}

@media (min-width: 51.3125rem) {

    .fhw-headerbild__finder {
        display: grid;
        margin-top: var(--space-4);
    }

    .fhw-headerbild__dock {
        display: none;
    }

    .fhw-headerbild--finder .fhw-headerbild__text {
        max-width: 46rem;
    }

    .fhw-headerbild--flaeche.fhw-headerbild--finder {
        align-items: center;
    }

    .fhw-headerbild--flaeche.fhw-headerbild--finder .fhw-headerbild__innen {
        padding-bottom: calc(var(--fhw-wellenhoehe) + 1.5rem);
    }

    .fhw-headerbild--flaeche .fhw-finder {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
        align-items: end;
    }

    /* Vertauschter goldener Schnitt: der Finder bekommt die grosse Flaeche */
    .fhw-headerbild--bild.fhw-headerbild--finder.fhw-headerbild--links {
        grid-template-columns: minmax(0, 1.618fr) minmax(0, 1fr);
    }

    .fhw-headerbild--bild.fhw-headerbild--finder.fhw-headerbild--rechts {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.618fr);
    }

    .fhw-headerbild--bild.fhw-headerbild--finder .fhw-headerbild__textfeld {
        padding-bottom: calc(var(--fhw-wellenhoehe) + 1.5rem);
    }

    .fhw-headerbild--bild.fhw-headerbild--finder .fhw-headerbild__text {
        width: 100%;
        max-width: none;
    }

    .fhw-headerbild--bild .fhw-finder {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }

    .fhw-headerbild--bild .fhw-finder .fhw-finder__knopf {
        grid-column: 1 / -1;
    }
}