/* ==========================================================================
   Sascha Wintjens
   Gestaltungsprinzip: Schweizer Raster, Haarlinien statt Kacheln,
   Typografie trägt die Seite. Die 20°-Schräge stammt aus dem Logo und
   ist das einzige geometrische Motiv – sie taucht in Linien und
   Bewegungen wieder auf.
   ========================================================================== */

/* 1 — Schriften ----------------------------------------------------------- */

@font-face {
  font-family: 'Clash Display';
  src: url('../fonts/ClashDisplay-Semibold.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Clash Display';
  src: url('../fonts/ClashDisplay-Bold.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Satoshi';
  src: url('../fonts/Satoshi-Regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Satoshi';
  src: url('../fonts/Satoshi-Medium.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Satoshi';
  src: url('../fonts/Satoshi-Bold.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}

/* 2 — Tokens -------------------------------------------------------------- */

:root {
  --signal: #4f63f7;
  --signal-ink: #3448e8;

  --paper: #f2f3f7;
  --paper-2: #e9eaf1;
  --ink: #0b0c11;
  --ink-soft: #4a5060;
  --ink-mute: #767d90;
  --rule: #d2d5e0;
  --rule-soft: #e2e4ec;
  --on-signal: #ffffff;

  --font-display: 'Clash Display', ui-sans-serif, system-ui, sans-serif;
  --font-body: 'Satoshi', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', 'Cascadia Mono', Menlo, monospace;

  /* Typo-Skala */
  --t-meta: 0.7rem;
  --t-sm: clamp(0.86rem, 0.83rem + 0.14vw, 0.94rem);
  --t-body: clamp(1rem, 0.96rem + 0.2vw, 1.08rem);
  --t-lead: clamp(1.15rem, 1.02rem + 0.6vw, 1.5rem);
  --t-h3: clamp(1.3rem, 1.15rem + 0.7vw, 1.75rem);
  --t-h2: clamp(1.7rem, 1.35rem + 1.7vw, 2.9rem);
  --t-h1: clamp(2.4rem, 1.5rem + 4.4vw, 5.6rem);
  --t-mega: clamp(3rem, 1.4rem + 7.4vw, 9rem);

  --gap: clamp(1rem, 2.5vw, 2rem);
  --pad: clamp(1.15rem, 4vw, 3.5rem);
  --band: clamp(3.5rem, 8vw, 7.5rem);

  /* Zeilenlänge des Fließtexts. Achtung: 1ch ist die Breite der Ziffer 0
     und damit breiter als ein durchschnittlicher Buchstabe – 48ch ergeben
     rund 72 Zeichen pro Zeile, das ist der angenehme Lesebereich. */
  --measure: 48ch;
  --max: 90rem;

  --slant: -20deg;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);

  --head-h: 4.2rem;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #08090e;
    --paper-2: #101218;
    --ink: #edeef4;
    --ink-soft: #a9afc0;
    --ink-mute: #7a8195;
    --rule: #23262f;
    --rule-soft: #191c24;
    --signal: #7183ff;
    --signal-ink: #93a1ff;
    color-scheme: dark;
  }
}
:root[data-theme='dark'] {
  --paper: #08090e;
  --paper-2: #101218;
  --ink: #edeef4;
  --ink-soft: #a9afc0;
  --ink-mute: #7a8195;
  --rule: #23262f;
  --rule-soft: #191c24;
  --signal: #7183ff;
  --signal-ink: #93a1ff;
  color-scheme: dark;
}
:root[data-theme='light'] {
  --paper: #f2f3f7;
  --paper-2: #e9eaf1;
  --ink: #0b0c11;
  --ink-soft: #4a5060;
  --ink-mute: #767d90;
  --rule: #d2d5e0;
  --rule-soft: #e2e4ec;
  --signal: #4f63f7;
  --signal-ink: #3448e8;
  color-scheme: light;
}

/* 3 — Basis --------------------------------------------------------------- */

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--head-h) + 2rem);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; color: inherit; }

:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; }
::selection { background: var(--signal); color: #fff; }

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.035em;
  text-wrap: balance;
}
p { margin: 0; }

.wrap {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--pad);
}

.band { padding-block: var(--band); }

/* Haarlinie als durchgehendes Gestaltungselement */
.rule { border-top: 1px solid var(--rule); }

.skip {
  position: absolute; top: -100%; left: 1rem; z-index: 300;
  padding: 0.7rem 1.1rem; background: var(--signal); color: #fff;
  font-weight: 700;
}
.skip:focus { top: 1rem; }

.sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Metadaten-Register: Monospace, klein, gesperrt */
.meta {
  font-family: var(--font-mono);
  font-size: var(--t-meta);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-mute);
  font-variant-numeric: tabular-nums;
}
.meta--signal { color: var(--signal); }

