/* ============================================================
   PPMS GUIDES — Landingpages (Bildschirm).
   Tokens kommen aus tokens.css.

   Haltung: hell, ruhig, sofort verständlich. Ein 29-€-Produkt muss in
   zehn Sekunden erklärt sein. Marke über Logo, Rot und Typo — nicht über
   Atmosphäre.
   Haus-DNA: Radius 10, keine Kartenschatten, Haarlinien, warme Neutrals,
   Display gegen Mono, Szenen-Rhythmus hell → dunkel → hell.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 82px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font-family: var(--font);
  background: var(--paper); color: var(--ink);
  line-height: 1.62; -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums; overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
::selection { background: var(--accent); color: #fff; }
:focus-visible { outline: 2.5px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

.wrap { width: 100%; max-width: 1080px; margin-inline: auto;
  padding-inline: max(20px, env(safe-area-inset-left)); }
.skip { position: fixed; top: -100px; left: 16px; z-index: 200; background: var(--ink);
  color: var(--paper); padding: 10px 16px; border-radius: var(--r); font-weight: 600; transition: top .2s; }
.skip:focus { top: 16px; }

/* ---------- Kicker: Zähler + Haarlinie + Marken-Endpunkt ---------- */
.kick {
  display: flex; align-items: center; gap: 12px;
  font-family: var(--mono); font-size: .72rem; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3);
  margin-bottom: 18px;
}
/* Haus-DNA Regel 1: Zähler und Marker bleiben Tinte. Akzentrot nur an
   Entscheidungspunkten (Kaufknopf, Preis-Badge, EIN Farbmoment je Seite) —
   Rot auf jedem Kicker liest sich als Template. */
.kick b { color: var(--ink); font-weight: 600; }
.kick::after { content: ""; flex: 1; max-width: 180px; height: 1px; background: var(--line); }
.kick i { width: 6px; height: 6px; border-radius: 50%; background: var(--ink-3); font-style: normal; flex: none; }

/* ---------- Kopfzeile ---------- */
.head {
  position: sticky; top: 0; z-index: 60;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid var(--line);
}
.head__in { display: flex; align-items: center; gap: 16px; height: 64px; }
/* 44 px Mindesthöhe auf allen Tippzielen der Kopfzeile. Gemessen waren es
   26 px — ausgerechnet beim Logo, das auf dem Telefon der Hauptausgang ist. */
.head__brand { display: flex; align-items: center; gap: 10px; min-width: 0; flex: none; min-height: 44px; }
.head__brand svg { width: 26px; height: 26px; color: var(--ink); flex: none; }
.head__name { font-weight: 700; font-size: .95rem; letter-spacing: -.015em; white-space: nowrap; }
.head__sub { font-family: var(--mono); font-size: .62rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-3); }
/* Brotkrume: Logo führt nach Hause, dahinter steht, wo man gerade ist.
   Vorher zeigte das Logo auf /guides und der einzige Ausgang hieß „Zum
   12-Wochen-1:1" — die Bibliothek fühlte sich dadurch wie eine fremde Seite
   an, aus der man nicht herausfindet (Janik, 01.09.). Das Logo ist der
   Fluchtweg, den jeder blind kennt. */
.head__sep { color: var(--line-2); font-size: 1.05rem; margin-inline: -4px; flex: none; }
.head__here {
  font-size: .95rem; font-weight: 500; color: var(--ink); white-space: nowrap;
  margin-right: auto; display: inline-flex; align-items: center; min-height: 44px;
  transition: color .3s var(--ease);
}
.head__here:hover { color: var(--accent); }
.head__back-s { display: none; }
.head__back { font-size: .88rem; color: var(--ink-2); white-space: nowrap;
  display: inline-flex; align-items: center; min-height: 44px;
  display: inline-flex; align-items: center; min-height: 44px; }
