/* ============================================================
   HEXENÄSTHETIKEN – Stylesheet v3
   Forschungsplattform
   ============================================================ */

/* ============================================================
   LOCAL FONTS — display only (large & medium headings)
   ============================================================ */

@font-face {
    font-family: 'Hermis Soul';
    src: url('assets/fonts/hermis-soul/Hermissoul-Regular.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Bjork Serif';
    src: url('assets/fonts/bjork-serif/CCSBjork-Light.otf') format('opentype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Bjork Serif';
    src: url('assets/fonts/bjork-serif/CCSBjork.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Bjork Serif';
    src: url('assets/fonts/bjork-serif/CCSBjork-Bold.otf') format('opentype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

:root {
    --bg-deep:        #0a0f0d;
    --bg-elevated:    #111a16;
    --bg-card:        #141e19;
    --bg-card-hover:  #1a2822;
    --text-primary:   #e8e4df;
    --text-secondary: #a09b94;
    --text-muted:     #6b6760;
    --accent:         #b8860b;
    --accent-light:   #d4a031;
    --accent-dim:     rgba(184, 134, 11, 0.15);
    --accent-glow:    rgba(184, 134, 11, 0.06);
    --border:         rgba(232, 228, 223, 0.08);
    --border-accent:  rgba(184, 134, 11, 0.3);

    --font-hero:      'Hermis Soul', 'IM Fell English', 'EB Garamond', 'Georgia', serif;
    --font-heading:   'Bjork Serif', 'EB Garamond', 'Cormorant Garamond', 'Georgia', serif;
    --font-display:   'EB Garamond', 'Cormorant Garamond', 'Georgia', serif;
    --font-archaic:   'IM Fell English', 'EB Garamond', 'Cormorant Garamond', 'Georgia', serif;
    --font-smallcaps: 'IM Fell English SC', 'EB Garamond', 'Cormorant Garamond', 'Georgia', serif;
    --font-body:      'Source Sans 3', 'Source Sans Pro', sans-serif;
    --font-reading:   'EB Garamond', 'Cormorant Garamond', 'Georgia', serif;

    /* Dark Academia palette */
    --burgundy:       #5c1a2a;
    --burgundy-dim:   rgba(92, 26, 42, 0.2);
    --parchment:      #d4cdc0;
    --parchment-dim:  rgba(212, 205, 192, 0.06);

    /* Light sections — parchment tones */
    --bg-light:       #f0ebe4;
    --bg-light-warm:  #e8e0d4;
    --text-dark:      #1a1612;
    --text-dark-secondary: #4a4540;
    --text-dark-muted: #7a756e;
    --border-light:   rgba(26, 22, 18, 0.1);
    --accent-on-light: #8a6508;

    --space-xs:  0.5rem;
    --space-sm:  1rem;
    --space-md:  1.5rem;
    --space-lg:  3rem;
    --space-xl:  5rem;
    --space-xxl: 8rem;

    --content-width:  680px;
    --wide-width:     960px;
    --max-width:      1200px;

    --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
    --ease-smooth: cubic-bezier(0.25, 0.1, 0.25, 1);
    --ease-snap:   cubic-bezier(0.23, 1, 0.32, 1);   /* stärkerer ease-out für UI-Interaktionen */
    --ease-press:  cubic-bezier(0.4, 0, 0.2, 1);     /* press/release Feedback */

    /* Motion timing — unified vocabulary */
    --dur-micro:    300ms;  /* hover, click feedback */
    --dur-standard: 600ms;  /* color, opacity changes */
    --dur-reveal:   900ms;  /* scroll reveals */
    --dur-hero:     1400ms; /* once-per-session hero entrances */
}

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

html {
    font-size: 18px;
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: var(--font-body);
    font-weight: 400;
    line-height: 1.7;
    color: var(--text-primary);
    background-color: var(--bg-deep);
    overflow-x: hidden;
    /* Renaissance typography defaults: old-style numerals, ligatures */
    font-feature-settings: 'onum' 1, 'liga' 1, 'kern' 1;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

::selection {
    background: var(--accent-dim);
    color: var(--text-primary);
}


/* ============================================================
   NAVIGATION
   ============================================================ */

.site-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-md) var(--space-lg);
    transition: background 0.5s var(--ease-smooth), padding 0.4s var(--ease-smooth);
}

.site-nav.is-scrolled {
    background: rgba(10, 15, 13, 0.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    padding-top: var(--space-sm);
    padding-bottom: var(--space-sm);
}

.site-nav--essay {
    background: rgba(10, 15, 13, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.nav-logo {
    display: inline-flex;
    align-items: center;
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    color: var(--text-secondary);
    transition:
        opacity 200ms var(--ease-snap),
        color 200ms var(--ease-snap),
        transform 140ms var(--ease-press);
}

@media (hover: hover) and (pointer: fine) {
    .nav-logo:hover { color: var(--text-primary); opacity: 0.85; }
}

.nav-logo:active {
    transform: scale(0.97);
}

.nav-logo-img {
    display: block;
    height: 40px;
    width: auto;
    border-radius: 3px;
}

.nav-links {
    display: flex;
    gap: var(--space-md);
    align-items: center;
}

.nav-external {
    opacity: 0.82;
    transition: opacity 200ms var(--ease-snap);
}

@media (hover: hover) and (pointer: fine) {
    .nav-external:hover {
        opacity: 1;
    }
}

.nav-links a {
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 400;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
    transition: color 200ms var(--ease-snap);
}

@media (hover: hover) and (pointer: fine) {
    .nav-links a:hover { color: var(--text-primary); }
}


/* ============================================================
   SHARED: Section Kickers (für alle Sektionen)
   ============================================================ */

.section-kicker {
    font-family: var(--font-smallcaps);
    font-size: 0.82rem;
    font-weight: 400;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    font-feature-settings: 'smcp' 1, 'onum' 1;
    color: var(--accent);
    margin-bottom: var(--space-md);
}


/* ============================================================
   HERO
   ============================================================ */

.hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.hero-bg {
    position: absolute;
    inset: -10% 0;
    z-index: 0;
    will-change: transform;
}

.hero-bg-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 30%;
    filter: brightness(0.35) saturate(0.6);
}

.hero-overlay {
    position: absolute;
    inset: 0;
    /* z-index 0 statt 1: Über dem Hintergrund liegt sie schon durch die
       Reihenfolge im Dokument. Die Buntglas-Ebene darüber kommt damit
       ohne eigenen z-index aus — und ohne z-index kapselt sie das
       Mischen ihrer Kinder nicht ab. */
    z-index: 0;
    background:
        radial-gradient(
            ellipse 80% 60% at 50% 45%,
            transparent 0%,
            rgba(10, 15, 13, 0.4) 50%,
            rgba(10, 15, 13, 0.85) 100%
        ),
        linear-gradient(
            to bottom,
            rgba(10, 15, 13, 0.2) 0%,
            transparent 30%,
            transparent 60%,
            var(--bg-deep) 100%
        );
}

/* Stained glass window layer — illuminated by cursor */
/* Buntglas-Fenster: Das Licht fällt dort durch, wo Cursor oder
   Finger stehen.
   Wichtig fürs Tempo: Die Maske sitzt auf einem fest großen
   Fenster-Element und bleibt selbst unverändert. Bewegt wird nur
   per transform — das Fenster nach vorn, das Bild um denselben
   Betrag zurück. So rastert der Browser die Maske ein einziges Mal
   und schiebt pro Frame nur noch fertige Ebenen. Vorher wurde die
   Maske bildschirmfüllend in jedem Frame neu gezeichnet, was
   schwache Geräte komplett ausgebremst hat. */
/* Licht statt Foto: Im Screen-Modus verschwinden die dunklen Stellen des
   Bildes — also das schwarze Bleiglas-Gerüst — im dunklen Grund, und nur
   die farbigen Scheiben leuchten heraus. Dadurch trägt schon eine
   niedrige Deckkraft, und der Header bleibt trotzdem ruhig.
   Der Mischmodus sitzt auf den beiden Bild-Ebenen, nicht auf dieser
   Hülle: Läge er auf der Gruppe, müsste der Browser bei jeder
   Zeigerbewegung die komplette Header-Fläche neu mischen. So mischt die
   ruhende Grundschicht einmal, und pro Frame nur noch der Lichtfleck in
   seinen eigenen Maßen.
   Der Verlauf liegt außerhalb: Screen kann nur aufhellen, ein Abdunkeln
   wäre darin wirkungslos. */
.hero-stained-glass {
    --glass-size: 1100px;
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

/* Grundschicht: liegt immer im Header, unabhängig von Maus, Finger
   oder Skript. Zur Mitte hin nimmt die Maske sie fast ganz zurück,
   damit der Titel ruhig bleibt; nach außen trägt sie die Farbe.
   Ein statisches Bild mit statischer Maske — der Browser zeichnet das
   einmal und rührt es danach nicht mehr an. */
.stained-glass-base {
    position: absolute;
    inset: 0;
    mix-blend-mode: screen;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: center 30%;
    opacity: 0.36;
    filter: saturate(1.45) brightness(1.05) contrast(1.03);
    -webkit-mask-image: radial-gradient(
        ellipse 76% 66% at 50% 46%,
        rgba(0,0,0,0.06) 0%,
        rgba(0,0,0,0.2) 38%,
        rgba(0,0,0,0.6) 70%,
        rgba(0,0,0,0.95) 100%
    );
    mask-image: radial-gradient(
        ellipse 76% 66% at 50% 46%,
        rgba(0,0,0,0.06) 0%,
        rgba(0,0,0,0.2) 38%,
        rgba(0,0,0,0.6) 70%,
        rgba(0,0,0,0.95) 100%
    );
}

/* Verlauf über der Grundschicht: nimmt sie oben zurück, damit die
   Navigation ruhig bleibt, und führt sie unten in den Seitenhintergrund
   über — sonst schneidet das Buntglas hart in die nächste Sektion.
   Liegt bewusst unter dem Cursor-Fenster, damit der Lichtfleck weiter
   ungedämpft durchkommt. */
.stained-glass-fade {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(
        to bottom,
        rgba(10, 15, 13, 0.6) 0%,
        rgba(10, 15, 13, 0.12) 13%,
        rgba(10, 15, 13, 0) 28%,
        rgba(10, 15, 13, 0) 64%,
        rgba(10, 15, 13, 0.22) 82%,
        rgba(10, 15, 13, 0.8) 95%,
        var(--bg-deep) 100%
    );
}

.stained-glass-window {
    position: absolute;
    top: 0;
    left: 0;
    mix-blend-mode: screen;
    width: var(--glass-size);
    height: var(--glass-size);
    margin-left: calc(var(--glass-size) / -2);
    margin-top: calc(var(--glass-size) / -2);
    /* Startposition: Bildmitte — JS übernimmt ab dem ersten Zeiger */
    transform: translate3d(50vw, 50vh, 0);
    opacity: 0;
    transition: opacity 1s var(--ease-out);
    -webkit-mask-image: radial-gradient(
        circle closest-side at 50% 50%,
        rgba(0,0,0,1) 0%,
        rgba(0,0,0,0.75) 20%,
        rgba(0,0,0,0.4) 40%,
        rgba(0,0,0,0.1) 60%,
        rgba(0,0,0,0) 75%
    );
    mask-image: radial-gradient(
        circle closest-side at 50% 50%,
        rgba(0,0,0,1) 0%,
        rgba(0,0,0,0.75) 20%,
        rgba(0,0,0,0.4) 40%,
        rgba(0,0,0,0.1) 60%,
        rgba(0,0,0,0) 75%
    );
}

.stained-glass-img {
    position: absolute;
    top: 0;
    left: 0;
    /* Maße des Hero-Bereichs — JS hält sie aktuell, die Fallbacks
       greifen, solange noch kein Skript gelaufen ist. */
    width: var(--hero-w, 100vw);
    height: var(--hero-h, 100vh);
    max-width: none;
    object-fit: cover;
    object-position: center 30%;
    /* Bewusst ohne filter: Diese Ebene wandert mit dem Zeiger, ein Filter
       darauf müsste in jedem Frame neu gerechnet werden. Die Aufhellung
       übernimmt der Screen-Modus ohnehin. */
    transform: translate3d(
        calc(var(--glass-size) / 2 - 50vw),
        calc(var(--glass-size) / 2 - 50vh),
        0
    );
}

.hero-stained-glass.is-active .stained-glass-window,
.page-hero-glass.is-active .stained-glass-window {
    opacity: 1;
}

/* GPU-Ebenen erst anlegen, wenn das Fenster wirklich leuchtet. Die
   Einblendung dauert eine Sekunde — Zeit genug fuer den Browser, die
   Ebenen vorzubereiten. Dauerhaft gesetzt haelt will-change hier zwei
   grosse Texturen im Speicher, auch wenn nichts zu sehen ist. */
.hero-stained-glass.is-active .stained-glass-window,
.hero-stained-glass.is-active .stained-glass-img,
.page-hero-glass.is-active .stained-glass-window,
.page-hero-glass.is-active .stained-glass-img {
    will-change: transform;
}

@media (max-width: 640px) {
    .hero-stained-glass {
        --glass-size: 620px;
    }

    /* Hochformat: Der Header ist schmal und hoch, die Ellipse der Maske
       lässt oben und unten breite Bänder voll stehen. Zusammen mit dem
       Screen-Modus wird das schnell zu hell — deshalb hier zurückhaltender. */
    .stained-glass-base {
        opacity: 0.26;
    }
}

.hero-grain {
    position: absolute;
    inset: 0;
    z-index: 2;
    opacity: 0.04;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='1'/%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size: 128px 128px;
    pointer-events: none;
}

.hero-inner {
    position: relative;
    z-index: 3;
    text-align: center;
    max-width: var(--wide-width);
    padding: 0 var(--space-lg);
}

.hero-overline {
    font-family: var(--font-smallcaps);
    font-size: 0.88rem;
    font-weight: 400;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    font-feature-settings: 'smcp' 1, 'onum' 1;
    color: var(--accent);
    margin-bottom: var(--space-md);
    opacity: 0;
    animation: fadeUp 1s var(--ease-out) 0.3s forwards;
}

.hero-title {
    font-family: var(--font-display);
    font-size: clamp(3rem, 8vw, 7.5rem);
    font-weight: 400;
    line-height: 1.1;
    letter-spacing: -0.025em;
    color: var(--text-primary);
    margin-bottom: var(--space-md);
    padding-bottom: 0.08em;
}

.hero-subtitle {
    font-family: var(--font-display);
    font-size: clamp(0.95rem, 1.8vw, 1.25rem);
    font-weight: 400;
    font-style: italic;
    line-height: 1.55;
    color: var(--text-secondary);
    margin-bottom: var(--space-lg);
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
    opacity: 0;
    animation: fadeUp 1.4s var(--ease-out) 0.75s forwards;
}

.hero-line {
    width: 48px;
    height: 1px;
    background: var(--accent);
    margin: 0 auto;
    opacity: 0;
    animation: fadeUp 1s var(--ease-out) 1s forwards;
}

.hero-scroll-hint {
    position: absolute;
    bottom: var(--space-lg);
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-xs);
    opacity: 0;
    animation: fadeUp 1s var(--ease-out) 1.5s forwards;
}

.hero-scroll-hint span {
    font-size: 0.65rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--text-muted);
    /* Optical centering: letter-spacing adds trailing space; compensate with padding-left */
    padding-left: 0.15em;
}

.hero-scroll-line {
    width: 1px;
    height: 32px;
    background: var(--text-muted);
    animation: scrollPulse 2.5s var(--ease-smooth) infinite 2s;
    transform-origin: top center;
}

@keyframes scrollPulse {
    0%   { opacity: 0.3; transform: scaleY(0.4); }
    50%  { opacity: 0.7; transform: scaleY(1); }
    100% { opacity: 0.3; transform: scaleY(0.4); }
}


/* ============================================================
   HERO SPLIT TEXT — per-character entrance
   JS wraps each character in .hero-char spans.
   ============================================================ */

@keyframes charReveal {
    from {
        opacity: 0;
        transform: translateY(60px);
        filter: blur(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}

.hero-title .hero-char {
    display: inline-block;
    opacity: 0;
    animation: charReveal 0.9s var(--ease-out) forwards;
    will-change: transform, opacity, filter;
}

/* Whitespace characters should not be inline-block (they collapse) */
.hero-title .hero-char--space {
    width: 0.3em;
}

/* When split text is active, remove the block-level animation */
.hero-title.is-split {
    opacity: 1;
    animation: none;
}

/* Split chars inherit the glass-text gradient */
.hero-title.glass-text.is-split .hero-char {
    background-image: inherit;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}


/* ============================================================
   SCROLL MARQUEE — horizontal scroll-driven text
   ============================================================ */

.scroll-marquee {
    overflow: hidden;
    padding: var(--space-md) 0;
    position: relative;
    white-space: nowrap;
    pointer-events: none;
    user-select: none;
    display: flex;
    flex-direction: column;
    gap: 0.3em;
}

.scroll-marquee-row {
    overflow: hidden;
    width: 100%;
}

.scroll-marquee-track {
    display: inline-flex;
    align-items: center;
    gap: 0;
    font-family: var(--font-hero);
    font-size: clamp(2.8rem, 8vw, 6.5rem);
    font-weight: 400;
    letter-spacing: -0.02em;
    line-height: 1.1;
    /* Same rainbow gradient as glass-text headlines — sharp & vivid.
       Die Sättigung steckt jetzt in den Farbwerten selbst (entspricht
       dem früheren filter: saturate(1.2)). Ein Filter auf dem bewegten
       Element zwingt den Browser, das riesige Textband in jedem Frame
       neu zu zeichnen — genau daran sind schwache Geräte hängen
       geblieben. */
    background-image: linear-gradient(
        100deg,
        #f8c631 0%,
        #ef8819 14%,
        #dd4521 28%,
        #b12b51 42%,
        #7037aa 56%,
        #2567b7 72%,
        #2b9ebb 86%,
        #41b34e 100%
    );
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    opacity: 1;
    animation: marquee-ltr 32s linear infinite;
}

.scroll-marquee-row--rtl .scroll-marquee-track {
    animation: marquee-rtl 36s linear infinite;
}

/* will-change nur, solange das Band wirklich sichtbar ist. Dauerhaft
   gesetzt hält es alle sechs Bänder gleichzeitig als GPU-Ebene im
   Speicher — auf Geräten mit wenig RAM gibt der Browser das Compositing
   dann auf und die Animation fällt zurück auf den Main-Thread. */
.scroll-marquee-track:not(.is-offscreen) {
    will-change: transform;
}

.scroll-marquee-track.is-offscreen {
    animation-play-state: paused;
}

.scroll-marquee-track span {
    flex-shrink: 0;
}

.marquee-dot {
    padding: 0 0.3em;
    opacity: 0.5;
    font-size: 0.6em;
}

@keyframes marquee-ltr {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(-50%, 0, 0); }
}

@keyframes marquee-rtl {
    from { transform: translate3d(-50%, 0, 0); }
    to   { transform: translate3d(0, 0, 0); }
}

/* Bei reduzierter Bewegung laufen die Bänder weiter, aber in gut einem
   Drittel des Tempos. Ganz anhalten war die reine Lehre — auf günstigen
   Geräten schaltet aber der Energiesparmodus diese Einstellung ein, ohne
   dass jemand sie bewusst gewählt hätte, und dort standen die Bänder
   dann einfach still. Ein langsames, gleichmäßiges Wandern löst kein
   Schwindelgefühl aus, ein Zucken oder Blinken wäre etwas anderes.
   Die !important sind nötig, weil der Sammel-Riegel weiter unten allen
   Elementen animation-duration und -iteration-count überschreibt. */
@media (prefers-reduced-motion: reduce) {
    .scroll-marquee-track {
        animation-duration: 96s !important;
        animation-iteration-count: infinite !important;
    }

    .scroll-marquee-row--rtl .scroll-marquee-track {
        animation-duration: 112s !important;
    }
}


/* ============================================================
   STICKY SECTION HEADERS — cinematic overlap
   Section titles pin, content scrolls over them.
   ============================================================ */

.essays-section,
.exkurse-section,
.archiv-section {
    position: relative;
}

/* Section titles — large but normal flow, no sticky */
.essays-section > .section-header .section-title,
.exkurse-section > .section-header .section-title,
.archiv-section > .section-header .section-title {
    font-size: clamp(3.2rem, 13vw, 7rem);
    line-height: 1.15;
    letter-spacing: -0.025em;
    margin-bottom: var(--space-md);
    padding-bottom: 0.12em;
}


/* ============================================================
   OVERSIZED SECTION NUMBERS — decorative parallax
   Generated via data-section-number attribute.
   ============================================================ */

[data-section-number] {
    position: relative;
}

.section-number-deco {
    position: absolute;
    top: 0;
    right: var(--space-lg);
    font-family: var(--font-display);
    font-size: clamp(8rem, 22vw, 18rem);
    font-weight: 400;
    font-style: italic;
    line-height: 1;
    color: var(--text-primary);
    opacity: 0.03;
    pointer-events: none;
    user-select: none;
    will-change: transform;
    z-index: 0;
}


/* ============================================================
   SCALE-ON-SCROLL — Perspectives grid zoom
   ============================================================ */

.perspectives-list {
    transform: scale(0.88);
    transition: transform 1.2s var(--ease-out);
    will-change: transform;
}

.perspectives-list.is-scaled {
    transform: scale(1);
}


/* ============================================================
   ESSAY CARDS — staggered overlap + rotation
   ============================================================ */

.essay-card:nth-child(2) {
    margin-top: calc(var(--space-lg) * -0.5);
    transform: rotate(0.8deg) translateY(20px);
    transition: transform 0.8s var(--ease-out), background-color 0.5s ease;
}

.essay-card:nth-child(3) {
    margin-top: calc(var(--space-lg) * -0.5);
    transform: rotate(-0.6deg) translateY(30px);
    transition: transform 0.8s var(--ease-out), background-color 0.5s ease;
}

.essay-card:nth-child(2).is-aligned,
.essay-card:nth-child(3).is-aligned {
    transform: rotate(0deg) translateY(0);
}


/* ============================================================
   FOCUS SECTION — giant background text "HEXE"
   ============================================================ */

.focus-section .focus-inner::before {
    content: 'HEXE';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, calc(-50% + var(--backdrop-y, 0px)));
    font-family: var(--font-display);
    font-size: clamp(10rem, 28vw, 22rem);
    font-weight: 400;
    letter-spacing: 0.05em;
    color: var(--text-dark);
    opacity: 0.04;
    pointer-events: none;
    user-select: none;
    white-space: nowrap;
    will-change: transform;
    z-index: 0;
}

.focus-inner {
    position: relative;
}

.focus-inner > * {
    position: relative;
    z-index: 1;
}


/* ============================================================
   MOBILE — disable heavy effects
   ============================================================ */

@media (max-width: 640px) {
    .scroll-marquee-track {
        font-size: clamp(2.5rem, 10vw, 4rem);
    }

    .section-number-deco {
        font-size: clamp(5rem, 18vw, 8rem);
        right: var(--space-md);
    }

    .essays-section > .section-header,
    .exkurse-section > .section-header,
    .archiv-section > .section-header {
        position: relative;
        top: auto;
    }

    .essay-card:nth-child(2),
    .essay-card:nth-child(3) {
        margin-top: 0;
        transform: none;
    }

    .focus-section .focus-inner::before {
        font-size: clamp(5rem, 20vw, 10rem);
    }
}


/* ============================================================
   INTRO
   ============================================================ */

.intro-section {
    padding: var(--space-xxl) var(--space-lg) var(--space-xl);
    display: flex;
    justify-content: center;
    background: var(--bg-light);
}

.intro-inner {
    max-width: 680px;
    text-align: center;
}

.intro-overline {
    font-family: var(--font-smallcaps);
    font-size: 0.88rem;
    font-weight: 400;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    font-feature-settings: 'smcp' 1, 'onum' 1;
    color: var(--accent-on-light);
    margin-bottom: var(--space-md);
}

.intro-text {
    font-family: var(--font-archaic);
    font-size: 1.32rem;
    font-weight: 400;
    line-height: 1.7;
    color: var(--text-dark);
    margin-bottom: var(--space-md);
    font-feature-settings: 'onum' 1, 'liga' 1, 'dlig' 1, 'kern' 1;
}

.intro-text-secondary {
    font-family: var(--font-archaic);
    font-size: 1.32rem;
    line-height: 1.7;
    color: var(--text-dark-secondary);
    font-feature-settings: 'onum' 1, 'liga' 1, 'dlig' 1, 'kern' 1;
}


/* ============================================================
   PERSPEKTIVEN – Neue Sektion
   Signalisiert interdisziplinäre Breite ohne Rubriken-Overkill
   ============================================================ */

.perspectives-section {
    padding: var(--space-xl) var(--space-lg);
    max-width: var(--wide-width);
    margin: 0 auto;
    border-top: 1px solid var(--border);
}

.perspectives-inner {
    display: block;
}

.perspectives-title {
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 400;
    line-height: 1.3;
    color: var(--text-primary);
    margin-bottom: var(--space-lg);
    max-width: 520px;
}

.perspectives-list {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: var(--border);
    margin-bottom: var(--space-lg);
    border: 1px solid var(--border);
}

.perspectives-list li {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-md);
    background: var(--bg-deep);
    transition: background 240ms var(--ease-snap);
}

@media (hover: hover) and (pointer: fine) {
    .perspectives-list li:hover {
        background: var(--bg-elevated);
    }
}

.perspective-number {
    font-family: var(--font-display);
    font-size: 0.8rem;
    font-style: italic;
    color: var(--accent);
    letter-spacing: 0.05em;
}

.perspective-name {
    font-family: var(--font-body);
    font-size: 0.88rem;
    color: var(--text-primary);
    letter-spacing: 0.02em;
}

.perspectives-note {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 0.92rem;
    color: var(--text-muted);
    max-width: 520px;
}


/* ============================================================
   ESSAYS SECTION
   ============================================================ */

.essays-section {
    padding: var(--space-xl) var(--space-lg) var(--space-xl);
    max-width: var(--max-width);
    margin: 0 auto;
    position: relative;
    overflow: hidden;
}

.section-header {
    margin-bottom: var(--space-xl);
    padding-bottom: var(--space-lg);
    border-bottom: 1px solid var(--border);
    max-width: 640px;
}

.section-title {
    font-family: var(--font-display);
    font-size: clamp(2rem, 4vw, 2.8rem);
    font-weight: 400;
    color: var(--text-primary);
    margin-bottom: var(--space-sm);
    letter-spacing: -0.01em;
}

.section-claim {
    font-family: var(--font-archaic);
    font-style: italic;
    font-size: clamp(1.8rem, 5.5vw, 3rem);
    line-height: 1.15;
    color: var(--accent-light);
    margin-bottom: var(--space-md);
    letter-spacing: 0.015em;
    font-feature-settings: 'onum' 1, 'liga' 1, 'dlig' 1;
}

.section-description {
    font-size: 0.95rem;
    line-height: 1.7;
    color: var(--text-secondary);
    max-width: 560px;
}


/* --- Essay Card --- */
.essays-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}

.essay-card {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: var(--space-lg);
    padding: var(--space-md);
    border-radius: 4px;
    transition: background-color 280ms var(--ease-snap);
}

@media (hover: hover) and (pointer: fine) {
    .essay-card:hover {
        background-color: var(--bg-card-hover);
    }
}

.essay-card-image {
    aspect-ratio: 3 / 2;
    border-radius: 3px;
    overflow: hidden;
    position: relative;
}

/* Indirektes Scheinwerferlicht — folgt dem Cursor über dem Bild */
.essay-card-image::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0;
    transition: opacity 500ms var(--ease-out);
    background: radial-gradient(
        circle 260px at var(--spot-x, 50%) var(--spot-y, 50%),
        rgba(255, 235, 180, 0.45) 0%,
        rgba(255, 220, 140, 0.22) 25%,
        rgba(212, 160, 49, 0.12) 50%,
        transparent 75%
    );
    mix-blend-mode: soft-light;
    z-index: 3;
}

@media (hover: hover) and (pointer: fine) {
    .essay-card:hover .essay-card-image::after,
    .essay-card-image:hover::after {
        opacity: 1;
    }
}

.essay-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(0.75) saturate(0.7);
    transition:
        filter 280ms var(--ease-snap),
        transform 400ms var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
    .essay-card:hover .essay-card-img {
        filter: brightness(0.85) saturate(0.85);
        transform: scale(1.03);
    }
}

.essay-card:active {
    transform: scale(0.99);
    transition: transform 120ms var(--ease-press);
}

.essay-card-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: var(--space-xs) 0;
}