/* 4 — Kopfzeile ----------------------------------------------------------- */

.head {
  position: sticky; top: 0; z-index: 100;
  border-bottom: 1px solid transparent;
  transition: transform 0.45s var(--ease), background-color 0.3s, border-color 0.3s;
}
.head.is-stuck {
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom-color: var(--rule);
}
.head.is-away { transform: translateY(-100%); }

.head__in {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--gap); height: var(--head-h);
}

/* Originallogo. Drei Fassungen im Markup, sichtbar ist immer genau eine:
   hell, dunkel und – auf schmalen Bildschirmen – nur das Zeichen. */
.mark { display: inline-flex; align-items: center; flex: none; }

.logo { height: 1.5rem; width: auto; }

.logo--dark, .logo--mark { display: none; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .logo--light { display: none; }
  :root:not([data-theme='light']) .logo--dark { display: block; }
}
:root[data-theme='dark'] .logo--light { display: none; }
:root[data-theme='dark'] .logo--dark { display: block; }
:root[data-theme='light'] .logo--light { display: block; }
:root[data-theme='light'] .logo--dark { display: none; }

/* Unter 560px reicht der Platz neben den Schaltern nicht für den
   vollen Schriftzug – dort steht nur das Zeichen. */
@media (max-width: 560px) {
  .logo--light, .logo--dark { display: none !important; }
  .logo--mark { display: block !important; height: 1.6rem; }
}

/* Im Fußbereich einen Hauch größer als in der Kopfzeile. */
.foot .logo { height: 1.7rem; }

.nav { display: flex; align-items: center; gap: 0.5rem; }

.nav__items {
  display: flex; align-items: center; gap: 1.8rem;
  list-style: none; margin: 0; padding: 0 1.2rem 0 0;
}

/* Navigationslinks im Metadaten-Register, Unterstrich wächst von links */
.nav__a {
  position: relative;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-soft);
  padding-block: 0.35rem;
  transition: color 0.2s;
}
.nav__a::after {
  content: ''; position: absolute; left: 0; bottom: 0;
  width: 100%; height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: 0 50%;
  transition: transform 0.4s var(--ease);
}
.nav__a:hover { color: var(--ink); }
.nav__a:hover::after { transform: scaleX(1); }
.nav__a[aria-current='page'] { color: var(--ink); }
.nav__a[aria-current='page']::after { transform: scaleX(1); background: var(--signal); }

.ibtn {
  display: inline-grid; place-items: center;
  width: 2.4rem; height: 2.4rem;
  border: 1px solid var(--rule); background: none;
  color: var(--ink-soft); cursor: pointer;
  transition: color 0.2s, border-color 0.2s;
}
.ibtn:hover { color: var(--signal); border-color: var(--signal); }

.t-moon { display: none; }
:root[data-theme='dark'] .t-moon { display: block; }
:root[data-theme='dark'] .t-sun { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .t-moon { display: block; }
  :root:not([data-theme='light']) .t-sun { display: none; }
}

.burger { display: none; }

/* Profile im Menü: auf dem Desktop ausgeblendet, dort stehen sie im Fuß. */
.nav__soc { display: none; }

@media (max-width: 820px) {
  .burger { display: inline-grid; }
  .nav__items {
    position: fixed; inset: var(--head-h) 0 auto;
    flex-direction: column; align-items: stretch; gap: 0;
    padding: 0 var(--pad) 2rem;
    background: var(--paper);
    border-bottom: 1px solid var(--rule);
    opacity: 0; visibility: hidden; transform: translateY(-6px);
    transition: opacity 0.3s var(--ease), transform 0.3s var(--ease), visibility 0.3s;
  }
  .nav__items.is-open { opacity: 1; visibility: visible; transform: none; }
  .nav__a {
    font-family: var(--font-display); font-size: 1.6rem;
    letter-spacing: -0.03em; text-transform: none;
    padding-block: 1rem; border-bottom: 1px solid var(--rule-soft);
  }
  .nav__a::after { display: none; }

  .nav__soc {
    display: flex;
    gap: 0.5rem;
    padding-top: 1.4rem;
  }
  .nav__soc .ibtn { width: 2.8rem; height: 2.8rem; }
}

/* 5 — Startseite ---------------------------------------------------------- */

.hero { padding-block: clamp(2.5rem, 7vw, 6rem) clamp(2.5rem, 6vw, 5rem); }

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
}
@media (max-width: 880px) {
  .hero__grid { grid-template-columns: 1fr; align-items: start; }
}

.hero__title {
  font-size: var(--t-mega);
  line-height: 0.92;
  letter-spacing: -0.045em;
}
.hero__title .accent { color: var(--signal); }

