/* ===========================================================================
   Schrift und Grundmasse
   ---------------------------------------------------------------------------
   Manrope, selbst gehostet als woff2 (SIL Open Font License). Nichts wird von
   einem fremden Server nachgeladen. font-display: swap, damit der Text sofort
   lesbar ist und die Schrift nachrutscht.

   Darunter die Masse aus dem Entwurf: mehr Luft in Karten, grössere
   Eckenrundung, Haarlinienrahmen. Sie gelten NUR in dieser Anwendung; der
   Baukasten bleibt unverändert.
   ========================================================================= */

@font-face {
  font-family: 'Manrope';
  src: url('/assets/schrift/manrope-400.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: 'Manrope';
  src: url('/assets/schrift/manrope-600.woff2') format('woff2');
  font-weight: 600;
  font-display: swap;
}

:root {
  --schrift: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --schrift-titel: 'Manrope', system-ui, sans-serif;
  --radius: 10px;
  --radius-gross: 14px;
}

body { font-family: var(--schrift); }

/* Haarlinien statt voller Pixel: der Baukasten setzt 1px, im Entwurf sind es
   0.5px. Auf einem gewöhnlichen Bildschirm ist das der halbe Strich. */
.karte, .liste th, .liste td, .feld input, .feld select, .feld textarea {
  border-color: var(--rand-fein);
}

/* ===========================================================================
   projekt.css - alles, was nur diese Anwendung betrifft
   ---------------------------------------------------------------------------
   Wird als letzte Datei geladen und darf deshalb den Baukasten überschreiben.
   Farben kommen ausnahmslos aus der Farbwelt, damit ein späterer Wechsel
   überall greift. Die einzige Ausnahme ist das amtliche Rot der GHS-Raute.

   Grundgedanke der Bildkarte: gelesen wird sie in der Halle, mit Schutzbrille,
   bei schlechtem Licht. Deshalb überall grössere Schrift als sonst und
   Bedienflächen von mindestens 44 Pixeln.
   ========================================================================= */

.g-karte {
  max-width: 560px;
  margin: 0 auto;
  padding: 14px 16px calc(24px + env(safe-area-inset-bottom));
}

/* --- Sprachwahl und Vorlesen ---------------------------------------------- */

.g-karte__sprachen {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--rand-fein);
}

.g-karte__sprachen a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding: 0 14px;
  border-radius: var(--radius);
  font-size: 1rem;
  text-decoration: none;
  color: var(--schwach);
}

.g-karte__sprachen a[aria-current="true"] {
  background: var(--flaeche2);
  color: var(--akzent);
  font-weight: 600;
}

.g-karte__vorlesen {
  margin-left: auto;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 14px;
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  background: var(--flaeche);
  color: var(--akzent);
  font-size: 1rem;
  cursor: pointer;
}

.g-karte__vorlesen[aria-pressed="true"] { background: var(--flaeche2); }

/* --- Hinweis auf eine Ersatzsprache --------------------------------------- */

.g-karte__ersatz {
  margin: 12px 0 0;
  padding: 10px 12px;
  border-left: 4px solid var(--warn);
  border-radius: 0;   /* einseitiger Rand verträgt keine runden Ecken */
  background: var(--flaeche2);
  font-size: .95rem;
  color: var(--text);
}

/* --- Kopf der Karte ------------------------------------------------------- */

.g-karte__ort {
  margin: 18px 0 2px;
  font-size: 1rem;
  color: var(--schwach);
}

.g-karte__name {
  margin: 0;
  font-size: 1.7rem;
  line-height: 1.2;
}

