body.pdtest { overflow: auto; }
.pdtest .mitte { min-height: 100vh; display: grid; place-items: center; padding: 64px 16px 16px; }
.pdtest .mitte .karte { max-width: 520px; display: grid; gap: 10px; }
.pdtest h1 { font-size: 22px; margin: 0; font-weight: 600; }
.pdtest p { margin: 0; }
.pdtest .anleitung { margin: 0; padding-left: 20px; display: grid; gap: 4px; }
.pdtest .datenschutz { font-size: 13px; color: var(--leise); border-left: 3px solid var(--linie); padding-left: 10px; }
.pdtest .datenschutz b { color: var(--text); }
#buehne { position: fixed; inset: 0; background: #000; }
#buehne #bild { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain;
  transform: scaleX(-1); touch-action: none; }
#lupe { position: absolute; width: 180px; height: 180px; border: 2px solid #f5c400; border-radius: 50%;
  transform: scaleX(-1); pointer-events: none; z-index: 3; }
.pdtest .leiste { z-index: 4; }
#messliste { font-size: 13px; font-variant-numeric: tabular-nums; }
#ergebnisPd { font-variant-numeric: tabular-nums; }

/* Anleitung als Bilder: richtig / falsch (Wunsch des Users 10.10.2026) */
.pdtest .unsichtbar { position: absolute; width: 0; height: 0; overflow: hidden; }
.pd-bilder { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 4px 0; align-items: start; }
.pd-bild { margin: 0; display: grid; gap: 4px; justify-items: center; text-align: center; }
.pd-bild svg { width: 100%; height: auto; border-radius: 12px; padding: 6px 4px 0; box-sizing: border-box; }
/* das richtige Bild groß oben, Erklärung daneben; darunter drei Fehler gleich groß */
.pd-bild.richtig { grid-column: 1 / -1; grid-template-columns: minmax(0, 46%) 1fr; align-items: center; justify-items: start;
  text-align: left; gap: 14px; }
.pd-bild.richtig svg { background: #e6f4ea; outline: 2px solid #2f8f4e; }
.pd-bild.falsch svg { background: #fbeceb; outline: 1px solid #e3b3ae; }
.pd-bild figcaption { font-size: 13.5px; font-weight: 600; line-height: 1.3; }
.pd-bild.richtig figcaption { font-size: 16px; }
.pd-bild figcaption small { display: block; font-weight: 400; color: var(--leise); font-size: 13.5px; margin-top: 4px; }
.pd-bild.richtig .pd-zeichen { color: #2f8f4e; }
.pd-bild.falsch .pd-zeichen { color: #b3261e; }
.pd-haut { fill: #f1d3bd; }
.pd-haar { fill: #5b4636; }
.pd-auge { fill: #fff; stroke: #6b5a4e; stroke-width: 1; }
.pd-pupille { fill: #2b2e33; }
.pd-linie { fill: none; stroke: #8a6a55; stroke-width: 2; stroke-linecap: round; }
.pd-karte { fill: #dfe6ef; stroke: #4c5866; stroke-width: 1.6; }
.pd-streifen { fill: #4c5866; }
.pd-finger { fill: #e9c2a6; stroke: #b98d72; stroke-width: 1.2; }
.pd-brille { fill: none; stroke: #2b2e33; stroke-width: 3; }
.pdtest .pd-dann { font-size: 15px; }