/* YouTube-Einbettung mit Klick-Freigabe — „Konzertbuehne“ (07.11.2026, ersetzt den YouTube-Nachbau vom 05.11.).
   Vorschaubilder liegen lokal (assets/bilder), vor dem Klick keine Verbindung zu YouTube.
   Erkennbar als YouTube-Video bleibt es ueber das Etikett „Video · YouTube“ und den Hinweis darunter.
   Farben nur aus den CI-Variablen; Fallbacks fuer den Einsatz ohne tokens.css. */
.yt-gruppe { display: grid; gap: 22px; }
@media (min-width: 960px) { .yt-gruppe { grid-template-columns: minmax(0, 1.75fr) minmax(260px, 1fr); align-items: center; gap: 40px; } }

/* Rahmen: goldene Haarlinie mit Abstand, wie der Ring der Bogenbilder */
.yt-rahmen { position: relative; padding: 9px; border: 1px solid rgba(201, 162, 107, .45); border-radius: calc(var(--radius, 22px) + 9px); }
.yt-embed { position: relative; aspect-ratio: 16 / 9; width: 100%; border-radius: var(--radius, 22px); overflow: hidden; background: #0b0806;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .55); }
.yt-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.yt-karte { position: absolute; inset: 0; display: block; width: 100%; height: 100%; padding: 0; border: 0; background: #0b0806; cursor: pointer;
  text-align: left; color: var(--color-on-dark, #f6efe4); font: inherit; }
.yt-embed.is-geladen .yt-karte { display: none; }
.yt-bild { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1.2s var(--ease, ease); }
.yt-karte::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(0deg, rgba(12, 9, 7, .88) 0%, rgba(12, 9, 7, .35) 38%, rgba(12, 9, 7, 0) 62%); }
@media (hover: hover) { .yt-karte:hover .yt-bild { transform: scale(1.03); } }

/* Abspielknopf: rund, hell, Goldrand, leiser Puls */
.yt-play { position: absolute; z-index: 1; left: var(--yt-play-x, 50%); top: 44%;  /* Position je Video (data-play), damit kein Gesicht verdeckt wird */
  width: 84px; height: 84px; transform: translate(-50%, -50%); border-radius: 50%;
  display: grid; place-items: center; background: rgba(246, 239, 228, .16); border: 1px solid var(--ci-gold, #c9a26b);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: background .3s var(--ease, ease), transform .3s var(--ease, ease); }
.yt-play svg { width: 26px; height: 26px; margin-left: 4px; fill: var(--color-on-dark, #f6efe4); }
.yt-play::after { content: ""; position: absolute; inset: -1px; border-radius: 50%; border: 1px solid var(--ci-gold, #c9a26b);
  animation: yt-puls 2.6s var(--ease, ease) infinite; }
@keyframes yt-puls { from { transform: scale(1); opacity: .7; } to { transform: scale(1.45); opacity: 0; } }
.yt-karte:hover .yt-play, .yt-karte:focus-visible .yt-play { background: var(--ci-bronze, #8a5a2b); transform: translate(-50%, -50%) scale(1.06); }
.yt-karte:focus-visible { outline: 3px solid var(--ci-gold-l, #e7cfa6); outline-offset: -3px; }

/* Bildunterschrift im Bild: Komponist · Werk · Ort und Dauer */
.yt-unter { position: absolute; z-index: 1; left: 26px; right: 26px; bottom: 20px; display: flex; flex-direction: column; gap: 2px; }
.yt-komponist { font-size: .75rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--ci-gold-l, #e7cfa6); }
.yt-werk { font-family: var(--font-serif, Georgia, serif); font-style: italic; font-size: clamp(1.375rem, 2.4vw, 2rem); line-height: 1.2; color: var(--color-on-dark, #f6efe4); }
.yt-ort { font-size: .875rem; color: rgba(246, 239, 228, .78); }
.yt-marke { position: absolute; z-index: 1; right: 14px; top: 14px; padding: 5px 11px; border-radius: 999px; background: rgba(12, 9, 7, .55);
  border: 1px solid rgba(201, 162, 107, .35); color: rgba(246, 239, 228, .85); font-size: .75rem; letter-spacing: .06em; }

/* Programm: die Aufnahmen wie im Konzertprogramm */
.yt-programm-titel { font-size: .75rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--color-line-gold, #c9a26b); margin-bottom: 8px; }
.yt-programm { list-style: none; margin: 0; padding: 0; border-top: 1px solid rgba(201, 162, 107, .28); }
.yt-programm button { width: 100%; min-height: 44px; display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 12px;
  padding: 14px 10px 14px 4px; border: 0; border-bottom: 1px solid rgba(201, 162, 107, .2); background: none; color: rgba(246, 239, 228, .72);
  font: inherit; text-align: left; cursor: pointer; transition: background .25s var(--ease, ease), color .25s var(--ease, ease); }
.yt-programm .nr { font-family: var(--font-serif, Georgia, serif); font-style: italic; font-size: 1.25rem; color: var(--color-line-gold, #c9a26b); text-align: center; }
.yt-programm .werk { display: block; font-family: var(--font-serif, Georgia, serif); font-size: 1.0625rem; line-height: 1.3; color: var(--color-on-dark, #f6efe4); }
.yt-programm .von { display: block; margin-top: 2px; font-size: .875rem; color: rgba(246, 239, 228, .66); }
.yt-programm .dauer { font-size: .875rem; font-variant-numeric: tabular-nums; color: rgba(246, 239, 228, .66); }
.yt-programm button:hover { background: rgba(246, 239, 228, .05); }
.yt-programm button[aria-pressed="true"] { background: rgba(201, 162, 107, .1); box-shadow: inset 2px 0 0 var(--ci-gold, #c9a26b); }
.yt-programm button[aria-pressed="true"] .nr { color: var(--ci-gold-l, #e7cfa6); }
.yt-programm button:focus-visible { outline: 2px solid var(--ci-gold-l, #e7cfa6); outline-offset: -2px; }

.yt-hinweis { margin: 14px 0 0; font-size: var(--fs-small, 15px); color: rgba(241, 233, 220, .72); text-align: center; }
.yt-hinweis a { color: var(--ci-sand, #f1e9dc); text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 560px) {
  .yt-rahmen { padding: 6px; border-radius: calc(var(--radius, 22px) + 6px); }
  .yt-play { width: 64px; height: 64px; top: 42%; }
  .yt-play svg { width: 20px; height: 20px; }
  .yt-unter { left: 16px; right: 16px; bottom: 12px; }
  .yt-werk { font-size: 1.25rem; }
  .yt-ort { display: none; }
  .yt-marke { right: 10px; top: 10px; }
}
@media (prefers-reduced-motion: reduce) { .yt-play::after { animation: none; display: none; } .yt-bild, .yt-play { transition: none; } }