/* ==========================================================================
   Trainexus Tutorials & Beschaffungspaket - EINE Design-Quelle fuer Web UND PDF.
   Werte kommen aus tokens.css (verteilt aus trainexus_ci/) - hier wird KEIN
   Farbwert und KEINE Schriftgroesse neu erfunden.

   Umgestellt am 22.08.2026 auf das Hausdesign:
     · Geist statt Inter, Logoblau statt #2997ff
     · fuenf Schriftgroessen, drei Gewichte, KEINE Versalien
     · Deckblatt als Vollton-Farbfeld in der Gattungsfarbe, mit weissem Rand
   Begruendung jeder Regel: trainexus_ci/REGELN.md
   ========================================================================== */
@import "tokens.css";
@import "_fontface.css";

/* JetBrains Mono bleibt lokal deklariert: _fontface.css bringt nur die
   Geist-Schnitte mit. Ohne diese Regel faellt jeder Code-Satz auf Menlo
   zurueck und ein Systemfont landet im PDF. */
@font-face {
  font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400;
  font-display: swap; src: url('../fonts/jbmono-400.woff2') format('woff2');
}

:root {
  /* Farbe des Dokuments = Gattungsfarbe. Wird vom Template aus dem Feld
     `bereich` gesetzt (siehe .gattung-* unten). Default ist Angebot. */
  --doc-farbe:      var(--tx-gattung-angebot);
  --doc-farbe-tief: var(--tx-blau-tief);

  /* Altnamen als Bruecke, damit bestehende Regeln weiterlaufen. */
  --accent:      var(--tx-blau);
  --accent-dark: var(--tx-blau-tief);
  --ink:         var(--tx-tinte);
  --muted:       var(--tx-grau);
  --linie:       var(--tx-linie);
  --flaeche:     var(--tx-flaeche);
  --karte:       var(--tx-weiss);
  --warn-bg:     #FBF4E8;
  --warn-rand:   var(--tx-vorbehalt);
  --gruen:       var(--tx-zugesichert);
  --radius:      12px;
  --radius-sm:   var(--tx-radius);
  --schatten:    0 2px 10px rgba(16, 73, 109, .08);
  --font:        var(--tx-font);
  /* Das Hausdesign sieht Geist Mono vor; die Datei liegt noch in keinem
     Projekt. Bis dahin bleibt das hier vorhandene JetBrains Mono die erste
     Wahl - ohne diese Zeile faellt der Satz auf Menlo zurueck und ein
     Systemfont landet im PDF. */
  --mono:        'JetBrains Mono', var(--tx-font-mono);
}

/* Gattungsfarbe je Dokumentart. Das Template setzt die Klasse aus `bereich`. */
.gattung-vertrag     { --doc-farbe: var(--tx-gattung-vertrag); }
.gattung-datenschutz { --doc-farbe: var(--tx-gattung-datenschutz); }
.gattung-anleitung   { --doc-farbe: var(--tx-gattung-anleitung); }

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font);
  color: var(--ink);
  line-height: 1.6;
  background: var(--flaeche);
  -webkit-font-smoothing: antialiased;
}

.page { max-width: 880px; margin: 0 auto; padding: 2rem 1.5rem 3rem; }

.doc { background: var(--karte); border: 1px solid var(--linie); border-radius: var(--radius); overflow: hidden; box-shadow: var(--schatten); }
body.print .doc { border: none; border-radius: 0; box-shadow: none; }

/* ---- Kopf (standard) ---- */
/* ---- Kopf: Vollton-Farbfeld in der Gattungsfarbe -----------------------
   Kein Verlauf (wird im PDF zum Schattierungsobjekt) und kein Randabfall
   (kein Buerodrucker druckt bis an den Blattrand). Der weisse Rand kommt
   im Druck aus dem Satzspiegel, siehe print.css. */
