/* Test-App: was NUR diese App braucht.
   Alles Gemeinsame steht in /app/basis.css und wird davor geladen: Farbtokens,
   Raster, Kopfzeile, Knoepfe, Werbebanner, Begruessung, Fusszeile, Bewegung.

   DER UNTERSCHIED ZU DEN GESCHWISTERN: Tanken, Parken und Öl zeigen einen
   Bildschirm, den man im Vorbeigehen liest. Hier wird gelesen, ueberlegt und
   getippt, teils minutenlang. Die Buehne darf deshalb als EINZIGE Flaeche
   scrollen (wie dort die Trefferliste), und die Schrift ist etwas kleiner als
   in einer App fuers Auto: 26 px waeren hier keine Hilfe, sondern Scrollen. */

:root {
  /* Die vier Farbtypen. Eigene Namen, damit sie nichts aus der Basis
     ueberschreiben. --ft-blau liegt bewusst NICHT auf dem PIG-Blau der
     Bedienelemente: sonst sieht ein Ergebnis aus wie ein Knopf. */
  --ft-rot:   #d32f2f;
  --ft-gelb:  #e8a800;
  /* Dasselbe Gruen wie "guenstig" und "frei" in den Geschwister-Apps, und das
     ist kein Zufall: mit dem helleren #2e9e5b kam Weiss darauf nur auf 3,41:1,
     gemessen, und der gruene Name auf der weissen Karte auf 3,4:1. Beides unter
     dem Minimum von 4,5:1. Mit diesem Ton sind es 4,7:1. */
  --ft-gruen: #17864a;
  --ft-blau:  #2b6cb8;
  /* Schrift AUF der jeweiligen Flaeche. Gelb traegt Weiss nicht (gemessen
     2,1:1), deshalb steht es hier einzeln und nicht als eine Regel fuer alle. */
  --auf-rot:   #ffffff;
  --auf-gelb:  #1a1a1a;
  --auf-gruen: #ffffff;
  --auf-blau:  #ffffff;

  /* Richtig und falsch in der Aufloesung des IQ-Tests. */
  --richtig: #17864a;
  --falsch:  #c02626;
}

@media (prefers-color-scheme: dark) {
  :root {
    /* PAARWEISE mitziehen. @media erhoeht die Spezifitaet nicht: wer nur den
       Hellwert setzt, hat den Dunkelmodus kaputtgemacht und merkt es abends. */
    --ft-rot:   #f16b6b;
    --ft-gelb:  #f2c14e;
    --ft-gruen: #4cc47f;
    --ft-blau:  #6ba8e8;
    /* Alle vier sind im Dunkeln helle Toene, darauf ist Weiss unlesbar. */
    --auf-rot:   #10131a;
    --auf-gelb:  #10131a;
    --auf-gruen: #10131a;
    --auf-blau:  #10131a;

    --richtig: #3ddc84;
    --falsch:  #ff6b6b;
  }
}

/* Kopf (oder Testleiste), Buehne, Banner, Fuss. Ein Element mit display:none
   belegt keine Rasterzeile, deshalb stimmt die Zahl in beiden Zustaenden. */
.app { grid-template-rows: auto minmax(0, 1fr) auto; }

/* Das Hinweiszeichen in der Kopfzeile. Ersetzt den Link, der bis zum 31.07.2026
   in der Fusszeile stand, und kostet keine eigene Zeile. */
.kopf-knopf {
  flex: none;
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--linie);
  border-radius: 50%;
  background: var(--karte);
  color: var(--blau);
  font-family: inherit;
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
}

/* ---------- Die Leiste waehrend eines Tests ---------- */

/* :not(.hidden) ist Pflicht und kein Schmuck. Die Basis kennt .hidden mit
   display:none, aber sie wird VOR dieser Datei geladen: ein schlichtes
   ".testleiste { display: grid }" haette bei gleicher Spezifitaet gewonnen, und
   die Leiste haette auch auf der Startseite gestanden. Genau das ist beim
   ersten Lauf passiert. */
.testleiste:not(.hidden) {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 44px;
  align-items: center;
  gap: 6px;
  padding: 0 2px;
}
.tl-zurueck, .tl-abbruch {
  min-height: 40px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--leise);
  font-family: inherit;
  font-size: 26px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}
