/* Crew App im Kaiser-Friedrich-Design-System (Brand Book V2, 26.09.2026).
   Grundsätze daraus, hier umgesetzt: Leinen/Spreenacht/Messing, Kalista für
   Überschriften (ab 22px, Regular), Inter für alles Bedienbare, EINE Form
   (eckig – keine Radien, keine Schatten, keine Verläufe), Linien nur
   strukturell, Abstände in 8px-Schritten. Die maritime Hintergrund-Deko
   (Anker/Seil) ist bewusst gestrichen: keine Symbole als Schmuck.
   Funktionsfarben (grün/gelb/rot für Status und Alarme) sind kein Teil der
   Markenpalette, bleiben aber erhalten – Sicherheit schlägt Reinlehre. */

@font-face{font-family:"Kalista Serif";src:url("/static/fonts/KalistaSerif-Regular.ttf") format("truetype");
  font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:"Inter";src:url("/static/fonts/Inter-Regular.ttf") format("truetype");
  font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:"Inter";src:url("/static/fonts/Inter-SemiBold.ttf") format("truetype");
  font-weight:600;font-style:normal;font-display:swap;}

:root{
  /* Markenpalette (kaiser-friedrich-tokens.json, Thema „Tag") */
  --spreenacht:#262F49; --leinen:#FCF9EB;
  --messing:#8B6823; --messing-hell:#D4A24E;
  --rumpfblau:#507CA0; --schiefer:#4E5568; --sand:#CEC8B2; --weiss:#FFFFFF;
  /* Alt-Namen bleiben als Brücke bestehen – jede Komponente liest sie */
  --blau:var(--spreenacht); --blau-hell:var(--schiefer); --gold:var(--messing);
  --bg:var(--leinen); --karte:var(--leinen); --leinen-tief:#F2EDDA;
  --text:var(--spreenacht); --grau:var(--schiefer); --linie:var(--sand);
  /* Funktionsfarben (außerhalb der Marke, s. o.) */
  --ok:#1e7d3c; --warn:#c0392b; --warn-bg:#fdecec;
  --schrift:"Inter","Helvetica Neue",Arial,sans-serif;
  --serif:"Kalista Serif",Georgia,"Times New Roman",serif;
}
*{box-sizing:border-box;}
body{margin:0;background:var(--bg);color:var(--text);
  font-family:var(--schrift);font-size:16px;line-height:1.6;
  -webkit-text-size-adjust:100%;}
.wrap{max-width:520px;margin:0 auto;padding:16px 16px 48px;position:relative;z-index:1;}
header.top{background:var(--spreenacht);color:var(--leinen);padding:16px;text-align:center;position:relative;z-index:1;}
header.top .schiff{font-size:13px;letter-spacing:.12em;text-transform:uppercase;
  font-weight:600;color:var(--messing-hell);}
header.top h1{font-family:var(--serif);font-weight:400;font-size:30px;line-height:40px;margin:4px 0 0;}

.karte{background:var(--karte);padding:24px 18px;margin-top:16px;}
.karte h2{margin:0 0 4px;font-family:var(--serif);font-weight:400;font-size:22px;line-height:30px;}
.standort{color:var(--grau);font-size:14px;margin:0 0 14px;}
label{display:block;font-weight:600;font-size:14px;margin:14px 0 5px;}
input,select,textarea{width:100%;padding:13px 12px;font-size:16px;border:1px solid var(--sand);
  border-radius:0;background:var(--leinen);color:var(--text);font-family:var(--schrift);}
input:focus,select:focus,textarea:focus{outline:2px solid var(--rumpfblau);outline-offset:2px;border-color:var(--sand);}
textarea{min-height:64px;resize:vertical;}
.temp-eingabe{font-size:34px !important;text-align:center;font-weight:600;letter-spacing:1px;
  font-variant-numeric:tabular-nums;}
.btn{display:block;width:100%;padding:15px;font-size:16px;font-weight:600;border:none;
  border-radius:0;background:var(--spreenacht);color:var(--weiss);margin-top:24px;cursor:pointer;
  text-decoration:none;text-align:center;font-family:var(--schrift);}
