/* ===== Self-hosted Google Fonts (DSGVO: kein Google-Request) ===== */
/* latin-ext */
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url(../assets/fonts/fraunces-italic-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url(../assets/fonts/fraunces-italic-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(../assets/fonts/fraunces-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(../assets/fonts/fraunces-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Instrument Sans';
  font-style: italic;
  font-weight: 400 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(../assets/fonts/instrument-sans-italic-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Instrument Sans';
  font-style: italic;
  font-weight: 400 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(../assets/fonts/instrument-sans-italic-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(../assets/fonts/instrument-sans-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(../assets/fonts/instrument-sans-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ============================================================
   ORBITA MEDIA – Verlags-Website
   Design: Modern Editorial · Warm Paper · Espresso · Gold
   Typo:   Fraunces (Display) + Instrument Sans (Body)
   Motiv:  Orbit-Linien mit kreisenden Punkten
   ============================================================ */

:root {
  --paper: #f8f3ea;
  --paper-2: #f1e8d8;
  --paper-3: #ece0cb;
  --ink: #181410;
  --ink-soft: #564c40;
  --ink-faint: #8a7d6c;
  --espresso: #211a12;
  --espresso-2: #2c2418;
  --espresso-3: #3a2f1f;
  --gold: #c08a28;
  --gold-bright: #e3ae45;
  --gold-soft: #f4d9a0;
  --gold-pale: rgba(192, 138, 40, 0.12);
  --cream-on-dark: #f4ecdd;
  --line: rgba(24, 20, 16, 0.12);
  --line-dark: rgba(244, 236, 221, 0.14);
  --radius: 20px;
  --radius-pill: 999px;
  --font-display: "Fraunces", Georgia, serif;
  --font-body: "Instrument Sans", "Segoe UI", sans-serif;
  --shadow-card: 0 2px 6px rgba(24, 20, 16, 0.05), 0 18px 40px -18px rgba(24, 20, 16, 0.25);
  --shadow-cover: 0 4px 10px rgba(24, 20, 16, 0.18), 0 24px 48px -16px rgba(24, 20, 16, 0.4);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --maxw: 1200px;
}

/* ---------- Reset & Base ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 72px;
  -webkit-text-size-adjust: 100%;
  /* clip verhindert horizontales Wegscrollen/Rauszoomen am Handy zuverlässig
     (anders als hidden erzeugt es keinen Scroll-Container) */
  overflow-x: clip;
}

body {
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--ink);
  background: var(--paper);
  overflow-x: clip;
  max-width: 100%;
}

::selection { background: var(--gold-bright); color: var(--ink); }

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul { list-style: none; }

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Körnung über allem – subtile Papierhaptik */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: 0.32;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='0.05'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Typografie ---------- */
h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 560;
  line-height: 1.08;
  letter-spacing: -0.015em;
  font-variation-settings: "SOFT" 60, "WONK" 0;
  text-wrap: balance;
}

.display-xl { font-size: clamp(2.75rem, 6.4vw, 4.9rem); }
.display-l  { font-size: clamp(2.1rem, 4.4vw, 3.4rem); }
.display-m  { font-size: clamp(1.5rem, 2.6vw, 2rem); }

em.accent {
  font-style: italic;
  font-variation-settings: "SOFT" 100, "WONK" 1;
  color: var(--gold);
}

.on-dark em.accent { color: var(--gold-bright); }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-size: 0.78rem;
  font-weight: 650;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
}

.eyebrow::before {
  content: "";
  width: 24px;
  height: 14px;
  flex: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 14'%3E%3Cpath d='M6 13 C2.5 13 2.5 1 6 1 C10.5 1 13.5 13 18 13 C21.5 13 21.5 1 18 1 C13.5 1 10.5 13 6 13 Z' fill='none' stroke='%23c08a28' stroke-width='1.6'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

/* Wenn direkt darueber schon das grosse Unendlichzeichen (stmt-infinity) steht,
   das kleine im Eyebrow weglassen – sonst doppelt. */
.stmt-infinity + .eyebrow::before { display: none; }

.lead {
  font-size: clamp(1.05rem, 1.5vw, 1.2rem);
  color: var(--ink-soft);
  max-width: 56ch;
}

.on-dark { color: var(--cream-on-dark); }
.on-dark .lead { color: rgba(244, 236, 221, 0.78); }
.on-dark .eyebrow { color: var(--gold-bright); }

/* ---------- Layout-Helfer ---------- */
.wrap {
  width: min(var(--maxw), 100% - 3rem);
  margin-inline: auto;
}

.section { padding-block: clamp(4.5rem, 9vw, 7.5rem); }
.section--dark { background: var(--espresso); position: relative; overflow: hidden; }
.section--tinted { background: var(--paper-2); }

/* Bonus-/Gewinnspielseiten: kurze Inhalte -> kompaktere Sektionsabstände,
   sonst klaffen zwischen zwei Sektionen riesige Lücken (72px+72px). Direkt
   aufeinanderfolgende Sektionen lassen den oberen Abstand entfallen. */
.bonus-page .section { padding-block: clamp(2.6rem, 5.5vw, 3.8rem); }
.bonus-page .section + .section { padding-top: 0; }

.section-head { max-width: 720px; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.section-head .eyebrow { margin-bottom: 1.1rem; }
.section-head h2 { margin-bottom: 1.1rem; }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--center .eyebrow { justify-content: center; }

.split {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  padding: 0.95em 1.9em;
  border-radius: var(--radius-pill);
  font-weight: 600;
  font-size: 0.99rem;
  line-height: 1.2;
  transition: transform 0.35s var(--ease-out), background 0.3s, color 0.3s, border-color 0.3s, box-shadow 0.35s;
  will-change: transform;
}

.btn svg { width: 1.05em; height: 1.05em; flex: none; transition: transform 0.35s var(--ease-out); }
.btn:hover svg { transform: translateX(4px); }

.btn--gold {
  background: var(--gold);
  color: #fff;
  box-shadow: 0 10px 24px -10px rgba(192, 138, 40, 0.7);
}
.btn--gold:hover {
  background: var(--ink);
  transform: translateY(-3px);
  box-shadow: 0 16px 30px -12px rgba(24, 20, 16, 0.5);
}

.btn--ghost {
  border: 1.5px solid var(--line);
  color: var(--ink);
  background: transparent;
}
.btn--ghost:hover {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--paper);
  transform: translateY(-3px);
}

.on-dark .btn--ghost { border-color: var(--line-dark); color: var(--cream-on-dark); }
.on-dark .btn--ghost:hover { background: var(--cream-on-dark); color: var(--ink); border-color: var(--cream-on-dark); }

.btn--light {
  background: var(--cream-on-dark);
  color: var(--ink);
}
.btn--light:hover { background: var(--gold-bright); transform: translateY(-3px); }

/* ---------- Header ---------- */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  transition: background 0.35s, box-shadow 0.35s, padding 0.35s;
  padding-block: 1.1rem;
}

.site-header.is-scrolled {
  background: rgba(248, 243, 234, 0.86);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 var(--line);
  padding-block: 0.65rem;
}

.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

/* Auf schmalen Schirmen sind Logo (224px), Warenkorb (44px) und Menue (44px)
   mit zwei Abstaenden von je 24px zusammen breiter als die verfuegbaren
   342px. Vorher wurde deshalb der Menue-Knopf zusammengedrueckt und seine
   Striche standen 6 statt 24 Pixel vom Rand. Mit kleinerem Abstand passt
   alles nebeneinander, ohne dass etwas schrumpfen oder ueberlaufen muss.
   (2026-08-17) */
@media (max-width: 480px) {
  .site-header .wrap { gap: 0.5rem; }
}

/* Selbst mit kleinem Abstand bleibt die Marke mit 224px zu breit: zusammen mit
   Warenkorb und Menue braucht der Kopf 328px, auf einem 360er Schirm stehen
   aber nur 312px zur Verfuegung und auf einem 320er nur 272px. Dort lief der
   Kopf bisher 32px ueber den rechten Rand hinaus. Unter 420px entfaellt
   deshalb das kleine Wort „Verlag" neben dem Markennamen; Name und Zeichen
   bleiben unveraendert, und alle drei Elemente haben wieder 34px Randabstand.
   Gilt nur im Kopf, die Fusszeile behaelt den vollen Schriftzug. (2026-08-17) */
@media (max-width: 420px) {
  .site-header .brand small { display: none; }
}

/* Auf sehr schmalen Geraeten (iPhone SE, 320px) blieben zuletzt 3 Pixel
   Ueberstand: der Menue-Knopf endete bei 299 statt bei 296. Das etwas
   kleinere Zeichen gleicht das aus, danach steht das Menue genauso weit vom
   rechten Rand wie das Logo vom linken. (2026-08-17) */
@media (max-width: 360px) {
  .site-header .brand .logo-mark { width: 38px; height: 17px; }
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* Logomarke einfarbig (Unendlichzeichen läuft in der Textfarbe mit);
   dafür wandert periodisch ein goldener Glanzpunkt über das
   Unendlichzeichen – dezent, wie ein kurzer Schimmer. */
.brand { position: relative; }
.brand .logo-mark { width: 54px; height: 25px; flex: none; --mark-accent: currentColor; transition: transform 0.4s var(--ease-out); }
.brand:hover .logo-mark { transform: translateY(-2px); }
/* Goldener Glanzpunkt im Unendlichzeichen: liegt als Overlay GENAU über der
   Logomarke (JS umschließt sie mit .logo-wrap). Position wird in Prozent der
   Logomarke animiert -> skaliert mit JEDER Logogröße (Header, Footer, Mobile)
   und sitzt immer im Unendlichzeichen. Das alte, feste ::after ist deaktiviert. */
.brand::after { content: none; }
.logo-wrap { position: relative; display: inline-flex; flex: none; }
/* container-type: size -> die Keyframes unten können in cqw/cqh rechnen
   (Prozent der Logomarke), OHNE left/top zu animieren. */
.brand-spark { position: absolute; inset: 0; pointer-events: none; overflow: visible; container-type: size; }
.brand-spark-dot {
  position: absolute;
  left: 49.8%;
  top: 40.9%;
  width: 5%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--gold-bright);
  box-shadow: 0 0 2px 0.4px rgba(227, 174, 69, 0.6);
  transform: translate(-50%, -50%);
  opacity: 0;
  animation: brand-spark-move 7s linear infinite;
}
/* Figur-8 (Unendlich) in Prozent der Logomarke; Mitte 49.8% / 40.9%.
   Animiert wird NUR transform/opacity (Compositor). Bis 03.09.2026 liefen
   hier left/top – ein Layout pro Frame, 7 s lang, endlos, auf jeder Seite:
   im Trace 26 % Hauptthread-Last im Leerlauf (plus IntersectionObserver-
   Neuberechnung je Frame), ohne diese Animation 1,2 %. Im CMS-Live-Editor
   war das der Grund, warum die Seitenleiste beim Hovern hakte. */
@keyframes brand-spark-move {
  0%, 56%  { transform: translate(-50%, -50%); opacity: 0; }
  59%      { transform: translate(-50%, -50%); opacity: 1; }
  61.5%    { transform: translate(-50%, -50%) translate(7.2cqw, -7.9cqh); }
  67%      { transform: translate(-50%, -50%) translate(11.8cqw, 0.1cqh); }
  72.5%    { transform: translate(-50%, -50%) translate(7.2cqw, 8.1cqh); }
  78%      { transform: translate(-50%, -50%); }
  83.5%    { transform: translate(-50%, -50%) translate(-6.8cqw, 8.1cqh); }
  89%      { transform: translate(-50%, -50%) translate(-11.7cqw, 0.1cqh); }
  94%      { transform: translate(-50%, -50%) translate(-6.8cqw, -7.9cqh); opacity: 1; }
  97%      { opacity: 0; }
  100%     { transform: translate(-50%, -50%); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .brand-spark-dot { display: none; } }
@keyframes brand-spark {
  0%, 58% { offset-distance: 0%; opacity: 0; }
  64% { opacity: 0.95; }
  92% { opacity: 0.95; }
  100% { offset-distance: 100%; opacity: 0; }
}
.brand small {
  font-family: var(--font-body);
  font-size: 0.62rem;
  font-weight: 650;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  align-self: flex-end;
  margin-bottom: 0.25rem;
}

.main-nav { display: flex; align-items: center; gap: 2rem; }
.main-nav a:not(.btn) {
  font-size: 0.95rem;
  font-weight: 550;
  position: relative;
  padding-block: 0.3em;
}
.main-nav a:not(.btn)::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1.5px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.35s var(--ease-out);
}
.main-nav a:not(.btn):hover::after { transform: scaleX(1); transform-origin: left; }
.main-nav .btn { padding: 0.65em 1.4em; font-size: 0.92rem; }

/* Sprach-Umschalter: Globus-Button + Dropdown (DE/EN/FR/ES) */
.lang-switch { position: relative; display: inline-flex; }
.lang-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.32rem;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 650;
  letter-spacing: 0.04em;
  color: inherit;
  background: none;
  border: 1px solid currentColor;
  border-color: color-mix(in srgb, currentColor 22%, transparent);
  border-radius: 999px;
  padding: 0.34rem 0.62rem;
  cursor: pointer;
  opacity: 0.78;
  transition: opacity 0.2s, border-color 0.2s, background-color 0.2s;
}
.lang-btn:hover { opacity: 1; border-color: color-mix(in srgb, currentColor 40%, transparent); }
.lang-globe { width: 1.05em; height: 1.05em; flex: none; }
.lang-chev { width: 0.7em; height: 0.7em; flex: none; transition: transform 0.25s var(--ease-out); opacity: 0.7; }
.lang-switch.is-open .lang-chev { transform: rotate(180deg); }
.lang-menu {
  position: absolute;
  top: calc(100% + 0.5rem);
  right: 0;
  min-width: 9.5rem;
  list-style: none;
  margin: 0;
  padding: 0.4rem;
  background: #fff;
  border: 1px solid var(--line, #e5e7eb);
  border-radius: 12px;
  box-shadow: 0 12px 32px -10px rgba(16, 24, 40, 0.22);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.2s var(--ease-out), transform 0.2s var(--ease-out), visibility 0.2s;
  z-index: 60;
}
.lang-switch.is-open .lang-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.lang-menu a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  padding: 0.5rem 0.7rem;
  border-radius: 8px;
  font-size: 0.92rem;
  font-weight: 550;
  letter-spacing: 0;
  color: var(--ink, #1a1f36);
  opacity: 1;
  transition: background-color 0.15s, color 0.15s;
}
.lang-menu a:hover { background: #f4f4f5; color: var(--ink, #1a1f36); }
.lang-menu a.is-active { color: var(--gold); font-weight: 700; }
/* Kein Haken: Die aktive Sprache ist farblich hervorgehoben. Der Haken
   stand hinter dem Sprachkuerzel und wirkte dadurch wie eine Markierung
   der naechsten Zeile. */
.lang-menu a .lang-code {
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.05em;
  opacity: 0.5; text-transform: uppercase;
}
/* Auf dunklem Header (on-dark) Button-Farbe hell halten – erbt currentColor */
.on-dark .lang-btn, .site-header.is-dark .lang-btn { color: inherit; }

/* flex: 0 0 44px, damit der Knopf im Kopf nicht schrumpft. Im Flex-Container
   wurde er auf 16 Pixel zusammengedrueckt, sobald Logo, Warenkorb und Menue
   zusammen breiter waren als der Platz. Die Striche sind absolut positioniert
   und 24 Pixel breit, ragten dadurch ueber den Knopf hinaus und standen nur
   noch 6 Pixel vom rechten Bildschirmrand. (2026-08-17) */
.nav-toggle { display: none; flex: 0 0 44px; width: 44px; height: 44px; position: relative; z-index: 110; }
.nav-toggle span,
.nav-toggle span::before,
.nav-toggle span::after {
  content: "";
  position: absolute;
  left: 10px;
  width: 24px;
  height: 2px;
  background: var(--ink);
  transition: transform 0.35s var(--ease-out), top 0.35s, opacity 0.2s;
}
.nav-toggle span { top: 21px; }
.nav-toggle span::before { top: -7px; left: 0; }
.nav-toggle span::after { top: 7px; left: 0; }
body.nav-open .nav-toggle span { background: transparent; }
body.nav-open .nav-toggle span::before { top: 0; transform: rotate(45deg); }
body.nav-open .nav-toggle span::after { top: 0; transform: rotate(-45deg); }

/* ---------- Unendlich-Dekor (aus dem Logo abgeleitet) ---------- */
.orbits {
  position: absolute;
  pointer-events: none;
  z-index: 0;
}
.lemni {
  fill: none;
  stroke: rgba(192, 138, 40, 0.38);
  stroke-width: 1.6;
}
.lemni-draw {
  stroke: rgba(192, 138, 40, 0.85);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 110 1380;
  animation: lemni-flow 10s linear infinite;
}
@keyframes lemni-flow {
  to { stroke-dashoffset: -1490; }
}
.lemni-dot {
  fill: var(--gold);
  offset-path: path("M90 270 C90 175 235 175 300 270 C365 365 510 365 510 270 C510 175 365 175 300 270 C235 365 90 365 90 270 Z");
  offset-rotate: 0deg;
  animation: lemni-travel 16s linear infinite;
}
.lemni-dot--slow {
  animation-duration: 26s;
  animation-delay: -9s;
  opacity: 0.55;
}

/* "Leselicht": warm atmende Licht-Aura hinter den Büchern (wie der
   Schein einer Leselampe) + feiner Goldstaub, der darin aufsteigt.
   Liegt komplett HINTER dem Cover-Fächer, nie über Text. */
.hero-ambient {
  position: absolute;
  inset: -18% -12%;
  z-index: 0;
  pointer-events: none;
}
/* Goldstaub: schwebt langsam und pendelnd auf wie Staub im warmen
   Licht – bewusst träge, damit nichts nach Sprudel aussieht */
.dust {
  position: absolute;
  bottom: 4%;
  border-radius: 50%;
  background: var(--gold-bright);
  box-shadow: 0 0 8px 1.5px rgba(227, 174, 69, 0.7);
  opacity: 0;
  animation: dust-rise ease-in-out infinite;
}
@keyframes dust-rise {
  0% { transform: translate(0, 0); opacity: 0; }
  8% { opacity: var(--dust-o, 0.6); }
  30% { transform: translate(calc(var(--dx, 22px) * 0.6), -115px); }
  55% { transform: translate(calc(var(--dx, 22px) * -0.35), -225px); }
  80% { transform: translate(calc(var(--dx, 22px) * 0.75), -335px); opacity: calc(var(--dust-o, 0.6) * 0.45); }
  100% { transform: translate(calc(var(--dx, 22px) * 0.1), -440px); opacity: 0; }
}

@keyframes lemni-travel {
  from { offset-distance: 0%; }
  to { offset-distance: 100%; }
}
/* Variante für dunkle Sektionen */
.section--dark .lemni { stroke: rgba(227, 174, 69, 0.16); }
.section--dark .lemni-draw { stroke: rgba(227, 174, 69, 0.42); }
.section--dark .lemni-dot { fill: var(--gold-bright); opacity: 0.7; }

/* In der CTA-Sektion nur ein Hauch – darf nicht vom Text ablenken */
.cta-final .lemni { stroke: rgba(227, 174, 69, 0.07); stroke-width: 1.2; }
.cta-final .lemni-dot { opacity: 0.28; }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  padding-top: clamp(7.5rem, 14vh, 10.5rem);
  padding-bottom: clamp(3rem, 6vw, 5rem);
  overflow: hidden;
  background:
    radial-gradient(1100px 500px at 85% -10%, rgba(227, 174, 69, 0.16), transparent 65%),
    radial-gradient(700px 420px at -10% 110%, rgba(192, 138, 40, 0.1), transparent 60%),
    var(--paper);
}

.hero .wrap {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  align-items: start;
  gap: clamp(2rem, 5vw, 4.5rem);
  position: relative;
  z-index: 1;
}

.hero-copy .eyebrow { margin-bottom: 1.4rem; }
.hero-copy h1 { margin-bottom: 1.5rem; }
.hero-copy .lead { margin-bottom: 2.2rem; }

.hero-ctas { display: flex; gap: 0.9rem; flex-wrap: wrap; margin-bottom: 2rem; }

.hero-proof {
  display: flex;
  align-items: center;
  gap: 0.7em;
  font-size: 0.9rem;
  color: var(--ink-faint);
  font-weight: 550;
}
.hero-proof strong { color: var(--ink-soft); font-weight: 650; }
.hero-proof .sep { color: var(--gold); }

/* Vertrauens-Badges im Hero (Autor-werden) – Pills mit Häkchen statt loser
   Fettschrift, damit die Stichpunkte fertig und wertig wirken. */
.proof-badges { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1.6rem; }
.proof-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.5rem 0.95rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--ink-soft);
  box-shadow: var(--shadow-card);
}
.proof-badge svg { width: 15px; height: 15px; color: var(--gold); flex: none; }

/* Cover-Fächer */
.hero-stage {
  position: relative;
  height: clamp(380px, 44vw, 560px);
}

.hero-stage .orbits {
  inset: -12% -18%;
  width: 136%;
  height: 124%;
}

.cover-fan {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  cursor: grab;
  /* pinch-zoom erlauben, damit Zwei-Finger-Zoom über dem Fächer flüssig
     vom Browser kommt (statt zu flackern); horizontaler Drag bleibt unser */
  touch-action: pan-y pinch-zoom;
  user-select: none;
  -webkit-user-select: none;
  /* Minimale Luft zwischen Lead-Text und linkem Cover */
  margin-left: clamp(10px, 1.5vw, 26px);
}
.cover-fan:active { cursor: grabbing; }

.cover-fan .fan-item {
  position: absolute;
  width: clamp(150px, 16vw, 215px);
  aspect-ratio: 2 / 3;
  -webkit-transform: rotate(var(--r)) translate(var(--tx), var(--ty));
  transform: rotate(var(--r)) translate(var(--tx), var(--ty));
  transition: transform 0.85s var(--ease-out), opacity 0.55s ease;
  /* iOS/Safari: jedes Cover als eigene GPU-Schicht promoten, damit das
     gleichzeitige Auffaechern/Blaettern der 5 3D-Buecher fluessig laeuft. */
  will-change: transform;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

/* Auffächern: am Desktop bei Hover, auf Touch nur SOLANGE der Finger
   zieht (.is-dragging) – beim Loslassen geht es automatisch zurück. */
.cover-fan.is-dragging .fan-item {
  transform: rotate(calc(var(--r) * 1.45)) translate(calc(var(--tx) * 1.35), calc(var(--ty) * 1.1));
}
@media (hover: hover) and (pointer: fine) {
  .cover-fan:hover .fan-item {
    transform: rotate(calc(var(--r) * 1.45)) translate(calc(var(--tx) * 1.35), calc(var(--ty) * 1.1));
  }
  .cover-fan:hover .fan-item .book3d-vol { -webkit-transform: perspective(1400px) rotateY(-8deg); transform: perspective(1400px) rotateY(-8deg); }
}
.cover-fan .fan-item .book3d-vol { --thick: 56px; -webkit-transform: perspective(1400px) rotateY(-15deg); transform: perspective(1400px) rotateY(-15deg); }
.cover-fan.is-dragging .fan-item .book3d-vol { -webkit-transform: perspective(1400px) rotateY(-8deg); transform: perspective(1400px) rotateY(-8deg); }
/* Bilder im Fächer fangen keine Pointer-Events ab und sind nicht nativ
   ziehbar – sonst startet beim Wischen ein Bild-Drag und blockiert das
   Blättern */
.cover-fan .fan-item img,
.cover-fan .fan-item .book3d-pages { pointer-events: none; }
.cover-fan img { -webkit-user-drag: none; user-select: none; }

/* ---------- 3D-Buch (physisches Buch statt flacher Kachel) ----------
   Das Cover behält seine ECHTE Seitenproportion (height 100%, width auto,
   kein object-fit) – 17x24 ist sichtbar breiter als A5. Buchblock
   (Seitenkante) und Falz entstehen aus Pseudo-Elementen im 3D-Raum. */
.book3d-vol {
  /* Absolut + top/bottom: Höhe ist immer definiert (keine zirkuläre
     Prozent-Kette in Flex/aspect-ratio), width:fit-content = Bildbreite */
  position: absolute;
  inset: 0;
  margin: auto;
  width: fit-content;
  height: fit-content;
  max-width: 100%;
  max-height: 100%;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transform: rotateY(-15deg);
  transform: rotateY(-15deg);
  -webkit-transition: -webkit-transform 0.55s var(--ease-out);
  transition: transform 0.55s var(--ease-out);
  --thick: 44px;
}
.book3d-vol img {
  display: block;
  max-height: 100%;
  max-width: 100%;
  width: auto;
  height: auto;
  object-fit: unset;
  position: relative;
  /* z-index sorgt dafuer, dass das Cover IM ABGEFLACHTEN Modus (Safari/WebKit
     flacht preserve-3d ab und ignoriert die translateZ-Tiefe -> sonst malt der
     dunkle Rueckdeckel ::after per DOM-Reihenfolge darueber) trotzdem VOR dem
     Rueckdeckel liegt. In Chrome (echtes 3D) regelt translateZ die Tiefe; das
     ::before (Falzlicht, z-index:2) bleibt in beiden Faellen oben. */
  z-index: 1;
  border-radius: 2px 5px 5px 2px;
  box-shadow: 0 14px 26px -12px rgba(24, 20, 16, 0.38);
  /* KEIN backface-visibility:hidden hier! Das Cover ist die Vorderseite und
     rotiert nie über 90° – seine Rückseite zeigt also nie zum Betrachter.
     In Safari/WebKit hat backface-visibility:hidden hier dazu geführt, dass
     die Front fälschlich ausgeblendet und der dunkle Rückdeckel (::after)
     sichtbar wurde (Cover = dunkles Rechteck ohne Grafik). translateZ(1px)
     hält das Cover sauber vor dem Rückdeckel, ohne Z-Fighting. */
  -webkit-transform: translateZ(1px);
  transform: translateZ(1px);
  /* Beiger Platzhalter, solange das Cover lädt – verhindert das kurze
     Durchscheinen des dunklen Rückdeckels (sah am Handy "halb schwarz" aus) */
  background: var(--paper-3);
}
/* Falz-Licht entlang des Buchrückens auf dem Cover – bewusst dezent */
.book3d-vol::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: 2px 5px 5px 2px;
  background: linear-gradient(90deg,
    rgba(0, 0, 0, 0.15) 0%,
    rgba(255, 255, 255, 0.12) 1.6%,
    rgba(0, 0, 0, 0.09) 3.6%,
    rgba(0, 0, 0, 0) 7%);
  pointer-events: none;
}
/* Buchblock: Papier-Seitenkante rechts, klappt im Raum nach hinten */
.book3d-pages {
  position: absolute;
  top: .6%;
  bottom: .6%;
  left: 100%;
  width: var(--thick);
  -webkit-transform-origin: 0 50%;
  transform-origin: 0 50%;
  -webkit-transform: translateZ(1px) rotateY(90deg);
  transform: translateZ(1px) rotateY(90deg);
  background: linear-gradient(90deg,
    #e9e1d1 0%, #fdfaf2 9%, #f0e9da 17%, #fcf8f0 26%, #efe7d8 34%,
    #fcf8f0 43%, #eee6d7 51%, #fdfaf2 60%, #f0e9da 68%, #fcf8f0 77%,
    #eee6d7 85%, #fbf7ef 93%, #e6ddcc 100%);
  border-radius: 0 2px 2px 0;
}
/* Rückdeckel gibt dem Block Tiefe. KEIN box-shadow hier – der blutete als
   dunkler Schein rechts über den Hintergrund ("schwarz über weiß").
   Tiefe/Schatten liefert die box-shadow des Cover-Bildes. */
.book3d-vol::after {
  content: "";
  position: absolute;
  inset: .6% 0;
  -webkit-transform: translateZ(calc(var(--thick) * -1));
  transform: translateZ(calc(var(--thick) * -1));
  background: #2c2418;
  border-radius: 2px 5px 5px 2px;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
/* Eckige Cover-Ecken (wie echte Bücher – keine abgerundeten Ecken). */
.book3d-vol img, .book3d-vol::before, .book3d-vol::after, .book3d-pages { border-radius: 0; }
/* Fächer + Katalog-Karten: Seitenschnitt exakt auf die Cover-Höhe einpassen. Der
   prozentuale Inset (≈ Dicke / (2·Perspektive)) fängt die perspektivische Vergrößerung
   der vorderen Kante ab, sodass die weißen Seiten oben/unten bündig zum Cover sitzen
   und nicht überstehen. Die Rücktiefe (::after) bleibt rechts als Buchdicke sichtbar,
   per inset innerhalb der Cover-Silhouette gehalten. */
.cover-fan .fan-item .book3d-pages { top: .6%; bottom: .6%; }
.book-card .cover .book3d-pages { top: .6%; bottom: .6%; }
.cover-fan .fan-item .book3d-vol::after,
.book-card .cover .book3d-vol::after { display: block; inset: 0; }

/* Positionen im Fächer – werden von JS rotiert */
.fan-item.pos-0 { --r: -14deg; --tx: -118%; --ty: 6%;  z-index: 1; }
.fan-item.pos-1 { --r: -7deg;  --tx: -58%;  --ty: -2%; z-index: 2; }
.fan-item.pos-2 { --r: 0deg;   --tx: 0%;    --ty: -6%; z-index: 3; }
.fan-item.pos-3 { --r: 7deg;   --tx: 58%;   --ty: -2%; z-index: 2; }
.fan-item.pos-4 { --r: 14deg;  --tx: 118%;  --ty: 6%;  z-index: 1; }

/* Ein-/Austritt beim Rotieren */
.cover-fan .fan-item.is-enter-right { opacity: 0; transform: rotate(22deg) translate(175%, 14%); }
.cover-fan .fan-item.is-enter-left  { opacity: 0; transform: rotate(-22deg) translate(-175%, 14%); }
.cover-fan .fan-item.is-out-left    { opacity: 0; transform: rotate(-24deg) translate(-185%, 16%); z-index: 0; }
.cover-fan .fan-item.is-out-right   { opacity: 0; transform: rotate(24deg) translate(185%, 16%); z-index: 0; }

/* Hero-Einstiegsanimation der Textspalte */
.hero-copy > * {
  transform: translateY(26px);
  animation: rise-in 0.9s var(--ease-out) forwards;
}
.hero-copy > :nth-child(1) { animation-delay: 0.05s; }
.hero-copy > :nth-child(2) { animation-delay: 0.15s; }
.hero-copy > :nth-child(3) { animation-delay: 0.25s; }
.hero-copy > :nth-child(4) { animation-delay: 0.35s; }
.hero-copy > :nth-child(5) { animation-delay: 0.45s; }

@keyframes rise-in {
  to { opacity: 1; transform: translateY(0); }
}

/* ---------- Trustbar ---------- */
.trustbar {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding-block: 1.9rem;
  background: var(--paper);
}
.trustbar .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
}
.trustbar p {
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.trust-logos { display: flex; align-items: center; gap: clamp(1.6rem, 4vw, 3.2rem); flex-wrap: wrap; }
.trust-logos img {
  height: 26px;
  width: auto;
  opacity: 0.62;
  filter: grayscale(1) contrast(0.9);
  transition: opacity 0.3s, filter 0.3s, transform 0.3s;
}
.trust-logos img:hover { opacity: 1; filter: none; transform: translateY(-2px); }
.trust-logos .more { font-size: 0.88rem; color: var(--ink-faint); font-style: italic; font-family: var(--font-display); }

/* ---------- Bücher-Shelf ---------- */
.shelf-outer { position: relative; }

.shelf {
  display: flex;
  gap: clamp(1.2rem, 2.4vw, 2rem);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  /* Bleibt im Container, blendet nur dort weich aus, wo es in Scroll-
     Richtung weitergeht (JS setzt --fade-l/--fade-r je nach Position) */
  --fade-l: 0px;
  --fade-r: 64px;
  padding: 1.4rem 1.5rem 2.2rem;
  margin-inline: -1.5rem;
  scroll-padding-inline: 1.5rem;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--fade-l), #000 calc(100% - var(--fade-r)), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 var(--fade-l), #000 calc(100% - var(--fade-r)), transparent 100%);
  transition: --fade-l 0.3s, --fade-r 0.3s;
}
.shelf::-webkit-scrollbar { display: none; }

.book-card {
  flex: 0 0 clamp(170px, 19vw, 225px);
  scroll-snap-align: start;
}

.book-card .cover {
  position: relative;
  aspect-ratio: 2 / 3;
  transition: transform 0.5s var(--ease-out);
}
.book-card .cover .book3d-vol { --thick: 52px; -webkit-transform: perspective(1400px) rotateY(-15deg); transform: perspective(1400px) rotateY(-15deg); }
.book-card:hover .cover { transform: translateY(-8px); }
.book-card:hover .cover .book3d-vol { -webkit-transform: perspective(1400px) rotateY(-8deg); transform: perspective(1400px) rotateY(-8deg); }

.book-card .badge {
  position: absolute;
  top: 4px;
  left: 0;
  z-index: 6;
  background: var(--gold-bright);
  color: var(--ink);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 0.35em 0.9em;
  border-radius: var(--radius-pill);
  box-shadow: 0 4px 12px rgba(24, 20, 16, 0.25);
}

.book-card h3 {
  font-size: 1.02rem;
  margin-top: 1rem;
  line-height: 1.3;
}
.book-card .meta {
  font-size: 0.84rem;
  color: var(--ink-faint);
  margin-top: 0.3rem;
}
/* Im Regal stehen ein- und zweizeilige Titel nebeneinander; ohne Mindesthöhe
   sitzt die Datumszeile dann auf zwei verschiedenen Linien. Zwei Zeilen
   reservieren gleicht das aus, ohne das Datum vom Titel zu lösen – eine
   gemeinsame Grundlinie über 'margin-top:auto' wäre der Fehler gewesen: bei
   einem dreizeiligen Nachbarn reisst sie eine sichtbare Lücke auf. */
.shelf .book-card h3 { min-height: 2.6em; }

.shelf-nav { display: flex; gap: 0.6rem; }
.shelf-btn {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1.5px solid var(--line);
  display: grid;
  place-items: center;
  transition: background 0.3s, border-color 0.3s, color 0.3s, transform 0.3s;
}
.shelf-btn:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); transform: translateY(-2px); }
.shelf-btn svg { width: 18px; height: 18px; }
.shelf-btn:disabled { opacity: 0.3; pointer-events: none; }

/* ---------- USP-Karten (Verlag) ---------- */
.usp-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.2rem, 2.4vw, 2rem);
}

