/* ==========================================================================
   mir sind fapa — Design-System
   Farbwerte aus vorlage/web_index.png und vorlage/web_bewerber.png gemessen.
   ========================================================================== */

:root {
    /* Flaechen */
    --msf-bg:            #000000;
    --msf-surface:       #101112;
    --msf-surface-2:     #16181a;
    --msf-line:          #26292c;
    --msf-line-accent:   rgba(249, 222, 66, 0.35);

    /* Akzent — Gelb laut Vorgabe #f9de42, Hover-Ton daraus abgeleitet. */
    --msf-yellow:        #f9de42;
    --msf-yellow-dark:   #e5c724;
    --msf-yellow-soft:   rgba(249, 222, 66, 0.12);
    --msf-red:           #e5484d;
    --msf-green:         #46a758;

    /* Schrift */
    --msf-text:          #ffffff;
    --msf-text-muted:    #a7adb3;
    --msf-text-dim:      #6d7378;
    --msf-on-yellow:     #0b0c0d;

    /* Typografie */
    --msf-font: "Inter", "Helvetica Neue", Arial, sans-serif;
    --msf-fs-hero:    clamp(2.5rem, 6vw, 4.5rem);
    --msf-fs-section: clamp(1.75rem, 3.2vw, 2.5rem);
    --msf-fs-card:    1.125rem;
    --msf-fs-body:    1rem;
    --msf-fs-small:   0.875rem;
    --msf-fs-tiny:    0.75rem;

    /* Raster */
    --msf-maxw:       1280px;
    --msf-gutter:     clamp(1rem, 4vw, 2.5rem);
    --msf-section-y:  clamp(3.5rem, 8vw, 6rem);
    --msf-gap:        1rem;
    --msf-radius:     14px;
    --msf-radius-sm:  10px;

    --msf-header-h:   72px;
}

/* --------------------------------------------------------------- Grundlage */

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--msf-header-h) + 1rem); }

body {
    margin: 0;
    background: var(--msf-bg);
    color: var(--msf-text);
    font-family: var(--msf-font);
    font-size: var(--msf-fs-body);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

img, video { max-width: 100%; height: auto; display: block; }

a { color: inherit; text-decoration: none; }

h1, h2, h3, h4 {
    margin: 0;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.12;
}

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

:focus-visible {
    outline: 2px solid var(--msf-yellow);
    outline-offset: 3px;
}

.msf-visually-hidden {
    position: absolute; width: 1px; height: 1px;
    margin: -1px; padding: 0; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ------------------------------------------------------------------ Layout */

.msf-wrap {
    width: 100%;
    max-width: var(--msf-maxw);
    margin-inline: auto;
    padding-inline: var(--msf-gutter);
}

/* Jeder Modul-Ausgabeblock steht fuer sich. Die Abstaende sind bewusst klein —
   wie viel Luft zwischen zwei Bausteinen liegt, bestimmt die Redaktion mit dem
   Spacer-Modul. Trennlinien gibt es nur noch, wo sie ausdruecklich gesetzt
   werden (Modul "Trenner"). */
.msf-block { padding-bottom: 1rem; }

.msf-block--start { margin-top: 1.5rem; }

.msf-block:last-child { padding-bottom: 2rem; }

/* ------------------------------------------------------------------ Header */

.msf-header {
    position: sticky;
    top: 0;
    z-index: 100;
    height: var(--msf-header-h);
    display: flex;
    align-items: center;
    background: rgba(11, 12, 13, 0.85);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--msf-line);
}

.msf-header__inner {
    display: flex;
    align-items: center;
    gap: 2rem;
    width: 100%;
    max-width: var(--msf-maxw);
    margin-inline: auto;
    padding-inline: var(--msf-gutter);
}

.msf-logo { display: inline-flex; align-items: center; flex: none; }

.msf-logo img { height: 34px; width: auto; display: block; }

.msf-footer .msf-logo img { height: 28px; }

.msf-nav {
    display: flex;
    align-items: center;
    gap: 1.75rem;
    /* Rechtsbuendig: alles nach rechts schieben, der Button schliesst an. */
    margin-left: auto;
    margin-right: 1.75rem;
    font-size: var(--msf-fs-small);
}

.msf-nav__link {
    position: relative;
    padding-block: 0.35rem;
    color: var(--msf-text);
    transition: color 0.15s ease;
}

.msf-nav__link:hover { color: var(--msf-yellow); }

.msf-nav__link--active {
    color: var(--msf-yellow);
}

.msf-nav__link--active::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: -0.35rem;
    height: 2px;
    background: var(--msf-yellow);
}

