/*
 * Lesedeals – Grundlayout aller öffentlichen Seiten
 * =================================================
 *
 * AUFBAU
 *   1. Variablen (Farben, Schriften) – die Standardwerte sind das neutrale
 *      Marken-Design. Jedes Genre überschreibt sie in themes.css.
 *   2. Grundelemente und Hilfsklassen
 *   3. Seitenrahmen (Kopf, Fuß)
 *   4. Bausteine der Dealseite (Kopfbereich, Buchkarte, Preisschild …)
 *   5. Formulare
 *   6. Autorenbereich
 *   7. Schaufenster
 *   8. Aufkleber-Look (Ränder, Schatten, Schriftrollen) – überschreibt die
 *      Form der Bausteine oben an EINER Stelle
 *
 * REGEL: Bausteine verwenden nur Variablen, nie feste Farben. So genügt
 * für ein neues Genre-Design ein Block mit Variablen in themes.css.
 *
 * Es gibt keine style-Attribute und keine Inline-Skripte im HTML
 * (Content-Security-Policy, siehe src/Core/Response.php).
 */

/* ------------------------------------------------------------------
   1. Variablen – Marken-Design (Startseite, Autorenbereich, Rechtstexte)

   Der Look: ein fröhlicher Bücherstand. Kräftige Flächen, dicke Ränder,
   harte Schatten wie bei Aufklebern, dazu Schriften aus der Zeit der
   Taschenbücher (Bookman für Überschriften, Schulbuch-Antiqua zum Lesen).
   ------------------------------------------------------------------ */
:root,
.theme-brand {
  --bg: #fffdf7;            /* Seitenhintergrund */
  --surface: #ffffff;       /* Karten, Formulare */
  --ink: #1d1a3d;           /* Tintenblau: Text */
  --muted: #5b5873;         /* Nebentext */
  --line: #d8d4e6;          /* feine Linien, Tabellen */
  --accent: #ffd23f;        /* Schaltflächen: Etikettengelb */
  --on-accent: #1d1a3d;
  --link: #2632c9;
  --tag-bg: #ff4b33;        /* Preis-Aufkleber */
  --tag-ink: #ffffff;
  --mark: #ff4b33;          /* Schmuckfarbe: Logo-Schild, Schlangenlinien */
  --focus: #2632c9;

  --edge: #1d1a3d;          /* Rand von Karten und Schaltflächen */
  --pop: #1d1a3d;           /* harter Schatten hinter Karten */
  --quiet-bg: #ffffff;      /* zweite Schaltfläche */
  --quiet-ink: #1d1a3d;

  --head-bg: #ffd23f;       /* Kopfzeile */
  --head-ink: #1d1a3d;
  --nav-on: #1d1a3d;        /* aktives Genre in der Kopfzeile */
  --nav-on-ink: #ffd23f;
  --sky: #ffd23f;           /* Fläche hinter dem Kopfbereich (Genres: Himmel) */
  --hero-bg: radial-gradient(rgba(29, 26, 61, 0.1) 1.6px, rgba(0, 0, 0, 0) 2px) 0 0 / 14px 14px, var(--sky);
  --hero-ink: #1d1a3d;
  --scene: none;            /* Kulisse am unteren Rand des Kopfbereichs (Genres) */
  --scene-h: 0px;

  /* Überschrift im Kopfbereich als „Aufkleber": Füllung, Umriss, versetzter Schatten */
  --title-fill: currentColor;
  --title-edge: rgba(0, 0, 0, 0);
  --title-pop: rgba(0, 0, 0, 0);

  --font-display: "LD Bonum", "Bookman Old Style", Georgia, serif;
  --font-body: "LD Schola", "Century Schoolbook", Georgia, serif;
  --font-ui: "LD Schola", "Century Schoolbook", Georgia, serif;
  --font-label: "LD Avant", "Century Gothic", "Avenir Next", system-ui, sans-serif;
  --display-weight: 700;
  --display-style: normal;
  --display-transform: none;
  --display-spacing: -0.02em;
  --display-leading: 1.02;
  --display-scale: 1;       /* Ausgleich für Schriften, die größer oder kleiner laufen */

  --tag-shape: polygon(50.0% 0.0%, 60.9% 9.4%, 75.0% 6.7%, 79.7% 20.3%, 93.3% 25.0%, 90.6% 39.1%, 100.0% 50.0%, 90.6% 60.9%, 93.3% 75.0%, 79.7% 79.7%, 75.0% 93.3%, 60.9% 90.6%, 50.0% 100.0%, 39.1% 90.6%, 25.0% 93.3%, 20.3% 79.7%, 6.7% 75.0%, 9.4% 60.9%, 0.0% 50.0%, 9.4% 39.1%, 6.7% 25.0%, 20.3% 20.3%, 25.0% 6.7%, 39.1% 9.4%);
  --tag-rotate: -9deg;

  --radius: 16px;
  --wrap: 1120px;
  --gutter: clamp(16px, 4vw, 32px);
}

/* ------------------------------------------------------------------
   2. Grundelemente
   ------------------------------------------------------------------ */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  position: relative;
  isolation: isolate;
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 1.0625rem;
  line-height: 1.55;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: var(--link);
  text-underline-offset: 0.18em;
}

h1,
h2,
h3 {
  margin: 0 0 0.5em;
  line-height: 1.2;
  text-wrap: balance;
}

p {
  margin: 0 0 1em;
}

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

[hidden] {
  display: none !important;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Honeypot-Feld gegen Spam-Skripte: für Menschen unsichtbar */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.muted {
  color: var(--muted);
  font-size: 0.94em;
}

.lead {
  font-size: 1.2rem;
  max-width: 62ch;
}

.skip-link {
  position: absolute;
  left: 8px;
  top: -60px;
  z-index: 50;
  padding: 10px 14px;
  background: var(--surface);
  color: var(--ink);
  border-radius: 6px;
}

.skip-link:focus {
  top: 8px;
}

/* Schaltflächen */
.btn {
  display: inline-block;
  padding: 0.72em 1.25em;
  border: 2px solid var(--accent);
  border-radius: 8px;
  background: var(--accent);
  color: var(--on-accent);
  font: 600 1rem/1.2 var(--font-ui);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}

.btn:hover {
  filter: brightness(1.1);
}

.btn:disabled {
  opacity: 0.6;
  cursor: progress;
}

.btn-quiet {
  background: transparent;
  color: var(--ink);
  border-color: var(--line);
}

.btn-small {
  padding: 0.45em 0.9em;
  font-size: 0.92rem;
}

.btn-large {
  padding: 0.9em 1.6em;
  font-size: 1.1rem;
}

.linklike {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 0.18em;
  cursor: pointer;
}

/* Hinweise */
.flash {
  margin: 0 0 1.2em;
  padding: 0.8em 1em;
  border-left: 5px solid #1c8a4c;
  background: var(--surface);
  border-radius: 6px;
}

.flash-info {
  border-left-color: var(--mark);
}

.preview-bar {
  margin: 0;
  padding: 0.6em var(--gutter);
  background: #fff3bf;
  color: #3d3200;
  font-size: 0.92rem;
}

/* ------------------------------------------------------------------
   3. Seitenrahmen
   ------------------------------------------------------------------ */
.site-head {
  display: flex;
  align-items: center;
  gap: 8px 28px;
  flex-wrap: wrap;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 14px var(--gutter) 10px;
}

/* Wortmarke mit Preisschild – bleibt auf allen Genre-Seiten gleich */
.logo {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--ink);
  font: 700 1.35rem/1 var(--font-display);
  letter-spacing: -0.02em;
  text-decoration: none;
}

