/* Farben kommen zur Laufzeit aus brand/brand.json (siehe basis.js).
   Hier stehen nur Rueckfallwerte, damit nichts weiss bleibt, falls der
   Server einmal nicht antwortet.

   --dunkel ist die Hausfarbe der Marke.
   --text   ist die Schriftfarbe, --balken die Farbe dunkler Leisten.
   Im Dunkelmodus laufen die beiden auseinander - darum sind es zwei. */
:root{
  --akzent:#F09000; --akzent-hell:#FEF4E4; --dunkel:#0A2340;
  --linie:#C4CFDB; --grau:#56657A; --grund:#FFFFFF; --flaeche:#F6F8FA;
  --text:#0A2340; --balken:#0A2340;
  --schatten:rgba(10,35,64,.12);

  /* Info-Karten. Zwei Familien, je drei Groessen: Flaeche, Rand, Schrift.
     Gemessen mit tools/kontrast.mjs (WCAG 2.1):
     Schrift auf Flaeche 13.87:1 (blau) und 11.26:1 (gelb) - beides AAA;
     der Rand traegt die optische Trennung (6.44:1 bzw. 5.09:1 gegen weiss),
     weil die Flaeche allein nur 1.07:1 vom Seitengrund abweicht. */
  --info-blau-flaeche:#E8F1FB; --info-blau-rand:#1F5FA8;
  --info-blau-text:#0A2340;    --info-blau-titel:#134477;
  --info-gelb-flaeche:#FDF2DF; --info-gelb-rand:#9A6206;
  --info-gelb-text:#4A2E00;    --info-gelb-titel:#7A4E08;
  /* Zustandsfarben (fertig/offen) - hell. FK-HT-28. */
  --gut-flaeche:#E9F6EE; --gut-text:#1E7A43;
  --schlecht-flaeche:#FDECEA; --schlecht-text:#C0392B;
}

/* Dunkelmodus: von Hand geschaltet, nicht vom Geraet erraten.
   Auf dem Dach entscheidet die Sonne, nicht die Uhrzeit. */
:root[data-thema="dunkel"]{
  --grund:#151C25; --flaeche:#0D131A;
  --text:#E7ECF2; --balken:#05090E;
  --linie:#2C3947; --grau:#9AA7B6;
  --akzent-hell:#3A2B12;
  --schatten:rgba(0,0,0,.5);

  /* Dieselben drei Groessen, im Dunkeln umgedreht. Gemessen:
     Schrift auf Flaeche 12.54:1 (blau) und 12.67:1 (gelb) - AAA;
     Rand 7.39:1 bzw. 8.81:1 gegen den Seitengrund. */
  --info-blau-flaeche:#152634; --info-blau-rand:#6BB0EC;
  --info-blau-text:#DCE9F7;    --info-blau-titel:#9CC8F2;
  --info-gelb-flaeche:#2C2312; --info-gelb-rand:#E7B14A;
  --info-gelb-text:#F6E7C8;    --info-gelb-titel:#F0C97A;
  /* FK-HT-28: Zustandsfarben im Dunkeln aufgehellt (AAA statt 3.2:1). */
  --gut-flaeche:#152B1D; --gut-text:#5FD48C;
  --schlecht-flaeche:#2E1512; --schlecht-text:#FF8A7A;
  color-scheme:dark;
}
:root[data-thema="hell"]{ color-scheme:light; }
*{box-sizing:border-box}
/* Muss ganz oben stehen: sonst gewinnt jedes spaetere display:flex gegen
   das hidden-Attribut, und verborgene Leisten stehen doch im Bild. */
[hidden]{display:none !important}
html,body{margin:0;padding:0}
body{
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  color:var(--text); background:var(--flaeche);
  font-size:16px; line-height:1.5;
  padding-bottom:56px;
}
/* Khmer: keine Grossschreibung, kein Sperrsatz, mehr Zeilenhoehe -
   sonst zerreissen die Zeichencluster (gleiche Regel wie im Formular-System). */
html[lang="km"] body{font-family:"Noto Sans Khmer",system-ui,sans-serif; line-height:1.9}
html[lang="km"] .nav a{text-transform:none; letter-spacing:normal}

.kopf{
  display:flex; align-items:center; gap:14px;
  padding:12px 16px; background:var(--grund); border-bottom:2px solid var(--akzent);
}
/* Logo steht bewusst auf einer festen weissen Flaeche: dunkle Rasterlogos
   werden im Dunkelmodus sonst invertiert. */
