/* Buchen-Karte mit Ablauf (Baustein buchen-karte, 22.10.2026, Beerpong-Seite, Mockup MGJ6).
   Eigene Klassen l7-bk*: wird nur von diesem Baustein geladen und beruehrt keine andere Seite.
   Optik wie die Bahn-Karten der Bowling-Seite (effekte.css .l7-bahnkarte), aber ohne deren
   Subgrid ueber zwei Karten. Preis-Matrix nutzt .l7-matrix aus effekte.css. */
.l7-bk__heading { margin-bottom: 32px; text-wrap: balance; }
.l7-section--dark .l7-bk__heading { color: var(--l7-white); }
.l7-bk__raster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; align-items: stretch; }
.l7-bk__karte { display: flex; flex-direction: column; background: #121212; border: 2px solid var(--l7-teal); box-shadow: 0 0 48px rgba(4,255,247,0.14); color: var(--l7-white); min-width: 0; }
.l7-bk__bild { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: #141414; }
.l7-bk__bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.l7-bk__bild::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(18,18,18,0.95) 100%); pointer-events: none; }
.l7-bk__flagge { position: absolute; top: 16px; left: 16px; z-index: 2; background: var(--l7-teal); color: var(--l7-black); font-size: 11px; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; padding: 6px 12px; box-shadow: 0 0 20px rgba(4,255,247,0.5); }
.l7-bk__text { padding: 28px 32px 36px; display: flex; flex-direction: column; flex: 1; }
.l7-bk__titel { font-size: clamp(28px, 3.2vw, 42px); letter-spacing: -0.02em; margin: 0 0 12px; color: var(--l7-white); }
.l7-bk__desc { font-size: 15px; line-height: 1.55; color: rgba(255,255,255,0.78); margin: 0 0 20px; }
.l7-bk__matrix td { color: var(--l7-teal); text-shadow: 0 0 14px rgba(4,255,247,0.35); }
.l7-bk__matrix tbody th { width: 50%; }
.l7-bk__bald { border: 1px dashed rgba(255,255,255,0.28); padding: 16px; margin: 0 0 20px; font-size: 14px; color: rgba(255,255,255,0.75); line-height: 1.5; }
.l7-bk__bald b { display: block; color: var(--l7-white); font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; margin-bottom: 6px; }
.l7-bk__knoepfe { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: auto; }
.l7-bk__knoepfe .l7-btn { justify-content: center; padding: 16px 12px; white-space: nowrap; }
html .l7-bk .l7-bk__schild { background: transparent; color: rgba(255,255,255,0.85); border: 2px solid rgba(255,255,255,0.45); cursor: default; box-shadow: none; text-shadow: none; animation: none; }
.l7-bk__schild svg { opacity: 0.7; }
.l7-bk__panel { background: #121212; border: 1px solid #2A2A2A; padding: 32px; display: flex; flex-direction: column; color: var(--l7-white); min-width: 0; }
.l7-bk__ptitel { font-size: clamp(24px, 2.6vw, 34px); color: var(--l7-white); margin: 0 0 18px; }
.l7-bk__schritte { list-style: none; margin: 0; padding: 0; }
.l7-bk__schritt { display: grid; grid-template-columns: 48px 1fr; gap: 16px; padding: 18px 0; border-top: 1px solid rgba(255,255,255,0.14); }
.l7-bk__schritt:last-child { border-bottom: 1px solid rgba(255,255,255,0.14); }
.l7-bk__nr { font-size: 12px; font-weight: 800; letter-spacing: 0.2em; color: var(--l7-teal); padding-top: 3px; }
.l7-bk__schritt b { display: block; font-size: 17px; font-weight: 900; text-transform: uppercase; letter-spacing: -0.01em; margin-bottom: 4px; }
.l7-bk__schritt span { font-size: 14.5px; color: rgba(255,255,255,0.72); line-height: 1.5; }
.l7-bk__fakten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: auto 0 0; padding-top: 22px; }
.l7-bk__fakten div { border: 1px solid rgba(255,255,255,0.14); padding: 12px 14px; min-width: 0; }
.l7-bk__fakten dt { font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(255,255,255,0.5); font-weight: 700; margin-bottom: 4px; }
.l7-bk__fakten dd { margin: 0; font-size: 17px; font-weight: 900; letter-spacing: -0.01em; line-height: 1.25; }
.l7-bk__hinweis { margin: 18px 0 0; font-size: 14px; color: rgba(255,255,255,0.7); text-align: center; letter-spacing: 0.02em; }
.l7-bk__vorschau { margin: 0 0 20px; padding: 10px 14px; background: #F5D79A; color: #0A0A0A; font-size: 13px; font-weight: 700; letter-spacing: 0.02em; }
@media (max-width: 899px) {
  .l7-bk__raster { grid-template-columns: 1fr; }
  .l7-bk__bild { aspect-ratio: 4 / 3; }
  .l7-bk__panel { padding: 24px 20px; }
  .l7-bk__fakten { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .l7-bk__knoepfe { grid-template-columns: 1fr; }
  .l7-bk__fakten { grid-template-columns: 1fr; gap: 8px; }
  .l7-bk__fakten div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
  .l7-bk__fakten dt { margin-bottom: 0; }
}
@media (max-width: 420px) {
  .l7-bk__text { padding: 22px 18px 28px; }
  .l7-bk__knoepfe .l7-btn { padding: 14px 8px; font-size: 12px; }
}