/* Vier Karten: zwei mal zwei statt drei plus einer allein. */
.usp-grid--vier { grid-template-columns: repeat(2, 1fr); }

.usp-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 2.2rem 1.9rem 2rem;
  position: relative;
  overflow: hidden;
  transition: transform 0.45s var(--ease-out), box-shadow 0.45s, border-color 0.45s;
}
.usp-card:hover {
  transform: translateY(-7px);
  box-shadow: var(--shadow-card);
  border-color: rgba(192, 138, 40, 0.45);
}
.usp-card .num {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 0.95rem;
  color: var(--gold);
  display: block;
  margin-bottom: 1.2rem;
}
.usp-card .icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: var(--gold-pale);
  display: grid;
  place-items: center;
  margin-bottom: 1.4rem;
  color: var(--gold);
}
.usp-card .icon svg { width: 26px; height: 26px; }
.usp-card h3 { font-size: 1.32rem; margin-bottom: 0.7rem; }
.usp-card p { color: var(--ink-soft); font-size: 0.98rem; }

/* Themen-Chips */
.themes {
  margin-top: clamp(2.4rem, 5vw, 3.6rem);
  display: flex;
  align-items: baseline;
  gap: 1.2rem 1rem;
  flex-wrap: wrap;
}
.themes .themes-label {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--ink-faint);
  font-size: 1.02rem;
}
.chip {
  display: inline-block;
  padding: 0.45em 1.1em;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  font-size: 0.88rem;
  font-weight: 550;
  color: var(--ink-soft);
  background: var(--paper);
  transition: background 0.3s, color 0.3s, border-color 0.3s, transform 0.3s;
}
.chip:hover {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
  transform: translateY(-2px);
}

/* ---------- Social Proof: SPIEGEL-Bestseller & BookTok ---------- */
.bestseller-lead { margin-inline: auto; }

.bestseller-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1.1rem, 2.6vw, 2.2rem);
  margin-top: clamp(2.4rem, 4vw, 3.4rem);
}

.bestseller-card {
  display: block;
  cursor: pointer;
  text-align: center;
}

.bestseller-cover {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  background: var(--paper-3);
  box-shadow: var(--shadow-cover);
  transition: transform 0.5s var(--ease-out), box-shadow 0.5s var(--ease-out);
}
.bestseller-cover img {
  width: 100%;
  height: auto;
  display: block;
}
.bestseller-card:hover .bestseller-cover {
  transform: translateY(-8px);
  box-shadow: 0 8px 18px rgba(24, 20, 16, 0.22), 0 34px 62px -20px rgba(24, 20, 16, 0.5);
}

.bestseller-card h3 {
  font-size: 1.06rem;
  line-height: 1.3;
  margin-top: 1rem;
  color: var(--ink);
  transition: color 0.3s;
}
.bestseller-card:hover h3 { color: var(--gold); }
.bestseller-author {
  font-size: 0.9rem;
  color: var(--ink-faint);
  margin-top: 0.25rem;
}

.bestseller-cta {
  display: flex;
  justify-content: center;
  margin-top: clamp(2.4rem, 4.5vw, 3.4rem);
}
.tiktok-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.9rem;
  max-width: 640px;
  padding: 0.95rem 1.5rem;
  border-radius: 18px;
  background: var(--espresso);
  color: var(--cream-on-dark);
  font-size: 0.98rem;
  line-height: 1.45;
  cursor: pointer;
  box-shadow: var(--shadow-card);
  transition: background 0.3s, box-shadow 0.3s, transform 0.3s;
}
.tiktok-pill:hover {
  background: var(--ink);
  box-shadow: 0 8px 20px rgba(24, 20, 16, 0.3);
  transform: translateY(-2px);
}
.tiktok-pill .tiktok-ico {
  width: 26px;
  height: 26px;
  flex: none;
  color: var(--gold-bright);
}
.tiktok-pill .tiktok-txt { min-width: 0; }
.tiktok-pill .tiktok-txt strong { font-weight: 700; color: var(--paper); }
.tiktok-pill .tiktok-arrow {
  width: 18px;
  height: 18px;
  flex: none;
  transition: transform 0.35s var(--ease-out);
}
.tiktok-pill:hover .tiktok-arrow { transform: translateX(4px); }

@media (max-width: 760px) {
  .bestseller-grid { grid-template-columns: repeat(2, 1fr); gap: 1.2rem 1rem; }
  .bestseller-card h3 { font-size: 0.98rem; }
  .tiktok-pill { font-size: 0.92rem; padding: 0.85rem 1.15rem; gap: 0.7rem; }
}

/* ---------- Cover-Marquee ---------- */
.marquee-band {
  padding-block: clamp(2.6rem, 5vw, 4rem);
  background: var(--paper);
  overflow: hidden;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
/* Kein Auto-Scroll mehr: der Nutzer wischt selbst (Finger / Trackpad). Native
   horizontale Scroll-Reihe = butterweich auf allen Plattformen, kein "unclean"
   wirkendes Dauerlaufband. */
.marquee {
  display: flex;
  overflow: hidden;
  /* mehr vertikaler Platz, damit das Hover-Rauszoomen der Cover oben nicht
     abgeschnitten wird (horizontal clippt weiterhin .marquee-band) */
  padding-block: 24px;
  scrollbar-width: none;
}
.marquee::-webkit-scrollbar { display: none; }
/* Endlos-Laufband: zwei identische Cover-Saetze in einem Track, der per CSS
   um -50% (= genau ein Satz) nach links wandert -> nahtlose Schleife. */
.marquee-track {
  display: flex;
  flex: 0 0 auto;
  gap: clamp(1.2rem, 2.4vw, 2rem);
  padding-inline: clamp(0.6rem, 2.6vw, 1rem);
  width: max-content;
  animation: marquee-scroll 70s linear infinite;
  will-change: transform;
}
.marquee-band:hover .marquee-track { animation-play-state: paused; }
@keyframes marquee-scroll {
  from { -webkit-transform: translateX(0); transform: translateX(0); }
  to { -webkit-transform: translateX(-50%); transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .marquee { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .marquee-track { animation: none; }
}
.marquee::-webkit-scrollbar { display: none; }
.marquee img {
  flex: 0 0 auto;
  height: clamp(150px, 17vw, 215px);
  width: auto;
  border-radius: 8px;
  box-shadow: var(--shadow-card);
  transform: rotate(var(--tilt, 0deg));
  transition: transform 0.45s var(--ease-out), box-shadow 0.45s;
}
.marquee img:nth-child(odd) { --tilt: 1.6deg; }
.marquee img:nth-child(even) { --tilt: -1.6deg; }
@media (hover: hover) and (pointer: fine) {
  .marquee img:hover { transform: rotate(0deg) scale(1.07) translateY(-6px); box-shadow: var(--shadow-cover); z-index: 2; position: relative; }
}

/* ---------- Stats ---------- */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
  position: relative;
  z-index: 1;
}
.stat { text-align: center; padding-block: 0.6rem; position: relative; }
/* Trennstrich exakt in die Mitte des gap legen (statt border-left, der durch
   den gap asymmetrisch am Nachbarn klebte -> "Zahl zu nah am Strich"). Das
   Pseudo-Element sitzt bei -1rem = halber gap, mittig + vertikal zentriert. */
.stat + .stat::before {
  content: "";
  position: absolute;
  left: -1rem;
  top: 50%;
  transform: translateY(-50%);
  height: 2.6rem;
  width: 1px;
  background: var(--line-dark);
}
.stat .value {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 5vw, 4rem);
  font-weight: 560;
  color: var(--gold-bright);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.stat .value sup { font-size: 0.45em; vertical-align: 0.7em; margin-left: 0.06em; }
.stat .label {
  margin-top: 0.7rem;
  font-size: 0.92rem;
  color: rgba(244, 236, 221, 0.72);
  font-weight: 550;
}

/* Glow + Orbits in dunklen Sektionen */
.section--dark::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(900px 420px at 18% -20%, rgba(227, 174, 69, 0.13), transparent 60%),
    radial-gradient(700px 380px at 95% 115%, rgba(227, 174, 69, 0.09), transparent 60%);
  pointer-events: none;
}

/* ---------- Autoren ---------- */
.authors-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: clamp(1.3rem, 2.6vw, 2.2rem) clamp(1rem, 2vw, 1.6rem);
}
.author {
  text-align: center;
  transition: transform 0.4s var(--ease-out);
}
.author-avatars { display: flex; justify-content: center; align-items: center; margin: 1.6rem 0 0; }
.author-avatars .av {
  width: clamp(40px, 9vw, 50px); height: clamp(40px, 9vw, 50px);
  border-radius: 50%; overflow: hidden;
  border: 2.5px solid var(--paper); margin-left: -14px;
  box-shadow: 0 3px 10px rgba(24, 20, 16, 0.18); background: var(--paper);
  transition: transform 0.3s var(--ease-out);
}
.author-avatars .av:first-child { margin-left: 0; }
.author-avatars .av:hover { transform: translateY(-4px); z-index: 2; }
.author-avatars .av img { width: 100%; height: 100%; object-fit: cover; }

.author .pic {
  position: relative;
  border-radius: 50%;
  overflow: hidden;
  aspect-ratio: 1;
  box-shadow: var(--shadow-card);
  border: 3px solid var(--paper);
  outline: 1.5px solid var(--line);
  transition: outline-color 0.35s, transform 0.45s var(--ease-out), box-shadow 0.45s;
}
/* Porträts sind Hochformat mit Kopf im oberen Drittel – Crop nach oben
   ausrichten, damit keine Stirnen abgeschnitten werden. Ausreißer werden
   per AUTHOR_CROP-Map in main.js individuell justiert. */
.author .pic img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 12%; transition: transform 0.6s var(--ease-out); }
.author:hover .pic {
  outline-color: var(--gold);
  transform: translateY(-6px) rotate(-2deg);
  box-shadow: var(--shadow-cover);
}
.author:hover .pic img { transform: scale(1.08); }
.author .name {
  margin-top: 0.85rem;
  font-size: 0.92rem;
  font-weight: 600;
  line-height: 1.3;
}
.author .tag { font-size: 0.78rem; color: var(--ink-faint); display: block; }

/* ---------- Prozess-Schritte ---------- */
.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1.4rem, 3vw, 2.4rem);
  counter-reset: step;
  position: relative;
  z-index: 1;
}
.step {
  position: relative;
  padding-top: 1.6rem;
}
.step::before {
  counter-increment: step;
  content: "0" counter(step);
  font-family: var(--font-display);
  font-style: italic;
  font-variation-settings: "SOFT" 100, "WONK" 1;
  font-size: clamp(2.1rem, 3.4vw, 2.8rem);
  line-height: 1;
  color: var(--gold-bright);
  position: absolute;
  top: 0;
  left: 0;
}
.step h3 {
  font-size: 1.25rem;
  margin: 2.6rem 0 0.6rem;
  color: var(--cream-on-dark);
}
.step p { font-size: 0.96rem; color: rgba(244, 236, 221, 0.7); }
.step .line {
  position: absolute;
  top: 1.4rem;
  left: 3.6rem;
  right: -1.2rem;
  height: 1px;
  background: linear-gradient(90deg, var(--line-dark), transparent);
}
.step:last-child .line { display: none; }

.steps-light .step h3 { color: var(--ink); }
.steps-light .step p { color: var(--ink-soft); }
.steps-light .step::before { color: var(--gold); }

