/**
 * Magazin (FN-17): Artikelkopf, Artikelende, Teaser, Liste, Inhaltsverzeichnis,
 * Rubrik- und Themenfeld-Seite, Block fn/magazin. Nur var(--fn-…) aus tokens.css.
 *
 * Gestaltung nach dem Review vom 2026-10-11 (03_Design/Magazin-Gestaltung-Review_2026-10-11.md):
 * keine Rahmen-Karten, Luft statt Linien, Titel in normaler Schreibweise
 * (Versalien nur für Seiten-H1 und Abschnitts-H2), Texte ohne Bild als
 * Zitat-Teaser, kein Bild-Zoom. Der Artikeltext selbst steht im Theme (theme.css).
 */

/* ---------- Dachzeilen: Versal, klein, grau ---------- */

.fn-artikel-kopf__rubrik,
.fn-teaser__dach,
.fn-artikel-fuss__label,
.fn-autorin__label {
    font-size: var(--fn-size-small);
    font-weight: var(--fn-weight-medium);
    line-height: var(--fn-leading-small);
    letter-spacing: var(--fn-tracking-eyebrow);
    text-transform: uppercase;
    color: var(--fn-muted);
}

/* Zwei Angaben in einer Zeile (Rubrik | Themenfeld, Magazin | Themenfeld): feiner Strich statt Mittelpunkt */
.fn-artikel-kopf__rubrik,
.fn-magazin-archiv__pfad {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 var(--fn-space-3);
}

.fn-artikel-kopf__rubrik > span + span::before,
.fn-magazin-archiv__pfad > * + *::before {
    content: "";
    display: inline-block;
    width: 1px;
    height: 0.9em;
    margin-right: var(--fn-space-3);
    vertical-align: -0.1em;
    background: currentColor;
    opacity: 0.5;
}

.fn-artikel-kopf__rubrik a,
.fn-magazin-archiv__pfad a {
    color: inherit;
    text-decoration: underline;
    text-decoration-color: var(--fn-color-honey-melon);
    text-decoration-thickness: var(--fn-linie, 1px);
    text-underline-offset: 4px;
}

.fn-artikel-kopf__rubrik a:hover,
.fn-magazin-archiv__pfad a:hover {
    text-decoration-color: currentColor;
}

/* ---------- Artikelkopf ---------- */

/* Ohne Bild: zentriert, wie der Aufmacher eines Hefts */
.fn-artikel-kopf {
    max-width: calc(var(--fn-measure-wide) + 2 * var(--fn-gutter));
    margin: 0 auto var(--fn-space-6);
    padding-inline: var(--fn-gutter);
    font-family: var(--fn-font);
    text-align: center;
    color: var(--fn-text);
    box-sizing: border-box;
}

.fn-artikel-kopf__text > * {
    margin: 0;
}

.fn-artikel-kopf:not(.fn-artikel-kopf--bild) .fn-artikel-kopf__rubrik {
    justify-content: center;
}

.fn-artikel-kopf__titel,
.fn-magazin-archiv__titel {
    font-family: var(--fn-font);
    font-size: var(--fn-size-h1);
    font-weight: var(--fn-weight-medium);
    line-height: var(--fn-leading-h1);
    letter-spacing: var(--fn-tracking-heading);
    text-transform: uppercase;
    color: var(--fn-heading);
    overflow-wrap: break-word;
    hyphens: auto;
}

.fn-artikel-kopf .fn-artikel-kopf__titel {
    margin-top: var(--fn-space-3);
}

.fn-artikel-kopf .fn-artikel-kopf__vorspann {
    max-width: var(--fn-measure);
    margin: var(--fn-space-4) auto 0;
    font-size: var(--fn-size-zitat);
    font-weight: var(--fn-weight-light);
    line-height: var(--fn-leading-h3);
}

.fn-artikel-kopf .fn-artikel-kopf__meta {
    margin-top: var(--fn-space-4);
    font-size: var(--fn-size-small);
    line-height: var(--fn-leading-small);
    letter-spacing: var(--fn-tracking-small);
    color: var(--fn-muted);
}

