/* Die Willkommensseite — der einzige Ort in dieser Anwendung, der WIRBT.

   ⬛ Eigene Datei und nicht in `liga.css`: das Stilblatt der Anwendung lädt bei jedem
   Seitenaufruf und liegt im Vorrat des Diensthelfers. Was nur eine einzige Seite braucht,
   gehörte dort nicht hinein — der Spielleiter am Platz lädt sonst auf jedem Spieltag den
   Aufmacher mit, den er nie sieht.

   Die Farben kommen aus `liga.css`: dieselben Variablen, damit Werbung und Anwendung nicht
   aussehen wie zwei verschiedene Häuser. */

main.voll { max-width: none; padding: 0; }

.w-innen { max-width: 1120px; margin: 0 auto; padding: 0 22px; }
.w-schmal { max-width: 720px; }

/* ── Aufmacher ─────────────────────────────────────────────────────────── */
.w-held {
  padding: 76px 0 84px;
  background:
    radial-gradient(1100px 460px at 12% -12%, var(--gruen-bg), transparent 62%),
    radial-gradient(900px 420px at 96% 4%, var(--akzent-bg), transparent 58%);
  border-bottom: 1px solid var(--linie);
}
/* Das Logo über dem Aufmacher. `display:block` nimmt die Zeilenluft eines SVG weg, und die
   Höhe schrumpft am Handy mit — 56 px neben einer Überschrift, die selbst kleiner wird, sähen
   aus wie ein Aufkleber. */
.w-logo { display: block; height: clamp(38px, 8vw, 56px); width: auto; margin: 0 0 22px; }
.w-fusslogo { display: block; height: 26px; width: auto; margin: 0 0 12px; opacity: .85; }
.w-marke {
  display: inline-flex; align-items: center; gap: 7px; margin: 0 0 20px;
  padding: 6px 13px; border-radius: 999px; background: var(--flaeche);
  border: 1px solid var(--linie); color: var(--text2);
  font-size: var(--fs-xs); font-weight: 650; letter-spacing: .02em;
}
.w-marke .ic { color: var(--gruen); }
.w-held h1 {
  margin: 0 0 20px; font-size: clamp(2.4rem, 6.4vw, 4.2rem); line-height: 1.03;
  letter-spacing: -.03em; font-weight: 800;
}
.w-lead { max-width: 620px; margin: 0 0 30px; font-size: clamp(1.02rem, 2.1vw, 1.22rem);
          line-height: 1.6; color: var(--text2); }
.w-knoepfe { display: flex; flex-wrap: wrap; gap: 11px; }
.knopf.gross { height: 46px; padding: 0 22px; font-size: var(--fs-md); border-radius: 12px; }
.w-klein { margin: 16px 0 0; font-size: var(--fs-sm); color: var(--text3); }

/* ── Abschnitte ────────────────────────────────────────────────────────── */
.w-abschnitt { padding: 68px 0; }
.w-hell { background: var(--flaeche); border-block: 1px solid var(--linie); }
.w-abschnitt h2 {
  margin: 0 0 14px; font-size: clamp(1.5rem, 3.1vw, 2.05rem); line-height: 1.2;
  letter-spacing: -.02em; font-weight: 750;
}
.w-unter { max-width: 640px; margin: 0 0 34px; color: var(--text2); line-height: 1.6; }
.w-etikett {
  margin: 0 0 10px; color: var(--gruen); font-size: var(--fs-xs);
  font-weight: 750; text-transform: uppercase; letter-spacing: .09em;
}

/* Zwei Spalten: Text und Bild. `minmax(0, …)` ist Pflicht — ohne das schrumpft die Spalte
   nicht unter die Breite ihres breitesten Kindes, und das Bild schiebt die Seite auf. */
.w-zwei {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: 46px; align-items: center;
}
.w-gedreht .w-text { order: 2; }
.w-text p { margin: 0 0 14px; color: var(--text2); line-height: 1.65; }
.w-text b { color: var(--text); }

.w-liste { list-style: none; margin: 18px 0 0; padding: 0; }
.w-liste li {
  display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 10px;
  margin-bottom: 11px; color: var(--text2); line-height: 1.5;
}
.w-liste .ic { color: var(--gruen); margin-top: 3px; }
/* Die Symbole der grossen Liste sind Bilder, keine Häkchen — sie brauchen mehr Spalte,
   sonst ragen sie in den Text hinein. */