/* Zeitleiste: statt der laufenden Nummer steht die Jahreszahl aus data-jahr.
   "Heute" ist laenger als "2018", deshalb kleinerer Schriftgrad und die
   Verbindungslinie ruecken mit statt zu ueberlappen. */
.steps--jahre .step::before {
  content: attr(data-jahr);
  font-size: clamp(1.5rem, 2.3vw, 1.95rem);
  font-style: normal;
  letter-spacing: -0.01em;
}
.steps--jahre .step .line { left: 5.8rem; top: 1.05rem; }
.steps--jahre .step h3 { margin-top: 2.2rem; }

/* Zeitleiste in Karten: vier Textspalten nebeneinander lesen sich als Wand.
   Im Kasten hat jede Station einen eigenen Rand, und die Jahreszahl steht
   oben drin statt frei darueber. Auf hellem Grund sind die Karten getoent,
   sonst waeren sie unsichtbar (umgekehrt zur usp-card, die auf getoentem
   Grund steht). */
.steps--karten { gap: clamp(1rem, 2vw, 1.5rem); }
.steps--karten .step {
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.5rem 1.4rem 1.6rem;
}
.steps--karten .step::before {
  position: static;
  display: block;
  /* Luft zwischen Jahreszahl und Ueberschrift: bei 0.35rem klebten die beiden
     aneinander, die fette Zeile wirkte wie ein Teil der Zahl. */
  margin-bottom: 0.85rem;
}
.steps--karten .step h3 { margin: 0 0 0.6rem; }
.steps--karten .step .line { display: none; }

/* Fliesstext unter einer Sektion, gleiche Spaltenbreite wie der Lead. */
.prosa {
  max-width: 62ch;
  margin-top: clamp(2.4rem, 4vw, 3.4rem);
}
.prosa p {
  font-size: clamp(1rem, 1.3vw, 1.08rem);
  color: var(--ink-soft);
  line-height: 1.72;
}
.on-dark .prosa p { color: rgba(244, 236, 221, 0.78); }

.steps--six { grid-template-columns: repeat(3, 1fr); row-gap: 3rem; }
.steps--six .step:nth-child(3n) .line { display: none; }

/* ---------- Vergleichstabelle (Orbita vs. Verlag vs. Selfpublishing) ---------- */
.compare-wrap {
  overflow-x: auto;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
}
.compare {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  font-size: 1.02rem;
}
.compare th, .compare td {
  padding: 1.05rem 1.3rem;
  text-align: center;
  border-bottom: 1px solid var(--line);
}
.compare tbody tr:last-child th,
.compare tbody tr:last-child td { border-bottom: 0; }
.compare tbody th {
  text-align: left;
  font-weight: 600;
  color: var(--ink-soft);
}
.compare thead th {
  font-family: var(--font-display);
  font-size: 1.08rem;
  font-weight: 600;
  border-bottom: 1.5px solid var(--ink);
}
.compare .col-orbita { background: var(--gold-pale); }
.compare thead .col-orbita { color: var(--gold); }
.compare .ok { color: var(--gold); font-weight: 700; }
.compare .no { color: var(--ink-faint); }
.compare .note { display: block; font-size: 0.88rem; font-weight: 400; color: var(--ink-faint); margin-top: 0.25rem; }

/* ---------- Management & Agenturen ---------- */
.mgmt-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(1.4rem, 3vw, 2.4rem);
  align-items: stretch;
}
.kondi-box {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 2.2rem 2rem;
  box-shadow: var(--shadow-card);
}
.kondi-box .big {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 4.4vw, 3.6rem);
  font-weight: 560;
  color: var(--gold);
  line-height: 1;
}
.kondi-box .big small { font-size: 0.4em; color: var(--ink-soft); font-family: var(--font-body); font-weight: 550; }
.kondi-list { margin-top: 1.4rem; }
.kondi-list li {
  display: flex;
  gap: 0.8rem;
  padding-block: 0.55rem;
  font-size: 0.97rem;
  color: var(--ink-soft);
  align-items: baseline;
}
.kondi-list li::before { content: "✓"; color: var(--gold); font-weight: 700; flex: none; }
.mgmt-aside {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  justify-content: center;
}
.mgmt-aside p { color: var(--ink-soft); font-size: 0.99rem; }
.mgmt-aside .hero-ctas { margin: 0.4rem 0 0; }
.steps-light .step .line { background: linear-gradient(90deg, var(--line), transparent); }

/* ---------- Testimonials ---------- */
.testi-stage {
  position: relative;
  max-width: 880px;
  margin-inline: auto;
}

/* alle Slides im selben Grid-Feld stapeln -> Stage-Hoehe = immer das laengste
   Zitat (konstant), egal welche Slide aktiv ist -> kein Seiten-Ploppen */
.testi-track { position: relative; display: grid; }

.testi-slide {
  grid-area: 1 / 1;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(1.8rem, 4vw, 3.2rem);
  align-items: center;
  opacity: 0;
  transform: translateX(46px);
  transition: opacity 0.65s var(--ease-out), transform 0.65s var(--ease-out);
  pointer-events: none;
}
.testi-slide.is-active {
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
}

.testi-pic {
  position: relative;
  width: clamp(130px, 17vw, 190px);
  flex: none;
}
.testi-pic img {
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  object-position: 50% 14%;
  border-radius: 50%;
  box-shadow: var(--shadow-card);
  border: 4px solid var(--paper);
  outline: 1.5px solid var(--line);
}
/* Individuelle Bildausschnitte (Motive sind unterschiedlich beschnitten) */
.testi-pic img[src*="tatjana"] { object-position: 50% 22%; }
.testi-pic img[src*="sevda"] { object-position: 50% 10%; }
.testi-pic img[src*="lisa-reyes"] { object-position: 50% 12%; }
.testi-pic .orbits { inset: -16%; width: 132%; height: 132%; }

.testi-quote blockquote {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2.3vw, 1.7rem);
  font-weight: 480;
  line-height: 1.4;
  font-variation-settings: "SOFT" 80, "WONK" 0;
  margin-bottom: 1.4rem;
  text-indent: -0.42em;
}
.testi-quote cite {
  font-style: normal;
  font-size: 0.95rem;
}
.testi-quote cite strong { display: block; font-weight: 700; }
.testi-quote cite span { color: var(--ink-faint); }

.testi-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.6rem;
  margin-top: 2.6rem;
}
.testi-dots { display: flex; gap: 0.55rem; }
.testi-dots button {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--line);
  transition: background 0.3s, transform 0.3s;
}
.testi-dots button.is-active { background: var(--gold); transform: scale(1.45); }

/* ---------- Statement-Band ---------- */
.statement-band {
  padding-block: clamp(3.5rem, 7vw, 5.5rem);
  background: var(--paper-2);
  text-align: center;
}
.stmt-infinity {
  width: 54px;
  height: auto;
  color: var(--gold);
  margin-inline: auto;
  margin-bottom: 1.5rem;
}
.stmt-text {
  font-family: var(--font-display);
  font-size: clamp(1.45rem, 3vw, 2.25rem);
  font-weight: 520;
  line-height: 1.28;
  letter-spacing: -0.01em;
  max-width: 26ch;
  margin-inline: auto;
  text-wrap: balance;
}

/* ---------- FAQ ---------- */
.faq-list {
  max-width: 820px;
  margin-inline: auto;
  border-top: 1px solid var(--line);
}
.faq-item { border-bottom: 1px solid var(--line); }
.faq-q {
  width: 100%;
  display: flex;
  align-items: baseline;
  gap: 1.3rem;
  text-align: left;
  padding: 1.5rem 0.2rem;
  transition: color 0.3s;
}
.faq-q:hover { color: var(--gold); }
.faq-q .idx {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 0.95rem;
  color: var(--gold);
  flex: none;
  width: 2em;
}
.faq-q .q-text {
  font-family: var(--font-display);
  font-size: clamp(1.12rem, 1.9vw, 1.38rem);
  font-weight: 540;
  flex: 1;
  line-height: 1.3;
}
.faq-q .toggle-ic {
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1.5px solid var(--line);
  display: grid;
  place-items: center;
  align-self: center;
  transition: background 0.35s, border-color 0.35s, transform 0.45s var(--ease-out);
}
.faq-q .toggle-ic::before,
.faq-q .toggle-ic::after {
  content: "";
  position: absolute;
  width: 12px;
  height: 1.6px;
  background: currentColor;
  transition: transform 0.45s var(--ease-out);
}
.faq-q .toggle-ic::after { transform: rotate(90deg); }
.faq-item.is-open .toggle-ic { background: var(--gold); border-color: var(--gold); color: #fff; transform: rotate(135deg); }

.faq-a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.45s var(--ease-out);
}
.faq-a > div { overflow: hidden; }
.faq-a p {
  padding: 0 3.5rem 1.7rem;
  color: var(--ink-soft);
  max-width: 62ch;
  /* Text als geschlossener Block ein-/ausblenden, statt zeilenweise
     mit der wachsenden Zeilenhöhe aufzutauchen */
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 0.3s ease, transform 0.4s var(--ease-out);
}
.faq-item.is-open .faq-a { grid-template-rows: 1fr; }
.faq-item.is-open .faq-a p {
  opacity: 1;
  transform: none;
  transition: opacity 0.45s ease 0.12s, transform 0.45s var(--ease-out) 0.12s;
}

/* ---------- Finale CTA ---------- */
.cta-final { text-align: center; }
.cta-final .wrap { position: relative; z-index: 1; }
.cta-final h2 { max-width: 17ch; margin-inline: auto; margin-bottom: 1.3rem; }
.cta-final .lead { margin-inline: auto; margin-bottom: 2.4rem; }
.cta-final .hero-ctas { justify-content: center; margin-bottom: 1.6rem; }
.cta-final .alt-contact {
  font-size: 0.95rem;
  color: rgba(244, 236, 221, 0.65);
}
.cta-final .alt-contact a {
  color: var(--gold-bright);
  font-weight: 600;
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s;
}
.cta-final .alt-contact a:hover { border-color: var(--gold-bright); }

/* ---------- Footer ---------- */
.site-footer {
  background: var(--ink);
  color: rgba(244, 236, 221, 0.8);
  padding: clamp(3.5rem, 7vw, 5.5rem) 0 2rem;
  font-size: 0.95rem;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr repeat(3, 1fr);
  gap: clamp(2rem, 5vw, 4rem);
  padding-bottom: 3rem;
  border-bottom: 1px solid var(--line-dark);
}
.footer-brand .brand { color: var(--cream-on-dark); margin-bottom: 1.1rem; }
.footer-brand p { max-width: 34ch; color: rgba(244, 236, 221, 0.6); margin-bottom: 1.6rem; }
.socials { display: flex; gap: 0.7rem; }
.socials a {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--line-dark);
  display: grid;
  place-items: center;
  transition: background 0.3s, border-color 0.3s, color 0.3s, transform 0.3s;
  color: rgba(244, 236, 221, 0.75);
}
.socials a:hover { background: var(--gold); border-color: var(--gold); color: #fff; transform: translateY(-3px); }
.socials svg { width: 17px; height: 17px; }

.footer-col h2 {
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-bright);
  margin-bottom: 1.2rem;
}
.footer-col li { margin-bottom: 0.65rem; }
.footer-col a {
  color: rgba(244, 236, 221, 0.75);
  transition: color 0.25s, padding-left 0.3s var(--ease-out);
}
.footer-col a:hover { color: var(--gold-bright); padding-left: 4px; }

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  padding-top: 1.8rem;
  font-size: 0.84rem;
  color: rgba(244, 236, 221, 0.45);
}
.footer-bottom a { color: inherit; }
.footer-bottom a:hover { color: var(--gold-bright); }
.footer-bottom .legal { display: flex; gap: 1.4rem; }

/* ---------- Katalog (Bücher-Übersicht) ---------- */
.catalog-controls {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 2.4rem;
}
.catalog-controls input[type="search"],
.catalog-controls select {
  padding: 0.85em 1.3em;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--paper);
  font: inherit;
  font-size: 0.96rem;
  color: var(--ink);
}
.catalog-controls select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 2.9em;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6.5l4 4 4-4' fill='none' stroke='%23c08a28' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1.1em center;
  background-size: 1em;
  cursor: pointer;
}
.catalog-controls input[type="search"] { flex: 1; min-width: 220px; }
.catalog-controls input[type="search"]:focus,
.catalog-controls select:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-pale); }
.catalog-count { color: var(--ink-faint); font-size: 0.9rem; white-space: nowrap; }

.catalog-section { padding-top: clamp(8rem, 14vh, 10rem); }

/* Mobile: die beiden Filter-Dropdowns nebeneinander (je 50%) in EINER Reihe,
   dünner – statt 3 fetter Balken vor den Covern. */
@media (max-width: 640px) {
  .catalog-controls { gap: 0.55rem; margin-bottom: 1.5rem; }
  /* Nicht auf 50 Prozent festnageln: In Franzoesisch und Spanisch braucht
     der Filtertext bis zu 150 Pixel, sichtbar waren 112 - angezeigt wurde
     "Toutes les caté..." statt der Auswahl. Mit "auto" nehmen die Felder,
     was ihr Inhalt braucht, und rutschen bei Bedarf in die naechste Zeile. */
  .catalog-controls > .cselect,
  .catalog-controls > select { flex: 1 1 auto; min-width: 0; max-width: 100%; }
  .catalog-controls .cselect-trigger,
  .catalog-controls select { padding: 0.62em 0.9em; font-size: 0.9rem; }
  .catalog-controls select { padding-right: 2.4em; }
  .catalog-count { flex: 1 1 100%; order: 9; }
  /* Katalog-Kopf schlanker -> Cover schneller sichtbar (A6) */
  .catalog-section { padding-top: 5.5rem; }
  .catalog-section > .wrap > .section-head { margin-bottom: 1.3rem; }
  .catalog-section .section-head .lead { display: none; }
}

/* Eigenes Dropdown im shadcn-Stil (ersetzt native <select>) */
.cselect { position: relative; }
.cselect-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.7em;
  min-width: 168px;
  padding: 0.78em 1.2em;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--paper);
  font: inherit;
  font-size: 0.96rem;
  color: var(--ink);
  cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}
.cselect-trigger:hover { border-color: rgba(24, 20, 16, 0.28); }
.cselect.is-open .cselect-trigger { border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-pale); }
.cselect-value { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cselect-chev { width: 1em; height: 1em; flex: none; color: var(--gold); transition: transform 0.25s var(--ease-out); }
.cselect.is-open .cselect-chev { transform: rotate(180deg); }
.cselect-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 100%;
  width: max-content;
  max-width: min(280px, 80vw);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 12px 32px -10px rgba(24, 20, 16, 0.3), 0 2px 6px rgba(24, 20, 16, 0.08);
  padding: 0.4rem;
  z-index: 60;
  opacity: 0;
  transform: translateY(-6px) scale(0.98);
  transform-origin: top;
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s var(--ease-out);
  max-height: 320px;
  overflow-y: auto;
}
.cselect.is-open .cselect-menu { opacity: 1; transform: none; pointer-events: auto; }
.cselect-opt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8em;
  width: 100%;
  text-align: left;
  padding: 0.62em 0.8em;
  border-radius: 9px;
  font-size: 0.95rem;
  color: var(--ink);
  cursor: pointer;
  transition: background 0.14s ease;
}
.cselect-opt:hover { background: #f4f4f5; }
.cselect-opt.is-selected { font-weight: 650; }
.cselect-opt.is-selected::after {
  content: "";
  width: 1em; height: 1em; flex: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M13 4.5L6.5 11 3 7.5' fill='none' stroke='%23c08a28' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
}
.catalog-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2.6rem 1.8rem;
}
.catalog-grid .book-card { flex: none; }

/* ---------- Breadcrumb ---------- */
.breadcrumb {
  display: flex;
  gap: 0.55em;
  font-size: 0.86rem;
  color: var(--ink-faint);
  margin-bottom: 1.3rem;
  flex-wrap: wrap;
}
.breadcrumb a { font-weight: 550; }
.breadcrumb a:hover { color: var(--gold); }

/* Eingebettetes Video (Buchvorstellung/Stream) */
.video-embed {
  position: relative;
  width: 100%;
  max-width: 880px;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-cover);
  background: var(--espresso);
}
.video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ---------- Buch-Detailseite ---------- */
.price-tag {
  display: block;
  font-family: var(--font-display);
  font-size: 1.7rem;
  font-weight: 600;
  color: var(--gold);
  margin-top: 1.2rem;
}
/* Vorbesteller-Hinweis: deutlich, direkt am Preis/an den Buttons */
.preorder-flag {
  display: inline-flex;
  align-items: center;
  gap: 0.65em;
  margin-top: 1rem;
  padding: 0.65em 1.05em;
  background: var(--gold-pale);
  border: 1.5px solid var(--gold);
  border-radius: 14px;
  color: var(--ink);
  font-size: 0.95rem;
  line-height: 1.3;
}
.preorder-flag svg { width: 1.35em; height: 1.35em; flex: none; color: var(--gold); }
.preorder-flag strong { color: var(--gold); font-weight: 700; }
.buy-row { display: flex; gap: 0.9rem; flex-wrap: wrap; margin-top: 1.6rem; }
.meta-row {
  display: flex;
  gap: 0.65em;
  flex-wrap: wrap;
  color: var(--ink-faint);
  font-size: 1.02rem;
  margin-top: 1.4rem;
  align-items: baseline;
}
.kat-badge {
  display: inline-block;
  padding: 0.35em 1em;
  background: var(--gold-pale);
  color: var(--gold);
  border-radius: var(--radius-pill);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.05em;
}

/* Galerie auf Buchseiten (Rückseite, Mockups) */
.thumb-row {
  display: flex;
  gap: 0.7rem;
  justify-content: center;
  margin-top: 1.6rem;
  flex-wrap: wrap;
}
.thumb {
  width: 64px;
  aspect-ratio: 2 / 3;
  border-radius: 8px;
  overflow: hidden;
  border: 2px solid var(--line);
  background: var(--paper-3);
  transition: border-color 0.3s, transform 0.3s;
  padding: 0;
}
.thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.thumb:hover { transform: translateY(-3px); }
.thumb.is-active { border-color: var(--gold); }
.meta-row a { color: var(--ink-soft); font-weight: 600; border-bottom: 1px solid var(--line); }
.meta-row a:hover { color: var(--gold); border-color: var(--gold); }
/* Kein Kasten hinter dem Buch: die generische .page-hero figure-Regel
   (Schatten, Rahmen, overflow:hidden, Rotation) darf NICHT auf das 3D-Buch
   greifen – höhere Spezifität setzt sie zurück. */
.page-hero figure.book-figure {
  background: none;
  border-radius: 0;
  overflow: visible;
  box-shadow: none;
  -webkit-transform: none;
  transform: none;
}
/* SAFARI-FIX (macOS/WebKit): Ein Vorfahre mit overflow:hidden flacht in Safari
   den 3D-Kontext darunter ab – das 3D-Buch fällt dann zur flachen Kachel
   zusammen (in Chrome funktioniert es trotz Clipping). Nur auf den
   Buch-Detailseiten (die ein .book-figure enthalten) den Clip aufheben;
   der dekorative Radial-Gradient bleibt am Box-Rand sowieso clippt, weil
   Backgrounds nicht über die Border-Box hinauslaufen. Andere .page-hero-Seiten
   (Autor werden, Presse usw.) behalten ihr overflow:hidden. */
.page-hero:has(.book-figure) {
  overflow: visible;
}
/* Buchseiten: Spalten OBEN ausrichten, damit Breadcrumb/Titel/Untertitel NICHT
   mit der Bildhoehe mitwandern (hohes Cover vs. quadratisches Bild). Der Inhalt
   bleibt statisch, nur die Bildhoehe rechts aendert sich. */
.page-hero:has(.book-figure) .wrap { align-items: start; }
.book-figure {
  position: relative;
  /* BREITENBASIERT (WebKit-robust): Safari berechnet height:100% + width:fit-content
     bei absolut positioniertem .book3d-vol falsch -> das Cover wird massiv
     ueberdimensioniert und oben/rechts abgehackt. Die Breite steuert die Groesse,
     die Hoehe folgt dem echten Cover-Seitenverhaeltnis (img width:100%, height:auto). */
  width: min(82%, 320px);
  margin-inline: auto;
  margin-block: 0;
  /* translateZ(0) erzwingt eine eigene Compositing-Schicht und stabilisiert preserve-3d. */
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}
/* 3D ROBUST: Perspektive DIREKT ins Element-Transform backen (perspective(...)),
   nicht ueber die Eltern-perspective-Property. In echtem (headed) Chrome auf
   Windows rendert die Eltern-perspective das preserve-3d-Buch sonst fast flach
   (headless zeigt es korrekt -> truegerisch). perspective() im Transform ist
   compositing-robust und kippt auf allen Engines sichtbar. KEIN will-change
   (das erzwingt eine flache Compositing-Schicht und nimmt die 3D-Tiefe weg). */
.book-figure .book3d-vol {
  position: relative;
  display: block;
  inset: auto;
  width: 100%;
  margin-inline: 0;
  -webkit-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
  --thick: 72px;
  -webkit-transform: perspective(1400px) rotateY(-15deg);
  transform: perspective(1400px) rotateY(-15deg);
}
.book-figure .book3d-vol img {
  position: relative;
  width: 100%;
  height: auto;
  box-shadow: none;
}
/* PDP-Seitenschnitt EXAKT auf die Cover-Höhe einpassen: Die rotierte Seitenkante
   wird von der Perspektive an der vorderen (zum Betrachter zeigenden) Kante leicht
   vergrößert und würde sonst oben/unten über das Cover ragen. Der Überstand ist ein
   konstanter Anteil der Cover-Höhe (≈ Dicke / (2·Perspektive) = 46/(2·850) ≈ 2,7 %).
   Mit diesem prozentualen Inset treffen die Ecken der weißen Seiten exakt die
   Cover-Ecken – viewport-unabhängig, kein Überstand. Rechts bleibt die Buchdicke
   sichtbar. Rückdeckel zusätzlich innerhalb der Cover-Silhouette halten. */
.book-figure .book3d-pages { top: .6%; bottom: .6%; }
.book-figure .book3d-vol::after { inset: 0; }
@media (hover: hover) and (pointer: fine) {
  .book-figure:hover .book3d-vol { -webkit-transform: perspective(1400px) rotateY(-8deg); transform: perspective(1400px) rotateY(-8deg); }
}
/* Flip bei JEDEM Bildwechsel (nicht nur bei Modus-Wechsel front<->flat). Das
   implizite 100% nutzt den Ruhe-Transform der jeweiligen Klasse (front/back/flat),
   so dass die Drehung immer sauber im richtigen Zustand endet. */
.book-figure .book3d-vol.swap-flip {
  -webkit-animation: book-swap-flip 0.5s cubic-bezier(0.2, 0.7, 0.2, 1);
  animation: book-swap-flip 0.5s cubic-bezier(0.2, 0.7, 0.2, 1);
}
@-webkit-keyframes book-swap-flip { from { -webkit-transform: perspective(900px) rotateY(44deg); transform: perspective(900px) rotateY(44deg); } }
@keyframes book-swap-flip { from { -webkit-transform: perspective(900px) rotateY(44deg); transform: perspective(900px) rotateY(44deg); } }
/* Rückseite: spiegelverkehrt gekippt (Seiten/Buchrücken auf der LINKEN
   Seite), damit klar ist, dass es die Rückseite ist. */
