/* Der Hub — die Setzerei.
 *
 * Bildwelt: Ein Setzkasten. Jedes Element sitzt in einem Fach, ein Fach ist
 * sichtbar leer, und der Winkelhaken hält genau eine Zeile: den Namen. Der
 * Grundzustand dieser Seite ist leer, und das ist keine Lücke, sondern der
 * Zustand, für den sie gebaut ist.
 *
 * Der Kasten selbst (die Leiste) und das Fach (.slot) stehen in shell.css –
 * sie gehören allen Seiten. Hier steht nur, was der Hub daraus baut.
 *
 * Farben kommen ausschließlich aus tokens.css. Gold steht auf dieser Seite an
 * genau einer Stelle: an dem Punkt, der sagt, wer am Zug ist. Das ist seine
 * eingetragene Bedeutung, und deshalb ist er hier auch der einzige.
 */

/* style.css sperrt für die Werkzeugseiten `html, body { height: 100%;
   overflow: hidden }` – eine Ansicht, ein Scrollbereich. Der Hub ist die
   einzige Fläche, die scrollt: Unter der Falzkante liegen die Fragen, und
   ohne diese Zeilen waren sie da, aber nicht erreichbar. */
.hubPage,
.hubPage body { height: auto; min-height: 100%; overflow: visible; }
.hubPage body {
  color: var(--text);
  font-size: var(--fs-base);
}

/* Die Leiste liegt fest im Bild; die Arbeitsfläche rückt um ihre Breite ein.
   Der Rand kommt aus der Leiter, nicht aus dem Gefühl: 64 = 2 × sp-9,
   44 = sp-9 + sp-5. */
.work {
  margin-left: var(--nav-w);
  padding: calc(var(--sp-9) * 2) calc(var(--sp-9) + var(--sp-5))
           calc(var(--sp-9) * 2 + var(--nav-h));
}

.tray {
  display: grid;
  grid-template-columns: minmax(0, 472fr) minmax(0, 676fr);
  grid-template-areas:
    "puzzle set"
    "puzzle tools"
    "free   free";
  gap: 18px 24px;
}

/* ---- Fach 1: das Tagespuzzle ---- */
.slot--puzzle {
  grid-area: puzzle;
  display: flex; flex-direction: column; justify-content: center; gap: var(--sp-5);
}

/* Das Diagramm bleibt in der dunklen Hälfte der Leiter. Mit --indigo-200 als
   hellem Feld war das Brett die hellste Fläche der Seite und zog den ersten
   Blick von der einen Handlung weg – gemessen in der Abnahme, nicht geraten.
   Die Figuren tragen ihre eigene Kontur, sie brauchen den Hellwert nicht. */
.diagram {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  width: 100%;
  max-width: 24rem;
  margin-inline: auto;
  aspect-ratio: 1;
  border: 1px solid var(--panel-border);
}
/* Jedes Feld ist ein Knopf. Ein div mit Klick-Handler ist nicht fokussierbar,
   nicht ausloesbar und hat keinen Namen. */