.w-liste-gross li { grid-template-columns: 26px minmax(0, 1fr); gap: 12px;
                    margin-bottom: 15px; font-size: var(--fs-md); }
.w-liste-gross .ic { margin-top: 4px; }

/* Das Bild in einem angedeuteten Fensterrahmen — es soll erkennbar ein Bildschirmfoto sein
   und nicht ein Teil dieser Seite. */
.w-bild { margin: 0; }
.w-bild img {
  display: block; width: 100%; height: auto; border-radius: 14px;
  border: 1px solid var(--linie); box-shadow: 0 18px 44px rgba(0, 0, 0, .13);
  background: var(--bg);
}
.w-bild figcaption { margin-top: 11px; font-size: var(--fs-xs); color: var(--text3); }
.w-handy img { max-width: 290px; margin: 0 auto; border-radius: 22px; }

/* ── Unterseiten ───────────────────────────────────────────────────────────
   Eine schmale Spalte für Einzelheiten, die auf der Willkommensseite nur im Weg stünden.
   Sie erbt deren Gestaltung, damit man merkt, dass man dasselbe Haus nicht verlassen hat. */
.w-unterseite { padding: 44px 0 76px; }
.w-unterseite h1 {
  margin: 0 0 16px; font-size: clamp(1.9rem, 4.6vw, 2.6rem); line-height: 1.12;
  letter-spacing: -.025em; font-weight: 800;
}
.w-h2 { margin: 40px 0 6px; font-size: 1.32rem; font-weight: 750; letter-spacing: -.01em; }
/* Eine Zwischenüberschrift INNERHALB einer Spalte — kleiner als `w-h2`, das einen ganzen
   Abschnitt eröffnet. ⬛ Ohne sie erbte ein `<h3>` die Grösse des Abschnittstitels und sah aus
   wie ein neuer Abschnitt, der mitten in einer Spalte beginnt. */
.w-h3 { margin: 22px 0 6px; font-size: 1.05rem; font-weight: 700; letter-spacing: -.005em; }
.w-h3:first-child { margin-top: 0; }
.w-zurueck { margin: 0 0 18px; font-size: var(--fs-sm); }
.w-zurueck a { display: inline-flex; align-items: center; gap: 5px; color: var(--text2); }
.w-zurueck a:hover { color: var(--akzent); }
.w-zurueck-unten { margin: 40px 0 0; }
/* Der Weiterführungs-Verweis auf der Willkommensseite: eine Zeile, die sichtbar weiterführt,
   ohne wie ein Knopf auszusehen — sie ist ein Nebenweg, nicht der Hauptweg. */
.w-weiter {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--akzent); font-weight: 650;
}
.w-weiter:hover { text-decoration: underline; }
/* ── Rechtstexte ───────────────────────────────────────────────────────────
   Länger als alles andere hier und zum LESEN da, nicht zum Überfliegen: engere Zeilen als in
   der Werbung, aber mehr Luft zwischen den Absätzen. */
.w-rechtstext p { margin: 0 0 13px; color: var(--text2); line-height: 1.68; }
.w-rechtstext b { color: var(--text); }
.w-rechtstext .w-h2 { margin: 34px 0 10px; font-size: 1.16rem; }
.w-rechtstext .w-lead { margin-bottom: 26px; }
.w-anschrift { line-height: 1.75 !important; }
.w-punkte { margin: 0 0 14px; padding-left: 22px; color: var(--text2); line-height: 1.68; }
.w-punkte li { margin-bottom: 7px; }
/* Ein fehlendes Impressum darf nicht wie ein fertiges aussehen. */
.w-warnkasten {
  margin: 0 0 26px; padding: 16px 18px; border-radius: 12px;
  background: var(--rot-bg); border: 1px solid var(--rot);
}
.w-warnkasten p { margin: 0; color: var(--rot); line-height: 1.6; }
.w-warnkasten b { color: var(--rot); }

