/* =============================================================================
   Blogbeitrag · finale Vorlage
   -----------------------------------------------------------------------------
   Basis: Richtung C "Leser zuerst". Dazu aus A (Editorial): roter Satzzeichen-
   Akzent im Titel, Initiale, konturierte Kapitelnummern, Zitat mit grossem
   Anfuehrungszeichen, Lesebalken mit Kapiteltitel, Buch-Spur im Raster.
   Aus B (Briefing): Navigation deckend, blog-buch.css fest im Kopf (CLS 0),
   natives Teilen, haengende Stichwort-Marken.

   In der Vorlage: /assets/css/beitrag.css?v=1. Ersetzt in allen Blogseiten
   (generiert und handgepflegt, dazu die Uebersicht /blog) content.css und den
   Inline-<style>. Alle anderen Seiten behalten content.css. Ergaenzt um die
   Uebersicht, das Buchbild im Text und den Platz fuer social.js (unten).
   Schriften: /assets/css/schriften.css + schriften-kursiv.css (selbst gehostet).
   Mobile first. Breakpoints: 600 · 641 (Navigation) · 760 · 1100 (Buch-Spur
   rechts, blog-buch.js) · 1260 (Inhaltsverzeichnis links).
   ============================================================================= */
:root{
  --ink:#0A0A0B; --ink-tief:#050506; --flaeche:#0F1012; --flaeche-2:#141619;
  --linie:rgba(168,176,181,.16); --linie-stark:rgba(168,176,181,.3);
  --creme:#F5F1EA; --text:#D3CEC5; --text-2:#B8B3AA; --stahl:#A8B0B5; --grau:#8C9297;
  --rot:#D9342B;            /* Marke: Linien, Flaechen, grosse Schrift (4,2:1) */
  --rot-hell:#F0564B;       /* kleine rote Schrift: 5,8:1 auf --ink */
  --rot-dunkel:#B82A22;
  --f-display:'Playfair Display','Playfair Ersatz',Georgia,'Times New Roman',serif;
  --f-text:'Inter Tight','Inter Ersatz',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  --f-mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --rand:20px; --nav-h:64px; --ease:cubic-bezier(.2,.7,.1,1);
  --spalte:39rem;           /* Textspalte: 624 px, bei 20 px rund 66 Zeichen je Zeile */
  --toc:210px; --rail:230px; --luecke:48px;
  --gesamt:calc(var(--spalte) + 2 * var(--rand));
  /* Namen aus content.css: blog-buch.css und leserstimmen.css greifen darauf zu */
  --blood:var(--rot); --cream:var(--creme); --cream-dim:#C9C4BB; --steel:var(--stahl); --steel-dim:var(--grau);
  --ink-deep:var(--ink-tief); --font-display:var(--f-display); --font-body:var(--f-text); --font-mono:var(--f-mono);
  --gutter:var(--rand); --blood-text:var(--rot-hell);
}
/* Ersatzschriften mit angeglichenen Massen: Beim Schriftwechsel springt kaum etwas. */
@font-face{ font-family:'Inter Ersatz'; src:local('Arial'), local('Helvetica'), local('Liberation Sans'); size-adjust:94%; ascent-override:103%; descent-override:26%; line-gap-override:0%; }
@font-face{ font-family:'Playfair Ersatz'; src:local('Georgia'), local('Times New Roman'), local('Liberation Serif'); size-adjust:112%; ascent-override:96%; descent-override:22%; line-gap-override:0%; }