.msf-nav-toggle {
    display: none;
    background: none;
    border: 0;
    color: var(--msf-text);
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    padding: 0.25rem 0.5rem;
}

/* ------------------------------------------------------------------ Button */

.msf-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.6em;
    padding: 0.75rem 1.4rem;
    border: 1px solid transparent;
    border-radius: 8px;
    font-size: var(--msf-fs-small);
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.msf-btn--primary {
    background: var(--msf-yellow);
    color: var(--msf-on-yellow);
}

.msf-btn--primary:hover { background: var(--msf-yellow-dark); }

.msf-btn--ghost {
    /* Heller Rand statt der dünnen Trennlinienfarbe: als „Zurück“ im
       Formular stand der Knopf sonst grau in grau. */
    border-color: rgba(255, 255, 255, 0.45);
    color: var(--msf-text);
    background: rgba(255, 255, 255, 0.06);
}

.msf-btn--ghost:hover {
    border-color: var(--msf-yellow);
    color: var(--msf-yellow);
    background: rgba(249, 222, 66, 0.1);
}

.msf-btn--bare {
    padding-inline: 0;
    background: none;
    color: var(--msf-text);
    border-bottom: 1px solid currentColor;
    border-radius: 0;
}

/* Textlink mit Pfeil, gelb — z.B. "Mehr ueber unsere Bereiche" */
.msf-link-arrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    font-size: var(--msf-fs-small);
    font-weight: 600;
    color: var(--msf-yellow);
}

.msf-link-arrow svg { transition: transform 0.15s ease; }
.msf-link-arrow:hover svg { transform: translateX(3px); }

/* -------------------------------------------------------------- Sektionskopf */

.msf-sechead {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: start;
    column-gap: clamp(1rem, 3vw, 2.5rem);
    margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}

.msf-sechead__num {
    font-size: clamp(2.5rem, 5vw, 4rem);
    font-weight: 800;
    line-height: 0.85;
    color: transparent;
    -webkit-text-stroke: 1px var(--msf-line);
    letter-spacing: -0.04em;
    user-select: none;
}

.msf-sechead__title { font-size: var(--msf-fs-section); }

.msf-sechead__sub {
    margin-top: 0.5rem;
    color: var(--msf-text-muted);
    font-size: var(--msf-fs-small);
    max-width: 46ch;
}

.msf-sechead--plain { grid-template-columns: 1fr; }

/* -------------------------------------------------------------------- Hero */

.msf-hero {
    position: relative;
    display: flex;
    align-items: center;
    min-height: clamp(420px, 62vh, 640px);
    overflow: hidden;
}

.msf-hero__media {
    position: absolute;
    inset: 0;
}

.msf-hero__media picture { display: contents; }

.msf-hero__media img,
.msf-hero__media video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.msf-hero__scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        100deg,
        rgba(11, 12, 13, 0.96) 0%,
        rgba(11, 12, 13, 0.85) 38%,
        rgba(11, 12, 13, 0.25) 78%,
        rgba(11, 12, 13, 0.1) 100%
    );
}

.msf-hero__inner { position: relative; }

.msf-hero__title { font-size: var(--msf-fs-hero); }

.msf-hero__subtitle {
    margin-top: 0.4em;
    font-size: clamp(1.25rem, 2.6vw, 1.9rem);
    font-weight: 600;
    color: var(--msf-text);
}

.msf-hero__lead {
    margin-top: 1.5rem;
    max-width: 34ch;
    color: var(--msf-text-muted);
    font-size: var(--msf-fs-small);
}

.msf-hero__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.5rem;
    margin-top: 2rem;
}

/* Gelbe Variante — Lehrbereich.
   Titel und Untertitel tragen sonst die helle Schriftfarbe der dunklen Seite
   und stehen dann weiss auf Gelb — unlesbar. Deshalb hier ausdruecklich
   dunkel. */
.msf-hero--yellow { background: var(--msf-yellow); color: var(--msf-on-yellow); }
.msf-hero--yellow .msf-hero__scrim { display: none; }
.msf-hero--yellow .msf-hero__title,
.msf-hero--yellow .msf-hero__subtitle { color: var(--msf-on-yellow); }
.msf-hero--yellow .msf-hero__lead { color: rgba(11, 12, 13, 0.78); }
.msf-hero--yellow .msf-hero__eyebrow { color: rgba(11, 12, 13, 0.6); }

/* Auf gelbem Grund kehrt sich der Button um: dunkle Fläche, helle Schrift.
   Sonst stünde Gelb auf Gelb. */
