/* paramon.de – Gestaltung
   Eine Schrift (Literata, variabel), eine Farbe (das Logo-Gold), weiße Seite.
   Reihenfolge: Tokens → Grundelemente → Kopf/Fuß → Seitentypen → Blöcke → Hilfsklassen. */

@font-face {
  font-family: "Literata";
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url("/assets/schriften/literata-normal.woff2") format("woff2-variations");
}
@font-face {
  font-family: "Literata";
  font-style: italic;
  font-weight: 200 900;
  font-display: swap;
  src: url("/assets/schriften/literata-kursiv.woff2") format("woff2-variations");
}

:root {
  --gold: #a08962;        /* Logo */
  --gold-dunkel: #7d6a49; /* Hover */
  --bronze: #65563e;      /* Links, dunkler Akzent (aus dem bisherigen Theme) */
  --bronze-tief: #3a3024; /* Fußzeile */
  --tinte: #2b2419;
  --tinte-2: #6a6157;
  --linie: #e4ddd1;
  --papier: #ffffff;
  --papier-2: #f6f2ec;
  --schrift: "Literata", Georgia, "Times New Roman", serif;
  --mass: 68ch;          /* Zeilenlänge für Fließtext */
  --breit: 1180px;       /* Breite für Bilder, Raster, Kopf */
  --rand: clamp(16px, 4vw, 40px);
  --abstand: clamp(2.5rem, 6vw, 5rem);
}

/* ---------- Grundelemente ---------- */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--papier); }
body {
  margin: 0;
  font-family: var(--schrift);
  font-size: 1.0625rem;
  line-height: 1.6;
  font-optical-sizing: auto;
  color: var(--tinte);
  background: var(--papier);
  text-rendering: optimizeLegibility;
}
@media (min-width: 700px) { body { font-size: 1.125rem; } }

h1, h2, h3, h4 {
  font-weight: 500;
  line-height: 1.15;
  margin: 0 0 0.5em;
  max-width: 24ch;
  text-wrap: balance;
  overflow-wrap: break-word;
}
h1 { font-size: clamp(2rem, 1.4rem + 2.4vw, 3.4rem); letter-spacing: -0.01em; line-height: 1.08; }
h2 { font-size: clamp(1.65rem, 1.3rem + 1.3vw, 2.4rem); }
h3 { font-size: clamp(1.4rem, 1.2rem + 0.8vw, 1.8rem); }
h4 { font-size: 1.25rem; font-weight: 600; line-height: 1.3; max-width: 36ch; }
* + h2, * + h3 { margin-top: 1.6em; }
* + h4 { margin-top: 1.4em; }

p, ul, ol, blockquote, table { margin: 0 0 1em; max-width: var(--mass); overflow-wrap: break-word; }
li { margin-bottom: 0.3em; }
strong { font-weight: 600; }
a { color: var(--bronze); text-decoration-color: var(--gold); text-underline-offset: 0.15em; overflow-wrap: anywhere; }
a:hover { color: var(--tinte); }
a:focus-visible, button:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; border-radius: 2px; }
img { max-width: 100%; height: auto; display: block; }
figure { margin: 0 0 1.5em; }
figcaption { font-size: 0.9em; color: var(--tinte-2); margin-top: 0.5em; }
blockquote { padding-left: 1em; border-left: 3px solid var(--gold); font-style: italic; }
hr { border: 0; border-top: 1px solid var(--linie); margin: 2em 0; }
table { border-collapse: collapse; width: 100%; }
th, td { text-align: left; padding: 0.5em 0.75em 0.5em 0; border-bottom: 1px solid var(--linie); vertical-align: top; }
time { white-space: nowrap; }

