/* Kursoberfläche.

   Mobile first ist hier keine Vorliebe, sondern Anforderung: Ein großer Teil
   der Zielgruppe (Handwerk, Produktion) hat keinen PC-Arbeitsplatz (F5,
   „Kursoberfläche"). Bedienbar ohne Maus, große Schaltflächen, hohe Kontraste,
   keine Farbe als alleiniger Bedeutungsträger.

   Kein JavaScript. Der laufende Countdown ist bewusst kein Timer im Browser,
   sondern ein Serverwert, den die Seite als Zahl nennt — eine Browseruhr wäre
   ein Bedienelement, keine Kontrolle (18-integrity, Abschnitt 1).

   Farben wie auf der Website, aus der Bildmarke gemessen: Blau #004481 (9,8:1
   auf Weiß), Rot #D41524 (5,2:1 — nur Markierung, nie Kleintext).

   Schriften: vorerst Systemschriften. Die eigenen Schriftdateien liegen im
   Website-Projekt und werden mit der Zertifikatsrunde übernommen; bis dahin
   wird nichts von fremden Servern geladen. */

:root {
  color-scheme: light;

  --blue: #004481;
  --blue-deep: #003463;
  --red: #d41524;

  --ink: #14161a;
  --ink-2: #3d444e;
  --ink-3: #626975;
  --bg: #fff;
  --bg-2: #f4f6f8;
  --line: #dfe3e8;

  --mono: ui-monospace, "SFMono-Regular", "Cascadia Mono", Menlo, Consolas, monospace;
  --text: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --s1: 0.25rem; --s2: 0.5rem; --s3: 1rem; --s4: 1.5rem; --s5: 2rem; --s6: 3rem;
}

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

body {
  margin: 0;
  font-family: var(--text);
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--ink);
  background: var(--bg);
  hyphens: auto;
  -webkit-hyphens: auto;
  overflow-wrap: break-word;
}

.wrap { width: min(100% - 2rem, 44rem); margin-inline: auto; }

/* --- Kopf- und Fußzeile --------------------------------------------------- */

.topline { height: 3px; background: var(--blue); }
.topline span { display: block; width: 3.5rem; height: 3px; background: var(--red); }

header.bar { border-bottom: 1px solid var(--line); padding-block: var(--s3); }
header.bar .who { font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
header.bar strong { display: block; font-size: 1.0625rem; }

footer.bar { border-top: 1px solid var(--line); margin-top: var(--s6); padding-block: var(--s4); font-size: 0.9375rem; color: var(--ink-2); }

main { padding-block: var(--s5); }

/* --- Text ---------------------------------------------------------------- */

/* Komposita wie „Brandschutzunterweisung“ sind länger als jede Handyspalte:
   die Zeile wird kleiner, statt das Wort ohne Trennstrich zu zerreißen. */
h1 { font-size: clamp(1.5rem, 1.1rem + 1.9vw, 1.875rem); line-height: 1.15; letter-spacing: -0.02em; margin: 0 0 var(--s4); }
h2 { font-size: 1.25rem; line-height: 1.25; margin: var(--s5) 0 var(--s3); }
p { margin: 0 0 var(--s3); max-width: 62ch; }
ul, ol { max-width: 62ch; padding-left: 1.3em; }
li { margin-bottom: var(--s2); }
a { color: var(--blue); text-underline-offset: 0.2em; }
a:hover { color: var(--blue-deep); }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }

.label {
  display: block;
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: var(--s2);
  hyphens: none;
}

.lead { font-size: 1.1875rem; color: var(--ink-2); }
.prose p { font-size: 1.125rem; }
.prose li { font-size: 1.125rem; margin-bottom: var(--s1); }
.prose h2 { margin-top: var(--s5); }

/* Tables in chapter texts: brand classes, extinguisher suitability. */
.prose table { width: 100%; border-collapse: collapse; margin: var(--s4) 0; font-size: 1rem; }
.prose th, .prose td { text-align: left; vertical-align: top; padding: var(--s2) var(--s3) var(--s2) 0; border-bottom: 1px solid var(--line); }
.prose thead th { border-bottom: 2px solid var(--ink); font-size: 0.875rem; }

/* On a phone each row becomes a card; every value carries its column heading
   (data-label, set in rendering.py). Nobody swipes sideways through a table. */
@media (max-width: 40rem) {
  .prose table, .prose tbody, .prose tr, .prose td { display: block; width: 100%; }
  .prose thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .prose tr { border-bottom: 1px solid var(--line); padding-block: var(--s2); }
  .prose tr:first-child { border-top: 2px solid var(--ink); }
  .prose td { border: 0; padding: var(--s1) 0; }
  .prose td::before {
    content: attr(data-label); display: block;
    font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3);
  }
}

/* Graphics: at most their own pixel size (no blurry upscaling), signs small,
   upright pictures limited; a tap opens the full-size file. The caption repeats
   the content. */