/* Tag System – Multiple Tags pro Essay */
.essay-card-tags {
    display: flex;
    gap: var(--space-sm);
    margin-bottom: var(--space-sm);
    flex-wrap: wrap;
}

.essay-card-tag {
    font-size: 0.66rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--accent);
    padding: 0.25rem 0.7rem;
    border: 1px solid var(--border-accent);
    border-radius: 2px;
}

.essay-card-title {
    font-family: var(--font-display);
    font-size: 1.35rem;
    font-weight: 500;
    line-height: 1.3;
    color: var(--text-primary);
    margin-bottom: var(--space-sm);
    transition: color 200ms var(--ease-snap);
}

@media (hover: hover) and (pointer: fine) {
    .essay-card:hover .essay-card-title {
        color: var(--accent-light);
    }
}

.essay-card-excerpt {
    font-size: 0.88rem;
    line-height: 1.7;
    color: var(--text-secondary);
    margin-bottom: var(--space-sm);
}

.essay-card-date {
    font-size: 0.72rem;
    color: var(--text-muted);
    letter-spacing: 0.06em;
}


/* ============================================================
   EXKURSE SECTION – Neue Ebene
   Kürzere Texte, kompaktere Darstellung
   ============================================================ */

.exkurse-section {
    padding: var(--space-xl) var(--space-lg);
    max-width: none;
    background: var(--bg-light);
}