/* Jede Zeile sitzt in einem Fenster und fährt daraus hervor. */
.line { display: block; overflow: hidden; }
.line > span { display: block; }

/* Das Fenster braucht unten etwas Luft für Unterlängen (g, j, p),
   die darf aber nicht als Abstand zwischen den Zeilen sichtbar werden. */
.hero__title .line { padding-bottom: 0.1em; margin-bottom: -0.1em; }

.js .hero .line > span {
  transform: translateY(105%);
  transition: transform 1s var(--ease);
}
.js .hero.is-lit .line > span { transform: none; }
.js .hero.is-lit .line:nth-child(1) > span { transition-delay: 0.05s; }
.js .hero.is-lit .line:nth-child(2) > span { transition-delay: 0.14s; }
.js .hero.is-lit .line:nth-child(3) > span { transition-delay: 0.23s; }

/* Die Schräge aus dem Logo als Akzentlinie – sie zeichnet sich selbst.
   Bewusst ein eigener Block unter der Überschrift: im Fließtext der
   Headline würde sie den Zeilenumbruch sprengen. */
.slash {
  width: clamp(2.5rem, 5vw, 4.5rem);
  height: 3px;
  margin-top: clamp(1.2rem, 2.5vw, 2rem);
  background: var(--signal);
  transform: skewX(var(--slant));
}
/* Alle Eröffnungs-Animationen gelten NUR im Hero-Bereich.
   Sonst blieben dieselben Bausteine auf anderen Seiten unsichtbar,
   weil dort die Klasse "is-lit" nie gesetzt wird. */
.js .hero .slash {
  transform: skewX(var(--slant)) scaleX(0);
  transform-origin: 0 50%;
  transition: transform 0.8s var(--ease) 0.5s;
}
.js .hero.is-lit .slash { transform: skewX(var(--slant)) scaleX(1); }

/* Vorspann und Buttons folgen der Überschrift. */
.js .hero .hero__lead,
.js .hero .hero__acts,
.js .hero > .wrap > .meta,
.js .hero .hero__grid .meta {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
}
.js .hero.is-lit .hero__lead { opacity: 1; transform: none; transition-delay: 0.38s; }
.js .hero.is-lit .hero__acts { opacity: 1; transform: none; transition-delay: 0.46s; }
.js .hero.is-lit .meta { opacity: 1; transform: none; }

/* Das Porträt schiebt sich hinter seiner Kante hervor. */
.js .hero .hero__portrait { clip-path: inset(0 0 100% 0); transition: clip-path 1.1s var(--ease) 0.15s; }
.js .hero.is-lit .hero__portrait { clip-path: inset(0 0 0 0); }

.hero__lead {
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
  max-width: 42ch;
  font-size: var(--t-lead);
  line-height: 1.4;
  color: var(--ink-soft);
}

.hero__acts { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 2rem; }

/* Rahmen für Porträt + Leuchten dahinter */
.hero__figure { position: relative; }

/* Zwei langsam kreisende Farbflächen hinter dem Bild. Sie greifen die
   Töne aus dem Profilfoto auf (Indigo und Cyan) und ragen leicht darüber
   hinaus – dadurch wirkt das Bild eingebettet statt aufgeklebt. */
.hero__aura {
  position: absolute;
  inset: -14% -12%;
  z-index: 0;
  pointer-events: none;
  filter: blur(38px);
  opacity: 0.55;
}
.hero__aura::before,
.hero__aura::after {
  content: '';
  position: absolute;
  border-radius: 50%;
}
.hero__aura::before {
  inset: 0 35% 30% 0;
  background: radial-gradient(circle, var(--signal), transparent 68%);
  animation: drift-a 17s ease-in-out infinite;
}
.hero__aura::after {
  inset: 28% 0 0 32%;
  background: radial-gradient(circle, #0e7fc9, transparent 68%);
  animation: drift-b 21s ease-in-out infinite;
}

@keyframes drift-a {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  33%      { transform: translate3d(12%, 8%, 0) scale(1.14); }
  66%      { transform: translate3d(-6%, 14%, 0) scale(0.92); }
}
@keyframes drift-b {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1.05); }
  33%      { transform: translate3d(-10%, -10%, 0) scale(0.9); }
  66%      { transform: translate3d(8%, -5%, 0) scale(1.18); }
}

@media (prefers-color-scheme: dark) { .hero__aura { opacity: 0.42; } }
:root[data-theme='dark'] .hero__aura { opacity: 0.42; }
:root[data-theme='light'] .hero__aura { opacity: 0.55; }

@media (prefers-reduced-motion: reduce) {
  .hero__aura::before,
  .hero__aura::after { animation: none; }
}

