/* ════════════════════════════════════════════════════════════════════════════
   THORENUS · style.css
   Einzige CSS-Wahrheit · gebaut nach THORENUS_FINAL_MASTER.md (April 2026)

   Stack:    Reines HTML5 + Custom CSS · Vanilla JS · keine Frameworks
   Theme:    AUSSCHLIESSLICH [data-theme="dark"] — KEIN prefers-color-scheme
   Footer:   in beiden Themes identisch dunkel — fixe Farben, kein var()
   Verboten: border-radius, box-shadow, transform:translate/scale auf Hover,
             externe Fonts/CDNs, Karten-Optik, farbige Badge-Hintergründe

   Reihenfolge in dieser Datei:
   01  Reset & Base
   02  @font-face — lokale woff2
   03  Custom Properties · Light (§ 6) + Spacing (§ 8)
   04  Custom Properties · Dark (§ 6)
   05  Body, Selektion, Scrollbar, Fokus (§ 7, § 22)
   06  Layout-Container & Helfer
   07  Typographie-Skala (§ 7)
   08  Navigation (§ 9)
   09  Hero (§ 10)
   10  Editorial Layout — Featured / Split / Three-Column (§ 11)
   11  Zitat-Break (§ 12)
   12  Kategorie-Bereich (§ 13)
   13  Beitragsseite — Prose, Drop Cap, TOC, Fortschrittsbalken (§ 14)
   14  Footer (§ 15) — fix dunkel
   15  Micro-Interactions + Cursor (§ 16)
   16  Suche-Overlay (§ 17)
   17  Print + Reduced Motion (§ 23)
═══════════════════════════════════════════════════════════════════════════ */


/* ════════════════════════════════════════════════════
   01  Reset & Base
═══════════════════════════════════════════════════════ */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

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

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
}

button { cursor: pointer; }

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

ul,
ol { list-style: none; }


/* ════════════════════════════════════════════════════
   02  @font-face — lokal · keine Google Fonts
═══════════════════════════════════════════════════════ */

@font-face {
  font-family: 'Playfair Display';
  src: url('/assets/fonts/PlayfairDisplay-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Playfair Display';
  src: url('/assets/fonts/PlayfairDisplay-Italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Playfair Display';
  src: url('/assets/fonts/PlayfairDisplay-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Source Serif 4';
  src: url('/assets/fonts/SourceSerif4-Regular.woff2') format('woff2');
  font-weight: 300 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Source Serif 4';
  src: url('/assets/fonts/SourceSerif4-Italic.woff2') format('woff2');
  font-weight: 300 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('/assets/fonts/Inter-Regular.woff2') format('woff2');
  font-weight: 300 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('/assets/fonts/Inter-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}


/* ════════════════════════════════════════════════════
   03  Custom Properties · Light (§ 6) + Spacing (§ 8)
═══════════════════════════════════════════════════════ */

:root {
  /* Grundflächen */
  --bg:              #F8F5F0;
  --bg-elevated:     #F1EDE5;
  --bg-deep:         #E8E3D9;
  --bg-wash:         #FAF8F4;

  /* Trennlinien */
  --rule:            #E0DAD0;
  --rule-subtle:     #EDE8E0;
  --rule-strong:     #C8C0B4;

  /* Text */
  --text:            #1A1410;
  --text-secondary:  #4A4238;
  --text-muted:      #7A7268;
  --text-faint:      #A89E94;

  /* Akzent Light = Tinte, kein Farbton */
  --accent:          #1A1410;
  --accent-ui:       #2C241C;
  --accent-soft:     #EDE8E0;

  /* Gold — nur als Ornament im Light Mode */
  --gold:            #B8922A;
  --gold-faint:      #D4AF6A;
  --quote-line:      #C8B078;

  /* Kategorie-Töne — NUR als 1–2px Linie auf Beitragsseiten */
  --cat-gesellschaft:        #6B3A1F;
  --cat-selbstreflexion:     #2A3A48;
  --cat-bewusstsein:         #2E5068;
  --cat-sprache-des-lebens:  #3A5438;
  --cat-allgemein:           #4A4238;

  /* Schriften */
  --font-display:    'Playfair Display', 'Georgia', serif;
  --font-body:       'Source Serif 4', 'Georgia', serif;
  --font-ui:         'Inter', system-ui, sans-serif;

  /* Layout */
  --max-w:           1200px;
  --prose-w:         680px;
  --nav-h:           72px;

  /* Spacing — § 8 */
  --space-xs:        0.5rem;
  --space-sm:        1rem;
  --space-md:        2rem;
  --space-lg:        3.5rem;
  --space-xl:        5rem;
  --space-2xl:       8rem;
  --space-3xl:       12rem;
  --space-hero:      clamp(6rem, 12vw, 16rem);
}


/* ════════════════════════════════════════════════════
   04  Custom Properties · Dark (§ 6)
   AUSSCHLIESSLICH [data-theme="dark"] — KEIN @media
═══════════════════════════════════════════════════════ */

[data-theme="dark"] {
  --bg:              #100D0A;
  --bg-elevated:     #1A1512;
  --bg-deep:         #141009;
  --bg-wash:         #0C0A08;

  --rule:            #2A2218;
  --rule-subtle:     #1E1A14;
  --rule-strong:     #3A3028;

  --text:            #EDE8DC;
  --text-secondary:  #B8AEA2;
  --text-muted:      #7A7268;
  --text-faint:      #4A4238;

  /* Dark Mode: Gold ist der EINZIGE Farbmoment */
  --accent:          #C9A96E;
  --accent-ui:       #D8BF8A;
  --accent-soft:     #1E1810;

  --gold:            #C9A96E;
  --gold-faint:      #A88A4E;
  --quote-line:      #7C5A3A;

  --cat-gesellschaft:        #8A5A3A;
  --cat-selbstreflexion:     #4A6A80;
  --cat-bewusstsein:         #5A8090;
  --cat-sprache-des-lebens:  #5A7858;
  --cat-allgemein:           #6A6258;
}


/* ════════════════════════════════════════════════════
   05  Body, Selektion, Scrollbar, Fokus
═══════════════════════════════════════════════════════ */

body {
  font-family: var(--font-body);
  font-size: 1.125rem;
  line-height: 1.9;
  font-weight: 300;
  color: var(--text);
  background: var(--bg);

  font-feature-settings: "liga" 1, "calt" 1, "kern" 1, "onum" 1;
  font-optical-sizing: auto;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  hanging-punctuation: first last;

  overflow-x: hidden;
  transition: background 400ms ease, color 400ms ease;
}

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

::-webkit-scrollbar { width: 3px; height: 3px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--rule-strong);
  border-radius: 0;
}
::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }

/* Fokus — § 22 */
:focus-visible {
  outline: 1px solid var(--text-muted);
  outline-offset: 4px;
  border-radius: 0;
}
:focus:not(:focus-visible) { outline: none; }

/* Skip-Link */
.skip-link {
  position: absolute;
  top: -100px;
  left: 1rem;
  padding: 0.75rem 1.25rem;
  background: var(--text);
  color: var(--bg);
  font-family: var(--font-ui);
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  z-index: 10000;
  transition: top 200ms ease;
}
.skip-link:focus { top: 1rem; }


/* ════════════════════════════════════════════════════
   06  Layout-Container & Helfer
═══════════════════════════════════════════════════════ */

.container {
  width: 100%;
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: clamp(2rem, 5vw, 5rem);
}

/* Flush: kein Seitenabstand — für Raster mit durchlaufenden Linien */
.container--flush {
  padding-inline: 0;
}

.container-wide {
  width: 100%;
  padding-inline: clamp(2rem, 5vw, 5rem);
}

.prose-container {
  width: 100%;
  max-width: var(--prose-w);
  margin-inline: auto;
  padding-inline: clamp(1.5rem, 4vw, 2rem);
}

main { display: block; }

.rule {
  border: none;
  border-top: 1px solid var(--rule);
  margin: 0;
}

.section-spacer    { padding-block: var(--space-hero); }
.section-spacer-sm { padding-block: var(--space-2xl);  }


/* ════════════════════════════════════════════════════
   07  Typographie-Skala (§ 7)
═══════════════════════════════════════════════════════ */

/* Hero */
.hero-title {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(4.5rem, 9vw, 9rem);
  line-height: 0.95;
  letter-spacing: -0.04em;
}

/* Featured Post */
.post-featured-title {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(2.5rem, 5vw, 5rem);
  line-height: 1.0;
  letter-spacing: -0.03em;
}

/* Split Post */
.post-split-title {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.8rem, 3vw, 3rem);
  line-height: 1.05;
  letter-spacing: -0.025em;
}

/* Small Post */
.post-small-title {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.2rem, 1.8vw, 1.7rem);
  line-height: 1.15;
  letter-spacing: -0.015em;
}

/* Section Label / Meta */
.label,
.meta {
  font-family: var(--font-ui);
  font-weight: 300;
  font-size: 0.625rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.label { display: block; }

.label-strong {
  color: var(--text-secondary);
}

/* Lead — Beitragsseite */
.lead {
  font-family: var(--font-body);
  font-style: italic;
  font-weight: 300;
  font-size: 1.25rem;
  line-height: 1.75;
  color: var(--text-secondary);
}


/* ════════════════════════════════════════════════════
   08  Navigation (§ 9)
═══════════════════════════════════════════════════════ */

#navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 400;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition:
    background 350ms ease,
    border-color 350ms ease,
    backdrop-filter 350ms ease,
    transform 400ms cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform, background;
}

.nav-inner {
  width: 100%;
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: clamp(1.5rem, 4vw, 3rem);
  display: flex;
  align-items: center;
  gap: clamp(1rem, 3vw, 2.5rem);
}

.nav-logo {
  margin-right: auto;
  display: flex;
  align-items: center;
  text-decoration: none;
  transition: color 300ms ease, opacity 300ms ease;
}
.nav-logo svg {
  height: 36px;
  width: 36px;
  display: block;
  transition: color 300ms ease;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: clamp(1.25rem, 3vw, 2.5rem);
}
.nav-links a {
  font-family: var(--font-ui);
  font-weight: 300;
  font-size: 0.625rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-decoration: none;
  transition: color 250ms ease;
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: clamp(0.75rem, 2vw, 1.5rem);
}

.nav-icon {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  padding: 0;
}
.nav-icon svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke-width: 1.25;
  transition: stroke 250ms ease, opacity 250ms ease;
}

