/* Schauplätze / Räume (Präfix sp-). Geteilt von hochzeiten-feiern.html („Fünf Orte“) und firmenevents.html
   („Räume & Kapazitäten“, gespiegelt mit .sp--flip). Logik: /assets/js/schauplaetze.js · Doku: docs/reference/design-system.md */

.sp { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 56px; align-items: start; margin-top: 36px; }
.sp--flip { grid-template-columns: 420px minmax(0, 1fr); }
.sp--flip .sp-media { order: 2; }
.sp--flip .sp-side { order: 1; }

/* ── Bild ── */
/* Foto ohne Schatten (Bildsystem: nur Karten tragen Schatten) */
.sp-stage { position: relative; aspect-ratio: 16 / 9; border-radius: var(--bi-r, 2px); overflow: hidden; background: #DED9D4; }
.sp-set[hidden] { display: none; }
.sp-set img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: none; }
.sp-set img.is-on { display: block; animation: sp-in 0.4s ease; }
/* Hochkant-Fotos ungeschnitten in voller Höhe, seitlich ruhiger Rand */
.sp-set img.is-tall { object-fit: contain; background: #E9E3DD; }
@keyframes sp-in { from { opacity: 0; } to { opacity: 1; } }
.sp-cap {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  padding: 60px 24px 20px; pointer-events: none;
  background: var(--bi-veil);
}
.sp-cap-name { font-family: 'YoungSerif', Georgia, serif; font-size: 1.3rem; line-height: 1.2; letter-spacing: -0.01em; color: #FDF2F2; }
.sp-cap-num { font-size: 10px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(253,242,242,0.9); white-space: nowrap; }

/* ── Leiste mit Zähler + Pfeilen (Skript, Bausteine aus bildsystem.css): Bild → Leiste → Thumbnails ── */
.sp-bar { margin-top: 12px; }

/* ── Thumbnails (Skript) ── */
/* kleine Vorschaubilder in einer Zeile, linksbündig: das Bild bleibt der Blickfang */
.sp-thumbs { display: flex; gap: 8px; margin-top: 10px; padding: 2px; overflow-x: auto; scrollbar-width: none; scroll-behavior: smooth; }
.sp-thumbs::-webkit-scrollbar { display: none; }
.sp-thumbs[hidden] { display: none; }
.sp-thumb { flex: 0 0 auto; width: min(88px, calc((100% - 56px) / 8)); aspect-ratio: 3 / 2; padding: 0; border: 0; border-radius: var(--bi-r, 2px); overflow: hidden; cursor: pointer; background: #DED9D4; opacity: 0.65;
  transition: opacity 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease; }
.sp-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sp-thumb:hover { opacity: 1; }
.sp-thumb:active { transform: scale(0.97); }
.sp-thumb:focus-visible { outline: 2px solid #2D4628; outline-offset: 3px; }
.sp-thumb.is-on { opacity: 1; box-shadow: 0 0 0 2px #2D4628; }

/* ── Ortsliste ── */
.sp-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid #D4CCC5; }
.sp-item { border-bottom: 1px solid #D4CCC5; }
.sp-head { display: flex; width: 100%; align-items: baseline; justify-content: space-between; gap: 16px; padding: 15px 0; margin: 0;
  background: none; border: 0; cursor: pointer; text-align: left; font: inherit; color: inherit; }
.sp-name { font-family: 'YoungSerif', Georgia, serif; font-size: 1.05rem; line-height: 1.3; letter-spacing: -0.01em; color: #43493E; transition: color 0.2s ease; }
.sp-num { font-size: 10px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: #43493E; white-space: nowrap; }
.sp-head:hover .sp-name, .sp-item.is-on .sp-name { color: #1A1C18; }
.sp-head:active .sp-name { color: #2D4628; }
.sp-head:focus-visible { outline: 2px solid rgba(45,70,40,0.45); outline-offset: 2px; border-radius: var(--bi-r, 2px); }
.sp-text { font-size: 13.5px; font-weight: 300; line-height: 1.75; color: #43493E; margin: -6px 0 0; padding: 0 0 18px; }
.sp-text[hidden] { display: none; }
.sp-cta { margin-top: 22px; }
.sp-text p { margin: 0; }
.sp-where { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin-top: 12px !important; font-size: 13px; font-weight: 400; color: #1A1C18; }
.sp-where span { font-size: 10px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: #2D4628; }
/* Firmenevents-Formate: mehr Text je Eintrag, deshalb höheres Bild */
.sp--tall .sp-stage { aspect-ratio: 3 / 2; }
.sp--tall .sp-head { padding: 20px 0; }
.sp--tall .sp-name { font-size: 1.3rem; }
.sp--tall .sp-text { font-size: 14.5px; line-height: 1.8; padding-bottom: 22px; }
.sp--tall .sp-where { font-size: 13.5px; margin-top: 14px !important; }
.sp-note { font-size: 12px; font-weight: 300; line-height: 1.6; color: #43493E; margin: 22px 0 0; }

/* ── Responsiv: Bild oben, Thumbnails als Wischleiste, Liste darunter ── */
@media (max-width: 1023px) {
  .sp, .sp--flip { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .sp--flip .sp-media, .sp--flip .sp-side { order: 0; }
}
@media (max-width: 767px) {
  .sp-thumbs { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .sp-thumbs::-webkit-scrollbar { display: none; }
  .sp-thumb { flex: 0 0 auto; width: 76px; scroll-snap-align: start; }
  .sp-cap { padding: 48px 18px 16px; }
  .sp-cap-name { font-size: 1.1rem; }
}
@media (prefers-reduced-motion: reduce) {
  .sp-set img.is-on { animation: none; }
  .sp-thumb, .sp-name { transition: none; }
}