.hero__portrait {
  position: relative;
  z-index: 1;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--paper-2);
}
.hero__portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Etwas größer als der Rahmen, damit die Parallaxe keine Kanten zeigt. */
  scale: 1.12;
  will-change: transform;
}
@media (max-width: 880px) {
  .hero__portrait { max-width: 22rem; aspect-ratio: 4 / 5; }
}

/* Buttons: eckig, ruhig, ein einziger auffälliger */
.btn {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.85rem 1.4rem;
  font-family: var(--font-mono);
  font-size: var(--t-meta);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border: 1px solid var(--ink);
  background: var(--ink); color: var(--paper);
  cursor: pointer;
  transition: background-color 0.25s, color 0.25s, border-color 0.25s;
}
.btn:hover { background: var(--signal); border-color: var(--signal); color: #fff; }
.btn svg { transition: transform 0.35s var(--ease); }
.btn:hover svg { transform: translateX(4px); }

.btn--line { background: none; color: var(--ink); border-color: var(--rule); }
.btn--line:hover { background: none; color: var(--signal); border-color: var(--signal); }

/* Textlink mit wachsender Linie */
.tlink {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-family: var(--font-mono); font-size: var(--t-meta);
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink); padding-bottom: 3px;
  background-image: linear-gradient(var(--signal), var(--signal));
  background-size: 100% 1px; background-position: 0 100%;
  background-repeat: no-repeat;
  transition: color 0.2s, background-size 0.4s var(--ease);
}
.tlink:hover { color: var(--signal); background-size: 0 1px; }
.tlink svg { transition: transform 0.35s var(--ease); }
.tlink:hover svg { transform: translate(3px, -3px); }

/* Abschnittskopf: Nummer + Titel auf einer Haarlinie */
.shead {
  position: relative;
  display: flex; flex-wrap: wrap; align-items: baseline;
  justify-content: space-between; gap: 1rem;
  padding-top: 1rem; margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
  border-top: 1px solid var(--rule);
}

/* Die Linie über dem Abschnitt zeichnet sich beim Heranscrollen. */
.shead::before {
  content: '';
  position: absolute;
  top: -1px; left: 0; right: 0;
  height: 1px;
  background: var(--ink);
  transform: scaleX(0);
  transform-origin: 0 50%;
}
.js .shead::before { transition: transform 1.1s var(--ease); }
.shead.is-drawn::before,
html:not(.js) .shead::before { transform: scaleX(1); }
.shead__t { font-size: var(--t-h2); }
.shead__note { max-width: 40ch; color: var(--ink-soft); font-size: var(--t-sm); }

/* Themenliste statt Icon-Kacheln */
.themes { border-top: 1px solid var(--rule); }

.theme {
  display: grid;
  grid-template-columns: 3.5rem minmax(0, 1fr) minmax(0, 1.1fr);
  gap: var(--gap);
  align-items: baseline;
  padding-block: clamp(1.1rem, 2.5vw, 1.8rem);
  border-bottom: 1px solid var(--rule);
}
@media (max-width: 700px) {
  .theme { grid-template-columns: 2.5rem minmax(0, 1fr); }
  .theme__text { grid-column: 2; }
}
.theme__num { font-family: var(--font-mono); font-size: var(--t-meta); color: var(--signal); }
.theme__name { font-family: var(--font-display); font-weight: 600; font-size: var(--t-h3); letter-spacing: -0.03em; }
.theme__text { color: var(--ink-soft); font-size: var(--t-sm); }

/* 6 — Beitragsliste (Kernstück) ------------------------------------------ */

.entries { border-top: 1px solid var(--ink); }

.entry {
  position: relative;
  display: grid;
  grid-template-columns: 9.5rem minmax(0, 1fr) auto;
  gap: var(--gap);
  align-items: center;
  padding-block: clamp(1.3rem, 3vw, 2.4rem);
  border-bottom: 1px solid var(--rule);
  transition: border-color 0.3s;
}

/* Beim Überfahren läuft eine Signallinie unter der Zeile durch. */
.entry::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 1px;
  background: var(--signal);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 0.6s var(--ease);
}
.entry:hover::after { transform: scaleX(1); }

.entry__when {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  align-self: center;
}
.entry__time { color: var(--ink-mute); opacity: 0.75; }

.entry__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.35rem, 0.95rem + 1.9vw, 2.9rem);
  line-height: 1.03;
  letter-spacing: -0.035em;
  transition: transform 0.5s var(--ease), color 0.3s;
}
.entry:hover .entry__title { color: var(--signal); transform: translateX(0.6rem); }

/* Ganze Zeile klickbar, ohne verschachtelte Links */
.entry__title a::after { content: ''; position: absolute; inset: 0; z-index: 2; }

.entry__side {
  display: flex; align-items: center; gap: 1.2rem;
  white-space: nowrap;
}

.entry__cat { color: var(--signal); }

