/* Tilda Brockmann – Stil
   Krimi-Welt: Tinte, Aktenpapier, Stempelrot, Kerzenlicht.
   Nett-o-Meter-Welt: Türkis, Markerrot, Morgenlicht. */

@font-face { font-family: "Anton"; src: url("fonts/anton.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "EB Garamond"; src: url("fonts/ebgaramond.woff2") format("woff2"); font-weight: 400 800; font-display: swap; }
@font-face { font-family: "EB Garamond"; src: url("fonts/ebgaramond-italic.woff2") format("woff2"); font-weight: 400 800; font-style: italic; font-display: swap; }
@font-face { font-family: "Courier Prime"; src: url("fonts/courierprime.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Marker"; src: url("fonts/marker.woff2") format("woff2"); font-display: swap; }

:root {
  --tinte: #16130f;
  --keller: #211c16;
  --kante: #3a3128;
  --kreide: #eee7d8;
  --nebel: #a89c8a;
  --papier: #e8dcc0;
  --papier-tief: #cfbe98;
  --papier-text: #2a2219;
  --stempel: #b4231f;
  --stempel-hell: #e0473f;
  --kerze: #f0c36a;
  --tuerkis: #86d3cf;
  --tuerkis-hell: #d9f1ef;
  --tuerkis-tief: #174c4a;
  --marker: #d3262c;
  --morgen: #fffaf1;

  --display: "Anton", "Impact", "Arial Narrow", sans-serif;
  --text: "EB Garamond", "Garamond", Georgia, serif;
  --akte: "Courier Prime", "Courier New", monospace;
  --hand: "Marker", "Comic Sans MS", cursive;

  --rand: clamp(16px, 4vw, 48px);
  --breit: 1240px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; background: var(--tinte); color: var(--kreide);
  font-family: var(--text); font-size: clamp(1.1rem, 1.02rem + .3vw, 1.25rem); line-height: 1.6;
  text-rendering: optimizeLegibility; overflow-x: hidden;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--kerze); outline-offset: 3px; }
.huelle { width: min(100% - 2 * var(--rand), var(--breit)); margin-inline: auto; }
.nur-vorleser { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.springen { position: absolute; left: -999px; top: 8px; background: var(--kerze); color: var(--tinte); padding: 8px 14px; z-index: 50; }
.springen:focus { left: 8px; }

/* Akten-Schrift für Etiketten */
.etikett { font-family: var(--akte); font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; }

/* ---------- Kopf ---------- */
.kopf { position: absolute; inset: 0 0 auto 0; z-index: 20; }
.kopf .huelle { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-block: 22px; }
.wortmarke { white-space: nowrap; font-family: var(--display); font-size: 1.35rem; letter-spacing: .08em; text-decoration: none; text-transform: uppercase; line-height: 1; }
.wortmarke span { color: var(--stempel-hell); }
.navi { display: flex; flex-wrap: wrap; gap: 6px 26px; font-family: var(--akte); font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; }
.navi a { text-decoration: none; color: var(--nebel); padding: 6px 0; border-bottom: 1px solid transparent; }
.navi a:hover { color: var(--kreide); border-color: var(--stempel); }
.kopf--fest { position: relative; border-bottom: 1px solid var(--kante); }
@media (max-width: 720px) {
  .kopf .huelle { flex-direction: column; align-items: flex-start; gap: 10px; }
  .navi { gap: 4px 18px; }
}

/* ---------- Bühne (Startseite) ---------- */
.buehne {
  position: relative; min-height: clamp(680px, 100svh, 980px); display: grid; align-items: end;
  padding: 150px 0 clamp(48px, 8vh, 96px); overflow: hidden; isolation: isolate;
  --x: 72%; --y: 38%;
}
/* Kerzenlicht: der Lichtkegel liegt über der Pinnwand und folgt langsam der Maus */
.buehne::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(circle 520px at var(--x) var(--y), rgba(240,195,106,.20), rgba(240,195,106,.06) 45%, transparent 70%),
    radial-gradient(ellipse at 50% 120%, #2b2017 0%, transparent 60%),
    var(--tinte);
}
.buehne::after { /* Dunkelheit über allem, ausser im Kegel */
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(circle 560px at var(--x) var(--y), transparent 0, rgba(22,19,15,.55) 55%, rgba(22,19,15,.92) 100%);
}
.pinnwand { position: absolute; z-index: 0; pointer-events: none; right: var(--rand); top: 96px; width: min(50vw, 660px); aspect-ratio: 1 / .92; }
.pinnwand .faden { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.pinnwand .faden line { stroke: var(--stempel); stroke-width: 1.4; opacity: .75; }
.pin-cover { position: absolute; width: 30%; box-shadow: 0 30px 60px rgba(0,0,0,.6); }
.pin-cover::before { content: ""; position: absolute; top: -7px; left: 50%; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #ff6a5f, var(--stempel) 60%, #5c0f0d); box-shadow: 0 3px 4px rgba(0,0,0,.5); z-index: 2; }
.pin-cover.p1 { left: 2%; top: 12%; transform: rotate(-5deg); }
.pin-cover.p2 { left: 35%; top: 2%; transform: rotate(3deg); }
.pin-cover.p3 { left: 68%; top: 16%; transform: rotate(-2deg); }
.pin-zettel { position: absolute; margin: 0; font-family: var(--akte); font-size: .78rem; color: var(--papier-text); background: var(--papier); padding: 8px 12px; box-shadow: 0 10px 20px rgba(0,0,0,.5); line-height: 1.35; }
.pin-zettel.z1 { left: 8%; top: 78%; transform: rotate(4deg); }
.pin-zettel.z2 { left: 60%; top: 84%; transform: rotate(-3deg); }

.buehne-text { position: relative; z-index: 2; }
.buehne .etikett { color: var(--kerze); margin: 0 0 26px; }
.buehne h1 {
  font-family: var(--display); font-weight: 400; text-transform: uppercase; margin: 0;
  font-size: clamp(3.4rem, 1.4rem + 8.2vw, 9.6rem); line-height: 1; padding-top: .06em; letter-spacing: .005em; max-width: 9.5ch;
}
.buehne h1 .rot { color: var(--stempel-hell); }
.buehne .unterzeile { max-width: 34ch; margin: 26px 0 34px; color: #d9cfbd; font-size: clamp(1.15rem, 1rem + .5vw, 1.45rem); }
@media (max-width: 900px) {
  .buehne { padding-top: calc(165px + 52vw); }
  .pinnwand { left: var(--rand); right: var(--rand); width: auto; top: 165px; aspect-ratio: 1 / .62; }
  .pin-zettel, .faden .zum-zettel { display: none; }
  .buehne::after { background: linear-gradient(180deg, rgba(22,19,15,.1) 0, rgba(22,19,15,.35) 45%, rgba(22,19,15,.95) 75%); }
}

/* ---------- Knöpfe ---------- */
.knoepfe { display: flex; flex-wrap: wrap; gap: 12px; }
.knopf {
  display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 12px 22px;
  font-family: var(--akte); font-size: .82rem; letter-spacing: .12em; text-transform: uppercase; text-decoration: none;
  border: 1px solid currentColor; transition: background-color .2s, color .2s;
}
.knopf--voll { background: var(--stempel); border-color: var(--stempel); color: #fff; }
.knopf--voll:hover { background: #911a17; border-color: #911a17; }
.knopf--leer:hover { background: var(--kreide); color: var(--tinte); }
.knopf[aria-disabled="true"] { opacity: .75; cursor: default; }
.knopf .pfeil { font-family: var(--text); font-size: 1.1rem; line-height: 0; }

/* ---------- Abschnitte ---------- */
.abschnitt { padding-block: clamp(72px, 11vw, 150px); }
.kopfzeile { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 24px; margin-bottom: clamp(36px, 6vw, 72px); }
.kopfzeile h2 { font-family: var(--display); font-weight: 400; text-transform: uppercase; font-size: clamp(2.4rem, 1.4rem + 4vw, 5.2rem); line-height: 1; margin: 8px 0 0; }
.kopfzeile p { margin: 0; max-width: 40ch; }
@media (max-width: 760px) { .kopfzeile { grid-template-columns: 1fr; } }

/* ---------- Reihe: Aktenmappen ---------- */
.reihe { background: var(--tinte); }
.reihe .etikett { color: var(--stempel-hell); }
.reihe .kopfzeile p { color: var(--nebel); }
.mappen { display: grid; gap: clamp(28px, 4vw, 44px); }
.mappe {
  position: relative; display: grid; grid-template-columns: minmax(150px, 260px) minmax(0, 1fr); gap: clamp(22px, 4vw, 56px);
  background: var(--papier); color: var(--papier-text); padding: clamp(22px, 4vw, 48px);
  background-image: radial-gradient(ellipse at 85% 15%, rgba(255,255,255,.35), transparent 50%), radial-gradient(ellipse at 10% 95%, rgba(120,90,40,.18), transparent 55%);
  box-shadow: 0 1px 0 rgba(255,255,255,.4) inset, 0 30px 60px rgba(0,0,0,.45);
}
.mappe::before { /* Reiter */
  content: attr(data-reiter); position: absolute; top: -30px; left: clamp(22px, 4vw, 48px);
  height: 30px; padding: 7px 18px 0; background: var(--papier-tief); color: var(--papier-text);
  font-family: var(--akte); font-size: .72rem; letter-spacing: .16em; text-transform: uppercase;
  clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 100%, 0 100%);
}
.mappe + .mappe { margin-top: 30px; }
.mappe-cover img { width: 100%; box-shadow: 0 18px 30px rgba(40,25,10,.35); }
.mappe h3 { font-family: var(--display); font-weight: 400; text-transform: uppercase; font-size: clamp(2.2rem, 1.5rem + 2.6vw, 3.8rem); line-height: 1; margin: 0; }
.mappe h3 a { text-decoration: none; }
.mappe h3 a:hover { color: var(--stempel); }
.mappe .unter { font-style: italic; margin: 6px 0 20px; font-size: 1.15em; }
.mappe p { margin: 0 0 1em; max-width: 58ch; }
.felder { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 0; margin: 0 0 26px; border-top: 1px dashed rgba(42,34,25,.45); }
.felder div { padding: 10px 14px 10px 0; border-bottom: 1px dashed rgba(42,34,25,.45); }
.felder dt { font-family: var(--akte); font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: #6b5a42; }
.felder dd { margin: 2px 0 0; font-family: var(--akte); font-size: .92rem; }
.mappe .knopf--leer { color: var(--papier-text); }
.mappe .knopf--leer:hover { background: var(--papier-text); color: var(--papier); }
.stempel {
  position: absolute; top: clamp(18px, 3vw, 36px); right: clamp(18px, 3vw, 40px);
  font-family: var(--display); text-transform: uppercase; font-size: 1.15rem; letter-spacing: .08em; line-height: 1;
  color: var(--stempel); border: 3px solid currentColor; padding: 8px 12px 6px; transform: rotate(-7deg);
  mix-blend-mode: multiply; opacity: .85;
  -webkit-mask-image: radial-gradient(circle at 30% 40%, #000 60%, rgba(0,0,0,.6) 61%, #000 75%);
          mask-image: radial-gradient(circle at 30% 40%, #000 60%, rgba(0,0,0,.6) 61%, #000 75%);
}
@media (max-width: 680px) {
  .mappe { grid-template-columns: minmax(0, 1fr); }
  .mappe-cover { max-width: 210px; }
  .stempel { top: 20px; right: 16px; font-size: .95rem; }
}

/* Ruth – Personalakte */
.ruth { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(28px, 6vw, 90px); align-items: center; margin-top: clamp(80px, 10vw, 140px); }
.ruth blockquote { margin: 0; font-style: italic; font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.4rem); line-height: 1.25; color: var(--kreide); }
.ruth blockquote::before { content: "„"; color: var(--stempel-hell); }
.ruth blockquote::after { content: "“"; color: var(--stempel-hell); }
.ruth figcaption { margin-top: 16px; color: var(--nebel); }
.ruth-akte { border: 1px solid var(--kante); padding: 26px; font-family: var(--akte); font-size: .9rem; line-height: 1.7; color: #d7ccb8; }
.ruth-akte h3 { font-family: var(--akte); font-weight: 400; font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; color: var(--stempel-hell); margin: 0 0 14px; }
.ruth-akte dl { margin: 0; display: grid; grid-template-columns: max-content 1fr; gap: 4px 18px; }
.ruth-akte dt { color: var(--nebel); }
.ruth-akte dd { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 800px) { .ruth { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 480px) { .ruth-akte { padding: 20px; } .ruth-akte dl { grid-template-columns: minmax(0, 1fr); gap: 0; } .ruth-akte dd { margin-bottom: 10px; } }

/* ---------- Psychothriller ---------- */
.thriller {
  position: relative; overflow: hidden; isolation: isolate; background: #0d1114; color: #dfe6ea;
  border-block: 1px solid #1f2a31;
}
.thriller::before { /* Kartenraster */
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: .5;
  background-image:
    linear-gradient(rgba(120,160,180,.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(120,160,180,.08) 1px, transparent 1px),
    radial-gradient(ellipse at 72% 50%, rgba(60,110,140,.25), transparent 60%);
  background-size: 48px 48px, 48px 48px, 100% 100%;
}
.thriller .huelle { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(30px, 6vw, 80px); align-items: center; }
.thriller .etikett { color: #7fb6cf; }
.thriller h2 { font-family: var(--display); font-weight: 400; text-transform: uppercase; font-size: clamp(2.4rem, 1rem + 4.4vw, 5.6rem); line-height: .98; margin: 10px 0 18px; letter-spacing: .02em; overflow-wrap: break-word; hyphens: auto; }
.thriller .tagline { font-style: italic; font-size: clamp(1.35rem, 1.1rem + 1vw, 2rem); line-height: 1.25; margin: 0 0 22px; }
.thriller p { max-width: 46ch; color: #b9c6cd; }
.thriller .knopf--leer:hover { background: #dfe6ea; color: #0d1114; }
.ortung { position: relative; aspect-ratio: 1; max-width: 460px; width: 100%; justify-self: center; }
.ortung svg { width: 100%; height: 100%; }
.ortung .strasse { stroke: rgba(150,185,200,.28); stroke-width: 10; fill: none; stroke-linecap: round; }
.ortung .strasse-d { stroke: rgba(150,185,200,.14); stroke-width: 4; fill: none; }
.ortung .ring { fill: rgba(64,156,255,.14); stroke: rgba(64,156,255,.5); stroke-width: 1; transform-origin: 250px 230px; animation: ortung 3.2s ease-out infinite; }
.ortung .ring.r2 { animation-delay: 1.6s; }
.ortung .punkt { fill: #3d9bff; stroke: #fff; stroke-width: 5; }
@keyframes ortung { from { transform: scale(.2); opacity: 1; } to { transform: scale(2.4); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .ortung .ring { animation: none; opacity: .5; } }
.protokoll { position: absolute; left: 0; right: 0; bottom: 4%; margin: auto; width: max-content; max-width: 100%; font-family: var(--akte); font-size: .78rem; background: rgba(13,17,20,.85); border: 1px solid #24323b; padding: 10px 14px; color: #a9bcc6; line-height: 1.5; }
.protokoll b { color: #dfe6ea; font-weight: 400; }
@media (max-width: 820px) { .thriller .huelle { grid-template-columns: minmax(0, 1fr); } .ortung { max-width: 340px; } }

/* ---------- Nett-o-Meter ---------- */
.nett { background: var(--tuerkis); color: var(--tuerkis-tief); position: relative; overflow: hidden; }
.nett::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 15% 0%, rgba(255,255,255,.55), transparent 45%); pointer-events: none; }
.nett .huelle { position: relative; }
.nett .etikett { color: var(--tuerkis-tief); }
.nett .kopfzeile h2 { font-family: var(--text); font-weight: 600; text-transform: none; font-size: clamp(2.6rem, 1.6rem + 4vw, 5.4rem); line-height: 1; letter-spacing: -.01em; }
.nett .kopfzeile h2 .marker { font-family: var(--hand); color: var(--marker); font-weight: 400; display: inline-block; transform: rotate(-4deg); font-size: .92em; margin-left: .1em; }
.nett .kopfzeile p { color: #1d5552; }
.messer { width: 170px; }
.messer .bogen { fill: none; stroke-width: 18; }
.messer text { font-family: var(--akte); font-size: 11px; fill: var(--tuerkis-tief); letter-spacing: .08em; }
.regal { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 40px); }
.buchkarte { background: var(--morgen); color: #24302f; padding: 18px 18px 24px; display: flex; flex-direction: column; box-shadow: 0 20px 40px rgba(23,76,74,.18); }
.buchkarte img { width: 100%; margin-bottom: 18px; }
.buchkarte .anlass { font-family: var(--hand); color: var(--marker); font-size: 1rem; margin: 0 0 4px; transform: rotate(-1.5deg); }
.buchkarte h3 { font-family: var(--text); font-weight: 600; font-size: 1.55rem; line-height: 1.12; margin: 0 0 10px; }
.buchkarte h3 a { text-decoration: none; }
.buchkarte h3 a:hover { text-decoration: underline; text-decoration-color: var(--marker); text-underline-offset: 4px; }
.buchkarte p { margin: 0 0 20px; font-size: 1.05rem; }
.buchkarte .knoepfe { margin-top: auto; }
.buchkarte .knopf { color: #24302f; min-height: 44px; padding: 10px 16px; }
.buchkarte .knopf--voll { background: var(--tuerkis-tief); border-color: var(--tuerkis-tief); color: #fff; }
.buchkarte .knopf--voll:hover { background: #0e3534; }
@media (max-width: 900px) { .regal { grid-template-columns: minmax(0, 1fr); max-width: 460px; } }

/* ---------- Testleserin ---------- */
.post { background: var(--keller); }
.post .huelle { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 30px; align-items: center; }
.post h2 { font-family: var(--display); font-weight: 400; text-transform: uppercase; font-size: clamp(2rem, 1.4rem + 2.6vw, 3.6rem); line-height: 1; margin: 10px 0 14px; }
.post p { margin: 0; max-width: 52ch; color: #d4c9b6; }
.post .etikett { color: var(--kerze); }
@media (max-width: 760px) { .post .huelle { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Fuß ---------- */
.fuss { border-top: 1px solid var(--kante); padding-block: 44px; font-size: .95rem; color: var(--nebel); }
.fuss .huelle { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 18px 40px; }
.fuss nav { display: flex; flex-wrap: wrap; gap: 6px 22px; }
.fuss a { text-decoration: none; }
.fuss a:hover { color: var(--kreide); text-decoration: underline; }
.fuss .klein { font-family: var(--akte); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; }

/* ---------- Buchseite ---------- */
.buchseite { padding-block: clamp(48px, 7vw, 100px) clamp(70px, 9vw, 130px); }
.buchseite .huelle { display: grid; grid-template-columns: minmax(220px, 420px) minmax(0, 1fr); gap: clamp(32px, 6vw, 90px); align-items: start; }
.buchseite .cover { position: sticky; top: 30px; }
.buchseite .cover img { box-shadow: 0 40px 80px rgba(0,0,0,.55); }
.brotkrumen { font-family: var(--akte); font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: var(--nebel); margin: 0 0 22px; }
.brotkrumen a { text-decoration: none; }
.brotkrumen a:hover { color: var(--kreide); }
.buchseite h1 { font-family: var(--display); font-weight: 400; text-transform: uppercase; font-size: clamp(3rem, 1.8rem + 5vw, 6.6rem); line-height: 1; margin: 0; }
.buchseite .unter { font-style: italic; font-size: clamp(1.25rem, 1.05rem + .7vw, 1.65rem); line-height: 1.3; margin: 14px 0 28px; color: #e3d8c4; }
.buchseite p { max-width: 62ch; }
.buchseite .felder { border-color: var(--kante); margin-top: 28px; }
.buchseite .felder div { border-color: var(--kante); }
.buchseite .felder dt { color: var(--nebel); }
.buchseite .zitat { font-style: italic; font-size: 1.3rem; border-left: 3px solid var(--stempel); padding-left: 20px; margin: 30px 0; color: var(--kreide); }
.kauf { margin-top: 34px; }
.kauf h2 { font-family: var(--akte); font-weight: 400; font-size: .8rem; letter-spacing: .16em; text-transform: uppercase; color: var(--kerze); margin: 0 0 14px; }
.hinweis { font-size: .9rem; color: var(--nebel); margin-top: 14px; }
.buchseite--nett { background: var(--tuerkis-hell); color: #20302f; }
.buchseite--nett h1 { font-family: var(--text); font-weight: 600; text-transform: none; letter-spacing: -.01em; line-height: 1; }
.buchseite--nett .unter { color: #2c4a48; }
.buchseite--nett .brotkrumen, .buchseite--nett .hinweis { color: #3e5f5d; }
.buchseite--nett .cover img { box-shadow: 0 30px 60px rgba(23,76,74,.25); }
.buchseite--nett .kauf h2 { color: var(--marker); }
.buchseite--nett .knopf--voll { background: var(--tuerkis-tief); border-color: var(--tuerkis-tief); }
.buchseite--nett .knopf--leer:hover { background: #20302f; color: #fff; }
@media (max-width: 760px) { .buchseite .huelle { grid-template-columns: minmax(0, 1fr); } .buchseite .cover { position: static; max-width: 260px; } }

.weitere { border-top: 1px solid var(--kante); padding-block: 60px 80px; }
.weitere h2 { font-family: var(--akte); font-weight: 400; font-size: .8rem; letter-spacing: .16em; text-transform: uppercase; color: var(--nebel); margin: 0 0 26px; }
.weitere ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 24px; }
.weitere a { text-decoration: none; display: block; }
.weitere img { margin-bottom: 10px; transition: transform .25s; }
.weitere a:hover img { transform: translateY(-4px); }
.weitere span { font-size: 1rem; line-height: 1.25; display: block; }

/* Platzhalter-Cover Psychothriller */
.platzhalter { aspect-ratio: 2/3; background: #0d1114; border: 1px solid #24323b; display: grid; place-items: center; text-align: center; padding: 20px; background-image: linear-gradient(rgba(120,160,180,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(120,160,180,.08) 1px, transparent 1px); background-size: 32px 32px; }
.platzhalter b { font-family: var(--display); font-weight: 400; font-size: clamp(2.6rem, 2rem + 2vw, 3.6rem); letter-spacing: .04em; color: #dfe6ea; display: block; }
.platzhalter span { font-family: var(--akte); font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: #7fb6cf; }

/* ---------- Rechtstexte ---------- */
.recht { padding-block: 60px 100px; }
.recht .huelle { max-width: 760px; }
.recht h1 { font-family: var(--display); font-weight: 400; text-transform: uppercase; font-size: clamp(2.4rem, 1.8rem + 2.6vw, 3.8rem); line-height: 1; margin: 0 0 30px; }
.recht h2 { font-family: var(--akte); font-weight: 400; font-size: .85rem; letter-spacing: .14em; text-transform: uppercase; color: var(--kerze); margin: 40px 0 10px; }
.recht p, .recht li { color: #d9cfbd; }
.platz { background: rgba(240,195,106,.18); outline: 1px dashed var(--kerze); padding: 0 4px; }

/* Einblenden beim Scrollen */
.zeigen { opacity: 0; transform: translateY(24px); transition: opacity .8s ease, transform .8s ease; }
.zeigen.da { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .zeigen { opacity: 1; transform: none; transition: none; } }
.ohne-js .zeigen { opacity: 1; transform: none; }

/* ---------- Bonusakte zum Mitraten (06.11.) ---------- */
.bonus { background: var(--keller); }
.bonus-akte { max-width: 860px; margin-inline: auto; background: var(--papier); color: var(--papier-text); padding: clamp(24px, 5vw, 56px); box-shadow: 0 24px 50px rgba(0,0,0,.45); position: relative; }
.bonus-akte::before { content: "BONUSAKTE"; position: absolute; right: clamp(16px, 4vw, 40px); top: clamp(16px, 4vw, 36px); font-family: var(--akte); font-size: .8rem; letter-spacing: .2em; color: var(--stempel); border: 2px solid var(--stempel); padding: 4px 10px; transform: rotate(4deg); }
.bonus-akte .etikett { color: var(--stempel); }
.bonus-akte h2 { font-family: var(--display); text-transform: uppercase; letter-spacing: .02em; font-size: clamp(2rem, 1.4rem + 2.4vw, 3.2rem); line-height: 1.05; margin: .2em 0 .5em; }
.bonus-lage { font-size: 1.15rem; }
.bonus-zeugen { list-style: none; padding: 0; margin: 24px 0; display: grid; gap: 12px; }
.bonus-zeugen li { font-family: var(--akte); font-size: .98rem; background: rgba(255,255,255,.4); border-left: 3px solid var(--papier-text); padding: 12px 16px; }
.bonus-zeugen b { display: block; letter-spacing: .06em; margin-bottom: 4px; }
.bonus-frage { font-family: var(--hand); font-size: 1.5rem; color: var(--stempel); margin: 18px 0; }
.bonus-loesung summary { cursor: pointer; font-family: var(--akte); text-transform: uppercase; letter-spacing: .12em; font-size: .9rem; padding: 12px 0; border-top: 1px dashed var(--papier-tief); }
.bonus-loesung[open] summary { color: var(--stempel); }
.bonus-weiter { font-style: italic; }

/* Angepinnte Cover: mehr Abstand und ein leichtes Pendeln an der Nadel */
.pin-cover { width: 27%; transform-origin: 50% 0; animation: pendeln 7s ease-in-out infinite alternate; }
.pin-cover.p1 { left: 0; --r: -5deg; }
.pin-cover.p2 { left: 36.5%; --r: 3deg; animation-delay: -2.3s; animation-duration: 8s; }
.pin-cover.p3 { left: 73%; --r: -2deg; animation-delay: -4.6s; animation-duration: 6.5s; }
@keyframes pendeln { from { transform: rotate(calc(var(--r) - 1.6deg)); } to { transform: rotate(calc(var(--r) + 1.6deg)) translateY(-4px); } }
@media (prefers-reduced-motion: reduce) { .pin-cover { animation: none; transform: rotate(var(--r)); } }
@media (max-width: 900px) { .pin-cover { width: 25%; } .pin-cover.p1 { left: 2%; } .pin-cover.p2 { left: 37.5%; } .pin-cover.p3 { left: 71%; } }
.nw { white-space: nowrap; }

/* Nett-o-Meter-Karten: gleich hohe Bildfläche, damit Überschriften und Knöpfe auf einer Linie stehen */
.regal .buchkarte > a:first-child { display: block; aspect-ratio: 5 / 8; margin-bottom: 18px; }
.regal .buchkarte > a:first-child img { width: 100%; height: 100%; object-fit: contain; object-position: center bottom; margin: 0; }

/* Psychothriller: Titelkarte statt „Cover folgt“, bis das Cover freigegeben ist */
.platzhalter { position: relative; overflow: hidden; align-content: end; padding: 28px 22px; }
.platzhalter::before { content: ""; position: absolute; left: 50%; top: 34%; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: #4aa3ff;
  box-shadow: 0 0 0 10px rgba(74,163,255,.18), 0 0 0 26px rgba(74,163,255,.08); animation: orten 2.4s ease-out infinite; }
@keyframes orten { 0% { box-shadow: 0 0 0 0 rgba(74,163,255,.35), 0 0 0 0 rgba(74,163,255,.15); } 100% { box-shadow: 0 0 0 22px rgba(74,163,255,0), 0 0 0 48px rgba(74,163,255,0); } }
@media (prefers-reduced-motion: reduce) { .platzhalter::before { animation: none; } }
.platzhalter b { font-size: clamp(2.8rem, 2rem + 2.4vw, 4rem); }
.platzhalter small { display: block; margin-top: 8px; font-family: var(--text); font-style: italic; color: #b8c7cf; font-size: 1rem; }

/* Krimi-Newsletter mit Bonusakte (Karton 26) */
.post--bonus { background: #2a1d17; border-top: 1px solid rgba(224, 169, 109, .25); }
.post--bonus h2 { color: #f4ecdc; }
.post .post-klein { margin-top: 14px; font-size: .88rem; color: #a99c87; }
.post .post-klein a { color: inherit; }

/* ---------- Blick ins Buch (mehrere Doppelseiten zum Blättern) ---------- */
.blick { padding: clamp(40px, 6vw, 72px) 0; }
.blick-kopf { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.blick-kopf h2 { margin: 0; }
.blick-zahl { margin: 0; opacity: .7; font-variant-numeric: tabular-nums; }
.blick-pfeile { margin-left: auto; display: flex; gap: 8px; }
.blick-pfeile button { width: 46px; height: 46px; border-radius: 50%; border: 1px solid currentColor; background: transparent; color: inherit; font-size: 1.2rem; cursor: pointer; }
.blick-pfeile button:disabled { opacity: .3; cursor: default; }
.blick-band { list-style: none; margin: 0; padding: 0 0 14px; display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: thin; }
.blick-seite { flex: 0 0 100%; scroll-snap-align: start; }
.blick-seite img { width: 100%; height: auto; box-shadow: 0 12px 36px rgba(0,0,0,.45); background: #fff; user-select: none; }
.blick-titel { margin: 12px 0 0; font-size: .95rem; opacity: .75; font-style: italic; }
@media (prefers-reduced-motion: reduce) { .blick-band { scroll-behavior: auto; } }

/* ---------- Ruths Akten (Figuren und Gegenstände) ---------- */
.figuren { background: var(--tinte); }
.figuren-liste { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
@media (max-width: 980px) { .figuren-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .figuren-liste { grid-template-columns: minmax(0, 1fr); } }
.figur { hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; background: var(--papier); color: var(--papier-text); padding: 22px 22px 18px; box-shadow: 0 14px 30px rgba(0,0,0,.4); position: relative; display: flex; flex-direction: column; }
.figur:nth-child(odd) { transform: rotate(-.6deg); }
.figur:nth-child(even) { transform: rotate(.5deg); }
.figur--gegenstand { background: var(--papier-tief); }
.figur-art { font-family: var(--akte); font-size: .75rem; letter-spacing: .2em; text-transform: uppercase; color: var(--stempel); margin: 0 0 6px; }
.figur h3 { font-family: var(--display); font-weight: 400; text-transform: uppercase; letter-spacing: .02em; font-size: 1.6rem; line-height: 1.05; margin: 0 0 10px; }
.figur p { margin: 0 0 12px; }
.figur-band { margin-top: auto !important; font-family: var(--akte); font-size: .8rem; border-top: 1px dashed rgba(42,34,25,.4); padding-top: 8px; }
.bonus-monat { font-family: var(--akte); font-size: .9rem; margin: 22px 0 0; border-top: 1px dashed rgba(42,34,25,.4); padding-top: 14px; }
.bonus-monat a { color: var(--stempel); }

/* ---------- Ratgeber ---------- */
.ratgeber { padding-block: clamp(48px, 7vw, 100px); }
.rg-text { max-width: 860px; }
.rg-text h1 { font-family: var(--display); font-weight: 400; text-transform: uppercase; font-size: clamp(2.2rem, 1.4rem + 3.4vw, 4.2rem); line-height: 1.02; margin: 0 0 24px; }
.rg-text h2 { font-family: var(--display); font-weight: 400; text-transform: uppercase; font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.4rem); line-height: 1.05; margin: 56px 0 16px; }
.rg-text h3 { font-size: 1.2rem; margin: 26px 0 6px; }
.rg-text p, .rg-text li { font-size: 1.15rem; line-height: 1.6; }
.rg-lead { font-size: 1.3rem !important; color: var(--kreide); }
.rg-akte { background: var(--papier); color: var(--papier-text); padding: clamp(18px, 3vw, 36px); border-radius: 4px; box-shadow: 0 30px 60px rgba(0,0,0,.45); }
.rg-akte .felder { border-color: var(--papier-tief); margin: 0 0 24px; }
.rg-akte .felder div { border-color: var(--papier-tief); }
.rg-akte .etikett { color: var(--stempel); margin: 0 0 6px; }
.rg-ruthbrief { font-style: italic; margin-bottom: 26px; }
.rg-doks { columns: 2 320px; column-gap: 18px; }
.rg-dok { break-inside: avoid; background: #fbf6ea; border: 1px solid var(--papier-tief); padding: 14px 16px; margin: 0 0 16px; font-family: var(--akte); }
.rg-dok h3 { font-family: var(--display); font-weight: 400; letter-spacing: .04em; text-transform: uppercase; font-size: 1rem; color: var(--stempel); margin: 0 0 6px; }
.rg-dok p { font-size: .95rem !important; line-height: 1.5 !important; margin: 0 0 6px; }
.rg-quelle { display: block; font-family: var(--akte); font-size: .78rem; letter-spacing: 0; text-transform: none; color: #6e604c; }
.rg-frage { background: var(--tinte); color: var(--kreide); padding: 18px 20px; margin-top: 8px; }
.rg-frage .etikett { color: var(--kerze); }
.rg-loesung { margin-top: 28px; border: 1px solid var(--kante); padding: 0 20px; }
.rg-loesung summary { cursor: pointer; font-family: var(--akte); letter-spacing: .12em; text-transform: uppercase; padding: 18px 0; color: var(--kerze); }
.rg-wer { font-family: var(--display); text-transform: uppercase; font-size: 2rem !important; margin: 4px 0 12px; }
.rg-ruth { font-style: italic; border-left: 3px solid var(--stempel); padding-left: 16px; }
.rg-buch { display: grid; grid-template-columns: 120px 1fr; gap: 22px; align-items: start; margin: 28px 0; padding: 20px; border: 1px solid var(--kante); }
.rg-buch img { box-shadow: 0 16px 30px rgba(0,0,0,.5); }
.rg-buch p { margin-top: 0; }
.rg-post { margin: 28px 0; padding: 22px; background: var(--keller); border-left: 3px solid var(--kerze); }
.rg-teaser { padding-block: clamp(48px, 7vw, 90px); background: var(--papier); color: var(--papier-text); }
.rg-teaser .etikett { color: var(--stempel); }
.rg-teaser h2 { font-family: var(--display); font-weight: 400; text-transform: uppercase; font-size: clamp(2rem, 1.4rem + 2vw, 3.2rem); margin: 6px 0 12px; }
.rg-teaser p { max-width: 60ch; font-size: 1.15rem; }
@media (max-width: 560px) { .rg-buch { grid-template-columns: 84px 1fr; gap: 14px; padding: 14px; } }