/* Billard-App */
.bl-modus { width: 100%; }
.bl-modus button { display: inline-flex; align-items: center; justify-content: center; gap: var(--a-2); min-height: 52px; font-weight: 700; }
.bl-modus .icon { width: 20px; height: 20px; }
.bl-duell { display: grid; grid-template-columns: 1fr 1fr; gap: var(--a-3); }
.bl-seite {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--a-1); min-height: 170px; padding: var(--a-4) var(--a-3);
  border: 2px solid var(--c-linie); border-radius: var(--r-karte-gross); background: var(--c-flaeche); color: var(--c-text); font: inherit; text-align: center;
}
button.bl-seite { cursor: pointer; }
button.bl-seite:hover { border-color: var(--c-akzent); }
button.bl-seite:active { transform: scale(.98); }
.bl-seite--anstoss { border-color: var(--c-akzent); }
.bl-seite__name { font-weight: 700; font-size: 18px; overflow-wrap: anywhere; }
.bl-seite__wert { font-family: var(--schrift-display); font-weight: 800; font-size: clamp(56px, 16vw, 96px); line-height: 1; font-variant-numeric: tabular-nums; }
.bl-seite small { color: var(--c-text-leise); font-size: 13px; min-height: 18px; }
.bl-seite--anstoss small { color: var(--c-akzent); font-weight: 700; }
.bl-hinweis { text-align: center; margin: calc(-1 * var(--a-2)) 0 0; }
.bl-fouls { display: grid; gap: var(--a-2); }
.bl-foul { display: flex; justify-content: space-between; align-items: center; gap: var(--a-3); flex-wrap: wrap; padding: var(--a-2) var(--a-3); border: 1px solid var(--c-linie); border-radius: var(--r-karte); background: var(--c-flaeche); }
.bl-foul__knoepfe { display: inline-flex; align-items: center; gap: var(--a-3); }
.bl-gruppe p { margin: 0 0 var(--a-2); }
.bl-verlauf li span { margin-left: var(--a-2); }
.bl-zaehler { display: grid; grid-template-columns: 72px 1fr; gap: var(--a-3); width: 100%; max-width: 420px; }
.bl-zaehler .btn { min-height: 72px; }
.bl-plus { font-size: 22px; }
.bl-tische { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: var(--a-3); }
.bl-tisch { padding: var(--a-4); border: 1px solid var(--c-linie); border-radius: var(--r-karte-gross); background: var(--c-flaeche); display: grid; gap: var(--a-3); }
.bl-tisch h2 { margin: 0; font-size: 20px; }
.bl-tisch p { margin: 0; text-align: center; }
.bl-tisch__plaetze { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--a-2); }
.bl-gegen { color: var(--c-text-leise); font-size: 13px; }
.bl-platz {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 96px; padding: var(--a-3) var(--a-2);
  border: 2px solid var(--c-linie); border-radius: var(--r-karte); background: var(--c-hintergrund); color: var(--c-text); font: inherit; text-align: center; cursor: pointer;
}
.bl-platz b { font-size: 20px; overflow-wrap: anywhere; }
.bl-platz small { color: var(--c-text-leise); font-size: 12px; }
.bl-platz:hover { border-color: var(--c-akzent); }
.bl-platz--koenig { border-color: var(--c-akzent); }
.bl-platz--koenig small { color: var(--c-akzent); font-weight: 700; }
.bl-platz--leer { cursor: default; border-style: dashed; }
.bl-tv { text-align: center; }
.bl-tv h2 { font-size: clamp(32px, 4vw, 72px); }
.bl-tv h3 { font-size: clamp(24px, 2.6vw, 48px); color: var(--c-text-leise); margin-top: var(--a-6); }
.bl-tv__tisch { font-size: clamp(28px, 4.4vw, 88px); margin: 0 0 var(--a-5); line-height: 1.15; }
.bl-tv__tisch small { display: block; font-size: .42em; color: var(--c-text-leise); }
.bl-tv__liste { font-size: clamp(24px, 3.2vw, 64px); list-style-position: inside; padding: 0; margin: 0; line-height: 1.3; }