.prose figure { margin: var(--s4) 0; }
.prose figure a { display: inline-block; max-width: 100%; }
.prose figure img { display: block; max-width: 100%; height: auto; border: 1px solid var(--line); }
.prose figure.fig-sign img { max-width: min(100%, 11rem); }
.prose figure.fig-upright img { max-width: min(100%, 22rem); }
.prose figcaption { font-size: 0.9375rem; color: var(--ink-3); margin-top: var(--s2); }

/* Boxes from `!!! merke` and `!!! frage` in the chapter files. */
.prose .admonition { border-left: 3px solid var(--blue); background: var(--bg-2); padding: var(--s3); margin: var(--s4) 0; }
.prose .admonition.merke { border-left-color: var(--red); }
.prose .admonition-title { font-weight: 700; margin-bottom: var(--s2); }
.prose .admonition > :last-child { margin-bottom: 0; }
.prose .admonition ul { margin-bottom: 0; }

/* --- Angaben ------------------------------------------------------------- */

.facts { margin: var(--s4) 0; border-top: 1px solid var(--ink); }
.facts > div { padding-block: var(--s3); border-bottom: 1px solid var(--line); }
.facts dt { font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); hyphens: none; }
.facts dd { margin: var(--s1) 0 0; }
@media (min-width: 34rem) {
  .facts > div { display: grid; grid-template-columns: minmax(0, 11rem) minmax(0, 1fr); gap: var(--s3); align-items: baseline; }
  .facts dd { margin: 0; }
}

/* --- Schaltflächen ------------------------------------------------------- */

