/* Runde 2: lokale Bildwelten, ruhige Ebenen, Systemfarbmodus. */
:root {
  --scene-wash: rgb(251 247 238 / 12%);
  --scene-copy: rgb(251 247 238 / 94%);
  --scene-surface: #fbf7ee;
  --focus: #7a1f2b;
  color-scheme: light;
}
:root[data-theme="dark"] {
  --farbe-hintergrund: #181417; --farbe-hintergrund-alt: #251d21;
  --farbe-karte: #2e2428; --farbe-text: #f7eedf; --farbe-text-mild: #dfcebc;
  --farbe-wein: #f0c397; --farbe-wein-dunkel: #ffe1bb;
  --farbe-gold-text: #e2bd80; --farbe-rahmen: #6e5557;
  --scene-wash: rgb(24 20 23 / 20%); --scene-surface: #181417;
  --scene-copy: rgb(24 20 23 / 90%);
  --focus: #f0c397; color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --farbe-hintergrund: #181417; --farbe-hintergrund-alt: #251d21;
    --farbe-karte: #2e2428; --farbe-text: #f7eedf; --farbe-text-mild: #dfcebc;
    --farbe-wein: #f0c397; --farbe-wein-dunkel: #ffe1bb;
    --farbe-gold-text: #e2bd80; --farbe-rahmen: #6e5557;
    --scene-wash: rgb(24 20 23 / 20%); --scene-surface: #181417;
    --scene-copy: rgb(24 20 23 / 90%);
    --focus: #f0c397; color-scheme: dark;
  }
}
[hidden] { display: none !important; }
:where(a,button,input,select):focus-visible { outline-color: var(--focus); }
.theme-control { display: inline-flex; align-items: center; gap: 8px; font-size: .8rem; margin-left: auto; }
.theme-control select, .share button, .video-toggle { font: inherit; color: var(--farbe-text); background: var(--farbe-karte); border: 1px solid var(--farbe-rahmen); padding: 10px 12px; border-radius: 4px; min-height: 44px; }
.hero { background: radial-gradient(ellipse at 50% 0%,var(--farbe-karte),transparent 85%),var(--farbe-hintergrund-alt); }
.btn-primary, nav.main-nav a.nav-spende { background: #7a1f2b; border-color: #7a1f2b; color: #fff; }
.btn-primary:hover, nav.main-nav a.nav-spende:hover { background: #5a1620; color: #fff; }
.btn-secondary { background: var(--farbe-hintergrund); color: var(--farbe-wein); }
.btn-secondary:hover { background: var(--farbe-karte); color: var(--farbe-wein-dunkel); }
.scene-hero, .category-card { isolation: isolate; position: relative; overflow: hidden; }
.scene-picture, .scene-picture img, .hero-video { position: absolute; inset: 0; width: 100%; height: 100%; }
.scene-picture { z-index: -3; background: linear-gradient(145deg,#e6c98b,#6c3434); }
.scene-picture img, .hero-video { object-fit: cover; object-position: center; }
.hero-video { z-index: -2; }
.scene-hero::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg,var(--scene-wash),var(--scene-wash) 75%,var(--scene-surface)); }
.home .scene-hero { padding-top: clamp(64px,9vw,132px); }
.scene-hero .container { position: relative; background: var(--scene-copy); border-radius: 12px; padding: 28px; width: calc(100% - 48px); box-shadow: 0 0 32px 12px var(--scene-copy); }
.home .scene-hero > .container { max-width: 620px; margin-left: max(24px,calc((100% - 1080px) / 2)); text-align: left; }
.home .scene-hero h1 { font-size: clamp(2rem,3.8vw,3.2rem); }
.home .scene-hero .button-row { justify-content: flex-start; }
.home .hero-picture, .home .hero-video { height: min(100%,900px); }
.video-toggle { position: relative; display: block; margin: 0 auto 20px; }
.category-card { padding: 192px 28px 52px; min-height: 390px; background: var(--farbe-karte); }
.category-card::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg,transparent 75px,var(--farbe-karte) 180px); }
.category-card:hover { background: var(--farbe-karte); }
.category-card h3 { font-size: 1.45rem; }
.category-card .scene-picture img { object-position: center top; }
.category-card p { color: var(--farbe-text-mild); }
.collection-image { height: clamp(160px,25vw,270px); position: relative; isolation: isolate; margin-bottom: 28px; border: 1px solid var(--farbe-rahmen); border-radius: 5px; overflow: hidden; }
.cover-art { width: 100%; aspect-ratio: 2 / 3; position: relative; isolation: isolate; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12%; overflow: hidden; background: linear-gradient(145deg,#63373b,#241016); color: #fbf7ee; text-align: center; padding: 14% 10%; font-family: var(--schrift-serif); text-decoration: none; }
.cover-picture, .cover-picture img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -3; }
.cover-art::before { content: ''; position: absolute; inset: 0; background: rgb(26 12 14 / 8%); z-index: -2; }
.cover-art::after { content: ''; position: absolute; inset: 5%; border: 1px solid #c9a45c; border-left-width: 3px; z-index: -1; }
.cover-title { display: block; font-size: clamp(.65rem,1.2vw,1.05rem); line-height: 1.35; overflow-wrap: anywhere; text-wrap: balance; }
.cover-author { display: block; font-size: .65rem; color: #fbf7ee; }
.cover-title, .cover-author { background: rgb(26 12 14 / 78%); padding: .3em .4em; border-radius: 2px; color: #fbf7ee; text-shadow: 0 1px 2px #1a0c0e; }
/* Runde 6: 59 % sichern mindestens 4,52:1 auch über reinem Weiss. */
@media (width < 600px) {
  .cover-art::before { background: rgb(26 12 14 / 0%); }
  .cover-title, .cover-author {
    background: rgb(26 12 14 / 59%);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
  }
}
.cover-art.book-cover { width: 92px; height: 138px; padding: 12px 9px; gap: 12px; }
.book-cover .cover-title { font-size: .64rem; line-height: 1.18; }
.book-cover .cover-author { font-size: .5rem; }
.book-band a { display: block; text-decoration: none; }
.book-band .cover-art { min-height: 225px; }
.book-band .cover-picture img { height: 100%; }
.book-hero-layout { display: grid; grid-template-columns: 220px minmax(0,1fr); align-items: center; gap: clamp(30px,5vw,72px); max-width: 1050px; text-align: left; }
.book-hero .detail-cover { width: 220px; height: 330px; padding: 28px 24px; box-shadow: 8px 14px 30px rgb(0 0 0 / 18%); }
.detail-cover .cover-title { font-size: 1.3rem; }
.detail-cover .cover-author { font-size: .95rem; }
.book-hero .lead { margin-left: 0; }
.reading-copy { max-width: 800px; }
.reading-copy p { line-height: 1.95; }
.reading-section { background: radial-gradient(ellipse at 0% 50%,var(--farbe-hintergrund-alt),transparent 75%); border-block: 1px solid var(--farbe-rahmen); }
.share { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; padding-top: 32px; padding-bottom: 40px; font-size: .85rem; }
.share > span:first-child { font-family: var(--schrift-serif); font-size: 1.15rem; }
.share a { padding-block: 10px; text-decoration: underline; }
.copy-status { flex-basis: 100%; }
.donation-panel { margin: 32px 0; padding: 28px; background: var(--farbe-hintergrund-alt); border: 1px solid var(--farbe-rahmen); border-radius: 5px; }
.hinweisbox { background: var(--farbe-hintergrund-alt); }
.platzhalter { color: var(--farbe-text-mild); }
.site-footer { background: #321a20; color: #f7eedf; }
.site-footer a, .site-footer h4 { color: #f1d9a8; }
.site-footer a:hover { color: white; }
@keyframes quiet-arrival { from { opacity: .65; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes light-drift { from { transform: scale(1.04) translateY(-1%); } to { transform: scale(1.04) translateY(1%); } }
@media (prefers-reduced-motion: no-preference) {
  .reveal { animation: quiet-arrival .9s ease-out both; }
  @supports (animation-timeline: view()) {
    .hero-picture { animation: light-drift linear both; animation-timeline: view(); animation-range: exit 0% exit 100%; }
  }
}
@media (max-width: 640px) {
  .home .scene-hero { padding-top: 270px; }
  .home .hero-picture, .home .hero-video { height: 440px; }
  .home .hero-picture img, .home .hero-video { object-position: 74% top; }
  .home .scene-hero > .container { margin-inline: auto; width: calc(100% - 32px); padding: 20px; }
  .theme-control { margin-inline: auto; }
  .category-card { padding: 190px 24px 48px; min-height: 365px; }
  .book-hero-layout { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 28px; }
  .book-hero .detail-cover { width: 180px; height: 270px; }
  .book-hero .detail-cover .cover-title { font-size: 1.05rem; }
  .cover-art.book-cover { width: 78px; height: 117px; padding: 10px 8px; gap: 7px; }
  .book-cover .cover-title { font-size: .56rem; }
  .book-band .cover-art { min-height: 173px; }
  .book-band .cover-title { font-size: .8rem; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .hero-video, .video-toggle { display: none !important; }
}
/* Auch vorhandene Hinweis- und Fusszeilenregeln im dunklen Modus lesbar halten. */
footer.site-footer { background: #321a20; color: #f7eedf; }
.hinweisbox, .hinweisbox strong { color: var(--farbe-text); }
.platzhalter { background: var(--farbe-hintergrund); }
.skip-link { background: var(--farbe-karte); }
.book-item .book-title:focus-visible::after { outline-color: var(--focus); }
/* Leser-Bedienung folgt ebenfalls dem Farbmodus; PDF-Seiten behalten ihre Originalfarben. */
.reader { background: var(--farbe-hintergrund-alt); color: var(--farbe-text); }
.reader-help { color: var(--farbe-text-mild); }
.reader .page-text { background: var(--farbe-karte); color: var(--farbe-text); }
.reader-status.error { color: var(--farbe-wein); }
/* Runde 3: Navigation bleibt ohne JavaScript offen. */
.header-panel { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; order: 1; }
.menu-toggle { display: none; font: inherit; color: var(--farbe-text); background: var(--farbe-karte); border: 1px solid var(--farbe-rahmen); border-radius: 6px; min-height: 44px; padding: 8px 12px; }
.header-donate { order: 2; display: inline-flex; align-items: center; min-height: 44px; padding: 8px 12px; border-radius: 6px; background: #7a1f2b; color: #fff; font-size: .95rem; }
.header-donate:hover { background: #5a1620; color: #fff; }
@media (max-width: 640px) {
  .site-header .container { justify-content: space-between; gap: 10px; padding: 10px 16px; min-height: 64px; }
  .site-header .brand { gap: 8px; margin-right: auto; min-width: 0; }
  .site-header .brand img { width: 34px; height: 34px; }
  .site-header .brand-text { font-size: .76rem; max-width: 108px; line-height: 1.25; }
  .site-header .brand-text small { display: none; }
  .menu-toggle { display: inline-flex; align-items: center; order: 1; font-size: .85rem; }
  .header-donate { font-size: .85rem; }
  .header-panel { order: 3; width: 100%; flex-direction: column; align-items: stretch; gap: 12px; padding-block: 8px; }
  .site-header[data-menu-ready="true"][data-menu-open="false"] .header-panel { display: none; }
  .header-panel nav.main-nav { margin: 0; flex-direction: column; }
  .header-panel nav.main-nav a { min-height: 44px; padding: 10px 12px; }
  .header-panel .theme-control { margin-left: 12px; margin-right: auto; }
}
@media (max-width: 359px) {
  .site-header .brand-text { display: none; }
}

/* Runde 4: ruhiges Glas. Hohe Deckkraft sichert Schrift auch über Bildern ab. */
:root {
  --radius: 26px;
  --schatten: 0 10px 30px rgb(0 0 0 / 8%);
  --glass: rgb(251 247 238 / 94%);
  --glass-solid: #fbf7ee;
  --glass-edge: rgb(255 255 255 / 65%);
  --glass-inner: inset 0 1px 0 rgb(255 255 255 / 50%);
  --soft-edge: rgb(121 85 30 / 14%);
  --lift-shadow: 0 16px 38px rgb(0 0 0 / 12%);
  --ease-glass: cubic-bezier(.2,.8,.2,1);
}
:root[data-theme="dark"] {
  --glass: rgb(35 28 33 / 92%);
  --glass-solid: #231c21;
  --glass-edge: rgb(255 255 255 / 14%);
  --glass-inner: inset 0 1px 0 rgb(255 255 255 / 18%);
  --soft-edge: rgb(255 255 255 / 12%);
  --schatten: 0 10px 30px rgb(0 0 0 / 18%);
  --lift-shadow: 0 16px 38px rgb(0 0 0 / 25%);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --glass: rgb(35 28 33 / 92%);
    --glass-solid: #231c21;
    --glass-edge: rgb(255 255 255 / 14%);
    --glass-inner: inset 0 1px 0 rgb(255 255 255 / 18%);
    --soft-edge: rgb(255 255 255 / 12%);
    --schatten: 0 10px 30px rgb(0 0 0 / 18%);
    --lift-shadow: 0 16px 38px rgb(0 0 0 / 25%);
  }
}
html { scroll-padding-top: 210px; }
h1, h2, h3, h4 { letter-spacing: -.025em; }
h1 { letter-spacing: -.035em; }
section { padding-block: 68px; }
.grid, .book-list { gap: 26px; }
.card, .book-item, .donation-panel, .hinweisbox, .page-text {
  border-radius: var(--radius);
  border: 1px solid var(--soft-edge);
  box-shadow: var(--schatten);
}
.card { padding: 32px; }
.category-card { padding: 192px 28px 52px; }
.category-card:hover { border-color: var(--soft-edge); }
.card img { border-radius: 20px; }
.category-card .scene-picture, .category-card .scene-picture img { border-radius: 25px; }
.book-item { padding: 24px; }
.book-item .book-title::after { border-radius: 26px; }
.cover-link, .book-cover, .cover-art, .book-band a, .book-band img,
.book-hero .detail-cover { border-radius: 16px; }
.cover-art::after { border-radius: 12px; border-left-width: 1px; }
.cover-link, .book-band a, .book-hero .detail-cover { box-shadow: var(--schatten); }
.hero {
  margin: 22px clamp(12px, 2.5vw, 36px) 32px;
  border: 1px solid var(--soft-edge);
  border-radius: 28px;
  overflow: hidden;
}
.scene-hero .container { border-radius: 26px; box-shadow: var(--schatten); }
.collection-image { border-radius: 28px; border-color: var(--soft-edge); box-shadow: var(--schatten); }
.book-category h2, .reading-section, .sequence a { border-color: var(--soft-edge); border-width: 1px; }
footer.site-footer { border-top-width: 1px; border-color: var(--soft-edge); }

header.site-header, .share, .hinweisbox, .donation-panel, .reader-toolbar {
  background: var(--glass);
  border: 1px solid var(--glass-edge);
  box-shadow: var(--glass-inner), var(--schatten);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  backdrop-filter: blur(20px) saturate(160%);
  color: var(--farbe-text);
}
header.site-header {
  position: sticky;
  top: 10px;
  width: calc(100% - 24px);
  max-width: 1240px;
  margin: 10px auto 0;
  border-radius: 22px;
}
.site-header .container { gap: 12px 18px; min-height: 80px; }
.share { width: calc(100% - 40px); margin: 28px auto 40px; padding: 24px 28px; border-radius: 26px; }
.hinweisbox, .donation-panel { padding: 24px 28px; }
.copy-status:empty { display: none; }

button, .btn, .header-donate, nav.main-nav a, .share button, .video-toggle,
.menu-toggle, .reader button { border-radius: 999px; }
input, select, textarea, .theme-control select, .reader input, .reader select { border-radius: 14px; }
.theme-control select, .share button, .video-toggle, .menu-toggle,
.reader button, .reader input, .reader select {
  border: 1px solid var(--soft-edge);
  background: var(--farbe-karte);
  color: var(--farbe-text);
}
.btn { border-width: 1px; }
.reader button:hover:not(:disabled) { background: var(--farbe-wein); color: var(--farbe-hintergrund); }

/* Die Leiste bleibt im Dokumentfluss und kann deshalb keine letzten Zeilen verdecken.
   bottom hält sie während des Lesens am unteren Fensterrand, auch im Vollbild. */
.reader { display: flex; flex-direction: column; border-color: var(--soft-edge); padding-top: 24px; }
.reader > * { flex-shrink: 0; }
.reader .page-stage { width: 100%; }
.reader .page-text { width: min(100%, 780px); }
.reader-toolbar {
  order: 10;
  position: sticky;
  bottom: max(12px, env(safe-area-inset-bottom));
  z-index: 30;
  align-self: center;
  width: fit-content;
  max-width: 100%;
  margin: 20px auto 0;
  padding: 18px 28px;
  border-radius: 999px;
  gap: 12px 20px;
}
.reader-toolbar fieldset { min-width: 0; max-width: 100%; gap: 12px 20px; }
.reader-toolbar :disabled { opacity: 1; color: var(--farbe-text-mild); }
.reader-toolbar fieldset:disabled { opacity: 1; }
.reader-toolbar button:disabled { border-style: dashed; }
.reader:fullscreen { padding-bottom: 24px; }

/* Ruhige Bedienbewegung statt dauernder Bild- und Scroll-Animationen. */
.reveal, .category-card.reveal, .book-band-track, .hero-picture { animation: none; }
.book-band a, .book-band a:hover { translate: none; }
.card, .book-item, .book-band a, .btn, button, nav.main-nav a, .header-donate, input, select, textarea {
  transition: transform 300ms var(--ease-glass), box-shadow 300ms var(--ease-glass),
    background-color 300ms var(--ease-glass), border-color 300ms var(--ease-glass), color 300ms var(--ease-glass);
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .card:has(a):hover, a.card:hover, .book-item:hover, .book-band a:hover,
  .btn:hover, button:not(:disabled):hover, nav.main-nav a:hover, .header-donate:hover {
    transform: translateY(-2px);
    box-shadow: var(--lift-shadow);
  }
}
a.card:focus-visible, .card:focus-within, .book-item:focus-within, .book-band a:focus-visible,
.btn:focus-visible, button:focus-visible, nav.main-nav a:focus-visible, .header-donate:focus-visible {
  transform: translateY(-2px);
  box-shadow: var(--lift-shadow);
}
@media (max-width: 640px) {
  html { scroll-padding-top: 100px; }
  section { padding-block: 48px; }
  .site-header .container { min-height: 64px; gap: 8px; padding: 10px; }
  .site-header .header-panel {
    background: var(--glass);
    border: 1px solid var(--glass-edge);
    border-radius: 22px;
    box-shadow: var(--glass-inner), var(--schatten);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    backdrop-filter: blur(20px) saturate(160%);
    padding: 12px;
    max-height: calc(100dvh - 110px);
    overflow-y: auto;
  }
  .header-panel .theme-control { flex-wrap: wrap; margin: 0 12px; }
  .hero { margin-top: 18px; }
  .home .scene-hero > .container { width: calc(100% - 24px); padding: 24px 20px; }
  .card { padding: 28px; }
  .category-card { padding: 190px 24px 48px; }
  .book-item { padding: 20px; }
  .share { width: calc(100% - 24px); padding: 22px; }
  .reader-toolbar { border-radius: 32px; padding: 16px 12px; gap: 12px; }
  .reader-toolbar fieldset { gap: 12px; }
}
/* Kleine Querformatfenster: Bedienelemente bleiben erreichbar, Buch bleibt sichtbar. */
@media (max-height: 500px) {
  .reader-toolbar { position: static; border-radius: 28px; }
  .site-header .header-panel { max-height: 55dvh; }
}
@supports not ((backdrop-filter: blur(20px)) or (-webkit-backdrop-filter: blur(20px))) {
  header.site-header, .site-header .header-panel, .share, .hinweisbox, .donation-panel, .reader-toolbar {
    background: var(--glass-solid);
  }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .card, .book-item, .book-band a, .btn, button, nav.main-nav a, .header-donate { transform: none !important; translate: none !important; }
}