.tl-zurueck:disabled { opacity: .3; }
.tl-abbruch { font-size: 19px; }
.tl-mitte { display: flex; flex-direction: column; align-items: center; min-width: 0; }
.tl-name {
  font-size: 15px;
  font-weight: 800;
  color: var(--text);
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tl-zaehler { font-size: 12px; font-weight: 700; color: var(--leise); }
/* Laeuft die Zeit ab, wandert der Zaehler auf die Warnfarbe. Nur Farbe, kein
   Blinken: ein blinkender Zaehler macht nervoes und verfaelscht das Ergebnis. */
.tl-zaehler.knapp { color: var(--warn); }

/* ---------- Die Buehne ---------- */

.buehne {
  display: grid;
  /* minmax(0, 1fr) und NICHT einfach weglassen, aus demselben Grund wie bei
     .app in der Basis: ohne die Angabe wird die Spalte so breit wie ihr
     breitester Inhalt. Gemessen beim ersten Lauf: die Matrix der Muster-Aufgabe
     wurde 410 px breit in einer 359 px breiten Buehne und lief rechts aus dem
     Bild. */
  grid-template-columns: minmax(0, 1fr);
  grid-auto-rows: max-content;
  gap: 8px;
  overflow-y: auto;
  min-height: 0;
  padding: 2px 2px 4px;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* ---------- Startseite: die Test-Kacheln ---------- */

.willkommen {
  padding: 2px 4px 0;
  font-size: 14px;
  line-height: 1.4;
  color: var(--leise);
}

.t-kachel {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  min-height: 74px;
  padding: 9px 12px;
  border: 2px solid var(--linie);
  border-radius: 16px;
  background: var(--karte);
  color: var(--text);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}
/* Das Sinnbild des Tests. Eine Emoji-Flaeche und kein weiteres Bild: die App
   soll ohne Nachladen starten, und vier zusaetzliche Symbole waeren vier
   Abrufe fuer nichts. */
.tk-zeichen {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 13px;
  background: var(--bg);
  font-size: 25px;
  line-height: 1;
}
.tk-text { min-width: 0; }
.tk-name { display: block; font-size: 17px; font-weight: 800; }
.tk-was {
  display: block;
  margin-top: 2px;
  font-size: 13px;
  line-height: 1.3;
  color: var(--leise);
}
/* Zeit und Fragenzahl. Sie beantworten die Frage, die man sich vor dem Tippen
   stellt: lohnt sich das jetzt gerade. */
/* --leise und NICHT --gedimmt, und das ist gemessen: --gedimmt kommt bei dieser
   Groesse im Hellen nur auf 3,1:1, das Minimum sind 4,5:1. Mit --leise sind es
   5,4:1. Dieselbe Stelle ist in der Öl-App schon einmal aufgefallen, deshalb
   steht sie hier gleich richtig. Gilt fuer alle kleinen Zeilen unten auch. */
.tk-dauer {
  display: block;
  margin-top: 3px;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--leise);
}
.tk-pfeil { font-size: 24px; font-weight: 700; color: var(--blau); line-height: 1; }

/* Wer den Test schon gemacht hat, sieht sein letztes Ergebnis auf der Kachel.
   Das ist der Grund wiederzukommen, deshalb steht es vorn und nicht versteckt. */
.tk-letztes {
  grid-column: 2 / -1;
  margin-top: 5px;
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--blau);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  justify-self: start;
}

/* ---------- Einleitung vor dem Test ---------- */

.intro-kopf { display: flex; align-items: center; gap: 12px; padding: 4px 4px 0; }
.intro-kopf .tk-zeichen { width: 54px; height: 54px; font-size: 30px; }
.intro-kopf h2 { margin: 0; font-size: 22px; line-height: 1.2; }
.intro-kopf .tk-dauer { margin-top: 3px; font-size: 13px; }

.block {
  padding: 11px 13px;
  border-radius: 14px;
  background: var(--karte);
  border: 1px solid var(--linie);
  font-size: 15px;
  line-height: 1.5;
}
.block p { margin: 0 0 9px; }
.block p:last-child { margin-bottom: 0; }
.block h3 {
  margin: 0 0 7px;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: .2px;
}
.block ul { margin: 0; padding-left: 19px; }
.block li { margin-bottom: 5px; line-height: 1.45; }
.block li:last-child { margin-bottom: 0; }

/* Der ehrliche Hinweis. Gestrichelt und leise: er soll gelesen, aber nicht
   gefuerchtet werden. */