.exkurse-section > .section-header,
.exkurse-section > .exkurse-list {
    max-width: var(--max-width);
    margin-left: auto;
    margin-right: auto;
}

.exkurse-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1px;
    background: var(--border-light);
    border: 1px solid var(--border-light);
}

.exkurse-item {
    padding: var(--space-lg);
    background: var(--bg-light);
    transition: background 240ms var(--ease-snap);
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

@media (hover: hover) and (pointer: fine) {
    .exkurse-item:hover {
        background: var(--bg-light-warm);
    }
}

.exkurse-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-xs);
}

.exkurse-tag {
    font-size: 0.65rem;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--accent-on-light);
}

.exkurse-date {
    font-size: 0.7rem;
    color: var(--text-dark-muted);
    letter-spacing: 0.06em;
    font-style: italic;
}

.exkurse-title {
    font-family: var(--font-display);
    font-size: 1.2rem;
    font-weight: 500;
    line-height: 1.4;
    color: var(--text-dark);
    transition: color 240ms var(--ease-snap);
}

@media (hover: hover) and (pointer: fine) {
    .exkurse-item:hover .exkurse-title {
        color: var(--accent-on-light);
    }
}

.exkurse-title em {
    font-style: italic;
}

.exkurse-excerpt {
    font-size: 0.88rem;
    line-height: 1.65;
    color: var(--text-dark-secondary);
}


/* ============================================================
   ARCHIV SECTION – Neue Ebene
   Zurzeit: Placeholder-Sektion (Archiv wächst langsam)
   ============================================================ */

.archiv-section {
    padding: var(--space-xl) var(--space-lg) var(--space-xxl);
    max-width: var(--max-width);
    margin: 0 auto;
}

.archiv-preview {
    padding: var(--space-xxl) var(--space-lg);
    border: 1px solid var(--border);
    text-align: center;
    background:
        radial-gradient(
            ellipse at center,
            var(--accent-glow) 0%,
            transparent 70%
        );
}

.archiv-placeholder {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 1.05rem;
    color: var(--text-muted);
    max-width: 480px;
    margin: 0 auto;
    line-height: 1.6;
}


/* ============================================================
   FOCUS SECTION – Dissertationskern
   Zweistufige Positionierung: erst breit, dann fokussiert
   ============================================================ */

.focus-section {
    padding: var(--space-xxl) var(--space-lg);
    background: var(--bg-light-warm);
    border-top: 1px solid var(--border-light);
    border-bottom: 1px solid var(--border-light);
    position: relative;
    overflow: hidden;
}

.focus-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(
        ellipse 60% 80% at 50% 50%,
        rgba(184, 134, 11, 0.04) 0%,
        transparent 70%
    );
    pointer-events: none;
}

.focus-inner {
    max-width: 720px;
    margin: 0 auto;
    text-align: center;
    position: relative;
    z-index: 1;
}

.focus-title {
    font-family: var(--font-display);
    font-size: clamp(2rem, 4.5vw, 3rem);
    font-weight: 400;
    line-height: 1.2;
    color: var(--text-dark);
    margin-bottom: var(--space-md);
    letter-spacing: -0.01em;
}

.focus-text {
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-style: italic;
    line-height: 1.7;
    color: var(--text-dark);
    margin-bottom: var(--space-md);
}

.focus-text-secondary {
    font-family: var(--font-body);
    font-size: 0.95rem;
    line-height: 1.75;
    color: var(--text-dark-secondary);
    margin-bottom: var(--space-lg);
}

.focus-link {
    display: inline-block;
    font-family: var(--font-body);
    font-size: 0.85rem;
    letter-spacing: 0.08em;
    color: var(--accent-on-light);
    border-bottom: 1px solid rgba(138, 101, 8, 0.3);
    padding-bottom: 2px;
    transition:
        color 200ms var(--ease-snap),
        border-color 200ms var(--ease-snap),
        transform 140ms var(--ease-press);
}

@media (hover: hover) and (pointer: fine) {
    .focus-link:hover {
        color: var(--text-dark);
        border-bottom-color: var(--text-dark);
    }
}