.w-hinweiskasten {
  margin: 30px 0 0; padding: 16px 18px; border-radius: 12px;
  background: var(--flaeche3); border: 1px solid var(--linie);
}
.w-hinweiskasten p { margin: 0; color: var(--text2); font-size: var(--fs-sm); line-height: 1.6; }
/* Zwei Absätze in einem Kasten brauchen eine Fuge — ohne sie liest sich der zweite wie die
   Fortsetzung des ersten. Und Knöpfe brauchen mehr davon als Text: Sie sollen als eigene
   Handlung dastehen und nicht wie eine Zeile mehr. */
.w-hinweiskasten p + p { margin-top: 11px; }
.w-hinweiskasten .w-knoepfe { margin-top: 18px; }
.w-hinweiskasten b { color: var(--text); }

/* ── Die Anleitung „zum Startbildschirm" ───────────────────────────────── */
.w-anleitung {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px;
  margin: 22px 0 14px;
}
.w-weg {
  padding: 18px 20px 6px; border-radius: 14px;
  background: var(--bg); border: 1px solid var(--linie);
}
.w-weg h3 {
  display: flex; align-items: center; gap: 8px; margin: 0 0 12px;
  font-size: var(--fs-md); font-weight: 700;
}
.w-weg h3 .ic { color: var(--gruen); }
/* Die Schritte tragen ihre Nummer selbst — als Kreis, damit sie sich vom Fliesstext absetzen
   und man beim zweiten Hinsehen wiederfindet, wo man war. */
.w-weg ol { list-style: none; margin: 0; padding: 0; counter-reset: schritt; }
/* ⬛ Einzug und absolut gesetzte Nummer — KEIN Grid für die Zeile. Ein Grid macht jedes Kind
   zu einer eigenen Zelle: die Nummer, dann der Text, dann jedes <b> — und jedes fette Wort
   sprang in eine neue Zeile. So bleibt der Schritt ein zusammenhängender Satz. */
.w-weg li {
  counter-increment: schritt; position: relative;
  padding-left: 34px; margin-bottom: 13px;
  color: var(--text2); font-size: var(--fs-sm); line-height: 1.55;
}
.w-weg li::before {
  content: counter(schritt);
  position: absolute; left: 0; top: 1px;
  display: flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--gruen-bg); color: var(--gruen);
  font-size: var(--fs-xs); font-weight: 750;
}
.w-weg b { color: var(--text); }
/* Das Symbol, nach dem man auf dem Gerät sucht — als Taste gezeichnet, damit klar ist, dass
   es etwas zum Antippen ist und keine Verzierung im Satz. */
.w-taste {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; vertical-align: -8px; margin: 0 1px;
  border-radius: 7px; background: var(--flaeche3); border: 1px solid var(--linie);
  color: var(--text);
}

