/* Die Pruefpunkt-Seite. Fuenfmal in 38 Schritten.
 *
 * Sie laedt basis.css, schritt.css und dieses Blatt — in dieser Reihenfolge.
 * Zaehler, Fortschrittsleiste, Fuss, Aufklapper und Zeichnung kommen aus
 * schritt.css und sehen deshalb aus wie auf den 33 Seiten davor; hier steht
 * nur, was es dort nicht gibt. Der Uebergang von Schritt 9 auf 10 soll sich
 * anfuehlen wie derselbe Ablauf und nicht wie eine zweite Website.
 *
 * Magenta ist die Farbe der Pruefpunkte und des Lernstoffs (Farbtabelle im
 * Plan). Auf Weiss traegt sie 5,73:1; Weiss auf Magenta ist derselbe Wert und
 * damit auch fuer kleine Schrift erlaubt.
 */

.pruefpunkt {
  padding-top: 1.25rem;
}

/* --- Das Band -------------------------------------------------------------
 *
 * Nummer und Kapiteltitel wie auf der Bauschritt-Seite, nur auf Magenta und
 * mit der Marke darueber. Der Zaehler selbst ist derselbe Baustein; hier
 * werden nur seine Farben umgestellt, denn --grau auf Magenta waere nicht
 * mehr zu lesen.
 */

.pruefband {
  margin: 0 -1rem 1.25rem;
  padding: 0.75rem 1rem 0.875rem;
  background: var(--magenta);
  color: var(--papier);
}

.pruefband-marke {
  margin: 0 0 0.125rem;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.pruefband .zaehler {
  margin-bottom: 0;
}

.pruefband .zaehler-kapitel {
  color: var(--papier);
}

@media (min-width: 900px) {
  .pruefband {
    margin-right: 0;
    margin-left: 0;
    border-radius: 10px;
  }
}

/* --- Aufforderung, Handlung, was anders ist -------------------------------
 *
 * Die Aufforderung sind vier Woerter und der einzige Satz, den ein Kind hier
 * wirklich lesen muss — sie steht an der Stelle und in der Groesse der Ansage
 * auf der Bauschritt-Seite, nur eine Spur groesser: hier steht kein Foto
 * darueber, das die Aufmerksamkeit haelt.
 *
 * Die Handlung darunter ist klein und grau wie die Pin-Angabe. Sie gibt es
 * nur an Pruefpunkt 10 ("USB-C anschliessen") — die einzige Handlung an einem
 * Pruefpunkt, und ohne sie passiert nichts.
 */

.aufforderung {
  margin: 0 0 0.5rem;
  font-size: 1.625rem;
  font-weight: 700;
  line-height: 1.25;
  text-wrap: pretty;
}

.handlung {
  margin: 0 0 0.75rem;
  color: var(--grau);
  font-size: 0.875rem;
}

.was-anders {
  margin: 0 0 1.5rem;
  font-size: 1.0625rem;
}

/* --- Die Hoerprobe --------------------------------------------------------
 *
 * Der Behaelter zwischen "Was ist jetzt anders?" und dem Lernstoff wird von
 * `stil/synth.css` gesetzt — es steht auf jeder Seite mit Hoerprobe und ist
 * die eine Stelle, an der sie beschrieben ist. Zwei Faellen davon liefen
 * auseinander, und die Seite saehe an einem Pruefpunkt anders aus als auf
 * /spielen/.
 *
 * Der Hinweis darunter steht dagegen nur hier: er sagt, dass die Taste
 * daneben nur vorspielt und der echte Ton aus dem Lautsprecher am Brett
 * kommt. Auf der Startseite und auf /spielen/ gibt es nichts zu verwechseln,
 * und dort steht er deshalb nicht.
 *
 * Er gehoert **an die Taste** und nicht an den Lernstoff. Der negative
 * Abstand nach oben frisst zwei Drittel der 1.5rem, mit denen `.synth` endet;
 * uebrig bleiben 0.5rem, und der Hinweis haengt sichtbar am Kasten darueber.
 */

.hoerprobe-hinweis {
  margin: -1rem 0 1.5rem;
  color: var(--grau);
  font-size: 0.9375rem;
}

/* Ohne JavaScript faellt der Behaelter weg (`.synth:empty { display: none }`)
 * und mit ihm sein unterer Abstand. Der Hinweis bleibt stehen, denn er gilt
 * auch dem Geraet auf dem Tisch — ohne diese Regel zoege ihn der negative
 * Abstand dann in den Satz darueber. */
.synth:empty + .hoerprobe-hinweis {
  margin-top: 0;
}

/* --- Lernstoff ------------------------------------------------------------
 *
 * Der einzige Ort auf dieser Website, an dem laenger erklaert werden darf.
 * Der magentafarbene Strich links sagt, dass hier nicht gebaut, sondern
 * gelernt wird — dieselbe Farbe wie das Band oben und die Pruefpunkte in der
 * Leiste.
 */

.lernstoff {
  margin: 0 0 1.75rem;
  padding-left: 1rem;
  border-left: 4px solid var(--magenta);
}

.lernstoff p:last-child {
  margin-bottom: 0;
}

.lernstoff .zeichnung {
  margin-top: 1.25rem;
}

/* --- Wenn nichts passiert -------------------------------------------------
 *
 * Der Teil, der darueber entscheidet, ob ein Kind weitermacht. Ein Satz
 * "pruef die letzten fuenf Schritte" sagt nicht, wonach zu suchen ist; hier
 * steht zu jedem Fehler ein Bild, ein Satz und der Weg zurueck.
 */

.fehlersuche {
  margin: 0 0 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--linie);
}

