/* games-703 · Text-Seiten der Site (About, Blog-Index, spaeter die Post-Schale) · #726
   Dieselbe Welt wie die Spiele und die Landing: ein weisses Blatt, Onest, drei Tinten,
   Haarlinien statt Kaesten. Diese Datei haelt NUR die Schale einer Leseseite (Kopf,
   Spalte, Zeilen, Fuss); Token kommen aus tokens.css, Grundregeln aus base.css.
   Eine Leseseite setzt keine eigenen Hex-Werte und keine eigenen Schriftgroessen. */

:root { --pcol: 720px; --pwide: 1120px; }

.page { min-height: 100dvh; display: flex; flex-direction: column; overscroll-behavior: auto; }

/* ---- Kopf: Wortmarke links, rechts Sprache + Thema + Domain (wie Landing-Pille, ohne Pille) ---- */
.page__top {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s3);
  width: 100%; max-width: var(--pwide); margin-inline: auto; box-sizing: border-box;
  min-height: 56px; padding: calc(var(--s4) + env(safe-area-inset-top)) var(--s5) 0;
}
.page__brand { display: inline-flex; align-items: center; color: var(--ink); text-decoration: none; min-height: 44px; }
.page__brand:hover, .page__brand:focus-visible { color: var(--ink-2); outline: none; }
/* Wortmarke 278 x 88, hier 24 px hoch; die Datei traegt links 20/88 Innenrand -> negativer Rand setzt das r auf die Kante. */
.page__logo { height: 24px; width: auto; display: block; margin-left: calc(24px * -0.227); }
.page__tools { display: inline-flex; align-items: center; gap: var(--s2); }
.page__tools .langbtn, .page__tools .themebtn { height: 44px; min-width: 44px; }
.page__domain { font-size: var(--t-xs); font-weight: 500; color: var(--ink-3); margin-left: var(--s2); }

/* ---- Spalte ---- */
.page__main {
  flex: 1; width: 100%; max-width: var(--pcol); margin-inline: auto; box-sizing: border-box;
  padding: var(--s7) var(--s5) var(--s8);
}
.page__main h1 {
  margin: 0 0 var(--s4);
  font-size: clamp(1.75rem, 3.4vw, 2.5rem); font-weight: 700; letter-spacing: var(--tight); line-height: 1.05;   /* dasselbe Rezept wie .h2 der Landing */
  text-wrap: balance;
}
.page__lead { margin: 0 0 var(--s7); max-width: 34em; font-size: var(--t-lg); line-height: 1.35; color: var(--ink-2); text-wrap: pretty; }
.page__main h2 { margin: var(--s7) 0 var(--s3); font-size: var(--t-lg); font-weight: 600; letter-spacing: -0.02em; line-height: 1.25; text-wrap: balance; }
.page__main h2:first-of-type { margin-top: 0; }
.page__main p { margin: 0 0 var(--s3); max-width: 62ch; font-size: var(--t-md); line-height: 1.5; color: var(--ink-2); text-wrap: pretty; }
.page__main p a, .page__main li a, .page__main dd a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; text-decoration-color: var(--line-strong); }
.page__main a:hover { text-decoration-color: var(--ink); }
.page__main a:focus-visible, .page__foot a:focus-visible { outline: 2px solid var(--accent-line); outline-offset: 2px; }

/* Byline: eine Zeile in Tinte 3, tabellarische Ziffern fuer die Daten. */
.page__byline { margin: 0 0 var(--s6); padding: var(--s3) 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); font-size: var(--t-sm); color: var(--ink-3); display: flex; flex-wrap: wrap; column-gap: var(--s4); row-gap: var(--s1); font-variant-numeric: tabular-nums; }
.page__byline b { font-weight: 500; color: var(--ink); }

