/* ==========================================================================
   mir sind fapa — Bausteine der einzelnen Module.
   Ergänzt theme.css (Tokens, Grundlayout, Header/Footer).
   ========================================================================== */

/* ------------------------------------------------------------ Hervorhebung */

.msf-hervor {
    display: flex;
    align-items: center;
    gap: clamp(1rem, 3vw, 2.5rem);
    padding: 1.25rem clamp(1.25rem, 3vw, 2rem);
    background: var(--msf-surface);
    border: 1px solid var(--msf-line);
    border-radius: var(--msf-radius);
}

.msf-hervor__titel { font-size: 1.4rem; font-weight: 700; letter-spacing: -0.02em; flex: none; }
.msf-hervor__text { color: var(--msf-text-muted); font-size: var(--msf-fs-small); }
.msf-hervor__icon { width: 34px; height: 34px; margin-left: auto; color: var(--msf-yellow); flex: none; }

/* ---------------------------------------------------------- Werte-Vergleich */

.msf-werte {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: clamp(1.5rem, 4vw, 3rem);
    align-items: start;
}

.msf-werte__listen { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1rem, 3vw, 2rem); }

.msf-werte__titel { font-size: var(--msf-fs-small); font-weight: 700; margin-bottom: 1rem; }
.msf-werte__titel--nein { color: var(--msf-red); }

.msf-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.7rem; }

.msf-liste li {
    position: relative;
    padding-left: 1.9rem;
    font-size: var(--msf-fs-small);
    color: var(--msf-text-muted);
}

.msf-liste li::before {
    position: absolute;
    left: 0;
    top: 0.05rem;
    width: 1.2rem;
    height: 1.2rem;
    display: grid;
    place-items: center;
    border-radius: 50%;
    font-size: 0.7rem;
    font-weight: 700;
}

.msf-liste--ja li::before {
    content: "\2713";
    border: 1px solid var(--msf-yellow);
    color: var(--msf-yellow);
}

.msf-liste--nein li::before {
    content: "\2715";
    color: var(--msf-red);
}

/* -------------------------------------------------------------------- Zitat */

.msf-zitat {
    position: relative;
    margin: 0;
    min-height: 320px;
    display: flex;
    /* Der Verlauf muss über die ganze Höhe laufen, sonst liegt der obere Teil
       des Bildes frei und das Anführungszeichen steht im Nichts. */
    align-items: stretch;
    border: 1px solid var(--msf-line-accent);
    border-radius: var(--msf-radius);
    overflow: hidden;
    background: var(--msf-surface);
}

.msf-zitat__bild {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Portraits sitzen rechts, der Text steht links darüber — wie im Entwurf. */
    object-position: right center;
}

.msf-zitat__inhalt {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(1.25rem, 3vw, 2rem);
    background: linear-gradient(
        90deg,
        rgba(16, 17, 18, 0.97) 0%,
        rgba(16, 17, 18, 0.92) 45%,
        rgba(16, 17, 18, 0.35) 75%,
        rgba(16, 17, 18, 0) 100%
    );
}

.msf-zitat__zeichen { display: block; font-size: 2.5rem; line-height: 1; color: var(--msf-yellow); }
.msf-zitat__text { margin: 0.5rem 0 0; font-size: 1.3rem; font-weight: 600; max-width: 22ch; }
.msf-zitat__quelle { margin-top: 1.25rem; color: var(--msf-text-muted); font-size: var(--msf-fs-small); }

/* ---------------------------------------------------------------- Karussell */

.msf-karussell { display: flex; align-items: center; gap: 0.75rem; }

.msf-karussell__spur {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: var(--msf-gap);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}

.msf-karussell__spur::-webkit-scrollbar { display: none; }

.msf-karussell__element {
    flex: 0 0 clamp(200px, 22vw, 280px);
    scroll-snap-align: start;
    border-radius: var(--msf-radius-sm);
    overflow: hidden;
}

.msf-karussell__element img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

.msf-karussell__pfeil {
    flex: none;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid var(--msf-line);
    background: transparent;
    color: var(--msf-text);
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
}

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