.g-karte__signal {
  display: inline-block;
  margin: 10px 0 0;
  padding: 4px 12px;
  border-radius: var(--radius);
  font-size: 1.05rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.g-karte__signal--gefahr  { background: var(--fehler); color: #fff; } /* feste-farbe-ok: Weiss auf Fehlerrot */
.g-karte__signal--achtung { background: var(--warn);   color: #fff; } /* feste-farbe-ok: Weiss auf Warnorange */

/* --- Gefahrenzeichen ------------------------------------------------------ */

.g-karte__zeichen {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin: 18px 0 0;
}

.g-karte__zeichen .raute { display: inline-flex; }
.g-karte__zeichen img { width: 74px; height: 74px; }

/*
 * Ersatzdarstellung, solange die amtlichen Bilddateien fehlen: rote Raute mit
 * dem Code darin. Das Rot ist vorgeschrieben und darf der Farbwelt NICHT
 * folgen, sonst wäre die Kennzeichnung falsch.
 */
.g-karte__zeichen .raute--leer {
  width: 60px;
  height: 60px;
  margin: 7px;
  transform: rotate(45deg);
  border: 4px solid #d32011;   /* feste-farbe-ok: amtliches Rot der GHS-Raute */
  background: #fff;            /* feste-farbe-ok: amtlich weisser Grund */
  align-items: center;
  justify-content: center;
}

.g-karte__zeichen .raute--leer b {
  transform: rotate(-45deg);
  font-size: .82rem;
  color: #1a1a1a;              /* feste-farbe-ok: amtlich schwarzes Symbol */
}

/* --- Texte ---------------------------------------------------------------- */

.g-karte__kurz {
  margin: 20px 0 0;
  font-size: 1.15rem;
  line-height: 1.55;
}

.g-karte__titel {
  margin: 26px 0 8px;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--schwach);
}

.g-karte__saetze {
  margin: 0;
  padding-left: 22px;
  font-size: 1.05rem;
  line-height: 1.5;
}

.g-karte__saetze li { margin-bottom: 6px; }

/* --- Schutzausrüstung ----------------------------------------------------- */

.g-karte__psa {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
  gap: 10px;
}

.g-karte__psa span {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 12px 6px;
  border-radius: var(--radius);
  background: var(--flaeche2);
  color: var(--akzent);
  text-align: center;
}

.g-karte__psa b {
  font-size: .9rem;
  font-weight: 600;
  color: var(--text);
  line-height: 1.25;
}

/* --- Erste Hilfe ---------------------------------------------------------- */

.g-karte__hilfe {
  margin: 26px 0 0;
  padding: 14px 16px;
  border: 2px solid var(--fehler);
  border-radius: var(--radius);
}

.g-karte__hilfe b {
  display: block;
  margin-bottom: 4px;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--fehler);
}

.g-karte__hilfe p {
  margin: 0;
  font-size: 1.15rem;
  line-height: 1.5;
}

/* --- Sicherheitsdatenblatt ------------------------------------------------ */

.g-karte__sdb { margin: 22px 0 0; }

.g-karte__sdb a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  background: var(--flaeche);
  color: var(--akzent);
  font-size: 1rem;
  text-decoration: none;
}

/* Im Ausdruck ist ein Knopf sinnlos: niemand tippt auf Papier. */
@media print { .g-karte__sdb { display: none; } }

/* --- Fusszeile und Fehlerseite -------------------------------------------- */

.g-karte__stand {
  margin: 26px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--rand-fein);
  font-size: .9rem;
  color: var(--schwach);
}

.g-karte-leer {
  max-width: 560px;
  margin: 0 auto;
  padding: 48px 16px;
  text-align: center;
}

.g-karte-leer h1 { font-size: 1.5rem; }
.g-karte-leer p  { font-size: 1.1rem; color: var(--schwach); }

/* --- Ausdruck ------------------------------------------------------------- */

/*
 * Die Karte wird oft ausgedruckt und laminiert ans Bad gehängt. Beim Drucken
 * fliegen Sprachwahl und Vorlesen-Knopf raus, der Rest passt auf eine Seite.
 */
