/*!
 * THK Verlag — Site Stylesheet
 * v0.16.2.0 — CI-Token-Layer auf Mockup-Niveau gezogen (Welle 1)
 *
 * Designsprache:
 *   - Warmes Papierweiß als Träger
 *   - Tintenblau als Headline-Farbe
 *   - Bordeaux als Akzent
 *   - Gedecktes Gold sehr sparsam
 *   - Serif-Headlines (Cormorant Garamond), Sans-Body (Inter)
 *
 * v0.16.2.0 — Welle 1 des CI-Refits nach Mockup-Vorgabe:
 *   - Tokens für Card-/Footer-/Akkordeon-Komponenten ergänzt.
 *   - Drift-Hex-Stellen in thk-blocks.css auf Tokens umgezogen
 *     (Tailwind-Slate raus, eigene Mute-Töne rein).
 *   - Bordeaux-Drift eingesammelt (4 leicht verschiedene Rot-Töne
 *     auf 2 semantische Tokens reduziert).
 *   - KEIN Layout-Eingriff in dieser Welle. Header/Footer-Markup
 *     bleibt unverändert, Block-Typen bleiben unverändert.
 *     Reines Token-/Farb-Refit.
 */

/* ══════════════════════════════════════════════════════════════════
 * 1. TOKEN-SYSTEM
 * ══════════════════════════════════════════════════════════════════ */
:root {
  /* ── Papier-Familie ─────────────────────────────────────────── */
  --thk-papier:        #fbf7ef;
  --thk-papier-tief:   #f3ece0;
  --thk-papier-warm:   #f8efde;
  /* v0.16.2.0 NEU: leicht wärmere Card-Beige (Mockup-Lead-Card). */
  --thk-papier-card:   #f5ecd9;

  /* ── Tinte-Familie ──────────────────────────────────────────── */
  --thk-tinte:         #1e3a5f;
  --thk-tinte-dunkel:  #142845;
  --thk-tinte-hell:    #4a6685;
  /* v0.16.2.0 NEU: Footer-Hintergrund — minimal dunkler als
     tinte-dunkel, damit der Footer als eigene Fläche wirkt. */
  --thk-footer-bg:     #0f1f38;
  --thk-footer-text:   #d8cdb8;     /* gedeckt-hell auf marine */
  --thk-footer-link:   #f3ece0;     /* etwas heller für Hover */

  /* ── Bordeaux-Familie ───────────────────────────────────────── */
  --thk-bordeaux:      #7a2c1e;
  --thk-bordeaux-tief: #5a1f15;
  --thk-bordeaux-hell: #a8503a;

  /* ── Gold (sparsam) ─────────────────────────────────────────── */
  --thk-gold:          #b8954a;
  --thk-gold-hell:     #d8b876;

  /* ── Text + Linien ──────────────────────────────────────────── */
  --thk-text:          #2a2520;
  --thk-text-mute:     #6e6258;     /* der Mute-Ton für Bildunter-
                                       schriften, Captions, Helfer */
  --thk-text-mute-stark: #4a4238;   /* v0.16.2.0 NEU: dunkler-mute
                                       für Akzent-Body in Spalten */
  --thk-line:          #d8cdb8;
  --thk-line-soft:     rgba(216, 205, 184, 0.5);

  /* ── Akkordeon-Komponente (für Welle 3 vorbereitet) ─────────── */
  /* v0.16.2.0 NEU: Tokens für die Mockup-Akkordeon-Optik.
     Werden in Welle 3 (0.16.4.0) eingesetzt, aber schon hier
     gesetzt, damit Welle-2-Layouts darauf zugreifen können. */
  --thk-akkordeon-icon-bg:    var(--thk-papier-tief);
  --thk-akkordeon-icon-color: var(--thk-tinte);
  --thk-akkordeon-line:       var(--thk-line);

  /* ── UI-Status (semantisch, nicht CI) ──────────────────────── */
  /* v0.16.2.0 NEU: --thk-danger wurde bislang nur referenziert,
     aber nirgends definiert (fiel still auf Browser-Default). Hier
     ein bewusster Wert auf Bordeaux-Linie, klar als Fehler-Token. */
  --thk-danger:        #b3261e;
  --thk-success:       #166534;
  --thk-warning:       #92400e;

  /* ── Rolle-Aliase ───────────────────────────────────────────── */
  --thk-primary:       var(--thk-tinte);
  --thk-accent:        var(--thk-bordeaux);

  /* ── Typografie ─────────────────────────────────────────────── */
  --thk-serif:  'Cormorant Garamond', 'Playfair Display', Georgia, 'Times New Roman', serif;
  --thk-sans:   'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', sans-serif;

  /* ── Spacing / Radius / Schatten ────────────────────────────── */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --radius-sm: 4px;
  --radius:    8px;
  --radius-lg: 14px;
  --shadow-cover: 0 18px 40px -20px rgba(20, 40, 69, 0.45), 0 6px 12px -8px rgba(20, 40, 69, 0.3);
  --shadow-soft:  0 4px 18px -8px rgba(20, 40, 69, 0.15);

  /* ── Layout-Container ──────────────────────────────────────── */
  --content-max: 1180px;
  --content-narrow: 740px;
}

/* ══════════════════════════════════════════════════════════════════
 * 2. RESET + BASE
 * ══════════════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; }
html { font-size: 17px; line-height: 1.65; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--thk-papier);
  background-image:
    radial-gradient(ellipse at top right, rgba(184, 149, 74, 0.04) 0%, transparent 50%),
    radial-gradient(ellipse at bottom left, rgba(122, 44, 30, 0.03) 0%, transparent 60%);
  color: var(--thk-text);
  font-family: var(--thk-sans);
  font-weight: 400;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4, h5, h6 {
  font-family: var(--thk-serif);
  color: var(--thk-tinte);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin: 0 0 var(--space-4) 0;
}
h1 { font-size: clamp(2rem, 4.5vw, 3.5rem); }
h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); }
h3 { font-size: 1.4rem; }
h4 { font-size: 1.15rem; font-family: var(--thk-sans); font-weight: 600; letter-spacing: 0.01em; color: var(--thk-tinte-dunkel); }
p { margin: 0 0 var(--space-4) 0; }
a {
  color: var(--thk-bordeaux);
  text-decoration: none;
  text-decoration-color: rgba(122, 44, 30, 0.25);
  text-underline-offset: 3px;
  transition: color 0.15s ease, text-decoration-color 0.15s ease;
}
a:hover { color: var(--thk-bordeaux-tief); text-decoration: underline; text-decoration-color: var(--thk-bordeaux); }
img { max-width: 100%; height: auto; display: block; }
::selection { background: rgba(122, 44, 30, 0.2); color: var(--thk-bordeaux-tief); }

/* ══════════════════════════════════════════════════════════════════
 * 3. LAYOUT-PRIMITIVES
 * ══════════════════════════════════════════════════════════════════ */
.container { width: 100%; max-width: var(--content-max); margin: 0 auto; padding: 0 var(--space-5); }
.container--narrow { max-width: var(--content-narrow); }
.section { padding: var(--space-8) 0; }
.section--snug { padding: var(--space-6) 0; }
.section--airy { padding: var(--space-9) 0; }
.eyebrow {
  font-family: var(--thk-sans);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--thk-bordeaux);
  font-weight: 600;
  margin-bottom: var(--space-3);
}
.section-title { font-size: clamp(1.6rem, 2.8vw, 2.3rem); margin-bottom: var(--space-2); }
.section-lead { color: var(--thk-text-mute); font-size: 1.05rem; max-width: 60ch; margin-bottom: var(--space-6); }

/* ══════════════════════════════════════════════════════════════════
 * 4. HEADER + NAVI
 * ══════════════════════════════════════════════════════════════════ */
.site-header {
  background: rgba(251, 247, 239, 0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--thk-line-soft);
  position: sticky;
  top: 0;
  z-index: 50;
}
.site-header__inner {
  width: 100%; max-width: var(--content-max); margin: 0 auto;
  padding: var(--space-4) var(--space-5);
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-6);
}
.site-brand {
  font-family: var(--thk-serif);
  font-size: 1.5rem;
  color: var(--thk-tinte);
  text-decoration: none;
  letter-spacing: 0.02em;
  font-weight: 500;
  white-space: nowrap;
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1;
}
.site-brand:hover { color: var(--thk-tinte-dunkel); text-decoration: none; }
/* v0.9.9.1 — Logo aus dem Branding (Einstellungen → Erscheinungsbild).
   v0.19.4.0 — Welle 3 P4: max-height von 56px auf 72px erhöht. Mit dem
   Wegfall der „Verlag aus Arnstadt"-Unterzeile bekommt das Logo allein
   mehr Höhe — die Navi-Höhe folgt der Logo-Höhe via align-items:center
   im umschließenden Header-Inner-Container, also passt sich die Navi
   automatisch an. max-width entsprechend auf 280px mit, damit
   liegendere Logo-Formate nicht abgeschnitten wirken. */
.site-brand__logo {
  display: block;
  max-height: 72px;
  max-width: 280px;
  width: auto;
  height: auto;
  object-fit: contain;
}
.site-brand__name {
  display: block;
}
.site-brand__sub {
  display: block;
  font-family: var(--thk-sans);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--thk-text-mute);
  margin-top: 4px;
}
.site-nav { display: flex; align-items: center; gap: var(--space-5); flex-wrap: wrap; }
.site-nav a {
  font-family: var(--thk-sans);
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--thk-text);
  text-decoration: none;
  padding: var(--space-2) 0;
  position: relative;
}
.site-nav a::after {
  content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 2px;
  background: var(--thk-bordeaux); transition: width 0.2s ease;
}
.site-nav a:hover { color: var(--thk-bordeaux); }
.site-nav a:hover::after { width: 100%; }
.site-nav a.active { color: var(--thk-bordeaux); }
.site-nav a.active::after { width: 100%; }
.site-nav-toggle {
  display: none;
  background: transparent;
  border: 1px solid var(--thk-line);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3);
  font-family: var(--thk-sans);
  font-size: 0.85rem;
  color: var(--thk-text);
  cursor: pointer;
  min-height: 44px; /* v0.19.8.0 — Touch-Target ≥44 */
}

/* v0.19.8.0 — Mobile-Cart-Mini im Header (außerhalb der Nav).
   Auf ≤820px sichtbar, gibt dem User Cart-Zugang ohne Drawer öffnen
   zu müssen. Auf Desktop versteckt (dort steckt der Cart in der Nav). */
.site-header__cart-mobile {
  display: none;
  position: relative;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: var(--space-2);
  border-radius: var(--radius-sm);
  color: var(--thk-text);
  text-decoration: none;
  font-size: 1.2rem;
  line-height: 1;
}
.site-header__cart-mobile:hover {
  background: var(--thk-papier-tief);
  color: var(--thk-bordeaux);
  text-decoration: none;
}
.site-header__cart-mobile.active {
  color: var(--thk-bordeaux);
}
.site-header__cart-mobile-badge {
  position: absolute;
  top: 4px;
  right: 4px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  background: var(--thk-bordeaux);
  color: #fff;
  border-radius: 999px;
  font-family: var(--thk-sans);
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
}

/* v0.19.8.0 — Mobile-Drawer-Inhalt (Navigations-Liste).
   Der äußere `.m-drawer`-Container kommt aus mobile.css (Familie-
   Modul), hier nur Verlag-Look der Links + Header-Bereich. */
.site-mobile-nav {
  /* Auf Desktop nie sichtbar — auch nicht via JS-Aufruf aus Versehen.
     Familie-Modul hat das Drawer-Element global `position: fixed` mit
     translateX(100%), aber `display: none` ist die robustere Garantie. */
  font-family: var(--thk-sans);
}
.site-mobile-nav__header {
  display: flex;
  align-items: center;
  min-height: 60px;
  padding: 0 2.5rem 1rem 0; /* rechts Platz für m-drawer-close */
  border-bottom: 1px solid var(--thk-line-soft);
  margin-bottom: 0.75rem;
}
.site-mobile-nav__title {
  font-family: var(--thk-serif);
  font-size: 1.2rem;
  font-weight: 500;
  color: var(--thk-tinte);
  letter-spacing: 0.02em;
}
.site-mobile-nav__items {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.site-mobile-nav__items a {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.85rem 0.25rem;
  font-size: 1rem;
  color: var(--thk-text);
  text-decoration: none;
  border-bottom: 1px solid var(--thk-line-soft);
  min-height: 44px;
}
.site-mobile-nav__items a:last-child { border-bottom: none; }
.site-mobile-nav__items a:hover {
  color: var(--thk-bordeaux);
  text-decoration: none;
}
.site-mobile-nav__items a.active {
  color: var(--thk-bordeaux);
  font-weight: 500;
}
.site-mobile-nav__items .site-nav__cart-badge {
  margin-left: auto; /* Badge ans Zeilenende, wenn Cart-Link */
}

@media (min-width: 821px) {
  /* Drawer auf Desktop hart aus dem DOM-Flow nehmen — Safety, falls
     jemand per Console manuell `osMobile.openDrawer(...)` triggert. */
  .site-mobile-nav { display: none !important; }
}

@media (max-width: 820px) {
  .site-header__inner { gap: var(--space-3); }
  .site-nav-toggle { display: block; }
  .site-header__cart-mobile { display: inline-flex; }
  /* Desktop-Inline-Nav verbergen — die Links wandern in den Drawer. */
  .site-nav { display: none; }
}

/* ══════════════════════════════════════════════════════════════════
 * 5. HERO
 * ══════════════════════════════════════════════════════════════════ */
.hero { position: relative; padding: var(--space-9) 0 var(--space-8); overflow: hidden; }
.hero::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0;
  background:
    radial-gradient(ellipse 60% 40% at 80% 30%, rgba(184, 149, 74, 0.07) 0%, transparent 70%),
    radial-gradient(ellipse 50% 50% at 20% 90%, rgba(122, 44, 30, 0.05) 0%, transparent 70%);
  pointer-events: none;
}
.hero__inner {
  width: 100%; max-width: var(--content-max); margin: 0 auto;
  padding: 0 var(--space-5);
  /* v0.15.1.0 — Verhältnis korrigiert: Text-Spalte schmaler, Cover-Bühne breiter */
  display: grid; grid-template-columns: 0.9fr 1.1fr; gap: var(--space-8);
  align-items: center; position: relative;
}
.hero__text { padding-right: var(--space-4); }
.hero__claim {
  font-family: var(--thk-serif);
  /* v0.15.1.0 — Headline ein Schuss kleiner (4rem → 3.2rem oben),
     damit die Cover-Bühne den optischen Schwerpunkt bilden kann. */
  font-size: clamp(1.9rem, 4.2vw, 3.2rem);
  line-height: 1.08;
  color: var(--thk-tinte);
  margin: 0 0 var(--space-5) 0;
  font-weight: 500;
  letter-spacing: -0.015em;
}
.hero__claim em { font-style: italic; color: var(--thk-bordeaux); }
.hero__lead { font-size: 1.1rem; color: var(--thk-text-mute); max-width: 48ch; margin-bottom: var(--space-6); line-height: 1.55; }
.hero__cta {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  background: var(--thk-tinte); color: var(--thk-papier);
  font-family: var(--thk-sans); font-weight: 500; font-size: 1rem;
  border-radius: var(--radius); text-decoration: none;
  transition: background 0.15s ease, transform 0.15s ease;
}
.hero__cta:hover { background: var(--thk-tinte-dunkel); color: var(--thk-papier); text-decoration: none; transform: translateY(-1px); }
.hero__cta::after { content: '→'; font-size: 1.1em; }

/* 0.34.1.0 — Bühne: ein Titel im Rampenlicht, rotierend.
   Cover groß links auf einem warmen Lichtkreis, rechts Etikett, Titel,
   Autor, Kurztext, Preis. Folien liegen übereinander und blenden weich
   (Cover schwebt leicht hoch). Punkte und Pfeile darunter. Ersetzt die
   Vier-Cover-Reihe aus 0.34.0.0 und den schiefen Stapel davor. */
.hero__fakten {
  margin: var(--space-4) 0 0; font-size: 0.85rem; color: var(--thk-text-mute);
  font-family: var(--thk-sans); letter-spacing: 0.01em;
}
.buehne { position: relative; }
.buehne__folien { position: relative; min-height: 460px; }
.buehne__folie {
  position: absolute; inset: 0;
  display: grid; grid-template-columns: 250px 1fr; gap: var(--space-6); align-items: center;
  opacity: 0; visibility: hidden; transition: opacity 0.6s ease, visibility 0s linear 0.6s;
}
.buehne__folie.ist-aktiv { opacity: 1; visibility: visible; transition: opacity 0.6s ease; z-index: 1; }
.buehne__folie::before {
  /* Lichtkreis hinter dem Cover */
  content: ''; position: absolute; left: -40px; top: 50%; width: 330px; height: 330px; transform: translateY(-50%);
  border-radius: 50%; background: radial-gradient(circle, rgba(184, 149, 74, 0.22) 0%, rgba(184, 149, 74, 0.08) 45%, transparent 70%);
  pointer-events: none;
}
.buehne__cover {
  position: relative; display: block; width: 250px; aspect-ratio: 2 / 3;
  border-radius: 2px 6px 6px 2px; overflow: hidden;
  background: linear-gradient(135deg, #c4b8a0 0%, #a89880 100%);
  box-shadow: 0 24px 48px -18px rgba(20, 40, 69, 0.5), 0 6px 14px -6px rgba(20, 40, 69, 0.25);
  transform: translateY(12px); transition: transform 0.6s ease, box-shadow 0.3s ease;
}
.buehne__cover::after { content: ''; position: absolute; inset: 0; left: 0; width: 6px; background: linear-gradient(90deg, rgba(0,0,0,0.2), transparent); }
.buehne__cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.buehne__folie.ist-aktiv .buehne__cover { transform: translateY(0); }
.buehne__cover:hover { box-shadow: 0 30px 56px -18px rgba(20, 40, 69, 0.55); }
.buehne__text { position: relative; min-width: 0; }
.buehne__etikett {
  display: inline-block; font-family: var(--thk-sans); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em;
  font-weight: 600; padding: 0.25rem 0.55rem; border-radius: 3px; margin-bottom: var(--space-3);
  background: var(--thk-bordeaux); color: var(--thk-papier);
}
.buehne__etikett--spitzentitel { background: var(--thk-gold); color: var(--thk-text); }
.buehne__etikett--bestseller { background: var(--thk-tinte); }
.buehne__etikett--neu { background: var(--thk-papier); color: var(--thk-bordeaux); border: 1px solid var(--thk-bordeaux); }
.buehne__titel { font-family: var(--thk-serif); font-size: clamp(1.4rem, 2.2vw, 1.9rem); line-height: 1.15; font-weight: 500; margin: 0 0 var(--space-2); color: var(--thk-tinte); }
.buehne__titel a { color: inherit; text-decoration: none; }
.buehne__titel a:hover { color: var(--thk-bordeaux); }
.buehne__autor { margin: 0 0 var(--space-3); color: var(--thk-text-mute); font-size: 0.95rem; }
.buehne__kurz { margin: 0 0 var(--space-4); color: var(--thk-text); line-height: 1.55; font-size: 0.95rem; }
.buehne__preis { margin: 0; font-size: 1.05rem; font-weight: 500; display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; }
.buehne__link { font-family: var(--thk-sans); font-weight: 500; color: var(--thk-bordeaux); text-decoration: none; border-bottom: 1px solid currentColor; }
.buehne__link:hover { color: var(--thk-tinte); text-decoration: none; }
.buehne__steuer { display: flex; align-items: center; justify-content: center; gap: var(--space-3); margin-top: var(--space-4); }
.buehne__punkte { display: flex; gap: 8px; }
.buehne__punkt {
  width: 9px; height: 9px; border-radius: 50%; border: 0; padding: 0; cursor: pointer;
  background: rgba(30, 58, 95, 0.22); transition: background 0.2s ease, transform 0.2s ease;
}
.buehne__punkt.ist-aktiv { background: var(--thk-tinte); transform: scale(1.25); }
.buehne__pfeil {
  width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--thk-line-soft); background: transparent;
  color: var(--thk-tinte); font-size: 1.4rem; line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  transition: background 0.15s ease;
}
.buehne__pfeil:hover { background: var(--thk-papier-tief); }
/* Ohne JS: erste Folie statisch, Steuerung weg */
.buehne:not(.buehne--js) .buehne__steuer { display: none; }
@media (max-width: 1100px) {
  .buehne__folie { grid-template-columns: 210px 1fr; gap: var(--space-5); }
  .buehne__cover { width: 210px; }
  .buehne__folie::before { width: 280px; height: 280px; left: -35px; }
}
@media (max-width: 860px) {
  .hero__inner { grid-template-columns: 1fr; gap: var(--space-6); }
  .hero__text { padding-right: 0; }
  .buehne__folien { min-height: 300px; }
  .buehne__folie { grid-template-columns: 120px 1fr; gap: var(--space-4); align-items: start; }
  .buehne__cover { width: 120px; transform: none; }
  .buehne__folie::before { width: 180px; height: 180px; left: -30px; top: 90px; transform: none; }
  .buehne__titel { font-size: 1.25rem; }
  .buehne__kurz { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; font-size: 0.9rem; }
  .buehne__steuer { justify-content: flex-start; }
}

/* ══════════════════════════════════════════════════════════════════
 * 6. BUCHKARTEN
 * ══════════════════════════════════════════════════════════════════ */
