/* Karten-Apps: gemeinsame Liste (Skat, Doppelkopf, Schafkopf) */
.kl { display: flex; flex-direction: column; gap: var(--a-5); padding-bottom: 0; }
.kl--liste { max-width: 1100px; }
.kl__kopf h1 { font-size: clamp(30px, 6vw, 44px); margin: 0 0 var(--a-2); }
.kl__kopf p, .kl__meta { margin: 0; }
.karte { background: var(--c-flaeche); border: 1px solid var(--c-linie); border-radius: var(--r-karte); padding: var(--a-5); }
.karte h2 { font-size: 22px; margin: 0 0 var(--a-3); }
.kl .dreh { transform: rotate(180deg); }
.chipwolke { display: flex; flex-wrap: wrap; gap: var(--a-2); }
.wahl {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--a-2); min-height: var(--touch-min); padding: var(--a-2) var(--a-4);
  border: 1px solid var(--c-chip-rand); border-radius: var(--r-chip); background: transparent; color: var(--c-text); font-weight: 700; font-size: 16px; font-family: inherit;
}
.wahl:hover:not(:disabled) { border-color: var(--c-akzent); }
.wahl:disabled { opacity: .4; cursor: not-allowed; }
.wahl--an { background: var(--c-akzent); border-color: var(--c-akzent); color: var(--c-text-auf-akzent); }
.wahl--gruppe { border-style: dashed; }
.wahl--klein { font-size: 14px; padding: var(--a-1) var(--a-3); min-height: 40px; }
.wahl .icon { width: 18px; height: 18px; }
.einst { display: grid; gap: var(--a-4); }
.einst h2 { margin: 0; }
.einst__zeile { display: flex; justify-content: space-between; align-items: center; gap: var(--a-3) var(--a-4); flex-wrap: wrap; }
.einst__zeile > span { display: flex; flex-direction: column; }
.einst__zeile .segment { flex: 0 1 360px; }
.einst .schalter { min-height: 48px; padding-block: 0; }
.stepper { display: flex; align-items: center; gap: var(--a-2); }
.stepper b { font-family: var(--schrift-display); font-size: 26px; min-width: 2.5ch; text-align: center; }
.sitz { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--a-1); }
.sitz li { display: flex; align-items: center; gap: var(--a-3); padding: var(--a-1) var(--a-2); border-bottom: 1px solid var(--c-linie); }
.sitz__nr { font-family: var(--schrift-display); color: var(--c-akzent); min-width: 2ch; }
.sitz__name { flex: 1; font-weight: 700; }

.leiste-unten {
  position: sticky; bottom: 0; z-index: 5; margin-inline: calc(var(--seitenrand) * -1); padding: var(--a-3) var(--seitenrand) calc(var(--a-3) + env(safe-area-inset-bottom, 0px));
  background: color-mix(in srgb, var(--c-hintergrund) 94%, transparent); border-top: 1px solid var(--c-linie); text-align: center; backdrop-filter: blur(6px);
}
.leiste-unten p { margin: var(--a-2) 0 0; }
.leiste-unten .btn { max-width: 560px; margin-inline: auto; }
.leiste-unten__neben { display: flex; justify-content: center; gap: var(--a-6); flex-wrap: wrap; }
.leiste-unten__neben .textlink { color: var(--c-text-leise); font-weight: 400; font-size: var(--fs-klein); }
.btn--breit { width: 100%; }

