/* games-703 · Die Spiel-Seite · roughly.is/games/<spiel>  (#732, Neubau)
   ===========================================================================
   Die erste Fassung war Sektion fuer Sektion improvisiert. Am gerenderten
   Blatt gemessen begannen die Inhalte bei x503, 532, 546, 555, 761, 795, 903,
   947, 977, 1049, 1096 und 1188 -- zwoelf verschiedene Kanten auf einer Seite.
   Genau das liest sich als Unordnung, unabhaengig davon, wie gut die einzelne
   Zeile gesetzt ist.

   Diese Fassung hat EIN Raster, und alles haengt daran:

       |<-- 240px -->|<-- 64 -->|<------------ 1fr ------------>|
       Label                     Inhalt
       x0                        x304                       x1120

   Regeln, die keine Sektion brechen darf:
   1. Jeder Inhalt beginnt an der Inhalts-Kante. Keine Ausnahme.
   2. Fuehrende Marken (Nummern, Piktogramme) stehen UEBER dem Text, nicht
      davor, damit der Text an der Kante bleibt.
   3. Fliesstext hoert bei 62 Zeichen auf, auch wenn die Spalte breiter ist.
   4. Vier Schrift-Stufen auf der ganzen Seite, nicht je Sektion neue:
        Titel 56/700 · Sektions-Label 20/600 · Text 17/400 · Meta 13/500
      Dazu genau EINE Ausnahme: die grosse Zahl im Beweis.

   Erbt Token, Grundregeln, Leseseiten-Schale, Pille und Geraet aus _shared/.
   Setzt keine eigenen Hex-Werte, keine zweite Schrift. */

/* ---------- Das Raster ---------------------------------------------------- */
.gamepage { --gp-w: 1120px; --gp-label: 240px; --gp-steg: 64px; }
.page__main--wide { max-width: var(--gp-w); padding: var(--s7) var(--s5) var(--s8); }

.gp__sec { padding: var(--s8) 0 0; }
@media (min-width: 900px) { .gp__sec { padding-top: calc(var(--s8) * 1.5); } }
/* Die erste Sektion schliesst enger an den Kopf an: der Kopf bringt schon
   seine eigene Mindesthoehe mit (Esteban #732: «zu viel white space»). */
.gp__top + .gp__sec { padding-top: var(--s7); }
.page__main .gp__sec > h2 {
  margin: 0 0 var(--s6); max-width: 18ch;
  font-size: clamp(2rem, 3.8vw, 3rem); font-weight: 700; letter-spacing: var(--tight);
  line-height: 1.0; color: var(--ink); text-wrap: balance;
}
.gp__secbody > :first-child { margin-top: 0; }
.gp__secbody > :last-child { margin-bottom: 0; }
.page__main .gp__secbody p { max-width: 62ch; }
.page__main .gp__secbody > p:first-child { max-width: 76ch; }
.gp__secbody { max-width: none; }

/* ---------- Der Kopf ------------------------------------------------------ */
/* Eine Sache links, eine rechts. Der Kopf traegt genau EINEN Blickfang: den
   Satz, der die Frage beantwortet, die jemand getippt hat. */
.gp__top {
  display: grid; grid-template-columns: 1fr; gap: var(--s7); align-items: center;
  margin: 0;
  min-height: calc(100dvh - var(--navh) - var(--s7) - var(--s8));
}
@media (min-width: 900px) {
  .gp__top { grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--s8); }
}
/* Auf einem flachen Fenster darf der Kopf schrumpfen, sonst wird die Seite
   auf einem Notebook zu einer einzigen Leerflaeche. */
