/* EM-Hygiene — Gestaltung
   Mobil zuerst. Ruhig, sachlich, gut lesbar unter Neonlicht im Studio.
   Systemschriften: keine externen Schriftarten, kein Datenabfluss (DSGVO). */

:root {
  --tinte:      #10201f;
  --tinte-weich:#4a5f5d;
  --papier:     #f6f8f7;
  --flaeche:    #ffffff;
  --linie:      #dde5e3;
  --marke:      #0f766e;
  --marke-tief: #0b5952;
  --marke-hell: #e6f4f1;
  --gut:        #15803d;
  --gut-hell:   #e8f6ec;
  --warn:       #b45309;
  --warn-hell:  #fdf3e3;
  --fehler:     #b42318;
  --fehler-hell:#fdeceb;
  --rund:       12px;
  --schatten:   0 1px 2px rgba(16,32,31,.06), 0 4px 16px rgba(16,32,31,.05);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.55;
  color: var(--tinte);
  background: var(--papier);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--marke-tief); }

h1 { font-size: 1.5rem; margin: 0 0 .25rem; letter-spacing: -.01em; }
h2 { font-size: 1.075rem; margin: 0; letter-spacing: -.005em; }
h3 { font-size: .95rem; margin: 0 0 .5rem; }
p  { margin: .35rem 0; }

.unterzeile { color: var(--tinte-weich); margin: 0 0 1.25rem; font-size: .925rem; }

/* ── Kopfzeile ─────────────────────────────────────────────── */
.kopf {
  position: sticky; top: 0; z-index: 45;
  display: flex; align-items: center; gap: .7rem; padding: .6rem 1rem;
  background: var(--flaeche); border-bottom: 1px solid var(--linie);
}
.kopf .marke-klein { margin-right: auto; }
.kopf-rechts { margin-left: auto; }
.marke { display: flex; align-items: baseline; gap: .3rem; text-decoration: none; font-weight: 700; letter-spacing: -.02em; }
.marke-em   { color: var(--marke); font-size: 1.2rem; }
.marke-rest { color: var(--tinte); font-size: 1.05rem; }
.kopf-rechts { display: flex; align-items: center; gap: .75rem; }
.betrieb {
  font-size: .8rem; color: var(--tinte-weich); max-width: 34vw;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.konto-menue { position: relative; }
.konto-menue summary {
  list-style: none; cursor: pointer; padding: .35rem .7rem;
  border: 1px solid var(--linie); border-radius: 999px; font-size: .85rem; font-weight: 600;
  background: var(--papier);
}
.konto-menue summary::-webkit-details-marker { display: none; }
.konto-klapp {
  position: absolute; right: 0; top: calc(100% + .4rem); width: 15rem;
  background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--rund);
  box-shadow: var(--schatten); padding: .75rem; z-index: 50;
}
.konto-klapp a, .konto-klapp button {
  display: block; width: 100%; text-align: left; padding: .5rem .3rem;
  border: 0; background: none; font: inherit; color: var(--marke-tief);
  cursor: pointer; text-decoration: none; border-radius: 6px;
}
.konto-klapp a:hover, .konto-klapp button:hover { background: var(--marke-hell); }
.konto-name  { font-size: .85rem; margin: 0 0 .35rem; }
.konto-name small { color: var(--tinte-weich); }
.konto-rolle { font-size: .8rem; color: var(--tinte-weich); margin: 0 0 .5rem;
               padding-bottom: .5rem; border-bottom: 1px solid var(--linie); }

/* ── Navigation: linke Spalte ──────────────────────────────── */
.menue-schalter { position: absolute; opacity: 0; pointer-events: none; }

.seitennav {
  position: fixed; top: 0; left: 0; bottom: 0; width: 15rem; z-index: 60;
  background: var(--tinte); color: #dfe9e7;
  display: flex; flex-direction: column; overflow-y: auto;
  transform: translateX(-100%); transition: transform .18s ease-out;
  padding-bottom: env(safe-area-inset-bottom);
}
.menue-schalter:checked ~ .seitennav { transform: none; }