.doc-header, .doc-header-kompakt {
  background: var(--doc-farbe); color: #fff;
  padding: 2rem 2.2rem 1.8rem;
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.doc-header .hero { display: none; }   /* Titelbild passt nicht zum Farbfeld */
.doc-title { padding: 0; }

/* Label ueber dem Titel. Ohne Flaeche, ohne Sperrung, ohne Versalien:
   es wird leise, weil es klein und halbfett ist. */
.kat {
  display: block; font-size: var(--tx-t5-web); font-weight: 600;
  color: #fff; margin-bottom: .5rem;
}
.doc-header h1, .doc-header-kompakt h1 {
  font-size: var(--tx-t1-web); line-height: 1.14; letter-spacing: -.025em;
  font-weight: 700; margin: 0 0 .5rem; max-width: 26ch;
}
.lead { font-size: var(--tx-t4-web); line-height: 1.5; color: #fff; margin: 0; max-width: 62ch; }
.stand {
  display: block; margin-top: 1.1rem; padding-top: .9rem;
  border-top: 1px solid #fff; font-size: var(--tx-t5-web); color: #fff;
}

/* ==========================================================================
   .prose – der gerenderte Markdown-Body.
   ========================================================================== */
.prose { padding: .6rem 2rem 2rem; }

.prose h2 {
  font-size: var(--tx-t2-web); line-height: 1.25; letter-spacing: -.02em; font-weight: 600;
  margin: 1.8rem 0 .9rem; padding-left: .9rem; border-left: 4px solid var(--doc-farbe);
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.prose > h2:first-child { margin-top: .6rem; }
.prose h3 { font-size: var(--tx-t3-web); line-height: 1.35; font-weight: 600; margin: 1.3rem 0 .4rem; }
.prose p { margin: 0 0 .9rem; }
.prose strong { color: var(--ink); }
.prose a { color: var(--tx-blau); }

.prose img {
  display: block; max-width: 340px; width: 100%; height: auto;
  border-radius: 8px; border: 1px solid var(--linie); background: var(--flaeche); margin: .3rem 0 .8rem;
}

/* Tabellen */
.prose table { width: 100%; border-collapse: collapse; margin: .5rem 0 1.2rem; font-size: var(--tx-t5-web); }
.prose th, .prose td { text-align: left; padding: .55rem .8rem; border-bottom: 1px solid var(--linie); vertical-align: top; }
/* Kopfzeile ohne Versalien - sie traegt durch Farbe und Gewicht. */
.prose thead th {
  color: var(--doc-farbe-tief); font-weight: 600; font-size: var(--tx-t5-web);
  border-bottom: 2px solid var(--doc-farbe);
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.prose code { font-family: var(--mono); font-size: .82em; background: var(--flaeche); padding: .05rem .3rem; border-radius: 5px; }
.prose pre, .prose pre code { font-family: var(--mono); }

/* Listen */
.prose ul { padding-left: 1.2rem; margin: .5rem 0 1rem; }
.prose ol { counter-reset: s; list-style: none; padding: 0; margin: .6rem 0 1rem; }
.prose ol li { counter-increment: s; position: relative; padding: .15rem 0 .8rem 2.4rem; }
.prose ol li::before {
  content: counter(s); position: absolute; left: 0; top: 0;
  width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--doc-farbe); color: #fff;
  display: grid; place-items: center; font-weight: 600; font-size: var(--tx-t5-web);
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}

/* Blockquote = Hinweis-Kasten */
.prose blockquote {
  margin: .9rem 0; padding: .7rem 1rem; border-left: 4px solid var(--warn-rand);
  background: var(--warn-bg); border-radius: 0 8px 8px 0; font-size: var(--tx-t5-web);
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.prose blockquote p { margin: 0; }

/* ==========================================================================
   KOMPAKT-Modifier: dieselbe Semantik, nur dichter — kleine Abstände,
   kleinere Schrift, dünne Tabellen. Kein grafischer Ballast.
   ========================================================================== */
.prose--kompakt { padding: .5rem 2rem 1.5rem; }
.prose--kompakt h2 { font-size: var(--tx-t3-web); margin: 1rem 0 .4rem; border-left-width: 3px; padding-left: .7rem; }
.prose--kompakt h3 { font-size: var(--tx-t4-web); margin: .8rem 0 .3rem; }
.prose--kompakt p { margin: 0 0 .55rem; }
.prose--kompakt table { margin: .3rem 0 .8rem; font-size: var(--tx-t5-web); }
.prose--kompakt th, .prose--kompakt td { padding: .35rem .6rem; }
.prose--kompakt ul { margin: .3rem 0 .6rem; }
.prose--kompakt ol { margin: .4rem 0 .6rem; }
.prose--kompakt ol li { padding: .1rem 0 .45rem 2rem; }
.prose--kompakt ol li::before { width: 1.4rem; height: 1.4rem; font-size: var(--tx-t5-web); }
.prose--kompakt blockquote { margin: .5rem 0; padding: .5rem .8rem; }