/* ════════════════════════════════════════════════════════════════════════
   FK 2026 — Redesign-Ergänzungen
   Eigene Datei statt Änderungen an fk-style.css (1.700+ Zeilen bleiben unberührt).
   Design-Tokens als CSS-Variablen, neue Startseiten-Sektionen, Overlay-Menü.
   ════════════════════════════════════════════════════════════════════════ */

:root {
    --fk-black:        #000000;
    --fk-black-2:      #0a0a0a;
    --fk-white:        #ffffff;
    --fk-accent:       #01e375;
    --fk-text-muted:   rgba(255, 255, 255, 0.6);
    --fk-text-dark:    rgba(0, 0, 0, 0.8);
    --fk-border:       rgba(255, 255, 255, 0.12);
    --fk-font-mono:    'Share Tec Mono', 'Share Tech Mono', monospace;
    --fk-font-display: 'Major Mono Display', monospace;
    --fk-font-body:    'Work Sans', sans-serif;
    --fk-section-pad:  5rem 0;
}

/* ── Gemeinsame Startseiten-Elemente ─────────────────────────────────────── */

.fk-home-heading {
    font-family: var(--fk-font-mono);
    font-size: 2.5rem;
    margin: 0 0 0.5rem;
}

.fk-home-sub {
    font-family: var(--fk-font-body);
    font-size: 1.1rem;
    color: var(--fk-text-muted);
    max-width: 60ch;
    margin: 0 0 1.5rem;
}

.fk-home-sub--dark { color: var(--fk-text-dark); }