.msf-nachsatz { margin: 1.25rem 0 0; }

/* ---------------------------------------------------------------------- FAQ */

.msf-faq {
    display: grid;
    grid-template-columns: 1.4fr 0.85fr;
    gap: clamp(1.5rem, 4vw, 3rem);
    align-items: start;
}

.msf-faq__spalten { display: grid; grid-template-columns: 1fr 1fr; gap: 0 clamp(1rem, 3vw, 2rem); }

.msf-faq__eintrag { border-bottom: 1px solid var(--msf-line); }

.msf-faq__frage {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.85rem 0;
    font-size: var(--msf-fs-small);
    color: var(--msf-text-muted);
    cursor: pointer;
    list-style: none;
}

.msf-faq__frage::-webkit-details-marker { display: none; }

.msf-faq__frage::after {
    content: "+";
    flex: none;
    width: 22px;
    height: 22px;
    display: grid;
    place-items: center;
    border: 1px solid var(--msf-line);
    border-radius: 50%;
    color: var(--msf-yellow);
}

.msf-faq__eintrag[open] .msf-faq__frage { color: var(--msf-text); }

.msf-faq__eintrag[open] .msf-faq__frage::after {
    content: "\2212";
    border-color: var(--msf-yellow);
}

.msf-faq__antwort {
    padding-bottom: 1rem;
    font-size: var(--msf-fs-small);
    color: var(--msf-text-muted);
}

/* --------------------------------------------------------------- Videokarte */

.msf-videokarte {
    position: relative;
    /* Grid statt block: nur so füllt der Verlauf die ganze Kartenhöhe.
       Mit height:100% auf einem block-Kind bleibt er auf Texthöhe stehen. */
    display: grid;
    min-height: 240px;
    text-align: left;
    font: inherit;
    color: inherit;
    cursor: pointer;
    border: 1px solid var(--msf-line-accent);
    border-radius: var(--msf-radius);
    overflow: hidden;
    background: var(--msf-surface);
}

.msf-videokarte img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.msf-videokarte__text {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    height: 100%;
    padding: clamp(1.25rem, 3vw, 2rem);
    background: linear-gradient(90deg, rgba(16, 17, 18, 0.95) 45%, rgba(16, 17, 18, 0) 100%);
}

.msf-videokarte__titel { display: block; font-size: 1.3rem; font-weight: 700; max-width: 14ch; }

.msf-videokarte__unter {
    display: block;
    margin-top: 0.75rem;
    color: var(--msf-text-muted);
    font-size: var(--msf-fs-small);
}

.msf-videokarte__play {
    position: absolute;
    right: clamp(1rem, 3vw, 2rem);
    bottom: clamp(1rem, 3vw, 2rem);
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.85);
    background: rgba(11, 12, 13, 0.35);
    font-size: 1.1rem;
}

/* -------------------------------------------------------------- Quick-Check */

.msf-quick {
    display: grid;
    grid-template-columns: 0.8fr 1.2fr 0.7fr;
    gap: clamp(1.25rem, 3vw, 2rem);
    align-items: start;
}

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

.msf-quick__text {
    margin: 0.75rem 0 1.5rem;
    color: var(--msf-text-muted);
    font-size: var(--msf-fs-small);
}

.msf-quick__fragen,
.msf-quick__ergebnis {
    background: var(--msf-surface);
    border: 1px solid var(--msf-line);
    border-radius: var(--msf-radius);
    padding: clamp(1rem, 2.5vw, 1.5rem);
}

.msf-quick__ergebnis { align-self: stretch; }

.msf-quick__frage {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 1rem;
    padding: 0.7rem 0;
    border-bottom: 1px solid var(--msf-line);
    font-size: var(--msf-fs-small);
    color: var(--msf-text-muted);
}

.msf-quick__frage:last-child { border-bottom: 0; }

.msf-quick__skala { display: flex; align-items: center; gap: 0.6rem; }
.msf-quick__pol { font-size: var(--msf-fs-tiny); color: var(--msf-text-dim); }

/* Schieberegler: eigene Optik, damit er zum dunklen Grund passt.
   Track und Daumen müssen für WebKit und Firefox getrennt gesetzt werden. */