/* ── Drei Karten ───────────────────────────────────────────────────────── */
.w-drei { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.w-karte {
  padding: 24px; border-radius: 16px; background: var(--bg);
  border: 1px solid var(--linie);
}
.w-hell .w-karte { background: var(--bg); }
.w-symbol {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; margin-bottom: 14px; border-radius: 12px;
  background: var(--gruen-bg); color: var(--gruen);
}
.w-karte h3 { margin: 0 0 9px; font-size: 1.16rem; font-weight: 700; }
.w-karte p { margin: 0; color: var(--text2); line-height: 1.6; font-size: var(--fs-sm); }

/* ── Der ernste Abschnitt ──────────────────────────────────────────────── */
.w-ernst { background: var(--flaeche2); border-block: 1px solid var(--linie); }
.w-gross { font-size: clamp(1.05rem, 2.2vw, 1.25rem); line-height: 1.6; color: var(--text); }

/* Wie das Symbol auf dem Startbildschirm aussieht — dieselbe Rundung wie dort, damit man es
   wiedererkennt statt es zu suchen. */
.w-symbolprobe { margin: 0 0 30px; text-align: center; width: 76px; }
.w-symbolprobe img { display: block; border-radius: 18px; box-shadow: var(--schatten); }
.w-symbolprobe figcaption { margin-top: 7px; font-size: var(--fs-xs); color: var(--text2); }

/* ── Schluss und Fuss ──────────────────────────────────────────────────── */
.w-schluss { padding: 76px 0; text-align: center; }
.w-schluss h2 { margin: 0 0 14px; font-size: clamp(1.6rem, 3.4vw, 2.2rem); font-weight: 750;
                letter-spacing: -.02em; }
.w-schluss p { max-width: 560px; margin: 0 auto 26px; color: var(--text2); line-height: 1.6; }
.w-schluss .w-knoepfe { justify-content: center; }
.w-fuss {
  padding: 30px 0 44px; border-top: 1px solid var(--linie);
  color: var(--text3); font-size: var(--fs-sm);
}
.w-fuss p { margin: 0 0 7px; }
.w-fuss a { color: var(--text2); }

/* ── Schmale Bildschirme ───────────────────────────────────────────────── */
@media (max-width: 860px) {
  .w-drei { grid-template-columns: 1fr; }
  .w-anleitung { grid-template-columns: 1fr; }
  .w-zwei { grid-template-columns: 1fr; gap: 30px; }
  /* Die Umkehrung gilt nur nebeneinander. Untereinander gehört der Text IMMER nach oben —
     sonst stünde das Bild vor der Erklärung, die es erklären soll. */
  .w-gedreht .w-text { order: 0; }
  .w-held { padding: 52px 0 58px; }
  .w-abschnitt { padding: 50px 0; }
}
@media (max-width: 480px) {
  .w-knoepfe .knopf { width: 100%; justify-content: center; }
}

/* ── Die Vereinbarung zur Auftragsverarbeitung ─────────────────────────────
   Sie wird ausgedruckt und unterschrieben — anders als die übrigen Rechtstexte, die man nur
   liest. Deshalb Linien zum Ausfüllen und ein Platz für zwei Unterschriften. */
.w-auszufuellen { line-height: 2.4; }
.w-unterschriften {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 28px; margin: 22px 0 0;
}
.w-stand { margin-top: 28px; color: var(--text3); font-size: var(--fs-sm); }
@media print {
  /* Beim Ausdrucken bleibt der Vertrag übrig: Kopfleiste, Fussleiste und Rücksprung sind
     Bedienung, kein Vertragstext. */
  .kopf, .fuss, .rechtsfuss, .w-zurueck, .menue-knopf { display: none !important; }
  .w-unterseite, .w-innen { padding: 0 !important; max-width: none !important; }
  .w-hinweiskasten, .w-warnkasten { border: 1px solid #999 !important; }
}
/* Ein Absatz direkt nach einer Aufzählung braucht Luft — sonst liest er sich wie ein
   letzter Listenpunkt ohne Punkt davor. */
.w-rechtstext ul + p { margin-top: 14px; }

/* ── Die Schauseiten: die Anwendung in einem Gerät ─────────────────────────
   ⬛ Vom Nutzer beauftragt: „Legt das Ganze mal auf einen Monitor, auf ein iPad und auf ein
   Handy, sodass der Besucher wirklich optisch sehen kann, wie so was aussieht."

   In den Rahmen steckt kein Bildschirmfoto, sondern ein Fenster auf die echte Seite. Das
   erzwingt die Bauweise: Der Rahmen gibt die GERÄTEGRÖSSE vor (damit die Seite darin so
   umbricht, wie sie es auf dem Gerät täte), und erst danach wird das Ganze verkleinert, bis es
   auf die Webseite passt. Ein einfach schmal gemachtes Fenster hätte statt eines Handys nur
   eine schmale Webseite gezeigt. */
.geraet { margin: 0; }
.geraet figcaption {
  margin-top: 12px; text-align: center; color: var(--text3); font-size: var(--fs-sm);
}
/* ⬛ ZWEI Kästen, nicht einer: aussen die Blende, innen das Glas.
   Vom Nutzer gemeldet — „der Rahmen des Telefons ist hinter dem Screen". Der Grund ist eine
   alte WebKit-Eigenheit: Ein Rahmen aus `border` klippt einen Inhalt, der mit `transform`
   verkleinert wurde, nicht zuverlässig; Safari malt das Fenster ÜBER die Blende. Mit einem
   eigenen Kasten kann das nicht mehr passieren — die Blende ist Rand des äusseren Kastens,
   das Fenster wohnt im inneren und kennt den Platz daneben gar nicht. */
/* ⬛ Vom Nutzer gewünscht: „wir sollten die Geräterahmen hell gestalten. Die sind jetzt immer
   noch schwarz." Ein schwarzer Klotz zieht auf einer hellen Seite den Blick auf sich — und der
   soll auf dem BildschirmINHALT liegen, nicht auf dem Gehäuse. Als Variable und nicht als feste
   Farbe: Im Dunkelmodus wäre ein weisses Gerät genau derselbe Fehler andersherum. */
:root {
  --geraet-huelle: #e6e8ec;
  --geraet-kante: #cfd3da;
  --geraet-fuss: #d3d7de;
}
@media (prefers-color-scheme: dark) {
  :root {
    --geraet-huelle: #2a2e34;
    --geraet-kante: #3a3f47;
    --geraet-fuss: #33383f;
  }
}
.geraet-rahmen {
  position: relative; width: 100%; background: var(--geraet-huelle);
  border: 1px solid var(--geraet-kante);
  padding: 12px; box-shadow: 0 18px 44px rgba(0,0,0,.16);
}
.geraet-glas {
  position: relative; overflow: hidden; width: 100%; background: var(--flaeche2);
  /* Und zusätzlich eine Maske: Sie zwingt auch Safari, an den runden Ecken zu schneiden. */
  -webkit-mask-image: -webkit-radial-gradient(white, black);
}
.geraet iframe {
  position: absolute; top: 0; left: 0; border: 0; display: block;
  transform-origin: 0 0; background: var(--flaeche2);
}
/* Rasterfelder dürfen schrumpfen — ohne das gilt der Inhalt als Mindestbreite. */
.geraete-paar > .geraet { min-width: 0; }

/* Der Monitor im Vereinsheim: 1440 × 900, auf die Breite der Seite gerechnet. */
.monitor .geraet-rahmen { border-radius: 12px; padding: 10px; }
.monitor .geraet-glas { border-radius: 3px; aspect-ratio: 1440 / 900; }
.monitor iframe { width: 1440px; height: 900px; }
/* Der Fuss macht aus dem Rechteck einen Bildschirm — zwei Formen, keine Grafik. */
.monitor .geraet-fuss {
  width: 132px; height: 12px; margin: 0 auto; background: var(--geraet-fuss);
  border-radius: 0 0 7px 7px;
}
.monitor .geraet-fuss::after {
  content: ''; display: block; width: 210px; height: 7px; margin: 12px auto 0;
  background: var(--geraet-fuss); border-radius: 4px; transform: translateX(-39px);
}

/* Tablet und Handy stehen nebeneinander — und untereinander, sobald es eng wird. */
.geraete-paar {
  display: grid; grid-template-columns: 1.35fr 1fr; gap: 34px; align-items: start;
}
/* Drei Geräte nebeneinander — das Tablet breiter als die beiden Telefone. Ohne eigene Regel
   rutschte das dritte in eine zweite Reihe und stünde dort allein und riesig. */
.geraete-paar.drei { grid-template-columns: 1.5fr 1fr 1fr; gap: 24px; }
/* Vier und mehr: gleichmässig, und was nicht passt, rutscht in die nächste Zeile. */
.geraete-paar.viele {
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 24px;
}
@media (max-width: 1100px) {
  .geraete-paar.drei { grid-template-columns: 1fr 1fr; }
}
.tablet .geraet-rahmen { border-radius: 26px; padding: 14px; }
.tablet .geraet-glas { border-radius: 12px; aspect-ratio: 768 / 1024; }
.tablet iframe { width: 768px; height: 1024px; }
.handy .geraet-rahmen { border-radius: 34px; padding: 12px; }
.handy .geraet-glas { border-radius: 22px; aspect-ratio: 375 / 812; }
.handy iframe { width: 375px; height: 812px; }
/* ⬛ Grösser als 1:1 wird kein Gerät gezeigt. Ein auf 420 px aufgeblasenes Handy sieht aus wie
   ein Handy für Weitsichtige — und vor allem sähe man nicht mehr, wie eng es dort wirklich
   zugeht. Das ist ja gerade die Frage, die diese Seite beantworten soll. */
/* ⬛ `margin-inline: auto` wäre hier eine Falle: Ein Rasterfeld mit automatischen Rändern
   dehnt sich NICHT mehr, sondern schrumpft auf seinen Inhalt — und der Inhalt ist ein Fenster
   ohne eigene Breite. Aus dem Tablet wurde so ein Streifen von 250 Pixeln. Deshalb volle
   Breite, gedeckelt, und mittig gestellt. */
/* Ein Blatt Papier — für den Zählzettel zum Ausdrucken. Kein Gerät, deshalb keine dunkle
   Blende, sondern ein weisser Bogen mit Schlagschatten im Seitenverhältnis von A4. */
.blatt .geraet-rahmen {
  background: var(--flaeche); padding: 0; border: 1px solid var(--linie); border-radius: 4px;
}
.blatt .geraet-glas { border-radius: 3px; aspect-ratio: 210 / 297; background: #fff; }
.blatt iframe { width: 794px; height: 1123px; }
.blatt { width: 100%; max-width: 460px; justify-self: center; }

.handy  { width: 100%; max-width: 399px; justify-self: center; }
.tablet { width: 100%; max-width: 796px; justify-self: center; }

/* Eine Karte, die irgendwohin führt. ⬛ Als `<a>` gebaut und nicht als Karte mit Klickzuhörer:
   Sonst hätte sie kein Ziel in der Statusleiste, liesse sich nicht in einem neuen Reiter öffnen
   und wäre mit der Tastatur nicht erreichbar. */
/* Die grosse Übersicht am Seitenende: Karten mit Listen, nicht mit Absätzen. Wer hier liest,
   sucht ein Stichwort — und findet es in einer Zeile schneller als in einem Satz. */
.w-liste-raster .w-karte { padding-bottom: 6px; }
.w-liste-raster .w-liste li { font-size: var(--fs-sm); }
.w-liste-raster h3 { margin-bottom: 8px; }

.w-karte.w-klickbar {
  display: block; color: inherit; text-decoration: none;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.w-karte.w-klickbar:hover {
  transform: translateY(-2px); border-color: var(--akzent);
  box-shadow: 0 10px 26px rgba(0,0,0,.10);
}
.w-karte.w-klickbar.ist-hier { border-color: var(--akzent); }
.w-mehr {
  display: inline-flex; align-items: center; gap: 4px; margin-top: 10px;
  color: var(--akzent); font-weight: 650; font-size: var(--fs-sm);
}
/* Auf einer Schauseite ist der Aufmacher kürzer: Sie beginnt mit einer Frage, die
   der Besucher schon gestellt hat — er kam ja von der Karte, auf der er geklickt hat. */
.w-held.w-kompakt { padding-top: 34px; }

@media (max-width: 900px) {
  /* ⬛ Vom Nutzer am Handy gemeldet: Hier stand nur `.geraete-paar`, und das reicht NICHT —
     `.geraete-paar.drei` und `.geraete-paar.viele` sind spezifischer und haben gewonnen. Auf
     einem 375 breiten Bildschirm standen die Geräte deshalb in zwei Spalten zu 153 Pixeln:
     Der Monitor darin war auf einen Streifen beschnitten, und die Bildunterschriften standen
     mittig unter einer Breite, die es gar nicht gab — sie liefen links aus dem Bild.
     Die Lehre: Wer eine Eigenschaft in einer Variante überschreibt, muss sie im schmalen
     Fenster für JEDE Variante zurücknehmen. */
  .geraete-paar,
  .geraete-paar.drei,
  .geraete-paar.viele { grid-template-columns: 1fr; gap: 40px; justify-items: center; }
  .geraete-paar .geraet { max-width: 420px; width: 100%; }
  /* ⬛ Das Handy bleibt bei seiner Breite. Ohne diese Zeile gewinnt die Regel darüber, das
     Fenster wird auf 420 aufgeblasen und ein 375 breiter Bildschirm um sechs Prozent
     vergrössert — dann sieht man nicht mehr, wie eng es dort wirklich zugeht. */
  .geraete-paar .handy { max-width: 399px; }
}
/* ⬛ Ein 1440 breiter Monitor, auf ein Handy gerechnet, wäre eine Briefmarke: 21 Prozent, und
   man erkennt keine Zeile mehr. Auf schmalen Geräten bleibt er deshalb grösser, als die Spalte
   ist, und lässt sich seitlich schieben — lieber etwas zum Anfassen als etwas zum Erraten. */
@media (max-width: 700px) {
  .monitor { overflow-x: auto; padding-bottom: 6px; }
  .monitor .geraet-rahmen { width: 660px; }
  .monitor .geraet-fuss { width: 660px; background: none; height: 0; }
  .monitor .geraet-fuss::after { transform: none; }
  /* ⬛ Die Beschriftung bleibt stehen, während das Gerät geschoben wird. Sie liegt IM
     Scrollbereich — ohne diese Zeile wandert sie mit dem Monitor nach links aus dem Bild,
     und man sieht die Hälfte eines Satzes, der erklärt, was man da eigentlich sieht. */
  .monitor figcaption { position: sticky; left: 0; width: 100%; max-width: 100vw; }
  .nur-schmal { display: block; }
  /* Am Handy schrumpft die Blende mit — 14 px Rand um einen 300 px breiten Bildschirm
     sähen aus wie ein Bilderrahmen, nicht wie ein Gerät. */
  .tablet .geraet-rahmen, .handy .geraet-rahmen { padding: 9px; }
}
.nur-schmal { display: none; }

/* ── Das Schaubild zum Vor-Ort-Modus ──────────────────────────────────────
   ⬛ Kein Bild, sondern Text in Kästen: Ein Bildschirmfoto wäre nach dem nächsten Umbau
   falsch, ohne dass es jemandem auffiele — und vorlesen lässt es sich auch nicht. Links, was
   eine gewohnte Anmeldung alles kann; rechts dieselbe Anmeldung, eingesperrt. */
.w-schaubild {
  display: grid; gap: 16px; align-items: center; margin: 26px 0 18px;
  grid-template-columns: 1fr auto 1fr;
}
.w-schau-karte {
  background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--r-md);
  padding: 16px 18px; margin: 0;
}
.w-schau-karte figcaption {
  display: flex; align-items: center; gap: 6px;
  font-weight: 700; margin-bottom: 10px; font-size: var(--fs-md);
}
.w-schau-karte ul { list-style: none; display: grid; gap: 8px; }
.w-schau-karte li { display: flex; align-items: flex-start; gap: 8px; line-height: 1.35;
                    font-size: var(--fs-sm); }
.w-schau-karte li .ic { flex: none; margin-top: 2px; }
.w-schau-karte li.offen .ic { color: var(--gruen); }
/* Was gesperrt ist, steht weiter da — durchgestrichen wäre gelogen, es gibt diese Bereiche
   ja. Sie sind nur für diese Sitzung zu. */
.w-schau-karte li.zu { color: var(--text3); }
.w-schau-karte li.zu .ic { color: var(--text3); }
.w-schau-zu { border-color: var(--gruen); }
.w-schau-zu figcaption { color: var(--gruen); }
.w-schau-pfeil { display: grid; justify-items: center; gap: 4px; color: var(--text2); }
.w-schau-pfeil-text { font-size: var(--fs-xs); white-space: nowrap; }

/* Am Handy stehen die beiden Kästen untereinander — und der Pfeil zeigt dann nach unten,
   nicht nach rechts. */
@media (max-width: 760px) {
  .w-schaubild { grid-template-columns: 1fr; }
  .w-schau-pfeil-zeichen { transform: rotate(90deg); display: inline-block; }
}

/* Monitor und Tablet nebeneinander bei der Taktik. ⬛ Der Monitor bekommt mehr Platz als das
   Tablet: Er ist im Verhältnis breiter, und gleich grosse Felder liessen das Tablet daneben
   winzig erscheinen. */
.taktik-paar { grid-template-columns: 1.5fr 1fr; align-items: end; margin: 26px 0 10px; }
@media (max-width: 900px) {
  .taktik-paar { grid-template-columns: 1fr; }
}
/* Die Vorführung selbst: nur das Feld, mit etwas Luft — sie steckt in einem Rahmen, der
   seinen eigenen Rand schon mitbringt. */