/* Mit Bild: Text und Bild nebeneinander (ab 1024 px), mobil untereinander */
.fn-artikel-kopf--bild {
    display: grid;
    gap: var(--fn-space-5);
    max-width: calc(var(--fn-container) + 2 * var(--fn-gutter));
    text-align: left;
}

.fn-artikel-kopf--bild .fn-artikel-kopf__vorspann {
    margin-left: 0;
}

.fn-artikel-kopf__media {
    margin: 0;
}

.fn-artikel-kopf__bild {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    border-radius: var(--fn-radius);
}

@media (min-width: 1024px) {
    .fn-artikel-kopf--bild {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        align-items: center;
        gap: var(--fn-space-7);
        margin-bottom: var(--fn-space-7);
    }
}

/* ---------- Artikelende: Themenfelder + Autorin in Textbreite ---------- */

.fn-artikel-fuss {
    margin-top: var(--fn-space-7);
    font-family: var(--fn-font);
}

.fn-artikel-fuss__ende {
    width: min(var(--fn-measure), 100% - 2 * var(--fn-gutter));
    margin: 0 auto var(--fn-space-7);
    padding-top: var(--fn-space-5);
    border-top: var(--fn-border-width) solid var(--fn-border);
}

.fn-artikel-fuss__ende > * + * {
    margin-top: var(--fn-space-5);
}

.fn-artikel-fuss__label {
    margin: 0 0 var(--fn-space-3);
}

/* Kasten „Über die Autorin": ohne Rahmen, Foto rund */
.fn-autorin {
    display: grid;
    gap: var(--fn-space-4);
    align-items: start;
    color: var(--fn-text);
}

.fn-autorin--foto {
    grid-template-columns: 80px minmax(0, 1fr);
}

.fn-autorin__foto {
    display: block;
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 50%;
}

.fn-autorin__text > * {
    margin: 0;
}

.fn-autorin .fn-autorin__name {
    margin-top: var(--fn-space-1);
    font-size: var(--fn-size-h3);
    font-weight: var(--fn-weight-medium);
    line-height: var(--fn-leading-h3);
    color: var(--fn-heading);
}

.fn-autorin .fn-autorin__bio {
    margin-top: var(--fn-space-2);
    font-size: var(--fn-size-body);
    line-height: var(--fn-leading-body);
}

.fn-autorin .fn-autorin__mehr {
    margin-top: var(--fn-space-2);
}

.fn-autorin__link {
    display: inline-block;
    padding-block: 10px; /* Touch-Fläche ≥ 44 px */
    font-weight: var(--fn-weight-medium);
    color: var(--fn-heading);
    text-decoration: underline;
    text-decoration-color: var(--fn-color-honey-melon);
    text-decoration-thickness: var(--fn-linie, 1px);
    text-underline-offset: 4px;
}

.fn-autorin__link:hover {
    text-decoration-color: currentColor;
}

/* Weiterlesen: Liste in breiter Textbreite */
.fn-artikel-fuss__weiter-inner {
    max-width: calc(var(--fn-measure-wide) + 2 * var(--fn-gutter));
}

/* ---------- Themenfeld-Links (Artikelende) und Reiter (Archiv-Kopf) ---------- */

