/* Stil für Langtest, Kurztest und Ergebnis. Ergänzt ../stil.css. */

.kopf{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px}
.fortschritt{font-size:16px;color:var(--muted);font-weight:700}

.schiene{height:6px;border-radius:3px;background:var(--line);overflow:hidden}
.schiene>i{display:block;height:100%;border-radius:3px;background:var(--accent);transition:width .25s}

.richtung{font-size:16px;color:var(--muted);background:var(--soft);border-radius:12px;padding:12px 14px}

/* Platz für vier Zeilen ist immer reserviert. Sonst wandert die Knopfreihe je nach Länge
   der Aussage um bis zu 124 px auf und ab, und wer im Stehen mit einem Daumen antwortet,
   muss bei jeder Frage neu zielen (Handytest 29.09.2026, Befund B13). */
.aussage{font-family:var(--display);font-size:clamp(21px,5.6vw,27px);line-height:1.25;
  text-wrap:balance;margin-block:10px;min-height:5em;display:flex;align-items:flex-end}

/* Fünf Stufen in einer Reihe. Bei 360 px Breite bleibt jede Stufe über 44 px. */
.skala{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.stufe{min-height:64px;min-width:44px;border-radius:14px;cursor:pointer;
  border:1.5px solid var(--line);
  background:color-mix(in srgb, var(--accent) calc(var(--kraft) * 100%), var(--surface));
  color:var(--ink);font-family:var(--body);font-size:20px;font-weight:700;
  display:flex;align-items:center;justify-content:center;
  -webkit-tap-highlight-color:transparent;transition:transform .1s}
/* Die beiden kräftigsten Stufen bekommen die helle Ziffer. Vorher stand dort
   Dunkelblau auf Dunkelblau (Kontrast 1,44:1), die 5 war kaum zu lesen
   (Handytest 29.09.2026, Befund B3). */
.skala .stufe:nth-child(4),.skala .stufe:nth-child(5){color:var(--accent-ink)}
.stufe-zahl{pointer-events:none}
/* Hover nur dort, wo es wirklich einen Zeiger gibt (sonst bleibt der Rahmen am Handy hängen) */
@media (hover:hover) and (pointer:fine){
  .stufe:hover{border-color:var(--accent)}
}
.stufe.gewaehlt{border-color:var(--accent);border-width:3px;box-shadow:0 0 0 2px var(--accent) inset}
.stufe:active{transform:scale(.97)}

.enden{display:flex;justify-content:space-between;gap:10px;font-size:16px;color:var(--muted);
  margin-top:8px;line-height:1.3}
.enden span{max-width:46%}
.enden span:last-child{text-align:right}
.gewaehlt-wort{min-height:26px;font-weight:700;font-size:17px;color:var(--accent);margin-top:6px}

.knoepfe{display:flex;flex-direction:column;gap:10px;margin-top:8px}
.knoepfe.zeile{flex-direction:row;flex-wrap:wrap}
.knoepfe.zeile .knopf{flex:1;min-width:140px}
.knopf[disabled]{opacity:.45;cursor:default}

.karte{background:var(--surface);border:1.5px solid var(--line);border-radius:16px;
  padding:18px;display:flex;flex-direction:column;gap:12px}
.karte>h2{font-size:21px}
.hinweis{font-size:16px;color:var(--muted)}
.quelle{font-size:16px;color:var(--muted)}

.zus{background:var(--soft);border-radius:16px;padding:18px;display:flex;flex-direction:column;gap:10px}
.zus h2{font-size:21px}

/* Die vier Orte des Modells */
.achsenzeile{display:flex;justify-content:space-between;font-size:13px;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.feld{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ort{border:1.5px solid var(--line);border-left:5px solid var(--c);border-radius:12px;
  padding:11px 10px 11px 12px;display:flex;flex-direction:column;gap:3px;min-width:0}
.ort-frage{font-size:13px;font-weight:700;letter-spacing:.06em;color:var(--muted)}
.ort-name{font-family:var(--display);font-size:16px;font-weight:700;line-height:1.2;
  letter-spacing:-.01em;hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word}
.ort-feld{font-size:16px;color:var(--muted);line-height:1.3}

.balken{margin-top:8px}
.balken-bahn{position:relative;height:16px;border-radius:8px;background:var(--soft);overflow:hidden}
.balken-bahn.schmal{height:12px;border-radius:6px}
.balken-bahn .gitter{position:absolute;top:0;bottom:0;width:1px;background:var(--line)}
.balken-bahn .hell{position:absolute;left:0;top:0;bottom:0;opacity:.24;border-radius:8px}
.balken-bahn .dunkel{position:absolute;left:0;top:0;bottom:0;border-radius:8px}
/* Der kräftige Balken (wirksame Ausprägung) lag sonst als schmaler Streifen im hellen
   und war nicht von ihm zu unterscheiden: bei Drive 38 Prozent 4 Prozent breit, bei
   Drive 25 Prozent gar nicht (Handytest 29.09.2026, Befund B7). Trennkante in der
   Flächenfarbe und eine Mindestbreite machen ihn immer sichtbar. */
.balken .balken-bahn .dunkel{min-width:8px;box-shadow:2px 0 0 var(--surface)}
.balken-zahlen{display:flex;justify-content:space-between;font-size:14px;color:var(--muted);margin-top:4px}
.balken-zahlen span:first-child{font-weight:700;color:var(--ink);font-size:16px}

.achsen{display:flex;flex-direction:column;gap:10px}
.achse{display:grid;grid-template-columns:1fr;gap:4px}
.achse-name{font-size:16px;font-weight:700}
.achse.summe .achse-name{font-family:var(--display);font-size:17px}
.achse-zahl{font-size:15px;color:var(--muted)}

.drive{display:flex;gap:18px;align-items:center;flex-wrap:wrap;color:var(--ink)}
.drive-werte{flex:1;min-width:190px;display:flex;flex-direction:column;gap:4px;font-size:17px}
.drive-werte b{font-family:var(--display);font-size:19px}

.stichpunkte{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:6px;font-size:16px}

.stand{background:var(--accent);color:var(--accent-ink);border-radius:16px;padding:16px 18px;
  font-size:18px;font-weight:700}

.weiter h2{font-size:21px;margin-bottom:10px}
.weiter-links{display:flex;flex-direction:column;gap:10px}
.weiter-links a{display:flex;align-items:center;min-height:52px;padding:12px 16px;
  border:1.5px solid var(--line);border-radius:12px;background:var(--surface);
  text-decoration:none;font-size:17px;font-weight:700}

/* Querformat: sonst liegt die Unterkante der fünf Knöpfe bei 380 px und damit unter
   einem 375 px hohen Fenster, man müsste bei jeder Frage scrollen
   (Handytest 29.09.2026, Befund B5). */
@media (orientation:landscape) and (max-height:520px){
  .wrap{padding-block:14px 28px;gap:14px}
  /* Quer ist die Zeile breiter, die Aussage braucht weniger Zeilen; der reservierte
     Platz von vier Zeilen würde hier die Knöpfe wieder unter den Rand schieben. */
  .aussage{font-size:clamp(19px,3.4vw,24px);margin-block:4px;min-height:0}
  .richtung{padding:9px 12px}
  .stufe{min-height:52px}
  .gewaehlt-wort{min-height:22px;margin-top:2px}
  .knoepfe{margin-top:2px}
}

@media print{
  .kopf,.knoepfe,.weiter,.stand{display:none!important}
  .karte,.zus{break-inside:avoid;border-color:#bbb}
  /* Der farbige linke Rand der vier Kästen bleibt stehen: das sind Astrids Farben. */
  .ort{break-inside:avoid;border-top-color:#bbb;border-right-color:#bbb;border-bottom-color:#bbb}
  details{border-color:#bbb}
  summary::after{content:""}
  /* Balken, Halbkreis und die vier Farben sind Flächen. Ohne diese Zeile lässt der
     Browser sie beim Drucken weg, und im gespeicherten PDF stehen nur noch Zahlen,
     während der Text darüber zwei Balken verspricht (Befund B2). */
  .balken-bahn,.balken-bahn>i,.ort,.zus,.drive svg{
    -webkit-print-color-adjust:exact;print-color-adjust:exact}
}