.focus-link:active {
    transform: scale(0.97);
}


/* ============================================================
   ESSAY HERO
   ============================================================ */

.essay-hero {
    position: relative;
    min-height: 75vh;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
}

.essay-hero-image {
    position: absolute;
    inset: -8% 0;
    z-index: 0;
    will-change: transform;
}

.essay-hero-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 40%;
    filter: brightness(0.35) saturate(0.55);
}

.essay-hero-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        linear-gradient(
            to bottom,
            rgba(10, 15, 13, 0.15) 0%,
            rgba(10, 15, 13, 0.3) 40%,
            rgba(10, 15, 13, 0.7) 70%,
            var(--bg-deep) 100%
        );
}

.essay-hero-content {
    position: relative;
    z-index: 2;
    padding: var(--space-xxl) var(--space-lg) var(--space-xl);
    max-width: var(--wide-width);
    margin: 0 auto;
    width: 100%;
    opacity: 0;
    animation: fadeUp 1.2s var(--ease-out) 0.3s forwards;
}

.essay-hero-tags {
    display: flex;
    gap: var(--space-sm);
    margin-bottom: var(--space-md);
    flex-wrap: wrap;
}

.essay-hero-tag {
    font-size: 0.68rem;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--accent);
    padding: 0.3rem 0.8rem;
    border: 1px solid var(--border-accent);
    border-radius: 2px;
}

.essay-hero-title {
    font-family: var(--font-display);
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: 400;
    line-height: 1.15;
    letter-spacing: -0.01em;
    color: var(--text-primary);
    margin-bottom: var(--space-md);
    text-shadow: 0 2px 30px rgba(0, 0, 0, 0.4);
}

.essay-hero-meta {
    font-size: 0.82rem;
    color: var(--text-muted);
    letter-spacing: 0.04em;
}

.essay-hero-byline {
    font-family: var(--font-display);
    font-size: 0.95rem;
    font-style: italic;
    font-weight: 400;
    color: var(--text-secondary);
    letter-spacing: 0.02em;
    margin-top: var(--space-xs);
}

.essay-hero-byline span {
    color: var(--accent-light);
    font-style: normal;
    letter-spacing: 0.06em;
}

.essay-hero-credit {
    font-family: var(--font-body);
    font-size: 0.78rem;
    font-weight: 400;
    color: var(--text-muted);
    letter-spacing: 0.04em;
    margin-top: 0.6rem;
    padding-left: 0.9rem;
    border-left: 1px solid var(--border-accent, rgba(212,160,73,0.35));
}

.essay-hero-credit em {
    font-style: italic;
    color: var(--accent-light);
}

/* Print-only masthead — hidden on screen, appears at top of PDF */
.print-masthead {
    display: none;
}


/* ============================================================
   ESSAY BODY
   ============================================================ */

.essay-body {
    max-width: var(--content-width);
    margin: 0 auto;
    padding: var(--space-xl) var(--space-lg) var(--space-lg);
    /* Full-bleed parchment background for reading comfort */
    background: var(--bg-light);
    color: var(--text-dark);
    box-shadow: 0 0 0 100vmax var(--bg-light);
    clip-path: inset(0 -100vmax);
    position: relative;
}

.essay-body + .essay-body {
    padding-top: var(--space-lg);
}

.essay-body p {
    margin-bottom: var(--space-md);
    font-family: var(--font-reading);
    font-size: 1.12rem;
    line-height: 1.7;
    color: var(--text-dark);
    font-feature-settings: 'onum' 1, 'liga' 1, 'dlig' 1, 'kern' 1;
}

.essay-body em { font-style: italic; }

.essay-lead {
    font-family: var(--font-archaic);
    font-size: 1.28rem;
    font-weight: 400;
    line-height: 1.65;
    color: var(--text-dark);
    font-feature-settings: 'onum' 1, 'liga' 1, 'dlig' 1;
    margin-bottom: var(--space-lg) !important;
}

.essay-separator {
    width: 32px;
    height: 1px;
    background: var(--border-accent);
    margin: var(--space-xl) 0;
}

.essay-heading {
    font-family: var(--font-display);
    font-size: 1.55rem;
    font-weight: 500;
    line-height: 1.3;
    color: var(--text-dark);
    margin-top: var(--space-xl);
    margin-bottom: var(--space-md);
    letter-spacing: -0.01em;
}

.essay-pullquote {
    margin: var(--space-xl) 0;
    padding: var(--space-lg) 0 var(--space-lg) var(--space-lg);
    border-left: 2px solid var(--accent-on-light);
    position: relative;
}

.essay-pullquote::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 200px;
    background: linear-gradient(to right, var(--accent-glow), transparent);
    pointer-events: none;
    opacity: 0.6;
}

.essay-pullquote p {
    font-family: var(--font-archaic);
    font-size: 1.4rem;
    font-weight: 400;
    font-style: italic;
    line-height: 1.6;
    color: var(--text-dark);
    font-feature-settings: 'onum' 1, 'liga' 1, 'dlig' 1;
    margin-bottom: 0 !important;
    position: relative;
}

.essay-fullbleed {
    margin: var(--space-xxl) 0;
    position: relative;
    overflow: hidden;
}

.essay-fullbleed-img {
    width: 100%;
    height: 55vh;
    min-height: 360px;
    max-height: 600px;
    object-fit: cover;
    object-position: center;
    filter: brightness(0.5) saturate(0.6);
}

.essay-fullbleed::before,
.essay-fullbleed::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    height: 120px;
    z-index: 1;
    pointer-events: none;
}

.essay-fullbleed::before {
    top: 0;
    background: linear-gradient(to bottom, var(--bg-deep), transparent);
}

.essay-fullbleed::after {
    bottom: 0;
    background: linear-gradient(to top, var(--bg-deep), transparent);
}

.essay-fullbleed-caption {
    position: relative;
    z-index: 2;
    max-width: var(--content-width);
    margin: 0 auto;
    padding: var(--space-md) var(--space-lg) 0;
    font-family: var(--font-display);
    font-size: 0.82rem;
    font-style: italic;
    line-height: 1.6;
    color: var(--text-muted);
}

.essay-closing {
    margin-top: var(--space-xl);
    font-family: var(--font-display);
    font-size: 1.1rem;
    line-height: 1.8;
    color: var(--text-dark-secondary);
}


/* ============================================================
   ESSAY FOOTER
   ============================================================ */

.essay-footer {
    border-top: 1px solid var(--border);
    padding: var(--space-xl) var(--space-lg);
}

.essay-footer-inner {
    max-width: var(--content-width);
    margin: 0 auto;
}

.essay-back-link {
    font-size: 0.85rem;
    color: var(--text-muted);
    transition:
        color 200ms var(--ease-snap),
        transform 140ms var(--ease-press);
    display: inline-block;
    margin-bottom: var(--space-xl);
}

@media (hover: hover) and (pointer: fine) {
    .essay-back-link:hover { color: var(--accent); }
}

.essay-back-link:active {
    transform: scale(0.97);
}

.references-title {
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 500;
    color: var(--text-secondary);
    margin-bottom: var(--space-md);
}

.references-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.references-list li {
    font-size: 0.82rem;
    line-height: 1.6;
    color: var(--text-muted);
    padding-left: var(--space-md);
    border-left: 1px solid var(--border);
}


/* ============================================================
   PROJEKT PAGE
   ============================================================ */

.projekt-hero {
    padding: calc(var(--space-xxl) + var(--space-xl)) var(--space-lg) var(--space-xl);
    display: flex;
    justify-content: center;
    border-bottom: 1px solid var(--border);
    position: relative;
    overflow: hidden;
}

.projekt-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(
        ellipse 50% 70% at 50% 30%,
        var(--accent-glow) 0%,
        transparent 70%
    );
    pointer-events: none;
}

.projekt-hero-inner {
    max-width: var(--content-width);
    text-align: center;
    position: relative;
    z-index: 1;
}

.projekt-title {
    font-family: var(--font-display);
    font-size: clamp(2.5rem, 6vw, 4.5rem);
    font-weight: 400;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--text-primary);
    padding-bottom: 0.08em;
}

/* Buntglas-Grundschicht auch in den Unterseiten-Headern (Projekt,
   Über). Gleiches Bild, gleiche Maske, gleiche Ausblendung wie auf der
   Startseite — nur zurückhaltender, weil diese Header deutlich flacher
   sind und die Fläche dadurch dichter wirkt. Kein Cursor-Fenster:
   Diese Header sind Bild, keine Interaktion. */
.page-hero-glass {
    /* Kleiner als auf der Startseite: Diese Header sind nur rund ein
       Drittel so hoch, ein 1100er Fenster würde sie komplett ausfüllen
       und der Lichtfleck wäre nicht mehr als solcher zu erkennen. */
    --glass-size: 640px;
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.page-hero-glass .stained-glass-base {
    opacity: 0.38;
}

/* Im Hochformat werden diese Header sehr hoch, die Maske drückt fast die
   ganze Fläche weg. Im Screen-Modus fallen zusätzlich die dunklen
   Bleistege heraus — hier braucht es also mehr, nicht weniger.
   Die Regel steht bewusst nach der Basisregel: Ein @media erhöht die
   Spezifität nicht, es zählt allein die Reihenfolge. */
@media (max-width: 640px) {
    /* Ein 640er Fenster wäre auf einem 375 px breiten Schirm breiter als
       der Header — der Lichtfleck wäre dann kein Fleck mehr. */
    .page-hero-glass {
        --glass-size: 400px;
    }

    /* Im Hochformat sind diese Header rund 780 px hoch statt 300 — die
       Prozentmarken des Querformat-Verlaufs decken dadurch ein Vielfaches
       an Fläche ab und löschen genau die Zonen, in denen die Maske Farbe
       zulässt. Also enger setzen. */
    .projekt-hero > .stained-glass-fade {
        background: linear-gradient(
            to bottom,
            rgba(10, 15, 13, 0.75) 0%,
            rgba(10, 15, 13, 0.2) 9%,
            rgba(10, 15, 13, 0) 20%,
            rgba(10, 15, 13, 0) 72%,
            rgba(10, 15, 13, 0.25) 88%,
            rgba(10, 15, 13, 0.85) 97%,
            var(--bg-deep) 100%
        );
    }

    /* Im Hochformat bleibt kaum freie Fläche: Titel und Porträt füllen den
       Header. Eine Ellipsen-Maske träfe hier nur noch schmale Randstreifen —
       deshalb gleichmäßig und dafür schwächer. Im Screen-Modus verschwinden
       die dunklen Bleistege ohnehin, es bleibt ein ruhiges Farbleuchten. */
    .page-hero-glass .stained-glass-base {
        opacity: 0.44;
        -webkit-mask-image: none;
        mask-image: none;
    }
}

/* Flacher Header: Der Verlauf braucht andere Marken als über die volle
   Bildschirmhöhe — oben früher frei, unten früher zu. */
.projekt-hero > .stained-glass-fade {
    z-index: 0;
    background: linear-gradient(
        to bottom,
        rgba(10, 15, 13, 0.72) 0%,
        rgba(10, 15, 13, 0.15) 20%,
        rgba(10, 15, 13, 0) 42%,
        rgba(10, 15, 13, 0) 62%,
        rgba(10, 15, 13, 0.3) 84%,
        rgba(10, 15, 13, 0.85) 96%,
        var(--bg-deep) 100%
    );
}


/* ============================================================
   ÜBER PAGE — portrait + bio hero
   ============================================================ */

.ueber-hero {
    padding: calc(var(--space-xxl) + var(--space-xl)) var(--space-lg) var(--space-xl);
}

.ueber-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: clamp(1.5rem, 5vw, 4rem);
    align-items: center;
    max-width: var(--content-width);
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

.ueber-portrait {
    margin: 0;
    position: relative;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    border-radius: 3px;
    box-shadow:
        0 30px 60px -20px rgba(0, 0, 0, 0.55),
        0 12px 24px -8px rgba(0, 0, 0, 0.35),
        inset 0 0 0 1px rgba(212, 160, 73, 0.15);
    transform: perspective(1200px) rotateY(-2deg);
    transition: transform 600ms var(--ease-out), box-shadow 600ms var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
    .ueber-portrait:hover {
        transform: perspective(1200px) rotateY(0deg) translateY(-2px);
        box-shadow:
            0 40px 80px -24px rgba(0, 0, 0, 0.6),
            0 16px 32px -10px rgba(0, 0, 0, 0.4),
            inset 0 0 0 1px rgba(212, 160, 73, 0.25);
    }
}

.ueber-portrait-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 25%;
    display: block;
    filter: contrast(1.02) saturate(0.95);
}