@media (max-height: 760px) { .gp__top { min-height: 0; padding: var(--s6) 0 var(--s7); } }
.page__main .gp__answer {
  margin: 0 0 var(--s5); max-width: 14ch;
  font-size: clamp(2.5rem, 5.4vw, 4.25rem); font-weight: 700;
  letter-spacing: var(--tight); line-height: 0.98; color: var(--ink);
  text-wrap: balance;
}
.page__main .gp__like {
  margin: 0 0 var(--s6); max-width: 46ch;
  font-size: var(--t-md); line-height: 1.5; color: var(--ink-2); text-wrap: pretty;
}
.gp__act { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s4) var(--s5); margin: 0; }
.page__main .gp__cta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s4); margin: 0; max-width: none; }
.page__main .gp__act .page__btn, .page__main .gp__cta .page__btn { margin-top: 0; background: var(--accent); color: var(--accent-ink); }
.page__main .gp__act .page__btn:hover, .page__main .gp__cta .page__btn:hover, .page__main .gp__end .page__btn:hover {
  background: var(--accent); color: var(--accent-ink);
  box-shadow: 0 8px 22px -8px color-mix(in oklab, var(--accent) 70%, transparent), 0 2px 6px -2px rgba(14,14,17,.2);
}
/* Die Meta-Zeile: EINE Zeile, nie zwei. Was nicht hineinpasst, gehoert nicht
   hinein (gemessen: fuenf Angaben brauchten 660 px in einer 520-px-Spalte). */
.page__main .gp__facts {
  display: flex; align-items: baseline; flex-wrap: wrap;
  margin: 0; padding: 0; max-width: none; border: 0;
  font-size: var(--t-xs); font-weight: 500; color: var(--ink-3);
}
.gp__facts > span + span::before { content: "·"; margin: 0 9px; color: var(--line-strong); }

/* ---------- Das Geraet ---------------------------------------------------- */
.phone__vid { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; display: block; background: #0C0C0E; }
.gp__phone { margin: 0; justify-self: center; --pwn: 268; --m-rx: 0deg; --m-ry: 0deg; }
@media (min-width: 1100px) { .gp__phone { --pwn: 330; } }

/* Zwei Bewegungen, die sich nicht ueberschreiben: die Scroll-Zeitachse
   animiert --p-*, die Maus setzt --m-*, das transform addiert beide. */
@property --p-rx { syntax: "<angle>"; inherits: false; initial-value: 3deg; }
@property --p-ry { syntax: "<angle>"; inherits: false; initial-value: -11deg; }
.gp__phone .phone3d {
  transform: rotateX(calc(var(--p-rx) + var(--m-rx))) rotateY(calc(var(--p-ry) + var(--m-ry)));
  transition: transform var(--d-mid) var(--ease);
}
@supports (animation-timeline: view()) {
  .gp__phone .phone3d { animation: phone-turn linear both; animation-timeline: view(); animation-range: entry 5% exit 95%; }
}
@keyframes phone-turn {
  0%   { --p-rx: 8deg;  --p-ry: -19deg }
  50%  { --p-rx: -1deg; --p-ry: 1deg }
  100% { --p-rx: -6deg; --p-ry: 16deg }
}
.gp__phone[data-maus] .phone3d { transition: none; }
@media (prefers-reduced-motion: reduce) { .gp__phone .phone3d { animation: none; transform: none; transition: none; } }

/* ---------- Die drei Schritte: eine Sequenz mit Tiefe --------------------
   Drei gleich grosse Kaesten nebeneinander sind eine Aufzaehlung, kein Ablauf
   (Esteban #732: «zu langweilig, sieht komisch aus»). Jetzt stehen die Geraete
   ueberlappend und gegeneinander gekippt, wie ein Stapel, durch den man
   scrollt; der Text sitzt daneben, nicht darunter. */
.gp__steps { margin: 0; padding: 0; list-style: none; counter-reset: gpstep; max-width: none; }
.gp__steps li { counter-increment: gpstep; display: grid; grid-template-columns: 1fr; gap: var(--s4); align-items: center; }
.gp__steps li + li { margin-top: var(--s7); }
@media (min-width: 760px) {
  .gp__steps li { grid-template-columns: minmax(0, 300px) minmax(0, 1fr); column-gap: var(--s8); }
  .gp__steps li + li { margin-top: calc(var(--s8) * -0.4); }   /* die Geraete greifen ineinander */
  .gp__steps li:nth-child(even) { grid-template-columns: minmax(0, 1fr) minmax(0, 300px); }
  .gp__steps li:nth-child(even) .gp__stepphone { order: 2; justify-self: end; }
  .gp__steps li:nth-child(even) .gp__steptext { order: 1; text-align: right; justify-self: end; }
}
.gp__stepphone {
  margin: 0; position: relative; z-index: 1; max-width: 300px; justify-self: start;
  border-radius: 30px; overflow: hidden;
  background: #0C0C0E; border: 6px solid #16161A;
  box-shadow: 0 30px 60px -30px rgba(14,14,17,.6), 0 8px 20px -12px rgba(14,14,17,.35);
  transform: rotate(-2.2deg);
}
.gp__steps li:nth-child(2) .gp__stepphone { transform: rotate(2.6deg); z-index: 2; }
.gp__steps li:nth-child(3) .gp__stepphone { transform: rotate(-1.4deg); z-index: 3; }
.gp__steps img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: center 38%; }
.gp__steps li:nth-child(3) img { object-position: center 64%; }