.head__back:hover { color: var(--ink); }
/* Der Rückweg wird auf dem Telefon NICHT ausgeblendet — er ist dort am
   wichtigsten. Nur die Beschriftung wird kurz. Vorher verschwand er unter
   640 px komplett, und die Bibliothek war auf dem Handy eine Sackgasse
   (der Ausgang blieb allein das Logo). Statt dessen fällt die Mono-Zeile
   „Janik Neese" weg: die Marke steht daneben ohnehin. */
@media (max-width: 700px) {
  .head__sub { display: none; }
  .head__brand { align-items: center; }
  .head__back-l { display: none; }
  .head__back-s { display: inline; }
  .head__back { font-size: .84rem; }
  .head__in { gap: 12px; }
}
@media (max-width: 400px) {
  .head__sep, .head__here { display: none; }
}

/* ---------- Knöpfe: Icon-Quadrat als Signatur ---------- */
.btn {
  --lift: 0; --press: 1;
  display: inline-flex; align-items: center; gap: 12px;
  padding: 13px 16px 13px 22px; border-radius: var(--r);
  font-weight: 700; font-size: .95rem; letter-spacing: -.01em; white-space: nowrap;
  border: 1px solid transparent; transform: translateY(var(--lift)) scale(var(--press));
  transition: transform .22s var(--ease), background-color .2s, border-color .2s, color .2s;
}
.btn__ic {
  width: 26px; height: 26px; border-radius: var(--r-sm); flex: none;
  display: grid; place-items: center; background: rgba(255,255,255,.18);
}
.btn__ic svg { width: 13px; height: 13px; }
.btn--primary { background: var(--accent); color: var(--accent-ink); }
.btn--ghost { border-color: var(--line-2); color: var(--ink); }
.btn--ghost .btn__ic { background: var(--paper-3); }
.btn--sm { padding: 9px 14px; font-size: .86rem; gap: 9px; }
.btn--sm .btn__ic { width: 21px; height: 21px; }
.btn--block { display: flex; justify-content: center; width: 100%; }
@media (hover: hover) and (pointer: fine) {
  .btn:hover { --lift: -2px; }
  .btn--primary:hover { background: #B80500; }
  .btn--ghost:hover { border-color: var(--ink); }
}
.btn:active { --press: .975; --lift: 0px; }

/* ---------- Hero ---------- */
.hero { padding: clamp(44px, 7vw, 84px) 0 clamp(40px, 6vw, 68px); position: relative; overflow: hidden; }
.hero__ghost {
  position: absolute; right: -2vw; top: 8px; font-size: clamp(120px, 19vw, 260px);
  font-weight: 900; letter-spacing: -.055em; line-height: .8; color: transparent;
  -webkit-text-stroke: 1px rgba(23,21,15,.07); pointer-events: none; user-select: none;
}
.hero__grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(28px, 5vw, 64px); align-items: start; position: relative; }
@media (max-width: 900px) { .hero__grid { grid-template-columns: 1fr; } }

.hero h1 {
  font-size: clamp(2.3rem, 6vw, 3.9rem); font-weight: 900; line-height: 1.02;
  letter-spacing: -.04em; text-wrap: balance; max-width: 16ch;
}
.hero__sub { margin-top: 18px; font-size: clamp(1.05rem, 1.7vw, 1.25rem);
  line-height: 1.5; color: var(--ink-2); max-width: 46ch; }
.hero__for { margin-top: 26px; border-top: 1px solid var(--line); padding-top: 20px; }
.hero__for li { position: relative; padding-left: 24px; margin-top: 10px;
  font-size: 1rem; color: var(--ink-2); max-width: 46ch; }
.hero__for li::before { content: ""; position: absolute; left: 0; top: 11px;
  width: 10px; height: 2px; background: var(--accent); }
.hero__cta { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 30px; }
.hero__note { font-size: .84rem; color: var(--ink-3); margin-top: 14px; }

