/* Die vier Seiten neben dem Bauweg: Start, Kit, Technik, Spielen.
 *
 * Sie laden basis.css, schritt.css, uebersicht.css und dieses Blatt — in
 * dieser Reihenfolge. Weiter-Taste, Zeichnung, Beruhigung und die Teilezeile
 * kommen aus den drei anderen und pruefen sich dort; hier steht nur, was es
 * dort nicht gibt. Sieben Seitenarten in einem Auftritt duerfen nicht wie
 * sieben Websites wirken.
 *
 * Warum uebersicht.css mitgeladen wird: Die Teileliste auf der Kit-Seite ist
 * dieselbe Liste wie auf der Vorbereitungsseite — dieselben Zeilen, derselbe
 * Vermerk "noch offen", dieselbe Bedeutung. Sie hier noch einmal zu setzen
 * waere die zweite Gelegenheit, auseinanderzulaufen: eine Aenderung am
 * Vermerk traefe dann nur eine der beiden Seiten.
 *
 * Nichts hier braucht JavaScript. Die Synth-Behaelter sind bis Aufgabe 17
 * leer und deshalb unsichtbar (`.synth:empty`) — eine Ueberschrift ueber
 * nichts gibt es dazu nicht.
 *
 * Zur Farbregel: --orange traegt auf Weiss nur 3,50:1 und ist erst ab 24 px
 * oder 19 px fett erlaubt. Kleine Schrift nimmt --orange-text.
 */

.segment {
  padding-top: 1.25rem;
}

/* Absaetze aus der Redaktion, auf allen vier Seiten gleich. */
.segmenttext {
  margin: 0 0 1.5rem;
}

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

/* --- Start: der Aufmacher -------------------------------------------------
 *
 * Ein Kind entscheidet hier in wenigen Sekunden, ob sich das lohnt. Deshalb
 * steht oben genau dreierlei: das Geraet als Zeichnung, ein Satz, eine Taste.
 * Der Rest des Textes kommt darunter — wer schon ueberzeugt ist, hat die
 * Taste dann laengst gedrueckt.
 *
 * Am Handy steht die Zeichnung unter dem Satz und nicht darueber: der Satz
 * sagt, was das ist, und ein Bild ohne diesen Satz ist ein Steckbrett mit
 * Kabeln. Ab 700 px liegen beide nebeneinander, und dann passt beides
 * zusammen auf die erste Bildschirmseite.
 */

.aufmacher {
  display: grid;
  gap: 1rem 2rem;
  margin: 0 0 1.5rem;
}

@media (min-width: 700px) {
  .aufmacher {
    grid-template-columns: 1fr 1fr;
    align-items: center;
  }
}

.aufmacher-titel {
  margin: 0 0 0.5rem;
  font-size: 2rem;
}

.aufmacher-satz {
  margin: 0 0 1.25rem;
  font-size: 1.1875rem;
}

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

/* Die Zeichnung traegt auf der Startseite keine eigene Bildunterschrift-Spalte
 * — sie steht neben dem Satz, der dasselbe sagt. */
.aufmacher-bild .zeichnung {
  margin: 0;
}

.aufmacher-bild .zeichnung-svg {
  max-width: 100%;
}

/* --- Start: der Wegweiser -------------------------------------------------
 *
 * Dieselbe Bauform wie die Kapitelkarten auf der Uebersicht, nur der Strich
 * links ist rot statt magenta: magenta gehoert den Pruefpunkten und dem
 * Lernstoff, rot der Aktion — und eine Karte, die woandershin fuehrt, ist
 * eine Aktion.
 */

.wegweiser {
  margin: 0 0 1.5rem;
}

.wege {
  display: grid;
  gap: 0.875rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 700px) {
  .wege {
    grid-template-columns: 1fr 1fr;
  }
}

.weg {
  position: relative;
  padding: 0.875rem 1rem 1rem;
  border: 1px solid var(--linie);
  border-left: 6px solid var(--rot);
  border-radius: 10px;
}

.weg-titel {
  margin: 0 0 0.25rem;
  font-size: 1.125rem;
}

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

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

/* Der ganze Kasten ist der Griff, nicht nur die Ueberschrift darin — wie auf
 * der Uebersicht. Der Fokusring bleibt am Verweis. */
