/* Die beiden Seiten vor dem Bauen: Uebersicht und Vorbereitung.
 *
 * Sie laden basis.css, schritt.css und dieses Blatt — in dieser Reihenfolge.
 * Zaehler, Weiter-Taste, Beruhigung und Aufklapper-Abstaende kommen aus
 * schritt.css und pruefen sich dort; hier steht nur, was es dort nicht gibt.
 * Vier Seitenarten in einem Ablauf duerfen nicht wie vier Websites wirken.
 *
 * Nichts hier braucht JavaScript. `js/uebersicht.js` tauscht auf der Uebersicht
 * ein Verweisziel und eine Beschriftung; es setzt keine Klasse, die eine Regel
 * hier erst wahr machen wuerde.
 *
 * Zur Farbregel: --orange traegt auf Weiss nur 3,50:1 und ist erst ab 24 px
 * oder 19 px fett erlaubt. Der Vermerk "noch offen" ist klein und nimmt deshalb
 * --orange-text.
 */

.uebersicht,
.vorbereitung {
  padding-top: 1.25rem;
}

/* --- Uebersicht: Kopf ----------------------------------------------------- */

.uebersicht-titel {
  margin: 0 0 0.5rem;
}

.uebersicht .ansage {
  margin-bottom: 0.5rem;
}

.uebersicht-zeit {
  margin: 0 0 1.5rem;
  color: var(--grau);
  font-size: 0.9375rem;
}

/* --- Der Einstieg ---------------------------------------------------------
 *
 * Die Weiter-Taste ist dieselbe wie im Fuss jeder Bauschritt-Seite. Sie fuehrt
 * ohne JavaScript auf Schritt 1; mit Skript auf den hoechsten erreichten
 * Schritt, und dann steht eine andere Beschriftung darin. Deshalb keine feste
 * Breite: "Weiter bei Schritt 28" ist laenger als "Los geht's".
 */

.einstieg {
  margin: 0 0 0.75rem;
  padding: 1rem 1.125rem 1.125rem;
  border: 2px solid var(--linie);
  border-radius: 10px;
}

.einstieg-tasten {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 0;
}

.einstieg-vorher {
  margin: 0.875rem 0 0;
  color: var(--grau);
  font-size: 0.9375rem;
}

.einstieg-tasten--unten {
  margin-top: 2rem;
}

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

/* --- Die fuenf Kapitel ----------------------------------------------------
 *
 * Karten, keine Zeilen. Ein Kind soll sehen, dass das Ganze in fuenf Portionen
 * zerfaellt, von denen jede an einem Nachmittag zu schaffen ist — eine Liste
 * mit 38 Eintraegen sieht aus wie ein Gebirge, fuenf Karten sehen aus wie fuenf
 * Nachmittage.
 *
 * Der Strich links ist magenta, die Farbe der Pruefpunkte. Das ist kein
 * Zufallsgriff in die Farbtabelle: was auf der Karte als Versprechen steht
 * ("endet damit, dass der Ton nachklingt"), ist genau das, was am Pruefpunkt
 * am Kapitelende zu hoeren ist. Dieselbe Sache, dieselbe Farbe.
 */

.kapitelliste {
  margin: 0 0 1.5rem;
}

.kapitel-liste {
  display: grid;
  gap: 0.875rem;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: none;
}

.kapitel {
  padding: 0.875rem 1rem 1rem;
  border: 1px solid var(--linie);
  border-left: 6px solid var(--magenta);
  border-radius: 10px;
}

.kapitel-marke {
  margin: 0 0 0.125rem;
  color: var(--magenta);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.kapitel-titel {
  margin: 0 0 0.375rem;
  font-size: 1.1875rem;
}

.kapitel-titel a {
  color: var(--tinte);
  text-decoration: none;
}

.kapitel-titel a:hover {
  text-decoration: underline;
  text-decoration-thickness: 2px;
}

/* Der ganze Kasten ist der Griff, nicht nur die Ueberschrift darin. Am Handy
 * ist eine Zeile Text ein schmales Ziel; hier deckt der Verweis die Karte.
 * `position: relative` an der Karte, `inset: 0` am Deckel — der Fokusring
 * bleibt trotzdem am Verweis und ist damit dort, wo die Tastatur steht. */
.kapitel {
  position: relative;
}

.kapitel-titel a::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 10px;
}

/* Das deutsche Wort zum Fachwort im Titel. Es steht direkt unter dem Titel und
 * nicht kleiner als der Rest der Karte: ein Kind liest die Karte, bevor es
 * Schritt 1 anfaengt, und genau dort faellt "Morph" zum ersten Mal. */
.kapitel-wort {
  margin: 0 0 0.375rem;
}

.kapitel-hoerbar {
  margin: 0 0 0.375rem;
}

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

/* --- Vorbereitung: das Band ----------------------------------------------
 *
 * Dieselbe Bauform wie das Band der Pruefpunkt-Seite, nur in --tinte: hier
 * wird weder gebaut noch gehoert, hier wird hingelegt. Magenta gehoert den
 * Pruefpunkten, Rot der Aktion.
 */

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

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

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

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

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