/* Cover-Vorschau: dieselbe Sprache wie die PDF-Titelseite */
.peek {
  background: var(--dark); color: var(--dark-ink); border-radius: var(--r);
  padding: 30px 26px; aspect-ratio: 1 / 1.414; display: flex; flex-direction: column;
  position: relative; overflow: hidden;
}
.peek__ghost { position: absolute; right: 10px; bottom: 4px; font-size: 108px; font-weight: 900;
  line-height: .8; letter-spacing: -.055em; color: transparent; -webkit-text-stroke: 1px rgba(245,242,234,.14); }
.peek__nr { font-family: var(--mono); font-size: .64rem; letter-spacing: .16em;
  text-transform: uppercase; color: rgba(245,242,234,.5); }
.peek__mid { margin-top: auto; position: relative; }
.peek__eyebrow { font-family: var(--mono); font-size: .64rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--accent); margin-bottom: 12px; }
.peek h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); font-weight: 900; line-height: 1; letter-spacing: -.035em; }
.peek p { margin-top: 12px; font-size: .9rem; line-height: 1.45; color: rgba(245,242,234,.66); }
.peek__meta { display: flex; gap: 20px; margin-top: 20px; padding-top: 16px;
  border-top: 1px solid rgba(245,242,234,.2); position: relative; }
.peek__meta b { display: block; font-size: 1.05rem; letter-spacing: -.01em; }
.peek__meta span { font-family: var(--mono); font-size: .58rem; letter-spacing: .12em;
  text-transform: uppercase; color: rgba(245,242,234,.5); }

/* ---------- Preis-Pille ---------- */
.price { display: flex; align-items: baseline; gap: 10px; }
.price b { font-size: 1.9rem; font-weight: 900; letter-spacing: -.03em; }
.price s { color: var(--ink-3); font-size: 1.05rem; }
.price span { font-family: var(--mono); font-size: .68rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-3); }

/* ---------- Sektionen ---------- */
.sec { padding: clamp(52px, 7vw, 88px) 0; }
.sec--tint { background: var(--paper-2); border-block: 1px solid var(--line); }
.sec h2 { font-size: clamp(1.7rem, 3.6vw, 2.5rem); font-weight: 800;
  line-height: 1.08; letter-spacing: -.03em; text-wrap: balance; max-width: 18ch; }
.sec__intro { margin-top: 16px; color: var(--ink-2); max-width: 58ch; font-size: 1.03rem; }

/* Problem-Statement: dunkle Szene, ein Satz */
.statement { background: var(--dark); color: var(--dark-ink); }
.statement__in { padding: clamp(56px, 8vw, 96px) 0; position: relative; }
.statement p { font-size: clamp(1.4rem, 3.4vw, 2.15rem); font-weight: 500;
  line-height: 1.25; letter-spacing: -.028em; max-width: 24ch; text-wrap: balance; }
.statement .kick { color: rgba(245,242,234,.5); }
.statement .kick::after { background: rgba(245,242,234,.2); }

/* Kapitelliste */
.chaps { margin-top: 34px; border-top: 1px solid var(--line); }
.chap { display: grid; grid-template-columns: 34px 1fr; gap: 16px;
  padding: 17px 0; border-bottom: 1px solid var(--line); align-items: baseline; }
.chap__nr { font-family: var(--mono); font-size: .74rem; color: var(--ink-3); letter-spacing: .08em; }
.chap__t { font-size: 1.06rem; font-weight: 700; letter-spacing: -.015em; }
.chap__d { font-size: .93rem; color: var(--ink-3); margin-top: 3px; max-width: 62ch; }

/* Blick ins Produkt */
.peeks { display: grid; gap: 18px; margin-top: 34px; }
.peekfig { border: 1px solid var(--line); border-radius: var(--r); background: #fff; padding: 22px 22px 18px; }
.peekfig svg { width: 100%; height: auto; }
.peekfig figcaption { margin-top: 12px; font-size: .88rem; color: var(--ink-3); line-height: 1.5; }
.peekfig figcaption b { font-family: var(--mono); font-size: .66rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--accent); font-weight: 500; }