.block.ehrlich {
  border-style: dashed;
  border-color: var(--gedimmt);
  background: transparent;
  font-size: 13.5px;
  color: var(--leise);
}
.block.ehrlich b { color: var(--text); }

/* ---------- Eine Frage ---------- */

.frage {
  padding: 13px 14px;
  border-radius: 16px;
  background: var(--karte);
  border: 2px solid var(--linie);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.35;
}
/* Die kleine Zeile ueber der Frage sagt, worum es bei dieser Aufgabe geht
   ("Zahlenreihe", "Was passt weiter"). Ohne sie raetselt man erst an der
   Aufgabenart und dann an der Aufgabe. */
.frage .art {
  display: block;
  margin-bottom: 5px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: var(--blau);
}
/* Zahlenreihen und Rechenaufgaben in gleicher Zeichenbreite: sonst steht die
   Reihe krumm und man zaehlt Stellen statt zu rechnen. */
.frage .reihe {
  display: block;
  margin-top: 9px;
  font-size: 25px;
  font-weight: 800;
  letter-spacing: 1.5px;
  font-variant-numeric: tabular-nums;
}

/* Die Antworten. Volle Breite, grosse Trefferflaeche, wie die Aktionsknoepfe
   der Geschwister-Apps. */
.antworten { display: grid; gap: 7px; }
.antwort {
  display: flex;
  align-items: center;
  gap: 11px;
  min-height: 54px;
  padding: 8px 13px;
  border: 2px solid var(--linie);
  border-radius: 14px;
  background: var(--karte);
  color: var(--text);
  font-family: inherit;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.3;
  text-align: left;
  cursor: pointer;
}
/* Der Buchstabe vorn ist kein Schmuck: er gibt dem Daumen einen Zielpunkt und
   macht die Aufloesung danach eindeutig ("richtig war B"). */