.logo-tag {
  position: relative;
  width: 26px;
  height: 17px;
  background: var(--mark);
  border-radius: 3px;
  clip-path: polygon(30% 0, 100% 0, 100% 100%, 30% 100%, 0 50%);
  transform: rotate(-12deg);
}

.logo-tag::after {
  content: "";
  position: absolute;
  left: 7px;
  top: 6px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--bg);
}

.genre-nav {
  display: flex;
  gap: 4px 18px;
  flex-wrap: wrap;
  font-size: 0.95rem;
}

.genre-nav a {
  padding: 4px 0;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}

.genre-nav a:hover,
.genre-nav a[aria-current="page"] {
  border-bottom-color: var(--mark);
}

main {
  display: block;
  min-height: 55vh;
}

.site-foot {
  margin-top: 64px;
  padding: 32px var(--gutter) 40px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.9rem;
}

.site-foot > * {
  max-width: var(--wrap);
  margin-left: auto;
  margin-right: auto;
}

.foot-note {
  max-width: 78ch;
  margin-left: max(0px, calc((100% - var(--wrap)) / 2));
}

.foot-nav {
  display: flex;
  gap: 6px 22px;
  flex-wrap: wrap;
  margin-bottom: 1em;
}

.foot-nav a {
  color: inherit;
}

/* Abschnitte */
.section,
.page-head,
.notice-page,
.prose,
.prefs {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 28px var(--gutter);
}

.section-title {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-style: var(--display-style);
  text-transform: var(--display-transform);
  letter-spacing: var(--display-spacing);
  font-size: calc(clamp(1.55rem, 3.6vw, 2.1rem) * var(--display-scale));
}

.section-intro {
  max-width: 66ch;
  color: var(--muted);
}

.page-head h1,
.notice-page h1,
.prose h1,
.prefs h1 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.02em;
  font-size: clamp(1.9rem, 5vw, 2.9rem);
}

.notice-page,
.prefs {
  max-width: 660px;
  padding-top: 48px;
}

.prose {
  font-family: var(--font-body);
  font-size: 1.1rem;
  line-height: 1.65;
}

/* Lesebreite begrenzen, aber linksbündig am Seitenraster bleiben */
.prose > * {
  max-width: 44rem;
}

.prose > .table-wrap {
  max-width: none;
}

.prose h2 {
  margin-top: 1.9em;
  font: 700 1.45rem/1.25 var(--font-display);
}

.prose h3 {
  margin-top: 1.5em;
  font: 700 1.1rem/1.3 var(--font-ui);
}

.prose li {
  margin-bottom: 0.5em;
}

.prose .btn {
  font-family: var(--font-ui);
}

.steps {
  padding-left: 1.3em;
}

.steps li {
  padding-left: 0.3em;
  margin-bottom: 0.8em;
}

.link-list {
  padding-left: 1.2em;
}

.back {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 16px var(--gutter) 0;
  font-size: 0.95rem;
}

.back a::before {
  content: "‹ ";
}

/* Tabellen */
.table-wrap {
  overflow-x: auto;
  margin: 0 0 1em;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-ui);
  font-size: 0.97rem;
}

.data-table th,
.data-table td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}

.data-table thead th {
  font-size: 0.86rem;
  color: var(--muted);
  font-weight: 600;
  white-space: nowrap;
}

.data-table tbody tr:last-child th,
.data-table tbody tr:last-child td {
  border-bottom: 0;
}

/* ------------------------------------------------------------------
   4. Dealseite
   ------------------------------------------------------------------ */

/* Kopfbereich: Genre-Name groß in der Schrift des Genres, daneben die Anmeldung */
.hero {
  position: relative;
}

.hero-inner {
  display: grid;
  gap: 28px 48px;
  align-items: end;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: clamp(28px, 6vw, 64px) var(--gutter) clamp(24px, 4vw, 44px);
}

@media (min-width: 900px) {
  .hero-inner {
    grid-template-columns: minmax(0, 1.25fr) minmax(320px, 0.75fr);
  }
}

.hero-title {
  margin: 0 0 0.18em;
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-style: var(--display-style);
  text-transform: var(--display-transform);
  letter-spacing: var(--display-spacing);
  line-height: var(--display-leading);
  font-size: calc(clamp(2.7rem, 9.5vw, 5.6rem) * var(--display-scale));
  overflow-wrap: break-word;
  hyphens: manual;
}

.hero-tagline {
  max-width: 34ch;
  margin-bottom: 0.7em;
  font-family: var(--font-body);
  font-size: clamp(1.15rem, 2.4vw, 1.45rem);
  line-height: 1.4;
}

.hero-deadline {
  margin: 0;
  color: var(--muted);
  font-size: 1rem;
}

.hero-deadline time {
  color: var(--ink);
  font-weight: 600;
  white-space: nowrap;
}

.hero-signup {
  padding: 20px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.hero-signup-title {
  margin-bottom: 0.7em;
  font: 600 1.08rem/1.3 var(--font-ui);
}

/* Schmuckband unter dem Kopfbereich – jedes Genre füllt es anders (themes.css) */
.hero-motif {
  height: var(--motif-height, 0);
  background: var(--motif, none);
}

.empty {
  text-align: left;
}

/* Buchliste */
.book-list {
  display: grid;
  gap: 22px;
}

@media (min-width: 1000px) {
  .book-list {
    grid-template-columns: 1fr 1fr;
    gap: 26px;
  }
}

.book {
  display: grid;
  grid-template-columns: minmax(104px, 34%) 1fr;
  gap: 18px;
  padding: 18px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  scroll-margin-top: 16px;
}

@media (min-width: 560px) {
  .book {
    grid-template-columns: 190px 1fr;
    gap: 24px;
    padding: 22px;
  }
}

.book.is-highlight {
  border-color: var(--mark);
  box-shadow: 0 0 0 3px var(--mark);
}

.book-visual {
  position: relative;
  align-self: start;
}

.book-cover {
  display: block;
}

.book-cover img {
  width: 100%;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  border-radius: 3px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.28), 0 2px 5px rgba(0, 0, 0, 0.2);
}