/* Zwischenstand */
.staende { display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); gap: var(--a-2); }
.stand { display: grid; gap: 2px; padding: var(--a-3) var(--a-4); border: 1.5px solid var(--c-linie); border-radius: var(--r-karte); background: var(--c-flaeche); }
.stand__name { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stand__wert { font-family: var(--schrift-display); font-weight: 800; font-size: clamp(30px, 7vw, 44px); line-height: 1.05; font-variant-numeric: tabular-nums; }
.stand small { display: inline-flex; align-items: center; gap: 4px; color: var(--c-text-leise); font-size: 13px; min-height: 18px; }
.stand small .icon { width: 15px; height: 15px; }
.stand--vorn { border-color: var(--c-akzent); }
.stand--vorn .stand__wert { color: var(--c-akzent); }
.stand--geber small { color: var(--c-akzent); font-weight: 700; }
.stand--pause { opacity: .65; }

/* Liste */
.kl-tabelle .tabelle th, .kl-tabelle .tabelle td { padding: var(--a-2) var(--a-3); white-space: nowrap; }
.kl-tabelle tbody tr { cursor: pointer; }
.kl-tabelle tbody tr:hover td, .kl-tabelle tbody tr:focus-visible td { background: var(--c-flaeche-2); }
.kl-tabelle td.plus { color: var(--c-hinweis-tipp); }
.kl-tabelle td.minus { color: var(--c-text); }
.kl-tabelle td.pause { color: var(--c-text-leise); }
.kl-tabelle tfoot td, .kl-tabelle tfoot th { border-top: 2px solid var(--c-linie); font-size: 18px; }
.kl__text { white-space: normal !important; min-width: 160px; }
.fehlertext { color: var(--c-akzent); }
.rechnung { background: var(--c-hintergrund); border: 1px solid var(--c-linie); border-radius: var(--r-button-klein); padding: var(--a-3); font-size: 15px; line-height: 1.5; }
.rechnung:empty { display: none; }
.kl__posten { list-style: none; margin: 0; padding: 0; }
.kl__posten li { display: flex; justify-content: space-between; padding: var(--a-1) 0; border-bottom: 1px solid var(--c-linie); }
.kl__posten b { font-family: var(--schrift-display); }
.kl__statistik { margin: 0; }

/* Formular-Dialog */
.app-dialog--breit { width: min(640px, calc(100vw - 24px)); }
.fd { display: grid; gap: var(--a-4); }
.fd__gruppe { display: grid; gap: var(--a-2); }
.fd__gruppe > b { font-size: 15px; }
.fd__wahl { display: flex; flex-wrap: wrap; gap: var(--a-2); }
.fd__wahl--klein .wahl { font-size: 14px; padding: var(--a-1) var(--a-3); }
.fd__ja .icon { width: 16px; height: 16px; }
.fd__zaehler { display: flex; align-items: center; gap: var(--a-3); }
.fd__zaehler span { flex: 1; font-weight: 700; }
.fd__zaehler b { font-family: var(--schrift-display); font-size: 24px; min-width: 2ch; text-align: center; }
.fd__zahl { display: flex; align-items: center; gap: var(--a-3); width: 100%; min-height: 56px; padding: var(--a-2) var(--a-4); border: 1.5px solid var(--c-chip-rand); border-radius: var(--r-button); background: var(--c-hintergrund); color: var(--c-text); font: inherit; cursor: pointer; }
.fd__zahl span { flex: 1; text-align: left; font-weight: 700; }
.fd__zahl b { font-family: var(--schrift-display); font-size: 30px; }
.fd__zahl:hover { border-color: var(--c-akzent); }
.fd__vorschau { margin: var(--a-4) 0 0; }
.zahlfeld__anzeige { font-family: var(--schrift-display); font-size: 56px; text-align: center; margin: 0; }
.ziffern { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--a-2); }
.ziffern button {
  min-height: 56px; border-radius: var(--r-button); border: 1px solid var(--c-linie); background: var(--c-flaeche-2); color: var(--c-text);
  font-family: var(--schrift-display); font-size: 26px; font-weight: 700; display: grid; place-items: center;
}
.ziffern button:hover { border-color: var(--c-akzent); }
.ziffern__weiter { font-family: var(--schrift-text) !important; font-size: 17px !important; }
.dialog__fuss--innen { display: flex; justify-content: flex-end; gap: var(--a-3); padding: var(--a-4) 0 0; }

/* Abrechnung */
.podest { display: grid; gap: var(--a-2); list-style: none; margin: 0; padding: 0; }
.podest__platz { display: flex; align-items: center; gap: var(--a-4); padding: var(--a-3) var(--a-5); border-radius: var(--r-karte); background: var(--c-flaeche); border: 1px solid var(--c-linie); }
.podest__platz--1 { border-color: var(--c-akzent); background: var(--c-flaeche-2); }
.podest__nr { font-family: var(--schrift-display); font-weight: 800; font-size: 28px; width: 1.6em; color: var(--c-akzent); }
.podest__name { flex: 1; font-weight: 700; font-size: 19px; }
.podest__wert { text-align: right; }
.podest__wert b { font-family: var(--schrift-display); font-size: 24px; }
.zahlungen { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--a-2); }
.zahlungen li { display: flex; align-items: center; gap: var(--a-3); padding: var(--a-2) 0; border-bottom: 1px solid var(--c-linie); font-weight: 700; }
.zahlungen li b { margin-left: auto; font-family: var(--schrift-display); font-size: 22px; color: var(--c-akzent); }
.zahlungen .icon { width: 18px; height: 18px; color: var(--c-text-leise); }
.kl__knoepfe { display: flex; flex-wrap: wrap; gap: var(--a-3); justify-content: center; }
.kl .install-platz, .kl .app-werbung-platz { align-self: center; }

/* Großanzeige */
.tv { position: fixed; inset: 0; z-index: 60; background: var(--c-hintergrund); padding: clamp(16px, 3vw, 48px); overflow: auto; }
.tv__zu { position: absolute; top: var(--a-4); right: var(--a-4); }
.tv__inhalt { max-width: 1600px; margin: 0 auto; }
.tv h2 { font-size: clamp(32px, 3.4vw, 56px); }
.staende--tv { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--a-4); }
.staende--tv .stand { padding: var(--a-5) var(--a-6); }
.staende--tv .stand__name { font-size: clamp(22px, 2.4vw, 40px); }
.staende--tv .stand__wert { font-size: clamp(64px, 8vw, 140px); }
.staende--tv small { font-size: clamp(16px, 1.4vw, 24px); }
.tv__letztes { font-size: clamp(18px, 1.6vw, 28px); color: var(--c-text-leise); margin-top: var(--a-6); }
.tarife { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--a-2); }