/* app/sehtests/lib/basis.css
   Ergaenzt site.css (1:1 das echte Theme-Stylesheet inkl. lokaler
   Schriften) um die Bausteine, die es nur fuer die Sehtests braucht:
   Test-Buehne, Kalibrierung, Fortschrittsanzeige, Plaettchen-Anordnung. Alles
   andere (Knoepfe, Karten, Hero, Callout, Factbox, Typografie) kommt
   unveraendert aus dem echten Design-System. */

/* Schlanker Kopf/Fuss fuer die Werkzeug-Seiten -- kein volles WordPress-Menue,
   aber derselbe Marken-Look. */
.werkzeug-kopf{
  border-bottom:1px solid var(--line); padding:18px 0;
}
.werkzeug-kopf .zeile{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.werkzeug-marke{
  font-family:var(--display);font-weight:600;font-size:1.15rem;text-decoration:none;color:var(--ink);
  display:inline-block;min-height:44px;line-height:44px;
}
.werkzeug-marke span{color:var(--primary)}
.werkzeug-kopf .zurueck{
  font-size:1rem;font-weight:500;color:var(--ink);text-decoration:none;
}
.werkzeug-kopf .zurueck:hover{color:var(--primary-deep)}

.werkzeug-fuss{border-top:1px solid var(--line);padding:30px 0;margin-top:20px}
.werkzeug-fuss .zeile{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:.88rem;color:var(--ink-soft)}
.werkzeug-fuss a{color:var(--ink-soft);text-decoration:none}
.werkzeug-fuss a:hover{color:var(--primary-deep)}

main.werkzeug{padding:48px 0 80px}
main.werkzeug .lead{margin-bottom:26px}

/* ---- Fortschritt / Test-Buehne ---- */
.fortschritt{display:flex;gap:6px;margin-bottom:28px}
.fortschritt span{flex:1;height:4px;border-radius:3px;background:var(--line)}
.fortschritt span.erledigt{background:var(--primary)}

.test-buehne{
  display:flex;align-items:center;justify-content:center;min-height:300px;
  background:linear-gradient(178deg,#1E2A23 0%,var(--surface-tint) 100%);
  border:1px solid var(--line);border-radius:var(--radius-lg);
  margin-bottom:26px;padding:28px;
  box-shadow:0 20px 45px -28px rgba(0,0,0,.6);
}

/* ---- Kalibrierung ---- */
.ekarte{
  width:260px;height:164px;border-radius:12px;
  display:flex;align-items:flex-end;padding:16px;
  color:var(--panel-ink);font-size:.8rem;font-weight:600;
  margin:20px 0;
  background:linear-gradient(178deg,#F6F9F5 0%,var(--panel) 62%,#E4EAE2 100%);
  box-shadow:0 20px 40px -22px rgba(0,0,0,.6), 0 0 0 1px var(--panel-line) inset;
}
.kalibrierung-zeile{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin:16px 0 26px}
.kalibrierung-zeile input[type=range]{width:200px;accent-color:var(--primary)}
.kalibrierung-zeile .wert{font-variant-numeric:tabular-nums;color:var(--ink-soft);font-size:.9rem;min-width:56px}

/* ---- Sehschaerfe: Richtungsknoepfe ---- */
.richtungen{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;max-width:440px;margin:0 auto}
.richtungen button{
  background:var(--surface-tint);border:1px solid var(--line);border-radius:12px;
  padding:14px 0;cursor:pointer;color:var(--ink-soft);
  transition:border-color .15s ease,color .15s ease,transform .15s ease;
}
.richtungen button:hover{border-color:var(--primary);color:var(--ink);transform:translateY(-2px)}
.richtungen svg{width:32px;height:32px;margin:0 auto}

/* ---- Farbtafel: Zahleneingabe / Formen ---- */
.antwort-zeile{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-bottom:16px}
.antwort-zeile input{
  width:130px;padding:14px;border-radius:10px;border:1px solid var(--line);
  background:var(--surface-tint);color:var(--ink);font:inherit;font-size:1.25rem;text-align:center;
}
.antwort-zeile input:focus-visible{border-color:var(--primary)}

.formen{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-bottom:18px}
.formen button{
  display:flex;flex-direction:column;align-items:center;gap:8px;
  background:var(--surface-tint);border:1px solid var(--line);border-radius:12px;
  padding:16px 24px;cursor:pointer;color:var(--ink-soft);font-size:.85rem;
  transition:border-color .15s ease,color .15s ease,transform .15s ease;
}
.formen button:hover{border-color:var(--primary);color:var(--ink);transform:translateY(-2px)}
.formen svg{width:36px;height:36px}

/* ---- Farbring-Test: 8 Richtungen (Luecke im Ring antippen) ---- */
.ring-richtungen{
  display:grid;grid-template-columns:repeat(3,64px);grid-template-rows:repeat(3,64px);
  gap:8px;justify-content:center;margin:0 auto 18px;
}
.ring-richtungen button{
  background:var(--surface-tint);border:1px solid var(--line);border-radius:12px;
  display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--ink-soft);
  transition:border-color .15s ease,color .15s ease,transform .15s ease;
}
.ring-richtungen button:hover{border-color:var(--primary);color:var(--ink);transform:translateY(-2px)}
.ring-richtungen button svg{width:26px;height:26px}
.ring-richtungen .ring-mitte{visibility:hidden}

/* ---- HRR: vier Positionen mit Formauswahl ---- */
.hrr-positionen{display:grid;grid-template-columns:1fr 1fr;gap:12px;max-width:420px;margin:0 auto 18px}
.hrr-pos{background:var(--surface-tint);border:1px solid var(--line);border-radius:12px;padding:12px 14px}
.hrr-pos label{display:block;font-size:.78rem;color:var(--ink-soft);margin-bottom:6px}
.dd{position:relative}
.dd-btn{
  width:100%;display:flex;align-items:center;gap:10px;text-align:left;cursor:pointer;
  padding:10px 38px 10px 12px;border-radius:8px;border:1px solid var(--line);
  background:var(--bg);color:var(--ink);font:inherit;font-size:1rem;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234CB050' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;background-size:18px;
}
.dd-btn:focus-visible,.dd-btn[aria-expanded="true"]{border-color:var(--primary);outline:none}
.dd-list{
  position:absolute;left:0;right:0;top:calc(100% + 4px);z-index:20;margin:0;padding:6px;list-style:none;
  background:var(--bg);border:1px solid var(--line);border-radius:10px;box-shadow:0 14px 30px -12px rgba(0,0,0,.7);
}
.dd-opt{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:7px;cursor:pointer;color:var(--ink)}
.dd-opt:hover,.dd-opt[aria-selected="true"]{background:var(--surface-tint)}
.sym{color:var(--primary);font-weight:600;display:inline-block;min-width:1.2em;text-align:center}
@media (max-width:480px){.hrr-positionen{grid-template-columns:1fr}}

/* ---- Anordnungstest: Plaettchen ---- */
.plaettchen-feld{display:flex;flex-direction:column;gap:10px;margin:26px 0;overflow-x:auto;padding:6px 4px 10px;scrollbar-width:thin;scrollbar-color:var(--primary) transparent}
.plaettchen-reihe{display:flex;flex-wrap:nowrap;gap:6px;justify-content:safe center;align-items:flex-start}
@media (max-width:520px){.plaettchen-reihe{gap:3px}}
.plaettchen-el{
  flex:1 1 0;min-width:16px;max-width:44px;aspect-ratio:1/1;height:auto;border-radius:9px;border:2px solid rgba(0,0,0,.15);cursor:pointer;padding:0;
  box-shadow:0 6px 14px -8px rgba(0,0,0,.6);
  transition:transform .12s ease;
}
.plaettchen-el:hover:not(:disabled){transform:translateY(-2px)}
.plaettchen-el.fest{border-color:var(--ink);cursor:default;box-shadow:0 0 0 2px var(--primary-glow), 0 6px 14px -8px rgba(0,0,0,.6)}
.plaettchen-el.aktiv{border-color:#fff;box-shadow:0 0 0 3px var(--primary)}

/* Die Testreiter-Karten sind selbst der Link (bessere Trefferflaeche als
   nur der Pfeil) -- ohne diese Zeile erbt jeder Text im Anker die
   Standard-Linkunterstreichung. */
a.card{text-decoration:none}
a.card h3{text-decoration:none}

/* ---- Ergebnis ---- */
.ergebnis-zahl{
  font-family:var(--display);font-weight:600;font-size:2.6rem;color:var(--primary-deep);
  line-height:1.1;margin-bottom:6px;
}
table.ergebnis-tabelle{width:100%;border-collapse:collapse;font-size:.92rem;margin-top:8px}
table.ergebnis-tabelle td,table.ergebnis-tabelle th{padding:8px 6px;border-bottom:1px solid var(--line);text-align:left}
table.ergebnis-tabelle th{font-weight:600;color:var(--ink-soft);font-size:.82rem}

/* ---- Testreiter-Karten (Farbsehen-Hub) ---- */
.card small.dauer{display:block;margin-top:10px;color:var(--ink-soft);font-size:.8rem}

@media(max-width:640px){
  .test-buehne{padding:16px;min-height:0}
  .richtungen{max-width:none}
}

/* ---- Zurueck zur Sehtest-Uebersicht (orange, gut sichtbar) ---- */
.btn.btn-alle{background:var(--accent-soft);border:1px solid rgba(232,166,92,.45);color:var(--accent)}
.btn.btn-alle:hover{background:#463A29;border-color:var(--accent);color:var(--accent)}

/* ---- Anordnungstest: Vergleich am Ende ---- */
.vergleich-reihe{display:flex;flex-wrap:wrap;gap:4px}
.mini{width:26px;height:26px;border-radius:6px;display:inline-block;border:2px solid transparent}
.mini.sprung{border-color:var(--accent)}

/* Ishihara: drei Zahlen zur Auswahl statt Eingabefeld */
.frage{text-align:center;margin:0 0 12px;color:var(--ink-soft)}
.zahl-wahl{gap:12px}
.zahl-btn{min-width:92px;min-height:60px;font-family:var(--display);font-size:1.6rem;font-weight:600;justify-content:center}
@media (max-width:420px){.zahl-wahl{gap:10px}.zahl-btn{flex:1;min-width:0}}

/* Kalibrierung am Handy: Karte hochkant, damit sie in die Bildschirmbreite passt */
/* keine max-width: Die Kartengroesse muss exakt bleiben, sonst stimmt die Kalibrierung nicht */
.ekarte.hochkant{align-items:flex-end;justify-content:center}
.kalibrierung-zeile input[type=range]{max-width:100%}
@media (max-width:640px){.kalibrierung-zeile input[type=range]{width:100%;flex:1 1 100%}}

/* Kalibrierung: Muenze (Kreis) oder Karte */
.kal-wahl{display:flex;gap:10px;flex-wrap:wrap;margin:6px 0 4px}
.kal-wahl .btn{padding:8px 16px;font-size:.9rem}
.ekarte.muenze{border-radius:50%;align-items:center;justify-content:center;padding:0;font-size:1.05rem;letter-spacing:.02em}

/* ---- HRR: Ecken direkt auf der Tafel antippen, Formen darunter waehlen ---- */
.hrr-tafel{position:relative;width:min(100%,360px);margin:0 auto}
.hrr-tafel img{display:block}
.hrr-q{position:absolute;width:50%;height:50%;padding:0;border:0;background:transparent;cursor:pointer;-webkit-tap-highlight-color:transparent}
.hrr-q-obenLinks{top:0;left:0;border-top-left-radius:12px}
.hrr-q-obenRechts{top:0;right:0;border-top-right-radius:12px}
.hrr-q-untenLinks{bottom:0;left:0;border-bottom-left-radius:12px}
.hrr-q-untenRechts{bottom:0;right:0;border-bottom-right-radius:12px}
.hrr-q.aktiv{outline:3px solid var(--primary);outline-offset:-3px;background:rgba(76,176,80,.12)}
.hrr-q:focus-visible{outline:3px solid #fff;outline-offset:-3px}
.hrr-badge{position:absolute;width:24px;height:24px;border-radius:50%;background:rgba(20,28,24,.62);color:var(--ink);display:grid;place-items:center;font-size:.9rem;line-height:1;box-shadow:0 0 0 1px rgba(255,255,255,.22)}
.hrr-q-obenLinks .hrr-badge{top:6px;left:6px}
.hrr-q-obenRechts .hrr-badge{top:6px;right:6px}
.hrr-q-untenLinks .hrr-badge{bottom:6px;left:6px}
.hrr-q-untenRechts .hrr-badge{bottom:6px;right:6px}
.hrr-badge .leer{color:var(--ink-soft);font-size:1rem;line-height:1;margin-top:-1px}
.hrr-wahl{max-width:420px;margin:0 auto 14px}
.hrr-frage{text-align:center;margin:14px 0 10px;font-weight:600;color:var(--ink)}
.hrr-chips{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.hrr-chip{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:58px;padding:6px 4px;border-radius:12px;border:1px solid var(--line);background:var(--surface);color:var(--ink);cursor:pointer;font:inherit}
.hrr-chip .sym{font-size:1.5rem;line-height:1}
.hrr-chip .txt{font-size:.7rem;color:var(--ink-soft);line-height:1.15;text-align:center}
.hrr-chip[aria-pressed="true"]{border-color:var(--primary);background:var(--surface-tint);box-shadow:0 0 0 1px var(--primary) inset}
.hrr-chip:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
/* HRR am Handy: alles auf einen Bildschirm (Tafel, Formen, Weiter) */
@media (max-width:640px){
  #schritt-test .fortschritt{margin-bottom:12px}
  #schritt-test .test-buehne{padding:8px}
  .hrr-frage{margin:10px 0 8px}
  .hrr-chip{min-height:52px}
  .hrr-chip .sym{font-size:1.35rem}
  #schritt-test #weiter-btn{margin-top:0}
}
@media (min-width:400px) and (max-width:640px){
  .hrr-chips{grid-template-columns:repeat(7,1fr);gap:5px}
  .hrr-chip{padding:6px 2px;min-height:58px}
  .hrr-chip .txt{font-size:.62rem}
}
/* Tafel nie hoeher als der Rest des Bildschirms zulaesst (Weiter bleibt sichtbar) */
@media (max-width:640px){ .hrr-tafel{width:min(100%,360px,max(200px,calc(100svh - 490px)))} }
@media (min-width:400px) and (max-width:640px){ .hrr-tafel{width:min(100%,360px,max(200px,calc(100svh - 425px)))} }

/* ---- HRR: Auswahl als kleines Fenster auf der Tafel (loest die Formenreihe ab) ---- */
.hrr-hinweis{text-align:center;margin:0 0 14px;color:var(--ink-soft);font-size:.9rem}
.hrr-wahl{display:none}
.hrr-q.belegt .hrr-badge{background:var(--primary);color:#0B120E;box-shadow:0 0 0 2px rgba(255,255,255,.55)}
.hrr-q.belegt .hrr-badge .sym{color:#0B120E}
.hrr-pop{position:absolute;inset:0;z-index:5;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:12px;border-radius:12px;background:rgba(14,20,17,.86);backdrop-filter:blur(3px)}
.hrr-pop[hidden]{display:none}
.hrr-pop-titel{margin:0;font-weight:600;color:var(--ink);text-align:center}
.hrr-pop-chips{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;width:100%;max-width:330px}
.hrr-pop .hrr-chip{background:#1C2620;min-height:60px}
.hrr-pop-zu{background:none;border:0;color:var(--ink-soft);font:inherit;font-size:.85rem;text-decoration:underline;cursor:pointer;padding:6px 10px}
@media (max-width:640px){
  .hrr-tafel{width:min(100%,360px,max(220px,calc(100svh - 330px)))}
  .hrr-pop{padding:8px;gap:8px}
  .hrr-pop-chips{gap:6px}
  .hrr-pop .hrr-chip{min-height:54px;padding:4px 2px}
  .hrr-pop .hrr-chip .txt{font-size:.62rem}
}

/* ---- Alles auf einen Bildschirm (Handy und Fenster): Tafel + Antwort ohne Scrollen ---- */
.ring-richtungen button,.zahl-btn,.hrr-q,.hrr-chip,.plaettchen-el{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
html{overscroll-behavior-y:contain}
@media (max-width:640px){
  #tafel-buehne img{width:min(100%,320px,max(200px,calc(100svh - 425px)))!important;height:auto!important}
  .ring-richtungen{grid-template-columns:repeat(3,56px);grid-template-rows:repeat(3,56px);gap:6px;margin-bottom:8px}
  .ring-richtungen button svg{width:24px;height:24px}
  #schritt-test .antwort-zeile{margin-bottom:8px}
  #schritt-test p[style*="text-align:center"]{margin:6px 0}
}

/* ---- Direktaufruf auf dem Handy: Seitenkopf mitrechnen (im Fenster ist --kopf = 0) ---- */
:root{--kopf:64px}
@media (max-width:640px){
  main.werkzeug{padding:14px 0 40px}
  .werkzeug-kopf{padding:10px 0}
  #tafel-buehne img{width:min(100%,320px,max(160px,calc(100svh - 425px - var(--kopf))))!important;height:auto!important}
  .hrr-tafel{width:min(100%,360px,max(200px,calc(100svh - 330px - var(--kopf))))}
}

/* HRR: Auswahlfenster darf groesser sein als eine kleine Tafel (sonst laufen die Formen ueber den Rand) */
.hrr-pop{inset:auto;left:50%;top:50%;transform:translate(-50%,-50%);box-sizing:border-box;width:max(100%,296px);min-height:max(100%,268px)}

/* Rahmen um die Tafel schliesst am Handy eng ab (vorher min-height 300px: Bild kleiner als der Rahmen) */
@media (max-width:640px){
  #schritt-test .test-buehne{min-height:0;width:fit-content;max-width:100%;margin-left:auto;margin-right:auto;margin-bottom:12px}
}

/* Tafelbreite ohne Prozentangabe, damit der Rahmen wirklich eng um das Bild schliesst */
@media (max-width:640px){
  #tafel-buehne img{width:min(calc(100vw - 88px),320px,max(160px,calc(100svh - 425px - var(--kopf))),var(--tafel-max,320px))!important;height:auto!important}
  .hrr-tafel{width:min(calc(100vw - 88px),360px,max(160px,calc(100svh - 330px - var(--kopf))),var(--tafel-max,360px))}
  #tafel-buehne .hrr-tafel img{width:100%!important}
}

/* Handy: alles etwas weiter nach oben (weniger Abstand ueber Fortschritt und Tafel) */
@media (max-width:640px){
  main.werkzeug{padding-top:4px}
  .werkzeug-kopf{padding:6px 0}
  #schritt-test .fortschritt{margin-bottom:8px}
  #schritt-test .test-buehne{margin-bottom:8px}
}
:root{--kopf:52px}

/* ---- Test im Fenster (Uebersichtsseiten): Handy Vollbild, PC grosses Fenster ---- */
html.popup-offen, html.popup-offen body{ overflow:hidden; }
.test-popup{ position:fixed; inset:0; z-index:100; display:flex; align-items:center; justify-content:center; background:rgba(8,12,10,.78); backdrop-filter:blur(3px); }
.test-popup-box{ display:flex; flex-direction:column; width:100%; height:100vh; height:100dvh; background:var(--bg); overflow:hidden; }
.test-popup-bar{ display:flex; align-items:center; justify-content:space-between; flex:none; height:48px; padding:0 8px 0 16px; border-bottom:1px solid var(--line); font-size:.85rem; font-weight:600; color:var(--ink-soft); letter-spacing:.04em; text-transform:uppercase; }
.test-popup-titel{ flex:1; text-align:left; }
.test-popup-zu{ width:40px; height:40px; border-radius:50%; border:1px solid var(--line); background:none; color:var(--ink); font-size:1rem; line-height:1; cursor:pointer; }
.test-popup-zu:hover{ border-color:var(--primary); }
.test-popup-rahmen{ flex:1 1 auto; width:100%; border:0; background:var(--bg); overscroll-behavior:contain; }
@media (min-width:900px){ .test-popup-box{ width:min(780px,94vw); height:min(900px,92vh); border-radius:20px; border:1px solid var(--line); box-shadow:0 40px 90px -30px rgba(0,0,0,.9); } }

/* Desktop: Tafel direkt unter dem Kopf, nicht 92 px tiefer (section-Innenabstand entfernt) */
main.werkzeug section{padding-top:0;padding-bottom:0}
@media (min-width:641px){
  main.werkzeug{padding:20px 0 32px}
  .werkzeug-kopf{padding:12px 0}
  #schritt-test .fortschritt{margin-bottom:14px}
  #schritt-test .test-buehne{margin-bottom:14px}
  #tafel-buehne img{width:min(320px,var(--tafel-max,320px))!important;height:auto!important}
  .hrr-tafel{width:min(360px,var(--tafel-max,360px))}
}

/* Niedrige Bildschirme (Laptops): Pfeile und Abstaende schrumpfen, damit alles ohne Scrollen passt */
@media (min-width:641px) and (max-height:760px){
  .ring-richtungen{grid-template-columns:repeat(3,50px);grid-template-rows:repeat(3,50px);gap:6px;margin-bottom:8px}
  .ring-richtungen button svg{width:22px;height:22px}
  #schritt-test .antwort-zeile{margin-bottom:8px}
  #schritt-test p[style*="text-align:center"]{margin:6px 0}
}
@media (min-width:641px) and (max-height:680px){
  .werkzeug-kopf{padding:6px 0}
  main.werkzeug{padding-top:8px}
  #schritt-test .test-buehne{padding:8px}
  #schritt-test .fortschritt{margin-bottom:8px}
}