/*
 * Das Preisschild – Erkennungszeichen der Seite.
 * Standardform: Anhänger mit Spitze links und Loch. Die Genre-Designs
 * ändern Farbe und Form über die Variablen --tag-… und eigene Regeln.
 */
.price-tag {
  position: absolute;
  left: -12px;
  top: -12px;
  z-index: 2;
  display: inline-flex;
  align-items: baseline;
  gap: 0.18em;
  padding: 0.42em 0.62em 0.42em 1.25em;
  background: var(--tag-bg);
  color: var(--tag-ink);
  font: 700 1.28rem/1 var(--tag-font, var(--font-display));
  letter-spacing: -0.01em;
  white-space: nowrap;
  clip-path: var(--tag-shape, polygon(0.85em 0, 100% 0, 100% 100%, 0.85em 100%, 0 50%));
  transform: rotate(var(--tag-rotate, -7deg));
  filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.35));
}

.price-tag::before {
  content: "";
  position: absolute;
  left: 0.6em;
  top: 50%;
  width: 0.34em;
  height: 0.34em;
  margin-top: -0.17em;
  border-radius: 50%;
  background: var(--tag-hole, rgba(0, 0, 0, 0.55));
}

.price-tag-unit {
  font-size: 0.72em;
}

@media (min-width: 560px) {
  .price-tag {
    font-size: 1.55rem;
  }
}

.book-body {
  min-width: 0;
}

/* Werbekennzeichnung „Anzeige": bewusst in Textfarbe und halbfett – eine
   Kennzeichnung muss auf den ersten Blick lesbar sein (nicht hellgrau). */
.book-flag {
  margin: 0 0 0.35em;
  color: var(--ink);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.book-report {
  margin: 0.7em 0 0;
  font-size: 0.8rem;
}

.book-report a {
  color: var(--muted);
}

.price-tag-word .price-tag-amount {
  font-size: 0.82em;
  letter-spacing: 0.02em;
}

.book-title {
  margin: 0 0 0.15em;
  font: 600 1.32rem/1.2 var(--font-body);
  overflow-wrap: break-word;
}

.book-author {
  margin: 0 0 0.6em;
  color: var(--muted);
  font-size: 0.97rem;
}

.book-price {
  margin: 0 0 0.45em;
  font-size: 0.95rem;
}

.book-price s {
  color: var(--muted);
}

.book-save {
  margin-left: 0.5em;
  font-weight: 600;
}

.book-rating {
  margin: 0 0 0.7em;
  font-size: 0.9rem;
  color: var(--muted);
}

.book-rating .stars {
  color: var(--star, #e2a400);
  font-size: 1.05em;
}

.book-asof {
  white-space: nowrap;
}

.book-blurb {
  margin: 0 0 1em;
  font-family: var(--font-body);
  font-size: 1.04rem;
  line-height: 1.55;
}

.btn-go {
  display: block;
}

@media (min-width: 560px) {
  .btn-go {
    display: inline-block;
  }
}

/*
 * Schmale Bildschirme: Das Cover steht links oben, Titel und Preis laufen
 * daneben, der Kurztext darunter über die volle Breite. (Mit float statt
 * Raster, weil die Texthöhe neben dem Cover von Buch zu Buch schwankt.)
 */
@media (max-width: 559px) {
  .book {
    display: block;
  }

  .book::after {
    content: "";
    display: block;
    clear: both;
  }

  .book-visual {
    float: left;
    width: 112px;
    margin: 0 16px 10px 0;
  }

  .book-blurb,
  .btn-go {
    clear: both;
  }
}

/* Gratis-Rubrik: bewusst klein */
.free-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(92px, 132px));
  gap: 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.free-list a {
  display: block;
  color: var(--ink);
  text-decoration: none;
  font-size: 0.9rem;
  line-height: 1.3;
}

.free-list img {
  width: 100%;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  margin-bottom: 8px;
  border-radius: 3px;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.25);
}

.free-title {
  display: block;
  font-weight: 600;
}

.free-author {
  display: block;
  color: var(--muted);
}

/* Top des Monats */
.top-list {
  display: grid;
  gap: 22px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.top-item {
  position: relative;
}

.top-rank {
  position: absolute;
  left: -8px;
  top: -10px;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 2.3em;
  height: 2.3em;
  border-radius: 50%;
  background: var(--tag-bg);
  color: var(--tag-ink);
  font: 700 1.1rem/1 var(--font-display);
}

/* Startseite */
.home-hero {
  display: grid;
  gap: 28px 56px;
  align-items: center;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: clamp(28px, 6vw, 72px) var(--gutter) 28px;
}

@media (min-width: 940px) {
  .home-hero {
    grid-template-columns: 1.1fr 0.9fr;
  }
}

.home-hero h1 {
  font: 700 clamp(2.3rem, 6.4vw, 4rem) / 1.04 var(--font-display);
  letter-spacing: -0.03em;
}

.home-hero-form {
  padding: 22px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

/* Genre-Kacheln: Jede trägt ihre theme-Klasse und damit Farben und Schrift ihres Genres */
.genre-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 18px;
}

.genre-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 300px;
  padding: 20px;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--hero-bg, none), var(--bg);
  color: var(--ink);
  text-decoration: none;
  border: 1px solid rgba(0, 0, 0, 0.12);
}

.genre-tile:hover .genre-tile-name {
  text-decoration: underline;
  text-decoration-thickness: 3px;
  text-decoration-color: var(--mark);
  text-underline-offset: 0.12em;
}

.genre-tile-covers {
  position: absolute;
  right: 14px;
  top: 16px;
  display: flex;
}

.genre-tile-covers img {
  width: 74px;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  margin-left: -26px;
  border-radius: 2px;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.45);
  transform: rotate(4deg);
}

.genre-tile-covers img:nth-child(2) {
  transform: rotate(-3deg) translateY(8px);
}

.genre-tile-covers img:nth-child(3) {
  transform: rotate(6deg) translateY(2px);
}

.genre-tile-name {
  position: relative;
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-style: var(--display-style);
  text-transform: var(--display-transform);
  letter-spacing: var(--display-spacing);
  line-height: 1.05;
  font-size: calc(1.95rem * var(--display-scale));
}

.genre-tile-meta {
  position: relative;
  margin-top: 6px;
  color: var(--muted);
  font-size: 0.92rem;
}

.home-how-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 22px 36px;
}

.home-how-grid h3 {
  font: 600 1.12rem/1.3 var(--font-ui);
}

.home-how-grid p {
  font-family: var(--font-body);
}

.home-authors {
  margin-top: 1.4em;
}

/* Dialog nach dem Klick zu Amazon */
.after-click {
  width: min(520px, calc(100vw - 28px));
  padding: 26px 22px 22px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  color: var(--ink);
}

.after-click::backdrop {
  background: rgba(0, 0, 0, 0.6);
}

.after-click h2 {
  padding-right: 1.4em;
  font: 700 1.3rem/1.25 var(--font-ui);
}