/* Die Ziffer gross, als Marke der Etappe -- nicht als Aufzaehlungszeichen. */
.gp__steptext { min-width: 0; }
.gp__steptext::before {
  content: counter(gpstep); display: block; margin-bottom: var(--s2);
  font-size: clamp(2rem, 3.4vw, 2.75rem); font-weight: 700; line-height: 1;
  letter-spacing: var(--tight); color: var(--line-strong); font-variant-numeric: tabular-nums;
}
.gp__steps span { display: block; font-size: var(--t-lg); line-height: 1.4; color: var(--ink-2); max-width: 30ch; }
@media (min-width: 760px) { .gp__steps li:nth-child(even) span { margin-left: auto; } }

/* Gestaffelt herein, an die Scroll-Position gebunden. Die Deckkraft bleibt:
   Bewegung darf den Inhalt nie verstecken. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .gp__steps li .gp__stepphone { animation: step-in linear both; animation-timeline: view(); animation-range: entry 0% cover 34%; }
  }
}
@keyframes step-in {
  from { transform: translateY(34px) rotate(-4deg) scale(.94); }
}

/* Die Silhouette beim Reveal: dasselbe gezeichnete Piktogramm wie im Spiel. */
.gp__sil { display: block; width: 64px; height: 64px; margin: 0 0 var(--s3); color: var(--accent); }
.gp__sil svg { width: 100%; height: 100%; display: block; }

/* ---------- Der Beweis: die eine grosse Zahl der Seite -------------------- */
.gp__proof { display: grid; grid-template-columns: 1fr; gap: var(--s5); align-items: center; margin: var(--s5) 0 0; }
@media (min-width: 700px) { .gp__proof { grid-template-columns: minmax(0, 280px) minmax(0, 1fr); column-gap: var(--s6); } }
.gp__map { position: relative; width: 100%; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--paper); overflow: hidden; }
.gp__map svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.gp__map svg * { vector-effect: non-scaling-stroke; }
.gp__land { fill: var(--paper-3); stroke: none; }
.gp__range { fill: var(--accent-soft); stroke: var(--accent); stroke-width: 1.6px; stroke-linejoin: round; }
.gp__link { stroke: var(--ink); stroke-width: 1.2px; stroke-dasharray: 4 3; fill: none; }
.gp__pin { fill: var(--accent); }
.gp__pinring { fill: none; stroke: var(--accent); stroke-width: 1.4px; opacity: .5; }
.gp__truthdot { fill: var(--ink); }

.gp__proof figcaption { min-width: 0; }
.page__main .gp__num {
  margin: 0; max-width: none;
  font-size: clamp(2.25rem, 3.4vw, 2.75rem); font-weight: 700; letter-spacing: var(--tight);
  line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums;
  display: flex; align-items: baseline; gap: var(--s3); flex-wrap: wrap;
}
.page__main .gp__num small { font-size: var(--t-md); font-weight: 400; letter-spacing: 0; color: var(--ink-2); }
.page__main .gp__verdict { margin: var(--s3) 0 0; max-width: 44ch; font-size: var(--t-md); line-height: 1.5; color: var(--ink-2); }
.page__main .gp__verdict a { color: var(--ink); text-decoration: none; }
.page__main .gp__verdict a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Der Rechenweg: eine abgesetzte Passage in der Text-Stufe. Vorher trug sie
   20/400, eine Stufe, die sonst nirgends auf der Seite vorkam. */
