/* =========================================================================
   Seiten-Layout der Promo-Site.

   Reset, Grundtypografie, Links, Fokus und alle Komponenten liegen im
   Designsystem (assets/design/). Hier steht nur, was die Seite darüber
   hinaus zusammensetzt: Sektionsrhythmus, das 3D-Buch, die Macken-Galerie,
   die Formattabelle, der Autor.

   Regel: ausschließlich semantische Token-Aliase, keine Hex-/px-Hardcodes.
   Einzige Ausnahme sind die Geometrie-Verhältnisse des Buchquaders — die
   kommen aus den Maßen des gedruckten Buches, nicht aus dem Designsystem.
   ========================================================================= */

/* ---- Grundgerüst ------------------------------------------------------- */

.skip-link {
  position: absolute;
  left: var(--space-2);
  top: calc(var(--space-2) * -1 - var(--control-h-md));
  z-index: 100;
  background: var(--signal);
  color: var(--text-on-signal);
  font-family: var(--font-sans);
  font-weight: var(--weight-semibold);
  text-decoration: none;
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-sm);
  transition: top var(--dur-fast) var(--ease-standard);
}
.skip-link:focus { top: var(--space-2); }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Modus-Umschalter: stille Bedienung. Gelb bleibt dem CTA vorbehalten. */
.theme-toggle {
  min-height: var(--hit-min);
  padding: var(--space-2) var(--space-4);
  background: transparent;
  color: var(--text-muted);
  border: var(--rule);
  border-radius: var(--radius-sm);
  font-family: var(--font-sans);
  font-size: var(--size-body-s);
  cursor: pointer;
  transition: var(--transition-color);
}
.theme-toggle:hover { color: var(--text-primary); border-color: var(--border-strong); }
.theme-toggle[hidden] { display: none; }

/* ---- Sektionsrhythmus -------------------------------------------------- */

.section { padding: var(--space-section) var(--gutter); }
.section__wide { max-width: var(--container-wide); margin-inline: auto; }
.section__wide--center { text-align: center; }
.section--text { max-width: calc(var(--container-text) + 2 * var(--gutter)); margin-inline: auto; }
.section--center { max-width: calc(var(--container-text) + 2 * var(--gutter)); margin-inline: auto; text-align: center; }
/* Zwei Lesespalten hintereinander sind EIN Textblock, nicht zwei Sektionen —
   sonst addieren sich die Sektionsabstaende zu einem Loch. */
.section--text + .section--text { padding-top: 0; }

.section__prose { margin-top: var(--space-8); }
.section__prose--center { margin-inline: auto; }
.section--center .kipsy-prose { margin-inline: auto; }
.section__intro { margin-top: var(--space-6); }

/* Der Diagonal-Bereich bringt seinen eigenen Innenabstand mit. */
.kp-diag .section__wide { padding-inline: var(--gutter); }

/* ---- Hero -------------------------------------------------------------- */

.hero {
  position: relative;
  overflow: hidden;
  /* Oben knapp halten: Der Hero steht ohnehin schon unter einer 77 px hohen
     Kopfzeile. Zu viel Luft dort schiebt die Kauf-Buttons auf einem
     13-Zoll-Laptop unter die Falz — sie waren bei 843 px, sichtbar sind dort
     rund 780. Unten darf es weiter atmen. */
  padding: clamp(1rem, 2vw, 1.5rem) var(--gutter) clamp(3rem, 6vw, 5rem);
}
.hero__grid { position: relative; max-width: var(--container-wide); margin-inline: auto; }

/* Das Buch beginnt auf der Höhe der ersten Zeile des Buchtitels, nicht
   mittig zur Textspalte. Der Versatz ist genau der Block über der Headline:
   die Höhe der Eyebrow-Zeile plus deren Abstand zur Headline. Beides aus
   Tokens gerechnet, damit es nicht auseinanderläuft, wenn die Schriftgröße
   sich ändert. */
.hero__grid { align-items: start; }
.hero__book {
  padding-top: calc(var(--size-overline) * var(--leading-normal) + var(--space-6));
}
@media (max-width: 860px) {
  /* Einspaltig gibt es keine Kante mehr, an der man ausrichten könnte. */
  .hero__book { padding-top: 0; }
}

.hero__actions {
  display: flex; flex-wrap: wrap; gap: var(--space-4);
  margin-top: var(--space-8);
}
.hero__micro {
  margin-top: var(--space-4);
  font-size: var(--size-caption);
  color: var(--text-muted);
}
.hero__meta {
  margin-top: var(--space-6);
  font-size: var(--size-caption);
  color: var(--text-faint);
}
.hero__book { display: flex; justify-content: center; }

