/* Verkehrszeichen-Katalog und Zeichen üben. Zeichenbilder liegen immer auf einer weißen Fläche (auch im Dunkelmodus). */
.seite-zeichen { gap: 14px; }
.zk-suche { width: 100%; min-height: 48px; padding: 0 14px; font: inherit; font-size: 1rem; color: var(--text); background: var(--flaeche); border: 1px solid var(--rand); border-radius: 12px; box-sizing: border-box; }
.zk-ueben { text-align: center; }
.zk-inhalt { display: flex; flex-direction: column; gap: 12px; }
.zk-inhalt[hidden], .zk-treffer:empty { display: none; }
.zk-gruppe { text-decoration: none; color: inherit; }
.zk-gruppe-kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: 1.05rem; }
.zk-proben { display: flex; gap: 10px; flex-wrap: nowrap; overflow: hidden; }
.zk-probe { height: 56px; width: 56px; object-fit: contain; background: #fff; border: 1px solid var(--rand-fein); border-radius: 8px; padding: 3px; box-sizing: border-box; flex: 0 0 auto; }
.zk-h2 { font-size: 1.05rem; font-weight: 800; margin: 4px 0; }
.zk-text { line-height: 1.5; overflow-wrap: anywhere; hyphens: auto; margin: 0; }
.zk-erkl { display: flex; flex-direction: column; gap: 8px; }
.zk-einfach-box { background: var(--hervor); border-left: 4px solid var(--gut); border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 4px; }
.zk-marke-einfach { align-self: flex-start; background: var(--gut); color: #fff; border-color: var(--gut); }
.zk-untergruppe { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.zk-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(9.2rem, 1fr)); gap: 10px; }
.zk-kachel { display: flex; flex-direction: column; gap: 4px; align-items: stretch; padding: 8px; background: var(--flaeche); border: 1px solid var(--rand); border-radius: 14px; color: inherit; text-decoration: none; min-width: 0; }
.zk-kachel:active { background: var(--hervor); }
.zk-kachel-bild { display: flex; align-items: center; justify-content: center; height: 96px; background: #fff; border-radius: 10px; }
.zk-bild { max-width: 100%; max-height: 90px; object-fit: contain; }
.zk-kachel-nr { font-weight: 800; font-size: 0.85rem; color: var(--akzent); }
.zk-kachel-name { font-size: 0.8rem; line-height: 1.3; overflow-wrap: anywhere; hyphens: auto; }

/* Detail */
.zd-karte { display: flex; flex-direction: column; gap: 10px; background: var(--flaeche); border: 1px solid var(--rand); border-radius: 18px; padding: 14px; touch-action: pan-y; user-select: none; -webkit-user-select: none; outline-offset: 3px; }
.zd-kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.zd-nr { font-weight: 900; font-size: 1.15rem; color: var(--akzent); }
.zd-bildfeld { display: flex; align-items: center; justify-content: center; min-height: 190px; background: #fff; border: 1px solid var(--rand-fein); border-radius: 14px; padding: 10px; }
.zd-bild { max-width: 100%; max-height: min(46vh, 240px); object-fit: contain; -webkit-user-drag: none; }
.zd-bildtext { text-align: center; margin: 0; }
.zd-varianten { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.zd-varianten:empty { display: none; }
.zd-variante { width: 56px; height: 56px; padding: 3px; background: #fff; border: 2px solid var(--rand); border-radius: 10px; box-sizing: border-box; }
.zd-variante[aria-pressed="true"] { border-color: var(--akzent); }
.zd-mini { width: 100%; height: 100%; object-fit: contain; }
.zd-name { font-size: 1.25rem; font-weight: 900; line-height: 1.25; margin: 0; overflow-wrap: anywhere; hyphens: auto; }
.zd-marken { display: flex; gap: 6px; flex-wrap: wrap; }
.zd-abschnitt { display: flex; flex-direction: column; gap: 2px; }
.zd-einfach { background: var(--hervor); border-left: 4px solid var(--gut); border-radius: 10px; padding: 10px 12px; }
.zd-merke { background: var(--warn-bg); border-left: 4px solid var(--warn-rand); border-radius: 10px; padding: 10px 12px; }
.zd-norm { margin: 0; }
.zd-nav { display: flex; gap: 10px; }
.zd-nav > * { flex: 1 1 0; justify-content: center; }
.knopf.aus[aria-disabled="true"] { pointer-events: none; }

/* Üben */
.zu-reihe { display: flex; flex-wrap: wrap; gap: 8px; }
.zu-chip { min-height: 44px; padding: 0 14px; border: 1px solid var(--rand); background: var(--flaeche); color: var(--text); border-radius: 22px; font: inherit; font-size: 0.9rem; }
.zu-chip.an { background: var(--knopf); color: #fff; border-color: var(--knopf); }
.zu-balken { height: 8px; background: var(--spur); border-radius: 4px; overflow: hidden; }
.zu-balken > span { display: block; height: 100%; background: var(--gut); }
.zu-karte { display: flex; flex-direction: column; gap: 12px; background: var(--flaeche); border: 1px solid var(--rand); border-radius: 18px; padding: 14px; min-height: 18rem; touch-action: pan-y; user-select: none; -webkit-user-select: none; box-shadow: var(--schatten); }
.zu-karte.gedreht { border-color: var(--gut); }
.zu-kopf { display: flex; justify-content: space-between; align-items: center; }
.zu-seite { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.zu-seite[hidden] { display: none; }
.zu-frage { font-weight: 800; margin: 0; }
.zu-gross { font-size: 1.35rem; font-weight: 900; margin: 0; overflow-wrap: anywhere; }
.zu-name { font-size: 1.05rem; font-weight: 700; margin: 0; overflow-wrap: anywhere; hyphens: auto; }
.zu-bild { max-width: 100%; max-height: min(34vh, 200px); object-fit: contain; background: #fff; border-radius: 12px; padding: 8px; box-sizing: border-box; }
.zu-bild.klein { max-height: 90px; }
.zu-seite .zk-text, .zu-seite .zk-einfach-box { text-align: left; align-self: stretch; }
.zu-knoepfe { display: flex; gap: 10px; }
.zu-knoepfe[hidden] { display: none; }
.zu-knoepfe > * { flex: 1 1 0; }
.zu-nochmal { border-color: var(--nochmal); color: var(--nochmal-text); }
.zu-gewusst { background: var(--gut); }
@media (max-height: 500px) { .zd-bildfeld { min-height: 120px; } .zd-bild { max-height: 38vh; } .zu-karte { min-height: 0; } }
@media (prefers-reduced-motion: reduce) { .zk-kachel, .zu-karte { transition: none; } }

.zk-kein-bild { display: inline-flex; align-items: center; justify-content: center; min-width: 5rem; min-height: 3rem; padding: 6px 10px; border: 1px dashed var(--rand); border-radius: 8px; color: var(--text2); font-size: 0.8rem; background: #fff; }
.zd-bildquelle { margin: 0; text-align: center; font-size: 0.7rem; opacity: 0.8; }
.zd-bildquelle:empty { display: none; }