/* Poker-Odds-Rechner (poker.domain-root.de; T46, 29.10.2026). Rahmen, Knöpfe, Felder und Tabelle aus domainroot.css
   (.dr-werkzeug, .dr-btn, .dr-feld, .dr-tabelle); Farben nur über die Variablen des Hosts, Rot der Farben Herz und Karo
   über --dr-warn wie im Handvergleich. Karten nur als Text mit Unicode-Farbzeichen, keine Grafiken. */
.dr-po-form { grid-template-columns: minmax(0, 1fr); align-items: start; }
.dr-po-zeile { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .9rem; }
.dr-po-board, .dr-po-hand { border: 1px solid var(--dr-linie); border-radius: 12px; padding: .5rem .8rem .7rem; margin: 0; min-width: 0; }
.dr-po-board legend, .dr-po-hand legend { font-weight: 700; font-size: .92rem; padding: 0 .3rem; }
.dr-po-board[hidden], .dr-po-hand[hidden], .dr-po-karte[hidden], .dr-po-fortschritt[hidden] { display: none; }
.dr-po-haende { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: .6rem; }
.dr-po-karten { display: flex; flex-wrap: wrap; gap: .5rem .9rem; }
.dr-po-karte { flex: 1 1 13rem; min-width: 0; display: grid; grid-template-columns: 2.6rem minmax(0, 1.15fr) minmax(0, 1fr); grid-template-rows: auto auto; column-gap: .45rem; row-gap: .25rem; align-items: center; }
.dr-po-vorschau { grid-row: 1 / 3; display: flex; align-items: center; justify-content: center; width: 2.6rem; height: 3.6rem; border: 1.5px solid var(--dr-linie-2); border-radius: 8px; background: var(--dr-flaeche); font-weight: 800; font-size: 1rem; white-space: nowrap; color: var(--dr-tinte); }
.dr-po-vorschau--leer { border-style: dashed; background: var(--dr-flaeche-2); color: var(--dr-tinte-3); font-weight: 600; }
.dr-po-karte-name { font-size: .78rem; color: var(--dr-tinte-2); grid-column: 2 / 4; }
.dr-po-karte select { font: inherit; font-size: .95rem; padding: .35rem .45rem; border-radius: 8px; border: 1.5px solid var(--dr-linie-2); background: var(--dr-grund); color: var(--dr-tinte); min-height: 2.5rem; width: 100%; min-width: 0; }
.dr-po-karte select:focus { border-color: var(--dr-marke); outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--dr-akzent) 22%, transparent); }
.dr-po-karte select:disabled { opacity: .5; }
.dr-po-zufall { display: inline-flex; align-items: center; gap: .35rem; margin: 0 0 .45rem; font-size: .92rem; font-weight: 600; cursor: pointer; }
.dr-po-zufall input { width: 1.1rem; height: 1.1rem; }
.dr-po-hand--zufall .dr-po-karten { opacity: .45; }
.dr-po-rot, .dr-po-vorschau.dr-po-rot { color: var(--dr-warn); }
.dr-main .prose .dr-po-tipp, .dr-po-tipp { margin: .5rem 0 0; color: var(--dr-tinte-2); }
.dr-po-beispiel-zeile { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.dr-po-beispiel-zeile select { flex: 1 1 16rem; min-width: 0; }

.dr-po-fortschritt { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin: 0 0 .9rem; font-size: .92rem; color: var(--dr-tinte-2); }
.dr-po-fortschritt progress { width: min(20rem, 100%); height: .9rem; accent-color: var(--dr-marke); }

.dr-main .prose .dr-po-art, .dr-po-art { margin: 0 0 .4rem; }
.dr-po-ergebnis .dr-tabelle-rahmen { margin: .5rem 0 .6rem; }
.dr-po-tabelle td, .dr-po-tabelle th { white-space: nowrap; }
.dr-po-tabelle tr.dr-po-vorn th, .dr-po-tabelle tr.dr-po-vorn td { font-weight: 750; }
.dr-po-zelle-karten { display: flex; gap: .3rem; }
.dr-po-k { display: inline-flex; align-items: center; justify-content: center; min-width: 2rem; height: 2rem; padding: 0 .25rem; border: 1.5px solid var(--dr-linie-2); border-radius: 6px; background: var(--dr-flaeche); font-weight: 800; font-size: .88rem; color: var(--dr-tinte); }
.dr-po-k.dr-po-rot { color: var(--dr-warn); }
.dr-po-zufallmarke { font-style: italic; color: var(--dr-tinte-2); }
.dr-main .prose .dr-po-hinweis, .dr-main .prose .dr-po-fehlt { font-size: .92rem; color: var(--dr-tinte-2); }

@media (max-width: 720px) {
    .dr-po-zeile { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 520px) {
    .dr-po-haende { grid-template-columns: minmax(0, 1fr); }
    .dr-po-hand { padding: .4rem .55rem .6rem; }
}
@media print {
    .dr-po-k, .dr-po-rot { color: #000; }
}