/* FREIHEITSPILOT — Buchreihe / Shop
   Nutzt die Tokens aus tokens.css. Buchcover sind bewusst in CSS gebaut und
   bilden die echten Titelseiten nach (Navy, Goldlinie, Fraunces) - so gibt es
   keine Bilddatei, die beim naechsten Titel wieder fehlt. */

/* ---------------------------------------------------------------- Kopf */

.books-hero {
  position: relative;
  padding: clamp(7rem, 5rem + 8vw, 11rem) 0 clamp(3rem, 2rem + 4vw, 5rem);
  background:
    radial-gradient(900px 520px at 78% -10%, var(--gold-glow), transparent 62%),
    radial-gradient(760px 460px at 6% 108%, rgba(42, 157, 143, 0.12), transparent 58%),
    linear-gradient(168deg, var(--navy-900), var(--navy-950));
  overflow: hidden;
}
.books-hero__inner { position: relative; z-index: 2; text-align: center; }
.books-hero .eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-label);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold-400);
  display: block;
  margin-bottom: 1.1rem;
}
.books-hero h1 {
  font-family: var(--font-display);
  font-size: var(--text-h2);
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: -0.02em;
  color: var(--paper);
  margin: 0 auto 1.2rem;
  max-width: 16ch;
}
.books-hero h1 em { font-style: normal; color: var(--gold-400); }
.books-hero__lead {
  font-size: var(--text-lead);
  color: var(--paper-muted);
  max-width: 62ch;
  margin: 0 auto;
  line-height: 1.62;
}

/* Faecher aus den fuenf Baenden */
.fan {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  margin-top: clamp(2.5rem, 2rem + 3vw, 4.5rem);
  perspective: 1600px;
}
/* Breite UND Hoehe fest: mit nur einer Angabe leitet aspect-ratio die andere aus
   dem Inhalt ab - ein langer Titel machte das Cover dann 260 statt 146 px breit. */
.fan .cover {
  --fan-w: clamp(104px, 12.5vw, 170px);
  flex: 0 0 auto;
  width: var(--fan-w);
  height: calc(var(--fan-w) * 1.414);
  aspect-ratio: auto;
  /* Nur leicht ueberlappen: bei -24px verdeckte das Nachbarcover ein Drittel des
     Titels, was nach Textfehler aussieht statt nach gefaechertem Stapel. */
  margin-inline: clamp(-14px, -0.8vw, -6px);
  transform: rotate(var(--rot)) translateY(var(--lift));
  transition: transform var(--dur-med) var(--ease-out);
  box-shadow: var(--shadow-deep);
}
/* Im Faecher zaehlt die Silhouette, nicht der Fliesstext - deshalb kein
   Untertitel und etwas enger gesetzt, damit auch der laengste Titel
   ("Der Auswanderungs-Kompass", vier Zeilen) in die Flaeche passt. */
.fan .cover__sub { display: none; }
/* Der Band-Reiter wird vom Nachbarcover angeschnitten und ist hier ohne Nutzen -
   die Reihenfolge sieht man ja. In der Liste bleibt er. */
.fan .cover__band { display: none; }
.fan .cover__inner { padding: 8cqw 9cqw 9cqw; }
.fan .cover__title { font-size: 9.4cqw; line-height: 1.1; margin-bottom: 0.5em; }
.fan .cover__brand { margin-bottom: 0.35em; }
.fan .cover__rule { margin-bottom: 0.6em; }
.fan .cover:nth-child(1) { --rot: -11deg; --lift: 14px; z-index: 1; }
.fan .cover:nth-child(2) { --rot: -5.5deg; --lift: 5px;  z-index: 2; }
.fan .cover:nth-child(3) { --rot: 0deg;    --lift: -6px; z-index: 3; }
.fan .cover:nth-child(4) { --rot: 5.5deg;  --lift: 5px;  z-index: 2; }
.fan .cover:nth-child(5) { --rot: 11deg;   --lift: 14px; z-index: 1; }
.fan:hover .cover { --rot: 0deg; }
.fan .cover:nth-child(1) { --i: 1; }

/* --------------------------------------------------------------- Cover */