.btn:hover,.btn:active{background:var(--schiefer);}
.btn:disabled{opacity:.55;}
.btn.sekundaer{background:var(--leinen);color:var(--spreenacht);border:1px solid var(--spreenacht);}
.btn.sekundaer:hover,.btn.sekundaer:active{background:var(--leinen-tief);}
.hinweis{font-size:13px;color:var(--grau);margin-top:6px;}
.meldung{margin-top:16px;padding:14px;font-size:15px;display:none;}
.meldung.ok{display:block;background:#e8f7ee;color:var(--ok);border:1px solid #b6e2c6;}
.meldung.warn{display:block;background:var(--warn-bg);color:var(--warn);border:1px solid #f3c0c0;font-weight:600;}
.meldung.err{display:block;background:#fff3e0;color:#a15c00;border:1px solid #f0d3a0;}
.soll{display:inline-block;background:var(--leinen);color:var(--spreenacht);border:1px solid var(--sand);
  padding:4px 12px;font-size:13px;font-weight:600;margin-bottom:4px;}
.liste a{display:flex;justify-content:space-between;align-items:center;text-decoration:none;
  color:var(--text);background:var(--karte);border-bottom:1px solid var(--sand);
  padding:14px 16px;margin-top:0;}
.liste a:first-child{border-top:1px solid var(--sand);}
.liste a .pfeil{color:var(--messing);font-size:20px;}
.pill{font-size:12px;padding:3px 9px;background:var(--leinen);color:var(--spreenacht);border:1px solid var(--sand);}
.fuss{text-align:center;color:var(--grau);font-size:13px;margin-top:32px;line-height:1.5;}
.fuss a{color:var(--messing);}
.zurueck{display:inline-block;color:var(--messing);text-decoration:none;font-size:14px;font-weight:600;margin-bottom:8px;}
.tgl{flex:1;padding:12px;border:1px solid var(--sand);background:var(--leinen);color:var(--text);font-size:15px;font-weight:600;cursor:pointer;}
.tgl.aktiv{background:var(--spreenacht);color:var(--weiss);border-color:var(--spreenacht);}
.liste-inaktiv{color:var(--grau);background:var(--leinen);border:1px dashed var(--sand);padding:14px 16px;margin-top:8px;font-size:14px;}
.statusbox{padding:12px;font-size:14px;margin-bottom:16px;}
.statusbox.gruen{background:#e8f7ee;color:var(--ok);border:1px solid #b6e2c6;}
.statusbox.gelb{background:#fff6e5;color:#a15c00;border:1px solid #f0d3a0;}
/* Rot bleibt dem Überfälligen vorbehalten – sonst nutzt sich die Farbe ab. */
.statusbox.rot{background:#fdecec;color:#a3271f;border:1px solid #f0b6b0;}
table.log{width:100%;border-collapse:collapse;font-size:12px;margin-top:8px;}
table.log th,table.log td{border-bottom:1px solid var(--sand);padding:6px 7px;text-align:left;}
table.log th{font-weight:600;}
table.log td{font-variant-numeric:tabular-nums;}
@media print{ .no-print{display:none !important;} body{background:#fff;} }

/* Testumgebung: auffälliges Banner + roter Rahmen, damit DEV nie mit
   dem Echtbetrieb verwechselt wird (nur aktiv bei UMGEBUNG=dev). */
.dev-banner{position:sticky;top:0;z-index:999;background:#b3261e;color:#fff;
  text-align:center;font-weight:600;font-size:13px;letter-spacing:.02em;padding:7px 10px;}
body.ist-dev{box-shadow:inset 0 0 0 3px #b3261e;}
@media print{ .dev-banner{display:none;} }

/* Angemeldete Person in der Kopfzeile + schneller Wechsel */
.top .wer{display:flex;align-items:center;justify-content:center;gap:10px;
  margin-top:8px;font-size:13px;flex-wrap:wrap;}
.top .wer-name{color:var(--messing-hell);font-weight:600;}
.top .wer-funktion{opacity:.8;font-weight:400;color:var(--leinen);}
.top .wer-wechsel{color:var(--leinen);opacity:.7;text-decoration:underline;font-size:12px;}
.top .wer-wechsel:hover{opacity:1;}

/* Anmeldung / Passwort */
.hinweis-klein{font-size:12px;color:var(--grau);margin:7px 0 2px;line-height:1.5;}
.merk{display:flex;align-items:center;gap:8px;margin:4px 0 14px;font-size:14px;}
.merk input{width:auto;margin:0;}

/* Checklisten-Punkte: Sollwert, Vier-Augen-Kennzeichnung, Anmerkung */
.zusatz{display:block;margin-top:3px;line-height:1.7;}
.soll-chip,.typ-chip{display:inline-block;font-size:11px;font-weight:600;
  padding:1px 8px;margin-right:5px;white-space:nowrap;}
.soll-chip{background:var(--leinen);color:var(--spreenacht);border:1px solid var(--sand);}
.typ-chip.typ-aus{background:#fdf0e0;color:#8a5200;border:1px solid #f0d5ab;}
.typ-chip.typ-ab{background:#e7f3e9;color:#1c5c2a;border:1px solid #bfdcc6;}
.anm{display:inline-block;font-size:11px;color:var(--grau);font-style:italic;}
.clrow-paar{border-left:3px solid var(--sand);padding-left:9px;}

/* Checklisten-Editor */
.ed-punkt{border:1px solid var(--sand);background:var(--leinen);padding:10px 12px;margin:8px 0;}
.ed-kopf{display:flex;gap:8px;align-items:center;justify-content:space-between;flex-wrap:wrap;}
.ed-griff{cursor:grab;color:var(--grau);font-size:18px;user-select:none;flex:0 0 auto;}
.ed-punkt.zieht{opacity:.45;}
.ed-punkt.ueber{border-color:var(--messing);outline:2px solid var(--messing);outline-offset:0;}
.ed-zeile{display:flex;gap:8px;flex-wrap:wrap;}
.ed-zeile > *{flex:1;min-width:130px;}
.ed-punkt input,.ed-punkt select,.ed-punkt textarea{margin:4px 0;}
.ed-klein{font-size:12px;color:var(--grau);margin:2px 0;}
.btn-mini{flex:0 0 auto;margin:0;padding:5px 10px;font-size:13px;font-weight:600;
  border:1px solid var(--spreenacht);background:var(--leinen);color:var(--spreenacht);cursor:pointer;font-family:var(--schrift);}
.btn-mini.gefahr{color:#a11;border-color:#a11;background:#fff;}

/* Krönchen – eines je gesetztem Haken, gesammelt je Kalenderwoche */
.kroenchen{display:inline-flex;align-items:center;gap:7px;margin:2px 0 10px;
  background:var(--leinen);border:1px solid var(--sand);
  padding:5px 14px;font-size:14px;text-decoration:none;}
.kroen-symbol{font-size:16px;line-height:1;}
.kroen-zahl{font-weight:600;color:var(--messing);font-variant-numeric:tabular-nums;
  font-family:var(--serif);font-size:22px;line-height:1;}
.kroen-text{color:var(--grau);font-size:12px;}
@keyframes funkel{
  0%{transform:scale(1);}
  35%{transform:scale(1.16) rotate(-3deg);}
  100%{transform:scale(1);}
}
.kroenchen.funkelt{animation:funkel .45s ease-out;}
@media (prefers-reduced-motion:reduce){ .kroenchen.funkelt{animation:none;} }

/* Freiwilliger Punkt – blockiert den Abschluss nicht */
.typ-chip.typ-frei{background:var(--leinen);color:var(--schiefer);border:1px solid var(--sand);}

/* Rangliste */
ol.rang{list-style:none;margin:12px 0 0;padding:0;}
.rang-zeile{display:flex;align-items:center;gap:12px;margin:0;
  border-bottom:1px solid var(--sand);background:var(--leinen);}
ol.rang .rang-zeile:first-child{border-top:1px solid var(--sand);}
.rang-platz{flex:0 0 34px;text-align:center;font-weight:600;color:var(--grau);font-size:15px;
  font-variant-numeric:tabular-nums;}
.rang-name{flex:1;min-width:0;font-weight:600;color:var(--spreenacht);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.rang-erster{background:var(--leinen-tief);}
.rang-erster .rang-zahl{color:var(--messing);}
.rang-ich{box-shadow:inset 3px 0 0 var(--messing);}
.rang-du{font-size:11px;font-weight:600;color:var(--weiss);background:var(--schiefer);
  padding:1px 7px;margin-left:4px;vertical-align:1px;}

/* Rangliste: Namen führen zur Aufschlüsselung */
.rang-zeile{padding:0;}
.rang-link{display:flex;align-items:center;gap:12px;padding:10px 12px;
  text-decoration:none;color:inherit;width:100%;}
.rang-pfeil{flex:0 0 auto;color:var(--grau);font-size:18px;line-height:1;}

/* Aufschlüsselung: was hat die Krönchen gebracht */
.tag-block{margin-top:24px;}
.tag-titel{font-weight:600;color:var(--spreenacht);border-bottom:1px solid var(--sand);
  padding-bottom:4px;margin-bottom:6px;display:flex;justify-content:space-between;align-items:baseline;}
.tag-anzahl{font-size:12px;font-weight:600;color:var(--messing);}
.kroen-punkt{padding:7px 0;border-bottom:1px solid var(--sand);}
.kroen-punkt:last-child{border-bottom:none;}
.kroen-punkt-text{display:block;}
.kroen-punkt-quelle{display:block;font-size:11px;color:var(--grau);margin-top:2px;}

/* Diamanten – einer je abgeschlossenem Deep Clean */
.diamanten{display:inline-block;font-size:12px;font-weight:600;color:var(--rumpfblau);
  background:var(--leinen);border:1px solid var(--sand);
  padding:1px 7px;margin-left:5px;vertical-align:1px;white-space:nowrap;}
.zaehler-reihe{display:flex;gap:8px;flex-wrap:wrap;align-items:center;}
.diamant-karte{display:inline-flex;align-items:center;gap:7px;margin:2px 0 10px;
  background:var(--leinen);border:1px solid var(--sand);
  padding:5px 14px;font-size:14px;}
.diamant-karte .kroen-zahl{color:var(--rumpfblau);}

/* Anklickbare Statusbox auf der Startseite */
.statusbox-link{display:block;text-decoration:none;color:inherit;}
.statusbox.anklickbar{display:flex;align-items:center;justify-content:space-between;gap:10px;}
.statusbox.anklickbar .statusbox-pfeil{flex:0 0 auto;font-size:20px;line-height:1;opacity:.55;}
.statusbox-link:active .statusbox.anklickbar{filter:brightness(.97);}

/* Rangliste: zwei getrennte Wertungen nebeneinander */
.sortierwahl{display:flex;gap:8px;margin:16px 0 8px;}
.sort-knopf{flex:1;text-align:center;text-decoration:none;font-size:14px;font-weight:600;
  padding:8px 10px;border:1px solid var(--sand);
  background:var(--leinen);color:var(--grau);}
.sort-knopf.aktiv{background:var(--spreenacht);border-color:var(--spreenacht);color:var(--weiss);}
.wert{flex:0 0 auto;font-variant-numeric:tabular-nums;font-size:14px;font-weight:600;
  color:var(--grau);white-space:nowrap;}
.wert-aktiv{font-size:17px;font-weight:600;color:var(--messing);}
.wert-null{opacity:.35;}
.rang-erster .wert-aktiv{color:var(--messing);}

/* Fließtext linksbündig mit Flatterrand (Brand Book: kein Blocksatz nötig);
   der Klassenname bleibt, damit die Templates unverändert funktionieren. */
.blocksatz{text-align:left;hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word;}

/* Live-Werte aus dem Dashboard direkt am Checklistenpunkt */
.live{margin:-4px 0 10px 32px;font-size:12px;line-height:1.6;}
.live-ok{color:#1c5c2a;font-weight:600;}
.live-alarm{display:inline-block;color:#fff;background:#b3261e;font-weight:600;
  padding:2px 8px;}
.live-fehler{color:#8a5200;font-weight:600;}
.live-alter{color:var(--grau);}
.live-liste{display:block;color:var(--grau);}
.pumpe{display:inline-block;margin-right:10px;white-space:nowrap;}
.pumpe.an{color:#1c5c2a;font-weight:600;}
.pumpe.aus{color:var(--grau);}

/* Detailzeile in einer Statusbox (z. B. „Es fehlen: …") */
.statusbox-detail{display:block;margin-top:6px;font-size:13px;font-weight:400;}

/* Punkt wartet auf eine Voraussetzung (z. B. alle Kühlgeräte erfasst) */
.typ-chip.typ-warte{background:#fdf0e0;color:#8a5200;border:1px solid #f0d5ab;}

/* Bearbeiten direkt in der Checkliste (Betreiber / Barmanagement) */
.werkzeug{margin:-4px 0 12px 32px;display:flex;gap:6px;flex-wrap:wrap;align-items:center;}
.werkzeug-form{flex:1 0 100%;border:1px solid var(--sand);
  background:var(--leinen);padding:10px 12px;margin-top:6px;}
.werkzeug-form input,.werkzeug-form textarea{margin:4px 0;}

/* Fortschrittsbalken unter einer Statusbox */
.fortschritt{height:6px;background:#EFEBDB;overflow:hidden;
  margin:0 0 8px;position:relative;}
.fortschritt-fuell{height:100%;background:var(--messing);
  transition:width .3s ease;}
.fortschritt-fuell.voll{background:#3f8f52;}

/* Checklisten-Zeile darf umbrechen. */
.clrow{flex-wrap:wrap;}
.clrow > label{flex:1 1 100%;min-width:0;}
.clrow .von{white-space:normal !important;text-align:left;margin-left:32px;}
.clrow .von:empty{display:none;}
.clrow > a{margin-left:32px;}

/* Abschnitts-Kopfzeile mit Werkzeugen */
.abschnitt-kopf{display:flex;align-items:center;justify-content:space-between;gap:8px;
  margin:24px 0 4px;flex-wrap:wrap;}
.abschnitt-titel{font-weight:600;font-size:13px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--messing);}
.abschnitt-werkzeug{display:inline-flex;gap:5px;}

/* Schwebende Leiste beim Bearbeiten */
.schwebe{position:sticky;bottom:10px;z-index:50;display:flex;gap:8px;margin-top:16px;}
.btn-schwebe{flex:1;padding:12px 10px;border:1px solid var(--spreenacht);
  background:var(--spreenacht);color:var(--weiss);font-size:15px;font-weight:600;cursor:pointer;
  font-family:var(--schrift);}
.btn-schwebe:disabled{background:var(--leinen-tief);color:var(--grau);border-color:var(--sand);cursor:default;}

/* Wochentags-Auswahl */
.tage-wahl{display:flex;gap:5px;flex-wrap:wrap;margin:4px 0 8px;}
.tage-wahl .tag{display:inline-flex;align-items:center;justify-content:center;
  min-width:40px;padding:6px 4px;margin:0;border:1px solid var(--sand);
  background:var(--leinen);color:var(--grau);font-size:13px;font-weight:600;cursor:pointer;}
.tage-wahl .tag.an{background:var(--spreenacht);border-color:var(--spreenacht);color:var(--weiss);}
.tage-wahl .tag input{display:none;}
.typ-chip.typ-tage{background:var(--leinen);color:var(--spreenacht);border:1px solid var(--sand);}

/* Gesicherte Stände einer Liste */
.ver-zeile{display:flex;align-items:center;justify-content:space-between;gap:10px;
  border-bottom:1px solid var(--sand);padding:9px 0;flex-wrap:wrap;}
.ver-zeile .ed-klein{display:block;}

/* Deep Cleans: Farbe nach Alter */
.dc-liste{display:flex;flex-direction:column;gap:0;margin-top:16px;}
.dc{display:flex;align-items:center;gap:11px;padding:12px 13px;
  text-decoration:none;color:inherit;border-bottom:1px solid var(--sand);background:var(--leinen);}
.dc:first-child{border-top:1px solid var(--sand);}
.dc-punkt{flex:0 0 10px;width:10px;height:10px;}
.dc-text{flex:1;min-width:0;}
.dc-text strong{display:block;color:var(--spreenacht);}
.dc-stand{display:block;font-size:12px;color:var(--grau);margin-top:2px;}
.dc-rechts{flex:0 0 auto;display:flex;align-items:center;gap:8px;}
.dc-marke{font-size:11px;font-weight:600;padding:2px 8px;
  background:#b3261e;color:#fff;white-space:nowrap;}

.dc-frisch .dc-punkt{background:#3f8f52;}
.dc-faellig .dc-punkt{background:#d9a021;}
.dc-ueberfaellig .dc-punkt{background:#b3261e;}

/* Deep-Clean-Abstände im Verwaltungsbereich */
.dc-ein{display:flex;align-items:center;gap:10px;padding:10px 0;
  border-bottom:1px solid var(--sand);flex-wrap:wrap;}
.dc-ein-text{flex:1;min-width:140px;}
.dc-ein-text strong{display:block;color:var(--spreenacht);}
.dc-ein-wahl{flex:0 0 auto;display:flex;align-items:center;gap:6px;}
.dc-ein-wahl input{width:70px;margin:0;text-align:center;}
.dc-frisch-punkt{background:#3f8f52;}
.dc-faellig-punkt{background:#d9a021;}
.dc-ueberfaellig-punkt{background:#b3261e;}

/* Meldungen aus dem Schiffs-Dashboard. Rot = sofort handeln, Messing = anschauen. */
.alarmhinweise{margin-top:16px;display:flex;flex-direction:column;gap:8px;}
.alarmhinweise[hidden]{display:none;}
.alarmhinweis{display:flex;gap:10px;padding:10px 12px;
  background:var(--leinen);border:1px solid var(--sand);
  border-left:4px solid var(--messing);}
.alarmhinweis.kritisch{border-left-color:var(--warn);background:var(--warn-bg);}
.alarmhinweis-ic{font-size:17px;line-height:1.3;}
.alarmhinweis-t{font-weight:600;font-size:15px;color:var(--spreenacht);}
.alarmhinweis-x{font-size:13.5px;line-height:1.45;margin-top:2px;}
.alarmhinweise.neu{animation:alarm-auf .9s ease-out 2;}
@keyframes alarm-auf{0%{transform:scale(1)}35%{transform:scale(1.02)}100%{transform:scale(1)}}
@media (prefers-reduced-motion: reduce){.alarmhinweise.neu{animation:none;}}
.alarmhinweis-mehr{align-self:flex-end;font-size:13px;font-weight:600;color:var(--messing);
  text-decoration:none;padding:2px 4px;}
.alarmhinweis-mehr:hover{text-decoration:underline;}

/* Alarm-Log */
.push-box{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:0 0 16px;
  padding:10px 12px;background:var(--leinen);border:1px solid var(--sand);font-size:13.5px;}
.btn.klein{margin:0;padding:7px 14px;font-size:13.5px;width:auto;display:inline-block;}
.alarm-liste{display:flex;flex-direction:column;gap:10px;}
.alarm{border:1px solid var(--sand);border-left:4px solid var(--messing);
  padding:10px 12px;background:var(--leinen);}
.alarm.kritisch{border-left-color:var(--warn);}
.alarm.vorbei{opacity:.65;}
.alarm.quittiert{opacity:.85;}
.alarm-kopf{display:flex;align-items:baseline;gap:8px;}
.alarm-titel{font-weight:600;color:var(--spreenacht);flex:1;}
.alarm-status{font-size:11.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--spreenacht);
  background:var(--leinen);border:1px solid var(--sand);padding:2px 8px;white-space:nowrap;}
.alarm.laeuft .alarm-status{background:var(--warn-bg);color:var(--warn);border-color:#f0b6b0;}
.alarm.quittiert .alarm-status{background:#e8f7ee;color:var(--ok);border-color:#b6e2c6;}
.alarm-text{font-size:13.5px;line-height:1.45;margin:4px 0 8px;}
.alarm-fuss{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:8px;font-size:12.5px;color:var(--schiefer);}
.alarm-quitt{color:var(--ok);font-weight:600;}

/* Crew-Mütze an der Dashboard-Schaltfläche – bleibt: sie ist ein Stück
   Bordkultur, kein Ornament der Marke. */
.dash-knopf{position:relative;margin-top:16px;}
.dash-emoji{position:relative;display:inline-block;}
.muetze{position:absolute;left:-7px;top:-13px;width:26px;height:auto;z-index:2;
  transform:rotate(-16deg);transform-origin:60% 100%;pointer-events:none;}
.muetze .mz-text{fill:#fdf3d8;font-size:7.5px;font-weight:800;
  font-family:Arial,Helvetica,sans-serif;}

/* Im Bearbeitungsmodus verschwinden die Häkchen-Kästchen. */
.bearbeiten-modus .chk { display: none; }

/* Mehrfachauswahl (Bereich, Funktion) */
.mehrfach{display:flex;flex-wrap:wrap;gap:6px 14px;margin:2px 0 10px;}
.mehrfach .merk{margin:0;display:flex;align-items:center;gap:7px;font-weight:400;}
.mehrfach .merk input{width:20px;height:20px;flex:0 0 auto;}

/* Breite Tabellen scrollen in ihrem eigenen Kasten. */
.tabelle-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%;}
.tabelle-scroll table.log{min-width:max-content;}

/* Sicherheitsunterweisungen – je Dokument ein abgesetzter Block */
.dok{border:1px solid var(--sand);padding:12px 14px;margin:16px 0;background:var(--leinen);}
.dok-fertig{background:#f2f8f2;border-color:#bcd8bc;}
.dok-kopf{display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap;align-items:baseline;}
.dok-stand{font-size:12px;color:var(--grau);white-space:nowrap;}
.dok-ok{color:#171;font-weight:600;margin:10px 0 0;}
.dok .btn{margin-top:10px;}

/* Borddokumentation: die Ordnernamen gliedern die Liste als Dachzeilen. */
.doku-ordner{font-size:13px;margin:24px 0 6px;color:var(--messing);font-weight:600;
  text-transform:uppercase;letter-spacing:.12em;}
.doku-liste{margin:0;}

/* Audioguide: die Tafel wird Gästen hingehalten. */
.ag-titel{font-family:var(--serif);font-weight:400;font-size:22px;margin:24px 0 4px;}
.qr-tafel{background:var(--spreenacht);padding:16px 16px 12px;margin:16px 0;text-align:center;}
.qr-bild{background:var(--weiss);padding:10px;display:block;}
.qr-bild svg{display:block;width:100%;height:auto;}
.qr-ruf{color:var(--leinen);font-size:22px;font-family:var(--serif);font-weight:400;margin-top:10px;}
.ag-adresse{font-size:12px;color:var(--grau);word-break:break-all;margin:10px 0 0;}

/* Unterweisungs-Leseansicht: die Seiten als Bilder, volle Breite */
.dok-seite{display:block;width:100%;height:auto;border:1px solid var(--sand);
  margin:10px 0;background:var(--leinen);}

/* Wiki: Artikel als aufklappbare Blöcke */
.wiki-artikel{border-bottom:1px solid var(--sand);background:var(--leinen);margin:0;padding:0;}
.wiki-artikel:first-of-type{border-top:1px solid var(--sand);margin-top:8px;}
.wiki-artikel summary{padding:12px 2px;font-weight:600;cursor:pointer;}
.wiki-inhalt{padding:0 2px 12px;white-space:pre-wrap;line-height:1.55;font-size:14px;}
#chatVerlauf{display:flex;flex-direction:column;gap:8px;margin-bottom:12px;}
.chat-zeile{padding:10px 13px;font-size:14px;line-height:1.5;
  max-width:88%;white-space:pre-wrap;}
.chat-zeile.ich{align-self:flex-end;background:var(--spreenacht);color:var(--leinen);}
.chat-zeile.schiff{align-self:flex-start;background:var(--leinen);border:1px solid var(--sand);color:var(--text);}
.chat-zeile.fehler{align-self:flex-start;background:var(--warn-bg);color:var(--warn);}

/* Freddy als schwebender Knopf + Chat-Panel (auf jeder Seite) */
.freddy-knopf{position:fixed;right:16px;bottom:16px;z-index:1000;display:flex;align-items:center;gap:7px;
  border:none;background:var(--spreenacht);color:var(--weiss);
  padding:14px 20px;font-size:16px;font-weight:600;cursor:pointer;font-family:var(--schrift);}
.freddy-knopf:hover,.freddy-knopf:active{background:var(--schiefer);}
.freddy-knopf.freddy-still{display:none;}
/* Wichtig: display:flex würde das hidden-Attribut sonst übersteuern. */
.freddy-panel[hidden]{display:none;}
.freddy-panel{position:fixed;right:8px;bottom:8px;z-index:1001;display:flex;flex-direction:column;
  width:min(420px,calc(100vw - 16px));height:min(600px,calc(100dvh - 88px));
  background:var(--leinen);border:1px solid var(--sand);overflow:hidden;}
.freddy-kopf{display:flex;align-items:center;justify-content:space-between;flex:0 0 auto;
  background:var(--spreenacht);color:var(--leinen);font-weight:600;font-size:16px;
  padding:12px 16px;}
.freddy-kopf span{font-family:var(--serif);font-weight:400;font-size:22px;}
.freddy-zu{border:none;background:none;color:var(--leinen);font-size:26px;line-height:1;cursor:pointer;padding:0 2px;}
.freddy-verlauf{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:8px;padding:16px 14px;}
.freddy-eingabe{display:flex;gap:8px;align-items:flex-end;flex:0 0 auto;padding:10px 12px 6px;}
.freddy-eingabe textarea{flex:1;min-height:52px;font-size:16px;}
.freddy-senden{flex:0 0 46px;height:46px;border:none;background:var(--spreenacht);
  color:var(--weiss);font-size:19px;cursor:pointer;}
.freddy-senden:hover{background:var(--schiefer);}
.freddy-senden:disabled{opacity:.55;}
.freddy-fuss{flex:0 0 auto;color:var(--grau);font-size:11px;line-height:1.4;padding:4px 12px 10px;}
.chat-melden{align-self:flex-start;border:1px solid var(--spreenacht);background:var(--leinen);color:var(--spreenacht);
  padding:6px 12px;font-size:13px;font-weight:600;cursor:pointer;margin-top:-2px;font-family:var(--schrift);}
.chat-melden:disabled{opacity:.55;}
.chat-gemeldet{align-self:flex-start;color:var(--ok);font-size:13px;font-weight:600;margin-top:-2px;}

/* Zweizeilige Checklisten-Schaltflächen auf der Startseite: die zeitlich
   anstehende Liste dunkel (Hauptweg), die andere umrandet daneben. */
.cta{display:block;text-decoration:none;background:var(--spreenacht);color:var(--weiss);
  padding:13px 16px;margin-top:16px;}
.cta:hover,.cta:active{background:var(--schiefer);}
.cta-titel{display:block;font-weight:600;font-size:16px;}
.cta-stand{display:block;font-size:13px;margin-top:2px;opacity:.85;}
.cta-neben{background:var(--leinen);color:var(--spreenacht);border:1px solid var(--spreenacht);}
.cta-neben:hover,.cta-neben:active{background:var(--leinen-tief);}
.cta-neben .cta-stand{color:var(--schiefer);opacity:1;}