*,*::before,*::after{ box-sizing:border-box; }
html{ background:var(--ink); -webkit-text-size-adjust:100%; text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:calc(var(--nav-h) + 20px); }
body{ margin:0; background:var(--ink); color:var(--text); font:400 1rem/1.6 var(--f-text); -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; overflow-x:clip; }
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; }
p{ margin:0; }
button{ font:inherit; color:inherit; }
::selection{ background:var(--rot); color:#fff; }
:focus-visible{ outline:2px solid var(--rot-hell); outline-offset:3px; }
.vh{ position:absolute!important; width:1px; height:1px; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0; }
.sprung{ position:fixed; left:12px; top:-80px; z-index:100; padding:12px 16px; background:var(--creme); color:var(--ink); font:500 13px/1 var(--f-mono); text-decoration:none; }
.sprung:focus{ top:12px; }
.marke{ font:500 .6875rem/1.3 var(--f-mono); letter-spacing:.2em; text-transform:uppercase; color:var(--rot-hell); }

/* ------------------------------------------------------------- Navigation
   Markup und Aussehen wie content.css (Checkbox-Burger ohne JS), aber deckend
   und mit fester Hoehe, damit die Leseleiste sie genau ueberdeckt. */
.c-nav{ position:sticky; top:0; z-index:50; display:flex; align-items:center; justify-content:space-between; height:var(--nav-h);
  padding:0 var(--rand); background:var(--ink); border-bottom:1px solid rgba(168,176,181,.1); }
.c-nav .logo{ font:900 18px/1 var(--f-display); letter-spacing:.02em; color:var(--creme); text-decoration:none; }
.c-nav .logo .accent{ color:var(--rot); }
.c-nav-links{ display:flex; align-items:center; gap:clamp(12px,2vw,28px); }
.c-nav-links a{ font:400 11px/1 var(--f-mono); letter-spacing:.16em; text-transform:uppercase; color:var(--stahl); text-decoration:none; transition:color .2s var(--ease); }
.c-nav-links a:hover{ color:var(--rot-hell); }
.c-nav-links .c-nav-cta{ padding:9px 16px; border:1px solid rgba(245,241,234,.22); color:var(--creme); }
.c-nav-links .c-nav-cta:hover{ border-color:var(--rot); color:var(--creme); }
.c-nav-toggle{ position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }
@media (min-width:641px){ .c-nav-toggle{ display:none; } }   /* breit: kein unsichtbarer Tab-Stopp */
.c-burger{ display:none; }
@media (max-width:640px){
  .c-burger{ display:flex; flex-direction:column; justify-content:center; gap:5px; width:44px; height:44px; padding:11px 8px; margin-right:-8px; cursor:pointer; }
  .c-burger span{ display:block; height:2px; background:var(--creme); transition:transform .28s var(--ease), opacity .18s var(--ease); }
  .c-nav-links{ position:absolute; top:100%; left:0; right:0; flex-direction:column; align-items:stretch; gap:0; background:var(--ink-tief);
    border-bottom:1px solid rgba(168,176,181,.14); box-shadow:0 24px 40px -20px rgba(0,0,0,.9); max-height:0; overflow:hidden; visibility:hidden;
    transition:max-height .32s var(--ease), visibility 0s .32s; }
  .c-nav-links a{ padding:15px var(--rand); font-size:13px; letter-spacing:.14em; color:var(--creme); border-top:1px solid rgba(168,176,181,.08); }
  .c-nav-links .c-nav-cta{ border:0; border-top:1px solid rgba(168,176,181,.08); color:var(--rot-hell); }
  .c-nav-toggle:checked ~ .c-nav-links{ max-height:75vh; visibility:visible; transition:max-height .32s var(--ease); }
  .c-nav-toggle:focus-visible ~ .c-burger{ outline:2px solid var(--rot-hell); outline-offset:2px; }
  .c-nav-toggle:checked ~ .c-burger span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  .c-nav-toggle:checked ~ .c-burger span:nth-child(2){ opacity:0; }
  .c-nav-toggle:checked ~ .c-burger span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
}

/* ------------------------------------------------------------- Leseleiste
   Fest oben. Beim Lesen nach unten ueberdeckt sie die Navigation, beim
   Hochscrollen kommt die Navigation zurueck. Ab 1260 px bleibt nur die Spur.
   fixed + transform: kein Layout-Sprung. Ohne JS bleibt sie [hidden]. */
.leiste{ position:fixed; z-index:60; left:0; right:0; top:0; background:var(--ink); border-bottom:1px solid var(--linie);
  transform:translateY(-102%); visibility:hidden; transition:transform .3s var(--ease), visibility 0s .3s; }
.leiste.ist-an{ transform:none; visibility:visible; transition:transform .3s var(--ease); }
.leiste-zeile{ display:flex; align-items:center; gap:14px; height:calc(var(--nav-h) - 4px); padding:0 var(--rand); }
.leiste-text{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:6px; }
.leiste-oben{ font:500 .65625rem/1 var(--f-mono); letter-spacing:.14em; text-transform:uppercase; color:var(--grau); white-space:nowrap; }
.leiste-oben b{ font-weight:500; color:var(--rot-hell); }
.leiste-titel{ font:700 .96875rem/1.2 var(--f-display); color:var(--creme); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.leiste-knopf{ flex:0 0 auto; display:inline-flex; align-items:center; gap:9px; height:44px; padding:0 14px; background:none; border:1px solid var(--linie-stark);
  cursor:pointer; font:500 .6875rem/1 var(--f-mono); letter-spacing:.16em; text-transform:uppercase; color:var(--creme); }
.leiste-knopf::after{ content:""; width:7px; height:7px; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform:translateY(-2px) rotate(45deg); transition:transform .2s var(--ease); }
.leiste-knopf[aria-expanded="true"]{ border-color:var(--rot); }
.leiste-knopf[aria-expanded="true"]::after{ transform:translateY(2px) rotate(-135deg); }
.leiste-panel{ max-height:calc(100vh - var(--nav-h) - 24px); max-height:calc(100dvh - var(--nav-h) - 24px); overflow:auto; overscroll-behavior:contain;
  padding:2px var(--rand) 16px; background:var(--ink-tief); border-top:1px solid var(--linie); box-shadow:0 30px 40px -20px rgba(0,0,0,.9); }
.leiste-panel .inhalt-ende{ margin:12px 0 0; }

/* Segmentierte Spur: ein Segment je Kapitel, Breite nach Wortzahl (--w). */
.spur{ display:flex; gap:3px; }
.spur i{ position:relative; flex:var(--w) 1 0%; min-width:6px; overflow:hidden; background:rgba(168,176,181,.2); }
.spur b{ position:absolute; inset:0; background:var(--rot); transform-origin:0 50%; transform:scaleX(0); }
.spur-leiste{ height:3px; }

/* ------------------------------------------------------------- Seite und Kopf */
main.c-wrap.seite{ display:block; max-width:none; margin:0; padding:0; }
.kopf{ position:relative;
  background:radial-gradient(ellipse 90% 380px at 85% 0, rgba(217,52,43,.11), transparent 70%) no-repeat,
    repeating-linear-gradient(90deg, transparent 0 3px, rgba(168,176,181,.02) 3px 4px); }
.kopf-innen{ max-width:var(--gesamt); margin:0 auto; padding:22px var(--rand) 26px; }
.pfad ol{ display:flex; flex-wrap:wrap; gap:4px 8px; margin:0 0 24px; padding:0; list-style:none;
  font:400 .6875rem/1.4 var(--f-mono); letter-spacing:.14em; text-transform:uppercase; color:var(--grau); }
.pfad li + li::before{ content:"/"; margin-right:8px; color:rgba(168,176,181,.45); }
.pfad a{ color:var(--stahl); text-decoration:none; }
.pfad a:hover{ color:var(--creme); }
.kopf-marke{ display:flex; align-items:center; gap:12px; margin:0 0 14px; }
.kopf-marke::before{ content:""; width:24px; height:1px; background:var(--rot); flex:0 0 auto; }
.kopf h1{ margin:0 0 24px; font:800 clamp(2.125rem, 1.3rem + 3.9vw, 4.25rem)/1.06 var(--f-display); letter-spacing:-.02em;
  color:var(--creme); text-wrap:balance; -webkit-hyphens:manual; hyphens:manual; overflow-wrap:break-word; }
.kopf h1 .satz{ color:var(--rot); }
.kopf-zeile{ display:flex; align-items:center; gap:12px; }
.kopf-bild{ width:44px; height:44px; border-radius:50%; object-fit:cover; flex:0 0 auto; border:1px solid var(--linie-stark); }
.kopf-autor{ display:flex; flex-direction:column; gap:3px; font:500 .9375rem/1.3 var(--f-text); color:var(--creme); }
.kopf-autor a{ text-decoration:none; }
.kopf-autor a:hover{ color:var(--rot-hell); }
.kopf-meta{ font:400 .6875rem/1.4 var(--f-mono); letter-spacing:.1em; text-transform:uppercase; color:var(--grau); }
.lesekarte{ margin-top:24px; }
.spur-kopf{ height:4px; }
.lesekarte-text{ display:flex; justify-content:space-between; gap:12px; margin-top:10px; font:400 .6875rem/1.3 var(--f-mono); letter-spacing:.12em; text-transform:uppercase; color:var(--grau); }
.lesekarte-text span:last-child{ color:var(--stahl); white-space:nowrap; }

/* Variante mit Titelbild (nur wenn der Beitrag das Feld "Titelbild" hat). */
.kopf--bild{ background:none; }
.kopf-foto{ position:relative; margin:0; width:100%; aspect-ratio:4/3; max-height:58svh; overflow:hidden; background:var(--flaeche); }
.kopf-foto img{ width:100%; height:100%; object-fit:cover; object-position:var(--fokus, 50% 35%); filter:saturate(.75) contrast(1.05) brightness(.86); }
.kopf-foto::after{ content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(10,10,11,.4) 0, rgba(10,10,11,0) 22%, rgba(10,10,11,0) 42%, rgba(10,10,11,.82) 80%, var(--ink) 100%),
    radial-gradient(70% 50% at 85% 100%, rgba(217,52,43,.18), transparent 70%); }
.kopf-foto figcaption{ position:absolute; z-index:1; right:var(--rand); top:14px; max-width:60%; text-align:right;
  font:400 .625rem/1.4 var(--f-mono); letter-spacing:.14em; text-transform:uppercase; color:rgba(245,241,234,.82); }
.kopf--bild .kopf-innen{ position:relative; z-index:1; margin-top:-84px; }

/* ------------------------------------------------------------- Artikel */
.beitrag{ max-width:var(--gesamt); margin:0 auto; padding:0 var(--rand); }

/* Kurzantwort (Klasse und Aufbau wie heute: speakable = .kurzantwort p) */
.kurzantwort{ position:relative; margin:4px 0 22px; padding:18px 18px 20px;
  background:linear-gradient(180deg, rgba(217,52,43,.08), rgba(217,52,43,.02)); border:1px solid rgba(217,52,43,.3); border-left:3px solid var(--rot); }
.ka-titel{ display:flex; justify-content:space-between; gap:12px; margin-bottom:10px; font:500 .6875rem/1.3 var(--f-mono); letter-spacing:.2em; text-transform:uppercase; color:var(--rot-hell); }
.ka-zeit{ color:var(--grau); letter-spacing:.12em; }
.kurzantwort p{ font:400 1.0625rem/1.6 var(--f-text); color:var(--creme); }

/* Inhaltsverzeichnis: mobil eingeklappt (<details>), ab 1260 px klebend links */
.inhalt{ margin:0 0 30px; }
.inhalt-auf{ border:1px solid var(--linie); background:rgba(15,16,18,.6); }
.inhalt-auf summary{ display:flex; align-items:center; gap:12px; min-height:52px; padding:0 16px; cursor:pointer; list-style:none; }
.inhalt-auf summary::-webkit-details-marker{ display:none; }
.inhalt-titel{ font:500 .6875rem/1 var(--f-mono); letter-spacing:.2em; text-transform:uppercase; color:var(--creme); }
.inhalt-info{ flex:1; text-align:right; font:400 .6875rem/1 var(--f-mono); letter-spacing:.1em; text-transform:uppercase; color:var(--grau); }
.inhalt-pfeil{ width:9px; height:9px; margin:-4px 2px 0 0; border-right:1.5px solid var(--stahl); border-bottom:1.5px solid var(--stahl); transform:rotate(45deg); transition:transform .25s var(--ease); }
.inhalt-auf[open] .inhalt-pfeil{ transform:rotate(225deg); margin-top:4px; }
.inhalt-auf .inhalt-liste{ padding:0 16px 6px; }
.inhalt-liste{ margin:0; padding:0; list-style:none; }
.inhalt-liste a{ position:relative; display:grid; grid-template-columns:1.9rem 1fr auto; gap:10px; align-items:baseline; padding:12px 0 13px;
  border-top:1px solid var(--linie); color:var(--text-2); text-decoration:none; }
.inhalt-liste .nr{ font:500 .6875rem/1 var(--f-mono); letter-spacing:.06em; color:var(--grau); }
.inhalt-liste .t{ font:500 .9375rem/1.35 var(--f-text); }
.inhalt-liste .min{ font:400 .6875rem/1 var(--f-mono); letter-spacing:.06em; color:var(--grau); white-space:nowrap; }
.inhalt-liste .fuell{ position:absolute; left:0; right:0; bottom:-1px; height:1px; background:var(--rot); transform-origin:0 50%; transform:scaleX(0); }
.inhalt-liste a:hover{ color:var(--creme); }
.inhalt-liste .ist-dran a{ color:var(--creme); }
.inhalt-liste .ist-dran .nr{ color:var(--rot-hell); }
.inhalt-liste .ist-gelesen .t{ color:var(--grau); }
.inhalt-liste .ist-gelesen .min{ font-size:0; }
.inhalt-liste .ist-gelesen .min::after{ content:"✓"; font-size:.75rem; color:var(--rot-hell); }
.inhalt-ende{ margin:4px 16px 16px; }
.inhalt-ende a{ font:400 .6875rem/1.5 var(--f-mono); letter-spacing:.12em; text-transform:uppercase; color:var(--stahl); text-decoration:none; }
.inhalt-ende a::before{ content:"↓ "; color:var(--rot-hell); }
.inhalt-ende a:hover{ color:var(--creme); }

/* ------------------------------------------------------------- Lesetext */
.text{ font-size:1.125rem; line-height:1.72; color:var(--text); letter-spacing:.003em; }
.text p{ margin:0 0 1.15em; text-wrap:pretty; -webkit-hyphens:auto; hyphens:auto; hyphenate-limit-chars:8 4 4; }
.text .lead{ margin-bottom:1.1em; font:400 1.3125rem/1.5 var(--f-display); letter-spacing:-.003em; color:var(--creme); -webkit-hyphens:manual; hyphens:manual; }
.text .lead::first-letter{ -webkit-initial-letter:2; initial-letter:2; font-weight:800; color:var(--rot); margin-right:.1em; }
@supports not ((initial-letter:2) or (-webkit-initial-letter:2)){
  .text .lead::first-letter{ float:left; font-size:3.05em; line-height:.84; padding:.05em .08em 0 0; }
}
.text a{ color:var(--creme); text-decoration:underline; text-decoration-color:rgba(217,52,43,.75); text-decoration-thickness:1.5px; text-underline-offset:.2em; transition:color .2s; }
.text a:hover{ color:var(--rot-hell); text-decoration-color:var(--rot-hell); }
.text strong{ font-weight:600; color:var(--creme); }
.text em{ font-style:italic; }
.text mark{ color:var(--creme); padding:0 .08em; -webkit-box-decoration-break:clone; box-decoration-break:clone;
  background:linear-gradient(180deg, transparent 0 58%, rgba(217,52,43,.42) 58% 90%, transparent 90%); }
/* Stichwort-Absatz: beginnt mit **Wort.** (28 von 47 Beitraegen) */
.text p.stichwort > strong:first-child{ font:700 1.06em/1 var(--f-display); letter-spacing:.005em; }
.text p.stichwort::before{ content:""; display:inline-block; width:7px; height:7px; margin:0 10px .2em 0; background:var(--rot); }
.text ul, .text ol{ margin:0 0 1.2em; padding:0; list-style:none; }
.text ul > li, .text ol > li{ position:relative; margin:0 0 .5em; padding-left:26px; }
.text ul > li::before{ content:""; position:absolute; left:2px; top:.8em; width:12px; height:2px; background:var(--rot); }
.text ol{ counter-reset:li; }
.text ol > li{ counter-increment:li; }
.text ol > li::before{ content:counter(li) "."; position:absolute; left:0; font:500 .875rem/1.95 var(--f-mono); color:var(--rot-hell); }

/* Kapitel: Mono-Zeile mit konturierter Nummer, Gesamtzahl und Minuten */
.kapitel{ padding-top:2.3em; }
.kap-marke{ display:flex; align-items:flex-end; gap:10px; margin:0 0 12px; font:500 .6875rem/1 var(--f-mono); letter-spacing:.14em; text-transform:uppercase; color:var(--grau); }
.kap-nr{ font:italic 400 3.25rem/.78 var(--f-display); letter-spacing:0; color:transparent; -webkit-text-stroke:1px var(--rot); }
.kap-von, .kap-min{ padding-bottom:3px; }
.kap-strich{ flex:1; height:1px; margin-bottom:6px; background:var(--linie); }
@supports not (-webkit-text-stroke:1px red){ .kap-nr{ color:var(--rot-hell); } }
.text h2{ margin:0 0 .65em; font:700 clamp(1.625rem, 1.25rem + 1.6vw, 2.25rem)/1.14 var(--f-display); letter-spacing:-.012em; color:var(--creme); text-wrap:balance; }
.text h3{ margin:1.7em 0 .45em; font:700 1.25rem/1.3 var(--f-display); color:var(--creme); text-wrap:balance; }
.text h2, .text h3{ scroll-margin-top:calc(var(--nav-h) + 24px); }

/* Zitat: Pull-Quote aus dem Feld "Zitat" (aria-hidden, steht schon im Text) oder echtes Blockzitat */
.zitat{ margin:2em 0 1.9em; }
.zitat blockquote{ margin:0; padding:0; }
.zitat blockquote::before{ content:"\201C"; content:"\201C" / ""; display:block; height:.42em; margin:0 0 8px -.04em; font:italic 700 6rem/1 var(--f-display); color:var(--rot); }
.zitat p{ margin:0!important; font:italic 500 clamp(1.5rem, 1.15rem + 1.5vw, 2.125rem)/1.24 var(--f-display); letter-spacing:-.01em; color:var(--creme); text-wrap:balance; -webkit-hyphens:manual; hyphens:manual; }
.zitat figcaption{ display:flex; align-items:center; gap:12px; margin-top:16px; font:500 .6875rem/1.3 var(--f-mono); letter-spacing:.2em; text-transform:uppercase; color:var(--stahl); }
.zitat figcaption::before{ content:""; width:28px; height:1px; background:var(--rot); }

/* Bild im Text (optional, nur mit Breite/Hoehe) */
.bild{ margin:2em 0; }
.bild img{ width:100%; height:auto; background:var(--flaeche); }
.bild figcaption{ margin-top:10px; font:400 .6875rem/1.6 var(--f-mono); letter-spacing:.12em; text-transform:uppercase; color:var(--stahl); }

/* Buchkarte mitten im Text: Leseprobe zuerst, kein Preis */
.buchkarte{ position:relative; display:grid; grid-template-columns:84px 1fr; gap:18px; align-items:start; margin:2.4em 0 .4em; padding:20px 18px;
  background:radial-gradient(130% 120% at 0% 100%, rgba(217,52,43,.22), transparent 55%), var(--flaeche); border:1px solid var(--linie-stark); font-size:1rem; }
.buchkarte::before{ content:""; position:absolute; left:-1px; top:-1px; width:56px; height:2px; background:var(--rot); }
.buchkarte-cover{ display:block; margin-top:4px; perspective:600px; }
.buchkarte-cover img{ width:100%; height:auto; transform:rotateY(14deg) rotate(-2deg); box-shadow:-8px 16px 28px -10px rgba(0,0,0,.9); transition:transform .5s var(--ease); }
.buchkarte:hover .buchkarte-cover img{ transform:rotateY(4deg) rotate(0); }
.buchkarte .marke{ margin:0 0 6px; }
.buchkarte-titel{ margin:0 0 6px!important; font:800 1.5rem/1.1 var(--f-display); color:var(--creme); }
.buchkarte-titel span{ color:var(--rot); }
.buchkarte-text .buchkarte-satz{ margin:0 0 14px; font:italic 400 1rem/1.45 var(--f-display); color:var(--text); -webkit-hyphens:manual; hyphens:manual; }
.buchkarte-links{ display:flex; flex-wrap:wrap; align-items:center; gap:6px 20px; margin:0!important; }
.text .buchkarte a{ text-decoration:none; }
/* .text a (0,1,1) wuerde sonst Creme auf Rot setzen (4,16:1); Weiss auf Rot erreicht 4,7:1 */
.text .buchkarte .knopf-voll{ color:#fff; }

/* Knoepfe (nur Links, keine Kauf-Skripte) */
.knopf{ display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:48px; padding:0 24px;
  font:500 .75rem/1 var(--f-mono); letter-spacing:.18em; text-transform:uppercase; text-decoration:none; transition:background .2s, border-color .2s, color .2s; }
.knopf-voll{ background:var(--rot); color:#fff; border:1px solid var(--rot); }
.knopf-voll:hover{ background:var(--rot-dunkel); border-color:var(--rot-dunkel); color:#fff!important; }
.knopf-rand{ border:1px solid rgba(245,241,234,.35); color:var(--creme); }
.knopf-rand:hover{ border-color:var(--creme); }
.knopf-klein{ min-height:44px; padding:0 18px; font-size:.6875rem; letter-spacing:.16em; }
.pfeil{ display:inline-block; transition:transform .25s var(--ease); }
.knopf:hover .pfeil{ transform:translateX(3px); }
.link-leise{ display:inline-flex; align-items:center; gap:8px; min-height:44px; font:500 .6875rem/1 var(--f-mono); letter-spacing:.16em; text-transform:uppercase; color:var(--stahl)!important; text-decoration:none; }
.link-leise:hover{ color:var(--creme)!important; }

/* ------------------------------------------------------------- Ende des Beitrags */
.beitrag-fuss{ padding-top:2.2em; }
.mitnehmen{ position:relative; padding:22px 20px 8px; background:var(--flaeche); border:1px solid var(--linie); }
.mitnehmen::before{ content:""; position:absolute; left:-1px; top:-1px; width:56px; height:2px; background:var(--rot); }
.mitnehmen .marke{ margin:0 0 14px; }
.mitnehmen ol{ margin:0; padding:0; list-style:none; counter-reset:m; }
.mitnehmen li{ counter-increment:m; display:grid; grid-template-columns:2rem 1fr; gap:6px; padding:12px 0 14px; border-top:1px solid var(--linie); font:400 1rem/1.55 var(--f-text); color:var(--creme); }
.mitnehmen li::before{ content:counter(m, decimal-leading-zero); font:500 .75rem/1.9 var(--f-mono); color:var(--rot-hell); }

.ende{ margin:44px 0 0; text-align:center; }
.ende-marke{ display:flex; align-items:center; justify-content:center; gap:10px; font:500 .6875rem/1 var(--f-mono); letter-spacing:.22em; text-transform:uppercase; color:var(--stahl); }
.ende-quadrat{ width:9px; height:9px; background:var(--rot); }
.ende-sep{ color:var(--grau); }
.teilen{ margin-top:22px; }
.teilen-titel{ max-width:30em; margin:0 auto 16px; font:400 .9375rem/1.5 var(--f-text); color:var(--text-2); text-wrap:balance; }
.teilen-liste{ display:grid; grid-template-columns:repeat(5, 1fr); gap:6px; max-width:520px; margin:0 auto; padding:0; list-style:none; }
.teilen-nativ{ grid-column:1 / -1; }
.teilen-knopf{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; width:100%; min-height:68px; padding:10px 2px; background:transparent;
  border:1px solid var(--linie-stark); color:var(--creme); font:500 .5625rem/1 var(--f-mono); letter-spacing:.08em; text-transform:uppercase; text-decoration:none; cursor:pointer;
  transition:border-color .2s, color .2s, background .2s; }
.teilen-knopf svg{ width:22px; height:22px; flex:0 0 auto; }
.teilen-knopf:hover, .teilen-knopf.ist-kopiert{ border-color:var(--rot); color:var(--rot-hell); }
.teilen-nativ .teilen-knopf{ flex-direction:row; min-height:48px; font-size:.6875rem; letter-spacing:.16em; background:var(--creme); color:var(--ink); border-color:var(--creme); }
.teilen-nativ .teilen-knopf:hover{ background:#fff; color:var(--ink); }
.teilen-status{ min-height:1.4em; margin-top:10px; font:400 .75rem/1.4 var(--f-mono); letter-spacing:.08em; color:var(--rot-hell); }

/* Autorenbox (Klassen author-box und ab-name wie heute) */
.author-box{ display:grid; grid-template-columns:72px 1fr; gap:16px; align-items:start; margin:40px 0 0; padding:24px 0 0; border-top:1px solid var(--linie); }
.author-box img{ width:72px; height:72px; border-radius:50%; object-fit:cover; border:1px solid var(--linie-stark); }
.author-box .marke{ margin:0 0 4px; }
.author-box .ab-name{ margin:0 0 8px; font:700 1.375rem/1.2 var(--f-display); color:var(--creme); }
.ab-text{ font-size:.9375rem; line-height:1.6; color:var(--text-2); }
.ab-text a{ color:var(--creme); text-decoration:underline; text-decoration-color:rgba(217,52,43,.7); text-underline-offset:.2em; }
.ab-links{ display:flex; flex-wrap:wrap; gap:0 20px; margin-top:6px; }
.ab-links a{ display:inline-flex; align-items:center; gap:6px; min-height:44px; font:500 .6875rem/1 var(--f-mono); letter-spacing:.14em; text-transform:uppercase; text-decoration:none; color:var(--stahl); }
.ab-links a:hover{ color:var(--rot-hell); }

/* ------------------------------------------------------------- Abschluss: Buch (.c-cta bleibt) */
.abschluss{ position:relative; margin:64px 0 0; padding:56px var(--rand) 60px; overflow:hidden; text-align:left;
  background:radial-gradient(ellipse 70% 55% at 30% 18%, rgba(217,52,43,.2), transparent 70%),
    repeating-linear-gradient(90deg, transparent 0 3px, rgba(168,176,181,.025) 3px 4px), var(--ink-tief);
  border-top:1px solid var(--linie); border-bottom:1px solid var(--linie); }
.abschluss-innen{ max-width:1080px; margin:0 auto; display:grid; gap:36px; }
.buch3d{ position:relative; width:min(190px, 52vw); margin:0 auto; perspective:1100px; }
.buch3d-koerper{ position:relative; display:block; aspect-ratio:480/673; transform-style:preserve-3d; transform:rotateY(-26deg) rotateX(4deg); transition:transform .6s var(--ease); }
.abschluss:hover .buch3d-koerper{ transform:rotateY(-16deg) rotateX(3deg); }
.buch3d-front{ position:absolute; inset:0; transform:translateZ(9px); box-shadow:0 30px 50px -18px rgba(0,0,0,.95), inset 0 0 0 1px rgba(0,0,0,.3); }
.buch3d-front img{ width:100%; height:100%; object-fit:cover; }
.buch3d-front::after{ content:""; position:absolute; inset:0; background:linear-gradient(90deg, rgba(0,0,0,.42) 0, rgba(255,255,255,.22) 1.6%, rgba(0,0,0,.18) 3.2%, transparent 7%); }
.buch3d-seiten{ position:absolute; top:1.2%; bottom:1.2%; right:-9px; width:18px; transform:rotateY(90deg); background:repeating-linear-gradient(90deg, #efe8da 0 1px, #cfc6b4 1px 2px); }
.buch3d-schatten{ position:absolute; left:6%; right:2%; bottom:-7%; height:9%; background:radial-gradient(ellipse at center, rgba(0,0,0,.75), transparent 68%); filter:blur(8px); }
.abschluss .marke{ margin:0 0 12px; }
.abschluss h2{ margin:0 0 14px; font:800 clamp(2.125rem, 1.4rem + 3.4vw, 3.75rem)/1.04 var(--f-display); letter-spacing:-.02em; color:var(--creme); text-wrap:balance; }
.abschluss h2 .punkt{ color:var(--rot); }
.abschluss-hook{ margin:0 0 14px; padding-left:16px; border-left:2px solid var(--rot); font:italic 400 1.25rem/1.4 var(--f-display); color:var(--creme); }
.abschluss-text > p:not([class]){ max-width:34em; margin:0 0 26px; font-size:1rem; line-height:1.6; color:var(--text-2); }
.knoepfe{ display:flex; flex-wrap:wrap; gap:12px; }
.knoepfe .knopf{ flex:1 1 200px; }

/* ------------------------------------------------------------- Weiterlesen (.c-more bleibt) */
.weiter{ max-width:1080px; margin:0 auto; padding:56px var(--rand) 8px; }
.weiter-kopf{ display:flex; align-items:baseline; justify-content:space-between; gap:16px; margin:0 0 18px;
  font:800 clamp(1.875rem, 1.3rem + 2.4vw, 3rem)/1.05 var(--f-display); letter-spacing:-.02em; color:var(--creme); }
.weiter-kopf .punkt{ color:var(--rot); }
.weiter-kopf .marke{ flex:0 0 auto; color:var(--stahl); letter-spacing:.14em; }
.naechster{ position:relative; display:grid; background:var(--flaeche); border:1px solid var(--linie); text-decoration:none; transition:border-color .25s; }
.naechster::before{ content:""; position:absolute; z-index:1; left:-1px; top:-1px; width:64px; height:2px; background:var(--rot); transition:width .6s var(--ease); }
.naechster:hover{ border-color:rgba(217,52,43,.6); }
.naechster:hover::before{ width:calc(100% + 2px); }
.naechster-bild{ display:block; aspect-ratio:1200/630; overflow:hidden; background:var(--flaeche-2); }
.naechster-bild > img{ width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease); }
.naechster:hover .naechster-bild > img{ transform:scale(1.02); }
.naechster-text{ display:flex; flex-direction:column; gap:18px; padding:20px 20px 22px; }
.naechster-teaser{ font:400 1.1875rem/1.45 var(--f-display); color:var(--creme); text-wrap:pretty; }
.naechster-los{ font:500 .75rem/1 var(--f-mono); letter-spacing:.18em; text-transform:uppercase; color:var(--rot-hell); }
.naechster:hover .pfeil, .karte:hover .pfeil{ transform:translateX(4px); }
.weiter-titel{ margin:56px 0 16px; font:700 clamp(1.375rem, 1.1rem + 1.2vw, 1.875rem)/1.2 var(--f-display); color:var(--creme); text-wrap:balance; }
/* Mobil: Karten seitlich wischbar, die naechste schaut heraus. */
.karten{ display:grid; grid-auto-flow:column; grid-auto-columns:82%; gap:12px; margin:0 calc(-1 * var(--rand)); padding:0 var(--rand) 6px; list-style:none;
  overflow-x:auto; scroll-snap-type:x mandatory; scroll-padding:0 var(--rand); scrollbar-width:none; }
.karten::-webkit-scrollbar{ display:none; }
.karten li{ scroll-snap-align:start; display:flex; }
.karte{ position:relative; display:flex; flex-direction:column; width:100%; background:var(--flaeche); border:1px solid var(--linie); text-decoration:none; transition:border-color .25s; }
.karte:hover{ border-color:rgba(217,52,43,.6); }
.karte-bild{ display:block; aspect-ratio:1200/630; overflow:hidden; background:var(--flaeche-2); }
.karte-bild > img{ width:100%; height:100%; object-fit:cover; }
.karte-unten{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:13px 14px 14px; margin-top:auto; }
.karte-marke{ font:500 .625rem/1.4 var(--f-mono); letter-spacing:.14em; text-transform:uppercase; color:var(--stahl); }
.karte-los{ flex:0 0 auto; font:500 .625rem/1 var(--f-mono); letter-spacing:.16em; text-transform:uppercase; color:var(--rot-hell); }
/* Plakat: Ersatz fuer Seiten ohne Kartenbild, im Stil der og-Bilder (echter Text). */
.plakat{ position:relative; display:block; container-type:inline-size; border-left:4px solid var(--rot);
  background:radial-gradient(ellipse 70% 90% at 88% 100%, rgba(217,52,43,.22), transparent 70%), #0B0B0C; }
.plakat-marke{ position:absolute; left:6.5%; top:9%; max-width:56%; overflow:hidden; white-space:nowrap; display:flex; align-items:center; gap:1.6cqw; font:500 max(8px, 2cqw)/1 var(--f-mono); letter-spacing:.22em; text-transform:uppercase; color:var(--stahl); }
.plakat-marke::before{ content:""; width:3.6cqw; height:1px; background:var(--rot); }
.plakat-titel{ position:absolute; left:6.5%; top:21%; width:54%; font:800 5.4cqw/1.08 var(--f-display); letter-spacing:-.01em; color:var(--creme); }
.plakat-titel::after{ content:"The Assaulter."; position:absolute; left:0; top:calc(100% + 6cqw); font:800 2.4cqw/1 var(--f-display); color:var(--creme); white-space:nowrap; }
.plakat .plakat-cover{ position:absolute; right:7%; top:9%; width:27%; height:auto; transform:rotate(2.5deg); box-shadow:0 10px 24px -6px rgba(0,0,0,.9); }

.listen{ display:grid; gap:36px; margin-top:48px; }
.liste h3{ margin:0 0 6px; font:500 .6875rem/1.3 var(--f-mono); letter-spacing:.2em; text-transform:uppercase; color:var(--rot-hell); }
.liste ol{ margin:0; padding:0; list-style:none; }
.liste a{ display:flex; flex-direction:column; gap:5px; padding:14px 0 15px; border-bottom:1px solid var(--linie); text-decoration:none; }
.liste-meta{ font:400 .6875rem/1.3 var(--f-mono); letter-spacing:.1em; text-transform:uppercase; color:var(--grau); }
.liste-titel{ font:500 1rem/1.4 var(--f-text); color:var(--creme); transition:color .2s; }
.liste a:hover .liste-titel{ color:var(--rot-hell); }
.c-hubs{ display:flex; flex-wrap:wrap; gap:4px 22px; margin:36px 0 0; padding:0; font:400 .6875rem/1.4 var(--f-mono); letter-spacing:.14em; text-transform:uppercase; }
.c-hubs a{ display:inline-flex; align-items:center; min-height:44px; color:var(--stahl); text-decoration:none; }
.c-hubs a span{ border-bottom:1px solid rgba(217,52,43,.55); padding-bottom:2px; }
.c-hubs a:hover{ color:var(--creme); }

/* ------------------------------------------------------------- Fussleiste */
.fuss{ margin-top:72px; padding:48px var(--rand) calc(28px + env(safe-area-inset-bottom)); border-top:1px solid rgba(168,176,181,.1); background:var(--ink); }
.fuss-innen{ max-width:1080px; margin:0 auto; display:grid; gap:36px; }
.fuss .logo{ font:900 1.25rem/1 var(--f-display); color:var(--creme); text-decoration:none; letter-spacing:.02em; }
.fuss .logo .accent{ color:var(--rot); }
.fuss-marke p{ margin-top:12px; max-width:22em; font:400 .6875rem/1.8 var(--f-mono); letter-spacing:.14em; text-transform:uppercase; color:var(--grau); }
.fuss-h{ margin:0 0 12px; font:500 .6875rem/1 var(--f-mono); letter-spacing:.22em; text-transform:uppercase; color:var(--rot-hell); }
.fuss-spalte ul{ margin:0; padding:0; list-style:none; display:grid; grid-template-columns:1fr 1fr; gap:0 16px; }
.fuss-spalte a{ display:block; padding:10px 0; font-size:.875rem; color:var(--text-2); text-decoration:none; }
.fuss-spalte a:hover{ color:var(--rot-hell); }
.fuss-unten{ max-width:1080px; margin:36px auto 0; padding-top:20px; border-top:1px solid rgba(168,176,181,.08); display:flex; flex-wrap:wrap; justify-content:space-between; gap:10px 24px;
  font:400 .625rem/1.6 var(--f-mono); letter-spacing:.14em; text-transform:uppercase; color:var(--grau); }
.fuss-unten a{ color:var(--stahl); }

/* ------------------------------------------------------------- Buch-Hinweis aus blog-buch.js (unveraendert)
   blog-buch.css steht fest im Kopf (sonst springt das Feld rechts nachtraeglich ins Bild).
   Hier nur: deckende Leiste, Rueckzug neben der Buchkarte und bei offener Kapitelliste. */
body .bb-leiste{ background:#0E1012; }
body.buch-im-text .bb-leiste.bb-l-an, body.panel-offen .bb-leiste.bb-l-an{ transform:translateY(110%); }

/* ================================================================ ab 600 px */
@media (min-width:600px){
  :root{ --rand:32px; }
  .text{ font-size:1.1875rem; }
  .text .lead{ font-size:1.4375rem; }
  .text .lead::first-letter{ -webkit-initial-letter:3; initial-letter:3; }
  .kurzantwort{ padding:22px 24px 24px; }
  .buchkarte{ grid-template-columns:104px 1fr; gap:24px; padding:24px; }
  .karten{ grid-auto-flow:row; grid-template-columns:repeat(2, 1fr); grid-auto-columns:auto; margin:0; padding:0; overflow:visible; }
  .listen{ grid-template-columns:1fr 1fr; gap:40px; }
  .author-box{ grid-template-columns:96px 1fr; gap:22px; }
  .author-box img{ width:96px; height:96px; }
  .fuss-innen{ grid-template-columns:1.2fr 1fr 1fr; }
  .fuss-spalte ul{ grid-template-columns:1fr; }
}
@supports not ((initial-letter:2) or (-webkit-initial-letter:2)){
  @media (min-width:600px){ .text .lead::first-letter{ font-size:4.3em; line-height:.8; } }
}
/* ================================================================ ab 760 px */
@media (min-width:760px){
  .kopf-foto{ aspect-ratio:auto; height:min(56vh, 600px); max-height:none; }
  .kopf--bild .kopf-innen{ margin-top:-176px; }
  .text p.stichwort{ position:relative; }
  .text p.stichwort::before{ position:absolute; left:-22px; top:.72em; margin:0; }
  .abschluss{ padding:80px clamp(32px,5vw,64px); }
  .abschluss-innen{ grid-template-columns:minmax(220px, 300px) 1fr; gap:clamp(40px, 6vw, 88px); align-items:center; }
  .buch3d{ width:100%; max-width:260px; }
  .naechster{ grid-template-columns:1.35fr 1fr; align-items:center; }
  .naechster-text{ justify-content:center; padding:28px clamp(24px,3vw,44px); }
  .naechster-teaser{ font-size:1.375rem; }
  .knoepfe .knopf{ flex:0 0 auto; padding:0 28px; }
  .kap-nr{ font-size:3.75rem; }
}
/* ================================================================ ab 1100 px: Buch-Spur rechts */
@media (min-width:1100px){
  :root{ --gesamt:calc(var(--spalte) + var(--luecke) + var(--rail) + 2 * var(--rand)); }
  .beitrag > *{ max-width:var(--spalte); }
  .text{ font-size:1.25rem; }
  .text .lead{ font-size:1.5rem; }
  .kopf h1{ max-width:15.5em; }
  .zitat{ margin-left:-28px; }
  .buchkarte{ margin-left:-24px; margin-right:-24px; }
  .kap-nr{ font-size:4rem; }
  /* blog-buch.js haengt .bb-spur an main.c-wrap (position:absolute; right:0). In die rechte Spalte ruecken. */
  main.c-wrap .bb-spur{ right:calc((100% - var(--gesamt)) / 2 + var(--rand)); width:var(--rail); }
  .bb-spur .bb-feld{ top:calc(var(--nav-h) + 32px); }
  body.buch-im-text .bb-spur.bb-an .bb-feld{ opacity:0; transform:translateY(12px); pointer-events:none; }
  .karten{ grid-template-columns:repeat(3, 1fr); }
}
/* ================================================================ ab 1260 px: Inhalt links */
@media (min-width:1260px){
  :root{ --gesamt:calc(var(--toc) + var(--spalte) + var(--rail) + 2 * var(--luecke) + 2 * var(--rand)); }
  .kopf-innen{ padding:40px var(--rand) 34px calc(var(--rand) + var(--toc) + var(--luecke)); }
  .kopf h1{ max-width:none; margin-right:calc(var(--rail) * .35); }
  .beitrag{ display:grid; grid-template-columns:var(--toc) minmax(0, var(--spalte)) var(--rail); column-gap:var(--luecke); align-items:start; }
  .kurzantwort{ grid-column:2; grid-row:1; margin-bottom:44px; }
  .inhalt{ grid-column:1; grid-row:1 / span 3; align-self:start; position:sticky; top:calc(var(--nav-h) + 28px); margin:0;
    max-height:calc(100vh - var(--nav-h) - 56px); overflow:auto; scrollbar-width:none; }
  .text{ grid-column:2; grid-row:2; }
  .beitrag-fuss{ grid-column:2; grid-row:3; }
  .inhalt-auf{ border:0; background:none; }
  .inhalt-auf summary{ flex-wrap:wrap; row-gap:8px; min-height:0; padding:0 0 14px; cursor:default; pointer-events:none; }
  .inhalt-info{ flex-basis:100%; text-align:left; white-space:nowrap; color:var(--stahl); }
  .inhalt-pfeil{ display:none; }
  .inhalt-auf .inhalt-liste{ padding:0; }
  .inhalt-liste a{ grid-template-columns:1.6rem 1fr; padding:10px 0 11px; }
  .inhalt-liste .t{ font-size:.875rem; }
  .inhalt-liste .min{ display:none; }
  .inhalt-ende{ margin:14px 0 0; }
  .leiste{ background:none; border:0; }
  .leiste-zeile, .leiste-panel{ display:none!important; }
}

/* ------------------------------------------------------------- Ergaenzungen (Umsetzung 03.10.2026)
   Buchbild im Text (/blog/ksk-buecher, /blog/beste-militaerthriller), Glossar-
   Buchstaben, Platz fuer social.js in der Fussleiste, Blog-Uebersicht. */
.c-buch{ max-width:200px; margin:.4em auto 1.9em; }
.c-buch img{ width:100%; height:auto; box-shadow:-10px 18px 34px -12px rgba(0,0,0,.9); }
.c-buch figcaption{ margin-top:12px; font:400 .8125rem/1.5 var(--f-text); color:var(--text-2); }
.kapitel::after{ content:""; display:table; clear:both; }
.inhalt-abc{ margin:0; padding:2px 16px 14px; font:500 .875rem/1 var(--f-mono); letter-spacing:.08em; }
.inhalt-abc a{ display:inline-flex; align-items:center; justify-content:center; min-width:44px; min-height:44px; color:var(--creme); text-decoration:none; }
.inhalt-abc a:hover{ color:var(--rot-hell); }
.fuss .social-folgen{ max-width:1080px; margin:28px auto 0; }
.abschluss-text p a{ color:var(--creme); text-decoration:underline; text-decoration-color:rgba(217,52,43,.75); text-decoration-thickness:1.5px; text-underline-offset:.2em; }
.abschluss-text p a:hover{ color:var(--rot-hell); }

/* Blog-Uebersicht (/blog) */
.kopf-uebersicht .kopf-innen{ max-width:calc(1080px + 2 * var(--rand)); padding:22px var(--rand) 30px; }
.kopf h1 .accent{ color:var(--rot); }
.kopf-lead{ max-width:38em; margin:0 0 24px; font:400 1.125rem/1.6 var(--f-text); color:var(--text-2); text-wrap:pretty; }
.kopf-lead a{ color:var(--creme); text-decoration:underline; text-decoration-color:rgba(217,52,43,.75); text-decoration-thickness:1.5px; text-underline-offset:.2em; }
.kopf-lead a:hover{ color:var(--rot-hell); }
.uebersicht-innen{ max-width:calc(1080px + 2 * var(--rand)); margin:0 auto; padding:12px var(--rand) 0; }
.aufmacher{ margin:0 0 56px; }
.c-themenliste{ position:relative; margin:0 0 56px; padding:22px 20px 10px; background:var(--flaeche); border:1px solid var(--linie); }
.c-themenliste::before{ content:""; position:absolute; left:-1px; top:-1px; width:56px; height:2px; background:var(--rot); }
.c-themenliste h2{ margin:0; font:700 clamp(1.375rem, 1.1rem + 1.2vw, 1.875rem)/1.2 var(--f-display); color:var(--creme); }
.themen-grid{ display:grid; gap:0 32px; }
.thema h3{ margin:22px 0 4px; font:500 .6875rem/1.3 var(--f-mono); letter-spacing:.2em; text-transform:uppercase; color:var(--rot-hell); }
.thema ul{ margin:0; padding:0; list-style:none; }
.thema li a{ display:block; padding:11px 0 12px; border-top:1px solid var(--linie); font:500 .9375rem/1.4 var(--f-text); color:var(--creme); text-decoration:none; transition:color .2s; }
.thema li a:hover{ color:var(--rot-hell); }
.themen-hubs{ margin:18px 0 12px; font-size:.9375rem; line-height:1.9; color:var(--text-2); }
.themen-hubs a{ color:var(--creme); text-decoration:underline; text-decoration-color:rgba(217,52,43,.75); text-underline-offset:.2em; }
.blog-grid{ display:grid; gap:12px; }
.blog-grid .blog-card{ position:relative; display:flex; flex-direction:column; gap:10px; padding:20px 20px 18px; background:var(--flaeche); border:1px solid var(--linie); text-decoration:none; transition:border-color .25s; }
.blog-grid .blog-card::before{ content:""; position:absolute; left:-1px; top:-1px; width:40px; height:2px; background:var(--rot); transition:width .6s var(--ease); }
.blog-grid .blog-card:hover{ border-color:rgba(217,52,43,.6); }
.blog-grid .blog-card:hover::before{ width:calc(100% + 2px); }
.blog-grid .kw{ font:500 .6875rem/1.3 var(--f-mono); letter-spacing:.18em; text-transform:uppercase; color:var(--rot-hell); }
.blog-grid h3{ margin:0; font:700 1.25rem/1.25 var(--f-display); letter-spacing:-.005em; color:var(--creme); text-wrap:balance; }
.blog-grid p{ font:400 .9375rem/1.55 var(--f-text); color:var(--text-2); }
.blog-grid .more{ display:flex; justify-content:space-between; gap:12px; margin-top:auto; padding-top:8px; font:500 .625rem/1.2 var(--f-mono); letter-spacing:.16em; text-transform:uppercase; }
.more-zeit{ color:var(--stahl); }
.more-los{ color:var(--rot-hell); white-space:nowrap; }
@media (min-width:600px){
  .themen-grid{ grid-template-columns:1fr 1fr; }
  .blog-grid{ grid-template-columns:1fr 1fr; }
  .c-themenliste{ padding:26px 28px 12px; }
}
@media (min-width:760px){
  .c-buch{ float:right; width:220px; margin:.35em 0 1.2em 28px; }
  .kopf-uebersicht .kopf-innen{ padding-top:36px; padding-bottom:40px; }
}
@media (min-width:1100px){
  .themen-grid{ grid-template-columns:repeat(4, 1fr); }
  .blog-grid{ grid-template-columns:repeat(3, 1fr); }
  .c-buch{ margin-right:-28px; }
}

/* ------------------------------------------------------------- Bewegung reduzieren, Druck */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ transition-duration:0s!important; animation-duration:0s!important; }
  .buch3d-koerper{ transform:rotateY(-18deg) rotateX(3deg); }
  .naechster:hover .naechster-bild > img, .buchkarte:hover .buchkarte-cover img{ transform:none; }
}
@media print{
  .leiste, .c-nav, .inhalt, .buchkarte, .teilen, .abschluss, .weiter, .fuss, .bb-spur, .bb-leiste, .lesekarte, .sprung, .c-buch{ display:none!important; }
  body, .kopf{ background:#fff; color:#000; }
  .text, .kopf h1, .text h2, .text h3, .text .lead, .kurzantwort p{ color:#000; }
}