.weg-titel a::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 10px;
}

.weg-satz {
  margin: 0;
  color: var(--grau);
  font-size: 0.9375rem;
}

/* --- Kit: die Teileliste --------------------------------------------------
 *
 * Dieselben Zeilen wie auf der Vorbereitungsseite, aber **ohne Kaestchen**:
 * Wer hier liest, besorgt die Teile und hat sie noch nicht vor sich liegen.
 * Ein Haken, den keine Seite sich merkt, waere ein Versprechen auf einen
 * Vorrat, den es nicht gibt. Abgehakt wird auf der Vorbereitungsseite,
 * unmittelbar bevor der erste Handgriff kommt.
 */

/* Drei Spalten statt der vier auf der Vorbereitungsseite: hier fehlt das
 * Kaestchen, das Foto steht also ganz links. Die Breiten (160 px, am Handy
 * 96 px) und das Aussehen des Fotos kommen aus `uebersicht.css`; die Kit-Seite
 * laedt es mit, weil ihre Teileliste dieselbe ist. */
.segment .teil {
  display: grid;
  grid-template-columns: 160px 2.75rem 1fr;
  align-items: start;
  gap: 0.25rem 0.625rem;
  padding: 0.75rem 0.25rem;
}

/* Jede Zelle nennt ihre Spalte — sonst rutscht eine Zeile ohne Bild um eine
 * Spalte nach links, und ihr Text steht in der 2,75 rem schmalen
 * Mengenspalte. Heute fuehrt jede der acht Zeilen ein Bild, sieben ein Foto
 * und die Stromquelle eine Zeichnung; die Regel bleibt, weil eine neunte
 * Zeile ohne Bild sonst genau dort wieder landet. */
.segment .teil-foto,
.segment .teil-zeichnung {
  grid-column: 1;
}

.segment .teil-menge {
  grid-column: 2;
}

.segment .teil-text {
  grid-column: 3;
}

/* --- Kit: der Abschnitt fuer Erwachsene -----------------------------------
 *
 * Er steht unten und nicht oben: die Frage "was brauche ich" kommt zuerst,
 * die Frage "worauf lasse ich mich ein" danach. Die Marken (Zeitbedarf,
 * Sicherheit) stehen fett am Zeilenanfang — so findet jemand, der nur eine
 * davon sucht, sie beim Ueberfliegen.
 */

.erwachsene {
  margin: 0 0 1.5rem;
  padding: 1rem 1.125rem 0.5rem;
  border-radius: 10px;
  background: #f6f3f1;
}

.erwachsene h2 {
  margin-bottom: 0.625rem;
}

.merkposten-marke {
  color: var(--tinte);
}

.merkposten-marke::after {
  content: ":";
}

/* --- Bestellen: Preis und die zwei Phasen ---------------------------------
 *
 * Die Bestellen-Seite hat eine eigene Tabelle (Preis) und zwei Karten
 * (Phase 1 laeuft, Phase 2 ist geplant). Beide nutzen vorhandene Klassen
 * (.tabelle, .segment, .einstieg-tasten), wo es geht; hier nur, was es dort
 * nicht gibt.
 *
 * Phase 1 ist der laufende Weg (Mailto, jetzt klickbar). Phase 2 ist der
 * Platzhalter fuer Stripe — gleiche Karte, gleicher Aufbau, aber gestrichelt
 * und in der Farbe des Hinweises, damit niemand auf die Idee kommt, dort
 * sei schon etwas zu klicken.
 */

.bestellen-inhalt,
.bestellen-preis {
  margin: 0 0 1.5rem;
}

.bestellen-inhalt h2,
.bestellen-preis h2,
.bestellen-phasen h2 {
  margin-bottom: 0.625rem;
}

/* Preis-Tabelle: Zahlen rechts, mit Tabular-Numerals, damit das Auge die
 * Spalte als Spalte sieht und nicht jede Zahl einzeln anfaehrt. */