/* ---- Das 3D-Buch (SPEC §5b) --------------------------------------------
   Der Quader hat die Maße des Paperbacks: 15,5 × 22 cm bei ~20,6 mm Rücken.
   Daraus die beiden Verhältnisse unten — sie sind Buchmaße, keine
   Designentscheidung, und stehen deshalb als Zahlen hier. */

.buch3d {
  /* Etwas kleiner als die erste Fassung (war 22rem): Das Buch soll den Hero
     begleiten, nicht mit der Headline um den Blick streiten. */
  --b-w: min(18rem, 62vw);
  --b-h: calc(var(--b-w) * 1.4234);   /* 1560 / 1096 */
  --b-d: calc(var(--b-w) * 0.1332);   /*  146 / 1096 */
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Reichlich Abstand zum Hinweis darunter: Der Bodenschatten der Bühne
     (`::after`) reicht über die Unterkante hinaus. Steht der Text zu dicht
     darunter, legt sich dessen graue Aura über die untere Buchkante und
     nimmt dem gerenderten Quader die Körperlichkeit. Rund zwei Zeilen
     Luft lösen das. */
  gap: var(--space-10);
}

.buch3d__stage {
  position: relative;
  width: var(--b-w);
  height: var(--b-h);
  perspective: 2200px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Der Schatten liegt als eigene Fläche unter dem Buch, nicht als filter auf
   dem Quader: `filter` ist eine Gruppierungs-Eigenschaft und würde
   `transform-style: preserve-3d` auf `flat` zurückzwingen — der Quader fiele
   dann in eine Ebene zusammen und Rücken wie Schnitt verschwänden. */
.buch3d__stage::after {
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: -4%;
  height: 6%;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0) 70%);
  pointer-events: none;
}

/* Eigenbewegung — eigene Ebene zwischen Bühne und Quader.
   Sie muss getrennt sein: Die Bühne trägt die `perspective` (die darf nicht
   mitrotieren, sonst stimmt die Projektion nicht), und der Quader trägt die
   Drehung durch die Nutzerin als Inline-Transform aus dem Skript. Läge beides
   auf demselben Element, würde eines das andere überschreiben. */
.buch3d__drift {
  width: var(--b-w);
  height: var(--b-h);
  transform-style: preserve-3d;
  animation:
    buch-eintritt 1400ms var(--ease-out) both,
    buch-atem 16s var(--ease-standard) 1400ms infinite;
}

/* Sobald jemand das Buch angefasst hat, ist die Einladung angekommen —
   die Eigenbewegung hört auf und stört nicht weiter. */
.buch3d.is-beruehrt .buch3d__drift { animation: none; }

@keyframes buch-eintritt {
  from { transform: rotateY(-16deg) rotateX(3deg); opacity: 0; }
  to   { transform: none; opacity: 1; }
}

/* Sehr flach: ±6° über 16 Sekunden. Genug, damit das Objekt als drehbar
   gelesen wird, zu wenig, um beim Lesen danebenzustören. */
@keyframes buch-atem {
  0%, 100% { transform: none; }
  50%      { transform: rotateY(-6deg) rotateX(1.5deg); }
}

.buch3d__body {
  position: relative;
  width: var(--b-w);
  height: var(--b-h);
  transform-style: preserve-3d;
  /* Ruhe-Pose — steht im CSS, damit das Objekt auch ohne JS richtig aussieht. */
  transform: rotateX(6deg) rotateY(26deg);
}
.buch3d.is-interactive .buch3d__body { cursor: grab; touch-action: none; }
.buch3d.is-dragging .buch3d__body { cursor: grabbing; }
.buch3d__body:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.buch3d__face {
  position: absolute;
  top: 0; left: 0;
  backface-visibility: hidden;
}
.buch3d__face--front,
.buch3d__face--back {
  width: var(--b-w); height: var(--b-h);
  object-fit: cover;
  border-radius: var(--radius-xs);
}
.buch3d__face--front { transform: translateZ(calc(var(--b-d) / 2)); }
.buch3d__face--back  { transform: rotateY(180deg) translateZ(calc(var(--b-d) / 2)); }

.buch3d__face--spine {
  width: var(--b-d); height: var(--b-h);
  left: calc(50% - var(--b-d) / 2);
  object-fit: cover;
  transform: rotateY(-90deg) translateZ(calc(var(--b-w) / 2));
}

/* Buchschnitt: synthetisch aus einem Gradienten, wie in SPEC §5b festgelegt —
   kein Foto. Die feinen Linien lesen sich als gestapelte Seitenkanten. */