@media (max-width: 780px) {
  .entry { grid-template-columns: minmax(0, 1fr); gap: 0.5rem; }
  .entry__side { gap: 0.9rem; }
  .entry:hover .entry__title { transform: none; }
}

/* Bildvorschau, die dem Zeiger folgt – nur auf großen Zeigegeräten */
.peek {
  position: fixed; top: 0; left: 0;
  width: 20rem; aspect-ratio: 4 / 3;
  z-index: 60; pointer-events: none;
  overflow: hidden;
  opacity: 0;
  transform: translate3d(-50%, -50%, 0) scale(0.94) skewX(2deg);
  transition: opacity 0.3s var(--ease), transform 0.45s var(--ease);
  box-shadow: 0 30px 60px -30px rgb(0 0 0 / 45%);
}
.peek.is-on { opacity: 1; transform: translate3d(-50%, -50%, 0) scale(1) skewX(0deg); }
.peek img { width: 100%; height: 100%; object-fit: cover; }

@media (hover: none), (max-width: 900px) {
  .peek { display: none; }
}

/* Hervorgehobener Beitrag */
.lead-post { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(1.5rem, 4vw, 3rem); align-items: center; }
@media (max-width: 860px) { .lead-post { grid-template-columns: 1fr; } }

.lead-post__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--paper-2); }
.lead-post__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s var(--ease); }
.lead-post:hover .lead-post__media img { transform: scale(1.04); }

.lead-post__title {
  /* Bewusst kleiner als eine Seiten-H1: der Beitrag steht in einer
     schmalen Spalte, zu große Grade brechen dort unschön um. */
  font-size: clamp(1.6rem, 1.15rem + 1.9vw, 2.9rem);
  line-height: 1.02;
  margin-block: 0.7rem 1rem;
}
.lead-post__title a { transition: color 0.3s; }
.lead-post:hover .lead-post__title a { color: var(--signal); }
.lead-post__ex { color: var(--ink-soft); max-width: 44ch; }
.lead-post__meta { display: flex; flex-wrap: wrap; gap: 1.2rem; margin-top: 1.4rem; }

/* Filterleiste */
.filters {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem;
  padding-block: 1rem; border-top: 1px solid var(--rule);
}
.chip {
  padding: 0.45rem 0.9rem;
  font-family: var(--font-mono); font-size: var(--t-meta);
  letter-spacing: 0.12em; text-transform: uppercase;
  border: 1px solid var(--rule); background: none;
  color: var(--ink-soft); cursor: pointer;
  transition: color 0.2s, border-color 0.2s, background-color 0.2s;
}
.chip:hover { color: var(--ink); border-color: var(--ink-mute); }
.chip.is-on { background: var(--ink); border-color: var(--ink); color: var(--paper); }

.find { position: relative; margin-left: auto; flex: 0 1 16rem; }
.find input {
  width: 100%; padding: 0.5rem 0.6rem 0.5rem 1.8rem;
  border: 0; border-bottom: 1px solid var(--rule);
  background: none; font-size: var(--t-sm);
}
.find input:focus { outline: none; border-bottom-color: var(--signal); }
.find svg { position: absolute; left: 0; top: 50%; transform: translateY(-50%); color: var(--ink-mute); }

.none {
  padding: 4rem 0; text-align: center;
  color: var(--ink-mute); font-family: var(--font-mono); font-size: var(--t-sm);
}

/* 7 — Artikel ------------------------------------------------------------- */

.progress {
  position: fixed; top: 0; left: 0; z-index: 120;
  height: 2px; width: 100%; background: var(--signal);
  transform: scaleX(0); transform-origin: 0 50%; will-change: transform;
}

.crumbs { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; }
.crumbs ol { display: contents; list-style: none; margin: 0; padding: 0; }
.crumbs li { display: inline-flex; align-items: center; gap: 0.4rem; }
.crumbs a:hover { color: var(--signal); }

.ph { padding-block: clamp(1.5rem, 4vw, 3rem) 0; }
.ph__title { font-size: var(--t-h1); max-width: 18ch; margin-block: 1rem; }
.ph__lead { font-size: var(--t-lead); line-height: 1.4; color: var(--ink-soft); max-width: 48ch; }
.ph__meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1.5rem;
  margin-top: 2rem; padding-top: 1rem; border-top: 1px solid var(--rule);
}
.ph__author {
  display: inline-flex; align-items: center; gap: 0.55rem;
  color: var(--ink);
  transition: color 0.2s;
}
.ph__author:hover { color: var(--signal); }
.ph__author img { width: 1.7rem; height: 1.7rem; object-fit: cover; border-radius: 50%; }

.pfig { margin: clamp(1.5rem, 4vw, 3rem) 0; }
.pfig img { width: 100%; height: auto; display: block; }