.book-grid {
  /* v0.19.6.0 — Cover-Dichte aus Setting `liste_card_dichte`
     (BrandingService::cssVariablesInline). 220px = Default „Standard". */
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--card-min, 220px), 1fr));
  gap: var(--space-6) var(--space-5);
}
.book-card {
  /* v0.19.5.8 — min-width: 0 ist die Standard-Heilung für CSS-Grid-1fr,
     das von „Spalten gleich verteilen" auf „inhaltsgetrieben" umschaltet,
     sobald ein grid-item einen min-content-Wert hat, der größer ist als
     der theoretische 1fr-Slot. Konkreter Auslöser hier: lange deutsche
     Komposita ohne Bindestrich (z.B. „Kirchenkoboldgeschichten",
     „Spitzentitel", „Reformationsjubiläum"), die der Browser nicht
     umbrechen darf und deshalb als min-content der ganzen Spalte
     einrechnet. Resultat war: eine Spalte 225px, drei Spalten 187px.
     `min-width: 0` erlaubt dem grid-item, unter seinen min-content zu
     schrumpfen — kombiniert mit `overflow-wrap: anywhere` auf den
     Textfeldern darunter bricht das Wort dann sauber innerhalb der
     Card statt die Spalte aufzublähen. */
  min-width: 0;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: var(--thk-text);
  transition: transform 0.2s ease;
}
.book-card:hover { color: var(--thk-text); text-decoration: none; transform: translateY(-3px); }
.book-card__cover {
  /* v0.19.5.6 — Bewährter padding-bottom-Trick statt aspect-ratio.
     aspect-ratio greift in komplexen Flex-Kontexten nicht immer
     zuverlässig — wenn ein Cover-Bild mit unüblicher intrinsischer
     Größe (z.B. Schattenmächte mit Hochformat) im Flex-Item drinsteckt,
     kann der Browser das aspect-ratio übersteuern und das Bild seine
     natürliche Höhe behalten lassen.
     padding-bottom:150% (= 3/2 = Aspektverhältnis 2:3) erzwingt die
     Container-Höhe IMMER, in jedem Browser, in jedem Kontext.
     Image absolut positioniert füllt diesen Container voll aus. */
  width: 100%;
  height: 0;
  padding-bottom: 150%;
  background: linear-gradient(135deg, var(--thk-papier-tief) 0%, #c8baa0 100%);
  border-radius: 2px 5px 5px 2px;
  box-shadow: var(--shadow-cover);
  overflow: hidden;
  position: relative;
  margin-bottom: var(--space-4);
}
.book-card__cover img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.book-card__cover::before { content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 4px; background: rgba(0, 0, 0, 0.12); z-index: 1; }
.book-card__badge {
  position: absolute; top: var(--space-3); left: var(--space-3);
  font-family: var(--thk-sans); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em;
  padding: 0.25rem 0.55rem; border-radius: 3px; font-weight: 600;
}
.book-card__badge--empfehlung   { background: var(--thk-bordeaux); color: var(--thk-papier); }
.book-card__badge--bestseller   { background: var(--thk-tinte); color: var(--thk-papier); }
.book-card__badge--spitzentitel { background: var(--thk-gold); color: var(--thk-text); }
.book-card__badge--neu          { background: var(--thk-papier); color: var(--thk-bordeaux); border: 1px solid var(--thk-bordeaux); }
.book-card__title { font-family: var(--thk-serif); font-size: 1.15rem; font-weight: 500; line-height: 1.25; color: var(--thk-tinte); margin: 0 0 var(--space-1) 0; overflow-wrap: anywhere; hyphens: auto; }
.book-card__author { font-size: 0.88rem; color: var(--thk-text-mute); margin: 0 0 var(--space-2) 0; }
.book-card__price { font-size: 0.95rem; color: var(--thk-text); font-weight: 500; }

/* ══════════════════════════════════════════════════════════════════
 * 6b. CMS-BLOCK BUCH-KARTEN (.thk-buch-*)
 *
 * v0.19.5.7 — Diese Stile fehlten komplett. Der CMS-Block `buecher`
 * (BlockRenderer::rendereBuecher / rendereBuchKarte) erzeugt eine
 * parallele Card-Hierarchie mit `.thk-buch-*`-Klassen — anders als
 * der buchliste-Block, der modul_buchliste.php mit `.book-card__*`
 * nutzt. Ohne Stile rendern die `<img>`-Tags mit natürlicher Größe,
 * Cover-Höhen springen je nach Bild-Auflösung wild durcheinander.
 *
 * Wird genutzt für „Empfehlungen"-Sections, Featured-Books-Blöcke
 * auf Themen-/Autoren-Seiten und Empfehlungsleisten auf der
 * CMS-Buecher-Page (wenn Frank eine angelegt hat).
 *
 * Layout-Pattern bewusst identisch zu .book-card__cover:
 * padding-bottom-Trick erzwingt 2:3-Höhe, Bild absolut positioniert.
 * ══════════════════════════════════════════════════════════════════ */
.thk-block--buecher { margin: var(--space-8) 0; }
.thk-block-kopf { margin-bottom: var(--space-5); }
.thk-block-titel {
  font-family: var(--thk-serif);
  font-size: 1.75rem;
  font-weight: 500;
  color: var(--thk-tinte);
  margin: 0 0 var(--space-2) 0;
}
.thk-block-untertitel {
  font-size: 1rem;
  color: var(--thk-text-mute);
  margin: 0;
}
.thk-buecher-grid {
  /* v0.19.6.0 — Cover-Dichte aus Setting `liste_card_dichte`
     (BrandingService::cssVariablesInline). 220px = Default „Standard". */
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--card-min, 220px), 1fr));
  gap: var(--space-6) var(--space-5);
}
.thk-buch-karte {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.thk-buch-link {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: var(--thk-text);
  transition: transform 0.2s ease;
  min-width: 0;
}
.thk-buch-link:hover {
  color: var(--thk-text);
  text-decoration: none;
  transform: translateY(-3px);
}
.thk-buch-cover {
  /* Identischer padding-bottom-Trick wie .book-card__cover für
     einheitliche 2:3-Höhe in jedem Browser, jedem Kontext. */
  width: 100%;
  height: 0;
  padding-bottom: 150%;
  background: linear-gradient(135deg, var(--thk-papier-tief) 0%, #c8baa0 100%);
  border-radius: 2px 5px 5px 2px;
  box-shadow: var(--shadow-cover);
  overflow: hidden;
  position: relative;
  margin-bottom: var(--space-4);
}
.thk-buch-cover img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.thk-buch-cover::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 4px;
  background: rgba(0, 0, 0, 0.12);
  z-index: 1;
}
.thk-buch-cover--leer {
  display: flex;
  align-items: center;
  justify-content: center;
}
.thk-buch-cover--leer span {
  /* span muss aus dem absolute-flow raus damit es zentriert wird */
  position: relative;
  font-size: 0.88rem;
  color: var(--thk-text-mute);
}
.thk-buch-meta { display: flex; flex-direction: column; }
.thk-buch-titel {
  font-family: var(--thk-serif);
  font-size: 1.15rem;
  font-weight: 500;
  line-height: 1.25;
  color: var(--thk-tinte);
  margin: 0 0 var(--space-1) 0;
  overflow-wrap: anywhere;
  hyphens: auto;
}
.thk-buch-autor {
  font-size: 0.88rem;
  color: var(--thk-text-mute);
  margin: 0 0 var(--space-2) 0;
}
.thk-buch-preis {
  font-size: 0.95rem;
  color: var(--thk-text);
  font-weight: 500;
  margin: 0;
}

/* ══════════════════════════════════════════════════════════════════
 * 7. THEMENWELTEN-KACHELN
 * ══════════════════════════════════════════════════════════════════ */
.themenwelten-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-5);
}
.themenwelt-tile {
  position: relative; aspect-ratio: 4 / 3;
  border-radius: var(--radius); overflow: hidden;
  text-decoration: none; background: var(--thk-tinte);
  box-shadow: var(--shadow-soft);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.themenwelt-tile:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 30px -10px rgba(20, 40, 69, 0.35);
  text-decoration: none;
}
.themenwelt-tile__bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  filter: brightness(0.55) contrast(1.05);
  transition: transform 0.4s ease, filter 0.25s ease;
}
.themenwelt-tile:hover .themenwelt-tile__bg { transform: scale(1.04); filter: brightness(0.65); }
.themenwelt-tile__bg--placeholder { background: linear-gradient(135deg, var(--thk-tinte) 0%, var(--thk-bordeaux) 100%); }
.themenwelt-tile__overlay { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(20, 40, 69, 0.85) 100%); }
.themenwelt-tile__content {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: var(--space-5);
  color: var(--thk-papier);
}
.themenwelt-tile__title { font-family: var(--thk-serif); font-size: 1.5rem; font-weight: 500; margin: 0 0 var(--space-2) 0; color: var(--thk-papier); line-height: 1.2; }
.themenwelt-tile__intro { font-size: 0.92rem; color: rgba(251, 247, 239, 0.85); margin: 0; line-height: 1.4; }
.themenwelt-tile__more { display: inline-block; margin-top: var(--space-3); font-size: 0.85rem; font-weight: 500; letter-spacing: 0.02em; }

/* ══════════════════════════════════════════════════════════════════
 * 8. EMPFEHLUNGS-SEKTION
 * ══════════════════════════════════════════════════════════════════ */
.empfehlungen-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--space-5); }

/* ══════════════════════════════════════════════════════════════════
 * 9. LESERSTIMMEN
 * ══════════════════════════════════════════════════════════════════ */
.testimonials { background: var(--thk-papier-warm); border-top: 1px solid var(--thk-line-soft); border-bottom: 1px solid var(--thk-line-soft); }
.testimonial-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--space-6); }
.testimonial {
  padding: var(--space-5);
  background: rgba(251, 247, 239, 0.6);
  border-left: 3px solid var(--thk-bordeaux);
  border-radius: 0 var(--radius) var(--radius) 0;
  display: flex;
  flex-direction: column;
}
/* v0.15.3.0 — Anführungszeichen ist jetzt absolut positioniert in der
 * oberen linken Ecke der Karte, damit es NICHT mehr im Text-Flow läuft
 * und das erste Wort jeder Zeile überdeckt. Das Zitat bekommt links
 * etwas mehr Innenabstand, damit das Glyph nicht über den Text rutscht. */
.testimonial__zitat {
  font-family: var(--thk-serif); font-size: 1.15rem; font-style: italic; line-height: 1.5;
  color: var(--thk-tinte); margin: 0 0 var(--space-4) 0; position: relative;
  padding-left: 2.2rem; padding-top: 0.4rem;
}
.testimonial__zitat::before {
  content: '„';
  position: absolute;
  top: -0.6rem;
  left: 0;
  font-size: 3.6rem;
  line-height: 1;
  color: var(--thk-bordeaux);
  font-family: var(--thk-serif);
  font-style: normal;
  pointer-events: none;
}
.testimonial__autor { display: flex; align-items: center; gap: var(--space-3); margin-top: auto; }
.testimonial__foto {
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--thk-papier-tief); background-size: cover; background-position: center;
  flex: 0 0 44px;
}
.testimonial__name { font-weight: 600; color: var(--thk-tinte-dunkel); font-size: 0.95rem; }
.testimonial__kontext { font-size: 0.85rem; color: var(--thk-text-mute); }
.testimonial__sterne { color: var(--thk-gold); font-size: 0.95rem; letter-spacing: 0.05em; margin-top: var(--space-1); }

/* v0.15.3.0 — Buch-Verweis auf der Testimonial-Karte (wenn book_id
 * gesetzt). Steht direkt unter dem Zitat, vor dem Autoren-Block. Mit
 * kleinem Cover-Thumbnail, Titel als Link. */
.testimonial__buch {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: 0 0 var(--space-4) 0;
  padding: var(--space-2) var(--space-3);
  background: rgba(0, 0, 0, 0.03);
  border-radius: var(--radius);
  text-decoration: none;
  color: inherit;
  transition: background 0.15s ease;
}
.testimonial__buch:hover { background: rgba(0, 0, 0, 0.06); }
.testimonial__buch-cover {
  width: 38px; height: 56px; flex: 0 0 38px;
  background: var(--thk-papier-tief);
  background-size: cover; background-position: center;
  border-radius: 2px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}
.testimonial__buch-cover--platzhalter {
  display: flex; align-items: center; justify-content: center;
  font-family: var(--thk-serif); font-size: 0.7rem; color: var(--thk-text-mute);
}
.testimonial__buch-meta { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.testimonial__buch-label {
  font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--thk-text-mute); font-weight: 600;
}
.testimonial__buch-titel {
  font-family: var(--thk-serif); font-size: 0.95rem; color: var(--thk-tinte);
  font-weight: 500; overflow: hidden; text-overflow: ellipsis;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}

/* ══════════════════════════════════════════════════════════════════
 * 10. NEWSLETTER
 * ══════════════════════════════════════════════════════════════════ */
.newsletter { background: var(--thk-tinte); color: var(--thk-papier); padding: var(--space-8) 0; position: relative; overflow: hidden; }
.newsletter::before {
  content: ''; position: absolute; top: -50%; right: -10%; width: 60%; height: 200%;
  background: radial-gradient(ellipse, rgba(184, 149, 74, 0.15) 0%, transparent 60%);
  pointer-events: none;
}
.newsletter__inner { position: relative; max-width: var(--content-narrow); margin: 0 auto; padding: 0 var(--space-5); text-align: center; }
.newsletter__title { font-family: var(--thk-serif); font-size: clamp(1.6rem, 3vw, 2.4rem); color: var(--thk-papier); margin-bottom: var(--space-4); }
.newsletter__lead { color: rgba(251, 247, 239, 0.85); font-size: 1.05rem; margin-bottom: var(--space-6); line-height: 1.6; }
.newsletter__form { display: flex; gap: var(--space-2); max-width: 480px; margin: 0 auto; }
.newsletter__input {
  flex: 1; padding: var(--space-3) var(--space-4);
  border: 1px solid rgba(251, 247, 239, 0.3);
  background: rgba(251, 247, 239, 0.08);
  color: var(--thk-papier);
  border-radius: var(--radius);
  font-family: var(--thk-sans); font-size: 0.95rem;
}
.newsletter__input::placeholder { color: rgba(251, 247, 239, 0.5); }
.newsletter__input:focus { outline: none; border-color: var(--thk-gold-hell); background: rgba(251, 247, 239, 0.12); }
.newsletter__submit {
  padding: var(--space-3) var(--space-5);
  background: var(--thk-gold); color: var(--thk-tinte-dunkel);
  border: none; border-radius: var(--radius);
  font-family: var(--thk-sans); font-weight: 600; font-size: 0.95rem;
  cursor: pointer; transition: background 0.15s ease;
}
.newsletter__submit:hover { background: var(--thk-gold-hell); }
.newsletter__hinweis { font-size: 0.8rem; color: rgba(251, 247, 239, 0.6); margin-top: var(--space-3); }
/* 0.48.2.0 — Meldungen der Anmeldung stehen auf dunklem Grund; ohne eigene
   Schriftfarbe erbten sie das Weiß der Fläche und waren auf dem hellen
   Meldungskasten nicht zu lesen. */
.newsletter .flash-messages { max-width: 480px; margin: 0 auto var(--space-3); text-align: left; }
.newsletter .flash { color: #1a2436; }
@media (max-width: 540px) { .newsletter__form { flex-direction: column; } }

/* ══════════════════════════════════════════════════════════════════
 * 11. BUCH-DETAIL
 * ══════════════════════════════════════════════════════════════════ */
.book-detail { padding: var(--space-7) 0 var(--space-8); }
.book__hero { display: grid; grid-template-columns: 320px 1fr; gap: var(--space-7); align-items: start; margin-bottom: var(--space-8); }
.book__cover-wrap { position: relative; }
.book__cover {
  aspect-ratio: 2 / 3;
  background: var(--thk-papier-tief);
  border-radius: 2px 6px 6px 2px;
  box-shadow: var(--shadow-cover);
  overflow: hidden;
  position: relative;
}
.book__cover img { width: 100%; height: 100%; object-fit: cover; }
.book__cover::before { content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 6px; background: rgba(0, 0, 0, 0.15); border-radius: 2px 0 0 2px; }
.book__cover-badge {
  position: absolute; top: var(--space-3); right: -8px;
  font-family: var(--thk-sans); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.1em;
  padding: 0.4rem 0.85rem; background: var(--thk-bordeaux); color: var(--thk-papier);
  font-weight: 600; border-radius: 3px; box-shadow: 0 3px 8px -2px rgba(122, 44, 30, 0.4);
}
.book__cover-badge--bestseller   { background: var(--thk-tinte); }
.book__cover-badge--spitzentitel { background: var(--thk-gold); color: var(--thk-text); }
.book__meta { padding-top: var(--space-2); }
.book__title { font-family: var(--thk-serif); font-size: clamp(1.8rem, 3.5vw, 2.6rem); line-height: 1.15; margin: 0 0 var(--space-3) 0; }
.book__subtitle { font-family: var(--thk-serif); font-style: italic; font-size: 1.3rem; color: var(--thk-text-mute); margin: 0 0 var(--space-5) 0; }
.book__authors { font-size: 1.05rem; margin: 0 0 var(--space-5) 0; }
.book__authors a { color: var(--thk-tinte); border-bottom: 1px solid var(--thk-line); padding-bottom: 1px; text-decoration: none; }
.book__authors a:hover { color: var(--thk-bordeaux); border-bottom-color: var(--thk-bordeaux); }
.book__details {
  display: grid; grid-template-columns: max-content 1fr;
  column-gap: var(--space-5); row-gap: var(--space-2);
  margin: var(--space-5) 0;
  font-size: 0.95rem;
  border-top: 1px solid var(--thk-line-soft);
  border-bottom: 1px solid var(--thk-line-soft);
  padding: var(--space-4) 0;
}
.book__details dt { font-weight: 600; color: var(--thk-tinte-dunkel); }
.book__details dd { margin: 0; color: var(--thk-text); }
.book__price { display: flex; align-items: baseline; gap: var(--space-3); margin: var(--space-5) 0; flex-wrap: wrap; }
.book__price-value { font-family: var(--thk-serif); font-size: 2rem; color: var(--thk-bordeaux); font-weight: 500; }
.book__price-uvp { font-size: 0.95rem; color: var(--thk-text-mute); text-decoration: line-through; }
.book__price-note { display: block; width: 100%; font-size: 0.85rem; color: var(--thk-text-mute); margin-top: var(--space-1); }
.book__order {
  background: var(--thk-papier-warm);
  border: 1px solid var(--thk-line);
  border-radius: var(--radius);
  padding: var(--space-5);
  margin-top: var(--space-5);
}
.book__order-titel { font-family: var(--thk-sans); font-weight: 600; font-size: 1rem; margin: 0 0 var(--space-2) 0; color: var(--thk-tinte-dunkel); }
.book__order p { margin-bottom: var(--space-2); font-size: 0.95rem; }
.book__order a { font-weight: 500; }
.book__order-note { font-size: 0.85rem; color: var(--thk-text-mute); }
.book__zur-buchliste { display: inline-block; margin-top: var(--space-7); color: var(--thk-text-mute); font-size: 0.9rem; }
@media (max-width: 760px) {
  .book__hero { grid-template-columns: 1fr; }
  .book__cover-wrap { max-width: 280px; margin: 0 auto; }
}

.book__redaktion { margin: var(--space-8) 0; padding: var(--space-7) 0; border-top: 1px solid var(--thk-line); border-bottom: 1px solid var(--thk-line); }
.book__redaktion-title { font-family: var(--thk-serif); font-size: 1.5rem; text-align: center; margin-bottom: var(--space-2); }
.book__redaktion-eyebrow { text-align: center; margin-bottom: var(--space-6); }
.redaktion-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-6); }
.redaktion-block h4 {
  font-family: var(--thk-sans); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--thk-bordeaux); margin-bottom: var(--space-3); font-weight: 600;
}
.redaktion-block p { font-size: 0.98rem; line-height: 1.6; color: var(--thk-text); }

.book__beschreibung, .book__toc { margin: var(--space-7) 0; }
.book__beschreibung h2, .book__toc h2 { margin-bottom: var(--space-5); font-size: 1.6rem; }
.book__beschreibung .prose, .book__toc .prose { font-size: 1.05rem; line-height: 1.7; max-width: 70ch; }
.book__beschreibung .prose p { margin-bottom: var(--space-4); }
.book__kategorien { margin: var(--space-6) 0; }

/* Galerie (Welle 8) */
.book__galerie { margin: var(--space-7) 0; }
.book__galerie h2 { margin-bottom: var(--space-5); font-size: 1.6rem; }
.book__galerie-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--space-3);
}
.book__galerie-tile {
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--radius);
  border: 1px solid var(--thk-line);
  background: var(--thk-papier-warm);
  transition: border-color 0.15s, transform 0.2s;
}
.book__galerie-tile:hover {
  border-color: var(--thk-bordeaux);
  transform: translateY(-2px);
}
.book__galerie-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.taglist { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.taglist li a {
  display: inline-block; padding: 0.3rem 0.85rem;
  background: var(--thk-papier-warm); border: 1px solid var(--thk-line); border-radius: 999px;
  font-size: 0.85rem; color: var(--thk-tinte); text-decoration: none;
}
.taglist li a:hover { background: var(--thk-tinte); color: var(--thk-papier); border-color: var(--thk-tinte); }

.book__testimonial {
  background: var(--thk-papier-warm); border-left: 4px solid var(--thk-bordeaux);
  padding: var(--space-5) var(--space-6); margin: var(--space-6) 0;
  border-radius: 0 var(--radius) var(--radius) 0;
}
.book__testimonial-zitat { font-family: var(--thk-serif); font-style: italic; font-size: 1.25rem; line-height: 1.5; margin: 0 0 var(--space-3) 0; color: var(--thk-tinte); }
.book__testimonial-autor { font-size: 0.9rem; color: var(--thk-text-mute); }

/* ══════════════════════════════════════════════════════════════════
 * 12. THEMENWELT-DETAIL
 * ══════════════════════════════════════════════════════════════════ */
.themenwelt-hero {
  position: relative; min-height: 360px;
  display: flex; align-items: center;
  margin-bottom: var(--space-7); overflow: hidden;
  border-bottom: 1px solid var(--thk-line-soft);
}
.themenwelt-hero__bg { position: absolute; inset: 0; background-size: cover; background-position: center; filter: brightness(0.6); }
.themenwelt-hero__bg--placeholder { background: linear-gradient(135deg, var(--thk-tinte) 0%, var(--thk-bordeaux) 100%); }
.themenwelt-hero__overlay { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(20, 40, 69, 0.85) 0%, rgba(20, 40, 69, 0.4) 100%); }
.themenwelt-hero__inner { position: relative; max-width: var(--content-max); margin: 0 auto; padding: var(--space-8) var(--space-5); width: 100%; color: var(--thk-papier); }
.themenwelt-hero__title { font-family: var(--thk-serif); font-size: clamp(2rem, 4vw, 3.5rem); color: var(--thk-papier); margin: 0 0 var(--space-4) 0; max-width: 18ch; line-height: 1.05; }
.themenwelt-hero__lead { font-size: 1.15rem; color: rgba(251, 247, 239, 0.9); max-width: 55ch; line-height: 1.55; }
.themenwelt-intro { max-width: 65ch; margin: 0 auto var(--space-7) auto; font-size: 1.08rem; line-height: 1.7; color: var(--thk-text); }

