:root {
  --bg:#12141c; --karte:#1a1e2a; --rand:#2a3040; --text:#e8eaf0; --leise:#98a0b4;
  --akzent:#7c5cff; --gut:#4ade80; --warn:#fbbf24; --schlecht:#f87171; --gold:#e9c46a;
  /* Mint für die Auszeichnungen: hell genug für den dunklen Grund, kühl genug,
     um sich von Grün (gewonnen) und Gold (Sieger) zu unterscheiden. */
  --mint:#5eead4; --mint-dunkel:#134e4a;
}
* { box-sizing:border-box; }

/*
 * Die Anwendung füllt den Bildschirm; gescrollt wird nur dort, wo wirklich mehr
 * Inhalt ist als Platz — und dann *innerhalb* des betroffenen Bereichs.
 *
 * `dvh` statt `vh`: auf dem Handy ist `100vh` größer als das Sichtbare, solange
 * die Adresszeile eingeblendet ist. Mit `vh` hat jede Seite deshalb einen
 * Scrollweg von einigen Dutzend Pixeln, ohne dass es dort etwas zu sehen gibt.
 */
html, body { height:100%; }
body { margin:0; background:var(--bg); color:var(--text);
  font:15px/1.5 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  height:100dvh; display:flex; flex-direction:column; overflow:hidden; }
a { color:var(--akzent); }
.kopf { display:flex; align-items:center; gap:1rem; flex-wrap:wrap; padding:.5rem .8rem;
  background:var(--karte); border-bottom:1px solid var(--rand); flex:0 0 auto; z-index:10; }
.marke { font-weight:800; letter-spacing:-.02em; }
.kopf nav { display:flex; gap:.8rem; margin-left:auto; font-size:.9rem; flex-wrap:wrap; }
.kopf nav a { color:var(--leise); text-decoration:none; cursor:pointer; }
.kopf nav a:hover,.kopf nav a.aktiv { color:var(--text); }
/* Volle Breite. Ein fester Riegel in der Mitte lässt auf einem breiten Schirm
   zwei Drittel leer und schiebt den Inhalt in die Tiefe. */
main { flex:1; min-height:0; width:100%; padding:.7rem; overflow:auto; }
/* Der Zähler scrollt nie — er passt sich an */
main.voll { overflow:hidden; padding:.4rem; display:flex; flex-direction:column; }
.karte { background:var(--karte); border:1px solid var(--rand); border-radius:12px;
  padding:1rem 1.1rem; margin-bottom:.8rem; }
.karte h2 { margin:0 0 .7rem; font-size:.95rem; }
.leise { color:var(--leise); font-size:.86rem; }
.reihe { display:flex; gap:.5rem; align-items:center; flex-wrap:wrap; }
.gitter { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:.7rem; }
/* Ein Formular verteilt sich auf der vorhandenen Breite, statt als schmaler
   Streifen nach unten zu wachsen */
.feldgitter { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:.5rem; }
.feldgitter .voll-breit { grid-column:1 / -1; }
.mitte { max-width:min(100%, 34rem); margin-inline:auto; }
/* Lange Tabellen scrollen in ihrer Karte, nicht in der Seite */
.tabelle-huelle { max-height:min(52dvh, 30rem); overflow:auto; }
table { width:100%; border-collapse:collapse; font-size:.87rem; }
th { text-align:left; font-size:.7rem; text-transform:uppercase; letter-spacing:.06em;
  color:var(--leise); padding:.35rem .5rem; }
td { padding:.4rem .5rem; border-top:1px solid var(--rand); }
button,.knopf { background:var(--akzent); color:#fff; border:0; border-radius:8px;
  padding:.45rem .9rem; font:inherit; font-size:.86rem; font-weight:600; cursor:pointer; }
button.leise { background:rgba(255,255,255,.07); color:var(--text); border:1px solid var(--rand); }
button.klein { padding:.2rem .55rem; font-size:.78rem; }
button:disabled { opacity:.45; cursor:default; }
input,select,textarea { background:var(--bg); border:1px solid var(--rand); border-radius:8px;
  color:var(--text); padding:.4rem .6rem; font:inherit; font-size:.88rem; }