/* Leistungs-Raster */
.gets { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; margin-top: 34px; }
.get { border: 1px solid var(--line); border-radius: var(--r); background: #fff;
  padding: 20px; display: flex; flex-direction: column; }
.get b { font-size: 1.02rem; letter-spacing: -.015em; }
.get span { font-size: .92rem; color: var(--ink-3); margin-top: 6px; line-height: 1.5; }
.get__ic { width: 30px; height: 30px; border-radius: var(--r-sm); background: var(--paper-2);
  display: grid; place-items: center; margin-bottom: 14px; color: var(--accent); }
.get__ic svg { width: 15px; height: 15px; }

/* Kauf-Block */
.buy { display: grid; grid-template-columns: 1.1fr .9fr; gap: 18px; margin-top: 34px; align-items: stretch; }
@media (max-width: 820px) { .buy { grid-template-columns: 1fr; } }
.card { border: 1px solid var(--line); border-radius: var(--r); background: #fff;
  padding: clamp(24px, 3vw, 34px); display: flex; flex-direction: column; }
.card--dark { background: var(--dark); color: var(--dark-ink); border-color: var(--dark); position: relative; overflow: hidden; }
.card--dark .price s, .card--dark .price span { color: rgba(245,242,234,.55); }
.card h3 { font-size: 1.3rem; font-weight: 800; letter-spacing: -.025em; }
.card__list { margin: 18px 0 22px; }
.card__list li { position: relative; padding-left: 24px; margin-top: 9px; font-size: .96rem; color: var(--ink-2); }
.card--dark .card__list li { color: rgba(245,242,234,.78); }
.card__list li::before { content: ""; position: absolute; left: 2px; top: 9px;
  width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.card .btn { margin-top: auto; }
.card__fine { margin-top: 14px; font-size: .8rem; color: var(--ink-3); line-height: 1.55; }
.card--dark .card__fine { color: rgba(245,242,234,.45); }
.badge { position: absolute; top: 16px; right: 16px; font-family: var(--mono); font-size: .62rem;
  letter-spacing: .12em; text-transform: uppercase; background: var(--accent); color: #fff;
  padding: 5px 10px; border-radius: var(--r-pill); }

/* FAQ */
.faq { margin-top: 30px; border-top: 1px solid var(--line); max-width: 860px; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 18px 0; font-weight: 600; font-size: 1.02rem; letter-spacing: -.012em; cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--mono); font-size: 1.15rem; color: var(--accent); flex: none; }
.faq details[open] summary::after { content: "−"; }
.faq p { padding: 0 0 20px; color: var(--ink-2); max-width: 62ch; }

/* Fuß */
.foot { background: var(--dark); color: rgba(245,242,234,.6); padding: 48px 0 40px;
  position: relative; overflow: hidden; }
.foot__ghost { position: absolute; left: 50%; transform: translateX(-50%); bottom: -22px;
  font-size: clamp(90px, 17vw, 200px); font-weight: 900; letter-spacing: -.055em; line-height: .8;
  color: transparent; -webkit-text-stroke: 1px rgba(245,242,234,.1); white-space: nowrap; }
.foot__in { position: relative; display: flex; flex-wrap: wrap; gap: 4px 20px; align-items: center; }
/* Touch-Ziel: mindestens 44 px hoch. Die Links waren vorher 26 px — auf dem
   Handy zu klein, Befund aus dem QA-Lauf am 30.08. */
.foot a {
  color: rgba(245,242,234,.8);
  display: inline-flex; align-items: center;
  min-height: 44px; padding-inline: 2px;
}
.foot a:hover { color: #fff; }
.foot__legal { width: 100%; font-size: .8rem; line-height: 1.7; color: rgba(245,242,234,.42); max-width: 74ch; }

/* Mobile Kaufleiste — auf dem Handy ist der Kaufknopf sonst weg */
.dock {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 70; display: none;
  gap: 12px; align-items: center; padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--paper) 94%, transparent);
  backdrop-filter: blur(14px); border-top: 1px solid var(--line);
}
.dock .price b { font-size: 1.35rem; }
.dock .btn { margin-left: auto; }
@media (max-width: 720px) {
  .dock { display: flex; }
  body { padding-bottom: 78px; }
}