/* ══════════════════════════════════════════════════════════════════
 * 13. AUTOREN
 * ══════════════════════════════════════════════════════════════════ */
.az-filter {
  display: flex; gap: var(--space-1); flex-wrap: wrap;
  margin-bottom: var(--space-6); padding: var(--space-4) 0;
  border-top: 1px solid var(--thk-line-soft); border-bottom: 1px solid var(--thk-line-soft);
}
.az-filter a {
  display: inline-block; min-width: 32px; padding: 0.25rem 0.5rem; text-align: center;
  color: var(--thk-text-mute); text-decoration: none; font-weight: 500; border-radius: var(--radius-sm);
}
.az-filter a:hover { background: var(--thk-papier-warm); color: var(--thk-bordeaux); }
.az-filter a.active { background: var(--thk-tinte); color: var(--thk-papier); }
.autoren-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--space-6); }
.autor-karte { display: flex; flex-direction: column; align-items: center; text-align: center; text-decoration: none; color: var(--thk-text); }
.autor-karte:hover { color: var(--thk-text); text-decoration: none; }
.autor-karte__foto {
  width: 120px; height: 120px; border-radius: 50%;
  background: var(--thk-papier-tief); background-size: cover; background-position: center;
  margin-bottom: var(--space-3); border: 3px solid var(--thk-papier);
  box-shadow: var(--shadow-soft); transition: transform 0.2s ease;
}
.autor-karte:hover .autor-karte__foto { transform: scale(1.05); }
.autor-karte__name { font-family: var(--thk-serif); font-size: 1.15rem; color: var(--thk-tinte); margin: 0 0 var(--space-1) 0; }
.autor-karte__tagline { font-size: 0.85rem; color: var(--thk-text-mute); }
/* ══════════════════════════════════════════════════════════════════
 *  AUTORENSEITE — 0.46.0.0, gleiche Bauart wie die Buchseite
 *
 *  Anlass (Jens, 04.10.2026): „Schau mal wie du das bei den Büchern
 *  gelöst hast und wie doof das alles bei Autoren aussieht. Warum der
 *  Unterschied?" — Entscheidung: „gleiche bauart".
 *
 *  VORHER war die Autorenseite eine Spalte: rundes Foto mittig, Name,
 *  Vita als Fließtext, darunter nackte Buchzeilen ohne Cover. Fünf
 *  Regeln, sonst nichts. Die Buchseite daneben hatte Hero mit zwei
 *  Spalten, Reiter, Seitenleiste mit Datenkarte und Autorenkarte,
 *  Cover-Karten für ähnliche Titel.
 *
 *  JETZT dieselbe Grammatik: Porträt links, Kopf rechts, darunter
 *  Reiter + Seitenleiste (`detail-layout`, siehe Abschnitt Buch-Detail),
 *  Bücher als Cover-Karten. Was hier steht, sind nur die Teile, die es
 *  auf der Buchseite nicht gibt — alles andere kommt aus den geteilten
 *  `detail-*`-Regeln.
 * ══════════════════════════════════════════════════════════════════ */

.autor-detail { padding: var(--space-7) var(--space-5); max-width: var(--content-max); margin: 0 auto; }

/* ── Kopf: Porträt links, Angaben rechts (Pendant zu .book__hero) ──── */
.autor-detail__hero {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: var(--space-8);
  align-items: start;
  margin-bottom: var(--space-7);
  padding-bottom: var(--space-7);
  border-bottom: 1px solid var(--thk-line-soft);
}
@media (max-width: 820px) {
  .autor-detail__hero { grid-template-columns: 1fr; gap: var(--space-5); text-align: center; }
  .autor-detail__portraet { margin: 0 auto; }
}

.autor-detail__portraet-wrap { position: relative; }
.autor-detail__foto {
  width: 240px; height: 240px; border-radius: 50%;
  background: var(--thk-papier-tief); background-size: cover; background-position: center;
  border: 4px solid var(--thk-papier); box-shadow: var(--shadow-cover);
}
.autor-detail__foto--platzhalter {
  display: flex; align-items: center; justify-content: center;
  font-family: var(--thk-serif); font-size: 5rem; color: var(--thk-text-mute);
  text-transform: uppercase;
}
@media (max-width: 820px) {
  .autor-detail__foto { width: 180px; height: 180px; }
}

.autor-detail__kopf { padding-top: var(--space-2); min-width: 0; }
.autor-detail__rolle {
  margin: 0 0 var(--space-2);
  font-family: var(--thk-sans); font-size: 0.78rem; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--thk-text-mute);
}
.autor-detail__name {
  font-family: var(--thk-serif);
  font-size: clamp(1.8rem, 3.5vw, 2.6rem);
  line-height: 1.15;
  margin: 0 0 var(--space-3) 0;
}
.autor-detail__pseudonym { margin: -0.35rem 0 var(--space-3); font-size: 0.95rem; color: var(--thk-text-mute); }
.autor-detail__tagline {
  font-family: var(--thk-serif); font-style: italic; font-size: 1.3rem;
  color: var(--thk-text-mute); margin: 0 0 var(--space-5) 0;
}
.autor-detail__kurzbio { font-size: 1.05rem; line-height: 1.65; margin: 0 0 var(--space-5); }
.autor-detail__kurzbio p:last-child { margin-bottom: 0; }

/* Zahlenzeile unter dem Kopf: so viele Titel, so viele Themenwelten.
   Nicht dekorativ — sie beantwortet die erste Frage, die ein Leser auf
   einer Autorenseite hat: was gibt es von dem hier? */
.autor-detail__kennzahlen {
  display: flex; flex-wrap: wrap; gap: var(--space-5);
  margin: 0 0 var(--space-5); padding: var(--space-4) 0;
  border-top: 1px solid var(--thk-line-soft);
  border-bottom: 1px solid var(--thk-line-soft);
}
.autor-detail__kennzahl { display: flex; flex-direction: column; gap: 0.15rem; }
/* Mediävalziffern abschalten. Cormorant Garamond setzt Ziffern per
   Vorgabe auf Oldstyle — dort steht die 1 als kurzer Strich auf der
   Grundlinie und liest sich neben Großbuchstaben als „I": aus „1 TITEL"
   wird sichtbar „I TITEL". In einer Vita ist das schön, in einer Zahl
   nicht. */
.autor-detail__kennzahl-wert {
  font-family: var(--thk-serif); font-size: 1.6rem; line-height: 1;
  color: var(--thk-bordeaux); font-weight: 500;
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: "lnum" 1, "tnum" 1;
}
.autor-detail__kennzahl-label {
  font-family: var(--thk-sans); font-size: 0.78rem; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--thk-text-mute);
}
@media (max-width: 820px) { .autor-detail__kennzahlen { justify-content: center; } }

/* Sprungmarken unter dem Kopf — Pendant zu .book__quick-actions */
.autor-detail__quick-actions { margin: 0; font-size: 0.95rem; }
.autor-detail__quick-action { color: var(--thk-bordeaux); text-decoration: none; font-weight: 500; }
.autor-detail__quick-action:hover { text-decoration: underline; }
.autor-detail__quick-sep { color: var(--thk-line); margin: 0 var(--space-2); }

/* ── Banner (0.44.4.0) — über dem Kopf, volle Breite ───────────────── */
.autor-detail__banner {
  position: relative;
  margin: 0 calc(-1 * var(--space-5)) var(--space-6);
  aspect-ratio: 3 / 1;
  background-size: cover;
  background-position: center;
  border-radius: var(--radius-l, 10px);
  overflow: hidden;
}
.autor-detail__banner::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, transparent 45%, rgba(0, 0, 0, 0.35));
}
/* Mit Banner rückt das Porträt in den Verlauf hinein — ein rundes Bild
   mitten auf einem Breitbild sieht aus wie ein Versehen. */
.autor-detail__hero--banner .autor-detail__portraet-wrap { margin-top: -120px; position: relative; z-index: 1; }
@media (max-width: 820px) {
  .autor-detail__banner { aspect-ratio: 2 / 1; border-radius: 0; margin-bottom: var(--space-5); }
  .autor-detail__hero--banner .autor-detail__portraet-wrap { margin-top: -80px; }
}

/* ── Seitenleiste: Listen in den Karten ────────────────────────────── */
.autor-detail__kartenliste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.autor-detail__kartenliste a { color: var(--thk-tinte); text-decoration: none; font-size: 0.94rem; }
.autor-detail__kartenliste a:hover { color: var(--thk-bordeaux); text-decoration: underline; }
.autor-detail__kartenliste .muted { display: block; font-size: 0.82rem; }
.autor-detail__taglist { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.autor-detail__taglist a {
  display: inline-block; padding: 0.25rem 0.7rem;
  background: var(--thk-papier, #fbf7ef); border: 1px solid var(--thk-line);
  border-radius: 999px; font-size: 0.85rem; color: var(--thk-text); text-decoration: none;
}
.autor-detail__taglist a:hover { border-color: var(--thk-bordeaux); color: var(--thk-bordeaux); }

/* ── Werkverzeichnis ───────────────────────────────────────────────── */
.autor-detail__buecher { margin-top: var(--space-8); }
.autor-detail__buecher-titel {
  font-family: var(--thk-serif); font-size: 1.5rem;
  margin: 0 0 var(--space-6); padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--thk-line);
}
/* Dieselbe Spaltenbreite wie „Ähnliche Titel" auf der Buchseite: drei
   Karten nebeneinander, bei schmalem Fenster zwei, auf dem Handy eine.
   Mit `auto-fill` stünden bei zwei Titeln zwei Briefmarken links am
   Rand — das Werkverzeichnis eines Autors mit zwei Büchern soll nicht
   kleiner aussehen als eine Empfehlungsreihe mit dreien. */
.autor-detail__buecher-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
}
@media (max-width: 700px) {
  .autor-detail__buecher-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-4); }
}
@media (max-width: 440px) {
  .autor-detail__buecher-grid { grid-template-columns: 1fr; }
}
/* Rolle am Titel — „Herausgeber", „Illustrator". Ohne das steht ein
   Buch, zu dem jemand das Vorwort geschrieben hat, wie sein eigenes da. */
.autor-detail__buch-rolle {
  margin: 0 0 var(--space-1);
  font-family: var(--thk-sans); font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--thk-text-mute);
}

.autor-detail__zurueck { display: inline-block; margin-top: var(--space-7); color: var(--thk-text-mute); font-size: 0.9rem; }

/* ── Zitate und Pressestimmen (in den Reitern) ─────────────────────── */
.autor-detail__zitat {
  font-family: var(--thk-serif); font-style: italic; font-size: 1.2rem; line-height: 1.55;
  color: var(--thk-tinte); margin: 0 0 var(--space-6);
}
.autor-detail__zitat footer { font-family: var(--thk-sans); font-style: normal; font-size: 0.88rem; color: var(--thk-text-mute); margin-top: var(--space-2); }
.autor-detail__presse {
  font-family: var(--thk-serif); font-style: italic; font-size: 1.15rem; line-height: 1.55;
  border-left: 3px solid var(--thk-bordeaux);
  padding: var(--space-3) var(--space-5);
  margin: 0 0 var(--space-6);
}
.autor-detail__presse footer { font-family: var(--thk-sans); font-style: normal; font-size: 0.88rem; color: var(--thk-text-mute); margin-top: var(--space-2); }
.autor-detail__presse footer strong { color: var(--thk-tinte-dunkel); }

/* ══════════════════════════════════════════════════════════════════
 * 14. FOOTER
 * ══════════════════════════════════════════════════════════════════ */
.site-footer {
  /* v0.16.3.0 — Background auf --thk-footer-bg (#0f1f38, dunkler als
     tinte-dunkel). Matches Mockup-Footer. */
  background: var(--thk-footer-bg);
  color: var(--thk-footer-text);
  padding: var(--space-8) 0 var(--space-5);
  margin-top: var(--space-9);
  font-size: 0.92rem;
}
.site-footer__inner { max-width: var(--content-max); margin: 0 auto; padding: 0 var(--space-5); }
.site-footer__top {
  display: grid;
  grid-template-columns: 1.5fr repeat(4, 1fr);
  gap: var(--space-6);
  padding-bottom: var(--space-6);
  margin-bottom: var(--space-5);
  border-bottom: 1px solid rgba(251, 247, 239, 0.15);
}
.site-footer__brand { padding-right: var(--space-3); }
.site-footer__brand-name { font-family: var(--thk-serif); font-size: 1.4rem; color: var(--thk-papier); margin: 0 0 var(--space-3) 0; font-weight: 500; }
/* v0.9.9.1 — Footer-Logo (dunkler Hintergrund). Etwas größer als
   im Header, weil hier mehr Platz ist. */
