/*
Theme Name: Vor die Lage
Theme URI: https://www.vor-die-lage.de
Author: Robert Osten
Author URI: https://www.vor-die-lage.de
Description: Eigenständiges, klassisches WordPress-Theme für den Fachblog "Vor die Lage" (Business Resilience) von Robert Osten. Solo-Blog-Layout (Paper/Ink/Stone/Moss), keine Podcast-Bühne.
Version: 1.5.3
Requires at least: 6.0
Requires PHP: 7.4
Tested up to: 6.6
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: br-blog
*/

/* ============================================================
   SCHRIFT — selbst gehostet (Inter Variable, latin + latin-ext)
   Keine Drittanbieter-Verbindungen: kein Google-Fonts-Link, alles aus
   assets/fonts/ (Quelle: @fontsource-variable/inter, SIL OFL 1.1, siehe
   assets/fonts/OFL.txt). Eine Variable-Font-Datei je Subset/Stil deckt
   das komplette Gewichtsspektrum 100–900 ab (genutzt: 200–700).
   ============================================================ */
@font-face{
  font-family:'Inter';font-style:normal;font-display:swap;font-weight:100 900;
  src:url('assets/fonts/inter-latin-wght-normal.woff2') format('woff2-variations'),
      url('assets/fonts/inter-latin-wght-normal.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Inter';font-style:normal;font-display:swap;font-weight:100 900;
  src:url('assets/fonts/inter-latin-ext-wght-normal.woff2') format('woff2-variations'),
      url('assets/fonts/inter-latin-ext-wght-normal.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'Inter';font-style:italic;font-display:swap;font-weight:100 900;
  src:url('assets/fonts/inter-latin-wght-italic.woff2') format('woff2-variations'),
      url('assets/fonts/inter-latin-wght-italic.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Inter';font-style:italic;font-display:swap;font-weight:100 900;
  src:url('assets/fonts/inter-latin-ext-wght-italic.woff2') format('woff2-variations'),
      url('assets/fonts/inter-latin-ext-wght-italic.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* ============================================================
   DESIGN TOKENS — Paper / Ink / Stone / Moss
   ============================================================ */
:root{
  --white:#fff;--paper:#f5f5f3;--mist:#ebebe7;
  --ink:#1d1d1f;--ink-70:#3a3a3c;--gray:#6e6e73;--hair:rgba(0,0,0,.08);
  --stone:#a99e8b;--stone-soft:#e9e4da;--moss:#6f7763;--moss-deep:#4c5344;
  --r:28px;--rm:20px;--ease:cubic-bezier(.22,.61,.2,1);
  --font:'Inter',-apple-system,BlinkMacSystemFont,'SF Pro Display',sans-serif;
  --br-nav-h:56px;--br-admin-offset:0px;
}
/* WP-Admin-Leiste für eingeloggte Nutzer: verschiebt unsere fixe Nav (und
   die sticky KI-Bühne) exakt um ihre Höhe nach unten, damit sich nichts
   gegenseitig verdeckt. Unter 600px ist die Adminleiste selbst nicht mehr
   fixiert (WP-Kern-Verhalten) und nimmt beim Scrollen keinen dauerhaften
   Platz mehr ein — dort bleibt unsere Nav daher bei 0 (nur ganz oben auf
   der Seite minimale, unkritische Überlappung). */
.admin-bar{--br-admin-offset:32px}
@media(max-width:782px){
  .admin-bar{--br-admin-offset:46px}
}
@media(max-width:600px){
  .admin-bar{--br-admin-offset:0px}
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-font-smoothing:antialiased}
html{scroll-behavior:smooth}
body{font-family:var(--font);background:var(--white);color:var(--ink);font-size:17px;line-height:1.5;overflow-x:clip}
/* Body-Scroll-Lock bei offenem Burger-Sheet (main.js setzt position:fixed
   inline; diese Klasse ergänzt nur die Breite, die durch position:fixed
   sonst verlorengeht). */
body.menu-open-lock{width:100%}
img{max-width:100%;display:block}
::selection{background:var(--stone-soft)}
.gpu{will-change:transform,opacity;backface-visibility:hidden}
.wrap{max-width:1120px;margin:0 auto;
  padding:0 max(clamp(22px,5vw,48px),env(safe-area-inset-right)) 0 max(clamp(22px,5vw,48px),env(safe-area-inset-left))}
.wrap-n{max-width:780px;margin:0 auto;
  padding:0 max(clamp(22px,5vw,48px),env(safe-area-inset-right)) 0 max(clamp(22px,5vw,48px),env(safe-area-inset-left))}
.center{text-align:center}
.deski{display:inline}

/* Skip link */
.skip-link{position:absolute;left:-9999px;top:auto;background:var(--ink);color:#fff;
  padding:12px 20px;z-index:200;border-radius:0 0 8px 0;font-size:14px;font-weight:600}
.skip-link:focus{left:0;top:0}
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);
  white-space:nowrap;border:0;padding:0;margin:-1px}

/* Scroll-Reveal ist reine Progressive Enhancement: Inhalte sind IMMER
   sichtbar, solange kein Skript bestätigt, dass es einen funktionierenden
   IntersectionObserver gibt (siehe html.js-Klasse, per Inline-Script im
   <head> von header.php gesetzt). So kann eine nie ausgelöste .rv.in-Klasse
   (blockiertes/kaputtes Skript, sehr alter Browser, Bot-Vorschau …) niemals
   dauerhaft unsichtbaren Content erzeugen. */
.rv{opacity:1;transform:none}
html.js .rv{opacity:0;transform:translateY(24px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
html.js .rv.in{opacity:1;transform:none}
.d1{transition-delay:.1s}.d2{transition-delay:.2s}
.li{opacity:0;animation:liIn 1.1s var(--ease) forwards}
.l1{animation-delay:.05s}.l2{animation-delay:.16s}.l3{animation-delay:.3s}.l4{animation-delay:.46s}
@keyframes liIn{from{opacity:0;transform:translateY(28px);filter:blur(6px)}to{opacity:1;transform:none;filter:blur(0)}}
@media (prefers-reduced-motion:reduce){
  .rv,.li{opacity:1!important;transform:none!important;animation:none!important;transition:none!important;filter:none!important}
  html{scroll-behavior:auto}
  .manifest span{opacity:1!important}
  .lead.gpu{transform:none!important;opacity:1!important}
  .hero-media{transform:none!important}
}

/* Nav */
.nav{position:fixed;inset:0 0 auto 0;top:var(--br-admin-offset);z-index:60;transition:background .5s var(--ease),box-shadow .5s var(--ease),top .2s var(--ease)}
.nav.solid{background:rgba(255,255,255,.72);backdrop-filter:saturate(1.7) blur(20px);
  -webkit-backdrop-filter:saturate(1.7) blur(20px);box-shadow:0 1px 0 var(--hair)}
.nav-in{max-width:1120px;margin:0 auto;height:56px;
  padding:0 max(clamp(22px,5vw,48px),env(safe-area-inset-right)) 0 max(clamp(22px,5vw,48px),env(safe-area-inset-left));
  display:flex;align-items:center;justify-content:space-between}
.brand{font-weight:600;font-size:15px;letter-spacing:-.01em;cursor:pointer;color:inherit;text-decoration:none;background:none;border:0;display:inline-flex;align-items:center;min-width:0;flex:1 1 auto;overflow:hidden}
.brand-logo{height:clamp(15px,5.2vw,22px);width:auto;max-width:100%;display:block;color:var(--ink)}
/* Nav-Logo: Signet + Wortmarke „Vor die Lage" (keine Unterzeile), in der
   56px hohen Leiste auf feste ca. 38px Höhe gesetzt (Signet dominant) —
   auf sehr schmalen Viewports leicht reduziert, damit links Logo + rechts
   Burger nie eng werden. */
.brand-logo-nav{height:38px;max-width:62vw}
@media(max-width:360px){
  .brand-logo-nav{height:32px}
}
.brand-custom{display:inline-flex;align-items:center}
.brand-custom img,.custom-logo-link img{max-height:32px;width:auto;display:block}
.nav-links{display:flex;gap:30px;list-style:none}
.nav-link{font-size:13.5px;color:var(--gray);cursor:pointer;transition:color .3s;background:none;border:0;font-family:inherit;text-decoration:none}
.nav-link:hover{color:var(--ink)}
[tabindex]:focus-visible,a:focus-visible,button:focus-visible{outline:2px solid var(--moss);outline-offset:4px;border-radius:4px}
.burger{display:none;width:44px;height:44px;cursor:pointer;position:relative;background:none;border:0;flex:none;margin-left:auto;margin-right:-6px}
.burger i{position:absolute;left:12px;right:12px;height:1.5px;background:var(--ink);transition:.4s var(--ease);font-style:normal}
.burger i:first-child{top:18px}.burger i:last-child{top:25px}
.burger.x i:first-child{top:21.5px;transform:rotate(45deg)}
.burger.x i:last-child{top:21.5px;transform:rotate(-45deg)}
.sheet{display:none}

/* Typo */
.eyebrow{font-size:12.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--stone);margin-bottom:20px}
/* Lange deutsche Komposita (z. B. „Abhängigkeiten") dürfen auf schmalen
   Viewports nie über den Kartenrand hinauslaufen. Automatische Trennung
   mitten im Wort wirkt auf Desktop/Tablet-Überschriften aber billig, daher
   nur als Notnagel auf sehr schmalen Viewports (≤420px) aktiv; darüber
   hyphens:manual (nur an echten weichen Trennstellen, z. B. &shy;) plus
   Zeilenumbruch als Sicherheitsnetz, falls eine Zeile doch zu lang wird. */
.mega,.h2,.lead-t,.p-t,.entry-title,.closing-t{
  hyphens:manual;-webkit-hyphens:manual;-ms-hyphens:manual;
  overflow-wrap:break-word;word-break:break-word;
}
@media(max-width:420px){
  .mega,.h2,.lead-t,.p-t,.entry-title,.closing-t{
    hyphens:auto;-webkit-hyphens:auto;-ms-hyphens:auto;
  }
}
.mega{font-size:clamp(46px,7.6vw,104px);line-height:1.02;letter-spacing:-.032em;font-weight:700}
.mega em{font-style:normal;color:var(--stone)}
.lede{margin-top:24px;font-size:clamp(18px,2.2vw,24px);line-height:1.4;color:var(--gray);letter-spacing:-.012em}
.h2{font-size:clamp(32px,4.6vw,54px);letter-spacing:-.028em;line-height:1.06;font-weight:700;color:var(--ink)}
.h2-sub{margin-top:16px;font-size:clamp(16px,1.9vw,20px);color:var(--gray);max-width:560px}

/* Hero — Kunden-Illustration als volles Hintergrundbild, Text links im
   hellen Nebel-/Papierbereich. Eigene, hero-lokale Papierfarbe (aus dem Bild
   abgetastet, ca. #f2ecdc) statt der globalen --paper: verhindert eine
   sichtbare Kante zwischen Bildrand und Sektionshintergrund, ohne den Rest
   der Seite (der weiterhin --paper nutzt) zu beeinflussen. */
.hero-photo{--hero-paper:#f2ecdc;position:relative;width:100vw;margin-left:calc(50% - 50vw);
  height:clamp(560px,88svh,900px);overflow:clip;background:var(--hero-paper);
  display:block;text-align:left}
.hero-media{position:absolute;inset:0;z-index:0}
.hero-img{width:100%;height:100%;object-fit:cover;object-position:70% 50%;display:block}
/* Zwei zusätzliche Scrims, unabhängig vom exakten Bildausschnitt (der je
   nach Viewport-Seitenverhältnis unterschiedlich stark beschneidet):
   (1) ein Links-Scrim, der den Textbereich immer lesbar hält, auch wenn
   durch object-fit:cover an schmaleren/höheren Viewports mehr vom Weg/den
   Hügeln statt vom hellen Nebel sichtbar ist; (2) ein Kopf-Scrim, der die
   fixe Nav (dunkler Text) auch dann lesbar hält, wenn dort zufällig der
   dunkle Sturm im Bild liegt. Beide sind bewusst dezent (Papierton, keine
   harte Kante) statt eines pauschalen Bild-Abdunkelns. */
.hero-scrim-x{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(to right,var(--hero-paper) 0%,rgba(242,236,220,.72) 34%,rgba(242,236,220,0) 64%)}
/* Auf mittleren Breiten (Tablet/kleiner Laptop) wandert der rechte Rand des
   Hero-Textblocks prozentual näher an das Ende des Scrims heran als bei
   sehr breiten oder sehr schmalen (mobil: eigener Absatz auf Papier statt
   Bild) Viewports — ohne breiteren Verlauf blieben die letzten Zeilen der
   längeren Unterzeile über dem Bild schwer lesbar. */
@media(min-width:761px) and (max-width:1180px){
  .hero-scrim-x{background:linear-gradient(to right,var(--hero-paper) 0%,rgba(242,236,220,.78) 42%,rgba(242,236,220,0) 80%)}
}
.hero-scrim-y{position:absolute;left:0;right:0;top:0;height:130px;z-index:1;pointer-events:none;
  background:linear-gradient(to bottom,rgba(242,236,220,.65) 0%,rgba(242,236,220,0) 100%)}
/* Weicher Übergang unten: endet in --white, weil das die tatsächliche
   Hintergrundfarbe der folgenden Sektion (.leadwrap, kein eigener
   background) ist — vorher endete der Verlauf in --paper, was auf einem
   weißen body eine sichtbare Kante ergab. */
.hero-fade{position:absolute;left:0;right:0;bottom:0;height:16%;min-height:80px;z-index:1;
  pointer-events:none;background:linear-gradient(to bottom,rgba(242,236,220,0) 0%,var(--white) 96%)}
/* Text sitzt in einem echten .wrap (gleiche max-width/Padding wie die Nav),
   damit seine linke Kante exakt mit Logo/Nav-Inhalt fluchtet statt einem
   eigenen, abweichenden Randmaß zu folgen. */
.hero-text-outer{position:absolute;inset:0;z-index:2;display:flex;align-items:center;pointer-events:none}
.hero-text-outer .wrap{width:100%;pointer-events:none}
.hero-text{pointer-events:auto;max-width:560px}
.hero-h1{font-size:clamp(30px,4.2vw,46px);line-height:1.12;letter-spacing:-.026em;font-weight:700;color:var(--ink)}
.hero-claim{margin-top:14px;font-size:clamp(19px,2.3vw,25px);letter-spacing:-.01em;color:var(--moss-deep);font-weight:500}
.hero-photo .lede{margin-top:16px;font-size:clamp(15.5px,1.6vw,17.5px);max-width:500px}
.hero-photo .hero-cta{justify-content:flex-start;align-items:center;margin-top:28px;gap:22px}
.hero-photo .hero-cta .pill{height:50px;padding:0 28px}
@media(max-width:760px){
  .hero-photo{height:auto;min-height:0;display:flex;flex-direction:column}
  .hero-media{position:relative;inset:auto;height:46svh;min-height:280px}
  .hero-fade,.hero-scrim-x{display:none}
  .hero-text-outer{position:static;display:block;background:var(--paper)}
  .hero-text-outer .wrap{padding-top:36px;padding-bottom:48px}
  .hero-text{max-width:none}
  .hero-photo .hero-cta{justify-content:flex-start;flex-direction:column;align-items:flex-start;gap:16px}
  .hero-photo .hero-cta .pill{width:100%;justify-content:center}
}
@media(prefers-reduced-motion:no-preference){
  .hero-img{will-change:transform}
}

/* Links & Pills */
.alink{display:inline-flex;align-items:center;gap:7px;font-size:15px;font-weight:500;cursor:pointer;
  color:var(--ink);transition:opacity .3s;text-decoration:none;background:none;border:0;font-family:inherit}
.alink svg{transition:transform .35s var(--ease)}
.alink:hover svg{transform:translateX(4px)}.alink:hover{opacity:.65}
.alink-big{font-size:17px}.alink-soft{color:var(--gray)}
.pills{margin-top:32px;display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.pill{display:inline-flex;align-items:center;height:46px;padding:0 26px;border-radius:100px;
  font-size:14.5px;font-weight:500;text-decoration:none;transition:transform .35s var(--ease),opacity .3s}
.pill:hover{transform:translateY(-2px);opacity:.9}
.pill-ink{background:var(--ink);color:#fff}
.pill-ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px var(--hair)}
.pill-ghost:hover{background:var(--paper)}

/* Leitartikel */
/* Anker-Ziele (Footer-/Nav-Links auf #beitraege, #themen, #autor, #ki):
   Offset für fixe Nav + ggf. WP-Adminleiste, damit die Zielsektion beim
   Sprung nicht unter der Nav verschwindet. */
#beitraege,#themen,#archiv,#einordnung,#autor{scroll-margin-top:calc(var(--br-nav-h) + var(--br-admin-offset) + 12px)}
.leadwrap{padding:0 0 clamp(80px,10vw,130px)}
.lead{display:flex;flex-direction:column;border-radius:var(--r);padding:clamp(24px,5.4vw,74px);
  min-height:420px;text-decoration:none;position:relative;overflow:clip;
  transition:box-shadow .5s var(--ease);color:#fff}
.lead:hover{box-shadow:0 30px 70px -30px rgba(0,0,0,.32)}
.lead-top{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.chip{font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;padding:6px 13px;
  border-radius:100px;background:rgba(255,255,255,.14)}
.tone-stone .chip{background:rgba(0,0,0,.08)}
.lead-meta{font-size:12.5px;opacity:.6}
.lead-t{margin-top:auto;font-size:clamp(26px,4.6vw,56px);letter-spacing:-.03em;line-height:1.05;
  font-weight:700;padding-top:48px;color:inherit}
.lead-t span{opacity:.55;font-weight:600;display:block}
.lead-d{margin-top:18px;max-width:640px;font-size:15.5px;line-height:1.65;opacity:.78}
.lead .p-r{margin-top:26px}

/* Filter */
.filters{margin:44px 0 26px;display:flex;gap:10px;flex-wrap:wrap}
.filter{display:inline-block;font-size:13px;font-weight:500;padding:9px 16px;border-radius:100px;cursor:pointer;
  color:var(--gray);box-shadow:inset 0 0 0 1px var(--hair);transition:.3s var(--ease);background:none;
  border:0;font-family:inherit;text-decoration:none}
.filter:hover{color:var(--ink)}
.filter.on{background:var(--ink);color:#fff;box-shadow:none}

/* Beitragskarten */
.p-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
/* 6 Karten unter dem Leitartikel füllen zwei volle 3er-Reihen symmetrisch —
   ein schlichtes 3-Spalten-Grid reicht, kein Spalten-Trick nötig. */
.p-grid-3{grid-template-columns:repeat(3,1fr);margin-top:18px}
.post{border-radius:var(--rm);padding:clamp(28px,3.4vw,44px);min-height:320px;
  display:flex;flex-direction:column;text-decoration:none;position:relative;overflow:clip;
  transition:transform .5s var(--ease),box-shadow .5s var(--ease);color:#fff}
.post:hover{transform:translateY(-6px);box-shadow:0 24px 60px -28px rgba(0,0,0,.26)}
.post > :not(.card-bg),.lead > :not(.card-bg){position:relative;z-index:1}
.card-bg{position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover;
  object-position:center top;opacity:.34;filter:saturate(.85);
  mask-image:linear-gradient(to bottom,#000 0%,rgba(0,0,0,.5) 42%,transparent 78%);
  -webkit-mask-image:linear-gradient(to bottom,#000 0%,rgba(0,0,0,.5) 42%,transparent 78%);
  transition:transform .7s var(--ease),opacity .5s var(--ease)}
.tone-stone .card-bg{opacity:.5;filter:saturate(.8)}
.post:hover .card-bg,.lead:hover .card-bg{transform:scale(1.045);opacity:.42}
.tone-stone:hover .card-bg{opacity:.58}
.p-k{font-size:11.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;opacity:.6}
.p-t{margin-top:auto;font-size:clamp(21px,2.3vw,28px);letter-spacing:-.022em;line-height:1.15;
  font-weight:700;padding-top:38px;color:inherit}
.p-t span{opacity:.55;font-weight:600;display:block}
/* Im 3er-Raster stehen die Karten enger, dadurch brechen lange
   Wörter (z. B. „Angriffsfläche", „Versorgungssicherheit") leichter um.
   Etwas kleinere, aber weiterhin klar lesbare Titelgröße vermeidet das. */
.p-grid-3 .p-t{font-size:clamp(19px,1.7vw,23px)}
.p-grid-3 .p-t span{font-size:.9em}
.p-d{margin-top:12px;font-size:14px;line-height:1.6;opacity:.75}
.p-foot{margin-top:20px;display:flex;justify-content:space-between;align-items:center;gap:14px}
.p-m{font-size:12.5px;opacity:.6}
.p-r{display:inline-flex;align-items:center;gap:7px;font-size:14px;font-weight:500;color:inherit}
.p-r svg{transition:transform .35s var(--ease)}
.post:hover .p-r svg,.lead:hover .p-r svg{transform:translateX(4px)}
.p-empty{grid-column:1/-1;padding:44px 0;color:var(--gray)}
.tone-moss{background:linear-gradient(155deg,var(--moss),var(--moss-deep))}
.tone-stone{background:linear-gradient(155deg,var(--stone-soft),#d9d1c1);color:var(--ink)}
.tone-ink{background:linear-gradient(155deg,#1b1b1d,#2b2b30)}

/* Archiv — chronologische Zeitleiste */
.archive-wrap{padding:clamp(60px,7vw,100px) 0}
.archive-timeline{margin-top:clamp(32px,4vw,48px)}
.at-year-group+.at-year-group{margin-top:8px}
.at-year{font-size:13px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--stone);
  padding:22px 0 10px;position:sticky;top:calc(var(--br-nav-h) + var(--br-admin-offset));background:var(--white);z-index:2}
.at-list{list-style:none;position:relative;padding-left:24px}
.at-list::before{content:"";position:absolute;left:4px;top:4px;bottom:4px;width:1px;background:var(--hair)}
.at-item{position:relative}
.at-dot{position:absolute;left:-24px;top:19px;width:9px;height:9px;border-radius:50%;background:var(--paper);
  box-shadow:inset 0 0 0 1.5px var(--stone);transition:background .25s var(--ease),box-shadow .25s var(--ease)}
/* Layout ohne Kategorie-Spalte: Datum | Titel+Untertitel | Lesezeit | Pfeil */
.at-link{display:grid;grid-template-columns:56px 1fr auto auto;align-items:baseline;gap:14px;
  padding:14px 10px;border-radius:12px;text-decoration:none;color:inherit;transition:background .25s var(--ease)}
.at-link:hover{background:var(--paper)}
.at-item:has(.at-link:hover) .at-dot{background:var(--moss);box-shadow:inset 0 0 0 1.5px var(--moss)}
.at-date{font-variant-numeric:tabular-nums;font-size:13px;color:var(--gray)}
.at-title{font-size:16px;font-weight:600;letter-spacing:-.01em;min-width:0}
.at-title span{display:block;font-weight:400;opacity:.6;font-size:13.5px;margin-top:1px}
.at-time{font-size:12.5px;color:var(--gray);white-space:nowrap}
.at-arrow{display:inline-flex;color:var(--gray);transition:transform .3s var(--ease)}
.at-link:hover .at-arrow{transform:translateX(4px);color:var(--ink)}
.at-more{margin-top:28px;text-align:center}
@media(max-width:720px){
  /* Zweizeilig statt dreizeilig: Titel oben als eigene volle Zeile,
     Datum + Lesezeit darunter zusammen in einer zweiten Zeile. */
  .at-link{grid-template-columns:1fr auto;grid-template-areas:"title title" "date time";
    gap:3px 10px;padding:14px 10px;min-height:44px}
  .at-title{grid-area:title}
  .at-date{grid-area:date}
  .at-time{grid-area:time;text-align:right}
  .at-arrow{display:none}
  .at-dot{top:22px}
}

/* Lagebild — Kunden-Illustration mit den sieben Themenfeldern als Marker
   entlang des goldenen Wegs (vorn „Heute" beim Beobachter bis hinten
   „Morgen" bei Stadt/Sturm). Marker-Positionen in % (siehe PHP), damit sie
   mit dem responsiven Bild mitskalieren. */
.lagebild{margin-top:clamp(40px,5vw,60px)}
.lb-photo-wrap{position:relative;max-width:1280px;margin:0 auto}
.lb-photo{display:block;width:100%;height:auto;border-radius:var(--r)}

/* Die beiden dezenten Lagebezeichnungen: kleine, ruhige Beschriftungen
   ohne auffällige Chip-Optik, gut lesbar auf hellem wie dunklem Bildgrund. */
.lb-tag{position:absolute;transform:translate(-50%,-50%);font:600 11px/1 var(--font);
  letter-spacing:.14em;text-transform:uppercase;color:#fff;
  text-shadow:0 1px 8px rgba(0,0,0,.45);pointer-events:none;white-space:nowrap;
  max-width:44vw}
/* Nahe am linken Bildrand: nicht horizontal zentrieren (würde bei
   schmalen Viewports über den Rand hinaus laufen), sondern links am Punkt
   verankert nach rechts wachsen lassen. */
.lb-tag-start{transform:translateY(-50%);text-align:left}

/* Marker: Punkt (mit feinem Ring) + Text-Chip, der je nach 'dir' von einer
   Seite an den Punkt andockt (n/s/e/w) — verhindert, dass eng
   beieinanderliegende Marker ihre Chips gegenseitig überlappen. */
.lb-marker{position:absolute;transform:translate(-50%,-50%);display:block;
  text-decoration:none;color:inherit;cursor:pointer}
a.lb-marker{cursor:pointer}
span.lb-marker{cursor:default}
.lb-dot{display:block;width:14px;height:14px;border-radius:50%;background:var(--moss);
  box-shadow:0 0 0 4px rgba(245,245,243,.82),0 1px 5px rgba(0,0,0,.35);
  transition:transform .25s var(--ease);position:relative;z-index:2}
.lb-marker:hover .lb-dot,.lb-marker:focus-visible .lb-dot{transform:scale(1.2)}
.lb-marker-accent .lb-dot{background:var(--moss-deep);box-shadow:0 0 0 5px rgba(245,245,243,.9),0 0 0 7px var(--stone),0 1px 6px rgba(0,0,0,.4)}
.lb-chip-text{position:absolute;white-space:nowrap;background:rgba(245,245,243,.86);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);color:var(--ink);
  font-size:12.5px;font-weight:600;letter-spacing:-.005em;padding:6px 13px;border-radius:100px;
  box-shadow:0 4px 16px -8px rgba(0,0,0,.35);z-index:1}
.lb-marker-accent .lb-chip-text{background:rgba(76,83,68,.92);color:#fff}
.lb-chip-n .lb-chip-text{bottom:calc(100% + 11px);left:50%;transform:translateX(-50%)}
.lb-chip-s .lb-chip-text{top:calc(100% + 11px);left:50%;transform:translateX(-50%)}
.lb-chip-e .lb-chip-text{left:calc(100% + 11px);top:50%;transform:translateY(-50%)}
.lb-chip-w .lb-chip-text{right:calc(100% + 11px);top:50%;transform:translateY(-50%)}

/* Tooltip mit der Kurzbeschreibung, nur bei Hover/Fokus sichtbar. Liegt
   unabhängig von der Chip-Richtung immer unterhalb des Punkts — deckt im
   seltenen Überlappungsfall den Chip vorübergehend sauber ab (eigener
   opaker Hintergrund), statt mit ihm zu konkurrieren. */
.lb-tip{position:absolute;top:calc(100% + 30px);left:50%;transform:translate(-50%,4px);
  width:206px;background:rgba(29,29,31,.94);color:#fff;font-size:12.5px;line-height:1.5;
  padding:10px 13px;border-radius:12px;opacity:0;pointer-events:none;z-index:3;
  transition:opacity .2s var(--ease),transform .2s var(--ease)}
.lb-marker:hover .lb-tip,.lb-marker:focus-visible .lb-tip{opacity:1;transform:translate(-50%,0)}

/* Reveal-Animation sitzt bewusst auf einem inneren Wrapper (.lb-marker-in),
   nicht auf .lb-marker selbst: .lb-marker trägt die Positionierungs-
   transform (translate(-50%,-50%)), und die globale, höher spezifische
   Regel „html.js .rv{transform:translateY(24px)}" (siehe oben) würde diese
   sonst überschreiben und die Marker aus ihrer Zielposition reißen. */
.lb-marker-in{display:block}
html.js .lb-marker-in.rv{opacity:0;transform:translateY(8px) scale(.85);
  transition:opacity .5s var(--ease),transform .5s var(--ease);transition-delay:var(--mdelay,0ms)}
html.js .lb-marker-in.rv.in{opacity:1;transform:none}

.lagebild-list{margin-top:clamp(32px,4vw,48px);display:grid;grid-template-columns:repeat(3,1fr);
  gap:28px clamp(24px,3vw,40px)}
.lagebild-item dt{font-size:15.5px;font-weight:600;letter-spacing:-.008em;display:flex;align-items:baseline;gap:8px}
.li-num{font-size:12px;font-weight:700;color:var(--stone);font-variant-numeric:tabular-nums}
.lagebild-item dt a{color:inherit;text-decoration:none;border-bottom:1px solid var(--hair)}
.lagebild-item dt a:hover{border-color:var(--ink)}
.lagebild-item dd{margin-top:3px;font-size:13.5px;line-height:1.55;color:var(--ink-70);padding-left:20px}
.lagebild-item.is-accent dt{color:var(--moss-deep)}
@media(max-width:940px){
  .lagebild-list{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:720px){
  .lagebild-list{grid-template-columns:1fr}
  /* Kleines Bild, wenig Platz: Text-Chips weg, nur nummerierte Punkte —
     die Liste darunter trägt dieselben Nummern (li-num) zum Nachschlagen. */
  .lb-chip-text,.lb-tip{display:none}
  .lb-tag{font-size:9.5px}
  .lb-dot{width:29px;height:29px;display:flex;align-items:center;justify-content:center;
    font:700 12.5px/1 var(--font);color:#fff;box-shadow:0 0 0 3px rgba(245,245,243,.85),0 1px 5px rgba(0,0,0,.35)}
  .lb-dot::after{content:attr(data-num)}
  .lb-marker-accent .lb-dot{box-shadow:0 0 0 3px rgba(245,245,243,.9),0 0 0 5px var(--stone),0 1px 6px rgba(0,0,0,.4)}
}
/* Kein eigener prefers-reduced-motion-Block nötig: .lb-marker-in trägt die
   Klasse .rv, die globale Regel weiter oben (".rv,.li{opacity:1!important;
   transform:none!important;…}") deckt die Reveal-Animation bereits ab —
   die Positionierung selbst sitzt unangetastet auf dem äußeren .lb-marker. */

/* Themen (Alt-Layout, ungenutzt seit v1.2.0 — siehe .lagebild) */
.topics{padding:clamp(80px,10vw,140px) 0;background:var(--paper)}
.t-grid{margin-top:clamp(40px,5vw,60px);display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.t-tile{background:var(--white);border-radius:var(--rm);padding:clamp(26px,3vw,38px);
  transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.t-tile:hover{transform:translateY(-5px);box-shadow:0 22px 54px -26px rgba(0,0,0,.2)}
.t-nr{font-size:clamp(26px,2.6vw,34px);font-weight:200;letter-spacing:-.03em;color:var(--stone);display:block}
.t-t{margin-top:16px;font-size:clamp(18px,1.9vw,22px);letter-spacing:-.016em;font-weight:600}
.t-d{margin-top:8px;font-size:14px;line-height:1.6;color:var(--ink-70)}
.t-wide{grid-column:1/-1;display:flex;align-items:center;gap:clamp(20px,3vw,40px);cursor:pointer;
  background:linear-gradient(155deg,#1b1b1d,#31362c);color:#fff;text-decoration:none;border:0;
  font-family:inherit;text-align:left;width:100%}
.t-wide .t-t{margin-top:0;color:#fff}
.t-wide .t-d{color:rgba(255,255,255,.7)}
.t-more{margin-left:auto;color:#fff;flex:none;font-size:14px}
.t-wide:hover .t-more svg{transform:translateX(4px)}

/* Einordnung */
.band{padding:clamp(100px,13vw,170px) 0}
.manifest{font-size:clamp(24px,3.2vw,36px);line-height:1.36;letter-spacing:-.02em;font-weight:600}
.manifest span{opacity:.14;transition:opacity .18s linear}
.manifest.static span{opacity:1}
.manifest .acc{color:var(--stone)}
.m-break{display:block;height:1.2em}

/* KI-Sicherheit — fünf Perspektiven (Theme-Fallback, siehe auch assets/css/ki.css) */
.ki{position:relative;background:#0e0e0f}
.ki-stage{position:sticky;top:0;height:100svh;overflow:clip;display:flex;flex-direction:column;
  justify-content:center;color:#fff;
  background:radial-gradient(56% 48% at 68% 42%,rgba(111,119,99,.16),transparent 70%),#0e0e0f}
.ki-label{position:absolute;top:80px;left:50%;transform:translateX(-50%);font-size:11.5px;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.32);white-space:nowrap;margin:0}
.ki-grid{max-width:1120px;width:100%;margin:0 auto;padding:0 clamp(22px,5vw,48px);
  display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(30px,5vw,80px);align-items:center}
.ki-fixed{font-size:clamp(17px,2vw,22px);color:rgba(255,255,255,.5);letter-spacing:-.01em;margin:0}
.ki-left{container-type:inline-size;min-width:0}
.ki-words{position:relative;margin-top:10px;height:clamp(100px,15vw,170px)}
.ki-w{position:absolute;inset:0;display:flex;align-items:center;opacity:0;white-space:nowrap;margin:0;
  font-size:clamp(30px,4.6vw,62px);letter-spacing:-.034em;line-height:1;font-weight:700;color:#fff}
@supports (font-size:1cqw){
  .ki-w{font-size:clamp(30px,11.4cqw,86px)}
}
.ki-right{position:relative;min-height:clamp(280px,36svh,360px)}
.ki-card{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;opacity:0}
.ki-tag{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--stone);margin:0}
.ki-d{margin-top:16px;font-size:clamp(15px,1.7vw,17.5px);line-height:1.65;color:rgba(255,255,255,.78)}
.ki-q{margin-top:18px;padding-left:16px;border-left:2px solid var(--stone);
  font-size:clamp(15px,1.7vw,18px);line-height:1.5;font-weight:600;color:#fff}
.ki-link{margin-top:20px;display:inline-flex;align-items:center;gap:7px;color:rgba(255,255,255,.85);
  font-size:13.5px;text-decoration:none}
.ki-link:hover{opacity:.7}
.ki-progress{position:absolute;bottom:34px;left:clamp(22px,5vw,48px);display:flex;align-items:baseline;gap:5px}
.ki-num{font-size:clamp(26px,3vw,36px);font-weight:200;letter-spacing:-.03em;color:#fff}
.ki-total{font-size:13px;color:rgba(255,255,255,.4)}
.ki-bar{position:absolute;bottom:0;left:0;right:0;height:2px;background:rgba(255,255,255,.08)}
.ki-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--stone),var(--moss));
  transform:scaleX(0);transform-origin:left;font-style:normal}
.ki-static{padding:clamp(80px,10vw,130px) 0;background:#0e0e0f;color:#fff}
.ki-static .eyebrow{color:var(--stone)}
.ki-static-list{margin-top:44px;display:grid;gap:44px}
.ki-static-row{border-top:1px solid rgba(255,255,255,.1);padding-top:32px}
.ki-w-static{font-size:clamp(26px,3.4vw,40px);letter-spacing:-.026em;font-weight:700;margin-bottom:16px}
.ki-static .ki-card{position:relative;opacity:1}

/* Autor */
.autor{padding:0 0 clamp(90px,11vw,150px)}
.autor-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(30px,4.6vw,70px);align-items:center}
.autor-visual{border-radius:var(--r);aspect-ratio:4/4.4;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:26px;position:relative;overflow:clip;
  background:linear-gradient(160deg,var(--moss),var(--moss-deep))}
.autor-visual::after{content:'';position:absolute;inset:auto -30% -50% -30%;height:80%;
  background:radial-gradient(closest-side,rgba(255,255,255,.14),transparent 70%);pointer-events:none}
.autor-visual.has-photo::after{inset:auto 0 0 0;height:46%;
  background:linear-gradient(to top,rgba(20,22,18,.62),transparent)}
.autor-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center top}
.autor-caption{position:absolute;left:26px;bottom:22px;z-index:1;color:#fff;
  font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase}
.autor-caption::after{content:'';display:block;margin-top:8px;width:34px;height:2px;
  background:var(--stone);border-radius:2px}
.autor-init{font-size:clamp(64px,8vw,104px);font-weight:200;letter-spacing:-.04em;color:rgba(255,255,255,.92)}
.autor-line{width:44px;height:2px;background:var(--stone);border-radius:2px}
.autor-b{margin-top:22px;font-size:16.5px;line-height:1.7;color:var(--ink-70)}
.autor-b strong{color:var(--ink);font-weight:600}
.autor-list-label{margin-top:24px;font-size:11.5px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--stone)}
.autor-l{margin-top:10px;display:grid;gap:8px;list-style:none}
.autor-l li{font-size:14px;color:var(--ink-70);padding-left:16px;position:relative}
.autor-l li::before{content:'';position:absolute;left:0;top:9px;width:5px;height:5px;border-radius:50%;background:var(--stone)}
.autor-note{margin-top:22px;font-size:13px;color:var(--gray)}

/* Abschluss */
.closing{padding:clamp(90px,12vw,160px) 0;background:
  radial-gradient(900px 420px at 50% 118%,var(--stone-soft) 0%,rgba(233,228,218,0) 66%),var(--white)}
.closing-t{font-size:clamp(38px,6vw,72px);letter-spacing:-.03em;line-height:1.04;font-weight:700}
.closing-s{margin-top:18px;font-size:clamp(16px,1.9vw,20px);color:var(--gray)}

/* Footer */
.foot{border-top:1px solid var(--hair);background:var(--paper);padding:clamp(50px,6vw,80px) 0 34px}
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:34px}
.foot-brand{font-weight:600;font-size:16px;display:flex;align-items:center}
.foot-brand .brand-logo{height:46px;width:auto;color:var(--ink)}
.foot-brand-custom img{max-height:26px;width:auto;display:block}
.foot-sub{margin-top:8px;font-size:13px;color:var(--gray);line-height:1.55}
.foot-h{font-size:11.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--stone);margin-bottom:14px}
.foot-a{display:block;font-size:13.5px;color:var(--gray);margin-bottom:9px;cursor:pointer;text-decoration:none;
  transition:color .3s;background:none;border:0;font-family:inherit;text-align:left}
.foot-a:hover{color:var(--ink)}
.foot-legal-list{list-style:none}
.foot-legal-list li{margin-bottom:9px}
.foot-legal-list a{font-size:13.5px;color:var(--gray);text-decoration:none;transition:color .3s}
.foot-legal-list a:hover{color:var(--ink)}
.nav-links li,.sheet-list li{list-style:none}
.nav-links{margin:0}
.foot-base{margin-top:clamp(40px,5vw,60px);padding-top:24px;border-top:1px solid var(--hair);
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:12px;color:var(--gray)}
.claim{color:var(--stone);font-weight:500}

/* ============================================================
   SINGLE / PAGE / ARCHIVE — Lese-Layout
   ============================================================ */
.entry-head{padding:150px 0 50px}
.entry-kicker{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:12.5px;
  font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--stone)}
.entry-kicker a{color:inherit;text-decoration:none}
.entry-kicker a:hover{text-decoration:underline}
.entry-title{margin-top:10px;font-size:clamp(30px,5vw,54px);letter-spacing:-.03em;line-height:1.08;font-weight:700;color:var(--ink)}
.entry-title span{display:block;opacity:.55;font-weight:600}
/* Höhere Spezifität als Bezeichner (0,2,0/1,0,0), um Überschreibungen durch
   generisch benannte Fremd-CSS-Regeln (z. B. Alt-Plugin) zuverlässig zu
   verhindern — Titel/Überschriften müssen auf hellem Grund immer in --ink
   erscheinen, nie erben oder von außen gefärbt werden können. */
#main .entry-title,#main .h2{color:var(--ink)}
.entry-meta{margin-top:14px;display:flex;gap:16px;flex-wrap:wrap;font-size:13.5px;color:var(--gray)}
.entry-meta span{display:inline-flex;align-items:center;gap:6px}
.entry-thumb{margin:0 0 clamp(30px,5vw,60px);border-radius:var(--rm);overflow:clip;max-height:520px}
.entry-thumb img{width:100%;height:100%;object-fit:cover}

.entry-content{font-size:18px;line-height:1.75;color:var(--ink-70)}
.entry-content > *{max-width:720px;margin-left:auto;margin-right:auto}
.entry-content > .alignwide{max-width:980px}
.entry-content > .alignfull{max-width:none}
.entry-content p,.entry-content ul,.entry-content ol{margin-bottom:1.4em}
.entry-content h2{font-size:clamp(24px,3vw,32px);line-height:1.18;letter-spacing:-.02em;font-weight:700;color:var(--ink);
  margin:1.6em 0 .6em}
.entry-content h3{font-size:clamp(20px,2.4vw,24px);line-height:1.2;letter-spacing:-.015em;font-weight:700;color:var(--ink);
  margin:1.4em 0 .5em}
.entry-content h4{font-size:18px;line-height:1.25;font-weight:700;color:var(--ink);margin:1.2em 0 .5em}
.entry-content a{color:var(--moss-deep);text-decoration-color:var(--stone)}
.entry-content strong{color:var(--ink);font-weight:600}
.entry-content ul,.entry-content ol{padding-left:1.4em}
.entry-content li{margin-bottom:.4em}
.entry-content blockquote{margin:1.8em auto;padding:.2em 0 .2em 1.4em;border-left:3px solid var(--stone);
  font-size:1.1em;font-style:italic;color:var(--ink)}
.entry-content figure{margin:1.8em auto}
.entry-content figcaption{margin-top:.6em;font-size:13.5px;color:var(--gray);text-align:center}
.entry-content img{border-radius:14px}
.entry-content hr{border:0;border-top:1px solid var(--hair);margin:2.4em auto}
/* Tabellen dürfen den Container nie sprengen: Wrapper (per JS, siehe
   main.js) scrollt horizontal statt der ganzen Seite. */
.entry-content .table-scroll{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;margin:1.6em auto}
.entry-content table{width:100%;border-collapse:collapse;font-size:15px;margin:1.6em auto}
.entry-content .table-scroll table{margin:0;min-width:480px}
.entry-content table th,.entry-content table td{border:1px solid var(--hair);padding:10px 14px;text-align:left}
.entry-content table th{background:var(--paper);font-weight:600}
.entry-content iframe,.entry-content embed,.entry-content video{max-width:100%}
.theme-content .table-scroll{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
.theme-content iframe,.theme-content embed,.theme-content video{max-width:100%}
.entry-content code{background:var(--paper);padding:.15em .4em;border-radius:5px;font-size:.9em}
.entry-content pre{background:#1d1d1f;color:#f5f5f3;padding:20px;border-radius:14px;overflow:auto;margin:1.6em auto}
.entry-content pre code{background:none;padding:0;color:inherit}
.wp-block-quote{border-left:3px solid var(--stone);padding-left:1.4em}
.wp-block-pullquote{text-align:center;border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);
  padding:1.4em 0;font-size:1.3em;font-weight:600}

.entry-tags{max-width:720px;margin:2.4em auto 0;display:flex;gap:8px;flex-wrap:wrap}
.entry-tags a{font-size:12.5px;color:var(--gray);padding:6px 14px;border-radius:100px;
  box-shadow:inset 0 0 0 1px var(--hair);text-decoration:none}
.entry-tags a:hover{color:var(--ink)}

.entry-author{max-width:720px;margin:clamp(40px,6vw,64px) auto 0;padding:28px;border-radius:var(--rm);
  background:var(--paper);display:flex;gap:18px;align-items:center}
.entry-author-img{width:60px;height:60px;border-radius:50%;object-fit:cover;flex:none}
.entry-author-init{width:60px;height:60px;border-radius:50%;background:var(--moss);color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:600;flex:none}

/* Monogramm-Ersatz für get_avatar() ohne lokales Bild (siehe pre_get_avatar
   in functions.php) — verhindert Gravatar-Requests z. B. bei Kommentaren. */
.avatar-init{display:inline-flex;align-items:center;justify-content:center;border-radius:50%;
  background:var(--moss);color:#fff;font-weight:600;text-align:center;flex:none;vertical-align:middle}
.entry-author-name{font-weight:600;font-size:15px}
.entry-author-role{font-size:13px;color:var(--gray);margin-top:2px}

.post-nav{max-width:720px;margin:clamp(50px,7vw,80px) auto 0;display:grid;grid-template-columns:1fr 1fr;
  gap:16px;border-top:1px solid var(--hair);padding-top:32px}
.post-nav a{text-decoration:none;color:inherit;display:block}
.post-nav-k{font-size:11.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--stone)}
.post-nav-t{margin-top:8px;font-size:15px;font-weight:600;letter-spacing:-.01em}
.post-nav-next{text-align:right}

.related{background:var(--paper);padding:clamp(70px,9vw,110px) 0}
.related .p-grid{margin-top:36px}

/* Archiv / Blog-Übersicht */
.archive-head{padding:150px 0 40px}
.pagination{max-width:1120px;margin:clamp(50px,6vw,80px) auto 0;padding:0 clamp(22px,5vw,48px);
  display:flex;justify-content:center;gap:10px;flex-wrap:wrap}
.pagination a,.pagination span{display:inline-flex;align-items:center;justify-content:center;min-width:44px;
  height:44px;padding:0 12px;border-radius:100px;font-size:14px;text-decoration:none;color:var(--ink);
  box-shadow:inset 0 0 0 1px var(--hair)}
.pagination .current{background:var(--ink);color:#fff;box-shadow:none}
.pagination a:hover{background:var(--paper)}

/* Seiten (Impressum etc.) */
.page-content{padding:150px 0 clamp(80px,10vw,130px)}

/* 404 */
.err-404{min-height:70vh;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:150px 24px 100px}
.err-num{font-size:clamp(70px,12vw,160px);font-weight:200;letter-spacing:-.04em;color:var(--stone)}

/* Suche */
.search-form{display:flex;gap:10px;max-width:520px;margin:20px auto 0}
.search-form input[type=search]{flex:1;padding:14px 18px;border-radius:100px;border:1px solid var(--hair);
  font-size:16px;font-family:inherit}
.search-form button{padding:0 24px;border-radius:100px;background:var(--ink);color:#fff;border:0;
  font-size:14px;font-weight:500;cursor:pointer}
.search-empty{padding:20px 0;color:var(--gray)}

/* Kommentare (minimal) */
.comments-area{max-width:720px;margin:clamp(60px,8vw,90px) auto 0}
.comments-title{font-size:22px;font-weight:700;letter-spacing:-.02em;margin-bottom:24px}
.comment-list{list-style:none}
.comment-body{padding:18px 0;border-top:1px solid var(--hair)}
.comment-author{font-weight:600;font-size:14.5px}
.comment-meta{font-size:12.5px;color:var(--gray);margin-top:2px}
.comment-content{margin-top:10px;font-size:15px;line-height:1.65;color:var(--ink-70)}
.comment-form input,.comment-form textarea{width:100%;padding:12px 16px;border-radius:12px;
  border:1px solid var(--hair);font-family:inherit;font-size:16px;margin-bottom:12px}
.comment-form button{padding:0 26px;height:46px;border-radius:100px;background:var(--ink);color:#fff;
  border:0;font-weight:500;cursor:pointer}

/* Autorenbox: Link zur Autorenseite, dezent unter der Kurzbio */
.entry-author-more{margin-top:6px}
.entry-author-more a{font-size:13px;color:var(--ink);font-weight:500;text-decoration:none;display:inline-flex;align-items:center;gap:5px}
.entry-author-more a:hover{opacity:.7}
.entry-byline-a{color:inherit;text-decoration:underline;text-decoration-color:var(--hair);text-underline-offset:2px}
.entry-byline-a:hover{text-decoration-color:currentColor}
.more-on-topic{max-width:720px;margin:2.2em auto 0;font-size:14px;color:var(--gray);display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.more-on-topic a{color:var(--ink);font-weight:600;text-decoration:none;display:inline-flex;align-items:center;gap:5px}
.more-on-topic a:hover{opacity:.7}
.archive-to-theme{margin-top:10px}

/* Kategorie-Archiv → Themenseite */

/* ============================================================
 * THEMENSEITEN (Hub) & AUTORENPROFIL — v1.4.0
 * ============================================================ */
.crumb{font-size:12.5px;color:var(--gray);display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:18px}
.crumb a{color:var(--gray);text-decoration:none}
.crumb a:hover{color:var(--ink)}
.crumb [aria-current]{color:var(--ink);font-weight:600}
.crumb-sep{opacity:.5}

.theme-lede{margin-top:14px;font-size:clamp(16px,1.9vw,19px);color:var(--gray);max-width:640px}

.theme-body{margin-top:clamp(40px,5vw,60px);display:grid;grid-template-columns:200px 1fr;gap:clamp(30px,4vw,56px);align-items:start}
.theme-toc{position:sticky;top:calc(var(--br-nav-h) + var(--br-admin-offset) + 24px)}
.theme-toc-h{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--stone);margin-bottom:10px}
/* <details>/<summary>: auf Desktop rein deklarativ (immer offen, keine
   Interaktion), auf Mobil (≤940px, siehe unten) echtes Aufklapp-Element. */
.theme-toc-summary{list-style:none;cursor:default;pointer-events:none}
.theme-toc-summary::-webkit-details-marker,.theme-toc-summary::marker{display:none;content:""}
.theme-toc ol{list-style:none;display:flex;flex-direction:column;gap:9px}
.theme-toc a{font-size:13.5px;color:var(--gray);text-decoration:none;line-height:1.4;display:block}
.theme-toc a:hover{color:var(--ink)}
.theme-content{max-width:720px}
.theme-content h2{scroll-margin-top:calc(var(--br-nav-h) + var(--br-admin-offset) + 20px)}
.theme-links{margin-top:clamp(32px,4vw,48px);padding-top:24px;border-top:1px solid var(--hair)}
.theme-links-h{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--stone);margin-bottom:12px}
.theme-links ul{list-style:none;display:flex;flex-direction:column;gap:9px}
.theme-links a{font-size:14.5px;color:var(--ink);text-decoration:none;display:inline-flex;align-items:center;gap:6px}
.theme-links a:hover{opacity:.7}

.theme-related-topics{padding:clamp(50px,7vw,80px) 0}
.theme-chips{margin-top:24px;display:flex;flex-wrap:wrap;gap:12px}
.theme-chip{display:inline-flex;align-items:center;gap:7px;padding:11px 20px;border-radius:100px;
  background:var(--paper);color:var(--ink);text-decoration:none;font-size:14px;font-weight:500;
  transition:transform .3s var(--ease),background .3s}
.theme-chip:hover{transform:translateY(-2px);background:var(--mist)}
.theme-chip-count{color:var(--gray);font-weight:400}

.theme-index-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:8px}
.theme-index-card{display:flex;flex-direction:column;gap:8px;padding:28px;border-radius:var(--rm);
  background:var(--paper);text-decoration:none;color:inherit;transition:transform .3s var(--ease),box-shadow .3s}
.theme-index-card:hover{transform:translateY(-3px);box-shadow:0 20px 50px -30px rgba(0,0,0,.28)}
.theme-index-card .p-t{font-size:19px;font-weight:700;letter-spacing:-.015em}
.theme-index-card .p-d{font-size:14px;color:var(--gray);line-height:1.55}
.theme-index-card .p-r{margin-top:auto;font-size:13px;font-weight:600;display:inline-flex;align-items:center;gap:6px}

/* Autorenprofil-Seite */
.author-grid-full{display:grid;grid-template-columns:.7fr 1.3fr;gap:clamp(32px,4.6vw,64px);align-items:start;margin-top:clamp(30px,4vw,50px)}
.author-visual-wrap{position:sticky;top:calc(var(--br-nav-h) + var(--br-admin-offset) + 24px)}
.author-photo{width:100%;border-radius:var(--r);aspect-ratio:4/4.6;object-fit:cover}
.autor-init-lg{display:flex;align-items:center;justify-content:center;width:100%;aspect-ratio:4/4.6;
  border-radius:var(--r);background:var(--paper);font-size:52px;font-weight:700;color:var(--stone)}
.author-role{margin-top:10px;font-size:16px;color:var(--gray)}
.author-main .entry-content{margin-top:24px}
.author-profiles{margin-top:clamp(28px,3.6vw,40px);padding-top:22px;border-top:1px solid var(--hair)}
.author-profiles ul{list-style:none;display:flex;flex-direction:column;gap:9px}
.author-profiles a{font-size:14.5px;color:var(--ink);text-decoration:none;display:inline-flex;align-items:center;gap:6px;font-weight:500}
.author-profiles a:hover{opacity:.7}

/* Responsive */
/* Mobile TOC als natives <details>/<summary> ("Auf dieser Seite"), oben statt
   sticky Seitenleiste — per CSS auf Desktop erzwungen offen & unauffällig. */
@media(max-width:940px){
  .theme-body{grid-template-columns:1fr}
  .theme-toc{position:static;margin-bottom:20px;padding-bottom:0;border-bottom:0}
  .theme-toc[open]{padding-bottom:18px;border-bottom:1px solid var(--hair)}
  .theme-toc:not([open]){border-bottom:1px solid var(--hair);padding-bottom:14px}
  .theme-toc-summary{display:flex;align-items:center;justify-content:space-between;gap:10px;
    cursor:pointer;pointer-events:auto;min-height:44px;padding:9px 0}
  .theme-toc-summary::after{content:"";width:9px;height:9px;border-right:1.5px solid var(--stone);
    border-bottom:1.5px solid var(--stone);transform:rotate(45deg);transition:transform .3s var(--ease);flex:none}
  .theme-toc[open] .theme-toc-summary::after{transform:rotate(-135deg)}
  .theme-toc .theme-toc-h{margin-bottom:0}
  .theme-toc ol{margin-top:10px;flex-direction:row;flex-wrap:wrap;gap:14px}
  .theme-index-grid{grid-template-columns:repeat(2,1fr)}
  .author-grid-full{grid-template-columns:1fr}
  .author-visual-wrap{position:static;max-width:260px}
  .p-grid{grid-template-columns:1fr}
  .p-grid-3{grid-template-columns:repeat(2,1fr)}
  .t-grid{grid-template-columns:1fr 1fr}
  .autor-grid{grid-template-columns:1fr;gap:28px}
  .autor-visual{aspect-ratio:16/10}
  .foot-grid{grid-template-columns:1fr 1fr}
  .ki-grid{grid-template-columns:1fr;gap:24px;align-content:center}
  .ki-words{height:clamp(70px,12vw,110px)}
  .ki-right{min-height:300px}
  .ki-card{justify-content:flex-start;padding-top:6px}
  .post-nav{grid-template-columns:1fr}
  .post-nav-next{text-align:left}
}
@media(max-width:720px){
  .deski{display:none}
  .nav-links{display:none}
  .burger{display:block}
  /* Volle Höhe (abzüglich Nav + Adminleiste), eigenständig scrollbar, statt
     eines festen 340px-Deckels — auf kleinen Geräten mit vielen Menüpunkten
     sonst nicht vollständig erreichbar. */
  .sheet{display:flex;flex-direction:column;overflow:hidden;max-height:0;
    transition:max-height .5s var(--ease),padding .5s var(--ease);
    padding:0 max(clamp(22px,5vw,48px),env(safe-area-inset-right)) 0 max(clamp(22px,5vw,48px),env(safe-area-inset-left));
    overflow-y:auto;-webkit-overflow-scrolling:touch}
  .sheet.open{max-height:calc(100svh - var(--br-nav-h) - var(--br-admin-offset));
    padding-top:10px;padding-bottom:calc(26px + env(safe-area-inset-bottom))}
  .sheet-a{font-size:19px;font-weight:600;padding:13px 0;min-height:44px;cursor:pointer;border-bottom:1px solid var(--hair);
    display:flex;align-items:center;text-decoration:none;color:inherit;background:none;border-left:0;border-right:0;
    border-top:0;width:100%;text-align:left;font-family:inherit}
  .t-grid,.foot-grid{grid-template-columns:1fr}
  .entry-author{flex-direction:column;text-align:center}
  .p-grid-3{grid-template-columns:1fr}
  .theme-index-grid{grid-template-columns:1fr}
  /* Tap-Targets: Filter-Chips, Footer-Links, TOC-Einträge, Pfeil-Links */
  .filter{padding:12px 18px;font-size:14px;min-height:44px;display:inline-flex;align-items:center}
  .foot-a{padding:9px 0;min-height:44px;display:flex;align-items:center;margin-bottom:0}
  .foot-legal-list a{padding:9px 0;min-height:44px;display:flex;align-items:center}
  .theme-toc a{padding:9px 0;min-height:40px;display:flex;align-items:center}
  .alink,.more-on-topic a,.theme-links a,.entry-author-more a{min-height:44px}
  /* Beitragskarten kompakter im einspaltigen Mobil-Layout */
  .post{min-height:0;padding:24px}
  .lead{min-height:0;padding:clamp(24px,7vw,40px) clamp(22px,6vw,34px)}
}
@media(max-width:600px){
  /* Sticky-Header bleibt kompakt (≤56px); Safe-Area am Fuß der Seite. */
  .foot{padding-bottom:calc(34px + env(safe-area-inset-bottom))}
}
/* Touch-Geräte: Scroll-Parallax reduzieren/ausschalten (main.js prüft
   dieselbe Media-Query per matchMedia, hier nur als CSS-Dokumentation/
   Fallback für den Fall inline gesetzter transforms). */
@media(pointer:coarse){
  .hero-photo .hero-img{transition:none}
}