body{background:#000;color:#d4af7f;font-family:Garamond,serif;margin:0;padding:0;font-size:1.1rem;line-height:1.6}
main{max-width:900px;margin:6rem auto 4rem;padding:0 1rem}
header{text-align:center;padding-top:5rem}
.logo{width:200px;filter:drop-shadow(0 0 12px rgba(212,175,127,.6));animation:pulse 3s infinite ease-in-out}
@keyframes pulse{0%{transform:scale(1);opacity:1}50%{transform:scale(1.02);opacity:.9}100%{transform:scale(1);opacity:1}}
nav{background:rgba(17,17,17,.9);padding:1rem;text-align:center;position:sticky;top:0;z-index:1000;border-bottom:1px solid #d4af7f}
nav a{margin:0 .5rem;color:#d4af7f;text-decoration:none;font-weight:bold}
nav a:hover{text-decoration:underline}
.ornament{width:80px;height:2px;background:linear-gradient(to right,transparent,#d4af7f,transparent);margin:1.2rem auto}
footer{background:#111;text-align:center;padding:2rem 1rem;font-size:.9rem;color:#777;border-top:1px solid #d4af7f}
.buch-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:2rem;margin-top:2rem}
.buch-kategorie{border:1px solid #d4af7f;padding:1.2rem;border-radius:10px;background:#111;color:#c5aa7b;text-align:center;transition:all .2s ease}
.buch-kategorie:hover{box-shadow:0 0 12px rgba(212,175,127,.5);transform:translateY(-2px)}
.buch-kategorie h3{color:#d4af7f;margin:.2rem 0 .6rem}
.book-item{display:grid;grid-template-columns:200px 1fr;gap:1rem;align-items:start;margin:1.2rem 0 2rem}
.book-item .cover{border:1px solid #d4af7f;border-radius:8px;overflow:hidden;background:#111}
.book-item .cover img{display:block;width:100%;height:auto}
.book-item .meta h3{margin:0 0 .4rem;color:#d4af7f}
.book-item .meta .description{margin:0 0 .9rem;color:#c5aa7b}
.review{border:1px solid #d4af7f;border-left-width:3px;border-radius:8px;padding:.8rem;background:#0f0f0f;color:#c5aa7b;font-style:italic}
.review .cite{display:block;margin-top:.5rem;color:#8e7a5d;font-style:normal;font-size:.9rem;text-align:right}
.barriere-badge{position:fixed;bottom:20px;right:14px;background:#111;color:#c5aa7b;border:1px solid #d4af7f;padding:6px 10px;border-radius:6px;box-shadow:0 0 6px rgba(212,175,127,.4);text-decoration:none;z-index:1001;transition:all .3s ease}
.barriere-badge:hover{background:#1a1a1a;color:#e6c994;box-shadow:0 0 12px rgba(212,175,127,.7)}
@media(max-width:720px){.book-item{grid-template-columns:1fr}.book-item .cover{max-width:240px;margin:0 auto}}
/* --- Aureus: Wasserzeichen nur in Vorschaubildern --- */
.gallery .thumb { position: relative; background:#111; }
.gallery .thumb::after{
  content:"";
  position:absolute; inset:0;
  background: url("../img/logo.png") center / clamp(160px, 38%, 440px) no-repeat;
  opacity:.18;                 /* bei Bedarf 0.14–0.26 anpassen */
  mix-blend-mode: multiply;    /* Weiß verschwindet, Logo bleibt edel */
  pointer-events: none;
}
/* --- Aureus: Karten-Layout zentrieren --- */
.buch-grid{ justify-items:center; }
.buch-kategorie{ max-width:420px; margin:0 auto; text-align:center; }
.buch-kategorie.kachel{ display:block; text-decoration:none; color:inherit; }
/* --- Mobile: horizontales Scroll-Menü --- */
nav{
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
  scrollbar-width: none;      /* Firefox: Scrollbar ausblenden */
  white-space: nowrap;        /* Sicherheitsgurt */
}
nav::-webkit-scrollbar{ display: none; } /* WebKit: Scrollbar ausblenden */

nav a{
  flex: 0 0 auto;             /* Links nicht schrumpfen */
  scroll-snap-align: start;
}

@media (max-width: 820px){
  nav{ justify-content: flex-start !important; padding-inline: .5rem; gap: .25rem; }
  nav a{ padding: .5rem .75rem; }
}
/* Standard: Logo groß (Startseite) */
header .logo {
    width: 180px;
    transition: width 0.3s ease;
}

/* Logo auf Unterseiten automatisch kleiner */
header .logo[data-subpage="true"] {
    width: 120px;
}


/* --- Aureus: Content-Link-Farben & Galerie-Links (für Bücher-Untermenü) --- */
main a { 
  color: #d4af7f;
  text-decoration: none;
}
main a:hover { 
  text-decoration: underline;
}
.gallery a { 
  color: inherit;
  text-decoration: none;
}
.gallery a:hover { text-decoration: underline; }

/* --- Aureus: Kachel-Buttons (Bücher) im Gold-Stil --- */
.buch-kategorie button{
  display:inline-block;
  padding:.7rem 1.1rem;
  border:2px solid #d4af7f;
  border-radius:12px;
  background:transparent;
  color:#d4af7f;
  font-weight:600;
  letter-spacing:.02em;
  cursor:pointer;
  transition: all .2s ease;
  box-shadow: 0 0 0 rgba(0,0,0,0);
}
.buch-kategorie button:hover{
  background:#d4af7f;
  color:#111;
  box-shadow:0 0 12px rgba(212,175,127,.45);
}
.buch-kategorie .ornament{ margin:.8rem auto 1rem; }

/* === Aureus A11y + Mobile Additions (non-destructive) === */
/* Skip link (visible on focus) */
.skip-link{
  position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden;
}
.skip-link:focus{
  position:fixed; left:12px; top:12px; width:auto; height:auto; padding:.5rem .75rem;
  background:#111; color:#d4af7f; border:1px solid #d4af7f; border-radius:8px; z-index:2000;
}

/* Focus ring */
:where(a, button, [tabindex]):focus{
  outline:2px solid #d4af7f;
  outline-offset:3px;
}

/* Barrierefreiheit Badge + Panel */
.barriere-badge{
  position:fixed; bottom:16px; right:14px; background:#111; color:#c5aa7b;
  border:1px solid #d4af7f; padding:8px 12px; border-radius:8px;
  box-shadow:0 0 8px rgba(212,175,127,.45); cursor:pointer; z-index:1500;
}
.barriere-panel{
  position:fixed; bottom:64px; right:14px; background:#0e0e0e; border:1px solid #d4af7f;
  border-radius:10px; padding:.75rem; width:min(92vw, 320px);
  box-shadow:0 0 14px rgba(212,175,127,.4); display:none; z-index:1501;
}
.barriere-panel h4{ margin:.2rem 0 .5rem; color:#d4af7f; font-size:1rem; }
.barriere-panel .row{ display:flex; align-items:center; justify-content:space-between; gap:.5rem; padding:.35rem 0; }
.barriere-panel label{ color:#c5aa7b; font-size:.95rem; }
.barriere-panel input[type="checkbox"]{ transform: scale(1.15); }

/* A11y modes via html classes */
html.a11y-contrast{ --gold:#f0d39f; --bg-dark:#000; }
html.a11y-contrast body{ color:var(--gold); background:var(--bg-dark); }
html.a11y-large{ font-size:112%; }
html.a11y-nomotion .logo, html.a11y-nomotion .ornament{ animation:none !important; }
html.a11y-underline main a{ text-decoration: underline; }

/* Mobile tap targets & wrapping */
@media (max-width: 768px){
  nav a{ padding:.75rem 1rem; display:inline-block; line-height:1.2; }
  h1{ font-size: clamp(1.6rem, 5vw, 2.4rem); }
  .buch-grid{ grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap:1.25rem; }
  .buch-kategorie button{ padding:.75rem 1rem; }
}

/* === Aureus: Animationsfeinschliff (Logo vs. Ornament) === */
/* 1) Standard: Logo-Animation global aus, wir schalten sie nur auf der Startseite an */
.logo{ animation: none !important; }

/* 2) Startseite: großes Logo darf sanft pulsieren */
header .logo:not([data-subpage="true"]){
  animation: pulse 3s infinite ease-in-out !important;
}

/* 3) Unterseiten: nur die Querlinien (Ornamente) pulsieren leicht */
header .ornament{
  animation: ornamentPulse 1.8s infinite ease-in-out alternate;
}

@keyframes ornamentPulse{
  0%{ opacity:.35; width:60px; }
  100%{ opacity:1; width:90px; }
}

/* A11y „weniger Bewegung“ schaltet alles zuverlässig aus */
html.a11y-nomotion .logo,
html.a11y-nomotion .ornament{
  animation: none !important;
}

/* === Hotfix: Ensure start-page logo pulses; subpage logos static; ornaments pulse === */
header .logo{ display:block; } /* safety */
header .logo:not([data-subpage="true"]){
  animation: pulse 3s infinite ease-in-out !important; /* Startseite */
}
header .logo[data-subpage="true"]{
  animation: none !important; /* Unterseiten: Logo ruhig */
}
header .ornament{
  animation: ornamentPulse 1.8s infinite ease-in-out alternate !important;
}
html.a11y-nomotion header .logo,
html.a11y-nomotion header .ornament{
  animation: none !important;
}

/* === Aureus Update: Logo ruhig, nur Ornamente pulsieren – Social Links blau === */
/* Logo: überall ruhig */
header .logo{ animation: none !important; }

/* Ornamente: sanftes Pulsieren auf allen Seiten */
header .ornament{ animation: ornamentPulse 1.8s infinite ease-in-out alternate !important; }
@keyframes ornamentPulse{
  0%{ opacity:.35; width:60px; }
  100%{ opacity:1; width:90px; }
}

/* Barrierefrei „Weniger Bewegung“: Animationen aus */
html.a11y-nomotion header .ornament{ animation: none !important; }

/* Social Media Links (Footer): blau, dezent */

footer a:hover{
  text-decoration: underline;
}

/* === Final tune: center logo, stop its animation; ensure ornaments pulse === */
header{ text-align:center; }
header .logo{ display:block; margin:0 auto; animation: none !important; }
header .ornament{ animation: ornamentPulse 1.8s infinite ease-in-out alternate !important; }
@keyframes ornamentPulse{ 0%{opacity:.35;width:60px} 100%{opacity:1;width:90px} }
html.a11y-nomotion header .ornament{ animation: none !important; }

/* === Hard stop for any logo animation; ornaments pulse === */
.logo, header .logo, header .logo:not([data-subpage="true"]){
  -webkit-animation: none !important;
  animation: none !important;
}
header{ text-align:center; }
header .ornament{ animation: ornamentPulse 1.8s infinite ease-in-out alternate !important; }
@keyframes ornamentPulse{ 0%{opacity:.35;width:60px} 100%{opacity:1;width:90px} }
html.a11y-nomotion header .ornament{ animation: none !important; }

/* === v11: Logo centered & still; ornaments pulse; a11y badge icon === */
header{ text-align:center; }
header .logo{ display:block; margin:0 auto; animation:none !important; }

/* Size rules: large on start, small on subpages (controlled by data-subpage) */
header .logo{ width: 180px; transition: width .3s ease; }
header .logo[data-subpage="true"]{ width: 120px; }

/* Ornaments */
header .ornament{ animation: ornamentPulse 1.8s infinite ease-in-out alternate !important; }
@keyframes ornamentPulse{ 0%{opacity:.35;width:60px} 100%{opacity:1;width:90px} }
html.a11y-nomotion header .ornament{ animation: none !important; }

/* Barrier-badge: small blue wheelchair + consistent position */
.barriere-badge{
  position:fixed; bottom:16px; right:14px;
  display:inline-flex; align-items:center; gap:.4rem;
  background:#111; color:#c5aa7b; border:1px solid #d4af7f;
  padding:.45rem .6rem; border-radius:10px; box-shadow:0 0 8px rgba(212,175,127,.45);
  font-size:.95rem;
}
.barriere-badge::before{
  content:"\267F"; /* ♿ */
  color:#3a86ff; font-size:1rem; line-height:1;
}

/* === v12 corrections === */
header{ text-align:center; }
/* Logo-Regeln sauber getrennt */
/* Unterseiten: Logo klein */
header .logo {
  display: block;
  margin: 0.5rem auto;
  width: 120px;
  max-width: 120px;
  height: auto;
  animation: none !important;
}

/* Startseite: Logo groß & pulsierend */
header .logo:not([data-subpage="true"]) {
  width: 180px;
  max-width: 180px;
  animation: pulse 3s infinite ease-in-out !important;
}

header .ornament{ animation: ornamentPulse 1.8s infinite ease-in-out alternate !important; }
@keyframes ornamentPulse{ 0%{opacity:.35;width:60px} 100%{opacity:1;width:90px} }
html.a11y-nomotion header .ornament{ animation:none !important; }
/* Info: niemals Inhalt abschneiden */
header, main, .content, .container {
  overflow: visible !important;
  max-height: none !important;
}

/* === INFO scoped: prevent clipping & reserve space for bottom panel (offline safe) === */
.info main, .info #main, .info .content, .info .container {
  overflow: visible !important;
  padding-bottom: 8rem;
}
@media (max-width: 600px) {
	.info main, .info #main, .info .content, .info .container {
    padding-bottom: 10rem;
  }
}
/* --- Aureus: Edition & Extras Kacheln identisch zu Bücher --- */
.buch-kategorien {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* gleiche Logik wie Bücher */
  gap: 2rem;
  margin-top: 2rem;
  justify-items: center;
}

.buch-kategorien .buch-kategorie {
  width: 250px;        /* gleiche Breite wie bei Bücher */
  min-height: 160px;   /* kompakte Höhe */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* Kontaktseite – E-Mail-Links */



/* Kontaktseite – E-Mail-Links */



/* Footer-Links allgemein */


/* Interne Links (Impressum & Datenschutz) → Gold */



/* Externe Links (YouTube & Telegram) → dauerhaft Blau */


/* Footer interne Links (Impressum & Datenschutz) → immer Gold */



/* Footer externe Links (YouTube & Telegram) → dauerhaft Blau */

/* Kontaktseite – E-Mail-Links */
#main a[href^="mailto:"] {
  color: #d4af7f;            /* Standard: Gold */
  text-decoration: none;
  font-weight: 500;
  transition: color .3s ease;
}
#main a[href^="mailto:"]:hover {
  color: #f4d58d;            /* helleres Gold beim Hover */
  text-decoration: underline;
}

/* Footer-Links allgemein */
footer a {
  text-decoration: none;
  font-weight: 500;
  transition: color .3s ease;
}

/* Interne Links (Impressum & Datenschutz) → immer Gold */
footer a[href*="impressum"],
footer a[href*="datenschutz"] {
  color: #d4af7f !important;
}
footer a[href*="impressum"]:hover,
footer a[href*="datenschutz"]:hover {
  color: #d4af7f !important;
  text-decoration: underline;
}

/* Externe Links: YouTube & Telegram – Schrift bleibt Gold */
footer a[href*="youtube"],
footer a[href*="t.me"] {
  color: #d4af7f !important;   /* immer Gold */
}


/* Footer-Icons (YouTube, Telegram) – Hybrid */
footer .yt-icon,
footer .tg-icon {
  fill: #d4af7f;              /* Standard: Gold */
  transition: fill 0.3s ease;
  vertical-align: middle;
  margin-right: 4px;
  position: relative;
  top: -1px;
}

/* YouTube-Link: Hover Rot + Weiß */
footer a[href*="youtube"] {
  color: #d4af7f !important;   /* Standard: Gold */
}
footer a[href*="youtube"]:hover {
  color: #ffffff !important;   /* Schrift wird Weiß */
  text-decoration: underline;
}
footer .yt-icon {
  fill: #d4af7f;
  transition: fill 0.3s ease;
}
footer a[href*="youtube"]:hover .yt-icon {
  fill: #ff0000;               /* Logo wird Rot */
}

/* Telegram-Link: Hover Blau */
footer a[href*="t.me"] {
  color: #d4af7f !important;   /* Standard: Gold */
}
footer a[href*="t.me"]:hover {
  color: #0088cc !important;   /* Schrift wird Blau */
  text-decoration: underline;
}
footer .tg-icon {
  fill: #d4af7f;
  transition: fill 0.3s ease;
}
footer a[href*="t.me"]:hover .tg-icon {
  fill: #0088cc;               /* Logo wird Blau */
}
/* Hover-Effekt: Icons leicht vergrößern */
footer .yt-icon,
footer .tg-icon {
  transition: fill 0.3s ease, transform 0.3s ease;
}

footer a[href*="youtube"]:hover .yt-icon,
footer a[href*="t.me"]:hover .tg-icon {
  transform: scale(1.1);   /* 10% größer */
}
/* Aureus-Gold PayPal Button mit Logo */
.paypal-button {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #d4af7f;
  color: #000;
  font-weight: bold;
  padding: 0.8rem 1.5rem;
  border-radius: 8px;
  text-decoration: none;
  font-size: 1.1rem;
  transition: background 0.3s ease, transform 0.2s ease;
}

.paypal-button:hover {
  background: #f4d58d;
  transform: translateY(-2px);
}

.paypal-logo {
  height: 20px;
  display: inline-block;
}
/* Unterstützungs-Buttons */
.support-box {
  margin: 2rem 0;
  text-align: center;
  display: flex;
  gap: 20px;
  justify-content: center;
  flex-wrap: wrap;
}

.support-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #d4af7f;
  color: #000;
  font-weight: bold;
  padding: 0.8rem 1.2rem;
  border-radius: 8px;
  text-decoration: none;
  font-size: 1rem;
  transition: background 0.3s ease, transform 0.2s ease;
  min-width: 220px;          /* gleiche Breite für alle */
  justify-content: center;
}

.support-button:hover {
  background: #f4d58d;
  transform: translateY(-2px);
}

.support-logo {
  height: 20px;
  display: inline-block;
  vertical-align: middle;
}
/* Resonanzraum – Gestaltung der Stimmenboxen */
.resonanz-stimmen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
  margin: 2rem auto;
  max-width: 1100px;
  padding: 0 1rem;
}
.stimme-box {
  border: 1px solid #d4af7f;        /* goldene Umrandung */
  padding: 1.4rem;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.7);   /* dunkler Hintergrund */
  color: #d4af7f;                   /* goldene Schrift */
  font-style: normal;               /* kein Kursiv */
  font-size: 1,2rem;
  line-height: 1.8;
  box-shadow: 0 0 8px rgba(212, 175, 127, 0.2);
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.stimme-box strong {
  display: block;
  margin-top: 0.8rem;
  font-size: 0.9rem;
  color: #aaa;                      /* Name etwas dezenter */
  text-align: right;                /* Name rechtsbündig */
}

/* Formular-Button unten */
.stimme-button {
  display: inline-block;
  background: #d4af7f;
  color: #000;
  padding: 0.8rem 1.5rem;
  font-weight: bold;
  border: none;
  border-radius: 8px;
  margin: 2rem auto;
  cursor: pointer;
  transition: background 0.3s ease;
}

.stimme-button:hover {
  background: #b8935e;
}
/* ================================
   Resonanzraum – Gestaltung
   ================================ */

.resonanz-header {
  text-align: center;
  margin: 3rem auto 2rem auto;
  max-width: 800px;
  color: #d4af7f;
}

.resonanz-header p {
  font-size: 1.2rem;
  line-height: 1.6;
  color: #eee;
}

/* Container für Stimmen */
.resonanz-stimmen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
  margin: 2rem auto;
  max-width: 1100px;
  padding: 0 1rem;
}

/* Stimmenboxen */
.stimme-box {
  border: 1px solid #d4af7f;          /* goldene Umrandung */
  padding: 1.2rem;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.7);     /* dunkler Hintergrund */
  color: #d4af7f;                     /* goldene Schrift */
  font-style: normal;                 /* kein Kursiv */
  font-size: 1rem;
  line-height: 1.6;
  box-shadow: 0 0 8px rgba(212, 175, 127, 0.2);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.stimme-box.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Namen / Signaturen */
.stimme-box strong {
  display: block;
  margin-top: 0.8rem;
  font-size: 0.9rem;
  color: #aaa;                        /* dezenter als Gold */
  text-align: right;                  /* rechtsbündig */
  font-weight: normal;
}

/* Formular-Button */
.stimme-button {
  display: inline-block;
  background: #d4af7f;
  color: #000;
  padding: 0.8rem 1.5rem;
  font-weight: bold;
  border: none;
  border-radius: 8px;
  margin: 2rem auto;
  cursor: pointer;
  transition: background 0.3s ease;
}

.stimme-button:hover {
  background: #b8935e;
}
.book-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.8rem;
  align-items: stretch; /* <-- sorgt dafür, dass alle Karten gleich hoch gezogen werden */
}


.book-card {
  background: rgba(0,0,0,0.7);
  border: 1px solid #d4af7f;
  border-radius: 10px;
  padding: 1rem;
  text-align: center;
  transition: transform 0.2s;
}
.book-card:hover {
  transform: translateY(-5px);
}

.book-cover {
  width: 100%;
  height: auto;          /* behält Seitenverhältnis */
  max-height: 300px;     /* kannst du anpassen */
  object-fit: contain;   /* zeigt das ganze Cover – kein Beschnitt */
  border-radius: 6px;
  background: #000;      /* schwarze Ränder füllen auf (Letterbox) */
  box-shadow: 0 0 8px rgba(212,175,127,.4);
}


.book-card h2 {
  margin: 0.8rem 0;
  font-size: 1.1rem;
  color: #d4af7f;
}

.book-actions .btn {
  display: inline-block;
  margin: 0.3rem;
  padding: 0.5rem 0.9rem;
  border-radius: 6px;
  background: #d4af7f;
  color: #000;
  text-decoration: none;
}
.book-actions .btn:hover {
  background: #b8935e;
}

.book-detail-cover {
  max-width: 300px;
  border-radius: 8px;
  margin: 1rem 0;
}

.rezensionen blockquote {
  font-style: italic;
  font-size: 0.95rem;
  margin: 1rem 0;
  padding: 1rem;
  border-left: 3px solid #d4af7f;
  background: rgba(255, 215, 0, 0.05);
  border-radius: 6px;
}
.rezensionen strong {
  display: block;
  text-align: right;
  margin-top: 0.5rem;
  font-style: normal;
  color: #aaa;
}
.book-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.5rem;
  margin: 2rem auto;
  max-width: 1200px;
}

.book-card {
  background: rgba(0,0,0,0.7);
  border: 1px solid #d4af7f;
  border-radius: 10px;
  padding: 1rem;
  text-align: center;
  transition: transform 0.2s;
}
.book-card:hover {
  transform: translateY(-5px);
}

.book-cover {
  width: 100%;
  height: auto;          /* behält Seitenverhältnis */
  max-height: 300px;     /* kannst du anpassen */
  object-fit: contain;   /* zeigt das ganze Cover – kein Beschnitt */
  border-radius: 6px;
  background: #000;      /* schwarze Ränder füllen auf (Letterbox) */
  box-shadow: 0 0 8px rgba(212,175,127,.4);
}


.book-actions .btn {
  display: inline-block;
  margin: 0.3rem;
  padding: 0.5rem 0.9rem;
  border-radius: 6px;
  background: #d4af7f;
  color: #000;
  text-decoration: none;
}
.book-actions .btn:hover {
  background: #b8935e;
}

.book-detail-cover {
  max-width: 300px;
  border-radius: 8px;
  margin: 1rem 0;
}

.rezensionen blockquote {
  font-style: italic;
  font-size: 0.95rem;
  margin: 1rem 0;
  padding: 1rem;
  border-left: 3px solid #d4af7f;
  background: rgba(255, 215, 0, 0.05);
  border-radius: 6px;
}
.rezensionen strong {
  display: block;
  text-align: right;
  margin-top: 0.5rem;
  font-style: normal;
  color: #aaa;
}
.book-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%; /* <-- wichtig, sorgt für gleiche Höhe */
}

/* === Aureus Fix: Buttons immer unten in Kategorie-Karten === */
.buch-kategorie {
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* Text oben, Buttons unten */
}
.buch-kategorie button {
  margin-top: auto; /* Button immer an den unteren Rand */
}
/* --- Aureus Fix: Kategorie-Buttons unten fixieren --- */
.buch-grid .buch-kategorie {
  display: flex;
  flex-direction: column;
}

.buch-grid .buch-kategorie button {
  margin-top: auto;     /* schiebt Button zuverlässig nach unten */
  align-self: center;   /* optional mittig */
}
.autor-link {
  text-align: center;
  margin: 2rem 0 3rem 0; /* Abstand oben/unten */
}

.autor-btn {
  display: inline-block;
  width: 66%;               /* statt 80% → ca. 2/3 Breite */
  max-width: 500px;         /* etwas kleiner, wirkt edler */
  padding: 1rem 2rem;
  background: linear-gradient(135deg, #b87333, #d4af7f); /* Kupfer zu Gold */
  color: #000;
  font-size: 1.2rem;
  font-weight: bold;
  text-decoration: none;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.4);
  transition: background 0.3s ease, transform 0.2s ease;
}

.autor-btn:hover {
  background: linear-gradient(135deg, #d4af7f, #b87333);
  transform: scale(1.03);
}
.resonanz-stimmen {
  display: grid
}
/* --- Aureus Trailer (zentriert & edel) --- */
.youtube-trailer {
  text-align: center;
  margin: 3rem auto;
  max-width: 900px;
}

.youtube-trailer h2 {
  color: #d4af7f;
  margin-bottom: 1rem;
}

.video-container {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 Format */
  height: 0;
  overflow: hidden;
  max-width: 800px;       /* maximale Breite, mittig */
  margin: 0 auto;         /* sorgt für Zentrierung */
  box-shadow: 0 4px 14px rgba(212,175,127,0.4);
  border-radius: 12px;
}

.video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
/* --- Aureus Musikraum Buttons --- */
.musik-links {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  margin: 3rem auto;
  flex-wrap: wrap; /* sorgt für Umbruch auf kleinen Screens */
}

.musik-links .btn {
  display: inline-block;
  padding: 0.9rem 1.6rem;
  background: linear-gradient(135deg, #b87333, #d4af7f); /* Kupfer zu Gold */
  color: #000;
  font-weight: bold;
  border-radius: 10px;
  text-decoration: none;
  font-size: 1.1rem;
  box-shadow: 0 4px 12px rgba(0,0,0,0.45);
  transition: background 0.3s ease, transform 0.2s ease;
}

.musik-links .btn:hover {
  background: linear-gradient(135deg, #d4af7f, #b87333);
  transform: translateY(-2px);
}

/* Fix: Abstand Trailer im Musikraum */
body.musikraum .youtube-trailer {

/* --- Fix für Musikraum Trailer-Abstand --- */
.youtube-trailer {
  margin-top: 6rem !important;   /* Abstand Logo → Trailer */
}
.glow-text {
  color: #d4af7f;
  font-weight: bold;
  text-align: center;
  text-shadow: 0 0 6px rgba(212,175,127,0.8), 0 0 12px rgba(212,175,127,0.4);
  animation: glowPulse 2.5s ease-in-out infinite;
}

@keyframes glowPulse {
  0% {
    text-shadow: 0 0 6px rgba(212,175,127,0.8), 0 0 12px rgba(212,175,127,0.4);
    opacity: 1;
  }
  50% {
    text-shadow: 0 0 16px rgba(212,175,127,1), 0 0 28px rgba(212,175,127,0.6);
    opacity: 0.85;
  }
  100% {
    text-shadow: 0 0 6px rgba(212,175,127,0.8), 0 0 12px rgba(212,175,127,0.4);
    opacity: 1;
  }
}
/* --- Songs – kompakte Listenansicht (Aureus Magnus) --- */
.songs-page h1 { margin: 0 0 1rem; }

.songs-list {
  display: grid;
  gap: 0.9rem;
}

.song-row {
  display: grid;
  grid-template-columns: 128px 1fr auto;
  align-items: center;
  gap: 1rem;
  background: #0b0b0b;
  border: 1px solid #d4af7f;         /* warmes Gold */
  border-radius: 14px;
  padding: 0.75rem;
  text-decoration: none;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}

.song-row:hover,
.song-row:focus-visible {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(212,175,127,.18);
  border-color: #f4c879;              /* etwas heller bei Hover */
  outline: none;
}

.song-thumb {
  width: 128px;
  height: 72px;                       /* 16:9 */
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid #d4af7f;
  background: #111;
}

.song-meta { min-width: 0; }          /* erlaubt Ellipsis */
.song-title {
  margin: 0 0 .25rem;
  font-size: 1.05rem;
  line-height: 1.2;
  color: #f6e7c8;                      /* warmes, helles Gold */
}

.song-desc {
  margin: 0;
  font-size: .95rem;
  line-height: 1.35;
  color: #cdbb93;
  display: -webkit-box;
  -webkit-line-clamp: 2;              /* 2 Zeilen, dann … */
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.song-aside {
  display: grid;
  grid-auto-flow: column;
  align-items: center;
  gap: .6rem;
  justify-content: end;
  min-width: 5.5rem;
}

.song-duration {
  font-variant-numeric: tabular-nums;
  letter-spacing: .3px;
  color: #e5c78e;
}

.song-play {
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  border: 1px solid #d4af7f;
  font-weight: 700;
  line-height: 1;
  color: #0b0b0b;
  background: radial-gradient(120% 120% at 30% 20%, #f6c56b 0%, #d4af7f 60%, #c1996e 100%);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.25);
}

.song-row:hover .song-play { filter: brightness(1.05); }

/* Mobile – stapeln */
@media (max-width: 720px) {
  .song-row {
    grid-template-columns: 100px 1fr;
    grid-template-areas:
      "thumb meta"
      "thumb aside";
    align-items: start;
  }
  .song-thumb { width: 100px; height: 56px; grid-area: thumb; }
  .song-meta  { grid-area: meta; }
  .song-aside { grid-area: aside; justify-content: start; margin-top: .35rem; }
  .song-title { font-size: 1rem; }
  .song-desc  { -webkit-line-clamp: 3; }
}

/* Screenreader helper */
.sr-only {
  position: absolute!important;
  height: 1px; width: 1px;
  overflow: hidden; clip: rect(1px,1px,1px,1px);
  white-space: nowrap; border: 0; padding: 0; margin: -1px;
}
/* === Aureus Footer – Instagram-Hover-Feinschliff === */
footer a[href*="instagram"] {
  color: #d4af7f !important;          /* Grundfarbe Gold */
  text-decoration: none !important;   /* Kein Standard-Unterstrich */
}

footer a[href*="instagram"]:hover {
  color: #f4d58d !important;          /* etwas helleres Gold beim Hover */
  text-decoration: underline !important; /* sanfter goldener Unterstrich */
  text-decoration-color: #f4d58d !important;
}