/* Katalogblatt-Stil – A4 hochkant, Register am rechten Rand, Kopf/Fuß mit Revisionsstand.
   Einbinden: <link rel="stylesheet" href="katalog.css"> (Schriften lädt diese Datei selbst).
   Registerfarbe über eine Klasse am <body>: farbe-brand | farbe-rettung | farbe-gebot | farbe-warnung | farbe-neutral */
@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Condensed:wght@500;600;700&family=Source+Sans+3:wght@400;600;700&family=IBM+Plex+Mono:wght@400;600&display=swap");

:root {
  --register: #b0281f;      /* Registerfarbe, wird je Thema gesetzt */
  --register-hell: #f6e4e2;
  --register-text: #ffffff; /* Schrift auf der Registerfarbe */
  --tinte: #1b1f24;
  --grau: #5a626c;
  --linie: #c9ced5;
  --flaeche: #f3f4f6;
  --gruen: #2f7d3b; --gruen-hell: #e3f1e5;
  --gelb: #a86b00;  --gelb-hell: #fbf0d9;
  --rot: #b0281f;   --rot-hell: #f6e4e2;
  --titel: "IBM Plex Sans Condensed", "Liberation Sans Narrow", "Arial Narrow", sans-serif;
  --text: "Source Sans 3", "Liberation Sans", Arial, sans-serif;
  --mono: "IBM Plex Mono", "DejaVu Sans Mono", monospace;
}
/* Sicherheitsfarben nach DIN EN ISO 7010 / ASR A1.3 */
.farbe-brand    { --register: #b0281f; --register-hell: #f6e4e2; --register-text: #fff; }
.farbe-rettung  { --register: #1d7a3e; --register-hell: #e2f1e6; --register-text: #fff; }
.farbe-gebot    { --register: #1e4f9c; --register-hell: #e3eaf6; --register-text: #fff; }
.farbe-gefahrstoff { --register: #d9601a; --register-hell: #fbe8dc; --register-text: #fff; }   /* Orange wie BA Gefahrstoffe */
.farbe-warnung  { --register: #f2c200; --register-hell: #fcf3cf; --register-text: #1b1f24; }      /* Gefahren, Ex-Schutz, Biostoffe */
.farbe-neutral  { --register: #3b4450; --register-hell: #e7e9ec; --register-text: #fff; }

/* Gelb-Schwarz: Warnstreifen (45°) an Register, Titelband und Schrittkarten */
.farbe-warnung { --streifen: repeating-linear-gradient(-45deg, #1b1f24 0 2.2mm, #f2c200 2.2mm 4.4mm); }
/* Streifen nur als schmale Kante – getragen, nicht laut */
.farbe-warnung .register { border-left: 1.8mm solid transparent; background: linear-gradient(var(--register), var(--register)) padding-box, var(--streifen) border-box; }
.farbe-warnung .deck-band { border-bottom: 3mm solid transparent; background: linear-gradient(var(--register), var(--register)) padding-box, var(--streifen) border-box; }
.farbe-warnung .notruf { background: var(--tinte); color: var(--register); }  /* ruhig: Schwarz mit gelber Schrift statt Streifenrahmen */
.farbe-warnung .rechtsgrundlage { border-left-color: #1b1f24; }
.farbe-warnung .schritt { border-left-color: #1b1f24; }
.farbe-warnung .register-liste b, .farbe-warnung .schritt .nr { color: #1b1f24; }

@page { size: A4 portrait; margin: 0; }
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { font-family: var(--text); font-size: 9.6pt; line-height: 1.38; color: var(--tinte); -webkit-print-color-adjust: exact; print-color-adjust: exact; }

/* ---------- Seite ---------- */
.blatt { width: 210mm; height: 297mm; position: relative; padding: 16mm 24mm 14mm 18mm; break-after: page; overflow: hidden; display: flex; flex-direction: column; }
.blatt:last-child { break-after: auto; }
.register { position: absolute; right: 0; top: var(--reg-top, 92mm); height: 62mm; width: 13mm; background: var(--register); color: var(--register-text); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3mm; border-radius: 3mm 0 0 3mm; }
.register b { font-family: var(--titel); font-size: 17pt; line-height: 1; }
.register span { writing-mode: vertical-rl; transform: rotate(180deg); font-family: var(--titel); font-size: 8.5pt; letter-spacing: .08em; text-transform: uppercase; }
.kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 6mm; border-bottom: 0.4mm solid var(--tinte); padding-bottom: 2mm; font-size: 8pt; color: var(--grau); }
.kopf strong { color: var(--tinte); }
.fuss { margin-top: auto; border-top: 0.3mm solid var(--linie); padding-top: 2mm; display: flex; justify-content: space-between; gap: 6mm; font-size: 7.4pt; color: var(--grau); }
.fuss .mitte { flex: 1; text-align: center; }
.fuss .beispiel { color: var(--rot); }

/* ---------- Überschriften ---------- */
h1, h2, h3 { font-family: var(--titel); margin: 0; letter-spacing: .005em; }
h1 { font-size: 22pt; line-height: 1.1; }
h2 { font-size: 10.5pt; text-transform: uppercase; letter-spacing: .06em; color: var(--register); margin: 5mm 0 1.5mm; }
.farbe-warnung h2 { color: #7a5a00; }
h3 { font-size: 11.5pt; margin: 3mm 0 1mm; }
.eyebrow { font-family: var(--mono); font-size: 8pt; color: var(--grau); letter-spacing: .04em; }
.modulkopf { display: grid; grid-template-columns: 17mm 1fr; gap: 5mm; align-items: center; margin-top: 6mm; }
.modulkopf img { width: 17mm; height: 17mm; }

/* ---------- Bausteine ---------- */
.rechtsgrundlage { margin-top: 4mm; background: var(--flaeche); border-left: 1.2mm solid var(--register); padding: 2.5mm 4mm; font-size: 8.6pt; }
.rechtsgrundlage b { font-family: var(--titel); text-transform: uppercase; letter-spacing: .05em; font-size: 8pt; color: var(--grau); margin-right: 2mm; }
.kennzahlen { display: grid; grid-template-columns: repeat(4, 1fr); gap: 3mm; margin-top: 4mm; }
.kennzahlen.drei { grid-template-columns: repeat(3, 1fr); }
.kennzahl { border: 0.3mm solid var(--linie); border-radius: 2mm; padding: 2.2mm 3mm; }
.kennzahl small { display: block; font-size: 7.2pt; color: var(--grau); text-transform: uppercase; letter-spacing: .05em; }
.kennzahl b { font-family: var(--titel); font-size: 15pt; }
.kennzahl b.warn { color: var(--rot); }
.notiz { font-size: 7.9pt; color: var(--grau); margin: 1.8mm 0 0; }
.kasten { border: 0.3mm solid var(--linie); border-radius: 2mm; padding: 3mm 4mm; font-size: 8.4pt; color: var(--grau); }

table { width: 100%; border-collapse: collapse; font-size: 8.8pt; }
th { font-family: var(--titel); font-weight: 600; text-align: left; font-size: 7.8pt; text-transform: uppercase; letter-spacing: .04em; color: var(--grau); border-bottom: 0.4mm solid var(--tinte); padding: 1.5mm 2mm; }
td { border-bottom: 0.25mm solid var(--linie); padding: 1.7mm 2mm; vertical-align: top; }
td.z, th.z { text-align: right; font-variant-numeric: tabular-nums; font-family: var(--mono); font-size: 8.2pt; white-space: nowrap; }
tr.summe td { border-bottom: 0.4mm solid var(--tinte); font-weight: 700; }
.leer td { height: 9mm; }
.leer td.vor { color: var(--grau); font-size: 8.4pt; }

.ampel { display: inline-block; padding: 0.4mm 2.2mm; border-radius: 2mm; font-family: var(--titel); font-weight: 600; font-size: 7.6pt; text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; }
.ampel.ok { background: var(--gruen-hell); color: var(--gruen); }
.ampel.mangel { background: var(--rot-hell); color: var(--rot); }
.ampel.hinweis { background: var(--gelb-hell); color: var(--gelb); }

.unterschrift { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8mm; margin-top: 9mm; font-size: 7.6pt; color: var(--grau); }
.unterschrift.zwei { grid-template-columns: 1fr 1fr; }
.unterschrift div { border-top: 0.3mm solid var(--tinte); padding-top: 1.2mm; }

/* ---------- Deckblatt ---------- */
.deck-band { margin: -16mm -24mm 0 -18mm; background: var(--register); color: var(--register-text); padding: 34mm 24mm 12mm 18mm; }
.deck-band .eyebrow { color: inherit; opacity: .85; letter-spacing: .1em; font-size: 8.6pt; }
.deck-band h1 { font-size: 40pt; margin-top: 3mm; }
.deck-band p { font-size: 12.5pt; margin: 3mm 0 0; }
.steckbrief { display: grid; grid-template-columns: 36mm 1fr; gap: 1.6mm 6mm; margin: 10mm 0 0; font-size: 10pt; }
.steckbrief dt { color: var(--grau); }
.steckbrief dd { margin: 0; font-weight: 600; }
.register-liste { margin-top: 9mm; display: grid; grid-template-columns: 1fr 1fr; gap: 0 8mm; }
.register-liste div { display: grid; grid-template-columns: 7mm 1fr auto; gap: 2mm; align-items: baseline; border-bottom: 0.25mm solid var(--linie); padding: 1.8mm 0; font-size: 9.3pt; }
.register-liste b { font-family: var(--titel); color: var(--register); }
.zeichenreihe { display: flex; gap: 4mm; margin-top: 8mm; }
.zeichenreihe img { width: 13mm; height: 13mm; }

/* ---------- Belegschafts-Handout: größer, weniger, Imperativ ---------- */
.handout { font-size: 11pt; line-height: 1.42; }
.handout h1 { font-size: 28pt; }
.schritte { display: flex; flex-direction: column; gap: 3.5mm; margin-top: 5mm; counter-reset: schritt; }
.schritt { display: grid; grid-template-columns: 22mm 1fr; gap: 5mm; align-items: center; border: 0.3mm solid var(--linie); border-left: 2mm solid var(--register); border-radius: 2mm; padding: 3.5mm 4mm; }
.schritt img { width: 20mm; height: 20mm; }
.schritt .nr { font-family: var(--titel); font-size: 28pt; color: var(--register); text-align: center; }
.schritt h3 { margin: 0 0 1mm; font-size: 14pt; }
.schritt p { margin: 0; }
.merke { margin-top: 5mm; background: var(--register-hell); border-radius: 2mm; padding: 4mm 5mm; font-size: 11pt; }
.merke b { font-family: var(--titel); text-transform: uppercase; letter-spacing: .05em; color: var(--register); margin-right: 2mm; }
.farbe-warnung .merke b { color: #7a5a00; }
.notruf { display: flex; align-items: center; justify-content: space-between; gap: 6mm; margin-top: 5mm; background: var(--register); color: var(--register-text); border-radius: 2mm; padding: 4mm 6mm; }
.notruf span { font-family: var(--titel); font-size: 13pt; text-transform: uppercase; letter-spacing: .05em; }
.notruf b { font-family: var(--titel); font-size: 34pt; line-height: 1; }
.eintrag { border-bottom: 0.3mm solid var(--tinte); min-width: 45mm; display: inline-block; height: 7mm; }

/* Farbtafel (nur Vorlage) */
.farbtafel { display: grid; grid-template-columns: 1fr 1fr; gap: 6mm 10mm; margin-top: 8mm; }
.farbtafel > div { position: relative; min-height: 62mm; padding-right: 18mm; border-bottom: 0.25mm solid var(--linie); }
.farbtafel .register { right: 0; }
.farbtafel h3 { margin-top: 0; }
.farbtafel p { color: var(--grau); margin: 1mm 0 0; }