.logo-feld{background:#FFF; border-radius:8px; padding:4px; flex:0 0 auto}
.logo-feld img{display:block; height:84px; width:auto}
.kopf-text{flex:1 1 auto; min-width:0}
.firma{font-weight:700; font-size:17px; line-height:1.2}
.zusatz{font-size:12px; color:var(--grau)}
.untertitel{font-size:12px; color:var(--akzent); font-weight:600; margin-top:2px}

.sprachen{display:flex; gap:4px; flex:0 0 auto}
.sprachen button{
  border:1px solid var(--linie); background:var(--grund); color:var(--grau);
  border-radius:6px; padding:4px 7px; font-size:11px; font-weight:700; cursor:pointer;
}
.sprachen button[aria-pressed="true"]{background:var(--akzent); border-color:var(--akzent); color:#FFF}

.nav{display:flex; gap:2px; overflow-x:auto; background:var(--balken); padding:0 8px}
.nav a{
  color:#FFF; opacity:.75; text-decoration:none; white-space:nowrap;
  padding:11px 12px; font-size:14px; border-bottom:3px solid transparent;
}
.nav a[aria-current="page"]{opacity:1; border-bottom-color:var(--akzent)}
.nav a[aria-disabled="true"]{opacity:.35; pointer-events:none}

.inhalt{max-width:840px; margin:0 auto; padding:16px}
.karte{background:var(--grund); border:1px solid var(--linie); border-radius:10px; padding:16px; margin-bottom:14px}
.karte h1{font-size:19px; margin:0 0 8px}
.karte h2{font-size:15px; margin:0 0 10px; color:var(--grau); text-transform:uppercase; letter-spacing:.06em}
.karte p{margin:0; color:var(--grau)}

.module{list-style:none; margin:0; padding:0}
.module li{display:flex; align-items:center; gap:10px; padding:8px 0; border-top:1px solid var(--linie)}
.module li:first-child{border-top:0}
.module .id{font-weight:700; font-size:12px; color:var(--akzent); min-width:34px}
.module .zweck{flex:1; font-size:13px; color:var(--grau)}
.module .marke{font-size:11px; font-weight:700; padding:2px 8px; border-radius:20px; background:var(--akzent-hell); color:var(--akzent)}
.module .marke.fertig{background:#E4F4E9; color:#1E7A43}

.kennzahlen{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px}
.kz{display:flex; flex-direction:column}
.kz-label{font-size:11px; color:var(--grau); text-transform:uppercase; letter-spacing:.05em}
.kz-wert{font-weight:700; font-size:15px}

.fuss{
  position:fixed; left:0; right:0; bottom:0;
  display:flex; gap:14px; align-items:center;
  background:var(--balken); color:#FFF; font-size:12px; padding:9px 16px;
}
.fuss .status{margin-left:auto; font-weight:700}
.fuss .status.gut{color:#7BE0A2}
.fuss .status.schlecht{color:#FF9A9A}

@media (max-width:560px){
  /* Alles in EINER Reihe neben dem grossen Logo - keine neuen Reihen darunter.
     Titel schrumpft, Sprachen + Hell/Dunkel bleiben klein und rechts. */
  .kopf{flex-wrap:nowrap; gap:8px; padding:8px 10px}
  .kopf-text{min-width:0}
  .firma{font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
  .untertitel{font-size:11px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
  .sprachen{flex:0 0 auto; gap:3px}
  .sprachen button{padding:3px 6px; font-size:11px}
  .kopf #thema{width:30px; height:30px; padding:0; font-size:15px}
  .logo-feld img{height:76px}
}

/* ===================== Nachschlagewerk ===================== */
.inhalt.breit{max-width:1400px}

.feld{display:flex; flex-direction:column; gap:4px; min-width:0}
.feld > span{font-size:11px; color:var(--grau); text-transform:uppercase; letter-spacing:.05em}
.feld select,.feld input{
  font:inherit; font-size:14px; padding:7px 9px; border:1px solid var(--linie);
  border-radius:6px; background:var(--grund); color:var(--text); min-width:0; width:100%;
}
.feld.weit{flex:2 1 260px}
.schmal_feld{max-width:220px}
.eingabe_geld{display:flex; align-items:center; gap:6px}
.eingabe_geld i{font-style:normal; color:var(--grau); font-size:13px; min-width:26px}
.spanne{display:flex; gap:6px}

.rollenzeile{display:flex; flex-wrap:wrap; gap:12px; align-items:flex-end}
.rollenzeile .feld{min-width:180px}
.rollenzeile p{flex:1 1 260px; margin:0}

.knopfreihe{display:flex; gap:8px; flex-wrap:wrap; margin-left:auto}
button.add{
  border:1px dashed var(--akzent); background:var(--akzent-hell); color:var(--akzent);
  border-radius:6px; padding:7px 12px; font:inherit; font-size:13px; font-weight:700; cursor:pointer;
}
button.add:hover{background:var(--akzent); color:#FFF; border-style:solid}
button.flach{
  border:1px solid var(--linie); background:var(--grund); color:var(--text);
  border-radius:6px; padding:5px 10px; font:inherit; font-size:13px; cursor:pointer; white-space:nowrap;
}
button.flach:hover{border-color:var(--akzent); color:var(--akzent)}
button.flach.weg:hover{border-color:#C0392B; color:#C0392B}
button.stark{
  /* FK-HT-21: dunkle Hausfarbe statt Weiss auf Orange - 6.55:1 statt 2.42:1,
     lesbar in der Sonne, die Akzentflaeche bleibt. */
  border:0; background:var(--akzent); color:#0A2340; border-radius:6px;
  padding:8px 16px; font:inherit; font-size:14px; font-weight:700; cursor:pointer;
  min-height:48px;
}

.filter,.merkmal_filter{display:flex; flex-wrap:wrap; gap:12px}
.merkmal_filter{margin-top:12px}
.merkmal_filter .feld{max-width:200px}
.filter_fuss{display:flex; align-items:center; gap:12px; margin-top:12px; font-size:13px; color:var(--grau)}
.filter_fuss button{margin-left:auto}

.tabellenkarte{padding:0; overflow:hidden}
.tabellenrahmen{overflow-x:auto; max-height:60vh; overflow-y:auto}
table.werk{border-collapse:collapse; width:100%; font-size:13px}
table.werk th{
  position:sticky; top:0; z-index:1; background:var(--balken); color:#FFF;
  text-align:left; padding:9px 10px; font-size:11px; text-transform:uppercase; letter-spacing:.05em; white-space:nowrap;
}
table.werk td{padding:7px 10px; border-top:1px solid var(--linie); vertical-align:middle}
table.werk tbody tr:hover{background:var(--akzent-hell)}
table.werk .zahl{text-align:right; white-space:nowrap}
table.werk .geld{font-variant-numeric:tabular-nums; font-weight:600}
table.werk .modell{font-weight:700; white-space:nowrap}
table.werk input.menge{width:64px; padding:4px 6px; font-size:13px; border:1px solid var(--linie); border-radius:5px; text-align:right}
table.werk.schmal th,table.werk.schmal td{font-size:13px}
.leer{padding:16px}

.montage{border-top:1px solid var(--linie); margin-top:14px; padding-top:14px}
.montage h3{margin:0 0 10px; font-size:14px}
.montage_felder{display:flex; flex-wrap:wrap; gap:16px; align-items:flex-end}
.montage_felder .feld{max-width:240px}
.warn{color:#8A5709; font-weight:600}
/* FK-HT-29: Kopf-, Link- und kleine Bedienelemente auf Handschuh-Groesse. */
button.thema,.sprachen button{min-width:48px; min-height:48px}
.flach,button.flach{display:inline-block; min-height:48px}
.rueckfrage_knopf,.video_knopf,button.rund,.pruefzeile{min-height:48px}

.summe{margin-top:14px; border-top:1px solid var(--linie); padding-top:10px}
.summenzeile{display:flex; justify-content:space-between; padding:4px 0; font-size:14px}
.summenzeile.stark{border-top:2px solid var(--text); margin-top:6px; padding-top:8px; font-size:17px}
.summenzeile b{font-variant-numeric:tabular-nums}

dialog{
  border:0; border-radius:12px; padding:0; max-width:520px; width:calc(100% - 32px);
  box-shadow:0 20px 60px var(--schatten); color:var(--text); background:var(--grund);
}
dialog::backdrop{background:rgba(10,35,64,.55)}
dialog form{padding:20px; display:flex; flex-direction:column; gap:12px; max-height:80vh; overflow:auto}
dialog h2{margin:0; font-size:17px}
dialog .knopfreihe{margin-left:0; justify-content:flex-end}
.meldung:empty{display:none}

@media (max-width:700px){
  .filter .feld,.merkmal_filter .feld{flex:1 1 100%; max-width:none}
  .knopfreihe{margin-left:0; width:100%}
  .tabellenrahmen{max-height:none}
}

/* ===================== Kunden-Strecke ===================== */
.kundenseite{padding-bottom:84px}
.inhalt.schmal{max-width:640px}

.zielbild{
  position:sticky; top:0; z-index:5;
  background:var(--akzent-hell); border-bottom:1px solid var(--akzent);
  padding:8px 16px;
}
.zielbild_titel{font-size:10px; font-weight:700; color:var(--akzent); text-transform:uppercase; letter-spacing:.06em}
.zielbild ol{margin:2px 0 0; padding-left:18px; font-size:12px; color:var(--text)}
.zielbild li{margin:1px 0}

.fortschritt{height:4px; background:var(--linie)}
.fortschritt .balken{height:100%; background:var(--akzent); transition:width .25s}
.schrittzahl{margin:8px 16px 0; font-size:11px; color:var(--grau); text-transform:uppercase; letter-spacing:.06em}

.inhalt.schmal h1{font-size:22px; line-height:1.25; margin:6px 0 8px}
.inhalt.schmal h3{font-size:14px; margin:20px 0 8px; color:var(--grau); text-transform:uppercase; letter-spacing:.05em}
.inhalt.schmal .feld{margin-bottom:14px}
.inhalt.schmal textarea{
  font:inherit; font-size:16px; padding:9px; border:1px solid var(--linie);
  border-radius:8px; width:100%; resize:vertical; background:var(--grund); color:var(--text);
}
.inhalt.schmal input{font-size:16px; padding:10px}
.hinweiskasten{background:var(--akzent-hell); border-left:3px solid var(--akzent); padding:10px 12px; border-radius:0 8px 8px 0; margin-top:16px}
.flach_karte{margin-top:16px; padding:14px}

.kacheln{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:8px}
button.kachel{
  display:flex; flex-direction:column; gap:2px; text-align:left;
  border:1px solid var(--linie); background:var(--grund); color:var(--text);
  border-radius:10px; padding:12px; font:inherit; cursor:pointer; min-height:56px;
}
button.kachel b{font-size:14px; font-weight:600; line-height:1.25}
button.kachel small{font-size:11px; color:var(--grau)}
button.kachel[aria-pressed="true"]{border-color:var(--akzent); background:var(--akzent-hell); box-shadow:inset 0 0 0 1px var(--akzent)}

.fotogitter{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px}
button.fotokachel{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; text-align:center;
  border:2px dashed var(--linie); background:var(--grund); color:var(--text);
  border-radius:12px; padding:16px 10px; font:inherit; cursor:pointer; min-height:104px;
}
button.fotokachel .zeichen{font-size:26px; line-height:1}
button.fotokachel b{font-size:13px; font-weight:600; line-height:1.25}
button.fotokachel small{font-size:10px; color:var(--grau); text-transform:uppercase; letter-spacing:.05em}
button.fotokachel.fertig{border-style:solid; border-color:var(--gut-text); background:var(--gut-flaeche)}
button.fotokachel.fertig .zeichen{color:var(--gut-text)}

.roi{border:1px solid var(--linie); border-radius:10px; overflow:hidden; margin:6px 0 14px}
.roizeile{display:flex; justify-content:space-between; gap:12px; padding:9px 12px; border-top:1px solid var(--linie); font-size:14px}
.roizeile:first-child{border-top:0}
.roizeile b{font-variant-numeric:tabular-nums; text-align:right}
.roizeile.stark{background:var(--akzent-hell); font-weight:700}
.roizeile.stark b{color:var(--akzent)}

.neigung{display:flex; gap:8px; align-items:center}
.neigung input{width:90px}
.neigung b{font-size:18px; margin-left:auto}

.nummer{text-align:center}
.grossnummer{display:block; font-size:28px; letter-spacing:.06em; margin:4px 0; color:var(--akzent)}
.offenliste{margin:6px 0 0; padding-left:18px; font-size:13px; color:var(--grau)}
button.stark.gross{width:100%; padding:14px; font-size:16px; margin-top:18px}
button.stark:disabled{background:var(--linie); color:var(--grau); cursor:not-allowed}

.schrittleiste{
  position:fixed; left:0; right:0; bottom:0; z-index:21;
  /* FK-HT-20: umbrechen statt ueber den Rand laufen. */
  display:flex; align-items:center; flex-wrap:wrap; gap:8px 12px;
  background:var(--grund); border-top:1px solid var(--linie); padding:10px 16px;
  padding-bottom:calc(10px + env(safe-area-inset-bottom));
}
/* FK-HT-19: Wo zugleich die Bodennav steht (Team-Seiten), sitzt die
   Schrittleiste DARUEBER, nicht darunter - sonst deckt die Nav den
   Weiter-Knopf und der Touch landet im Profil. */
body:has(.leiste) .schrittleiste{ bottom:60px; }
body:has(.leiste):has(.schrittleiste){ padding-bottom:124px; }
.schrittleiste .status{margin-left:auto; margin-right:auto; font-size:12px}
.schrittleiste button{min-width:96px; flex:1 1 auto}
.schrittleiste .speicherstand,.schrittleiste .status{flex:1 0 100%; text-align:center}
.schrittleiste button.stark{padding:11px 20px}

/* ===================== Laufzettel ===================== */
.lz_kopf{display:flex; align-items:baseline; gap:10px; font-size:13px}
.lz_kopf b{font-size:15px; color:var(--text)}
.lz_kopf span{color:var(--grau); margin-left:auto; font-variant-numeric:tabular-nums}

.lz_schritt{margin-bottom:16px}
.lz_schritt.erledigt{border-color:var(--gut-text)}
.lz_schritt_kopf{display:flex; align-items:center; gap:10px; margin-bottom:8px; flex-wrap:wrap}
.lz_schritt_kopf b{font-size:15px; flex:1 1 auto}
.lz_nummer{
  font-size:11px; font-weight:700; color:#FFF; background:var(--balken);
  border-radius:5px; padding:3px 7px; letter-spacing:.04em; white-space:nowrap;
}
.lz_schritt.erledigt .lz_nummer{background:var(--gut-text)}

.pruefliste{margin-top:12px; border-top:1px solid var(--linie)}
.pruefzeile{
  display:flex; align-items:center; gap:10px;
  padding:11px 2px; border-bottom:1px solid var(--linie); cursor:pointer; font-size:14px;
}
.pruefzeile input[type="checkbox"]{width:22px; height:22px; accent-color:var(--akzent); flex:0 0 auto; margin:0}
.pruefzeile span{flex:1 1 auto}
.pruefzeile .norm{
  font-size:10px; font-weight:700; color:#B9770E; background:#FDF3E3;
  border-radius:4px; padding:2px 6px; letter-spacing:.05em;
}
.messwerte{display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:12px; margin-top:14px}
.abmeldung{margin-top:16px; border-top:2px solid var(--text); padding-top:14px}
.hinweiskasten.warn{background:#FDF3E3; border-left-color:#B9770E; color:#7A4E08}

/* ===================== Unterschrift ===================== */
canvas.unterschrift{
  display:block; width:100%; height:auto; aspect-ratio:3/1;
  border:2px dashed var(--linie); border-radius:10px; background:var(--grund);
  touch-action:none; margin:8px 0;
}
.signaturblock{margin-top:14px; border-top:1px solid var(--linie); padding-top:12px}
.signaturblock.fertig{display:flex; align-items:baseline; gap:10px; color:var(--gut-text)}
.signaturblock > b{font-size:14px}

/* ===================== Zentrale: Audit ===================== */
.kopfkarte h1{font-size:20px; margin:8px 0 4px}
.kopfkarte .marke{margin-right:6px}
.formgitter{display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:12px; margin:12px 0}
.formgitter .feld.weit{grid-column:1 / -1}
.regeln{display:flex; flex-direction:column; gap:6px; margin:10px 0}
.regel{display:flex; align-items:baseline; gap:8px; font-size:13px; padding:7px 10px; border-radius:8px}
.regel.ok{background:var(--gut-flaeche); color:var(--gut-text)}
.regel.offen{background:var(--schlecht-flaeche); color:var(--schlecht-text)}
.regel b{font-variant-numeric:tabular-nums}
.regel .zeichen{font-weight:700}
.regel small{margin-left:auto}
.rotliste{margin:8px 0 0; padding-left:18px}
.rotliste li{padding:4px 0; color:var(--schlecht-text)}
.rotliste li b{display:block; font-size:14px}
.rotliste li small{color:var(--grau)}
.gut_text{color:#1E7A43}
.auswahlliste{list-style:none; margin:10px 0; padding:0}
.auswahlliste li{display:flex; align-items:center; gap:10px; padding:7px 0; border-top:1px solid var(--linie); font-size:14px}
.auswahlliste li span{flex:1 1 auto}

/* ===================== Untere Menüleiste ===================== */
body.mit_leiste{padding-bottom:calc(64px + env(safe-area-inset-bottom))}
.leiste{
  position:fixed; left:0; right:0; bottom:0; z-index:20;
  display:grid; grid-template-columns:repeat(5,1fr);
  background:var(--grund); border-top:1px solid var(--linie);
  padding-bottom:env(safe-area-inset-bottom);
}
.leiste_knopf{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
  padding:8px 4px; text-decoration:none; color:var(--grau); font-size:11px;
}
.leiste_knopf .zeichen{font-size:20px; line-height:1}
.leiste_knopf[aria-current="page"]{color:var(--akzent); font-weight:700}

/* ===================== PLAN ===================== */
.plankopf{display:flex; flex-direction:column; gap:2px; margin-bottom:10px}
.plankopf .gross{font-size:18px}
.planzeile{display:flex; justify-content:space-between; gap:12px; padding:8px 0; border-top:1px solid var(--linie); font-size:14px}
.planzeile:first-child{border-top:0}
.planzeile b{text-align:right}
.wuensche ol{margin:6px 0 0; padding-left:20px}
.wuensche li{padding:3px 0; font-size:14px}
.lieferstatus{display:flex; align-items:center; gap:10px; margin-bottom:10px}
.packliste{list-style:none; margin:6px 0 0; padding:0}
.packliste li{display:flex; align-items:baseline; gap:8px; padding:6px 0; border-top:1px solid var(--linie); font-size:14px}
.packliste li b{min-width:44px}
.packliste li small{margin-left:auto; color:var(--grau)}
.hinweisliste{margin:6px 0 0; padding-left:18px; font-size:14px}
.hinweisliste li{padding:3px 0}
.hinweisliste.warn li{color:#B9770E; font-weight:600}

/* ===================== Messenger ===================== */
/* position:fixed + inset:0 fuellt IMMER genau den sichtbaren Viewport - das
   ist zuverlaessiger als 100dvh (auf manchen Androids falsch berechnet, dann
   ragt die Leiste halb aus dem Bild). Innen ein Flex-Fluss: Kopf oben, Verlauf
   fuellt den Rest, Eingabe und Menueleiste sitzen bündig unten. */
body.chatseite{
  position:fixed; inset:0; margin:0;
  display:flex; flex-direction:column; overflow:hidden;
  background:var(--flaeche);
}
body.chatseite.mit_leiste{padding-bottom:0}
body.chatseite .leiste{position:static; flex:0 0 auto}
body.chatseite .eingabeleiste{padding-bottom:calc(8px + env(safe-area-inset-bottom))}
/* Ein kompakter Kopf in EINER Zeile - so hoch wie der normale .kopf, nie
   halbes Bild. Der Titel schrumpft (ellipsis), die Sprachwahl bleibt. */
.chatkopf{
  display:flex; align-items:center; gap:6px; flex:0 0 auto; flex-wrap:nowrap; overflow:hidden;
  background:var(--balken); color:#FFF; padding:8px 10px;
  padding-top:calc(8px + env(safe-area-inset-top));
}
/* Feste Elemente schmal halten, damit der MEMBER-Knopf (flex:1) den Rest
   bekommt und NICHTS rausragt - der Hell/Dunkel-Schalter hat das Bild gedrückt. */
.chatkopf #sprachen{flex:0 0 auto; min-width:0; flex-wrap:nowrap; gap:3px}
.chatkopf #sprachen button{padding:4px 6px; font-size:11px}
.chatkopf #thema{flex:0 0 auto; width:30px; height:30px; padding:0; font-size:15px}
.chatkopf .chattitel b{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.chatkopf .chattitel small{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.chatkopf .zurueck_knopf{min-width:34px; min-height:38px; font-size:24px}
.zurueck_knopf{color:#FFF; text-decoration:none; font-size:26px; line-height:1;
  min-width:48px; min-height:48px; display:inline-flex; align-items:center; justify-content:center}
.chattitel{flex:1 1 auto; min-width:0; display:flex; flex-direction:column}
.chattitel b{font-size:15px}
.chattitel small{font-size:11px; opacity:.7}
.video_knopf{
  border:0; background:rgba(255,255,255,.15); color:#FFF; border-radius:50%;
  width:38px; height:38px; font-size:18px; cursor:pointer;
}

.chatverlauf{
  flex:1 1 auto; overflow-y:auto; padding:12px;
  display:flex; flex-direction:column; gap:6px;
}
.chatverlauf .leer{margin:auto; text-align:center; max-width:280px}

.blase{
  max-width:78%; padding:7px 10px 4px; border-radius:14px; position:relative;
  background:var(--grund); box-shadow:0 1px 1px var(--schatten); font-size:15px; line-height:1.35;
}
.blase.eigen{align-self:flex-end; background:var(--akzent-hell); border-bottom-right-radius:4px}
.blase.fremd{align-self:flex-start; border-bottom-left-radius:4px}
.blase.art_system{align-self:center; background:rgba(10,35,64,.08); box-shadow:none; font-size:12px; color:var(--grau)}
.blase .absender{font-size:11px; font-weight:700; color:var(--akzent); margin-bottom:2px}
.blase .text{white-space:pre-wrap; word-break:break-word}
.blase .zeit{font-size:10px; color:var(--grau); text-align:right; margin-top:2px}
/* Der Verweis einer Systemnachricht: Ordner oder Feld-Kennung, nicht der Inhalt. */
.blase .text.verweis{font-size:11px; opacity:.8; word-break:break-word; margin-top:2px}
.chatbild{display:block; max-width:100%; border-radius:10px; margin:2px 0; cursor:zoom-in}
.dokument{display:flex; align-items:center; gap:8px; text-decoration:none; color:inherit; padding:4px 0}
.dokument .zeichen{font-size:26px}
.dokument b{display:block; font-size:14px}
.dokument small{color:var(--grau)}

.sprache{display:flex; align-items:center; gap:10px; min-width:190px; padding:2px 0}
.abspielen{width:34px; height:34px; font-size:13px; flex:0 0 auto}
.welle{
  --fortschritt:0%;
  display:flex; align-items:center; gap:2px; height:28px; flex:1 1 auto;
  background:linear-gradient(90deg, var(--akzent) var(--fortschritt), transparent var(--fortschritt));
  background-clip:content-box; -webkit-background-clip:content-box;
}
.welle i{flex:1 1 auto; min-width:2px; background:var(--grau); border-radius:2px; opacity:.55}

.aufnahme_leiste{
  display:flex; align-items:center; gap:10px; flex:0 0 auto;
  background:#FDECEA; color:#C0392B; padding:8px 12px; font-size:13px; font-weight:600;
}
.aufnahme_leiste .punkt{width:10px; height:10px; border-radius:50%; background:#C0392B; animation:pulsen 1s infinite}
.aufnahme_leiste .wischen{margin-left:auto; opacity:.75; font-weight:400}
@keyframes pulsen{0%,100%{opacity:1}50%{opacity:.25}}

.eingabeleiste{
  display:flex; align-items:center; gap:8px; flex:0 0 auto;
  background:var(--grund); border-top:1px solid var(--linie); padding:8px 10px;
  padding-bottom:calc(8px + env(safe-area-inset-bottom));
}
.eingabeleiste input[type="text"]{
  flex:1 1 auto; font:inherit; font-size:16px; padding:10px 14px;
  border:1px solid var(--linie); border-radius:22px; background:var(--flaeche); color:var(--text);
}
button.rund{
  flex:0 0 auto; width:44px; height:44px; border-radius:50%; border:0;
  background:var(--flaeche); color:var(--text); font-size:19px; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
button.rund.mikro,button.rund.senden{background:var(--akzent); color:#FFF}
button.rund.mikro:active{transform:scale(1.25); background:#C0392B}
button.rund.gross{width:58px; height:58px; font-size:24px}
button.rund.rot{background:#C0392B; color:#FFF}

.videoschicht{position:fixed; inset:0; z-index:40; background:#000}
.videoschicht video#fern{width:100%; height:100%; object-fit:cover}
.videoschicht video#nah{
  position:absolute; right:12px; top:calc(12px + env(safe-area-inset-top));
  width:110px; border-radius:10px; border:2px solid rgba(255,255,255,.6); object-fit:cover;
}
.videokopf{
  position:absolute; left:12px; top:calc(14px + env(safe-area-inset-top));
  color:#FFF; font-size:13px; background:rgba(0,0,0,.45); padding:5px 10px; border-radius:14px;
}
.videoknoepfe{
  position:absolute; left:0; right:0; bottom:calc(28px + env(safe-area-inset-bottom));
  display:flex; justify-content:center; gap:22px;
}
.anruf{
  position:fixed; left:12px; right:12px; bottom:80px; z-index:35;
  background:var(--grund); border:1px solid var(--akzent); border-radius:12px;
  padding:14px; box-shadow:0 8px 30px var(--schatten); text-align:center;
}
.anruf .knopfreihe{justify-content:center; margin-top:10px}
.vollbild{position:fixed; inset:0; z-index:50; background:rgba(0,0,0,.92); display:grid; place-items:center; cursor:zoom-out}
.vollbild img{max-width:100%; max-height:100%}

/* ===================== Tages-Briefing ===================== */
.briefingkopf .datum{font-size:11px; color:var(--akzent); text-transform:uppercase; letter-spacing:.06em; font-weight:700}
.briefingkopf h1{font-size:24px; margin:2px 0 10px}
.tagesziel{
  font-size:17px; font-weight:600; line-height:1.35; margin:0 0 10px;
  background:var(--akzent-hell); border-left:3px solid var(--akzent);
  padding:12px 14px; border-radius:0 10px 10px 0;
}
.retroliste{list-style:none; margin:0; padding:0}
.retroliste li{display:flex; align-items:center; gap:10px; padding:7px 0; border-top:1px solid var(--linie); font-size:14px}
.retroliste li:first-child{border-top:0}
.retroliste li small{margin-left:auto; color:var(--grau); font-variant-numeric:tabular-nums}
.retroliste li.erledigt .zeichen{color:#1E7A43; font-weight:700}
.retroliste li.laeuft .zeichen{color:var(--akzent); font-weight:700}
.planzeile.warn b{color:#B9770E}
a.stark{display:inline-block; text-decoration:none; text-align:center; color:#0A2340; min-height:48px}
a.stark.gross{display:block; width:100%; padding:14px; font-size:16px; margin-top:12px}

/* ===================== Musterfotos ===================== */
.musterblock{margin:10px 0 4px}
.musterzeile,.vergleichszeile{display:grid; grid-template-columns:1fr 1fr; gap:8px}
figure.musterkachel{margin:0; border-radius:10px; overflow:hidden; border:3px solid var(--linie); background:var(--grund); cursor:zoom-in}
figure.musterkachel img{display:block; width:100%; aspect-ratio:4/3; object-fit:cover}
figure.musterkachel figcaption{padding:6px 8px}
figure.musterkachel figcaption b{display:block; font-size:11px; letter-spacing:.05em}
figure.musterkachel figcaption small{display:block; font-size:11px; color:var(--grau); line-height:1.3}
figure.musterkachel.negativ{border-color:#C0392B}
figure.musterkachel.negativ figcaption b{color:#C0392B}
figure.musterkachel.positiv{border-color:#1E7A43}
figure.musterkachel.positiv figcaption b{color:#1E7A43}
figure.musterkachel.eigen{border-color:var(--akzent); cursor:default}
figure.musterkachel.eigen figcaption b{color:var(--akzent)}
figure.musterkachel.gross{cursor:default; margin-bottom:12px}
.galerie{overflow-y:auto; padding:16px; place-items:start center}
.galerieinhalt{background:var(--grund); border-radius:12px; padding:16px; max-width:520px; width:100%; cursor:default}
.galerieinhalt h3{margin:0 0 12px; font-size:15px}
.galerieinhalt .knopfreihe{justify-content:flex-end; margin-top:12px}

/* ===================== Kopplungs-Code ===================== */
.qrkarte{text-align:center}
.qrbild{display:block; width:100%; max-width:260px; margin:10px auto; image-rendering:pixelated; border:1px solid var(--linie); border-radius:8px}
.qrcode{display:block; font-size:18px; letter-spacing:.14em; font-variant-numeric:tabular-nums; color:var(--akzent)}
video.scanbild{width:100%; max-width:520px; border-radius:12px}

/* ===================== Mitarbeiter ===================== */
tr.stillgelegt{opacity:.45}
tr.stillgelegt .modell{text-decoration:line-through}

/* ===================== Foto-Markierung ===================== */
body.fotoseite{padding-bottom:calc(64px + env(safe-area-inset-bottom))}
.zeichenschicht{
  position:fixed; inset:0; z-index:45; background:#000;
  display:flex; flex-direction:column;
}
.zeichenflaeche{position:relative; flex:1 1 auto; display:grid; place-items:center; overflow:hidden}
.zeichenflaeche img{max-width:100%; max-height:100%; display:block; user-select:none; -webkit-user-drag:none}
.zeichenflaeche canvas{position:absolute; inset:auto; touch-action:none; cursor:crosshair}
.werkzeugleiste,.markenleiste{
  display:flex; gap:6px; padding:8px 10px; overflow-x:auto;
  background:var(--grund); border-top:1px solid var(--linie);
}
button.farbknopf{
  flex:0 0 auto; width:34px; height:34px; border-radius:50%; border:3px solid transparent;
  background:var(--f); cursor:pointer;
}
button.farbknopf[aria-pressed="true"]{border-color:var(--text); transform:scale(1.12)}
button.wzknopf,button.markenknopf{
  flex:0 0 auto; border:1px solid var(--linie); background:var(--grund); color:var(--text);
  border-radius:16px; padding:7px 12px; font:inherit; font-size:13px; cursor:pointer; white-space:nowrap;
}
button.wzknopf[aria-pressed="true"]{background:var(--balken); color:#FFF; border-color:var(--text)}
button.markenknopf{background:var(--akzent-hell); border-color:var(--akzent); color:var(--akzent); font-weight:600}
.zeichenknoepfe{
  display:flex; gap:8px; padding:10px;
  padding-bottom:calc(10px + env(safe-area-inset-bottom));
  background:var(--grund); border-top:1px solid var(--linie);
}
.zeichenknoepfe button{flex:1 1 auto}
.zeichenknoepfe .stark{flex:2 1 auto}

/* Schnell-Knopf: von jedem Feld-Screen aus erreichbar */
a.fotoknopf{
  position:fixed; right:16px; z-index:15;
  bottom:calc(76px + env(safe-area-inset-bottom));
  width:56px; height:56px; border-radius:50%;
  background:var(--akzent); color:#FFF; text-decoration:none;
  display:grid; place-items:center; font-size:24px;
  box-shadow:0 6px 18px var(--schatten);
}


/* ===================== Hell / Dunkel ===================== */
button.thema{
  border:1px solid var(--linie); background:var(--grund); color:var(--grau);
  border-radius:6px; padding:5px 9px; font-size:14px; line-height:1; cursor:pointer;
}
button.thema:hover{border-color:var(--akzent); color:var(--akzent)}
.chatkopf button.thema{background:rgba(255,255,255,.15); border-color:transparent; color:#FFF}


/* ===================== Info-Karten =====================
   Zwei Familien, ein Bauplan: blau erklaert, gelb warnt.
   Farben kommen ausschliesslich aus den Tokens oben - damit der
   Hell/Dunkel-Schalter beide Modi wirklich trifft.
   Bewusst ohne Bewegung: kein Blinken, keine Animation. Auf dem Dach
   soll die Karte gelesen und nicht angeschaut werden. */
.info-card{
  display:flex; gap:10px; align-items:flex-start;
  margin:12px 0; padding:12px 14px;
  border:1px solid; border-left-width:4px; border-radius:0 10px 10px 0;
  font-size:14px; line-height:1.45;
}
.info-card .info-card-zeichen{font-size:18px; line-height:1.3; flex:0 0 auto}
.info-card .info-card-text{flex:1 1 auto; min-width:0}
.info-card b{display:block; font-size:12px; letter-spacing:.05em; text-transform:uppercase; margin-bottom:3px}
.info-card p{margin:0; color:inherit}
.info-card p + p{margin-top:6px}
.info-card ul{margin:6px 0 0; padding-left:18px}
.info-card li{margin:2px 0}
html[lang="km"] .info-card b{text-transform:none; letter-spacing:normal}

.info-card-blue{
  background:var(--info-blau-flaeche);
  border-color:var(--info-blau-rand);
  color:var(--info-blau-text);
}
.info-card-blue b{color:var(--info-blau-titel)}

.info-card-yellow{
  background:var(--info-gelb-flaeche);
  border-color:var(--info-gelb-rand);
  color:var(--info-gelb-text);
}
.info-card-yellow b{color:var(--info-gelb-titel)}

/* Am Anfang eines Formulars darf mehr stehen als spaeter. */
.info-card.einstieg{font-size:15px; padding:14px 16px}

/* ===================== Zwischenspeichern =====================
   Ruhig, klein, immer an derselben Stelle. Der Nutzer soll den Stand
   sehen koennen, aber nicht darauf achten muessen. */
.speicherstand{display:flex; align-items:center; gap:6px; font-size:12px; color:var(--grau)}
.speicherstand .punkt{width:7px; height:7px; border-radius:50%; background:var(--grau); flex:0 0 auto}
.speicherstand.laeuft .punkt{background:var(--akzent)}
.speicherstand.gesichert .punkt{background:#1E7A43}
.speicherstand.offen{color:var(--info-gelb-rand)}
.speicherstand.offen .punkt{background:var(--info-gelb-rand)}
.speicherfortschritt{font-variant-numeric:tabular-nums}

/* ===================== Rueckfrage-Knopf ===================== */
button.rueckfrage_knopf{
  display:inline-flex; align-items:center; gap:6px; align-self:flex-start;
  margin-top:4px; padding:6px 11px;
  border:1px solid var(--info-blau-rand); border-radius:16px;
  background:var(--info-blau-flaeche); color:var(--info-blau-text);
  font:inherit; font-size:12px; font-weight:600; cursor:pointer;
}
button.rueckfrage_knopf:hover{background:var(--info-blau-rand); color:var(--grund)}
button.rueckfrage_knopf .zeichen{font-size:14px; line-height:1}
button.rueckfrage_knopf[aria-pressed="true"]{
  border-color:var(--info-gelb-rand); background:var(--info-gelb-flaeche); color:var(--info-gelb-text);
}
button.rueckfrage_knopf[aria-pressed="true"]:hover{background:var(--info-gelb-rand); color:var(--grund)}

/* Ein Feld mit offener Frage bleibt sichtbar markiert, bis sie beantwortet ist. */
.feld.frage_offen > span::after{
  content:''; display:inline-block; width:7px; height:7px; margin-left:6px;
  border-radius:50%; background:var(--info-gelb-rand); vertical-align:middle;
}
.frage_marke{
  display:inline-block; font-size:10px; font-weight:700; letter-spacing:.05em;
  padding:2px 7px; border-radius:20px; margin-top:4px;
  background:var(--info-gelb-flaeche); color:var(--info-gelb-text);
  border:1px solid var(--info-gelb-rand);
}

/* Der Dialog der Rueckfrage - schmal, mit dem Feldstand als Beleg. */
.rf_schicht{
  position:fixed; inset:0; z-index:55; background:rgba(0,0,0,.55);
  display:grid; place-items:end center; padding:0;
}
.rf_kasten{
  background:var(--grund); color:var(--text); width:100%; max-width:560px;
  border-radius:14px 14px 0 0; padding:16px;
  padding-bottom:calc(16px + env(safe-area-inset-bottom));
  box-shadow:0 -8px 30px var(--schatten); max-height:88vh; overflow:auto;
}
.rf_kasten h3{margin:0 0 8px; font-size:16px}
.rf_feldstand{
  font-size:13px; padding:8px 10px; border-radius:8px; margin:0 0 10px;
  background:var(--flaeche); border:1px solid var(--linie); word-break:break-word;
}
.rf_feldstand b{display:block; font-size:11px; color:var(--grau); text-transform:uppercase; letter-spacing:.05em}
.rf_kasten textarea{
  font:inherit; font-size:16px; padding:10px; width:100%; resize:vertical;
  border:1px solid var(--linie); border-radius:8px; background:var(--grund); color:var(--text);
}
.rf_kasten .knopfreihe{margin-left:0; justify-content:flex-end; margin-top:12px}

@media (max-width:560px){
  .info-card{font-size:14px}
  .rf_kasten{max-width:none}
}

/* ---------- Modul 26: Arbeitsgruppe, Vier-Augen, Warteschlange ---------- */
/* Alle Farben kommen aus den Tokens oben - hell und dunkel tragen dieselbe
   Klasse, hier steht kein einziger fester Farbwert. */
.karte.gruppe{border:1px solid var(--linie);border-radius:10px;padding:.7rem .8rem;margin:.6rem 0;background:var(--flaeche)}
.karte.gruppe h3{margin:0 0 .2rem;font-size:1rem;color:var(--text)}
.karte.gruppe .knopf{display:inline-block;margin-top:.4rem}
.pruefzeile.vier_augen{border-left:4px solid var(--info-gelb-rand);padding-left:.5rem}
.pruefzeile .vieraugen{color:var(--info-gelb-titel);font-weight:600}
.pruefzeile .gezeichnet{color:var(--grau)}
.pruefzeile .offen{color:var(--info-gelb-titel);font-weight:600}
.ws_stand{font-size:.8rem;margin-top:.3rem;color:var(--grau)}
.ws_stand[data-stand="sendet"]{color:var(--info-blau-titel);font-weight:600}
.ws_stand[data-stand="offline"]{color:var(--info-gelb-titel);font-weight:600}

/* ---------- Baustellen-Zahlenfeld: grosse Tasten statt Tastatur ---------- */
/* Alle Groessen so, dass sie mit Handschuh treffbar sind (min. 48 px). */
.zahlenfeld{border:1px solid var(--linie);border-radius:12px;padding:.7rem;margin:.6rem 0;background:var(--flaeche)}
.zf_kopf{display:flex;justify-content:space-between;align-items:baseline;gap:.5rem;margin-bottom:.5rem}
.zf_titel{font-weight:600;color:var(--text)}
.zf_anzeige{font-size:1.6rem;font-weight:700;font-variant-numeric:tabular-nums;color:var(--text)}
.zf_anzeige[data-stand="leer"]{color:var(--grau)}
.zf_anzeige[data-stand="ausserhalb"]{color:var(--info-gelb-titel)}
.zf_vorschlaege{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:.5rem}
.zf_vorschlag{min-height:48px;min-width:64px;padding:0 .8rem;border:1px solid var(--linie);border-radius:10px;
  background:var(--grund);color:var(--text);font-size:1.05rem;font-weight:600}
.zf_stufen{display:flex;gap:.4rem;margin-bottom:.5rem}
.zf_stufe{flex:1;min-height:48px;border:1px solid var(--linie);border-radius:10px;background:var(--grund);
  color:var(--text);font-size:1.05rem;font-weight:600}
.zf_block{display:grid;grid-template-columns:repeat(3,1fr);gap:.4rem}
.zf_taste{min-height:56px;border:1px solid var(--linie);border-radius:10px;background:var(--grund);
  color:var(--text);font-size:1.4rem;font-weight:600;font-variant-numeric:tabular-nums}
.zf_taste.zurueck{color:var(--info-gelb-titel)}
.zf_vorschlag:active,.zf_stufe:active,.zf_taste:active{background:var(--akzent-hell)}
.zf_hinweis{margin:.5rem 0 0;color:var(--grau)}
.zf_hinweis.warn{color:var(--info-gelb-titel);font-weight:600}
select.gross{min-height:48px;font-size:1.05rem}

/* ---------- Modul 40: Stueckliste mit Klick-Mengen ---------- */
.mengenwahl{display:inline-flex;align-items:center;gap:.4rem}
.mengen_taste{min-width:48px;min-height:48px;border:1px solid var(--linie);border-radius:10px;
  background:var(--grund);color:var(--text);font-size:1.3rem;font-weight:600}
.mengen_taste:active{background:var(--akzent-hell)}
.mengen_wert{min-width:3ch;text-align:center;font-variant-numeric:tabular-nums;font-size:1.1rem}
.bomliste{list-style:none;margin:.6rem 0 0;padding:0}
.bom_zeile{display:grid;grid-template-columns:1fr auto auto;gap:.3rem .6rem;align-items:baseline;
  padding:.45rem 0;border-bottom:1px solid var(--linie)}
.bom_zeile.erzeugt{background:var(--flaeche)}
.bom_name{font-weight:600;color:var(--text)}
.bom_menge{font-variant-numeric:tabular-nums;color:var(--text)}
.bom_preis{color:var(--grau);text-align:right}
.bom_herkunft{grid-column:1/-1;color:var(--grau)}
.bom_warn{grid-column:1/-1;color:var(--info-gelb-titel);font-weight:600}

/* ---------------- Das brauchen wir! / Inventur ---------------- */
.wb_wippe{ display:flex; gap:8px; margin-bottom:12px; }
.wb_wippe .tab{
  flex:1; padding:10px; border:1px solid var(--linie); border-radius:10px;
  background:var(--grund); color:var(--text); font-weight:600; cursor:pointer;
}
.wb_wippe .tab.an{ background:var(--akzent); color:#fff; border-color:var(--akzent); }
.fotowahl{
  display:flex; align-items:center; justify-content:center; min-height:120px;
  border:2px dashed var(--linie); border-radius:12px; margin:8px 0; cursor:pointer;
  color:var(--grau); font-size:15px; overflow:hidden;
}
.fotowahl.hat{ border-style:solid; padding:0; }
.wb_vorschau{ width:100%; max-height:220px; object-fit:cover; display:block; }
.wb_eingabe{
  width:100%; box-sizing:border-box; margin:8px 0; padding:10px;
  border:1px solid var(--linie); border-radius:10px; font-size:15px; resize:vertical;
}
.stark.breit{ width:100%; }
.wb_karte{ display:flex; gap:12px; align-items:flex-start; }
.wb_bild{ width:84px; height:84px; object-fit:cover; border-radius:10px; flex:0 0 auto; }
.wb_text{ flex:1; min-width:0; }
.wb_text p{ margin:0 0 4px; word-break:break-word; }
.marke.gut{ background:var(--gut-flaeche,#0a7); color:var(--gut-text,#fff); }

/* ---------------- Theme-Picker (15 Paletten) ---------------- */
/* --color-* Aliase: Fallback auf die App-Variablen, falls das Skript noch
   nicht lief. Bei aktiver Palette ueberschreibt basis.js sie inline. */
:root{
  --akzent2:#3D5A80;
  --color-bg:var(--grund); --color-surface:var(--flaeche); --color-border:var(--linie);
  --color-text:var(--text); --color-text-muted:var(--grau);
  --color-accent:var(--akzent); --color-accent-2:var(--akzent2);
  --color-urgent:var(--schlecht-text); --color-success:var(--gut-text);
}
.theme_grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(90px,1fr)); gap:8px; }
.theme_swatch{
  display:flex; flex-direction:column; align-items:center; gap:6px;
  padding:8px 6px; border:1px solid var(--linie); border-radius:10px;
  background:var(--flaeche); color:var(--text); cursor:pointer; font-size:11px; text-align:center;
}
.theme_swatch.aktiv{ border-color:var(--akzent); border-width:2px; font-weight:700; }
.theme_punkte{ display:flex; gap:3px; }
.theme_punkte i{ width:16px; height:16px; border-radius:50%; border:1px solid rgba(128,128,128,.35); display:block; }

/* ---------------- SAFE to... Kontextmenü ---------------- */
.safe_overlay{
  position:fixed; inset:0; z-index:40; display:flex; align-items:flex-end; justify-content:center;
  background:rgba(0,0,0,.45); padding:16px;
}
.safe_menu{
  width:100%; max-width:420px; background:var(--grund); color:var(--text);
  border:1px solid var(--linie); border-radius:16px; padding:14px; display:flex; flex-direction:column; gap:8px;
  box-shadow:0 -4px 24px var(--schatten);
}
.safe_menu h3{ margin:2px 0 6px; font-size:15px; }
.safe_opt{
  text-align:left; padding:13px 14px; border:1px solid var(--linie); border-radius:10px;
  background:var(--flaeche); color:var(--text); font-size:15px; cursor:pointer;
}
.safe_opt:hover{ border-color:var(--akzent); }

/* ---------------- MEMBER-Menü im Chat-Kopf ---------------- */
.member_knopf{
  flex:1 1 auto; min-width:0; display:flex; align-items:center; gap:8px;
  background:rgba(255,255,255,.14); border:0; color:#FFF; border-radius:10px;
  padding:6px 10px; cursor:pointer; text-align:left;
}
.member_knopf .member_icon{font-size:18px; flex:0 0 auto}
.member_knopf .chattitel{flex:1 1 auto; min-width:0}
.member_knopf .member_pfeil{flex:0 0 auto; opacity:.8; font-size:12px}
.member_overlay{
  position:fixed; inset:0; z-index:45; background:rgba(0,0,0,.4);
  display:flex; align-items:flex-start; justify-content:center; padding-top:64px;
}
.member_menu{
  width:calc(100% - 32px); max-width:420px; background:var(--grund); color:var(--text);
  border:1px solid var(--linie); border-radius:14px; padding:10px; display:flex; flex-direction:column; gap:6px;
  box-shadow:0 6px 24px var(--schatten);
}
.member_menu h3{margin:2px 4px 6px; font-size:14px; color:var(--grau)}
.member_eintrag{
  display:flex; align-items:center; gap:10px; padding:12px; border:1px solid var(--linie);
  border-radius:10px; background:var(--flaeche); color:var(--text); font-size:15px; cursor:pointer; text-align:left;
}
.member_eintrag.aktiv{border-color:var(--akzent); border-width:2px; font-weight:700}
.member_eintrag .member_e_text{flex:1 1 auto}
.member_eintrag .member_haken{color:var(--akzent)}
/* Video-Knopf schwebt jetzt im Chat statt im Kopf (Skizze: Kopf = ← MEMBER Sprache) */
.video_knopf.schwebt{
  position:absolute; top:10px; right:12px; z-index:5; width:44px; height:44px; opacity:.92;
}
.chatverlauf{position:relative}

/* Ein Sprach-Umschalter + kleiner Hell/Dunkel-Knopf (Chef 2026-09-01) */
.sprachen .sprach_toggle{
  background:var(--akzent); border-color:var(--akzent); color:#FFF; min-width:38px;
}
#thema{
  border:1px solid var(--linie); background:var(--grund); color:var(--grau);
  border-radius:6px; width:32px; height:30px; padding:0; font-size:15px; cursor:pointer; flex:0 0 auto;
}

/* Aktive Crew unter dem Rollen-Titel - kompakt, bleibt in der Logo-Hoehe. */
.kopf-text{display:flex; flex-direction:column; justify-content:center; overflow:hidden}
.kopf_crew{
  font-size:12px; color:var(--akzent); font-weight:700; line-height:1.2; margin-top:1px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
@media (max-width:560px){ .kopf_crew{font-size:11px} .firma{line-height:1.15} }

/* Sanfter Seiten-Uebergang: der Hintergrund steht sofort (Flash-Killer im
   <head>), der Inhalt blendet weich ein statt hart aufzublitzen. */
@keyframes seite_rein{ from{opacity:0} to{opacity:1} }
body{ animation:seite_rein .2s ease-out both; }
@media (prefers-reduced-motion:reduce){ body{ animation:none } }

/* Messenger: Kanalwechsel + Video schweben unter dem (jetzt normalen) Kopf */
.member_knopf.schwebt, .video_knopf.schwebt{
  position:fixed; top:calc(env(safe-area-inset-top) + 96px); z-index:6;
  width:46px; height:46px; border-radius:50%; border:0; font-size:20px; cursor:pointer;
  box-shadow:0 2px 8px var(--schatten);
}
.member_knopf.schwebt{ left:12px; background:var(--akzent); color:#fff }
.video_knopf.schwebt{ right:12px; background:rgba(0,0,0,.55); color:#fff }

/* ---- Kunden-Kontaktleiste + Kanalwahl (Version B, 18.09.) - nur .tgk*, nichts Globales ---- */
.tgk-leiste{display:flex; gap:8px; justify-content:flex-end; padding:0 12px; margin:4px auto 0; max-width:760px}
.tgk-leiste[hidden]{display:none}
.tgk-leiste .tgk-auf{padding:6px 12px; font-size:14px}
.tgk{position:fixed; inset:0; z-index:1000; display:flex; align-items:center; justify-content:center; padding:16px}
.tgk[hidden]{display:none}
.tgk-grund{position:absolute; inset:0; background:rgba(0,0,0,.5)}
.tgk-fenster{position:relative; width:100%; max-width:420px; max-height:calc(100vh - 32px); overflow:auto;
  background:var(--grund); color:var(--text); border:1px solid var(--linie); border-radius:14px; padding:16px}
.tgk-kopf{display:flex; justify-content:space-between; align-items:center; gap:10px}
.tgk-zu{border:0; background:transparent; font-size:26px; line-height:1; cursor:pointer; color:inherit}
.tgk-liste{list-style:none; margin:8px 0 0; padding:0}
.tgk-kanal{border-top:1px solid var(--linie); padding:10px 0}
.tgk-name{font-weight:700}
.tgk-sprachen{display:flex; flex-wrap:wrap; gap:6px; margin:4px 0}
.tgk-sprachen span{font-size:12px; padding:2px 8px; border-radius:999px; border:1px solid rgba(127,127,127,.4)}
.tgk-knoepfe{display:flex; gap:8px; flex-wrap:wrap; margin-top:6px}
.tgk-knoepfe a{flex:1 1 120px; text-align:center; text-decoration:none}
.tgk-knoepfe a.tgk-los{display:block; padding:10px 12px; border-radius:10px; font-weight:700; color:#FFF}
.tgk-knoepfe a.tgk-los[href^="https://t.me/"]{background:#229ED9}
.tgk-knoepfe a.tgk-los[href^="tel:"]{background:var(--akzent)}