/* --- Eckdaten -------------------------------------------------------------
 *
 * Umfang, Zeit, Werkzeug — die Frage vor dem Hinlegen: worauf lasse ich mich
 * ein. Die Zeit ist die einzige, die heute keine Antwort hat, und sagt das.
 */

/* Ein Raster und kein Flex-Umbruch: mit `flex-wrap` steht "Werkzeug" allein in
 * einer zweiten Zeile, sobald "38 Schritte in fünf Kapiteln" breit genug wird,
 * und die drei Angaben sehen aus wie zwei und ein Nachtrag. `auto-fit` legt sie
 * am Laptop nebeneinander und am Handy untereinander — ohne Bruchkante. */
.eckdaten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 0.75rem 1.5rem;
  margin: 0 0 1.75rem;
  padding: 0.875rem 1rem;
  border-radius: 10px;
  background: #f6f3f1;
}

.eckdatum dt {
  color: var(--grau);
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.eckdatum dd {
  margin: 0.125rem 0 0;
  font-weight: 600;
}

/* --- Die Teileliste -------------------------------------------------------
 *
 * Offen, nicht in einem Aufklapper: sie ist der Grund, aus dem es diese Seite
 * gibt. Wer sie erst aufklappen muss, klappt sie nicht auf und merkt bei
 * Schritt 6, dass ein Teil fehlt.
 *
 * Das Kaestchen steckt in seiner Beschriftung, und die Beschriftung ist die
 * ganze Zeile: am Handy ist ein 16 px grosses Kaestchen kein Ziel.
 */

.teileliste {
  margin: 0 0 1.75rem;
}

.teileliste-hinweis {
  margin: 0 0 0.875rem;
  color: var(--grau);
  font-size: 0.9375rem;
}

.teile {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--linie);
}

.teil {
  border-bottom: 1px solid var(--linie);
}

/* Vier Spalten: Kaestchen, Foto, Menge, Text.
 *
 * Das Foto steht **vor** der Menge und nicht hinter dem Text. Die Zeile
 * beantwortet in dieser Reihenfolge drei Fragen: habe ich es schon (Kaestchen),
 * wie sieht es aus (Foto), wie viele (Menge). Genau die mittlere fehlte dem
 * Kind aus dem Usertest, das die Liste abgehakt hat, ohne die Teile
 * auseinanderhalten zu koennen.
 *
 * Wo eine Zeile kein Foto fuehrt (die Stromquelle), bleibt die Spalte leer.
 * Sie einzuziehen hiesse, dass Menge und Text dieser einen Zeile weiter links
 * stehen als in allen anderen — eine Liste, die an einer Stelle springt, liest
 * sich schlechter als eine mit einer Luecke.
 *
 * **Jede Zelle nennt ihre Spalte.** Ohne das rutscht in der Zeile ohne Foto
 * alles um eine Spalte nach links: die Menge stuende in der 160 px breiten
 * Bildspalte und der Text in der 2,75 rem schmalen Mengenspalte, also mit
 * einem Wort je Zeile. Gesehen im ersten Bildschirmfoto dieser Aufgabe, bei
 * 1280 px, an der Stromquelle. */
.teil-marke {
  display: grid;
  grid-template-columns: auto 160px 2.75rem 1fr;
  align-items: start;
  gap: 0.25rem 0.625rem;
  padding: 0.75rem 0.25rem;
  cursor: pointer;
}

.teil-marke .teil-haken {
  grid-column: 1;
}

.teil-marke .teil-foto,
.teil-marke .teil-zeichnung {
  grid-column: 2;
}

.teil-marke .teil-menge {
  grid-column: 3;
}

.teil-marke .teil-text {
  grid-column: 4;
}

/* Die 160 px stehen genauso in `TEILFOTO_BREITEN` (vorlagen/uebersicht.mjs)
 * als `sizes`. Wer hier eine Zahl aendert, aendert sie dort mit, sonst holt
 * der Browser die falsche der beiden Bilddateien.
 *
 * Die Kachel gilt fuer beide Sorten Bild: sieben Zeilen fuehren ein Foto, die
 * Stromquelle eine eingebettete Zeichnung (`12-stromquelle.svg`). Beide
 * bekommen dieselbe Zelle, sonst springt die Bildspalte an dieser einen Zeile.
 *
 * Die Kit-Seite laedt dieses Stilblatt mit; `segment.css` setzt fuer ihre
 * Liste nur die Spalten. Deshalb stehen Groesse und Aussehen nur hier. */
.teil-foto,
.teil-zeichnung {
  display: block;
  width: 160px;
  height: auto;
  border-radius: 6px;
  background: #f4f4f4;
}

