/* Poker-Handvergleich (poker.domain-root.de; T37, 29.10.2026). Rahmen, Knöpfe und Felder aus domainroot.css
   (.dr-werkzeug, .dr-btn, .dr-feld); Farben nur über die Variablen des Hosts, Rot der Farben Herz und Karo über --dr-warn.
   Karten nur als Text mit Unicode-Farbzeichen, keine Grafiken. */
.dr-ph-form { grid-template-columns: minmax(0, 1fr); align-items: start; }
.dr-ph-board, .dr-ph-spieler { border: 1px solid var(--dr-linie); border-radius: 12px; padding: .5rem .8rem .7rem; margin: 0; min-width: 0; }
.dr-ph-board legend, .dr-ph-spieler legend { font-weight: 700; font-size: .92rem; padding: 0 .3rem; }
.dr-ph-plaetze { display: flex; flex-wrap: wrap; gap: .5rem; }
.dr-ph-anzahl { max-width: 16rem; }
.dr-ph-spielerliste { display: grid; grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr)); gap: .6rem; }
.dr-ph-spieler { display: flex; gap: .5rem; flex-wrap: wrap; }
.dr-ph-spieler[hidden] { display: none; }

.dr-ph-rot { color: var(--dr-warn); }
.dr-ph-platz { display: inline-flex; flex-direction: column; align-items: center; gap: .2rem; padding: 0; border: 0; background: none; font: inherit; color: var(--dr-tinte); cursor: pointer; }
.dr-ph-platz-karte { display: flex; align-items: center; justify-content: center; width: 2.9rem; height: 4rem; border: 1.5px solid var(--dr-linie-2); border-radius: 8px; background: var(--dr-flaeche); font-weight: 800; font-size: 1.05rem; white-space: nowrap; }
.dr-ph-platz.dr-ph-rot .dr-ph-platz-karte { color: var(--dr-warn); }
.dr-ph-platz--leer .dr-ph-platz-karte { border-style: dashed; background: var(--dr-flaeche-2); color: var(--dr-tinte-3); font-weight: 600; }
.dr-ph-platz--aktiv .dr-ph-platz-karte { border: 2px solid var(--dr-marke); box-shadow: 0 0 0 3px color-mix(in srgb, var(--dr-marke) 25%, transparent); }
.dr-ph-platz-name { font-size: .72rem; color: var(--dr-tinte-2); }
.dr-ph-platz:focus-visible { outline: none; }
.dr-ph-platz:focus-visible .dr-ph-platz-karte, .dr-ph-k:focus-visible { outline: 3px solid var(--dr-marke); outline-offset: 2px; }
.dr-ph-platz:disabled, .dr-ph-k:disabled { cursor: default; opacity: .6; }

.dr-ph-raster-rahmen { min-width: 0; }
.dr-main .prose .dr-ph-ziel, .dr-ph-ziel { margin: 0 0 .4rem; font-weight: 700; font-size: .95rem; }
.dr-ph-raster { display: grid; gap: .3rem; }
.dr-ph-reihe { display: grid; grid-template-columns: 1.4rem repeat(13, minmax(0, 1fr)); gap: .25rem; align-items: center; }
.dr-ph-reihe-name { font-size: 1.2rem; text-align: center; }
.dr-ph-k { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 2.75rem; padding: .15rem 0; border: 1.5px solid var(--dr-linie-2); border-radius: 6px; background: var(--dr-flaeche); font: inherit; font-weight: 700; font-size: .9rem; line-height: 1.1; color: var(--dr-tinte); cursor: pointer; }
.dr-ph-k.dr-ph-rot { color: var(--dr-warn); }
.dr-ph-k:hover { border-color: var(--dr-marke); background: var(--dr-marke-tint); }
.dr-ph-k[aria-pressed="true"] { border: 2px solid var(--dr-marke); background: var(--dr-marke-tint); }
.dr-ph-k--vergeben, .dr-ph-k--vergeben:hover { background: var(--dr-flaeche-3); border-color: var(--dr-linie); color: var(--dr-tinte-3); text-decoration: line-through; cursor: not-allowed; opacity: .55; }
.dr-main .prose .dr-ph-tipp { margin: .5rem 0 0; color: var(--dr-tinte-2); }

.dr-ph-sieger { font-size: 1.05rem; }
.dr-main .prose .dr-ph-hinweis, .dr-main .prose .dr-ph-legende, .dr-main .prose .dr-ph-fehlt { font-size: .92rem; color: var(--dr-tinte-2); }
.dr-main .prose .dr-ph-liste, .dr-ph-liste { list-style: none; margin: .6rem 0 .6rem; padding: 0; }
.dr-main .prose .dr-ph-zeile, .dr-ph-zeile { display: grid; grid-template-columns: 2.2rem minmax(0, 1fr); gap: .7rem; margin: 0 0 .5rem; padding: .7rem .85rem; border: 1px solid var(--dr-linie); border-radius: 12px; background: var(--dr-flaeche); }
.dr-ph-zeile::before { content: none !important; }
.dr-ph-zeile--vorn { border: 2px solid var(--dr-marke); }
.dr-ph-platzzahl { display: inline-flex; align-items: center; justify-content: center; width: 2.2rem; height: 2.2rem; border-radius: 50%; background: var(--dr-flaeche-3); font-weight: 800; }
.dr-ph-zeile--vorn .dr-ph-platzzahl { background: var(--dr-marke); color: #fff; }
.dr-ph-inhalt { min-width: 0; }
.dr-main .prose .dr-ph-inhalt p { margin: 0 0 .3rem; }
.dr-main .prose .dr-ph-inhalt p:last-child { margin: 0; }
.dr-ph-marke { display: inline-block; margin-left: .3rem; padding: .05rem .5rem; border-radius: 999px; background: var(--dr-marke); color: #fff; font-size: .75rem; font-weight: 700; }
.dr-ph-fuenf, .dr-ph-hole { display: flex; flex-wrap: wrap; gap: .3rem; align-items: center; }
.dr-main .prose .dr-ph-hole { font-size: .85rem; color: var(--dr-tinte-2); }
.dr-ph-karte { display: inline-flex; align-items: center; justify-content: center; min-width: 2.3rem; height: 2.3rem; padding: 0 .3rem; border: 1.5px solid var(--dr-linie-2); border-radius: 6px; background: var(--dr-flaeche); font-weight: 800; color: var(--dr-tinte); white-space: nowrap; }
.dr-ph-karte.dr-ph-rot { color: var(--dr-warn); }
.dr-ph-karte--eigen { border-color: var(--dr-marke); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.dr-ph-karte--klein { min-width: 1.9rem; height: 1.9rem; font-size: .85rem; font-weight: 700; }

@media (max-width: 520px) {
    /* je Farbe zwei Zeilen (7 und 6 Karten), damit jede Karte gut zu treffen ist; das Farbzeichen steht auf jeder Karte */
    .dr-ph-raster { gap: .55rem; }
    .dr-ph-reihe { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .25rem; }
    .dr-ph-reihe-name { display: none; }
    .dr-ph-k { min-height: 2.75rem; font-size: .9rem; }
    .dr-ph-platz-karte { width: 2.6rem; height: 3.6rem; }
    .dr-ph-spielerliste { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
    .dr-ph-spieler { padding: .4rem .5rem .55rem; gap: .4rem; }
}
@media print {
    .dr-ph-zeile { border: 1px solid #000; background: #fff !important; }
    .dr-ph-karte, .dr-ph-rot { color: #000; }
}