.mint{color:var(--mint);font-weight:700}
.marke-gut{color:var(--gut)} .marke-warn{color:var(--warn)} .marke-schlecht{color:var(--schlecht)}
.pille { font-size:.7rem; font-weight:700; padding:2px 9px; border-radius:99px;
  background:rgba(124,92,255,.18); color:#c4b5fd; }
.pille.gut{background:rgba(74,222,128,.15);color:var(--gut)}
.pille.warn{background:rgba(251,191,36,.15);color:var(--warn)}
.pille.schlecht{background:rgba(248,113,113,.15);color:var(--schlecht)}
.code { font-family:ui-monospace,monospace; font-size:1.6rem; letter-spacing:.32em;
  color:var(--gold); font-weight:700; }
.fehler { background:rgba(248,113,113,.12); border:1px solid rgba(248,113,113,.35);
  color:#fca5a5; border-radius:8px; padding:.6rem .8rem; margin-bottom:.8rem; font-size:.88rem; }
.ok { background:rgba(74,222,128,.1); border:1px solid rgba(74,222,128,.3);
  color:#86efac; border-radius:8px; padding:.6rem .8rem; margin-bottom:.8rem; font-size:.88rem; }
/* ── Turnierbaum ─────────────────────────────────────────────────
   Aufbau wie im M+-Turnier von Siniath: eine Spalte je Runde, gleich hohe
   Zeilen, Verbindungsstrich an der Zelle. Nur waagerecht scrollbar — ein Baum
   passt auf keinem Telefon nebeneinander, und ihn umzubrechen zerstört genau
   die Aussage, die ein Baum macht. */
.br-huelle { overflow-x:auto; padding-bottom:.3rem; }
.br-wrap { display:flex; gap:1.4rem; align-items:stretch; min-width:min-content; }
.br-round { min-width:13.5rem; display:flex; flex-direction:column; }
.br-round-h { font-size:.66rem; font-weight:800; text-transform:uppercase;
  letter-spacing:.08em; color:var(--leise); text-align:center; margin-bottom:.5rem;
  display:flex; flex-direction:column; gap:.1rem; }
.br-round-n { font-weight:500; letter-spacing:0; text-transform:none; opacity:.7; }

/*
 * Jede Runde teilt ihre Höhe in gleich hohe Zeilen, jede Partie sitzt mittig in
 * ihrer Zeile. Dadurch liegt eine Partie der zweiten Runde genau zwischen ihren
 * Vorgängern — ohne gerechnete Abstände, die bei jeder Änderung verrutschen.
 *
 * `minmax(...)` und `min-height:0` sind der eigentliche Punkt: sonst wächst eine
 * Zeile mit ihrem Inhalt, und ein Pod mit vier Teams neben einer Partie mit
 * zweien macht die Zeilen ungleich hoch — dann schiebt sich die ganze Spalte
 * gegen die vorige.
 */
.br-cells { flex:1; display:grid; grid-auto-rows:minmax(5.4rem, 1fr); }
.br-cell { min-height:0; display:flex; align-items:center; position:relative; }

/* Kurzer Strich nach links: er zeigt, dass diese Partie aus der Spalte davor
   hervorgeht. Er sitzt an der Zelle, nicht an der Partie — die schneidet mit
   `overflow:hidden` ihre runden Ecken frei und würde ihn mit abschneiden. */
.br-round.verbunden .br-cell::before {
  content:''; position:absolute; left:-1.4rem; top:50%; width:1.4rem;
  border-top:1px solid var(--rand);
}

.br-match { position:relative; width:100%; border:1px solid var(--rand);
  border-radius:9px; overflow:hidden; background:var(--karte); cursor:pointer;
  box-shadow:0 1px 3px rgba(0,0,0,.35); }
.br-match:hover { border-color:var(--akzent); }
.br-match.confirmed { border-color:rgba(74,222,128,.35); }
.br-match.disputed  { border-color:var(--schlecht); }
.br-match.reported  { border-color:rgba(251,191,36,.45); }

.br-kopf { display:flex; align-items:center; justify-content:space-between; gap:.3rem;
  padding:.2rem .45rem; font-size:.66rem; color:var(--leise);
  background:rgba(255,255,255,.03); }
.br-side { display:flex; align-items:center; gap:.35rem; padding:.26rem .45rem;
  font-size:.8rem; }
.br-side + .br-side { border-top:1px solid var(--rand); }
.br-side.win { background:rgba(74,222,128,.1); font-weight:700; }
.br-side.offen .br-name { color:var(--leise); }
/* Feste Breite, damit Sieger- und Verliererzeile gleich ausgerichtet bleiben */
.br-krone { flex:0 0 1.1em; text-align:center; font-size:.8rem; }
.br-name { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.br-cmd { flex:0 1 auto; max-width:6rem; overflow:hidden; text-overflow:ellipsis;
  white-space:nowrap; font-size:.66rem; color:var(--leise); }
.br-platz { flex:0 0 2.2rem; text-align:right; font-size:.74rem; color:var(--leise);
  font-variant-numeric:tabular-nums; }
.br-side.win .br-platz { color:var(--gut); }

/* ── Siegerkür ───────────────────────────────────────────────────
   Das Ende des Turniers darf auffallen. */
.sieg-leiste { display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; }
.sieg-btn { animation:sieg-puls 2.4s ease-in-out infinite; }
@keyframes sieg-puls {
  0%, 100% { box-shadow:0 0 0 0 rgba(233,196,106,.5); }
  50%      { box-shadow:0 0 0 8px rgba(233,196,106,0); }
}
.sieg-bild { display:none; }
.sieg-bild.offen { display:flex; flex-direction:column; align-items:center; gap:.4rem;
  padding:1.4rem .8rem; text-align:center; }
.sieg-krone { font-size:clamp(3rem, 12vmin, 6rem); line-height:1;
  animation:sieg-hoch .7s cubic-bezier(.2,.9,.3,1.4); }
@keyframes sieg-hoch {
  from { transform:scale(.3) translateY(30px); opacity:0; }
  to   { transform:scale(1) translateY(0); opacity:1; }
}
.sieg-name { font-size:clamp(1.3rem, 4.5vmin, 2.4rem); font-weight:800;
  color:var(--gold); letter-spacing:-.02em; }
@media (prefers-reduced-motion: reduce) {
  .sieg-btn, .sieg-krone { animation:none; }
}

/* Drucken bleibt möglich, ist aber nicht mehr der Zweck: gearbeitet wird auf der
   Seite. Für den Aushang am Turniertag genügt, dass der Baum sauber aufs Papier
   passt. */
@media print {
  .kopf, .z-kopf, button, .sieg-leiste { display:none !important; }
  body { background:#fff; color:#000; height:auto; overflow:visible; }
  main { overflow:visible; }
  .karte { border-color:#bbb; background:#fff; break-inside:avoid; }
  .br-huelle { overflow:visible; }
  .br-match { background:#fff; border-color:#999; box-shadow:none; }
  .br-side.win { background:#f0f0f0; }
  .br-kopf, .br-name, .br-platz, .leise { color:#333; }
}

/* ── Lebenszähler ────────────────────────────────────────────────

   Aufbau einer Kachel, von außen nach innen:

     Commander    ← am äußeren Rand, gegen die Kachel gedreht: liest die Gegenseite
     Name
     −  40  +     ← der Blickfang; alles andere ist kleiner
     5× −1        ← Verlauf
     −5 +5 ⋯  ●●● ← Bedienleiste, eine Zeile

   Der ganze Block sitzt als *Gruppe* mittig (`align-content:center`). Vorher
   war die Mittelzeile auf `1fr` gesetzt — sie zog sich auf die ganze Höhe auf
   und drückte Name und Knöpfe an die Ränder, mit einem Loch dazwischen. */

.z-kopf { display:flex; gap:.4rem; align-items:center; flex-wrap:wrap;
  padding:.35rem .5rem; background:var(--karte); border:1px solid var(--rand);
  border-radius:10px; margin-bottom:.4rem; flex:0 0 auto; }
.z-kopf .leise { font-size:.76rem; }

.z-feld { display:grid; gap:.4rem; flex:1; min-height:0; }
.z-feld, .z-team, .z-team button { touch-action:manipulation; -webkit-user-select:none;
  user-select:none; }
.z-n2 { grid-template-rows:1fr 1fr; }
.z-n3 { grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr; }
.z-n3 > :first-child { grid-column:1 / -1; }
.z-n4 { grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr; }
.z-n5, .z-n6 { grid-template-columns:1fr 1fr; grid-template-rows:repeat(3,1fr); }
.z-n5 > :first-child { grid-column:1 / -1; }
/* Sieben und acht: zwei Spalten würden zu schmal, drei passen noch */
.z-n7, .z-n8 { grid-template-columns:repeat(2,1fr); grid-template-rows:repeat(4,1fr); }
.z-n7 > :first-child { grid-column:1 / -1; }
@media (min-width:900px) {
  .z-n7, .z-n8 { grid-template-columns:repeat(4,1fr); grid-template-rows:repeat(2,1fr); }
  .z-n7 > :first-child { grid-column:auto; }
}

/*
 * Die Kachel selbst dreht sich nicht mehr — nur ihr Inhalt.
 *
 * Dadurch liegen Griff und Drehknopf bei jedem Platz an derselben Stelle auf dem
 * Bildschirm. Vorher wanderten sie mit der Drehung mit: oben rechts in der
 * Kachel hieß bei den gedrehten Plätzen unten links auf dem Schirm.
 */
/*
 * `isolation:isolate` ist hier keine Zierde, sondern nötig.
 *
 * Das Kartenbild liegt mit `z-index:-1` dahinter. Ohne eigenen Stapelkontext
 * gehört ein negativ gestapeltes Kind aber zum Kontext eines Vorfahren — und
 * wird dann *hinter* dem eigenen Hintergrund der Kachel gezeichnet, also gar
 * nicht mehr sichtbar. Genau so sind die Commander-Bilder verschwunden.
 * `isolate` macht die Kachel zum eigenen Kontext: das Bild liegt hinter dem
 * Inhalt, aber vor ihrem Hintergrund.
 */
.z-team { position:relative; overflow:hidden; min-height:0; isolation:isolate;
  background:var(--karte); border:1px solid var(--rand); border-radius:14px; }
.z-inhalt { position:absolute; inset:0; transform:rotate(var(--dreh, 0deg));
  display:grid; grid-auto-rows:min-content; align-content:center; justify-items:center;
  gap:.35rem; padding:1.1rem .6rem; }
.z-team.z-aus { border-color:rgba(248,113,113,.5); background:rgba(248,113,113,.05); }
/* Wer anfängt: ein Rahmen ringsum, von jedem Platz aus sichtbar */
.z-team.z-start { border-color:var(--akzent); box-shadow:inset 0 0 0 2px rgba(124,92,255,.55); }

/* Das Lauflicht beim Auslosen und das kurze Aufleuchten beim Treffer.
   Der Übergang macht den Lauf weich: ohne ihn springt die Markierung hart von
   Kachel zu Kachel, und das wirkt hektisch statt laufend. */
.z-team { transition:box-shadow .18s ease, border-color .18s ease; }
.z-team.z-lauf { border-color:var(--gold);
  box-shadow:inset 0 0 0 3px rgba(233,196,106,.6), 0 0 18px rgba(233,196,106,.2); }
.z-team.z-gold { animation:z-gold 1.4s ease-out; }
@keyframes z-gold {
  0%   { box-shadow:inset 0 0 0 3px rgba(233,196,106,.95), 0 0 26px rgba(233,196,106,.55);
         border-color:var(--gold); }
  60%  { box-shadow:inset 0 0 0 3px rgba(233,196,106,.5), 0 0 14px rgba(233,196,106,.25); }
  100% { box-shadow:inset 0 0 0 2px rgba(124,92,255,.55); }
}
@media (prefers-reduced-motion: reduce) {
  .z-team.z-gold { animation:none; }
}
.z-team.z-aus .z-leben { color:var(--schlecht); }

/*
 * Der rote Punkt in der Tischmitte.
 *
 * Dort, wo die Kacheln zusammenstoßen — gleich weit von allen entfernt, und von
 * jedem Platz aus mit dem Daumen erreichbar. Klein genug, um nicht im Weg zu
 * sein; auffällig genug, um ihn zu finden.
 */
/* Bezugspunkt ist das Kachelfeld, nicht die ganze Seite: über dem Feld liegt
   die Werkzeugleiste, und die halbe Leiste ist genau der Versatz, um den der
   Punkt zu hoch sass. */
.z-feld { position:relative; }
.z-punkt { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  z-index:15; width:2.6rem; height:2.6rem; border-radius:50%; padding:0;
  background:var(--schlecht); border:3px solid var(--bg); cursor:pointer;
  /* Ein leiser Schein nach aussen — er sitzt zwischen vier hellen Kacheln und
     soll sich davon lösen, ohne zu leuchten wie ein Warnlicht. */
  box-shadow:0 2px 10px rgba(0,0,0,.5),
             0 0 10px rgba(248,113,113,.5),
             0 0 22px rgba(248,113,113,.22); }
.z-punkt:active { transform:translate(-50%,-50%) scale(.92); }
main.voll { position:relative; }

/* Auszeichnungen: eine Zeile je Mitspieler, vier Zeichen zum Antippen */
.lob-gitter { display:grid; gap:.3rem; }
.lob-zeile { display:flex; align-items:center; gap:.3rem; }
.lob-name { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis;
  white-space:nowrap; font-size:.86rem; }
.lob-knopf { display:inline-flex; align-items:center; gap:.2rem;
  background:rgba(94,234,212,.07); border:1px solid rgba(94,234,212,.25);
  color:var(--mint); border-radius:8px; padding:.25rem .4rem; line-height:1; }
.lob-knopf:hover { background:rgba(94,234,212,.16); }
.lob-knopf.vergeben { background:var(--mint); color:var(--mint-dunkel);
  border-color:var(--mint); }
.lob-zahl { font-size:.7rem; font-weight:800; font-variant-numeric:tabular-nums;
  min-width:.6ch; }

.dlg-h { font-size:.78rem; text-transform:uppercase; letter-spacing:.07em;
  color:var(--leise); margin:.9rem 0 .3rem; }
.klein.gewaehlt { background:var(--akzent); color:#fff; border-color:var(--akzent); }

/* Werkzeuge außerhalb des gedrehten Inhalts, immer oben rechts */
.z-werkzeug { position:absolute; top:.2rem; right:.3rem; z-index:4;
  display:flex; gap:.15rem; }
.z-wz { background:none; border:0; padding:.15rem .3rem; color:var(--leise);
  font-size:1rem; line-height:1; opacity:.45; touch-action:none; }
.z-wz:hover, .z-wz:active { opacity:1; }
.z-griff { cursor:grab; }
.z-griff:active { cursor:grabbing; }

/* Gegen die Kachel gedreht, damit die Gegenseite des Tisches mitliest —
   der eigene Spieler weiß, was er selbst spielt. */
/* Commander-Schaden liegt in der Ecke, die zur Tischmitte zeigt — bei vier
   Plätzen also dort, wo die vier Kacheln zusammenstoßen. Ein Stapel und keine
   Leiste, weil in eine Ecke keine Zeile passt. Welche Ecke es ist, entscheidet
   der Platz: die oberen Kacheln sind gedreht. */
/* Rund 20 px aus der Ecke heraus: dort liegen Griff und Drehknopf, und beides
   uebereinander macht beides unbedienbar. */
.z-cmd { position:absolute; top:1.4rem; display:flex; flex-direction:column;
  gap:3px; z-index:2; }
.zc-links { left:1.35rem; align-items:flex-start; }
.zc-rechts { right:1.35rem; align-items:flex-end; }
.zc-mitte { left:50%; transform:translateX(-50%); flex-direction:row; }

/* Doppelt so groß wie zuvor: der Name soll über den Tisch hinweg lesbar sein,
   nicht nur aus einem halben Meter. */
.z-commander { position:absolute; top:0; left:0; right:0; transform:rotate(180deg);
  background:none; border:0; border-radius:0; padding:.25rem .5rem;
  font-size:1.28rem; font-weight:700; letter-spacing:.02em;
  color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  cursor:pointer; text-shadow:0 1px 6px rgba(0,0,0,.8); z-index:2; }
.z-commander.leer { font-size:.8rem; opacity:.35; font-weight:500; color:var(--leise);
  text-shadow:none; }

/* Das Kartenbild liegt hinter allem. Eigenes Element und nicht Hintergrund der
   Kachel: nur so lässt sich die Deckkraft senken, ohne Zahlen mitzudämpfen.
   Ein Schleier darüber, weil Kartenillustrationen hell und bunt sind und die
   Lebenspunkte sonst darin verschwinden. */
/*
 * `z-index:-1` und **keine** Regel auf die Geschwister.
 *
 * Vorher stand hier zusätzlich `.z-team > :not(.z-bild) { position:relative }`,
 * um den Inhalt über das Bild zu heben. Diese Regel ist spezifischer als
 * `.z-cmd { position:absolute }` und stand dahinter — sie hat die
 * Eckenpositionierung des Commander-Schadens stillschweigend aufgehoben, sodass
 * er zurück in den normalen Fluss rutschte. Ein negativer z-index erreicht
 * dasselbe, ohne den Geschwistern etwas vorzuschreiben.
 */
.z-bild { position:absolute; inset:0; opacity:.6; background-size:cover;
  background-position:center; z-index:-1; pointer-events:none; }
.z-bild::after { content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(18,20,28,.55), rgba(18,20,28,.75)); }

.z-team.z-genommen { outline:2px dashed var(--akzent); outline-offset:-3px; opacity:.85; }
.z-team.z-ziel { outline:2px solid var(--gut); outline-offset:-3px; }

.z-oben { display:flex; align-items:center; gap:.35rem; max-width:100%; }
.z-name { font-size:.9rem; font-weight:700; letter-spacing:-.01em;
  overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }

.z-mitte { display:flex; align-items:center; gap:.55rem; }
/* Nahe der Mitte, damit jeder für sich würfeln kann, ohne das Gerät zu drehen.
   Viermal so groß wie zuvor: er wird im Vorbeigehen getroffen, und das Ergebnis
   soll man ohne Hinsehen ablesen. */
.z-wuerfel { background:rgba(255,255,255,.05); border:1px solid var(--rand);
  color:var(--leise); border-radius:10px; padding:.2rem .45rem;
  font-size:clamp(1.5rem, 3.4vmin, 2.1rem); line-height:1;
  display:inline-flex; align-items:center; gap:.2rem; min-width:2.6rem;
  justify-content:center; }
.z-wuerfel:active { background:var(--akzent); color:#fff; }
.z-wuerfel-paar { display:inline-flex; align-items:center; gap:.2rem; }
.z-wurf { background:rgba(255,255,255,.05); border:1px solid var(--rand);
  border-radius:8px; padding:.15rem .45rem; color:var(--text);
  font-size:clamp(1.2rem, 2.8vmin, 1.7rem); font-weight:800;
  font-variant-numeric:tabular-nums; line-height:1.1; }
.z-wurf:active { background:var(--schlecht); color:#fff; }
.z-wurf[hidden] { display:none; }
/* Wächst mit der Kachel: bei vier Plätzen am großen Schirm darf die Zahl groß
   sein, auf dem Handy muss sie klein bleiben */
/* Zwei Stufen größer: die Zahl wird über den Tisch hinweg gelesen. Farbe als
   Vorwarnung — unter zehn knapp, unter drei kritisch. */
.z-leben { font-size:clamp(2.8rem, 10vmin, 6.5rem); font-weight:800; line-height:.9;
  font-variant-numeric:tabular-nums; min-width:2.4ch; text-align:center; }
.z-leben.knapp { color:#fb923c; }
.z-leben.kritisch { color:#c2410c; }
.z-gross { width:clamp(3rem, 7.5vmin, 4.4rem); aspect-ratio:1; border-radius:50%;
  font-size:clamp(1.35rem, 3.4vmin, 2.1rem); font-weight:600;
  background:rgba(255,255,255,.05); color:var(--text); border:1px solid var(--rand);
  display:grid; place-items:center; padding:0; }
.z-gross:active { background:var(--akzent); border-color:var(--akzent); color:#fff; }

/* Verlauf: die letzten Gruppen, neueste rechts — „5× −1" statt fünf Einträgen */
/* Der eigene Blick auf denselben Namen: klein, richtig herum, unter der Zahl */
.z-commander-eigen { background:none; border:0; padding:0; color:var(--leise);
  font-size:.78rem; font-weight:600; max-width:100%; overflow:hidden;
  white-space:nowrap; text-overflow:ellipsis; }
.z-commander-eigen[hidden] { display:none; }

.z-verlauf { display:flex; gap:.25rem; align-items:center; min-height:1rem;
  max-width:100%; overflow:hidden; }
.z-v { font-size:.66rem; font-weight:600; font-variant-numeric:tabular-nums;
  padding:.05rem .3rem; border-radius:5px; background:rgba(255,255,255,.05);
  color:var(--leise); white-space:nowrap; }
.z-v.ab { color:#fca5a5; background:rgba(248,113,113,.09); }
.z-v.auf { color:#86efac; background:rgba(74,222,128,.09); }

/* Eine Bedienzeile statt drei gestapelter Reihen */
.z-unten { display:flex; flex-wrap:wrap; justify-content:center; align-items:center;
  gap:.25rem; max-width:100%; }
.z-klein { display:flex; gap:.22rem; align-items:center; flex-wrap:wrap;
  justify-content:center; }
/* Zahl und Zurücknehmen als ein Paar: wer sich vertippt, braucht keinen
   versteckten Griff, sondern einen Knopf */
.z-cmd-paar { display:inline-flex; align-items:stretch; }
.z-cmd-paar .z-cmd-chip { border-radius:6px 0 0 6px; }
.z-cmd-ab { border:1px solid var(--rand); border-left:0; border-radius:0 6px 6px 0;
  background:rgba(18,20,28,.72); color:var(--leise); font-size:.85rem; padding:0 .42rem; }
.z-cmd-ab:disabled { opacity:.25; }
.z-cmd-ab:active:not(:disabled) { background:var(--schlecht); color:#fff; }
.z-cmd-paar.nah .z-cmd-chip, .z-cmd-paar.nah .z-cmd-ab { border-color:rgba(251,191,36,.55); }
.z-cmd-paar.nah .z-cmd-zahl { color:var(--warn); }
.z-cmd-paar.voll .z-cmd-chip, .z-cmd-paar.voll .z-cmd-ab { border-color:var(--schlecht); }
.z-cmd-paar.voll .z-cmd-chip { background:rgba(248,113,113,.12); }
.z-cmd-paar.voll .z-cmd-zahl { color:var(--schlecht); }

/* Commander-Suche */
.c-treffer { display:grid; gap:.3rem; margin-top:.5rem; max-height:46dvh; overflow:auto; }
.c-karte { display:flex; align-items:center; gap:.6rem; width:100%; text-align:left;
  background:rgba(255,255,255,.04); border:1px solid var(--rand); color:var(--text);
  border-radius:8px; padding:.3rem .45rem; font-size:.86rem; font-weight:600; }
.c-karte:active, .c-karte:hover { background:rgba(124,92,255,.16); }
.c-bild { width:3.4rem; height:2.2rem; border-radius:5px; flex:0 0 auto;
  background:rgba(255,255,255,.06) center/cover; }
.z-chip { background:rgba(255,255,255,.05); border:1px solid var(--rand); color:var(--leise);
  border-radius:6px; padding:.12rem .42rem; font-size:.72rem; font-weight:600; }
.z-chip:active { background:var(--akzent); color:#fff; }
.z-mehr { line-height:1; letter-spacing:.08em; }

/* Ein Feld je Gegner mit laufendem Stand: tippen zählt hoch, halten zieht ab */
.z-cmd-chip { display:inline-flex; align-items:center; gap:.3rem;
  background:rgba(18,20,28,.72); border:1px solid var(--rand); color:var(--text);
  border-radius:6px; padding:.14rem .42rem; font-size:.86rem; }
.z-cmd-chip:active { background:var(--akzent); }
/* Voller Name: am Tisch muss man wissen, wessen Commander die 21 zusammenhat.
   Der Stapel darf dafür breiter werden — er steht in der Ecke und hat Platz. */
.z-cmd-name { color:var(--leise); font-size:.78rem; font-weight:600;
  max-width:8rem; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.z-cmd-zahl { font-weight:800; font-variant-numeric:tabular-nums; min-width:1.2ch;
  text-align:right; }

/* Zusatzzähler bleiben weg, bis sie jemand braucht. Die Regel mit [hidden]
   muss *nach* dem display stehen und es ausdrücklich aufheben — ein eigenes
   `display` schlägt sonst das hidden-Attribut des Browsers, und dann steht in
   jeder Kachel eine Reihe Nullen. */
.z-marker { display:flex; gap:.3rem; flex-wrap:wrap; justify-content:center;
  align-items:center; max-width:100%; }
.z-marker[hidden] { display:none; }
.z-m { display:inline-flex; align-items:center; gap:.18rem; font-size:.68rem; }
.z-m b { min-width:1.3ch; text-align:center; font-variant-numeric:tabular-nums; }
.z-m-l { color:var(--leise); font-size:.6rem; }

.z-dlg { background:var(--karte); color:var(--text); border:1px solid var(--rand);
  border-radius:12px; padding:1.1rem; width:min(92vw, 34rem); }
.z-dlg::backdrop { background:rgba(0,0,0,.55); }

/* Über den Tisch gelegt, nicht darunter angehängt: sonst wächst die Seite und
   der Zähler rutscht aus dem Bild */
.z-ueber { position:fixed; inset:auto .5rem .5rem .5rem; z-index:20;
  background:var(--karte); border:1px solid var(--rand); border-radius:12px;
  padding:.7rem 2rem .7rem .8rem; box-shadow:0 8px 30px rgba(0,0,0,.45); }
.z-ueber .zu { position:absolute; top:.35rem; right:.5rem; }

@media (max-width:560px) {
  /* Auf dem Handy gekürzt statt weggelassen: ganz ohne Namen weiß niemand,
     wessen Commander gemeint ist */
  .z-cmd-name { max-width:4.2rem; font-size:.7rem; }
  .z-team { padding:.9rem .4rem .5rem; gap:.25rem; }
  .z-mitte { gap:.45rem; }
}

/* ── Decks und Anmeldung ─────────────────────────────────────────
   Zeilen, keine Tabelle: auf dem Telefon ist eine Tabelle mit fünf Spalten ein
   waagerechter Scrollbalken, und die Angaben eines Decks gehören ohnehin
   zusammen statt untereinander in Spalten. */
.deck-karte, .deck-wahl { display:flex; align-items:center; gap:.6rem;
  background:rgba(255,255,255,.04); border:1px solid var(--rand); border-radius:10px;
  padding:.55rem .7rem; }
.deck-wahl { cursor:pointer; }
.deck-wahl:has(input:checked) { border-color:var(--akzent);
  background:rgba(124,92,255,.14); }
/* Ein Häkchen mit Fingerbreite — das voreingestellte ist auf dem Telefon
   kleiner als die Fingerkuppe und wird zum Glücksspiel. */
.deck-wahl input { width:1.15rem; height:1.15rem; accent-color:var(--akzent); flex:0 0 auto; }
.cf-treffer { max-height:38dvh; }

/* ── Bedienung mit dem Finger ────────────────────────────────────
 *
 * Zwei Dinge machen eine Seite am Telefon unbenutzbar, und beide sind
 * unsichtbar, solange man sie mit der Maus bedient:
 *
 * 1. Ziele unter etwa 44 px trifft man nicht zuverlässig — man trifft daneben,
 *    landet eine Ansicht weiter und muss zurück.
 * 2. Schrift unter 16 px in einem Eingabefeld lässt iOS beim Antippen
 *    hineinzoomen. Danach steht die Seite schief, und es gibt keinen Weg
 *    zurück außer von Hand herauszuziehen.
 *
 * Deshalb gilt beides hier ab „schmal" ausnahmslos.
 */
.menue-knopf { display:none; padding:.4rem .55rem; line-height:0; }

@media (max-width: 720px) {
  .kopf { gap:.5rem; padding:.5rem .7rem; flex-wrap:nowrap; }
  .kopf #wer { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis;
    white-space:nowrap; font-size:.78rem; }
  .menue-knopf { display:block; }

  /* Das Menü legt sich über den Inhalt, statt ihn nach unten zu schieben:
     sonst springt die Seite bei jedem Öffnen. */
  .kopf nav { display:none; position:absolute; top:100%; right:.5rem; left:.5rem;
    flex-direction:column; gap:0; margin:0; background:var(--karte);
    border:1px solid var(--rand); border-radius:12px; padding:.3rem;
    box-shadow:0 14px 40px rgba(0,0,0,.5); z-index:20; }
  .kopf nav.offen { display:flex; }
  .kopf nav a { padding:.75rem .8rem; border-radius:8px; font-size:.95rem; }
  .kopf nav a.aktiv { background:rgba(124,92,255,.16); color:var(--text); font-weight:600; }
  .kopf { position:relative; }

  main { padding:.6rem .55rem 1.4rem; }
  .karte { padding:.85rem .8rem; border-radius:10px; }
  .gitter { grid-template-columns:1fr; }
  .feldgitter { grid-template-columns:1fr; }

  /* Fingerbreite Ziele */
  button, .knopf { min-height:2.75rem; padding:.55rem 1rem; }
  button.klein { min-height:2.4rem; padding:.4rem .8rem; font-size:.84rem; }
  .kopf .menue-knopf { min-height:2.4rem; }
  input, select, textarea { min-height:2.75rem; font-size:16px; }
  .deck-wahl, .deck-karte, .c-karte { min-height:3rem; }

  /* Tabellen dürfen waagerecht rollen, statt die Seite zu sprengen */
  .tabelle-huelle { overflow-x:auto; max-height:none; }
  .tabelle-huelle table { min-width:32rem; }
  td, th { padding:.5rem .45rem; }
}

/* Der Zähler bleibt auch schmal ein Tisch: dort wird nicht gescrollt, dort wird
   gedreht. Die Regeln oben dürfen ihm keine Mindesthöhen unterschieben. */
@media (max-width: 720px) {
  main.voll { padding:.3rem; }
  main.voll button { min-height:0; padding:revert; }
}

/* ── Startseite ──────────────────────────────────────────────────
   Kalender links, „was kommt" rechts. Beide Spalten mit minmax(0,…): ohne das
   zieht ein langer Terminname die Spalte auf und drückt die andere weg. */
.dash { display:grid; gap:.8rem; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);
  align-items:start; }
@media (max-width: 980px) { .dash { grid-template-columns:minmax(0,1fr); } }

/* ── Monatskalender ──────────────────────────────────────────────
 *
 * Aufbau wie der Raidkalender von Siniath. Die eine Regel, an der alles hängt:
 * die Zellen wachsen nicht mit ihrem Inhalt. Ein Tag mit drei Terminen würde
 * sonst seine ganze Woche in die Höhe ziehen, und der Monat säße schief.
 */
.k-karte { padding:0; overflow:hidden; }
.k-kopf { display:flex; align-items:center; justify-content:space-between;
  padding:.6rem .8rem; border-bottom:1px solid var(--rand); }
.k-kopf button { font-size:1.1rem; line-height:1; padding:.1rem .7rem; }
.k-dow { display:grid; grid-template-columns:repeat(7,minmax(0,1fr));
  border-bottom:1px solid var(--rand); }
.k-dow > div { text-align:center; padding:.4rem 0; font-size:.64rem; font-weight:800;
  color:var(--leise); text-transform:uppercase; letter-spacing:.06em; }
.k-gitter { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); }
.k-zelle { min-height:5.6rem; padding:3px 3px 5px; display:flex; flex-direction:column;
  gap:2px; border-right:1px solid var(--rand); border-bottom:1px solid var(--rand);
  /* Ohne min-width:0 wächst eine Zelle über ihren Spaltenanteil hinaus, sobald
     ein Terminname nicht umbrechen kann — dann sind die Tage verschieden breit. */
  min-width:0; overflow:hidden; }
.k-zelle:nth-child(7n) { border-right:none; }
.k-fremd { background:rgba(0,0,0,.2); }
.k-fremd .k-tag { opacity:.45; }
.k-heute { background:rgba(124,92,255,.07); }
.k-tag { font-size:.7rem; font-weight:700; color:var(--leise); width:1.35rem;
  height:1.35rem; border-radius:50%; display:inline-flex; align-items:center;
  justify-content:center; flex:0 0 auto; }
.k-tag.k-heute-marke { background:var(--akzent); color:#fff; }
.k-ev { display:flex; align-items:baseline; gap:4px; font-size:.64rem; font-weight:600;
  line-height:1.4; padding:2px 4px; border-radius:4px; text-decoration:none; color:#fff;
  overflow:hidden; background:var(--akzent); }
.k-ev.k-turnier { background:var(--gold); color:#1b1200; }
/* Wo man selbst zugesagt hat, steht ein Rand — die Farbe allein trägt das
   nicht, sie ist schon für „Abend oder Turnier" vergeben. */
.k-ev.k-dabei { box-shadow:inset 0 0 0 1.5px var(--mint); }
.k-zeit { font-variant-numeric:tabular-nums; opacity:.85; flex-shrink:0; }
.k-titel { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }
.k-zahl { margin-left:auto; flex-shrink:0; font-weight:800;
  background:rgba(0,0,0,.28); border-radius:3px; padding:0 3px;
  font-variant-numeric:tabular-nums; }
.k-mehr { font-size:.62rem; color:var(--leise); font-weight:700; padding-left:3px; }

@media (max-width: 720px) {
  /* Schmal bleibt der Monat ein Monat — sieben Spalten sind seine Aussage.
     Statt umzubrechen werden die Zellen flacher, und die Termine schrumpfen
     auf den Zeitpunkt und einen Farbstreifen. */
  .k-zelle { min-height:3.4rem; padding:2px; }
  .k-tag { width:1.15rem; height:1.15rem; font-size:.62rem; }
  .k-ev { font-size:.55rem; padding:1px 2px; gap:2px; min-height:0; }
  .k-titel, .k-zahl { display:none; }
  .k-kopf button { min-height:2.4rem; }
}

/* ── Das „+" im Kalendertag ──────────────────────────────────────
 *
 * Am Zeiger erscheint es beim Überfahren — dauerhaft sichtbar wären es 42
 * Pluszeichen, und der Monat läse sich nicht mehr. Auf einem Berührungsschirm
 * gibt es kein Überfahren, also steht es dort immer da, nur blass.
 */
.k-zeile { display:flex; align-items:center; gap:2px; }
.k-plus { margin-left:auto; flex:0 0 auto; background:none; border:0; color:var(--leise);
  font-size:.95rem; line-height:1; font-weight:700; padding:0 3px; border-radius:5px;
  opacity:0; transition:opacity .12s, background .12s; cursor:pointer; }
.k-zelle:hover .k-plus, .k-plus:focus-visible { opacity:1; }
.k-plus:hover { background:var(--akzent); color:#fff; opacity:1; }
@media (hover: none) { .k-plus { opacity:.5; } }

/* ── Datum auswählen statt eintippen ─────────────────────────────
   Der Knopf zeigt das gewählte Datum ausgeschrieben; das Raster liegt in einer
   Blase darüber. `position:absolute` und nicht im Fluss: eine Blase, die den
   Rest des Formulars nach unten schiebt, verschiebt beim Öffnen genau den
   Knopf, den man gerade getroffen hat. */
.df { position:relative; }
.df-knopf { width:100%; text-align:left; font-variant-numeric:tabular-nums; }
.df-knopf.df-leer { color:var(--leise); font-weight:500; }
.df-blase { position:absolute; z-index:30; top:calc(100% + .3rem); left:0;
  min-width:min(19rem, 88vw); margin:0; padding:.5rem;
  box-shadow:0 14px 40px rgba(0,0,0,.55); }
.df-blase[hidden] { display:none; }
.df-zeit { margin-top:.5rem; }

.mk-kopf { display:flex; align-items:center; justify-content:space-between;
  padding:0 .1rem .4rem; }
.mk-dow { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); }
.mk-dow > div { text-align:center; font-size:.6rem; font-weight:800; color:var(--leise);
  text-transform:uppercase; letter-spacing:.05em; padding-bottom:.2rem; }
.mk-gitter { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:1px; }
.mk-tag { background:none; border:0; color:var(--text); border-radius:7px;
  padding:0; aspect-ratio:1; min-width:0; font-size:.8rem; font-weight:600;
  font-variant-numeric:tabular-nums; cursor:pointer; }
.mk-tag:hover { background:rgba(255,255,255,.09); }
.mk-fremd { color:var(--leise); opacity:.5; }
.mk-heute { box-shadow:inset 0 0 0 1.5px var(--rand); }
.mk-gewaehlt { background:var(--akzent); color:#fff; font-weight:800; }
.mk-gewaehlt:hover { background:var(--akzent); }

@media (max-width: 720px) {
  /* Fingerbreite Tage. `aspect-ratio` allein ergibt bei sieben Spalten auf
     einem schmalen Schirm gut 2,2 rem — knapp unter dem, was man trifft. */
  .mk-tag { min-height:2.5rem; font-size:.9rem; }
  .df-blase { left:auto; right:0; min-width:min(21rem, 92vw); }
  .k-plus { min-height:0; padding:0 4px; font-size:1.05rem; }
}

/* ── Einladen in der Kopfzeile ───────────────────────────────────
   Steht links vom Menüknopf und behält seine Breite, auch wenn die
   Beschriftung kurz auf „Kopiert ✓" oder den Code wechselt — sonst hüpft der
   Menüknopf daneben unter dem Finger weg. */
.kopf-einladen { margin-left:auto; flex:0 0 auto; min-width:6.2rem; text-align:center; }
.kopf nav + .kopf-einladen, .kopf-einladen + #menue { margin-left:.4rem; }
@media (max-width: 720px) {
  .kopf-einladen { min-width:5.4rem; font-size:.74rem; padding:.35rem .5rem;
    min-height:2.4rem; }
}

/* ── Aus der Wertung genommen ────────────────────────────────────
   Sichtbar bleiben, aber erkennbar still: der Eintrag ist nicht weg, er zählt
   nur nicht. Nur Ausgrauen wäre zu wenig — das liest sich wie „deaktiviert". */
.ausser-wertung { opacity:.62; border-style:dashed; }
.ausser-wertung b { text-decoration:line-through; text-decoration-thickness:1px; }
/* Ein Link, der wie ein Knopf aussieht — <a> nimmt die Knopfregeln nicht mit */
a.knopf { display:inline-flex; align-items:center; text-decoration:none; }

/* ── Nachfragen ──────────────────────────────────────────────────
   Ein eigener Dialog statt confirm/prompt: die eingebauten sehen in jedem
   Browser anders aus und stehen ohne Bezug zur Seite. */
.f-dlg { width:min(30rem, 92vw); border:1px solid var(--rand); margin:auto; }
.f-dlg::backdrop { background:rgba(0,0,0,.62); }
.f-dlg h2 { font-size:1rem; }
.f-dlg p { line-height:1.5; }
/* Was etwas wegnimmt, sieht auch danach aus — und liegt rechts, wo der Daumen
   ihn nicht im Vorbeigehen trifft */
button.gefahr { background:var(--schlecht); color:#2a0505; }
button.gefahr:disabled { background:rgba(248,113,113,.3); color:rgba(255,255,255,.5); }

/* Eine Terminzeile mit Handlung daneben: der Knopf gehört nicht in den Link */
.ev-zeile { display:flex; align-items:stretch; gap:.3rem; }
.ev-zeile > .c-karte { flex:1; min-width:0; }
.ev-weg { flex:0 0 auto; align-self:stretch; padding-inline:.6rem; }

/* ── Der Punkt zeigt den Akkustand ───────────────────────────────
   In der Mitte des Tisches, wo ohnehin alle hinschauen. Die Schrift dunkel auf
   dem Rot — hell auf Rot ist bei dieser Grösse nicht zu lesen. */
.z-punkt-akku { font-size:.72rem; font-weight:800; color:#2a0505;
  font-variant-numeric:tabular-nums; line-height:1; letter-spacing:-.02em; }
/* Unter 20 % ohne Ladekabel: der Punkt pocht langsam. Nicht schnell — er sitzt
   mitten im Blickfeld und soll auffallen, nicht stören. */
.z-punkt-leer { animation:z-puls 2.4s ease-in-out infinite; }
@keyframes z-puls {
  0%, 100% { box-shadow:0 2px 10px rgba(0,0,0,.5),
                        0 0 10px rgba(248,113,113,.5),
                        0 0 22px rgba(248,113,113,.22); }
  50%      { box-shadow:0 2px 10px rgba(0,0,0,.5),
                        0 0 10px rgba(248,113,113,.5),
                        0 0 0 6px rgba(248,113,113,.28); }
}
/* Wer nicht animiert sehen will, sieht es nicht — die Information steht ohnehin
   als Zahl da. */
@media (prefers-reduced-motion: reduce) { .z-punkt-leer { animation:none; } }

/* ── Am Zug ──────────────────────────────────────────────────────
   Ein Rahmen um die ganze Kachel, kein Zeichen in einer Ecke: der Tisch wird
   aus zwei Metern Abstand und aus jeder Richtung angeschaut. */
.z-team.z-amzug { border-color:var(--gold);
  box-shadow:inset 0 0 0 3px var(--gold), 0 0 18px rgba(233,196,106,.25); }
.z-zug { background:var(--gold); color:#1b1200; font-weight:800; }
.z-zug-knopf { background:var(--gold); color:#1b1200; }

/* ── Stromsparen ─────────────────────────────────────────────────
   Nur die Kartenbilder. Auf einem OLED-Schirm kostet jede helle Fläche Strom,
   und ein Commander-Bild über der ganzen Kachel ist die grösste, die es hier
   gibt. Der zweite Teil steckt im Code: der Bildschirm wird nicht mehr
   wachgehalten — das ist der eigentliche Posten. Mehr behaupte ich nicht. */
.z-sparen .z-bild { display:none; }

/* ── Die Kacheln liegen im Kreis, nicht in Zeilen ────────────────
 *
 * Das Gitter füllt sich zeilenweise: bei vier Plätzen oben links, oben rechts,
 * unten links, unten rechts. Der Zug geht am Tisch aber im Uhrzeigersinn — von
 * oben rechts nach *unten rechts*, nicht quer über den Tisch nach unten links.
 *
 * `order` schiebt die Kachel in die richtige Zelle. Der Platz selbst bleibt,
 * was er ist; nur die Anzeige folgt dem Kreis. Im Stylesheet und nicht im Code,
 * weil sieben und acht Plätze auf breitem Schirm anders liegen — und das weiss
 * nur eine Medienabfrage.
 *
 * Ausgeschrieben wird jede Zuordnung, auch `order:0`. Sie wegzulassen ergäbe
 * dasselbe Bild — aber nur, weil gleiche Werte auf die Reihenfolge im Dokument
 * zurückfallen. Das ist eine stille Abhängigkeit, und aus dem Stylesheet wäre
 * nicht mehr abzulesen, wo eine Kachel eigentlich hingehört.
 */
.z-n2 > .zr-0 { order:0; } .z-n2 > .zr-1 { order:1; }
.z-n3 > .zr-0 { order:0; } .z-n3 > .zr-1 { order:2; } .z-n3 > .zr-2 { order:1; }
.z-n4 > .zr-0 { order:0; } .z-n4 > .zr-1 { order:1; } .z-n4 > .zr-2 { order:3; } .z-n4 > .zr-3 { order:2; }
.z-n5 > .zr-0 { order:0; } .z-n5 > .zr-1 { order:2; } .z-n5 > .zr-2 { order:4; } .z-n5 > .zr-3 { order:3; } .z-n5 > .zr-4 { order:1; }
.z-n6 > .zr-0 { order:0; } .z-n6 > .zr-1 { order:1; } .z-n6 > .zr-2 { order:3; } .z-n6 > .zr-3 { order:5; } .z-n6 > .zr-4 { order:4; } .z-n6 > .zr-5 { order:2; }
.z-n7 > .zr-0 { order:0; } .z-n7 > .zr-1 { order:2; } .z-n7 > .zr-2 { order:4; } .z-n7 > .zr-3 { order:6; } .z-n7 > .zr-4 { order:5; } .z-n7 > .zr-5 { order:3; } .z-n7 > .zr-6 { order:1; }
.z-n8 > .zr-0 { order:0; } .z-n8 > .zr-1 { order:1; } .z-n8 > .zr-2 { order:3; } .z-n8 > .zr-3 { order:5; } .z-n8 > .zr-4 { order:7; } .z-n8 > .zr-5 { order:6; } .z-n8 > .zr-6 { order:4; } .z-n8 > .zr-7 { order:2; }

/* Die volle obere Zeile gehört der Kachel in Zelle 0 — nach dem Umsortieren ist
   das nicht mehr zwingend das erste Kind im Dokument. */
.z-n3 > .zr-0, .z-n5 > .zr-0, .z-n7 > .zr-0 { grid-column:1 / -1; }

@media (min-width:900px) {
  /* Breit liegen sieben und acht in zwei Reihen zu vier: der Kreis läuft oben
     nach rechts und unten wieder zurück. */
  .z-n7 > .zr-0 { order:0; } .z-n7 > .zr-1 { order:1; } .z-n7 > .zr-2 { order:2; } .z-n7 > .zr-3 { order:3; } .z-n7 > .zr-4 { order:6; } .z-n7 > .zr-5 { order:5; } .z-n7 > .zr-6 { order:4; }
  .z-n8 > .zr-0 { order:0; } .z-n8 > .zr-1 { order:1; } .z-n8 > .zr-2 { order:2; } .z-n8 > .zr-3 { order:3; } .z-n8 > .zr-4 { order:7; } .z-n8 > .zr-5 { order:6; } .z-n8 > .zr-6 { order:5; } .z-n8 > .zr-7 { order:4; }
  .z-n7 > .zr-0 { grid-column:auto; }
}