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;
}
.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 v4.2 – Einheitliches Icon-System (Telegram + Instagram) === */

/* Grundlayout für alle Social-Links */
footer a.am-spotify,
footer a.am-yt,
footer a.am-tg,
footer a.am-ig {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #d4af7f !important; /* Goldstandard */
  text-decoration: none !important;
  vertical-align: middle;
  line-height: 1.2;
  position: relative;
  transition: color 0.3s ease;
}

footer a.am-spotify:hover { color:#1db954!important; filter:drop-shadow(0 0 4px rgba(29,185,84,.8)); }
footer a.am-yt:hover      { color:#ff0000!important; filter:drop-shadow(0 0 4px rgba(255,0,0,.8)); }

/* === Dual-Icon-System für Telegram & Instagram === */

/* Beide starten mit Gold sichtbar, Farbe ausgeblendet */
footer a.am-tg .icon-gold,
footer a.am-ig .icon-gold {
  opacity: 1;
  transition: opacity 0.4s ease;
}

footer a.am-tg .icon-color,
footer a.am-ig .icon-color {
  opacity: 0;
  position: absolute;
  left: 0;
  top: 0;
  transition: opacity 0.4s ease;
}

/* Beim Hover: Gold-Icon ausblenden, Farb-Icon einblenden */
footer a.am-tg:hover .icon-gold,
footer a.am-ig:hover .icon-gold {
  opacity: 0;
}

footer a.am-tg:hover .icon-color,
footer a.am-ig:hover .icon-color {
  opacity: 1;
}

/* Farbwechsel zusätzlich am Text */
footer a.am-tg:hover { color:#0088cc!important; filter:drop-shadow(0 0 4px rgba(0,136,204,.8)); }
footer a.am-ig:hover { color:#f4d58d!important; filter:drop-shadow(0 0 4px rgba(244,213,141,.8)); }

/* Icon-Größe und Stil angleichen */
footer a.am-tg img,
footer a.am-ig img {
  width: 18px;
  height: 18px;
  vertical-align: middle;
  margin-right: 4px;
  border-radius: 3px;
  transition: opacity 0.3s ease;
}

/* Alte href-basierten Regeln deaktivieren (verhindert Doppel-Farben) */
footer a[href*="instagram"],
footer a[href*="t.me"] {
  color: inherit !important;
  text-decoration: none !important;
}
/* === AUREUS – Neue Single (Blaue Spotify-Einbettung) === */

.single-blue {
  margin: 5rem auto;
  text-align: center;
  max-width: 900px;
}

.single-blue h2 {
  color: #8ec6ff; /* sanftes Spotify-Blau, edel */
  font-size: 2rem;
  margin-bottom: 0.5rem;
}

.single-blue .singles-intro {
  color: #c9b48a;
  font-style: italic;
  margin-bottom: 2.5rem;
}

.single-entry.blue {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  background: rgba(0, 37, 64, 0.25);
  border: 1px solid rgba(142, 198, 255, 0.3);
  border-radius: 12px;
  padding: 2rem;
}

.single-entry.blue:hover {
  background: rgba(0, 37, 64, 0.35);
}

.single-cover {
  width: 200px;
  height: 200px;
  border-radius: 12px;
  box-shadow: 0 0 15px rgba(142,198,255,0.4);
  object-fit: cover;
}

.single-info {
  max-width: 460px;
  text-align: left;
}

.single-info h3 {
  color: #8ec6ff;
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
}