@font-face { font-family: "Anton"; src: url("/assets/verlag/fonts/anton.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Source Sans 3"; src: url("/assets/verlag/fonts/sourcesans3.woff2") format("woff2");
  font-weight: 200 900; font-display: swap; }
:root { --ink: #1c1a24; --paper: #f7f2ea; --karte: #fffdf9; --rot: #a51c24; --gold: #b8892f;
  --grau: #6b6460; --linie: #e4dccf; --r: 14px; }
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: "Source Sans 3", system-ui, sans-serif; color: var(--ink); background: var(--paper);
  font-size: 18px; line-height: 1.55; -webkit-font-smoothing: antialiased; }
a { color: inherit; }
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 20px; }
header.kopf { border-bottom: 1px solid var(--linie); background: var(--paper); position: sticky; top: 0; z-index: 5; }
header.kopf .wrap { display: flex; align-items: center; justify-content: space-between; height: 64px; }
.marke { font-family: "Anton", sans-serif; font-size: 28px; letter-spacing: .5px; text-decoration: none; }
.marke span { color: var(--rot); }
nav a { text-decoration: none; margin-left: 22px; font-weight: 600; font-size: 16px; color: var(--grau); }
nav a:hover { color: var(--ink); }
.held { padding: 72px 0 56px; }
.held h1 { font-family: "Anton", sans-serif; font-weight: 400; font-size: clamp(44px, 7vw, 86px); line-height: 1.02;
  letter-spacing: -.5px; max-width: 14ch; }
.held h1 em { font-style: normal; color: var(--rot); }
.held p { font-size: 21px; color: #3b3640; max-width: 46ch; margin-top: 20px; }
.knoepfe { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.knopf { display: inline-block; padding: 13px 22px; border-radius: 999px; font-weight: 700; text-decoration: none;
  font-size: 16px; border: 2px solid var(--ink); }
.knopf.voll { background: var(--ink); color: var(--paper); }
.reihe-band { display: flex; gap: 14px; margin-top: 44px; overflow: hidden; height: 170px; }
.reihe-band img { height: 170px; border-radius: 4px; box-shadow: 0 8px 20px rgba(28,26,36,.18); }
section.block { padding: 56px 0; border-top: 1px solid var(--linie); }
.kopfzeile { display: flex; justify-content: space-between; align-items: end; gap: 20px; flex-wrap: wrap; margin-bottom: 28px; }
.kopfzeile h2 { font-family: "Anton", sans-serif; font-weight: 400; font-size: clamp(32px, 4.5vw, 46px); line-height: 1.05; }
.kopfzeile p { color: var(--grau); max-width: 52ch; margin-top: 8px; }
.raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 26px 22px; }
.buch { text-decoration: none; display: flex; flex-direction: column; }
.buch .cover { aspect-ratio: 2 / 3; border-radius: 6px; overflow: hidden; background: #e9e2d6;
  box-shadow: 0 10px 24px rgba(28,26,36,.16); transition: transform .2s ease; }
.buch .cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
a.buch:hover .cover { transform: translateY(-4px); }
.buch .t { font-weight: 700; font-size: 16px; line-height: 1.3; margin-top: 12px; }
.buch .h { font-size: 14px; color: var(--grau); margin-top: 4px; }
.buch .h b { color: var(--rot); font-weight: 700; }
.extras { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; }
.extra { background: var(--karte); border: 1px solid var(--linie); border-radius: var(--r); padding: 24px;
  text-decoration: none; display: flex; gap: 18px; align-items: center; }
.extra img { width: 74px; border-radius: 4px; box-shadow: 0 6px 14px rgba(28,26,36,.15); }
.extra b { display: block; font-size: 19px; }
.extra span { color: var(--grau); font-size: 15px; }
.extra:hover { border-color: var(--ink); }
.hinweis-qr { margin-top: 18px; color: var(--grau); font-size: 15px; }
footer { border-top: 1px solid var(--linie); padding: 34px 0 48px; color: var(--grau); font-size: 15px; }
footer .wrap { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
footer a { margin-left: 18px; }
.text { max-width: 760px; padding: 48px 0 64px; }
.text h1 { font-family: "Anton", sans-serif; font-weight: 400; font-size: 46px; margin-bottom: 18px; }
.text h2 { font-size: 21px; margin: 28px 0 8px; }
.text p, .text li { margin-bottom: 10px; }
.text ul { padding-left: 20px; }
@media (max-width: 640px) {
  body { font-size: 17px; }
  nav a { margin-left: 14px; font-size: 15px; }
  .held { padding: 44px 0 36px; }
  .reihe-band { height: 120px; } .reihe-band img { height: 120px; }
  .raster { grid-template-columns: repeat(2, 1fr); gap: 22px 16px; }
  footer a { margin-left: 0; margin-right: 16px; }
}