.site-footer__brand-logo {
  display: block;
  max-height: 72px;
  max-width: 260px;
  width: auto;
  height: auto;
  object-fit: contain;
  margin: 0 0 var(--space-3) 0;
}
.site-footer__brand p { font-size: 0.88rem; line-height: 1.55; color: rgba(251, 247, 239, 0.7); margin: 0 0 var(--space-2) 0; }
.site-footer__brand a { color: var(--thk-gold-hell); text-decoration: none; }
.site-footer__brand a:hover { color: var(--thk-papier); text-decoration: underline; text-decoration-color: var(--thk-gold-hell); }
.site-footer__col-title {
  font-family: var(--thk-sans); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--thk-gold-hell); margin: 0 0 var(--space-4) 0; font-weight: 600;
}
.site-footer__col-list { list-style: none; padding: 0; margin: 0; }
.site-footer__col-list li { margin-bottom: var(--space-2); }
.site-footer__col-list a { color: rgba(251, 247, 239, 0.78); text-decoration: none; font-size: 0.92rem; }
.site-footer__col-list a:hover { color: var(--thk-papier); text-decoration: underline; text-decoration-color: var(--thk-gold-hell); }
.site-footer__bottom {
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap;
  gap: var(--space-3); font-size: 0.82rem; color: rgba(251, 247, 239, 0.55);
}
.site-footer__bottom a { color: rgba(251, 247, 239, 0.7); }
@media (max-width: 900px) { .site-footer__top { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px) { .site-footer__top { grid-template-columns: 1fr; gap: var(--space-5); } .site-footer__brand { padding-right: 0; } }

/* ══════════════════════════════════════════════════════════════════
 * 15. UTILITIES
 * ══════════════════════════════════════════════════════════════════ */
.muted { color: var(--thk-text-mute); }
.small { font-size: 0.88rem; }
.btn {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  font-family: var(--thk-sans); font-size: 0.95rem; font-weight: 500;
  border: 1px solid transparent; border-radius: var(--radius);
  text-decoration: none; cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.btn--primary { background: var(--thk-tinte); color: var(--thk-papier); }
.btn--primary:hover { background: var(--thk-tinte-dunkel); color: var(--thk-papier); text-decoration: none; }
.btn--sec { background: transparent; color: var(--thk-tinte); border-color: var(--thk-line); }
.btn--sec:hover { background: var(--thk-papier-warm); color: var(--thk-bordeaux); text-decoration: none; }
.btn--ghost { background: transparent; color: var(--thk-bordeaux); }
.btn--ghost:hover { color: var(--thk-bordeaux-tief); text-decoration: underline; }

/* v0.26.0.3 — Kompatibilitäts-Aliase: viele Frontend-Templates nutzen die
   Einfach-Bindestrich-Schreibweise (btn-primary/btn-sec/btn-ghost), die im
   Design-System als BEM (btn--primary …) definiert ist. Ohne diese Aliase
   rendern u.a. „Anwenden" (Buchfilter), „Zur Kasse", „Kostenpflichtig
   bestellen" und Termin-CTAs als blasser Basis-Button. */
.btn-primary { background: var(--thk-tinte); color: var(--thk-papier); }
.btn-primary:hover { background: var(--thk-tinte-dunkel); color: var(--thk-papier); text-decoration: none; }
.btn-sec { background: transparent; color: var(--thk-tinte); border-color: var(--thk-line); }
.btn-sec:hover { background: var(--thk-papier-warm); color: var(--thk-bordeaux); text-decoration: none; }
.btn-ghost { background: transparent; color: var(--thk-bordeaux); }
.btn-ghost:hover { color: var(--thk-bordeaux-tief); text-decoration: underline; }
.hero-fallback { padding: var(--space-9) 0; text-align: center; }
.hero-fallback__inner { max-width: var(--content-narrow); margin: 0 auto; padding: 0 var(--space-5); }


/* ════════════════════════════════════════════════════════════════════
   Welle 14 — Shop, Cart, Checkout, Voucher, Scanner
   ════════════════════════════════════════════════════════════════════ */

/* ── Buch-Detail: Buy-Form ───────────────────────────────────────── */
.book__buy-form {
  margin: var(--space-5) 0;
  padding: var(--space-5);
  border: 1px solid var(--thk-line);
  border-radius: 6px;
  background: var(--thk-papier-warm);
}
.book__buy-row {
  display: flex;
  align-items: end;
  gap: var(--space-3);
}
.book__buy-qty {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.book__buy-qty span { font-size: 0.85rem; color: var(--thk-text-mute); }
.book__buy-qty input {
  width: 80px;
  padding: 8px 10px;
  border: 1px solid var(--thk-line);
  border-radius: 4px;
  font-size: 1rem;
  font-family: inherit;
}
.book__buy-btn { flex: 1; padding: 12px 24px; }
.book__buy-low {
  margin-top: 8px;
  font-size: 0.85rem;
  color: var(--thk-bordeaux);
}
.book__buy-soldout {
  margin: var(--space-5) 0;
  padding: var(--space-4);
  border-left: 3px solid #aaa;
  background: #f4f4f0;
}

/* ── Shop-Layouts (Cart, Checkout, Voucher) ──────────────────────── */
.shop {
  max-width: var(--content-wide, 1100px);
  margin: 0 auto;
  padding: var(--space-7) var(--space-5);
}
.shop--narrow { max-width: 720px; }
.shop__header { margin-bottom: var(--space-6); }
.shop__header h1 { margin: 0 0 0.3rem; }
.shop__header--success h1 { color: var(--thk-bordeaux); }

.cart-grid, .checkout-grid, .voucher-buy-grid, .thanks-grid {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: 1fr;
}
@media (min-width: 800px) {
  .cart-grid, .checkout-grid, .voucher-buy-grid, .thanks-grid {
    grid-template-columns: 1fr 340px;
  }
}

/* ── Cart-Items ──────────────────────────────────────────────────── */
.cart-item {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--thk-line);
}
.cart-item__title { margin: 0 0 0.3rem; font-size: 1.05rem; }
.cart-item__meta { margin: 0.2rem 0; font-size: 0.85rem; color: var(--thk-text-mute); }
.cart-item__price {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin: 0.3rem 0 0;
}
.cart-item__unit { color: var(--thk-text-mute); }
.cart-item__qty {
  display: flex;
  align-items: center;
  gap: 8px;
}
.cart-item__qty input {
  width: 60px;
  padding: 4px 8px;
  border: 1px solid var(--thk-line);
  border-radius: 4px;
}
.cart-item__line {
  margin-left: auto;
  font-size: 1.1rem;
}
.cart-item__remove { align-self: flex-start; }
.btn-link {
  background: none;
  border: none;
  color: var(--thk-bordeaux);
  cursor: pointer;
  text-decoration: underline;
  font-size: 0.9rem;
  padding: 4px;
}
.btn-link--danger { color: var(--thk-bordeaux); }

.cart-voucher-apply { margin-top: var(--space-5); padding-top: var(--space-4); border-top: 1px solid var(--thk-line); }
.cart-voucher-form {
  display: flex;
  gap: 8px;
  align-items: end;
  flex-wrap: wrap;
}
.cart-voucher-form label { font-size: 0.9rem; }
.cart-voucher-form input[type="text"] {
  flex: 1;
  min-width: 200px;
  padding: 8px 12px;
  border: 1px solid var(--thk-line);
  border-radius: 4px;
  font-family: monospace;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.cart-voucher-applied {
  background: #e8f4ef;
  padding: var(--space-3);
  border-radius: 4px;
}

/* ── Cart-Summary / Checkout-Summary ─────────────────────────────── */
.cart-summary {
  background: var(--thk-papier-warm);
  padding: var(--space-5);
  border-radius: 8px;
  align-self: start;
  position: sticky;
  top: var(--space-5);
}
.cart-summary h2 { margin: 0 0 var(--space-3); font-size: 1.1rem; }
.cart-summary dl {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px 16px;
  margin: 0;
}
.cart-summary dt, .cart-summary dd { margin: 0; }
.cart-summary dd { text-align: right; }
.cart-summary__total {
  font-size: 1.2rem;
  font-weight: 600;
  padding-top: 8px;
  border-top: 1px solid var(--thk-line);
}
.cart-summary__discount { color: var(--thk-bordeaux); }
.cart-summary__tax-hint {
  margin: 12px 0;
  font-size: 0.8rem;
  color: var(--thk-text-mute);
  text-align: right;
}
.btn-block { display: block; text-align: center; width: 100%; margin-top: 8px; }

.cart-summary__items {
  list-style: none;
  margin: 0 0 var(--space-3);
  padding: 0;
  font-size: 0.9rem;
}
.cart-summary__items li {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 8px;
  padding: 4px 0;
  border-bottom: 1px dotted var(--thk-line);
}
.cart-summary__items-qty { color: var(--thk-text-mute); }

/* ── Checkout-Form ───────────────────────────────────────────────── */
.checkout-form__section h2 {
  margin-top: var(--space-5);
  font-size: 1.1rem;
}
.checkout-form__section h2:first-of-type { margin-top: 0; }
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3) var(--space-4);
}
.form-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.form-row span { font-size: 0.85rem; color: var(--thk-text-mute); }
.form-row input, .form-row select, .form-row textarea {
  padding: 8px 10px;
  border: 1px solid var(--thk-line);
  border-radius: 4px;
  font-size: 1rem;
  font-family: inherit;
}
.form-row--wide { grid-column: 1 / -1; }
.form-row--small { grid-column: span 1; }
@media (max-width: 600px) {
  .form-grid { grid-template-columns: 1fr; }
  .form-row--small { grid-column: 1; }
}

.checkbox-block { display: flex; gap: 8px; align-items: flex-start; padding: 8px 0; }
.checkbox-block input { margin-top: 4px; }
.checkbox-inline { display: inline-flex; gap: 8px; align-items: center; }
.checkout-liefer { margin: var(--space-4) 0; }
.checkout-legal { margin: var(--space-4) 0; padding: var(--space-3); background: #fafafa; border-radius: 4px; }
.checkout-legal__privacy { margin: var(--space-3) 0 0; font-size: 0.85rem; color: var(--thk-text-mute); }
.payment-info { padding: var(--space-3); background: #eef4ee; border-left: 3px solid #6a994e; }
.checkout-submit { margin-top: var(--space-4); padding: 14px 24px; font-size: 1.1rem; }

/* ── Danke-Seite ─────────────────────────────────────────────────── */
.thanks-bank { padding: var(--space-5); background: #eef4ee; border-radius: 8px; }
.thanks-bank h2 { margin-top: 0; }
.thanks-bank__details {
  display: grid;
  grid-template-columns: minmax(140px, max-content) 1fr;
  gap: 8px 16px;
  margin: var(--space-4) 0;
  align-items: baseline;
}
.thanks-bank__details dt { font-weight: 600; overflow-wrap: anywhere; }
.thanks-bank__details dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.thanks-bank__details .iban { font-family: monospace; font-size: 1.05rem; }
.thanks-bank__details .verwendungszweck { font-family: monospace; }
@media (max-width: 520px) {
  /* Auf schmalen Screens Label über Wert stapeln, statt zu quetschen. */
  .thanks-bank__details { grid-template-columns: 1fr; gap: 2px 0; }
  .thanks-bank__details dt { margin-top: 8px; }
}
.thanks-bank__note { font-size: 0.9rem; color: var(--thk-text-mute); }
.thanks-overview { padding: var(--space-5); background: var(--thk-papier-warm); border-radius: 8px; }
.thanks-overview h2 { margin-top: 0; font-size: 1.1rem; }
.thanks-overview__items { list-style: none; margin: 0 0 var(--space-3); padding: 0; }
.thanks-overview__items li { display: grid; grid-template-columns: 1fr auto auto; gap: 8px; padding: 4px 0; border-bottom: 1px dotted var(--thk-line); }
.thanks-overview__totals { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; margin: var(--space-3) 0 0; }
.thanks-overview__totals dt, .thanks-overview__totals dd { margin: 0; }
.thanks-overview__totals dd { text-align: right; }

/* ── Voucher-Kauf ────────────────────────────────────────────────── */
.voucher-amount-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: var(--space-3) 0;
}
.voucher-amount-preset {
  background: white;
  border: 1px solid var(--thk-line);
  border-radius: 4px;
  padding: 12px 20px;
  font-size: 1rem;
  cursor: pointer;
  font-family: inherit;
}
.voucher-amount-preset:hover, .voucher-amount-preset.is-active {
  background: var(--thk-bordeaux);
  color: white;
  border-color: var(--thk-bordeaux);
}
.voucher-design-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
  border: none;
  padding: 0;
  margin: var(--space-3) 0;
}
.voucher-design-option { cursor: pointer; }
.voucher-design-option input { position: absolute; opacity: 0; }
.voucher-design-card {
  display: block;
  padding: 24px 16px;
  text-align: center;
  border: 2px solid var(--thk-line);
  border-radius: 6px;
  background: white;
  transition: all 0.15s;
}
.voucher-design-card--classic  { background: linear-gradient(135deg, #fbf7ee, #f3e9d2); }
.voucher-design-card--modern   { background: linear-gradient(135deg, #e3edf7, #c5d8eb); }
.voucher-design-card--premium  { background: linear-gradient(135deg, #2c2c2c, #4a4a4a); color: #f5d97a; }
.voucher-design-card--birthday { background: linear-gradient(135deg, #fdf2f7, #f9d6e3); }
.voucher-design-card--minimal  { background: white; border: 2px solid #333; }
.voucher-design-option input:checked + .voucher-design-card {
  border-color: var(--thk-bordeaux);
  transform: scale(1.04);
  box-shadow: 0 4px 12px rgba(153, 53, 78, 0.2);
}
.voucher-info {
  padding: var(--space-5);
  background: var(--thk-papier-warm);
  border-radius: 8px;
  font-size: 0.95rem;
}
.voucher-info h2 { margin-top: 0; font-size: 1.05rem; }

/* ── Voucher-Redeem ──────────────────────────────────────────────── */
.voucher-redeem-form { margin: var(--space-5) 0; }
.voucher-redeem-input {
  display: flex;
  gap: 8px;
}
.voucher-redeem-input input {
  flex: 1;
  padding: 12px 16px;
  border: 1px solid var(--thk-line);
  border-radius: 4px;
  font-size: 1.1rem;
  font-family: monospace;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.voucher-redeem-result {
  margin-top: var(--space-4);
  padding: var(--space-4);
  border-radius: 4px;
}
.voucher-redeem-result--ok { background: #eef4ee; border-left: 3px solid #6a994e; }
.voucher-redeem-result--error { background: #fbeae9; border-left: 3px solid #b3261e; }
.voucher-redeem-result dl {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 6px 12px;
  margin: var(--space-3) 0;
}
.voucher-redeem-result dt { font-weight: 600; }
.voucher-redeem-result dd { margin: 0; }

/* ── Scanner ─────────────────────────────────────────────────────── */
.scanner-page { padding-top: var(--space-5); }
.scanner-box {
  background: white;
  border: 1px solid var(--thk-line);
  border-radius: 8px;
  padding: var(--space-4);
  margin-bottom: var(--space-4);
  text-align: center;
}
#scanner-reader {
  max-width: 400px;
  margin: 0 auto var(--space-3);
  min-height: 200px;
  background: #f4f4f0;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.scanner-actions { display: flex; gap: 8px; justify-content: center; }
.scanner-manual {
  background: var(--thk-papier-warm);
  padding: var(--space-4);
  border-radius: 8px;
  margin-bottom: var(--space-4);
}
.scanner-manual h2 { margin: 0 0 var(--space-3); font-size: 1rem; }
.scanner-manual__form {
  display: flex;
  gap: 8px;
}
.scanner-manual__form input {
  flex: 1;
  padding: 12px 16px;
  border: 1px solid var(--thk-line);
  border-radius: 4px;
  font-family: monospace;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 1.05rem;
}
.scanner-result { padding: var(--space-4); border-radius: 8px; }
.scanner-result__ok    { background: #eef4ee; border-left: 3px solid #6a994e; }
.scanner-result__error { background: #fbeae9; border-left: 3px solid #b3261e; }
.scanner-result dl {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 4px 12px;
  margin: var(--space-3) 0;
}
.scanner-result dt { font-weight: 600; }
.scanner-result dd { margin: 0; }
.scanner-consume {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 8px;
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid #c5d8c5;
}
.scanner-consume label { display: flex; flex-direction: column; gap: 4px; font-size: 0.85rem; }
.scanner-consume input { padding: 8px 10px; border: 1px solid var(--thk-line); border-radius: 4px; }

/* ── Site-Nav: Warenkorb-Badge ───────────────────────────────────── */
.site-nav__cart {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  position: relative;
}
.site-nav__cart-badge {
  display: inline-block;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--thk-bordeaux);
  color: white;
  font-size: 0.75rem;
  line-height: 18px;
  text-align: center;
  font-weight: 600;
}

/* ── Flash-Messages ──────────────────────────────────────────────── */
.flash-messages { margin: var(--space-3) 0; }
.flash {
  padding: 12px 16px;
  margin-bottom: 8px;
  border-radius: 4px;
  border-left: 3px solid;
}
.flash-success { background: #eef4ee; border-color: #6a994e; }
.flash-error   { background: #fbeae9; border-color: #b3261e; }
.flash-info    { background: #e3edf7; border-color: #3a6db0; }


/* ════════════════════════════════════════════════════════════════════
   Welle 15 — Journal (Listing + Detail)
   ════════════════════════════════════════════════════════════════════ */

.journal { max-width: var(--content-wide, 1100px); margin: 0 auto; padding: var(--space-7) var(--space-5); }
.journal__header { margin-bottom: var(--space-6); }
.journal__header h1 { margin: 0 0 .3rem; }
.journal__feed { margin-top: .5rem; }

.journal__layout {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: 1fr;
}
@media (min-width: 800px) { .journal__layout { grid-template-columns: 1fr 260px; } }

.journal-card {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--thk-line);
}
@media (min-width: 640px) { .journal-card { grid-template-columns: 200px 1fr; } }
.journal-card__cover img {
  width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 4px; display: block;
}
.journal-card__title { margin: 0 0 .25rem; font-size: 1.3rem; line-height: 1.25; }
.journal-card__title a { color: inherit; text-decoration: none; }
.journal-card__title a:hover { color: var(--thk-bordeaux); }
.journal-card__sub { margin: 0 0 .3rem; color: var(--thk-text-mute); }
.journal-card__meta { margin: 0 0 .5rem; font-size: .85rem; color: var(--thk-text-mute); }
.journal-card__teaser { margin: 0 0 .5rem; }

.journal__pagination { display: flex; gap: .5rem; justify-content: center; margin-top: var(--space-5); }
.journal__pagination a {
  display: inline-block; padding: .4rem .8rem; border: 1px solid var(--thk-line); border-radius: 4px;
  text-decoration: none; color: inherit;
}
.journal__pagination a:hover { background: var(--thk-papier-warm); }
.journal__pagination a.is-current { background: var(--thk-bordeaux); color: white; border-color: var(--thk-bordeaux); }

.journal__sidebar { align-self: start; position: sticky; top: var(--space-5); }
.journal__sidebar h3 { margin: 0 0 .5rem; font-size: .9rem; text-transform: uppercase; letter-spacing: .05em; color: #666; }
.journal__kategorien { list-style: none; margin: 0; padding: 0; }
.journal__kategorien li { margin-bottom: 2px; }
.journal__kategorien a {
  display: flex; justify-content: space-between; align-items: center;
  padding: .4rem .6rem; border-radius: 4px; text-decoration: none; color: inherit;
  border-left: 3px solid transparent;
}
.journal__kategorien a:hover { background: var(--thk-papier-warm); }
.journal__kategorien a.is-active { background: var(--thk-papier-warm); border-left-color: var(--cat-color, var(--thk-bordeaux)); }
.journal__kategorie-count {
  font-size: .8rem; color: var(--thk-text-mute);
  background: var(--thk-line, #eee); padding: 1px 8px; border-radius: 10px;
}

/* Detail */
.journal-detail { max-width: 760px; padding: var(--space-7) var(--space-5); }
.journal-detail__breadcrumb { font-size: .85rem; color: var(--thk-text-mute); margin: 0 0 .5rem; }
.journal-detail__breadcrumb a { color: inherit; }
.journal-detail__header h1 { margin: 0 0 .3rem; font-size: 2.2rem; line-height: 1.15; }
.journal-detail__sub { font-size: 1.15rem; color: var(--thk-text-mute); margin: 0 0 .5rem; }
.journal-detail__meta { font-size: .9rem; color: var(--thk-text-mute); }
.journal-detail__hero { margin: var(--space-5) 0; }
.journal-detail__hero img { width: 100%; border-radius: 4px; display: block; }
.journal-detail__teaser .lead { font-size: 1.2rem; line-height: 1.5; color: var(--thk-tinte, #1a1a1a); font-style: italic; margin: var(--space-4) 0; }
.journal-detail__body.prose { line-height: 1.7; }
.journal-detail__body.prose p { margin: 0 0 1.2em; }
.journal-detail__body.prose img { max-width: 100%; height: auto; border-radius: 4px; }
.journal-detail__weitere-h { margin-top: var(--space-5); font-size: 1rem; text-transform: uppercase; letter-spacing: .05em; color: #666; }
.journal-detail__weitere { display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.journal-detail__weitere-card {
  display: block; padding: var(--space-3); border: 1px solid var(--thk-line); border-radius: 4px;
  text-decoration: none; color: inherit;
}
.journal-detail__weitere-card:hover { background: var(--thk-papier-warm); }
.journal-detail__weitere-card img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 3px; margin-bottom: .5rem; }
.journal-detail__weitere-card h3 { margin: 0 0 .2rem; font-size: 1rem; line-height: 1.3; }

/* ════════════════════════════════════════════════════════════════════
 * v0.7.12 — Frontend-Refresh nach Mockup
 *
 * Neue/überarbeitete Bereiche:
 *   1. Buchdetailseite      — Hero, Qty-Stepper, Tabs, Ähnliche Titel
 *   2. Buchliste            — Sidebar-Filter, Sort-Toolbar, Pagination
 *   3. Warenkorb            — Mini-Cover, Stepper, Empfehlungen
 *   4. Statische Seiten     — TOC-Sidebar (Template "rechtstexte")
 *   5. Themenwelten-Hero    — Vollflächiger Banner mit Bild
 * ════════════════════════════════════════════════════════════════════ */

/* ── 1. BUCH-DETAIL ─────────────────────────────────────────────────── */

.book-detail { padding: var(--space-7) var(--space-5); max-width: var(--content-max); margin: 0 auto; }

/* Hero — 380px Cover + flexibler Content (war 320px) */
.book__hero {
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: var(--space-8);
  align-items: start;
  margin-bottom: var(--space-8);
}
@media (max-width: 820px) {
  .book__hero { grid-template-columns: 1fr; gap: var(--space-5); }
  .book__cover-wrap { max-width: 260px; margin: 0 auto; }
}

.book__cover-wrap { position: relative; }
.book__cover {
  position: relative;
  aspect-ratio: 2/3;
  background: var(--thk-papier-tief);
  box-shadow: var(--shadow-cover);
  overflow: hidden;
  border-radius: 2px 4px 4px 2px;
}
.book__cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.book__cover-placeholder {
  width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--thk-tinte) 0%, var(--thk-bordeaux) 100%);
  color: var(--thk-papier);
  font-family: var(--thk-serif);
  font-size: 5rem;
  font-weight: 500;
}

/* Meta-Spalte */
.book__meta { padding-top: var(--space-2); }
.book__authors-top {
  font-size: 0.95rem;
  color: var(--thk-text-mute);
  margin: 0 0 var(--space-2) 0;
  letter-spacing: 0.02em;
}
.book__authors-top a {
  color: var(--thk-text-mute);
  border-bottom: 1px solid transparent;
}
.book__authors-top a:hover { color: var(--thk-bordeaux); border-bottom-color: var(--thk-bordeaux); }
.book__title {
  font-family: var(--thk-serif);
  font-size: clamp(2rem, 4vw, 2.8rem);
  line-height: 1.1;
  margin: 0 0 var(--space-2) 0;
  color: var(--thk-tinte-dunkel);
}
.book__subtitle {
  font-family: var(--thk-serif);
  font-style: italic;
  font-size: 1.25rem;
  color: var(--thk-text-mute);
  margin: 0 0 var(--space-5) 0;
}

.book__price {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  margin: var(--space-4) 0 var(--space-3) 0;
  flex-wrap: wrap;
}
.book__price-value {
  font-family: var(--thk-serif);
  font-size: 2.4rem;
  color: var(--thk-tinte-dunkel);
  font-weight: 500;
  line-height: 1;
}
.book__price-uvp { font-size: 0.95rem; color: var(--thk-text-mute); text-decoration: line-through; }
.book__price-note { display: block; width: 100%; font-size: 0.82rem; color: var(--thk-text-mute); margin-top: var(--space-1); }

.book__kurztext {
  font-family: var(--thk-serif);
  font-style: italic;
  font-size: 1.15rem;
  line-height: 1.55;
  color: var(--thk-tinte);
  margin: var(--space-5) 0;
  max-width: 50ch;
}

/* Buy-Form: integriert, nicht mehr eingerahmt */
.book__buy-form {
  margin: var(--space-5) 0 var(--space-4) 0;
  padding: 0;
  border: none;
  background: transparent;
}
.book__buy-row {
  display: flex;
  align-items: stretch;
  gap: var(--space-3);
  flex-wrap: wrap;
}

/* Quantity-Stepper */
.book__qty-stepper { display: flex; flex-direction: column; gap: 0.35rem; }
.book__qty-label { font-size: 0.85rem; color: var(--thk-text-mute); font-weight: 500; }
.book__qty-controls {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--thk-line);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--thk-papier);
}
.book__qty-btn {
  width: 40px; height: 44px;
  background: transparent;
  border: none;
  font-size: 1.2rem;
  font-weight: 500;
  color: var(--thk-tinte);
  cursor: pointer;
  transition: background 0.15s ease;
  font-family: inherit;
  line-height: 1;
}
.book__qty-btn:hover { background: var(--thk-papier-tief); }
.book__qty-btn:focus-visible { outline: 2px solid var(--thk-bordeaux); outline-offset: -2px; }
.book__qty-input {
  width: 56px;
  height: 44px;
  border: none;
  border-left: 1px solid var(--thk-line);
  border-right: 1px solid var(--thk-line);
  background: var(--thk-papier);
  text-align: center;
  font-size: 1rem;
  font-family: inherit;
  color: var(--thk-text);
  -moz-appearance: textfield;
}
.book__qty-input::-webkit-outer-spin-button,
.book__qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.book__buy-btn {
  flex: 1;
  min-width: 180px;
  min-height: 44px;
  padding: 0 var(--space-5);
  font-size: 1rem;
  font-weight: 500;
  background: var(--thk-bordeaux);
  color: var(--thk-papier);
  border: 1px solid var(--thk-bordeaux);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease;
  align-self: end;
}
.book__buy-btn:hover { background: var(--thk-bordeaux-tief); border-color: var(--thk-bordeaux-tief); }
.book__buy-btn:active { transform: translateY(1px); }

.book__buy-low { margin-top: 0.5rem; font-size: 0.85rem; color: var(--thk-bordeaux); }
.book__buy-soldout {
  margin: var(--space-5) 0;
  padding: var(--space-4);
  border-left: 3px solid var(--thk-line);
  background: var(--thk-papier-warm);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

/* Quick-Actions unter dem Button */
.book__quick-actions {
  margin: var(--space-4) 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
  font-size: 0.9rem;
}
.book__quick-action {
  color: var(--thk-tinte);
  text-decoration: none;
  border-bottom: 1px solid var(--thk-line);
  padding-bottom: 1px;
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
}
.book__quick-action:hover { color: var(--thk-bordeaux); border-bottom-color: var(--thk-bordeaux); }
.book__quick-sep { color: var(--thk-text-mute); }

/* Bestell-Hinweis als Details/Summary */
.book__order { margin: var(--space-5) 0; }
.book__order summary {
  cursor: pointer;
  font-size: 0.9rem;
  color: var(--thk-text-mute);
  padding: var(--space-2) 0;
  user-select: none;
}
.book__order summary:hover { color: var(--thk-bordeaux); }
.book__order[open] summary { color: var(--thk-tinte); font-weight: 500; margin-bottom: var(--space-2); }
.book__order p { font-size: 0.9rem; color: var(--thk-text-mute); margin: 0; }

/* ── TABS ───────────────────────────────────────────────────────────── */

/* v0.19.3.0 — 2-Spalten-Layout für Tabs + Sidebar.
   Vorher: `.book__tabs` einspaltig, `.book__tab-panel` mit max-width:70ch
   ließ rechts eine sichtbar leere Spalte stehen. Jetzt:
   `.book__tabs-layout` ist das Grid-Outer, das Tabs links (1fr) und
   Sidebar rechts (fixe 320px) führt. Auf mobil (≤900px) fällt es zu
   einer Spalte zusammen. Wenn keine Sidebar gerendert wird, fällt das
   Grid via `:has`-Fallback (oder ohne aside-Element) automatisch auf
   eine flexible Spalte zurück. */
/* 0.46.0.0 — DIESELBE GRAMMATIK FÜR BUCH UND AUTOR.

   Anlass (Jens, 04.10.2026): „Schau mal wie du das bei den Büchern
   gelöst hast und wie doof das alles bei Autoren aussieht."

   Er hat recht, und der Grund stand im Stylesheet: die ganze
   Detailseiten-Grammatik — Inhalt links, Seitenleiste rechts, Karten,
   Label/Wert-Liste — hieß `book__*` und galt damit nur für Bücher. Die
   Autorenseite hatte fünf eigene Regeln und sonst nichts; sie SAH anders
   aus, weil sie nie dieselben Bausteine bekommen hat.

   Deshalb tragen die Regeln ab hier BEIDE Namen: den bisherigen
   `book__*` und einen neutralen `detail-*`. Kein Deklarationswert ist
   angefasst — die Buchseite rendert Pixel für Pixel wie vorher, die
   Autorenseite greift auf dieselben Regeln zu. Wer später eine
   Themenwelt- oder Termin-Detailseite angleichen will, nimmt
   `detail-*` und muss nichts neu erfinden.

   NICHT in `detail-*` umbenannt wurde `book__*` — ein Rename hätte
   124 Views und die gepflegten CMS-Inhalte getroffen. Ein zweiter Name
   kostet eine Zeile, ein Rename kostet einen Abend und eine Nachtschicht. */
.book__tabs-layout,
.detail-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: var(--space-7);
  align-items: start;
  margin: var(--space-8) 0;
}
.book__tabs-layout:not(:has(> .book__aside)),
.detail-layout:not(:has(> .detail-aside)) {
  grid-template-columns: minmax(0, 1fr);
}

/* 0.46.0.0 — SEITENLEISTE OHNE INHALT DANEBEN.

   Fall aus dem Test: ein Autor mit nur einer Kurzbio hat keinen Reiter
   (der Text steht schon im Kopf; ein Reiter, der ihn wiederholt, ist
   Beschäftigung für den Leser), aber sehr wohl Themenwelten und
   Schlagwörter. Ohne diese Regel rutschen die Karten in die linke
   1fr-Spalte und stehen 630 px breit da, während rechts 340 px leer
   bleiben — eine Seitenleiste ohne Seite.

   Dann ist sie keine Leiste mehr, sondern ein Band: die Karten legen
   sich nebeneinander über die volle Breite. */
.detail-layout:not(:has(> .detail-tabs)) {
  grid-template-columns: minmax(0, 1fr);
}
.detail-layout:not(:has(> .detail-tabs)) > .detail-aside {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  align-items: start;
  gap: var(--space-5);
}

@media (max-width: 900px) {
  .book__tabs-layout,
  .detail-layout { grid-template-columns: 1fr; gap: var(--space-6); }
}

.book__tabs,
.detail-tabs { margin: 0; }
.book__tabs-nav,
.detail-tabs-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  border-bottom: 1px solid var(--thk-line);
  margin-bottom: var(--space-6);
}
.book__tab,
.detail-tab {
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  padding: var(--space-3) var(--space-4);
  font-family: var(--thk-sans);
  font-size: 1rem;
  font-weight: 500;
  color: var(--thk-text-mute);
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
  margin-bottom: -1px;
}
.book__tab:hover,
.detail-tab:hover { color: var(--thk-tinte); }
.book__tab.is-active,
.detail-tab.is-active {
  color: var(--thk-tinte-dunkel);
  border-bottom-color: var(--thk-bordeaux);
}
.book__tab:focus-visible,
.detail-tab:focus-visible {
  outline: 2px solid var(--thk-bordeaux);
  outline-offset: 4px;
  border-radius: 2px;
}
@media (max-width: 600px) {
  .book__tab,
  .detail-tab { padding: var(--space-2) var(--space-3); font-size: 0.92rem; }
}

/* v0.19.3.0 — max-width-70ch entfernt: die rechte Sidebar begrenzt die
   Lesebreite jetzt natürlich (Tab-Panel füllt seine Grid-Spalte). Ohne
   Sidebar fällt das Layout-Grid auf 1 Spalte (siehe oben), und der
   Container `.book-detail` selbst hat schon eine Max-Breite. */
.book__tab-panel,
.detail-tab-panel { display: none; }
.book__tab-panel.is-active,
.detail-tab-panel.is-active { display: block; animation: thkFadeIn 0.2s ease; }
@keyframes thkFadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }

.book__tab-panel .prose,
.detail-tab-panel .prose { font-size: 1.05rem; line-height: 1.7; }
.book__tab-panel .prose p,
.detail-tab-panel .prose p { margin-bottom: var(--space-4); }
.book__tab-byline {
  margin-top: var(--space-5);
  font-style: italic;
  color: var(--thk-text-mute);
  font-size: 0.95rem;
}

/* v0.19.3.0 — Leseprobe-Tab: Download-Link unter dem Quill-Text. */
.book__leseprobe-text { margin-bottom: var(--space-5); }
.book__leseprobe-download {
  margin: var(--space-5) 0 0;
  padding-top: var(--space-4);
  border-top: 1px solid var(--thk-line);
}
.book__leseprobe-download-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  color: var(--thk-bordeaux);
  font-weight: 500;
  text-decoration: none;
  font-size: 0.95rem;
}
.book__leseprobe-download-link:hover { text-decoration: underline; }

.book__details,
.detail-dl {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: var(--space-3) var(--space-5);
  margin: 0;
  font-size: 0.98rem;
}
.book__details dt,
.detail-dl dt { font-weight: 600; color: var(--thk-tinte-dunkel); }
.book__details dd,
.detail-dl dd { margin: 0; color: var(--thk-text); }

.book__toc-title { margin-top: var(--space-6); }
.book__toc-prose { font-size: 1rem; line-height: 1.65; }

/* v0.19.3.0 — Sidebar (rechte Spalte unter Tab-Navigation).
   Enthält Autor-Box(en) oben und Metadaten-Box unten. Auf mobil
   (≤900px) wandert sie unter die Tabs (siehe Grid-Wrapper). */
.book__aside,
.detail-aside {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  margin-top: 0;
}
.book__aside-eyebrow,
.detail-aside-eyebrow {
  margin: 0 0 var(--space-2);
  font-family: var(--thk-sans);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--thk-text-mute);
}
.book__aside-author,
.book__aside-meta,
.detail-card {
  padding: var(--space-5);
  background: var(--thk-papier-warm, #f5f0e4);
  border: 1px solid var(--thk-line);
  border-radius: var(--radius-sm, 4px);
}
.book__aside-author-head {
  display: flex;
  gap: var(--space-4);
  align-items: center;
  margin-bottom: var(--space-3);
}
.book__aside-author-foto {
  width: 80px; height: 80px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--thk-papier, #fbf7ef);
  border: 1px solid var(--thk-line);
  flex-shrink: 0;
}
.book__aside-author-foto--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--thk-serif);
  font-size: 2rem;
  color: var(--thk-text-mute);
  text-transform: uppercase;
}
.book__aside-author-titel { min-width: 0; }
.book__aside-author-name {
  margin: 0;
  font-family: var(--thk-serif);
  font-size: 1.15rem;
  line-height: 1.3;
  color: var(--thk-tinte-dunkel);
}
.book__aside-author-name a {
  color: inherit;
  text-decoration: none;
}
.book__aside-author-name a:hover { color: var(--thk-bordeaux); }
.book__aside-author-bio {
  margin: 0 0 var(--space-3);
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--thk-text);
}
.book__aside-author-link {
  margin: 0;
  font-size: 0.9rem;
}
.book__aside-author-link a {
  color: var(--thk-bordeaux);
  text-decoration: none;
  font-weight: 500;
}
.book__aside-author-link a:hover { text-decoration: underline; }
.book__aside-meta .book__details,
.detail-card .detail-dl {
  font-size: 0.92rem;
  gap: var(--space-2) var(--space-4);
}
/* 0.40.0.0 — Buchdaten ohne Zeilenumbruch: ISBN, Jahr, Seiten bleiben in
   einer Zeile; Bezeichnungen kurz („Erschienen"), Spalte so breit wie die
   längste Bezeichnung. Die Seitenleiste ist dafür 340 statt 320 px breit. */
.book__details--kompakt,
.detail-dl--kompakt { column-gap: var(--space-3); }
.book__details--kompakt dt,
.detail-dl--kompakt dt { white-space: nowrap; }
.book__details--kompakt dd,
.detail-dl--kompakt dd { min-width: 0; overflow-wrap: normal; hyphens: none; }
.book__details--kompakt .bd-fest,
.detail-dl--kompakt .bd-fest { white-space: nowrap; }

/* Testimonials */
.book__testimonial {
  margin: 0 0 var(--space-5) 0;
  padding: var(--space-5) var(--space-6);
  border-left: 3px solid var(--thk-bordeaux);
  background: var(--thk-papier-warm);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.book__testimonial-zitat {
  font-family: var(--thk-serif);
  font-style: italic;
  font-size: 1.2rem;
  line-height: 1.55;
  margin: 0 0 var(--space-3) 0;
  color: var(--thk-tinte);
}
.book__testimonial-autor { font-size: 0.9rem; color: var(--thk-text-mute); font-style: normal; }

/* Galerie unverändert (Klassen bleiben) — siehe ältere Stildatei. */

/* Ähnliche Titel */
.book__aehnliche {
  margin: var(--space-8) 0 var(--space-7) 0;
  padding-top: var(--space-7);
  border-top: 1px solid var(--thk-line);
}
.book__aehnliche-titel {
  font-family: var(--thk-serif);
  font-size: 1.7rem;
  text-align: center;
  margin-bottom: var(--space-6);
  color: var(--thk-tinte-dunkel);
}
.book__aehnliche-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
}
@media (max-width: 700px) {
  .book__aehnliche-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-4); }
}
@media (max-width: 440px) {
  .book__aehnliche-grid { grid-template-columns: 1fr; }
}

/* Cover-Placeholder für book-card (wenn kein Bild) */
.book-card__cover-placeholder {
  width: 100%; aspect-ratio: 2/3;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--thk-tinte) 0%, var(--thk-bordeaux) 100%);
  color: var(--thk-papier);
  font-family: var(--thk-serif);
  font-size: 2.5rem;
  font-weight: 500;
}
.book-card__teaser {
  font-size: 0.85rem;
  color: var(--thk-text-mute);
  margin: 0 0 var(--space-1) 0;
  line-height: 1.4;
}

/* ── 2. BUCHLISTE — Sidebar + Toolbar + Grid + Pagination ──────────── */
.booklist__header { margin-bottom: var(--space-6); }
.booklist__lead { max-width: 65ch; }

.booklist__layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: var(--space-7);
  align-items: start;
}
@media (max-width: 900px) {
  .booklist__layout { grid-template-columns: 1fr; gap: var(--space-5); }
}

/* Sidebar */
.booklist__sidebar { position: sticky; top: calc(var(--space-7) + 60px); }
@media (max-width: 900px) {
  .booklist__sidebar { position: static; }
}
.booklist__filter { display: flex; flex-direction: column; gap: var(--space-5); }

/* v0.26.0.3 — Freitextsuche in der Filter-Sidebar */
.booklist__search-row {
  display: flex;
  align-items: stretch;
  gap: 0;
  border: 1.5px solid var(--thk-line);
  border-radius: var(--radius-sm, 4px);
  background: #fff;
  overflow: hidden;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.booklist__search-row:focus-within {
  border-color: var(--thk-bordeaux);
  box-shadow: 0 0 0 3px rgba(122, 44, 30, .12);
}
.booklist__search-input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  outline: 0;
  padding: .6rem .75rem;
  font-family: inherit;
  font-size: .95rem;
  background: transparent;
  color: var(--thk-text, #2a2620);
}
.booklist__search-btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 .85rem;
  border: 0;
  cursor: pointer;
  background: var(--thk-bordeaux);
  color: #fff;
  transition: background .15s ease;
}
.booklist__search-btn:hover { background: var(--thk-bordeaux-tief); }

/* v0.26.0.3 — „Anwenden" prominenter: klarer Bordeaux-CTA statt blassem
   Basis-Button, größer und mit etwas mehr Gewicht. */
.booklist__filter-apply {
  background: var(--thk-bordeaux);
  color: #fff;
  border-color: var(--thk-bordeaux);
  font-weight: 600;
  font-size: 1rem;
  padding: .75rem var(--space-5);
  box-shadow: 0 1px 2px rgba(0,0,0,.08);
}
.booklist__filter-apply:hover {
  background: var(--thk-bordeaux-tief);
  border-color: var(--thk-bordeaux-tief);
  color: #fff;
  text-decoration: none;
}
.booklist__filter-title {
  font-family: var(--thk-sans);
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--thk-text-mute);
  margin: 0;
}
.booklist__filter-block {
  border: none;
  margin: 0;
  padding: 0 0 var(--space-4) 0;
  border-bottom: 1px solid var(--thk-line-soft);
}
.booklist__filter-block:last-of-type { border-bottom: none; }
.booklist__filter-block legend {
  font-family: var(--thk-sans);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--thk-tinte-dunkel);
  margin-bottom: var(--space-3);
  padding: 0;
}
.booklist__filter-options {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  max-height: 220px;
  overflow-y: auto;
  padding-right: 2px;
}
.booklist__filter-check {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.95rem;
  cursor: pointer;
  color: var(--thk-text);
  padding: 2px 0;
}
.booklist__filter-check input { accent-color: var(--thk-bordeaux); cursor: pointer; }
.booklist__filter-check:hover { color: var(--thk-bordeaux); }
.booklist__filter-select {
  width: 100%;
  padding: 0.5rem 0.6rem;
  border: 1px solid var(--thk-line);
  border-radius: var(--radius-sm);
  background: var(--thk-papier);
  font-family: inherit;
  font-size: 0.95rem;
  color: var(--thk-text);
}
.booklist__filter-price {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2);
}
.booklist__filter-price label {
  display: flex; flex-direction: column; gap: 2px;
}
.booklist__filter-price input {
  width: 100%;
  padding: 0.45rem 0.5rem;
  border: 1px solid var(--thk-line);
  border-radius: var(--radius-sm);
  background: var(--thk-papier);
  font-family: inherit;
  font-size: 0.92rem;
  color: var(--thk-text);
}
.booklist__filter-hint { font-size: 0.78rem; color: var(--thk-text-mute); margin: var(--space-2) 0 0 0; }
.booklist__filter-actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: var(--space-2);
}
.booklist__filter-reset { font-size: 0.85rem; text-align: center; }

/* Hauptbereich */
.booklist__toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--thk-line-soft);
  flex-wrap: wrap;
}
.booklist__count { margin: 0; font-size: 0.95rem; color: var(--thk-text); }
.booklist__sort { display: flex; align-items: center; gap: var(--space-2); }
.booklist__sort-select {
  padding: 0.4rem 0.7rem;
  border: 1px solid var(--thk-line);
  border-radius: var(--radius-sm);
  background: var(--thk-papier);
  font-family: inherit;
  font-size: 0.92rem;
  cursor: pointer;
}

/* Aktive-Filter-Pills */
.booklist__active-filter {
  display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center;
  margin: 0 0 var(--space-5) 0;
}
.booklist__pill {
  display: inline-flex; align-items: center; gap: 0.4em;
  padding: 0.3rem 0.6rem 0.3rem 0.75rem;
  background: var(--thk-papier-warm);
  color: var(--thk-tinte-dunkel);
  font-size: 0.85rem;
  border-radius: 99px;
  text-decoration: none;
  border: 1px solid var(--thk-line-soft);
  transition: background 0.15s ease;
}
.booklist__pill:hover { background: var(--thk-papier-tief); color: var(--thk-bordeaux); }
.booklist__pill-x { font-size: 1rem; line-height: 1; opacity: 0.6; }
.booklist__pill-reset { font-size: 0.85rem; margin-left: auto; }

.booklist__empty {
  padding: var(--space-7) var(--space-5);
  text-align: center;
  border: 1px dashed var(--thk-line);
  border-radius: var(--radius);
  background: var(--thk-papier-warm);
}

/* Grid (verfeinert für Listing — Dichte aus Setting `liste_card_dichte`)
   v0.19.6.0 — vorher fix `repeat(4, 1fr)`, jetzt dynamisch über
   `--card-min`. Mobile-Breakpoints darunter bleiben unverändert und
   überschreiben die auto-fill-Berechnung weiterhin. */
.book-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--card-min, 220px), 1fr));
  gap: var(--space-5) var(--space-4);
}
@media (max-width: 1100px) { .book-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 740px)  { .book-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-4); } }
@media (max-width: 440px)  { .book-grid { grid-template-columns: 1fr; } }
.book-grid--list { /* gleiche Klasse, semantischer Marker für Listing */ }