@media print {
  .g-karte__sprachen, .g-karte__vorlesen, .tabbar { display: none; }
  .g-karte { max-width: none; padding: 0; }
  .g-karte__name { font-size: 2.1rem; }
  .g-karte__kurz, .g-karte__hilfe p { font-size: 1.3rem; }
  .g-karte__psa span { border: 1px solid #999; background: none; } /* feste-farbe-ok: Graustufe für den Druck */
}

/* --- Verwaltung ----------------------------------------------------------- */

.maske { max-width: 760px; padding: 18px; }
.maske h1 { margin-top: 0; }

/* Zwei Felder nebeneinander, auf dem Telefon untereinander. */
.maske__zwei { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
@media (max-width: 620px) { .maske__zwei { grid-template-columns: 1fr; } }

.maske fieldset { border: 0; padding: 0; margin: 0 0 var(--luft); }
.maske legend { padding: 0; }

/* Ankreuzfelder mit grosser Trefferfläche: 44 px, sonst trifft man auf dem
   Telefon systematisch daneben. */
.ankreuzen { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 6px; }
.ankreuzen label {
  display: flex; align-items: center; gap: 10px; min-height: 44px;
  padding: 6px 10px; border: 1px solid var(--rand); border-radius: var(--radius);
  background: var(--flaeche); cursor: pointer;
}
.ankreuzen label:hover { border-color: var(--akzent); }
.ankreuzen input { width: 20px; height: 20px; flex: none; }
.ankreuzen span { display: flex; align-items: center; gap: 8px; font-size: .95rem; }
.ankreuzen b { display: block; font-size: .8rem; color: var(--schwach); }

.feld--reihe { display: flex; align-items: center; gap: 10px; }
.feld--reihe input { width: 20px; height: 20px; }

.sprachblock { padding: 16px 0; border-top: 1px solid var(--rand-fein); }
.sprachblock h2 { display: flex; align-items: center; gap: 10px; font-size: 1.15rem; }

.zeile-neu { display: flex; gap: 8px; align-items: center; margin-bottom: 16px; }
.zeile-neu input { flex: 1; min-width: 0; }
.zeile-neu .knopf { flex: none; }

.warnzahl { color: var(--fehler); }

/* --- Anmeldung ------------------------------------------------------------ */

/*
 * Mittig, mit Luft. Die Anmeldeseite ist das Erste, was ein Kunde sieht,
 * deshalb hier etwas mehr Sorgfalt als bei einer Erfassungsmaske.
 */
.anmelde-seite { display: flex; align-items: center; justify-content: center; min-height: 100vh; }
.anmelde-seite .tabbar { display: none; }

.anmelden { width: 100%; max-width: 420px; margin: 0 auto; padding: 28px 18px; }

.anmelden__kopf { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.anmelden__kopf b { display: block; font-size: 1.15rem; }
.anmelden__kopf small { color: var(--schwach); }

.anmelden__zeichen {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  flex: none;
  border-radius: 14px;
  background: var(--akzent);
  color: var(--akzent-text);
}

.anmelden__karte {
  padding: 22px;
  border: 1px solid var(--rand);
  border-radius: var(--radius-gross);
  background: var(--flaeche);
  box-shadow: var(--schatten);
}

.anmelden__karte h1 { margin: 0 0 16px; font-size: 1.35rem; }
.anmelden__hilfe { margin: 14px 0 0; font-size: .95rem; }

.knopfreihe--voll { display: block; }
.knopf--gross { width: 100%; min-height: 50px; font-size: 1.05rem; justify-content: center; }

/* --- Sprach- und Farbwahl ------------------------------------------------- */

.sprachwahl, .farbwahl {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  justify-content: center;
  margin-top: 16px;
}

.sprachwahl a, .farbwahl a {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  padding: 0 12px;
  border-radius: var(--radius);
  font-size: .9rem;
  color: var(--schwach);
  text-decoration: none;
}

.sprachwahl a[aria-current], .farbwahl a[aria-current] {
  background: var(--flaeche2);
  color: var(--akzent);
  font-weight: 600;
}

.farbwahl { margin-top: 4px; }

/* --- Etikettenbogen ------------------------------------------------------- */

.bogen {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6mm;
  padding: 18px;
}

.g-etikett {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 6px;
  border: 1px dashed var(--rand);   /* Schnittkante, im Druck grau */
  text-align: center;
  break-inside: avoid;              /* kein Etikett über den Seitenrand */
}

.g-etikett svg { width: 100%; max-width: 44mm; height: auto; display: block; }
.g-etikett b { font-size: .95rem; line-height: 1.2; }
.g-etikett small { font-size: .8rem; color: var(--schwach); }
.g-etikett__betrieb { font-size: .7rem; }

@media (max-width: 620px) { .bogen { grid-template-columns: repeat(2, 1fr); } }

@media print {
  /* Alles ausblenden, was nicht auf den Bogen gehört. Die Seitenleiste ist im
     Ausdruck nur verschwendetes Papier. */
  .nav-seitlich, .konsole__kopf, .nicht-drucken, .tabbar, .leer { display: none !important; }
  .konsole { display: block; }
  .bogen { padding: 0; gap: 4mm; grid-template-columns: repeat(3, 1fr); }
  .g-etikett { border-color: #ccc; }   /* feste-farbe-ok: Graustufe für den Druck */
}

/* --- Betriebsanweisung ---------------------------------------------------- */

/*
 * Ein Blatt zum Ausdrucken und Aufhängen. Am Bildschirm sieht es aus wie auf
 * Papier, damit niemand überrascht wird, was der Drucker daraus macht.
 */
.ba {
  max-width: 190mm;
  margin: 18px;
  padding: 10mm;
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  background: var(--flaeche);
}

.ba__kopf, .ba__stoff, .ba__fuss {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  justify-content: space-between;
}

.ba__kopf { padding-bottom: 8px; border-bottom: 2px solid var(--text); }
.ba__kopf small, .ba__stoff small, .ba__fuss small {
  display: block;
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--schwach);
}
.ba__kopf b { font-size: 1.05rem; }
.ba__ort { text-align: right; }

.ba__stoff { padding: 12px 0; border-bottom: 1px solid var(--rand); }
.ba__stoff b { font-size: 1.5rem; line-height: 1.2; }

.ba__signal {
  display: inline-block;
  margin-left: 10px;
  padding: 2px 10px;
  border-radius: var(--radius);
  background: var(--fehler);
  color: #fff;                      /* feste-farbe-ok: Weiss auf Fehlerrot */
  font-size: .9rem;
  font-weight: 700;
  text-transform: uppercase;
}

.ba__zeichen { display: flex; gap: 8px; flex: none; }
.ba__zeichen img { width: 58px; height: 58px; }
.ba__zeichen .raute--leer { width: 46px; height: 46px; margin: 6px; }

.ba__block { padding: 10px 0; border-bottom: 1px solid var(--rand-fein); break-inside: avoid; }
.ba__block h2 {
  margin: 0 0 6px;
  font-size: .95rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--schwach);
}
.ba__block p  { margin: 0 0 6px; font-size: 1rem; line-height: 1.5; }
.ba__block ul { margin: 0; padding-left: 20px; font-size: 1rem; line-height: 1.5; }

.ba__block--rot { border: 2px solid var(--fehler); border-radius: var(--radius); padding: 10px 12px; margin: 10px 0; }
.ba__block--rot h2 { color: var(--fehler); }
.ba__notruf { font-size: 1.1rem; }

.ba__psa { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 8px; }
.ba__psa span { display: flex; align-items: center; gap: 6px; color: var(--akzent); }
.ba__psa b { font-size: .9rem; color: var(--text); }

.ba__fuss { padding-top: 14px; }
.ba__unterschrift { flex: 1; max-width: 60mm; border-bottom: 1px solid var(--text); padding-top: 22px; }

@media print {
  /* Das Blatt soll allein auf dem Papier stehen. */
  .nav-seitlich, .konsole__kopf, .nicht-drucken, .tabbar, .hinweis { display: none !important; }
  
  .ba { margin: 0; padding: 0; border: 0; max-width: none; }
  .ba__block { break-inside: avoid; }
}

@media (max-width: 620px) {
  .ba { margin: 0; padding: 14px; border: 0; }
  .ba__stoff { flex-direction: column; }
}

/* --- Befunde der Zusammenlagerung ----------------------------------------- */

.befund {
  margin-bottom: 12px;
  padding: 12px 14px;
  border-left: 4px solid var(--fehler);
  border-radius: 0 var(--radius) var(--radius) 0;
  background: var(--flaeche2);
}

/* Lebensgefährliche Fälle behalten das Rot des Grundstils. Mittlere Schwere
   bleibt sichtbar, tritt aber zurück. */
.befund--hoch   { border-left-color: var(--fehler); }
.befund--mittel { border-left-color: var(--warn); }

.befund__ort {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--schwach);
}

.befund__paar { margin: 4px 0 6px; font-size: 1.05rem; font-weight: 600; }
.befund__paar span { font-weight: 400; color: var(--schwach); }
.befund p { margin: 0; line-height: 1.5; }

/* --- Warnung auf der Bildkarte -------------------------------------------- */

.g-karte__mischen {
  margin: 18px 0 0;
  padding: 12px 14px;
  border: 2px solid var(--fehler);
  border-radius: var(--radius);
}

.g-karte__mischen b {
  display: block;
  margin-bottom: 4px;
  font-size: .95rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--fehler);
}