.ueber-portrait::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(160deg, rgba(255, 230, 180, 0.08), transparent 40%, rgba(0, 0, 0, 0.25));
    mix-blend-mode: overlay;
}

.ueber-hero-text {
    text-align: left;
}

.ueber-hero-text .section-kicker {
    margin-bottom: var(--space-sm);
}

.ueber-hero-text .projekt-title {
    text-align: left;
}

.ueber-tagline {
    font-family: var(--font-display);
    font-size: clamp(1rem, 2vw, 1.2rem);
    font-weight: 400;
    font-style: italic;
    line-height: 1.55;
    color: var(--text-secondary);
    margin-top: var(--space-md);
    max-width: 36ch;
}

.ueber-response-hint {
    font-family: var(--font-body);
    font-size: 0.82rem;
    color: var(--text-dark-muted);
    letter-spacing: 0.04em;
    margin-top: var(--space-xs);
    font-style: italic;
}

@media (max-width: 720px) {
    .ueber-hero-grid {
        grid-template-columns: 1fr;
        text-align: center;
    }
    .ueber-portrait {
        max-width: 320px;
        margin: 0 auto;
        transform: none;
    }
    .ueber-portrait:hover {
        transform: translateY(-2px);
    }
    .ueber-hero-text,
    .ueber-hero-text .projekt-title {
        text-align: center;
    }
    .ueber-tagline {
        margin-left: auto;
        margin-right: auto;
    }
}

.projekt-body {
    max-width: var(--content-width);
    margin: 0 auto;
    padding: var(--space-xl) var(--space-lg) var(--space-xxl);
    /* Full-bleed parchment background for reading comfort */
    background: var(--bg-light);
    color: var(--text-dark);
    box-shadow: 0 0 0 100vmax var(--bg-light);
    clip-path: inset(0 -100vmax);
    position: relative;
}

.projekt-section {
    margin-bottom: var(--space-xxl);
}

.projekt-section:last-child {
    margin-bottom: 0;
}

.projekt-heading {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 500;
    line-height: 1.3;
    color: var(--text-dark);
    margin-bottom: var(--space-md);
    padding-bottom: var(--space-sm);
    border-bottom: 1px solid var(--border-light);
    letter-spacing: -0.01em;
}

.projekt-section p {
    font-family: var(--font-reading);
    font-size: 1.12rem;
    line-height: 1.7;
    color: var(--text-dark);
    margin-bottom: var(--space-md);
    font-feature-settings: 'onum' 1, 'liga' 1, 'kern' 1;
}

.projekt-section p em { font-style: italic; }
.projekt-section p strong { font-weight: 500; color: var(--text-dark); }

.projekt-list li {
    color: var(--text-dark);
}

/* Portrait in der Projekt-Seite, ruhig und zentriert */
.projekt-portrait {
    margin: clamp(3rem, 8vw, 5.5rem) auto;
    max-width: 100%;
    overflow: hidden;
    border-radius: 2px;
    box-shadow:
        0 40px 80px -30px rgba(26, 22, 18, 0.45),
        0 16px 32px -12px rgba(26, 22, 18, 0.25),
        inset 0 0 0 1px rgba(26, 22, 18, 0.08);
}

.projekt-portrait img {
    width: 100%;
    height: auto;
    display: block;
    filter: contrast(1.02) saturate(0.97);
}

@media (min-width: 720px) {
    .projekt-portrait {
        max-width: 560px;
    }
}

.projekt-list li strong {
    color: var(--text-dark);
}

.projekt-list {
    list-style: none;
    margin: var(--space-md) 0;
    padding: var(--space-md) 0 var(--space-md) var(--space-lg);
    border-left: 1px solid var(--border-accent);
}

.projekt-list li {
    font-family: var(--font-reading);
    font-size: 1.05rem;
    line-height: 1.7;
    color: var(--text-dark-secondary);
    margin-bottom: var(--space-sm);
    font-feature-settings: 'onum' 1, 'liga' 1, 'kern' 1;
}

.projekt-list li:last-child { margin-bottom: 0; }


/* ============================================================
   LEGAL PAGES (Impressum, Datenschutz)
   Reuse .projekt-body / .projekt-section for content.
   Own hero style: minimal, no radial glow.
   ============================================================ */

.legal-hero {
    padding: calc(var(--space-xxl) + var(--space-xl)) var(--space-lg) var(--space-xl);
    display: flex;
    justify-content: center;
    border-bottom: 1px solid var(--border);
}

.legal-hero-inner {
    max-width: var(--content-width);
    text-align: center;
}

.legal-title {
    font-family: var(--font-display);
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: 400;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--text-primary);
    opacity: 0;
    animation: fadeUp 1.2s var(--ease-out) 0.2s forwards;
}

.legal-link {
    color: var(--accent-on-light);
    border-bottom: 1px solid rgba(138, 101, 8, 0.3);
    padding-bottom: 1px;
    transition:
        color 200ms var(--ease-snap),
        border-color 200ms var(--ease-snap);
}

@media (hover: hover) and (pointer: fine) {
    .legal-link:hover {
        color: var(--text-dark);
        border-bottom-color: var(--text-dark);
    }
}

@media (max-width: 640px) {
    .legal-hero {
        padding: calc(var(--space-xl) + var(--space-lg)) var(--space-md) var(--space-lg);
    }
}


/* ============================================================
   SITE FOOTER
   ============================================================ */

/* Schmale Fußzeile: nur Rechtehinweis und die beiden Pflichtseiten.
   Logo, Untertitel und Kontakthinweis sind bewusst raus — sie haben
   unverhältnismäßig viel Höhe gekostet. */
.site-footer {
    border-top: 1px solid var(--border);
    padding: var(--space-md) var(--space-lg);
    margin-top: var(--space-xl);
}

.footer-bottom-inner {
    max-width: var(--max-width);
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-xs) var(--space-md);
}

.footer-bottom-inner p {
    font-size: 0.72rem;
    color: var(--text-muted);
    letter-spacing: 0.04em;
}

.footer-legal-links {
    display: flex;
    gap: var(--space-md);
}

.footer-legal-links a {
    font-size: 0.72rem;
    color: var(--text-muted);
    letter-spacing: 0.04em;
    transition: color 200ms var(--ease-snap);
}

@media (hover: hover) and (pointer: fine) {
    .footer-legal-links a:hover {
        color: var(--accent);
    }
}


/* ============================================================
   STAINED GLASS TEXT — reusable on all large headings
   ============================================================ */

/* Stained glass text — saturated multi-color gradient, fully legible, no dark gaps */
.glass-text {
    background-image: linear-gradient(
        100deg,
        #f0c64a 0%,
        #e08a2e 14%,
        #c94a2c 28%,
        #a03050 42%,
        #6a3a9a 56%,
        #2f66a8 72%,
        #3a9ab2 86%,
        #4fae5a 100%
    );
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    filter: saturate(1.15);
    animation: glassFlicker 6s ease-in-out infinite;
}

@keyframes glassFlicker {
    0%   { filter: saturate(1.15) brightness(1); }
    50%  { filter: saturate(1.3)  brightness(1.08); }
    100% { filter: saturate(1.15) brightness(1); }
}

/* On light/parchment backgrounds — deeper, more saturated stops for contrast on cream */
.glass-text--light {
    background-image: linear-gradient(
        100deg,
        #c48a1a 0%,
        #b55a1e 14%,
        #982a1e 28%,
        #6e1a3a 42%,
        #3a1a6a 56%,
        #1a3a88 72%,
        #1a6a88 86%,
        #2a6a2a 100%
    );
    filter: saturate(1.2);
    animation: glassFlickerLight 6s ease-in-out infinite;
}

@keyframes glassFlickerLight {
    0%   { filter: saturate(1.2)  brightness(1); }
    50%  { filter: saturate(1.35) brightness(1.05); }
    100% { filter: saturate(1.2)  brightness(1); }
}

/* Flackern nur bei sichtbaren Überschriften. Die Filter-Animation
   zeichnet den Verlaufstext in jedem Frame neu — sechsmal parallel
   im Hintergrund ist das auf schwachen Geräten der halbe Main-Thread. */
.glass-text.is-offscreen {
    animation-play-state: paused;
}


/* ============================================================
   RENAISSANCE TYPOGRAPHY — only on display headings
   ============================================================ */

/* Old-style numerals on dates */
.essay-card-date,
.exkurse-date,
.perspective-number {
    font-feature-settings: 'onum' 1, 'pnum' 1;
}


/* ============================================================
   ESSAY SUBTITLE LINE
   ============================================================ */

.essay-subtitle-line {
    font-family: var(--font-display);
    font-size: 1.2rem;
    font-style: italic;
    font-weight: 400;
    color: var(--text-dark-secondary);
    text-align: center;
    margin-bottom: var(--space-xl);
    letter-spacing: 0.01em;
}


/* ============================================================
   ESSAY DOWNLOAD — PDF button
   ============================================================ */

.essay-download {
    max-width: var(--content-width);
    margin: var(--space-xl) auto;
    padding: 0 var(--space-lg);
    text-align: center;
}

.essay-download-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    font-family: var(--font-display);
    font-size: 0.9rem;
    font-weight: 400;
    letter-spacing: 0.06em;
    color: var(--accent);
    padding: var(--space-sm) var(--space-lg);
    border: 1px solid var(--border-accent);
    border-radius: 2px;
    transition:
        background 200ms var(--ease-snap),
        color 200ms var(--ease-snap),
        border-color 200ms var(--ease-snap),
        transform 140ms var(--ease-press);
}

.essay-download-link:active {
    transform: scale(0.97);
}

.essay-download-link:hover {
    background: var(--accent-dim);
    color: var(--accent-light);
    border-color: var(--accent-light);
}

.essay-download-icon {
    font-size: 1.1rem;
}


/* ============================================================
   PRINT STYLES — Clean PDF output
   ============================================================ */