.msf-quick__regler {
    -webkit-appearance: none;
    appearance: none;
    width: clamp(90px, 12vw, 150px);
    height: 18px;
    background: transparent;
    cursor: pointer;
}

.msf-quick__regler::-webkit-slider-runnable-track {
    height: 2px;
    background: var(--msf-line);
    border-radius: 2px;
}

.msf-quick__regler::-moz-range-track {
    height: 2px;
    background: var(--msf-line);
    border-radius: 2px;
}

.msf-quick__regler::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    margin-top: -5px;
    width: 12px;
    height: 12px;
    border: 0;
    border-radius: 50%;
    background: var(--msf-yellow);
}

.msf-quick__regler::-moz-range-thumb {
    width: 12px;
    height: 12px;
    border: 0;
    border-radius: 50%;
    background: var(--msf-yellow);
}

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

.msf-quick__frage label { cursor: pointer; }

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

.msf-quick__ergebnistext--ruhig {
    font-size: var(--msf-fs-small);
    font-weight: 400;
    color: var(--msf-text-muted);
    margin-bottom: 0;
}

.msf-quick__ergebnistext { font-size: 1.25rem; font-weight: 600; margin-bottom: 1.25rem; }

/* ---------------------------------------------------- Mobil, neue Bausteine */

@media (max-width: 900px) {
    .msf-werte,
    .msf-faq,
    .msf-quick { grid-template-columns: 1fr; }

    .msf-werte__listen,
    .msf-faq__spalten { grid-template-columns: 1fr; }

    .msf-hervor { flex-wrap: wrap; }
    .msf-hervor__icon { margin-left: 0; }
}

/* ------------------------------------------------------------------ Personen */

.msf-personen .msf-person { flex: 0 0 clamp(220px, 20vw, 260px); scroll-snap-align: start; }

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

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

.msf-person__bild img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Farbig liegt oben und wird beim Ueberfahren eingeblendet. */
.msf-person__farbe { opacity: 0; transition: opacity 0.25s ease; }
.msf-person:hover .msf-person__farbe,
.msf-person:focus-within .msf-person__farbe { opacity: 1; }

/* Ohne Schwarzweiss-Bild bleibt das farbige immer sichtbar. */
.msf-person__farbe:only-child { opacity: 1; }

.msf-person__play {
    position: absolute;
    right: 0.75rem;
    bottom: 0.75rem;
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    border: 2px solid var(--msf-yellow);
    background: rgba(11, 12, 13, 0.6);
    color: var(--msf-yellow);
    font-size: 0.85rem;
    cursor: pointer;
}

.msf-person__play:hover { background: var(--msf-yellow); color: var(--msf-on-yellow); }

.msf-person__text { padding: 0.9rem 1rem 1.1rem; }
.msf-person__name { display: block; font-weight: 700; }
.msf-person__funktion { display: block; margin-top: 0.15rem; color: var(--msf-text-dim); font-size: var(--msf-fs-tiny); }
.msf-person__leitsatz { margin: 0.75rem 0 0; color: var(--msf-text-muted); font-size: var(--msf-fs-small); }

/* ------------------------------------------------------------ Video-Overlay */

/* Ein geschlossenes <dialog> ist per Vorgabe display:none. Unser display:grid
   würde das aushebeln — deshalb ausdrücklich nur im offenen Zustand zeigen. */
.msf-overlay:not([open]) { display: none; }

.msf-overlay {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: grid;
    place-items: center;
    width: 100vw;
    max-width: 100vw;
    height: 100vh;
    max-height: 100vh;
    padding: clamp(0.5rem, 3vw, 2rem);
    border: 0;
    background: transparent;
}

.msf-overlay::backdrop { background: rgba(0, 0, 0, 0.85); }

.msf-overlay__inhalt {
    position: relative;
    /* Das Overlay soll den Bildschirm nutzen — 960px waren zu knapp. */
    width: min(1400px, 94vw);
    max-height: 88vh;
    background: var(--msf-surface);
    border: 1px solid var(--msf-line);
    border-radius: var(--msf-radius);
    overflow: hidden;
}