.book-figure.is-back .book3d-vol { -webkit-transform: perspective(1400px) rotateY(15deg); transform: perspective(1400px) rotateY(15deg); }
/* Rückseite: Seitenschnitt links -> Rückdeckel-Inset auf die LINKE Seite spiegeln. */
.book-figure.is-back .book3d-vol::after { inset: 0; }
@media (hover: hover) and (pointer: fine) {
  .book-figure.is-back:hover .book3d-vol { -webkit-transform: perspective(1400px) rotateY(8deg); transform: perspective(1400px) rotateY(8deg); }
}
.book-figure.is-back .book3d-pages {
  left: 0;
  right: auto;
  -webkit-transform-origin: 0 50%;
  transform-origin: 0 50%;
  -webkit-transform: rotateY(-90deg);
  transform: rotateY(-90deg);
  border-radius: 2px 0 0 2px;
}
.book-figure.is-back .book3d-vol img {
  border-radius: 5px 2px 2px 5px;
  box-shadow: none;
}
.book-figure.is-back .book3d-vol::before {
  border-radius: 5px 2px 2px 5px;
  background: linear-gradient(270deg,
    rgba(0, 0, 0, 0.15) 0%, rgba(255, 255, 255, 0.12) 1.6%,
    rgba(0, 0, 0, 0.09) 3.6%, rgba(0, 0, 0, 0) 7%);
}

/* Galerie-Mockups (Fotos) flach und randlos zeigen – exakt so hoch wie der
   Rahmen, damit das Flachbild nie über die Vorschau-Thumbs ragt */
.book-figure.is-flat { display: flex; align-items: center; justify-content: center; }
.book-figure.is-flat .book3d-vol,
.book-figure.is-flat:hover .book3d-vol {
  -webkit-transform: none;
  transform: none;
  --thick: 0px;
  position: static;
  width: auto;
  height: 100%;
  margin: 0;
}
.book-figure.is-flat .book3d-vol::before,
.book-figure.is-flat .book3d-vol::after,
.book-figure.is-flat .book3d-pages { display: none; }
.book-figure.is-flat .book3d-vol img {
  height: auto;
  width: auto;
  max-height: 100%;
  max-width: 100%;
  border-radius: 12px;
  box-shadow: var(--shadow-cover);
}
.specs-dl {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.4rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.9rem 2rem;
  box-shadow: var(--shadow-card);
  margin: 0;
}
.specs-dl dt {
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 0.35rem;
}
.specs-dl dd { font-weight: 600; margin: 0; }
/* Specs in der Hero-Textspalte (unter den Buttons): kompaktes 2x2-Raster, das die
   sonst leere Fläche neben dem hohen 3D-Buch füllt – ohne breite Box mit Lücke. */
.specs-dl--hero {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.15rem 1.6rem;
  padding: 1.5rem 1.7rem;
  margin-top: 2.2rem;
}
.desc-flow p { margin-bottom: 1.15rem; color: var(--ink-soft); max-width: 68ch; }
/* Buch-Beschreibung „Über das Buch": dezente Karte statt loser Text, mit
   engerer Lesebreite (angenehmere Zeilenlaenge ~62 Zeichen statt zu breit). */
.book-prose {
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: clamp(1.7rem, 3.5vw, 2.8rem) clamp(1.5rem, 3.5vw, 3rem);
  max-width: 820px;
  box-shadow: 0 1px 3px rgba(24, 20, 16, 0.05);
}
.book-prose p { max-width: 62ch; }
.book-prose li { max-width: 60ch; }
.book-prose > :first-child { margin-top: 0; }
.book-prose > :last-child { margin-bottom: 0; }
.desc-flow ul { margin: 0.4rem 0 1.5rem; }
.desc-flow li {
  position: relative;
  padding-left: 1.7em;
  margin-bottom: 0.6rem;
  color: var(--ink-soft);
  max-width: 66ch;
}
.desc-flow li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--gold);
  font-weight: 700;
}

/* ---------- Autoren-Detailseite ---------- */
.author-hero-pic {
  width: min(320px, 70vw);
  aspect-ratio: 1;
  border-radius: 50%;
  object-fit: cover;
  object-position: 50% 12%;
  border: 6px solid var(--paper);
  outline: 2px solid var(--line);
  box-shadow: var(--shadow-cover);
  margin-inline: auto;
}
.social-row { display: flex; gap: 0.7rem; flex-wrap: wrap; margin-top: 1.6rem; }
.social-row a {
  display: inline-block;
  padding: 0.5em 1.15em;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-pill);
  font-size: 0.88rem;
  font-weight: 600;
  transition: background 0.3s, color 0.3s, border-color 0.3s, transform 0.3s;
}
.social-row a:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); transform: translateY(-2px); }

/* ---------- Kontakt-Formular ---------- */
.contact-form {
  gap: 1.2rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(1.6rem, 3vw, 2.6rem);
  box-shadow: var(--shadow-card);
}
.contact-form .full { grid-column: 1 / -1; }
.contact-form label {
  display: block;
  font-size: 0.84rem;
  font-weight: 650;
  margin-bottom: 0.45rem;
  color: var(--ink-soft);
}
.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: 0.85em 1.1em;
  border: 1.5px solid var(--line);
  border-radius: 12px;
  background: var(--paper);
  font: inherit;
  font-size: 0.97rem;
  color: var(--ink);
  resize: vertical;
}
.contact-form select {
  width: 100%;
  padding: 0.85em 1.1em;
  border: 1.5px solid var(--line);
  border-radius: 12px;
  background: var(--paper);
  font: inherit;
  font-size: 0.97rem;
  color: var(--ink);
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236b5f4f' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1.1em center;
  padding-right: 2.6em;
}
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-pale); }
.contact-form .form-note { font-size: 0.84rem; color: var(--ink-faint); }
.contact-form .contact-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
.contact-form .contact-fields > .full { grid-column: 1 / -1; }
.cf-turnstile { margin: 0.2rem 0; }

/* Honeypot: für Menschen unsichtbar, für Bots ausfüllbar. */
.hp-field {
  /* display:none statt Verschieben: ein nur weggeschobenes Feld füllt
     Browser-Autofill weiterhin aus und verwirft echte Anmeldungen. */
  display: none !important;
}

/* Erfolg-/Fehler-Zustand des Formulars */
.form-status { margin: 0; font-size: 0.95rem; line-height: 1.55; }
.form-status:empty { display: none; }
.form-status.is-success {
  background: var(--gold-pale, #faf3e3);
  border: 1px solid var(--gold);
  border-radius: var(--radius);
  padding: 1.4rem 1.6rem;
  color: var(--ink);
}
.form-status.is-error {
  background: #fdecec;
  border: 1px solid #e7a3a3;
  border-radius: 12px;
  padding: 0.9rem 1.1rem;
  color: #a23434;
}

/* ---------- Newsletter-Block im Footer ---------- */
.footer-news {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.6rem 2.4rem;
  padding: 0 0 2.4rem;
  margin-bottom: 2.4rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.footer-news-text h2 { font-size: 1.25rem; margin: 0 0 0.3rem; color: #fff; }
.footer-news-text p { color: rgba(255, 255, 255, 0.66); font-size: 0.95rem; max-width: 36ch; margin: 0; }
.news-form { flex: 1 1 320px; max-width: 440px; min-width: 280px; }
.news-row { display: flex; gap: 0.6rem; }
.news-row input[type="email"] {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0.8em 1.1em;
  border: 1.5px solid rgba(255, 255, 255, 0.18);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  font: inherit;
  font-size: 0.96rem;
}
.news-row input[type="email"]::placeholder { color: rgba(255, 255, 255, 0.45); }
.news-row input[type="email"]:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(201, 162, 92, 0.22); }
.news-row .btn { flex: 0 0 auto; white-space: nowrap; }
.news-status { margin: 0.7rem 0 0; font-size: 0.9rem; min-height: 1em; }
.news-status.is-success { color: #8fd6a4; }
.news-status.is-error { color: #f0a3a3; }
@media (max-width: 600px) {
  .news-row { flex-direction: column; align-items: stretch; }
  .news-row .btn { width: auto; align-self: flex-start; padding-block: 0.72em; font-size: 0.95rem; box-shadow: 0 6px 16px -10px rgba(192, 138, 40, 0.6); }
}

/* Kontaktseite: Formular + direkte Kontakte – Desktop nebeneinander,
   Mobile gestapelt (Formular oben, Kontakte voll breit darunter). */
.kontakt-mitte { max-width: 680px; margin-inline: auto; }
/* Das Formular ist KEIN eigenes Raster: das Raster macht .contact-fields. Beides
   zusammen hat die Felder in ein Viertel der Kartenbreite gedraengt, waehrend die
   rechte Haelfte leer blieb. */
.contact-form { display: block; }
.kontakt-direct-head { margin-bottom: 0.4rem; }
@media (max-width: 760px) {
  
  .kontakt-cols .mgmt-aside { border-top: 1px solid var(--line); padding-top: 1.6rem; }
}

/* ---------- Rechtstexte ---------- */
.legal-body { max-width: 760px; margin-inline: auto; }
.legal-body h2 { font-size: clamp(1.3rem, 2.2vw, 1.7rem); margin: 2.4rem 0 0.9rem; }
.legal-body h3 { font-size: 1.12rem; margin: 1.8rem 0 0.7rem; }
.legal-body p, .legal-body li { color: var(--ink-soft); margin-bottom: 0.9rem; overflow-wrap: anywhere; }
.legal-body ul { margin: 0 0 1.2rem 1.2rem; list-style: disc; }
.legal-body a { color: var(--gold); border-bottom: 1px solid transparent; }
.legal-body a:hover { border-color: var(--gold); }

@media (max-width: 1024px) {
  .catalog-grid { grid-template-columns: repeat(3, 1fr); }
  .specs-dl { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 680px) {
  .catalog-grid { grid-template-columns: repeat(2, 1fr); gap: 1.8rem 1rem; }
  
}

/* ---------- Scroll-Reveals ---------- */
.reveal {
  opacity: 0;
  transform: translateY(34px);
  transition: opacity 0.85s var(--ease-out), transform 0.85s var(--ease-out);
  transition-delay: var(--rd, 0s);
}
.reveal.is-visible { opacity: 1; transform: none; }

/* ---------- Unterseiten (Autor werden) ---------- */
.page-hero {
  position: relative;
  padding-top: clamp(7.5rem, 14vh, 10rem);
  padding-bottom: clamp(3.5rem, 7vw, 5.5rem);
  overflow: hidden;
  background:
    radial-gradient(1000px 480px at 90% -15%, rgba(227, 174, 69, 0.16), transparent 62%),
    var(--paper);
}
.page-hero .wrap {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
  position: relative;
  z-index: 1;
}
.page-hero figure {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-cover);
  transform: rotate(1.6deg);
}
.page-hero figure img { width: 100%; height: 100%; object-fit: cover; }

.benefit-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.2rem, 2.4vw, 2rem);
}

.format-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.2rem, 2.4vw, 2rem);
}
.format-card {
  background: var(--espresso-2);
  border: 1px solid var(--line-dark);
  border-radius: var(--radius);
  padding: 2.2rem 1.9rem;
  position: relative;
  z-index: 1;
  transition: transform 0.45s var(--ease-out), border-color 0.45s;
}
.format-card:hover { transform: translateY(-7px); border-color: rgba(227, 174, 69, 0.5); }
.format-card .icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: rgba(227, 174, 69, 0.13);
  display: grid;
  place-items: center;
  margin-bottom: 1.4rem;
  color: var(--gold-bright);
}
.format-card .icon svg { width: 26px; height: 26px; }
.format-card h3 { color: var(--cream-on-dark); font-size: 1.3rem; margin-bottom: 0.7rem; }
.format-card p { color: rgba(244, 236, 221, 0.7); font-size: 0.97rem; }