.g-karte__mischen p { margin: 0 0 4px; font-size: 1.05rem; line-height: 1.45; }
.g-karte__mischen small { color: var(--schwach); }

/* --- Teilnehmerliste ------------------------------------------------------ */

/* Freie Spalte zum Unterschreiben. Auf dem Bildschirm sieht man die Linie,
   auf dem Papier schreibt man darauf. */
.liste--unterschrift td { height: 34px; }
.unterschriftsfeld { min-width: 55mm; border-bottom: 1px solid var(--rand); }

@media print {
  .liste--unterschrift td { height: 44px; }
  .unterschriftsfeld { border-bottom: 1px solid #999; }  /* feste-farbe-ok: Graustufe für den Druck */
}

/* --- Massnahmen ----------------------------------------------------------- */

.massnahme {
  margin-bottom: 12px;
  padding: 12px 14px;
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  background: var(--flaeche);
}

/* Über der Frist: linker Balken statt roter Fläche. Die Liste soll lesbar
   bleiben, auch wenn mehrere Einträge überfällig sind. */
.massnahme--spaet { border-left: 4px solid var(--fehler); }

.massnahme__kopf { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.massnahme__kopf b { font-size: 1.05rem; }
.massnahme p { margin: 6px 0 0; line-height: 1.5; }
.massnahme__zeile { font-size: .85rem; color: var(--schwach); }
.massnahme form { margin-top: 10px; }

/* --- Erste Schritte auf der Übersicht ------------------------------------- */

.g-schritte { padding-left: 22px; line-height: 1.6; }
.g-schritte li { margin-bottom: 10px; }
.g-schritte b { display: block; }

/* --- Bestätigung am Tablet ------------------------------------------------ */

/* Grosse Flächen: bedient wird mit Handschuhen, oft im Stehen. */
.uw__namen { display: grid; gap: 10px; margin-top: 18px; }

.uw__namen a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 64px;
  padding: 12px 18px;
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  background: var(--flaeche);
  color: var(--text);
  font-size: 1.2rem;
  text-decoration: none;
}

/* Wer schon bestätigt hat, bleibt sichtbar, tritt aber zurück: so sieht der
   Vorgesetzte auf einen Blick, wer noch fehlt. */
.uw__name--fertig { opacity: .55; color: var(--erfolg); }

.uw__fertig {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
  padding: 14px 16px;
  border-radius: var(--radius);
  background: var(--flaeche2);
  color: var(--erfolg);
  font-size: 1.1rem;
  font-weight: 600;
}

.uw__absatz { margin: 0 0 14px; font-size: 1.15rem; line-height: 1.6; }
.uw__vorlesen { margin: 6px 0 18px; }
.uw__erklaerung { margin: 22px 0 10px; font-size: 1rem; line-height: 1.5; color: var(--schwach); }

.uw__knoepfe { display: flex; gap: 10px; flex-wrap: wrap; }
.uw__bestaetigen { min-height: 60px; font-size: 1.15rem; padding: 0 28px; }

/* --- Tablet-Zugang in der Verwaltung -------------------------------------- */

.tablet {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  padding: 14px 16px;
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  background: var(--flaeche);
}

.tablet__qr { flex: none; width: 130px; }
.tablet__qr svg { width: 100%; height: auto; display: block; }
.tablet__link { font-size: .85rem; word-break: break-all; color: var(--schwach); }

@media (max-width: 620px) { .tablet { flex-direction: column; } }

/* --- Gegenüberstellung beim KI-Vorschlag ---------------------------------- */

/*
 * Drei Spalten: ankreuzen, bisheriger Wert, Vorschlag. Auf dem Telefon
 * untereinander, weil drei Spalten dort niemand liest.
 */
.gegen {
  display: grid;
  grid-template-columns: 220px 180px minmax(0, 1fr);
  gap: 10px 16px;
  align-items: start;
  padding: 10px 0;
  border-bottom: 1px solid var(--rand-fein);
}

.gegen__nimm { display: flex; align-items: center; gap: 10px; min-height: 40px; cursor: pointer; }
.gegen__nimm input { width: 20px; height: 20px; flex: none; }
.gegen__alt { padding-top: 10px; font-size: .85rem; color: var(--schwach); }
.gegen__neu .feld { margin-bottom: 8px; }

.marke {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0 10px 6px 0;
  padding: 6px 10px;
  border: 1px solid var(--rand);
  border-radius: var(--radius);
}

@media (max-width: 760px) {
  .gegen { grid-template-columns: 1fr; gap: 6px; }
  .gegen__alt { padding-top: 0; }
}

/* Farbwahl in der dunklen Seitenleiste der Verwaltung */
.nav-seitlich .farbwahl { justify-content: flex-start; padding: 0 10px; margin-top: 2px; }
.nav-seitlich .farbwahl a { color: var(--dunkel-schwach); padding: 0 8px; }
.nav-seitlich .farbwahl a[aria-current] { background: var(--dunkel-flaeche); color: var(--dunkel-text); }

/* Auf der Bildkarte tritt die Farbwahl zurück: sie ist für den Betrieb da,
   nicht für den, der am Bad steht. */
.g-karte .farbwahl { justify-content: flex-start; margin-top: 18px; }
.g-karte .farbwahl a { font-size: .8rem; }
@media print { .g-karte .farbwahl { display: none; } }

/* ===========================================================================
   Erscheinungsbild: Symbole, Kacheln, Zustandsfarben
   ---------------------------------------------------------------------------
   Grundsatz: ein Symbol steht für genau eine Sache und bleibt überall
   dasselbe. Farbe kommt nur dort dazu, wo sie einen Zustand meint, nie zur
   Verzierung. Wer alles einfärbt, hat am Ende nichts hervorgehoben.

   Alle Symbole sind einfarbig und laufen mit currentColor mit. Deshalb
   braucht die dunkle Fassung keinen zweiten Satz Dateien.
   ========================================================================= */

:root {
  /* Zarte Töne für Flächen mit Zustand. Absichtlich hier und nicht in der
     Farbwelt: sie gehören zu diesem Projekt, nicht zum Baukasten. */
  --ton-akzent: color-mix(in srgb, var(--akzent) 10%, var(--flaeche));
  --ton-fehler: color-mix(in srgb, var(--fehler) 10%, var(--flaeche));
  --ton-warn:   color-mix(in srgb, var(--warn) 12%, var(--flaeche));
  --ton-ok:     color-mix(in srgb, var(--erfolg) 10%, var(--flaeche));
}

/* Platzhalter, der den Rest einer Reihe nach rechts schiebt. Früher stand
   dafür ein style-Attribut im HTML, an acht Stellen. */
.dehnen { flex: 1; }

.knopfreihe--mitte { justify-content: center; margin-top: 12px; }

/* --- Seitenleiste --------------------------------------------------------- */

.nav-seitlich a { display: flex; align-items: center; gap: 10px; }
.nav-seitlich a svg { flex: none; }
.nav-seitlich a span { min-width: 0; }

.menu-zahl {
  margin-left: auto;
  min-width: 20px;
  padding: 1px 6px;
  border-radius: 10px;
  background: var(--dunkel-flaeche);
  color: var(--dunkel-schwach);
  font-size: .72rem;
  font-weight: 600;
  text-align: center;
}

/* Rot nur, wenn der Zähler auf etwas Offenes zeigt. */
.menu-zahl--warn { background: var(--fehler); color: #fff; } /* feste-farbe-ok: Weiss auf Fehlerrot */

.nav-seitlich__logo .zeichen {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* --- Kacheln auf der Übersicht -------------------------------------------- */

.g-kacheln {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  padding: 16px 18px 0;
}

.g-kachel {
  padding: 12px 14px;
  border-radius: var(--radius);
  background: var(--flaeche2);
  color: var(--schwach);
}

.g-kachel small { display: block; margin-top: 4px; font-size: .8rem; }
.g-kachel b { display: block; font-size: 1.6rem; font-weight: 500; color: var(--text); }

.g-kachel--fehler { background: var(--ton-fehler); color: var(--fehler); }
.g-kachel--fehler b { color: var(--fehler); }
.g-kachel--warn   { background: var(--ton-warn); color: var(--warn); }
.g-kachel--warn b { color: var(--warn); }

/* --- Aufgabenzeilen ------------------------------------------------------- */

.aufgaben { display: grid; gap: 8px; }

.aufgabe {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  background: var(--flaeche);
  color: var(--text);
  text-decoration: none;
}

.aufgabe:hover { border-color: var(--akzent); }
.aufgabe__zeichen { display: flex; flex: none; color: var(--schwach); }
.aufgabe__text { min-width: 0; flex: 1; }
.aufgabe__text b { display: block; font-size: 1rem; font-weight: 500; }
.aufgabe__text small { color: var(--schwach); }

/* Der Rahmen färbt sich, nicht die ganze Fläche: bei zehn offenen Punkten
   bleibt die Liste sonst unlesbar. */
.aufgabe--fehler { border-color: var(--fehler); }
.aufgabe--fehler .aufgabe__zeichen { color: var(--fehler); }
.aufgabe--lauf .aufgabe__zeichen { color: var(--warn); }

/* --- Symbolspalten in der Stoffliste -------------------------------------- */

.zeile-stoff { display: flex; align-items: center; gap: 10px; min-width: 0; }
.zeile-stoff__zeichen { display: flex; flex: none; color: var(--schwach); }

.marke-art {
  flex: none;
  padding: 2px 8px;
  border-radius: var(--radius);
  background: var(--flaeche2);
  color: var(--schwach);
  font-size: .72rem;
}

.zeichen-zustand {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--schwach);
  text-decoration: none;
}

.zeichen-zustand small { font-size: .75rem; }


.zeichen-zustand--ok     { color: var(--erfolg); }
.zeichen-zustand--lauf   { color: var(--warn); }
.zeichen-zustand--fehler { color: var(--fehler); }

/* Symbole in Tabellenzellen brauchen Luft, sonst trifft man auf dem Telefon
   den falschen. */
table.liste td a svg { margin-right: 8px; }

.suche { display: flex; align-items: center; gap: 8px; }
.suche svg { flex: none; color: var(--schwach); }

.knopf svg { margin-right: 6px; }

/* --- Seitenkopf ----------------------------------------------------------- */

/*
 * Vorher begann jede Seite unvermittelt mit Inhalt. Ohne Kopf weiss man nicht,
 * wo man ist, und die Seite hat keinen Anfang.
 */
.seitenkopf {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 18px 22px 0;
}

.seitenkopf h1 { margin: 0; font-size: 1.45rem; }
.seitenkopf__betrieb { font-size: .85rem; color: var(--schwach); }

/* --- Inhaltsbreite -------------------------------------------------------- */

/*
 * Ohne Begrenzung läuft alles über die volle Bildschirmbreite, und auf einem
 * breiten Schirm steht der Text in einer Zeile von 1700 Pixeln. Lesbar sind
 * etwa 70 bis 90 Zeichen.
 */
.konsole__haupt > .maske,
.konsole__haupt > .g-kacheln,
.konsole__haupt > .seitenkopf,
.konsole__haupt > .konsole__kopf,
.konsole__haupt > .hinweis,
.konsole__haupt > table.liste,
.konsole__haupt > .aufgaben { max-width: 1080px; }

.konsole__haupt > .maske { max-width: 860px; }

/* --- Kacheln: enger, mit mehr Inhalt -------------------------------------- */

.g-kacheln {
  display: grid;
  /* Dehnbare Spalten statt fester Breite: bei fünf Kacheln und begrenzter
     Inhaltsbreite rutschte sonst die fünfte allein in die zweite Zeile. */
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
  padding: 14px 22px 0;
}

.g-kachel {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 14px 16px;
  border: 1px solid var(--rand-fein);
  border-radius: var(--radius-gross);
  background: var(--flaeche2);
  color: var(--schwach);
}

.g-kachel small { font-size: .82rem; }
.g-kachel b { font-size: 1.7rem; font-weight: 600; line-height: 1.1; color: var(--text); }

/* --- Erste Schritte ------------------------------------------------------- */

/*
 * Eigener Name mit Präfix: .schritte ist im Baukasten eine waagrechte
 * Fortschrittsanzeige. Die Kollision hat diese Liste in fünf Spalten
 * zerlegt und die Nummerierung verschluckt.
 */
.g-schritte { padding-left: 0; list-style: none; counter-reset: schritt; }

.g-schritte li {
  position: relative;
  margin-bottom: 14px;
  padding-left: 40px;
  line-height: 1.6;
  counter-increment: schritt;
}

.g-schritte li::before {
  content: counter(schritt);
  position: absolute;
  left: 0;
  top: 1px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--flaeche2);
  color: var(--akzent);
  font-size: .85rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
}

.g-schritte b { display: block; font-weight: 600; }

/* --- Verteilerseite Einstellungen ----------------------------------------- */

.verteiler { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 10px; }

.verteiler__punkt {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--rand-fein);
  border-radius: var(--radius-gross);
  background: var(--flaeche);
  color: var(--text);
  text-decoration: none;
}