/* Pagination */
.booklist__pagination {
  display: flex; gap: var(--space-2);
  justify-content: center; align-items: center;
  margin-top: var(--space-7);
  flex-wrap: wrap;
}
.booklist__page-link {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 40px; height: 40px;
  padding: 0 var(--space-3);
  border: 1px solid var(--thk-line);
  border-radius: var(--radius-sm);
  background: var(--thk-papier);
  color: var(--thk-text);
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 500;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.booklist__page-link:hover { background: var(--thk-papier-warm); border-color: var(--thk-line); color: var(--thk-bordeaux); }
.booklist__page-link--active {
  background: var(--thk-bordeaux);
  border-color: var(--thk-bordeaux);
  color: var(--thk-papier);
}
.booklist__page-link--active:hover { background: var(--thk-bordeaux); color: var(--thk-papier); }
.booklist__page-link--disabled {
  opacity: 0.35;
  pointer-events: none;
}
.booklist__page-ellipsis {
  display: inline-block;
  padding: 0 0.4rem;
  color: var(--thk-text-mute);
}

/* ── 3. WARENKORB — neue Item-Karten + Empfehlungen ─────────────────── */

/* Item-Layout: Cover | Body | Qty | Line+X */
.cart-item {
  display: grid;
  grid-template-columns: 84px 1fr auto auto;
  gap: var(--space-4);
  align-items: center;
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--thk-line-soft);
}
.cart-item:first-child { padding-top: 0; }
.cart-item__cover { width: 84px; }
.cart-item__cover a, .cart-item__cover img,
.cart-item__cover-placeholder, .cart-item__cover-icon {
  width: 84px;
  aspect-ratio: 2/3;
  border-radius: 2px;
  overflow: hidden;
  display: block;
}
.cart-item__cover img { object-fit: cover; box-shadow: 0 4px 12px -6px rgba(20, 40, 69, 0.3); }
.cart-item__cover-placeholder {
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--thk-tinte) 0%, var(--thk-bordeaux) 100%);
  color: var(--thk-papier);
  font-family: var(--thk-serif);
  font-size: 2rem;
}
.cart-item__cover-icon {
  display: flex; align-items: center; justify-content: center;
  background: var(--thk-papier-warm);
  font-size: 2rem;
  aspect-ratio: 1;
  width: 84px; height: 84px;
}

.cart-item__body { min-width: 0; }
.cart-item__title { margin: 0 0 0.2rem; font-size: 1.05rem; font-family: var(--thk-serif); font-weight: 500; color: var(--thk-tinte); }
.cart-item__title a { color: var(--thk-tinte); text-decoration: none; }
.cart-item__title a:hover { color: var(--thk-bordeaux); text-decoration: underline; }
.cart-item__meta { margin: 0.15rem 0; font-size: 0.85rem; color: var(--thk-text-mute); }
.cart-item__unit { margin: 0.2rem 0 0 0; font-size: 0.88rem; color: var(--thk-text-mute); }

.cart-item__qty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.cart-item__qty--readonly { color: var(--thk-text-mute); font-size: 0.95rem; padding: 0 var(--space-3); }
.cart-item__qty-controls {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--thk-line);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--thk-papier);
}
.cart-item__qty-btn {
  width: 30px; height: 34px;
  background: transparent;
  border: none;
  font-size: 1rem;
  font-weight: 500;
  color: var(--thk-tinte);
  cursor: pointer;
  font-family: inherit;
  line-height: 1;
}
.cart-item__qty-btn:hover { background: var(--thk-papier-tief); }
.cart-item__qty-input {
  width: 46px; height: 34px;
  border: none;
  border-left: 1px solid var(--thk-line);
  border-right: 1px solid var(--thk-line);
  background: var(--thk-papier);
  text-align: center;
  font-size: 0.95rem;
  font-family: inherit;
  color: var(--thk-text);
  -moz-appearance: textfield;
}
.cart-item__qty-input::-webkit-outer-spin-button,
.cart-item__qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.cart-item__qty-update {
  font-size: 0.75rem;
  background: transparent;
  border: none;
  color: var(--thk-text-mute);
  cursor: pointer;
  text-decoration: underline;
  padding: 0;
  font-family: inherit;
}
.cart-item__qty-update:hover { color: var(--thk-bordeaux); }

.cart-item__line {
  display: flex; flex-direction: column; align-items: flex-end; gap: var(--space-2);
  min-width: 80px;
}
.cart-item__line strong {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--thk-tinte-dunkel);
}
.cart-item__remove { margin: 0; padding: 0; }
.cart-item__remove-btn {
  background: transparent;
  border: none;
  font-size: 1.4rem;
  line-height: 1;
  color: var(--thk-text-mute);
  cursor: pointer;
  padding: 0 0.3rem;
  border-radius: var(--radius-sm);
  transition: color 0.15s ease, background 0.15s ease;
}
.cart-item__remove-btn:hover { color: var(--thk-bordeaux); background: var(--thk-papier-warm); }

@media (max-width: 700px) {
  .cart-item {
    grid-template-columns: 70px 1fr;
    grid-template-areas:
      "cover body"
      "cover qty"
      "line  line";
    align-items: start;
    gap: var(--space-3);
  }
  .cart-item__cover { grid-area: cover; }
  .cart-item__cover a, .cart-item__cover img,
  .cart-item__cover-placeholder, .cart-item__cover-icon { width: 70px; }
  .cart-item__body { grid-area: body; }
  .cart-item__qty { grid-area: qty; align-items: flex-start; }
  .cart-item__line { grid-area: line; flex-direction: row; justify-content: space-between; width: 100%; align-items: center; }
}

/* Gutschein als Details/Summary */
.cart-voucher-details { margin-top: var(--space-5); }
.cart-voucher-details summary {
  cursor: pointer;
  font-size: 0.9rem;
  color: var(--thk-text-mute);
  padding: var(--space-2) 0;
  user-select: none;
}
.cart-voucher-details summary:hover { color: var(--thk-bordeaux); }
.cart-voucher-details[open] summary { color: var(--thk-tinte); font-weight: 500; margin-bottom: var(--space-2); }

/* Cart-Empfehlungen */
.cart-empfehlungen {
  margin-top: var(--space-8);
  padding-top: var(--space-7);
  border-top: 1px solid var(--thk-line);
}
.cart-empfehlungen__titel {
  font-family: var(--thk-serif);
  font-size: 1.7rem;
  margin-bottom: var(--space-6);
  color: var(--thk-tinte-dunkel);
  text-align: center;
}

/* ── 4. STATISCHE SEITEN — TOC-Sidebar ──────────────────────────────── */
.site-page__header {
  padding: var(--space-7) 0 var(--space-5) 0;
  border-bottom: 1px solid var(--thk-line-soft);
  margin-bottom: var(--space-6);
}
.site-page__header h1 { margin: 0; }
.site-page__sub { color: var(--thk-text-mute); margin-top: var(--space-2); }
.site-page__layout {
  padding-bottom: var(--space-8);
}
.site-page--mit-toc .site-page__layout {
  display: grid;
  grid-template-columns: 1fr 240px;
  gap: var(--space-8);
  align-items: start;
}
@media (max-width: 900px) {
  .site-page--mit-toc .site-page__layout { grid-template-columns: 1fr; gap: var(--space-5); }
}
.site-page__main { max-width: 70ch; }
.site-page__main h2 { scroll-margin-top: 80px; margin-top: var(--space-7); }
.site-page__main h2:first-child { margin-top: 0; }
.site-page__content { font-size: 1.02rem; line-height: 1.7; }

