/* FH Wedel - Struktur: Sektion, Flaechen und Spalten (Spec 9.1, 9.2).
   Vertrag fuer die Wellen-Uebergaenge: jede Flaeche auf Seitenebene traegt
   fhw-flaeche fhw-flaeche--weiss|grau|blau. */

.fhw-flaeche--weiss { background: var(--surface-page); }
.fhw-flaeche--grau { background: var(--surface-section); }
.fhw-flaeche--blau { background: var(--surface-dark); color: var(--text-invers); }

/* Sekundaertext, Links und Buttons je Flaeche setzen die Klassen
   .flaeche-weiss|grau|dunkel aus base.css (Handoff 03.10.2026,
   Abweichung 9), die der Sektionsrahmen neben fhw-flaeche--x vergibt.
   Weisse Karten setzen die Werte selbst zurueck (karte.css). */

/* ---------- Sektion ---------- */
.fhw-sektion {
    padding-block: var(--space-7);
}

@media (min-width: 48rem) {
    .fhw-sektion {
        padding-block: var(--section-pad);
    }
}

.fhw-sektion.fhw-sektion--kompakt {
    padding-block: var(--space-6);
}

/* Zwei gleichfarbige Flaechen hintereinander: kein doppelter Abstand */
.fhw-flaeche--weiss + .fhw-flaeche--weiss,
.fhw-flaeche--grau + .fhw-flaeche--grau,
.fhw-flaeche--blau + .fhw-flaeche--blau {
    padding-top: 0;
}

/* Kopf: Dachzeile und Titel laufen ueber die Sektionsbreite wie in den
   Entwuerfen (.info-kopf, .schritte-kopf, .form-kopf), nur die Einleitung
   behaelt die Lesebreite. Ein Deckel auf dem ganzen Kopf liess lange Titel
   mitten im Satz umbrechen, text-wrap: balance teilte die Zeilen dann
   gleich (TASK-178, Abweichung 55). */
.fhw-sektion__kopf {
    margin-bottom: var(--space-6);
}

.fhw-sektion__kopf > :last-child,
.fhw-sektion__inhalt > :last-child {
    margin-bottom: 0;
}

.fhw-sektion__intro {
    max-width: var(--content-narrow);
    font-size: var(--text-body-l);
}

/* Breite "Einleitung" (Entwurf Infos & Events .einleitung): Kopf zentriert,
   die Einleitung bis 60 rem (960 px, 80 % der Inhaltsbreite) mittig */
.fhw-sektion--einleitung .fhw-sektion__kopf {
    text-align: center;
}

.fhw-sektion--einleitung .fhw-sektion__intro {
    max-width: 60rem;
    margin-inline: auto;
}

.fhw-sektion__inhalt > * {
    margin-top: 0;
    margin-bottom: 0;
}

.fhw-sektion__inhalt > * + * {
    margin-top: var(--space-6);
}

/* ---------- Spalten ---------- */
.fhw-spalten {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-5);
    align-items: start;
}

.fhw-spalten--mitte {
    align-items: center;
}

@media (min-width: 48rem) {
    .fhw-spalten {
        gap: var(--space-6);
    }

    .fhw-spalten--2,
    .fhw-spalten--3,
    .fhw-spalten--4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .fhw-spalten--2.fhw-spalten--2-1 {
        grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    }

    .fhw-spalten--2.fhw-spalten--1-2 {
        grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    }
}

@media (min-width: 62.5rem) {
    .fhw-spalten--3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .fhw-spalten--4 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.fhw-spalten__spalte > * {
    margin-top: 0;
    margin-bottom: 0;
}

.fhw-spalten__spalte > * + * {
    margin-top: var(--space-5);
}