@media print {
    /* Hide navigation, footer, download button, effects */
    .site-nav,
    .site-footer,
    .essay-footer,
    .essay-download,
    .essay-hero-tags,
    .skip-link,
    .hero-grain,
    .hero-stained-glass,
    .hero-cursor-light,
    .scroll-marquee {
        display: none !important;
    }

    body {
        background: white;
        color: #1a1612;
        font-size: 11pt;
        line-height: 1.6;
    }

    /* Masthead — logo + project wordmark at the very top of the PDF */
    .print-masthead {
        display: flex !important;
        align-items: center;
        gap: 0.6cm;
        padding: 0 2cm 0.5cm;
        margin: 0 0 0.8cm;
        border-bottom: 0.5pt solid #8a7348;
        font-family: 'Cormorant Garamond', 'Cormorant', Georgia, serif;
        color: #5a4a30;
    }

    .print-masthead-logo {
        height: 1.6cm;
        width: auto;
        display: block;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .print-masthead-project {
        font-size: 10pt;
        font-style: italic;
        letter-spacing: 0.04em;
        white-space: nowrap;
        flex: 1;
    }

    .print-masthead-url {
        font-size: 9pt;
        letter-spacing: 0.18em;
        text-transform: uppercase;
        color: #8a7348;
        white-space: nowrap;
    }

    /* Essay hero — keep cover image in the PDF */
    .essay-hero {
        background: none;
        min-height: auto;
        padding: 0.5cm 2cm 1cm;
        display: block;
        position: relative;
        overflow: visible;
        page-break-after: avoid;
    }

    .essay-hero-image {
        position: relative;
        inset: auto;
        width: 100%;
        height: 7cm;
        margin-bottom: 0.8cm;
        overflow: hidden;
    }

    .essay-hero-img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
        filter: none;
        opacity: 1 !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .essay-hero-overlay { display: none; }

    .essay-hero-content {
        position: static;
        padding: 0;
    }

    .essay-hero-title {
        color: #1a1612;
        font-size: 26pt;
        line-height: 1.15;
        text-shadow: none;
        animation: none;
        opacity: 1;
        background: none !important;
        -webkit-text-fill-color: #1a1612 !important;
        -webkit-background-clip: border-box !important;
        margin-bottom: 0.3cm;
    }

    .essay-hero-meta {
        color: #6b5b3a;
        font-size: 9.5pt;
        letter-spacing: 0.06em;
    }

    .essay-hero-byline {
        color: #1a1612;
        font-size: 11pt;
        font-style: italic;
        margin-top: 0.2cm;
    }

    .essay-hero-byline span {
        color: #5a3a1a;
        font-style: normal;
        letter-spacing: 0.06em;
    }

    .essay-hero-credit {
        font-size: 9pt;
        color: #6b5b3a;
        margin-top: 0.3cm;
        padding-left: 0.3cm;
        border-left: 0.5pt solid #8a7348;
    }

    .essay-hero-credit em {
        font-style: italic;
        color: #5a3a1a;
    }

    .essay-subtitle-line {
        color: #4a4540;
    }

    .essay-body {
        max-width: none;
        padding: 0 2cm;
    }

    .essay-body p {
        color: #1a1612;
        font-size: 11pt;
        orphans: 3;
        widows: 3;
    }

    .essay-pullquote {
        border-left-color: #1a1612;
        page-break-inside: avoid;
    }

    .essay-pullquote p {
        color: #1a1612;
    }

    .essay-separator::before {
        color: #6b6760;
    }

    .essay-closing {
        page-break-before: avoid;
    }

    /* Page margins and running footer with attribution */
    @page {
        margin: 2cm 0 2cm 0;
        @bottom-center {
            content: 'Hexenwerk · Mika Schöberl · mikaschoeberl.com';
            font-family: 'Cormorant Garamond', Georgia, serif;
            font-style: italic;
            font-size: 9pt;
            color: #8a7348;
        }
        @bottom-right {
            content: counter(page);
            font-family: 'Cormorant Garamond', Georgia, serif;
            font-size: 9pt;
            color: #8a7348;
        }
    }

    @page :first {
        margin-top: 1.2cm;
        @bottom-right {
            content: counter(page);
        }
    }
}


/* ============================================================
   DARK ACADEMIA — Renaissance-inflected details
   ============================================================ */

/* --- Drop Cap on essay lead paragraphs --- */
.essay-lead::first-letter {
    font-family: var(--font-archaic);
    font-size: 4.6em;
    float: left;
    line-height: 0.78;
    margin-right: 0.1em;
    margin-top: 0.05em;
    color: var(--accent-on-light);
    font-weight: 500;
}

/* --- Ornamental separators (replacing plain lines) --- */
.essay-separator {
    width: auto;
    height: auto;
    background: none;
    text-align: center;
    margin: var(--space-xl) 0;
    font-family: var(--font-display);
    font-size: 1.4rem;
    color: var(--accent);
    letter-spacing: 0.4em;
    opacity: 0.5;
}

.essay-separator::before {
    content: '— ✦ —';
}

/* --- Section header ornamental flourish --- */
.section-header::after {
    content: '⸻';
    display: block;
    font-family: var(--font-display);
    font-size: 1.2rem;
    color: var(--accent);
    opacity: 0.3;
    margin-top: var(--space-md);
    letter-spacing: 0.5em;
}

/* --- Pullquote — Renaissance feel --- */
.essay-pullquote {
    border-left: 2px solid var(--burgundy);
}

.essay-pullquote::before {
    background: linear-gradient(to right, var(--burgundy-dim), transparent);
}

.essay-pullquote p {
    font-weight: 300;
    letter-spacing: 0.01em;
}

/* --- Hero title — lighter weight for Cormorant elegance --- */
.hero-title {
    font-weight: 300;
    letter-spacing: -0.01em;
}

/* Nav logo — image-based wordmark; text styles kept as fallback */

/* --- Section titles — thinner, taller --- */
.section-title {
    font-weight: 300;
    letter-spacing: -0.02em;
}

/* --- Essay card titles --- */
.essay-card-title {
    font-weight: 400;
    letter-spacing: 0.01em;
}

/* --- Focus section title --- */
.focus-title {
    font-weight: 300;
}

/* --- Projekt headings — Cormorant style --- */
.projekt-heading {
    font-weight: 400;
    letter-spacing: 0.02em;
}

.projekt-title {
    font-weight: 300;
}

/* --- Essay headings — refined --- */
.essay-heading {
    font-weight: 400;
    letter-spacing: 0.01em;
}

/* --- Hero essay title --- */
.essay-hero-title {
    font-weight: 300;
}

/* --- Tags — slightly more refined --- */
.essay-card-tag,
.essay-hero-tag,
.exkurse-tag {
    font-family: var(--font-display);
    font-weight: 500;
    font-style: italic;
    text-transform: none;
    letter-spacing: 0.04em;
    font-size: 0.72rem;
}

/* --- Kicker overlines — more calligraphic --- */
.section-kicker,
.hero-overline,
.intro-overline {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 400;
    letter-spacing: 0.15em;
    font-size: 0.75rem;
}

/* --- Archiv placeholder — parchment glow --- */
.archiv-preview {
    background:
        radial-gradient(
            ellipse at center,
            var(--parchment-dim) 0%,
            transparent 70%
        );
}

/* --- Light section overrides for headers and content --- */
.exkurse-section .section-header {
    border-bottom-color: var(--border-light);
}

.exkurse-section .section-kicker {
    color: var(--accent-on-light);
}

.exkurse-section .section-title {
    color: var(--text-dark);
}

.exkurse-section .section-claim {
    color: var(--accent-on-light);
}

.exkurse-section .section-description {
    color: var(--text-dark-secondary);
}

/* Sticky header on light background */
.exkurse-section > .section-header {
    background: var(--bg-light);
}

/* Section number on light bg */
.exkurse-section .section-number-deco {
    color: var(--text-dark);
    opacity: 0.04;
}

/* Section header ornament on light bg */
.exkurse-section .section-header::after {
    color: var(--accent-on-light);
}


/* ============================================================
   ANIMATIONS
   ============================================================ */

@keyframes fadeUp {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: translateY(0); }
}

.reveal {
    opacity: 0;
    transform: translateY(24px);
    transition:
        opacity var(--dur-reveal) var(--ease-out),
        transform var(--dur-reveal) var(--ease-out);
    will-change: opacity, transform;
}

.reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Dynamic staggering is now handled by JS via transition-delay,
   which observes sibling order and applies capped delays.
   This allows sections to stagger without hard-coded CSS rules. */


/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 900px) {
    html { font-size: 17px; }

    .perspectives-list {
        grid-template-columns: repeat(2, 1fr);
    }

    .exkurse-list {
        grid-template-columns: 1fr;
    }

    .essay-card {
        grid-template-columns: 1fr;
        gap: var(--space-md);
    }

    .essay-card-image { aspect-ratio: 16 / 9; }

    .essay-fullbleed-img {
        height: 45vh;
        min-height: 280px;
    }
}

@media (max-width: 640px) {
    html { font-size: 16px; }

    .site-nav { padding: var(--space-sm) var(--space-md); }
    .site-nav.is-scrolled { padding-top: 0.6rem; padding-bottom: 0.6rem; }

    .nav-links { gap: var(--space-sm); }
    .nav-links a { font-size: 0.7rem; letter-spacing: 0.05em; }

    .hero { min-height: 92vh; }
    .hero-inner { padding: 0 var(--space-md); }
    .hero-title { font-size: clamp(2.5rem, 13vw, 5rem); }

    .intro-section,
    .perspectives-section,
    .essays-section,
    .exkurse-section,
    .archiv-section,
    .focus-section {
        padding-left: var(--space-md);
        padding-right: var(--space-md);
    }

    .perspectives-list {
        grid-template-columns: 1fr;
    }

    .essay-hero-content { padding: var(--space-xl) var(--space-md) var(--space-lg); }
    .essay-hero { min-height: 55vh; }
    .essay-hero-title { font-size: clamp(1.75rem, 7vw, 2.5rem); }

    .essay-body {
        padding-left: var(--space-md);
        padding-right: var(--space-md);
    }

    .essay-pullquote { padding-left: var(--space-md); }

    .essay-fullbleed-img { height: 35vh; min-height: 220px; }
    .essay-fullbleed-caption {
        padding-left: var(--space-md);
        padding-right: var(--space-md);
    }

    .projekt-hero {
        padding: calc(var(--space-xl) + var(--space-lg)) var(--space-md) var(--space-lg);
    }
    .projekt-body {
        padding: var(--space-lg) var(--space-md) var(--space-xl);
    }

    /* Auf schmalen Bildschirmen bricht die Fußzeile um — dann mittig */
    .footer-bottom-inner {
        justify-content: center;
        text-align: center;
    }
}

@media (max-width: 400px) {
    .hero-scroll-hint { display: none; }
}


/* ============================================================
   SKIP LINK – Accessibility
   ============================================================ */

.skip-link {
    position: fixed;
    top: -100%;
    left: var(--space-md);
    z-index: 200;
    padding: var(--space-xs) var(--space-md);
    background: var(--accent);
    color: var(--bg-deep);
    font-family: var(--font-body);
    font-size: 0.82rem;
    font-weight: 500;
    border-radius: 0 0 4px 4px;
    transition: top 0.2s ease;
}

.skip-link:focus {
    top: 0;
}


/* ============================================================
   FOCUS STYLES – Accessibility
   ============================================================ */

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

/* Remove default outline for mouse users */
:focus:not(:focus-visible) {
    outline: none;
}


/* ============================================================
   MOBILE NAVIGATION – Hamburger Toggle
   ============================================================ */

.nav-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.5rem;
    z-index: 101;
    flex-direction: column;
    gap: 5px;
    transition: transform 140ms var(--ease-press);
}