/* Kennzeichnung für KI-Bilder: sichtbar, aber zurückhaltend. */
.pfig__note {
  margin-top: 0.6rem;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-mute);
  opacity: 0.8;
}

/* Beiträge bekommen einen eigenen, schmaleren Rahmen.
   Mit der vollen Seitenbreite entstünde zwischen Textspalte und
   Inhaltsverzeichnis ein leeres Feld von mehreren hundert Pixeln. */
/* Breite so gewählt, dass Textspalte (--measure) + Abstand +
   Inhaltsverzeichnis den Rahmen genau ausfüllen. Sonst bleibt zwischen
   beiden Spalten eine Lücke stehen. */
.wrap--read { max-width: 61rem; }

.plyt {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 13rem;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
}
@media (max-width: 1000px) { .plyt { grid-template-columns: 1fr; } }

.toc { position: sticky; top: calc(var(--head-h) + 2rem); }
@media (max-width: 1000px) { .toc { display: none; } }
.toc ul { list-style: none; margin: 0.8rem 0 0; padding: 0; }
.toc a {
  display: block; padding: 0.45rem 0 0.45rem 0.9rem;
  border-left: 1px solid var(--rule);
  color: var(--ink-mute); font-size: var(--t-sm); line-height: 1.3;
  transition: color 0.25s, border-color 0.25s;
}
.toc a:hover { color: var(--ink); }
.toc a.is-on { color: var(--signal); border-left-color: var(--signal); }
.toc li.lvl3 a { padding-left: 1.7rem; }

/* Kernaussagen-Kasten: die Antwort steht oben, nicht versteckt im Text.
   Hilft eiligen Lesern, Suchmaschinen und Sprachmodellen gleichermaßen. */
.gist {
  /* Gleiche Schriftgröße wie der Fließtext, damit die ch-Einheit dieselbe
     Breite ergibt und die rechte Kante exakt mit dem Text abschließt. */
  font-size: 1.13rem;
  max-width: var(--measure);
  margin-bottom: clamp(2rem, 4vw, 3rem);
  padding: clamp(1.2rem, 2.5vw, 1.8rem) clamp(1.2rem, 2.5vw, 2rem);
  background: var(--paper-2);
  border-left: 3px solid var(--signal);
}
.gist__list {
  font-size: 1rem;
  margin: 0.9rem 0 0;
  padding-left: 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  line-height: 1.55;
  color: var(--ink);
}
.gist__list li::marker { color: var(--signal); }

/* Fließtext */
.prose {
  max-width: var(--measure);
  font-size: 1.13rem;
  line-height: 1.78;
  color: var(--ink-soft);
}
.prose > * + * { margin-top: 1.45em; }

/* Der erste Absatz größer – klassischer Einstieg im Zeitschriftensatz */
.prose > p:first-child { font-size: 1.22em; line-height: 1.5; color: var(--ink); }

.prose h2 {
  margin-top: 2.4em; padding-top: 0.8em;
  border-top: 1px solid var(--rule);
  font-size: var(--t-h2); color: var(--ink);
  scroll-margin-top: calc(var(--head-h) + 2rem);
}
.prose h3 {
  margin-top: 2em; font-size: var(--t-h3); color: var(--ink);
  scroll-margin-top: calc(var(--head-h) + 2rem);
}
.prose strong { color: var(--ink); font-weight: 700; }

.prose a {
  color: var(--ink); font-weight: 500;
  background-image: linear-gradient(var(--signal), var(--signal));
  background-size: 100% 1px; background-position: 0 100%; background-repeat: no-repeat;
  padding-bottom: 1px; transition: color 0.2s, background-size 0.35s var(--ease);
}
.prose a:hover { color: var(--signal); background-size: 0 1px; }

.prose ul, .prose ol { padding-left: 1.2em; }
.prose li + li { margin-top: 0.5em; }
.prose li::marker { color: var(--signal); }

/* Zitat als typografischer Höhepunkt */
.prose blockquote {
  margin: 2.2em 0; padding: 0;
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.3rem, 1rem + 1.3vw, 2rem);
  line-height: 1.2; letter-spacing: -0.03em; color: var(--ink);
}
.prose blockquote::before {
  content: ''; display: block;
  width: 3rem; height: 3px; background: var(--signal);
  transform: skewX(var(--slant)); margin-bottom: 1rem;
}

.prose code {
  padding: 0.12em 0.35em; background: var(--paper-2);
  font-family: var(--font-mono); font-size: 0.86em; color: var(--ink);
}
.prose pre {
  padding: 1.3rem; background: var(--paper-2);
  overflow-x: auto; font-size: 0.9rem; line-height: 1.55;
}
.prose pre code { padding: 0; background: none; }
.prose hr { border: 0; border-top: 1px solid var(--rule); margin-block: 2.5em; }