.verteiler__punkt:hover { border-color: var(--akzent); }
.verteiler__zeichen { display: flex; flex: none; color: var(--akzent); }
.verteiler__punkt b { display: block; font-weight: 600; }
.verteiler__punkt small { color: var(--schwach); }

/* --- Seitenleiste: Kontozeile unten --------------------------------------- */

.nav-seitlich { display: flex; flex-direction: column; }
.nav-seitlich__strich { height: 1px; background: var(--dunkel-flaeche); margin: 10px 15px; }

.nav-seitlich__konto {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 9px;
  border-top: 1px solid var(--dunkel-flaeche);
  padding-top: 12px;
}

.nav-seitlich__kuerzel {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  flex: none;
  border-radius: 50%;
  background: var(--akzent);
  color: var(--akzent-text);
  font-size: .72rem;
  font-weight: 600;
}

.nav-seitlich__abmelden { padding-top: 0 !important; padding-bottom: 12px !important; }

/* --- Einheitliche Breite im Inhaltsbereich -------------------------------- */

/*
 * Vorher endete die Trennlinie unter der Kopfzeile bei 1080 Pixeln, während
 * die Zahlenreihe darunter über die volle Breite lief. Zwei Kanten an
 * verschiedenen Stellen sehen nach Fehler aus, auch wenn beides Absicht wäre.
 */