.nav-toggle:active {
    transform: scale(0.92);
}

.nav-toggle-bar {
    display: block;
    width: 22px;
    height: 1.5px;
    background: var(--text-secondary);
    transition:
        transform 240ms var(--ease-snap),
        opacity 200ms var(--ease-snap);
}

/* Hamburger → X transformation */
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2) {
    opacity: 0;
}

.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

@media (max-width: 640px) {
    .nav-toggle {
        display: flex;
    }

    .nav-links {
        position: fixed;
        top: 0;
        right: 0;
        width: min(280px, 80vw);
        height: 100vh;
        background: rgba(10, 15, 13, 0.97);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        flex-direction: column;
        padding: calc(var(--space-xxl) + var(--space-lg)) var(--space-lg) var(--space-lg);
        gap: var(--space-md);
        transform: translateX(100%);
        transition: transform 0.4s var(--ease-out);
        z-index: 100;
    }

    .nav-links.is-open {
        transform: translateX(0);
    }

    .nav-links a {
        font-size: 0.85rem;
        letter-spacing: 0.1em;
        color: var(--text-secondary);
        padding: var(--space-xs) 0;
        border-bottom: 1px solid var(--border);
    }
}


/* ============================================================
   ESSAY CARD – Upcoming (no link) variant
   ============================================================ */

.essay-card--upcoming {
    cursor: default;
    opacity: 0.7;
}

@media (hover: hover) and (pointer: fine) {
    .essay-card--upcoming:hover {
        background-color: transparent;
    }

    .essay-card--upcoming:hover .essay-card-img {
        filter: brightness(0.75) saturate(0.7);
        transform: none;
    }

    .essay-card--upcoming:hover .essay-card-title {
        color: var(--text-primary);
    }
}

.essay-card--upcoming:active {
    transform: none;
}


/* ============================================================
   MOTIFS SECTION – Index page (hidden until enough content)
   ============================================================ */

.motifs-section {
    padding: var(--space-xl) var(--space-lg);
    max-width: var(--wide-width);
    margin: 0 auto;
    border-top: 1px solid var(--border);
}

.motifs-inner {
    display: block;
}

.motifs-heading {
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 400;
    line-height: 1.3;
    color: var(--text-primary);
    margin-bottom: var(--space-md);
}

.motifs-intro {
    font-size: 0.95rem;
    line-height: 1.7;
    color: var(--text-secondary);
    max-width: 560px;
    margin-bottom: var(--space-lg);
}

.motifs-cloud {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
}

.motifs-cloud li a {
    display: inline-block;
    font-family: var(--font-display);
    font-size: 0.95rem;
    font-style: italic;
    color: var(--text-primary);
    padding: var(--space-xs) var(--space-md);
    border: 1px solid var(--border);
    border-radius: 2px;
    transition:
        border-color 200ms var(--ease-snap),
        color 200ms var(--ease-snap),
        transform 140ms var(--ease-press);
}

@media (hover: hover) and (pointer: fine) {
    .motifs-cloud li a:hover {
        border-color: var(--accent);
        color: var(--accent-light);
    }
}

.motifs-cloud li a:active {
    transform: scale(0.97);
}

.motif-count {
    font-style: normal;
    font-size: 0.75rem;
    color: var(--text-muted);
}


/* ============================================================
   ESSAY MOTIFS – Footer section (hidden until activated)
   ============================================================ */

.essay-motifs {
    display: none;
    margin-top: var(--space-xl);
    padding-top: var(--space-lg);
    border-top: 1px solid var(--border);
}

.essay-motifs.is-active {
    display: block;
}

.essay-motifs .motifs-title {
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 500;
    color: var(--text-secondary);
    margin-bottom: var(--space-md);
}

.essay-motifs .motifs-list {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
}

.essay-motifs .motif-link {
    display: inline-block;
    font-size: 0.82rem;
    color: var(--text-muted);
    padding: 0.25rem 0.7rem;
    border: 1px solid var(--border);
    border-radius: 2px;
    transition:
        border-color 200ms var(--ease-snap),
        color 200ms var(--ease-snap),
        transform 140ms var(--ease-press);
}

@media (hover: hover) and (pointer: fine) {
    .essay-motifs .motif-link:hover {
        border-color: var(--accent);
        color: var(--accent-light);
    }
}

.essay-motifs .motif-link:active {
    transform: scale(0.97);
}


/* ============================================================
   MOTION REFINEMENTS (v2)
   Cursor-follow light, image-loading fade, reduced-motion
   ============================================================ */

/* Cursor-follow light — desktop hero only, injected via JS.
   Sits between grain (z:2) and hero content (z:3).
   Fest große Fläche mit unveränderlichem Verlauf, bewegt per
   transform. Vorher baute das Skript in jedem Frame einen neuen,
   bildschirmfüllenden Radial-Gradient — zusammen mit dem
   mix-blend-mode ergab das eine komplette Neuberechnung des Hero
   bei jeder Mausbewegung. */
.hero-cursor-light {
    --light-size: 1100px;
    position: absolute;
    top: 0;
    left: 0;
    width: var(--light-size);
    height: var(--light-size);
    margin-left: calc(var(--light-size) / -2);
    margin-top: calc(var(--light-size) / -2);
    transform: translate3d(50vw, 50vh, 0);
    z-index: 2;
    pointer-events: none;
    opacity: 0;
    transition: opacity 800ms var(--ease-out);
    /* Kein mix-blend-mode: Screen hätte den Hintergrund unter dieser
       Fläche in jedem Frame neu einlesen und verrechnen müssen. Bei
       Deckkräften um 0.07 über fast schwarzem Grund ist das Ergebnis von
       normalem Überlagern praktisch nicht zu unterscheiden — es kostet
       nur. */
    background: radial-gradient(
        circle closest-side at 50% 50%,
        rgba(212, 160, 49, 0.075) 0%,
        rgba(180, 120, 60, 0.04) 30%,
        rgba(140, 80, 40, 0.02) 50%,
        transparent 70%
    );
    will-change: transform;
}

/* Progressive image loading — fade in when decoded */
.hero-bg-img,
.essay-hero-img,
.essay-fullbleed-img {
    opacity: 0;
    transition: opacity 1200ms var(--ease-out);
}

.hero-bg-img.is-loaded,
.essay-hero-img.is-loaded,
.essay-fullbleed-img.is-loaded {
    opacity: 1;
}

/* Full-bleed images get JS-controlled transform for breathing.
   Override the static scale to let JS manage it. */
.essay-fullbleed-img {
    will-change: transform;
}

/* Nav transition refinement — smoother background shift */
.site-nav {
    transition:
        background-color var(--dur-standard) var(--ease-smooth),
        padding-top var(--dur-standard) var(--ease-smooth),
        padding-bottom var(--dur-standard) var(--ease-smooth),
        backdrop-filter var(--dur-standard) var(--ease-smooth);
}

/* Hero inner — JS controls opacity/transform directly,
   but ensure smooth transition when entering */
.hero-inner {
    will-change: opacity, transform;
}

/* Hero overlay — JS adjusts opacity, transition for smoothness */
.hero-overlay {
    transition: opacity var(--dur-standard) var(--ease-out);
}


/* ============================================================
   WORD-SCRUB — scroll-driven word-by-word illumination
   Auf der Projekt-Seite: Wörter starten gedimmt, leuchten beim
   Hochscrollen sequenziell auf und fallen wieder zurück.
   JS schreibt opacity per inline-style, dieses CSS setzt nur
   den Default und sorgt für Layout-Verhalten.
   ============================================================ */
.word-scrub {
    display: inline-block;
    opacity: 0.18;
}

@media (prefers-reduced-motion: reduce) {
    .word-scrub {
        opacity: 1 !important;
    }
}


/* ============================================================
   REDUCED MOTION — Respect user preference
   All motion becomes instant or minimal.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    /* Keep elements visible even without animation */
    .reveal {
        opacity: 1;
        transform: none;
    }

    .hero-overline,
    .hero-title,
    .hero-subtitle,
    .hero-line,
    .hero-scroll-hint,
    .essay-hero-content,
    .projekt-title {
        opacity: 1 !important;
        transform: none !important;
        animation: none !important;
    }

    /* Kill infinite animations */
    .hero-scroll-line {
        animation: none !important;
        opacity: 0.5 !important;
    }
}


/* ============================================================
   INTRO OVERLAY — art-house Eingangssequenz (30s)
   ============================================================ */

.intro-overlay {
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: #f0ebe4;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: clamp(1.5rem, 4vh, 3.5rem);
    overflow: hidden;
    isolation: isolate;
}

.intro-overlay[data-state="hidden"] {
    opacity: 0;
    pointer-events: none;
    transition: opacity 1.4s var(--ease-out);
}

body.intro-active {
    overflow: hidden;
}

/* Buntglas-Hintergrund: langsamer Zoom + subtile Rotation */
.intro-stainedglass {
    position: absolute;
    inset: -10%;
    z-index: 0;
    opacity: 0;
    transition: opacity 3s var(--ease-out);
    animation: intro-glass-drift 42s linear infinite;
}

.intro-overlay[data-state="active"] .intro-stainedglass {
    opacity: 0.3;
}

/* <picture> ist ein Inline-Element ohne eigene Masse — das Bild
   darin braucht einen Block-Container in voller Groesse. */
.intro-stainedglass picture {
    display: block;
    width: 100%;
    height: 100%;
}

.intro-stainedglass img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: blur(16px) brightness(1.05) saturate(1.3);
    mix-blend-mode: multiply;
}

@keyframes intro-glass-drift {
    0%   { transform: scale(1.05) rotate(0deg); }
    50%  { transform: scale(1.12) rotate(1.5deg); }
    100% { transform: scale(1.05) rotate(0deg); }
}

/* Logo-Bild — im Flex-Stack zentriert, weich ein- und ausfadend */
.intro-logo {
    position: relative;
    z-index: 2;
    display: block;
    flex-shrink: 0;
    width: min(82vw, 560px);
    max-height: 52vh;
    object-fit: contain;
    opacity: 0;
    transform: scale(0.94);
    transition: opacity 5s var(--ease-out), transform 7s var(--ease-out);
    filter: drop-shadow(0 0 40px rgba(0, 0, 0, 0.15));
}

@media (min-width: 900px) {
    .intro-logo {
        max-height: 48vh;
        width: min(48vh, 480px);
    }
}

.intro-overlay[data-logo-in] .intro-logo {
    opacity: 1;
    transform: scale(1);
}

.intro-overlay[data-logo-out] .intro-logo {
    opacity: 0;
    transform: scale(1.04);
    transition: opacity 3.5s var(--ease-out), transform 4s var(--ease-out);
}

/* Prozent-Anzeige */
.intro-loading {
    position: absolute;
    z-index: 3;
    bottom: clamp(2rem, 6vh, 4rem);
    left: 50%;
    transform: translateX(-50%);
    font-family: var(--font-smallcaps);
    font-size: clamp(0.8rem, 1.8vw, 1.05rem);
    letter-spacing: 0.35em;
    color: rgba(26, 22, 18, 0.55);
    opacity: 0;
    transition: opacity 1.2s var(--ease-out);
}

.intro-overlay[data-state="active"] .intro-loading {
    opacity: 1;
}

.intro-loading-num {
    font-variant-numeric: tabular-nums;
    min-width: 3ch;
    display: inline-block;
    text-align: right;
}