/* Reveal — ohne JS ist alles sichtbar */
.js [data-rev] { opacity: 0; transform: translateY(14px); }
.js [data-rev].in { opacity: 1; transform: none; transition: opacity .6s var(--ease), transform .6s var(--ease); }
@media (prefers-reduced-motion: reduce) {
  .js [data-rev] { opacity: 1 !important; transform: none !important; }
}

/* ============================================================
   COVER-RASTER — Bibliotheks-Übersicht (Shop-Optik)
   Gleiche Bauart wie auf der Startseite, nur mit hellen Tokens.
   ============================================================ */
.grid9 {
  display: grid; gap: 18px; margin-top: 34px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 720px) { .grid9 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; } }

.gcard {
  --lift: 0px; --press: 1;
  display: flex; flex-direction: column; gap: 12px;
  transform: translateY(var(--lift)) scale(var(--press));
  transition: transform .24s var(--ease);
}
.gcard__shot {
  position: relative; display: block; overflow: hidden;
  aspect-ratio: 4 / 5; border-radius: var(--r);
  border: 1px solid var(--line); background: var(--dark);
}
.gcard__shot img {
  width: 100%; height: 100%; object-fit: cover; object-position: center 74%;
  transition: transform .5s var(--ease);
}
/* Buchrücken statt Schatten — Tiefe aus der Kante. */
.gcard__shot::before {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 5px; z-index: 2;
  background: linear-gradient(90deg, rgba(255,255,255,.24), rgba(255,255,255,.05) 55%, rgba(0,0,0,.28));
}
.gcard__body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.gcard__body b { font-size: 1rem; font-weight: 700; letter-spacing: -.018em; line-height: 1.25; }
.gcard__meta {
  font-size: .86rem; line-height: 1.42; color: var(--ink-3);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.gcard__price {
  margin-top: 5px; font-family: var(--mono); font-size: .8rem;
  letter-spacing: .06em; color: var(--accent);
  font-variant-numeric: tabular-nums;
  /* Der Wortabstand bekommt die .06em Laufweite mit ab. Bei einer
     Monoschrift, die ohnehin breit läuft, klafft „29 €" dadurch sichtbar
     auseinander — die Korrektur hebt genau diesen Betrag wieder auf. Was
     danach bleibt, ist die Leerzeichen-Zelle von Geist Mono selbst; die ist
     bei einer Monoschrift so breit wie jede andere Zelle und kein Fehler. */
  word-spacing: -.06em;
}
@media (hover: hover) and (pointer: fine) {
  .gcard:hover { --lift: -3px; }
  .gcard:hover .gcard__shot img { transform: scale(1.035); }
  .gcard:hover .gcard__shot { border-color: var(--line-2); }
}
.gcard:active { --press: .985; --lift: 0px; }
.gcard:focus-visible { --lift: -3px; outline: none; }
.gcard:focus-visible .gcard__shot { outline: 2.5px solid var(--accent); outline-offset: -2px; }
@media (prefers-reduced-motion: reduce) { .gcard, .gcard__shot img { transition: none; } }

/* ============================================================
   PRODUKTSEITE — kompakt statt Sales-Funnel.
   Auf dem Handy zuerst gedacht: Cover, Preis, Kaufen, dann Inhalt.
   ============================================================ */
.prod {
  display: grid; grid-template-columns: 300px 1fr; gap: clamp(26px, 4vw, 52px);
  align-items: start; padding: clamp(26px, 4vw, 48px) 0 clamp(30px, 4vw, 44px);
}
@media (max-width: 860px) { .prod { grid-template-columns: 1fr; gap: 24px; } }

.prod__shot {
  position: relative; overflow: hidden; border-radius: var(--r);
  border: 1px solid var(--line); background: var(--dark);
  aspect-ratio: 748 / 1101;
}
.prod__shot img { width: 100%; height: 100%; object-fit: cover; }
.prod__shot::before {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 7px; z-index: 2;
  background: linear-gradient(90deg, rgba(255,255,255,.26), rgba(255,255,255,.05) 55%, rgba(0,0,0,.3));
}
/* Auf dem Handy nicht das halbe Display mit dem Cover belegen. */
@media (max-width: 860px) {
  .prod__shot { max-width: 208px; aspect-ratio: 3 / 4; }
  .prod__shot img { object-position: center 66%; }
}

.prod h1 {
  font-size: clamp(1.85rem, 5.6vw, 2.9rem); font-weight: 900; line-height: 1.04;
  letter-spacing: -.038em; text-wrap: balance;
}
.prod__sub { margin-top: 14px; font-size: clamp(1rem, 1.5vw, 1.14rem); line-height: 1.5; color: var(--ink-2); max-width: 44ch; }
.prod__for { margin-top: 20px; display: grid; gap: 8px; }
.prod__for li { position: relative; padding-left: 22px; font-size: .97rem; color: var(--ink-2); }
.prod__for li::before { content: ""; position: absolute; left: 0; top: 10px; width: 10px; height: 2px; background: var(--accent); }

.prod__buy {
  margin-top: 24px; padding: 18px; border: 1px solid var(--line-2); border-radius: var(--r);
  background: #fff; display: grid; gap: 14px;
}
.prod__buy .btn { width: 100%; justify-content: center; }
.prod__facts {
  display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 4px;
  font-family: var(--mono); font-size: .7rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-3);
}
.prod__fine { font-size: .78rem; line-height: 1.55; color: var(--ink-3); }