.antwort .kz {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 9px;
  background: var(--bg);
  color: var(--leise);
  font-size: 14px;
  font-weight: 800;
}
.antwort[aria-pressed="true"] { border-color: var(--blau); }
.antwort[aria-pressed="true"] .kz { background: var(--blau); color: #fff; }
.antwort .txt { min-width: 0; }

/* Antworten, die nur aus einer Zahl bestehen, stehen zu zweit nebeneinander.
   Vier volle Zeilen fuer vier Zahlen sind verschenkte Hoehe, und die Aufgabe
   soll ohne Scrollen sichtbar bleiben. */
.antworten.kurz { grid-template-columns: 1fr 1fr; }
.antworten.kurz .antwort { justify-content: flex-start; font-size: 19px; }

/* Bildaufgaben: die Auswahl steht als Reihe von Feldern. */
.antworten.bilder { grid-template-columns: repeat(4, 1fr); gap: 6px; }
.antworten.bilder .antwort {
  flex-direction: column;
  gap: 4px;
  min-height: 0;
  padding: 7px 4px 5px;
  justify-content: center;
}
.antworten.bilder .antwort svg { width: 100%; height: auto; display: block; }
.antworten.bilder .kz { width: 22px; height: 22px; font-size: 12px; border-radius: 7px; }

/* ---------- Die Matrix des IQ-Tests ---------- */

.matrix {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  /* Gedeckelt und mittig: die Zellen sind quadratisch, ohne Deckel waechst die
     Matrix auf einem breiten Bildschirm ins Riesenhafte und schiebt die
     Antworten aus dem Bild. */
  max-width: 340px;
  margin: 0 auto;
  gap: 5px;
  padding: 9px;
  border-radius: 16px;
  background: var(--karte);
  border: 2px solid var(--linie);
}
.matrix .zelle {
  aspect-ratio: 1 / 1;
  border-radius: 10px;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
}
.matrix .zelle svg { width: 100%; height: 100%; display: block; }
/* Das fehlende Feld. Gestrichelt und mit Fragezeichen: es ist die Frage, nicht
   ein leeres Kaestchen, das man uebersieht. */
.matrix .zelle.fehlt {
  border: 2px dashed var(--blau);
  background: transparent;
  color: var(--blau);
  font-size: 30px;
  font-weight: 800;
}

/* ---------- Die Zustimmungsskala des Farbtyp-Tests ---------- */

/* Fuenf Stufen, von "trifft gar nicht zu" bis "trifft voll zu". Als Reihe und
   nicht als Schieberegler: ein Regler auf dem Handy trifft man selten dort, wo
   man will, und die Zahl dahinter versteht ohnehin niemand. */
.skalenreihe { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.sk-knopf {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-height: 64px;
  padding: 6px 2px;
  border: 2px solid var(--linie);
  border-radius: 14px;
  background: var(--karte);
  color: var(--leise);
  font-family: inherit;
  cursor: pointer;
}
/* Der Punkt waechst von links nach rechts: die Reihe ist damit auch ohne die
   Beschriftung darunter zu verstehen. */
.sk-punkt {
  border-radius: 50%;
  border: 2px solid var(--gedimmt);
  background: transparent;
}
.sk-knopf[data-wert="1"] .sk-punkt { width: 14px; height: 14px; }
.sk-knopf[data-wert="2"] .sk-punkt { width: 18px; height: 18px; }
.sk-knopf[data-wert="3"] .sk-punkt { width: 22px; height: 22px; }
.sk-knopf[data-wert="4"] .sk-punkt { width: 26px; height: 26px; }
.sk-knopf[data-wert="5"] .sk-punkt { width: 30px; height: 30px; }
.sk-knopf[aria-pressed="true"] { border-color: var(--blau); }
.sk-knopf[aria-pressed="true"] .sk-punkt { background: var(--blau); border-color: var(--blau); }

.skalen-rand {
  display: flex;
  justify-content: space-between;
  padding: 0 3px;
  font-size: 12px;
  font-weight: 700;
  color: var(--leise);
}

/* ---------- Die Tafeln des Farbsehtests ---------- */

.tafelraum { display: flex; justify-content: center; padding: 2px 0; }
.tafel {
  display: block;
  width: min(100%, 300px);
  height: auto;
  border-radius: 50%;
  /* Kein Rahmen und kein Schatten: beides ist Farbe am Rand der Tafel und
     stoert genau die Wahrnehmung, um die es hier geht. */
}

/* ---------- Das Ergebnis ---------- */

/* Der eine Wert, um den es geht. Gross, wie der Preis in der Öl-App. */
.erg-kopf {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 14px 13px 15px;
  border-radius: 18px;
  background: var(--karte);
  border: 2px solid var(--linie);
  text-align: center;
}
.erg-klein { font-size: 13px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: var(--leise); }
.erg-gross { font-size: 46px; font-weight: 800; line-height: 1; letter-spacing: -1px; }
.erg-gross.wort { font-size: 30px; letter-spacing: -.3px; }
.erg-unter { font-size: 15px; font-weight: 700; color: var(--leise); line-height: 1.35; }

/* Die Pille traegt die Farbe des Ergebnisses: den Farbtyp, das Urteil des
   Farbsehtests, die Einordnung des IQ. */
.erg-pille {
  margin-top: 3px;
  padding: 4px 14px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: .4px;
}
.erg-pille.rot   { background: var(--ft-rot);   color: var(--auf-rot); }
.erg-pille.gelb  { background: var(--ft-gelb);  color: var(--auf-gelb); }
.erg-pille.gruen { background: var(--ft-gruen); color: var(--auf-gruen); }
.erg-pille.blau  { background: var(--ft-blau);  color: var(--auf-blau); }
.erg-pille.gut   { background: var(--richtig);  color: var(--auf-warn); }
.erg-pille.warn  { background: var(--warn);     color: var(--auf-warn); }

/* Die Skala beim IQ: wo liegt der Wert in der Verteilung. Gleiche Bauart wie
   die Preisskala der Öl-App, aus demselben Grund: eine Zahl allein sagt nichts,
   wenn man die Spanne nicht kennt. */
.erg-skala { display: flex; align-items: center; gap: 7px; width: 100%; margin-top: 7px; }
.erg-skala-rand { flex: none; font-size: 11px; font-weight: 700; color: var(--leise); }
.erg-skala-bahn {
  position: relative;
  flex: 1;
  min-width: 0;
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--linie) 0%, var(--blau) 50%, var(--richtig) 100%);
}
.erg-skala-bahn i {
  position: absolute;
  top: -4px;
  width: 4px;
  height: 14px;
  margin-left: -2px;
  border-radius: 2px;
  background: var(--text);
  box-shadow: 0 0 0 1.5px var(--karte);
}

/* Die Verteilung der vier Farben. Balken statt Kreisdiagramm: nebeneinander
   liegende Laengen vergleicht das Auge zuverlaessig, Kreisausschnitte nicht. */