.dialog-close {
  position: absolute;
  right: 8px;
  top: 6px;
  width: 44px;
  height: 44px;
  border: 0;
  background: none;
  color: var(--ink);
  font-size: 1.8rem;
  line-height: 1;
  cursor: pointer;
}

/* Hinweis-Banner (Einwilligung) */
.consent {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: 12px;
  z-index: 40;
  max-width: 560px;
  margin: 0 auto;
  padding: 18px 18px 14px;
  border-radius: 12px;
  background: #ffffff;
  color: #14213d;
  font-size: 0.95rem;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.35);
}

.consent a {
  color: #1d3a8a;
}

.consent-title {
  margin-bottom: 0.4em;
  font-weight: 700;
}

.consent-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}

/* Beide Antworten sind gleich leicht zu treffen (keine versteckte Ablehnung) */
.consent .btn {
  flex: 1;
  background: #14213d;
  border-color: #14213d;
  color: #ffffff;
}

.consent .btn-quiet {
  background: #ffffff;
  color: #14213d;
}

/* ------------------------------------------------------------------
   5. Formulare
   ------------------------------------------------------------------ */
.input {
  width: 100%;
  min-height: 46px;
  padding: 0.6em 0.75em;
  border: 1.5px solid var(--line);
  border-radius: 8px;
  background: var(--field-bg, #ffffff);
  color: var(--field-ink, #14213d);
  font: 1rem/1.3 var(--font-ui);
}

.input[aria-invalid="true"] {
  border-color: #c62828;
}

textarea.input {
  line-height: 1.5;
  resize: vertical;
}

.input-short {
  max-width: 220px;
}

.input[readonly] {
  background: var(--bg);
  color: var(--ink);
}

/* Newsletter-Anmeldung */
.signup-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.signup-row .input {
  flex: 1 1 210px;
}

.signup-row .btn {
  flex: 0 1 auto;
}

.signup-genres {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 14px 0 0;
  padding: 0;
  border: 0;
}

.signup-genres legend {
  padding: 0;
  margin-bottom: 8px;
  font-weight: 600;
  font-size: 0.97rem;
}

.signup-more {
  margin-top: 10px;
  font-size: 0.95rem;
}

.signup-more summary {
  cursor: pointer;
  color: var(--muted);
}

.signup-note {
  margin: 12px 0 0;
  color: var(--muted);
  font-size: 0.84rem;
  line-height: 1.45;
}

.signup-msg {
  margin: 12px 0 0;
  padding: 0.7em 0.9em;
  border-radius: 8px;
  background: #e5f5ea;
  color: #114b2a;
  font-weight: 600;
}

.signup-msg.is-error {
  background: #fde8e6;
  color: #7a1c14;
}

.signup.is-done .signup-row,
.signup.is-done .signup-genres,
.signup.is-done .signup-more,
.signup.is-done .signup-note {
  display: none;
}

.section-signup {
  margin-top: 16px;
}

.section-signup .signup {
  max-width: 640px;
  padding: 22px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

/* Ankreuzfelder */
.check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0 0 10px;
  cursor: pointer;
}

.check input {
  flex: none;
  width: 22px;
  height: 22px;
  margin: 2px 0 0;
  accent-color: var(--accent);
}

.signup-genres .check {
  margin: 0;
  padding: 7px 12px 7px 9px;
  border: 1.5px solid var(--line);
  border-radius: 999px;
  font-size: 0.95rem;
}

.signup-genres .check input {
  width: 18px;
  height: 18px;
  margin-top: 3px;
}

.check.is-focus {
  padding: 8px 10px;
  border-radius: 8px;
  background: #fff3bf;
  color: #3d3200;
}

.optional {
  color: var(--muted);
  font-weight: 400;
}

/* Einstellungen (Preference Center) */
.prefs-block {
  margin: 0 0 22px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

.prefs-block legend {
  padding: 0 6px;
  font-weight: 700;
}

.prefs-unsub {
  margin-top: 44px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}

.prefs-unsub h2 {
  font-size: 1.15rem;
}

.inline-form {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  margin: 0 0 1em;
}

.inline-form .input {
  flex: 1 1 240px;
}

.inline-form p {
  flex: 1 1 100%;
  margin: 0;
}

/* Buchungsformular */
.genre-switch {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  font-size: 0.95rem;
}

.genre-switch .input {
  width: auto;
  min-height: 40px;
}

.book-form,
.waitlist {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.book-form > *,
.waitlist > * {
  max-width: 800px;
}

/* Hinweis über dem Buchungsformular (Angebot nur für Unternehmer:innen) */
.form-notice {
  max-width: 800px;
  margin: 0 var(--gutter) 24px max(var(--gutter), calc((100% - var(--wrap)) / 2 + var(--gutter)));
  padding: 14px 16px;
  border-left: 5px solid var(--ink);
  border-radius: 6px;
  background: var(--surface);
  font-size: 0.95rem;
}

.form-errors {
  max-width: 800px;
  margin: 0 var(--gutter) 18px max(var(--gutter), calc((100% - var(--wrap)) / 2 + var(--gutter)));
}

.form-errors,
.callout-warn {
  padding: 14px 16px;
  border-left: 5px solid #c62828;
  border-radius: 6px;
  background: #fde8e6;
  color: #5d130d;
}

.form-block {
  margin: 0 0 26px;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

.form-block legend {
  padding: 0 8px;
  font: 700 1.2rem/1.2 var(--font-display);
}

.field {
  display: block;
  margin: 0 0 16px;
}

.field-label {
  display: block;
  margin-bottom: 4px;
  font-weight: 600;
  font-size: 0.97rem;
}

.field-hint {
  display: block;
  margin-bottom: 6px;
  color: var(--muted);
  font-size: 0.88rem;
}

.field-error {
  margin: 6px 0 12px;
  color: #b3261e;
  font-size: 0.92rem;
  font-weight: 600;
}

.field-count {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 0.85rem;
}

.field-count.is-over {
  color: #b3261e;
  font-weight: 600;
}

.field-row {
  display: grid;
  gap: 0 16px;
}

@media (min-width: 620px) {
  .field-row {
    grid-template-columns: 1fr 1fr;
  }

  .field-row-zip {
    grid-template-columns: 160px 1fr;
  }
}

.choice-row {
  display: grid;
  gap: 12px;
  margin-bottom: 18px;
}

@media (min-width: 620px) {
  .choice-row {
    grid-template-columns: 1fr 1fr;
  }
}

.choice,
.week {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px;
  border: 1.5px solid var(--line);
  border-radius: 8px;
  cursor: pointer;
}

.choice input,
.week input {
  flex: none;
  width: 22px;
  height: 22px;
  margin: 2px 0 0;
  accent-color: var(--accent);
}

.choice:has(input:checked),
.week:has(input:checked) {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
}

.choice-body span,
.week-body span {
  display: block;
  color: var(--muted);
  font-size: 0.92rem;
}

.week-list {
  display: grid;
  gap: 8px;
  max-height: 420px;
  overflow-y: auto;
  padding: 2px;
}

.week.is-closed {
  opacity: 0.55;
  cursor: not-allowed;
}

.week-body .week-theme {
  display: inline;
  margin-left: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--tag-bg);
  color: var(--tag-ink);
  font-size: 0.82rem;
}

.cover-kept {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 8px;
  font-size: 0.92rem;
}

.cover-kept img {
  width: 54px;
  border-radius: 2px;
}

.form-submit {
  margin: 0 0 30px;
}

.form-submit .muted {
  margin-top: 12px;
  max-width: 62ch;
}

.waitlist {
  margin-bottom: 30px;
}

.waitlist summary {
  cursor: pointer;
  font-weight: 600;
}

.waitlist form {
  margin-top: 14px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

/* ------------------------------------------------------------------
   6. Autorenkonto
   ------------------------------------------------------------------ */
.account-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.booking-list {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.booking-row {
  display: grid;
  grid-template-columns: 60px 1fr auto;
  gap: 16px;
  align-items: center;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

.booking-row img {
  border-radius: 2px;
}

.booking-row-main > * {
  display: block;
}

.booking-row-title {
  font-weight: 700;
  font-size: 1.08rem;
}

.booking-row-num {
  text-align: right;
  white-space: nowrap;
}

.booking-row-num strong {
  display: block;
  font-size: 1.5rem;
  line-height: 1;
}

@media (max-width: 520px) {
  .booking-row {
    grid-template-columns: 60px 1fr;
  }

  .booking-row-num {
    grid-column: 2;
    text-align: left;
  }
}

.badge {
  display: inline-block;
  margin-top: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  background: #e6e9f0;
  color: #27314a;
  font-size: 0.84rem;
  font-weight: 600;
}

.badge-live,
.badge-upcoming {
  background: #dff3e6;
  color: #114b2a;
}

.badge-review,
.badge-recheck,
.badge-pending {
  background: #fff3bf;
  color: #4d3f00;
}

.badge-pricebad,
.badge-rejected {
  background: #fde8e6;
  color: #7a1c14;
}

.booking-head {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}

.booking-head img {
  flex: none;
  border-radius: 3px;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.25);
}

.callout {
  max-width: calc(var(--wrap) - 2 * var(--gutter));
  margin: 0 auto 8px;
  padding: 18px 20px;
  border-left: 5px solid var(--mark);
  border-radius: 6px;
  background: var(--surface);
}

.callout h2 {
  font-size: 1.15rem;
}

.facts {
  display: grid;
  gap: 0;
  margin: 0 0 1em;
  border-top: 1px solid var(--line);
}

.facts > div {
  display: grid;
  grid-template-columns: minmax(130px, 240px) 1fr;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}

.facts dt {
  color: var(--muted);
}

.facts dd {
  margin: 0;
  font-weight: 600;
}

.stat-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}

.stat {
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

.stat-num {
  display: block;
  font: 700 2.2rem/1 var(--font-display);
}

.stat-label {
  display: block;
  margin-top: 6px;
  color: var(--muted);
  font-size: 0.9rem;
}

.share-kit {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  align-items: flex-end;
}

.share-kit img {
  width: 216px;
  border-radius: 6px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}

/* ------------------------------------------------------------------
   7. Schaufenster (Dauerplätze ohne Aktionspreis)
   Farben und Schriften kommen wie überall aus den Variablen des
   Genre-Designs (themes.css) – hier steht nur die Form.
   ------------------------------------------------------------------ */

/* --- Seite für Leser:innen ----------------------------------------- */

/* Die Überschrift ist hier ein ganzer Satz, kein einzelnes Wort – deshalb kleiner als auf der Dealseite. */
.sc-hero-title {
  max-width: 20ch;
  font-size: calc(clamp(2.1rem, 6.4vw, 3.9rem) * var(--display-scale));
  text-wrap: balance;
}

/*
 * Schmale Bildschirme: Die Anmeldung im Kopf entfällt. Wer über eine Anzeige
 * kommt, soll sofort Bücher sehen – die Anmeldung steht am Seitenende und
 * erscheint nach dem ersten Klick zu Amazon.
 */
@media (max-width: 899px) {
  .sc-hero .hero-signup {
    display: none;
  }
}

/* Umschalter „Mit Kurztext / Nur Cover" */
.sc-view {
  display: inline-flex;
  margin: 0.4em 0 0;
  border: 1.5px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  font: 600 0.92rem/1 var(--font-ui);
}

.sc-view a {
  padding: 0.65em 1em;
  color: var(--ink);
  text-decoration: none;
}

.sc-view a + a {
  border-left: 1.5px solid var(--line);
}

.sc-view a[aria-current="page"] {
  background: var(--accent);
  color: var(--on-accent);
}

/* Ausführliche Fassung: ein Buch pro Zeile, damit jedes Platz zum Wirken hat */
.sc-list {
  display: grid;
  gap: 26px;
  max-width: 900px;
}

@media (min-width: 560px) {
  .sc-book {
    grid-template-columns: clamp(170px, 26vw, 240px) 1fr;
    gap: 30px;
    padding: 26px;
  }
}

.sc-title {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-style: var(--display-style);
  letter-spacing: var(--display-spacing);
  font-size: calc(clamp(1.5rem, 3.4vw, 2rem) * var(--display-scale));
  line-height: 1.12;
}

.sc-series {
  margin: 0 0 0.9em;
  font: 600 0.9rem/1.35 var(--font-ui);
}

/* Der Aufhänger: der eine Satz, der hängen bleiben soll */
.sc-hook {
  margin: 0 0 0.75em;
  padding-left: 0.8em;
  border-left: 4px solid var(--mark);
  font: italic 600 1.28rem/1.35 var(--font-body);
}

.sc-ku {
  margin: -0.4em 0 1em;
  color: var(--muted);
  font-size: 0.9rem;
}

@media (max-width: 559px) {
  /* Schmal: Cover größer als auf der Dealseite – hier gibt es kein Preisschild, das Cover trägt allein. */
  .sc-book .book-visual {
    width: 38%;
    max-width: 150px;
  }

  .sc-book .sc-hook {
    clear: both;
  }
}

/* Kompakte Fassung: Raster aus Covern, darunter gleich der Knopf */
.sc-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 26px 16px;
}

@media (min-width: 700px) {
  .sc-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 34px 26px;
  }
}

@media (min-width: 1000px) {
  .sc-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.sc-tile {
  display: flex;
  flex-direction: column;
  min-width: 0;
  scroll-margin-top: 16px;
}

.sc-tile.is-highlight .sc-tile-cover img {
  box-shadow: 0 0 0 4px var(--mark), 0 10px 24px rgba(0, 0, 0, 0.28);
}

.sc-tile-cover {
  display: block;
  margin-bottom: 12px;
}

.sc-tile-cover img {
  width: 100%;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  border-radius: 3px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.28), 0 2px 5px rgba(0, 0, 0, 0.2);
}

.sc-tile-title {
  margin: 0 0 0.15em;
  font: 600 1.05rem/1.25 var(--font-body);
  overflow-wrap: break-word;
}

.sc-tile-author {
  margin: 0 0 0.8em;
  color: var(--muted);
  font-size: 0.9rem;
}

/* Der Knopf sitzt in jeder Kachel auf derselben Höhe, egal wie lang der Titel ist. */
.sc-tile-btn {
  margin-top: auto;
  padding: 0.62em 0.6em;
  font-size: 0.95rem;
}

.sc-more {
  border-top: 1px solid var(--line);
}

/* Hinweis auf der Dealseite: Cover-Reihe zum Schaufenster */
.sc-strip {
  border-top: 1px solid var(--line);
}

.sc-strip-list {
  display: flex;
  gap: 16px;
  margin: 0 0 1.2em;
  padding: 4px 0 8px;
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x proximity;
}

.sc-strip-list li {
  flex: 0 0 clamp(92px, 24vw, 124px);
  scroll-snap-align: start;
}

.sc-strip-list a {
  display: block;
  color: var(--ink);
  text-decoration: none;
  font-size: 0.9rem;
  line-height: 1.3;
}

.sc-strip-list img {
  width: 100%;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  margin-bottom: 8px;
  border-radius: 3px;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.25);
}

/* --- Seite für Autor:innen ------------------------------------------ */

.sc-info-head h1 {
  max-width: 21ch;
  text-wrap: balance;
}

.sc-info-head .lead {
  max-width: 62ch;
}

/*
 * Das Regal: je Genre eine Reihe mit einem Feld pro Platz. Belegte Plätze
 * stehen als Buchrücken im Regal, freie sind gestrichelt. Die Zahl dazu
 * steht daneben im Text – das Bild ist die Kurzfassung.
 */
.sc-shelves {
  display: grid;
  gap: 18px;
}

@media (min-width: 820px) {
  .sc-shelves {
    grid-template-columns: 1fr 1fr;
  }
}

.sc-shelf {
  display: flex;
  flex-direction: column;
  padding: 20px 20px 18px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.sc-shelf.is-closed {
  background: transparent;
}

.sc-shelf-head h3 {
  margin: 0 0 0.3em;
  font: 700 1.25rem/1.2 var(--font-display);
}

.sc-shelf-head p {
  margin: 0 0 1em;
  font-size: 0.97rem;
}

.sc-shelf-row {
  display: flex;
  align-items: flex-end;
  gap: 7px;
  height: 64px;
  margin-top: auto;
  padding: 0 6px;
  border-bottom: 5px solid var(--ink);
}

.sc-slot {
  flex: 1 1 0;
  max-width: 34px;
  height: 46px;
  border: 1.5px dashed var(--muted);
  border-bottom: 0;
  border-radius: 2px 2px 0 0;
}

.sc-slot.is-taken {
  height: 58px;
  border: 0;
  background: var(--ink);
}

/* Buchrücken sind nicht alle gleich hoch – und einer trägt die Markierfarbe. */
.sc-slot.is-taken:nth-child(3n + 2) {
  height: 50px;
}

.sc-slot.is-taken:nth-child(4n + 3) {
  height: 62px;
  background: var(--mark);
}

.sc-shelf.is-closed .sc-shelf-row {
  border-bottom-color: var(--line);
}

.sc-shelf.is-closed .sc-slot {
  border-color: var(--line);
}

.sc-shelf-action {
  margin: 16px 0 0;
}

/* Pakete */
.sc-packs {
  display: grid;
  gap: 16px;
  margin-bottom: 1.2em;
}

@media (min-width: 760px) {
  .sc-packs {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
  }
}

.sc-pack {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 24px 22px 20px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.sc-pack.is-pick {
  border: 2px solid var(--ink);
}

.sc-pack-flag {
  position: absolute;
  top: -0.85em;
  left: 18px;
  margin: 0;
  padding: 0.3em 0.7em;
  background: var(--mark);
  color: #14213d;
  font: 700 0.8rem/1.2 var(--font-ui);
  border-radius: 4px;
}

.sc-pack h3 {
  margin: 0 0 0.5em;
  font: 600 1.05rem/1.2 var(--font-ui);
}

.sc-pack-amount {
  margin: 0 0 0.6em;
  font: 700 2.3rem/1 var(--font-display);
  letter-spacing: -0.02em;
}

.sc-pack-amount span {
  font: 400 0.95rem/1.2 var(--font-ui);
  letter-spacing: 0;
  color: var(--muted);
}

.sc-pack ul {
  margin: 0 0 1.3em;
  padding-left: 1.1em;
  font-size: 0.97rem;
}

.sc-pack li {
  margin-bottom: 0.35em;
}

.sc-pack p:last-child {
  margin: auto 0 0;
}

.sc-pack .btn {
  display: block;
}

.sc-advice {
  padding: 14px 18px;
  border-left: 5px solid var(--mark);
  border-radius: 6px;
  background: var(--surface);
}

/* Buchungsformular */
.sc-pack-choice {
  display: grid;
  gap: 12px;
  margin-bottom: 12px;
}

@media (min-width: 720px) {
  .sc-pack-choice {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.sc-pack-option .sc-pack-price {
  color: var(--ink);
  font-size: 1.15rem;
  font-weight: 700;
}

.sc-form-status {
  display: block;
  margin-bottom: 14px;
}

@media (min-width: 620px) {
  .sc-series-fields {
    grid-template-columns: 2fr 1fr 1fr;
  }
}

.sc-inquiry {
  max-width: 760px;
}

/* Konto: Monatszahlen eines Platzes */
.sc-months {
  width: 100%;
}

.sc-months td,
.sc-months th {
  white-space: nowrap;
}

/* ------------------------------------------------------------------
   8. Aufkleber-Look
   Die Abschnitte oben legen Raster und Abstände fest. Hier steht, wie
   die Bausteine AUSSEHEN: dicke Ränder, harte Schatten, Schriftrollen.
   Farben kommen aus den Variablen (Abschnitt 1, je Genre in themes.css).
   ------------------------------------------------------------------ */

/* --- Kopfzeile -------------------------------------------------------- */
.site-head {
  display: block;
  max-width: none;
  padding: 0;
  background: var(--head-bg);
  color: var(--head-ink);
}

.site-head-inner {
  display: flex;
  align-items: center;
  gap: 8px 26px;
  flex-wrap: wrap;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 12px var(--gutter);
}

.logo {
  gap: 8px;
  color: var(--head-ink);
  font: 700 1.5rem/1 "LD Bonum", "Bookman Old Style", Georgia, serif;
  letter-spacing: -0.03em;
}

.logo-tag {
  width: 30px;
  height: 20px;
  background: var(--mark);
}

.logo-tag::after {
  left: 8px;
  top: 7px;
  width: 6px;
  height: 6px;
  background: var(--head-bg);
}

.genre-nav {
  gap: 4px 4px;
  font: 700 0.84rem/1 var(--font-label);
}

.genre-nav a {
  padding: 8px 12px;
  border: 0;
  border-radius: 999px;
  color: var(--head-ink);
}

.genre-nav a:hover {
  background: var(--nav-on);
  color: var(--nav-on-ink);
}

.genre-nav a[aria-current="page"] {
  background: var(--nav-on);
  color: var(--nav-on-ink);
}

/* --- Schaltflächen: dicke Taste, die sich eindrücken lässt ------------- */
.btn {
  padding: 0.7em 1.2em;
  border: 2.5px solid var(--edge);
  border-radius: 14px;
  background: var(--accent);
  color: var(--on-accent);
  font: 700 1.02rem/1.2 var(--font-display);
  letter-spacing: -0.01em;
  box-shadow: 0 4px 0 var(--edge);
  transition: transform 0.08s ease-out, box-shadow 0.08s ease-out;
}

.btn:hover {
  filter: none;
  transform: translateY(2px);
  box-shadow: 0 2px 0 var(--edge);
}

.btn:active {
  transform: translateY(4px);
  box-shadow: 0 0 0 var(--edge);
}

.btn-quiet {
  background: var(--quiet-bg);
  color: var(--quiet-ink);
  border-color: var(--edge);
}

@media (prefers-reduced-motion: reduce) {
  .btn {
    transition: none;
  }
}

/* --- Überschriften ---------------------------------------------------- */
/*
 * Aufkleber-Schrift: ein Ring aus 16 Schatten bildet den Umriss, ein zweiter,
 * versetzter Ring den farbigen Schatten. (Als Schatten statt als Kontur, weil
 * eine Kontur in älteren Browsern in die Buchstaben hineinwächst.) Die Farben
 * setzt das Genre: --title-fill, --title-edge, --title-pop.
 */
.hero-title,
.home-hero h1,
.genre-tile-name {
  color: var(--title-fill);
  text-shadow:
    0.045em 0.000em 0 var(--title-edge),
    0.042em 0.017em 0 var(--title-edge),
    0.032em 0.032em 0 var(--title-edge),
    0.017em 0.042em 0 var(--title-edge),
    0.000em 0.045em 0 var(--title-edge),
    -0.017em 0.042em 0 var(--title-edge),
    -0.032em 0.032em 0 var(--title-edge),
    -0.042em 0.017em 0 var(--title-edge),
    -0.045em 0.000em 0 var(--title-edge),
    -0.042em -0.017em 0 var(--title-edge),
    -0.032em -0.032em 0 var(--title-edge),
    -0.017em -0.042em 0 var(--title-edge),
    -0.000em -0.045em 0 var(--title-edge),
    0.017em -0.042em 0 var(--title-edge),
    0.032em -0.032em 0 var(--title-edge),
    0.042em -0.017em 0 var(--title-edge),
    0.125em 0.080em 0 var(--title-pop),
    0.122em 0.097em 0 var(--title-pop),
    0.112em 0.112em 0 var(--title-pop),
    0.097em 0.122em 0 var(--title-pop),
    0.080em 0.125em 0 var(--title-pop),
    0.063em 0.122em 0 var(--title-pop),
    0.048em 0.112em 0 var(--title-pop),
    0.038em 0.097em 0 var(--title-pop),
    0.035em 0.080em 0 var(--title-pop),
    0.038em 0.063em 0 var(--title-pop),
    0.048em 0.048em 0 var(--title-pop),
    0.063em 0.038em 0 var(--title-pop),
    0.080em 0.035em 0 var(--title-pop),
    0.097em 0.038em 0 var(--title-pop),
    0.112em 0.048em 0 var(--title-pop),
    0.122em 0.063em 0 var(--title-pop);
}

.section-title,
.page-head h1,
.notice-page h1,
.prose h1,
.prefs h1 {
  letter-spacing: var(--display-spacing);
}

/* Schlangenlinie unter Abschnittsüberschriften */
.section-title::after {
  content: "";
  display: block;
  width: 96px;
  height: 9px;
  margin-top: 0.3em;
  background: var(--mark);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='9'%3E%3Cpath d='M0 4.5c3 0 3-3 6-3s3 3 6 3 3 3 6 3 3-3 6-3' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E") 0 0 / 24px 9px repeat-x;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='9'%3E%3Cpath d='M0 4.5c3 0 3-3 6-3s3 3 6 3 3 3 6 3 3-3 6-3' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E") 0 0 / 24px 9px repeat-x;
}

.prose h3,
.home-how-grid h3,
.hero-signup-title {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* --- Kopfbereich mit Kulisse ------------------------------------------- */
.hero {
  overflow: hidden;
  background: var(--hero-bg);
  color: var(--hero-ink);
}

.hero-inner {
  position: relative;
  z-index: 1;
}

.hero-tagline {
  font-family: var(--font-body);
}

.hero-deadline {
  color: inherit;
  opacity: 0.92;
}

.hero-deadline time {
  color: inherit;
}

/* Die Kulisse schiebt sich ein Stück unter den Text, damit der Kopfbereich nicht zu hoch wird */
.hero-motif {
  position: relative;
  height: var(--scene-h);
  margin-top: calc(var(--scene-h) * -0.34);
  background: var(--scene) center bottom / auto 100% repeat-x;
  pointer-events: none;
}

/* --- Karten als Aufkleber ----------------------------------------------- */
.book,
.hero-signup,
.home-hero-form,
.section-signup .signup,
.sc-pack,
.sc-shelf,
.after-click,
.home-how-grid > div {
  border: 2.5px solid var(--edge);
  border-radius: var(--radius);
  box-shadow: 6px 6px 0 var(--pop);
}

.book.is-highlight {
  border-color: var(--edge);
  box-shadow: 6px 6px 0 var(--pop), 0 0 0 5px var(--accent);
}

.home-how-grid > div {
  padding: 18px 20px 6px;
  background: var(--surface);
}

.home-how-grid > div:nth-child(3n + 1) {
  box-shadow: 6px 6px 0 var(--accent);
}

.home-how-grid > div:nth-child(3n + 2) {
  box-shadow: 6px 6px 0 var(--mark);
}

/* Cover: leicht schief wie auf einem Büchertisch, beim Überfahren gerade */
.book-cover img,
.sc-tile-cover img {
  border: 2.5px solid var(--edge);
  border-radius: 6px;
  box-shadow: 4px 4px 0 var(--edge);
  transition: transform 0.15s ease-out;
}

.book:nth-child(odd) .book-cover img,
.sc-tile:nth-child(3n + 1) .sc-tile-cover img {
  transform: rotate(-1.6deg);
}

.book:nth-child(even) .book-cover img,
.sc-tile:nth-child(3n + 2) .sc-tile-cover img {
  transform: rotate(1.3deg);
}

.book-cover:hover img,
.sc-tile-cover:hover img {
  transform: rotate(0deg) scale(1.02);
}

@media (prefers-reduced-motion: reduce) {
  .book-cover img,
  .sc-tile-cover img {
    transition: none;
  }
}

.book-title,
.sc-tile-title {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.015em;
}

/* Werbekennzeichnung: klein, aber lesbar (Kontrast wie Nebentext, nicht blasser) */
.book-flag,
.ad-mark {
  color: var(--muted);
  font: 700 0.7rem/1.2 var(--font-label);
  letter-spacing: 0.04em;
}

.ad-mark {
  margin-left: 0.4em;
  white-space: nowrap;
}

.book-report {
  font: 0.72rem/1.2 var(--font-label);
}

.book-report a {
  color: var(--muted);
  text-decoration: none;
}

.book-report a:hover {
  text-decoration: underline;
}

/* Preis-Aufkleber: gezackter Stern statt Anhänger */
.price-tag {
  left: -16px;
  top: -18px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  width: 3.5em;
  height: 3.5em;
  padding: 0;
  font: 700 1.15rem/1 var(--tag-font, var(--font-display));
  clip-path: var(--tag-shape);
  filter: drop-shadow(3px 3px 0 var(--edge));
}

.price-tag::before {
  display: none;
}

.price-tag-unit {
  font-size: 0.62em;
}

.price-tag-word .price-tag-amount {
  font-size: 0.9em;
  letter-spacing: 0;
}

@media (min-width: 560px) {
  .price-tag {
    font-size: 1.32rem;
  }
}

/* --- Formulare ----------------------------------------------------------- */
.input {
  border: 2.5px solid var(--edge);
  border-radius: 12px;
}

.signup-genres .check {
  border: 2px solid var(--edge);
  font: 700 0.82rem/1.3 var(--font-label);
}

.signup-genres .check:has(input:checked) {
  background: var(--accent);
  color: var(--on-accent);
}

.signup-genres .check input {
  margin-top: 1px;
  accent-color: var(--edge);
}

.signup-note {
  font-size: 0.8rem;
}

.sc-view {
  border: 2.5px solid var(--edge);
  border-radius: 999px;
  background: var(--quiet-bg);
  font: 700 0.84rem/1 var(--font-label);
}

.sc-view a {
  color: var(--quiet-ink);
}

.sc-view a + a {
  border-left: 2.5px solid var(--edge);
}

.sc-view a[aria-current="page"] {
  background: var(--accent);
  color: var(--on-accent);
}

.badge,
.sc-pack-flag {
  font-family: var(--font-label);
}

/* --- Startseite -------------------------------------------------------- */
.home-hero {
  display: block;
  max-width: none;
  padding: 0;
  background: var(--hero-bg);
  border-bottom: 2.5px solid var(--edge);
}

.home-hero-inner {
  display: grid;
  gap: 28px 56px;
  align-items: center;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: clamp(24px, 5vw, 60px) var(--gutter) clamp(34px, 5vw, 64px);
}

@media (min-width: 940px) {
  .home-hero-inner {
    grid-template-columns: 1.1fr 0.9fr;
  }
}

.home-hero h1 {
  font: 700 clamp(2.2rem, 6vw, 3.9rem) / 1.02 var(--font-display);
  letter-spacing: -0.035em;
}

.home-hero .lead {
  font-size: 1.18rem;
}

/* Genre-Kacheln: jede eine kleine Welt mit Himmel, Kulisse und drei Covern */
.genre-tile {
  justify-content: flex-start;
  min-height: 310px;
  padding: 18px 18px 0;
  border: 2.5px solid var(--edge);
  background: var(--scene) center bottom / auto 34% repeat-x, var(--sky);
  color: var(--hero-ink);
  box-shadow: 6px 6px 0 var(--pop);
  transition: transform 0.12s ease-out, box-shadow 0.12s ease-out;
}

.genre-tile:hover {
  transform: translate(-2px, -2px);
  box-shadow: 8px 8px 0 var(--pop);
}

.genre-tile:hover .genre-tile-name {
  text-decoration: none;
}

.genre-tile-name {
  font-size: calc(1.9rem * var(--display-scale));
  line-height: 1.02;
  padding-bottom: 0.12em;
}

.genre-tile-meta {
  margin-top: 8px;
  color: inherit;
  font: 700 0.78rem/1.35 var(--font-label);
  opacity: 0.92;
}

.genre-tile-covers {
  left: 0;
  right: 0;
  top: auto;
  bottom: 12%;
  justify-content: center;
}

.genre-tile-covers img {
  width: 78px;
  margin-left: -18px;
  border: 2px solid var(--edge);
  border-radius: 4px;
  box-shadow: 3px 3px 0 var(--edge);
}

.genre-tile-covers img:first-child {
  margin-left: 0;
}

@media (prefers-reduced-motion: reduce) {
  .genre-tile {
    transition: none;
  }
}

/* --- Fuß ---------------------------------------------------------------- */
.site-foot {
  border-top: 2.5px solid var(--edge);
  font-size: 0.86rem;
}

.foot-nav {
  font: 700 0.8rem/1.4 var(--font-label);
}

/* --- Sonstiges ---------------------------------------------------------- */
.consent {
  border: 2.5px solid #1d1a3d;
  border-radius: 16px;
  color: #1d1a3d;
  box-shadow: 6px 6px 0 #1d1a3d;
}

.consent .btn {
  background: #ffd23f;
  border-color: #1d1a3d;
  color: #1d1a3d;
  box-shadow: 0 4px 0 #1d1a3d;
}

.consent .btn-quiet {
  background: #ffffff;
  color: #1d1a3d;
}

.table-wrap {
  border: 2px solid var(--edge);
}

.sc-strip-list img,
.free-list img {
  border: 2px solid var(--edge);
  border-radius: 5px;
  box-shadow: 3px 3px 0 var(--edge);
}

.sc-hook {
  font-family: var(--font-body);
}

/* --- Buchungsformulare ---------------------------------------------------- */
.form-block {
  border: 2.5px solid var(--edge);
}

.choice,
.week {
  border: 2px solid var(--edge);
  border-radius: 12px;
  background: var(--surface);
}

.choice:has(input:checked),
.week:has(input:checked) {
  border-color: var(--edge);
  background: #fff3c2;
  box-shadow: 4px 4px 0 var(--edge);
}

.choice input,
.week input,
.check input {
  accent-color: var(--edge);
}

.sc-hero-title {
  line-height: 1.12;
}

.sc-pack.is-pick {
  box-shadow: 6px 6px 0 var(--mark);
}

/* Schmale Bildschirme: Die Anmeldung steht über der Kulisse, nicht in ihr */
@media (max-width: 899px) {
  .hero-motif {
    margin-top: -6px;
  }
}

.book-price > .book-save:first-child {
  margin-left: 0;
}