/* Ein Foto ist 1280 x 960, also 4:3, und `height: auto` macht daraus
 * 160 x 120 px. Ein SVG haette hier die 8:5 seiner viewBox und stuende
 * 20 px flacher in der Zeile. `aspect-ratio` gibt ihm dieselbe Kachel; sein
 * `preserveAspectRatio="xMidYMid meet"` legt die Zeichnung mittig hinein und
 * laesst oben und unten Luft. Das ist gewollt: ein Strichbild, das ein Foto
 * imitiert, hilft niemandem.
 *
 * Nachgemessen in Chrome bei 1280 px Fensterbreite: Kachel und Foto sind
 * beide genau 160 x 120 px, die Zeile springt also nicht. Die Zeichnung malt
 * darin 139 px breit und 56 px hoch, mit rund 32 px Luft oben und unten; sie
 * fuellt die Breite und laesst die Hoehe atmen. Ihre Flaechen (`#f2f2f2`)
 * liegen dicht an dieser Kachelfarbe, und das darf so bleiben: Getragen wird
 * die Form von den Strichen, die bei diesem Massstab 2 px breit sind. Die
 * Fuellung deckt nur die unteren Enden der Netzteilstifte zu, und das tut sie
 * unabhaengig von ihrem Farbwert. */
.teil-zeichnung {
  aspect-ratio: 4 / 3;
}

.teil-haken {
  width: 1.375rem;
  height: 1.375rem;
  margin: 0;
  accent-color: var(--rot);
}

.teil-menge {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  white-space: nowrap;
}

/* Abgehakt: die Zeile tritt zurueck, verschwindet aber nicht. Sie muss
 * nachlesbar bleiben — wer zweifelt, ob er den Regler oder das Audioboard
 * gemeint hat, liest noch einmal nach. Keine Durchstreichung: durchgestrichener
 * Text ist fuer ein Kind schwer zu lesen. */
.teil-haken:checked ~ .teil-menge,
.teil-haken:checked ~ .teil-text {
  color: var(--grau);
}

.teil-offen {
  display: inline-block;
  margin-left: 0.25rem;
  padding: 0.0625rem 0.5rem;
  border: 1px solid var(--orange-text);
  border-radius: 999px;
  color: var(--orange-text);
  font-size: 0.8125rem;
  font-weight: 700;
  white-space: nowrap;
}

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

/* --- Der Text der Vorbereitung -------------------------------------------- */

.vorbereitungstext {
  margin: 0 0 1.5rem;
}

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

.vorbereitung .einstieg-tasten {
  display: flex;
  margin-top: 1.5rem;
}

/* --- Zeitangaben ----------------------------------------------------------
 *
 * Hier steht die gemessene Zahl — oder, wo nichts gemessen ist, der Vermerk
 * statt einer Zahl. Der ist kein Fehler und wird nicht wie einer gefaerbt; er
 * ist die ehrliche Antwort, und sie hebt sich nur so weit ab, dass niemand sie
 * ueberliest.
 */

/* --tinte gilt fuer beide, auch wo der Satz um sie herum grau ist: die Zeit ist
 * die Angabe, nach der jemand sucht, und nicht der Nebensatz. Ohne diese Zeile
 * verschwindet sie in der Zeile, in der sie steht. Die Farbe hing bis zum
 * 10. September 2026 an `[data-zeit="offen"]` und galt damit nur dem Vermerk;
 * seit dort Zahlen stehen, waere genau die gesuchte Angabe die einzige grau
 * gebliebene gewesen. */
.zeit {
  font-style: italic;
  color: var(--tinte);
}

.eckdatum .zeit {
  font-style: normal;
  font-weight: 600;
}

/* --- Handy ----------------------------------------------------------------
 *
 * Dieselbe Grenze wie in schritt.css. Die Teilezeile behaelt ihre drei
 * Spalten — Kaestchen, Menge, Text —, denn die Menge neben dem Text zu
 * brechen hiesse, dass "27" irgendwo im Satz steht statt davor.
 */

@media (max-width: 479.98px) {
  /* Am Handy schrumpft das Foto auf 96 px, und Menge und Text ruecken in eine
   * gemeinsame Spalte darunter: bei 375 px Fensterbreite blieben fuer den Text
   * neben einem 96 px breiten Foto und der Mengenspalte keine 160 px, und ein
   * Satz in einer 160 px schmalen Spalte bricht nach jedem zweiten Wort.
   *
   * Die 96 px stehen genauso in `TEILFOTO_BREITEN` (vorlagen/uebersicht.mjs). */
  .teil-marke {
    grid-template-columns: auto 96px 1fr;
    gap: 0.25rem 0.5rem;
  }

  .teil-foto,
  .teil-zeichnung {
    width: 96px;
  }

  .teil-marke .teil-foto,
  .teil-marke .teil-zeichnung {
    grid-row: span 2;
  }

  .teil-marke .teil-menge,
  .teil-marke .teil-text {
    grid-column: 3;
  }

  .eckdaten {
    gap: 0.625rem 1.5rem;
  }

  .einstieg {
    padding: 0.875rem 1rem 1rem;
  }

  .einstieg-tasten .taste-weiter {
    flex: 1 1 auto;
    text-align: center;
  }
}