.buch3d__face--fore,
.buch3d__face--head,
.buch3d__face--tail {
  background:
    repeating-linear-gradient(
      to right,
      rgba(0, 0, 0, 0.16) 0 0.5px,
      rgba(255, 255, 255, 0) 0.5px 2.5px
    ),
    linear-gradient(to bottom, #efe9e0, #d9d1c5 55%, #cfc6b8);
}
.buch3d__face--fore {
  width: var(--b-d); height: var(--b-h);
  left: calc(50% - var(--b-d) / 2);
  transform: rotateY(90deg) translateZ(calc(var(--b-w) / 2));
}
.buch3d__face--head,
.buch3d__face--tail {
  width: var(--b-w); height: var(--b-d);
  top: calc(50% - var(--b-d) / 2);
  background-image:
    repeating-linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.14) 0 0.5px,
      rgba(255, 255, 255, 0) 0.5px 2.5px
    ),
    linear-gradient(to right, #e8e1d7, #f2ede5 60%, #ded6c9);
}
.buch3d__face--head { transform: rotateX(90deg) translateZ(calc(var(--b-h) / 2)); }
.buch3d__face--tail { transform: rotateX(-90deg) translateZ(calc(var(--b-h) / 2)); }

.buch3d__hint {
  font-size: var(--size-caption);
  color: var(--text-faint);
  margin: 0;
}

/* Ohne Bewegungswunsch bleibt das Buch stehen — auch die Eigenbewegung und
   der Eintritt. Das JS klinkt sich ohnehin gar nicht erst ein. */
@media (prefers-reduced-motion: reduce) {
  .buch3d__body { transition: none !important; }
  .buch3d__drift { animation: none !important; }
  .buch3d__hint { display: none; }
}

/* ---- Macken-Galerie ---------------------------------------------------- */

.macken__grid { margin-top: clamp(2rem, 4vw, 3rem); }
.macken__card { gap: 0; }
.macken__side + .macken__side { margin-top: var(--space-4); }
.macken__who {
  display: inline-block;
  min-width: 4.2em;
  font-family: var(--font-sans);
  font-size: var(--size-overline);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-overline);
  text-transform: uppercase;
  color: var(--contrast);
}
.macken__who--ki { color: var(--accent); }

/* ---- Für wen ----------------------------------------------------------- */

.zielgruppen {
  list-style: none;
  margin: var(--space-10) 0 0;
  padding: 0;
  display: grid;
  gap: var(--space-6);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
}
.zielgruppen__item {
  font-family: var(--font-serif);
  font-size: var(--size-body-l);
  line-height: var(--leading-reading);
  color: var(--text-body);
  padding-left: var(--space-5);
  border-left: var(--border-width-strong) solid var(--contrast);
}
.abgrenzung {
  margin-top: var(--space-10);
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--size-h3);
  letter-spacing: var(--tracking-tight);
  color: var(--text-muted);
}

/* ---- Formate & Vorbestellen -------------------------------------------- */

.formate { margin-top: clamp(2rem, 4vw, 3rem); }
.formate__meta {
  margin-top: var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--size-caption);
  color: var(--text-faint);
}
.vorbestellen__links {
  display: flex; flex-wrap: wrap; gap: var(--space-4);
  margin-top: var(--space-8);
}
.vorbestellen__hinweis {
  margin-top: var(--space-5);
  font-size: var(--size-caption);
  color: var(--text-faint);
  max-width: var(--measure-lead);
}

/* ---- Autor ------------------------------------------------------------- */

.autor {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
  align-items: start;
}
.autor__foto {
  width: 100%; height: auto;
  border-radius: var(--radius-md);
  filter: grayscale(0.15);
}
.autor__links { margin-top: var(--space-6); font-size: var(--size-body-s); }

@media (max-width: 860px) {
  .autor { grid-template-columns: minmax(0, 1fr); }
  .autor__foto { max-width: 15rem; }
}

/* ---- Einzelseiten ------------------------------------------------------ */

.page-plain { padding: var(--space-section) var(--gutter); }
.page-prose { margin-inline: auto; }

.facts {
  max-width: var(--measure-prose);
  margin: var(--space-16) auto 0;
  padding-top: var(--space-8);
  border-top: var(--rule);
}
.facts__list { margin: 0; }
.facts__row {
  display: grid;
  grid-template-columns: minmax(0, 10rem) minmax(0, 1fr);
  gap: var(--space-4);
  padding: var(--space-3) 0;
  border-bottom: var(--rule);
}
.facts__row dt {
  font-family: var(--font-sans);
  font-size: var(--size-overline);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-overline);
  text-transform: uppercase;
  color: var(--text-muted);
}
.facts__row dd { margin: 0; font-size: var(--size-body-s); color: var(--text-body); }
.facts__links { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-top: var(--space-8); }

@media (max-width: 560px) {
  .facts__row { grid-template-columns: minmax(0, 1fr); gap: var(--space-1); }
}