/* Mobile-Trigger als TEXT — § 9, KEIN Hamburger-Icon */
.nav-menu-trigger {
  display: none;
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: 0.625rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  background: none;
  border: none;
  padding: 0.5rem 0;
  transition: color 250ms ease;
}

/* ──────────── State: über dem Hero ──────────── */
#navbar.--over-hero {
  background: transparent;
  border-bottom-color: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
#navbar.--over-hero .nav-logo            { color: rgba(240, 232, 215, 0.90); }
#navbar.--over-hero .nav-links a         { color: rgba(240, 232, 215, 0.52); }
#navbar.--over-hero .nav-links a:hover   { color: rgba(240, 232, 215, 0.92); }
#navbar.--over-hero .nav-icon svg        { stroke: rgba(240, 232, 215, 0.55); }
#navbar.--over-hero .nav-icon:hover svg  { stroke: rgba(240, 232, 215, 0.92); }
#navbar.--over-hero .nav-menu-trigger    { color: rgba(240, 232, 215, 0.55); }
#navbar.--over-hero .nav-menu-trigger:hover { color: rgba(240, 232, 215, 0.92); }

/* ──────────── State: gescrollt ──────────── */
#navbar.--scrolled {
  background: color-mix(in srgb, var(--bg) 90%, transparent);
  -webkit-backdrop-filter: blur(20px) saturate(1.1);
  backdrop-filter: blur(20px) saturate(1.1);
  border-bottom: 1px solid var(--rule-subtle);
}
#navbar.--scrolled .nav-logo             { color: var(--text); }
#navbar.--scrolled .nav-links a          { color: var(--text-muted); }
#navbar.--scrolled .nav-links a:hover    { color: var(--text); }
#navbar.--scrolled .nav-icon svg         { stroke: var(--text-muted); }
#navbar.--scrolled .nav-icon:hover svg   { stroke: var(--text); }
#navbar.--scrolled .nav-menu-trigger     { color: var(--text-muted); }
#navbar.--scrolled .nav-menu-trigger:hover { color: var(--text); }

/* Dark Mode — Logo bright in beiden States */
[data-theme="dark"] #navbar.--over-hero .nav-links a { color: rgba(240, 232, 215, 0.55); }
[data-theme="dark"] #navbar.--over-hero .nav-links a:hover { color: rgba(240, 232, 215, 0.95); }
[data-theme="dark"] #navbar.--scrolled .nav-logo { color: var(--text); }
[data-theme="dark"] #navbar.--scrolled .nav-links a { color: var(--text-muted); }
[data-theme="dark"] #navbar.--scrolled .nav-links a:hover { color: var(--text); }


/* ──────────── Mobile Fullscreen Overlay (§ 9) ──────────── */
.nav-fullscreen {
  position: fixed;
  inset: 0;
  z-index: 500;
  background: #100D0A;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 500ms cubic-bezier(0.16, 1, 0.3, 1);
}
.nav-fullscreen.open {
  opacity: 1;
  pointer-events: all;
}

.nav-fullscreen-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.nav-fullscreen a {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(2.8rem, 10vw, 5rem);
  color: rgba(240, 232, 215, 0.70);
  letter-spacing: -0.02em;
  text-decoration: none;
  display: block;
  margin-bottom: 1.5rem;
  line-height: 1.1;
  transition: color 200ms ease;
}
.nav-fullscreen a:hover { color: rgba(240, 232, 215, 0.95); }

.nav-fullscreen-close {
  position: absolute;
  top: 1.5rem;
  right: clamp(1.5rem, 4vw, 4rem);
  font-family: var(--font-ui);
  font-size: 0.625rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(240, 232, 215, 0.35);
  background: none;
  border: none;
  padding: 0.5rem;
  cursor: pointer;
  transition: color 200ms ease;
}
.nav-fullscreen-close:hover { color: rgba(240, 232, 215, 0.70); }

.nav-fullscreen-slogan {
  position: absolute;
  bottom: clamp(2rem, 5vh, 4rem);
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-body);
  font-style: italic;
  font-size: 0.8rem;
  line-height: 1.6;
  color: rgba(240, 232, 215, 0.15);
  text-align: center;
  padding: 0 3rem;
  max-width: 400px;
}


/* ════════════════════════════════════════════════════
   09  Hero (§ 10)
═══════════════════════════════════════════════════════ */

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

.hero-bg {
  position: absolute;
  inset: 0;
  background: url('/images/hero.jpg') center/cover no-repeat;
  will-change: transform;
}

.hero-gradient {
  position: absolute;
  inset: 0;
  /* Diagonal: links-unten dunkel (wo Text liegt), rechts-oben offen */
  background:
    linear-gradient(
      to top,
      rgba(12, 10, 8, 0.92) 0%,
      rgba(12, 10, 8, 0.55) 28%,
      rgba(12, 10, 8, 0.0)  58%
    ),
    linear-gradient(
      to right,
      rgba(12, 10, 8, 0.45) 0%,
      rgba(12, 10, 8, 0.0)  55%
    ),
    linear-gradient(
      to bottom,
      rgba(12, 10, 8, 0.40) 0%,
      rgba(12, 10, 8, 0.0)  22%
    );
  pointer-events: none;
}

#particles-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.55;
  pointer-events: none;
}

/* Text: links unten — editorial, nicht zentriert */
.hero-content {
  position: absolute;
  bottom: clamp(4rem, 10vh, 8rem);
  left: 0;
  right: 0;
  z-index: 2;
  padding: 0 clamp(2rem, 6vw, 6rem);
  max-width: 900px;
  will-change: opacity, transform;
}

.hero-greeting {
  display: block;
  font-family: var(--font-ui);
  font-weight: 300;
  font-size: 0.6rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(240, 232, 213, 0.38);
  margin-bottom: clamp(1.25rem, 3vh, 2rem);
}

.hero-title {
  color: #F2EBD9;
  text-shadow: 0 2px 40px rgba(12, 10, 8, 0.4);
}

.hero-slogan {
  font-family: var(--font-body);
  font-style: italic;
  font-size: clamp(1rem, 1.6vw, 1.2rem);
  color: rgba(240, 232, 213, 0.52);
  margin-top: clamp(1.25rem, 3vh, 2rem);
  letter-spacing: 0.01em;
  max-width: 52ch;
  line-height: 1.65;
}

/* Scroll-Indikator */
.scroll-indicator {
  position: absolute;
  bottom: 2.5rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  z-index: 2;
}
.scroll-indicator-line {
  width: 1px;
  height: 48px;
  background: rgba(240, 232, 213, 0.22);
  transform-origin: top;
  animation: indicatorPulse 2.5s ease-in-out infinite;
}
.scroll-indicator-label {
  font-family: var(--font-ui);
  font-size: 0.55rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(240, 232, 213, 0.22);
}
@keyframes indicatorPulse {
  0%, 100% { opacity: 0.22; transform: scaleY(1);   }
  50%      { opacity: 0.55; transform: scaleY(0.6); }
}

/* HINWEIS: Kein Gradient-Auslauf am Hero-Ende.
   Hero endet dunkel, Content beginnt auf --bg.
   Der harte Schnitt IST die Aussage. (§ 10) */


/* ════════════════════════════════════════════════════
   10  Editorial Layout (§ 11)
   Verboten: border-radius, box-shadow, translate/scale auf Hover
   Erlaubt: filter:brightness() auf Bilder · color auf Texte
═══════════════════════════════════════════════════════ */