.fehlersuche > h2 {
  margin-bottom: 1rem;
}

/* 09-fehlerbilder.svg ist ein reiner Symbolvorrat und zeigt selbst nichts an.
 * Er steht inline im Dokument, damit die <use>-Verweise ihn finden und die
 * CSS-Variablen der Symbole sich aufloesen — sichtbar risse sein leerer
 * Rahmen eine 8:5-Flaeche auf. Nicht `display: none`: die Flaeche null mit
 * overflow hidden ist ebenso unsichtbar und laesst keinen Zweifel, dass die
 * Symbole darin weiterbenutzt werden. */
.symbolvorrat {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* Bild links, Text rechts — aber erst, wenn beides nebeneinander noch lesbar
 * ist. Darunter steht das Bild ueber dem Text; die Zeichnung ist dann so
 * breit wie die Spalte und der Satz beginnt darunter. */
.fehlerbild {
  display: grid;
  gap: 0.5rem 1.25rem;
  margin: 0 0 1.75rem;
}

.fehlerbild:last-child {
  margin-bottom: 0;
}

.fehlerbild-bild {
  max-width: 20rem;
}

.fehlerbild-svg {
  display: block;
  width: 100%;
  height: auto;
}

.fehlerbild-text h3 {
  margin: 0 0 0.375rem;
  font-size: 1.0625rem;
}

.fehlerbild-text p:last-child {
  margin-bottom: 0;
}

@media (min-width: 620px) {
  .fehlerbild {
    grid-template-columns: 14rem 1fr;
    align-items: start;
  }

  .fehlerbild-bild {
    grid-row: span 2;
  }
}

/* --- Der Weg zurueck ------------------------------------------------------
 *
 * Die Schritte, an denen der Fehler steckt. Nur Nummern, als Griffe: bei
 * Pruefpunkt 10 sind es sieben Kabel, und sieben ausgeschriebene Zeilen
 * "Schritt 3" waeren eine Wand. Ein Vorlesegeraet bekommt das Wort "Schritt"
 * einmal aus der Marke davor.
 */

.ruecksprung {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem 0.5rem;
  margin: 0.25rem 0 0;
  font-size: 0.9375rem;
}

.ruecksprung-marke {
  color: var(--grau);
}

.ruecksprung-schritt {
  display: inline-block;
  min-width: 2rem;
  padding: 0.1875rem 0.5rem;
  border: 1px solid var(--linie);
  border-radius: 999px;
  color: var(--tinte);
  text-align: center;
  text-decoration: none;
}

.ruecksprung-schritt:hover {
  border-color: var(--tinte);
}

/* Die Beruhigung stand bis Aufgabe 15 hier. Sie steht auch auf der
 * Vorbereitungsseite und sieht dort gleich aus, also gehoert ihre Regel ins
 * gemeinsame Blatt: stil/schritt.css. */

/* --- Ausblick und Abschluss ----------------------------------------------- */

.ausblick {
  margin: 0 0 1.5rem;
  color: var(--magenta);
  font-size: 1.0625rem;
  font-weight: 600;
}

.abschluss {
  margin: 0 0 1.5rem;
  padding: 1rem 1.125rem 1.125rem;
  border: 2px solid var(--magenta);
  border-radius: 10px;
}

.abschluss p:last-child {
  margin-bottom: 0;
}

/* Das Bild des fertigen Geraets. Einmal in der ganzen Anleitung, und ohne
 * Buehne: hier wird nichts verglichen, hier steht, was fertig ist. Deshalb
 * auch keine Bildunterschrift — der Schlusssatz darueber ist die Unterschrift.
 */

.abschluss-bild {
  display: block;
  width: 100%;
  margin: 1rem 0 0;
  border-radius: 6px;
  background: #f4f4f4;
}

.abschluss-weiter {
  margin-top: 1rem;
}

.taste-spielen {
  display: inline-block;
  padding: 0.625rem 1.25rem;
  border-radius: 999px;
  background: var(--magenta);
  color: var(--papier);
  font-size: 1.0625rem;
  font-weight: 700;
  text-decoration: none;
}

.taste-spielen:hover {
  background: #9c1f70;
}

/* --- Handy ----------------------------------------------------------------
 *
 * Dieselbe Grenze wie in schritt.css: unter 700 px klebt die Leiste am
 * unteren Rand. Was hier steht, macht nur den Text schmaler Spalten ruhiger.
 */

@media (max-width: 479.98px) {
  .aufforderung {
    font-size: 1.4375rem;
  }
}