.dream-band {
  background: var(--paper-2);
}
.dream-band .wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.dream-list li {
  display: flex;
  gap: 1rem;
  padding-block: 1.05rem;
  border-bottom: 1px solid var(--line);
  align-items: baseline;
}
.dream-list li:last-child { border-bottom: 0; }
.dream-list .star { color: var(--gold); flex: none; font-size: 1.1rem; }
.dream-list strong { font-weight: 650; }
.dream-list span { color: var(--ink-soft); }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .hero .wrap, .page-hero .wrap { grid-template-columns: 1fr; }
  .hero-stage { height: clamp(330px, 52vw, 460px); margin-top: 1rem; }
  .cover-fan { margin-left: 0; }
  .usp-grid, .benefit-grid, .format-grid { grid-template-columns: repeat(2, 1fr); }
  .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 2.6rem 1rem; }
  .stat + .stat::before { display: none; }
  .steps, .steps--six { grid-template-columns: repeat(2, 1fr); }
  .mgmt-grid { grid-template-columns: 1fr; }
  .step .line { display: none; }
  .authors-grid { grid-template-columns: repeat(4, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

.nav-more { display: none; }

@media (max-width: 1000px) {
  .main-nav {
    position: fixed;
    inset: 0;
    /* z-index ÜBER dem Körnungs-Overlay (9999), sonst wirkt das Menü
       "verschleiert"/transparent. Voll deckend. */
    z-index: 10000;
    background: var(--paper);
    min-height: 100dvh;
    flex-direction: column;
    /* IMMER oben-bündig + scrollbar -> kein Eintrag wird je abgeschnitten,
       auch wenn das Menü höher als der Bildschirm ist (alle Links erreichbar).
       (safe center hat den oberen Teil verdeckt.) */
    justify-content: flex-start;
    align-items: center;
    gap: 1.1rem;
    padding: 4.8rem 2rem 2.4rem;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    transform: translateX(100%);
    opacity: 1;
    visibility: hidden;
    transition: transform 0.42s var(--ease-out), visibility 0s linear 0.42s;
  }
  body.nav-open { overflow: hidden; }
  body.nav-open .main-nav {
    transform: translateX(0);
    visibility: visible;
    transition: transform 0.42s var(--ease-out);
  }
  .main-nav a:not(.btn) { font-size: 1.32rem; font-family: var(--font-display); font-weight: 560; }
  .main-nav .lang-switch { margin-block: 0.2rem; }
  .main-nav .btn { margin-top: 0.5rem; }
  .nav-toggle { display: block; z-index: 10001; }

  /* Unterseiten unter einem feinen Trenner */
  .nav-more {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.7rem;
    margin-top: 1.2rem;
    padding-top: 1.2rem;
    border-top: 1px solid var(--line);
    width: min(280px, 80%);
  }
  .nav-more a {
    font-size: 1.02rem;
    color: var(--ink-soft);
    font-weight: 550;
  }
  .nav-more a:hover { color: var(--gold); }
}

@media (max-width: 680px) {
  body { font-size: 1rem; }
  .usp-grid, .benefit-grid, .format-grid, .steps, .steps--six { grid-template-columns: 1fr; }
  .authors-grid { grid-template-columns: repeat(3, 1fr); }
  .author:nth-child(even) { transform: none; }
  .testi-slide { grid-template-columns: 1fr; text-align: center; justify-items: center; }
  .faq-a p { padding-left: 0.2rem; }
  .footer-grid { grid-template-columns: 1fr; }
  .dream-band .wrap { grid-template-columns: 1fr; }
  .hero-proof { flex-wrap: wrap; }
}

/* ---------- Mobile-Feinschliff (Header, Produktseite, CTAs) ---------- */
@media (max-width: 680px) {
  /* Kompakterer Header */
  .site-header { padding-block: 0.7rem; }
  .site-header.is-scrolled { padding-block: 0.5rem; }
  .brand { font-size: 1.1rem; gap: 0.5rem; }
  .brand .logo-mark { width: 44px; height: 20px; }

  /* FAQ: weniger Seiten-Padding, damit Text nicht eingequetscht wirkt */
  .faq-q { gap: 0.8rem; }
  .faq-a p { padding: 0 0 1.4rem; }

  /* Produkt-Detailseite: Bild zuerst (oben), dann Titel/Preis/Buttons */
  .page-hero:has(.book-figure) .wrap { display: flex; flex-direction: column; }
  .page-hero:has(.book-figure) .wrap > div:last-child { order: -1; width: 100%; }
  .book-figure { width: min(60%, 250px); }
  .book-figure .book3d-vol { --thick: 36px; }
  /* Inset an die dünnere Mobile-Dicke angepasst (36/(2·850) ≈ 2,1 %), kein Überstand. */
  .book-figure .book3d-pages { top: .6%; bottom: .6%; }
  /* Galerie-Thumbs als wischbare Reihe statt umbrechend */
  .thumb-row { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; scrollbar-width: none; padding-bottom: 4px; }
  .thumb-row::-webkit-scrollbar { display: none; }
  .thumb { flex: 0 0 auto; width: 56px; }
  /* Datum nicht mit dümpelndem Mittelpunkt umbrechen lassen */
  .meta-row { gap: 0.3em 0.6em; font-size: 0.98rem; }
  .meta-row .sep { display: none; }
  /* Buy-Buttons volle Breite, gut tippbar */
  .buy-row { gap: 0.7rem; }
  .buy-row .btn { width: 100%; justify-content: center; }
  .price-tag { font-size: 1.9rem; }

  /* Katalog-Filter (Bücher-Seite) sauber stapeln: Suche volle Breite,
     darunter Kategorie + Sortierung nebeneinander, Treffer-Zahl darunter */
  .catalog-controls { gap: 0.65rem; }
  .catalog-controls input[type="search"] { flex: 1 1 100%; min-width: 0; width: 100%; }
  /* Kategorie + Sortierung nebeneinander, solange der Text hineinpasst.
     NICHT auf 50% festnageln: Der fruehere Kommentar hier hielt fest, dass
     "Alle Kategorien"/"Neueste zuerst" ab 390px einzeilig bleiben - das gilt
     fuer Deutsch und Englisch. Franzoesisch ("Toutes les catégories", 141px)
     und Spanisch ("Más recientes primero", 150px) brauchen mehr als die
     112px, die von der Haelfte uebrig bleiben; angezeigt wurde dort
     "Toutes les caté...". Mit auto rutscht das zweite Feld bei Bedarf in die
     naechste Zeile, statt seinen Inhalt abzuschneiden. */
  .catalog-controls .cselect { flex: 1 1 auto; min-width: 0; max-width: 100%; }
  .catalog-controls .cselect-trigger { width: 100%; min-width: 0; padding: 0.62em 0.9em; font-size: 0.92rem; }
  .catalog-count { flex: 1 1 100%; text-align: left; }
}

/* Sektions-CTA ("Alle Bücher / Autoren") – konsistente Ausrichtung:
   folgt der Sektion (links bzw. zentriert), auf Mobile immer zentriert */
.section-cta { margin-top: clamp(2.4rem, 4vw, 3.4rem); }
.section-cta--center { text-align: center; }
/* Direkt nach einem Regal: das Regal traegt unten schon 2.2rem Polsterung fuer
   die Bildlaufleiste. Ohne diese Regel summiert sich beides auf 89 px, und der
   Knopf steht sichtbar abgesetzt vom Inhalt, auf den er sich bezieht. */
.shelf + .section-cta { margin-top: clamp(1.3rem, 2.2vw, 1.9rem); }
@media (max-width: 680px) {
  .section-cta { text-align: center; }
}

/* Logo-Signet im Hero.
   Das Foto ist von Anfang an da. Der Film legt sich nur darüber, wenn der
   Bereich wirklich im Blick ist, läuft einmal und blendet zurück (main.js).
   Auf dem Handy liegt der Hero unter dem Falz, ein Film beim Laden wäre dort
   vorbei, bevor jemand hinsieht.

   Warum der Film seinen dunklen Grund behält: Sein Kern ist Licht, ein
   Leuchtpunkt zieht die Bahn. Auf hellem Papier lässt sich Licht nicht
   darstellen, ein freigestellter Leuchtkern wird dort zum schwarzen Fleck.
   Er läuft deshalb im selben Rahmen, in dem danach das Foto steht: gleiche
   runde Ecken, gleicher Schatten.

   Läuft kein JavaScript oder lädt der Film nicht, bleibt schlicht das Foto
   stehen. Es gibt keinen Zustand, in dem der Besucher auf etwas wartet. */
.hero-signet {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #1d1710;
  pointer-events: none;
  z-index: 2;
  opacity: 0;
  visibility: hidden;
  transition: opacity .55s ease, visibility .55s;
}
.hero-signet.laeuft { opacity: 1; visibility: visible; }
@media (prefers-reduced-motion: reduce) { .hero-signet { display: none; } }

/* Eigenes Auswahlfeld: das native <select> klappt eine Liste im Stil des
   Betriebssystems auf, die mit der Seite nichts zu tun hat. Das <select> bleibt
   als Grundlage erhalten und funktioniert ohne JavaScript weiter; erst wenn das
   Skript die eigene Liste aufgebaut hat, wird es verborgen.
   ACHTUNG: Dieser Block darf beim Austauschen anderer Abschnitte nicht mit
   herausgeschnitten werden. Am 27.08.2026 genau das passiert, danach stand die
   Liste dauerhaft offen im Textfluss. */
.wahl { position: relative; }
.wahl select.ist-ersetzt {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  height: 0;
  width: 0;
  overflow: hidden;
}
.wahl-knopf {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8em;
  padding: 0.85em 1.1em;
  border: 1.5px solid var(--line);
  border-radius: 12px;
  background: var(--paper);
  font: inherit;
  font-size: 0.97rem;
  color: var(--ink);
  cursor: pointer;
  text-align: left;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.wahl-knopf:hover { border-color: #cbbfa9; }
.wahl-knopf[aria-expanded="true"] {
  border-color: #b8860b;
  box-shadow: 0 0 0 3px rgba(184, 134, 11, 0.14);
}
.wahl-pfeil { flex: none; transition: transform .18s ease; }
.wahl-knopf[aria-expanded="true"] .wahl-pfeil { transform: rotate(180deg); }
.wahl-liste {
  position: absolute;
  z-index: 40;
  left: 0;
  right: 0;
  margin: 0.4rem 0 0;
  padding: 0.4rem;
  list-style: none;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 18px 40px rgba(26, 20, 14, 0.16), 0 2px 6px rgba(26, 20, 14, 0.08);
  max-height: 17rem;
  overflow-y: auto;
  opacity: 0;
  transform: translateY(-4px);
  visibility: hidden;
  transition: opacity .16s ease, transform .16s ease, visibility .16s;
}
.wahl-liste.offen { opacity: 1; transform: translateY(0); visibility: visible; }
.wahl-liste li {
  padding: 0.62em 0.8em;
  border-radius: 9px;
  cursor: pointer;
  font-size: 0.96rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6em;
  color: var(--ink);
}
.wahl-liste li:hover, .wahl-liste li.markiert { background: #f4f1ea; }
.wahl-liste li[aria-selected="true"] { font-weight: 600; }
.wahl-haken { opacity: 0; flex: none; }
.wahl-liste li[aria-selected="true"] .wahl-haken { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .wahl-liste, .wahl-pfeil { transition: none; }
}

/* ---------- Reduzierte Bewegung ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001s !important;
  }
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; }
}

/* ---------- Eingebettete FormFlow-Formulare ---------- */
.form-embed {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  max-width: 760px;
  margin-inline: auto;
}
.form-embed iframe {
  display: block;
  width: 100%;
  min-height: 660px;
  border: 0;
}
.form-embed-fallback {
  margin-top: 1.1rem;
  text-align: center;
  font-size: 0.95rem;
  color: var(--ink-soft);
}
.form-embed-fallback a {
  color: var(--gold);
  font-weight: 600;
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s;
}
.form-embed-fallback a:hover { border-color: var(--gold); }
.on-dark .form-embed-fallback { color: rgba(244, 236, 221, 0.7); }
.on-dark .form-embed-fallback a { color: var(--gold-bright); }

/* Kontaktseite: Embed-Spalte (iframe + Fallback) als ein Grid-Kind */
.form-embed-col { min-width: 0; }
.form-embed-col .form-embed { max-width: none; }
@media (max-width: 760px) {
  .contact-grid { grid-template-columns: 1fr !important; }
}

/* Verlagsvorschau-Download (Buchhandlungen) */
.vorschau-list { display: grid; gap: 1rem; max-width: 640px; }
.vorschau-card { display: flex; align-items: center; gap: 1.1rem; padding: 1.05rem 1.4rem; background: var(--paper); border: 1.5px solid var(--line); border-radius: 16px; box-shadow: var(--shadow-card); transition: border-color 0.2s, box-shadow 0.2s; }
.vorschau-card:hover { border-color: var(--gold); box-shadow: 0 6px 20px rgba(16,24,40,0.08); }
.vorschau-badge { flex: none; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gold); background: var(--gold-pale); padding: 0.35em 0.7em; border-radius: 999px; }
.vorschau-badge.is-old { color: var(--ink-faint); background: var(--line); }
.vorschau-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.vorschau-meta strong { font-weight: 650; }
.vorschau-meta span { font-size: 0.85rem; color: var(--ink-faint); }
.vorschau-dl { width: 22px; height: 22px; flex: none; color: var(--gold); }

/* ===== Cookie-Consent (self-hosted, design-angepasst) ===== */
.cc-banner {
  position: fixed; left: 1rem; right: 1rem; bottom: 1rem; z-index: 10050;
  max-width: 940px; margin-inline: auto;
  background: var(--paper); border: 1px solid var(--line); border-radius: 18px;
  box-shadow: 0 14px 44px -12px rgba(24,20,16,0.32);
  transform: translateY(150%); opacity: 0;
  transition: transform 0.45s var(--ease-out), opacity 0.45s var(--ease-out);
}
.cc-banner.is-on { transform: translateY(0); opacity: 1; }
.cc-banner-in { display: flex; align-items: center; gap: 1.4rem; padding: 1.15rem 1.4rem; flex-wrap: wrap; }
.cc-banner-txt { flex: 1 1 320px; font-size: 0.92rem; line-height: 1.5; color: var(--ink-soft); margin: 0; }
.cc-banner-txt a { color: var(--gold); text-decoration: underline; }
.cc-banner-btns { display: flex; gap: 0.6rem; flex-wrap: wrap; }

.cc-btn {
  font: inherit; font-size: 0.88rem; font-weight: 600; padding: 0.6rem 1.1rem;
  border-radius: 999px; cursor: pointer; border: 1px solid var(--line);
  background: var(--paper-2); color: var(--ink);
  transition: background 0.18s, border-color 0.18s, color 0.18s;
}
.cc-btn:hover { background: var(--line); }
.cc-btn--gold { background: var(--gold); border-color: var(--gold); color: #fff; }
.cc-btn--gold:hover { background: var(--gold-bright); border-color: var(--gold-bright); }
.cc-btn--ghost { background: transparent; }
.cc-btn--ghost:hover { background: var(--paper-2); }

.cc-modal {
  position: fixed; inset: 0; z-index: 10060; display: flex; align-items: center;
  justify-content: center; padding: 1.2rem; background: rgba(24,20,16,0.45);
  opacity: 0; visibility: hidden;
  transition: opacity 0.3s var(--ease-out), visibility 0s linear 0.3s;
}
.cc-modal.is-on { opacity: 1; visibility: visible; transition: opacity 0.3s var(--ease-out); }
.cc-modal-card {
  position: relative; background: var(--paper); border-radius: 20px;
  box-shadow: 0 24px 60px -16px rgba(24,20,16,0.5);
  width: min(560px, 100%); max-height: 88vh; overflow-y: auto; padding: 2rem 1.8rem 1.6rem;
  transform: translateY(14px) scale(0.98); transition: transform 0.32s var(--ease-out);
}
.cc-modal.is-on .cc-modal-card { transform: none; }
.cc-close {
  position: absolute; top: 0.9rem; right: 1rem; width: 36px; height: 36px; border: 0;
  background: transparent; font-size: 1.8rem; line-height: 1; color: var(--ink-faint);
  cursor: pointer; border-radius: 50%;
}
.cc-close:hover { background: var(--paper-2); color: var(--ink); }
.cc-modal-h { font-family: var(--font-display); font-size: 1.5rem; margin: 0 0 0.5rem; }
.cc-modal-lead { color: var(--ink-soft); font-size: 0.95rem; margin: 0 0 1.4rem; }

.cc-row {
  display: flex; align-items: flex-start; gap: 1rem; justify-content: space-between;
  padding: 1rem 0; border-top: 1px solid var(--line);
}
.cc-row-txt { display: flex; flex-direction: column; gap: 0.25rem; }
.cc-row-h { font-weight: 650; font-size: 1rem; }
.cc-row-d { font-size: 0.86rem; color: var(--ink-soft); line-height: 1.45; }
.cc-switch { position: relative; flex: none; width: 46px; height: 26px; }
.cc-switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.cc-slider { position: absolute; inset: 0; border-radius: 999px; background: var(--line); transition: background 0.2s; pointer-events: none; }
.cc-slider::before {
  content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px;
  border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.25); transition: transform 0.2s;
}
.cc-switch input:checked + .cc-slider { background: var(--gold); }
.cc-switch input:checked + .cc-slider::before { transform: translateX(20px); }
.cc-switch input:disabled + .cc-slider { opacity: 0.55; }
.cc-switch input:disabled { cursor: not-allowed; }
.cc-modal-btns { display: flex; gap: 0.6rem; flex-wrap: wrap; margin-top: 1.4rem; }

.cc-embed { position: relative; }
.cc-embed-ph {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 0.9rem; text-align: center; padding: 1.2rem;
  background: var(--espresso); color: #f4ece0; border-radius: 14px;
}
.cc-embed-ph p { margin: 0; font-size: 0.9rem; max-width: 30ch; }

@media (max-width: 560px) {
  .cc-banner-btns { width: 100%; }
  .cc-banner-btns .cc-btn { flex: 1 1 auto; }
  .cc-modal-btns .cc-btn { flex: 1 1 auto; }
}


/* ===== Skip-Link (A11y: WCAG 2.4.1 Bypass Blocks) ===== */
.skip-link {
  position: absolute; left: 0.75rem; top: 0.75rem; z-index: 10100;
  background: var(--gold); color: #fff; font-weight: 600;
  padding: 0.6rem 1.1rem; border-radius: 999px;
  transform: translateY(-200%); transition: transform 0.18s var(--ease-out);
}
.skip-link:focus { transform: translateY(0); outline: 3px solid var(--ink); outline-offset: 2px; }
main:focus { outline: none; }


/* ===== Screenreader-only (A11y: unsichtbare Sektions-Überschriften für die Heading-Struktur) ===== */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* Buecher-UEBERSICHT (.catalog-grid): einheitliche Cover-Hoehe. NICHT das
   Homepage-Karussell (.shelf) anfassen - dort bricht height:100% die 3D-
   Ausrichtung (Rueckdeckel steht ueber).
   WICHTIG: width MUSS fit-content bleiben (nie auto!) - der vol ist absolut
   mit inset:0 positioniert, width:auto spannt ihn auf volle Boxbreite und
   Rueckdeckel (::after) + Seitenblock (.book3d-pages) ragen rechts neben dem
   Cover raus. img height:100% liefert die einheitliche Hoehe, fit-content
   laesst den vol das Bild exakt umschliessen. */
.catalog-grid .book-card .cover { aspect-ratio: 0.78; }
.catalog-grid .book-card .cover .book3d-vol { height: 100%; width: fit-content; }
.catalog-grid .book-card .cover .book3d-vol img { height: 100%; width: auto; max-width: none; }

/* ============================================================
   BLOG / MAGAZIN (/blog) – Uebersicht + Artikelseiten
   ============================================================ */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.6rem;
}
.blog-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform 0.45s var(--ease-out), box-shadow 0.45s, border-color 0.45s;
}
.blog-card:hover {
  transform: translateY(-7px);
  box-shadow: var(--shadow-card);
  border-color: rgba(192, 138, 40, 0.45);
}
.blog-card .blog-thumb { aspect-ratio: 16 / 9; overflow: hidden; background: var(--paper-2); }
.blog-card .blog-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.6s var(--ease-out); }
.blog-card:hover .blog-thumb img { transform: scale(1.045); }
.blog-card .body { padding: 1.4rem 1.5rem 1.5rem; display: flex; flex-direction: column; gap: 0.6rem; flex: 1; }
.blog-card .cat { font-family: var(--font-display); font-style: italic; font-size: 0.92rem; color: var(--gold); }
.blog-card h2 { font-size: 1.18rem; line-height: 1.32; }
/* Stretched Link: ganze Karte klickbar (cursor kommt vom <a>) */
.blog-card h2 a { color: inherit; text-decoration: none; }
.blog-card h2 a::after { content: ""; position: absolute; inset: 0; }
.blog-card p { color: var(--ink-soft); font-size: 0.97rem; line-height: 1.55; }
.blog-card .meta { margin-top: auto; padding-top: 0.4rem; font-size: 0.85rem; color: var(--ink-faint); }

/* ---------- Artikel ---------- */
.article-wrap { max-width: 780px; margin-inline: auto; }
.crumbs { font-size: 0.88rem; color: var(--ink-faint); margin-bottom: 1.1rem; }
.crumbs a { color: inherit; text-decoration: none; }
.crumbs a:hover { color: var(--gold); }
.article-meta { display: flex; flex-wrap: wrap; gap: 0.4rem 1.1rem; font-size: 0.9rem; color: var(--ink-faint); margin-top: 1.1rem; }
.article-hero-img { border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-card); margin-top: clamp(1.6rem, 3vw, 2.4rem); }
.article-hero-img img { width: 100%; height: auto; display: block; }
.article-answer {
  background: var(--gold-pale);
  border: 1px solid rgba(192, 138, 40, 0.28);
  border-radius: var(--radius);
  padding: 1.4rem 1.6rem;
  margin-bottom: clamp(1.8rem, 3vw, 2.4rem);
}
.article-answer p { color: var(--ink); line-height: 1.65; }
.article-answer p strong { color: var(--gold); }
.article-body > * + * { margin-top: 1.05em; }
.article-body h2 { font-size: clamp(1.35rem, 2.2vw, 1.7rem); line-height: 1.25; margin-top: 2.1em; }
.article-body h3 { font-size: 1.15rem; margin-top: 1.7em; }
.article-body p, .article-body li { color: var(--ink-soft); line-height: 1.72; }
.article-body ul, .article-body ol { padding-left: 1.35rem; display: grid; gap: 0.5rem; }
.article-body li::marker { color: var(--gold); }
.article-body a { color: var(--gold); font-weight: 600; text-decoration: underline; text-decoration-color: rgba(192, 138, 40, 0.4); text-underline-offset: 3px; }
.article-body a:hover { text-decoration-color: var(--gold); }
.article-body strong { color: var(--ink); }
.article-body blockquote {
  border-left: 3px solid var(--gold);
  padding: 0.35rem 0 0.35rem 1.2rem;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.12rem;
  color: var(--ink);
}
.article-faq { margin-top: clamp(2.4rem, 4vw, 3.2rem); }
.article-faq h2 { margin-bottom: 0.4em; }
.article-faq h3 { font-size: 1.08rem; margin-top: 1.6em; }
.article-faq p { color: var(--ink-soft); line-height: 1.7; margin-top: 0.5em; }
.article-cta {
  background: var(--espresso);
  border-radius: var(--radius);
  padding: clamp(1.8rem, 3vw, 2.4rem);
  margin-top: clamp(2.6rem, 4vw, 3.4rem);
}
.article-cta h2 { color: var(--cream-on-dark); font-size: 1.35rem; margin-bottom: 0.5rem; }
.article-cta p { color: rgba(244, 236, 221, 0.78); line-height: 1.6; margin-bottom: 1.2rem; }

@media (max-width: 980px) {
  .blog-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .blog-grid { grid-template-columns: 1fr; }
}

/* ================================================================
   Warenkorb – Kaufbereich auf der Buchseite und die Schublade
   ================================================================
   Der Kaufbereich ersetzt bei eigenen, lieferbaren Titeln die
   Händler-Links. Aufbau nach der Conversion-Analyse vom 06.08.2026:
   ein einziger Kaufknopf, Menge daneben, darunter die drei Punkte,
   die den Kauf hier gegenüber Amazon begründen.
   Zuerst mobil gedacht: unter 560 px steht der Knopf über die volle
   Breite, weil zwei Drittel der Besucher vom Handy kommen.
   ---------------------------------------------------------------- */

.buybox { margin-top: 1.4rem; }

.buybox-row {
  display: flex;
  align-items: stretch;
  gap: 0.85rem;
  flex-wrap: wrap;
}

.qty {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: #fff;
  overflow: hidden;
  flex: none;
}
.qty button {
  width: 2.9rem;
  height: 3.1rem;
  border: 0;
  background: transparent;
  color: var(--ink);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.18s, color 0.18s;
}
.qty button:hover { background: var(--paper-3); color: var(--gold); }
.qty-input {
  width: 2.6rem;
  height: 3.1rem;
  border: 0;
  text-align: center;
  font: inherit;
  font-weight: 600;
  color: var(--ink);
  background: transparent;
  -moz-appearance: textfield;
  appearance: textfield;
}
.qty-input::-webkit-outer-spin-button,
.qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.qty--sm button { width: 2.1rem; height: 2.2rem; font-size: 1.05rem; }
.qty--sm .qty-input { width: 2.1rem; height: 2.2rem; font-size: 0.92rem; }

.btn--cart {
  flex: 1 1 15rem;
  justify-content: center;
  min-height: 3.1rem;
  cursor: pointer;
  border: 0;
  font-family: inherit;
}
.btn--cart.is-busy { opacity: 0.65; cursor: progress; }
.btn--cart:disabled { transform: none; }

.price-note {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.88rem;
  color: var(--ink-faint);
}

.stock--low {
  margin-top: 0.7rem;
  font-size: 0.92rem;
  font-weight: 600;
  color: #a8531b;
}

.buy-trust {
  list-style: none;
  margin-top: 1.1rem;
  display: grid;
  gap: 0.42rem;
}
.buy-trust li {
  position: relative;
  padding-left: 1.5rem;
  font-size: 0.93rem;
  color: var(--ink-soft);
}
.buy-trust li::before {
  content: "";
  position: absolute;
  left: 0.15rem;
  top: 0.42em;
  width: 0.62rem;
  height: 0.34rem;
  border-left: 2px solid var(--gold);
  border-bottom: 2px solid var(--gold);
  transform: rotate(-45deg);
}

/* Ausweich-Schaltflächen im Vergriffen-Fall: kleiner als der Kaufknopf,
   aber echte Schaltflächen. Als Fließtext-Links klebten die Namen aneinander
   ("AmazonThalia") und waren nicht als Knopf zu erkennen. */
.buy-row--alt { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 0.7rem; }
.btn--klein { padding: 0.62em 1.25em; font-size: 0.9rem; }

.buybox--soldout .sold-out {
  padding: 0.9rem 1.1rem;
  border-radius: 14px;
  background: var(--paper-3);
  color: var(--ink);
  font-size: 0.98rem;
}
.sold-out-alt {
  margin-top: 0.6rem;
  font-size: 0.92rem;
  color: var(--ink-soft);
}
.sold-out-alt a { color: var(--ink-soft); text-decoration: underline; }
.sold-out-alt a:hover { color: var(--gold); }

/* ---------- Knopf in der Kopfzeile ---------- */

.cart-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  margin-left: 0.6rem;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
  flex: none;
}
.cart-btn:hover { background: var(--paper-3); color: var(--gold); border-color: var(--gold); }
.cart-btn svg { width: 1.2rem; height: 1.2rem; }
.cart-count {
  position: absolute;
  top: -0.25rem;
  right: -0.25rem;
  min-width: 1.28rem;
  height: 1.28rem;
  padding: 0 0.3rem;
  border-radius: var(--radius-pill);
  background: var(--gold);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.28rem;
  text-align: center;
}

/* ---------- Die Schublade ---------- */

/* Über der Körnung (body::after, 9999) UND über dem Cookie-Hinweis (10050).
   Gemessen am 11.08.2026: mit dem naheliegenden z-index 200 lag der Hinweis
   über dem Fußbereich der Schublade - ein Neubesucher hatte das Buch im Korb
   und sah den Knopf "Zur Kasse" nicht. */
.cart-drawer { position: fixed; inset: 0; z-index: 10060; }
.cart-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(24, 20, 16, 0.45);
  opacity: 0;
  transition: opacity 0.26s var(--ease-out);
}
.cart-drawer.is-open .cart-backdrop { opacity: 1; }

.cart-panel {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: min(29rem, 100%);
  display: flex;
  flex-direction: column;
  background: var(--paper);
  box-shadow: -18px 0 48px -20px rgba(24, 20, 16, 0.5);
  transform: translateX(100%);
  transition: transform 0.28s var(--ease-out);
}
.cart-drawer.is-open .cart-panel { transform: translateX(0); }

body.cart-open { overflow: hidden; }

/* Solange der Warenkorb offen ist, weicht der Cookie-Hinweis aus. Er ist damit
   nicht erledigt, sondern nur nicht gleichzeitig sichtbar: sobald der
   Warenkorb zugeht, steht er wieder da, und ohne Zustimmung wird weiterhin
   kein optionales Skript geladen. */
body.cart-open .cc-banner {
  transform: translateY(150%);
  opacity: 0;
  pointer-events: none;
}

.cart-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.3rem 1.4rem 1rem;
  border-bottom: 1px solid var(--line);
}
.cart-head h2 { font-family: var(--font-display); font-size: 1.32rem; font-weight: 600; }
.cart-close {
  width: 2.3rem; height: 2.3rem;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: 50%;
  background: transparent; color: var(--ink-soft);
  cursor: pointer; transition: background 0.18s, color 0.18s;
}
.cart-close:hover { background: var(--paper-3); color: var(--ink); }
.cart-close svg { width: 1.1rem; height: 1.1rem; }

.cart-body { flex: 1; overflow-y: auto; padding: 1rem 1.4rem; }
.cart-empty { color: var(--ink-faint); padding: 2rem 0; text-align: center; }

.cart-lines { list-style: none; display: grid; gap: 1.1rem; }
.cart-line {
  display: grid;
  grid-template-columns: 3.4rem 1fr auto;
  gap: 0.85rem;
  align-items: start;
  padding-bottom: 1.1rem;
  border-bottom: 1px solid var(--line);
}
.cart-line:last-child { border-bottom: 0; padding-bottom: 0; }
.cart-line-img {
  display: block;
  width: 3.4rem;
  height: 4.8rem;
  object-fit: cover;
  border-radius: 5px;
  background: var(--paper-3);
  box-shadow: 0 2px 8px -3px rgba(24, 20, 16, 0.35);
}
/* min-width: 0 – ohne das sprengt ein langer Titel die Spalte nach rechts
   aus dem Bild (Raster-Elemente schrumpfen sonst nicht unter ihre
   Mindest-Inhaltsbreite). */