.konsole__haupt > .konsole__kopf {
  margin: 0 22px;
  padding-left: 0;
  padding-right: 0;
  max-width: 1036px;
}

.konsole__haupt > .g-kacheln { padding-left: 22px; padding-right: 22px; }
.konsole__haupt > .seitenkopf { padding-left: 22px; padding-right: 22px; }

/* Der Betriebsname im Seitenkopf steht schon oben in der Leiste. Er bleibt
   als Hinweis für den Ausdruck und für den Fall mehrerer Betriebe, tritt
   aber deutlich zurück. */
.seitenkopf__betrieb { font-size: .8rem; }

@media (max-width: 860px) {
  .konsole__haupt > .konsole__kopf { margin: 0 12px; }
  .konsole__haupt > .g-kacheln,
  .konsole__haupt > .seitenkopf { padding-left: 12px; padding-right: 12px; }
}

/* --- Liste der Bildzeichen ------------------------------------------------ */

.zeichenliste {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
}

.zeichenliste__punkt {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 12px;
  border: 1px solid var(--rand-fein);
  border-radius: var(--radius-gross);
  background: var(--flaeche);
  text-align: center;
}

/* Weisser Grund auch in der dunklen Fassung: die Zeichen sind für weissen
   Untergrund gemacht, auf dunklem Grund verschwinden ihre schwarzen Teile. */