.sprung { position: absolute; left: -999px; top: 0; background: var(--tinte); color: #fff; padding: 0.5em 1em; z-index: 10; }
.sprung:focus { left: 0; }
.unsichtbar { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Knöpfe */
.knopf {
  display: inline-block;
  padding: 0.7em 1.4em;
  background: var(--gold);
  color: var(--tinte);
  font-weight: 600;
  text-decoration: none;
  border-radius: 4px;
  border: 0;
  font: inherit;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
}
.knopf:hover { background: var(--gold-dunkel); color: #fff; }
.knopf--leise { background: transparent; color: var(--bronze); box-shadow: inset 0 0 0 1.5px var(--gold); }
.knopf--leise:hover { background: var(--papier-2); color: var(--tinte); }

/* ---------- Kopf ---------- */

.kopf { border-bottom: 1px solid var(--linie); }
.kopf__oben, .kopf__zeile { max-width: var(--breit); margin: 0 auto; padding: 0 var(--rand); }
.kopf__oben {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  font-size: 0.9rem; color: var(--tinte-2); padding-top: 0.45rem; padding-bottom: 0.45rem;
  border-bottom: 1px solid var(--linie);
}
.kopf__motto { margin: 0; display: none; }
.kopf__suche { display: flex; align-items: center; margin: 0 auto 0 0; border: 1px solid var(--linie); border-radius: 4px; background: var(--papier); }
.kopf__suche input { font: inherit; font-size: 0.85rem; border: 0; background: none; padding: 0.25em 0.5em; width: 8.5rem; color: var(--tinte); }
.kopf__suche input:focus { outline: none; }
.kopf__suche:focus-within { border-color: var(--gold); box-shadow: 0 0 0 2px rgba(160, 137, 98, 0.25); }
.kopf__suche button { display: inline-flex; border: 0; background: none; padding: 0.25em 0.45em; color: var(--tinte-2); cursor: pointer; }
.kopf__suche button:hover { color: var(--tinte); }
.kopf__suche svg { width: 16px; height: 16px; }
.kopf__kontakt { margin: 0; display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; align-items: center; justify-content: flex-end; }
.kopf__kontakt a { text-decoration: none; }
.kopf__kontakt a:hover { text-decoration: underline; }
.kopf__mail { display: none; }
.kopf__sprachen { display: flex; gap: 0.15rem; }
.kopf__sprachen a { text-decoration: none; padding: 0.1em 0.45em; border-radius: 3px; color: var(--tinte-2); }
.kopf__sprachen a[aria-current] { background: var(--tinte); color: #fff; }
.kopf__sprachen a:hover { color: var(--tinte); }

.kopf__zeile { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-top: 0.75rem; padding-bottom: 0.75rem; }
.kopf__marke { display: block; line-height: 0; }
.kopf__marke img { height: 48px; width: auto; }
.kopf__schalter {
  display: inline-flex; align-items: center; gap: 0.5em;
  background: none; border: 1.5px solid var(--linie); border-radius: 4px;
  font: inherit; font-size: 0.95rem; color: var(--tinte); padding: 0.45em 0.8em; cursor: pointer;
}
.kopf__schalter svg { width: 20px; height: 20px; }
.kopf__menue { display: flex; flex-direction: column; gap: 0.25rem; }
.kopf__menue a { text-decoration: none; color: var(--tinte); font-weight: 500; padding: 0.5em 0; }
.kopf__menue a:hover { color: var(--bronze); }
.kopf__menue a[aria-current="page"] { color: var(--bronze); box-shadow: inset 0 -2px 0 var(--gold); }
.kopf__menue .knopf { padding: 0.6em 1.2em; margin-top: 0.5rem; align-self: flex-start; }

/* Mobil: Menü eingeklappt, nur wenn JavaScript läuft */
.js .kopf__menue { display: none; }
.js .kopf--offen .kopf__menue { display: flex; }
@media (max-width: 899.98px) {
  .kopf__menue { width: 100%; padding: 0.5rem 0 1rem; border-top: 1px solid var(--linie); }
  .kopf__zeile { flex-wrap: wrap; }
}
@media (min-width: 900px) {
  .kopf__motto { display: block; }
  .kopf__suche { margin: 0 0 0 auto; }
  .kopf__suche input { width: 12rem; }
  .kopf__mail { display: inline; }
  .kopf__marke img { height: 60px; }
  .kopf__schalter { display: none; }
  .js .kopf__menue, .kopf__menue { display: flex; flex-direction: row; align-items: center; gap: 1.75rem; }
  .kopf__menue .knopf { margin: 0 0 0 0.5rem; }
}
@media (min-width: 500px) { .kopf__mail { display: inline; } }

/* ---------- Inhalt und Fuß ---------- */

.inhalt { max-width: var(--breit); margin: 0 auto; padding: var(--abstand) var(--rand); }

/* Brotkrümel zwischen Kopf und Inhalt; eine Zeile, die letzte Stufe (aktuelle Seite) wird bei Platzmangel gekürzt */
.kruemel { max-width: var(--breit); margin: 0 auto; padding: 1rem var(--rand) 0; font-size: 0.85rem; line-height: 1.4; color: var(--tinte-2); }
.kruemel ol { list-style: none; margin: 0; padding: 0; display: flex; max-width: none; }
.kruemel li { display: flex; flex: none; white-space: nowrap; }
.kruemel li:last-child { flex: 0 1 auto; min-width: 0; }
.kruemel li + li::before { content: "/"; margin: 0 0.5em; color: var(--linie); }
.kruemel a { color: inherit; text-decoration: none; }
.kruemel a:hover { color: var(--bronze); text-decoration: underline; }
.kruemel [aria-current] { color: var(--tinte); overflow: hidden; text-overflow: ellipsis; }
.kruemel + .inhalt { padding-top: calc(var(--abstand) * 0.6); }
.inhalt > article > h1:first-child { margin-top: 0; }

.fuss { background: var(--bronze-tief); color: #e9e2d6; margin-top: var(--abstand); font-size: 0.95rem; }
.fuss__innen { max-width: var(--breit); margin: 0 auto; padding: 2.5rem var(--rand) 2rem; display: grid; gap: 1.25rem; }
.fuss a { color: #d9c8a5; text-decoration-color: rgba(217, 200, 165, 0.5); }
.fuss a:hover { color: #fff; }
.fuss__marke img { height: 44px; width: auto; }
.fuss__marke-weiss { display: none; } /* weißes Zeichen nur für Stil „thames“ */
.fuss__nav { display: flex; gap: 1.25rem; flex-wrap: wrap; }
.fuss__nav a { font-weight: 500; text-decoration: none; }
.fuss__nav a:hover { text-decoration: underline; }
.fuss p { margin: 0; max-width: 70ch; }
.fuss__spalten { display: grid; gap: 1.5rem 2.5rem; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.fuss__spalten .fuss__nav { flex-direction: column; gap: 0.5rem; }
.fuss__kontakt { display: grid; gap: 0.75rem; align-content: start; }
@media (min-width: 900px) {
  .fuss__innen { grid-template-columns: auto 1fr; align-items: start; column-gap: 3rem; }
  .fuss__marke { grid-row: 1 / 3; }
}

/* ---------- Abschnitte (Seiten mit <section>-Wrappern im Inhalt) ---------- */

article > section { padding: var(--abstand) 0; }
article > section:first-child { padding-top: 0; }
article > section:last-child { padding-bottom: 0; }
article > section + section { border-top: 1px solid var(--linie); }
.buehne figure { margin: 0; }
.buehne img { width: 100%; }
/* Folienschau (Block buehne) gibt es nur in Stil 6; die anderen Stile zeigen das bisherige Banner */
html:not([data-stil="thames"]) .folien { display: none; }
/* Regalwand (Block regalwand) gibt es nur in den Stilen „fogg“ und „albion“ (stil-fogg.css, stil-albion.css) */
html:not([data-stil="fogg"]):not([data-stil="albion"]) .regalwand { display: none; }
.einstieg p:first-of-type { font-size: 1.2em; color: var(--tinte-2); margin-top: -0.3em; }
.einstieg--marke { display: grid; gap: 1.5rem; align-items: center; }
.einstieg--marke figure { margin: 0; max-width: 140px; }
@media (min-width: 700px) { .einstieg--marke { grid-template-columns: 140px 1fr; gap: 3rem; } }

.band { background: var(--papier-2); border-top: 0 !important; padding-left: var(--rand); padding-right: var(--rand); margin-left: calc(-1 * var(--rand)); margin-right: calc(-1 * var(--rand)); }
.band + section { border-top: 0 !important; }
article > .band:last-child { padding-bottom: var(--abstand); margin-bottom: calc(-1 * var(--abstand)); }

.bild-mitte figure { margin: 0 auto; max-width: 640px; }

/* Schritte mit Symbol (So funktioniert's, Manuskript senden, Projektablauf) */
.schritte { display: grid; gap: 2.25rem; }
.schritt .icon { display: block; width: 2.5rem; height: 2.5rem; margin-bottom: 0.9rem; }
.schritt h2, .schritt h3 { margin-top: 0; font-size: 1.25rem; font-weight: 600; line-height: 1.3; max-width: 36ch; }
.schritt p:last-child { margin-bottom: 0; }
@media (min-width: 700px) { .schritte { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 2.5rem 2.5rem; } }
.schritte--lang { grid-template-columns: 1fr !important; gap: 3rem; }
.schritte--lang .schritt { display: grid; grid-template-columns: 2.5rem 1fr; column-gap: 1.5rem; max-width: calc(var(--mass) + 4rem); }
.schritte--lang .schritt > * { grid-column: 2; }
.schritte--lang .schritt .icon { grid-column: 1; grid-row: 1 / span 20; margin: 0.15rem 0 0; }
.icon { display: inline-block; width: 1.75rem; height: 1.75rem; color: var(--gold); vertical-align: middle; }
.icon svg { width: 100%; height: 100%; stroke-width: 1.5; }
.icon-link a { display: inline-flex; align-items: center; gap: 0.6em; text-decoration: none; font-weight: 500; }
.icon-link .icon { width: 1.6rem; height: 1.6rem; }

/* Zweispaltige Abschnitte */
.berater, .kontaktwege, .angebote { display: grid; gap: 2rem; }
.berater figure { margin: 0; max-width: 230px; }
.berater hr { margin: 1.25em 0; }
.angebote h3 { margin-top: 0; }
@media (min-width: 760px) {
  .berater { grid-template-columns: 230px 1fr; gap: 3rem; align-items: start; }
  .kontaktwege, .angebote { grid-template-columns: 1fr 1fr; gap: 3rem; }
}
.kontaktwege h2, .formularteil h2 { margin-top: 0; font-size: 1.25rem; font-weight: 600; line-height: 1.3; max-width: 36ch; }
.sprachwahl { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.sprachwahl a { text-decoration: none; padding: 0.3em 0.85em; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--linie); color: var(--tinte); font-size: 0.95rem; }
.sprachwahl a:hover { box-shadow: inset 0 0 0 1px var(--gold); }
.sprachwahl a[aria-current] { background: var(--tinte); color: #fff; box-shadow: none; }

/* ---------- Formulare ---------- */

.formular { max-width: 760px; }
.formular__gruppe { border: 0; padding: 0; margin: 0 0 2.25rem; min-width: 0; }
.formular__gruppe legend { font-size: 1.35rem; font-weight: 500; padding: 0; margin-bottom: 1rem; }
.formular__raster { display: grid; gap: 1.1rem 1.5rem; }
@media (min-width: 640px) {
  .formular__raster { grid-template-columns: 1fr 1fr; }
  .feld--breit { grid-column: 1 / -1; }
}
.feld label { display: block; font-weight: 500; font-size: 0.95rem; margin-bottom: 0.3rem; }
.feld input, .feld select, .feld textarea {
  width: 100%; font: inherit; color: inherit; background: #fff;
  padding: 0.55em 0.75em; border: 1.5px solid #cfc6b8; border-radius: 4px;
}
.feld select { appearance: none; -webkit-appearance: none; padding-right: 2.2em;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236a6157' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>");
  background-repeat: no-repeat; background-position: right 0.7em center; }
.feld input:focus, .feld select:focus, .feld textarea:focus { outline: 3px solid var(--gold); outline-offset: 1px; border-color: var(--gold-dunkel); }
.feld textarea { resize: vertical; min-height: 7em; }
.feld__hinweis { font-size: 0.85rem; color: var(--tinte-2); margin: 0.45rem 0 0; line-height: 1.45; }
/* Fehler- und Tippfehlerhinweise direkt am Feld (manuskript.js, mit aria-describedby) */
.feld__fehler { font-size: 0.85rem; color: #8a2b14; margin: 0.45rem 0 0; line-height: 1.45; }
.feld__fehler:empty { display: none; }
.feld [aria-invalid="true"] { border-color: #8a2b14; box-shadow: 0 0 0 2px rgba(138, 43, 20, 0.15); }
.feld--datei input { padding: 1.25em; border-style: dashed; background: var(--papier-2); }
.honig { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.formular__senden { margin: 1.5rem 0 0; }
.cf-turnstile { margin: 1rem 0 0; }
#uppy { margin-top: 0.25rem; }
#uppy .uppy-Dashboard-inner { border-color: #cfc6b8; background: var(--papier-2); }
#uppy .uppy-Dashboard-AddFiles-title { font-family: var(--schrift); color: var(--tinte); }
#uppy .uppy-Dashboard-browse { color: var(--bronze); }
.meldung { display: none; padding: 0.75em 1em; border-radius: 4px; margin: 0.75rem 0; font-weight: 500; }
.meldung:target { display: block; }
.meldung--ok { background: #e8efe3; color: #2f4a26; }
.meldung--fehler { background: #f6e3df; color: #6b2a1d; }

.merkblatt { max-width: none; }
.merkblatt__titel { margin: 0 0 0.5rem; font-size: clamp(1.4rem, 1.2rem + 1vw, 1.9rem); font-weight: 500; }
.merkblatt__hinweis { font-size: 0.9rem; color: var(--tinte-2); max-width: 80ch; }
.merkblatt__felder { display: grid; gap: 0.9rem 1rem; align-items: end; margin-top: 1.25rem; }
.feld--knopf .knopf { width: 100%; text-align: center; }
@media (min-width: 640px) { .merkblatt__felder { grid-template-columns: 1fr 1fr; } .feld--knopf { grid-column: 1 / -1; } .feld--knopf .knopf { width: auto; } }
@media (min-width: 900px) { .merkblatt__felder { grid-template-columns: 120px 1fr 1fr 1.4fr auto; } .feld--knopf { grid-column: auto; } }

/* ---------- Beiträge ---------- */

.beitragsraster { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; gap: 2rem 1.5rem; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); max-width: none; }
@media (max-width: 599px) { .beitragsraster { grid-template-columns: 1fr 1fr; gap: 1.75rem 0.75rem; } }
.beitragsraster a { text-decoration: none; color: inherit; display: block; }
/* Bild nie beschneiden (Porträts und Buchcover gemischt): ganzes Bild wie ein Abzug auf einer
   Fläche, mit leichtem Schatten. Auf der Autoren-Seite Hochformat (fast alle Bilder 3:4 bis 2:3).
   Bild absolut im Feld: Safari löst max-height:100% gegen aspect-ratio-Höhen nicht auf und lässt
   das Feld mit dem Bild wachsen – dann sind die Kacheln ungleich hoch. */
.beitragsraster__bild { --luft: 7%; position: relative; display: block; aspect-ratio: 4 / 3; background: var(--papier-2); margin-bottom: 0.75rem; border-radius: 3px; }
.beitragsraster__bild img { position: absolute; inset: var(--luft); margin: auto; display: block; width: auto; height: auto; max-width: calc(100% - 2 * var(--luft)); max-height: calc(100% - 2 * var(--luft)); box-shadow: 0 1px 2px rgb(40 30 20 / 0.12), 0 6px 16px -6px rgb(40 30 20 / 0.28); }
.seite--autoren .beitragsraster__bild { aspect-ratio: 4 / 5; --luft: 9%; }
.beitragsraster__titel { display: block; font-weight: 500; line-height: 1.3; }
.beitragsraster a:hover .beitragsraster__titel { color: var(--bronze); }
.beitragsraster time { display: block; color: var(--tinte-2); font-size: 0.9em; margin-top: 0.2em; }

.beitragsseite { max-width: 760px; }
.beitragsseite__kopf h1 { max-width: none; }
.beitragsseite__bild { margin: 1.5rem 0 2rem; }
.beitragsseite__bild img { width: 100%; }

.einsenden { display: grid; gap: 0.5rem 3rem; align-items: center; }
.einsenden h3 { margin: 0; font-size: clamp(1.4rem, 1.2rem + 1vw, 2rem); font-weight: 500; }
.einsenden p { margin: 0; }
.einsenden .cta { margin: 0.75rem 0 0; }
@media (min-width: 800px) {
  .einsenden { grid-template-columns: 1fr auto; }
  .einsenden h3 { grid-column: 1; }
  .einsenden p { grid-column: 1; }
  .einsenden .cta { grid-column: 2; grid-row: 1 / 3; margin: 0; }
}

.presse h3, .partner h3 { font-weight: 500; color: var(--tinte-2); font-size: 1.05rem; max-width: none; }
.presse figure, .partner figure { margin: 1.25rem 0 0; }
.presse figure, .partner figure { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.presse img, .partner img { width: 100%; min-width: 640px; max-width: 1000px; }

/* Autorenregister A–Z gibt es nur in Stil 6 (stil-thames.css) */
.register { display: none; }
/* Nur das Gruppenbild (direktes Kind) – die Stimmen im selben Abschnitt haben eigene figure-Elemente */
.autoren > figure { margin-top: 2rem; }
.autoren > figure a { display: block; line-height: 0; }
.autoren > figure img { width: 100%; }

.kategorien { display: grid; gap: 1.5rem; align-items: center; }
.kategorien figure { margin: 0; max-width: 300px; }
.kategorien figure img { box-shadow: 0 1px 2px rgba(43, 36, 25, 0.25), 3px 6px 18px rgba(43, 36, 25, 0.18); }
.kategorien h2 { margin-top: 0; font-size: clamp(1.4rem, 1.2rem + 1vw, 2rem); font-weight: 500; }
@media (min-width: 800px) { .kategorien { grid-template-columns: 300px 1fr; gap: 4rem; } }

.aktuell p:first-of-type { font-size: 1.15em; color: var(--tinte-2); margin-top: -0.3em; }

.leistungen { display: grid; gap: 1.5rem; align-items: center; }
.leistungen figure { margin: 0; max-width: 200px; }
@media (min-width: 800px) { .leistungen { grid-template-columns: 1fr 200px; gap: 4rem; } }

/* ---------- Buchseite ---------- */

.buchseite { display: grid; gap: 2rem; }
.buch__cover { max-width: 320px; }
.buch__cover img { box-shadow: 0 1px 2px rgba(43, 36, 25, 0.25), 4px 8px 24px rgba(43, 36, 25, 0.2); }
/* Bildwechsler (Cover, aufgeschlagen, Rückseite): Bühne im Hochformat 3:4 (Cover füllt die Breite), Bild eingepasst, Pfeile und Punkte darunter */
.buch__bilder {
  --swiper-pagination-bullet-size: 6px; --swiper-pagination-bullet-horizontal-gap: 4px;
  --swiper-pagination-bullet-inactive-color: currentColor; --swiper-pagination-bullet-inactive-opacity: 0.3;
  --swiper-pagination-color: currentColor;
  min-width: 0; width: 100%;   /* Swiper im Grid: sonst wächst die Spalte ins Unendliche */
}
/* eine Stufe spezifischer, weil swiper-bundle.min.css später lädt (.swiper-slide { display: block }) */
.buch__bilder .buch__bild { aspect-ratio: 3 / 4; display: flex; align-items: center; justify-content: center; padding: 18px; overflow: hidden; container-type: inline-size; }
.buch__bild picture { display: contents; }
/* Höhe über die Breite der Bühne begrenzen: max-height: 100% greift hier nicht (picture als contents),
   dann ragt ein Hochformat-Cover über Pfeile und Punkte. cqi ist die Innenbreite (ohne 2 × 18px Rand); Innenhöhe bei 3:4 = (cqi + 36px) × 4/3 − 36px. */
.buch__bild img { max-width: 100%; max-height: calc(100cqi * 4 / 3 + 12px); width: auto; height: auto; }
.buch__bild--offen img { box-shadow: none; }   /* Schatten steckt im Bild */
/* Link fürs Großbild: füllt die Bühne, Bild darin eingepasst; Lupe unten rechts (wie die Schnellansicht bei T&H) */
.buch__bild-gross { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; cursor: zoom-in; }
.buch__bild-lupe { position: absolute; right: 0; bottom: 0; display: grid; place-items: center; width: 40px; height: 40px; background: rgba(255, 255, 255, 0.92); color: var(--tinte); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15); }
.buch__bild-lupe svg { width: 22px; height: 22px; }
.buch__bild-gross:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.buch__bilder-steuerung { display: flex; align-items: center; justify-content: center; gap: 0.75rem; }
.buch__bilder .buch__bilder-punkte { position: static; width: auto; display: flex; }
.buch__bilder-pfeil { width: 40px; height: 40px; padding: 8px; border: 0; background: none; color: inherit; cursor: pointer; }
.buch__bilder-pfeil svg { width: 24px; height: 24px; display: block; }
.buch__bilder-pfeil.swiper-button-disabled { opacity: 0.3; cursor: default; }
.buch__bilder:not(.swiper-initialized) .buch__bilder-steuerung { display: none; }
.buch__titel { font-size: clamp(1.9rem, 1.3rem + 2vw, 2.9rem); max-width: 20ch; }
.buch__autor { font-size: 1.25em; color: var(--tinte-2); margin: -0.25em 0 0.75em; }
.buch__wertung { display: inline-flex; align-items: center; gap: 0.5em; text-decoration: none; color: var(--tinte-2); font-size: 0.95em; margin-bottom: 1.25em; }
.buch__wertung:hover { color: var(--tinte); text-decoration: underline; }
.buch__kauf { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; margin: 0 0 1.75em; }
.buch__preis { font-size: 1.6em; font-weight: 500; margin: 0; }
.buch__text { max-width: var(--mass); }
.buch__meta { display: grid; grid-template-columns: max-content 1fr; gap: 0.35em 1.5em; margin: 1.75em 0; padding: 1.25em 0; border-top: 1px solid var(--linie); border-bottom: 1px solid var(--linie); font-size: 0.95em; max-width: var(--mass); }
.buch__meta dt { color: var(--tinte-2); }
.buch__meta dd { margin: 0; }
@media (min-width: 760px) {
  .buchseite { grid-template-columns: minmax(240px, 340px) 1fr; gap: 4rem; align-items: start; }
  .buch__cover { position: sticky; top: 1.5rem; }
}

.sterne { display: inline-flex; gap: 1px; vertical-align: -0.15em; }
.sterne svg { width: 1.1em; height: 1.1em; fill: var(--gold); }
.sterne svg.leer { fill: none; stroke: var(--gold); stroke-width: 1.5; }

/* Autorenstimmen (Block stimmen): Reihe aus Kacheln (Swiper), Zitat oben, Person unten.
   Ohne JS: Kacheln zum Wischen nebeneinander, Texte ungekürzt. */
.stimmen__titel { max-width: none; }
.stimmen { margin-top: 1.75rem; }
.stimmen__liste { list-style: none; margin: 0; padding: 0; max-width: none; }
.stimmen:not(.stimmen--js) .stimmen__liste { overflow-x: auto; scroll-snap-type: x mandatory; gap: 16px; }
.stimmen:not(.stimmen--js) .stimme { width: 85%; flex: none; scroll-snap-align: start; }
@media (min-width: 700px) { .stimmen:not(.stimmen--js) .stimme { width: calc(50% - 12px); } }
@media (min-width: 1050px) { .stimmen:not(.stimmen--js) .stimme { width: calc(33.333% - 16px); } }
.stimmen:not(.stimmen--js) .stimmen__steuerung { display: none; }
.stimme { position: relative; height: auto; display: flex; flex-direction: column; margin: 0; padding: 2rem 1.75rem 1.5rem; background: var(--papier-2); }
.stimme::before { content: "\201C"; position: absolute; top: 0.9rem; right: 1.4rem; font-size: 4rem; line-height: 1; color: #c9c9c9; font-style: italic; }
.stimme__text { margin: 0 2.25rem 1.25rem 0; padding: 0; border: 0; font-style: normal; font-size: 1.05rem; line-height: 1.5; }
.stimme__text p { margin: 0 0 0.75em; max-width: none; }
.stimme__text p:last-child { margin-bottom: 0; }
.stimmen .stimme { height: auto; align-self: stretch; display: flex; }
.stimmen--js .stimme__text { max-height: 10.5em; overflow: hidden; }
.stimmen--js .stimme--lang:not(.stimme--offen) .stimme__text { -webkit-mask-image: linear-gradient(#000 70%, transparent); mask-image: linear-gradient(#000 70%, transparent); }
.stimmen--js .stimme--offen .stimme__text { max-height: none !important; }
.stimme__mehr { align-self: flex-start; margin: -0.6rem 0 1.25rem; padding: 0; border: 0; background: none; font: inherit; font-size: 0.9rem; color: var(--tinte-2); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.stimme__mehr:hover { color: var(--tinte); }
.stimme__person { display: flex; align-items: center; gap: 0.9rem; margin: auto 0 0; padding-top: 1.25rem; border-top: 1px solid var(--linie); }
.stimme__foto { width: 56px; height: 56px; flex: none; border-radius: 50%; object-fit: cover; }
.stimme__cover { flex: none; width: 42px; line-height: 0; }
.stimme__cover img { width: 100%; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18); }
.stimme__person figcaption { display: grid; gap: 0.15rem; line-height: 1.3; font-size: 0.9rem; min-width: 0; }
.stimme__name { font-weight: 600; font-size: 1rem; }
.stimme__name a { color: inherit; text-decoration: none; }
.stimme__name a:hover { text-decoration: underline; }
.stimme__buch { color: var(--tinte-2); }
.stimme__buch:hover { color: var(--tinte); }
.stimmen__steuerung { display: flex; align-items: center; justify-content: center; gap: 1.25rem; margin-top: 1.75rem; }
.stimmen__pfeil { width: 40px; height: 40px; padding: 8px; border: 0; background: none; color: var(--tinte); cursor: pointer; }
.stimmen__pfeil svg { width: 24px; height: 24px; }
.stimmen__pfeil.swiper-button-disabled { opacity: 0.25; cursor: default; }
.stimmen__pfeil.swiper-button-lock, .stimmen__punkte.swiper-pagination-lock { display: none; }
.stimmen__punkte { display: flex; gap: 0.5rem; width: auto !important; position: static !important; }
.stimmen__punkte .swiper-pagination-bullet { width: 8px; height: 8px; margin: 0 !important; background: var(--tinte); opacity: 0.25; }
.stimmen__punkte .swiper-pagination-bullet-active { opacity: 1; }

.teilen { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; font-size: 0.9rem; color: var(--tinte-2); margin: 0; padding: 0; list-style: none; }
.teilen a { text-decoration: none; padding: 0.2em 0.7em; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--linie); color: var(--bronze); }
.teilen a:hover { box-shadow: inset 0 0 0 1px var(--gold); color: var(--tinte); }
.teilen__titel { font-weight: 600; }
.teilen ~ .bestellbox { margin-top: 1.75em; }
.teilen__hinweis { font-size: 0.85rem; color: var(--tinte-2); margin: 0.5rem 0 0; }

.bewertungen { margin-top: var(--abstand); max-width: var(--mass); }
.bewertungen h2 { margin-top: 0; }
.buch__autor a { color: inherit; text-decoration-color: var(--linie); text-underline-offset: 0.2em; }
.buch__autor a:hover { text-decoration-color: currentColor; }
.buch__autor-text { display: none; }
.weitere { margin-top: var(--abstand); }
.weitere h2 { margin: 0; }
.weitere__alle { margin: 1.5rem 0 0; }
.weitere__alle + .weitere__alle { margin-top: 0.5rem; }
.bewertung { padding: 1.25em 0; border-top: 1px solid var(--linie); }
.bewertung__kopf { display: flex; flex-wrap: wrap; gap: 0.25em 1em; align-items: baseline; margin-bottom: 0.4em; }
.bewertung__kopf strong { font-weight: 600; }
.bewertung__kopf time { color: var(--tinte-2); font-size: 0.9em; }
.bewertung p:last-child { margin-bottom: 0; }
.bewertung-schreiben { border-top: 1px solid var(--linie); padding-top: 1.5em; margin-top: 0.5em; max-width: none; }
.bewertung-schreiben h3 { margin: 0 0 0.5rem; font-size: 1.15rem; font-weight: 600; }
.bewertung-schreiben__hinweis { margin: 0 0 1rem; font-size: 0.9em; color: var(--tinte-2); }
/* Sterne wie bei Shops üblich: klein, in einer Zeile neben der Beschriftung (legend per float im Fluss) */
.sterne-wahl { border: 0; padding: 0; margin: 0; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0.2em 0.75em; }
.sterne-wahl legend { float: left; font-weight: 500; font-size: 0.95rem; margin: 0; padding: 0; }
.sterne-wahl__gruppe { position: relative; display: inline-flex; flex-direction: row-reverse; }
.sterne-wahl input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.sterne-wahl label { font-size: 1.25rem; line-height: 1; color: #cfc6b8; cursor: pointer; padding: 0 0.04em; }
.sterne-wahl label:hover, .sterne-wahl label:hover ~ label, .sterne-wahl input:checked ~ label { color: var(--gold); }
.sterne-wahl input:focus-visible + label { outline: 3px solid var(--gold); outline-offset: 2px; border-radius: 3px; }
.sterne-wahl__text { position: absolute; left: -9999px; }

/* Bestellbox der Buchseite: Ausgabe + Preis, Händler-Kacheln (ISBN-Suche), Verlagsauslieferung (Direktbestellung) */
.bestellbox { width: 100%; background: var(--papier-2); padding: 1.5rem clamp(1rem, 3vw, 2rem) 1.75rem; margin: 0 0 1.75em; }
.bestellbox__titel { margin: 0 0 1rem; font-size: 1.35rem; font-weight: 400; }
.bestellbox__ausgabe { display: flex; align-items: center; gap: 0.75rem 1rem; flex-wrap: wrap; background: var(--papier); padding: 1rem 1.25rem; margin-bottom: 0.75rem; }
.bestellbox__format { font-weight: 600; font-size: 1.1rem; margin-right: auto; }
.bestellbox__neu { background: var(--gold); color: #fff; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; padding: 0.3em 0.6em; line-height: 1.2; }
.bestellbox__preis { font-weight: 600; font-size: 1.25rem; line-height: 1.2; text-align: right; }
.bestellbox__preis small { display: block; font-weight: 400; font-size: 0.7rem; color: var(--tinte-2); }
.bestellbox__haendler { list-style: none; margin: 0 0 0.75rem; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; max-width: none; }
.bestellbox__haendler li { margin: 0; }
.bestellbox__haendler a { display: flex; align-items: center; justify-content: center; height: 4.5rem; padding: 0.75rem 1.25rem; background: #fff; border: 1px solid #b5b5b5; transition: border-color 0.15s, box-shadow 0.15s; }
.bestellbox__haendler a:hover, .bestellbox__haendler a:focus-visible { border-color: var(--tinte); box-shadow: inset 0 0 0 1px var(--tinte); }
.bestellbox__haendler img { display: block; width: auto; max-width: 100%; max-height: 2.1rem; }
.bestellbox__verlag { background: #fff; border: 1px solid #b5b5b5; }
.bestellbox__verlag[open] { border-color: var(--tinte); }
.bestellbox__verlag summary { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.15em; min-height: 4.5rem; padding: 0.75rem 1.25rem; cursor: pointer; list-style: none; text-align: center; }
.bestellbox__verlag summary::-webkit-details-marker { display: none; }
.bestellbox__verlag summary:hover { box-shadow: inset 0 0 0 1px var(--tinte); }
.bestellbox__verlag-name { font-weight: 700; font-size: 1.15rem; letter-spacing: 0.01em; }
.bestellbox__verlag-text { font-size: 0.85rem; color: var(--tinte-2); }
.bestellformular { padding: 0.25rem 1.25rem 1.25rem; max-width: none; }
.bestellformular__hinweis { font-size: 0.9em; color: var(--tinte-2); margin: 0.5rem 0 1rem; }
@media (min-width: 1100px) { .bestellbox__haendler { grid-template-columns: repeat(4, minmax(0, 1fr)); } .bestellbox__haendler a { padding: 0.75rem; } }

/* ---------- Bücherregal (Shop, Genre, Buchliste) ---------- */

.regal { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 2.5rem 1.5rem; max-width: none; }
.regal a { text-decoration: none; color: inherit; display: block; }
.regal__cover { display: flex; align-items: flex-end; justify-content: center; height: 200px; padding: 0 6px 10px; border-bottom: 2px solid var(--gold); margin-bottom: 0.75rem; }
.regal__cover img { max-height: 100%; min-height: 0; min-width: 0; width: auto; max-width: 100%; box-shadow: 0 1px 2px rgba(43, 36, 25, 0.25), 2px 4px 12px rgba(43, 36, 25, 0.18); transition: transform 0.15s ease; }
.regal a:hover img { transform: translateY(-3px); }
.regal__titel { display: block; font-weight: 500; line-height: 1.3; }
.regal__innen { display: none; }   /* aufgeschlagenes Buch nur in „thames“ */
.regal a:hover .regal__titel { color: var(--bronze); }
.regal__preis { display: block; color: var(--tinte-2); font-size: 0.9em; margin-top: 0.2em; }
.regal__wertung { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35em; color: var(--tinte-2); font-size: 0.85em; margin-top: 0.2em; }
@media (min-width: 700px) { .regal { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); } .regal__cover { height: 250px; } }
@media (prefers-reduced-motion: reduce) { .regal__cover img { transition: none; } .regal a:hover img { transform: none; } }

.genres { list-style: none; margin: 0 0 1rem; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; max-width: none; }
.genres a { text-decoration: none; padding: 0.3em 0.85em; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--linie); color: var(--tinte); font-size: 0.95rem; }
.genres a:hover { box-shadow: inset 0 0 0 1px var(--gold); }
.genres a[aria-current] { background: var(--tinte); color: #fff; box-shadow: none; }
.genres__zahl { color: var(--tinte-2); font-size: 0.85em; margin-left: 0.3em; }
.genres a[aria-current] .genres__zahl { color: #d9c8a5; }
/* Bücherübersicht (teile/shop.njk): Grundform = eine Reihe Kästchen über dem Regal wie bisher; Gruppen, Leiste,
   Sortierung und Autorzeile nur im Stil „thames“ (stil-thames.css) */
.genres-filter { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0 0 1rem; }
.genres-filter .filtergruppe, .genres-filter .genres { display: contents; }
.filtergruppe__kopf, .shop__leiste, .regal__titel-kurz, .regal__autor { display: none; }

/* ---------- Blöcke ---------- */

.cta { margin: 1.5em 0; }

/* Instagram-Beiträge sind Hochformat 4:5 – so bleiben sie vollständig (quadratisch schnitt Kopfzeilen ab) */
.insta { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; max-width: none; }
.insta a { display: block; aspect-ratio: 4 / 5; overflow: hidden; background: var(--papier-2); border-radius: 3px; }
.insta img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.insta a:hover img, .insta a:focus-visible img { transform: scale(1.04); }
.insta__profil { margin-top: 1rem; font-size: 0.95em; }
@media (min-width: 600px) { .insta { gap: 1rem; } }
@media (min-width: 900px) { .insta { grid-template-columns: repeat(6, 1fr); } }
@media (prefers-reduced-motion: reduce) { .insta img { transition: none; } }
/* Karussell (Block instagram karussell="ja"): Swiper braucht Flex statt Raster; ohne JS seitlich wischbar */
.insta-karussell { margin-top: 1.5rem; }
.insta-karussell .insta { display: flex; margin: 0; }
.insta-karussell--js .insta.swiper-wrapper { gap: 0; }  /* Abstand setzt Swiper (spaceBetween); stärker als der gap der Stilvarianten */
.insta-karussell:not(.insta-karussell--js) .insta { overflow-x: auto; scroll-snap-type: x mandatory; gap: 0.5rem; }
.insta-karussell:not(.insta-karussell--js) .insta li { width: calc(33.333% - 0.34rem); flex: none; scroll-snap-align: start; }
@media (min-width: 600px) { .insta-karussell:not(.insta-karussell--js) .insta { gap: 1rem; } .insta-karussell:not(.insta-karussell--js) .insta li { width: calc(25% - 0.75rem); } }
@media (min-width: 900px) { .insta-karussell:not(.insta-karussell--js) .insta li { width: calc(16.666% - 0.84rem); } }
.insta-karussell:not(.insta-karussell--js) .stimmen__steuerung { display: none; }
/* Feste Kachelliste (Block instagram-auswahl, z. B. die neuesten Kinderbuch-Beiträge) */
.insta--liste a { position: relative; }
.insta__video { position: absolute; top: 0.5rem; right: 0.5rem; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: rgba(0, 0, 0, 0.55); color: #fff; font-size: 0.7rem; display: grid; place-items: center; padding-left: 0.1em; }

.countdown { display: flex; flex-wrap: wrap; gap: 1.5rem 2.5rem; margin-bottom: 1.5rem; font-variant-numeric: tabular-nums; }
.countdown__teil { display: flex; flex-direction: column; min-width: 4ch; }
.countdown__zahl { font-size: clamp(2.4rem, 1.6rem + 3.5vw, 4.5rem); font-weight: 300; line-height: 1; color: var(--bronze); }
.countdown__einheit { color: var(--tinte-2); font-size: 0.95rem; margin-top: 0.3em; }
.countdown-text h3 { font-weight: 500; font-size: 1.3rem; margin: 0 0 0.3em; max-width: 40ch; }

/* Autorenraster: Fotos füllen die Kachel (oben bündig beschnitten), Cover bleiben unbeschnitten.
   Bild absolut statt height:100% – Safari rechnet Höhen gegen aspect-ratio-Kästen falsch. */
.beitragsraster__bild--foto, .seite--autoren .beitragsraster__bild--foto { --luft: 0%; overflow: hidden; }
.beitragsraster__bild--foto img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; object-fit: cover; object-position: 50% 20%; box-shadow: none; }
.beitragsraster__buch { display: block; color: var(--tinte-2); font-size: 0.9em; margin-top: 0.2em; font-style: italic; }

/* ---------- Autorenporträt (Beiträge der Kategorie „Autoren“) ---------- */

.portrait { max-width: 1040px; margin: 0 auto; }
.portrait__kopf { display: grid; gap: 1.5rem 3.5rem; align-items: center; margin-bottom: var(--abstand); }
@media (min-width: 760px) { .portrait__kopf { grid-template-columns: minmax(0, 400px) 1fr; } }
.portrait__bild { margin: 0; }
.portrait__bild img { display: block; width: 100%; height: auto; border-radius: 4px; box-shadow: 0 1px 2px rgb(40 30 20 / 0.12), 0 14px 32px -14px rgb(40 30 20 / 0.4); }
.portrait__bild--cover { background: var(--papier-2); border-radius: 4px; padding: 10% 18%; }
.portrait__bild--cover img { border-radius: 0; box-shadow: 0 1px 2px rgba(43, 36, 25, 0.25), 3px 8px 22px rgba(43, 36, 25, 0.25); }
@media (max-width: 759px) { .portrait__bild { max-width: 420px; } .portrait__bild--cover { padding: 8% 22%; } }
.portrait__marke { margin: 0 0 0.75rem; font-size: 0.8em; letter-spacing: 0.12em; text-transform: uppercase; }
.portrait__marke a { color: var(--gold); text-decoration: none; }
.portrait__marke a:hover { color: var(--bronze); }
.portrait__titel h1 { max-width: 20ch; font-size: clamp(1.9rem, 1.4rem + 2vw, 2.9rem); line-height: 1.12; margin-bottom: 0.6rem; }
.portrait__titel .beitrag__meta { margin: 0; }
.portrait__sprung { margin: 1.75rem 0 0; }

.portrait__text, .portrait__videos, .portrait__buecher, .portrait .kommentare { max-width: var(--mass); margin-left: auto; margin-right: auto; }
.portrait__text h2, .portrait__text h3, .portrait__text h4 { font-size: 1.4rem; line-height: 1.25; max-width: none; margin: 2em 0 0.6em; }
.portrait__text > :first-child { margin-top: 0; }
.portrait__text :is(h2, h3, h4) + :is(h2, h3, h4) { margin-top: 0.5em; }
.portrait__text hr { border: 0; width: 64px; height: 2px; background: var(--gold); margin: 2.75em auto; }
.portrait__text figure { max-width: 420px; margin: 2em auto; }
.portrait__text figure img { display: block; width: 100%; height: auto; }

.portrait__videos, .portrait__buecher { margin-top: var(--abstand); }
.portrait__videos h2, .portrait__buecher h2 { font-size: 1.4rem; max-width: none; margin-bottom: 1.25rem; padding-top: 1.25rem; border-top: 1px solid var(--linie); }
.portrait .portrait__videos { max-width: 920px; }
.portrait__videos h2 { max-width: var(--mass); }
.videos { list-style: none; margin: 0; padding: 0; max-width: none; display: grid; gap: 1.25rem 1rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 700px) { .videos { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.video { display: block; color: inherit; text-decoration: none; }
.video__bild, .video iframe { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: 4px; overflow: hidden; background: var(--tinte); }
.video__bild img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.2s ease; }
.video__start { position: absolute; inset: 0; margin: auto; width: clamp(40px, 12vw, 56px); height: clamp(40px, 12vw, 56px); border-radius: 50%; display: flex; align-items: center; justify-content: center; padding-left: 3px; background: rgb(255 255 255 / 0.92); color: var(--tinte); box-shadow: 0 4px 14px rgb(0 0 0 / 0.3); }
.video[href]:hover .video__bild img { transform: scale(1.04); }
.video[href]:hover .video__start { background: var(--gold); color: #fff; }
.video__titel { display: block; margin-top: 0.5rem; font-weight: 500; }
.videos__hinweis { font-size: 0.85em; color: var(--tinte-2); margin: 1rem 0 0; }
@media (prefers-reduced-motion: reduce) { .video__bild img { transition: none; } .video[href]:hover .video__bild img { transform: none; } }

.buchkarte { display: grid; grid-template-columns: 110px 1fr; gap: 1.25rem; align-items: start; padding: 1.25rem; background: var(--papier-2); border-radius: 4px; }
.buchkarte + .buchkarte { margin-top: 1rem; }
@media (min-width: 600px) { .buchkarte { grid-template-columns: 150px 1fr; gap: 2rem; padding: 2rem; } }
.buchkarte__cover { display: block; line-height: 0; }
.buchkarte__cover img { display: block; width: 100%; height: auto; box-shadow: 0 1px 2px rgba(43, 36, 25, 0.25), 2px 6px 16px rgba(43, 36, 25, 0.22); transition: transform 0.15s ease; }
.buchkarte__cover:hover img { transform: translateY(-3px); }
.buchkarte h3 { font-size: 1.3rem; line-height: 1.25; margin: 0 0 0.25rem; max-width: none; }
.buchkarte h3 a { color: inherit; text-decoration: none; }
.buchkarte h3 a:hover { color: var(--bronze); }
.buchkarte__autor { margin: 0 0 0.6rem; color: var(--tinte-2); }
.buchkarte__wertung { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35em; margin: 0 0 0.6rem; font-size: 0.85em; color: var(--tinte-2); }
.buchkarte__ausgabe { margin: 0 0 1rem; font-size: 0.85em; color: var(--tinte-2); line-height: 1.5; }
.buchkarte__kauf { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.25rem; margin: 0; }
.buchkarte__preis { font-size: 1.15rem; font-weight: 500; }
@media (prefers-reduced-motion: reduce) { .buchkarte__cover img { transition: none; } .buchkarte__cover:hover img { transform: none; } }

.block { border: 2px dashed #c33; background: #fff6f6; padding: 8px 12px; margin: 16px 0; color: #a00; font-size: 14px; max-width: var(--mass); }

.beitrag__meta { color: var(--tinte-2); font-size: 0.95em; }
.beitrag__tags { font-size: 0.95em; color: var(--tinte-2); margin-top: 2em; }
.kommentare { margin-top: var(--abstand); max-width: var(--mass); }

/* ---------- Suche, 404 ---------- */

.suchseite, .fehlerseite { max-width: var(--mass); margin: 0 auto; }
.suchfeld label { display: block; font-weight: 500; margin-bottom: 0.35rem; }
.suchfeld__zeile { display: flex; gap: 0.5rem; }
.suchfeld input { flex: 1; min-width: 0; font: inherit; padding: 0.55em 0.75em; border: 1.5px solid var(--linie); border-radius: 4px; }
.suchfeld input:focus { outline: 2px solid var(--gold); outline-offset: 1px; }
.fehlerseite__wege { margin-top: 2rem; }
.suchseite__ui {
  --pagefind-ui-scale: 0.9; --pagefind-ui-primary: var(--bronze); --pagefind-ui-text: var(--tinte);
  --pagefind-ui-background: var(--papier); --pagefind-ui-border: var(--linie); --pagefind-ui-tag: var(--papier-2);
  --pagefind-ui-border-width: 1.5px; --pagefind-ui-border-radius: 4px; --pagefind-ui-font: var(--schrift);
}
.suchseite__hinweis { margin: 1rem 0 1.25rem; font-weight: 600; }
.suchseite__ui .suchseite__hinweis + .pagefind-ui__message { display: none; }

/* Länderwahl: aktuelles Land ist kein Link; Variante im Fuß */
.sprachwahl span[aria-current] { display: inline-block; padding: 0.3em 0.85em; border-radius: 999px; background: var(--tinte); color: #fff; font-size: 0.95rem; }
.fuss__laender { display: grid; gap: 0.4rem; }
.sprachwahl--fuss { gap: 0.35rem; }
.sprachwahl--fuss a, .sprachwahl--fuss span[aria-current] { display: inline-block; font-size: 0.85rem; line-height: 1.4; padding: 0.2em 0.7em; }
.fuss .sprachwahl--fuss a { color: #e9e2d6; box-shadow: inset 0 0 0 1px rgba(233, 226, 214, 0.45); }
.fuss .sprachwahl--fuss a:hover { color: #fff; box-shadow: inset 0 0 0 1px #fff; }
.fuss .sprachwahl--fuss span[aria-current] { background: #e9e2d6; color: var(--bronze-tief); }