/* ──────────── Section-Header (Label über Inhalt) ──────────── */
.section-head {
  padding-block: clamp(3rem, 6vw, 5rem);
  text-align: center;
}
.section-head .label {
  display: inline-block;
}

/* ──────────── Featured Post ──────────── */
.post-featured {
  display: block;
  position: relative;
  width: 100%;
  text-decoration: none;
  color: inherit;
}
.post-featured-image {
  position: relative;
  width: 100%;
  overflow: hidden;
}
.post-featured-image img {
  width: 100%;
  height: 55vh;
  min-height: 480px;
  object-fit: cover;
  display: block;
  transition: filter 500ms ease;
}
.post-featured-image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(16, 13, 10, 0) 35%,
    rgba(16, 13, 10, 0.80) 100%
  );
  pointer-events: none;
}
.post-featured-body {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding: clamp(2rem, 5vw, 5rem) clamp(1.5rem, 5vw, 5rem);
  max-width: 900px;
}
.post-featured-body .meta {
  color: rgba(240, 232, 213, 0.55);
  margin-bottom: 1rem;
}
.post-featured-title {
  color: #F0E8D5;
  margin-bottom: 1.25rem;
}
.post-featured-lead {
  font-family: var(--font-body);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1rem, 1.4vw, 1.2rem);
  line-height: 1.65;
  color: rgba(240, 232, 213, 0.60);
  max-width: 540px;
}
.post-featured:hover .post-featured-image img { filter: brightness(0.90); }

/* ──────────── Split Post ──────────── */
.post-split {
  display: grid;
  grid-template-columns: 42fr 58fr;
  min-height: 420px;
  border-top: 1px solid var(--rule);
  text-decoration: none;
  color: inherit;
}
.post-split-image {
  overflow: hidden;
  position: relative;
}
.post-split-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: filter 500ms ease;
}
.post-split-body {
  padding: clamp(3rem, 5vw, 6rem);
  border-left: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.post-split-body .meta {
  margin-bottom: 1.25rem;
}
.post-split-title {
  margin-bottom: 1.5rem;
  color: var(--text);
}
.post-split-lead {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 1rem;
  line-height: 1.85;
  color: var(--text-secondary);
  max-width: 52ch;
}
.post-split:hover .post-split-image img { filter: brightness(0.85); }

/* Variante: Bild rechts */
.post-split.--reverse {
  grid-template-columns: 58fr 42fr;
}
.post-split.--reverse .post-split-image { order: 2; }
.post-split.--reverse .post-split-body  {
  order: 1;
  border-left: none;
  border-right: 1px solid var(--rule);
}

/* ──────────── Three-Column ──────────── */
.posts-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.post-small {
  display: flex;
  flex-direction: column;
  padding: clamp(2.5rem, 4vw, 4rem) clamp(1.5rem, 2.5vw, 3rem);
  border-right: 1px solid var(--rule);
  text-decoration: none;
  color: inherit;
}
.post-small:last-child { border-right: none; }
.post-small-image {
  overflow: hidden;
  margin-bottom: 1.75rem;
}
.post-small-image img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  transition: filter 400ms ease;
}
.post-small .meta { margin-bottom: 0.75rem; }
.post-small-title {
  color: var(--text);
  margin-bottom: 0.75rem;
}
.post-small-excerpt {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--text-secondary);
}
.post-small:hover .post-small-image img { filter: brightness(0.82); }

/* ──────────── „Weitere Beiträge" (kein Button) ──────────── */
.load-more-wrap {
  display: flex;
  align-items: center;
  gap: 2rem;
  padding: var(--space-2xl) 0;
}
.load-more-rule {
  flex: 1;
  border: none;
  border-top: 1px solid var(--rule);
  margin: 0;
}
.load-more-btn {
  font-family: var(--font-ui);
  font-weight: 300;
  font-size: 0.625rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--text-faint);
  background: none;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  padding: 0.5rem 0;
  transition: color 250ms ease;
}
.load-more-btn:hover { color: var(--text); }


/* ════════════════════════════════════════════════════
   11  Zitat-Break (§ 12)
═══════════════════════════════════════════════════════ */

.quote-break {
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: var(--space-3xl) 0;
  text-align: center;
}
.quote-ornament {
  display: block;
  width: 40px;
  height: 1px;
  background: var(--rule-strong);
  margin: 0 auto 3rem;
}
.quote-break blockquote {
  max-width: 720px;
  margin: 0 auto 2rem;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.8rem, 4vw, 3.5rem);
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--text);
  /* Kein border-left, kein Hintergrund, kein color-accent */
}
.quote-break cite {
  display: block;
  font-family: var(--font-ui);
  font-style: normal;
  font-size: 0.6rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-top: 1rem;
}


/* ════════════════════════════════════════════════════
   12  Kategorie-Bereich (§ 13)
═══════════════════════════════════════════════════════ */

.cat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.cat-item:nth-child(4n)  { border-right: none; }
.cat-item:nth-child(n+5) { border-top: 1px solid var(--rule); }
.cat-item {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(1.5rem, 2.5vw, 2.5rem) clamp(1rem, 1.8vw, 1.75rem);
  border-right: 1px solid var(--rule);
  min-height: clamp(200px, 24vw, 300px);
  text-decoration: none;
  color: inherit;
  transition: background 400ms ease;
}
.cat-item:last-child { border-right: none; }
.cat-item:hover { background: var(--bg-elevated); }

/* Zahl: kleines Label oben — klar getrennt vom Namen */
.cat-item-index {
  font-family: var(--font-ui);
  font-weight: 300;
  font-size: 0.55rem;
  letter-spacing: 0.2em;
  color: var(--text-faint);
  display: block;
}

/* Name: groß, unten, trägt die ganze Zelle */
.cat-item-name {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.05rem, 1.25vw, 1.5rem);
  color: var(--text);
  letter-spacing: -0.02em;
  line-height: 1.15;
  transition: color 300ms ease;
  hyphens: auto;
  margin-top: auto;
}

.cat-item-count {
  font-family: var(--font-ui);
  font-weight: 300;
  font-size: 0.55rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-top: 0.5rem;
  display: block;
  transition: color 300ms ease;
}

/* Kategorie-Linie — NUR auf Beitragsseiten (§ 13) */
.post-category-line {
  display: inline-block;
  width: 18px;
  height: 1px;
  margin-right: 0.75rem;
  vertical-align: middle;
  background: var(--cat-allgemein);
}
.post-category-line.--gesellschaft       { background: var(--cat-gesellschaft);       }
.post-category-line.--selbstreflexion    { background: var(--cat-selbstreflexion);    }
.post-category-line.--bewusstsein        { background: var(--cat-bewusstsein);        }
.post-category-line.--sprache-des-lebens { background: var(--cat-sprache-des-lebens); }
.post-category-line.--allgemein          { background: var(--cat-allgemein);          }


/* ════════════════════════════════════════════════════
   13  Beitragsseite — Prose, Drop Cap, TOC, Fortschritt (§ 14)
═══════════════════════════════════════════════════════ */

/* Lese-Fortschrittsbalken */
#reading-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  width: 0%;
  background: var(--text-faint);
  z-index: 450;
  transition: width 80ms linear;
}
[data-theme="dark"] #reading-progress {
  background: var(--gold);
}

/* Header der Beitragsseite */
.post-header {
  padding-top: calc(var(--nav-h) + clamp(3rem, 8vw, 7rem));
  padding-bottom: clamp(2rem, 5vw, 4rem);
}
.post-header .meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 2rem;
}
.post-header .post-series {
  font-family: var(--font-ui);
  font-weight: 300;
  font-size: 0.6rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 1.5rem;
  display: block;
}
.post-title {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(2.6rem, 5.5vw, 5.5rem);
  line-height: 1.0;
  letter-spacing: -0.03em;
  color: var(--text);
  margin-bottom: 2rem;
  max-width: 18ch;
}
.post-lead {
  font-family: var(--font-body);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.15rem, 1.5vw, 1.4rem);
  line-height: 1.7;
  color: var(--text-secondary);
  max-width: 54ch;
}

/* Beitragsbild */
.post-cover {
  width: 100%;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.post-cover img {
  width: 100%;
  height: auto;
  max-height: 70vh;
  object-fit: cover;
  display: block;
}

/* Prose-Bereich */
.prose {
  padding-block: clamp(3rem, 6vw, 6rem);
}
.prose > p,
.prose > ul,
.prose > ol,
.prose > h2,
.prose > h3,
.prose > blockquote,
.prose > .pullquote,
.prose > .ornament-divider {
  max-width: var(--prose-w);
  margin-left: auto;
  margin-right: auto;
}

.prose p {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 1.125rem;
  line-height: 1.9;
  color: var(--text);
  margin-bottom: 1.5rem;
}

.prose h2 {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.6rem, 2.4vw, 2.2rem);
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--text);
  margin-top: clamp(3rem, 5vw, 4.5rem);
  margin-bottom: 1.25rem;
}
.prose h3 {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.25rem, 1.7vw, 1.5rem);
  line-height: 1.3;
  color: var(--text);
  margin-top: 2.5rem;
  margin-bottom: 1rem;
}