.bestellen-tabelle td:nth-child(2) {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.bestellen-tabelle .preis-zeile-fett td {
  font-weight: 600;
  border-top: 2px solid var(--tinte);
}

/* Phase-Karten nebeneinander auf breitem Schirm, untereinander am Handy. */
.bestellen-phasen {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin: 0 0 1.5rem;
}

.bestellen-phase {
  padding: 1rem 1.125rem;
  border-radius: 10px;
  background: #f6f3f1;
}

.bestellen-phase h2 {
  font-size: 1.125rem;
}

/* Phase 1: laeuft. Solider Akzent links, derselbe Hintergrund wie .erwachsene
 * — der Hinweis "geht jetzt" steckt im linken Strich. */
.bestellen-phase.phase-aktiv {
  border-left: 6px solid var(--rot);
}

/* Phase 2: geplant. Gestrichelte Linie, gedämpfte Farbe. Sieht aus wie ein
 * Hinweis, nicht wie ein Knopf. */
.bestellen-phase.phase-geplant {
  border-left: 6px solid var(--linie);
  background: #faf8f7;
  color: var(--grau);
}

.phase-marke {
  margin: 0 0 0.25rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--rot);
}

.bestellen-phase.phase-geplant .phase-marke {
  color: var(--grau);
}

.phase-cta {
  margin: 0.75rem 0 0;
}

/* Mailto-Button: sieht aus wie die anderen Tasten (orange), ist aber ein
 * Link — er oeffnet das Mailprogramm mit vorbereitetem Betreff und Body. */
.mailto-cta {
  display: inline-block;
  padding: 0.625rem 1rem;
  border-radius: 8px;
  background: var(--orange);
  color: var(--papier);
  font-weight: 600;
  text-decoration: none;
}

.mailto-cta:hover,
.mailto-cta:focus-visible {
  background: var(--rot);
  color: var(--papier);
}

.phase-platzhalter {
  margin: 0.5rem 0 0;
  color: var(--grau);
  font-style: italic;
}

/* --- Technik: die Wortklaerung -------------------------------------------- */

.wortklaerung {
  margin: 0 0 1.25rem;
  padding-left: 0.875rem;
  border-left: 4px solid var(--linie);
  color: var(--grau);
}

/* --- Technik: der Rollrahmen ----------------------------------------------
 *
 * Der Schaltplan ist 1900 px breit gezeichnet, und seine Beschriftungen sind
 * 12,5 px gross. Auf eine Seitenbreite verkleinert waeren sie 5 px hoch und
 * damit unlesbar — ein Plan, den niemand lesen kann, ist kein Plan. Er steht
 * deshalb in seiner Groesse da und rollt waagerecht in **seinem eigenen**
 * Rahmen; die Seite selbst rollt nicht mit. Dasselbe gilt fuer die beiden
 * Tabellen.
 *
 * `tabindex="0"` steht in der Vorlage, nicht hier: ohne ihn kommt die
 * Tastatur nicht an den Rahmen und sieht nur den linken Rand.
 */

/* Die vier Verlaeufe sind der Hinweis, dass es seitlich weitergeht: die zwei
 * hellen Deckel liegen `local` und rollen mit dem Inhalt weg, die zwei
 * Schatten liegen fest am Rahmen. Am linken Rand ist der Schatten deshalb erst
 * zu sehen, wenn wirklich etwas nach links hinausgerollt ist — ein Hinweis,
 * der nur dasteht, wenn er stimmt. Ein Satz "schieb nach rechts" stuende auch
 * dann da, wenn die Tabelle laengst ganz auf den Schirm passt. */
.rollrahmen {
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  border: 1px solid var(--linie);
  border-radius: 10px;
  background-color: var(--papier);
  background-image:
    linear-gradient(to right, var(--papier) 40%, rgba(255, 255, 255, 0)),
    linear-gradient(to left, var(--papier) 40%, rgba(255, 255, 255, 0)),
    radial-gradient(farthest-side at 0 50%, rgba(26, 22, 20, 0.22), rgba(26, 22, 20, 0)),
    radial-gradient(farthest-side at 100% 50%, rgba(26, 22, 20, 0.22), rgba(26, 22, 20, 0));
  background-position: left center, right center, left center, right center;
  background-size: 2.5rem 100%, 2.5rem 100%, 0.75rem 100%, 0.75rem 100%;
  background-repeat: no-repeat;
  background-attachment: local, local, scroll, scroll;
}