.verteilung { display: grid; gap: 8px; }
.vt-zeile { display: grid; grid-template-columns: 74px minmax(0, 1fr) 42px; align-items: center; gap: 9px; }
.vt-name { font-size: 14px; font-weight: 800; }
.vt-bahn { height: 15px; border-radius: 999px; background: var(--bg); overflow: hidden; }
.vt-fuell { height: 100%; border-radius: 999px; transition: width .5s cubic-bezier(.4, 0, .2, 1); }
.vt-wert { font-size: 14px; font-weight: 800; text-align: right; }
.vt-zeile.rot   .vt-fuell { background: var(--ft-rot); }
.vt-zeile.gelb  .vt-fuell { background: var(--ft-gelb); }
.vt-zeile.gruen .vt-fuell { background: var(--ft-gruen); }
.vt-zeile.blau  .vt-fuell { background: var(--ft-blau); }
.vt-zeile.rot   .vt-name { color: var(--ft-rot); }
.vt-zeile.gelb  .vt-name { color: var(--ft-gelb); }
.vt-zeile.gruen .vt-name { color: var(--ft-gruen); }
.vt-zeile.blau  .vt-name { color: var(--ft-blau); }

/* Die vier Achsen des Typ-Tests. Der Zeiger sitzt zwischen zwei Polen, denn
   fast niemand ist ganz links oder ganz rechts, und genau das soll man sehen. */
.achse { display: grid; gap: 4px; }
.achse + .achse { margin-top: 11px; }
.ac-pole { display: flex; justify-content: space-between; font-size: 13px; font-weight: 700; }
.ac-pole .stark { color: var(--blau); font-weight: 800; }
.ac-pole .schwach { color: var(--leise); }
.ac-bahn { position: relative; height: 9px; border-radius: 999px; background: var(--bg); }
/* Die Mitte ist markiert: ohne sie sieht ein Zeiger bei 55 Prozent aus wie eine
   klare Entscheidung, und das waere gelogen. */
.ac-bahn::before {
  content: '';
  position: absolute;
  left: 50%;
  top: -2px;
  bottom: -2px;
  width: 1px;
  background: var(--linie);
}
.ac-zeiger {
  position: absolute;
  top: -3px;
  width: 15px;
  height: 15px;
  margin-left: -7.5px;
  border-radius: 50%;
  background: var(--blau);
  box-shadow: 0 0 0 2px var(--karte);
  transition: left .5s cubic-bezier(.4, 0, .2, 1);
}

/* Die Aufloesung des IQ-Tests, Aufgabe fuer Aufgabe. */
.loesung {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  gap: 8px;
  padding: 8px 0;
  border-bottom: 1px solid var(--linie);
  font-size: 14px;
  line-height: 1.4;
}
.loesung:last-child { border-bottom: 0; }
.lo-zeichen { font-size: 17px; font-weight: 800; text-align: center; }
.lo-zeichen.ja { color: var(--richtig); }
.lo-zeichen.nein { color: var(--falsch); }
.lo-frage { font-weight: 700; }
.lo-antwort { margin-top: 2px; color: var(--leise); }
.lo-antwort b { color: var(--text); }

/* ---------- Die Knopfreihe unter dem Ergebnis ---------- */

