/* ============================================================================
 * 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.
 * ============================================================================ */

/* === 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, 1400px);
  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;
  border-left: 1px solid var(--tc-border-subtle, rgba(255,255,255,0.05));
  border-right: 1px solid var(--tc-border-subtle, rgba(255,255,255,0.05));
}

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

/* Ohne seitliche Border-Gutter (z.B. wenn die Seite selbst schon gerahmt ist) */
.tc-page--flush {
  border-left: none;
  border-right: none;
}

/* === SCHLANKER INHALTS-WRAPPER ============================================ */
.tc-container {
  max-width: var(--tc-page-max, 1400px);
  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));
    border-left: none;
    border-right: none;
  }
  .tc-container { padding: 0 var(--tc-space-3, 12px); }
}