/* Ab 900 px wird der Rahmen breiter als die Textspalte — dieselbe Zahl und
 * dieselbe Rechnung wie bei der Buehne der Bauschritt-Seite. Jeder Pixel
 * mehr ist ein Pixel weniger Rollweg. */
@media (min-width: 900px) {
  .rollrahmen {
    width: 860px;
    /* Ohne das bleibt der Rahmen bei den 704 px der Textspalte stehen: die
     * Deckelung oben gilt weiter, und `width` kann sie nicht ueberstimmen. */
    max-width: none;
    margin-right: calc((100% - 860px) / 2);
    margin-left: calc((100% - 860px) / 2);
  }
}

.schaltplan {
  margin: 0 0 1.75rem;
}

.schaltplan-blatt {
  margin: 0;
}

/* Der Plan ist 1010 px hoch. Ungedeckelt stuende er am Handy als drei
 * Bildschirmseiten in der Seite und schoebe alles Weitere weg; deshalb hat er
 * hier — und nur hier — ein Fenster, in dem er sich nach allen Seiten schieben
 * laesst. Am Ende des Fensters rollt die Seite weiter (kein
 * `overscroll-behavior` in der Senkrechten), sonst sitzt jemand am Handy fest. */
.schaltplan-blatt .rollrahmen {
  max-height: 75vh;
  overflow: auto;
}

/* Ohne `max-width: none` deckelt basis.css die Zeichnung auf die Rahmenbreite
 * und macht die Beschriftungen wieder unlesbar. */
.schaltplan-svg {
  display: block;
  width: 1900px;
  max-width: none;
  height: auto;
}

.schaltplan-blatt figcaption {
  margin-top: 0.5rem;
  color: var(--grau);
  font-size: 0.875rem;
}

/* Der Weg an die Datei, unter der Bildunterschrift: erst der Ausschnitt im
 * Rahmen, dann was er sagt, dann der ganze Plan. Der Verweis steht auf einer
 * eigenen Zeile und bekommt Luft nach oben und unten, damit er auch mit dem
 * Finger zu treffen ist. */
.schaltplan-verweis {
  margin: 0.75rem 0 0;
}

.schaltplan-gross {
  display: inline-block;
  padding: 0.25rem 0;
  font-weight: 600;
}

/* --- Technik: die beiden Tabellen ----------------------------------------- */

.netzliste,
.steckplan {
  margin: 0 0 1.75rem;
}

.tabelle {
  border-collapse: collapse;
  width: 100%;
  font-size: 0.9375rem;
}

.tabelle th,
.tabelle td {
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--linie);
  text-align: left;
  vertical-align: top;
}

/* Kein `position: sticky` am Kopf: der Rahmen rollt waagerecht und hat keine
 * Hoehe, an der etwas kleben koennte — die Zeile wuerde nur im Ganzseitenfoto
 * an einer falschen Stelle auftauchen und sonst nichts tun. */