.btn {
  display: inline-block;
  font: inherit;
  font-weight: 600;
  min-height: 3rem;
  padding: 0.8rem 1.4rem;
  border: 2px solid var(--blue);
  background: var(--blue);
  color: #fff;
  text-decoration: none;
  cursor: pointer;
}
.btn:hover { background: var(--blue-deep); border-color: var(--blue-deep); color: #fff; }
.btn[disabled] { background: var(--bg-2); border-color: var(--line); color: var(--ink-3); cursor: not-allowed; }
.btn--quiet { background: transparent; color: var(--blue); }
.btn--quiet:hover { background: var(--blue); color: #fff; }
.actions { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s5); align-items: center; }

/* --- Hinweise ------------------------------------------------------------ */

.note { border-left: 3px solid var(--blue); background: var(--bg-2); padding: var(--s3); margin: var(--s4) 0; font-size: 1rem; }
.note--warn { border-left-color: var(--red); }
.note--ok { border-left-color: var(--blue); }
.note > :last-child { margin-bottom: 0; }
.note p { max-width: none; }

.messages { list-style: none; margin: 0 0 var(--s4); padding: 0; }
.messages li { border-left: 3px solid var(--red); background: var(--bg-2); padding: var(--s3); margin-bottom: var(--s2); font-size: 1rem; }
.messages li.success { border-left-color: var(--blue); }

.field-error { color: var(--blue-deep); font-weight: 600; font-size: 0.9375rem; margin-top: var(--s1); }

/* --- Formulare ----------------------------------------------------------- */

label { display: block; font-weight: 600; margin-bottom: var(--s1); }
input[type="text"], input[type="email"], textarea {
  font: inherit;
  width: 100%;
  min-height: 3rem;
  padding: 0.7rem;
  border: 2px solid var(--ink-3);
  background: #fff;
  color: var(--ink);
}
textarea { min-height: 7rem; }
.field { margin-bottom: var(--s4); }
.hint { font-size: 0.9375rem; color: var(--ink-2); margin-top: var(--s1); }

.check { display: flex; gap: var(--s3); align-items: flex-start; margin-bottom: var(--s4); }
.check input { width: 1.5rem; height: 1.5rem; margin-top: 0.2rem; flex: none; }
.check label { font-weight: 400; }

/* --- Fortschritt --------------------------------------------------------- */

.steps { list-style: none; margin: 0 0 var(--s4); padding: 0; display: flex; flex-wrap: wrap; gap: var(--s1); }
.steps li {
  font-family: var(--mono); font-size: 0.75rem; font-weight: 700;
  padding: 0.2rem 0.5rem; border: 1px solid var(--line); color: var(--ink-3); margin: 0;
}
.steps li.done { border-color: var(--blue); color: var(--blue); }
/* Nur für Screenreader — sichtbar bleibt die Zahl. */
.sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
.steps li.now { background: var(--blue); border-color: var(--blue); color: #fff; }

/* --- Prüfung ------------------------------------------------------------- */

/* fieldset/legend gruppieren die Antwortoptionen für Screenreader. Der
   Standardrahmen des Browsers muss dafür weg, sonst steht die Frage in einer
   Rahmenlücke statt über ihren Optionen. */
.question { border: 0; border-top: 1px solid var(--line); padding: var(--s4) 0 var(--s3); margin: 0; }
.question:first-of-type { border-top: 1px solid var(--ink); }
.question legend { display: block; float: left; width: 100%; padding: 0; margin-bottom: var(--s3); }
.question legend + * { clear: both; }
.question .no { display: block; font-family: var(--mono); font-size: 0.75rem; font-weight: 700; color: var(--red); letter-spacing: 0.08em; margin-bottom: var(--s1); }
.question .text { display: block; font-weight: 600; font-size: 1.0625rem; }
.option { display: flex; gap: var(--s3); align-items: flex-start; padding: var(--s2) 0; }
.option input { width: 1.5rem; height: 1.5rem; margin-top: 0.15rem; flex: none; }
.option label { font-weight: 400; margin: 0; }

.score { font-family: var(--mono); font-size: 2.5rem; font-weight: 700; letter-spacing: -0.02em; }
/* Ohne eigene Auszeichnung reißt die Schreibmaschinenschrift das Prozentzeichen
   weit von der Zahl weg. */
.score .unit { font-family: var(--text); font-size: 1.25rem; font-weight: 600; margin-left: 0.15em; }

/* --- Rückfragekanal ------------------------------------------------------ */

details.ask { border-top: 1px solid var(--line); margin-top: var(--s6); padding-top: var(--s3); }
details.ask summary { font-weight: 600; cursor: pointer; padding: var(--s2) 0; }
details.ask[open] summary { margin-bottom: var(--s3); }

/* Company area ----------------------------------------------------------- */
header.bar .wrap { position: relative; }
.bar-logout { position: absolute; right: 0; top: 50%; transform: translateY(-50%); }
input[type="number"] { font: inherit; padding: var(--s2) var(--s3); border: 1px solid var(--line); border-radius: 4px; width: 8rem; }
details { margin: var(--s4) 0; }
details summary { font-weight: 600; cursor: pointer; padding: var(--s2) 0; }
.note textarea { width: 100%; font-family: var(--mono); font-size: 0.875rem; }
table.status { width: 100%; border-collapse: collapse; margin: var(--s4) 0; font-size: 1rem; }
table.status th, table.status td { text-align: left; padding: var(--s2) var(--s3) var(--s2) 0; border-bottom: 1px solid var(--line); vertical-align: top; }
table.status .row-actions { display: flex; flex-wrap: wrap; gap: var(--s2); }
table.status .row-actions form { margin: 0; }
@media (max-width: 40rem) {
  table.status thead { display: none; }
  table.status, table.status tbody, table.status tr, table.status td { display: block; width: 100%; }
  table.status tr { border-bottom: 1px solid var(--line); padding: var(--s2) 0; }
  table.status td { border: 0; padding: var(--s1) 0; }
  table.status td[data-label]::before { content: attr(data-label) ": "; color: var(--ink-3); }
}

footer.bar .footer-links { margin-top: var(--s2); }
footer.bar .footer-links a { color: inherit; }

/* Order form and guided customer account --------------------------------- */
.price { font-size: 0.9375rem; color: var(--ink-2); margin-top: calc(-1 * var(--s2)); }
.field-row { display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: var(--s3); }
.step { border-top: 1px solid var(--line); padding-top: var(--s3); margin-top: var(--s4); }
.step h2, .step summary { display: flex; align-items: center; gap: var(--s2); margin: 0 0 var(--s3); }
.step summary { font-weight: 600; font-size: 1.0625rem; }
.step-no { display: inline-flex; align-items: center; justify-content: center; width: 1.75rem; height: 1.75rem;
  border-radius: 50%; border: 2px solid currentColor; font-size: 0.875rem; font-weight: 700; flex: none; }
.step--done .step-no { background: var(--ink); color: var(--bg, #fff); border-color: var(--ink); }
.step-state { font-weight: 400; font-size: 0.875rem; color: var(--ink-3); margin-left: auto; }
.step--later { color: var(--ink-3); }
.reorder { border-top: 1px solid var(--line); padding-top: var(--s3); margin-top: var(--s5); }
.order-steps { padding-left: 1.3em; margin-bottom: var(--s3); }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.total { font-weight: 600; margin: var(--s3) 0 0; }

/* Every fold-out reads as a button: border, a chevron that turns when open.
   The browser's own triangle is hidden so there is exactly one marker. */
details > summary { list-style: none; }
details > summary::-webkit-details-marker { display: none; }
details:not(.step) > summary {
  display: inline-flex; align-items: center; gap: var(--s2);
  border: 1px solid var(--blue); color: var(--blue); border-radius: 4px;
  padding: var(--s2) var(--s3); background: var(--bg);
}
details:not(.step) > summary:hover { background: var(--bg-2); }
details > summary::after {
  content: ""; width: 0.5rem; height: 0.5rem; flex: none;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px); transition: transform 0.15s;
}
details[open] > summary::after { transform: rotate(-135deg) translateY(-1px); }
details.step > summary { cursor: pointer; }
details.step > summary::after { margin-left: var(--s2); }
details[open]:not(.step) > summary { margin-bottom: var(--s3); }