.msf-hero--yellow .msf-btn--primary {
    background: var(--msf-on-yellow);
    color: var(--msf-yellow);
}

.msf-hero--yellow .msf-btn--primary:hover { background: #000; }

.msf-hero--yellow .msf-btn--bare { color: var(--msf-on-yellow); }

.msf-hero__eyebrow {
    display: block;
    margin-bottom: 1rem;
    font-size: var(--msf-fs-tiny);
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--msf-text-muted);
}

/* ------------------------------------------------------------- Karten-Grid */

.msf-cards {
    display: grid;
    gap: var(--msf-gap);
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
}

.msf-cards--2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.msf-cards--3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

.msf-card {
    display: flex;
    flex-direction: column;
    background: var(--msf-surface);
    border: 1px solid var(--msf-line);
    border-radius: var(--msf-radius);
    overflow: hidden;
}

.msf-card--accent { border-color: var(--msf-line-accent); }

.msf-card__media {
    aspect-ratio: 4 / 3;
    background: var(--msf-surface-2);
}

.msf-card__media img { width: 100%; height: 100%; object-fit: cover; }

/* Logos statt Fotos: einpassen statt beschneiden, auf ruhigem Grund. */
.msf-card__media--einpassen {
    display: grid;
    place-items: center;
    padding: 1.25rem;
    background: var(--msf-surface-2);
}

.msf-card__media--einpassen img { width: auto; height: auto; max-height: 100%; object-fit: contain; }

.msf-card__body { padding: 1rem 1.1rem 1.25rem; }

.msf-card__title {
    font-size: var(--msf-fs-card);
    font-weight: 700;
}

.msf-card__text {
    margin-top: 0.35rem;
    color: var(--msf-text-muted);
    font-size: var(--msf-fs-small);
}

.msf-card__icon {
    display: block;
    width: 40px;
    height: 40px;
    margin-bottom: 1rem;
    color: var(--msf-yellow);
}

.msf-card__logo {
    height: 26px;
    width: auto;
    margin-bottom: 1rem;
    object-fit: contain;
    object-position: left center;
}

.msf-card__link { margin-top: auto; padding-top: 1rem; }

/* --------------------------------------------------------------- Kennzahlen */

.msf-stats {
    display: grid;
    gap: clamp(1rem, 4vw, 3rem);
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}

.msf-stat { display: flex; align-items: center; gap: 0.85rem; }

.msf-stat__icon { width: 30px; height: 30px; color: var(--msf-yellow); flex: none; }

.msf-stat__value { font-size: 1.35rem; font-weight: 700; line-height: 1.1; }

.msf-stat__label { color: var(--msf-text-muted); font-size: var(--msf-fs-small); }

/* ------------------------------------------------------------------ Footer */

.msf-footer {
    border-top: 1px solid var(--msf-line);
    padding-block: 2rem;
    font-size: var(--msf-fs-small);
}

.msf-footer__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.5rem;
}

.msf-footer__nav { display: flex; flex-wrap: wrap; gap: 1.5rem; color: var(--msf-text-muted); }
.msf-footer__nav a:hover { color: var(--msf-yellow); }

.msf-footer__social { display: flex; gap: 1rem; margin-left: auto; color: var(--msf-text-muted); }
.msf-footer__social a:hover { color: var(--msf-yellow); }
.msf-footer__social svg { width: 18px; height: 18px; }

/* ------------------------------------------------------------------- Mobil */