.diagram .sq {
  position: relative;
  border: none;
  padding: 0;
  font: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.diagram .sq:disabled { cursor: default; }
/* Die gewaehlte Figur, die moeglichen Ziele, und was der Zug ergeben hat.
   Vier Zustaende, vier Formen – keiner haengt allein an einer Farbe. */
.diagram .sq.is-sel { box-shadow: inset 0 0 0 3px var(--accent); }
.diagram .sq.is-target::after {
  content: "";
  position: absolute; inset: 0;
  margin: auto;
  width: 26%; height: 26%;
  border-radius: 50%;
  background: var(--text);
  opacity: .38;
}
.diagram .sq.is-target:has(img)::after {
  /* Auf einem besetzten Feld waere der Punkt unter der Figur unsichtbar –
     dort ist es ein Ring um sie herum. */
  inset: 6%; width: auto; height: auto;
  background: none;
  border: 3px solid var(--text);
  opacity: .45;
}
.diagram .sq.is-right { box-shadow: inset 0 0 0 3px var(--node-pulsar); }
.diagram .sq.is-wrong { box-shadow: inset 0 0 0 3px var(--node-hole); }
/* Rand statt Beschriftung in jedem Feld: Die Zahlen und Buchstaben stehen nur
   an der ersten Spalte und der letzten Reihe. */
.diagram .rank, .diagram .file {
  position: absolute;
  font-size: var(--fs-micro);
  font-style: normal;
  color: var(--text);
  opacity: .5;
  pointer-events: none;
}
.diagram .rank { top: 2px; left: 3px; }
.diagram .file { bottom: 1px; right: 3px; }
.diagram .sq--light { background: var(--board-light); }
.diagram .sq--dark { background: var(--board-dark); }
.diagram .sq img { position: absolute; inset: 6%; width: 88%; height: 88%; }

.puzAsk { font-size: var(--fs-lead); display: flex; align-items: center; gap: var(--sp-3); }
.puzSay { font-size: var(--fs-lead); min-height: 1.5em; color: var(--text-dim); }
.puzSay--right { color: var(--node-pulsar); }
.puzSay--wrong { color: var(--node-hole); }
/* Der einzige goldene Punkt der Seite. Gold heißt „am Zug" – hier stimmt das,
   und weil es sonst nirgends steht, liest man es auch. */
.toMove {
  width: 13px; height: 13px; border-radius: 50%;
  background: var(--move-own); flex: 0 0 auto;
}

.puzAnswer summary {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  min-height: var(--ctl-h);
  padding: var(--sp-3) var(--sp-6);
  border: 1px solid var(--panel-border);
  border-radius: var(--r-md);
  color: var(--text-dim);
  font-size: var(--fs-base);
}
.puzAnswer summary:hover { border-color: var(--accent); color: var(--text); }
.puzAnswer[open] summary { margin-bottom: var(--sp-4); }
.puzAnswer p { font-size: var(--fs-lead); }
.puzAnswer b { font-variant-numeric: tabular-nums; }
.dim { color: var(--text-dim); font-size: var(--fs-small); }

/* ---- Fach 2: der Winkelhaken ---- */
.slot--set { grid-area: set; display: flex; flex-direction: column; gap: var(--sp-5); padding: var(--sp-9); }
.slot--set h1 {
  font-size: var(--fs-mega);
  font-weight: 300;
  line-height: 1.14;
  letter-spacing: -0.3px;
}
/* Keine Zeilenbreitenbremse: Das Fach ist die Bremse. Mit 52ch brach der Satz
   auf drei Zeilen und riss das Fach um 23 px auf, ohne lesbarer zu werden. */
.setLead { color: var(--text-dim); font-size: var(--fs-lead); line-height: 1.55; }

/* Der Umschalter muss sein eigenes Wort halten.
 *
 * Die gewählte Seite trägt `font-weight: 600` (style.css), und „Chess.com"
 * braucht damit 85 px – der Knopf gab 81 her, das `overflow: hidden` des
 * Umschalters schnitt das „m" ab. Gemessen bei 375 und bei 320 px; der Knopf
 * ist auf beiden gleich breit, es ist keine Frage der Bildschirmgröße.
 * Die automatische Mindestbreite half nicht: Nach dem Punkt darf umbrochen
 * werden, „Chess." allein ist schmal genug.
 *
 * Sichtbar wurde es erst, seit Chess.com die Vorwahl ist. Der Schnitt gehörte
 * `.platBtn` in style.css und traf jede Fläche, auf der jemand Chess.com
 * wählt — **dort steht er seit dem 25. August 2026 behoben** (`white-space:
 * nowrap` gegen den Umbruch nach dem Punkt, `flex: 1 1 0` mit `min-width: 0`
 * gegen das Aufdrücken der Hälfte).
 *
 * Diese Zeile bleibt trotzdem, aber aus einem anderen Grund als damals: Der
 * Umschalter steht hier in einer Reihe mit dem Namensfeld, und über die volle
 * Breite gezogen nähme er ihm den Platz. Die 12rem sind das breitere der
 * beiden Wörter (85 px je Hälfte) plus Luft für Schriften, die der
 * Systemstack anderswo einsetzt. */
.slot--set .platToggle { width: 12rem; }

.fieldErr { color: var(--loss); font-size: var(--fs-small); flex: 1 0 100%; }
.fieldErr:empty { display: none; }

/* ---- Fächer 3–6: die Werkzeuge ---- */
/* Eine gerade Zahl Spalten, nie drei.
 *
 * Hier stand `repeat(auto-fit, minmax(11rem, 1fr))` mit dem Kommentar, ein
 * viertes Fach sei eine weitere Spalte und kein Umbau. Beim vierten Fach am
 * 17. August 2026 stimmte das nur auf sehr breiten Schirmen: Gemessen war die
 * Reihe bei 1900 px Fenster 1005 px breit (vier Spalten zu 243), bei 1280 px
 * aber nur 640 – dort passten drei Fächer zu 206 px, und das vierte stand
 * allein in einer zweiten Zeile. Ein einzelnes Fach neben einer Lücke liest
 * sich als fehlendes Fach, nicht als leeres.
 *
 * Zwei feste Spalten, ab 1500 px vier.
 *
 * Hier stand, ein fünftes Werkzeug ergebe damit "wieder ein Rechteck statt
 * eines Waisenfachs". Beim fünften am 22. August 2026 stimmte das nicht: Fünf
 * Fächer in zwei Spalten sind 2+2+1, und das eine steht genau so allein neben
 * einer Lücke, wie es der Absatz darüber verbietet. In vier Spalten ist es
 * 4+1 und noch deutlicher.
 *
 * Die Regel darunter behebt das allgemein, nicht für diesen einen Fall: Was
 * in der letzten Zeile allein stünde, nimmt die ganze Zeile. Damit bleibt die
 * Reihe bei jeder Anzahl ein Rechteck — auch beim sechsten und siebten. */
.toolsRow {
  grid-area: tools;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 11px;
}
/* Zwei Spalten: allein steht das letzte Fach bei ungerader Anzahl. */
.toolsRow > .slot--tool:last-child:nth-child(odd) { grid-column: 1 / -1; }
@media (min-width: 1500px) {
  .toolsRow { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  /* Vier Spalten: allein steht es, wenn die Anzahl bei Teilung durch vier
     eins übrig lässt. Die Regel für zwei Spalten muss hier ausdrücklich
     zurückgenommen werden — bei fünf Fächern greift sie sonst mit. */
  .toolsRow > .slot--tool:last-child:nth-child(odd) { grid-column: auto; }
  .toolsRow > .slot--tool:last-child:nth-child(4n + 1) { grid-column: 1 / -1; }
}
.slot--tool {
  padding: var(--sp-7);
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.slot--tool:hover { border-color: var(--accent); }
.slot--tool h2 { font-size: var(--fs-title); font-weight: 600; }
.slot--tool p { color: var(--text-dim); font-size: var(--fs-base); line-height: 1.45; }
.slotMeta { margin-top: auto; padding-top: var(--sp-4); font-size: var(--fs-small); }
.slotMeta:empty { display: none; }
.slotMeta.is-ready { color: var(--text); }

/* Dasselbe Zeichen wie in der Leiste, nur größer. Die 24er-Box skaliert den
   Strich mit: Auf 30 px gezeichnet ergibt die Strichstärke 1.3 genau 1,6 –
   zwischen den beiden Punkten, die die Charta nennt (1.3 auf 24, 2.5 auf 48).
   Eine zweite Zeichnung für die große Größe wäre eine zweite Wahrheit. */
.mark--big { margin-bottom: var(--sp-4); }
.mark--big svg { width: 30px; height: 30px; }

/* ---- Die Neuigkeitentafel ---- */
/* Sie sitzt an der Stelle, an der bis zum 12. August 2026 ein leeres Fach mit
   einem Versprechen stand. Ein Fach in voller Breite ist die auffälligste
   Fläche des Hubs nach dem Brett – die gehört dem, was es schon gibt und was
   am wenigsten Leute kennen, nicht einem Platzhalter. */
.slot--news {
  grid-area: free;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "label label" "body go";
  align-items: end;
  gap: var(--sp-3) var(--sp-7);
  text-decoration: none;
  color: inherit;
  min-height: 126px;
}
.slot--news:hover { border-color: var(--accent); }
.newsLabel { grid-area: label; color: var(--move-own); }
.newsBody { grid-area: body; }
.newsBody h2 { font-size: var(--fs-title); font-weight: 600; margin-bottom: var(--sp-3); }
.newsBody p { color: var(--text-dim); font-size: var(--fs-base); line-height: 1.55; max-width: 82ch; }
.newsGo {
  grid-area: go;
  font-size: var(--fs-base);
  font-weight: 600;
  color: var(--text);
  border: 1px solid var(--panel-border);
  border-radius: var(--r-md);
  padding: 10px 16px;
  min-height: var(--ctl-h);
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}
.slot--news:hover .newsGo { border-color: var(--accent); }

@media (max-width: 640px) {
  .slot--news { grid-template-columns: minmax(0, 1fr); grid-template-areas: "label" "body" "go"; align-items: start; }
  .newsGo { justify-content: center; }
}

.trustLine {
  margin: var(--sp-8) 0 0;
  max-width: 88ch;
  color: var(--text-dim);
  font-size: var(--fs-lead);
  line-height: 1.6;
}

/* ============================ UNTER DER FALZKANTE ============================ */
.faq { margin-top: var(--sp-9); }
.faq > .slotLabel { margin-bottom: var(--sp-5); }
/* Das Raster und die Frage-Antwort-Paare selbst stehen seit dem 14. August
   2026 in style.css: Die Werkzeugseiten tragen dieselben Paare unter ihrem
   Einstieg, und sie laden hub.css nicht. */

.siteFoot {
  margin-top: var(--sp-9);
  padding-top: var(--sp-6);
  border-top: 1px solid var(--panel-border);
  color: var(--text-dim);
  font-size: var(--fs-small);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  align-items: baseline;
}
.siteFoot a { color: var(--text-dim); }
.siteFoot a:hover { color: var(--text); }
.footLic { flex: 1 1 24rem; min-width: 0; line-height: 1.5; }

/* ============================ SCHMALE SCHIRME ============================ */
@media (pointer: coarse) {
  .puzAnswer summary { min-height: 44px; }
  /* Gemessen 37 x 32 und 50 x 32 px. Sie stehen nicht im Fliesstext, also
     gilt fuer sie kein Ausnahmefall — 44 in beide Richtungen. */
  .siteFoot a {
    min-width: 44px; min-height: 44px;
    display: inline-flex; align-items: center; justify-content: center;
    padding: 0 var(--sp-3);
  }

  /* Die sieben Verweise der Lizenzantwort waren das Letzte unter dem WCAG-
     Mindestmass auf dieser Seite: gemessen 20 px hoch, bei 375 x 812 wie bei
     812 x 375, sechs beziehungsweise sieben Stueck. Fuer Verweise im
     Fliesstext laesst WCAG 2.5.8 das durchgehen. Die Ausnahme ist ein
     Zugestaendnis an den Satz, kein Ziel — und sie kostet hier zwei Pixel.

     Zwei Pixel je Seite machen aus 20 genau 24. Mehr geht nicht: Der
     Zeilenabstand der Antwort gibt 1,62 x 15 = 24,3 px her, bei 26 px
     Trefferflaeche griffen zwei Verweise uebereinander ineinander. Die 44 px
     des Fusses gehen hier gar nicht — ein Verweis im Satz kann seine Zeile
     nicht verlassen, ohne die Zeilen darueber und darunter zu verdecken. */
  .qa a { padding-block: 2px; }
}

@media (max-width: 1080px) {
  .work { padding: var(--sp-7) var(--sp-6) calc(var(--sp-9) + var(--nav-h)); }
  .tray {
    grid-template-columns: minmax(0, 1fr);
    /* Auf dem Telefon zuerst die Überschrift und die eine Zeile, dann die
       Werkzeuge, und erst danach das Brett. Wer hier ankommt, soll wissen, wo
       er ist, bevor er spielt.
       Bis zum 24. August 2026 stand das Puzzlefach an zweiter Stelle. Bei
       375 × 812 begann das Brett damit bei y 498,8 und endete bei 823,8 – die
       Fußleiste steht ab 754 fest im Bild. Gemessen: Reihe 1 zu 100 %
       verdeckt, Reihe 2 zu 70 %, und ein Tipp auf h1 traf nicht das Feld,
       sondern den Leisteneintrag „Patterns" und verließ die Startseite. An 14
       von 18 Tagen des Satzes steht die ziehende Figur in dieser Zone.
       Das Fach ist 507 px hoch und passt auch gekürzt nicht mehr in das erste
       Bild – über der Leiste sind ab seinem alten Anfang 298 px frei. Also
       fällt die Falzkante jetzt in die Werkzeugreihe, wo sie eine Karte
       anschneidet, statt mitten durch eine Brettreihe. */
    grid-template-areas: "set" "tools" "puzzle" "free";
  }
  .slot { padding: var(--sp-6); }
  .slot--set { padding: var(--sp-6); }
  /* Das Puzzlefach gibt dem Brett seitlich die volle Breite: Gemessen waren
     die Felder auf 390 px sonst 40 px gross, mit dem schmaleren Rand sind es
     44 – die Untergrenze, die dieses Projekt sich selbst gesetzt hat. Ein
     Brettfeld kann sie nicht durch Polsterung erreichen, es ist ein Achtel
     des Bretts; also bekommt das Brett die Pixel. */
  .slot--puzzle { padding-inline: var(--sp-3); }
  .slot--puzzle .diagram { max-width: none; }
  /* Quer gehalten ist dasselbe Telefon 812 px breit und 375 px hoch. Die
     Regel darüber gab dem Brett dort die volle Breite: gemessen 762 × 762 px
     in einem 331 px hohen Bild – man sieht drei Reihen und kein Brett. Wo die
     Höhe das knappe Maß ist, gilt wieder die Bremse des Rechners.

     Die Bremse allein reichte nicht. 24rem sind 384 px, über der Leiste sind
     331 frei: gemessen am 25. August 2026 bei 812 × 375 und bei 667 × 375
     standen an der besten aller Rollpositionen 48 der 64 Felder im Bild, nie
     mehr. Ein 384er Quadrat passt in kein 331 px hohes Fenster – das ist
     keine Frage der Anordnung, sondern der Arithmetik.

     Die Anordnung entscheidet, wie viel von der Höhe das Brett abbekommt.
     Steht die Frage unter dem Brett, teilen sie sich die 331 px, und für die
     acht Reihen bleiben rund 190 – Felder von 24 px. Steht sie daneben,
     gehört dem Brett die ganze Höhe. Deshalb quer zwei Spalten: Brett links,
     Frage, Antwortstand und Aufklapper rechts.

     Das Brett nimmt, was zwischen Oberkante und Leiste frei ist. Bei 375 px
     Höhe sind das 323 px und damit Felder von 40,4 px – genau das Maß, das
     sie im Hochformat haben; kleiner wird das Brett hier also nicht. Die 8 px
     sind der Rest Luft unter der letzten Reihe. `svh` statt `vh`, weil
     Safaris Adressleiste die Höhe zurücknimmt, die `vh` schon verrechnet hat;
     die Zeile darüber trägt den Rückfall für Browser ohne `svh`. */
  @media (max-height: 560px) {
    .slot--puzzle .diagram {
      max-width: min(24rem, calc(100vh - var(--nav-h) - env(safe-area-inset-bottom) - var(--sp-3)));
      max-width: min(24rem, calc(100svh - var(--nav-h) - env(safe-area-inset-bottom) - var(--sp-3)));
    }
  }

  /* Zwei Spalten nur, wenn das Fenster wirklich quer liegt.
     Ein flaches Fenster ist nicht dasselbe wie ein quer gehaltenes: 375 × 500
     ist beides nicht (ein geteilter Bildschirm), 500 × 420 auch nicht. Neben
     dem Brett bleiben in einer Spalte Breite minus Höhe minus 12 px übrig –
     bei 500 × 420 sind das 68 px für die Frage, und das Brett stünde mit
     festen 368 px in einer 452 px breiten Spalte, die sich nicht wehrt.

     3:2 ist die Grenze, an der ein Fenster als quer durchgeht. Jedes quer
     gehaltene Telefon liegt darüber (568 × 320 und 667 × 375 bei 1,78,
     812 × 375 und 932 × 430 bei 2,17); ein zurechtgezogenes Browserfenster
     liegt darunter und behält die eine Spalte mit der Höhenbremse. Unterhalb
     von 3:2 bleiben der Frage rechnerisch mindestens 148 px.

     Das Brett bekommt hier eine feste Breite statt einer Obergrenze: Es liegt
     in einer `auto`-Spalte, und ein Prozentwert gegen eine Spalte, die sich
     nach ihm richtet, ist ein Zirkelschluss. */
  @media (min-aspect-ratio: 3 / 2) and (max-height: 560px) {
    .slot--puzzle {
      display: grid;
      grid-template-columns: auto minmax(0, 1fr);
      grid-template-areas:
        "board label"
        "board ask"
        "board say"
        "board answer";
      /* Die letzte Zeile nimmt den Überschuss des Bretts auf. Ohne sie
         verteilt das Raster ihn auf alle vier und reißt die drei Zeilen
         rechts auseinander. */
      grid-template-rows: auto auto auto 1fr;
      align-items: start;
      column-gap: var(--sp-6);
    }
    .slot--puzzle > .slotLabel { grid-area: label; }
    .slot--puzzle .puzAsk { grid-area: ask; }
    .slot--puzzle .puzSay { grid-area: say; }
    .slot--puzzle .puzAnswer { grid-area: answer; }
    .slot--puzzle .diagram {
      grid-area: board;
      max-width: none;
      width: min(24rem, calc(100vh - var(--nav-h) - env(safe-area-inset-bottom) - var(--sp-3)));
      width: min(24rem, calc(100svh - var(--nav-h) - env(safe-area-inset-bottom) - var(--sp-3)));
    }
  }
  /* Hier stand `.qaGrid { grid-template-columns: minmax(0, 1fr) }`. Die Regel
     war richtig und lag am falschen Ort: Nur die Startseite lädt diese Datei,
     und abgeschnitten war der Text auf /review und /galaxy. Sie steht jetzt
     als `min(24rem, 100%)` in css/style.css und gilt damit überall. */
}

@media (max-width: 640px) {
  .slot--set h1 { font-size: var(--fs-hero); }
}