.seitennav .marke { padding: 1rem 1.1rem .8rem; }
.seitennav .marke-rest { color: #fff; }
.seitennav nav { flex: 1; padding: 0 .6rem 1rem; }

.navgruppe { margin-bottom: 1.1rem; }
.navgruppe-titel {
  display: block; padding: 0 .5rem .3rem; font-size: .68rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: #7f9995;
}
.seitennav .nav-item {
  display: flex; align-items: center; gap: .6rem;
  padding: .5rem .55rem; border-radius: 8px; margin-bottom: 1px;
  color: #cfe0dd; text-decoration: none; font-size: .89rem; font-weight: 500;
}
.seitennav .nav-item:hover { background: rgba(255,255,255,.07); color: #fff; }
.seitennav .nav-item.ist-aktiv { background: var(--marke); color: #fff; font-weight: 600; }
.nav-item svg, .fussnav svg {
  width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor;
  stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round;
}
.navfuss { padding: .8rem 1.1rem 1rem; font-size: .74rem; color: #7f9995; }
.navfuss a { color: #7f9995; }

/* ── Zahl am Menüpunkt: „hier liegt etwas Neues" ───────────────
   Zwei Signale gleichzeitig, weil eines allein zu leicht übersehen wird:
   der rote Kreis mit der Anzahl UND der hell gesetzte Menüpunkt.
   Nicht nur Farbe — die Zahl trägt die Aussage auch ohne Farbsehen. */
.nav-zahl {
  margin-left: auto; flex: none; min-width: 1.15rem; height: 1.15rem;
  padding: 0 .3rem; border-radius: 999px; background: var(--fehler);
  color: #fff; font-size: .7rem; font-weight: 700; line-height: 1.15rem;
  text-align: center; font-variant-numeric: tabular-nums;
}
.seitennav .nav-item.hat-hinweis { color: #fff; font-weight: 600; }
.seitennav .nav-item.hat-hinweis svg { stroke: var(--fehler); }
.seitennav .nav-item.ist-aktiv.hat-hinweis svg { stroke: currentColor; }
.seitennav .nav-item.ist-aktiv .nav-zahl { background: #fff; color: var(--marke); }

/* Am Handy sitzt die Zahl als kleiner Kreis oben rechts am Symbol. */
.menue-knopf { position: relative; }
.menue-knopf .nav-zahl,
.fussnav .nav-zahl {
  position: absolute; top: -.4rem; right: -.4rem; margin-left: 0;
  border: 2px solid var(--flaeche);
}
.fussnav a, .fussnav label { position: relative; }
/* Neben dem Symbol, nicht darauf — sonst ist beides schlechter lesbar. */
.fussnav .nav-zahl { top: .2rem; right: 50%; margin-right: -1.75rem; }
.fussnav .hat-hinweis { color: var(--fehler); }

.menue-schatten {
  position: fixed; inset: 0; z-index: 50; background: rgba(16,32,31,.45);
  opacity: 0; pointer-events: none; transition: opacity .18s;
}
.menue-schalter:checked ~ .menue-schatten { opacity: 1; pointer-events: auto; }

.menue-knopf {
  display: inline-flex; align-items: center; gap: .35rem; cursor: pointer;
  padding: .35rem .6rem; border: 1px solid var(--linie); border-radius: 8px;
  font-size: .82rem; font-weight: 600; background: var(--papier); flex: none;
}
.menue-knopf svg { width: 18px; height: 18px; fill: none; stroke: currentColor;
                   stroke-width: 2; stroke-linecap: round; }
/* Nur die Beschriftung „Menü" verschwindet am Handy — die Zahl nicht.
   Vorher stand hier `span`, und die Zahl war damit genau dort unsichtbar,
   wo sie am nötigsten ist: auf dem eingeklappten Menü. */
.menue-knopf > span:not(.nav-zahl) { display: none; }

/* ── Untere Leiste am Handy ────────────────────────────────── */
.fussnav {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 40;
  display: grid; grid-template-columns: repeat(4, 1fr);
  background: var(--flaeche); border-top: 1px solid var(--linie);
  padding-bottom: env(safe-area-inset-bottom);
}
.fussnav a, .fussnav label {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: .5rem .25rem; font-size: .68rem; text-decoration: none;
  color: var(--tinte-weich); font-weight: 500; cursor: pointer;
}
.fussnav a.ist-aktiv { color: var(--marke); }

/* ── Grundgerüst ───────────────────────────────────────────── */
.inhalt { min-height: 100vh; display: flex; flex-direction: column; }
main { max-width: 62rem; width: 100%; margin: 0 auto; padding: 1.1rem 1rem 5.5rem; flex: 1; }
main.breit { max-width: 82rem; }
/* Schmale Spalte nur für Anmelden/Registrieren — nicht für den Prüfzugang,
   der ohne Konto aufgerufen wird, aber die volle Breite braucht. */
body.offen main:not(.breit) { max-width: 26rem; padding-top: 3rem; }
body.offen main.breit { padding-top: 1.5rem; }

.karte {
  background: var(--flaeche); border: 1px solid var(--linie);
  border-radius: var(--rund); box-shadow: var(--schatten);
  padding: 1rem; margin-bottom: 1rem;
}
.karte-kopf {
  display: flex; align-items: center; justify-content: space-between;
  gap: .75rem; margin-bottom: .75rem; flex-wrap: wrap;
}

/* ── Meldungen ─────────────────────────────────────────────── */
.meldung {
  padding: .7rem .9rem; border-radius: var(--rund); margin-bottom: 1rem;
  font-size: .9rem; border: 1px solid transparent;
}
.meldung.gut    { background: var(--gut-hell);   border-color: #bfe3ca; color: #14532d; }
.meldung.fehler { background: var(--fehler-hell);border-color: #f4c9c5; color: #7a1811; }
.meldung.warn   { background: var(--warn-hell);  border-color: #f0dcb8; color: #713f12; }

.datenhinweis {
  font-size: .82rem; color: #713f12; background: var(--warn-hell);
  border: 1px solid #f0dcb8; border-radius: 10px; padding: .55rem .75rem; margin: .75rem 0;
}

/* ── Formulare ─────────────────────────────────────────────── */
label { display: block; font-size: .85rem; font-weight: 600; margin: .8rem 0 .25rem; }
label .zusatz { font-weight: 400; color: var(--tinte-weich); }

input[type=text], input[type=email], input[type=password], input[type=date],
input[type=tel], input[type=number], select, textarea {
  width: 100%; padding: .62rem .7rem; font: inherit; font-size: 16px;
  color: var(--tinte); background: var(--flaeche);
  border: 1px solid var(--linie); border-radius: 9px;
}
/* Kennwort sichtbar machen — der Knopf wird vom Skript in das Feld gesetzt.
   Marcela am 02.09.: „ein kleines Auge, damit man das Passwort kontrollieren kann." */
.kennwort-huelle { position: relative; }
.kennwort-huelle input { padding-right: 2.9rem; }
.kennwort-auge {
  position: absolute; right: .3rem; top: 50%; transform: translateY(-50%);
  width: 2.3rem; height: 2.3rem; padding: .45rem; margin: 0;
  display: grid; place-items: center;
  background: none; border: 0; border-radius: 8px; cursor: pointer;
  color: var(--tinte-weich); box-shadow: none;
}
.kennwort-auge:hover { color: var(--tinte); background: var(--papier); }
.kennwort-auge:focus-visible { outline: 2px solid var(--marke); outline-offset: -2px; }
.kennwort-auge svg { width: 1.15rem; height: 1.15rem; display: block; }

input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--marke); outline-offset: 1px; border-color: var(--marke);
}
select { appearance: none; background-image:
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234a5f5d' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .55rem center; background-size: 18px;
  padding-right: 2.2rem; }

.feldpaar { display: grid; gap: 0 .75rem; }
@media (min-width: 34rem) { .feldpaar { grid-template-columns: 1fr 1fr; } }

button, .knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  padding: .62rem 1.05rem; font: inherit; font-weight: 600; font-size: .92rem;
  border-radius: 9px; border: 1px solid transparent; cursor: pointer;
  background: var(--marke); color: #fff; text-decoration: none;
}
button:hover, .knopf:hover { background: var(--marke-tief); }
button:disabled { opacity: .5; cursor: not-allowed; }
.knopf.still, button.still {
  background: var(--flaeche); color: var(--tinte); border-color: var(--linie);
}
.knopf.still:hover, button.still:hover { background: var(--papier); }
.knopf.klein, button.klein { padding: .38rem .7rem; font-size: .82rem; }
.knopf.gefahr, button.gefahr { background: var(--fehler); }
.knopfzeile { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: 1.1rem; }

/* ── Listen und Tabellen ───────────────────────────────────── */
.liste { list-style: none; margin: 0; padding: 0; }
.liste > li {
  padding: .8rem 0; border-bottom: 1px solid var(--linie);
  display: flex; gap: .8rem; align-items: flex-start; justify-content: space-between;
}
.liste > li:last-child { border-bottom: 0; padding-bottom: 0; }
.liste .haupt { font-weight: 600; }
.liste .neben { font-size: .83rem; color: var(--tinte-weich); }

.tabelle-huelle { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table { width: 100%; border-collapse: collapse; font-size: .88rem; }
th, td { text-align: left; padding: .55rem .6rem; border-bottom: 1px solid var(--linie); vertical-align: top; }
th { font-size: .76rem; text-transform: uppercase; letter-spacing: .04em; color: var(--tinte-weich); font-weight: 700; }
tbody tr:last-child td { border-bottom: 0; }

.badge {
  display: inline-block; padding: .12rem .5rem; border-radius: 999px;
  font-size: .72rem; font-weight: 700; white-space: nowrap;
}
.prio-kritisch { background: var(--fehler-hell); color: #7a1811; }
.prio-hoch     { background: var(--warn-hell);   color: #713f12; }
.prio-mittel   { background: var(--marke-hell);  color: var(--marke-tief); }
.prio-niedrig  { background: var(--papier);      color: var(--tinte-weich); }
.st-gut   { background: var(--gut-hell);  color: #14532d; }
.st-offen { background: var(--marke-hell);color: var(--marke-tief); }
.st-warn  { background: var(--warn-hell); color: #713f12; }
.st-info  { background: #eef2ff;          color: #3730a3; }

.leer { text-align: center; padding: 2rem 1rem; color: var(--tinte-weich); }
.leer p { margin-bottom: .9rem; }

/* ── Kennzahlen ────────────────────────────────────────────── */
.kacheln { display: grid; gap: .75rem; grid-template-columns: repeat(2, 1fr); margin-bottom: 1rem; }
@media (min-width: 46rem) { .kacheln { grid-template-columns: repeat(4, 1fr); } }
.kachel {
  background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--rund);
  padding: .85rem; box-shadow: var(--schatten); text-decoration: none; color: inherit; display: block;
}
.kachel .zahl { font-size: 1.7rem; font-weight: 700; line-height: 1.1; letter-spacing: -.02em; }
.kachel .titel { font-size: .78rem; color: var(--tinte-weich); font-weight: 600; }
.kachel.achtung .zahl { color: var(--fehler); }
.kachel.gut .zahl { color: var(--gut); }

/* ── Aufgabe abhaken ───────────────────────────────────────── */
.aufgabe { border: 1px solid var(--linie); border-radius: var(--rund); background: var(--flaeche);
           padding: .85rem; margin-bottom: .7rem; box-shadow: var(--schatten); }
.aufgabe-kopf { display: flex; justify-content: space-between; gap: .6rem; align-items: flex-start; }
.aufgabe h3 { margin: 0; font-size: .97rem; }
.aufgabe .meta { font-size: .8rem; color: var(--tinte-weich); margin-top: .15rem; }
.aufgabe details { margin-top: .7rem; }
.aufgabe summary { cursor: pointer; font-size: .87rem; font-weight: 600; color: var(--marke-tief); }

.unterschrift-feld { margin-top: .5rem; }
/* Das Feld war so blass, dass es uebersehen wurde — Marcela und Kai am 02.09.
   hielten es fuer gar nicht vorhanden. Jetzt kraeftiger umrandet, mit einer
   angedeuteten Unterschriftslinie wie auf Papier. Der Hinweis „hier
   unterschreiben" zeichnet das Skript ins Feld und loescht ihn beim ersten
   Strich. */
canvas.unterschrift {
  width: 100%; height: 150px; border: 2px dashed #b9c9c6;
  border-radius: 9px; background: var(--papier); touch-action: none; display: block;
  cursor: crosshair;
}
canvas.unterschrift:hover { border-color: var(--marke); }
.unterschrift-hilfe { display: flex; justify-content: space-between; align-items: center;
                      font-size: .78rem; color: var(--tinte-weich); margin-top: .3rem; }

/* ── Nachweiskette ─────────────────────────────────────────── */
.kette { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .74rem; color: var(--tinte-weich); }
.kette-gut { color: var(--gut); font-weight: 700; }
.kette-fehler { color: var(--fehler); font-weight: 700; }

/* ── Vorschriften ──────────────────────────────────────────── */
.vorschrift { border-bottom: 1px solid var(--linie); padding: .85rem 0; }
.vorschrift:last-child { border-bottom: 0; }
.vorschrift h3 { margin: 0 0 .2rem; font-size: .93rem; }
.vorschrift .quelle { font-size: .78rem; color: var(--tinte-weich); }
.vorschrift .zusammenfassung { font-size: .87rem; margin: .35rem 0; }
.filterzeile { display: grid; gap: .6rem; margin-bottom: 1rem; }
@media (min-width: 40rem) { .filterzeile { grid-template-columns: 1fr 1fr auto; align-items: end; } }

.fuss { text-align: center; font-size: .78rem; color: var(--tinte-weich);
        padding: 1.25rem 1rem calc(4.75rem + env(safe-area-inset-bottom)); }
body.angemeldet .fuss { display: none; }
body.offen .fuss { padding-bottom: 1.5rem; }
body.offen main.breit + .fuss { padding-bottom: 1.5rem; }
.fuss a { color: var(--tinte-weich); }

/* ── Anmeldeseiten ─────────────────────────────────────────── */
.anmelde-marke { text-align: center; margin-bottom: 1.5rem; }
.anmelde-marke .gross { font-size: 1.9rem; font-weight: 700; letter-spacing: -.03em; }
.anmelde-marke .gross span { color: var(--marke); }
.anmelde-marke p { color: var(--tinte-weich); font-size: .9rem; }
.wechsel { text-align: center; margin-top: 1.1rem; font-size: .88rem; }

/* ── Größere Bildschirme: Spalte bleibt stehen ─────────────── */
@media (min-width: 60rem) {
  .seitennav { transform: none; }
  .menue-schatten { display: none; }
  .menue-knopf, .fussnav, .kopf .marke-klein { display: none; }
  .inhalt { margin-left: 15rem; }
  main { padding-bottom: 2rem; }
  .fuss { padding-bottom: 1.5rem; }
  .betrieb { max-width: 22rem; font-size: .85rem; }
  .kopf { padding: .6rem 1.4rem; }
}

@media (min-width: 30rem) {
  .menue-knopf span { display: inline; }
}

@media print {
  .kopf, .seitennav, .fussnav, .menue-schatten, .menue-knopf, .knopfzeile, form, .fuss { display: none !important; }
  .inhalt { margin-left: 0 !important; }
  body { background: #fff; }
  .karte { box-shadow: none; border-color: #ccc; page-break-inside: avoid; }
  main { padding: 0; max-width: none; }
}

/* ── Bausteine statt Inline-Stilen (strenge Inhaltsrichtlinie) ── */
.knopfzeile.eng { margin: 0; }
/* Knoepfe in einer Meldung (fehlende Dokumentarten) sitzen enger am Text. */
.meldung .knopfzeile { margin-top: .6rem; }
/* Wird vom Skript gesetzt, sobald keine Platzhalter mehr offen sind. */
.versteckt { display: none !important; }

/* Begehung: ein Klick je Prüfpunkt statt einer Auswahlliste.
   Marcela am 01.09.: „bitte häckchen wo man einfach anklickt."
   Die Fläche ist bewusst gross genug für einen Daumen (~44 px). */
.ergebniswahl { border: 0; padding: 0; margin: .2rem 0 0; }
.ergebniswahl legend { font-weight: 600; font-size: .95rem; padding: 0; margin-bottom: .4rem; }
.ergebniswahl { display: flex; flex-wrap: wrap; gap: .45rem; }
.ergebniswahl legend { flex-basis: 100%; }
.ergebniswahl .wahl { position: relative; display: inline-flex; }
.ergebniswahl input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.ergebniswahl span {
  display: inline-block; padding: .62rem .95rem; border-radius: 999px;
  border: 1px solid var(--linie); background: var(--flaeche);
  font-size: .93rem; line-height: 1.15; color: var(--tinte-weich);
  cursor: pointer; user-select: none; transition: background .12s, border-color .12s, color .12s;
}
.ergebniswahl .wahl:hover span { border-color: var(--tinte-weich); }
.ergebniswahl input:focus-visible + span { outline: 2px solid var(--marke); outline-offset: 2px; }
.ergebniswahl input:checked + span { font-weight: 600; color: var(--flaeche); }
.ergebniswahl .w-erfuellt         input:checked + span { background: var(--gut);    border-color: var(--gut); }
.ergebniswahl .w-nicht_erfuellt   input:checked + span { background: var(--fehler); border-color: var(--fehler); }
.ergebniswahl .w-nicht_zutreffend input:checked + span { background: var(--tinte-weich); border-color: var(--tinte-weich); }
.ergebniswahl .w-offen            input:checked + span { background: var(--papier); border-color: var(--tinte-weich); color: var(--tinte); }
@media print { .ergebniswahl { display: none; } }

/* Der Rat im Einrichtungs-Assistenten: die App beantwortet die Frage,
   bevor sie sie stellt. Marcela am 01.09. zur Sterilisator-Frage:
   „die meisten Maedels wissen nicht ob sie einen brauchen." */
.rat { border-radius: var(--rund); padding: .8rem 1rem; margin: .55rem 0 .7rem;
       border: 1px solid; font-size: .95rem; line-height: 1.5; }
.rat strong { display: block; margin-bottom: .15rem; }
.rat.ton-gut  { background: var(--gut-hell);   border-color: #bfe3ca; color: #14532d; }
.rat.ton-info { background: var(--marke-hell); border-color: #b9ded8; color: var(--marke-tief); }
.rat.ton-warn { background: var(--warn-hell);  border-color: #f0dcb8; color: #713f12; }

/* Ein zurueckgezogener Nachweis bleibt sichtbar, aber erkennbar aufgehoben. */
tr.aufgehoben > td { opacity: .62; }
tr.aufgehoben > td:nth-child(2) { text-decoration: line-through; }
/* Fundstelle neben der Planzeile — leise, aber im Ausdruck lesbar. */
/* Mehrere Absaetze stehen untereinander statt in einer langen Zeile —
   sonst sprengt die Spalte die Tabelle und wird rechts abgeschnitten. */
td.fundstelle { white-space: pre; font-size: .82rem; line-height: 1.45;
  color: var(--tinte-weich); }
/* Der Ruecknahmegrund innerhalb der Meldung — schlicht, nicht als Kasten im Kasten. */
.meldung .vorformatiert.klein { font-size: .87rem; margin: .5rem 0 0; background: none;
  border: 0; padding: 0; opacity: .9; }
.zeilenform { display: flex; gap: .35rem; align-items: center; }
.zeilenform.umbrechend { flex-wrap: wrap; }
.zeilenform select { min-width: 7rem; }
.suchfeld { width: 12rem; }
mark.offen { background: #fdf3e3; padding: 0 .25rem; border-radius: 4px; }

/* ── Desinfektionsplan und Unterweisung ────────────────────── */
table.planeditor input { border: 0; border-bottom: 1px solid var(--linie); border-radius: 0;
                         padding: .4rem .2rem; font-size: .88rem; min-width: 9rem; }
table.planeditor input:focus { outline: none; border-bottom: 2px solid var(--marke); background: var(--marke-hell); }
table.planeditor td { padding: .2rem .3rem; }
/* ── Wasserzeichen bei abgelaufener Testphase ─────────────────────
   Kai am 03.09.: „etwas, das der Interessent mit der App nicht wirklich
   etwas anfangen kann." Erst NACH Ablauf — waehrend der Testphase soll sie
   arbeiten und Daten eintragen; genau diese investierte Arbeit ist der
   Kaufgrund.

   Es liegt ueber allem (fixed, hoher Stapel) und faengt keine Klicks
   (pointer-events: none) — bezahlen und lesen bleiben moeglich.

   Und es gilt ausdruecklich AUCH im Druck. Damit ist die Luecke geschlossen,
   die die PDF-Sperre offen liess: Strg+P laesst sich nicht verhindern, aber
   ein Ausdruck mit „MUSTER" quer darueber ist vor dem Gesundheitsamt kein
   Nachweis. */
body.muster::after {
  content: '';
  position: fixed; inset: 0; z-index: 9998; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='260'%3E%3Ctext x='210' y='150' font-family='Helvetica,Arial,sans-serif' font-size='52' font-weight='700' fill='%23b42318' fill-opacity='0.13' text-anchor='middle' transform='rotate(-24 210 130)'%3EMUSTER%3C/text%3E%3C/svg%3E");
  background-repeat: repeat;
}
@media print {
  body.muster::after {
    position: absolute; height: 100%;
    /* Im Druck deutlicher — sonst verschwindet es im Toner. */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='260'%3E%3Ctext x='210' y='150' font-family='Helvetica,Arial,sans-serif' font-size='52' font-weight='700' fill='%23999' fill-opacity='0.3' text-anchor='middle' transform='rotate(-24 210 130)'%3EMUSTER%3C/text%3E%3C/svg%3E");
    display: block !important;
  }
}

/* Anklickbare Sprungmarke zu einer offenen Stelle im Formular. Im Textfeld
   selbst laesst sich nichts einfaerben — ein Textarea kennt keine Formatierung.
   Deshalb springt man ueber diese Marken hinein. */
.stelle-springen {
  background: #e7ecea; color: var(--tinte); border: 1px solid #b9c9c6;
  border-radius: 4px; padding: .12rem .4rem; margin: 0 .1rem .2rem 0;
  font: inherit; font-size: .82rem; font-weight: 600; cursor: pointer;
  box-shadow: none; min-height: 0;
}
.stelle-springen:hover { background: var(--marke); border-color: var(--marke); color: #fff; }
.stelle-springen:focus-visible { outline: 2px solid var(--marke); outline-offset: 1px; }

/* Platzhalter in Vorlagen sichtbar machen (Marcela, 03.09.). Grau statt bunt,
   damit der Ausdruck fuer das Amt nicht nach Entwurf aussieht. */
mark.platzhalter {
  background: #e7ecea; color: var(--tinte); border-radius: 4px;
  padding: .05em .3em; box-decoration-break: clone;
  border-bottom: 2px solid #b9c9c6; font-weight: 600;
}
@media print { mark.platzhalter { background: #eee; border-bottom: 1px solid #999; } }

.vorformatiert { white-space: pre-wrap; font: inherit; font-size: .9rem; margin: 0;
                 background: var(--papier); padding: .8rem; border-radius: 9px; }
.unterschrift-bild { max-width: 260px; height: auto; border: 1px solid var(--linie);
                     border-radius: 8px; background: #fff; }
.unterschrift-bild.klein { max-width: 150px; }
label.zeilenform { margin: .4rem 0; font-weight: 500; }
label.zeilenform input[type=checkbox] { width: auto; margin: 0; }
textarea { min-height: 6rem; resize: vertical; }

/* ── Prüfzugang ────────────────────────────────────────────── */
.pruefcode {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 1.45rem; font-weight: 700; letter-spacing: .06em;
  background: #fff; border: 2px dashed var(--gut); border-radius: 10px;
  padding: .7rem .9rem; margin: .6rem 0; text-align: center; color: var(--tinte);
  user-select: all;
}
input.codefeld {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 1.15rem; letter-spacing: .12em; text-align: center; text-transform: uppercase;
}

/* ── Begehung ──────────────────────────────────────────────── */
.aufgabe.mangel { border-left: 4px solid var(--warn); }
.aufgabe .badge { margin-right: .3rem; }
.aufgabe.abweichend { border-left: 4px solid var(--warn); background: var(--warn-hell); }

/* ── Ankreuzliste für Behandlungen ─────────────────────────── */
.ankreuzliste { display: grid; gap: .1rem; margin-top: .3rem; }
@media (min-width: 40rem) { .ankreuzliste { grid-template-columns: 1fr 1fr; } }
.ankreuzliste label { margin: .15rem 0; font-weight: 400; }

/* ── Unterschriftenblock im Ausdruck ───────────────────────── */
.unterschriftenblock { display: grid; gap: 2rem; margin: 2.5rem 0 .5rem; }
@media (min-width: 34rem) { .unterschriftenblock { grid-template-columns: 1fr 1fr; } }
.unterschriftenblock .linie { border-bottom: 1px solid var(--tinte); height: 2.2rem; }
.unterschriftenblock span { font-size: .8rem; color: var(--tinte-weich); }

@media print {
  /* Kein Bedienelement gehört auf Papier — auch kein einzelner Knopf
     ausserhalb einer Knopfzeile. */
  button, .knopf { display: none !important; }
  .unterschriftenblock { page-break-inside: avoid; }
  table { font-size: 9.5pt; }
  h1 { font-size: 16pt; }
  a[href]::after { content: ""; }
}

/* ── Hygieneplan als Gesamtdokument ────────────────────────── */
.planteil.fehlt { border-left: 4px solid var(--warn); }
@media print {
  .nichtdrucken { display: none !important; }
  .planteil { page-break-inside: avoid; }
  .planteil h2 { page-break-after: avoid; }
}

/* ── Tagesplan ─────────────────────────────────────────────── */
.planliste > li { align-items: center; }
.planliste .zeilenform { flex: 1; align-items: flex-start; margin: 0; }
.planliste .zeilenform > span { display: flex; flex-direction: column; }
.planliste input[type=checkbox] { width: 22px; height: 22px; margin-top: .1rem; }
.unterschriftsfeld { display: none; }
.druckkopf, .nurdrucken { display: none; }

@media print {
  .nichtdrucken { display: none !important; }
  .nurdrucken { display: grid !important; }
  .druckkopf { display: block !important; margin-bottom: .8rem; }
  .druckkopf h2 { font-size: 14pt; }
  /* Auf Papier wird handschriftlich abgezeichnet */
  .planliste input[type=checkbox] { -webkit-appearance: none; appearance: none;
    border: 1.5px solid #333; width: 16px; height: 16px; border-radius: 3px; }
  .unterschriftsfeld { display: block; width: 34mm; border-bottom: 1px solid #999; height: 1.1rem; }
  .planliste > li { padding: .45rem 0; }
  .badge { border: 1px solid #ccc; background: none !important; color: #333 !important; }
}

/* ── Zusammengelegter Tagesplan ────────────────────────────── */
.planzeile { flex-direction: column; align-items: stretch; gap: .3rem; }
.planzeile-kopf { display: flex; align-items: center; gap: .8rem; }
.planzeile-kopf .zeilenform { flex: 1; }
.einzeln > summary { font-size: .82rem; color: var(--marke-tief); cursor: pointer;
                     padding: .2rem 0 .2rem 2.1rem; font-weight: 500; }
.einzeln > form { padding: .3rem 0 .8rem 2.1rem; border-left: 2px solid var(--linie);
                  margin-left: .55rem; padding-left: 1.5rem; }
@media print { .einzeln { display: none !important; } }
.karte.pflichten { border-left: 4px solid var(--warn); }

/* ── Rechtstexte: lange Absätze müssen lesbar bleiben ──────────── */
.rechtstext { max-width: 46rem; margin-inline: auto; }
.rechtstext h2 { margin: 1.7rem 0 .5rem; font-size: 1rem; }
.rechtstext p { margin: 0 0 .7rem; line-height: 1.65; }
.rechtstext mark.offen {
  background: var(--warn-hell); color: #713f12; padding: 0 .25rem;
  border-radius: 4px; font-size: .9em;
}

/* ── Exportliste ───────────────────────────────────────────────── */
.exportzeile {
  display: flex; align-items: center; gap: 1rem; justify-content: space-between;
  padding: .8rem 0; border-bottom: 1px solid var(--linie);
}
.exportzeile:last-child { border-bottom: 0; }
.exportzeile .haupt { font-weight: 600; }
.exportzeile .neben { font-size: .85rem; color: var(--tinte-weich); }

/* ── Einrichtungs-Assistent ────────────────────────────────────── */
.schrittleiste {
  display: flex; flex-wrap: wrap; gap: .5rem; list-style: none;
  margin: 0 0 1.2rem; padding: 0;
}
.schrittleiste li {
  display: flex; align-items: center; gap: .45rem; flex: 1 1 9rem;
  padding: .55rem .7rem; border: 1px solid var(--linie); border-radius: 10px;
  background: var(--flaeche); font-size: .85rem; color: var(--tinte-weich);
}
.schrittleiste .marke {
  display: grid; place-items: center; width: 1.4rem; height: 1.4rem; flex: none;
  border-radius: 999px; background: var(--papier); border: 1px solid var(--linie);
  font-size: .78rem; font-weight: 700;
}
.schrittleiste li.fertig { border-color: #bfe3cb; background: var(--gut-hell); color: #14532d; }
.schrittleiste li.fertig .marke { background: var(--gut); border-color: var(--gut); color: #fff; }
.schrittleiste li.dran { border-color: var(--marke); background: var(--marke-hell); color: var(--marke-tief); font-weight: 600; }
.schrittleiste li.dran .marke { background: var(--marke); border-color: var(--marke); color: #fff; }

.ankreuzfeld {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: .3rem; margin: .6rem 0 1rem;
}
.ankreuz {
  display: flex; align-items: center; gap: .55rem; padding: .5rem .6rem;
  border: 1px solid var(--linie); border-radius: 8px; cursor: pointer; font-size: .9rem;
}
.ankreuz:hover { background: var(--papier); }
.ankreuz input { flex: none; width: 1.05rem; height: 1.05rem; margin: 0; }

/* ── Prüfliste im Kontroll-Check ───────────────────────────────── */
.pruefliste .zeichen {
  display: inline-grid; place-items: center; width: 1.3rem; height: 1.3rem;
  border-radius: 999px; margin-right: .5rem; font-weight: 700; font-size: .8rem;
  vertical-align: -.2rem;
}
.pruefliste .st-gut   .zeichen { background: var(--gut-hell);   color: var(--gut); }
.pruefliste .st-warn  .zeichen { background: var(--warn-hell);  color: var(--warn); }
.pruefliste .st-fehlt .zeichen { background: var(--fehler-hell);color: var(--fehler); }
.pruefliste .st-fehlt .haupt { font-weight: 700; }
/* 'leer' = es gibt noch nichts zu pruefen. Weder Haken noch Mangel —
   sonst behauptet die Liste Erfolge, die keine sind (Marcela, 02.09.). */
.pruefliste .st-leer  .zeichen { background: var(--papier); color: var(--tinte-weich); }
.pruefliste .st-leer  .haupt, .pruefliste .st-leer .neben { color: var(--tinte-weich); }

/* ── Behandlungen nach Kategorie ───────────────────────────────── */
.behandlungsgruppe {
  border: 1px solid var(--linie); border-radius: 10px;
  padding: .3rem .9rem .9rem; margin: 0 0 .9rem;
}
.behandlungsgruppe legend {
  padding: 0 .4rem; font-size: .78rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: var(--marke);
}
.behandlungsgruppe .ankreuzfeld { margin: .2rem 0 0; }

/* ── Betriebsmerkmale ──────────────────────────────────────────
   Ein langes Formular. Damit es nicht erschlägt: Gruppen mit Abstand,
   die Begründung direkt unter der Frage — wer versteht, warum gefragt
   wird, antwortet genauer. */
.merkmalsgruppe {
  border: 1px solid var(--linie); border-radius: 10px;
  padding: .3rem 1rem 1rem; margin: 0 0 1.2rem;
}
.merkmalsgruppe legend {
  padding: 0 .4rem; font-size: .78rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: var(--marke);
  /* Am Handy brechen die längeren Überschriften auf zwei Zeilen um. Ohne
     eigenen Hintergrund läuft die zweite Zeile durch den Rahmen des
     Fieldsets. Nur am Screenshot zu sehen, nicht an einer Prüfung. */
  background: var(--flaeche);
}
.merkmalsgruppe > .neben { margin: .5rem 0 0; }
.merkmalfeld { margin: 1.1rem 0 0; }
.merkmalfeld + .merkmalfeld { border-top: 1px solid var(--linie); padding-top: 1.1rem; }
.merkmalfeld > label { display: block; font-weight: 600; margin-bottom: .15rem; }
.merkmalfeld .neben { margin: .1rem 0 .5rem; font-size: .85rem; color: var(--tinte-weich); }
.merkmalfeld .neben.stark { color: var(--warn); font-weight: 600; }
.merkmalfeld .ankreuzfeld { margin: .4rem 0 0; }
/* Ja/Nein nebeneinander statt über die volle Breite. */
.ankreuzfeld.schmal { grid-template-columns: repeat(2, minmax(0, 7rem)); }
.pflicht { color: var(--fehler); font-weight: 700; }
/* Ausgeblendete abhängige Fragen. Ohne diese Regel setzt sich das
   grid/flex-Layout gegen das hidden-Attribut durch und das Feld bleibt
   trotzdem stehen. */
[hidden] { display: none !important; }

/* ── Länderprofil in den Vorschriften ──────────────────────────
   Die landesrechtlichen Unterschiede sind erheblich — Sachsen verlangt
   30 Jahre Aufbewahrung, Hessen 5. Das gehört als Tabelle sichtbar,
   nicht in einen Fließtext. */
.landesprofil { display: grid; gap: .1rem .9rem; margin: .8rem 0 .4rem; }
@media (min-width: 34rem) { .landesprofil { grid-template-columns: max-content 1fr; } }
.landesprofil dt {
  font-size: .78rem; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--tinte-weich); padding-top: .35rem;
}
.landesprofil dd { margin: 0 0 .35rem; }
@media (min-width: 34rem) { .landesprofil dd { padding-top: .3rem; } }

/* ── Aufklappbare Erläuterung am Formularfeld ──────────────────
   Für Angaben, die Fachwissen verlangen — etwa die Sterilisator-Klassen
   nach DIN EN 13060. Bewusst <details> statt Tooltip: ohne JavaScript
   bedienbar, am Handy antippbar, im Ausdruck lesbar. */
.erklaerung { margin: .5rem 0 0; font-size: .88rem; }
.erklaerung summary {
  cursor: pointer; color: var(--marke-tief); font-weight: 600;
  display: flex; align-items: center; gap: .4rem; padding: .3rem 0;
  list-style: none;
}
.erklaerung summary::-webkit-details-marker { display: none; }
.i-zeichen {
  display: inline-grid; place-items: center; flex: none;
  width: 1.15rem; height: 1.15rem; border-radius: 999px;
  background: var(--marke); color: #fff;
  font-size: .75rem; font-weight: 700; font-style: italic;
}
.erklaerung[open] summary { margin-bottom: .3rem; }
.erklaerung dl {
  margin: 0; padding: .6rem .8rem; background: var(--papier);
  border-radius: 8px; border: 1px solid var(--linie);
}
.erklaerung dt { font-weight: 700; margin-top: .5rem; }
.erklaerung dt:first-child { margin-top: 0; }
.erklaerung dd { margin: .1rem 0 0; color: var(--tinte-weich); }

/* ── Freigabe des Hygieneplans ─────────────────────────────────
   Ersetzt die leeren Unterschriftslinien, sobald jemand freigegeben hat.
   Im Ausdruck steht dann Name, Ort, Datum und die gezeichnete
   Unterschrift — der Plan ist damit auch digital von jemandem
   verantwortet, nicht nur auf Papier. */
.freigabe { margin: 2rem 0 .5rem; }
.freigabe-zeile { display: grid; gap: 2rem; grid-template-columns: 1fr 1fr; }
.freigabe-zeile > div { border-top: 1px solid var(--tinte); padding-top: .3rem; }
.freigabe-wert { font-weight: 600; }
.freigabe-zeile span { font-size: .8rem; color: var(--tinte-weich); }
.freigabe-bild { max-height: 3.5rem; display: block; margin-bottom: .2rem; }
/* Die Unterschrift wird ueber der Linie gezeichnet, nicht darunter. */
.freigabe-zeile > div:has(.freigabe-bild) { border-top: 0; border-bottom: 1px solid var(--tinte); padding: 0 0 .3rem; }
.freigabe-form summary .i-zeichen { background: var(--gut); font-style: normal; }
@media print { .nichtdrucken { display: none !important; } }