.cover {
  position: relative;
  /* Das Cover wird in zwei Groessen benutzt (Faecher ~140px, Liste ~230px).
     Die Schrift skaliert deshalb am COVER, nicht am Viewport - sonst laufen
     lange Titel wie "Der Auswanderungs-Kompass" im kleinen Faecher ueber. */
  container-type: inline-size;
  aspect-ratio: 1 / 1.414;                 /* A4, wie die PDFs */
  border-radius: 3px 7px 7px 3px;
  background: linear-gradient(152deg, var(--navy-700), var(--navy-900) 62%, var(--navy-850));
  box-shadow: var(--shadow-soft);
  overflow: hidden;
  text-align: center;
  isolation: isolate;
}
/* Alles Masshaltige liegt hier drin: cqw rechnet gegen .cover (den Vorfahren-
   Container). Direkt am .cover wuerde cqw auf den Viewport zurueckfallen -
   genau wie Prozent-Padding auf das Elternelement zeigt. */
.cover__inner {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 10cqw 11cqw 12cqw;
}
/* Buchruecken */
.cover::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 9px;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.42), rgba(255, 255, 255, 0.07) 62%, transparent);
  z-index: 2;
}
/* Papierglanz */
.cover::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(118deg, rgba(255, 255, 255, 0.09), transparent 42%);
  z-index: 1;
  pointer-events: none;
}
.cover > * { position: relative; z-index: 3; }
.cover__brand {
  font-family: var(--font-mono);
  font-size: 4.4cqw;
  letter-spacing: 0.24em;
  color: var(--teal);
  text-transform: uppercase;
  margin-bottom: 0.5em;
}
.cover__rule {
  width: 62%;
  height: 1px;
  background: var(--gold-500);
  margin: 0 auto 0.9em;
  opacity: 0.85;
}
.cover__title {
  font-family: var(--font-display);
  hyphens: auto;
  overflow-wrap: break-word;
  font-weight: 600;
  font-size: 10cqw;
  line-height: 1.14;
  color: var(--paper);
  letter-spacing: -0.01em;
  margin-bottom: 0.5em;
  text-wrap: balance;
}
.cover__sub {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 5.2cqw;
  line-height: 1.32;
  color: var(--paper-muted);
  margin-bottom: 1.1em;
  text-wrap: balance;
}
.cover__author {
  font-size: 4.8cqw;
  color: var(--gold-400);
  letter-spacing: 0.04em;
}
.cover__band {
  position: absolute;
  top: 0; right: 0;
  z-index: 4;
  font-family: var(--font-mono);
  font-size: 4.2cqw;
  letter-spacing: 0.14em;
  color: var(--navy-900);
  background: linear-gradient(140deg, var(--gold-300), var(--gold-500));
  padding: 0.34em 0.7em;
  border-bottom-left-radius: 6px;
}

/* ------------------------------------------------------------- Reihung */

.books { background: var(--navy-900); padding: var(--space-section-sm) 0 var(--space-section); }

.books__intro {
  max-width: 64ch;
  margin: 0 auto clamp(3rem, 2rem + 4vw, 5rem);
  text-align: center;
  color: var(--paper-muted);
  font-size: var(--text-lead);
  line-height: 1.65;
}
.books__intro strong { color: var(--paper); font-weight: 600; }

.book {
  display: grid;
  grid-template-columns: minmax(0, 230px) minmax(0, 1fr);
  gap: clamp(1.8rem, 1.2rem + 3vw, 4rem);
  align-items: start;
  padding: clamp(2rem, 1.5rem + 2.5vw, 3.4rem) 0;
  border-top: 1px solid var(--line-dark-soft);
}
.book:first-of-type { border-top: none; }
.book__cover { width: 100%; box-shadow: var(--shadow-deep); }

.book__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.9rem; margin-bottom: 0.5rem; }
.book__nr {
  font-family: var(--font-mono);
  font-size: var(--text-label);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-400);
}
.book h2 {
  font-family: var(--font-display);
  font-size: var(--text-h3);
  font-weight: 600;
  color: var(--paper);
  letter-spacing: -0.015em;
  line-height: 1.14;
  margin: 0;
}
.book__sub {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.05rem;
  color: var(--gold-300);
  margin-bottom: 1rem;
}
.book__text { color: var(--paper-muted); line-height: 1.68; margin-bottom: 1.3rem; max-width: 62ch; }

.book__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.6rem;
  font-family: var(--font-mono);
  font-size: var(--text-small);
  color: var(--paper-faint);
  margin-bottom: 1.3rem;
}
.book__meta b { color: var(--paper); font-weight: 500; }

