/* ===================================================================
 * Mantik-Schema Web-Style: Base
 *
 * Reset, Body-Defaults, Typo-Skalierung, Container, Fokus-Ring.
 * Setzt auf tokens.css auf - MUSS nach tokens.css geladen werden.
 * ================================================================== */

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  font-size: var(--font-size-base);
  line-height: var(--line-height-normal);
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* Vertikal scrollbar garantiert - Pflicht, sonst geht in WebKit-Shells nichts mehr unter Falte */
  min-height: 100vh;
  overflow-y: auto;
}

/* ===== Typo ===== */
h1 { font-size: var(--font-size-2xl); line-height: var(--line-height-tight); margin-bottom: var(--space-4); }
h2 { font-size: var(--font-size-xl);  line-height: var(--line-height-tight); margin-bottom: var(--space-3); }
h3 { font-size: var(--font-size-lg);  line-height: var(--line-height-tight); margin-bottom: var(--space-2); }
p  { margin-bottom: var(--space-3); }

a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}
a:hover { color: var(--text); }

code, kbd, samp, pre {
  font-family: var(--font-mono);
  font-size: 0.95em;
}

/* ===== Container ===== */
.container          { max-width: var(--container-default); margin: 0 auto; padding: 0 var(--space-5); }
.container-narrow   { max-width: var(--container-narrow);  margin: 0 auto; padding: 0 var(--space-5); }
.container-wide     { max-width: var(--container-wide);    margin: 0 auto; padding: 0 var(--space-5); }
.container-fluid    { max-width: 100%; padding: 0 var(--space-5); }

/* ===== Fokus-Ring (verbindlich fuer Accessibility) ===== */
:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* ===== Selektierbare Texte (Pflicht fuer Fehlertexte) ===== */
.selectable { user-select: text; cursor: text; }

/* ===== Visually Hidden (Accessibility) ===== */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ===== Browser-Default [hidden] respektieren - WICHTIG bei flex/grid ===== */
[hidden] { display: none !important; }

/* ===== Hilfs-Klassen Spacing ===== */
.mt-1 { margin-top: var(--space-1); }
.mt-2 { margin-top: var(--space-2); }
.mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }
.mt-5 { margin-top: var(--space-5); }
.mb-1 { margin-bottom: var(--space-1); }
.mb-2 { margin-bottom: var(--space-2); }
.mb-3 { margin-bottom: var(--space-3); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-5 { margin-bottom: var(--space-5); }

/* ===== Druck / PDF: saubere Paginierung (Bug #244) =====
 * Verhindert, dass die letzten Zeilen eines Abschnitts/einer Tabelle
 * am Seitenende abgeschnitten oder haesslich getrennt werden.
 * Gilt fuer alle Berichte, die das Schema laden. */
@media print {
  /* keine einzelne Zeile allein am Seitenende/-anfang */
  p, li, td, th { orphans: 3; widows: 3; }

  /* Bloecke, Tabellenzeilen und Signaturfelder nicht ueber Seiten trennen */
  tr, img, figure,
  .box, .card, .panel, .sig, .signatur, .summe { break-inside: avoid; page-break-inside: avoid; }

  /* Ueberschrift nie als letzte Zeile einer Seite */
  h1, h2, h3, h4 { break-after: avoid; page-break-after: avoid; }

  /* Tabellenkopf auf Folgeseiten wiederholen */
  thead { display: table-header-group; }
  tfoot { display: table-footer-group; }
}

@page { margin: 18mm 16mm; }