.msf-overlay__rahmen { aspect-ratio: 16 / 9; }
.msf-overlay__rahmen iframe { width: 100%; height: 100%; border: 0; display: block; }

.msf-overlay__zu {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid var(--msf-line);
    background: rgba(11, 12, 13, 0.8);
    color: var(--msf-text);
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
}

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

/* ------------------------------------------------------------------ FAQ-Seite */

.msf-faqseite__intro { color: var(--msf-text-muted); max-width: 60ch; }

.msf-faqseite__kopf {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem 1.5rem;
    margin-bottom: 1.5rem;
}

.msf-faqseite__suche {
    flex: 1 1 260px;
    max-width: 380px;
    padding: 0.7rem 1rem;
    background: var(--msf-surface);
    border: 1px solid var(--msf-line);
    border-radius: 8px;
    color: var(--msf-text);
    font: inherit;
    font-size: var(--msf-fs-small);
}

.msf-faqseite__suche::placeholder { color: var(--msf-text-dim); }
.msf-faqseite__suche:focus-visible { border-color: var(--msf-yellow); outline: none; }

.msf-faqseite__marken { display: flex; flex-wrap: wrap; gap: 0.5rem; }

.msf-faqseite__marke {
    padding: 0.35rem 0.8rem;
    border: 1px solid var(--msf-line);
    border-radius: 999px;
    color: var(--msf-text-muted);
    font-size: var(--msf-fs-tiny);
}

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

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

.msf-faqseite__gruppe { margin-bottom: 2.5rem; scroll-margin-top: calc(var(--msf-header-h) + 2rem); }
.msf-faqseite__gruppe[hidden] { display: none; }

.msf-faqseite__titel {
    font-size: 1.25rem;
    margin-bottom: 0.5rem;
    color: var(--msf-yellow);
}

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

.msf-faqseite__leer { color: var(--msf-text-muted); }

/* ----------------------------------------------------------------- Fliesstext */

.msf-text { max-width: 68ch; color: var(--msf-text-muted); }
.msf-text--voll { max-width: none; }

.msf-text__titel {
    font-size: clamp(1.25rem, 2.4vw, 1.6rem);
    color: var(--msf-text);
    margin-bottom: 0.75rem;
}

.msf-text a { color: var(--msf-yellow); text-decoration: underline; text-underline-offset: 2px; }
.msf-text ul, .msf-text ol { padding-left: 1.2rem; margin: 0 0 1em; }
.msf-text li { margin-bottom: 0.4rem; }
.msf-text strong { color: var(--msf-text); }

.msf-text blockquote {
    margin: 1.5rem 0;
    padding-left: 1.25rem;
    border-left: 2px solid var(--msf-yellow);
    color: var(--msf-text);
}

/* --------------------------------------------------------------- Bild-Raster */

.msf-raster { margin: 0; display: grid; gap: var(--msf-gap); }

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

.msf-raster img {
    width: 100%;
    border-radius: var(--msf-radius-sm);
    object-fit: cover;
}

.msf-raster--1 img { aspect-ratio: 16 / 10; }
.msf-raster--2 img,
.msf-raster--3 img { aspect-ratio: 4 / 3; }

.msf-raster__unterschrift {
    grid-column: 1 / -1;
    color: var(--msf-text-dim);
    font-size: var(--msf-fs-tiny);
}

/* -------------------------------------------------------------- Beitragskopf */

.msf-beitragskopf { padding-top: clamp(2rem, 5vw, 3.5rem); padding-bottom: 1.5rem; }

.msf-beitragskopf__kategorie {
    display: inline-block;
    margin-bottom: 1rem;
    padding: 0.3rem 0.8rem;
    border: 1px solid var(--msf-line);
    border-radius: 999px;
    color: var(--msf-yellow);
    font-size: var(--msf-fs-tiny);
}

.msf-beitragskopf__titel { font-size: clamp(1.9rem, 4.5vw, 3rem); max-width: 22ch; }

.msf-beitragskopf__datum,
.msf-beitragskopf__ort {
    margin-top: 0.75rem;
    color: var(--msf-text-dim);
    font-size: var(--msf-fs-small);
}