.fn-magazin-themen,
.fn-magazin-reiter ul {
    display: flex;
    flex-wrap: wrap;
    gap: var(--fn-space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.fn-magazin-themen > li,
.fn-magazin-reiter li {
    margin: 0;
}

.fn-magazin-thema,
.fn-magazin-reiter__link {
    display: inline-flex;
    align-items: center;
    min-height: var(--fn-touch-target);
    padding: 0 var(--fn-space-3);
    border: var(--fn-border-width) solid var(--fn-border);
    border-radius: var(--fn-radius);
    box-sizing: border-box;
    font-size: var(--fn-size-small);
    font-weight: var(--fn-weight-medium);
    letter-spacing: var(--fn-tracking-small);
    color: var(--fn-heading);
    text-decoration: none;
    background: var(--fn-color-white);
    transition: background-color var(--fn-transition), border-color var(--fn-transition);
}

.fn-magazin-thema:hover,
.fn-magazin-reiter__link:hover {
    background: var(--fn-color-honey-melon);
    border-color: var(--fn-color-honey-melon);
    color: var(--fn-color-charcoal);
}

.fn-magazin-reiter__link[aria-current="page"] {
    background: var(--fn-color-charcoal);
    border-color: var(--fn-color-charcoal);
    color: var(--fn-color-white);
}

.fn-magazin-thema:focus-visible,
.fn-magazin-reiter__link:focus-visible {
    outline: 2px solid var(--fn-focus);
    outline-offset: 2px;
}

.fn-magazin-reiter {
    margin-top: var(--fn-space-5);
}

/* ---------- Teaser ---------- */

.fn-teaser {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--fn-space-3);
    height: 100%;
    font-family: var(--fn-font);
    color: var(--fn-text);
}

.fn-teaser__media {
    margin: 0;
    aspect-ratio: 3 / 2;
    overflow: hidden;
    border-radius: var(--fn-radius);
}

.fn-teaser__bild {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Zitat-Teaser: der Leitsatz steht an der Stelle des Fotos, mittig gesetzt
   (Julio, 14.10.: ruhiger als unten links und groß) */
.fn-teaser--zitat .fn-teaser__media {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--fn-space-5);
    box-sizing: border-box;
    text-align: center;
    background: var(--fn-color-soft-peach);
}

.fn-teaser .fn-teaser__zitat {
    margin: 0;
    font-size: var(--fn-size-h3);
    font-weight: var(--fn-weight-light);
    line-height: 1.4;
    color: var(--fn-color-text);
    overflow-wrap: break-word;
    hyphens: manual; /* Trennstriche mitten im Zitat lesen sich schlecht */
    text-wrap: balance; /* mittig gesetzt: Zeilen etwa gleich lang */
}

.fn-teaser__text > * {
    margin: 0;
}

.fn-teaser .fn-teaser__dach {
    margin-bottom: var(--fn-space-2);
}

/* Titel in normaler Schreibweise (Review U4, Frage an Daisy) */
.fn-teaser__titel {
    margin: 0;
    font-family: var(--fn-font);
    font-size: var(--fn-size-h3);
    font-weight: var(--fn-weight-medium);
    line-height: var(--fn-leading-h3);
    letter-spacing: 0;
    text-transform: none;
    color: var(--fn-heading);
    overflow-wrap: break-word;
    hyphens: manual;
    text-wrap: balance;
}

.fn-teaser__link {
    color: inherit;
    text-decoration: none;
}

/* Ganzer Teaser klickbar, Fokusrahmen um den ganzen Teaser */
.fn-teaser__link::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: var(--fn-radius);
}

.fn-teaser__link:focus-visible {
    outline: none;
}

.fn-teaser__link:focus-visible::after {
    outline: 2px solid var(--fn-focus);
    outline-offset: 4px;
}

.fn-teaser:hover .fn-teaser__link,
.fn-magazin-liste__eintrag:hover .fn-teaser__link,
.fn-magazin-verzeichnis__eintrag:hover .fn-teaser__link {
    text-decoration: underline;
    text-decoration-color: var(--fn-accent-line);
    text-decoration-thickness: var(--fn-linie, 1px);
    text-underline-offset: 4px;
}

.fn-teaser .fn-teaser__leitsatz {
    margin-top: var(--fn-space-2);
    font-size: var(--fn-size-body);
    font-weight: var(--fn-weight-light);
    line-height: var(--fn-leading-body);
}

.fn-teaser .fn-teaser__meta {
    margin-top: var(--fn-space-3);
    font-size: var(--fn-size-small);
    line-height: var(--fn-leading-small);
    letter-spacing: var(--fn-tracking-small);
    color: var(--fn-muted);
}

/* Aufmacher: Bild bzw. Zitat links (7/12), Text rechts */
.fn-magazin-aufmacher {
    margin-bottom: var(--fn-space-7);
}

.fn-teaser--gross .fn-teaser__titel {
    font-size: var(--fn-size-h2);
    line-height: var(--fn-leading-h2);
}