.prose ul,
.prose ol {
  padding-left: 1.5rem;
  margin-bottom: 1.5rem;
}
.prose li {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 1.125rem;
  line-height: 1.85;
  margin-bottom: 0.5rem;
}
.prose ul li { list-style: disc; }
.prose ol li { list-style: decimal; }

.prose strong { font-weight: 500; color: var(--text); }
.prose em     { font-style: italic; }

/* Drop Cap — § 7, Farbe ist --text, nie --accent */
.prose > p:first-of-type::first-letter {
  float: left;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 5.5rem;
  line-height: 0.8;
  margin: 0.05em 0.12em -0.05em 0;
  color: var(--text);
}

/* Blockquote im Fließtext */
.prose blockquote {
  border-left: 1px solid var(--quote-line);
  padding-left: 1.75rem;
  margin: 2.5rem auto;
  font-family: var(--font-body);
  font-style: italic;
  font-weight: 300;
  font-size: 1.2rem;
  line-height: 1.7;
  color: var(--text-secondary);
}
.prose blockquote cite {
  display: block;
  margin-top: 0.75rem;
  font-family: var(--font-ui);
  font-style: normal;
  font-size: 0.6rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-faint);
}

/* Pull-Quote — größer, Playfair Italic */
.prose .pullquote {
  border-left: 1px solid var(--quote-line);
  padding-left: 2rem;
  margin: clamp(3rem, 5vw, 4.5rem) auto;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.6rem, 2.5vw, 2.2rem);
  line-height: 1.3;
  letter-spacing: -0.015em;
  color: var(--text);
}

/* Link im Prose — Underline wächst von links (§ 16) */
.prose a {
  color: inherit;
  text-decoration: none;
  background-image: linear-gradient(var(--text), var(--text));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 1px;
  transition: background-size 350ms ease, color 250ms ease;
}
.prose a:hover { background-size: 100% 1px; }

/* Ornament-Divider */
.ornament-divider {
  display: block;
  width: 40px;
  height: 1px;
  background: var(--rule-strong);
  margin: clamp(3rem, 5vw, 4.5rem) auto;
}

/* ──────────── Table of Contents (sticky) ──────────── */
.toc {
  position: sticky;
  top: calc(var(--nav-h) + 2rem);
  font-family: var(--font-ui);
  font-weight: 300;
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  line-height: 2.2;
  padding: 1rem 0;
}
.toc-label {
  font-family: var(--font-ui);
  font-weight: 300;
  font-size: 0.55rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--text-faint);
  display: block;
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--rule-subtle);
}
.toc a {
  color: var(--text-faint);
  text-decoration: none;
  display: block;
  text-transform: uppercase;
  transition: color 200ms ease;
}
.toc a:hover,
.toc a.active { color: var(--text); }

/* Serien-Navigation */
.series-nav {
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.series-nav a {
  padding: clamp(2rem, 4vw, 3rem);
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  transition: background 300ms ease;
}
.series-nav a:hover { background: var(--bg-elevated); }
.series-nav a + a { border-left: 1px solid var(--rule); }
.series-nav-label {
  font-family: var(--font-ui);
  font-weight: 300;
  font-size: 0.55rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.series-nav-title {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.1rem, 1.5vw, 1.4rem);
  line-height: 1.25;
  color: var(--text);
}
.series-nav .--next { text-align: right; }


/* ════════════════════════════════════════════════════
   14  Footer (§ 15) — fix dunkel · keine var()
═══════════════════════════════════════════════════════ */

footer {
  /* Light Mode: tiefstes Warm-Dunkel aus dem Farbsystem — kein Tiefschwarz */
  background: #1A1410;
  border-top: 2px solid #B8922A;
  padding: clamp(5rem, 10vw, 8rem) 0 0;
  color: #EDE8DC;
  margin-top: var(--space-hero);
  transition: background 400ms ease;
}

/* Dark Mode: noch tiefer */
[data-theme="dark"] footer {
  background: #0C0A08;
}

.footer-inner {
  width: 100%;
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: clamp(1.5rem, 4vw, 3rem);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.8fr 1fr 1fr;
  gap: clamp(3rem, 6vw, 7rem);
  padding-bottom: clamp(4rem, 8vw, 7rem);
}

.footer-logo {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 1.8rem;
  letter-spacing: -0.02em;
  color: #EDE8DC;
  display: block;
  margin-bottom: 1.2rem;
  text-decoration: none;
}

.footer-credo {
  font-family: var(--font-body);
  font-style: italic;
  font-weight: 300;
  font-size: 0.95rem;
  line-height: 1.75;
  color: rgba(237, 232, 220, 0.35);
  max-width: 320px;
  margin-bottom: 2rem;
}

.footer-email {
  font-family: var(--font-ui);
  font-weight: 300;
  font-size: 0.625rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(237, 232, 220, 0.22);
  text-decoration: none;
  transition: color 250ms ease;
}
.footer-email:hover { color: rgba(237, 232, 220, 0.55); }

.footer-col-heading {
  font-family: var(--font-ui);
  font-weight: 300;
  font-size: 0.55rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: rgba(237, 232, 220, 0.18);
  display: block;
  margin-bottom: 1.5rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid rgba(237, 232, 220, 0.06);
}

.footer-links { list-style: none; }
.footer-links li { margin-bottom: 0.65rem; }
.footer-links a {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 0.9rem;
  color: rgba(237, 232, 220, 0.38);
  text-decoration: none;
  transition: color 250ms ease;
}
.footer-links a:hover { color: rgba(237, 232, 220, 0.80); }

.footer-bottom {
  border-top: 1px solid rgba(237, 232, 220, 0.06);
  padding: 1.5rem 0 2.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}
.footer-copy {
  font-family: var(--font-ui);
  font-weight: 300;
  font-size: 0.55rem;
  letter-spacing: 0.12em;
  color: rgba(237, 232, 220, 0.14);
}
.footer-ornament {
  display: block;
  width: 32px;
  height: 1px;
  background: rgba(184, 146, 42, 0.35);
}
.footer-totop {
  font-family: var(--font-ui);
  font-weight: 300;
  font-size: 0.55rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(237, 232, 220, 0.14);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.5rem;
  transition: color 250ms ease;
}
.footer-totop:hover { color: rgba(237, 232, 220, 0.45); }


/* ════════════════════════════════════════════════════
   15  Micro-Interactions + Cursor (§ 16)
═══════════════════════════════════════════════════════ */

/* Scroll-Reveal — einmal, sanft */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 700ms ease,
    transform 700ms cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Generelle Link-Übergänge — nur color */
a { transition: color 250ms ease; }

/* Kein Custom Cursor — System-Cursor bleibt. (§ 5 Briefing-Prinzip:
   Luxus ist die Abwesenheit von Anstrengung.) */
#cursor-dot,
#cursor-ring { display: none !important; }


/* ════════════════════════════════════════════════════
   16  Suche-Overlay (§ 17)
═══════════════════════════════════════════════════════ */

.search-overlay {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: color-mix(in srgb, var(--bg) 96%, transparent);
  -webkit-backdrop-filter: blur(32px);
  backdrop-filter: blur(32px);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: clamp(8rem, 18vh, 14rem);
  opacity: 0;
  pointer-events: none;
  transition: opacity 350ms ease;
}
.search-overlay.open {
  opacity: 1;
  pointer-events: all;
}

.search-inner {
  width: 100%;
  max-width: 760px;
  padding: 0 clamp(1.5rem, 4vw, 3rem);
}

#search-input {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(2rem, 5vw, 4rem);
  letter-spacing: -0.02em;
  color: var(--text);
  background: none;
  border: none;
  outline: none;
  width: 100%;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 1rem;
  caret-color: var(--text);
}
#search-input::placeholder {
  color: var(--text-faint);
  font-style: italic;
  opacity: 1;
}

.search-results {
  margin-top: 2.5rem;
  max-height: 50vh;
  overflow-y: auto;
}
.search-result {
  display: block;
  padding: 1.25rem 0;
  border-bottom: 1px solid var(--rule-subtle);
  text-decoration: none;
  color: inherit;
  transition: background 200ms ease, padding-left 250ms ease;
}
.search-result:hover {
  background: var(--bg-elevated);
  padding-left: 0.5rem;
}
.search-result-title {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 1.4rem;
  line-height: 1.3;
  color: var(--text);
  margin-bottom: 0.35rem;
}
.search-result-meta {
  font-family: var(--font-ui);
  font-weight: 300;
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.search-empty {
  font-family: var(--font-body);
  font-style: italic;
  font-weight: 300;
  font-size: 1rem;
  color: var(--text-muted);
  padding: 2rem 0;
  text-align: center;
}

.search-close {
  position: absolute;
  top: 1.5rem;
  right: clamp(1.5rem, 4vw, 4rem);
  font-family: var(--font-ui);
  font-weight: 300;
  font-size: 0.625rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-faint);
  background: none;
  border: none;
  padding: 0.5rem;
  cursor: pointer;
  transition: color 200ms ease;
}
.search-close:hover { color: var(--text); }


