/* Nur index.html lädt diese statischen Verfeinerungen.
   Keine Regeln für Buch-Transformationen, Hover, Klick oder Animations-Layer. */
.hero {
  padding-top: clamp(32px, 5vw, 68px);
}
.hero h1 {
  max-width: 900px;
  margin-bottom: 28px;
  font-size: clamp(2.65rem, 4.8vw, 4.25rem);
  font-weight: 400;
  line-height: 1.16;
  letter-spacing: -.025em;
  text-align: center;
  color: #392e29;
}
.hero .intro {
  max-width: 720px;
  margin: 0 auto clamp(38px, 5vw, 64px);
  font-size: clamp(1rem, 1.5vw, 1.15rem);
  line-height: 1.8;
  color: #62574f;
  text-align: center;
  text-wrap: pretty;
}
.hero .desktop-break { display: none; }
.hero-art {
  max-width: 1120px;
  margin-inline: auto;
  border-radius: 20px;
  box-shadow: 0 -12px 42px #fff0cc90, 0 0 58px #f5d4b460, 0 18px 44px #76564c24;
}
.books {
  padding-top: clamp(44px, 6vw, 76px);
}
.books h2, .ritual h2, .section-intro h2, .share h2 {
  font-family: var(--serif);
  font-size: clamp(1.85rem, 3vw, 2.6rem);
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: -.02em;
  color: #392e29;
  text-align: center;
  text-wrap: balance;
  margin-bottom: 20px;
}
.books > p {
  max-width: 650px;
  margin: 0 auto 40px;
  font-size: 1.075rem;
  line-height: 1.75;
  color: #62574f;
  text-align: center;
}
.book-grid {
  max-width: 1120px;
  margin-inline: auto;
  gap: clamp(24px, 3.3vw, 44px);
  align-items: start;
}
.ritual {
  width: min(740px, calc(100% - 48px));
  padding-top: clamp(72px, 8vw, 112px);
  font-size: 1.0625rem;
  line-height: 1.85;
  color: #574c45;
}
.ritual h2 { margin-bottom: 32px; }
.ritual p { margin-bottom: 24px; text-wrap: pretty; }
.ritual blockquote {
  margin: 30px 0;
  padding: 8px 14px;
  text-align: center;
  font-family: var(--serif);
  font-size: 1.2rem;
  line-height: 1.8;
  color: #795853;
}
.ritual p:last-child {
  margin-bottom: 0;
  text-align: center;
}
.preview { padding-top: clamp(72px, 8vw, 108px); }
.section-intro {
  width: min(740px, 100%);
  text-align: center;
  margin-bottom: 46px;
}
.section-intro p { font-size: 1.0625rem; line-height: 1.8; color: #62574f; }
.story-grid { gap: clamp(26px, 3.5vw, 48px); align-items: stretch; }
.story > img, .story > img.portrait {
  width: 100%; height: auto; aspect-ratio: auto;
  object-fit: initial;
  background: transparent;
  border-radius: 6px;
  box-shadow: 0 5px 14px #50644726;
  margin-bottom: 25px;
}
.story h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.4rem, 2vw, 1.65rem);
  line-height: 1.35;
  text-align: center;
  color: #392e29;
  margin-bottom: 20px;
}
.story p {
  font-size: 1rem;
  line-height: 1.8;
  color: #574c45;
  margin-bottom: 28px;
  text-wrap: pretty;
}
.story .listen { align-items: stretch; }
.story .listen small { text-align: center; line-height: 1.6; }
.share {
  width: min(800px, calc(100% - 48px));
  margin-top: clamp(72px, 9vw, 120px);
  padding: clamp(40px, 5vw, 64px) 20px clamp(64px, 7vw, 96px);
  border-top: 1px solid #e4d8ca;
  text-align: center;
  font-size: 1.0625rem;
  line-height: 1.85;
  color: #574c45;
}
.share p { max-width: 680px; margin: 0 auto 24px; text-wrap: pretty; }
.share p:last-child { margin-bottom: 0; color: #795853; }
.support-qr-code { display: block; width: min(280px, 100%); height: auto; margin: 32px auto 0; }
@media (max-width: 700px) {
  .hero h1 { margin-bottom: 24px; }
  .hero-art { border-radius: 12px; }
  .books > p { font-size: 1rem; margin-bottom: 30px; }
  .book-grid { gap: 30px 22px; }
  .ritual { width: calc(100% - 40px); font-size: 1rem; }
  .ritual blockquote { padding-inline: 0; font-size: 1.12rem; }
  .section-intro { margin-bottom: 34px; }
  .story-grid { gap: 56px; }
  .story { width: 100%; }
  .story h3 { font-size: 1.5rem; }
  .share { width: calc(100% - 40px); padding-inline: 0; font-size: 1rem; }
}

/* Zarte, statische Abschnittsfarben. Keine Ebenen über den Büchern. */
.hero, .books, .ritual, .preview, .share {
  position: relative;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0 min(-16px, -2vw);
  z-index: -1;
  pointer-events: none;
  border-radius: 40px;
}
/* Gleich breite Farbflächen; die Inhaltsbreiten bleiben für alle Bilder erhalten. */
#inhalt > .home-lower-world > section.books,
#inhalt > .home-lower-world > section.ritual,
#inhalt > .home-lower-world > section.preview,
#inhalt > .home-lower-world > section.share {
  padding-top: clamp(36px, 4.5vw, 60px);
  padding-bottom: clamp(36px, 4.5vw, 60px);
  margin-top: calc(clamp(24px, 3vw, 40px) + 24px);
  border-radius: 28px;
}
#inhalt > .home-lower-world > section.books { --section-color: #FFF1D6; background: transparent; }
#inhalt > .home-lower-world > section.ritual { --section-color: #FBE4E8; background: transparent; }
#inhalt > .home-lower-world > section.preview { --section-color: #E4F2E6; background: transparent; }
#inhalt > .home-lower-world > section.share { --section-color: #FBE3D2; background: transparent; }
#inhalt > .home-lower-world > section.share { border-top-color: transparent; }
@media (max-width: 1000px) {
}
@media (max-width: 700px) {
}
/* Die Flächen liegen hinter dem Inhalt, ohne neue Transformationskontexte. */
main { position: relative; z-index: 0; }
.hero::before {
  background:
    radial-gradient(circle at 13% 11%, #fffbea 0 1px, #ffe4a975 2px, transparent 8px),
    radial-gradient(circle at 85% 17%, #fffbea 0 1px, #ffe4a985 2px, transparent 9px),
    radial-gradient(circle at 8% 30%, #fff8df 0 1px, #ffda9875 3px, transparent 12px),
    radial-gradient(circle at 93% 34%, #fffbea 0 1px, #ffe4a965 3px, transparent 11px),
    radial-gradient(ellipse 65% 30% at 50% 6%, #fff9decc, transparent 80%),
    radial-gradient(ellipse 45% 45% at 0% 20%, #c1b1cd50, transparent 85%),
    radial-gradient(ellipse 45% 40% at 100% 18%, #aaadc640, transparent 85%);
}
.share::after {
  content: "✧";
  position: absolute;
  top: 24px; right: 5%;
  color: #b79453;
  font-family: Georgia, serif;
  font-size: 22px;
  opacity: .19;
  pointer-events: none;
  text-shadow: 0 0 12px #e8c98d70;
}
.share::after { top: 20px; right: 12%; font-size: 18px; }
.preview .listen { gap: 10px; }
.preview .listen button, .preview .listen a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%; min-width: 0; min-height: 54px;
  padding: 12px 14px;
  border: 1px solid #b58d813d;
  border-radius: 20px;
  gap: 10px;
  background: linear-gradient(180deg, #faece9, #eed9d5);
  color: #62473f;
  font-size: .95rem;
  font-weight: 500;
  line-height: 1.5;
  text-align: center;
  text-decoration: none;
  box-shadow: inset 0 1px 0 #ffffffb0, 0 4px 12px #75544412;
  transition: background-color .25s ease, box-shadow .25s ease, transform .25s ease;
}
.preview .listen button:disabled, .preview .listen .preview-connected-link {
  background: linear-gradient(180deg, #faece9, #eed9d5);
  color: #78625a;
  opacity: 1;
}
@media (hover: hover) {
  .preview .listen a:hover, .preview .listen button:not(:disabled):hover {
    background: #fff1ec;
    box-shadow: inset 0 1px 0 #fff, 0 7px 18px #a6746529;
    transform: translateY(-2px);
  }
}
.preview .listen small { margin-top: 3px; }
@media (prefers-reduced-motion: reduce) {
  .preview .listen a, .preview .listen button { transition: none; }
  .preview .listen a:hover { transform: none; }
}
@media (max-width: 700px) {
  .hero::before {
    inset-inline: -12px;
    border-radius: 24px;
  }
}

/* Dekorative Symbole: Beschriftungen und Ziele bleiben unverändert. */
.preview .listen button::before, .preview .listen a::before {
  content: ""; width: 20px; height: 20px; flex: 0 0 20px;
  background-color: currentColor;
  -webkit-mask: var(--platform-icon) center / contain no-repeat;
  mask: var(--platform-icon) center / contain no-repeat;
  opacity: .85;
}
.preview .listen button:first-child, .preview .listen a:first-child { --platform-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%2210%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%221.5%22%2F%3E%3Cpath%20d%3D%22M6%209c4-1.5%208-1%2012%201M7%2012c3-1%207-.7%2010%201M8%2015c2-.6%205-.3%208%201%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E"); }
.preview .listen button:nth-child(2), .preview .listen a:nth-child(2) { --platform-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Crect%20x%3D%222%22%20y%3D%225%22%20width%3D%2220%22%20height%3D%2214%22%20rx%3D%225%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%221.6%22%2F%3E%3Cpath%20d%3D%22m10%209%206%203-6%203Z%22%20fill%3D%22currentColor%22%2F%3E%3C%2Fsvg%3E"); }
.preview .listen a[href*="music.amazon.com"], .preview .listen a[href*="music.amazon.de"] { --platform-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M10%2016V6l9-2v10M10%209l9-2%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%2F%3E%3Cellipse%20cx%3D%227.5%22%20cy%3D%2216.5%22%20rx%3D%222.5%22%20ry%3D%222%22%20fill%3D%22currentColor%22%2F%3E%3Cellipse%20cx%3D%2216.5%22%20cy%3D%2214.5%22%20rx%3D%222.5%22%20ry%3D%222%22%20fill%3D%22currentColor%22%2F%3E%3Cpath%20d%3D%22M4%2021c5%202%2011%201%2015-1%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%221.3%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E"); }

/* Hero-Lichter: ausschließlich absolute, nicht interaktive Overlays. */
.hero h1, .hero-art { position: relative; }
.hero h1 { text-shadow: 0 3px 12px #71504326, 0 -1px 1px #fffaf2b0, 0 0 24px #fff0cfa0; }
.hero h1::before {
  content: ""; position: absolute; inset: -32px -3% -20px;
  background: radial-gradient(ellipse, #fff8de80 0%, #ffe7c940 42%, transparent 78%);
  z-index: -1; pointer-events: none;
}
.hero-heading-lights, .hero-image-lights {
  position: absolute; inset: 0; pointer-events: none;
}
.hero-heading-star {
  position: absolute; left: var(--x); top: var(--y);
  width: calc(var(--size) * 1.65); height: calc(var(--size) * 1.65);
  background: none;
  animation: hero-star-pulse calc(var(--pulse) * .7) var(--delay) ease-in-out infinite alternate;
}
.hero-heading-star::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(135deg, #e1bb76, #fff6d9 46%, #e9c88e 80%);
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%3E%3Cpath%20fill%3D%22white%22%20d%3D%22M50%202C53%2038%2062%2047%2098%2050C62%2053%2053%2062%2050%2098C47%2062%2038%2053%202%2050C38%2047%2047%2038%2050%202Z%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%3E%3Cpath%20fill%3D%22white%22%20d%3D%22M50%202C53%2038%2062%2047%2098%2050C62%2053%2053%2062%2050%2098C47%2062%2038%2053%202%2050C38%2047%2047%2038%2050%202Z%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
  transform: rotate(var(--turn)) scaleY(var(--stretch));
}
.hero-image-light {
  position: absolute; left: var(--x); top: var(--y);
  transform: translate(-50%, -50%); pointer-events: none;
  animation: hero-lantern-glow calc(var(--pulse) * .32) var(--delay) ease-in-out infinite alternate;
}
.hero-lantern {
  animation-name: hero-lantern-soft;
  width: 8.5%; aspect-ratio: 1;
  background: radial-gradient(ellipse, #fff6cfb3 0%, #ffe2a08c 12%, #ffd06b66 28%, #ffb83e33 48%, transparent 74%);
  filter: drop-shadow(0 0 12px #ffc35b99);
  mix-blend-mode: screen;
}
.hero-sky-star {
  width: 1.9%; aspect-ratio: 1;
  animation-name: hero-sky-twinkle;
  background: radial-gradient(ellipse 12% 50%, #fff9db, transparent),
    radial-gradient(ellipse 50% 12%, #fff9db, transparent);
  filter: brightness(1.5) drop-shadow(0 0 8px #fff7db) drop-shadow(0 0 18px #ffe099cc);
}
.hero-firefly {
  width: 1.3%; aspect-ratio: 1;
  background: radial-gradient(circle, #fff1bdb0, #ffd16a60 25%, transparent 70%);
  animation: none;
}
.hero-meadow-fireflies{position:absolute;inset:0;z-index:2;pointer-events:none}
.hero-meadow-firefly{position:absolute;left:var(--x);top:var(--y);width:var(--size);aspect-ratio:1;background:radial-gradient(circle,#fff6c7 0 12%,#ffe187d9 23%,#ffc74f82 44%,transparent 72%);pointer-events:none;transform:translate(-50%,-50%);animation:hero-meadow-firefly var(--duration) var(--delay) ease-in-out infinite}
.hero-meadow-firefly:nth-child(1){animation-duration:6.6s}.hero-meadow-firefly:nth-child(2){animation-duration:7.7s}.hero-meadow-firefly:nth-child(3){animation-duration:7.2s}.hero-meadow-firefly:nth-child(4){animation-duration:8.2s}.hero-meadow-firefly:nth-child(5){animation-duration:6.9s}.hero-meadow-firefly:nth-child(6){animation-duration:8.8s}.hero-meadow-firefly:nth-child(7){animation-duration:7.5s}.hero-meadow-firefly:nth-child(8){animation-duration:8s}
@keyframes hero-meadow-firefly{0%,100%{opacity:.56;filter:brightness(1.05);transform:translate(-50%,-50%)}30%{opacity:1;filter:brightness(1.55);transform:translate(calc(-50% + var(--drift-x) + var(--drift-x) + var(--drift-x)),calc(-50% + var(--drift-y) + var(--drift-y) + var(--drift-y)))}62%{opacity:.76;filter:brightness(1.2);transform:translate(calc(-50% - var(--drift-x) - var(--drift-x)),calc(-50% - var(--drift-y) - var(--drift-y)))} }
@keyframes hero-star-pulse {
  from {
    opacity: calc(var(--low) + .12); transform: translate(-50%, -50%) scale(.92);
    filter: brightness(1.1) drop-shadow(0 0 3px #e4c48aa0) drop-shadow(0 0 7px #f1d9a870);
  }
  to {
    opacity: min(1, calc(var(--peak) + .12)); transform: translate(-50%, -50%) scale(1.1);
    filter: brightness(1.45) drop-shadow(0 0 4px #fff0c8) drop-shadow(0 0 11px #edc774cc) drop-shadow(0 0 17px #f3d59b70);
  }
}
@keyframes hero-lantern-glow {
  0% { opacity: .72; filter: brightness(1.1) drop-shadow(0 0 8px #ffc35b80); }
  35% { opacity: 1; filter: brightness(1.5) drop-shadow(0 0 18px #ffd079bb); }
  60% { opacity: .8; filter: brightness(1.2) drop-shadow(0 0 11px #ffc35b99); }
  100% { opacity: 1; filter: brightness(1.65) drop-shadow(0 0 20px #ffd989cc); }
}
@keyframes hero-sky-twinkle {
  from { opacity: .7; transform: translate(-50%, -50%) scale(.85); filter: brightness(1.2) drop-shadow(0 0 6px #ffe6aacc); }
  to { opacity: 1; transform: translate(-50%, -50%) scale(1.35); filter: brightness(1.8) drop-shadow(0 0 10px #fffbe7) drop-shadow(0 0 23px #ffd879dd); }
}
@media (max-width: 700px) {
  .hero-heading-star { width: calc(var(--size) * 1.3); height: calc(var(--size) * 1.3); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-heading-star { animation: none; opacity: .8; transform: translate(-50%, -50%); }
  .hero-image-light { animation: none; opacity: .65; }
  .hero-meadow-firefly { animation: none; }
}

/* Zwei lockere Sternengruppen außerhalb der Schrift; keine runden Lichtflächen. */
.hero-heading-lights {
  left: 50%; right: auto;
  width: min(1120px, calc(100vw - 58px));
  transform: translateX(-50%);
}
@media (max-width: 1000px) {
  .hero-heading-lights { width: calc(100vw - 42px); }
  .hero-heading-star:nth-child(-n+5) { left: calc(var(--x) * .3); }
  .hero-heading-star:nth-child(n+6) { left: calc(100% - (100% - var(--x)) * .3); }
}
@media (max-width: 700px) {
  .hero-heading-lights { top: -20px; bottom: -6px; }
  .hero-heading-star { width: calc(var(--size) * 1.0); height: calc(var(--size) * 1.0); }
  .hero-heading-star:nth-child(-n+5) { left: calc(var(--x) * .16); top: calc(var(--y) * .85); }
  .hero-heading-star:nth-child(n+6) { left: calc(100% - (100% - var(--x)) * .16); top: calc(var(--y) * .85); }
}

/* Overlays ausschließlich auf bereits im Titelbild vorhandenen Lichtquellen. */
@keyframes hero-lantern-soft {
  0% { opacity: .55; filter: brightness(1) drop-shadow(0 0 6px #ffc35b55); }
  35% { opacity: .8; filter: brightness(1.15) drop-shadow(0 0 11px #ffd07980); }
  60% { opacity: .62; filter: brightness(1.05) drop-shadow(0 0 8px #ffc35b66); }
  100% { opacity: .85; filter: brightness(1.2) drop-shadow(0 0 12px #ffd98988); }
}
.hero-sign-star {
  width: 2.1%; aspect-ratio: 1;
  background: radial-gradient(circle, #fff7d5a0, #ffd26b45 32%, transparent 70%);
  mix-blend-mode: screen;
  animation-name: hero-sign-twinkle;
}
@keyframes hero-sign-twinkle {
  from { opacity: .35; transform: translate(-50%, -50%) scale(.92); }
  to { opacity: .8; transform: translate(-50%, -50%) scale(1.12); }
}
.hero-candle {
  width: 3.2%; aspect-ratio: .75;
  background: radial-gradient(ellipse, #fff5bbbf 0%, #ffcc6870 25%, transparent 70%);
  mix-blend-mode: screen;
  animation: hero-candle-flicker calc(var(--pulse) * .4) var(--delay) ease-in-out infinite;
}
@keyframes hero-candle-flicker {
  0%,100% { opacity: .65; transform: translate(-50%, -50%) scale(1); }
  17% { opacity: .94; transform: translate(-50%, -50%) scale(.97,1.12); }
  38% { opacity: .56; transform: translate(-50%, -50%) scale(1.03,.94); }
  57% { opacity: .86; transform: translate(-50%, -50%) scale(.98,1.09); }
  79% { opacity: .62; transform: translate(-50%, -50%) scale(1,.96); }
  91% { opacity: .9; transform: translate(-50%, -50%) scale(1.015,1.07); }
}
.hero-book-spark {
  width: 1.5%; aspect-ratio: 1;
  background: radial-gradient(circle, #fffef2 0%, #ffe7a5a0 15%, #ffd06b40 35%, transparent 70%);
  filter: drop-shadow(0 0 6px #ffe39eaa);
  mix-blend-mode: screen;
  animation-name: hero-book-sparkle;
}
@keyframes hero-book-sparkle {
  from { opacity: .45; transform: translate(-50%, -50%) scale(.85); }
  to { opacity: 1; transform: translate(-50%, -50%) scale(1.25); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-sign-star, .hero-candle, .hero-book-spark, .hero-lantern { animation: none; opacity: .6; }
}

/* Kleine Flamme innerhalb des vorhandenen Kerzenlichts, am Docht verankert. */
.hero-candle::after {
  content: ""; position: absolute; left: 43%; top: 30%;
  width: 14%; height: 30%; transform-origin: 50% 95%;
  border-radius: 60% 45% 50% 50%;
  background: radial-gradient(ellipse at 50% 70%, #fffde5, #ffe4a0aa 45%, transparent 75%);
  filter: drop-shadow(0 0 3px #ffcf75);
  animation: hero-flame-dance 2.7s -1.1s ease-in-out infinite;
}
@keyframes hero-flame-dance {
  0%,100% { transform: scale(.95,1) rotate(-2deg); opacity: .8; }
  23% { transform: scale(.9,1.18) rotate(2deg); opacity: 1; }
  49% { transform: scale(1.04,.91) rotate(-1deg); opacity: .66; }
  68% { transform: scale(.94,1.12) rotate(1deg); opacity: .94; }
  87% { transform: scale(1,.96) rotate(-2deg); opacity: .76; }
}
.hero-book-dust {
  position: absolute; left: 23%; top: 59%; width: 14%; height: 18%;
  pointer-events: none;
}
.hero-fairy-drift {
  position: absolute; left: var(--seed); top: 0; width: 1px; height: 100%;
  opacity: 0;
  animation: hero-fairy-rise var(--rise) var(--offset) linear infinite;
}
.hero-fairy-speck {
  position: absolute; bottom: 0; width: var(--speck); height: var(--speck);
  border-radius: 50%; background: #fff1b9;
  box-shadow: 0 0 4px #ffdc9190;
  animation: hero-fairy-glint 2.8s var(--offset) ease-in-out infinite;
}
.hero-fairy-star {
  width: 5px; height: 5px; border-radius: 0;
  clip-path: polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%);
}
@keyframes hero-fairy-rise {
  0% { transform: translate(0,0); opacity: 0; }
  12% { opacity: .6; }
  40% { transform: translate(calc(var(--drift) * -.3),-28%); opacity: .48; }
  70% { transform: translate(calc(var(--drift) * .5),-64%); opacity: .22; }
  100% { transform: translate(var(--drift),-100%); opacity: 0; }
}
@keyframes hero-fairy-glint {
  0%,100% { opacity: .65; }
  48% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-candle::after { animation: none; opacity: .7; }
  .hero-book-dust { display: none; }
}

/* Konturmasken entfernen den in den Originaldateien enthaltenen Außenhintergrund.
   Die quadratische Maske sitzt wie das Originalbild mittig mit contain.
   Nur die ruhenden Cover im Raster; animierte Bildkopien bleiben unverändert. */
#buecher .book-art img {
  -webkit-mask-image: var(--book-cutout);
  mask-image: var(--book-cutout);
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
/* Ruhige Rubrikgestaltung: Licht ausschließlich in den Hintergrundflächen.
   Statisch, ohne Sterne, neue Animationen oder Änderungen am Inhaltslayout. */
.share::after { content: none; }
#inhalt > .home-lower-world > section.books {
  background:
    radial-gradient(ellipse 280px 190px at 92% 0%, #fffdf3c0, transparent 80%),
    radial-gradient(ellipse 300px 220px at 2% 100%, #e5c47d24, transparent 80%),
    var(--section-color);
  box-shadow: inset 0 1px 0 #fffdf5b0, inset 0 0 0 1px #c9a66a20;
}
#inhalt > .home-lower-world > section.ritual {
  background:
    radial-gradient(ellipse 340px 260px at 8% 10%, #fffaf6a0, transparent 85%),
    radial-gradient(ellipse 350px 280px at 98% 95%, #eac9ba30, transparent 85%),
    var(--section-color);
  box-shadow: inset 0 1px 0 #fffaf8b0, inset 0 0 0 1px #c7a69d20;
}
#inhalt > .home-lower-world > section.preview {
  background:
    radial-gradient(ellipse 260px 200px at 96% 3%, #fff6d780, transparent 80%),
    radial-gradient(ellipse 300px 250px at 0% 90%, #f8fff8b0, transparent 85%),
    var(--section-color);
  box-shadow: inset 0 1px 0 #fcfff8b0, inset 0 0 0 1px #a5b79925;
}
#inhalt > .home-lower-world > section.share {
  background:
    radial-gradient(ellipse 340px 210px at 50% 0%, #fff7e8b0, transparent 85%),
    radial-gradient(ellipse 240px 180px at 95% 95%, #e4b68c25, transparent 85%),
    var(--section-color);
  box-shadow: inset 0 1px 0 #fff8ecb0, inset 0 0 0 1px #c5a07925;
}

#buecher .book:nth-child(1) { --book-cutout: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%3E%3Cpath%20fill%3D%22white%22%20d%3D%22M6.2%2012%20Q6.2%204.4%2014.8%204.4%20L73%204.4%20Q73%203.5%2075%203.5%20L90.5%203.5%20Q91.8%203.5%2091.8%205%20L91.8%2040.4%20Q94.6%2040.4%2094.6%2042%20L94.6%2052.8%20Q94.5%2054.2%2091.8%2054.6%20L91.8%2071.5%20Q93.5%2071.5%2093.5%2074%20L93.5%2087.6%20Q93.5%2089%2092%2089%20L92%2091%20Q92%2092.1%2090%2092.1%20L28.3%2092.1%20L28.3%2096.8%20L24.2%2094.8%20L20.3%2096.8%20L20.3%2091.8%20L11%2091.8%20Q6.1%2091.8%206.1%2088%20Z%22%2F%3E%3C%2Fsvg%3E"); }

#buecher .book:nth-child(2) { --book-cutout: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%3E%3Cpath%20fill%3D%22white%22%20d%3D%22M6.2%2010%20Q6.2%202.8%2015%203%20L74%203%20L74%202.3%20L90.6%202.3%20Q92.3%202.3%2092.3%204%20L92.3%2039.2%20Q95.1%2039.2%2095.1%2041.3%20L95.1%2052.3%20Q95%2054.2%2092.1%2054.3%20L92.1%2072.7%20Q93.4%2072.7%2093.4%2075%20L93.4%2089%20Q93.4%2090.3%2091.8%2090.3%20L91.8%2093.1%20Q91.8%2094.5%2090%2094.5%20L26.1%2094.5%20L26.1%2099%20L22.3%2096.6%20L18.4%2099%20L18.4%2094.2%20L11%2094.2%20Q6.1%2094.2%206.1%2090%20Z%22%2F%3E%3C%2Fsvg%3E"); }

#buecher .book:nth-child(3) { --book-cutout: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%3E%3Cpath%20fill%3D%22white%22%20d%3D%22M5.1%209%20Q5.1%202.3%2014.9%202.3%20L73.5%202.3%20L73.5%201.2%20L91.7%201.2%20Q93.4%201.2%2093.4%203%20L93.4%2018%20Q93.4%2019.2%2092.5%2019.6%20L92.5%2039.8%20Q95.2%2039.8%2095.2%2041.5%20L95.2%2052.3%20Q95.2%2053.8%2092.5%2054.4%20L92.5%2073.2%20Q94%2073.2%2094%2075%20L94%2090%20Q94%2091.1%2092.5%2091.1%20L92.5%2093.4%20Q92.5%2095%2090%2095%20L25.4%2095%20L25.4%2099%20L21.8%2096.8%20L17.6%2099%20L17.6%2094.5%20L10%2094.5%20Q5%2094.5%205%2090%20Z%22%2F%3E%3C%2Fsvg%3E"); }

#buecher .book:nth-child(4) { --book-cutout: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%3E%3Cpath%20fill%3D%22white%22%20d%3D%22M6%209%20Q6%202.3%2015%202.3%20L74%202.3%20L74%201.4%20L91.5%201.4%20Q93.2%201.4%2093.2%203%20L93.2%2018.5%20L92.5%2019%20L92.5%2039.9%20Q95.3%2039.9%2095.3%2041.5%20L95.3%2052.3%20Q95.3%2054.1%2092.5%2054.5%20L92.5%2072.9%20Q93.8%2072.9%2093.8%2075%20L93.8%2089%20Q93.8%2091%2092.1%2091%20L92.1%2094%20Q92.1%2095.2%2090%2095.2%20L26%2095.2%20L26%2098.8%20L22.5%2096.6%20L18.5%2098.8%20L18.5%2094.7%20L11%2094.7%20Q6%2094.7%206%2090%20Z%22%2F%3E%3C%2Fsvg%3E"); }

/* Ausschließlich die drei Vorschaukarten: mittig mit mehr Abstand zum Farbrand. */
#vorgeschmack .story-grid {
  width: calc(100% - 104px);
  max-width: 1040px;
  margin-inline: auto;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 36px;
  align-items: stretch;
}
#vorgeschmack .story { width: 100%; max-width: none; margin-inline: 0; }
#vorgeschmack .story h3 {
  width: 100%; min-height: 2.7em;
  margin-inline: auto; text-align: center;
  display: flex; align-items: center; justify-content: center;
}
#vorgeschmack .story > p {
  width: 100%; min-height: 16rem;
  margin-bottom: 16px;
  margin-inline: auto;
  text-align: justify;
  text-align-last: left;
  hyphens: auto;
  -webkit-hyphens: auto;
  overflow-wrap: break-word;
  text-wrap: wrap;
}
#vorgeschmack .story .listen {
  width: 100%;
  margin: 0 auto;
  align-items: stretch;
}
/* Gemeinsame Rasterzeilen gleichen auch längere Textblöcke automatisch an. */
@supports (grid-template-rows: subgrid) {
  #vorgeschmack .story {
    display: grid;
    grid-row: span 4;
    grid-template-rows: subgrid;
    row-gap: 0;
  }
  #vorgeschmack .story .listen { margin-top: 0; align-self: start; }
}
@media (max-width: 1000px) and (min-width: 701px) {
  #vorgeschmack .story-grid { width: calc(100% - 48px); column-gap: 24px; }
  #vorgeschmack .story > p { text-align: left; }
}
@media (max-width: 700px) {
  #vorgeschmack .story-grid {
    width: calc(100% - 40px); max-width: 440px;
    grid-template-columns: 1fr; gap: 48px;
  }
  #vorgeschmack .story { display: flex; grid-row: auto; }
  #vorgeschmack .story h3 { min-height: 0; }
  #vorgeschmack .story > p { min-height: 0; text-align: left; }
  #vorgeschmack .story .listen { align-self: stretch; }
}

/* Referenzkulisse nur auf index.html: vorhandene Inhaltsbilder bleiben separat. */
body {
  background-image:
    linear-gradient(180deg, transparent 0%, transparent 65%, #f4e5e6 100%),
    url("startseite-traumwald-v2.png"),
    linear-gradient(180deg, #f4e5e600, #f5eaf020 65%, #f8efe940),
    url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22140%22%20height%3D%22860%22%20viewBox%3D%220%200%20140%20860%22%3E%3Cg%20fill%3D%22%239889a4%22%20fill-opacity%3D%22.19%22%20stroke%3D%22%239889a4%22%20stroke-opacity%3D%22.16%22%20stroke-width%3D%221%22%3E%3Cpath%20d%3D%22M-12%20740Q80%20590%2024%20360Q-4%20230%2030%20100%22%20fill%3D%22none%22%2F%3E%3Cpath%20d%3D%22M25%20590Q85%20526%2081%20485Q30%20508%2025%20590M31%20540Q-18%20490%20-12%20454Q27%20474%2031%20540M34%20438Q84%20397%2078%20358Q33%20380%2034%20438M23%20353Q-14%20307%20-8%20270Q22%20294%2023%20353M22%20262Q68%20228%2065%20197Q27%20211%2022%20262M24%20183Q-8%20150%20-3%20120Q24%20142%2024%20183%22%2F%3E%3C%2Fg%3E%3Cg%20fill%3D%22%23fff5d6%22%20opacity%3D%22.6%22%3E%3Ccircle%20cx%3D%2225%22%20cy%3D%2270%22%20r%3D%221.3%22%2F%3E%3Ccircle%20cx%3D%2258%22%20cy%3D%22330%22%20r%3D%221%22%2F%3E%3Ccircle%20cx%3D%2219%22%20cy%3D%22710%22%20r%3D%221.5%22%2F%3E%3C%2Fg%3E%3Cdefs%3E%3Cfilter%20id%3D%22mist%22%3E%3CfeGaussianBlur%20stdDeviation%3D%222.5%22%2F%3E%3C%2Ffilter%3E%3C%2Fdefs%3E%3Cg%20fill%3D%22%23a397b4%22%20opacity%3D%22.25%22%20filter%3D%22url%28%23mist%29%22%3E%3Cpath%20transform%3D%22translate%288%20280%29%22%20d%3D%22M0%20-190L-15%20-123.5H-8L-25%20-76.0H-15L-36%200H36L15%20-76.0H25L8%20-123.5H15Z%22%2F%3E%3Cpath%20transform%3D%22translate%2870%20430%29%22%20d%3D%22M0%20-160L-15%20-104.0H-8L-25%20-64.0H-15L-36%200H36L15%20-64.0H25L8%20-104.0H15Z%22%2F%3E%3Cpath%20transform%3D%22translate%2818%20790%29%22%20d%3D%22M0%20-210L-15%20-136.5H-8L-25%20-84.0H-15L-36%200H36L15%20-84.0H25L8%20-136.5H15Z%22%2F%3E%3Cpath%20transform%3D%22translate%28105%20700%29%22%20d%3D%22M0%20-120L-15%20-78.0H-8L-25%20-48.0H-15L-36%200H36L15%20-48.0H25L8%20-78.0H15Z%22%2F%3E%3C%2Fg%3E%3Cg%20opacity%3D%22.28%22%3E%3Cpath%20d%3D%22M13%20190Q25%20151%2013%20125%22%20fill%3D%22none%22%20stroke%3D%22%23958caa%22%20stroke-width%3D%221.4%22%2F%3E%3Cellipse%20cx%3D%2213%22%20cy%3D%22120.1%22%20rx%3D%222.94%22%20ry%3D%225.95%22%20fill%3D%22%23c28eac%22%20transform%3D%22rotate%280%2013%20125%29%22%2F%3E%3Cellipse%20cx%3D%2213%22%20cy%3D%22120.1%22%20rx%3D%222.94%22%20ry%3D%225.95%22%20fill%3D%22%23c28eac%22%20transform%3D%22rotate%2860%2013%20125%29%22%2F%3E%3Cellipse%20cx%3D%2213%22%20cy%3D%22120.1%22%20rx%3D%222.94%22%20ry%3D%225.95%22%20fill%3D%22%23c28eac%22%20transform%3D%22rotate%28120%2013%20125%29%22%2F%3E%3Cellipse%20cx%3D%2213%22%20cy%3D%22120.1%22%20rx%3D%222.94%22%20ry%3D%225.95%22%20fill%3D%22%23c28eac%22%20transform%3D%22rotate%28180%2013%20125%29%22%2F%3E%3Cellipse%20cx%3D%2213%22%20cy%3D%22120.1%22%20rx%3D%222.94%22%20ry%3D%225.95%22%20fill%3D%22%23c28eac%22%20transform%3D%22rotate%28240%2013%20125%29%22%2F%3E%3Cellipse%20cx%3D%2213%22%20cy%3D%22120.1%22%20rx%3D%222.94%22%20ry%3D%225.95%22%20fill%3D%22%23c28eac%22%20transform%3D%22rotate%28300%2013%20125%29%22%2F%3E%3Ccircle%20cx%3D%2213%22%20cy%3D%22125%22%20r%3D%222.1%22%20fill%3D%22%23ebc082%22%2F%3E%3Cpath%20d%3D%22M39%20720Q51%20681%2039%20655%22%20fill%3D%22none%22%20stroke%3D%22%23958caa%22%20stroke-width%3D%221.4%22%2F%3E%3Cellipse%20cx%3D%2239%22%20cy%3D%22650.8%22%20rx%3D%222.52%22%20ry%3D%225.1%22%20fill%3D%22%23c28eac%22%20transform%3D%22rotate%280%2039%20655%29%22%2F%3E%3Cellipse%20cx%3D%2239%22%20cy%3D%22650.8%22%20rx%3D%222.52%22%20ry%3D%225.1%22%20fill%3D%22%23c28eac%22%20transform%3D%22rotate%2860%2039%20655%29%22%2F%3E%3Cellipse%20cx%3D%2239%22%20cy%3D%22650.8%22%20rx%3D%222.52%22%20ry%3D%225.1%22%20fill%3D%22%23c28eac%22%20transform%3D%22rotate%28120%2039%20655%29%22%2F%3E%3Cellipse%20cx%3D%2239%22%20cy%3D%22650.8%22%20rx%3D%222.52%22%20ry%3D%225.1%22%20fill%3D%22%23c28eac%22%20transform%3D%22rotate%28180%2039%20655%29%22%2F%3E%3Cellipse%20cx%3D%2239%22%20cy%3D%22650.8%22%20rx%3D%222.52%22%20ry%3D%225.1%22%20fill%3D%22%23c28eac%22%20transform%3D%22rotate%28240%2039%20655%29%22%2F%3E%3Cellipse%20cx%3D%2239%22%20cy%3D%22650.8%22%20rx%3D%222.52%22%20ry%3D%225.1%22%20fill%3D%22%23c28eac%22%20transform%3D%22rotate%28300%2039%20655%29%22%2F%3E%3Ccircle%20cx%3D%2239%22%20cy%3D%22655%22%20r%3D%221.7999999999999998%22%20fill%3D%22%23ebc082%22%2F%3E%3Cpath%20d%3D%22M9%20800Q21%20761%209%20735%22%20fill%3D%22none%22%20stroke%3D%22%23958caa%22%20stroke-width%3D%221.4%22%2F%3E%3Cellipse%20cx%3D%229%22%20cy%3D%22729.4%22%20rx%3D%223.36%22%20ry%3D%226.8%22%20fill%3D%22%23c28eac%22%20transform%3D%22rotate%280%209%20735%29%22%2F%3E%3Cellipse%20cx%3D%229%22%20cy%3D%22729.4%22%20rx%3D%223.36%22%20ry%3D%226.8%22%20fill%3D%22%23c28eac%22%20transform%3D%22rotate%2860%209%20735%29%22%2F%3E%3Cellipse%20cx%3D%229%22%20cy%3D%22729.4%22%20rx%3D%223.36%22%20ry%3D%226.8%22%20fill%3D%22%23c28eac%22%20transform%3D%22rotate%28120%209%20735%29%22%2F%3E%3Cellipse%20cx%3D%229%22%20cy%3D%22729.4%22%20rx%3D%223.36%22%20ry%3D%226.8%22%20fill%3D%22%23c28eac%22%20transform%3D%22rotate%28180%209%20735%29%22%2F%3E%3Cellipse%20cx%3D%229%22%20cy%3D%22729.4%22%20rx%3D%223.36%22%20ry%3D%226.8%22%20fill%3D%22%23c28eac%22%20transform%3D%22rotate%28240%209%20735%29%22%2F%3E%3Cellipse%20cx%3D%229%22%20cy%3D%22729.4%22%20rx%3D%223.36%22%20ry%3D%226.8%22%20fill%3D%22%23c28eac%22%20transform%3D%22rotate%28300%209%20735%29%22%2F%3E%3Ccircle%20cx%3D%229%22%20cy%3D%22735%22%20r%3D%222.4%22%20fill%3D%22%23ebc082%22%2F%3E%3Cpath%20d%3D%22M55%20870Q67%20831%2055%20805%22%20fill%3D%22none%22%20stroke%3D%22%23958caa%22%20stroke-width%3D%221.4%22%2F%3E%3Cellipse%20cx%3D%2255%22%20cy%3D%22801.5%22%20rx%3D%222.1%22%20ry%3D%224.25%22%20fill%3D%22%23c28eac%22%20transform%3D%22rotate%280%2055%20805%29%22%2F%3E%3Cellipse%20cx%3D%2255%22%20cy%3D%22801.5%22%20rx%3D%222.1%22%20ry%3D%224.25%22%20fill%3D%22%23c28eac%22%20transform%3D%22rotate%2860%2055%20805%29%22%2F%3E%3Cellipse%20cx%3D%2255%22%20cy%3D%22801.5%22%20rx%3D%222.1%22%20ry%3D%224.25%22%20fill%3D%22%23c28eac%22%20transform%3D%22rotate%28120%2055%20805%29%22%2F%3E%3Cellipse%20cx%3D%2255%22%20cy%3D%22801.5%22%20rx%3D%222.1%22%20ry%3D%224.25%22%20fill%3D%22%23c28eac%22%20transform%3D%22rotate%28180%2055%20805%29%22%2F%3E%3Cellipse%20cx%3D%2255%22%20cy%3D%22801.5%22%20rx%3D%222.1%22%20ry%3D%224.25%22%20fill%3D%22%23c28eac%22%20transform%3D%22rotate%28240%2055%20805%29%22%2F%3E%3Cellipse%20cx%3D%2255%22%20cy%3D%22801.5%22%20rx%3D%222.1%22%20ry%3D%224.25%22%20fill%3D%22%23c28eac%22%20transform%3D%22rotate%28300%2055%20805%29%22%2F%3E%3Ccircle%20cx%3D%2255%22%20cy%3D%22805%22%20r%3D%221.5%22%20fill%3D%22%23ebc082%22%2F%3E%3C%2Fg%3E%3Cg%20fill%3D%22%23fff4d4%22%20opacity%3D%22.8%22%3E%3Cpath%20d%3D%22M19%20191Q19.7%20194.3%2022%20195Q19.7%20195.7%2019%20199Q18.3%20195.7%2016%20195Q18.3%20194.3%2019%20191Z%22%2F%3E%3Cpath%20d%3D%22M65%20486Q65.7%20489.3%2068%20490Q65.7%20490.7%2065%20494Q64.3%20490.7%2062%20490Q64.3%20489.3%2065%20486Z%22%2F%3E%3Cpath%20d%3D%22M29%20771Q29.7%20774.3%2032%20775Q29.7%20775.7%2029%20779Q28.3%20775.7%2026%20775Q28.3%20774.3%2029%20771Z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"),
    url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22140%22%20height%3D%22860%22%20viewBox%3D%220%200%20140%20860%22%3E%3Cg%20transform%3D%22translate%28140%200%29%20scale%28-1%201%29%22%3E%3Cg%20fill%3D%22%239889a4%22%20fill-opacity%3D%22.19%22%20stroke%3D%22%239889a4%22%20stroke-opacity%3D%22.16%22%20stroke-width%3D%221%22%3E%3Cpath%20d%3D%22M-12%20740Q80%20590%2024%20360Q-4%20230%2030%20100%22%20fill%3D%22none%22%2F%3E%3Cpath%20d%3D%22M25%20590Q85%20526%2081%20485Q30%20508%2025%20590M31%20540Q-18%20490%20-12%20454Q27%20474%2031%20540M34%20438Q84%20397%2078%20358Q33%20380%2034%20438M23%20353Q-14%20307%20-8%20270Q22%20294%2023%20353M22%20262Q68%20228%2065%20197Q27%20211%2022%20262M24%20183Q-8%20150%20-3%20120Q24%20142%2024%20183%22%2F%3E%3C%2Fg%3E%3Cg%20fill%3D%22%23fff5d6%22%20opacity%3D%22.6%22%3E%3Ccircle%20cx%3D%2225%22%20cy%3D%2270%22%20r%3D%221.3%22%2F%3E%3Ccircle%20cx%3D%2258%22%20cy%3D%22330%22%20r%3D%221%22%2F%3E%3Ccircle%20cx%3D%2219%22%20cy%3D%22710%22%20r%3D%221.5%22%2F%3E%3C%2Fg%3E%3Cdefs%3E%3Cfilter%20id%3D%22mist%22%3E%3CfeGaussianBlur%20stdDeviation%3D%222.5%22%2F%3E%3C%2Ffilter%3E%3C%2Fdefs%3E%3Cg%20fill%3D%22%23a397b4%22%20opacity%3D%22.25%22%20filter%3D%22url%28%23mist%29%22%3E%3Cpath%20transform%3D%22translate%288%20280%29%22%20d%3D%22M0%20-190L-15%20-123.5H-8L-25%20-76.0H-15L-36%200H36L15%20-76.0H25L8%20-123.5H15Z%22%2F%3E%3Cpath%20transform%3D%22translate%2870%20430%29%22%20d%3D%22M0%20-160L-15%20-104.0H-8L-25%20-64.0H-15L-36%200H36L15%20-64.0H25L8%20-104.0H15Z%22%2F%3E%3Cpath%20transform%3D%22translate%2818%20790%29%22%20d%3D%22M0%20-210L-15%20-136.5H-8L-25%20-84.0H-15L-36%200H36L15%20-84.0H25L8%20-136.5H15Z%22%2F%3E%3Cpath%20transform%3D%22translate%28105%20700%29%22%20d%3D%22M0%20-120L-15%20-78.0H-8L-25%20-48.0H-15L-36%200H36L15%20-48.0H25L8%20-78.0H15Z%22%2F%3E%3C%2Fg%3E%3Cg%20opacity%3D%22.28%22%3E%3Cpath%20d%3D%22M13%20190Q25%20151%2013%20125%22%20fill%3D%22none%22%20stroke%3D%22%23958caa%22%20stroke-width%3D%221.4%22%2F%3E%3Cellipse%20cx%3D%2213%22%20cy%3D%22120.1%22%20rx%3D%222.94%22%20ry%3D%225.95%22%20fill%3D%22%23c28eac%22%20transform%3D%22rotate%280%2013%20125%29%22%2F%3E%3Cellipse%20cx%3D%2213%22%20cy%3D%22120.1%22%20rx%3D%222.94%22%20ry%3D%225.95%22%20fill%3D%22%23c28eac%22%20transform%3D%22rotate%2860%2013%20125%29%22%2F%3E%3Cellipse%20cx%3D%2213%22%20cy%3D%22120.1%22%20rx%3D%222.94%22%20ry%3D%225.95%22%20fill%3D%22%23c28eac%22%20transform%3D%22rotate%28120%2013%20125%29%22%2F%3E%3Cellipse%20cx%3D%2213%22%20cy%3D%22120.1%22%20rx%3D%222.94%22%20ry%3D%225.95%22%20fill%3D%22%23c28eac%22%20transform%3D%22rotate%28180%2013%20125%29%22%2F%3E%3Cellipse%20cx%3D%2213%22%20cy%3D%22120.1%22%20rx%3D%222.94%22%20ry%3D%225.95%22%20fill%3D%22%23c28eac%22%20transform%3D%22rotate%28240%2013%20125%29%22%2F%3E%3Cellipse%20cx%3D%2213%22%20cy%3D%22120.1%22%20rx%3D%222.94%22%20ry%3D%225.95%22%20fill%3D%22%23c28eac%22%20transform%3D%22rotate%28300%2013%20125%29%22%2F%3E%3Ccircle%20cx%3D%2213%22%20cy%3D%22125%22%20r%3D%222.1%22%20fill%3D%22%23ebc082%22%2F%3E%3Cpath%20d%3D%22M39%20720Q51%20681%2039%20655%22%20fill%3D%22none%22%20stroke%3D%22%23958caa%22%20stroke-width%3D%221.4%22%2F%3E%3Cellipse%20cx%3D%2239%22%20cy%3D%22650.8%22%20rx%3D%222.52%22%20ry%3D%225.1%22%20fill%3D%22%23c28eac%22%20transform%3D%22rotate%280%2039%20655%29%22%2F%3E%3Cellipse%20cx%3D%2239%22%20cy%3D%22650.8%22%20rx%3D%222.52%22%20ry%3D%225.1%22%20fill%3D%22%23c28eac%22%20transform%3D%22rotate%2860%2039%20655%29%22%2F%3E%3Cellipse%20cx%3D%2239%22%20cy%3D%22650.8%22%20rx%3D%222.52%22%20ry%3D%225.1%22%20fill%3D%22%23c28eac%22%20transform%3D%22rotate%28120%2039%20655%29%22%2F%3E%3Cellipse%20cx%3D%2239%22%20cy%3D%22650.8%22%20rx%3D%222.52%22%20ry%3D%225.1%22%20fill%3D%22%23c28eac%22%20transform%3D%22rotate%28180%2039%20655%29%22%2F%3E%3Cellipse%20cx%3D%2239%22%20cy%3D%22650.8%22%20rx%3D%222.52%22%20ry%3D%225.1%22%20fill%3D%22%23c28eac%22%20transform%3D%22rotate%28240%2039%20655%29%22%2F%3E%3Cellipse%20cx%3D%2239%22%20cy%3D%22650.8%22%20rx%3D%222.52%22%20ry%3D%225.1%22%20fill%3D%22%23c28eac%22%20transform%3D%22rotate%28300%2039%20655%29%22%2F%3E%3Ccircle%20cx%3D%2239%22%20cy%3D%22655%22%20r%3D%221.7999999999999998%22%20fill%3D%22%23ebc082%22%2F%3E%3Cpath%20d%3D%22M9%20800Q21%20761%209%20735%22%20fill%3D%22none%22%20stroke%3D%22%23958caa%22%20stroke-width%3D%221.4%22%2F%3E%3Cellipse%20cx%3D%229%22%20cy%3D%22729.4%22%20rx%3D%223.36%22%20ry%3D%226.8%22%20fill%3D%22%23c28eac%22%20transform%3D%22rotate%280%209%20735%29%22%2F%3E%3Cellipse%20cx%3D%229%22%20cy%3D%22729.4%22%20rx%3D%223.36%22%20ry%3D%226.8%22%20fill%3D%22%23c28eac%22%20transform%3D%22rotate%2860%209%20735%29%22%2F%3E%3Cellipse%20cx%3D%229%22%20cy%3D%22729.4%22%20rx%3D%223.36%22%20ry%3D%226.8%22%20fill%3D%22%23c28eac%22%20transform%3D%22rotate%28120%209%20735%29%22%2F%3E%3Cellipse%20cx%3D%229%22%20cy%3D%22729.4%22%20rx%3D%223.36%22%20ry%3D%226.8%22%20fill%3D%22%23c28eac%22%20transform%3D%22rotate%28180%209%20735%29%22%2F%3E%3Cellipse%20cx%3D%229%22%20cy%3D%22729.4%22%20rx%3D%223.36%22%20ry%3D%226.8%22%20fill%3D%22%23c28eac%22%20transform%3D%22rotate%28240%209%20735%29%22%2F%3E%3Cellipse%20cx%3D%229%22%20cy%3D%22729.4%22%20rx%3D%223.36%22%20ry%3D%226.8%22%20fill%3D%22%23c28eac%22%20transform%3D%22rotate%28300%209%20735%29%22%2F%3E%3Ccircle%20cx%3D%229%22%20cy%3D%22735%22%20r%3D%222.4%22%20fill%3D%22%23ebc082%22%2F%3E%3Cpath%20d%3D%22M55%20870Q67%20831%2055%20805%22%20fill%3D%22none%22%20stroke%3D%22%23958caa%22%20stroke-width%3D%221.4%22%2F%3E%3Cellipse%20cx%3D%2255%22%20cy%3D%22801.5%22%20rx%3D%222.1%22%20ry%3D%224.25%22%20fill%3D%22%23c28eac%22%20transform%3D%22rotate%280%2055%20805%29%22%2F%3E%3Cellipse%20cx%3D%2255%22%20cy%3D%22801.5%22%20rx%3D%222.1%22%20ry%3D%224.25%22%20fill%3D%22%23c28eac%22%20transform%3D%22rotate%2860%2055%20805%29%22%2F%3E%3Cellipse%20cx%3D%2255%22%20cy%3D%22801.5%22%20rx%3D%222.1%22%20ry%3D%224.25%22%20fill%3D%22%23c28eac%22%20transform%3D%22rotate%28120%2055%20805%29%22%2F%3E%3Cellipse%20cx%3D%2255%22%20cy%3D%22801.5%22%20rx%3D%222.1%22%20ry%3D%224.25%22%20fill%3D%22%23c28eac%22%20transform%3D%22rotate%28180%2055%20805%29%22%2F%3E%3Cellipse%20cx%3D%2255%22%20cy%3D%22801.5%22%20rx%3D%222.1%22%20ry%3D%224.25%22%20fill%3D%22%23c28eac%22%20transform%3D%22rotate%28240%2055%20805%29%22%2F%3E%3Cellipse%20cx%3D%2255%22%20cy%3D%22801.5%22%20rx%3D%222.1%22%20ry%3D%224.25%22%20fill%3D%22%23c28eac%22%20transform%3D%22rotate%28300%2055%20805%29%22%2F%3E%3Ccircle%20cx%3D%2255%22%20cy%3D%22805%22%20r%3D%221.5%22%20fill%3D%22%23ebc082%22%2F%3E%3C%2Fg%3E%3Cg%20fill%3D%22%23fff4d4%22%20opacity%3D%22.8%22%3E%3Cpath%20d%3D%22M19%20191Q19.7%20194.3%2022%20195Q19.7%20195.7%2019%20199Q18.3%20195.7%2016%20195Q18.3%20194.3%2019%20191Z%22%2F%3E%3Cpath%20d%3D%22M65%20486Q65.7%20489.3%2068%20490Q65.7%20490.7%2065%20494Q64.3%20490.7%2062%20490Q64.3%20489.3%2065%20486Z%22%2F%3E%3Cpath%20d%3D%22M29%20771Q29.7%20774.3%2032%20775Q29.7%20775.7%2029%20779Q28.3%20775.7%2026%20775Q28.3%20774.3%2029%20771Z%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E"),
    radial-gradient(ellipse at 0% 45%, #dbcbdf, transparent 62%),
    radial-gradient(ellipse at 100% 72%, #eed8d5, transparent 62%),
    linear-gradient(180deg, #f4e5e6, #eedfe9 55%, #f4e6df 85%, #e9dceb);
  background-size: 100% max(950px, 80vw), 120% auto, 100% 100%, 140px 860px, 140px 860px, 100% 100%, 100% 100%, 100% 100%;
  background-position: center top, center top, center top, left 1000px, right 1330px, center top, center top, center top;
  background-repeat: no-repeat, no-repeat, no-repeat, repeat-y, repeat-y, no-repeat, no-repeat, no-repeat;
}
/* Die Kulisse bringt Lichtschleier bereits mit: keine doppelten Bögen. */
.hero::before, .hero::after { content: none; }
.hero h1::before { background: radial-gradient(ellipse, #fff6dd50, transparent 76%); }
.hero h1 {
  max-width: 780px;
  font-size: clamp(2.65rem, 5vw, 4.5rem);
  color: #39271f;
  text-shadow: 0 2px 10px #68483920, 0 0 24px #fff5dba0;
}
.hero { padding-top: clamp(28px, 3vw, 44px); }
.hero-art {
  box-shadow: 0 -8px 32px #fff0cc80, 0 0 45px #ffe3b650, 0 16px 38px #61413c30;
}
@media (max-width: 700px) {
  body { background-size: 100% 900px, auto 1050px, 100% 100%, 90px 700px, 90px 700px, 100% 100%, 100% 100%, 100% 100%; }
}

/* Ausschließlich Hintergrund der vorhandenen Navigationszeile. */
.site-header { position: relative; isolation: isolate; color: #443346; }
.site-header::before {
  content: ""; position: absolute; inset: 25px calc(50% - 50vw);
  z-index: -1; pointer-events: none;
  background:
    radial-gradient(ellipse 2px 8px at 31% 32%, #fff9ddc0, transparent),
    radial-gradient(ellipse 8px 2px at 31% 32%, #fff9ddc0, transparent),
    radial-gradient(ellipse 2px 6px at 63% 66%, #fff9dd95, transparent),
    radial-gradient(ellipse 6px 2px at 63% 66%, #fff9dd95, transparent),
    radial-gradient(ellipse 2px 7px at 43% 65%, #fff9ddd0, transparent),
    radial-gradient(ellipse 7px 2px at 43% 65%, #fff9ddd0, transparent),
    radial-gradient(ellipse at 38% 100%, #ffe7dca0, transparent 65%),
    linear-gradient(110deg, #efd3e5, #f9e1e5 48%, #ded4ed);
  box-shadow: 0 8px 22px #f3dde748;
}
/* Feine ruhende Lichtpunkte in den freien Seitenrändern, ohne Inhalts-Layer. */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(circle at 1.5% 34%, #fff7d580 0 1px, transparent 5px),
    radial-gradient(circle at 98.5% 52%, #fff7d585 0 1px, transparent 6px),
    radial-gradient(circle at 2% 78%, #fff7d575 0 1px, transparent 5px),
    radial-gradient(circle at 97.5% 88%, #fff7d570 0 1px, transparent 5px);
}

/* Nur die gemalte Navigationsfläche wird schmaler, der Header bleibt gleich groß. */
@media (max-width: 700px) {
  .site-header::before { top: 12px; bottom: 12px; }
}

/* Gleiche Außenbreite wie .hero-art; das Buchraster war bereits max. 1120px. */
#inhalt > .home-lower-world > #buecher { max-width: 1120px; }


/* Ein gemeinsamer unterer Bereich; keine Änderungen oberhalb dieser Grenze. */
.home-lower-world {
  position: relative;
  display: flow-root;
  isolation: isolate;
}
/* Nur die Grundfläche überblenden, ohne Karten oder Bildschatten zu maskieren. */
.home-lower-world > .home-lower-base {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, #0000 0, #00000005 8px, #00000018 18px, #00000040 30px, #00000080 44px, #000000bf 58px, #000000e8 70px, #000000fa 80px, #000 88px);
  mask-image: linear-gradient(180deg, #0000 0, #00000005 8px, #00000018 18px, #00000040 30px, #00000080 44px, #000000bf 58px, #000000e8 70px, #000000fa 80px, #000 88px);
  background-color: #f3e2e8;
  background-image: linear-gradient(#f7eaf055, #f7eaf055), url("blumen-flaeche-nahtlos.svg");
  background-size: auto, 600px 360px;
  background-position: left top;
  background-repeat: no-repeat, repeat;
}
.home-lower-world::before, .home-lower-world::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  width: max(0px, calc((100% - min(1120px, calc(100% - 80px))) / 2));
  pointer-events: none;
  z-index: 0;
  background-image: linear-gradient(#f7eaf055, #f7eaf055), url("blumen-nahtlos.svg");
  background-size: auto, auto 360px;
  background-repeat: no-repeat, repeat-y;
  /* Vorhandener Übergang: sanfte Ausblendung nur entlang der oberen 88px. */
  -webkit-mask-image: linear-gradient(180deg, #0000 0, #00000005 8px, #00000018 18px, #00000040 30px, #00000080 44px, #000000bf 58px, #000000e8 70px, #000000fa 80px, #000 88px);
  mask-image: linear-gradient(180deg, #0000 0, #00000005 8px, #00000018 18px, #00000040 30px, #00000080 44px, #000000bf 58px, #000000e8 70px, #000000fa 80px, #000 88px);
}
.home-lower-world::before { left: 0; background-position: left top; }
.home-lower-world::after { right: 0; background-position: right top; }
#inhalt > .home-lower-world > .home-card {
  width: min(1120px, calc(100% - 80px));
  max-width: 1120px;
  margin-inline: auto;
  z-index: 1;
  isolation: isolate;
}
#inhalt > .home-lower-world > .home-card::before,
#inhalt > .home-lower-world > .home-card::after { content: none; }
/* Lesebreiten bleiben erhalten, nur die äußeren Karten werden vereinheitlicht. */
.home-lower-world > .ritual > * { max-width: 740px; margin-inline: auto; }
.home-lower-world > .share > h2 { max-width: 900px; margin-inline: auto; }
@media (max-width: 1000px) {
  #inhalt > .home-lower-world > .home-card { width: calc(100% - 48px); }
  .home-lower-world::before, .home-lower-world::after { width: 24px; }
}
@media (max-width: 700px) {
  #inhalt > .home-lower-world > .home-card { width: calc(100% - 36px); }
  .home-lower-world::before, .home-lower-world::after { width: 18px; }
  .home-lower-world > .ritual > * { max-width: calc(100% - 4px); }
}

/* Ausschließlich der kleine Abschluss der Startseite. */
.home-footer-world {
  position: relative;
  z-index: 1;
  padding: 24px 0 30px;
  background: transparent;
}
.home-back-to-top{position:absolute;z-index:2;bottom:5px;left:50%;display:inline-flex;align-items:center;gap:6px;color:#8f6258;font:600 .82rem var(--sans);line-height:1;text-decoration:none;transform:translateX(-50%)}
.home-back-to-top:hover{text-decoration:underline}.home-back-to-top:focus-visible{outline:2px solid #8f6258;outline-offset:4px}
.home-footer-world > .site-footer {
  box-sizing: border-box;
  width: min(1080px, calc(100% - 80px));
  margin: 0 auto;
  padding: 8px 24px;
  min-height: 44px;
  border: 0;
  border-radius: 22px;
  background: linear-gradient(110deg, #f7e9e9, #fbefea 52%, #f2e3eb);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
}
.home-footer-world .site-footer .wordmark { justify-self: start; font-size: .875rem; }
.home-footer-world .site-footer .wordmark span { font-size: 1.5rem; line-height: 1; }
.home-footer-world .site-footer p {
  width: auto; order: initial;
  margin: 0; font-size: .8rem; text-align: center;
}
.home-footer-world .site-footer small { font-size: .8rem; justify-self: end; }
@media (max-width: 700px) {
  .home-footer-world > .site-footer {
    width: calc(100% - 48px); padding: 9px 14px; gap: 8px;
    grid-template-columns: 1fr auto;
  }
  .home-footer-world .site-footer p { grid-column: 1 / -1; grid-row: 2; }
}

/* Lesbarkeit: nur Textkontrast, sämtliche Schrift- und Layoutmaße bleiben erhalten. */
.home-lower-world > .ritual > p,
.home-lower-world > .preview .story > p,
.home-lower-world > .share > p {
  color: #493f39;
}
.home-lower-world > .preview .section-intro > p {
  color: #51463f;
}
.home-lower-world > .ritual > blockquote,
.home-lower-world > .share > p:last-child {
  color: #684943;
}

/* Weitere 6 % gegenüber der bisherigen 3-%-Vergrößerung.
   Echte Bildbreite: die zusätzliche Höhe bleibt im Dokumentfluss. */
#inhalt > .hero > .hero-art {
  width: min(1222.816px, 109.18%, calc(100vw - 16px));
  max-width: none;
  margin-inline: 0;
  left: 50%;
  transform: translateX(-50%);
  box-shadow: none;
  overflow: visible;
  isolation: isolate;
}
/* Indirektes Licht hinter dem Bild, ohne Schatten oder Versatz. */
#inhalt > .hero > .hero-art::before {
  content: "";
  position: absolute;
  inset: -16px;
  border-radius: inherit;
  background: #ffe9c5;
  filter: blur(22px);
  opacity: .85;
  z-index: 0;
  pointer-events: none;
}
/* Die bisherigen Rundungen und die Begrenzung der Bildlichter erhalten. */
#inhalt > .hero > .hero-art > img,
#inhalt > .hero > .hero-art > .hero-image-lights {
  border-radius: inherit;
}
#inhalt > .hero > .hero-art > .hero-image-lights {
  overflow: hidden;
}

/* Explizite Reihenfolge: Licht hinter Bild, vorhandene Bildanimationen darüber. */
#inhalt > .hero > .hero-art > img {
  position: relative;
  z-index: 1;
}
#inhalt > .hero > .hero-art > .hero-image-lights {
  z-index: 2;
}

/* Heller Lichtkern; ohne Versatz hinter dem unveränderten Titelbild. */
#inhalt > .hero > .hero-art::after {
  content: "";
  position: absolute;
  inset: -7px;
  border-radius: inherit;
  background: #fff7df;
  filter: blur(9px);
  opacity: .9;
  z-index: 0;
  pointer-events: none;
}

/* Derselbe zweistufige Licht-Halo für die vier unteren Inhaltskarten.
   Die Aussparung hält das Licht vollständig außerhalb der Kartenfläche. */
#inhalt > .home-lower-world > .home-card::before,
#inhalt > .home-lower-world > .home-card::after {
  content: "";
  position: absolute;
  inset: calc(-1 * var(--halo-inset));
  width: auto;
  height: auto;
  max-width: none;
  margin: 0;
  border-radius: inherit;
  z-index: -1;
  pointer-events: none;
  animation: none;
  transform: none;
  clip-path: polygon(evenodd,
    -80px -80px, calc(100% + 80px) -80px,
    calc(100% + 80px) calc(100% + 80px), -80px calc(100% + 80px), -80px -80px,
    var(--halo-inset) var(--halo-inset),
    var(--halo-inset) calc(100% - var(--halo-inset)),
    calc(100% - var(--halo-inset)) calc(100% - var(--halo-inset)),
    calc(100% - var(--halo-inset)) var(--halo-inset),
    var(--halo-inset) var(--halo-inset));
}
#inhalt > .home-lower-world > .home-card::before {
  --halo-inset: 16px;
  background: #ffe9c5;
  filter: blur(22px);
  opacity: .85;
}
#inhalt > .home-lower-world > .home-card::after {
  --halo-inset: 7px;
  background: #fff7df;
  filter: blur(9px);
  opacity: .9;
}

/* Entfernte Hinweise: bisherigen Platz erhalten, ohne Platzhalterelemente. */
#vorgeschmack .story .listen {
  padding-bottom: calc(1.4rem + 13px);
}
/* Ausschließlich die vorhandenen Masken-Icons einfärben. */
#vorgeschmack .listen a[href*="open.spotify.com"]::before {
  background-color: #1a9850;
}
#vorgeschmack .listen a[href*="youtu.be"]::before {
  background-color: #d63c3c;
}
#vorgeschmack .listen a[href*="music.amazon.de"]::before {
  background-color: #278999;
}

/* Nur die Kopfzeile: ruhige gemeinsame Typografie und kompakte Linkabstände. */
.site-header > .wordmark {
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.55;
}
.site-header > .home-wordmark{display:inline-flex;align-items:center;gap:clamp(10px,1.35vw,20px);color:#a65d68;line-height:1;text-decoration:none;white-space:nowrap}
.site-header > .home-wordmark .home-wordmark-title{font-family:"Snell Roundhand","Segoe Script","Apple Chancery",cursive;font-size:clamp(1.9rem,2.7vw,2.75rem);font-weight:400;letter-spacing:-.045em;line-height:.9}
.site-header > .home-wordmark .home-wordmark-heart{margin-left:2px;font-size:.9em}
.site-header > .home-wordmark small{font-family:var(--sans);font-size:clamp(.43rem,.85vw,.75rem);font-weight:600;letter-spacing:.2em;line-height:1;white-space:nowrap}
.site-header > nav { gap: 22px; font-weight: 400; white-space: nowrap; }
@media (min-width: 701px) and (max-width: 1000px) {
  .site-header { gap: 18px; }
  .site-header > .wordmark, .site-header > nav { font-size: .875rem; }
  .site-header > nav { gap: 14px; }
}
@media (max-width: 700px) {
  .site-header > .wordmark { font-size: .875rem; }
  .site-header > .home-wordmark{gap:8px}
  .site-header > .home-wordmark .home-wordmark-title{font-size:1.65rem}
  .site-header > .home-wordmark small{font-size:.36rem;letter-spacing:.16em}
  .site-header > nav {
    gap: 14px;
    max-width: 100%;
    overflow-x: auto;
  }
}

/* Nur horizontale Ausrichtung der Startseiten-Kopfzeile. */
.site-header.wide {
  width: calc(100% - 48px);
  justify-content: space-between;
}
.site-header > nav { margin-left: auto; }
@media (max-width: 700px) {
  .site-header.wide { width: calc(100% - 36px); }
}

/* Responsive ausschließlich für die normale Startseite.
   Die Desktop-Referenz bleibt oberhalb dieser Breiten unverändert. */
@media (max-width: 1100px) {
  .site-header.wide {
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    padding-block: 18px;
  }

  .site-header > nav {
    width: 100%;
    margin-left: 0;
    justify-content: center;
    flex-wrap: wrap;
    white-space: normal;
    overflow-x: visible;
  }
}

@media (max-width: 1000px) {
  /* Das Titelbild bleibt vollständig innerhalb der verfügbaren Breite. */
  #inhalt > .hero > .hero-art {
    width: min(100%, calc(100vw - 32px));
  }

  #inhalt > .home-lower-world > .home-card,
  #inhalt > .home-lower-world > .home-card > *,
  #vorgeschmack .story,
  #buecher .book {
    min-width: 0;
  }
}

@media (max-width: 900px) {
  /* Vier Bücher werden rechtzeitig zu zwei gut lesbaren Spalten. */
  #buecher .book-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 640px;
  }
}

@media (max-width: 840px) and (min-width: 701px) {
  /* Die drei Vorschauen erhalten bei schmalem Desktop zwei lesbare Spalten. */
  #vorgeschmack .story-grid {
    width: calc(100% - 48px);
    max-width: 680px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 48px;
  }

  #vorgeschmack .story:nth-child(3) {
    grid-column: 1 / -1;
    width: calc((100% - 24px) / 2);
    justify-self: center;
  }
}

@media (max-width: 700px) {
  .site-header.wide { padding-block: 15px; }

  .site-header > nav {
    gap: 12px 16px;
  }

  #inhalt > .hero > .hero-art {
    width: 100%;
  }

  #vorgeschmack .story-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  #vorgeschmack .story:nth-child(3) {
    grid-column: auto;
    width: 100%;
    justify-self: stretch;
  }
}

@media (max-width: 460px) {
  /* Auf sehr schmalen Ansichten bleibt jedes Buch groß genug zum Antippen. */
  #buecher .book-grid {
    grid-template-columns: minmax(0, 1fr);
    max-width: 280px;
  }

  .site-header > .home-wordmark {
    justify-content: center;
    flex-wrap: wrap;
    row-gap: 6px;
    white-space: normal;
  }

  .site-header > .home-wordmark small {
    flex-basis: 100%;
    text-align: center;
  }
}

@media (max-width: 360px) {
  #vorgeschmack .story-grid { width: calc(100% - 28px); }

  .preview .listen a,
  .preview .listen button {
    min-width: 0;
    padding-inline: 14px;
    overflow-wrap: anywhere;
  }
}

/* Social-Media-Icons in der bestehenden Startseiten-Navigation. */
.site-header > nav { align-items: center; }
.home-social-links {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-inline: -10px;
}
.home-social-links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  color: inherit;
  text-decoration: none;
}
.home-social-links svg { width: 22px; height: 22px; }
.home-social-links a[href*="tiktok.com"] svg { width: 24px; height: 24px; }
@media (min-width: 1101px) and (max-width: 1280px) {
  .site-header.wide { flex-wrap: wrap; justify-content: center; padding-block: 18px; }
  .site-header > nav { width: 100%; margin-left: 0; justify-content: center; flex-wrap: wrap; }
}
@media (max-width: 1000px) {
  .home-social-links { margin-inline: 0; }
}

/* Kleine Hover-Hinweise ohne Einfluss auf die Navigationsanordnung. */
.home-social-links a { position: relative; }
.home-social-tooltip { display: none; }
@media (hover: hover) and (pointer: fine) {
  .home-social-tooltip {
    display: block;
    position: absolute;
    top: calc(100% + 2px);
    left: 50%;
    transform: translateX(-50%);
    padding: 1px 4px;
    border-radius: 3px;
    background: #fcf9f3;
    color: #443346;
    font-size: 11px;
    font-weight: 400;
    line-height: 1.4;
    white-space: nowrap;
    visibility: hidden;
    pointer-events: none;
  }
  .home-social-links a:hover .home-social-tooltip { visibility: visible; }
}