.cart-line-text { min-width: 0; }
.cart-line-title {
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1.35;
  overflow-wrap: break-word;
}
.cart-line-price { margin: 0.15rem 0 0.5rem; font-size: 0.85rem; color: var(--ink-faint); }
.cart-line-side { text-align: right; display: grid; gap: 0.45rem; justify-items: end; }
.cart-line-sum { font-weight: 700; font-size: 0.98rem; white-space: nowrap; }
.cart-line-del {
  border: 0; background: transparent; padding: 0;
  font: inherit; font-size: 0.82rem; color: var(--ink-faint);
  text-decoration: underline; cursor: pointer;
}
.cart-line-del:hover { color: #a8531b; }

.cart-foot { padding: 1.1rem 1.4rem 1.5rem; border-top: 1px solid var(--line); background: var(--paper-2); }
.cart-foot:empty { display: none; }
.cart-sum { display: flex; justify-content: space-between; align-items: baseline; font-size: 1.02rem; }
.cart-sum strong { font-family: var(--font-display); font-size: 1.4rem; color: var(--gold); }
.cart-sum--klein { margin-top: 0.15rem; font-size: 0.85rem; color: var(--ink-faint); }
.cart-note { margin: 0.35rem 0 0.9rem; font-size: 0.85rem; color: var(--ink-faint); }
.btn--wide { display: flex; width: 100%; justify-content: center; }
.cart-weiter {
  display: block; width: 100%; margin-top: 0.7rem; padding: 0.5rem;
  border: 0; background: transparent; font: inherit; font-size: 0.9rem;
  color: var(--ink-soft); text-decoration: underline; cursor: pointer;
}
.cart-weiter:hover { color: var(--gold); }

/* ---------- Meldung ---------- */

.cart-toast {
  position: fixed;
  left: 50%;
  bottom: 1.6rem;
  transform: translate(-50%, 1.5rem);
  z-index: 10070;
  max-width: min(26rem, calc(100vw - 2rem));
  padding: 0.85rem 1.3rem;
  border-radius: var(--radius-pill);
  background: var(--espresso);
  color: var(--cream-on-dark);
  font-size: 0.93rem;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s var(--ease-out), transform 0.25s var(--ease-out);
}
.cart-toast.is-visible { opacity: 1; transform: translate(-50%, 0); }
.cart-toast--fehler { background: #8c2f14; }
/* Bei offener Schublade nach oben ausweichen, damit die Meldung nicht auf dem
   Knopf "Zur Kasse" liegt. */
.cart-toast--oben { top: 1.2rem; bottom: auto; transform: translate(-50%, -1.5rem); }
.cart-toast--oben.is-visible { transform: translate(-50%, 0); }

@media (max-width: 560px) {
  .buybox-row { gap: 0.6rem; }
  .btn--cart { flex: 1 1 100%; }
  .cart-panel { width: 100%; }
  .cart-toast { bottom: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  .cart-panel, .cart-backdrop, .cart-toast { transition: none; }
}


/* ================================================================
   Verkaufselemente der Buchseite (20.08.2026)
   Leseprobe, Gewaehrleistung, Versand-Aufklapper, Produktsicherheit
   und Bewertungen - uebernommen aus dem Medusa-Laden, gesetzt in den
   Marken-Tokens der Website statt im Standard-Look des Shops.
   ================================================================ */

.btn--leseprobe { margin-top: 0.85rem; width: 100%; max-width: 24rem; }

.gewaehr-link {
  display: inline-flex; align-items: center; gap: 0.45rem;
  margin-top: 0.85rem; padding: 0;
  background: none; border: 0; cursor: pointer;
  font: inherit; font-size: 0.85rem; color: var(--ink-faint);
  transition: color 0.18s var(--ease-out);
}
.gewaehr-link:hover { color: var(--gold); }
.gewaehr-link svg { flex: 0 0 auto; opacity: 0.8; }

/* Ueberlagerungen: gemeinsamer Rahmen fuer Leseprobe und Gewaehrleistung */
.leseprobe-lade, .gewaehr-lade {
  position: fixed; inset: 0; z-index: 120;
  display: grid; place-items: center; padding: clamp(0px, 2vw, 1.5rem);
}
.leseprobe-lade[hidden], .gewaehr-lade[hidden] { display: none; }
/* KEIN backdrop-filter. Gemessen am 31.08.2026 auf der Live-Seite, gleicher
   Browser, direkt nacheinander, Maus kreisend über dem Warenkorb-Knopf im
   Dialog: mit blur(2px) Mittel 20,7 ms je Bild, p95 50 ms, längste 66,7 ms;
   ohne ihn 16,7 / 16,8 / 16,8 – also jedes Bild auf der Zeit. Ein
   Weichzeichner über dem ganzen Fenster zwingt den Browser, bei jeder
   Mausbewegung die gesamte Seite dahinter neu zusammenzusetzen. */
.leseprobe-hg, .gewaehr-hg {
  position: absolute; inset: 0;
  background: rgba(24, 20, 16, 0.72);
}
.leseprobe-inhalt, .gewaehr-inhalt {
  position: relative; display: flex; flex-direction: column;
  width: min(920px, 100%); max-height: 100%;
  background: var(--paper); border-radius: clamp(0px, 2vw, var(--radius));
  box-shadow: var(--shadow-card); overflow: hidden;
  animation: buchdialog-auf 0.22s var(--ease-out);
}
@keyframes buchdialog-auf {
  from { opacity: 0; transform: translateY(8px) scale(0.98); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .leseprobe-inhalt, .gewaehr-inhalt { animation: none; }
}
.leseprobe-kopf, .gewaehr-kopf {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--line); flex: 0 0 auto;
}
.leseprobe-kopf h2, .gewaehr-kopf h2 {
  margin: 0; font-family: var(--font-display);
  font-size: 1.15rem; font-weight: 600;
}
.leseprobe-x {
  flex: 0 0 auto; width: 2.25rem; height: 2.25rem;
  display: grid; place-items: center;
  background: none; border: 0; border-radius: 999px;
  font-size: 1.5rem; line-height: 1; color: var(--ink-soft); cursor: pointer;
  transition: background 0.18s var(--ease-out), color 0.18s var(--ease-out);
}
.leseprobe-x:hover { background: var(--paper-3); color: var(--ink); }

.leseprobe-seiten {
  flex: 1 1 auto; overflow-y: auto;
  display: grid; gap: 1rem; padding: 1.25rem;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  background: var(--paper-2);
}
.leseprobe-seiten img {
  width: 100%; height: auto; display: block; cursor: zoom-in;
  border-radius: 6px; box-shadow: var(--shadow-cover);
  /* Zwölf Seiten liegen gleichzeitig im Dialog. Was gerade nicht im
     Sichtfeld des Rollbereichs steht, muss der Browser auch nicht zeichnen.
     Das gemerkte Mass (auto) hält die Rollleiste ruhig, sobald eine Seite
     einmal sichtbar war. Kein transition auf transform: hier bewegt sich
     nichts über transform, die Regel hielt nur eine Ebene offen. */
  content-visibility: auto;
  contain-intrinsic-size: auto 400px;
}
.leseprobe-seiten img.ist-gezoomt {
  grid-column: 1 / -1; cursor: zoom-out; max-width: 760px;
  margin-inline: auto;
}
.leseprobe-fuss {
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: 0.9rem 1.25rem; border-top: 1px solid var(--line);
}
.leseprobe-fuss p { margin: 0; font-size: 0.85rem; color: var(--ink-faint); }

.gewaehr-inhalt { padding-bottom: 1.25rem; }
.gewaehr-vor { margin: 1rem 1.25rem 0.75rem; font-size: 0.9rem; color: var(--ink-soft); }
.gewaehr-inhalt img {
  width: calc(100% - 2.5rem); margin: 0 1.25rem; height: auto;
  overflow-y: auto; border: 1px solid var(--line); border-radius: 8px;
  background: #fff;
}

/* Versand & Rueckgabe */
.buch-klapp {
  margin-top: 1.5rem; border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.buch-klapp + .gpsr { margin-top: 1.5rem; }
.buch-klapp summary {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.95rem 0; cursor: pointer; list-style: none;
  font-weight: 600; font-size: 0.98rem;
  transition: color 0.18s var(--ease-out);
}
.buch-klapp summary::-webkit-details-marker { display: none; }
.buch-klapp summary::after {
  content: "+"; font-size: 1.25rem; font-weight: 400;
  color: var(--ink-faint); transition: transform 0.2s var(--ease-out);
}
.buch-klapp[open] summary::after { content: "−"; }
.buch-klapp summary:hover { color: var(--gold); }
.buch-klapp-inhalt { padding-bottom: 1.1rem; font-size: 0.92rem; color: var(--ink-soft); }
.buch-klapp-inhalt p { margin: 0 0 0.7rem; }
.buch-klapp-inhalt p:last-child { margin-bottom: 0; }
.buch-klapp-inhalt a {
  color: var(--gold); text-decoration: underline;
  text-underline-offset: 0.2em;
}
.buch-klapp-inhalt a:hover { color: var(--ink); }

/* Produktsicherheit */
.gpsr {
  margin-top: 1.5rem; padding: 1.15rem 1.25rem;
  background: var(--paper-2); border: 1px solid var(--line);
  border-radius: 14px; font-size: 0.8rem; line-height: 1.6;
  color: var(--ink-soft);
}
.gpsr h2 {
  margin: 0 0 0.6rem; font-size: 0.7rem; font-weight: 600;
  letter-spacing: 0.15em; text-transform: uppercase; color: var(--ink);
}
.gpsr p { margin: 0 0 0.6rem; }
.gpsr p:last-child { margin-bottom: 0; }

/* Bewertungen */
.bewertungen-inhalt { margin-top: 1.5rem; }
.bew-leer {
  padding: clamp(2rem, 5vw, 3.25rem) 1.5rem; text-align: center;
  background: var(--paper-2); border-radius: var(--radius);
}
.bew-leer p { margin: 0.5rem auto 0; max-width: 34rem; color: var(--ink-soft); font-size: 0.92rem; }
.bew-sterne { letter-spacing: 0.18em; color: var(--gold); font-size: 1.15rem; }
.bew-sterne--blass { color: var(--paper-3); }
.bew-liste { display: grid; gap: 1rem; }
.bew-eintrag {
  padding: 1.15rem 1.25rem; background: #fff;
  border: 1px solid var(--line); border-radius: 14px;
  box-shadow: var(--shadow-card);
}
.bew-kopf {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; margin-bottom: 0.5rem; flex-wrap: wrap;
}
.bew-name { font-weight: 600; }
.bew-datum { font-size: 0.82rem; color: var(--ink-faint); }
.bew-text { margin: 0; color: var(--ink-soft); }
.bew-schnitt {
  display: flex; align-items: baseline; gap: 0.6rem;
  margin-bottom: 1.25rem; flex-wrap: wrap;
}
.bew-schnitt strong { font-size: 1.5rem; font-family: var(--font-display); }
.bew-schnitt span { color: var(--ink-faint); font-size: 0.9rem; }

@media (max-width: 640px) {
  .leseprobe-inhalt, .gewaehr-inhalt { max-height: 100%; border-radius: 0; }
  .leseprobe-seiten { grid-template-columns: 1fr 1fr; gap: 0.6rem; padding: 0.75rem; }
  .leseprobe-fuss { flex-direction: column; align-items: stretch; }
  .gewaehr-inhalt img { width: calc(100% - 1.5rem); margin: 0 0.75rem; }
}


/* ================================================================
   Buchseite dreispaltig - wie die Produktseite im Laden
   Nachgemessen am 20.08.2026 an shop.orbita-media.de:
   300 px Info (sticky, top 192) | Bild flexibel | 300 px Kauf (sticky).
   ================================================================ */

.page-hero .wrap.buch-drei {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2rem;
  grid-template-columns: none;
}

.page-hero .wrap.buch-drei > .buch-info,
.page-hero .wrap.buch-drei > .buch-kauf { width: 100%; }
.page-hero .wrap.buch-drei > .buch-bild { width: 100%; }

/* Auf dem Handy zuerst das Cover: Ein Buch wird darueber erkannt, und der
   Kaufbereich soll nicht hinter der gesamten Beschreibung liegen. */
@media (max-width: 1023px) {
  .page-hero .wrap.buch-drei > .buch-bild { order: -1; }
}

@media (min-width: 1024px) {
  .page-hero .wrap.buch-drei {
    flex-direction: row;
    gap: 1.5rem;
  }
  .page-hero .wrap.buch-drei > .buch-info,
  .page-hero .wrap.buch-drei > .buch-kauf {
    flex: 0 0 300px;
    max-width: 300px;
    position: sticky;
    top: 7rem;
  }
  .page-hero .wrap.buch-drei > .buch-bild {
    flex: 1 1 auto;
    min-width: 0;
  }
}

/* In einer 300er Spalte braucht der Titel eine eigene Groesse - display-l
   waere dort eine Rutschbahn aus Silbentrennung. */
.buch-titel {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 1.1rem + 1.6vw, 2.1rem);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.01em;
}
.buch-info .lead {
  margin-top: 0.9rem;
  font-size: 0.98rem;
  line-height: 1.55;
}
.buch-info .meta-row { margin-top: 1rem; font-size: 0.9rem; }
.buch-info .specs-dl { margin-top: 1.5rem; }
.buch-info .breadcrumb { margin-bottom: 1rem; }

.buch-kauf .preis { margin-top: 0; }
.buch-kauf .hero-proof { margin-top: 1.2rem; }
.buch-kauf .buybox { margin-top: 1rem; }

/* Das Cover mittig in seiner Spalte, mit Luft nach oben wie im Laden. */
.buch-bild .book-figure {
  margin: 0 auto;
  max-width: 420px;
}
@media (min-width: 1024px) {
  .buch-bild .book-figure { max-width: 460px; }
}

/* In der 300er Spalte brechen zweispaltige Eckdaten haesslich um
   ("GROESSE (IN" / "CM)"). Untereinander gesetzt bleibt jedes Label ganz. */
@media (min-width: 1024px) {
  .buch-info .specs-dl { grid-template-columns: 1fr; gap: 0.85rem 0; }
  .buch-info .specs-dl dt { font-size: 0.62rem; }
}

/* Autor und Datum untereinander statt nebeneinander: In der 300er Spalte
   passt beides nie in eine Zeile, und der Trenner blieb allein am Ende
   haengen. Untereinander braucht es ihn gar nicht. */
@media (min-width: 1024px) {
  .buch-info .meta-row {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.15rem;
  }
  .buch-info .meta-row > .sep { display: none; }
}


/* ================================================================
   Buchseite als Verkaufsseite - uebernommen aus dem Entwurf
   C:\Users\nmdar\Nextcloud\TOOLS\Buch-Merch-Shop\entwurf\buchseite.html
   (Artifact 3ad88582-9684-42c8-93da-13e7af13aedc, 12.08.2026)

   Bewusst uebernommen statt nachgebaut: Der Entwurf ist ueber viele Runden
   mit Noah abgestimmt worden, jede Anordnung hat dort einen Grund. Aus dem
   Original entfernt wurden nur .wrap und .eyebrow (bringt die Website mit)
   sowie die Entwurfs-Hilfen (Bausteine-Tafel, Aenderungsliste).

   Die Bildquellen stehen NICHT hier, sondern als Variablen an der jeweiligen
   Buchseite - jedes Buch hat sein eigenes Cover und Autorenbild.
   ================================================================ */
:root {
}

/* ================================================================
   Orbita-Design. Farben und Schriften unverändert von orbita-media.de;
   die Anordnung folgt der Bauliste "Top 100 Conversion-Elemente" und der
   Benchmark-Recherche vom 12.08.2026 (Thalia, Barnes & Noble, Penguin
   Random House, Snocks, Ridge – alle fünf direkt ausgelesen).
   ---------------------------------------------------------------- */
:root {
  --papier: #f8f3ea;
  --papier-2: #f1e8d8;
  --papier-3: #ece0cb;
  --tinte: #181410;
  --tinte-weich: #564c40;
  --tinte-blass: #8a7d6c;
  --espresso: #211a12;
  --gold: #c08a28;
  --gold-hell: #e3ae45;
  --gold-blass: rgba(192, 138, 40, 0.12);
  --creme: #f4ecdd;
  --linie: rgba(24, 20, 16, 0.12);
  --gruen: #3f6b4a;
  --rost: #a8531b;
  --flaeche: #fffdf9;
  --schatten-karte: 0 2px 6px rgba(24,20,16,.05), 0 18px 40px -18px rgba(24,20,16,.25);
  --rund: 20px;
  --pille: 999px;
  --display: 'Fraunces', Georgia, serif;
  --text: 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --weich: cubic-bezier(0.22, 1, 0.36, 1);
  color-scheme: light;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html {
  /* Platz für die Bildlaufleiste dauerhaft freihalten. Ohne das springt die
     ganze Seite um 15 Pixel nach rechts, sobald der Warenkorb aufgeht und das
     Scrollen gesperrt wird – genau der Ruckler, der vorher zu sehen war. */
  scrollbar-gutter: stable;
  scroll-behavior: smooth;
}

body {
  background: var(--papier);
  color: var(--tinte);
  font-family: var(--text);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

body::after {
  content: ""; position: fixed; inset: 0; z-index: 9999; pointer-events: none; opacity: .3;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='0.05'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

h1, h2, h3, h4 { font-family: var(--display); font-weight: 600; line-height: 1.14; text-wrap: balance; letter-spacing: -.015em; }
a { color: inherit; }
img { max-width: 100%; display: block; }
button { font: inherit; cursor: pointer; }

/* ---------------------------------------------------------------- Rahmen */

.hinweis { background: var(--espresso); color: var(--creme); padding: .85rem 0; font-size: .9rem; }
.hinweis .wrap { display: flex; gap: .9rem; align-items: baseline; flex-wrap: wrap; }
.hinweis strong { color: var(--gold-hell); }
.hinweis span { color: rgba(244,236,221,.72); }

.marke { font-family: var(--display); font-size: 1.28rem; font-weight: 600; display: flex; align-items: baseline; gap: .5rem; }
.marke small { font-family: var(--text); font-size: .6rem; letter-spacing: .22em; text-transform: uppercase; color: var(--gold); font-weight: 700; }

.korb-knopf {
  position: relative; width: 44px; height: 44px; border: 1px solid var(--linie);
  border-radius: 50%; background: transparent; display: grid; place-items: center;
  transition: background .2s, border-color .2s, color .2s; flex: none;
}
.korb-knopf:hover { background: var(--papier-3); border-color: var(--gold); color: var(--gold); }
.korb-knopf svg { width: 19px; height: 19px; }
.korb-zahl {
  position: absolute; top: -4px; right: -4px; min-width: 21px; height: 21px; padding: 0 5px;
  border-radius: var(--pille); background: var(--gold); color: #fff;
  font-size: .72rem; font-weight: 700; line-height: 21px; text-align: center;
}

/* ---------------------------------------------------------------- Produkt */

/* Im Entwurf lief der Kopf mit der Seite, hier steht er fest ueber ihr
   (79 px, position:fixed). Ohne diesen Abstand schob sich die Brotkrume
   in die Navigation. */
.produkt { padding: calc(79px + 2.2rem) 0 1rem; }
.produkt-raster {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr);
  grid-template-areas: "galerie kopf" "galerie kauf";
  gap: 1rem 3rem; align-items: start;
}
.galerie { grid-area: galerie; position: sticky; top: 88px; }
/* min-width:0 ist Pflicht: Als Grid-Item hat die Spalte sonst min-width:auto
   und schrumpft nicht unter ihren breitesten Inhalt. Bei 320px stand das
   Cover daneben, fuer die Kopfdaten blieben 136px - die Bewertungszeile
   brauchte 173px und schob die ganze Seite auf 337px. */

.kauf { grid-area: kauf; display: flex; flex-direction: column; gap: 1rem; }

/* Das fertige Cover-Mockup aus dem CMS statt eines nachgebauten 3D-Effekts.
   Solche Bilder liegen für 114 Titel bereits vor. */
.buehne {
  background: linear-gradient(160deg, var(--papier-2), var(--papier-3));
  border-radius: var(--rund); padding: 2.4rem 3rem; display: grid; place-items: center;
  position: relative; overflow: hidden;
}
.buehne::before {
  content: ""; position: absolute; inset: -40% -20% auto auto; width: 70%; aspect-ratio: 1;
  background: radial-gradient(circle, rgba(227,174,69,.26), transparent 68%);
}
/* Der 3D-Buchkoerper von orbita-media.de, 1:1 uebernommen (style.css ab
   Zeile 1893, Regelsatz .book-figure der Buchdetailseite). Wichtig und hier
   beim ersten Versuch falsch gemacht: die Perspektive gehoert INS Transform
   (perspective(1400px) rotateY(...)), nicht als perspective-Property an das
   Elternelement. Mit Eltern-Perspektive rendert headed Chrome unter Windows
   das preserve-3d-Buch fast flach - genau das war zu sehen. Ebenso echt:
   --thick 72px und eckige Ecken (Buecher haben keine runden Ecken). */
.buch3d {
  position: relative; display: block; width: min(300px, 100%);
  aspect-ratio: 746/1056;
  -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%;
  -webkit-transform-style: preserve-3d; transform-style: preserve-3d;
  -webkit-transform: perspective(1400px) rotateY(-15deg);
  transform: perspective(1400px) rotateY(-15deg);
  -webkit-transition: -webkit-transform .55s var(--weich);
  transition: transform .55s var(--weich);
  --thick: 72px;
}
.buehne:hover .buch3d {
  -webkit-transform: perspective(1400px) rotateY(-8deg);
  transform: perspective(1400px) rotateY(-8deg);
}
/* Safari flacht preserve-3d ab und ignoriert die translateZ-Tiefe. Ohne
   z-index malt es dann den dunklen Rueckdeckel nach DOM-Reihenfolge UEBER
   das Cover - das Buch waere auf dem Mac ein schwarzes Rechteck. Kein
   backface-visibility auf dem Deckel: das hat auf der Website genau diesen
   Fehler ausgeloest. */
.buch3d .deckel {
  position: absolute; inset: 0; z-index: 1;
  background: var(--bild-cover) center/cover, var(--papier-3);
  -webkit-transform: translateZ(1px); transform: translateZ(1px);
}
/* Falzlicht: der schmale Lichtstreifen am Buchruecken */
.buch3d::before {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(90deg,
    rgba(0,0,0,.15) 0%, rgba(255,255,255,.12) 1.6%,
    rgba(0,0,0,.09) 3.6%, rgba(0,0,0,0) 7%);
}
/* Rueckdeckel gibt dem Block Tiefe */
.buch3d::after {
  content: ""; position: absolute; inset: 0;
  -webkit-transform: translateZ(calc(var(--thick) * -1));
  transform: translateZ(calc(var(--thick) * -1));
  background: #2c2418;
  -webkit-backface-visibility: hidden; backface-visibility: hidden;
}
/* Buchblock: die einzelnen Seiten als Farbverlauf */
.buch3d .seiten {
  position: absolute; top: .6%; bottom: .6%; left: 100%; width: var(--thick);
  -webkit-transform-origin: 0 50%; transform-origin: 0 50%;
  -webkit-transform: translateZ(1px) rotateY(90deg);
  transform: translateZ(1px) rotateY(90deg);
  background: linear-gradient(90deg,
    #e9e1d1 0%, #fdfaf2 9%, #f0e9da 17%, #fcf8f0 26%, #efe7d8 34%,
    #fcf8f0 43%, #eee6d7 51%, #fdfaf2 60%, #f0e9da 68%, #fcf8f0 77%,
    #eee6d7 85%, #fbf7ef 93%, #e6ddcc 100%);
}
/* Eckige Cover-Ecken - wie bei echten Buechern */
.buch3d .deckel, .buch3d::before, .buch3d::after, .buch3d .seiten { border-radius: 0; }

/* ---------- Safari: Buchdicke ohne 3D ----------
   Gemessen am 17.08.2026: Die Seitenkante ist in Chromium 11px breit, in
   WebKit 0px. Safari flacht preserve-3d ab und wirft die per rotateY(90deg)
   in den Raum geklappte Kante damit weg - das Buch sieht auf dem Mac und
   auf dem iPhone flach aus. Die Website hat denselben Effekt, das faellt dort
   nur niemandem auf, weil man es nicht nebeneinander sieht.

   Ersatz: derselbe Papierverlauf als flacher Streifen rechts, leicht nach
   oben verjuengt, damit er wie eine perspektivisch gesehene Kante wirkt.
   Der Schalter @supports (-webkit-hyphens: none) trifft nur Safari/WebKit
   (nachgemessen: greift in WebKit, nicht in Chromium). */
@supports (-webkit-hyphens: none) {
  .buch3d { --kante: 11px; }
  .buch3d .seiten {
    top: 0; bottom: 0; left: auto; right: calc(var(--kante) * -1);
    width: var(--kante);
    -webkit-transform: none; transform: none;
    -webkit-clip-path: polygon(0 1.2%, 100% 0, 100% 100%, 0 98.8%);
    clip-path: polygon(0 1.2%, 100% 0, 100% 100%, 0 98.8%);
    box-shadow: inset 1px 0 2px -1px rgba(24,20,16,.25);
  }
  /* Der Rueckdeckel liegt in Safari ohne Tiefe genau auf dem Cover und
     wuerde es je nach Malreihenfolge verdecken. Ohne 3D braucht es ihn
     nicht - die Dicke traegt jetzt der Streifen. */
  .buch3d::after { display: none; }
}

.daumen { display: flex; gap: .55rem; margin-top: .9rem; }
.daumen button {
  width: 62px; aspect-ratio: 3/4; border-radius: 8px; border: 2px solid transparent;
  background: var(--papier-2) center/cover; padding: 0; overflow: hidden;
  transition: border-color .2s, transform .2s;
}
.daumen button:hover { transform: translateY(-2px); border-color: var(--gold); }
.daumen button[aria-current="true"] { border-color: var(--gold); }
.d-mockup { background-image: var(--bild-mockup); background-size: 130%; }
.d-cover { background-image: var(--bild-cover); }

.krume { font-size: .84rem; color: var(--tinte-blass); display: flex; gap: .45rem; }
.krume a { text-decoration: none; transition: color .18s; }
.krume a:hover { color: var(--gold); }

/* Autor ÜBER dem Titel – so macht es Thalia, und bei Influencer-Titeln ist
   der Name das stärkere Kaufsignal als der Titel. */
.autor-oben { display: flex; align-items: center; gap: .7rem; text-decoration: none; }
.autorbild { width: 42px; height: 42px; border-radius: 50%; background: var(--bild-autor) center/cover; flex: none; box-shadow: 0 2px 8px -3px rgba(24,20,16,.4); }
.autor-oben b { font-weight: 600; font-size: .98rem; display: block; transition: color .18s; }
.autor-oben em { display: block; font-size: .82rem; color: var(--tinte-blass); font-style: normal; }
.autor-oben:hover b { color: var(--gold); }

.abzeichen-reihe { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.abzeichen { font-size: .72rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; padding: .38em .8em; border-radius: var(--pille); }
.abz-kat {
  /* Kraeftiger als im Entwurf: Dort war die Kategorie so hell, dass
     sie neben dem Autorennamen unterging. */
  background: rgba(192, 138, 40, 0.18);
  color: #8a6114;
}
.abz-rang { background: var(--espresso); color: var(--gold-hell); }

h1 { font-size: clamp(1.85rem, 3.2vw, 2.65rem); }
.unter { font-size: 1.02rem; color: var(--tinte-weich); }

/* flex-wrap: Auf schmalen Geraeten rutscht "4,8 · 63 Bewertungen" unter die
   Sterne, statt die Seite breiter zu machen. */
.sterne { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .3rem .55rem; background: none; border: 0; padding: 0; text-align: left; align-self: flex-start; text-decoration: none; max-width: 100%; }
.sterne-bild { color: var(--gold); letter-spacing: .08em; font-size: 1.02rem; }
.sterne u { color: var(--tinte); font-size: .95rem; font-weight: 700; text-decoration: none; }
.sterne-zahl { color: var(--tinte-weich); font-size: .9rem; text-decoration: underline; text-underline-offset: 3px; transition: color .18s; }
.sterne:hover .sterne-zahl { color: var(--gold); }

.formate { display: grid; grid-template-columns: repeat(auto-fit, minmax(146px, 1fr)); gap: .55rem; }
.format {
  border: 1.5px solid var(--linie); background: var(--flaeche); border-radius: 14px;
  padding: .75rem .85rem; text-align: left; transition: border-color .18s, box-shadow .18s, background .18s;
}
.format:hover { border-color: var(--gold); }
.format[aria-pressed="true"] { border-color: var(--gold); background: var(--gold-blass); box-shadow: 0 0 0 3px rgba(192,138,40,.1); }
.format b { display: block; font-size: .93rem; }
.format span { font-size: .86rem; color: var(--tinte-weich); }
.format em { display: block; font-size: .75rem; color: var(--tinte-blass); font-style: normal; }

.preisblock { display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; }
.preis { font-family: var(--display); font-size: 2.05rem; font-weight: 600; color: var(--gold); }
.preis-zusatz { font-size: .86rem; color: var(--tinte-blass); }

/* Versandkostenfrei ist bei uns ein Hauptargument, kein Kleingedrucktes –
   Snocks nennt es viermal auf einer Seite. Deshalb eine eigene grüne Zeile. */
.frei {
  display: flex; align-items: center; gap: .5rem; font-size: .95rem; font-weight: 600;
  color: var(--gruen); margin-top: .3rem;
}
.frei svg { width: 17px; height: 17px; flex: none; }

.liefer {
  display: flex; align-items: flex-start; gap: .6rem; font-size: .94rem;
  background: rgba(63,107,74,.08); border: 1px solid rgba(63,107,74,.2);
  border-radius: 12px; padding: .7rem .9rem; color: var(--gruen); font-weight: 600;
}
.liefer svg { width: 18px; height: 18px; flex: none; margin-top: .18rem; }
.liefer span { font-weight: 400; color: var(--tinte-weich); }

.kaufzeile { display: flex; gap: .7rem; align-items: stretch; flex-wrap: wrap; }
.menge { display: inline-flex; align-items: center; border: 1px solid var(--linie); border-radius: var(--pille); background: var(--flaeche); overflow: hidden; flex: none; }
/* flex:none ist noetig, sonst staucht der Flex-Container die Knoepfe unter
   ihre gesetzte Breite (gemessen 38px statt 44px) - Fingerziele werden dann
   still zu klein, ohne dass die CSS-Regel falsch aussieht. */
.menge button { flex: none; width: 44px; height: 54px; border: 0; background: transparent; font-size: 1.2rem; color: var(--tinte); transition: background .18s, color .18s; cursor: pointer; }
.menge button:hover { background: var(--papier-3); color: var(--gold); }
.menge input { flex: none; width: 44px; height: 54px; border: 0; background: transparent; text-align: center; font: inherit; font-weight: 600; -moz-appearance: textfield; appearance: textfield; }
.menge input::-webkit-outer-spin-button, .menge input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  border: 0; border-radius: var(--pille); padding: 0 1.8em; min-height: 54px;
  font-weight: 600; font-size: 1rem; text-decoration: none;
  transition: background .25s, color .25s, transform .3s var(--weich), box-shadow .3s, border-color .25s;
}
.knopf-gold { background: var(--gold); color: #fff; flex: 1 1 14rem; box-shadow: 0 10px 24px -10px rgba(192,138,40,.7); }
.knopf-gold:hover { background: var(--tinte); transform: translateY(-2px); box-shadow: 0 14px 28px -12px rgba(24,20,16,.5); }
.knopf-rand { background: transparent; border: 1.5px solid var(--linie); color: var(--tinte); }
.knopf-rand:hover { border-color: var(--gold); color: var(--gold); transform: translateY(-2px); }
.knopf-hell { background: transparent; border: 1.5px solid rgba(244,236,221,.3); color: var(--creme); }
.knopf-hell:hover { border-color: var(--gold-hell); color: var(--gold-hell); background: rgba(227,174,69,.1); transform: translateY(-2px); }
.knopf-klein { min-height: 42px; font-size: .9rem; padding: 0 1.25em; }
.knopf-mini { min-height: 34px; font-size: .85rem; padding: 0 1.1em; }

/* Zahlarten als Wortmarken, ohne "verschlüsselt bezahlen": Verschlüsselung ist
   selbstverständlich; der Hinweis wirft eher eine Frage auf, die sich sonst
   niemand stellt. Die Zahlarten selbst sind das Vertrauenssignal. */
/* ---------- EU-Gewaehrleistungsmitteilung ----------
   Ab 27.09.2026 Pflicht fuer jeden B2C-Shop (Richtlinie 2011/83/EU in der
   Fassung der Richtlinie (EU) 2024/825, Durchfuehrungsverordnung (EU)
   2025/1960). Sie muss vor Vertragsschluss "hervorgehoben, leicht
   erkennbar und lesbar" sein - deshalb steht sie hier im Kaufbereich und
   nicht im Fussbereich.

   Die Mitteilung selbst ist ein DIN-A4-Dokument mit festem Layout, das
   NICHT veraendert werden darf. Sie deshalb verkleinert auf jede
   Produktseite zu legen, waere unleserlich; stattdessen oeffnet dieser
   Einstieg sie in Originalgroesse. Das Zeichen hier ist bewusst nur ein
   Hinweis, nicht das Label - das echte Dokument steckt im Overlay. */
.gewaehr {
  display: inline-flex; align-items: center; gap: .4rem; width: fit-content;
  background: none; border: 0; padding: 0; text-align: left; cursor: pointer;
  font-size: .82rem; color: var(--tinte-blass); text-decoration: underline;
  text-decoration-color: transparent; transition: color .18s, text-decoration-color .18s;
}
.gewaehr:hover { color: var(--tinte-weich); text-decoration-color: var(--tinte-blass); }
.gewaehr svg { width: 14px; height: 14px; flex: none; opacity: .7; }
/* Nur bei koerperlichen Formaten sichtbar (siehe Begruendung oben). Das
   JS setzt data-digital="1" auf .kauf, wenn E-Book gewaehlt ist. */
.kauf[data-digital="1"] .gewaehr { display: none; }

.zahlarten { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; }
.zahlart { border: 1px solid var(--linie); border-radius: 6px; padding: .3em .65em; background: var(--flaeche); font-weight: 600; font-size: .78rem; color: var(--tinte-weich); }

.vertrauen { list-style: none; display: grid; gap: .42rem; }
.vertrauen li { position: relative; padding-left: 1.55rem; font-size: .93rem; color: var(--tinte-weich); }
.vertrauen li::before {
  content: ""; position: absolute; left: .2rem; top: .45em; width: .6rem; height: .32rem;
  border-left: 2px solid var(--gold); border-bottom: 2px solid var(--gold); transform: rotate(-45deg);
}

.bestand { font-size: .9rem; font-weight: 600; color: var(--rost); display: flex; align-items: center; gap: .5rem; }
.bestand i { width: 8px; height: 8px; border-radius: 50%; background: var(--rost); animation: puls 2s infinite; }

/* Nicht auf Lager: als eigener Kasten, nicht als kleine Zeile. Wer bestellt,
   soll vorher wissen, dass das Buch erst nachbestellt wird - eine graue Zeile
   unter dem Preis wird überlesen. */
.nachbestellung {
  display: flex; gap: .7rem; align-items: flex-start;
  margin-top: .85rem; padding: .8rem .9rem;
  border: 1px solid rgba(176, 106, 42, .32);
  background: rgba(227, 174, 69, .10);
  border-radius: 12px;
}
.nachbestellung svg { width: 20px; height: 20px; flex: none; margin-top: .1rem; color: var(--rost); }
.nachbestellung b { display: block; font-size: .93rem; color: var(--rost); }
.nachbestellung span { display: block; margin-top: .15rem; font-size: .87rem; line-height: 1.45; color: var(--tinte-weich); }
@keyframes puls { 0%,100% { opacity: 1 } 50% { opacity: .35 } }

/* ---------------------------------------------------------------- Abschnitte */

.abschnitt { padding: 3rem 0; scroll-margin-top: 80px; }
.abschnitt--getoent { background: var(--papier-2); }
.abschnitt--dunkel { background: var(--espresso); color: var(--creme); }

.abschnitt h2 { font-size: clamp(1.4rem, 2.4vw, 1.95rem); }
.abschnitt--dunkel .eyebrow { color: var(--gold-hell); }

/* Beschreibung: bei allen fünf Benchmark-Shops steht sie direkt unter dem
   Kaufbereich. Zweispaltig, damit der Fliesstext keine Wand wird. */
.beschreibung { display: grid; grid-template-columns: minmax(0,1.35fr) minmax(0,1fr); gap: 3rem; align-items: start; }
.fliess p { margin-bottom: .9rem; max-width: 62ch; }
.fliess p:first-child { font-size: 1.12rem; font-family: var(--display); color: var(--tinte); }
.inhalt-karte { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--rund); padding: 1.5rem 1.6rem; }
.inhalt-karte h3 { font-size: 1.05rem; margin-bottom: .8rem; }
.inhalt-liste { list-style: none; display: grid; gap: .5rem; }
.inhalt-liste li { position: relative; padding-left: 1.5rem; font-size: .92rem; color: var(--tinte-weich); }
.inhalt-liste li::before {
  content: ""; position: absolute; left: .15rem; top: .45em; width: .58rem; height: .32rem;
  border-left: 2px solid var(--gold); border-bottom: 2px solid var(--gold); transform: rotate(-45deg);
}

/* Die Eckdaten stehen in der rechten Spalte von .beschreibung. Vorher lagen
   sie als breite Leiste darunter, und die rechte Spalte blieb leer. */
.eckdaten {
  border: 1px solid var(--linie); border-radius: var(--rund);
  background: var(--flaeche, #fff); padding: 1.4rem 1.5rem;
  position: sticky; top: 100px;
}
.eckdaten h3 {
  margin: 0 0 1rem; font-family: var(--display); font-size: 1.05rem;
  font-weight: 600; color: var(--tinte);
}
.specs { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 1rem 1.5rem; }
@media (max-width: 900px) {
  .eckdaten { position: static; }
}
.specs div span { display: block; font-size: .7rem; letter-spacing: .13em; text-transform: uppercase; color: var(--tinte-blass); margin-bottom: .2rem; }
.specs div b { font-weight: 600; font-size: .95rem; }

/* Buch-Empfehlungen. Ersetzt die Buendel-Karten - Merch wird vorerst nicht
   verkauft, also gibt es hier auch keine Kombipreise mehr. */
.weitere { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 1rem; }
/* Die Karte selbst ist NICHT klickbar (nur der Plus-Knopf legt in den Korb).
   Deshalb kein Hover-Lift auf der ganzen Karte - das war verwirrend, weil es
   nach "hier klicken" aussah, obwohl nur das Plus wirkt. Die Karte bleibt
   ruhig, allein der Plus-Knopf reagiert. */
.buchkarte {
  background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--rund);
  padding: 1.15rem; display: flex; gap: 1rem; align-items: center;
  color: inherit;
}
.buchkarte-cover {
  width: 58px; height: 82px; flex: none; border-radius: 1px 3px 3px 1px;
  background: var(--papier-3) center/cover; box-shadow: 0 4px 12px -5px rgba(24,20,16,.55);
}
.buchkarte-text { min-width: 0; flex: 1; display: grid; gap: .16rem; }
.buchkarte-text b { font-size: .95rem; line-height: 1.25; }
.buchkarte-text em { font-style: normal; font-size: .82rem; color: var(--tinte-blass); }
.buchkarte-text strong { font-family: var(--display); font-size: 1.1rem; color: var(--gold); margin-top: .15rem; }
/* Quick-Add: ein rundes Plus, das direkt in den Korb legt, ohne die Seite
   zu verlassen. */
.buchkarte-add {
  flex: none; width: 44px; height: 44px; border-radius: 50%;
  border: 1.5px solid var(--linie); background: var(--flaeche); color: var(--tinte);
  display: grid; place-items: center; cursor: pointer;
  transition: background .18s, color .18s, border-color .18s, transform .2s var(--weich);
}
.buchkarte-add svg { width: 20px; height: 20px; }
.buchkarte-add:hover { background: var(--gold); border-color: var(--gold); color: #fff; transform: scale(1.06); }
.buchkarte-add.getan { background: var(--gruen); border-color: var(--gruen); color: #fff; }
.b-cover { background-image: var(--bild-cover); }
.b-schweden { background-image: var(--bild-schweden); }
.b-festland { background-image: var(--bild-festland); }

/* Die Inhalts-Box im Kaufbereich ist enger gesetzt als die in der
   Beschreibung - dort ist sie eine von zwei Spalten, hier steht sie in
   einer schmalen Saeule unter dem Kaufknopf. */
/* Die drei CMS-Highlights als fette Kernpunkte oben in der Box, mit Häkchen;
   darunter durch eine feine Linie getrennt die Themenliste. */
.inhalt-kern { list-style: none; display: grid; gap: .65rem; margin: 0; padding: 0; }
.inhalt-kern li { position: relative; padding-left: 1.7rem; font-weight: 600; font-size: .97rem; color: var(--tinte); }
.inhalt-kern li::before {
  content: ""; position: absolute; left: 0; top: .12em; width: 1.1rem; height: 1.1rem;
  background: var(--gold); border-radius: 50%;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/68% no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/68% no-repeat;
}

.probe { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,320px); gap: 2.2rem; align-items: center; }
.probe-blatt {
  background: var(--flaeche); border-radius: 8px; padding: 2rem 2.2rem;
  box-shadow: var(--schatten-karte); position: relative; max-height: 320px; overflow: hidden;
  font-size: .95rem; line-height: 1.72; color: var(--tinte-weich);
}
.probe-blatt::after { content: ""; position: absolute; inset: auto 0 0 0; height: 120px; background: linear-gradient(transparent, var(--flaeche)); }
.probe-blatt h4 { font-size: 1.12rem; margin-bottom: .7rem; color: var(--tinte); }
.probe-blatt p + p { margin-top: .75rem; }

.bewert-kopf { display: flex; gap: 2.5rem; align-items: center; flex-wrap: wrap; margin-bottom: 1.6rem; }
.bewert-schnitt { text-align: center; }
.bewert-zahl { font-family: var(--display); font-size: 3rem; font-weight: 600; line-height: 1; }
.bewert-anzahl { font-size: .8rem; color: var(--tinte-blass); margin-top: .3rem; }
.balken { display: grid; gap: .2rem; min-width: 240px; flex: 1; max-width: 360px; }
/* Klickbare Filterzeilen (Baymard: Nutzer erwarten, dass Balken filtern). */
.balken-zeile {
  display: flex; align-items: center; gap: .6rem; font-size: .83rem;
  color: var(--tinte-weich); background: none; border: 0; padding: .18rem .35rem;
  border-radius: 7px; cursor: pointer; text-align: left; transition: background .15s;
}
.balken-zeile:hover { background: var(--papier-2); }
.balken-zeile[aria-pressed="true"] { background: rgba(192,138,40,.14); font-weight: 600; }
.balken-zeile > span:first-child { flex: none; width: 2.4rem; white-space: nowrap; }
.balken-zeile u { flex: 1; height: 8px; border-radius: 4px; background: var(--papier-3); overflow: hidden; text-decoration: none; }
.balken-zeile u i { display: block; height: 100%; background: var(--gold); }
.balken-zahl { flex: none; width: 2rem; text-align: right; color: var(--tinte-blass); }
.stimmen { display: grid; grid-template-columns: repeat(auto-fit, minmax(276px, 1fr)); gap: 1rem; }
.stimme { background: var(--flaeche); border-radius: 14px; padding: 1.15rem 1.25rem; border: 1px solid var(--linie); display: flex; flex-direction: column; gap: .5rem; }
.stimme[hidden] { display: none; }
/* Weiches Ein-/Ausblenden beim Filtern der Bewertungen. */
.stimme-rein { animation: stimme-rein .34s var(--weich) both; }
.stimme-raus { opacity: 0; transform: translateY(6px); transition: opacity .24s var(--weich), transform .24s var(--weich); }
@keyframes stimme-rein { from { opacity: 0; transform: translateY(8px); } }
.stimme .oben { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.stimme .oben b { font-size: .91rem; }
.stimme .quelle { font-size: .7rem; font-weight: 600; padding: .2em .55em; border-radius: 5px; white-space: nowrap; }
/* Eigene = grün (verifiziert), Amazon = neutral mit klarer Herkunft. */
.quelle--eigen { color: var(--gruen); background: rgba(63,107,74,.1); }
.quelle--amazon { color: var(--tinte-blass); background: var(--papier-3); }
.stimme p { font-size: .93rem; color: var(--tinte-weich); }
.bewert-fuss { display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap; margin-top: 1.4rem; }
.amazon-link { font-size: .85rem; color: var(--tinte-blass); text-decoration: underline; text-underline-offset: 3px; transition: color .18s; }
.amazon-link:hover { color: var(--gold); }
.bewert-hinweis { margin-top: 1.1rem; font-size: .82rem; color: var(--tinte-blass); max-width: 82ch; }

.autorblock { display: grid; grid-template-columns: 168px minmax(0,1fr); gap: 2rem; align-items: center; }
.autorportrait { width: 168px; height: 168px; border-radius: 50%; background: var(--bild-autor) center/cover; box-shadow: 0 8px 30px -10px rgba(0,0,0,.6); }
.reichweite { display: flex; gap: 1.8rem; flex-wrap: wrap; margin: 1rem 0; }
.reichweite div b { display: block; font-family: var(--display); font-size: 1.55rem; color: var(--gold-hell); }
.reichweite div span { font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: rgba(244,236,221,.6); }

/* Aufklappen mit weichem Übergang statt hartem Sprung. */
.fragen { display: grid; gap: .55rem; max-width: 800px; }
details { background: var(--flaeche); border: 1px solid var(--linie); border-radius: 12px; overflow: hidden; transition: border-color .2s; }
details:hover { border-color: rgba(192,138,40,.4); }
summary { padding: .95rem 1.15rem; font-weight: 600; cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 1rem; }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; color: var(--gold); font-size: 1.3rem; line-height: 1; transition: transform .25s var(--weich); }
details[open] summary::after { transform: rotate(45deg); }
/* Aufklappen weich statt hart.
   Bewusst KEIN <details>: Vier Anlaeufe damit sind gemessen gescheitert.
   Das Element blendet seinen Inhalt beim Schliessen sofort aus, und sein
   eingebautes Umschalten kam meinem Code in die Quere - es sprang hart auf
   und liess sich nicht mehr schliessen. Geprueft und verworfen wurden auch
   ::details-content mit block-size (WebKit kann interpolate-size nicht)
   und content-visibility mit allow-discrete (unterdrueckt genau die
   Groessenberechnung, die der grid-Trick braucht - der berechnete Wert
   blieb 0px).
   Ein Knopf mit aria-expanded ist genauso zugaenglich und laesst sich
   vollstaendig steuern. */
.fragen { display: grid; gap: .55rem; max-width: 800px; }
.frage {
  background: var(--flaeche); border: 1px solid var(--linie);
  border-radius: 12px; overflow: hidden; transition: border-color .2s;
}
.frage:hover { border-color: rgba(192,138,40,.4); }
.frage-knopf {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: .95rem 1.15rem; font: inherit; font-weight: 600;
  text-align: left; background: none; border: 0; cursor: pointer; color: inherit;
}
/* Das Pluszeichen als zwei Striche - so laesst es sich zum Minus drehen,
   ohne dass die Schrift mitspringt. */
.frage-knopf i {
  position: relative; width: 14px; height: 14px; flex: none;
}
.frage-knopf i::before, .frage-knopf i::after {
  content: ""; position: absolute; inset: 50% 0 auto 0; height: 2px;
  background: var(--gold); border-radius: 2px; transform: translateY(-50%);
  transition: transform .3s var(--weich), opacity .3s var(--weich);
}
.frage-knopf i::after { transform: translateY(-50%) rotate(90deg); }
.frage-knopf[aria-expanded="true"] i::after { transform: translateY(-50%) rotate(0deg); opacity: 0; }
.antwort { overflow: hidden; }
.antwort p { padding: 0 1.15rem 1rem; color: var(--tinte-weich); font-size: .94rem; margin: 0; }
/* Ohne JavaScript sind alle Antworten sichtbar - lesbar bleibt es immer. */
.js-aufklapp .antwort { height: 0; transition: height .32s var(--weich); }

/* ---------- Ueberlagerung (Leseprobe, Gewaehrleistung) ----------
   Öffnen UND Schließen weich: gesteuert über die Klasse .auf statt hartem
   hidden-Umschalten. Ohne .auf sind Schatten und Tafel durchsichtig und die
   Tafel leicht versetzt; mit .auf faden sie ein. Beim Schließen nimmt das JS
   die Klasse weg (Fade-out) und blendet erst nach dem Übergang aus. */
.ueber { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 1.5rem; }
.ueber[hidden] { display: none; }
.ueber-schatten {
  position: absolute; inset: 0; background: rgba(24,20,16,.55);
  backdrop-filter: blur(3px);
  opacity: 0; transition: opacity .28s var(--weich);
}
.ueber.auf .ueber-schatten { opacity: 1; }
.ueber-tafel {
  position: relative; background: var(--flaeche); border-radius: var(--rund);
  width: min(860px, 100%); max-height: min(88vh, 900px);
  display: flex; flex-direction: column; overflow: hidden;
  box-shadow: 0 30px 70px -20px rgba(24,20,16,.55);
  opacity: 0; transform: translateY(14px) scale(.985);
  transition: opacity .3s var(--weich), transform .3s var(--weich);
}
.ueber.auf .ueber-tafel { opacity: 1; transform: none; }
.ueber-tafel header {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.1rem 1.4rem; border-bottom: 1px solid var(--linie); flex: none;
}
.ueber-tafel header h3 { font-family: var(--display); font-size: 1.25rem; }
.ueber-inhalt { overflow: auto; padding: 1.6rem 1.8rem; flex: 1; }
.ueber-inhalt p { margin-bottom: 1rem; color: var(--tinte-weich); }
.ueber-inhalt h4 { font-family: var(--display); font-size: 1.3rem; margin-bottom: .8rem; }
.ueber-inhalt img { width: 100%; height: auto; display: block; border: 1px solid var(--linie); border-radius: 8px; }
/* Leseprobe als gescrollte Buchseiten (echtes Layout aus der PDF). Grauer
   Grund wie ein PDF-Viewer, damit die Seiten als Blätter wirken.

   Das Fenster ist für die Leseprobe breiter als sonst und die Seiten füllen
   es fast aus - eine Leseprobe, die man kaum lesen kann, ist keine. Ein
   Klick auf eine Seite zoomt sie auf volle Breite (etwa 1,4-fach); ein
   zweiter Klick zurück. Bewusst nur eine Stufe: mehr Zoom braucht
   Verschieben und Gesten, und dafür gibt es die PDF. */
.ueber-tafel--lp { width: min(980px, 100%); max-height: min(94vh, 1100px); }
.ueber-tafel--lp .ueber-inhalt { padding: 1.4rem 1rem; background: var(--papier-3); }
.lp-seiten { display: flex; flex-direction: column; gap: 1.4rem; align-items: center; }
.lp-seite {
  width: 100%; max-width: 660px; height: auto; display: block;
  border: 1px solid var(--linie); border-radius: 3px;
  box-shadow: 0 8px 26px -10px rgba(24,20,16,.4);
  cursor: zoom-in; transition: max-width .3s var(--weich), box-shadow .3s var(--weich);
}
.lp-seite.gezoomt { max-width: 100%; cursor: zoom-out; box-shadow: 0 14px 40px -12px rgba(24,20,16,.5); }
.lp-hinweis { font-size: .8rem; color: var(--tinte-blass); text-align: center; margin: -.4rem 0 .2rem; }
.lp-ende { text-align: center; font-size: .85rem; color: var(--tinte-blass); padding: .8rem 0 .4rem; }
/* Der Kaufbereich bleibt beim Lesen sichtbar - das ist der Zweck der
   Ueberlagerung gegenueber einer eigenen Unterseite. */

.ueber-buch { display: flex; align-items: center; gap: .8rem; min-width: 0; }
.ueber-buch i {
  width: 38px; height: 54px; flex: none; border-radius: 1px 3px 3px 1px;
  background: var(--bild-cover) center/cover; box-shadow: 0 3px 10px -4px rgba(24,20,16,.5);
}
.ueber-buch b { display: block; font-size: .95rem; }
.ueber-buch span { font-size: .84rem; color: var(--tinte-blass); }
@media (max-width: 560px) {
  .ueber { padding: 0; }
  .ueber-tafel { width: 100%; max-height: 100vh; border-radius: 0; }

}

.leiste {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
  background: rgba(248,243,234,.95); backdrop-filter: blur(14px);
  border-top: 1px solid var(--linie); box-shadow: 0 -8px 30px -12px rgba(24,20,16,.3);
  transform: translateY(105%); transition: transform .32s var(--weich);
}
.leiste.an { transform: translateY(0); }
.leiste .wrap { display: flex; align-items: center; gap: 1.1rem; padding: .7rem 0; }
.leiste-buch { display: flex; align-items: center; gap: .75rem; min-width: 0; flex: 1; }
.leiste-buch i { width: 34px; height: 48px; border-radius: 2px 4px 4px 2px; background: var(--bild-cover) center/cover; flex: none; box-shadow: 0 2px 8px -3px rgba(24,20,16,.5); }
.leiste-buch div { min-width: 0; }
.leiste-buch b { display: block; font-size: .89rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.leiste-buch span { font-size: .81rem; color: var(--gold); font-weight: 600; }

.schublade { position: fixed; inset: 0; z-index: 90; visibility: hidden; }
.schublade.auf { visibility: visible; }
.schatten { position: absolute; inset: 0; background: rgba(24,20,16,.45); opacity: 0; transition: opacity .28s; }
.schublade.auf .schatten { opacity: 1; }

.schublade.auf .tafel { transform: translateX(0); }

.zu { width: 38px; height: 38px; border: 0; background: transparent; border-radius: 50%; font-size: 1.15rem; color: var(--tinte-weich); transition: background .18s; }
.zu:hover { background: var(--papier-3); }

.zeile { display: grid; grid-template-columns: 50px minmax(0,1fr) auto; gap: .85rem; padding-bottom: 1rem; border-bottom: 1px solid var(--linie); }
.zeile i { width: 50px; height: 71px; border-radius: 3px; background: var(--bild-cover) center/cover; }
.zeile b { font-size: .92rem; line-height: 1.3; display: block; }
.zeile span { font-size: .83rem; color: var(--tinte-blass); display: block; }
.zeile strong { font-size: .95rem; white-space: nowrap; }
.zeile-rechts { display: grid; gap: .35rem; justify-items: end; align-content: start; }
.entfernen { border: 0; background: transparent; padding: 0; font: inherit; font-size: .78rem;
  color: var(--tinte-blass); text-decoration: underline; transition: color .18s; }
.entfernen:hover { color: var(--rost); }
/* Eigene Zeile unter dem Titel: als inline-flex im Textfluss ist die
   Steuerung mobil neben das umgebrochene "pro Stück" gerutscht. */
.menge--klein { display: flex; width: fit-content; margin-top: .45rem; }
.menge--klein button { flex: none; width: 30px; height: 30px; font-size: 1rem; }
.menge--klein input { flex: none; width: 32px; height: 30px; font-size: .85rem; }

.summe { display: flex; justify-content: space-between; align-items: baseline; }
.summe strong { font-family: var(--display); font-size: 1.35rem; color: var(--gold); }
.klein { font-size: .83rem; color: var(--tinte-blass); display: flex; justify-content: space-between; }

body:not(.zeigen) .marker { outline: 0; }
body:not(.zeigen) .marker::before { display: none; }

.schalter {
  position: fixed; right: 1rem; top: 5.2rem; z-index: 80;
  background: var(--espresso); color: var(--creme); border: 0; border-radius: var(--pille);
  padding: .68em 1.15em; font-size: .83rem; font-weight: 600; box-shadow: 0 8px 24px -8px rgba(0,0,0,.5);
  transition: background .2s, transform .2s;
}
.schalter:hover { background: var(--tinte); transform: translateY(-2px); }

:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; border-radius: 4px; }

@media (max-width: 900px) {
  .produkt-raster {
    grid-template-columns: 128px minmax(0, 1fr);
    grid-template-areas: "galerie kopf" "kauf kauf";
    gap: .85rem 1rem;
  }
  .galerie { position: static; }

  .beschreibung, .probe { grid-template-columns: 1fr; gap: 1.6rem; }
  .autorblock { grid-template-columns: 1fr; text-align: center; justify-items: center; }
  .reichweite { justify-content: center; }

  /* Cover, Autor, Titel, Sterne, Preis, Format und Kaufknopf ohne Scrollen
     im Bild – gemessen wird der Abstand des Knopfes vom Seitenanfang. */
  /* Auch hier gilt: der Kopf steht fest ueber der Seite (79 px).
     Im Entwurf lief er mit, deshalb genuegten dort .7rem. */
  .produkt { padding: calc(79px + .7rem) 0 .4rem; }
  .krume { display: none; }
  .buehne { padding: .6rem; border-radius: 12px; }
  .buch3d { width: 100%; --thick: 18px; }
  .buehne { padding: .7rem 1rem; }
  .daumen { display: none; }
  .buehne::after {
    content: var(--bilder-text, ""); position: absolute; right: .4rem; bottom: .4rem;
    background: rgba(33,26,18,.72); color: var(--creme); font-size: .62rem; font-weight: 600;
    padding: .22em .55em; border-radius: var(--pille);
  }
  .kauf { gap: .5rem; }
  h1 { font-size: 1.22rem; }
  .unter { font-size: .85rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .autorbild { width: 30px; height: 30px; }
  .autor-oben { gap: .5rem; }
  .autor-oben b { font-size: .89rem; line-height: 1.25; }
  .autor-oben em { font-size: .75rem; }
  /* Auf dem Handy nur Marke und Reichweite: die vollen Vornamen brachen die
     Zeile dreifach um. Sie stehen weiter unten im Autorenabschnitt. */
  .autor-oben em .namen { display: none; }
  .formate { grid-template-columns: repeat(3, 1fr); gap: .35rem; }
  .format { padding: .45rem .4rem; }
  .format b { font-size: .78rem; }
  .format span { font-size: .76rem; }
  .format em { display: none; }
  .preis { font-size: 1.6rem; }
  .abschnitt { padding: 2rem 0; }

  /* Was den Kauf begründet, aber nicht auslöst, steht hinter dem Knopf. */
  .liefer { order: 1; }
  .zahlarten { order: 2; }
  .vertrauen { order: 3; }
}
@media (max-width: 560px) {
  body { font-size: 16px; }
  .knopf-gold { flex: 1 1 auto; min-width: 0; padding: 0 1rem; }
  .menge button { width: 38px; }
  .menge input { width: 36px; }

  .leiste .wrap { gap: .6rem; }
  .leiste-buch span { display: none; }
}
/* ---------- Fingerziele ----------
   Am Finger braucht jedes Bedienelement 44x44 (Apple Human Interface
   Guidelines; Google nennt 48dp). Am Zeigegeraet waere das plump, deshalb
   haengt es an (pointer: coarse) statt an einer Breite - ein Tablet mit
   1024px ist ein Fingergeraet, ein 1024px-Browserfenster nicht.
   Ausgenommen bleiben Links, die als Inline-Element im Fliesstext stehen:
   die liessen sich nicht vergroessern, ohne den Zeilenfall zu zerstoeren. */
@media (pointer: coarse) {
  .knopf { min-height: 48px; }
  .menge button { width: 44px; height: 48px; }
  .menge input { width: 44px; height: 48px; }
  .menge--klein button { width: 44px; height: 44px; }
  .menge--klein input { width: 44px; height: 44px; }
  .knopf-klein, .knopf-mini { min-height: 44px; }
  .sterne { min-height: 44px; align-content: center; }
  .zu { flex: none; width: 44px; height: 44px; }
  .autor-oben { min-height: 44px; align-items: center; }
  .schalter { min-height: 44px; }
  .daumen button { min-width: 44px; min-height: 44px; }
  .entfernen { min-height: 44px; display: inline-flex; align-items: center; }
  /* Bewertungs-Filterbalken, Amazon-Link und der Gewährleistungs-Link sind
     echte Bedienelemente – auf Touch brauchen sie die volle Fingerhöhe. */
  .balken-zeile { min-height: 44px; }
  .amazon-link { min-height: 44px; display: inline-flex; align-items: center; }
  .buchkarte-add { width: 48px; height: 48px; }
  .gewaehr { min-height: 44px; }
  .quick-add, .format { min-height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* Beim Bereinigen der Uebernahme mit herausgefallen: die Eckenrundung des
   Entwurfs. Die Bildvariablen (--bild-mockup, --bild-cover, --bild-autor)
   stehen bewusst nicht hier, sondern an der jeweiligen Buchseite. */
:root { --kante: 11px; }

/* Die Leseprobe-Vorschau zeigt hier echte Buchseiten statt eines
   Textausschnitts wie im Entwurf - drei Seiten nebeneinander. Ohne diese
   Regel hatten die Bilder keine Groesse und der Kasten blieb leer. */
.probe-blatt--bilder {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .7rem;
  background: none;
  border: 0;
  padding: 0;
  box-shadow: none;
}
.probe-blatt--bilder img {
  width: 100%; height: auto; display: block;
  border-radius: 6px;
  box-shadow: 0 4px 10px rgba(24,20,16,.18), 0 24px 48px -16px rgba(24,20,16,.4);
}
@media (max-width: 560px) {
  .probe-blatt--bilder { grid-template-columns: repeat(3, 1fr); gap: .45rem; }
}

/* Beim Bereinigen mit herausgefallen: Der Filter suchte '.kopf' als
   Praefix und traf damit auch .kopfdaten und .kopfzeile. Ohne sie
   klebten Titel, Untertitel und die Abschnittsueberschriften. */
.kopfdaten { grid-area: kopf; display: flex; flex-direction: column; gap: .8rem; min-width: 0; }
@media (max-width: 900px) { .kopfdaten { gap: .45rem; } }
.kopfzeile { display: flex; flex-direction: column; gap: .35rem; margin-bottom: 1.6rem; }

/* ================================================================
   Nachschliff der Buchseite (20.08.2026, nach Sichtprüfung)
   ================================================================ */

/* Der Autorenblock steht auf dunklem Grund. Der Knopf erbte die dunkle
   Schrift des hellen Bereichs und war praktisch unsichtbar. */
.abschnitt--dunkel .knopf-rand {
  color: var(--creme, #f4ecdd);
  border-color: rgba(244, 236, 221, 0.38);
}
.abschnitt--dunkel .knopf-rand:hover {
  background: rgba(244, 236, 221, 0.1);
  border-color: rgba(244, 236, 221, 0.7);
}

/* Die Biografie kommt als mehrere Absätze - ohne Abstand liefen sie zu
   einem Block zusammen. Frühere Fassungen der Website konnten gar keine
   Absätze, deshalb steht das hier ausdrücklich. */
.autorblock p { margin: 0 0 1rem; }
.autorblock p:last-of-type { margin-bottom: 0; }
.autorblock h2 { margin-bottom: 0.9rem; }

/* "2 Bücher bei uns" klebte direkt am Text. */
.autorzahlen { margin-top: 1.5rem; margin-bottom: 1.6rem; }
.autorzahlen div { display: flex; align-items: baseline; gap: 0.45rem; }

/* Abschnittsüberschriften standen zu dicht über ihrem Inhalt - im Entwurf
   26 px, das ist bei "Passt zu diesem Buch" und den Fragen zu wenig. */
.abschnitt .kopfzeile { margin-bottom: 2.6rem; }

/* Produktbilder sind keine Bücher: flach, ohne Rücken und ohne Neigung.
   Eine aufgeschlagene Doppelseite in einem Buchrahmen mit Buchrücken ist
   schlicht falsch. */
.buehne .produktbild {
  display: block;
  width: 100%;
  max-width: min(420px, 100%);
  height: auto;
  margin: 0 auto;
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(24,20,16,.14), 0 22px 44px -18px rgba(24,20,16,.32);
}
.buehne .produktbild[hidden], .buehne .buch3d[hidden] { display: none; }

/* Die Rückseite: dasselbe Buch, von hinten gesehen.

   Dreht man ein Buch um, liegt der Rücken rechts und der Buchblock links –
   genau spiegelverkehrt zur Vorderseite. Jeder Teil wandert deshalb einzeln
   auf die andere Seite.

   scaleX(-1) auf das ganze Buch war der erste Versuch und funktioniert bei
   3D NICHT: Der Rückdeckel liegt per translateZ hinter dem Cover, beim
   Spiegeln kam er nach vorn und stand als schwarzer Balken daneben.
   Gemessen am 21.08.2026 an der rechten Kante. */
.buch3d[data-art="rueckseite"] {
  -webkit-transform: perspective(1400px) rotateY(15deg);
  transform: perspective(1400px) rotateY(15deg);
}
.buehne:hover .buch3d[data-art="rueckseite"] {
  -webkit-transform: perspective(1400px) rotateY(8deg);
  transform: perspective(1400px) rotateY(8deg);
}
/* Buchblock nach links: verankert an der linken Kante, in die Gegenrichtung
   aufgeklappt. */
.buch3d[data-art="rueckseite"] .seiten {
  left: auto;
  right: 100%;
  -webkit-transform-origin: 100% 50%;
  transform-origin: 100% 50%;
  -webkit-transform: translateZ(1px) rotateY(-90deg);
  transform: translateZ(1px) rotateY(-90deg);
}
/* Falzlicht von der anderen Seite. */
.buch3d[data-art="rueckseite"]::before {
  background: linear-gradient(270deg,
    rgba(0,0,0,.15) 0%, rgba(255,255,255,.12) 1.6%,
    rgba(0,0,0,.09) 3.6%, rgba(0,0,0,0) 7%);
}

/* Die Herkunft jeder Stimme muss erkennbar sein: Eine fremde Bewertung als
   eigene auszugeben wäre eine Irreführung über die Echtheit (Anhang zu
   § 3 UWG). Deshalb trägt jede Karte ihre Quelle. */
.quelle--eigen { background: rgba(76, 132, 76, 0.14); color: #2f6b34; }
.quelle--amazon { background: var(--paper-3, #ece0cb); color: var(--ink-soft, #564c40); }

.stimme-datum { font-size: 0.75rem; color: var(--ink-faint, #8a7d6c); margin-top: 0.15rem; }
.stimme > b { font-size: 0.95rem; }

/* Fotos, die Leser ihrer Bewertung beigelegt haben. */
.bewert-bilder { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.2rem; }
.bewert-bilder img {
  width: 64px; height: 64px; object-fit: cover;
  border-radius: 8px; border: 1px solid var(--line, rgba(24,20,16,.12));
}

/* Die Sternverteilung ist hier eine Anzeige, kein Filter - im Entwurf waren
   es Knöpfe. Ohne diese Regel erbten die Zeilen deren Knopf-Aussehen. */
.balken .balken-zeile {
  display: grid; grid-template-columns: 3.2rem 1fr 2.5rem;
  align-items: center; gap: 0.6rem;
  background: none; border: 0; padding: 0.18rem 0; text-align: left; cursor: default;
}
.balken .balken-zeile u {
  display: block; height: 8px; border-radius: 999px;
  background: var(--paper-3, #ece0cb); overflow: hidden; text-decoration: none;
}
.balken .balken-zeile u i { display: block; height: 100%; background: var(--gold, #c08a28); }
.balken .balken-zahl { text-align: right; font-size: 0.85rem; color: var(--ink-faint, #8a7d6c); }

/* Die Stimmen brauchen eine gemeinsame Höhe: Amazon-Texte reichen von einem
   Satz bis zu zwanzig Zeilen, nebeneinander sah das Raster zerrissen aus.
   Sechs Zeilen zeigen den Kern, der Rest steht auf Amazon. */
.stimmen { align-items: start; }
.stimme p {
  display: -webkit-box;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0;
}
.stimme > b {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* "Sofort kaufen" gibt es auf der Buchseite nicht mehr - dort steht jetzt
   der eine Express-Knopf. Die Regel bleibt, weil andere Seiten (Merch) den
   Knopf weiterhin benutzen. */
.knopf-sofort { width: 100%; margin-top: 0.6rem; }
.knopf-sofort.is-busy { opacity: 0.6; pointer-events: none; }

/* Punkte unter der Buehne - Ersatz fuer die auf dem Handy ausgeblendeten
   Vorschaubilder. Auf dem Rechner sind die Vorschaubilder da, dort waeren
   die Punkte doppelt gemoppelt. */
.punkte { display: none; }
@media (max-width: 900px) {
  /* Breite begrenzen und schrumpfen lassen: sonst sind sechs Punkte breiter
     als das Bild und ziehen die ganze Spalte auseinander. */
  .punkte { display: flex; justify-content: center; align-items: center; gap: 0; margin-top: .35rem; width: 100%; }
  .punkt {
    width: 26px; height: 26px; padding: 0; border: 0; background: none;
    flex: 0 1 auto; min-width: 0;
    display: grid; place-items: center; cursor: pointer;
  }
  .punkt::after {
    content: ""; width: 7px; height: 7px; border-radius: 50%;
    background: rgba(24, 20, 16, .22); transition: background .18s ease, transform .18s ease;
  }
  .punkt.ist-aktiv::after { background: var(--gold); transform: scale(1.35); }
}

/* Vollbild-Ansicht der Buchbilder. Auf dem Handy misst die Buehne nur
   128 px - ein Klappentext ist darin nicht lesbar. */
.vollbild {
  /* Ueber der Navigation (10000), aber unter dem Cookie-Hinweis (10050):
     der muss zuerst beantwortet werden. */
  position: fixed; inset: 0; z-index: 10020;
  background: rgba(24, 20, 16, .93);
  display: grid; place-items: center; padding: 3.2rem 1rem 2.4rem;
  cursor: zoom-out;
}
.vollbild[hidden] { display: none; }
.vollbild-bild {
  /* Nicht 100%: in einem Grid mit automatischer Zeilenhoehe bezieht sich das
     auf den Inhalt selbst und begrenzt nichts. Gemessen: 1022 px Bild in
     einem 900 px hohen Fenster. Deshalb gegen die Fensterhoehe rechnen,
     abzueglich der Polster oben und unten. dvh beruecksichtigt die
     ein- und ausfahrende Leiste auf dem Handy. */
  max-width: min(100%, 720px);
  max-height: calc(100vh - 5.6rem);
  max-height: calc(100dvh - 5.6rem);
  object-fit: contain; border-radius: 6px; cursor: default;
  box-shadow: 0 18px 48px rgba(0, 0, 0, .5);
}
.vollbild-x {
  position: absolute; top: .7rem; right: .9rem;
  width: 44px; height: 44px; border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, .14); color: #fff;
  font-size: 1.6rem; line-height: 1; cursor: pointer;
}
.vollbild-x:hover { background: rgba(255, 255, 255, .24); }
.vollbild-zaehler {
  position: absolute; bottom: .9rem; left: 50%; transform: translateX(-50%);
  color: rgba(255, 255, 255, .8); font-size: .8rem; letter-spacing: .04em;
}

/* Express-Kauf auf der Buchseite: genau EIN Knopf, direkt unter dem
   Warenkorb-Knopf. Der Bereich bleibt verborgen, solange Stripe nicht
   gemeldet hat, dass dieses Gerät die gewählte Zahlart überhaupt kann. */
.express { margin: 0; }
.express[hidden] { display: none; }
.express-fehler {
  margin: .6rem 0 0; font-size: .82rem; color: #b3261e;
}
.express-fehler[hidden] { display: none; }