/* Kalibrat – der Auftritt seit 13.09.2026.

   Liegt ueber start.css und seite.css: dieselben Bausteine (Kopf, Knoepfe,
   Karten, Fuss), zeitgemaess gezeichnet, und die Abschnitte der Startseite
   und der Loesungsseiten (Klassen mit "l-").

   Seit 25.09.2026 mit der Hausschrift irot Sans. Sie liegt bei uns
   (web-start/fonts/) und wird von nirgendwo nachgeladen: die
   Inhaltssicherheitsrichtlinie erlaubt nur eigene Dateien, und ein
   Schriftdienst haette jeden Seitenaufruf an einen Dritten gemeldet. */

/* Zwei @import statt eines <link> in vierzig Kopfzeilen. Jede Seite hier
   laedt marke.css, also gibt es genau eine Stelle - und keine neue Seite
   kann die Schrift vergessen. Das kostet einen Rundweg mehr, und das ist
   vertretbar: mit font-display:swap steht der Text sofort da und wechselt
   danach die Schrift. Die beiden Dateien kommen unveraendert aus dem
   Markenpaket, damit ein Update ein Kopieren bleibt. */
@import url("/fonts/irot-fonts.css");
@import url("/fonts/irot-fallback.css");

:root{
  /* Wort fuer Wort aus tokens/irot-tokens.css. Nur die Schrift-Token, nicht
     die Farben: die Farben des Markenpakets sind rot auf dunkel, diese Seite
     ist tuerkis auf weiss - das ist ein eigener Block mit eigener Ansicht,
     kein Nebeneffekt der Schriftumstellung. */
  --font-sans:"irot Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  /* Was der Kunde selbst tippt - Namen, Anschriften, freier Text. irot Sans
     kennt 222 Zeichen, also Latin-1 und sonst nichts: »Wiśniewska« und
     »İnan« stehen nicht darin. Ohne dieses Token setzt der Browser nur die
     fehlenden Buchstaben aus einer anderen Schrift und mitten im Namen
     wechselt die Zeichnung. Deshalb steht hier die Ersatzschrift vorn: ein
     Name wird ganz in einer Schrift gesetzt, oder er ist falsch gesetzt. */
  --font-data:"irot Fallback","irot Fallback Arabic","irot Sans","PingFang SC",
              "Microsoft YaHei",system-ui,sans-serif;
  /* Kein eigenes Zahlen-Token auf dieser Seite. Als irot Sans noch keine
     Tabellenziffern hatte, war das eine Entscheidung: die einzige
     Zahlenspalte hier enthaelt »1 Jahr« und »10 Jahre«, also Text, und eine
     Ausnahme haette mitten in einer Tabellenzeile die Schrift gewechselt -
     das sieht man sofort, den halben Millimeter Versatz nicht. Seit
     Markenpaket v1.16.1 hat die Schrift echte Tabellenziffern, damit erledigt
     sich die Frage ohnehin. */

  --nacht:#061d25; --nacht-2:#0a2a35; --nacht-linie:#1c4250;
  --leuchte:#22b3c9; --leuchte-2:#5fd3e2;
  --verlauf:linear-gradient(135deg,#0e5a6e 0%,#138099 55%,#1ba3b8 100%);
  --schatten-1:0 1px 2px #0a1a2014, 0 4px 14px #0a1a2012;
  --schatten-2:0 12px 40px #06222b2e;
  --rund:16px;
}

/* 500 ausdruecklich: irot Sans hat genau zwei Schnitte, 500 und 700. Ohne die
   Angabe stuende hier 400, der Browser nimmt den naechsten - also wieder 500,
   aber dann steht es nirgends und niemand weiss, dass es Absicht war. */
body{font:500 16.5px/1.65 var(--font-sans); text-rendering:optimizeLegibility}
/* 800 und 750 gibt es in irot Sans nicht; der Browser setzt beides als 700.
   Die Zahlen bleiben stehen, damit der Auftritt ohne die Schrift - solange
   sie laedt, oder wenn sie fehlt - unveraendert aussieht. */
h1,h2,h3{font-weight:800; letter-spacing:-.022em}
h2{font-size:clamp(1.7rem,3.4vw,2.45rem)}

/* Eingabefelder: hier tippt jemand seinen eigenen Namen, den Firmennamen, die
   Anschrift. Deshalb die Datenschrift und nicht die Hausschrift - sonst
   wechselt mitten im Wort die Zeichnung, und zwar genau bei den Leuten, deren
   Name nicht aus Latin-1 besteht. Welche Schrift ein Name bekommt, darf nicht
   vom Namen abhaengen.
   Das gilt auch fuer die Vorschau der erzeugten Dokumente auf dem Bildschirm;
   gedruckt werden sie in Arial, siehe die Druckabschnitte weiter unten. */
input,textarea,select,
.fr-vorlage,.gg-dokument,.ba-dokument{font-family:var(--font-data)}
.huelle{max-width:1160px}

/* --- Kopf ------------------------------------------------------------- */
.kopf{background:#ffffffe6; backdrop-filter:saturate(1.6) blur(12px);
  border-bottom:1px solid #e3e9ee}
.kopf-inhalt{height:66px}
.kopf nav{align-items:center; gap:1.5rem}
.kopf nav a{font-weight:500; color:#33444f}
.kopf nav a.jetzt{color:#fff; background:var(--verlauf); padding:.5rem 1.05rem;
  border-radius:999px; font-weight:650; box-shadow:0 4px 14px #0e5a6e40}
.kopf nav a.jetzt:hover{color:#fff; filter:brightness(1.08)}

/* --- Knoepfe ---------------------------------------------------------- */
.knopf{border-radius:999px; padding:.85rem 1.6rem; font-weight:650;
  transition:transform .15s ease, box-shadow .15s ease, filter .15s ease}
.knopf-haupt{background:var(--verlauf); box-shadow:0 8px 24px #0e5a6e45}
.knopf-haupt:hover{background:var(--verlauf); filter:brightness(1.08); transform:translateY(-1px)}
.knopf-neben:hover{transform:translateY(-1px)}
.knopf-gross{padding:1rem 1.9rem; font-size:1.06rem}
.knopf-hell{background:#ffffff14; color:#fff; border:1px solid #ffffff40}
.knopf-hell:hover{background:#ffffff24}

/* --- Karten und Abschnitte ------------------------------------------- */
.karte{border-radius:var(--rund); border-color:#e1e8ed; box-shadow:var(--schatten-1);
  transition:transform .2s ease, box-shadow .2s ease}
.karte:hover{transform:translateY(-2px); box-shadow:var(--schatten-2)}
.l-abschnitt{padding:5.5rem 0}
.l-abschnitt.l-grau{background:#f5f8fa}
.l-kopfzeile{max-width:760px; margin:0 auto 2.6rem; text-align:center}
.l-kopfzeile p{font-size:1.1rem; color:var(--tinte-2); margin:0}
.l-marke{display:inline-block; font-size:.78rem; font-weight:750; letter-spacing:.12em;
  text-transform:uppercase; color:var(--akzent-leuchte); margin-bottom:.8rem}

/* --- Held ------------------------------------------------------------- */
.l-held{position:relative; overflow:hidden; color:#e7f3f6; padding:5.5rem 0 5rem;
  background:
    radial-gradient(900px 480px at 85% 15%, #1ba3b833, transparent 60%),
    radial-gradient(700px 420px at 5% 95%, #0e5a6e66, transparent 60%),
    var(--nacht)}
.l-held-gitter{display:grid; grid-template-columns:1.02fr 1fr; gap:3.4rem; align-items:center}
.l-held h1{color:#fff; font-size:clamp(2.5rem,5.6vw,4.1rem); line-height:1.04;
  letter-spacing:-.035em; margin-bottom:1.2rem}
.l-held h1 .l-h1-schlagwort{display:block; font-size:clamp(.82rem,1.4vw,.95rem);
  letter-spacing:.14em; text-transform:uppercase; font-weight:750; color:var(--leuchte-2);
  margin-bottom:1rem}
.l-held h1 em{font-style:normal; background:linear-gradient(90deg,#5fd3e2,#9eeaf2);
  -webkit-background-clip:text; background-clip:text; color:transparent}
.l-held .fuehrung{color:#b9d3db; font-size:1.16rem; max-width:34rem}
.l-held .fuehrung b{color:#fff}
.l-held .held-knoepfe{margin:2rem 0 1.4rem}
.l-haken{list-style:none; padding:0; margin:0; display:flex; flex-wrap:wrap; gap:.5rem 1.4rem;
  font-size:.93rem; color:#a9c5ce}
.l-haken li{display:flex; align-items:center; gap:.45rem}
.l-haken li::before{content:""; width:1.05rem; height:1.05rem; border-radius:50%; flex:none;
  background:#22b3c926 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.3l2.5 2.4L12 5.4' fill='none' stroke='%235fd3e2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/80% no-repeat}

.l-buehne{position:relative}
.l-buehne .schirm{border-radius:14px; box-shadow:0 30px 80px #0009, 0 0 0 1px #ffffff1a;
  transform:perspective(1600px) rotateY(-7deg) rotateX(2deg); transform-origin:left center}
.l-schwebe{position:absolute; background:#fff; color:var(--tinte); border-radius:14px;
  padding:.7rem .9rem; box-shadow:0 18px 40px #0007; font-size:.84rem; line-height:1.35;
  display:flex; gap:.65rem; align-items:center; max-width:17rem}
.l-schwebe b{display:block; font-size:.9rem}
.l-schwebe span{color:var(--tinte-3)}
.l-schwebe i{flex:none; width:2.1rem; height:2.1rem; border-radius:10px; display:grid;
  place-items:center; font-style:normal; font-weight:800; color:#fff}
.l-schwebe.l-s1{left:-1.6rem; bottom:2.2rem}
.l-schwebe.l-s1 i{background:#d9822b}
.l-schwebe.l-s2{right:-1rem; top:-1.2rem}
.l-schwebe.l-s2 i{background:#1a7f43}
@media (prefers-reduced-motion:no-preference){
  .l-schwebe{animation:l-schweben 6s ease-in-out infinite}
  .l-schwebe.l-s2{animation-delay:-3s}
}
@keyframes l-schweben{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}

/* --- Normleiste ------------------------------------------------------- */
.l-normen{background:var(--nacht-2); border-top:1px solid var(--nacht-linie);
  color:#8fb0ba; padding:1.3rem 0; font-size:.9rem}
.l-normen .huelle{display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  gap:.6rem 2.2rem}
.l-normen b{color:#d8eaef; font-weight:650; letter-spacing:.01em}

/* --- Vorher / nachher ------------------------------------------------- */
.l-vergleich{display:grid; grid-template-columns:1fr 1fr; gap:1.4rem}
.l-vergleich > div{border-radius:var(--rund); padding:1.8rem 1.9rem}
.l-vorher{background:#fbf3ef; border:1px solid #f0dcd2}
.l-nachher{background:#ecf7f9; border:1px solid #c6e6ec}
.l-vergleich h3{font-size:1.15rem; margin-bottom:1rem}
.l-vergleich ul{list-style:none; padding:0; margin:0; display:grid; gap:.75rem}
.l-vergleich li{position:relative; padding-left:1.8rem; color:#3b4a55}
.l-vergleich li::before{position:absolute; left:0; top:.05rem; font-weight:800}
.l-vorher li::before{content:"✕"; color:#b3261e}
.l-nachher li::before{content:"✓"; color:#1a7f43}

/* --- Schritte --------------------------------------------------------- */
.l-schritte{display:grid; grid-template-columns:repeat(3,1fr); gap:1.6rem; counter-reset:s}
.l-schritt{background:#fff; border:1px solid #e1e8ed; border-radius:var(--rund);
  overflow:hidden; box-shadow:var(--schatten-1); display:flex; flex-direction:column}
.l-schritt-text{padding:1.5rem 1.6rem 1.2rem}
.l-schritt-text::before{counter-increment:s; content:counter(s); display:grid;
  place-items:center; width:2.2rem; height:2.2rem; border-radius:50%; background:var(--verlauf);
  color:#fff; font-weight:800; margin-bottom:.9rem}
.l-schritt p{color:var(--tinte-2); margin:0; font-size:.96rem}
/* Das Bildschirmfoto ist ein ganzer Schirm; in der Karte zaehlt die linke
   obere Ecke, vergroessert - sonst sieht man nur Striche. */
.l-schritt picture{display:block; overflow:hidden; aspect-ratio:4/3; margin-top:auto;
  border-top:1px solid #e1e8ed; background:#f5f8fa}
.l-schritt img{display:block; width:175%; max-width:none; height:auto}

/* --- Funktionen ------------------------------------------------------- */
.l-funktionen{display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem}
.l-funktion{background:#fff; border:1px solid #e1e8ed; border-radius:var(--rund);
  padding:1.5rem 1.5rem 1.3rem; box-shadow:var(--schatten-1)}
.l-funktion svg{width:2.6rem; height:2.6rem; padding:.55rem; border-radius:12px;
  background:var(--akzent-hell); color:var(--akzent); margin-bottom:.9rem}
.l-funktion h3{font-size:1.08rem; margin-bottom:.4rem}
.l-funktion p{color:var(--tinte-2); margin:0; font-size:.95rem}
.l-funktion .modul-marke{margin:.6rem 0 0}

/* --- Geraetearten ------------------------------------------------------ */
.l-chips{display:flex; flex-wrap:wrap; gap:.55rem; justify-content:center;
  max-width:960px; margin:0 auto}
.l-chips a,.l-chips span{display:inline-block; padding:.45rem .95rem; border-radius:999px;
  background:#fff; border:1px solid #d9e3e9; color:#33444f; font-size:.92rem;
  text-decoration:none}
.l-chips a:hover{border-color:var(--akzent); color:var(--akzent)}

/* --- Dunkler Streifen (Film, Abschluss) -------------------------------- */
.l-dunkel{background:var(--nacht); color:#cfe3e9}
.l-dunkel h2,.l-dunkel h3{color:#fff}
.l-dunkel .l-kopfzeile p{color:#9fbcc5}
.l-dunkel .film video{border-radius:14px; box-shadow:0 30px 80px #0008}
.l-dunkel .film-unter{color:#7fa0aa}

/* --- Fragen ------------------------------------------------------------ */
.l-fragen{max-width:820px; margin:0 auto; display:grid; gap:.7rem}
.l-fragen details{background:#fff; border:1px solid #e1e8ed; border-radius:14px;
  padding:0 1.3rem; box-shadow:var(--schatten-1)}
.l-fragen summary{cursor:pointer; list-style:none; padding:1.1rem 2rem 1.1rem 0;
  font-weight:650; position:relative}
.l-fragen summary::-webkit-details-marker{display:none}
.l-fragen summary::after{content:"+"; position:absolute; right:0; top:.85rem;
  font-size:1.4rem; color:var(--akzent-leuchte); transition:transform .2s}
.l-fragen details[open] summary::after{transform:rotate(45deg)}
.l-fragen details p{color:var(--tinte-2); margin:0 0 1.1rem}

/* --- Abschluss --------------------------------------------------------- */
.l-schluss{text-align:center; padding:5rem 0;
  background:radial-gradient(700px 360px at 50% 0%, #1ba3b840, transparent 70%), var(--nacht)}
.l-schluss h2{font-size:clamp(2rem,4.4vw,3rem); color:#fff}
.l-schluss p{color:#a9c5ce; max-width:40rem; margin:0 auto 1.8rem; font-size:1.1rem}

/* --- Brotkrumen und Loesungsseiten ------------------------------------ */
.l-krumen{font-size:.85rem; color:#8fb0ba; margin-bottom:1.4rem}
.l-krumen a{color:#b9d3db; text-decoration:none}
.l-krumen a:hover{text-decoration:underline}
.l-held-schmal{padding:4.5rem 0 4rem}
.l-held-schmal .l-held-gitter{grid-template-columns:1.15fr .85fr}
.l-inhalt{max-width:820px; margin:0 auto}
.l-inhalt h2{margin-top:2.6rem}
.l-inhalt p,.l-inhalt li{color:#34434e}
.l-inhalt ul{padding-left:1.2rem}
.l-inhalt li{margin:.35rem 0}
.l-tabelle{width:100%; border-collapse:separate; border-spacing:0; font-size:.94rem;
  background:#fff; border:1px solid #e1e8ed; border-radius:14px; overflow:hidden;
  box-shadow:var(--schatten-1)}
.l-tabelle th{background:#f2f6f8; text-align:left; font-weight:700; padding:.75rem .9rem;
  font-size:.86rem; color:#33444f; border-bottom:1px solid #e1e8ed}
.l-tabelle td{padding:.7rem .9rem; border-bottom:1px solid #eef2f5; vertical-align:top}
.l-tabelle tr:last-child td{border-bottom:0}
.l-tabelle td.l-frist{font-weight:700; color:var(--akzent); white-space:nowrap}
.l-tabelle td.l-norm{color:#56666f; font-size:.86rem}
.l-tabellenhuelle{overflow-x:auto; margin:1.2rem 0 2rem}
.l-hinweis{background:#fff8ec; border:1px solid #f1dfbd; border-radius:12px;
  padding:1rem 1.2rem; color:#6b4a12; font-size:.93rem}
.l-sprung{display:flex; flex-wrap:wrap; gap:.5rem; margin:1rem 0 0}
.l-sprung a{font-size:.88rem; padding:.35rem .8rem; border-radius:999px;
  border:1px solid #d9e3e9; text-decoration:none; background:#fff}

/* Pruefpunkte als Haken-Liste (Loesungsseiten) */
.l-checkliste{list-style:none; padding:0; margin:.4rem 0 1.4rem; display:grid; gap:.45rem}
.l-checkliste li{position:relative; padding:.55rem .8rem .55rem 2.3rem; background:#fff;
  border:1px solid #e1e8ed; border-radius:10px}
.l-checkliste li::before{content:"✓"; position:absolute; left:.85rem; top:.5rem;
  color:var(--gruen); font-weight:800}

/* --- Fuss ------------------------------------------------------------- */
.fuss{background:#041419; color:#9fb4bc; padding:3.5rem 0 2.5rem}
.fuss-inhalt{grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:2rem}
.fuss b{color:#e8f2f5}
.fuss a{color:#bcd6de}

/* --- Schmale Schirme -------------------------------------------------- */
@media (max-width:960px){
  .l-held-gitter,.l-held-schmal .l-held-gitter{grid-template-columns:1fr; gap:2.6rem}
  .l-buehne .schirm{transform:none}
  .l-schritte,.l-funktionen{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
  /* Die feste Hoehe oben gilt nur, solange der Kopf in eine Zeile passt -
     bricht er um, muss sein Hintergrund mitwachsen, sonst liegen die
     Verweise ueber dem Held. */
  .kopf-inhalt{height:auto; min-height:56px}
  .kopf nav{gap:.45rem .95rem}
  .kopf nav a.jetzt{padding:.35rem .8rem}
}
@media (max-width:640px){
  /* Die Prueffristen als Karten: vier Spalten passen auf kein Telefon. */
  .l-stapel thead{display:none}
  .l-stapel, .l-stapel tbody, .l-stapel tr, .l-stapel td{display:block; width:100%}
  .l-stapel tr{padding:.8rem .95rem; border-bottom:1px solid #eef2f5}
  .l-stapel td{border:0; padding:.12rem 0}
  .l-stapel td:first-child{font-weight:700}
  .l-stapel td[data-label]::before{content:attr(data-label) ": "; color:var(--tinte-3);
    font-weight:500; font-size:.82rem}
  .l-abschnitt{padding:3.8rem 0}
  .l-held{padding:3.4rem 0 3.6rem}
  .l-vergleich,.l-schritte,.l-funktionen{grid-template-columns:1fr}
  .l-schwebe{display:none}
  .l-normen .huelle{gap:.5rem 1.2rem; font-size:.84rem}
}

/* Der Prüffristen-Rechner (/pruefristen-rechner, rechner.js) */
.fr-form{display:grid; grid-template-columns:minmax(0,2fr) minmax(0,1fr); gap:.8rem 1rem;
  padding:1.1rem 1.2rem; border:1px solid var(--l-linie, #d8e1e6); border-radius:16px;
  background:#fff; margin:1rem 0}
.fr-form label{display:flex; flex-direction:column; gap:.35rem; font-weight:600; font-size:.92rem}
.fr-form select, .fr-form input[type=date]{font:inherit; font-weight:400; padding:.6rem .7rem;
  border:1px solid #c8d3d9; border-radius:10px; background:#fff}
.fr-form .fr-quote{grid-column:1 / -1; flex-direction:row; align-items:center; gap:.5rem;
  font-weight:500}
.fr-form .fr-quote[hidden]{display:none}
.fr-ergebnis{padding:1.1rem 1.2rem; border-radius:16px; background:#eaf4f6; border:1px solid #b9d3db;
  margin:0 0 1.2rem}
.fr-ergebnis p{margin:.3rem 0}
.fr-termin{font-size:1.2rem}
.fr-termin b{font-size:1.45rem}
.fr-termin.fr-bald b{color:#a8741a}
.fr-termin.fr-ueber b{color:#b23b32}
.fr-klein{font-size:.9rem; color:#46545e}
.fr-weiter{display:flex; flex-wrap:wrap; gap:.6rem 1rem; align-items:center; margin-top:.8rem !important}
.fr-weiter span{font-size:.88rem; color:#46545e}
.fr-vorlage{display:none}
@media(max-width:700px){
  .fr-form{grid-template-columns:1fr}
}
/* Gedruckt wird in Arial, und das bleibt so - auch mit Hausschrift im Haus.
   Diese Blaetter gehoeren dem Kunden, nicht uns: eine Betriebsanweisung, ein
   Nachweis, eine Liste mit den Namen seiner Leute. Fuer solche Dokumente
   verlangt das Markenhandbuch (§ 5.4 b) ausdruecklich *eine* Schrift mit
   breiter Abdeckung fuer das ganze Blatt statt unserer - damit kein Name
   auseinanderfaellt und das Blatt nicht anders aussieht, weil jemand anders
   heisst. Arial ist diese Schrift, und sie steht auf jedem Rechner. */
@media print{
  body.fr-drucken > *{display:none}
  body.fr-drucken > .fr-vorlage{display:block}
  body.fr-drucken > .fr-vorlage{width:100%;
    font:10.5pt/1.35 Arial, sans-serif; color:#000}
  .fr-vorlage .fr-v-titel{font-size:14pt; font-weight:700; margin:0 0 2mm}
  .fr-vorlage h2{font-size:11pt; margin:5mm 0 1.5mm}
  .fr-v-klein{font-size:8.5pt; color:#333; margin:0 0 3mm}
  .fr-v-tabelle{width:100%; border-collapse:collapse}
  .fr-v-tabelle th, .fr-v-tabelle td{border:1px solid #555; padding:2mm 2.5mm; text-align:left;
    vertical-align:top; height:7mm}
  .fr-v-tabelle th{width:28%; background:#f2f2f2; font-weight:bold}
  .fr-v-hoch{height:18mm !important}
  .fr-v-unterschrift{display:flex; gap:10mm; margin-top:12mm}
  .fr-v-unterschrift span{flex:1; border-top:1px solid #000; padding-top:1.5mm; font-size:9pt}
}

/* Der Generator Gefaehrdungsbeurteilung (/gefaehrdungsbeurteilung-arbeitsmittel, gb-generator.js) */
.gg-form{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.8rem 1rem;
  padding:1.1rem 1.2rem; border:1px solid var(--l-linie, #d8e1e6); border-radius:16px;
  background:#fff; margin:1rem 0}
.gg-form > *{min-width:0}
.gg-form h3{margin:.8rem 0 0; font-size:1.05rem}
.gg-form label{display:flex; flex-direction:column; gap:.35rem; font-weight:600; font-size:.92rem}
.gg-form select, .gg-form input:not([type=radio]):not([type=checkbox]), .gg-form textarea{font:inherit;
  font-weight:400; padding:.55rem .7rem; border:1px solid #c8d3d9; border-radius:10px; background:#fff;
  width:100%; box-sizing:border-box}
.gg-form textarea{resize:vertical}
.gg-voll{grid-column:1 / -1}
.gg-klein{font-size:.9rem; color:#46545e; margin:0}
.gg-form .gg-wahl{flex-direction:row; align-items:flex-start; gap:.5rem; font-weight:450}
.gg-form .gg-unten{align-self:end}
.gg-feld{border:1px solid #d8e1e6; border-radius:12px; padding:.6rem .9rem .8rem; margin:0;
  display:flex; flex-direction:column; gap:.4rem}
.gg-feld legend{font-weight:600; font-size:.92rem; padding:0 .3rem}
.gg-zeile{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.5rem .8rem;
  padding:.7rem .8rem; margin:0 0 .6rem; border:1px solid #d8e1e6; border-radius:12px; background:#f6f9fa}
.gg-zeile > *{min-width:0}
.gg-zeile .gg-breit{grid-column:span 2}
.gg-weg{grid-column:1 / -1; justify-self:end; background:none; border:0; color:#46545e;
  font:inherit; font-size:.85rem; cursor:pointer; text-decoration:underline}
.gg-chips{display:flex; gap:.4rem; flex-wrap:wrap}
.gg-chips button{font:inherit; font-size:.82rem; font-weight:500; padding:.2rem .7rem;
  border:1px solid #c8d3d9; border-radius:999px; background:#fff; cursor:pointer}
.gg-form .fr-ergebnis{margin:0}
.gg-form .fr-ergebnis ul{margin:.3rem 0 0; padding-left:1.1rem; font-size:.9rem; color:#46545e}
.gg-dokument{display:none}
@media(max-width:700px){
  .gg-form, .gg-zeile{grid-template-columns:1fr}
  .gg-zeile .gg-breit{grid-column:auto}
}
@media print{
  body.gg-drucken > *{display:none}
  body.gg-drucken > .gg-dokument{display:block}
  body.gg-drucken > .gg-dokument{width:100%;
    font:10pt/1.35 Arial, sans-serif; color:#000}
  .gg-dokument h1{font-size:14pt; margin:0 0 2mm}
  .gg-dokument h2{font-size:11pt; margin:5mm 0 1.5mm}
  .gg-dokument table{width:100%; border-collapse:collapse}
  .gg-dokument th, .gg-dokument td{border:1px solid #555; padding:1.5mm 2mm; text-align:left;
    vertical-align:top}
  .gg-dokument th{background:#f2f2f2}
  .gg-d-klein{font-size:8.5pt; color:#333; margin:2mm 0}
  .gg-d-unterschrift{display:flex; gap:10mm; margin-top:14mm}
  .gg-d-unterschrift span{flex:1; border-top:1px solid #000; padding-top:1.5mm; font-size:9pt}
}

/* Generator Betriebsanweisung und Unterweisungsnachweis (bauen/loesungsseiten.py) -
   dieselben Formularbausteine wie .gg-*, eigene Druckfassung. */
.ba-dokument{display:none}
@media print{
  body.ba-drucken > *{display:none}
  body.ba-drucken > .ba-dokument{display:block}
  body.ba-drucken > .ba-dokument{width:100%;
    font:10pt/1.35 Arial, sans-serif; color:#000; -webkit-print-color-adjust:exact;
    print-color-adjust:exact}
  .ba-d{border:2.5mm solid #1f5fa8; padding:0}
  .ba-d-kopf{background:#1f5fa8; color:#fff; text-align:center; padding:2mm 0 2.5mm}
  /* Fuer Gefahrstoffe empfiehlt die DGUV Information 211-010 Orange. */
  .ba-d-orange{border-color:#c25708}
  .ba-d-orange .ba-d-kopf, .ba-d-orange .ba-d-balken{background:#c25708}
  .ba-d-orange .ba-d-angaben{border-bottom-color:#c25708}
  .ba-d-titel{font-size:16pt; font-weight:700; letter-spacing:.08em}
  .ba-d-unter{font-size:9pt}
  .ba-d-angaben{display:grid; grid-template-columns:1fr 1fr; border-bottom:1px solid #1f5fa8}
  .ba-d-angaben div{padding:1.2mm 3mm; border-top:1px solid #c9d7ea}
  .ba-d-angaben span{display:block; font-size:7.5pt; color:#333}
  .ba-d-name{font-size:12pt; font-weight:700; text-align:center; padding:2mm 3mm}
  .ba-d-abschnitt{break-inside:avoid}
  .ba-d-balken{background:#1f5fa8; color:#fff; font-weight:700; padding:1mm 3mm; font-size:10pt}
  .ba-d-abschnitt ul{margin:1.5mm 4mm 2mm 8mm; padding:0}
  .ba-d-abschnitt li{margin:.6mm 0}
  .ba-d-fuss{display:flex; padding:12mm 4mm 2mm}
  .ba-d-fuss span{flex:1; border-top:1px solid #000; padding-top:1.5mm; font-size:9pt}
  .ba-d-klein{font-size:7.5pt; color:#333; margin:1mm 4mm 2mm}
  .uw-d h1{font-size:14pt; margin:0 0 2mm}
  .uw-d table{width:100%; border-collapse:collapse; margin-top:3mm}
  .uw-d th, .uw-d td{border:1px solid #555; padding:1.5mm 2mm; text-align:left; vertical-align:top}
  .uw-d th{background:#f2f2f2}
  .uw-d .uw-d-zeile td{height:9mm}
  .uw-d-klein{font-size:8.5pt; color:#333; margin:2mm 0}
  .uw-d-unterschrift{display:flex; gap:10mm; margin-top:12mm}
  .uw-d-unterschrift span{flex:1; border-top:1px solid #000; padding-top:1.5mm; font-size:9pt}
}

/* »Erinnerung per E-Mail« unter den kostenlosen Werkzeugen (app/merker.py).
   Ein ruhiger Kasten am Ende, kein Banner: gefragt wird erst, wenn jemand
   sein Dokument schon hat. */
.er-kasten{border:1px solid #d8e1e6; border-radius:14px; padding:1rem 1.2rem 1.2rem;
  margin:1.6rem 0; background:#f7fafb}
.er-kasten h3{margin:0 0 .3rem}
.er-einfuehrung{margin:0 0 .8rem}
.er-felder{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:.6rem 1rem}
.er-felder label{display:flex; flex-direction:column; gap:.3rem; font-weight:600; font-size:.92rem}
.er-felder input{font:inherit; padding:.5rem .6rem; border:1px solid #c6d2d9; border-radius:9px;
  background:#fff}
.er-wahl{display:flex; gap:.55rem; align-items:flex-start; margin:.9rem 0 .2rem; font-size:.94rem}
.er-meldung{margin:.2rem 0 0; font-size:.94rem}
.er-meldung.er-gut{color:#1c6b45}
.er-meldung.er-fehler{color:#a3281f}
.er-klein{font-size:.85rem; color:#46545e; margin:.6rem 0 0}

/* .marke-dach gibt es nicht mehr. Die Dachmarke stand hier als HTML-Text und
   ist seit 25.09.2026 Teil des Lockups aus dem Markenpaket - dort sitzt der
   Abstand zwischen »irot« und »Kalibrat« fest, statt vom Browser zu kommen.
   Die Kopfzeile traegt jetzt /brand/lockup-light.svg mit 28 px Hoehe. */
/* border-radius zurueck auf null: start.css rundet .marke img mit 6px, was
   fuer das alte quadratische Logo richtig war und einer Wortmarke die Ecken
   abschneidet. */
.marke img{display:block; height:28px; width:auto; border-radius:0}

/* Der Satz zum Preis auf der Startseite: er soll auffallen, aber nicht
   schreien - er ist eine Auskunft, keine Anklage. */
.preis-argument{max-width:44rem; margin-left:auto; margin-right:auto;
  font-size:1.02rem; color:#3b4a55}

/* Der Beschreiber (Markensystem § 6.2): die Zeile, die sagt, was das Produkt
   macht - weil der Name es nicht sagt. Nie in der Familienfarbe, die gehoert
   dem Produktnamen; eigene Zeile unter dem Namen, nie daneben. */
.beschreiber{color:#6E675D; font-size:.92rem; display:inline-block; margin:.15rem 0 .2rem}
.fuss .beschreiber{color:#9aa7ae}
/* Ueber der Ueberschrift steht er als Satz, nicht als Kopfzeile:
   das Markensystem verbietet Grossbuchstaben ausdruecklich. */
.l-held h1 .l-h1-beschreiber{text-transform:none; letter-spacing:.01em;
  font-weight:600; font-size:clamp(.9rem,1.5vw,1.02rem)}

/* Die abhakbare Pruefliste (web-start/abhaken.js). Ein Mangel wird nicht rot
   angestrichen: wer prueft, soll aufschreiben was er sieht, nicht ueberlegen,
   ob das Formular ihn dafuer tadelt. */
.ab-liste{margin:.6rem 0 1.2rem}
.ab-punkt{border-top:1px solid #e7edf1; padding:.6rem 0}
.ab-punkt:first-child{border-top:0}
.ab-frage{margin:0 0 .4rem; font-size:.97rem}
.ab-wahl{display:flex; flex-wrap:wrap; gap:.45rem .9rem; align-items:center}
.ab-wahl label{display:flex; gap:.3rem; align-items:center; font-size:.92rem}
.ab-notiz{flex:1 1 14rem; font:inherit; font-size:.92rem; padding:.38rem .55rem;
  border:1px solid #c6d2d9; border-radius:9px; background:#fff}
.ab-fuss{margin:.4rem 0 1.6rem}
.ab-stand{font-weight:650; margin:0 0 .6rem}

/* Der Unterweisungsplan (web-start/plan.js): eine Tabelle zum Tippen. */
.pl-tabelle input{font:inherit; font-size:.92rem; padding:.35rem .5rem; width:100%;
  border:1px solid #c6d2d9; border-radius:8px; background:#fff}
.pl-tabelle .pl-schmal{width:5.2rem; display:inline-block}
.pl-einheit{font-size:.82rem; color:#7a8791; margin-left:.3rem}
.pl-naechste{font-weight:650; white-space:nowrap}
.pl-weg{padding:.3rem .6rem; line-height:1}

/* Die Checkliste Bildschirmarbeitsplatz (web-start/bildschirm.js): elf Punkte
   zum Durchgehen. Die Fundstelle steht klein hinter der Frage - wer prueft,
   soll nachlesen koennen, ohne die Seite zu verlassen. */
.bi-punkt{border-top:1px solid #e7edf1; padding:.7rem 0}
.bi-punkt:first-child{border-top:0}
.bi-frage{margin:0 0 .45rem; font-size:.97rem}
.bi-quelle{white-space:nowrap; font-size:.8rem; color:#7a8791}
.bi-wahl{display:flex; flex-wrap:wrap; gap:.5rem .9rem; align-items:center}
.bi-wahl label{display:flex; gap:.3rem; align-items:center; font-size:.92rem}
.bi-notiz{flex:1 1 15rem; font:inherit; font-size:.92rem; padding:.4rem .55rem;
  border:1px solid #c6d2d9; border-radius:9px; background:#fff}

/* Quellen und Haftungssaetze am Ende der Seite: klein, ruhig, aus dem Weg -
   aber vorhanden. Sie schuetzen vor einem Missverstaendnis; sie gehoeren
   nur nicht neben den Knopf zum Herunterladen. */
.l-quellen{margin:2.6rem 0 0; padding-top:1.1rem; border-top:1px solid #e3e9ee}
.l-quellen h2{font-size:.95rem; font-weight:700; letter-spacing:.02em; margin:0 0 .4rem;
  color:#46545e; text-transform:none}
.l-quellen p{font-size:.82rem; line-height:1.55; color:#5b6871; margin:0 0 .4rem}

/* »Gilt das für uns?« - der Kasten ganz oben auf den Loesungsseiten.
   Ruhig, nicht alarmierend: er soll eine Frage beantworten, keine Pflicht
   verkaufen, die vielleicht gar keine ist. */
.l-gilt{border-left:4px solid #0b2b33; background:#f7fafb; border-radius:0 12px 12px 0;
  padding:.9rem 1.2rem 1rem; margin:0 0 1.6rem}
.l-gilt h2{margin:0 0 .5rem; font-size:1.15rem}
.l-gilt p{margin:0 0 .6rem}
.l-gilt ol{margin:.2rem 0 .7rem 1.2rem}
.l-gilt li{margin:.15rem 0}
.l-gilt .l-klein{font-size:.85rem; color:#46545e; margin:0}

/* Der eine Satz unter den kostenlosen Werkzeugen (web-start/aufheben.js).
   Kein Kasten und kein Knopf: das Herunterladen ist die Hauptsache. */
.af-hinweis{font-size:.88rem; color:#46545e; margin:.8rem 0 0}

/* Die Reihe der Download-Knoepfe ganz oben auf den Vorlagenseiten: was die
   Leute suchen, steht vor dem Text, nicht dahinter. */
.l-download{display:flex; flex-wrap:wrap; gap:.6rem; margin:.4rem 0 1rem}

/* --- MSA Verfahren 2 (/msa-verfahren-2) ------------------------------- */
/* Ein Raster mit bis zu 25 x 5 x 5 Feldern. Drei Dinge sind hier wichtiger
   als das Aussehen: die Zellen muessen schmal genug sein, dass drei Pruefer
   nebeneinander passen; das Raster muss waagerecht scrollen duerfen, ohne die
   Seite mitzunehmen; und die Teilespalte bleibt stehen, sonst weiss beim
   Scrollen niemand mehr, in welcher Zeile er tippt. */
.ms-form{grid-template-columns:repeat(3,minmax(0,1fr))}
#ms-raster{overflow-x:auto; -webkit-overflow-scrolling:touch}
/* max-content, damit die Tabelle ihre eigene Breite behaelt und der Kasten
   scrollt. Mit »min-width:100%« allein quetscht das Tabellenlayout am Handy
   die Zellen zusammen, und dann steht in einem Feld »29« statt »29,98« -
   gefunden bei 375 px, nicht am Schreibtisch. */
.ms-tabelle{border-collapse:collapse; font-size:.86rem; width:max-content;
  min-width:100%}
.ms-tabelle th{font-weight:600; font-size:.8rem; color:#46545e; padding:.25rem .35rem;
  text-align:center; border-bottom:1px solid #e2e8ec; white-space:nowrap}
.ms-tabelle thead tr:first-child th + th{border-left:1px solid #e2e8ec}
.ms-tabelle td{padding:1px}
.ms-tabelle th[scope=row], .ms-teilspalte{position:sticky; left:0; background:#fff;
  text-align:right; padding-right:.5rem; z-index:1}
/* Mit der Kennung davor, und das ist kein Zierrat: .gg-form setzt allen
   Eingabefeldern »width:100%«, und diese Regel ist spezifischer als eine
   blosse Klasse. Ohne den Vorrang gewinnt die allgemeine Regel und die
   Messwerte werden abgeschnitten. */
#ms-raster .ms-zelle{width:5.2rem; box-sizing:border-box; font:inherit;
  font-size:.86rem; padding:.3rem .35rem; border:1px solid #c8d3d9;
  border-radius:7px; text-align:right; font-variant-numeric:tabular-nums}
.ms-zelle:focus{outline:2px solid var(--leuchte); outline-offset:1px}
.ms-falsch{border-color:#b23b32; background:#fbecea}

.ms-leer, .ms-warnung{font-size:.92rem; color:#46545e; margin:.6rem 0 0}
.ms-warnung{color:#b23b32}
.ms-klein{font-size:.85rem; color:#5a6a74}

/* Das Urteil ist die eine Zahl, wegen der jemand die Seite geoeffnet hat.
   Also steht sie gross und mit dem Wort daneben - eine Prozentzahl ohne
   Urteil laesst genau die Frage offen, die gestellt wurde. */
.ms-urteil{display:flex; flex-wrap:wrap; align-items:baseline; gap:.5rem 1rem;
  margin:1rem 0 .6rem; padding:.9rem 1.1rem; border-radius:14px;
  border:1px solid #d8e1e6; background:#f5f8fa}
.ms-urteil.ms-gut{border-color:#bcdfcb; background:#e8f4ed}
.ms-urteil.ms-mittel{border-color:#ecd6a6; background:#fbf2e2}
.ms-urteil.ms-schlecht{border-color:#eebfba; background:#fbecea}
.ms-gross{font-size:2.1rem; font-weight:800; letter-spacing:-.02em;
  font-variant-numeric:tabular-nums; line-height:1}
.ms-wort{font-weight:700; font-size:1.05rem}
.ms-bezug{font-size:.86rem; color:#46545e; flex-basis:100%}
.ms-gut-text{color:#1f7a4c}
.ms-schlecht-text{color:#b23b32}

.ms-kennzahlen{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.7rem;
  margin:.6rem 0}
.ms-kennzahl{border:1px solid #e2e8ec; border-radius:12px; padding:.6rem .8rem;
  display:flex; flex-direction:column; gap:.15rem; font-size:.85rem; color:#46545e}
.ms-kennzahl b{font-size:1.35rem; font-weight:750; color:var(--tinte, #0f1519);
  font-variant-numeric:tabular-nums; line-height:1.15}

.ms-anteile{width:100%; border-collapse:collapse; font-size:.9rem; margin:.6rem 0}
.ms-anteile th{text-align:left; font-size:.82rem; color:#46545e; font-weight:600;
  border-bottom:1px solid #e2e8ec; padding:.35rem .5rem}
.ms-anteile td{padding:.35rem .5rem; border-bottom:1px solid #eef2f4;
  font-variant-numeric:tabular-nums}
.ms-anteile td:first-child{font-variant-numeric:normal}
.ms-anteile th:not(:first-child), .ms-anteile td:not(:first-child){text-align:right;
  white-space:nowrap}
.ms-summenzeile{font-weight:700}
.ms-summenzeile td{border-top:1px solid #c8d3d9}

.ms-hinweise{margin:.6rem 0 0; padding-left:1.1rem; font-size:.9rem; color:#46545e}
.ms-hinweise li{margin:.25rem 0}
.ms-knoepfe{display:flex; flex-wrap:wrap; gap:.6rem; margin:.4rem 0 0}

.ms-vorlage-halter{display:none}
@media(max-width:820px){
  .ms-form{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ms-kennzahlen{grid-template-columns:1fr}
}
@media(max-width:700px){
  .ms-form{grid-template-columns:1fr}
}

/* Gedruckt wird in Arial - dieselbe Begruendung wie bei den anderen
   Vorlagen: das Blatt gehoert dem Kunden und landet in einer Auditakte. */
@media print{
  body.ms-drucken > *{display:none}
  body.ms-drucken > .ms-vorlage-halter{display:block; width:100%;
    font:9.5pt/1.35 Arial, sans-serif; color:#000}
  .ms-vorlage .ms-v-titel{font-size:14pt; font-weight:700; margin:0 0 2mm}
  .ms-vorlage h2{font-size:11pt; margin:5mm 0 1.5mm}
  .ms-v-klein{font-size:8pt; color:#333; margin:0 0 3mm}
  .ms-v-tabelle{width:100%; border-collapse:collapse; margin:0 0 3mm}
  .ms-v-tabelle th, .ms-v-tabelle td{border:1px solid #555; padding:1mm 1.5mm;
    text-align:right; font-size:8.5pt; font-variant-numeric:tabular-nums}
  .ms-v-tabelle th:first-child, .ms-v-tabelle td:first-child{text-align:left}
}