.post-figure { margin: 2.2em 0; }
.post-figure figcaption {
  margin-top: 0.6rem; font-family: var(--font-mono);
  font-size: var(--t-meta); letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink-mute);
}

.ptags { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 2.5rem; padding-top: 1.2rem; border-top: 1px solid var(--rule); }
.ptag {
  padding: 0.3rem 0.7rem; border: 1px solid var(--rule);
  font-family: var(--font-mono); font-size: var(--t-meta);
  letter-spacing: 0.1em; color: var(--ink-mute);
}

.pshare { display: flex; align-items: center; gap: 1rem; margin-top: 1.2rem; }

.abox {
  display: flex; gap: 1.5rem; align-items: center;
  margin-top: 3.5rem; padding-top: 1.5rem; border-top: 1px solid var(--ink);
}
.abox img { width: 4.5rem; height: 4.5rem; object-fit: cover; flex: none; }
.abox__n { font-family: var(--font-display); font-weight: 700; font-size: var(--t-h3); letter-spacing: -0.03em; }
.abox__t { margin-top: 0.4rem; color: var(--ink-soft); font-size: var(--t-sm); max-width: 50ch; }
@media (max-width: 560px) { .abox { flex-direction: column; align-items: flex-start; } }

/* Abschluss-Aufruf: rein typografisch, kein Farbverlauf */
.cta { padding-block: var(--band); border-top: 1px solid var(--ink); }
.cta__t { font-size: var(--t-h1); max-width: 16ch; line-height: 0.98; }
.cta__t .accent { color: var(--signal); }
.cta__acts { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 2rem; }

/* Blättern */
.pager { display: flex; gap: 0.35rem; margin-top: 3rem; }
.pager a, .pager span {
  display: inline-grid; place-items: center;
  min-width: 2.4rem; height: 2.4rem; padding-inline: 0.6rem;
  border: 1px solid var(--rule);
  font-family: var(--font-mono); font-size: var(--t-meta);
  letter-spacing: 0.1em; font-variant-numeric: tabular-nums;
}
.pager a:hover { border-color: var(--signal); color: var(--signal); }
.pager .now { background: var(--ink); border-color: var(--ink); color: var(--paper); }

/* Rechtstexte: ruhiger Satz, engere Zeilenlänge, klare Gliederung.
   Diese Seiten liest niemand am Stück – sie müssen scanbar sein. */
.legal { padding-top: 2rem; padding-bottom: var(--band); }

.legal__body {
  max-width: 62ch;
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
  font-size: 1rem;
  line-height: 1.7;
}
.legal__body > * + * { margin-top: 1.1em; }

.legal__body h2 {
  margin-top: 2.6em;
  padding-top: 0.9em;
  border-top: 1px solid var(--rule);
  font-size: var(--t-h3);
  color: var(--ink);
}
.legal__body h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }

.legal__body ul { padding-left: 1.2em; }
.legal__body li + li { margin-top: 0.4em; }
.legal__body li::marker { color: var(--signal); }

.legal__body a {
  color: var(--ink);
  background-image: linear-gradient(var(--signal), var(--signal));
  background-size: 100% 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: color 0.2s, background-size 0.35s var(--ease);
}
.legal__body a:hover { color: var(--signal); background-size: 0 1px; }

/* E-Mail-Adresse im Impressum: gleiche Optik wie ein Link, aber keiner.
   Sie steht als reiner Text da und lässt sich markieren und kopieren. */
.mail {
  font-family: var(--font-mono);
  font-size: 0.95em;
  color: var(--ink);
  word-break: break-all;
}

/* Einwilligungs-Hinweis ---------------------------------------------------- */

.consent {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 200;
  background: var(--paper);
  border-top: 1px solid var(--ink);
  box-shadow: 0 -20px 50px -30px rgb(0 0 0 / 45%);
  transform: translateY(100%);
  transition: transform 0.45s var(--ease);
}
.consent.is-open { transform: none; }

.consent__inner {
  max-width: var(--max);
  margin-inline: auto;
  padding: clamp(1.1rem, 2.5vw, 1.6rem) var(--pad);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(1rem, 3vw, 2.5rem);
  align-items: center;
}
@media (max-width: 760px) {
  .consent__inner { grid-template-columns: 1fr; }
}

.consent__title {
  font-family: var(--font-display);
  font-size: 1.15rem;
  letter-spacing: -0.02em;
  margin-bottom: 0.4rem;
}
.consent__text {
  font-size: var(--t-sm);
  color: var(--ink-soft);
  max-width: 62ch;
  line-height: 1.55;
}
.consent__text a {
  color: var(--ink);
  background-image: linear-gradient(var(--signal), var(--signal));
  background-size: 100% 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
}
.consent__text a:hover { color: var(--signal); }