.zeichenliste__punkt img {
  width: 74px;
  height: 74px;
  object-fit: contain;
  background: #fff;   /* feste-farbe-ok: amtliche Zeichen stehen auf Weiss */
  border-radius: 6px;
  padding: 4px;
}

.zeichenliste__punkt b { font-size: .9rem; }
.zeichenliste__punkt small { font-size: .78rem; line-height: 1.3; }

/* ---------------------------------------------------------------------------
 * Zeichen in Auswahlfeldern (Stoffmaske: Gefahrenzeichen, Schutzausrüstung)
 *
 * Bild links, Bezeichnung gross, Code klein darunter. Das Bild ist gross genug,
 * um das Zeichen zu erkennen (44 px), aber nicht so gross, dass neun Felder
 * die Maske sprengen. Angekreuzte Felder heben sich ab: bei neun ähnlichen
 * Rauten sieht man sonst nicht auf einen Blick, was gewählt ist.
 * ------------------------------------------------------------------------- */

.ankreuzen .g-auswahl { gap: 12px; padding: 8px 12px; }
.ankreuzen .g-auswahl:has(input:checked) {
  border-color: var(--akzent);
  background: var(--ton-akzent);
}

.g-auswahl__bild {
  width: 44px;
  height: 44px;
  flex: none;
  object-fit: contain;
}

