/* FH Wedel - Seitenrahmen: Titelbereich, Fusszeile; die Kopfleiste mit dem
   Mega-Menue steht in menue.css (TASK-38).
   Vorlagen: design-system/ui_kits/website/SiteChrome.jsx und footer.html. */

/* ---------- Kopfleiste ---------- */
/* Kopfleiste und Mega-Menue stehen seit TASK-38 in menue.css (Layouts/
   Default.html bindet sie ein). */

/* ---------- Titelbereich (Seite ohne Headerbild) ---------- */
.fhw-titelbereich {
    padding-block: var(--space-7) var(--space-5);
}

.fhw-titelbereich__titel {
    margin: 0;
    max-width: var(--content-narrow);
}

/* ---------- Fusszeile ----------
   Nach dem abgenommenen Entwurf (design-system/ui_kits/website/footer.html
   vom 03.10.2026) in der Fassung der vier Seitenentwuerfe (bausteine.js
   footer(), bausteine.css .foot; TASK-177): Dunkelblau, vier Spalten
   minmax(250px, 1.25fr) .75fr .75fr minmax(300px, 1.45fr), Abstand 40/56 px,
   oben 48 px, unten 56 px. Tablet 601 bis 960 px (startseite v8,
   .foot .wrap[data-stack]): drei Spalten, die Marke ueber zwei Zeilen, der
   Newsletter unter den Linkspalten; bis 600 px eine Spalte. Masse in rem
   (16 px). Weiss mit Deckung ueber color-mix aus dem Token, keine Hexwerte. */
.fhw-fusszeile {
    --fhw-fuss-text: color-mix(in srgb, var(--text-invers) 85%, transparent);
    --fhw-fuss-linie: color-mix(in srgb, var(--text-invers) 20%, transparent);
    font-size: var(--text-body-s);
}

/* Der Footer beginnt mit einer glatten Kante, ohne Welle: die Welle ueber
   dem Footer ist nicht CI-konform (Abweichung Nr. 29). */
.fhw-fusszeile__haupt {
    background: var(--fh-blau);
    color: var(--text-invers);
}

.fhw-fusszeile__innen {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
        "marke"
        "quick"
        "recht"
        "news";
    gap: var(--space-6);
    align-items: start;
    padding-block: var(--space-7) var(--space-8);
}

@media (min-width: 37.5625rem) {
    .fhw-fusszeile__innen {
        grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr);
        grid-template-areas:
            "marke quick recht"
            "marke news news";
        gap: 2.5rem;
    }

    .fhw-fusszeile__news form {
        max-width: 30rem;
    }
}

@media (min-width: 60.0625rem) {
    .fhw-fusszeile__innen {
        grid-template-columns: minmax(15.625rem, 1.25fr) 0.75fr 0.75fr minmax(18.75rem, 1.45fr);
        grid-template-areas: "marke quick recht news";
        gap: 2.5rem 3.5rem;
    }

    .fhw-fusszeile__news form {
        max-width: none;
    }
}

.fhw-fusszeile__marke { grid-area: marke; }
.fhw-fusszeile__quicklinks { grid-area: quick; }
.fhw-fusszeile__rechtliches { grid-area: recht; }
.fhw-fusszeile__news { grid-area: news; }

.fhw-fusszeile__logo {
    display: block;
    width: min(14.375rem, 100%);
}

.fhw-fusszeile__logo img {
    display: block;
    width: 100%;
    height: auto;
}

.fhw-fusszeile a {
    color: var(--fhw-fuss-text);
    text-decoration: none;
    transition: color var(--dur-fast) var(--ease-out);
}

