/*!
 * 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; }

/* v0.15.1.0 — Cover-Bühne vergrößert: höhere Box, größere Cover, mehr Spread */
.hero__stage { position: relative; height: 560px; display: flex; align-items: center; justify-content: center; }
.hero__cover {
  position: absolute; width: 220px; height: 330px;
  background: linear-gradient(135deg, #c4b8a0 0%, #a89880 100%);
  border-radius: 2px 6px 6px 2px;
  box-shadow: var(--shadow-cover);
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.hero__cover img { width: 100%; height: 100%; object-fit: cover; }
.hero__cover--back  { transform: translate(-130px, -15px) rotate(-7deg); width: 210px; height: 315px; opacity: 0.85; }
.hero__cover--mid   { transform: translate(-40px, 22px) rotate(-2deg); }
.hero__cover--front { transform: translate(75px, 0) rotate(4deg); z-index: 3; }
.hero__cover--small { transform: translate(170px, -38px) rotate(8deg); width: 175px; height: 265px; opacity: 0.9; }
.hero__stage:hover .hero__cover--back  { transform: translate(-140px, -20px) rotate(-9deg); }
.hero__stage:hover .hero__cover--mid   { transform: translate(-50px, 24px) rotate(-3deg); }
.hero__stage:hover .hero__cover--front { transform: translate(75px, -6px) rotate(5deg); }
.hero__stage:hover .hero__cover--small { transform: translate(180px, -43px) rotate(10deg); }
@media (max-width: 860px) {
  .hero__inner { grid-template-columns: 1fr; gap: var(--space-6); }
  .hero__stage { height: 360px; transform: scale(0.85); }
  .hero__text { padding-right: 0; }
}

/* ══════════════════════════════════════════════════════════════════
 * 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); }
@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); }
.autor-detail__hero { padding: var(--space-8) 0 var(--space-7); border-bottom: 1px solid var(--thk-line-soft); text-align: center; }
.autor-detail__foto {
  width: 200px; height: 200px; border-radius: 50%;
  margin: 0 auto var(--space-5) auto;
  background: var(--thk-papier-tief); background-size: cover; background-position: center;
  border: 4px solid var(--thk-papier); box-shadow: var(--shadow-cover);
}
.autor-detail__name { font-family: var(--thk-serif); font-size: clamp(2rem, 4vw, 3rem); }
.autor-detail__tagline { font-family: var(--thk-serif); font-style: italic; font-size: 1.2rem; color: var(--thk-text-mute); }
.autor-detail__bio { max-width: 65ch; margin: var(--space-7) auto; font-size: 1.05rem; line-height: 1.7; }
.autor-detail__buecher { margin-top: var(--space-8); }
.autor-detail__buecher h2 { text-align: center; margin-bottom: var(--space-6); }

/* ══════════════════════════════════════════════════════════════════
 * 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. */
.book__tabs-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: var(--space-7);
  align-items: start;
  margin: var(--space-8) 0;
}
.book__tabs-layout:not(:has(> .book__aside)) {
  grid-template-columns: minmax(0, 1fr);
}
@media (max-width: 900px) {
  .book__tabs-layout { grid-template-columns: 1fr; gap: var(--space-6); }
}

.book__tabs { margin: 0; }
.book__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 {
  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 { color: var(--thk-tinte); }
.book__tab.is-active {
  color: var(--thk-tinte-dunkel);
  border-bottom-color: var(--thk-bordeaux);
}
.book__tab:focus-visible {
  outline: 2px solid var(--thk-bordeaux);
  outline-offset: 4px;
  border-radius: 2px;
}
@media (max-width: 600px) {
  .book__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 { display: none; }
.book__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 { font-size: 1.05rem; line-height: 1.7; }
.book__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 {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: var(--space-3) var(--space-5);
  margin: 0;
  font-size: 0.98rem;
}
.book__details dt { font-weight: 600; color: var(--thk-tinte-dunkel); }
.book__details 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 {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  margin-top: 0;
}
.book__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 {
  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 {
  font-size: 0.92rem;
  gap: var(--space-2) var(--space-4);
}

/* 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 {
  padding: var(--space-5) 0 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; }
}