.tabelle thead th {
  background: var(--papier);
  border-bottom: 2px solid var(--tinte);
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

.tabelle tbody th {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.tabelle tbody tr:last-child th,
.tabelle tbody tr:last-child td {
  border-bottom: none;
}

/* Der Steckplan hat 38 Zeilen. Ohne Wechselstreifen verrutscht das Auge auf
 * dem Weg von der Nummer bis zum Netz. */
.tabelle-steckplan tbody tr:nth-child(even) {
  background: #faf8f7;
}

/* Die drei Angaben einer Zeile stehen mit Mittelpunkten getrennt; sie duerfen
 * nicht mitten im Namen umbrechen. */
.tabelle-steckplan td:nth-child(4),
.tabelle-steckplan td:nth-child(5) {
  min-width: 12.5rem;
}

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

/* --- Technik: die Quellen ------------------------------------------------- */

.quellen {
  margin: 0 0 1rem;
}

.quellenliste {
  margin: 0;
  padding: 0;
  list-style: none;
}

.quellenliste li {
  padding: 0.375rem 0;
  border-bottom: 1px solid var(--linie);
}

.quellenliste li:last-child {
  border-bottom: none;
}

.quellenliste code,
.quellen code {
  font-size: 0.9375rem;
  word-break: break-word;
}

/* --- Spielen --------------------------------------------------------------
 *
 * Vier Behaelter, einer je Regler. Sie stehen bis Aufgabe 17 leer da und sind
 * deshalb unsichtbar; das Raster faellt dann auf null Zeilen zusammen und
 * hinterlaesst keine Luecke.
 */

.spielhinweis {
  margin: 0 0 1.25rem;
  color: var(--grau);
  font-size: 0.9375rem;
}

.spielfeld {
  display: grid;
  gap: 1rem;
  margin: 0 0 1.5rem;
}

@media (min-width: 700px) {
  .spielfeld {
    grid-template-columns: 1fr 1fr;
  }
}

.spielfeld:empty {
  display: none;
}

/* Der Behaelter selbst steht in `stil/synth.css` — dieselbe Beschreibung wie
 * an den fuenf Pruefpunkten, an einer Stelle. */

/* Nummer und Name des Reglers, dieselben wie auf seiner Marke im Foto. Kleiner
 * als eine gewoehnliche h2: Vier davon stehen untereinander, und keine davon
 * ist eine Kapitelueberschrift. */
.synthfeld-titel {
  margin: 0 0 0.5rem;
  font-size: 1.0625rem;
}

/* Der Absatz ueber die vier Knoepfe am Geraet, zwischen Spielfeld und Foto.
 * Derselbe Abstand nach unten wie ihn das Spielfeld nach unten hat. */
.segmenttext-taster {
  margin-bottom: 1.5rem;
}

.geraetfoto {
  margin: 0 0 1.5rem;
}

/* Der Kasten um das Foto, und der Grund, warum es ihn gibt: Die vier Marken
 * liegen absolut darin und sind in Prozent gesetzt. Sie sitzen deshalb genau
 * dann auf ihren Reglern, wenn dieser Kasten genau so gross ist wie das Bild.
 *
 * Also wird seine Breite gerechnet statt dem Bild ueberlassen. Gedeckelt ist
 * die Hoehe (62vh, wie die Buehne der Bauschritt-Seite: ungedeckelt fuellt
 * das Foto am Laptop die ganze Bildschirmseite und der Text darunter faellt
 * aus dem Bild), und jede Datei in `Anleitung/web/1280/` ist 1280 x 960 —
 * daraus folgt die Breite, die zu dieser Hoehe gehoert.
 *
 * Ueberliesse man es dem Bild, waere der Bezug die Figur. Bei 1280 x 900
 * gemessen: Figur 860 px breit, Foto darin 744 px, und das Foto faengt 58 px
 * innerhalb der Figur an. Eine Marke bei x Prozent laege dann bei
 * 860 x statt bei 58 + 744 x, also um 116 x − 58 px daneben; gerechnet fuer
 * die vier Werte sind das 7 px zu weit links, dann 10, 26 und 42 px zu weit
 * rechts. Die beiden linken Marken saessen fast richtig und die beiden
 * rechten deutlich daneben.
 *
 * `container-type: inline-size` macht diesen Kasten zugleich zum Bezug fuer
 * die Abfrage weiter unten. Das ist der Grund, warum sie hier steht und nicht
 * am Fenster: Wie breit das Foto wird, haengt an dieser Zeile und damit an
 * der Fensterhoehe, nicht an seiner Breite. */
.geraetbild {
  position: relative;
  container-type: inline-size;
  width: min(100%, calc(62vh * 1280 / 960));
  margin: 0 auto;
}

.geraetbild img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
  background: #f4f4f4;
}

/* --- Die vier Marken im Foto ----------------------------------------------
 *
 * Sie beantworten die Frage, die das Foto sonst offenlaesst: Welcher der vier
 * Knoepfe ist welches Feld darueber? Wo jede sitzt, steht als `--x` und `--y`
 * an ihrem eigenen `<li>` (`vorlagen/segment.mjs`, dort steht auch, wie die
 * acht Werte gemessen wurden). Hier steht nur, wie eine Marke aussieht.
 */

.reglermarken {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  /* Das Foto liegt darunter und soll anklickbar bleiben, wo es das ist. Die
   * Marken selbst sind nichts zum Anfassen. */
  pointer-events: none;
}

.reglermarken li {
  position: absolute;
  top: var(--y);
  left: var(--x);
  display: flex;
  gap: 0.3em;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-width: 28px;
  min-height: 28px;
  padding: 0 0.5em;
  border-radius: 999px;
  /* Der weisse Ring hebt die Marke vom Foto ab. Sie liegt auf einem Bild und
   * nicht auf Papier, und was darunter liegt, ist an jeder der vier Stellen
   * ein anderes Grau. */
  box-shadow: 0 0 0 2px var(--papier);
  background: var(--rot);
  color: var(--papier);
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  transform: translate(-50%, -50%);
}

/* Ist das Foto schmal, traegt die Marke nur ihre Nummer.
 *
 * **Gefragt wird das Foto und nicht das Fenster.** Eine Abfrage am Fenster
 * stand hier und war auf der falschen Achse: Wie breit das Foto wird, deckelt
 * `62vh` und damit die Fenster*hoehe*. Gemessen an der gebauten Seite, alle
 * bei 1280 px Fensterbreite: bei 900 px Hoehe ist das Foto 744 px breit und
 * zwischen Marke 3 und Marke 4 bleiben 26 px, bei 768 px Hoehe 635 px und
 * 11 px, bei 700 px Hoehe 579 px und 3 px, bei 650 px Hoehe 537 px und 2 px
 * Ueberlappung, bei 600 px Hoehe 496 px und 8 px Ueberlappung. Am Laptop mit
 * 1366 x 768 waren die vier Marken damit ein einziger roter Balken, obwohl
 * das Fenster breit war.
 *
 * **Die Grenze liegt bei 668 px Fotobreite.** Das ist dieselbe Grenze, die
 * die alte Abfrage traf, nur richtig gemessen: Unter 700 px Fensterbreite ist
 * das Foto 32 px schmaler als das Fenster, 700 px Fenster sind also 668 px
 * Foto, und dort bleiben zwischen Marke 3 und Marke 4 noch 15 px. Weiter
 * herunter lohnt es nicht: Vier Marken mit 4 px Abstand sagen so wenig wie
 * vier ueberlappende.
 *
 * Ohne Namen sind alle vier Marken 28 px breit; gemessen bleiben dann bei
 * 375 px Fensterbreite 20 px zwischen zweien und bei 320 px noch 12 px.
 *
 * Der Name bleibt dabei im Dokument, nach demselben Rezept wie
 * `.nur-vorlesen` in `basis.css`: Wer die Seite vorlesen laesst, hoert weiter
 * "1 Morph". Und die Nummer allein genuegt, denn genau dieselbe Nummer steht
 * in der Ueberschrift des Feldes darueber. */
@container (max-width: 667.98px) {
  .reglermarken .marke-name {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

.geraetfoto figcaption {
  margin-top: 0.375rem;
  color: var(--grau);
  font-size: 0.875rem;
}

@media (min-width: 900px) {
  .geraetfoto {
    width: 860px;
    margin-right: calc((100% - 860px) / 2);
    margin-left: calc((100% - 860px) / 2);
  }
}

.spielweiter {
  margin: 0;
}

/* --- Handy ----------------------------------------------------------------
 *
 * Dieselbe Grenze wie in schritt.css und uebersicht.css.
 */

@media (max-width: 479.98px) {
  .aufmacher-titel {
    font-size: 1.75rem;
  }

  .aufmacher-satz {
    font-size: 1.0625rem;
  }

  /* Wie auf der Vorbereitungsseite: das Foto schmaler, Menge und Text
   * untereinander in einer gemeinsamen Spalte. */
  .segment .teil {
    grid-template-columns: 96px 1fr;
    gap: 0.25rem 0.5rem;
  }

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

  .segment .teil-menge,
  .segment .teil-text {
    grid-column: 2;
  }

  .erwachsene {
    padding: 0.875rem 1rem 0.375rem;
  }

  .tabelle th,
  .tabelle td {
    padding: 0.5rem;
  }

  /* Bestellen: Phasen untereinander auf schmalem Schirm — zwei Karten
   * nebeneinander sind auf 360 px Breite nicht mehr lesbar. */
  .bestellen-phasen {
    grid-template-columns: minmax(0, 1fr);
  }

  .bestellen-tabelle td:nth-child(2) {
    white-space: normal;
  }
}