/* Kein Bild hochgeladen: gestrichelter Platzhalter statt einer Lücke */
.g-auswahl__bild--fehlt {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px dashed var(--rand);
  border-radius: var(--radius);
  color: var(--schwach);
  font-weight: 700;
}

/* Strichsymbol als Ersatz für ein fehlendes Gebotszeichen */
.g-auswahl__bild--symbol {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--akzent);
}

.ankreuzen .g-auswahl__text {
  display: block;
  font-size: .95rem;
  line-height: 1.25;
}

.g-auswahl__text small {
  display: block;
  margin-top: 2px;
  font-size: .78rem;
  color: var(--schwach);
}

/* Zeichen im KI-Vorschlag */
.g-marke__bild { width: 30px; height: 30px; flex: none; object-fit: contain; }

/* Gebotszeichen auf Bildkarte und Betriebsanweisung */
.g-psa__bild { width: 56px; height: 56px; object-fit: contain; }
.g-psa__bild--klein { width: 40px; height: 40px; }

/* ---------------------------------------------------------------------------
 * Gruppen und Schutzausrüstung (verwaltung/stammdaten.php)
 * ------------------------------------------------------------------------- */

.g-stamm__bild { width: 40px; height: 40px; object-fit: contain; vertical-align: middle; }
.g-stamm__bild--klein { width: 28px; height: 28px; }
.g-stamm__code { display: block; font-size: .78rem; color: var(--schwach); }
.g-stamm__partner { display: inline-flex; align-items: center; gap: 8px; }

/* Sprachen untereinander, Name links, Feld rechts; am Telefon untereinander */
.g-stamm__sprache {
  display: grid;
  grid-template-columns: 150px 1fr;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}
.g-stamm__sprachname { font-weight: 500; }
.g-stamm__fehler { grid-column: 2; }
@media (max-width: 560px) {
  .g-stamm__sprache { grid-template-columns: 1fr; gap: 4px; }
  .g-stamm__fehler { grid-column: 1; }
}

.g-stamm__nebenform {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 14px 0 6px;
}

/* Zeichenauswahl: Raster aus Kacheln, gewählte Kachel hervorgehoben */
.g-zeichenwahl__keins {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  margin-bottom: 8px;
  cursor: pointer;
}
.g-zeichenwahl__keins input { width: 20px; height: 20px; }

.g-zeichenwahl__raster {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  gap: 8px;
  max-height: 420px;
  overflow-y: auto;
}

.g-zeichenwahl__punkt {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 8px 6px;
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  background: var(--flaeche);
  text-align: center;
  cursor: pointer;
}
.g-zeichenwahl__punkt:hover { border-color: var(--akzent); }
.g-zeichenwahl__punkt:has(input:checked) {
  border: 2px solid var(--akzent);
  padding: 7px 5px;
  background: var(--ton-akzent);
}
.g-zeichenwahl__punkt:has(input:focus-visible) { outline: 2px solid var(--akzent); outline-offset: 2px; }

/* Der Knopf selbst bleibt bedienbar (Tastatur), aber unsichtbar */
.g-zeichenwahl__punkt input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}
.g-zeichenwahl__punkt img { width: 52px; height: 52px; object-fit: contain; }
.g-zeichenwahl__punkt small { font-size: .75rem; font-weight: 700; color: var(--schwach); }
.g-zeichenwahl__punkt span {
  font-size: .72rem;
  line-height: 1.2;
  color: var(--text);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}