/* ============================================================================
 * page.css — tc-page / tc-container
 * ----------------------------------------------------------------------------
 * FUNDAMENT-KOMPONENTE (Schicht 0). Einheitlicher Seiten-Wrapper.
 * Loest die Breiten-Inkonsistenz (1100 / 1400 / 1600 gemischt) auf:
 *   Standard 1400px, --narrow ~900px, --wide 1600px (Token-gesteuert).
 *
 * .tc-page      = Voll-Seiten-Wrapper MIT seitlichem Border-Gutter (wie die
 *                 bisherigen .aos-battle-page / .al-page / .container): zentriert,
 *                 max-width, Innen-Padding, dezente Seitenraender, min-height.
 * .tc-container = schlanker Inhalts-Wrapper OHNE Border-Gutter/min-height
 *                 (zum Zentrieren von Inhaltsbloecken innerhalb einer Seite).
 *
 * THEME-NEUTRAL: nutzt nur Layout-Tokens, keine Akzentfarben.
 * ============================================================================ */

/* === DER SEITENGRUND (07.10.2026) =========================================
   Tim am Handy: „Hier ist der Hintergrund weiß" (Ruhmeshalle). Gemessen auf
   allen Seiten: Ruhmeshalle, Stadtbuch, Mordheim-Hub und Old-World-Hub
   setzten nirgends einen Hintergrund — zwischen den dunklen Karten schien das
   Weiß des Browsers durch. Alle anderen holen ihn aus mordheim-theme.css,
   dashboard.css oder ihrem Theme.
   `:where()` hat das Gewicht null: Jede Seite mit eigenem Grund behält ihn,
   egal in welcher Reihenfolge die Blätter laden. Auf `body`, nicht `html`,
   damit die Theme-Klasse am body ihren --tc-bg-base mitbringt. */
:where(body) {
  background-color: var(--tc-bg-base);
}

/* === VOLL-SEITEN-WRAPPER ================================================== */
/* Diese Datei laedt NACH css/layout.css und definiert .tc-page ein zweites
   Mal — mit der Kurzform `padding`, die die Safe-Area-Langformen von dort
   zurueckgesetzt hat. Auf aos.html, mordheim-hub.html, oldworld.html und
   social.html war die Absicherung aus #235 Etappe 1 dadurch seit dem
   11.08.2026 wirkungslos. Gefunden am 12.08.2026, im Browser gemessen.
   Wer hier das Padding anfasst: die drei Langformen mitnehmen. */
.tc-page {
  max-width: var(--tc-page-max, 1600px);
  margin: 0 auto;
  padding: var(--tc-space-4, 16px) var(--tc-space-5, 20px) 60px;
  padding-bottom: calc(60px + var(--tc-safe-bottom, 0px));
  padding-left: max(var(--tc-space-5, 20px), var(--tc-safe-left, 0px));
  padding-right: max(var(--tc-space-5, 20px), var(--tc-safe-right, 0px));
  min-height: 100vh;
  /* Ebene 2, der Kasten (#1007, Tim 09.10.2026: „grauer Kasten überall“).
     Vorher zwei Haarlinien links und rechts; Dashboard, Pathfinder und
     Blood Bowl hatten statt dessen einen Kasten (.container, .bb-page) —
     zwei Hüllen für dieselbe Aufgabe. Grund darunter: .tc-seitengrund
     (nav.css), Karten darauf: --tc-bg-surface-1. */
  background: var(--tc-bg-base);
  border-radius: var(--tc-radius-lg);
  box-shadow: var(--tc-shadow-lg);
}

.tc-page--narrow { max-width: var(--tc-page-narrow, 900px); }
.tc-page--wide   { max-width: var(--tc-page-wide, 1600px); }

/* Ohne Kasten (wenn die Seite selbst schon gerahmt ist: Handbuch,
   Neuigkeiten, Beitritt) */
.tc-page--flush {
  background: none;
  border-radius: 0;
  box-shadow: none;
}

/* === SCHLANKER INHALTS-WRAPPER ============================================ */
.tc-container {
  max-width: var(--tc-page-max, 1600px);
  margin: 0 auto;
  padding: 0 var(--tc-space-4, 16px);
}
.tc-container--narrow { max-width: var(--tc-page-narrow, 900px); }
.tc-container--wide   { max-width: var(--tc-page-wide, 1600px); }

/* === MOBILE =============================================================== */
@media (max-width: 900px) {
  /* Auch hier die Langformen — sonst faellt der Zuschlag genau auf dem
     Handy weg, wo er gebraucht wird. */
  .tc-page {
    padding: var(--tc-space-3, 12px) var(--tc-space-3, 12px) 40px;
    padding-bottom: calc(40px + var(--tc-safe-bottom, 0px));
    padding-left: max(var(--tc-space-3, 12px), var(--tc-safe-left, 0px));
    padding-right: max(var(--tc-space-3, 12px), var(--tc-safe-right, 0px));
    /* Am Handy füllt der Kasten den Bildschirm — ohne Rundung und Schatten. */
    border-radius: 0;
    box-shadow: none;
  }
  .tc-container { padding: 0 var(--tc-space-3, 12px); }
}