/* Kapitel als zweispaltige, kompakte Liste statt langer Zeilenfolge */
.toclist { display: grid; grid-template-columns: 1fr 1fr; gap: 0 34px; margin-top: 26px; }
@media (max-width: 760px) { .toclist { grid-template-columns: 1fr; } }
.toclist > div {
  display: grid; grid-template-columns: 26px 1fr; gap: 12px;
  padding: 13px 0; border-bottom: 1px solid var(--line); align-items: baseline;
}
.toclist .n { font-family: var(--mono); font-size: .72rem; color: var(--ink-3); }
.toclist b { font-size: .97rem; font-weight: 650; letter-spacing: -.012em; }
.toclist span { display: block; font-size: .86rem; color: var(--ink-3); margin-top: 2px; line-height: 1.4; }

/* Weitere Guides am Seitenende — kleine Cover-Reihe */
.more { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: 28px; }
@media (max-width: 760px) { .more { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 11px; } }

/* Bundle-Streifen auf der Produktseite — kompakter Upsell statt zweiter Karte */
.bundlestrip {
  margin-top: 30px; padding: 20px; border-radius: var(--r);
  background: var(--dark); color: var(--dark-ink);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px;
}
.bundlestrip b { display: block; font-size: 1.05rem; letter-spacing: -.02em; }
.bundlestrip span { display: block; margin-top: 3px; font-size: .9rem; color: rgba(245,242,234,.66); }
@media (max-width: 560px) { .bundlestrip .btn { width: 100%; justify-content: center; } }

/* ============================================================
   BILDSZENEN auf der Produktseite.
   Die Schmerz-Aussage steht über dem Bild statt auf leerer Fläche — das ist
   die Stelle, an der der Leser sich wiedererkennen soll.
   ============================================================ */
.painshot {
  position: relative; overflow: hidden;
  background-image: var(--shot); background-size: cover; background-position: center;
}
.painshot__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--dark) 55%, transparent),
    color-mix(in srgb, var(--dark) 88%, transparent));
}
.painshot__in { position: relative; padding-block: clamp(64px, 11vw, 132px); }
.painshot p {
  font-size: clamp(1.45rem, 3.6vw, 2.25rem); font-weight: 600; line-height: 1.22;
  letter-spacing: -.03em; max-width: 22ch; text-wrap: balance; color: #fff;
}
.painshot .kick { color: rgba(255,255,255,.62); }
.painshot .kick i { background: var(--accent-lift); }
.painshot .kick::after { background: rgba(255,255,255,.28); }