.fhw-fusszeile a:hover,
.fhw-fusszeile a:focus-visible {
    color: var(--text-invers);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

.fhw-fusszeile__adresse {
    margin: 1.25rem 0 0.75rem;
    color: var(--fhw-fuss-text);
    font-style: normal;
}

.fhw-fusszeile ul {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.fhw-fusszeile li + li {
    margin-top: 0;
}

.fhw-fusszeile .fhw-fusszeile__kontakt {
    gap: 0.5rem;
}

/* Profile in sozialen Medien: Kreis 38 px mit heller Kante, Symbol 18 px,
   Hover weisser Kreis mit dunkelblauem Symbol. Die Klickflaeche ist 44 px
   (Abweichung Nr. 26, footer.html hat 38 px); der Rand von 3 px je Seite
   ergibt mit dem Abstand von 4 px die 10 px des Entwurfs. */
/* Zwei Klassen: gewinnt gegen .fhw-fusszeile ul (Spalte, ohne Abstand) */
.fhw-fusszeile .fhw-fusszeile__social {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin: 1.1875rem 0 0 -0.1875rem;
}

.fhw-fusszeile__social-link {
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
}

.fhw-fusszeile__social-kreis {
    display: grid;
    place-items: center;
    width: 2.375rem;
    height: 2.375rem;
    border: 1.5px solid color-mix(in srgb, var(--text-invers) 45%, transparent);
    border-radius: 50%;
    transition:
        background-color var(--dur-fast) var(--ease-out),
        border-color var(--dur-fast) var(--ease-out);
}

.fhw-fusszeile__social-kreis::before {
    content: "";
    width: 1.125rem;
    height: 1.125rem;
    background: color-mix(in srgb, var(--text-invers) 90%, transparent);
    -webkit-mask: var(--fhw-icon) center / contain no-repeat;
    mask: var(--fhw-icon) center / contain no-repeat;
}

.fhw-fusszeile__social-link:hover .fhw-fusszeile__social-kreis,
.fhw-fusszeile__social-link:focus-visible .fhw-fusszeile__social-kreis {
    border-color: var(--fh-weiss);
    background: var(--fh-weiss);
}

.fhw-fusszeile__social-link:hover .fhw-fusszeile__social-kreis::before,
.fhw-fusszeile__social-link:focus-visible .fhw-fusszeile__social-kreis::before {
    background: var(--fh-blau);
}

.fhw-fusszeile__social--facebook { --fhw-icon: url('../DesignSystem/assets/icons/facebook.svg'); }
.fhw-fusszeile__social--instagram { --fhw-icon: url('../DesignSystem/assets/icons/instagram.svg'); }
.fhw-fusszeile__social--linkedin { --fhw-icon: url('../DesignSystem/assets/icons/linkedin.svg'); }
.fhw-fusszeile__social--youtube { --fhw-icon: url('../DesignSystem/assets/icons/youtube.svg'); }
.fhw-fusszeile__social--globe { --fhw-icon: url('../DesignSystem/assets/icons/globe.svg'); }

/* Spaltentitel: Versalien 13 px in Hellblau (Entwurf h5) */
.fhw-fusszeile__titel {
    margin: 0 0 var(--space-4);
    color: var(--fh-blau-hell);
    font-family: var(--font-body);
    font-size: var(--text-eyebrow);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-eyebrow);
    line-height: var(--leading-tight);
    text-transform: uppercase;
}

/* ---------- Newsletter: Satz und kompaktes Formular (formular.css,
   .fhw-formular--kompakt) auf Dunkelblau: weisses Feld ohne Rahmen, roter
   Knopf, Kasten-Text und Erfolg in Weiss, Fehler in hellem Rot (Token
   --fh-rot-tint, lesbar auf Blau), die Fehlerliste behaelt ihre helle
   Flaeche mit dunkler Schrift. ---------- */
.fhw-fusszeile__news-text {
    max-width: 38ch;
    margin: 0 0 0.875rem;
    color: var(--fhw-fuss-text);
    line-height: var(--leading-body);
}

.fhw-fusszeile .fhw-formular__eingabe {
    border-color: transparent;
}

.fhw-fusszeile .fhw-formular__feld--fehler .fhw-formular__eingabe {
    border-color: var(--status-fehler);
}

.fhw-fusszeile .fhw-formular__option-text,
.fhw-fusszeile .fhw-formular__wahl .fhw-formular__option-text {
    color: var(--fhw-fuss-text);
}

/* Link im Kasten-Text: Unterstreichung, damit er sich vom Text abhebt */
.fhw-fusszeile .fhw-formular__option-text a {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

.fhw-fusszeile .fhw-formular__kasten {
    accent-color: var(--fh-weiss);
}

.fhw-fusszeile .fhw-formular__fehler {
    color: var(--fh-rot-tint);
}

.fhw-fusszeile .fhw-formular__wahl--fehler .fhw-formular__kasten {
    outline-color: var(--fh-rot-tint);
}

.fhw-fusszeile .fhw-formular__meldung {
    color: var(--text-body);
}

.fhw-fusszeile .fhw-formular__meldung-liste a {
    color: var(--link);
    text-decoration: underline;
}

.fhw-fusszeile .fhw-formular--erfolg {
    padding-left: var(--space-3);
    color: var(--text-invers);
}

/* ---------- Rechtszeile: Linie oben (Weiss 20 %), Flaeche eine Stufe
   dunkler. footer.html setzt dafuer den festen Hexwert #161F52 ohne Token
   (Abweichung Nr. 26); hier aus --fh-blau mit 20 % Schwarz (ergibt
   #161F50), damit die Zeile einer eigenen CI-Farbe der Site folgt
   (TASK-91). ---------- */
.fhw-fusszeile__unten {
    border-top: 1px solid var(--fhw-fuss-linie);
    background: color-mix(in srgb, var(--fh-blau) 80%, var(--fh-schwarz));
    color: color-mix(in srgb, var(--text-invers) 75%, transparent);
}

.fhw-fusszeile__unten p {
    margin: 0;
    padding-block: var(--space-4);
}