.gp__method { margin: var(--s6) 0 0; padding: var(--s4) 0 0; border-top: 1px solid var(--line); max-width: 62ch; }
.page__main .gp__method p { margin: 0; font-size: var(--t-md); line-height: 1.5; color: var(--ink); }
.gp__method cite { display: block; margin-top: var(--s2); font-style: normal; font-size: var(--t-xs); font-weight: 500; color: var(--ink-3); }

/* ---------- Quellen: zwei Kanten, nicht drei ------------------------------ */
.gp__srclist { margin: var(--s6) 0 0; padding: 0; list-style: none; max-width: 62ch; }
.gp__srclist li { display: grid; grid-template-columns: 12ch minmax(0, 1fr); column-gap: var(--s4); padding: var(--s3) 0; border-top: 1px solid var(--line); font-size: var(--t-sm); line-height: 1.45; }
.gp__srclist li:last-child { border-bottom: 1px solid var(--line); }
.gp__srclist b { font-weight: 500; color: var(--ink); }
.gp__srclist span { color: var(--ink-3); }

/* ---------- Der Vorrat ---------------------------------------------------- */
.gp__pool { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s5) var(--s4); margin: var(--s5) 0 0; padding: 0; list-style: none; max-width: none; }
@media (min-width: 700px) { .gp__pool { grid-template-columns: repeat(7, 1fr); } }
.gp__sp { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.gp__sp i { display: block; width: 100%; max-width: 72px; aspect-ratio: 1; color: var(--accent); }
.gp__sp svg { width: 100%; height: 100%; display: block; }
.gp__sp b { font-size: var(--t-xs); font-weight: 500; color: var(--ink-3); line-height: 1.25; text-wrap: balance; }
.gp__sp--more i { display: grid; place-items: center; border-radius: var(--r-md); background: var(--paper-2); color: var(--ink-3); }
.gp__sp--more span { font-size: var(--t-xs); font-weight: 600; letter-spacing: -0.02em; color: var(--ink-3); font-variant-numeric: tabular-nums; }

/* ---------- Die Fragen ---------------------------------------------------- */
.qa__list { margin: 0; display: grid; grid-template-columns: 1fr; }
.qa { display: grid; grid-template-columns: 1fr; gap: var(--s1); padding: var(--s4) 0; border-top: 1px solid var(--line); }
.qa:last-child { border-bottom: 1px solid var(--line); }
@media (min-width: 720px) { .qa { grid-template-columns: minmax(0, 24ch) minmax(0, 1fr); column-gap: var(--s6); align-items: baseline; } }
.page__main .qa dt { margin: 0; font-size: var(--t-md); font-weight: 600; letter-spacing: -0.015em; line-height: 1.35; color: var(--ink); text-wrap: balance; }
.page__main .qa dd { margin: 0; max-width: 62ch; font-size: var(--t-sm); line-height: 1.55; color: var(--ink-2); text-wrap: pretty; }

/* ---------- Der Beleg: eine Zeile, kein Block ----------------------------- */
.gp__proofline {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s4) var(--s6);
  margin: var(--s6) 0 0; padding: var(--s5) 0 0; border-top: 1px solid var(--line);
}

.gp__proofline .voice { max-width: none; margin: 0; }
.gp__proofline .voice__q { font-size: var(--t-sm); font-weight: 400; line-height: 1.45; }
@media (min-width: 900px) { .gp__proofline .voice__q { white-space: nowrap; } }
.page__main .gp__proofline .gp__stat { margin: 0; max-width: none; white-space: nowrap; font-size: var(--t-xs); font-weight: 500; color: var(--ink-3); line-height: 1.4; }
@media (max-width: 620px) { .page__main .gp__proofline .gp__stat { white-space: normal; } }

/* ---------- Der Abschluss ------------------------------------------------- */
.page__main .gp__end { margin: var(--s8) 0 0; padding-top: var(--s6); border-top: 1px solid var(--line); max-width: none; }

/* ---------- Die neun anderen: eine Reihe, keine Liste ---------------------
   Als zweispaltige Zeilenliste sah der Abschnitt aus wie eine Navigation
   (Esteban #732: «sieht irgendwie komisch aus»). Als Reihe von Piktogrammen
   ist er dasselbe Bild wie «What is in it» -- und jedes Spiel bringt seinen
   eigenen Farbton mit, was die Familie zeigt statt sie aufzuzaehlen. */