/* ════════════════════════════════════════════════════
   RESPONSIVE — Breakpoints
═══════════════════════════════════════════════════════ */

@media (max-width: 1024px) {
  .footer-grid {
    grid-template-columns: 1.4fr 1fr 1fr;
    gap: clamp(2rem, 4vw, 4rem);
  }
  /* cat-grid bleibt 4-spaltig — Desktop-Regel greift */
}

@media (max-width: 768px) {
  /* Nav: Links verstecken, Menu-Text zeigen */
  .nav-links { display: none; }
  .nav-menu-trigger { display: inline-flex; }

  /* Hero etwas reduzieren */
  .hero { min-height: 560px; }
  .hero-greeting { margin-bottom: 1.5rem; }

  /* Featured */
  .post-featured-image img { height: 65vh; min-height: 420px; }

  /* Split → Stack */
  .post-split,
  .post-split.--reverse {
    grid-template-columns: 1fr;
    min-height: 0;
  }
  .post-split-image { aspect-ratio: 4 / 3; }
  .post-split-image img { height: 100%; min-height: 280px; }
  .post-split-body,
  .post-split.--reverse .post-split-body {
    border-left: none;
    border-right: none;
    border-top: 1px solid var(--rule);
  }
  .post-split.--reverse .post-split-image { order: 0; }
  .post-split.--reverse .post-split-body  { order: 0; }

  /* Three-Column → Stack */
  .posts-row {
    grid-template-columns: 1fr;
  }
  .post-small {
    border-right: none;
    border-bottom: 1px solid var(--rule);
  }
  .post-small:last-child { border-bottom: none; }

  /* Categories → 1 Spalte */
  .cat-grid { grid-template-columns: 1fr; }
  .cat-item {
    border-right: none;
    border-bottom: 1px solid var(--rule);
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    min-height: 0;
    padding: 1.25rem clamp(1.5rem, 4vw, 2rem);
    gap: 1.5rem;
  }
  .cat-item:nth-child(n+5) { border-top: none; }
  .cat-item:last-child { border-bottom: none; }
  .cat-item-index { flex-shrink: 0; }
  .cat-item-name {
    font-size: clamp(1.1rem, 4.5vw, 1.4rem);
    margin-top: 0;
  }
  .cat-item > div { flex: 1; }
  .cat-item-count { margin-left: auto; margin-top: 0; padding-left: 1rem; flex-shrink: 0; display: block; }

  /* Footer → Stack */
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 3rem;
  }
  .footer-bottom {
    flex-direction: column;
    text-align: center;
    gap: 1rem;
  }

  /* Series-Nav → Stack */
  .series-nav { grid-template-columns: 1fr; }
  .series-nav a + a {
    border-left: none;
    border-top: 1px solid var(--rule);
  }
  .series-nav .--next { text-align: left; }

  /* Post-Lead etwas kleiner */
  .post-title { font-size: clamp(2.2rem, 9vw, 3.5rem); }
}

@media (max-width: 480px) {
  body { font-size: 1.05rem; line-height: 1.85; }
  .prose p,
  .prose li { font-size: 1.05rem; }
  .prose > p:first-of-type::first-letter {
    font-size: 4.5rem;
  }
}


/* ════════════════════════════════════════════════════
   17  Print + Reduced Motion (§ 23)
═══════════════════════════════════════════════════════ */

@media print {
  nav,
  footer,
  #reading-progress,
  #scroll-top,
  canvas,
  #particles-canvas,
  #cursor-dot,
  #cursor-ring,
  .hero-bg,
  .hero-gradient,
  .scroll-indicator,
  .search-overlay,
  .nav-fullscreen { display: none !important; }

  body {
    color: #000;
    background: #fff;
    font-size: 12pt;
    line-height: 1.6;
  }
  .hero {
    height: auto;
    min-height: 0;
    padding: 2rem 0;
  }
  .hero-title { color: #000; font-size: 32pt; }
  .post-title { color: #000; }

  a {
    color: #000;
    background: none !important;
  }
  a::after {
    content: " (" attr(href) ")";
    font-size: 10pt;
    color: #666;
  }
  .prose a::after { content: " (" attr(href) ")"; }
}

@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;
  }
  #particles-canvas,
  #cursor-dot,
  #cursor-ring { display: none !important; }

  .reveal {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ════════════════════════════════════════════════════
   Ende · style.css
═══════════════════════════════════════════════════════ */


/* ════════════════════════════════════════════════════
   BEITRÄGE-ÜBERSICHT · /beitraege/
════════════════════════════════════════════════════ */

.archive-header {
  padding-top: calc(var(--nav-h) + clamp(5rem, 12vw, 10rem));
  padding-bottom: clamp(3rem, 6vw, 5rem);
  border-bottom: 1px solid var(--rule);
}

.archive-title {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(4rem, 10vw, 9rem);
  line-height: 0.92;
  letter-spacing: -0.04em;
  color: var(--text);
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

/* Filter-Zeile — nur Text, kein Button-Box */
.archive-filter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0;
  row-gap: 0.5rem;
}

.archive-filter-item {
  font-family: var(--font-ui);
  font-weight: 300;
  font-size: 0.6rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-faint);
  text-decoration: none;
  padding: 0.4rem 0;
  background: none;
  border: none;
  cursor: pointer;
  transition: color 250ms ease;
  white-space: nowrap;
}
.archive-filter-item:hover    { color: var(--text-secondary); }
.archive-filter-item.--active { color: var(--text); }

.archive-filter-sep {
  display: inline-block;
  width: 1px;
  height: 0.65rem;
  background: var(--rule-strong);
  margin: 0 1.1rem;
  vertical-align: middle;
  flex-shrink: 0;
}

/* ── Post-Liste ── */
.archive-list { border-bottom: 1px solid var(--rule); }

.archive-entry {
  display: grid;
  grid-template-columns: clamp(140px, 20vw, 260px) 1fr;
  border-top: 1px solid var(--rule);
  text-decoration: none;
  color: inherit;
  min-height: clamp(180px, 22vw, 260px);
  transition: background 350ms ease;
}
.archive-entry:hover { background: var(--bg-elevated); }

.archive-entry-image {
  position: relative;
  overflow: hidden;
  border-right: 1px solid var(--rule);
}
.archive-entry-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: filter 500ms ease;
}
.archive-entry:hover .archive-entry-image img { filter: brightness(0.88); }

.archive-entry-image.--empty {
  background: var(--bg-deep);
  display: flex;
  align-items: flex-end;
  padding: clamp(1.5rem, 3vw, 2.5rem);
}
.archive-entry-image.--empty .post-category-line { width: 32px; }

.archive-entry-body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(2rem, 4vw, 4rem) clamp(2rem, 4vw, 5rem);
}

.archive-entry-meta {
  font-family: var(--font-ui);
  font-weight: 300;
  font-size: 0.6rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-faint);
  display: flex;
  align-items: center;
  margin-bottom: 1rem;
}

.archive-entry-title {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.6rem, 2.8vw, 3rem);
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--text);
  margin-bottom: 1rem;
  transition: color 300ms ease;
}
.archive-entry:hover .archive-entry-title { color: var(--text-secondary); }