.knopfreihe { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.knopfreihe .knopf { min-height: 50px; font-size: 17px; }
/* Der Teilen-Knopf steht allein und ueber die volle Breite: er ist die
   Handlung, auf die diese Seite hinauslaeuft. */
.knopf.teilen { width: 100%; background: var(--blau); border-color: var(--blau); color: #fff; }
.knopf.teilen:disabled { opacity: .6; }

/* Das fertige Bild zur Ansicht, bevor es geteilt wird. Wer sieht, was er
   verschickt, verschickt eher. */
.bildschau {
  display: block;
  width: min(100%, 260px);
  height: auto;
  margin: 0 auto;
  border-radius: 14px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, .22);
}

/* ---------- Kleine Bildschirme ---------- */

/* Unter 700 px Hoehe wird es eng. Gekuerzt wird an Luft und Schriftgroesse,
   nie an der Trefferflaeche der Antworten. */
@media (max-height: 700px) {
  .frage { padding: 10px 12px; font-size: 17px; }
  .frage .reihe { font-size: 22px; margin-top: 7px; }
  .antwort { min-height: 48px; font-size: 16px; }
  .erg-gross { font-size: 40px; }
  .erg-gross.wort { font-size: 26px; }
  .t-kachel { min-height: 66px; padding: 7px 11px; }
  .sk-knopf { min-height: 56px; }
  .tafel { width: min(100%, 250px); }
  /* Auf einem 640 px hohen Bildschirm passen Aufgabe und Antworten sonst nicht
     zusammen ins Bild, und man muss zum Vergleichen scrollen. Gemessen bei
     320 x 640: mit 300 px Matrix fehlten 267 px. */
  .matrix { max-width: 260px; }
}

/* Sehr schmale Geraete: vier Bildfelder nebeneinander werden zu klein. */
@media (max-width: 340px) {
  .antworten.bilder { grid-template-columns: repeat(2, 1fr); }
  .t-kachel { grid-template-columns: 40px minmax(0, 1fr) auto; gap: 9px; }
  .tk-zeichen { width: 40px; height: 40px; font-size: 22px; }
}


/* ---------- IQ-Test: Lösung, Mut und Blättern ----------
   Seit 01.08.2026 springt der IQ-Test nach einer Antwort nicht mehr weiter.
   Die Lösung steht da, mit Begründung und einem Satz Mut, und weiter geht es
   erst auf Knopfdruck. Zurück ist nur zum Nachlesen. */
.antwort.loesung {
  border-color: #17864a;
  box-shadow: inset 0 0 0 2px #17864a;
}
.antwort.daneben {
  border-color: #d32f2f;
  box-shadow: inset 0 0 0 2px #d32f2f;
}
.antwort.leise { opacity: .5; }
.antwort:disabled { cursor: default; }

.iq-loesung {
  display: grid;
  gap: 4px;
  margin-top: 12px;
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--karte);
  border: 2px solid #d32f2f;
  text-align: center;
}
.iq-loesung.gut { border-color: #17864a; }
.iq-urteil { font-size: 19px; font-weight: 800; color: #d32f2f; }
.iq-loesung.gut .iq-urteil { color: #17864a; }
.iq-richtig { font-size: 15px; font-weight: 700; }
.iq-warum { font-size: 14.5px; line-height: 1.45; color: var(--leise); }
.iq-mut { margin-top: 4px; font-size: 14px; font-weight: 700; color: var(--blau); }

@media (prefers-color-scheme: dark) {
  .antwort.loesung { border-color: #3ddc84; box-shadow: inset 0 0 0 2px #3ddc84; }
  .antwort.daneben { border-color: #f16b6b; box-shadow: inset 0 0 0 2px #f16b6b; }
  .iq-loesung { border-color: #f16b6b; }
  .iq-loesung.gut { border-color: #3ddc84; }
  .iq-urteil { color: #f16b6b; }
  .iq-loesung.gut .iq-urteil { color: #3ddc84; }
}

.iq-nav { display: flex; gap: 8px; margin-top: 10px; }
.iq-navknopf {
  flex: 1;
  min-height: 52px;
  padding: 0 12px;
  border: 2px solid var(--linie);
  border-radius: 14px;
  background: var(--karte);
  color: var(--text);
  font-family: inherit;
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
  touch-action: manipulation;
}
.iq-navknopf.vor { background: var(--blau); border-color: var(--blau); color: #fff; }
.iq-navknopf:disabled { opacity: .38; cursor: default; }
.iq-navknopf:active:not(:disabled) { transform: scale(.97); }


/* ---------- Die Aufgabenuhr des IQ-Tests ----------
   Ein Ring, der sichtbar leer läuft, mit der Zahl groß in der Mitte. Grün,
   gelb, rot: man sieht die Zeit auch aus dem Augenwinkel. In den letzten
   Sekunden pulst er, damit klar ist, dass es eng wird. */
.iq-uhr-zeile { display: flex; justify-content: center; margin: 2px 0 10px; }
.iq-uhr {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: conic-gradient(#17864a 360deg, rgba(127,127,127,.22) 0deg);
}
.iq-uhr-innen {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: var(--grund);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.iq-uhr-zahl { font-size: 27px; font-weight: 800; }
.iq-uhr-sek { font-size: 10.5px; font-weight: 700; color: var(--gedimmt); margin-top: 1px; }
.iq-uhr.knapp { animation: iqPuls .9s ease-in-out infinite; }
@keyframes iqPuls {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.07); }
}
@media (prefers-reduced-motion: reduce) {
  .iq-uhr.knapp { animation: none; }
}