/* Zeilen-Liste (Quellen, Fakten): Haarlinie oben je Zeile, letzte schliesst unten. Kein Kasten. */
.rows { margin: var(--s2) 0 var(--s3); padding: 0; list-style: none; max-width: 62ch; }
.rows > li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; column-gap: var(--s4); padding: var(--s3) 0; border-top: 1px solid var(--line); font-size: var(--t-md); line-height: 1.4; }
.rows > li:last-child { border-bottom: 1px solid var(--line); }
.rows__k { color: var(--ink); }
/* Trefferflaeche 44 px ohne die Zeile zu strecken (Audit f-abn-dar-03). */
.rows__k a { text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; margin: -10px 0; }
.rows__k a:hover { text-decoration: underline; }
.rows__v { color: var(--ink-3); font-size: var(--t-xs); font-weight: 500; text-align: right; white-space: nowrap; }
@media (max-width: 420px) { .rows > li { grid-template-columns: 1fr; row-gap: 2px; } .rows__v { text-align: left; } }

/* Ein Knopf, Pille, wie im Spiel (button-quiet). Die Leseseite hat hoechstens einen. */
.page__main p a.page__btn, .page__btn { text-decoration: none; display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 12px 24px; border-radius: var(--r-full); background: var(--ink); color: var(--paper); font-weight: 600; font-size: var(--t-md); letter-spacing: -0.01em; text-decoration: none; margin-top: var(--s2); }
.page__btn:hover { background: var(--ink-2); }
.page__btn:active { transform: scale(.98); }
.page__btn:focus-visible { outline: 2px solid var(--accent-line); outline-offset: 3px; }
.page__main p a.page__btn:hover { color: var(--paper); }

/* ---- Blog-Listing: eine Zeilenliste, kein Karten-Raster ---- */
.posts { list-style: none; margin: 0; padding: 0; }
.post { border-top: 1px solid var(--line); }
.post:last-child { border-bottom: 1px solid var(--line); }
.post__link { display: grid; gap: var(--s1); padding: var(--s5) 0; color: inherit; text-decoration: none; }
.post__link:hover .post__title, .post__link:focus-visible .post__title { color: var(--ink-2); }
.post__link:focus-visible { outline: 2px solid var(--accent-line); outline-offset: 4px; }
.post__meta { font-size: var(--t-xs); font-weight: 500; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.post__title { font-size: var(--t-lg); font-weight: 600; letter-spacing: -0.02em; line-height: 1.25; color: var(--ink); text-wrap: balance; }
.post__excerpt { font-size: var(--t-md); line-height: 1.45; color: var(--ink-2); max-width: 62ch; text-wrap: pretty; }
/* Leerer Zustand: sichtbar nur, solange die Liste keine Zeile traegt. Kein Skript, kein Platzhalter-Post. */
.posts:has(.post) + .posts__empty { display: none; }
.posts__empty { padding: var(--s5) 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.posts__empty p { margin: 0 0 var(--s4); }

/* ---- Fuss: dieselbe Form wie die Landing (Wortmarke, zehn Spiele, Zeile) ---- */
.page__foot { border-top: 1px solid var(--line); padding: var(--s6) 0 max(var(--s7), env(safe-area-inset-bottom)); font-size: var(--t-xs); color: var(--ink-3); }
.page__foot .wrap { width: 100%; max-width: var(--pwide); margin-inline: auto; padding-inline: var(--s5); box-sizing: border-box; }
.page__foot-logo { height: 20px; width: auto; display: block; color: var(--ink); margin: 0 0 var(--s4) calc(20px * -0.227); }
.page__foot-games { display: flex; flex-wrap: wrap; column-gap: var(--s4); row-gap: var(--s1); margin-bottom: var(--s4); padding-bottom: var(--s4); border-bottom: 1px solid var(--line); }
.page__foot-games a, .page__foot-row a { color: var(--ink-2); text-decoration: none; font-weight: 500; display: inline-flex; align-items: center; min-height: 44px; margin: -6px 0; }
.page__foot-games a:hover, .page__foot-row a:hover { color: var(--ink); }
.page__foot-row { display: flex; align-items: center; flex-wrap: wrap; column-gap: var(--s4); row-gap: var(--s1); }
.page__foot-row a[aria-current] { color: var(--ink); }
.page__foot-domain { font-weight: 600; color: var(--ink); margin-left: auto; }

@media (prefers-reduced-motion: reduce) { .page__btn:active { transform: none; } }