.fn-teaser--gross .fn-teaser__leitsatz {
    font-size: var(--fn-size-zitat);
    line-height: var(--fn-leading-h3);
}

.fn-teaser--gross .fn-teaser__zitat {
    max-width: 22em;
    font-size: var(--fn-size-zitat);
    line-height: 1.3;
}

.fn-teaser--gross.fn-teaser--zitat .fn-teaser__media {
    padding: var(--fn-space-6);
}

@media (min-width: 1024px) {
    .fn-teaser--gross {
        display: grid;
        grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
        align-items: center;
        gap: var(--fn-space-7);
    }

    /* Großes Zitat ohne Bild: flacher — sonst eine leere Fläche */
    .fn-teaser--gross.fn-teaser--zitat .fn-teaser__media {
        aspect-ratio: 2 / 1;
    }
}

/* Raster ohne Rahmen: mobil Liste, ab 768 zwei, ab 1024 drei Spalten */
.fn-magazin-raster {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--fn-space-6) var(--fn-space-5);
    margin: 0;
    padding: 0;
    list-style: none;
}

.fn-magazin-raster > li {
    margin: 0;
}

@media (min-width: 768px) {
    .fn-magazin-raster {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1024px) {
    .fn-magazin-raster {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* Mobil: Liste — kleines Bild links, Text rechts; Zitat-Teaser als ruhige Fläche (Review U9) */
@media (max-width: 767px) {
    .fn-magazin-raster {
        gap: 0;
    }

    .fn-magazin-raster > li + li {
        margin-top: var(--fn-space-4);
        padding-top: var(--fn-space-4);
        border-top: var(--fn-border-width) solid var(--fn-border);
    }

    .fn-magazin-raster .fn-teaser--bild {
        display: grid;
        grid-template-columns: 112px minmax(0, 1fr);
        gap: var(--fn-space-3);
        align-items: start;
    }

    .fn-magazin-raster .fn-teaser--bild .fn-teaser__media {
        aspect-ratio: 1;
    }

    .fn-magazin-raster .fn-teaser--zitat .fn-teaser__media {
        aspect-ratio: auto;
        padding: var(--fn-space-3) var(--fn-space-4);
    }

    .fn-magazin-raster .fn-teaser .fn-teaser__leitsatz {
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .fn-magazin-aufmacher {
        margin-bottom: var(--fn-space-5);
        padding-bottom: var(--fn-space-5);
        border-bottom: var(--fn-border-width) solid var(--fn-border);
    }
}

/* ---------- Liste (Weiterlesen) ---------- */

.fn-magazin-liste {
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: var(--fn-border-width) solid var(--fn-border);
}

.fn-magazin-liste > li {
    margin: 0;
    border-bottom: var(--fn-border-width) solid var(--fn-border);
}

.fn-magazin-liste__eintrag {
    position: relative;
    display: grid;
    gap: var(--fn-space-4);
    align-items: center;
    padding-block: var(--fn-space-4);
    font-family: var(--fn-font);
}

.fn-magazin-liste__eintrag--bild {
    grid-template-columns: minmax(0, 1fr) 96px;
}

.fn-magazin-liste__text > * {
    margin: 0;
}

.fn-magazin-liste .fn-teaser__dach {
    margin-bottom: var(--fn-space-2);
}

.fn-magazin-liste .fn-teaser__leitsatz {
    margin-top: var(--fn-space-2);
    font-size: var(--fn-size-body);
    font-weight: var(--fn-weight-light);
    line-height: var(--fn-leading-body);
}

.fn-magazin-liste__bild {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: var(--fn-radius);
}

@media (min-width: 768px) {
    .fn-magazin-liste__eintrag--bild {
        grid-template-columns: minmax(0, 1fr) 160px;
        gap: var(--fn-space-5);
    }

    .fn-magazin-liste__bild {
        aspect-ratio: 3 / 2;
    }
}

/* ---------- Themenfelder als Inhaltsverzeichnis (fn/magazin) ---------- */

.fn-magazin-verzeichnis {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0 var(--fn-space-6);
    margin: 0;
    padding: 0;
    list-style: none;
}

@media (min-width: 768px) {
    .fn-magazin-verzeichnis {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.fn-magazin-verzeichnis > li {
    margin: 0;
    border-top: var(--fn-border-width) solid var(--fn-border);
}

.fn-magazin-verzeichnis__eintrag {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--fn-space-2) var(--fn-space-4);
    padding-block: var(--fn-space-4);
}

.fn-magazin-verzeichnis__eintrag > * {
    margin: 0;
}

.fn-magazin-verzeichnis__titel {
    font-family: var(--fn-font);
    font-size: var(--fn-size-h3);
    font-weight: var(--fn-weight-medium);
    line-height: var(--fn-leading-h3);
    letter-spacing: 0;
    text-transform: none;
    color: var(--fn-heading);
}

.fn-magazin-verzeichnis__text {
    order: 3;
    flex-basis: 100%;
    font-size: var(--fn-size-body);
    font-weight: var(--fn-weight-light);
    line-height: var(--fn-leading-body);
}

.fn-magazin-verzeichnis__anzahl {
    font-size: var(--fn-size-small);
    letter-spacing: var(--fn-tracking-small);
    color: var(--fn-muted);
    white-space: nowrap;
}

/* ---------- Block fn/magazin: Kopfzeile mit Link rechts ---------- */

.wp-block-fn-magazin__kopfzeile {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--fn-space-3) var(--fn-space-5);
    margin-bottom: var(--fn-space-5);
}

.fn-section .wp-block-fn-magazin__kopfzeile .fn-section__kopf {
    margin-bottom: 0;
}

/* ---------- Rubrik- und Themenfeld-Seite ---------- */

/* Kopf flacher als ein normales Band (Review U1) */
.fn-section.fn-magazin-archiv__kopf {
    padding-block: var(--fn-space-6);
}

.fn-magazin-archiv__kopf-inner {
    display: grid;
    gap: var(--fn-space-5);
    align-items: center;
}

@media (min-width: 1024px) {
    .fn-magazin-archiv__kopf--mit-bild .fn-magazin-archiv__kopf-inner {
        grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
        gap: var(--fn-space-7);
    }
}

.fn-magazin-archiv__text {
    max-width: var(--fn-measure);
}

.fn-magazin-archiv__text > * {
    margin: 0;
}

.fn-magazin-archiv .fn-magazin-archiv__titel {
    margin-top: var(--fn-space-2);
}

.fn-magazin-archiv .fn-magazin-archiv__beschreibung {
    margin-top: var(--fn-space-3);
    font-size: var(--fn-size-zitat);
    font-weight: var(--fn-weight-light);
    line-height: var(--fn-leading-h3);
}

.fn-magazin-archiv .fn-magazin-archiv__anzahl {
    margin-top: var(--fn-space-3);
    font-size: var(--fn-size-small);
    letter-spacing: var(--fn-tracking-small);
    color: var(--fn-muted);
}

.fn-magazin-archiv__bild {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    border-radius: var(--fn-radius);
}

.fn-magazin-archiv__leer {
    margin: 0;
}

.fn-magazin-archiv__zurueck {
    margin: var(--fn-space-6) 0 0;
}

/* Seitenzahlen */
.fn-magazin-archiv__seiten {
    margin-top: var(--fn-space-6);
}

.fn-magazin-archiv__seiten ul.page-numbers {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--fn-space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.fn-magazin-archiv__seiten .page-numbers:is(a, span) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: var(--fn-touch-target);
    min-height: var(--fn-touch-target);
    padding: 0 var(--fn-space-3);
    border: var(--fn-border-width) solid var(--fn-border);
    border-radius: var(--fn-radius);
    box-sizing: border-box;
    font-weight: var(--fn-weight-medium);
    color: var(--fn-heading);
    text-decoration: none;
}

.fn-magazin-archiv__seiten a.page-numbers:hover {
    border-color: var(--fn-heading);
}

.fn-magazin-archiv__seiten .page-numbers.current {
    background: var(--fn-color-charcoal);
    border-color: var(--fn-color-charcoal);
    color: var(--fn-color-white);
}

.fn-magazin-archiv__seiten .page-numbers.dots {
    border-color: transparent;
}