/* Willkommens-Typographie — im Flex-Stack unter dem Logo */
.intro-welcome {
    position: relative;
    z-index: 3;
    flex-shrink: 0;
    text-align: center;
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity 1.4s var(--ease-out), transform 1.4s var(--ease-out);
    max-width: 92vw;
}

.intro-overlay[data-welcome-in] .intro-welcome {
    opacity: 1;
    transform: translateY(0);
}

.intro-welcome .intro-kicker {
    font-family: var(--font-smallcaps);
    font-size: clamp(0.72rem, 1.6vw, 0.95rem);
    letter-spacing: 0.4em;
    text-transform: uppercase;
    color: var(--accent-on-light);
    font-feature-settings: 'smcp' 1, 'onum' 1;
    margin-bottom: 0.5rem;
}

.intro-welcome .intro-title {
    font-family: var(--font-hero);
    font-size: clamp(3rem, 10vw, 7rem);
    font-weight: 400;
    letter-spacing: -0.02em;
    line-height: 1.05;
    color: transparent;
    background-image: linear-gradient(
        100deg,
        #f0c64a 0%,
        #e08a2e 14%,
        #c94a2c 28%,
        #a03050 42%,
        #6a3a9a 56%,
        #2f66a8 72%,
        #3a9ab2 86%,
        #4fae5a 100%
    );
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: saturate(1.2);
    animation: none;
}

/* Eintreten-Button — garantiert Audio-Autoplay via User-Gesture */
.intro-enter {
    position: absolute;
    z-index: 5;
    bottom: clamp(4.5rem, 12vh, 7rem);
    left: 50%;
    transform: translateX(-50%);
    font-family: var(--font-smallcaps);
    font-size: clamp(0.9rem, 2vw, 1.1rem);
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--accent-on-light);
    background: transparent;
    border: 1px solid var(--accent-on-light);
    padding: 0.9rem 2.4rem;
    cursor: pointer;
    transition: background 0.4s var(--ease-out), color 0.4s var(--ease-out), opacity 0.6s var(--ease-out);
    font-feature-settings: 'smcp' 1;
}

@media (hover: hover) and (pointer: fine) {
    .intro-enter:hover {
        background: var(--accent-on-light);
        color: var(--bg-light);
    }
}

.intro-enter:active {
    transform: translateX(-50%) scale(0.97);
    transition:
        background 200ms var(--ease-snap),
        color 200ms var(--ease-snap),
        transform 120ms var(--ease-press);
}

.intro-overlay[data-started] .intro-enter {
    opacity: 0;
    pointer-events: none;
}

/* Skip-Button */
.intro-skip {
    position: absolute;
    z-index: 4;
    bottom: clamp(1.5rem, 4vh, 2.5rem);
    right: clamp(1.5rem, 4vw, 3rem);
    font-family: var(--font-body);
    font-size: 0.82rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: rgba(26, 22, 18, 0.55);
    background: transparent;
    border: none;
    padding: 0.5rem 0;
    cursor: pointer;
    opacity: 0;
    transition:
        opacity 1.2s var(--ease-out),
        color 200ms var(--ease-snap),
        transform 140ms var(--ease-press);
}

.intro-overlay[data-started] .intro-skip {
    opacity: 1;
}

@media (hover: hover) and (pointer: fine) {
    .intro-skip:hover {
        color: var(--accent-on-light);
    }
}

.intro-skip:active {
    transform: scale(0.95);
}

/* Reduced motion: kein Zoom der Stainedglass-Ebene */
@media (prefers-reduced-motion: reduce) {
    .intro-stainedglass {
        animation: none;
    }
}


/* ============================================================
   PARTICLE FIELD — schwebende Lichtpartikel auf dunklen Sektionen
   ============================================================ */

.particle-field {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
    mix-blend-mode: screen;
    opacity: 0.85;
}

.hero-inner,
.essays-list,
.section-header,
.archiv-preview,
.scroll-marquee {
    position: relative;
    z-index: 2;
}

.archiv-section--dig .particle-field {
    z-index: 1;
}


/* ============================================================
   LOCAL DISPLAY FONTS — overrides for large & medium headings
   Applied last so these beat all earlier font-family declarations.
   ============================================================ */

/* Large (heroes) — Hermis Soul */
.hero-title,
.essay-hero-title,
.projekt-title,
.legal-title,
.ueber-hero-text .projekt-title {
    font-family: var(--font-hero);
    font-weight: 400;
    letter-spacing: -0.01em;
}


/* ============================================================
   FUNDSTÜCKE — archäologisch-moderne Sektion
   Linen-Hintergrund, feines Feldraster, vitrinenartiges Specimen
   ============================================================ */

.archiv-section--dig {
    position: relative;
    background: var(--bg-deep);
    color: var(--text-primary);
    padding: clamp(4rem, 10vw, 8rem) var(--space-lg);
    overflow: hidden;
    isolation: isolate;
    max-width: none;
    margin: 0;
}

/* Bibliotheks-Hintergrund — warmes Archivfoto */
.archiv-bg {
    position: absolute;
    inset: 0;
    background-image: url('assets/images/backgrounds/library.jpg');
    background-size: cover;
    background-position: center;
    z-index: 0;
    filter: saturate(1.1) contrast(1.05) brightness(1.25);
}

/* Leichter Overlay — Bibliothek bleibt gut sichtbar, Text lesbar */
.archiv-bg-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(ellipse at center, rgba(10, 15, 13, 0.15) 0%, rgba(10, 15, 13, 0.55) 100%);
    z-index: 0;
}

.archiv-section--dig > *:not(.archiv-bg):not(.archiv-bg-overlay) {
    position: relative;
    z-index: 1;
}

/* Reset the old archiv-preview frame inside the dig variant */
.archiv-section--dig .archiv-preview {
    padding: 0;
    border: none;
    background: none;
    max-width: 720px;
    margin: 0 auto;
}

/* Section-Deko-Nummer (03) auf dunklem Bibliotheksgrund */
.archiv-section--dig .section-number-deco {
    color: rgba(232, 228, 223, 0.06);
}

.archiv-section--dig .section-description {
    color: var(--text-secondary);
}

/* Corpus-Label oberhalb des Titels — monospaced-kaltsachlich */
.archiv-label {
    font-family: var(--font-body);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--accent-light);
    margin-bottom: var(--space-sm);
    display: inline-flex;
    align-items: center;
    gap: 0.6em;
}

.archiv-label-dot {
    width: 8px;
    height: 8px;
    background: var(--accent-light);
    display: inline-block;
    animation: dig-pulse 2.8s ease-in-out infinite;
    box-shadow: 0 0 10px rgba(212, 160, 49, 0.5);
}

@keyframes dig-pulse {
    0%, 100% { opacity: 0.5; transform: scale(1); }
    50%      { opacity: 1;   transform: scale(1.25); }
}

/* Specimen: vitrinenartige Karte für ein Fundstück */
.archiv-specimen {
    max-width: 620px;
    margin: clamp(2rem, 6vw, 4rem) auto 0;
    padding: var(--space-lg);
    background: #f7f2e9;
    border: 1px solid rgba(26, 22, 18, 0.12);
    box-shadow:
        0 1px 2px rgba(26, 22, 18, 0.06),
        0 32px 60px -28px rgba(26, 22, 18, 0.28);
    position: relative;
}

/* Kleine Kreuzmarken an den Ecken des Specimen */
.archiv-specimen::before,
.archiv-specimen::after {
    content: '+';
    position: absolute;
    font-family: var(--font-body);
    font-size: 0.8rem;
    color: rgba(138, 101, 8, 0.55);
    line-height: 1;
}
.archiv-specimen::before { top: 6px; left: 8px; }
.archiv-specimen::after  { bottom: 6px; right: 8px; }

.archiv-specimen-meta {
    display: flex;
    justify-content: space-between;
    font-family: var(--font-body);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--accent-on-light);
    padding-bottom: var(--space-sm);
    border-bottom: 1px solid rgba(26, 22, 18, 0.1);
    margin-bottom: var(--space-md);
}

.archiv-specimen-id {
    color: var(--text-dark);
}

.archiv-specimen-status {
    color: var(--accent-on-light);
    font-style: italic;
    letter-spacing: 0.12em;
    text-transform: none;
    font-weight: 400;
}

/* Leer-Vitrine: schraffierte Fläche als Platzhalter */
.archiv-specimen-frame {
    height: clamp(140px, 22vw, 220px);
    margin-bottom: var(--space-md);
    background:
        repeating-linear-gradient(
            45deg,
            transparent,
            transparent 10px,
            rgba(138, 101, 8, 0.08) 10px,
            rgba(138, 101, 8, 0.08) 11px
        );
    border: 1px dashed rgba(138, 101, 8, 0.4);
    position: relative;
}

.archiv-specimen-frame::after {
    content: '—';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: var(--font-body);
    font-size: 1.5rem;
    color: rgba(138, 101, 8, 0.4);
    letter-spacing: 0.4em;
}

.archiv-specimen-note {
    font-family: var(--font-reading);
    font-size: 1.05rem;
    line-height: 1.65;
    color: var(--text-dark-secondary);
    margin: 0;
}

/* Marquee innerhalb der Fundstücke-Sektion: Abstand oben, randvoll */
.archiv-section--dig .scroll-marquee--in-section {
    margin: clamp(3rem, 8vw, 6rem) calc(var(--space-lg) * -1) 0;
    padding: var(--space-md) 0;
}

/* Fundstücke hat bereits den Bibliotheks-Hintergrund — keine zusätzlichen
   Trennlinien über dem Bild */
.archiv-section--dig .section-header {
    border-bottom: none;
    padding-bottom: 0;
}

.archiv-section--dig .section-header::after {
    display: none;
}

/* Medium (section & card headings) — Bjork Serif */
.section-title,
.focus-title,
.music-title,
.essay-card-title,
.essay-heading,
.projekt-heading,
.exkurse-title,
.book-title {
    font-family: var(--font-heading);
}


/* ============================================================
   PERFORMANCE-STUFE — schwache Geräte
   main.js setzt data-perf="low" auf <html>, wenn das Gerät wenig
   Kerne/Speicher meldet oder die gemessene Bildrate einbricht.
   Grundsatz: Bewegung bleibt, teure Malarbeit fällt weg.
   Was hier abgeschaltet wird, sind ausschließlich Effekte, die
   Fläche neu zeichnen oder mischen (Blur, Blend, Korn, Filter) —
   die Laufbänder und das Buntglas laufen weiter.
   ============================================================ */

/* Verlaufstext ohne Dauer-Flackern */
[data-perf="low"] .glass-text {
    animation: none;
}

/* Filmkorn über dem Hero: eine bildschirmfüllende Textur, die bei
   jedem Repaint mitgemischt wird */
[data-perf="low"] .hero-grain {
    display: none;
}

/* backdrop-filter ist auf schwachen GPUs mit Abstand der teuerste
   Effekt — deckende Flächen sehen fast gleich aus */
[data-perf="low"] .site-nav.is-scrolled,
[data-perf="low"] .site-nav--essay {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(10, 15, 13, 0.97);
}

[data-perf="low"] .nav-links {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

/* Kleineres Buntglas-Fenster = kleinere Ebene */
[data-perf="low"] .hero-stained-glass {
    --glass-size: 760px;
}

/* Intro-Buntglas: 16px-Blur auf einem großen Bild plus Dauer-Drift */
[data-perf="low"] .intro-stainedglass {
    filter: brightness(1.05) saturate(1.3);
    animation: none;
}