@media (max-width: 900px) {
    .msf-nav-toggle { display: block; margin-left: auto; }

    .msf-nav {
        position: absolute;
        top: var(--msf-header-h);
        left: 0;
        right: 0;
        flex-direction: column;
        gap: 0;
        margin: 0;
        padding: 0.5rem var(--msf-gutter) 1.25rem;
        background: var(--msf-bg);
        border-bottom: 1px solid var(--msf-line);
    }

    .msf-nav[hidden] { display: none; }

    .msf-nav__link { padding-block: 0.75rem; }
    .msf-nav__link--active::after { display: none; }

    .msf-header__cta { display: none; }

    .msf-sechead { grid-template-columns: 1fr; row-gap: 0.5rem; }
    .msf-sechead__num { font-size: 2.25rem; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}


/* ============================================================================
   Hero mit Bild — Verhalten auf schmalen Ansichten

   Ausgangslage: Das Bild liegt als Hintergrund über die ganze Fläche
   (object-fit: cover), der Text darüber. Wird das Fenster schmaler, zoomt
   „cover" so weit hinein, dass von den drei Personen nur noch Schultern
   übrig bleiben — und der Text läuft quer über die Gesichter.

   Deshalb in drei Stufen:
     ab 1100px   wie bisher, Text auf gut die halbe Breite begrenzt
     700–1099px  Bild am rechten Rand verankert, Text schmaler, weicher
                 Verlauf darunter für die Lesbarkeit
     unter 700px Bild wandert unter den Text in den Textfluss — dort ist es
                 vollständig zu sehen statt angeschnitten
   ========================================================================= */

/* Der Text soll auch in der grossen Ansicht nicht über das ganze Bild
   laufen. 52% lassen die Personen rechts frei. */
.msf-hero__inner > * { max-width: min(52%, 46rem); }

@media (max-width: 1400px) {
    /* Die Titelgrösse richtet sich sonst nach der ganzen Fensterbreite,
       obwohl der Text nur die halbe bekommt — er bricht dann auf fünf
       Zeilen. */
    .msf-hero__title { font-size: clamp(2rem, 3.4vw, 3rem); }
}

@media (max-width: 1099px) {
    /* Der Bildausschnitt bleibt rechts stehen — dort stehen die Personen.
       Ohne das schiebt „cover" sie aus dem sichtbaren Bereich. */
    .msf-hero__media img,
    .msf-hero__media video { object-position: right center; }

    .msf-hero__inner > * { max-width: min(58%, 34rem); }

    .msf-hero__title { font-size: clamp(1.9rem, 4.4vw, 2.9rem); }

    /* Weicher Übergang von der Fläche ins Bild, damit die Schrift auch dort
       lesbar bleibt, wo sie das Bild streift. Im gelben Hero gelb, sonst
       dunkel — der dunkle Hero bringt seinen eigenen Verlauf schon mit. */
    .msf-hero--yellow .msf-hero__media::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(
            100deg,
            var(--msf-yellow) 0%,
            var(--msf-yellow) 30%,
            rgba(249, 222, 66, 0.65) 50%,
            rgba(249, 222, 66, 0) 72%
        );
    }
}

@media (max-width: 699px) {
    /* Kein Übereinander mehr: erst Text, dann Bild. Im Markup steht das Bild
       zuerst, deshalb dreht „order" die Reihenfolge — sonst beginnt die Seite
       mit einer Bildfläche und der Titel rutscht unter die Falz. */
    .msf-hero {
        display: flex;
        flex-direction: column;
        min-height: 0;
        padding-top: clamp(2rem, 8vw, 3rem);
    }

    .msf-hero__inner {
        order: 1;
        width: 100%;
    }

    .msf-hero__inner > * { max-width: none; }

    .msf-hero__media {
        order: 2;
        position: static;
        width: 100%;
        /* Wenig Luft: Text und Bild gehören zusammen. */
        margin-top: clamp(0.75rem, 2.5vw, 1.25rem);
    }

    /* Zwei Fälle:

       Mit engem Bild (zweites Medienfeld, Klasse --eng): ganz zeigen, es
       enthält ja nur noch das Motiv.

       Ohne: das breite Bild würde als fingerbreiter Streifen erscheinen —
       deshalb ein hochformatiger Ausschnitt auf die rechte Bildhälfte. Das
       ist die Notlösung für Heros, bei denen niemand ein enges Bild
       hinterlegt hat. */
    .msf-hero__media img,
    .msf-hero__media video {
        width: 100%;
        height: auto;
        aspect-ratio: 16 / 10;
        object-fit: cover;
        object-position: 88% center;
    }

    .msf-hero__media--eng img,
    .msf-hero__media--eng video {
        width: auto;
        max-width: min(100%, 30rem);
        aspect-ratio: auto;
        max-height: 55vh;
        margin-inline: auto;
        object-fit: contain;
    }

    /* Der Verlauf von oben ist hier fehl am Platz — das Bild steht für sich. */
    .msf-hero--yellow .msf-hero__media::after { display: none; }
    .msf-hero__scrim { display: none; }

    .msf-hero__title { font-size: clamp(1.75rem, 7.5vw, 2.4rem); }
    .msf-hero__subtitle { font-size: clamp(1.05rem, 4.5vw, 1.4rem); }
    .msf-hero__actions { margin-top: 1.5rem; }
    .msf-hero__actions .msf-btn { width: 100%; justify-content: center; }
}

@media (max-width: 480px) {
    /* Auf dem Handy die volle Breite nutzen, der Ausschnitt wird enger. */
    .msf-hero__media--eng img,
    .msf-hero__media--eng video { max-width: 100%; }

    .msf-hero__media:not(.msf-hero__media--eng) img,
    .msf-hero__media:not(.msf-hero__media--eng) video { aspect-ratio: 4 / 3; }
}