.archive-entry-lead {
  font-family: var(--font-body);
  font-weight: 300;
  font-style: italic;
  font-size: clamp(0.9rem, 1.1vw, 1.05rem);
  line-height: 1.7;
  color: var(--text-muted);
  max-width: 58ch;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.archive-entry-series {
  font-family: var(--font-ui);
  font-weight: 300;
  font-size: 0.55rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--rule-subtle);
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.archive-entry-series-line {
  display: inline-block;
  width: 14px;
  height: 1px;
  background: var(--text-faint);
  flex-shrink: 0;
}

.archive-entry[data-hidden] { display: none; }

.archive-empty {
  display: none;
  padding: var(--space-3xl) 0;
  text-align: center;
  font-family: var(--font-body);
  font-style: italic;
  font-weight: 300;
  font-size: 1.1rem;
  color: var(--text-muted);
}
.archive-empty.--visible { display: block; }

/* ── Responsive Archive ── */
@media (max-width: 768px) {
  .archive-filter-sep { margin: 0 0.75rem; }

  .archive-entry {
    grid-template-columns: 1fr;
    min-height: 0;
  }
  .archive-entry-image {
    border-right: none;
    border-bottom: 1px solid var(--rule);
    height: clamp(160px, 40vw, 220px);
  }
  .archive-entry-image.--empty { display: none; }
  .archive-entry-body {
    padding: 1.75rem clamp(1.5rem, 4vw, 2rem);
    justify-content: flex-start;
  }
  .archive-entry-title { font-size: clamp(1.4rem, 6vw, 2rem); }
}


/* ════════════════════════════════════════════════════
   BEITRAGSSEITE · /beitraege/[slug]/
════════════════════════════════════════════════════ */

/* ── Seiten-Header ── */
.post-page-header {
  padding-top:    calc(var(--nav-h) + clamp(4rem, 10vw, 8rem));
  padding-bottom: clamp(3rem, 6vw, 5rem);
  max-width:      var(--max-w);
  margin-inline:  auto;
  padding-inline: clamp(1.5rem, 4vw, 3rem);
}

.post-page-meta {
  display:     flex;
  align-items: center;
  flex-wrap:   wrap;
  gap:         0.5rem;
  margin-bottom: 1.5rem;
}
.post-page-meta .post-category-line { flex-shrink: 0; }

.post-page-series {
  font-family:    var(--font-ui);
  font-weight:    300;
  font-size:      0.6rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color:          var(--text-muted);
  margin-bottom:  1.75rem;
  display:        flex;
  align-items:    center;
  gap:            0.75rem;
}
.post-page-series::before {
  content:    '';
  display:    inline-block;
  width:      24px;
  height:     1px;
  background: var(--text-faint);
  flex-shrink: 0;
}

.post-page-title {
  font-family:    var(--font-display);
  font-style:     italic;
  font-weight:    400;
  font-size:      clamp(3rem, 7vw, 7.5rem);
  line-height:    0.95;
  letter-spacing: -0.035em;
  color:          var(--text);
  margin-bottom:  clamp(2rem, 4vw, 3.5rem);
  max-width:      16ch;
}

.post-page-lead {
  font-family: var(--font-body);
  font-style:  italic;
  font-weight: 300;
  font-size:   clamp(1.15rem, 1.6vw, 1.4rem);
  line-height: 1.7;
  color:       var(--text-secondary);
  max-width:   54ch;
}

/* ── Beitragsbild — volle Breite ── */
.post-page-cover {
  border-top:    1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  margin-bottom: 0;
}
.post-page-cover img {
  width:       100%;
  max-height:  70vh;
  object-fit:  cover;
  display:     block;
}

/* ── Post-Layout: TOC + Prose ── */
.post-page-layout {
  display:        grid;
  grid-template-columns: 1fr clamp(140px, 15vw, 200px);
  max-width:      var(--max-w);
  margin-inline:  auto;
  padding-inline: clamp(1.5rem, 4vw, 3rem);
  gap:            clamp(3rem, 5vw, 6rem);
  padding-top:    clamp(3rem, 6vw, 6rem);
  padding-bottom: clamp(3rem, 6vw, 6rem);
  align-items:    start;
}
.post-page-layout > .post-toc   { grid-column: 2; grid-row: 1; }
.post-page-layout > .post-prose { grid-column: 1; grid-row: 1; }
/* Kein TOC sichtbar → Prosa nutzt volle Breite */


/* TOC — sticky links (§ 14) */
.post-toc {
  position:    sticky;
  top:         calc(var(--nav-h) + 2.5rem);
  padding-top: 0.25rem;
}
.post-toc-label {
  font-family:    var(--font-ui);
  font-weight:    300;
  font-size:      0.55rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color:          var(--text-faint);
  display:        block;
  margin-bottom:  1rem;
  padding-bottom: 0.75rem;
  border-bottom:  1px solid var(--rule-subtle);
}
.post-toc nav a {
  font-family:    var(--font-ui);
  font-weight:    300;
  font-size:      0.6rem;
  letter-spacing: 0.1em;
  line-height:    2.2;
  color:          var(--text-faint);
  text-decoration: none;
  display:        block;
  text-transform: uppercase;
  transition:     color 200ms ease;
}
.post-toc nav a:hover,
.post-toc nav a.--active { color: var(--text); }
.post-series-toc {
  margin-top:  1.75rem;
  padding-top: 1.5rem;
  border-top:  1px solid var(--rule-subtle);
}
 
.post-series-toc-name {
  font-family:    var(--font-ui);
  font-weight:    300;
  font-size:      0.6rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color:          var(--text-secondary);
  margin-bottom:  0.75rem;
  display:        block;
  line-height:    1.5;
}
 
.post-series-toc-list { list-style: none; }
 
.post-series-toc-link {
  font-family:     var(--font-ui);
  font-weight:     300;
  font-size:       0.6rem;
  letter-spacing:  0.1em;
  text-transform:  uppercase;
  line-height:     2.0;
  color:           var(--text-faint);
  text-decoration: none;
  display:         block;
  transition:      color 200ms ease;
}
a.post-series-toc-link:hover { color: var(--text); }
 
.post-series-toc-item.--current .post-series-toc-link {
  color: var(--text);
}
 
.post-series-toc-part {
  opacity:      0.55;
  margin-right: 0.35em;
}
 
.post-series-toc-title {
  /* erbt alles vom Link — kein extra Styling nötig */
}
/* ── Prose — Kern des Beitrags ── */
.post-prose {
  min-width: 0; /* verhindert Überlauf im Grid */
}
.post-page-layout > .post-prose {
  grid-column: 1;
}

.post-prose p {
  font-family:   var(--font-body);
  font-weight:   300;
  font-size:     clamp(1.05rem, 1.2vw, 1.2rem);
  line-height:   1.95;
  color:         var(--text);
  margin-bottom: 1.75rem;
  max-width:     var(--prose-w);
}

.post-prose h2 {
  font-family:    var(--font-display);
  font-style:     italic;
  font-weight:    400;
  font-size:      clamp(1.7rem, 2.5vw, 2.5rem);
  line-height:    1.15;
  letter-spacing: -0.025em;
  color:          var(--text);
  margin-top:     clamp(3.5rem, 6vw, 5rem);
  margin-bottom:  1.5rem;
  max-width:      var(--prose-w);
}

.post-prose h3 {
  font-family:    var(--font-display);
  font-style:     italic;
  font-weight:    400;
  font-size:      clamp(1.3rem, 1.7vw, 1.7rem);
  line-height:    1.25;
  color:          var(--text);
  margin-top:     2.5rem;
  margin-bottom:  1rem;
  max-width:      var(--prose-w);
}

/* Drop Cap — erste Zeile (§ 14: --text, nie --accent) */
.post-prose > p:first-of-type::first-letter {
  float:       left;
  font-family: var(--font-display);
  font-style:  italic;
  font-weight: 400;
  font-size:   5.5rem;
  line-height: 0.8;
  margin:      0.05em 0.1em -0.05em 0;
  color:       var(--text);
}

/* Blockquote */
.post-prose blockquote {
  border-left: 1px solid var(--quote-line);
  padding-left: 1.75rem;
  margin: 2.5rem 0;
  max-width:    var(--prose-w);
  font-family: var(--font-body);
  font-style:  italic;
  font-weight: 300;
  font-size:   clamp(1.1rem, 1.3vw, 1.25rem);
  line-height: 1.7;
  color:       var(--text-secondary);
}
.post-prose blockquote cite {
  display:        block;
  margin-top:     0.75rem;
  font-family:    var(--font-ui);
  font-style:     normal;
  font-weight:    300;
  font-size:      0.6rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color:          var(--text-faint);
}

/* Pull-Quote — größer, Playfair */
.post-prose .pullquote {
  border-left:    1px solid var(--quote-line);
  padding-left:   2rem;
  margin:         clamp(3rem, 5vw, 4.5rem) 0;
  max-width:      var(--prose-w);
  font-family:    var(--font-display);
  font-style:     italic;
  font-weight:    400;
  font-size:      clamp(1.6rem, 2.5vw, 2.4rem);
  line-height:    1.3;
  letter-spacing: -0.02em;
  color:          var(--text);
}

/* Links im Fließtext — Underline wächst von links */
.post-prose a {
  color:            inherit;
  text-decoration:  none;
  background-image: linear-gradient(var(--text), var(--text));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size:  0% 1px;
  transition:       background-size 350ms ease;
}
.post-prose a:hover { background-size: 100% 1px; }

/* End-Ornament: 40px Strich */
.post-prose-end {
  display:       block;
  width:         40px;
  height:        1px;
  background:    var(--rule-strong);
  margin:        clamp(3.5rem, 6vw, 5rem) 0;
}

/* ── Serien-Navigation ── */
.post-series-nav {
  border-top:    1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  display:       grid;
  grid-template-columns: 1fr 1fr;
}
.post-series-nav a {
  padding:        clamp(2rem, 4vw, 3.5rem) clamp(1.5rem, 3vw, 3rem);
  text-decoration: none;
  color:          inherit;
  display:        flex;
  flex-direction: column;
  gap:            0.75rem;
  transition:     background 300ms ease;
}
.post-series-nav a:hover       { background: var(--bg-elevated); }
.post-series-nav a + a         { border-left: 1px solid var(--rule); text-align: right; }
.post-series-nav-label {
  font-family:    var(--font-ui);
  font-weight:    300;
  font-size:      0.55rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color:          var(--text-faint);
}
.post-series-nav-title {
  font-family:    var(--font-display);
  font-style:     italic;
  font-weight:    400;
  font-size:      clamp(1.1rem, 1.5vw, 1.5rem);
  line-height:    1.2;
  color:          var(--text);
}

/* ── Verwandte Beiträge ── */
.post-related {
  border-top: 1px solid var(--rule);
  margin-top: var(--space-hero);
}
.post-related-head {
  padding:    clamp(2.5rem, 5vw, 4rem) clamp(1.5rem, 4vw, 3rem);
  max-width:  var(--max-w);
  margin-inline: auto;
}

/* Zwei verwandte Beiträge im Split-Layout — gleiche Klassen wie .post-split */
.post-related-grid {
  display:  grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--rule);
}
.post-related-item {
  display:         flex;
  flex-direction:  column;
  text-decoration: none;
  color:           inherit;
  border-right:    1px solid var(--rule);
  transition:      background 350ms ease;
}
.post-related-item:last-child { border-right: none; }
.post-related-item:hover      { background: var(--bg-elevated); }