.fk-link-dark { color: #000; }
.fk-link-dark:hover { color: var(--fk-accent); }

.fk-more-link {
    display: inline-block;
    font-family: var(--fk-font-mono);
    font-size: 0.9rem;
    letter-spacing: 0.14em;
    color: var(--fk-white);
    text-decoration: none;
    border-bottom: 1px solid var(--fk-accent);
    padding-bottom: 2px;
    margin: 1rem 0 2rem;
}
.fk-more-link:hover { color: var(--fk-accent); }
.fk-more-link--dark { color: #000; border-bottom-color: #000; }
.fk-more-link--dark:hover { color: #000; border-bottom-color: var(--fk-accent); }

/* ── 1. Drops-Sektion ───────────────────────────────────────────────────── */

.fk-home-drops {
    padding: 7rem 0 2rem; /* Platz unter der fixen menubox (5rem) */
    background: var(--fk-black);
}

/* ── 2. Matrix-Sektionen ────────────────────────────────────────────────── */

.fk-home-matrix-intro { padding: var(--fk-section-pad); }
.fk-home-matrix-intro .fk-home-heading { color: #000; }

.fk-home-matrix-section { padding: var(--fk-section-pad); }

.fk-matrix-section-title {
    font-family: var(--fk-font-mono);
    font-size: 1.8rem;
    margin: 0 0 0.5rem;
}
.fk-matrix-section-title a { color: var(--fk-white); text-decoration: none; }
.fk-matrix-section-title a:hover { color: var(--fk-accent); }
.fk-matrix-section-title--dark a { color: #000; }
.fk-matrix-section-title--dark a:hover { color: #000; border-bottom: 2px solid #000; }

.fk-matrix-row { margin-top: 1rem; }

.fk-matrix-item {
    display: block;
    text-decoration: none;
    margin-bottom: 1.5rem;
}

.fk-matrix-item__media {
    display: block;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: var(--fk-black-2);
    border: 1px solid var(--fk-border);
    margin-bottom: 0.6rem;
}
.fk-matrix-item__media img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}
.fk-matrix-item:hover .fk-matrix-item__media img { transform: scale(1.05); }

.fk-matrix-item__placeholder {
    display: flex; align-items: center; justify-content: center;
    width: 100%; height: 100%;
    font-family: var(--fk-font-mono);
    font-size: 2.5rem;
    color: rgba(255,255,255,0.2);
}

.fk-matrix-item__title {
    display: block;
    font-family: var(--fk-font-mono);
    font-size: 0.85rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--fk-white);
    line-height: 1.4;
}
.fk-matrix-item:hover .fk-matrix-item__title { color: var(--fk-accent); }
.fk-matrix-item__title--dark { color: #000; }
.fk-matrix-item:hover .fk-matrix-item__title--dark { color: #000; text-decoration: underline; }

/* ── 3. Curation & Projects ─────────────────────────────────────────────── */

.fk-home-curation { padding: var(--fk-section-pad); background: var(--fk-black); }

.fk-curation-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}
@media (max-width: 900px) { .fk-curation-list { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .fk-curation-list { grid-template-columns: 1fr; } }

.fk-curation-item {
    display: flex;
    align-items: center;
    min-height: 7rem;
    padding: 1.25rem 1.5rem;
    font-family: var(--fk-font-mono);
    font-size: 1.1rem;
    color: var(--fk-white);
    text-decoration: none;
    border: 1px solid var(--fk-border);
    transition: border-color 0.2s ease;
}
.fk-curation-item:hover { border-color: var(--fk-accent); color: var(--fk-accent); }
.fk-curation-item--dark { color: #000; border-color: transparent; }
.fk-curation-item--dark:hover { color: #000; border-color: #000; }

/* ── 4. News-Teaser ─────────────────────────────────────────────────────── */

.fk-home-news { padding: var(--fk-section-pad); background: var(--fk-black); }

.fk-news-line {
    display: flex;
    gap: 1.5rem;
    align-items: baseline;
    padding: 0.9rem 0;
    border-bottom: 1px solid var(--fk-border);
    text-decoration: none;
}
.fk-news-line__date {
    font-family: var(--fk-font-mono);
    font-size: 0.8rem;
    color: var(--fk-text-muted);
    white-space: nowrap;
}
.fk-news-line__title {
    font-family: var(--fk-font-body);
    font-size: 1.05rem;
    color: var(--fk-white);
}
.fk-news-line:hover .fk-news-line__title { color: var(--fk-accent); }

@media (max-width: 600px) {
    .fk-news-line { flex-direction: column; gap: 0.2rem; }
}

/* ── Overlay-Menü ───────────────────────────────────────────────────────── */

.fk-overlay-trigger {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    color: var(--fk-white);
}
.fk-overlay-trigger .material-icons { font-size: 3rem; }
.fk-overlay-trigger:hover .material-icons { color: var(--fk-accent); }

.fk-menu-overlay {
    position: fixed;
    inset: 0;
    z-index: 1200;
    background: var(--fk-black);
    display: flex;
    flex-direction: column;
    padding: 1.5rem 2rem;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s ease;
}
.fk-menu-overlay.is-open { opacity: 1; visibility: visible; }
body.fk-menu-open { overflow: hidden; }

.fk-menu-overlay__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 3rem;
}

.fk-menu-overlay__brand {
    font-family: var(--fk-font-display);
    font-size: 1rem;
    letter-spacing: 0.08em;
    color: var(--fk-accent);
}

.fk-menu-overlay__close {
    background: none; border: none; padding: 0; cursor: pointer;
    color: var(--fk-white);
}
.fk-menu-overlay__close .material-icons { font-size: 3rem; }
.fk-menu-overlay__close:hover .material-icons { color: var(--fk-accent); }

.fk-menu-overlay__nav {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1.2rem;
    max-width: 900px;
}

.fk-menu-overlay__link {
    font-family: var(--fk-font-mono);
    font-size: clamp(1.8rem, 5vw, 3.2rem);
    line-height: 1.15;
    color: var(--fk-white);
    text-decoration: none;
    width: fit-content;
    transition: color 0.15s ease, transform 0.15s ease;
}
.fk-menu-overlay__link:hover,
.fk-menu-overlay__link:focus-visible {
    color: var(--fk-accent);
    transform: translateX(0.5rem);
    outline: none;
}

.fk-menu-overlay__group { display: flex; flex-direction: column; gap: 0.4rem; }

.fk-menu-overlay__group-label {
    font-family: var(--fk-font-mono);
    font-size: 0.85rem;
    letter-spacing: 0.2em;
    color: var(--fk-text-muted);
    margin-bottom: 0.2rem;
}

.fk-menu-overlay__link--sub {
    font-size: clamp(1.2rem, 3vw, 1.9rem);
    padding-left: 1.5rem;
    color: rgba(255,255,255,0.75);
}

.fk-menu-overlay__foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 2rem;
}
.fk-menu-overlay__foot a {
    font-family: var(--fk-font-mono);
    font-size: 0.85rem;
    color: var(--fk-text-muted);
    text-decoration: none;
}
.fk-menu-overlay__foot a:hover { color: var(--fk-accent); }

.fk-menu-overlay__strip {
    flex: 1;
    height: 6px;
    max-width: 50%;
}

@media (prefers-reduced-motion: reduce) {
    .fk-menu-overlay, .fk-menu-overlay__link { transition: none; }
}

/* ── Matrix Index-Verzeichnis (Konzept C) ────────────────────────────────── */

.fk-home-matrix-index {
    padding: 4rem 0 6rem;
    background: var(--fk-black);
}

.fk-index { position: relative; }

.fk-index-row {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 2rem;
    padding: 1.6rem 0.25rem;
    text-decoration: none;
    cursor: pointer;
}

/* Trennlinien oben: faden nach rechts aus, Deckkraft nimmt pro Zeile ab, keine Linie unten */
.fk-index-row::before {
    content: '';
    position: absolute;
    left: 0; right: 0; top: 0;
    height: 1px;
    background: linear-gradient(to right, rgba(255,255,255,0.75) 0%, rgba(255,255,255,0.35) 60%, transparent 95%);
    pointer-events: none;
}
.fk-index-row:nth-child(2)::before { opacity: 0.65; }
.fk-index-row:nth-child(3)::before { opacity: 0.4; }
.fk-index-row:nth-child(n+4)::before { opacity: 0.25; }

.fk-index-row__left {
    display: flex;
    align-items: baseline;
    gap: 1.25rem;
    min-width: 0;
}

.fk-index-row__nr {
    font-family: var(--fk-font-mono);
    font-size: 0.8rem;
    color: rgba(255,255,255,0.35);
}

.fk-index-row__name {
    font-family: var(--fk-font-mono);
    font-size: clamp(1.3rem, 3vw, 2rem);
    letter-spacing: 0.04em;
    color: var(--fk-white);
    transition: color 0.15s ease;
}
.fk-index-row:hover .fk-index-row__name,
.fk-index-row:focus-visible .fk-index-row__name { color: var(--fk-accent); }
.fk-index-row:focus-visible { outline: 1px solid var(--fk-accent); outline-offset: 4px; }

.fk-index-row__right {
    display: flex;
    align-items: baseline;
    gap: 1.75rem;
    flex-shrink: 0;
    font-family: var(--fk-font-mono);
    font-size: 0.8rem;
    letter-spacing: 0.1em;
    color: rgba(255,255,255,0.45);
    white-space: nowrap;
}

.fk-index-row__arrow {
    color: var(--fk-accent);
    transition: transform 0.2s ease;
}
.fk-index-row:hover .fk-index-row__arrow { transform: translateX(6px); }

/* Schwebendes Vorschaubild: folgt dem Cursor (JS setzt --mx/--my) */
.fk-index-row__preview {
    position: absolute;
    top: 50%;
    left: 55%;
    width: 170px;
    padding: 8px;
    opacity: 0;
    visibility: hidden;
    transform: translate(calc(var(--mx, 0) * 1px), calc(-50% + var(--my, 0) * 1px)) rotate(-3deg) scale(0.96);
    transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.15s ease-out;
    pointer-events: none;
    z-index: 5;
    border: 1px solid var(--fk-white);
}
.fk-index-row:hover .fk-index-row__preview,
.fk-index-row:focus-visible .fk-index-row__preview {
    opacity: 1;
    visibility: visible;
    transform: translate(calc(var(--mx, 0) * 1px), calc(-50% + var(--my, 0) * 1px)) rotate(-3deg) scale(1);
}
.fk-index-row__preview img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

@media (max-width: 900px) {
    .fk-index-row {
        flex-direction: column;
        gap: 0.5rem;
        align-items: flex-start;
        padding: 1.25rem 0.25rem;
    }
    .fk-index-row__right { flex-wrap: wrap; gap: 1rem; white-space: normal; }
    /* Mobil: Preview als statisches kleines Bild rechts oben in der Zeile */
    .fk-index-row__preview {
        position: absolute;
        top: 1rem; right: 0; left: auto;
        width: 64px;
        padding: 4px;
        opacity: 1;
        visibility: visible;
        transform: rotate(-3deg);
        transition: none;
    }
    .fk-index-row__left { padding-right: 80px; }
}

@media (prefers-reduced-motion: reduce) {
    .fk-index-row__preview { transition: opacity 0.2s ease; transform: translate(0, -50%) rotate(-3deg); }
    .fk-index-row:hover .fk-index-row__preview { transform: translate(0, -50%) rotate(-3deg); }
    .fk-index-row__arrow { transition: none; }
}

/* ── Werk-Abbildung auf Einzelseiten (Matrix-Posts) ──────────────────────── */

.fk-artwork-figure { margin: 1.5rem 0 2rem; }
.fk-artwork-figure img { max-width: 100%; height: auto; display: block; }
.fk-artwork-figure figcaption {
    margin-top: 0.75rem;
    font-family: var(--fk-font-body);
    font-size: 0.95rem;
    font-style: italic;
    color: var(--fk-text-muted);
    max-width: 70ch;
    line-height: 1.5;
}

/* ════════════════════════════════════════════════════════════════════════
   TYPO-TEST-SWITCH
   Eine Variable steuert alle Headlines: --fk-font-heading.
   Default = Share Tech Mono. <body data-fk-typo="sans"> schaltet alles
   auf Work Sans. Umschalter unten links (nur für eingeloggte Admins).
   Kleine Meta-Labels/Tags bleiben bewusst immer Mono (Terminal-Detail).
   ════════════════════════════════════════════════════════════════════════ */

:root { --fk-font-heading: var(--fk-font-mono); }
body[data-fk-typo="sans"] { --fk-font-heading: var(--fk-font-body); }

/* Globale Headlines (überschreibt fk-style.css, da später geladen) */
h1, h2, h3, h4, h5 { font-family: var(--fk-font-heading); }

/* FK-2026-Komponenten an die Heading-Variable binden */
.fk-home-heading,
.fk-matrix-section-title,
.fk-matrix-item__title,
.fk-matrix-item__placeholder,
.fk-index-row__name,
.fk-curation-item,
.fk-menu-overlay__link { font-family: var(--fk-font-heading); }

/* Work Sans läuft enger — Uppercase-Titel im Sans-Modus etwas sperren */
body[data-fk-typo="sans"] .fk-home-heading,
body[data-fk-typo="sans"] .fk-matrix-section-title { letter-spacing: 0.01em; font-weight: 600; }
body[data-fk-typo="sans"] .fk-index-row__name { font-weight: 500; }
body[data-fk-typo="sans"] .fk-menu-overlay__link { font-weight: 600; }

/* Test-Schalter (Admin) */
.fk-typo-switch {
    position: fixed;
    bottom: 12px; left: 12px;
    z-index: 99998;
    display: flex;
    gap: 0;
    border: 1px solid var(--fk-accent);
    font-family: var(--fk-font-mono);
    font-size: 11px;
}
.fk-typo-switch button {
    background: #000;
    color: rgba(255,255,255,0.6);
    border: none;
    padding: 6px 12px;
    cursor: pointer;
    font-family: inherit;
    font-size: inherit;
    letter-spacing: 0.1em;
}
.fk-typo-switch button.is-active { background: var(--fk-accent); color: #000; }

/* ── Headlines: lowercase + einheitliches Tracking ───────────────────────────
   Wie die Drop-Titel im Plugin: alles klein, gleiches letter-spacing.
   --fk-heading-tracking ist die eine Stellschraube fürs Kerning aller
   Headlines (Plugin inklusive). Ausnahme per Klasse .fk-keep-case. */

:root { --fk-heading-tracking: 0em; }

h1, h2, h3, h4, h5,
.fk-home-heading,
.fk-matrix-section-title,
.fk-matrix-item__title,
.fk-index-row__name,
.fk-curation-item,
.fk-menu-overlay__link {
    text-transform: lowercase;
    letter-spacing: var(--fk-heading-tracking);
}

/* Sans-Modus: gleiche Regel, kein abweichendes Spacing mehr */
body[data-fk-typo="sans"] .fk-home-heading,
body[data-fk-typo="sans"] .fk-matrix-section-title,
body[data-fk-typo="sans"] .fk-index-row__name,
body[data-fk-typo="sans"] .fk-menu-overlay__link { letter-spacing: var(--fk-heading-tracking); }

/* Ausnahme, falls einzelne Titel ihre Schreibweise behalten sollen */
.fk-keep-case { text-transform: none !important; }

/* ── Fließtext-Farbe global vereinheitlichen ─────────────────────────────────
   Eine Variable für allen Body-Text: rgba(255,255,255,0.8).
   Auf html gesetzt, damit die Vererbung intakt bleibt und animierte
   Sektionen (schwarzer Text) weiter ihre spezifischeren Regeln nutzen. */

:root { --fk-text-body: rgba(255, 255, 255, 0.8); }

html { color: var(--fk-text-body); }

.fk-home-sub { color: var(--fk-text-body); }
.fk-news-line__title { color: var(--fk-text-body); }
.fk-single-split__content { color: var(--fk-text-body); }
.fk-artwork-figure figcaption { color: var(--fk-text-body); }

/* ── Farb-Systematik: Headlines weiß, animated_bg immer schwarz ─────────────
   Regel 1: Headlines sind weiß (Fließtext bleibt --fk-text-body 0.8).
   Regel 2: Alles innerhalb von .animated_bg ist schwarz — Headlines voll
   schwarz, Fließtext rgba(0,0,0,0.8). Spezifität schlägt die weißen Regeln. */

h1, h2, h3, h4, h5,
.fk-home-heading,
.fk-matrix-section-title,
.fk-index-row__name,
.fk-menu-overlay__link,
.fk-curation-item { color: var(--fk-white); }

.animated_bg { color: var(--fk-text-dark); }

.animated_bg h1, .animated_bg h2, .animated_bg h3, .animated_bg h4, .animated_bg h5,
.animated_bg .fk-home-heading,
.animated_bg .fk-matrix-section-title,
.animated_bg .fk-matrix-section-title a,
.animated_bg .fk-index-row__name,
.animated_bg .fk-curation-item { color: #000; }

.animated_bg p, .animated_bg li,
.animated_bg .fk-home-sub,
.animated_bg figcaption { color: var(--fk-text-dark); }

.animated_bg a { color: #000; }
.animated_bg a:hover { color: #000; text-decoration: underline; }

/* ════════════════════════════════════════════════════════════════════════
   ENTSCHEIDUNG 19.07.2026: WORK SANS ÜBERALL
   Work Sans ist jetzt die Schrift der gesamten Seite — Headlines, Navigation,
   Meta-Labels. Share Tech Mono bleibt als --fk-font-mono-real erhalten und
   ist über den Admin-Schalter (MONO) weiterhin testbar.
   ════════════════════════════════════════════════════════════════════════ */

:root {
    --fk-font-mono-real: 'Share Tec Mono', 'Share Tech Mono', monospace;
    /* Alle bisherigen Mono-Verwendungen (Meta, Labels, Links) laufen ab
       jetzt ebenfalls in Work Sans: */
    --fk-font-mono: 'Work Sans', sans-serif;
    /* Headlines: Default jetzt Work Sans */
    --fk-font-heading: var(--fk-font-body);
}

/* MONO-Testmodus über den Admin-Schalter */
body[data-fk-typo="mono"] { --fk-font-heading: var(--fk-font-mono-real); }

/* Gewichte: Work Sans braucht bei großen Graden mehr Fleisch (Default,
   ohne data-Attribut — gilt damit auch für Besucher ohne Schalter) */
.fk-home-heading, .fk-matrix-section-title { font-weight: 600; }
.fk-index-row__name { font-weight: 500; }
.fk-menu-overlay__link { font-weight: 600; }
.fk-menu-overlay__link--sub { font-weight: 400; }
body[data-fk-typo="mono"] .fk-home-heading,
body[data-fk-typo="mono"] .fk-matrix-section-title,
body[data-fk-typo="mono"] .fk-index-row__name,
body[data-fk-typo="mono"] .fk-menu-overlay__link { font-weight: 400; }

/* Navigation + alte Mono-Stellen aus fk-style.css auf Work Sans */
.menubox .menu-about,
.sidenav, .sidenav li > a,
.welcome-slider .metaslider .caption,
.current-project a,
.news-and-updates-item-title a,
.tiefdenken-podcast a,
.what-i-can-do a,
.block--header a,
.category-loop nav.pagination,
.widget_podcast_series { font-family: var(--fk-font-body); }

/* Wortmarke im Overlay: bleibt Major Mono Display als einziges Display-Detail */

/* ── Matrix als EIN Block: Intro + Index gemeinsam auf animated_bg ────────── */

.fk-home-matrix { padding: var(--fk-section-pad); }
.fk-home-matrix .fk-index { margin-top: 2.5rem; }

/* Index-Zeilen auf Pastellfläche: alles schwarz, Linien schwarz auslaufend */
.animated_bg .fk-index-row::before {
    background: linear-gradient(to right, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.35) 60%, transparent 95%);
}
.animated_bg .fk-index-row__nr { color: rgba(0,0,0,0.45); }
.animated_bg .fk-index-row__right { color: rgba(0,0,0,0.6); }
.animated_bg .fk-index-row__arrow { color: #000; }
.animated_bg .fk-index-row:hover .fk-index-row__name {
    color: #000;
    text-decoration: underline;
}
.animated_bg .fk-index-row:focus-visible { outline-color: #000; }
.animated_bg .fk-index-row__preview { border-color: #000; }