.site-page__toc { position: sticky; top: calc(var(--space-7) + 60px); }
@media (max-width: 900px) {
  .site-page__toc { position: static; order: -1; }
}
.site-page__toc-inner {
  padding: var(--space-4) var(--space-5);
  background: var(--thk-papier-warm);
  border-radius: var(--radius);
  border: 1px solid var(--thk-line-soft);
}
.site-page__toc-titel {
  font-family: var(--thk-sans);
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--thk-text-mute);
  margin: 0 0 var(--space-3) 0;
}
.site-page__toc-inner ul { list-style: none; padding: 0; margin: 0; }
.site-page__toc-inner li { margin-bottom: var(--space-2); }
.site-page__toc-inner a {
  display: block;
  padding: var(--space-1) 0;
  color: var(--thk-tinte);
  text-decoration: none;
  font-size: 0.92rem;
  line-height: 1.4;
  border-left: 2px solid transparent;
  padding-left: var(--space-2);
  margin-left: -var(--space-2);
  transition: border-color 0.15s ease, color 0.15s ease;
}
.site-page__toc-inner a:hover {
  color: var(--thk-bordeaux);
  border-left-color: var(--thk-bordeaux);
}

/* ── 5. THEMENWELTEN-HERO ───────────────────────────────────────────── */
.themenwelten-hero {
  position: relative;
  min-height: 280px;
  overflow: hidden;
  display: flex;
  align-items: center;
  margin-bottom: var(--space-7);
}
.themenwelten-hero--ohne-bild { min-height: 200px; }
.themenwelten-hero__bg {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  filter: brightness(0.55);
}
.themenwelten-hero__bg--placeholder {
  background: linear-gradient(135deg, var(--thk-tinte) 0%, var(--thk-bordeaux) 100%);
  filter: none;
}
.themenwelten-hero__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(20, 40, 69, 0.7) 0%, rgba(20, 40, 69, 0.15) 100%);
}
.themenwelten-hero__inner {
  position: relative;
  padding: var(--space-7) var(--space-5);
  color: var(--thk-papier);
}
.themenwelten-hero__titel {
  font-family: var(--thk-serif);
  font-size: clamp(2rem, 4.5vw, 3.4rem);
  color: var(--thk-papier);
  margin: 0 0 var(--space-3) 0;
  max-width: 22ch;
  line-height: 1.1;
}
.themenwelten-hero__lead {
  font-size: 1.08rem;
  color: rgba(251, 247, 239, 0.92);
  max-width: 58ch;
  line-height: 1.55;
  margin: 0;
}

/* ── PRINT-Friendly Detail-Seite ────────────────────────────────────── */
@media print {
  .site-header, .site-footer, .book__buy-form, .book__quick-actions,
  .book__order, .book__aehnliche, .booklist__sidebar, .booklist__toolbar,
  .booklist__pagination, .cart-summary, .cart-item__remove,
  .cart-item__qty, .site-page__toc { display: none !important; }
  /* v0.19.3.0 — Tabs-Layout im Druck einspaltig, Aside unter Tab-Inhalt,
     alle Panels expandiert (Tab-Konzept ist im Druck sinnlos). */
  .book__tabs-layout { display: block; }
  .book__tab-panel { display: block !important; }
  .book__tab { display: none; }
  .book__aside { margin-top: var(--space-6); break-inside: avoid; }
}

/* ──────────────────────────────────────────────────────────────────
   Customer Auth & Kundencenter (v0.13.0.0)
   ──────────────────────────────────────────────────────────────── */

.customer-auth {
  padding: var(--space-5) 0 var(--space-7);
}
.customer-auth__header {
  margin-bottom: var(--space-4);
  text-align: center;
}
.customer-auth__header h1 {
  margin: 0 0 var(--space-2);
}
.customer-auth__form {
  background: var(--thk-papier-tief);
  border: 1px solid var(--thk-line);
  border-radius: 8px;
  padding: var(--space-5);
  margin-top: var(--space-4);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
.customer-auth__form .form-row {
  margin-bottom: var(--space-3);
}
.customer-auth__form .form-row:last-of-type {
  margin-bottom: 0;
}
.customer-auth__form .form-row input[type="email"],
.customer-auth__form .form-row input[type="password"],
.customer-auth__form .form-row input[type="text"],
.customer-auth__form .form-row select {
  width: 100%;
  box-sizing: border-box;
}
.customer-auth__form label {
  font-weight: 600;
  color: var(--thk-text);
  margin-bottom: 4px;
}
.customer-auth__actions {
  margin-top: var(--space-4);
}
.customer-auth__error {
  background: #fee2e2;
  border-left: 4px solid #dc2626;
  padding: 12px 16px;
  border-radius: 4px;
  margin-bottom: var(--space-3);
  color: #7f1d1d;
}
.customer-auth__error p {
  margin: 0;
}
.customer-auth__error p + p {
  margin-top: 0.5rem;
}
.customer-auth__success {
  background: #dcfce7;
  border-left: 4px solid #15803d;
  padding: 12px 16px;
  border-radius: 4px;
  margin-bottom: var(--space-3);
  color: #14532d;
}
.customer-auth__success p {
  margin: 0;
}
.customer-auth__success p + p {
  margin-top: 0.5rem;
}
.customer-auth__links {
  margin-top: var(--space-4);
  text-align: center;
  font-size: 0.95rem;
}
.customer-auth__links a {
  color: var(--thk-bordeaux, #7a1c1c);
  text-decoration: none;
}
.customer-auth__links a:hover {
  text-decoration: underline;
}
.customer-auth__links span[aria-hidden] {
  color: var(--thk-text-mute);
  margin: 0 0.5em;
}

/* ── Kundencenter-Dashboard ────────────────────────────────────── */

.customer-center {
  /* 0.29.1.0: nur oben/unten — die Kurzschreibweise hob den seitlichen
     Abstand von .container auf (Text klebte mobil am Rand). */
  padding-top: var(--space-5);
  padding-bottom: var(--space-7);
}
.customer-center__header {
  margin-bottom: var(--space-4);
}
.customer-center__header h1 {
  margin: 0 0 var(--space-2);
}
.customer-center__stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-4);
  margin: var(--space-4) 0;
}
.customer-center__card {
  background: var(--thk-papier-tief);
  border: 1px solid var(--thk-line);
  border-radius: 8px;
  padding: var(--space-4);
}
.customer-center__card-label {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--thk-text-mute);
  margin-bottom: 0.5rem;
}
.customer-center__card-value {
  font-size: 2rem;
  font-weight: 700;
  color: var(--thk-bordeaux, #7a1c1c);
  line-height: 1.2;
}
.customer-center__card-meta {
  font-size: 0.95rem;
  color: var(--thk-text);
  margin-top: 0.5rem;
}
.customer-center__section {
  margin-top: var(--space-5);
}
.customer-center__section h2 {
  margin: 0 0 var(--space-3);
}
.customer-center__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
}
.customer-center__actions form {
  margin: 0;
}

/* ──────────────────────────────────────────────────────────────────
   Kundencenter — Bestellübersicht & Detail (v0.13.1.0)
   ──────────────────────────────────────────────────────────────── */

.customer-center__breadcrumb {
  font-size: 0.9rem;
  color: var(--thk-text-mute);
  margin: 0 0 var(--space-2);
}
.customer-center__breadcrumb a {
  color: inherit;
  text-decoration: none;
}
.customer-center__breadcrumb a:hover {
  color: var(--thk-bordeaux, #7a1c1c);
  text-decoration: underline;
}
.customer-center__breadcrumb span[aria-hidden] {
  margin: 0 0.4em;
  opacity: 0.5;
}

.customer-center__card--link {
  display: block;
  text-decoration: none;
  color: inherit;
  transition: border-color 120ms ease, transform 120ms ease;
}
.customer-center__card--link:hover {
  border-color: var(--thk-bordeaux, #7a1c1c);
  text-decoration: none;
  color: inherit;
}
.customer-center__card-cta {
  margin-top: 0.75rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--thk-bordeaux, #7a1c1c);
}

.customer-center__empty {
  background: var(--thk-papier-tief);
  border: 1px solid var(--thk-line);
  border-radius: 8px;
  padding: var(--space-5);
  text-align: center;
  margin: var(--space-4) 0;
}
.customer-center__empty p {
  margin: 0 0 var(--space-3);
}
.customer-center__empty p:last-child {
  margin-bottom: 0;
}

.customer-center__back {
  margin-top: var(--space-5);
  font-size: 0.95rem;
}
.customer-center__back a {
  color: var(--thk-bordeaux, #7a1c1c);
  text-decoration: none;
}
.customer-center__back a:hover {
  text-decoration: underline;
}

/* ── Bestellungs-Liste ─────────────────────────────────────────── */

.orders-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin: var(--space-4) 0;
}
.orders-list__item {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4);
  background: var(--thk-papier-tief);
  border: 1px solid var(--thk-line);
  border-radius: 8px;
  text-decoration: none;
  color: inherit;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
.orders-list__item:hover {
  border-color: var(--thk-bordeaux, #7a1c1c);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
  text-decoration: none;
  color: inherit;
}
.orders-list__item-main {
  flex: 1 1 auto;
  min-width: 0;
}
.orders-list__nr {
  font-size: 1.05rem;
  margin-bottom: 0.25rem;
}
.orders-list__meta {
  font-size: 0.9rem;
  color: var(--thk-text-mute);
}
.orders-list__meta span[aria-hidden] {
  margin: 0 0.4em;
  opacity: 0.5;
}
.orders-list__item-right {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.5rem;
}
.orders-list__betrag {
  font-weight: 700;
  font-size: 1.05rem;
}
@media (max-width: 600px) {
  .orders-list__item {
    flex-direction: column;
    gap: var(--space-2);
  }
  .orders-list__item-right {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 100%;
  }
}

.orders-list__pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin: var(--space-5) 0;
  flex-wrap: wrap;
}
.orders-list__page-info {
  font-size: 0.95rem;
  color: var(--thk-text-mute);
}

/* ── Status-Badges ────────────────────────────────────────────── */

.orders-status-badge {
  display: inline-block;
  padding: 0.25rem 0.625rem;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 600;
  white-space: nowrap;
  line-height: 1.4;
}
.orders-status-badge--lg {
  font-size: 0.9rem;
  padding: 0.4rem 0.9rem;
}
.orders-status-badge--success {
  background: #dcfce7;
  color: #14532d;
}
.orders-status-badge--info {
  background: #e0e7ff;
  color: #1e3a8a;
}
.orders-status-badge--danger {
  background: #fee2e2;
  color: #7f1d1d;
}

/* ── Bestellungs-Detail ───────────────────────────────────────── */

.order-detail__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.order-detail__head h1 {
  margin: 0;
}

.order-detail__section {
  background: var(--thk-papier-tief);
  border: 1px solid var(--thk-line);
  border-radius: 8px;
  padding: var(--space-5);
  margin: var(--space-4) 0;
}
.order-detail__section h2 {
  margin: 0 0 var(--space-3);
  font-size: 1.2rem;
}
.order-detail__section h3 {
  margin: 0 0 var(--space-2);
  font-size: 1rem;
  color: var(--thk-text-mute);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.order-detail__notice {
  padding: var(--space-3) var(--space-4);
  border-radius: 6px;
  margin: var(--space-3) 0;
}
.order-detail__notice--danger {
  background: #fee2e2;
  border-left: 4px solid #dc2626;
  color: #7f1d1d;
}

.order-detail__items-table {
  width: 100%;
  border-collapse: collapse;
}
.order-detail__items-table th,
.order-detail__items-table td {
  padding: 0.75rem 0.5rem;
  text-align: left;
  border-bottom: 1px solid var(--thk-line);
}
.order-detail__items-table th {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--thk-text-mute);
  font-weight: 600;
}
.order-detail__items-table .text-right {
  text-align: right;
}
.order-detail__items-table tfoot td {
  border-bottom: none;
  padding: 0.5rem 0.5rem;
}
.order-detail__items-total td {
  border-top: 2px solid var(--thk-text);
  padding-top: 0.75rem !important;
  font-size: 1.05rem;
}
@media (max-width: 600px) {
  .order-detail__items-table th,
  .order-detail__items-table td {
    padding: 0.5rem 0.25rem;
    font-size: 0.9rem;
  }
}

.order-detail__addresses {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}
@media (max-width: 600px) {
  .order-detail__addresses {
    grid-template-columns: 1fr;
  }
}

.order-detail__keyvalue {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.5rem var(--space-3);
  margin: 0;
}
.order-detail__keyvalue dt {
  font-weight: 600;
  color: var(--thk-text-mute);
}
.order-detail__keyvalue dd {
  margin: 0;
}

.order-detail__mahnungen {
  list-style: none;
  padding: 0;
  margin: 0;
}
.order-detail__mahnungen li {
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--thk-line);
}
.order-detail__mahnungen li:last-child {
  border-bottom: none;
}

/* ──────────────────────────────────────────────────────────────────
   Kundencenter — Profil & Adressbuch (v0.13.2.0)
   ──────────────────────────────────────────────────────────────── */

.btn--sm {
  padding: 0.35rem 0.7rem;
  font-size: 0.85rem;
}

.address-book__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-bottom: var(--space-3);
}