.gp__nine { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s5) var(--s4); margin: var(--s5) 0 0; padding: 0; list-style: none; }
@media (min-width: 620px) { .gp__nine { grid-template-columns: repeat(5, 1fr); } }
@media (min-width: 900px) { .gp__nine { grid-template-columns: repeat(9, 1fr); } }
.gp__nine a {
  --accent: oklch(50% 0.17 var(--h)); --accent-soft: oklch(96% 0.025 var(--h));
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  text-decoration: none; color: var(--ink-3);
}
[data-theme="dark"] .gp__nine a { --accent: oklch(78% 0.14 var(--h)); --accent-soft: oklch(24% 0.04 var(--h)); }
@media (prefers-color-scheme: dark) { html:not([data-theme="light"]) .gp__nine a { --accent: oklch(78% 0.14 var(--h)); --accent-soft: oklch(24% 0.04 var(--h)); } }
.gp__nine i {
  display: grid; place-items: center; width: 100%; max-width: 60px; aspect-ratio: 1;
  border-radius: var(--r-md); background: var(--accent-soft);
}
.gp__nine svg { width: 55%; height: 55%; fill: none; stroke: var(--accent); stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.page__main .gp__nine b { font-size: var(--t-xs); font-weight: 500; letter-spacing: -0.01em; text-align: center; text-wrap: balance; }
.page__main .gp__nine a, .page__main .gp__nine a:hover { text-decoration: none; }
.gp__nine a:hover b, .gp__nine a:focus-visible b { color: var(--accent); }
.gp__nine a:focus-visible { outline: 2px solid var(--accent-line); outline-offset: 4px; border-radius: var(--r-sm); }

/* ---------- Die Wege ins Spiel zwischendurch ------------------------------
   Ruhiger als der Knopf im Kopf (Tinte statt Akzent): die Seite soll nicht
   viermal dasselbe schreien. */
.page__main .gp__cta--mid { display: flex; justify-content: center; margin: var(--s8) 0 0; padding: 0; border: 0; }
.page__main .gp__end { display: flex; justify-content: center; }
.page__main .gp__cta--mid .page__btn, .page__main .gp__end .page__btn { background: var(--accent); color: var(--accent-ink); }

/* ---------- Die Vorschau am Zeiger ---------------------------------------
   Faehrt man ueber eines der neun Spiele, schwebt ein kleines Geraet mit einer
   echten Aufnahme daraus neben der Maus mit (Esteban #732). EIN Element fuer
   alle neun, damit beim Wechsel nichts flackert; es folgt dem Zeiger geglaettet
   und neigt sich in die Bewegungsrichtung. Die Aufnahmen macht
   _ops/spiel_vorschau.mjs, je Spiel eine, im Dunkelmodus. */
.gp__peek {
  position: fixed; left: 0; top: 0; z-index: 40; pointer-events: none;
  width: 190px;
  opacity: 0; transition: opacity var(--d-mid) var(--ease);
  will-change: transform;
}
.gp__peek.is-on { opacity: 1; }
.gp__peek-in {
  border-radius: 20px; overflow: hidden;
  background: var(--paper); border: 4px solid var(--paper-3);
  box-shadow: 0 24px 50px -20px rgba(14,14,17,.4), 0 6px 14px -8px rgba(14,14,17,.28);
  transform: scale(.94); transition: transform var(--d-mid) var(--ease-o);
}
.gp__peek.is-on .gp__peek-in { transform: scale(1); }
.gp__peek-stage { position: relative; width: 100%; height: 292px; overflow: hidden; background: var(--paper); }
.gp__peek img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }
/* Das echte Spiel im Rahmen: 390 x 844 auf die Vorschau-Breite gelegt. Es
   liegt UEBER dem Bild und wird erst sichtbar, wenn es geladen hat. */