/* Kapitel — aufklappbar, damit die Seite nicht zur Bleiwueste wird */
.book__toc { margin-bottom: 1.6rem; }
.book__toc summary {
  cursor: pointer;
  font-size: var(--text-small);
  color: var(--gold-300);
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0;
  transition: color var(--dur-fast) var(--ease-out);
}
.book__toc summary::-webkit-details-marker { display: none; }
.book__toc summary::before {
  content: "＋";
  font-family: var(--font-mono);
  font-size: 0.8em;
  color: var(--gold-400);
}
.book__toc[open] summary::before { content: "−"; }
.book__toc summary:hover { color: var(--gold-400); }
.book__toc ol {
  list-style: none;
  padding: 0.9rem 0 0;
  margin: 0;
  display: grid;
  gap: 0.5rem;
  border-top: 1px solid var(--line-dark-soft);
  margin-top: 0.6rem;
}
.book__toc li {
  display: flex;
  gap: 0.9rem;
  font-size: var(--text-small);
  color: var(--paper-muted);
  line-height: 1.45;
}
.book__toc li span {
  font-family: var(--font-mono);
  color: var(--gold-500);
  flex: 0 0 2.2rem;
  font-size: 0.78rem;
  padding-top: 0.08em;
}

.book__buy { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.4rem; }
.book__price {
  font-family: var(--font-mono);
  font-size: 1.5rem;
  color: var(--paper);
  line-height: 1;
}
.book__price small {
  display: block;
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--paper-faint);
  margin-top: 0.35rem;
  font-family: var(--font-sans);
}

/* ------------------------------------------------------------ Abschluss */

.books-note {
  background: var(--navy-950);
  padding: var(--space-section-sm) 0;
  border-top: 1px solid var(--line-dark);
}
.books-note__box {
  max-width: 68ch;
  margin: 0 auto;
  text-align: center;
}
.books-note h2 {
  font-family: var(--font-display);
  font-size: var(--text-h3);
  font-weight: 600;
  color: var(--paper);
  margin-bottom: 0.9rem;
}
.books-note p { color: var(--paper-muted); line-height: 1.68; margin-bottom: 1rem; }
.books-note__fine {
  font-size: var(--text-small);
  color: var(--paper-faint);
  line-height: 1.6;
  border-top: 1px solid var(--line-dark-soft);
  padding-top: 1.2rem;
  margin-top: 1.8rem;
}
.books-note__fine a { color: var(--gold-300); }

/* ------------------------------------------------------------ Schmalbild */

@media (max-width: 860px) {
  .book { grid-template-columns: minmax(0, 1fr); gap: 1.6rem; }
  .book__cover { max-width: 200px; }
  .fan { flex-wrap: nowrap; }
}

/* Auf schmalen Schirmen muessen alle fuenf Baende nebeneinander passen -
   sonst schneidet der Hero-Rahmen Band 5 einfach ab. */
@media (max-width: 620px) {
  .fan .cover {
    --fan-w: clamp(52px, 15vw, 82px);
    margin-inline: clamp(-9px, -1.2vw, -4px);
  }
  .fan .cover__author { display: none; }
  .fan .cover__title { font-size: 11cqw; }
}

@media (prefers-reduced-motion: reduce) {
  .fan .cover { transition: none; }
  .fan:hover .cover { transform: rotate(var(--rot)) translateY(var(--lift)); }
}

/* ---- Einwilligung nach § 356 Abs. 6 BGB ---- */
/* Ohne dieses Haekchen erlischt das Widerrufsrecht nicht - der Bestellknopf
   bleibt deshalb gesperrt, bis es sitzt. */
.book__consent {
  margin-bottom: 1.1rem;
  padding: .9rem 1.05rem;
  border: 1px solid var(--line-dark-soft);
  border-radius: var(--radius-md);
  background: rgba(17, 29, 53, .38);
  transition: border-color var(--dur-fast) var(--ease-out);
  max-width: 62ch;
}
.book__consent label { display: flex; gap: .7rem; align-items: flex-start; cursor: pointer; }
.book__consent input {
  flex: 0 0 auto;
  width: 17px; height: 17px;
  margin-top: .15rem;
  accent-color: var(--gold-400);
  cursor: pointer;
}
.book__consent span { font-size: .84rem; line-height: 1.55; color: var(--paper-muted); }
.book__consent a { color: var(--gold-300); text-decoration: underline; text-underline-offset: 2px; }
.book__consent.is-missing {
  border-color: var(--red);
  animation: consent-hint .4s var(--ease-out) 2;
}
@keyframes consent-hint {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-3px); }
  75% { transform: translateX(3px); }
}
.btn.is-locked { opacity: .42; cursor: not-allowed; filter: saturate(.55); }

@media (prefers-reduced-motion: reduce) {
  .book__consent.is-missing { animation: none; }
}