.wideshot {
  border-radius: var(--r); overflow: hidden; border: 1px solid var(--line);
  background: var(--paper-3);
}
.wideshot img { width: 100%; height: auto; display: block; }

/* Cover-Karten im Farbklima des jeweiligen Guides sind auf einer gemischten
   Übersicht nicht möglich — dort bleibt die neutrale Fassung. */


/* ============================================================
   BIBLIOTHEK — HERO
   Vorher stand links ein Textblock und rechts nichts: die halbe Seite war
   leer, und der einzige Knopf verlangte gleich 199 €, bevor der Leser wusste,
   was ein einzelner Guide überhaupt ist. Jetzt trägt die rechte Spalte die
   echten Titelseiten (kein Mockup), und der Einstieg ist der günstigste Weg.
   ============================================================ */
.hero--lib .hero__grid { align-items: center; }

/* Belege statt Beschreibung — drei knappe Fakten, keine Verkaufssätze. */
.hero__facts { margin-top: 22px; display: flex; flex-direction: column; gap: 9px; }
.hero__facts li { position: relative; padding-left: 22px; font-size: .95rem; color: var(--ink-2); }
.hero__facts li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: 9px; height: 1px; background: var(--ink-3);
}

.hero__alt { display: flex; flex-direction: column; gap: 2px; }
.hero__price { font-size: .95rem; color: var(--ink-2); }
.hero__price b { font-weight: 700; color: var(--ink); }
.hero__bundle {
  font-size: .95rem; color: var(--ink-2); text-decoration: underline;
  display: inline-flex; align-items: center; min-height: 44px; align-self: flex-start;
  text-underline-offset: 3px; text-decoration-color: var(--line-2);
  transition: color .3s var(--ease), text-decoration-color .3s var(--ease);
}
.hero__bundle:hover { color: var(--accent); text-decoration-color: currentColor; }
.hero__bundle s { color: var(--ink-3); text-decoration-thickness: 1px; margin-left: 4px; }

/* Der Fächer. Tiefe kommt aus Überlappung, Drehung und einer Haarlinie —
   nicht aus Schatten (Haus-Regel: Schatten sind der Template-Tell). */
.fan { display: flex; justify-content: center; align-items: center; padding-block: 8px; }
.fan__c {
  width: min(34%, 190px); height: auto; flex: none; border-radius: var(--r);
  border: 1px solid var(--line-2); background: var(--dark);
  transform-origin: 50% 100%;
  transition: transform .55s var(--ease-out-expo);
}
.fan__c--1 { transform: rotate(-7deg) translate(14%, 10px); z-index: 1; }
.fan__c--2 { transform: rotate(-.5deg) translateY(-14px); z-index: 3; width: min(38%, 214px); }
.fan__c--3 { transform: rotate(7deg) translate(-14%, 10px); z-index: 2; }
@media (hover: hover) and (pointer: fine) {
  .fan:hover .fan__c--1 { transform: rotate(-11deg) translate(4%, 6px); }
  .fan:hover .fan__c--3 { transform: rotate(11deg) translate(-4%, 6px); }
  .fan:hover .fan__c--2 { transform: rotate(0deg) translateY(-20px); }
}
@media (prefers-reduced-motion: reduce) { .fan__c { transition: none; } }

/* Unter 900 px steht der Fächer unter dem Text und wird kleiner — er ist
   Beleg, nicht Hauptdarsteller. */
@media (max-width: 900px) {
  .hero--lib .hero__grid { grid-template-columns: 1fr; }
  .fan { order: 2; margin-top: 30px; justify-content: flex-start; }
  .fan__c { width: min(30%, 150px); }
  .fan__c--2 { width: min(33%, 168px); }
}