.gp__peek iframe {
  position: absolute; left: 0; top: 0; width: 390px; height: 844px; border: 0;
  transform: scale(calc(182 / 390)) translateY(-40px); transform-origin: 0 0;
  background: var(--paper); color-scheme: inherit;
  opacity: 0; transition: opacity 260ms var(--ease);
  pointer-events: none;
}
.gp__peek iframe[data-bereit] { opacity: 1; }
/* Weich herein, hart hinaus: sonst steht beim Wechsel das vorige Spiel noch
   ueber dem neuen Bild (gemessen: 260 ms lang, sichtbar als Blitz). */
.gp__peek iframe:not([data-bereit]) { transition-duration: 0s; }
.gp__peek span {
  display: block; padding: 10px 12px 12px;
  font-size: var(--t-xs); font-weight: 500; line-height: 1.35;
  color: oklch(50% 0.17 var(--h, 150));
  border-top: 1px solid var(--line);
}
[data-theme="dark"] .gp__peek span { color: oklch(78% 0.14 var(--h, 150)); }
@media (prefers-color-scheme: dark) { html:not([data-theme="light"]) .gp__peek span { color: oklch(78% 0.14 var(--h, 150)); } }
@media (prefers-reduced-motion: reduce) { .gp__peek, .gp__peek-in { transition: none; } }

/* ===========================================================================
   Handy (#732, gemessen auf 390 x 844)
   Befunde: der Kopf war 992 px hoch und passte damit auf keinen Schirm · der
   Quellen-Link war 22 px hoch und damit kaum zu treffen · die Beweis-Karte nahm
   im Hochformat 477 px · die Schritt-Texte liefen ueber die volle Breite und
   lasen sich als Block statt als Zeile zum Bild.
   =========================================================================== */
@media (max-width: 620px) {

  /* Der Kopf: das Geraet kleiner, damit Ueberschrift, Knopf und Beleg zusammen
     mit einem Blick auf das Spiel in einen Schirm passen. Die Mindesthoehe
     faellt weg -- der Inhalt bringt sie ohnehin mit. */
  .gp__top { min-height: 0; gap: var(--s6); padding-top: var(--s5); }
  .gp__phone--hero { --pwn: 208; }
  .page__main .gp__answer { max-width: none; }

  /* Knopf und Fakten untereinander statt nebeneinander: nebeneinander bleibt
     fuer die Fakten kein Platz, sie brechen sonst mitten im Feld. */
  .gp__act { flex-direction: column; align-items: flex-start; gap: var(--s4); }
  .page__main .gp__act .page__btn { width: 100%; }

  /* Der Beleg: Zitat und Zahl untereinander, beide linksbuendig. */
  .gp__proofline { gap: var(--s3); }

  /* Alles Antippbare mindestens 44 px hoch (der Quellen-Link war 22). */

  /* Die Beweis-Karte flacher: im Hochformat nahm sie 477 px, ohne dass die
     zusaetzliche Hoehe etwas zeigt. */
  .gp__map { aspect-ratio: 1 / 1.05 !important; }

  /* Die Schritte: der Text sitzt naeher am Bild und bleibt schmal genug, um als
     Bildunterschrift zu lesen statt als Absatz. */
  .gp__steps li + li { margin-top: var(--s6); }
  .gp__steps span { max-width: 34ch; font-size: var(--t-sm); }
  .gp__steptext::before { font-size: var(--t-lg); margin-bottom: var(--s1); }

  /* Die Zaesuren duerfen enger stehen, sonst rollt man durch Leerraum. */
  .gp__sec { padding-top: var(--s7); }
  .page__main .gp__sec > h2 { margin-bottom: var(--s4); }
  .page__main .gp__cta--mid { margin-top: var(--s6); }
  .page__main .gp__cta--mid .page__btn, .page__main .gp__end .page__btn { width: 100%; }

  /* Die Vorschau am Zeiger gibt es auf dem Handy nicht (kein Hover); die
     Piktogramm-Reihe traegt dort die ganze Information. */
  .gp__peek { display: none; }
}

/* Tippflaechen haengen an der Bedienung, nicht an der Fensterbreite: ein Tablet
   mit 768 px wird angetippt wie ein Handy. Gemessen fiel dort sonst der
   Quellen-Link mit 22 px durch. */
@media (hover: none) {
  .page__main .gp__verdict a { display: inline-flex; align-items: center; min-height: 44px; margin-left: .35em; }
  .gp__nine a { min-height: 92px; justify-content: flex-start; }
}