.post-related-image {
  overflow: hidden;
  flex-shrink: 0;
}
.post-related-image img {
  width:       100%;
  height:      clamp(180px, 22vw, 280px);
  object-fit:  cover;
  display:     block;
  transition:  filter 500ms ease;
}
.post-related-item:hover .post-related-image img { filter: brightness(0.88); }

.post-related-body {
  padding:   clamp(1.75rem, 3vw, 3rem);
  flex:      1;
  display:   flex;
  flex-direction: column;
  justify-content: flex-end;
}
.post-related-meta {
  font-family:    var(--font-ui);
  font-weight:    300;
  font-size:      0.6rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color:          var(--text-faint);
  display:        flex;
  align-items:    center;
  margin-bottom:  0.85rem;
}
.post-related-title {
  font-family:    var(--font-display);
  font-style:     italic;
  font-weight:    400;
  font-size:      clamp(1.3rem, 2vw, 2rem);
  line-height:    1.1;
  letter-spacing: -0.02em;
  color:          var(--text);
  transition:     color 300ms ease;
}
.post-related-item:hover .post-related-title { color: var(--text-secondary); }

/* ── Responsive Post ── */
@media (max-width: 960px) {
  .post-page-layout {
    grid-template-columns: 1fr;
  }
  .post-toc { display: none; } /* TOC auf Tablet/Mobile aus */
}
@media (max-width: 768px) {
  .post-page-title { font-size: clamp(2.5rem, 10vw, 4rem); max-width: none; }
  .post-page-cover img { max-height: 50vw; }
  .post-series-nav { grid-template-columns: 1fr; }
  .post-series-nav a + a { border-left: none; border-top: 1px solid var(--rule); text-align: left; }
  .post-related-grid { grid-template-columns: 1fr; }
  .post-related-item { border-right: none; border-bottom: 1px solid var(--rule); }
  .post-related-item:last-child { border-bottom: none; }
}
/* ════════════════════════════════════════════════════════════════════════════
   THORENUS — KATEGORIE-SEITEN
   Enthält: cat-page-header · cat-lead · cat-posts-grid · cat-empty
   ════════════════════════════════════════════════════════════════════════════ */


/* ─── Category Accent Variable ─────────────────────────────────────────────
   Jede Kategorie-Seite setzt --cat-current via inline <style>.
   Alle Komponenten greifen auf diese Variable zu.
   ─────────────────────────────────────────────────────────────────────────── */
:root {
  --cat-current: var(--cat-allgemein);
}


/* ─── Page Header ──────────────────────────────────────────────────────────── */

.cat-page-header {
  padding-top:    clamp(8rem, 18vh, 13rem);
  padding-bottom: clamp(3.5rem, 7vh, 5rem);
}

.cat-page-header-inner {
  max-width: var(--prose-w);
}

/* Eyebrow: label + farbige Linie */
.cat-page-eyebrow {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  margin-bottom: clamp(1.8rem, 4vh, 2.8rem);
}

.cat-page-accent-bar {
  display: block;
  width: 40px;
  height: 1px;
  background: var(--cat-current);
  flex-shrink: 0;
}

/* Großer Kategorie-Titel */
.cat-page-title {
  font-family:     var(--font-display);
  font-style:      italic;
  font-weight:     400;
  font-size:       clamp(3rem, 7vw, 6.5rem);
  line-height:     0.95;
  letter-spacing:  -0.035em;
  color:           var(--text);
  margin:          0 0 clamp(1.5rem, 3.5vh, 2.5rem);
}

/* Kurzbeschreibung */
.cat-page-desc {
  font-family:     var(--font-body);
  font-style:      italic;
  font-weight:     300;
  font-size:       clamp(1rem, 1.8vw, 1.15rem);
  line-height:     1.75;
  color:           var(--text-secondary);
  margin:          0 0 clamp(2rem, 4vh, 3rem);
  max-width:       520px;
}

/* Count-Zeile */
.cat-page-count-row {
  display:     flex;
  align-items: center;
  gap:         1.5rem;
}

.cat-page-count-rule {
  flex:        1;
  height:      1px;
  background:  var(--rule);
  max-width:   80px;
}

.cat-page-all-link {
  color:           var(--text-faint);
  text-decoration: none;
  transition:      color 250ms ease;
}
.cat-page-all-link:hover { color: var(--text); }


/* ─── Section Rule nach Header ──────────────────────────────────────────────── */
.cat-lead-rule {
  height:       0;
  border:       none;
  border-top:   1px solid var(--rule);
  margin:       0;
}


/* ─── Lead Post (erster / aktuellster Beitrag) ──────────────────────────────── */
.cat-lead-section {
  padding-bottom: 0;
}

.cat-lead {
  display:    grid;
  grid-template-columns: 45fr 55fr;
  min-height: 460px;
  border-top: none;
  border-bottom: 1px solid var(--rule);
}

.cat-lead--no-image {
  grid-template-columns: 1fr;
}

/* Bild */
.cat-lead-image-wrap {
  overflow: hidden;
  border-right: 1px solid var(--rule);
}
.cat-lead-image-wrap a { display: block; height: 100%; }
.cat-lead-image-wrap img {
  width:        100%;
  height:       100%;
  object-fit:   cover;
  display:      block;
  transition:   filter 500ms ease;
}
.cat-lead:hover .cat-lead-image-wrap img { filter: brightness(0.87); }

/* Text-Bereich */
.cat-lead-body {
  display:        flex;
  flex-direction: column;
  justify-content: center;
  padding:        clamp(3rem, 6vw, 6rem) clamp(3rem, 5vw, 6rem);
}

/* Meta-Zeile mit Kategorie-Akzent */
.cat-lead-meta {
  display:     flex;
  align-items: center;
  gap:         0.8rem;
  margin-bottom: 1rem;
}

/* Farbiger 18px Strich — Kategorie-Identifikation */
.cat-accent-mark {
  display:      inline-block;
  width:        18px;
  height:       1px;
  background:   var(--cat-current);
  flex-shrink:  0;
}

.cat-lead-label { color: var(--text-faint); }
.cat-lead-date  { color: var(--text-faint); }

.cat-lead-series {
  color:          var(--text-faint);
  margin-bottom:  0.75rem;
}

/* Titel */
.cat-lead-title {
  font-family:     var(--font-display);
  font-style:      italic;
  font-weight:     400;
  font-size:       clamp(1.8rem, 3vw, 3rem);
  line-height:     1.05;
  letter-spacing:  -0.025em;
  color:           var(--text);
  margin:          0 0 1.25rem;
}
.cat-lead-title a {
  color:           inherit;
  text-decoration: none;
  transition:      color 250ms ease;
}
.cat-lead-title a:hover { color: var(--text-secondary); }

/* Excerpt */
.cat-lead-excerpt {
  font-family:   var(--font-body);
  font-size:     1rem;
  line-height:   1.8;
  color:         var(--text-secondary);
  margin:        0 0 2rem;
  max-width:     420px;
}

/* Read-More Link */
.cat-lead-readmore {
  color:           var(--text-faint);
  text-decoration: none;
  display:         inline-flex;
  align-items:     center;
  gap:             0.6rem;
  transition:      color 250ms ease;
  align-self:      flex-start;
}
.cat-lead-readmore::after {
  content:   '→';
  font-size: 0.8em;
}
.cat-lead-readmore:hover { color: var(--text); }


/* ─── Post Grid (restliche Beiträge) ────────────────────────────────────────── */
.cat-posts-section {
  padding-top:    0;
  padding-bottom: var(--space-2xl);
}