.address-book {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-3);
}
.address-book__card {
  background: var(--thk-papier-warm, #fbf5e8);
  border: 1px solid var(--thk-line);
  border-radius: 8px;
  padding: var(--space-3);
  display: flex;
  flex-direction: column;
}
.address-book__card-head {
  margin-bottom: 0.75rem;
}
.address-book__typ {
  display: inline-block;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: var(--thk-papier, #fbf7ef);
  color: var(--thk-text-mute);
  border: 1px solid var(--thk-line);
}
.address-book__typ--rechnung {
  background: #e0e7ff;
  color: #1e3a8a;
  border-color: #c7d2fe;
}
.address-book__typ--lieferung {
  background: #dcfce7;
  color: #14532d;
  border-color: #bbf7d0;
}
.address-book__card-body {
  flex: 1 1 auto;
  font-size: 0.95rem;
  line-height: 1.5;
}
.address-book__card-actions {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--thk-line);
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

/* Disabled-Input für read-only E-Mail im Profil-Form */
.customer-auth__form input[disabled],
.customer-auth__form input[readonly] {
  background: var(--thk-papier-warm, #fbf5e8);
  color: var(--thk-text-mute);
  cursor: not-allowed;
}

/* aria-invalid bei Validierungs-Fehler */
.customer-auth__form input[aria-invalid="true"],
.customer-auth__form select[aria-invalid="true"] {
  border-color: #dc2626;
  background: #fef2f2;
}

/* ──────────────────────────────────────────────────────────────────
   Kundencenter — Widerruf (v0.13.3.0)
   ──────────────────────────────────────────────────────────────── */

.btn--danger {
  background: #dc2626;
  color: #fff;
  border-color: #dc2626;
}
.btn--danger:hover {
  background: #b91c1c;
  border-color: #b91c1c;
  color: #fff;
  text-decoration: none;
}

.order-detail__widerruf {
  border-left: 4px solid #dc2626;
}
.order-detail__widerruf h2 {
  color: #b91c1c;
}
.order-detail__widerruf p {
  margin: 0 0 var(--space-2);
}
.order-detail__widerruf-liste {
  margin: var(--space-2) 0;
  padding-left: 1.5rem;
}
.order-detail__widerruf-liste li {
  margin-bottom: 0.35rem;
  line-height: 1.5;
}

.order-detail__widerruf-hinweis {
  background: var(--thk-papier-warm, #fbf5e8);
  border-left: 4px solid #d97706;
}
.order-detail__widerruf-hinweis h2 {
  margin-top: 0;
}

/* ── v0.20.9.2 — Zentraler Breadcrumb (app/Views/_partials/breadcrumb.php) ──
   Wiederverwendbare Brotkrumen-Navigation. Innen-Abstand über .container,
   damit die Krumen mit dem Seiteninhalt fluchten. Auf Detailseiten, die
   ihren eigenen .container mitbringen (Autor, Themenwelt), wird der
   Breadcrumb OHNE zusätzlichen .container eingebunden — dort trägt der
   umgebende Wrapper die Ausrichtung. */
.thk-breadcrumb { margin: var(--space-4) 0 var(--space-2); }
.thk-breadcrumb__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0;
  font-size: 0.9rem;
  color: var(--thk-text-mute);
}
.thk-breadcrumb__item { display: inline-flex; align-items: center; }
.thk-breadcrumb__link {
  color: inherit;
  text-decoration: none;
}
.thk-breadcrumb__link:hover {
  color: var(--thk-bordeaux, #7a1c1c);
  text-decoration: underline;
}
.thk-breadcrumb__sep { margin: 0 0.5em; opacity: 0.5; }
.thk-breadcrumb__current {
  color: var(--thk-text, #1a1a1a);
  font-weight: 500;
  /* lange Titel auf schmalen Screens nicht die Zeile sprengen lassen */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 60vw;
}
@media (max-width: 640px) {
  .thk-breadcrumb { margin-top: var(--space-3); }
  .thk-breadcrumb__list { font-size: 0.82rem; }
  .thk-breadcrumb__current { max-width: 70vw; }
}

/* ── 0.29.0.0 Händlerportal ───────────────────────────────────────── */
.preis-laden { color: var(--thk-text-mute, #6e6258); font-weight: 400; font-size: .9em; margin-right: .25em; }
.preis-haendler { color: var(--thk-bordeaux, #7a2c1e); font-weight: 600; white-space: nowrap; }
.preis-haendler small { font-weight: 400; font-size: .75em; color: var(--thk-text-mute, #6e6258); }
.haendler-hinweis { background: var(--thk-papier-tief, #f3ece0); border-left: 3px solid var(--thk-gold, #b8954a); padding: .6rem .9rem; border-radius: 4px; margin-top: .75rem; }
.payment-info--hinweis { background: var(--thk-papier-tief, #f3ece0); border-left: 3px solid var(--thk-bordeaux, #7a2c1e); padding: .6rem .9rem; border-radius: 4px; }

/* ── 0.29.1.0 Startseite: Für den Buchhandel ─────────────────────── */
.haendler-teaser__aktionen { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: var(--space-4, 1rem); }

/* ══════════════════════════════════════════════════════════════════════
   0.29.2.0 — Bestellprozess (Warenkorb · Ihre Daten · Prüfen · Bestätigung)
   Nur vorhandene THK-Tokens: Papier, Tinte (Marine), Bordeaux, Gold, Linien.
   ══════════════════════════════════════════════════════════════════════ */

/* Schrittleiste */
.ck-steps { margin: 0 0 var(--space-6); }
.ck-steps ol { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--space-2); counter-reset: none; }
.ck-steps__item { flex: 1 1 0; min-width: 0; position: relative; }
.ck-steps__item > a, .ck-steps__item > span:first-child { text-decoration: none; }
.ck-steps__item a, .ck-steps__item { color: var(--thk-text-mute); }
.ck-steps__item a:hover .ck-steps__label { color: var(--thk-bordeaux); text-decoration: underline; }
.ck-steps__item::after {
  content: ''; display: block; height: 3px; border-radius: 2px; margin-top: var(--space-2);
  background: var(--thk-line);
}
.ck-steps__item--done::after, .ck-steps__item--current::after { background: var(--thk-tinte); }
.ck-steps__item--current::after { background: var(--thk-bordeaux); }
.ck-steps__nr {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.6rem; height: 1.6rem; border-radius: 50%; margin-right: .4rem;
  font-size: .8rem; font-weight: 600; border: 1px solid var(--thk-line); background: var(--thk-papier);
  color: var(--thk-text-mute); vertical-align: middle;
}
.ck-steps__item--done .ck-steps__nr { background: var(--thk-tinte); border-color: var(--thk-tinte); color: var(--thk-papier); }
.ck-steps__item--current .ck-steps__nr { background: var(--thk-bordeaux); border-color: var(--thk-bordeaux); color: #fff; }
.ck-steps__label { font-size: .9rem; vertical-align: middle; }
.ck-steps__item--current .ck-steps__label { color: var(--thk-text); font-weight: 600; }
@media (max-width: 640px) {
  .ck-steps__label { display: none; }
  .ck-steps__item--current .ck-steps__label { display: inline; font-size: .85rem; }
}

.ck-header { margin-bottom: var(--space-5); }

/* Zweispalter */
.ck-layout { display: grid; gap: var(--space-6); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 900px) { .ck-layout { grid-template-columns: minmax(0, 1fr) 360px; } }
.ck-main { min-width: 0; display: flex; flex-direction: column; gap: var(--space-4); }
.ck-side { min-width: 0; }
@media (min-width: 900px) { .ck-side { position: sticky; top: calc(var(--header-height, 90px) + var(--space-4)); } }

/* Karten */
.ck-card {
  background: #fff; border: 1px solid var(--thk-line-soft); border-radius: var(--radius);
  padding: var(--space-5); box-shadow: var(--shadow-soft);
}
.ck-card--quiet { box-shadow: none; background: transparent; border-style: dashed; }
.ck-card--accent { border-left: 4px solid var(--thk-gold); }
.ck-card p:last-child { margin-bottom: 0; }
.ck-card__head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); margin-bottom: var(--space-3); }
.ck-card__head .ck-card__title { margin: 0; }
.ck-card__title {
  display: flex; align-items: center; gap: var(--space-3);
  margin: 0 0 var(--space-4); font-family: var(--thk-serif); font-weight: 500; font-size: 1.35rem; color: var(--thk-tinte);
}
.ck-card__lead { margin: calc(-1 * var(--space-2)) 0 var(--space-4); font-size: .92rem; color: var(--thk-text-mute); }
.ck-num {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 1.8rem; height: 1.8rem; border-radius: 50%; background: var(--thk-papier-tief);
  font-family: var(--thk-sans); font-size: .9rem; font-weight: 600; color: var(--thk-tinte);
}
.ck-edit { font-size: .9rem; color: var(--thk-bordeaux); }
.ck-muted { color: var(--thk-text-mute); font-size: .92rem; }
.ck-help { display: block; margin-top: .3rem; font-size: .8rem; color: var(--thk-text-mute); }
.ck .form-row em { font-style: normal; color: var(--thk-text-mute); font-size: .85em; }
.ck .form-row sup { color: var(--thk-bordeaux); }
.ck .form-row input, .ck .form-row select, .ck .form-row textarea {
  background: #fff; border: 1px solid var(--thk-line); border-radius: var(--radius-sm); padding: .65rem .75rem; font: inherit; width: 100%;
}
.ck .form-row input:focus, .ck .form-row select:focus, .ck .form-row textarea:focus {
  outline: none; border-color: var(--thk-tinte); box-shadow: 0 0 0 3px rgba(30, 58, 95, .12);
}
.ck .form-row input[readonly] { background: var(--thk-papier-tief); color: var(--thk-text-mute); }
@media (min-width: 560px) {
  .ck .form-grid { grid-template-columns: 1fr 1fr; }
  .ck .ck-plz { grid-column: span 1; }
}

/* Abweichende Lieferadresse (ohne JS) */
.ck-toggle { position: absolute; opacity: 0; pointer-events: none; }
.ck-toggle__label {
  display: inline-flex; align-items: center; gap: .6rem; margin-top: var(--space-4); cursor: pointer; font-size: .95rem;
}
.ck-toggle__label::before {
  content: ''; width: 1.1rem; height: 1.1rem; border: 1px solid var(--thk-line); border-radius: 3px; background: #fff;
}
.ck-toggle:checked + .ck-toggle__label::before { background: var(--thk-tinte); border-color: var(--thk-tinte); box-shadow: inset 0 0 0 3px #fff; }
.ck-toggle:focus-visible + .ck-toggle__label::before { outline: 2px solid var(--thk-tinte); outline-offset: 2px; }
.ck-liefer { display: none; margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--thk-line-soft); }
.ck-toggle:checked ~ .ck-liefer { display: block; }

/* Zahlungsarten als Kacheln */
.ck-pay-list { display: grid; gap: var(--space-3); }
.ck-pay {
  display: flex; gap: var(--space-3); align-items: flex-start; cursor: pointer;
  padding: var(--space-4); border: 1px solid var(--thk-line); border-radius: var(--radius); background: #fff;
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.ck-pay:hover { border-color: var(--thk-tinte-hell); }
.ck-pay input { margin: .2rem 0 0; accent-color: var(--thk-tinte); width: 1.1rem; height: 1.1rem; flex: none; }
.ck-pay__body { display: flex; flex-direction: column; gap: .2rem; }
.ck-pay__body strong { color: var(--thk-tinte); }
.ck-pay__body small { color: var(--thk-text-mute); font-size: .88rem; line-height: 1.45; }
.ck-pay:has(input:checked) { border-color: var(--thk-tinte); background: var(--thk-papier); box-shadow: 0 0 0 1px var(--thk-tinte); }

/* Aktionen */
.ck-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); margin-top: var(--space-2); }
.ck-weiter { padding: .95rem 1.8rem; font-size: 1.05rem; }
.ck-back { font-size: .92rem; color: var(--thk-text-mute); }
@media (max-width: 560px) { .ck-actions .ck-weiter { width: 100%; } }

/* Zusammenfassung */
.ck-summary {
  background: var(--thk-papier-warm); border: 1px solid var(--thk-line-soft); border-radius: var(--radius);
  padding: var(--space-5);
}
.ck-summary__title { margin: 0 0 var(--space-4); font-family: var(--thk-serif); font-weight: 500; font-size: 1.3rem; color: var(--thk-tinte); }
.ck-summary__items { list-style: none; margin: 0 0 var(--space-4); padding: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.ck-summary__item { display: grid; grid-template-columns: auto 1fr auto; gap: var(--space-3); align-items: center; }
.ck-summary__items--plain .ck-summary__item { grid-template-columns: 1fr auto; padding-bottom: var(--space-2); border-bottom: 1px dotted var(--thk-line); }
.ck-summary__cover { position: relative; width: 42px; height: 58px; }
.ck-summary__cover img, .ck-summary__cover-ph {
  width: 42px; height: 58px; border-radius: 3px; object-fit: cover; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 3px 8px -4px rgba(20, 40, 69, .35);
}
.ck-summary__cover-ph { background: linear-gradient(160deg, var(--thk-tinte), var(--thk-bordeaux)); color: #fff; font-family: var(--thk-serif); font-size: 1.2rem; }
.ck-summary__qty {
  position: absolute; top: -6px; right: -8px; min-width: 1.2rem; height: 1.2rem; padding: 0 .3rem; border-radius: 1rem;
  background: var(--thk-tinte); color: #fff; font-size: .7rem; font-weight: 600; display: flex; align-items: center; justify-content: center;
}
.ck-summary__name { font-size: .92rem; line-height: 1.35; min-width: 0; }
.ck-summary__name small { display: block; color: var(--thk-text-mute); font-size: .8rem; }
.ck-summary__price { font-weight: 600; white-space: nowrap; font-size: .92rem; }
.ck-summary__totals { display: grid; grid-template-columns: 1fr auto; gap: .45rem 0; margin: 0; padding-top: var(--space-3); border-top: 1px solid var(--thk-line); }
.ck-summary__totals dt, .ck-summary__totals dd { margin: 0; }
.ck-summary__totals dt { padding-right: var(--space-3); }
.ck-summary__totals dd { text-align: right; white-space: nowrap; }
.ck-summary__total { font-size: 1.2rem; font-weight: 700; color: var(--thk-text); padding-top: var(--space-2); border-top: 1px solid var(--thk-line); margin-top: var(--space-2) !important; }
.ck-minus { color: var(--thk-bordeaux); }
.ck-summary__tax { margin: .4rem 0 0; text-align: right; font-size: .8rem; color: var(--thk-text-mute); }
.ck-summary__hint { margin: var(--space-3) 0 0; font-size: .82rem; color: var(--thk-text-mute); }
.ck-summary__edit { margin: var(--space-4) 0 0; text-align: center; font-size: .9rem; }

/* Prüfseite */
.ck-addr { display: grid; gap: var(--space-5); grid-template-columns: 1fr; }
@media (min-width: 560px) { .ck-addr { grid-template-columns: 1fr 1fr; } }
.ck-addr h3 { margin: 0 0 .4rem; font-family: var(--thk-sans); font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--thk-text-mute); font-weight: 600; }
.ck-addr p { margin: 0 0 .4rem; line-height: 1.55; }
/* 0.39.1.0 — Bestellnummer des Händlers unter den Adressen */
.ck-kbn { margin: var(--space-4) 0 0; padding-top: var(--space-3); border-top: 1px solid var(--thk-line-soft); }
.ck-table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.ck-table th { text-align: left; font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; color: var(--thk-text-mute); font-weight: 600; padding: 0 .5rem .5rem; border-bottom: 1px solid var(--thk-line); }
.ck-table td { padding: .75rem .5rem; border-bottom: 1px solid var(--thk-line-soft); vertical-align: middle; }
.ck-table td small { display: block; }
.ck-table .num { text-align: right; white-space: nowrap; }
.ck-table__cover { width: 50px; padding-left: 0 !important; }
.ck-table__cover img, .ck-table__cover .ck-summary__cover-ph { width: 38px; height: 52px; border-radius: 3px; object-fit: cover; }
@media (max-width: 560px) {
  .ck-table thead { display: none; }
  .ck-table, .ck-table tbody, .ck-table tr, .ck-table td { display: block; }
  .ck-table tr { display: grid; grid-template-columns: 50px 1fr auto; column-gap: .5rem; padding: .6rem 0; border-bottom: 1px solid var(--thk-line-soft); }
  .ck-table td { border: 0; padding: 0; }
  .ck-table__cover { grid-row: span 3; }
  .ck-table td.num { text-align: left; font-size: .88rem; color: var(--thk-text-mute); grid-column: 2; }
  .ck-table td.num::before { content: attr(data-label) ": "; }
  .ck-table td.num:last-child { color: var(--thk-text); }
}
.ck-legal { display: flex; flex-direction: column; gap: var(--space-3); margin: var(--space-5) 0 var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--thk-line); }
.ck-check { display: flex; gap: .6rem; align-items: flex-start; font-size: .9rem; line-height: 1.45; cursor: pointer; }
.ck-check input { margin-top: .2rem; width: 1rem; height: 1rem; accent-color: var(--thk-tinte); flex: none; }
.ck-check em { font-style: normal; color: var(--thk-text-mute); }
.ck-order .ck-weiter { width: 100%; }

/* Bestätigung */
.ck-thanks-head { display: flex; gap: var(--space-4); align-items: flex-start; margin-bottom: var(--space-5); }
.ck-thanks-head h1 { margin: 0 0 .3rem; color: var(--thk-tinte); }
.ck-thanks-head__icon {
  flex: none; width: 3rem; height: 3rem; border-radius: 50%; background: var(--thk-tinte); color: var(--thk-papier);
  display: flex; align-items: center; justify-content: center; font-size: 1.5rem; margin-top: .4rem;
}
.ck-bank { display: grid; grid-template-columns: max-content 1fr; gap: .45rem var(--space-4); margin: var(--space-4) 0; padding: var(--space-4); background: var(--thk-papier); border-radius: var(--radius-sm); border: 1px solid var(--thk-line-soft); }
.ck-bank dt { color: var(--thk-text-mute); font-size: .88rem; }
.ck-bank dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.ck-mono { font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; letter-spacing: .02em; }
@media (max-width: 480px) { .ck-bank { grid-template-columns: 1fr; } .ck-bank dd { margin-bottom: .4rem; } }

/* Warenkorb */
.ck-codes { margin-top: var(--space-5); padding: var(--space-4) var(--space-5); border: 1px dashed var(--thk-line); border-radius: var(--radius); }
.ck-codes .cart-voucher-apply { margin: 0; padding: 0; border: 0; }
.ck-codes .cart-voucher-apply + .cart-voucher-apply { margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--thk-line-soft); }
.ck-freeship { margin: var(--space-3) 0; padding: .6rem .8rem; background: var(--thk-papier); border-left: 3px solid var(--thk-gold); font-size: .88rem; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.js-qty .cart-item__qty-update { display: none; }
.ck-empty { text-align: center; padding: var(--space-7) var(--space-5); max-width: 560px; }
.ck-empty h2 { font-family: var(--thk-serif); font-weight: 500; color: var(--thk-tinte); margin: 0 0 var(--space-2); }
.ck-empty__icon { font-size: 2.4rem; margin: 0 0 var(--space-2); }
/* 0.29.2.0 — Summenlinie durchgehend (vorher durch die Spaltenlücke zerteilt) */
.cart-summary dl { column-gap: 0; }
.cart-summary dt { padding-right: 16px; }
.ck-codes .cart-voucher-details { margin-top: 0; }
.ck-codes .cart-voucher-details summary { padding: .2rem 0; }
.ck-steps__label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 640px) { .ck-steps__item--current { flex: 2 1 0; } }
.ck-mobile-total { display: none; }
@media (max-width: 899px) {
  .ck-mobile-total {
    display: flex; justify-content: space-between; align-items: center; gap: var(--space-3);
    margin: 0 0 var(--space-4); padding: .7rem 1rem; border-radius: var(--radius);
    background: var(--thk-papier-warm); border: 1px solid var(--thk-line-soft); font-size: .92rem; color: var(--thk-text);
    text-decoration: none;
  }
  .ck-mobile-total strong { font-size: 1.05rem; }
  .ck-mobile-total span:last-child { color: var(--thk-bordeaux); font-size: .85rem; white-space: nowrap; }
}
/* 0.29.2.0 — Hauptmenü bleibt einzeilig (angemeldet kam „Kundencenter" in eine zweite Zeile) */
@media (min-width: 1100px) {
  .site-nav { flex-wrap: nowrap; gap: clamp(0.9rem, 1.6vw, var(--space-5)); }
  .site-nav a { white-space: nowrap; }
}

.ck-info-list { margin: 0 0 var(--space-5); padding-left: 1.2rem; display: flex; flex-direction: column; gap: .5rem; font-size: .92rem; line-height: 1.5; }
.ck .voucher-amount-presets { margin-bottom: var(--space-4); }
.ck .voucher-design-grid { border: 0; padding: 0; margin: 0; }

/* ==========================================================================
   0.29.3.0 — Zahlarten-Logos an der Kasse
   ========================================================================== */
.ck-pay__head { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .75rem; margin: 0; }
.ck-logos { display: inline-flex; flex-wrap: wrap; gap: .3rem; }
.ck-logo {
  display: inline-flex; align-items: center; justify-content: center; overflow: hidden;
  height: 28px; width: 46px; padding: 0 4px;
  background: #fff; border: 1px solid var(--thk-line); border-radius: 5px;
}
.ck-logo img { display: block; height: 20px; width: auto; max-width: 38px; }
.ck-logo--visa img, .ck-logo--applepay img, .ck-logo--googlepay img, .ck-logo--sepa img { height: 34px; max-width: 40px; }
.ck-logo--amex img { height: 22px; }
.ck-logo--klarna { background: #ffb3c7; border-color: #ffb3c7; }
.ck-logo--klarna img { height: 14px; }
.ck-logo--amazonpay img { height: 24px; max-width: 40px; }
.ck-logo--paypal img { height: 18px; }
.ck-logo--text { font: 700 .8rem/1 system-ui, sans-serif; color: #0a2540; }
.ck-pay__hint { color: var(--thk-text-mute); font-style: italic; }
@media (max-width: 480px) {
  .ck-logos { gap: .25rem; }
  .ck-logo { width: 40px; height: 26px; }
}

/* ══════════════════════════════════════════════════════════════════════
   0.30.3.0 — Startseite: Bestseller-Reihe, Buchhandel zentriert
   Bestseller: eine Reihe mit 5 Titeln. Stil „blau" = Band in Tinte mit
   Gold als Akzent, Stil „papier" = heller Papierton mit Goldlinie.
   Unter 900 px bleibt es eine Reihe und wird waagerecht wischbar.
   ══════════════════════════════════════════════════════════════════════ */
.bestseller { text-align: center; }
.bestseller .section-lead { margin-left: auto; margin-right: auto; }
.buch-reihe {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--space-5);
  text-align: left;
}
.bestseller--blau { background: var(--thk-tinte); color: var(--thk-papier); }
.bestseller--blau .bestseller__eyebrow { color: var(--thk-gold-hell); }
.bestseller--blau .bestseller__titel { color: var(--thk-papier); }
.bestseller--blau .bestseller__lead { color: rgba(251, 247, 239, 0.78); }
.bestseller--blau .book-card,
.bestseller--blau .book-card:hover { color: var(--thk-papier); }
.bestseller--blau .book-card__title { color: var(--thk-papier); }
.bestseller--blau .book-card__author { color: var(--thk-footer-text); }
.bestseller--blau .book-card__price { color: var(--thk-papier); }
.bestseller--blau .preis-laden { color: var(--thk-footer-text); }
.bestseller--blau .preis-haendler { color: var(--thk-gold-hell); }
.bestseller--blau .preis-haendler small { color: var(--thk-footer-text); }
.bestseller--blau .book-card__cover { box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35); }
.bestseller--papier {
  background: var(--thk-papier-tief);
  border-top: 3px solid var(--thk-gold);
  border-bottom: 1px solid var(--thk-line-soft);
}
.bestseller--papier .bestseller__eyebrow { color: var(--thk-gold); }
@media (max-width: 900px) {
  .buch-reihe {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: var(--space-3);
  }
  .buch-reihe .book-card { flex: 0 0 min(42%, 180px); scroll-snap-align: start; } /* dritter Titel lugt an: zeigt, dass man wischen kann */
}

.haendler-teaser__inner { text-align: center; }
.haendler-teaser__inner .section-lead { margin-left: auto; margin-right: auto; }
.haendler-teaser__aktionen { justify-content: center; }

/* 0.30.3.0 — Neuerscheinungen-Reihe + mehrere Etiketten je Cover */
.neuerscheinungen__mehr { margin-top: var(--space-5); text-align: right; }
/* 0.40.0.0 — Etiketten (Spitzentitel, Bestseller, Empfehlung, Neu) stehen
   UNTER dem Cover statt darauf. Auf dem Cover verdeckten sie den Titel, auf
   dem Handy (zweispaltige Kacheln) einen guten Teil des Bildes.
   Hat eine Karte derselben Reihe Etiketten, bekommen die übrigen eine leere
   Zeile gleicher Höhe — die Titel bleiben auf einer Linie. */
.book-card__badges {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px;
  min-height: 1.4rem;
  margin: calc(-1 * var(--space-2)) 0 var(--space-2);
}
.book-card__badges:empty { display: none; }
:has(> .book-card > .book-card__badges:not(:empty)) > .book-card > .book-card__badges:empty { display: flex; visibility: hidden; }
.book-card__badges .book-card__badge { position: static; line-height: 1.2; }
/* Handy: zweispaltige Kacheln sind ~150 px breit — „Spitzentitel" und „Neu"
   müssen in eine Zeile passen, sonst rutscht der Titel dieser Karte tiefer
   als der des Nachbarn. */
@media (max-width: 600px) {
  .book-card__badges { gap: 3px; }
  .book-card__badges .book-card__badge { font-size: 0.6rem; letter-spacing: 0.04em; padding: 0.2rem 0.4rem; }
}
.book__cover-badges {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-top: var(--space-3);
}
.book__cover-badges .book__cover-badge { position: static; box-shadow: none; }
.book__cover-badge--neu { background: var(--thk-papier); color: var(--thk-bordeaux); border: 1px solid var(--thk-bordeaux); box-shadow: none; }

/* ══════════════════════════════════════════════════════════════════
 * 0.34.1.0 — HANDY: kürzere Startseite, feste Kaufleiste
 *
 * Befund (iPhone-Maß): Startseite 14.800 px lang — sechs bildschirmhohe
 * Themenwelt-Kacheln übereinander, Empfehlungen und Buchlisten einspaltig.
 * Jetzt: Buchkacheln zweispaltig, Themenwelten zweispaltig und quadratisch
 * ohne Intro-Text, Empfehlungen zweispaltig. Buchseite: Kaufleiste am
 * unteren Rand, sobald der Warenkorb-Knopf aus dem Bild ist.
 * ══════════════════════════════════════════════════════════════════ */
@media (max-width: 440px) {
  .book-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-4) var(--space-3); }
  .book-card__title { font-size: 1rem; }
}
@media (max-width: 600px) {
  .empfehlungen-row { grid-template-columns: repeat(2, 1fr); gap: var(--space-4) var(--space-3); }
  .themenwelten-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-3); }
  .themenwelt-tile { aspect-ratio: 1 / 1; }
  .themenwelt-tile__content { padding: var(--space-3); }
  .themenwelt-tile__title { font-size: 1.1rem; margin-bottom: var(--space-1); }
  .themenwelt-tile__intro { display: none; }
  .themenwelt-tile__more { font-size: 0.8rem; }
}
.book__kaufleiste {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3) var(--space-4) calc(var(--space-3) + env(safe-area-inset-bottom));
  background: var(--thk-papier); border-top: 1px solid var(--thk-line-soft);
  box-shadow: 0 -8px 24px -12px rgba(20, 40, 69, 0.35);
}
.book__kaufleiste[hidden] { display: none; }
.book__kaufleiste-info { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.book__kaufleiste-info strong { font-family: var(--thk-serif); font-weight: 500; font-size: 0.95rem; color: var(--thk-tinte); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.book__kaufleiste-info span { font-size: 0.9rem; color: var(--thk-text); }
.book__kaufleiste .btn { white-space: nowrap; }
body.hat-kaufleiste { padding-bottom: 72px; }
@media (min-width: 861px) { .book__kaufleiste { display: none !important; } body.hat-kaufleiste { padding-bottom: 0; } }

/* ── REZENSIONEN (0.36.1.0) — Buchseite (Tab Leserstimmen) und /leserstimmen ── */
.rezensionen { max-width: 76ch; }
.rezensionen--zentriert { margin-left: auto; margin-right: auto; }
.rezensionen__kopf {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--space-2) var(--space-4);
  margin: 0 0 var(--space-5) 0; padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--thk-line-soft);
}
.rezensionen__schnitt { font-family: var(--thk-serif); font-size: 1.6rem; color: var(--thk-tinte); line-height: 1; }
.rezensionen__sterne { color: var(--thk-gold); font-size: 1.15rem; letter-spacing: .04em; }
.rezensionen__anzahl { color: var(--thk-text-mute); font-size: .95rem; }
.rezension {
  padding: var(--space-5) 0;
  border-bottom: 1px solid var(--thk-line-soft);
}
.rezension:last-of-type { border-bottom: 0; }
.rezension__kopf {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--space-1) var(--space-3);
  margin-bottom: var(--space-3);
}
.rezension__sterne { letter-spacing: .04em; font-size: 1rem; line-height: 1; }
.rezension__stern { color: var(--thk-line); }
.rezension__stern.is-voll { color: var(--thk-gold); }
.rezension__name { font-weight: 600; color: var(--thk-tinte-dunkel); }
.rezension__kontext { color: var(--thk-text-mute); font-size: .9rem; }
.rezension__datum { color: var(--thk-text-mute); font-size: .875rem; }
.rezension__text {
  font-family: var(--thk-serif); font-size: 1.08rem; line-height: 1.6; color: var(--thk-tinte);
  margin: 0; overflow-wrap: anywhere;
}
.rezension__text.is-zu {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 5; overflow: hidden;
}
.rezension__mehr {
  display: block;
  margin-top: var(--space-2); padding: 0; border: 0; background: none;
  color: var(--thk-bordeaux); font: inherit; font-size: .9rem; font-weight: 600; cursor: pointer;
  text-decoration: underline; text-underline-offset: .2em;
}
.rezension__mehr:hover { color: var(--thk-tinte); }
.rezension__buch {
  display: inline-flex; align-items: center; gap: var(--space-3);
  margin-top: var(--space-4); padding: var(--space-2) var(--space-3) var(--space-2) var(--space-2);
  border: 1px solid var(--thk-line-soft); border-radius: var(--radius-sm);
  background: var(--thk-papier-warm); color: var(--thk-tinte); text-decoration: none; font-size: .9rem;
  max-width: 100%;
}
.rezension__buch:hover { border-color: var(--thk-bordeaux); }
.rezension__buch-cover { flex: 0 0 auto; width: 30px; height: 44px; background-size: cover; background-position: center; border-radius: 2px; box-shadow: 0 1px 3px rgba(0,0,0,.25); }
.rezension__buch-label { color: var(--thk-text-mute); }
.rezension__buch-text { min-width: 0; }
.rezensionen__seiten {
  display: flex; gap: var(--space-2); justify-content: center; align-items: center; flex-wrap: wrap;
  margin-top: var(--space-5);
}
.rezensionen__seiten .booklist__page-link { font: inherit; cursor: pointer; }
.rezensionen__seiten .booklist__page-link--disabled { cursor: default; }
@media (max-width: 600px) {
  .rezension { padding: var(--space-4) 0; }
  .rezension__text { font-size: 1rem; }
}

/* ══════════════════════════════════════════════════════════════════
 * THEMENWELTEN HELL (0.36.9.0)
 * Wunsch aus dem Verlag: nicht so düster, die Fotos sollen wirken.
 * Vorher: Bild auf 55–60 % Helligkeit + dunkelblauer Verlauf, weiße
 * Schrift darauf. Jetzt: Foto unverändert hell, Text auf Papier-Grund
 * in Verlagsblau. Farben und Schriften bleiben die des Verlags.
 * ══════════════════════════════════════════════════════════════════ */

/* ── Kacheln: Foto oben, Text darunter ───────────────────────────── */
.themenwelt-tile {
  aspect-ratio: auto;
  display: flex; flex-direction: column;
  background: #fff;
  border: 1px solid var(--thk-line-soft);
}
.themenwelt-tile:hover { box-shadow: 0 14px 30px -14px rgba(20, 40, 69, 0.3); }
.themenwelt-tile__bg {
  position: relative; inset: auto;
  aspect-ratio: 4 / 3;
  flex-shrink: 0;
  filter: none;
}
.themenwelt-tile:hover .themenwelt-tile__bg { transform: scale(1.03); filter: none; }
.themenwelt-tile__bg--placeholder {
  background: linear-gradient(135deg, var(--thk-papier-tief) 0%, var(--thk-papier-card) 100%);
}
.themenwelt-tile__overlay { display: none; }
.themenwelt-tile__content {
  position: relative; inset: auto; z-index: 1;
  flex: 1;
  justify-content: flex-start;
  padding: var(--space-4) var(--space-5) var(--space-5);
  background: #fff;
  color: var(--thk-text);
}
.themenwelt-tile__title { color: var(--thk-tinte-dunkel); }
.themenwelt-tile__intro { color: var(--thk-text-mute-stark); }
.themenwelt-tile__more { margin-top: auto; padding-top: var(--space-3); color: var(--thk-bordeaux); }
.themenwelt-tile:hover .themenwelt-tile__more { text-decoration: underline; }

/* ── Detailseite: helles Foto, Text auf Papier-Feld ──────────────── */
.themenwelt-hero { min-height: clamp(340px, 40vw, 520px); align-items: flex-end; }
.themenwelt-hero__bg { filter: none; }
.themenwelt-hero__bg--placeholder {
  background: linear-gradient(135deg, var(--thk-papier-tief) 0%, var(--thk-papier-card) 100%);
}
.themenwelt-hero__overlay { display: none; }
.themenwelt-hero__inner { padding: var(--space-6) var(--space-5); color: var(--thk-text); }
.themenwelt-hero__panel {
  max-width: 560px;
  background: rgba(251, 247, 239, 0.94);
  border-radius: var(--radius);
  padding: var(--space-5) var(--space-6);
  box-shadow: 0 12px 34px -18px rgba(20, 40, 69, 0.45);
}
.themenwelt-hero__eyebrow {
  font-family: var(--thk-sans); font-size: .8rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .16em;
  margin: 0 0 var(--space-2); color: var(--thk-bordeaux);
}
.themenwelt-hero__title { color: var(--thk-tinte-dunkel); font-size: clamp(1.9rem, 3.4vw, 2.9rem); margin-bottom: var(--space-3); max-width: none; }
.themenwelt-hero__lead { color: var(--thk-text); font-size: 1.05rem; margin: 0; max-width: none; }

/* ── Übersicht: heller Kopf ──────────────────────────────────────── */
.themenwelten-hero__bg { filter: none; }
.themenwelten-hero__bg--placeholder {
  background: linear-gradient(135deg, var(--thk-papier-tief) 0%, var(--thk-papier-card) 100%);
}
.themenwelten-hero__overlay { display: none; }
.themenwelten-hero__inner { color: var(--thk-text); }
.themenwelten-hero__titel { color: var(--thk-tinte-dunkel); }
.themenwelten-hero__lead { color: var(--thk-text-mute-stark); }
.themenwelten-hero--ohne-bild { border-bottom: 1px solid var(--thk-line-soft); }
/* mit Bild: Text auf Papier-Feld wie auf der Detailseite */
.themenwelten-hero:not(.themenwelten-hero--ohne-bild) .themenwelten-hero__panel {
  display: inline-block; max-width: 620px;
  background: rgba(251, 247, 239, 0.94);
  border-radius: var(--radius);
  padding: var(--space-5) var(--space-6);
  box-shadow: 0 12px 34px -18px rgba(20, 40, 69, 0.45);
}

@media (max-width: 600px) {
  .themenwelt-tile { aspect-ratio: auto; }
  .themenwelt-tile__content { padding: var(--space-3); }
  .themenwelt-hero { min-height: 0; flex-direction: column; align-items: stretch; }
  .themenwelt-hero__bg { position: relative; inset: auto; aspect-ratio: 4 / 3; }
  .themenwelt-hero__inner { padding: 0; }
  .themenwelt-hero__panel { max-width: none; border-radius: 0; box-shadow: none; padding: var(--space-4) var(--space-4) var(--space-5); background: var(--thk-papier); }
}

/* ============================================================
   HINWEIS-SEITEN (0.36.11.0) — Newsletter: danke, bestätigt,
   abmelden, abgemeldet, Fehler. Die Klasse .content-section
   hatte bisher keine Regeln: Text klebte am linken Rand.
   ============================================================ */
.content-section { max-width: var(--content-max); margin: 0 auto; padding: var(--space-8, 4rem) var(--space-5) var(--space-9, 5rem); }
.content-section--narrow { max-width: var(--content-narrow); text-align: center; }
.content-section--narrow h1 { font-size: clamp(2rem, 5vw, 3rem); line-height: 1.15; margin: 0 0 var(--space-5); }
.content-section--narrow h1::after { content: ""; display: block; width: 56px; height: 3px; background: var(--thk-gold); margin: var(--space-4, 1rem) auto 0; }
.content-section--narrow p { font-size: 1.0625rem; line-height: 1.65; margin: 0 0 var(--space-4, 1rem); }
.content-section--narrow p:last-child { margin-top: var(--space-6, 2rem); margin-bottom: 0; }
.content-section--narrow form { text-align: left; margin-top: var(--space-6, 2rem); }
.content-section--narrow textarea { width: 100%; padding: .75rem; border: 1px solid rgba(0,0,0,.2); border-radius: 6px; font: inherit; background: #fff; }
@media (max-width: 600px) { .content-section { padding-top: var(--space-6, 2.5rem); padding-bottom: var(--space-7, 3rem); } }

/* ============================================================
   FEHLERSEITE (0.38.1.0) — 404 und 500.

   Die Seite trug .error-page/.error-page__inner, wozu es nie eine
   Regel gab: Inhalt am linken Fensterrand, kein Abstand nach oben,
   Schaltflächen ohne Rahmen. Sie sitzt jetzt in derselben Hülle wie
   die Hinweis-Seiten (.content-section--narrow); hier steht nur noch,
   was sie zusätzlich braucht.
   ============================================================ */
.error-page { padding-top: var(--space-9, 6rem); padding-bottom: var(--space-8, 4rem); }
.error-page .error-page__code {
  font-family: var(--thk-sans);
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--thk-gold);
  margin: 0 0 var(--space-4, 1rem);
}
.error-page .error-page__lead { color: var(--thk-text-mute); font-size: 1.15rem; line-height: 1.6; }
.error-page__aktionen {
  display: flex; justify-content: center; flex-wrap: wrap;
  gap: var(--space-3, 0.75rem);
  margin-top: var(--space-7, 3rem);
}
/* .content-section--narrow setzt text-align:center; die Schaltflächen
   sind Flex-Kinder und brauchen davon nichts. */
.error-page__aktionen .btn { text-align: center; }
@media (max-width: 600px) {
  .error-page { padding-top: var(--space-7, 3rem); padding-bottom: var(--space-8, 4rem); }
  .error-page__aktionen { flex-direction: column; align-items: stretch; }
  .error-page__aktionen .btn { justify-content: center; }
}

/* ══════════════════════════════════════════════════════════════════
 * 0.47.0.0 — Vorbestellen, Lieferzeit, „Benachrichtigen, wenn wieder da"
 * ══════════════════════════════════════════════════════════════════ */
.book__buy-vormerkung {
  margin-top: 0.6rem;
  padding: 0.6rem 0.8rem;
  border-left: 3px solid var(--thk-gold);
  background: var(--thk-papier-warm);
  font-size: 0.9rem;
  line-height: 1.45;
  color: var(--thk-text);
}
.book__buy-vormerkung strong { color: var(--thk-tinte); }
.book__buy-vormerkung span { color: var(--thk-text-mute); font-size: 0.85rem; }
.book__buy-soldout p { margin: 0 0 0.75rem; }
.book__notify { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.book__notify input[type="email"] {
  flex: 1 1 220px;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid var(--thk-line);
  border-radius: 4px;
  font: inherit;
  background: #fff;
}
.book__notify .btn { flex: 0 0 auto; }
.book__notify small { flex: 1 0 100%; color: var(--thk-text-mute); font-size: 0.8rem; }
.book__notify-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }

.vormerkung-hinweis {
  margin: 0 0 1rem;
  padding: 0.75rem 0.9rem;
  border-left: 3px solid var(--thk-gold);
  background: var(--thk-papier-warm);
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--thk-text);
}
.vormerkung-hinweis strong { color: var(--thk-tinte); }
.vormerkung-hinweis p { margin: 0.4rem 0 0; }
.cart-item__vormerkung { margin: 0.25rem 0 0; font-size: 0.85rem; color: var(--thk-text-mute); }
.cart-item__vormerkung strong { color: var(--thk-tinte); }
.ck-vormerkung { display: block; color: var(--thk-text-mute-stark); font-weight: 600; }
.book__notify-meldung { padding: 0.5rem 0.7rem; border-radius: 4px; font-size: 0.9rem; }
.book__notify-meldung--ok { background: #ecf5ee; color: var(--thk-success); }
.book__notify-meldung--fehler { background: #fbeceb; color: var(--thk-danger); }

/* ══════════════════════════════════════════════════════════════════
 * 0.49.0.0 — AUTORENBEREICH im Kundencenter
 * ══════════════════════════════════════════════════════════════════ */
.autorbereich__wechsel { margin: 0 0 var(--space-2); display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: baseline; }
.autorbereich__reiter { display: flex; flex-wrap: wrap; gap: 0.25rem; border-bottom: 1px solid var(--thk-line); margin: var(--space-4) 0 var(--space-5); }
.autorbereich__reiter-link { padding: 0.6rem 1rem; color: var(--thk-text-mute-stark); text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -1px; font-size: 0.95rem; }
.autorbereich__reiter-link:hover { color: var(--thk-bordeaux); text-decoration: none; }
.autorbereich__reiter-link.is-aktiv { color: var(--thk-tinte); border-bottom-color: var(--thk-bordeaux); font-weight: 600; }
.autorbereich__abschnitt { margin: 0 0 var(--space-6); }
.autorbereich__abschnitt h2 { font-size: 1.6rem; margin-bottom: var(--space-3); }
.autorbereich__form .form-row textarea { min-height: 5rem; }
.autorbereich__fehler { color: var(--thk-danger); font-size: 0.85rem; }
.autorbereich__zaehler { font-size: 0.8rem; color: var(--thk-text-mute); align-self: flex-end; }
.autorbereich__hinweis { border-left: 4px solid var(--thk-gold); background: var(--thk-papier-tief); padding: var(--space-3) var(--space-4); border-radius: 4px; margin: 0 0 var(--space-5); }
.autorbereich__hinweis p { margin: 0 0 var(--space-2); }
.autorbereich__hinweis form { margin: 0; }
.autorbereich__hinweis--abgelehnt { border-left-color: var(--thk-bordeaux); }
.autorbereich__stand { margin: 0 0 var(--space-4); font-size: 0.9rem; }
.autorbereich__bilder { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-4); }
.autorbereich__bild { display: flex; flex-direction: column; gap: 0.4rem; }
.autorbereich__bild-titel { font-weight: 600; color: var(--thk-tinte); }
.autorbereich__ablage { position: relative; display: flex; align-items: center; justify-content: center; min-height: 180px; border: 2px dashed var(--thk-line); border-radius: 8px; background: var(--thk-papier); cursor: pointer; overflow: hidden; text-align: center; padding: var(--space-3); }
.autorbereich__ablage:hover, .autorbereich__ablage.is-ziel { border-color: var(--thk-bordeaux); background: var(--thk-papier-warm); }
.autorbereich__ablage-text { color: var(--thk-text-mute); }
.autorbereich__vorschau { max-width: 100%; max-height: 260px; object-fit: contain; border-radius: 4px; }
.autorbereich__datei { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.autorbereich__hilfe { font-size: 0.85rem; }
.autorbereich__liste { display: flex; flex-direction: column; gap: var(--space-3); margin-bottom: var(--space-3); }
.autorbereich__zeile { display: grid; gap: var(--space-3); align-items: end; padding: var(--space-3); border: 1px solid var(--thk-line); border-radius: 8px; background: var(--thk-papier); }
.autorbereich__zeile--3 { grid-template-columns: minmax(10rem, 1fr) 2fr 1fr auto; }
.autorbereich__zeile--2 { grid-template-columns: 2fr 1fr auto; }
.autorbereich__zeile--presse { grid-template-columns: 2fr 1fr; }
.autorbereich__zeile--presse .autorbereich__weg { justify-self: start; }
.autorbereich__weg { white-space: nowrap; }
.autorbereich__absenden { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; padding-top: var(--space-4); border-top: 1px solid var(--thk-line); }
.autorbereich__editor { background: #fff; }
.autorbereich__editor .ql-container { height: auto; font-family: inherit; font-size: 1rem; }
.autorbereich__editor .ql-editor { min-height: 14rem; }
.autorbereich__lesungen { list-style: none; margin: 0 0 var(--space-3); padding: 0; }
.autorbereich__lesung { display: grid; grid-template-columns: 8rem 1fr auto; gap: var(--space-3); align-items: center; padding: var(--space-3) 0; border-bottom: 1px solid var(--thk-line-soft); }
.autorbereich__lesung-datum { font-weight: 600; color: var(--thk-tinte); display: flex; flex-direction: column; }
.autorbereich__lesung-text { display: flex; flex-direction: column; }
.autorbereich__lesung-zustand { display: flex; align-items: center; gap: var(--space-2); }
.autorbereich__lesung-zustand form { margin: 0; }
.autorbereich__marke { display: inline-block; padding: 0.1rem 0.55rem; border-radius: 999px; font-size: 0.8rem; white-space: nowrap; background: var(--thk-papier-tief); color: var(--thk-text-mute-stark); }
.autorbereich__marke--ok { background: #ecf5ee; color: var(--thk-success); }
.autorbereich__marke--warten { background: #fbf1dd; color: var(--thk-warning); }
.autorbereich__buecher { list-style: none; margin: 0 0 var(--space-3); padding: 0; display: grid; gap: var(--space-4); }
.autorbereich__buch { display: grid; grid-template-columns: 72px 1fr; gap: var(--space-4); align-items: start; }
.autorbereich__buch p { margin: 0.25rem 0 0; }
.autorbereich__buch-cover { width: 72px; height: auto; border-radius: 2px; box-shadow: var(--shadow-soft); }
.autorbereich__buch-cover--leer { display: block; height: 104px; background: var(--thk-papier-tief); }
@media (max-width: 700px) {
  .autorbereich__zeile--3, .autorbereich__zeile--2, .autorbereich__zeile--presse { grid-template-columns: 1fr; }
  .autorbereich__lesung { grid-template-columns: 1fr; gap: 0.25rem; }
}

/* ── 0.49.0.0 — Zugriffsstatistik (Baustein _components/_statistik.php)
   Dieselben Klassen stehen in admin.css für das Backend. Eine Reihe, eine
   Farbe: Säulen in Tinte, Text in Textfarbe, Werte beim Darüberfahren. */
.stat { display: flex; flex-direction: column; gap: var(--space-5); }
.stat__leiste { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); }
.stat__ansicht { display: inline-flex; border: 1px solid var(--thk-line); border-radius: 4px; overflow: hidden; }
.stat__ansicht-link { padding: 0.45rem 1rem; color: var(--thk-text-mute-stark); text-decoration: none; font-size: 0.95rem; }
.stat__ansicht-link + .stat__ansicht-link { border-left: 1px solid var(--thk-line); }
.stat__ansicht-link:hover { background: var(--thk-papier-warm); color: var(--thk-tinte); text-decoration: none; }
.stat__ansicht-link.is-aktiv { background: var(--thk-tinte); color: var(--thk-papier); }
.stat__filter { display: flex; align-items: center; gap: 0.5rem; }
.stat__filter-label { font-size: 0.8rem; color: var(--thk-text-mute); text-transform: uppercase; letter-spacing: 0.05em; }
.stat__filter select { padding: 6px 8px; border: 1px solid var(--thk-line); border-radius: 4px; font: inherit; max-width: 20rem; }
.stat__kacheln { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--space-3); }
.stat__kachel { background: var(--thk-papier-tief); border: 1px solid var(--thk-line); border-radius: 8px; padding: var(--space-4); }
.stat__kachel-label { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--thk-text-mute); }
.stat__kachel-wert { font-family: var(--thk-serif); font-size: 2.2rem; font-weight: 600; color: var(--thk-tinte); line-height: 1.15; font-variant-numeric: tabular-nums; }
.stat__kachel-meta { font-size: 0.85rem; color: var(--thk-text-mute); }
.stat__diagramm { margin: 0; background: #fff; border: 1px solid var(--thk-line); border-radius: 8px; padding: var(--space-4); }
.stat__titel { font-family: var(--thk-sans); font-size: 1rem; font-weight: 600; color: var(--thk-tinte-dunkel); margin: 0 0 var(--space-3); letter-spacing: 0; }
.stat__saeulen { display: flex; align-items: stretch; gap: 2px; height: 220px; margin-bottom: 1.6rem; border-bottom: 1px solid var(--thk-line); }
.stat__spalte { position: relative; flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; outline: none; }
.stat__flaeche { flex: 1 1 auto; display: flex; align-items: flex-end; }
.stat__saeule { width: 100%; height: var(--hoehe, 0%); min-height: 1px; background: var(--thk-tinte); border-radius: 4px 4px 0 0; }
.stat__spalte--aktuell .stat__saeule { background: var(--thk-tinte-hell); }
.stat__spalte--vor .stat__flaeche { background: repeating-linear-gradient(135deg, transparent 0 5px, var(--thk-line-soft) 5px 6px); }
.stat__spalte:hover .stat__saeule, .stat__spalte:focus .stat__saeule { background: var(--thk-bordeaux); }
.stat__spalte:focus-visible { box-shadow: 0 0 0 2px var(--thk-gold); }
.stat__achse { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); padding-top: 0.25rem; font-size: 0.75rem; color: var(--thk-text-mute); white-space: nowrap; }
.stat__tip { position: absolute; bottom: calc(100% - 2rem); left: 50%; transform: translateX(-50%); z-index: 3; display: none; padding: 0.25rem 0.5rem; background: var(--thk-tinte-dunkel); color: #fff; font-size: 0.8rem; border-radius: 4px; white-space: nowrap; pointer-events: none; }
.stat__spalte:hover .stat__tip, .stat__spalte:focus .stat__tip { display: block; }
.stat__spalte:first-child .stat__tip { left: 0; transform: none; }
.stat__spalte:last-child .stat__tip { left: auto; right: 0; transform: none; }
.stat__tabelle summary { cursor: pointer; color: var(--thk-bordeaux); }
.stat__tabelle[open] summary { margin-bottom: var(--space-3); }
.stat__tabelle-rahmen { overflow-x: auto; }
.stat__tab { width: 100%; border-collapse: collapse; font-size: 0.95rem; background: #fff; }
.stat__tab th, .stat__tab td { padding: 0.5rem 0.75rem; border-bottom: 1px solid var(--thk-line-soft); text-align: left; font-weight: 400; }
.stat__tab thead th { font-size: 0.78rem; color: var(--thk-text-mute); text-transform: uppercase; letter-spacing: 0.05em; border-bottom: 1px solid var(--thk-line); }
.stat__tab tbody th { font-weight: 600; }
.stat__tab .zahl { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.stat__tab tr.is-aktiv { background: var(--thk-papier-warm); }
.stat__zeile--vor { color: var(--thk-text-mute); }
.stat__marke { margin-left: 0.5rem; font-size: 0.78rem; color: var(--thk-text-mute); font-weight: 400; }
.stat__herkunft { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.stat__herkunft-zeile { display: grid; grid-template-columns: minmax(9rem, 14rem) 1fr 7.5rem; align-items: center; gap: 0.75rem; }
.stat__herkunft-balken { height: 10px; background: var(--thk-papier-tief); border-radius: 5px; overflow: hidden; }
.stat__herkunft-balken span { display: block; height: 100%; width: var(--anteil, 0%); background: var(--thk-tinte); border-radius: 5px; }
.stat__herkunft-wert { text-align: right; font-variant-numeric: tabular-nums; }
.stat__verweise { margin: 0.75rem 0 0; font-size: 0.9rem; }
.stat__hinweis { margin: 0; font-size: 0.85rem; color: var(--thk-text-mute); line-height: 1.6; }
.stat__hinweis--warn { color: var(--thk-warning); font-weight: 600; }
@media (max-width: 640px) {
  .stat__herkunft-zeile { grid-template-columns: 1fr auto; }
  .stat__herkunft-balken { grid-column: 1 / -1; grid-row: 2; }
  .stat__saeulen { height: 160px; }
}