/* Beide Schaltflächen gleich groß. Ablehnen darf nicht schwerer
   zu finden sein als Zustimmen, das verlangt der Datenschutz. */
.consent__acts { display: flex; flex-wrap: wrap; gap: 0.6rem; }
/* flex-basis 0 statt auto: beide Schaltflächen werden exakt gleich breit,
   unabhängig von der Textlänge. */
.consent__acts .btn { flex: 1 1 0; justify-content: center; min-width: 9.5rem; }

@media (prefers-reduced-motion: reduce) {
  .consent { transition: none; }
}

/* 8 — Fußbereich ---------------------------------------------------------- */

.foot { border-top: 1px solid var(--ink); padding-block: clamp(2.5rem, 5vw, 4rem) 2rem; }

.foot__grid {
  display: grid; grid-template-columns: 1.6fr repeat(2, minmax(0, 1fr));
  gap: var(--gap);
}
@media (max-width: 760px) {
  .foot__grid { grid-template-columns: 1fr 1fr; }
  .foot__brand { grid-column: 1 / -1; margin-bottom: 1rem; }
}

.foot__claim {
  margin-top: 1rem; max-width: 26ch;
  font-family: var(--font-display); font-weight: 600;
  font-size: var(--t-h3); letter-spacing: -0.03em; line-height: 1.15;
}
.foot__soc { display: flex; gap: 0.4rem; margin-top: 1.5rem; }

.foot__h { margin-bottom: 0.9rem; }
.foot__l { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.55rem; }
.foot__l a { font-size: var(--t-sm); color: var(--ink-soft); transition: color 0.2s; }
.foot__l a:hover { color: var(--signal); }

/* Cookie-Einstellungen ist eine Schaltfläche, muss aber wie die
   übrigen Fußzeilen-Links aussehen. */
.foot__link-btn {
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--font-body);
  font-size: var(--t-sm);
  color: var(--ink-soft);
  text-align: left;
  cursor: pointer;
  transition: color 0.2s;
}
.foot__link-btn:hover { color: var(--signal); }

.foot__end {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.8rem;
  margin-top: 3rem; padding-top: 1.2rem; border-top: 1px solid var(--rule);
}

.top {
  position: fixed; right: var(--pad); bottom: 1.5rem; z-index: 90;
  background: var(--paper); opacity: 0; visibility: hidden;
  transform: translateY(6px);
  transition: opacity 0.3s, visibility 0.3s, transform 0.3s var(--ease);
}
.top.is-on { opacity: 1; visibility: visible; transform: none; }

/* 9 — Bewegung ------------------------------------------------------------ */

/* Zeilen steigen beim Scrollen leicht auf.
   Wichtig: nur wenn JavaScript läuft (.js), wird überhaupt etwas versteckt.
   Ohne JS – oder wenn ein Skript scheitert – bleibt alles sichtbar. */
.js .rise { opacity: 0; transform: translateY(14px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.js .rise.is-in { opacity: 1; transform: none; }

.js .stagger > * { opacity: 0; transform: translateY(14px); transition: opacity 0.55s var(--ease), transform 0.55s var(--ease); }
.js .stagger.is-in > * { opacity: 1; transform: none; }
.js .stagger.is-in > *:nth-child(1) { transition-delay: 0.03s; }
.js .stagger.is-in > *:nth-child(2) { transition-delay: 0.07s; }
.js .stagger.is-in > *:nth-child(3) { transition-delay: 0.11s; }
.js .stagger.is-in > *:nth-child(4) { transition-delay: 0.15s; }
.js .stagger.is-in > *:nth-child(5) { transition-delay: 0.19s; }
.js .stagger.is-in > *:nth-child(6) { transition-delay: 0.23s; }
.js .stagger.is-in > *:nth-child(7) { transition-delay: 0.27s; }
.js .stagger.is-in > *:nth-child(8) { transition-delay: 0.31s; }

/* Beim Laden bereits sichtbare Bereiche erscheinen ohne Verzögerung.
   Die Auswahl ist bewusst so spezifisch wie die nth-child-Regeln oben –
   sonst gewinnen deren transition-delay-Werte. */
.js .rise.at-once,
.js .stagger.at-once.is-in > * {
  transition: none;
  transition-delay: 0s;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  .js .rise, .js .stagger > * { opacity: 1; transform: none; }
  .peek { display: none; }
}

@media print {
  .head, .foot, .toc, .top, .progress, .cta, .pshare, .peek { display: none; }
  body { background: #fff; color: #000; }
  .prose { max-width: none; font-size: 11pt; }
  .prose a::after { content: ' (' attr(href) ')'; font-size: 9pt; }
}