.cat-posts-grid {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  border-top:            1px solid var(--rule);
}

/* Einzelner Grid-Post */
.cat-grid-post {
  border-right:   1px solid var(--rule);
  border-bottom:  1px solid var(--rule);
  display:        flex;
  flex-direction: column;
}
.cat-grid-post:nth-child(3n) { border-right: none; }

/* Bild */
.cat-grid-post-image {
  display: block;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  border-bottom: 1px solid var(--rule);
  flex-shrink: 0;
}
.cat-grid-post-image img {
  width:      100%;
  height:     100%;
  object-fit: cover;
  display:    block;
  transition: filter 400ms ease;
}
.cat-grid-post:hover .cat-grid-post-image img { filter: brightness(0.82); }

/* Text */
.cat-grid-post-body {
  padding:        clamp(1.8rem, 3vw, 3rem) clamp(1.5rem, 2.5vw, 2.5rem);
  display:        flex;
  flex-direction: column;
  flex:           1;
}
.cat-grid-post-body--full {
  padding-top: clamp(2.5rem, 4vw, 3.5rem);
}

/* Meta */
.cat-grid-post-meta {
  display:       flex;
  align-items:   center;
  gap:           0.75rem;
  margin-bottom: 0.85rem;
}

/* Titel */
.cat-grid-post-title {
  font-family:    var(--font-display);
  font-style:     italic;
  font-weight:    400;
  font-size:      clamp(1.1rem, 1.6vw, 1.55rem);
  line-height:    1.15;
  letter-spacing: -0.015em;
  color:          var(--text);
  margin:         0 0 0.85rem;
  flex:           1;
}
.cat-grid-post-title a {
  color:           inherit;
  text-decoration: none;
  transition:      color 250ms ease;
}
.cat-grid-post-title a:hover { color: var(--text-secondary); }

/* Excerpt */
.cat-grid-post-excerpt {
  font-family: var(--font-body);
  font-size:   0.875rem;
  line-height: 1.75;
  color:       var(--text-muted);
  margin:      0;
  display:     -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow:    hidden;
}


/* ─── Empty State ───────────────────────────────────────────────────────────── */
.cat-empty-state {
  padding:    var(--space-3xl) 0 var(--space-2xl);
  text-align: center;
}

.cat-empty-text {
  font-family:   var(--font-body);
  font-style:    italic;
  font-size:     1.1rem;
  color:         var(--text-muted);
  margin:        var(--space-lg) 0 var(--space-md);
}

.cat-empty-link {
  color:           var(--text-faint);
  text-decoration: none;
  transition:      color 250ms ease;
}
.cat-empty-link:hover { color: var(--text); }


/* ─── Ornament-Linie (generisch) ────────────────────────────────────────────── */
.ornament-line {
  display:    block;
  width:      40px;
  height:     1px;
  background: var(--rule-strong);
  margin:     0 auto;
}


/* ─── Responsive ────────────────────────────────────────────────────────────── */

/* Tablet */
@media (max-width: 900px) {
  .cat-lead {
    grid-template-columns: 1fr;
    min-height: auto;
  }
  .cat-lead-image-wrap {
    border-right:  none;
    border-bottom: 1px solid var(--rule);
    aspect-ratio:  16 / 9;
  }
  .cat-lead-image-wrap a { height: 100%; }

  .cat-posts-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .cat-grid-post:nth-child(3n) { border-right: 1px solid var(--rule); }
  .cat-grid-post:nth-child(2n) { border-right: none; }
}

/* Mobile */
@media (max-width: 600px) {
  .cat-page-header {
    padding-top: clamp(6rem, 14vh, 8rem);
  }

  .cat-page-title {
    font-size: clamp(2.8rem, 12vw, 4.5rem);
  }

  .cat-posts-grid {
    grid-template-columns: 1fr;
  }
  .cat-grid-post { border-right: none; }
  .cat-grid-post:nth-child(3n) { border-right: none; }
  .cat-grid-post:nth-child(2n) { border-right: none; }

  .cat-page-count-row { flex-wrap: wrap; gap: 1rem; }
  .cat-page-count-rule { display: none; }
}

/* ════════════════════════════════════════════════════════════════════════════
   Ende Kategorie-Seiten
   ════════════════════════════════════════════════════════════════════════════ */
/* ── Theme-Toggle Icons ──────────────────────────────────────── */
.icon-sun  { display: none;  }
.icon-moon { display: block; }
[data-theme="dark"] .icon-sun  { display: block; }
[data-theme="dark"] .icon-moon { display: none;  }

/* ── Floating Scroll-to-Top ──────────────────────────────────── */
/* Erscheint nach 400px Scroll · kein border-radius · kein shadow */
#scroll-top {
  position:        fixed;
  bottom:          clamp(1.5rem, 3vw, 2.5rem);
  right:           clamp(1.5rem, 3vw, 2.5rem);
  width:           40px;
  height:          40px;
  background:      var(--bg);
  border:          1px solid var(--rule-strong);
  cursor:          pointer;
  display:         flex;
  align-items:     center;
  justify-content: center;
  padding:         0;
  opacity:         0;
  pointer-events:  none;
  transform:       translateY(8px);
  transition:      opacity 300ms ease, transform 300ms ease,
                   border-color 250ms ease, background 300ms ease;
  z-index:         90;
}
#scroll-top.--visible {
  opacity:        1;
  pointer-events: all;
  transform:      translateY(0);
}
#scroll-top:hover {
  border-color: var(--text-muted);
  background:   var(--bg-elevated);
}
#scroll-top svg {
  width:  14px;
  height: 14px;
  stroke: var(--text-muted);
  fill:   none;
  transition: stroke 250ms ease;
}
#scroll-top:hover svg { stroke: var(--text); }

/* Dark Mode */
[data-theme="dark"] #scroll-top {
  background:   var(--bg-elevated);
  border-color: var(--rule);
}
[data-theme="dark"] #scroll-top:hover {
  border-color: var(--rule-strong);
  background:   var(--bg-deep);
}

/* ── Mobile Archive-Filter: horizontal scrollbar ─────────────── */
@media (max-width: 768px) {
  .archive-filter {
    flex-wrap:                  nowrap;
    overflow-x:                 auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width:            none;
    padding-bottom:             0.75rem;
    /* Fade-out rechts zeigt dass mehr scrollbar ist */
    -webkit-mask-image:         linear-gradient(to right, black 85%, transparent 100%);
    mask-image:                 linear-gradient(to right, black 85%, transparent 100%);
  }
  .archive-filter::-webkit-scrollbar { display: none; }
}
/* Leerer Slot — hält das Grid-Gleichgewicht, bleibt unsichtbar */
.post-series-nav-slot.--empty {
  display: block; /* Im Grid sichtbar als leere Zelle */
}
 
/* Nächster-Beitrag-Link: rechtsbündig + Trennlinie wenn linker Slot belegt */
.post-series-nav a.--next {
  border-left: 1px solid var(--rule);
  text-align: right;
}
 
/* Falls nur der Nächste-Link vorhanden (leerer linker Slot):
   kein border-left, damit keine einsame Trennlinie erscheint */
.post-series-nav-slot.--empty + a.--next {
  border-left: none;
  text-align: left; /* Optional: linksbündig wenn allein */
}
 
@media (max-width: 768px) {
  .post-series-nav a.--next {
    border-left: none;
    border-top: 1px solid var(--rule);
    text-align: left;
  }
  .post-series-nav-slot.--empty + a.--next {
    border-top: none;
  }
}
 
/* ── Post-Nav Bild ──────────────────────────────────────────────
   Bild bricht per negativem Margin aus dem a-Padding aus,
   bleibt aber visuell randlos. Text kommt darunter mit gap.
   ─────────────────────────────────────────────────────────────── */
.post-series-nav-img {
  margin-top:    calc(-1 * clamp(2rem, 4vw, 3.5rem));
  margin-left:   calc(-1 * clamp(1.5rem, 3vw, 3rem));
  margin-right:  calc(-1 * clamp(1.5rem, 3vw, 3rem));
  margin-bottom: clamp(1rem, 2vw, 1.5rem);
  overflow:      hidden;
}
.post-series-nav-img img {
  width:       100%;
  height:      clamp(140px, 18vw, 220px);
  object-fit:  cover;
  display:     block;
  transition:  filter 500ms ease;
}
.post-series-nav a:hover .post-series-nav-img img {
  filter: brightness(0.85);
}

/* Text-Wrapper: label + title in flex-column */
.post-series-nav-text {
  display:        flex;
  flex-direction: column;
  gap:            0.6rem;
}

/* Rechts-Ausrichtung für --next Slot */
.post-series-nav a.--next .post-series-nav-text {
  align-items: flex-end;
}
@media (max-width: 768px) {
  .post-series-nav a.--next .post-series-nav-text {
    align-items: flex-start;
  }
}