.msf-beitragskopf__bild {
    margin-top: 1.75rem;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: var(--msf-radius);
}

/* ------------------------------------------------------------ Beitragskarten */

.msf-beitrag { transition: border-color 0.15s ease; }
.msf-beitrag:hover { border-color: var(--msf-line-accent); }

.msf-beitrag__datum {
    display: block;
    margin-bottom: 0.4rem;
    color: var(--msf-text-dim);
    font-size: var(--msf-fs-tiny);
}

/* -------------------------------------------------------------- Stellenliste */

.msf-stellen { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; }

.msf-stellen__link {
    display: grid;
    /* Zellen ausdrücklich zuweisen: sonst rutscht der Pfeil in die erste
       Spalte und schiebt den Titel nach rechts. */
    grid-template-columns: 1fr auto;
    grid-template-areas:
        "titel pfeil"
        "text  pfeil";
    align-items: center;
    column-gap: 1.5rem;
    row-gap: 0.4rem;
    padding: 1.25rem clamp(1rem, 2.5vw, 1.75rem);
    background: var(--msf-surface);
    border: 1px solid var(--msf-line);
    border-radius: var(--msf-radius);
    transition: border-color 0.15s ease;
}

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

.msf-stellen__titel {
    grid-area: titel;
    align-self: end;
    font-size: 1.1rem;
    font-weight: 700;
}

.msf-stellen__text {
    grid-area: text;
    align-self: start;
    max-width: 90ch;
    color: var(--msf-text-muted);
    font-size: var(--msf-fs-small);
}

.msf-stellen__pfeil {
    grid-area: pfeil;
    align-self: center;
    color: var(--msf-yellow);
}

.msf-leer { color: var(--msf-text-muted); }

/* ------------------------------------------------------------------ Bewerben */

.msf-bewerben {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
    padding: clamp(1.25rem, 3vw, 2rem);
    background: var(--msf-surface);
    border: 1px solid var(--msf-line-accent);
    border-radius: var(--msf-radius);
}

.msf-bewerben__text { margin: 0; font-size: 1.15rem; font-weight: 600; }

/* ---------------------------------------------------------------- CTA-Banner */

.msf-cta {
    display: grid;
    grid-template-columns: 1.3fr 0.7fr;
    align-items: stretch;
    background: var(--msf-yellow);
    color: var(--msf-on-yellow);
    border-radius: var(--msf-radius);
    overflow: hidden;
}

.msf-cta__text { padding: clamp(1.5rem, 3.5vw, 2.5rem); }
.msf-cta__titel { font-size: clamp(1.3rem, 2.6vw, 1.8rem); }
.msf-cta__lead { margin: 0.6rem 0 1.5rem; max-width: 44ch; color: rgba(11, 12, 13, 0.8); }

.msf-cta__link {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    font-weight: 700;
    border-bottom: 2px solid currentColor;
    padding-bottom: 0.15rem;
}

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

@media (max-width: 700px) {
    .msf-cta { grid-template-columns: 1fr; }
    .msf-cta__bild { aspect-ratio: 16 / 9; }
}

/* ---------------------------------------------------------------- Lesespalte */

/* Im Blogbeitrag teilen sich Text und Bilder dieselbe Spalte. Vorher lief der
   Text auf Lesebreite, die Bilder aber über die volle Seitenbreite — das wirkt
   unruhig und entspricht nicht der alten Site. */
.msf-lesespalte { --msf-maxw: 880px; }
.msf-lesespalte .msf-text { max-width: none; }

/* ------------------------------------------------------------------ Betreuer */

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

.msf-betreuer__bild { position: relative; aspect-ratio: 4 / 5; background: var(--msf-surface-2); }

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

.msf-betreuer__play {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    border: 2px solid var(--msf-yellow);
    background: rgba(11, 12, 13, 0.55);
    color: var(--msf-yellow);
    font-size: 1rem;
    cursor: pointer;
}

.msf-betreuer__play:hover { background: var(--msf-yellow); color: var(--msf-on-yellow); }