/* GMS Hive · v346 – Mobilansicht
   ---------------------------------------------------------------------------
   Gleiche Farben, Radien und Kacheln wie der Leitstand am Rechner, aber für
   eine Hand gebaut: große Trefferflächen (mindestens 44 px), Text ab 13 px,
   nichts, was nur beim Hovern erscheint. Die Variablen kommen aus
   leitstand.css; hier werden sie nur für die Handy-Hülle wiederholt, weil
   diese Oberfläche außerhalb von #page.ls liegt. */

.mapp {
  --accent: #FDD329; --accent-ink: rgba(253,211,41,.14);
  --bg: #1A1B20; --surface: #24262D; --surface-2: #2E313A; --surface-3: #393C46;
  --border: rgba(255,255,255,.06); --border-2: rgba(255,255,255,.14);
  --text: #F4F4F6; --text-2: #C7C8CE; --text-3: #8B8D97;
  --ok: #5FC98C; --warn: #EBA53E; --bad: #EA6D57;
  --ok-dim: rgba(95,201,140,.14); --warn-dim: rgba(235,165,62,.14); --bad-dim: rgba(234,109,87,.16);
  --r-panel: 20px; --r-tile: 13px;
  --ease: cubic-bezier(.23,1,.32,1);
  /* Gleiches Licht wie am Rechner: weiche Erhebung, Lichtkante oben links.
     Ohne diese Tiefe wirken die Flächen wie ein unfertiger Entwurf. */
  --sh-up: 6px 6px 14px rgba(0,0,0,.38), -4px -4px 10px rgba(255,255,255,.028);
  --sh-sm: 3px 3px 8px rgba(0,0,0,.30), -2px -2px 6px rgba(255,255,255,.022);
  --sh-in: inset 3px 3px 8px rgba(0,0,0,.4), inset -2px -2px 6px rgba(255,255,255,.03);
  --sh-gelb: 0 8px 20px rgba(253,211,41,.22);
  position: fixed; inset: 0; display: flex; flex-direction: column;
  background: var(--bg); color: var(--text);
  font: 15px/1.45 Inter, system-ui, -apple-system, sans-serif;
  -webkit-tap-highlight-color: transparent;
}
/* Gleicher Ton für alles, was beim Start kurz sichtbar ist – sonst blitzt ein
   dunkleres Rechteck auf hellerem Grund auf, bevor die App gezeichnet ist. */
html.mob-html, body.mob-shell, body.mob-shell #root { background: #1A1B20 !important; }
body.mob-shell { overflow: hidden; }
.mapp *, .mapp *::before, .mapp *::after { box-sizing: border-box; }
.mapp svg { width: 16px; height: 16px; flex: none; }
.mapp button { font: inherit; color: inherit; }

/* --- Kopf (scrollt mit) --------------------------------------------------- */
.mtop { display: flex; align-items: center; gap: 10px;
  margin: calc(6px + env(safe-area-inset-top)) -4px 2px; padding: 4px 0 2px; }
.mtop h1 { margin: 0; font-size: 19px; font-weight: 600; letter-spacing: -.015em; flex: 1;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mwabe { width: 28px; height: 28px; flex: none; display: flex; align-items: center; justify-content: center; }
.mwabe svg { width: 26px; height: 26px; }
.mib, .mback { width: 40px; height: 40px; flex: none; display: flex; align-items: center; justify-content: center;
  border-radius: 13px; background: var(--surface); border: 0; color: var(--text-2); cursor: pointer;
  box-shadow: var(--sh-sm);
  transition: box-shadow 160ms var(--ease), transform 120ms var(--ease); }
.mib:active, .mback:active { transform: scale(.94); box-shadow: var(--sh-in); }
.mib svg, .mback svg { width: 18px; height: 18px; }

/* --- Inhalt -------------------------------------------------------------- */
.mbody { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: 6px 16px calc(102px + env(safe-area-inset-bottom));
  display: flex; flex-direction: column; gap: 12px; }
/* Wichtig: Kinder einer scrollenden Flex-Spalte dürfen NICHT schrumpfen –
   sonst quetscht der Browser lange Inhalte zusammen, statt sie scrollen zu
   lassen (die Auftragskarte war dadurch bis zur Unlesbarkeit flach). */
.mbody > * { flex: none; }
.msec { font: 700 10.5px Inter, system-ui; letter-spacing: .07em; text-transform: uppercase;
  color: var(--text-3); margin: 10px 2px -4px; }
.mleer { display: flex; align-items: center; gap: 10px; padding: 24px 18px; border-radius: var(--r-panel);
  background: var(--surface); box-shadow: var(--sh-up); color: var(--text-3); font-size: 13.5px; }
.mleer.klein { padding: 16px 2px; font-size: 13px; background: none; box-shadow: none; }
.mhint { margin: 14px 2px 0; font-size: 12px; line-height: 1.5; color: var(--text-3); }

/* --- Stempeluhr ---------------------------------------------------------- */
.mclock { background: var(--surface); border-radius: var(--r-panel); padding: 18px 16px 16px;
  box-shadow: var(--sh-up); display: flex; flex-direction: column; gap: 14px; }
.mclock-h { display: flex; align-items: center; gap: 8px; font: 600 12.5px Inter; color: var(--text-3); }
.mclock-t { font: 700 40px/1 Inter; letter-spacing: -.03em; }
.mclock-t em { font-style: normal; font-size: 15px; color: var(--text-3); margin-left: 9px; font-weight: 500; }
.mclock-b { display: flex; align-items: center; justify-content: center; gap: 9px; min-height: 54px;
  border-radius: var(--r-tile); border: 0; background: var(--surface-2); box-shadow: var(--sh-sm);
  color: var(--text); font: 700 15px Inter; cursor: pointer;
  transition: transform 120ms var(--ease), box-shadow 160ms var(--ease); }
.mclock-b:active { box-shadow: var(--sh-in); }
.mclock-b svg { width: 18px; height: 18px; }
.mclock-b:active { transform: scale(.985); }
.mclock-b.go { background: var(--accent); color: #1a1a1a; box-shadow: var(--sh-gelb); }

/* --- Auftragskarte ------------------------------------------------------- */
/* v354: Die Karte ist keine Schaltfläche mehr, sondern Hülle – innen der
   antippbare Kopf und darunter der aufklappbare Teil. Kein Abstand auf der
   Hülle, sonst klafft zugeklappt eine Lücke unter der Zusammenfassung. */
/* v362: Die Karte ist jetzt die Hülle, die abschneidet. Was man sieht, liegt
   auf einer eigenen Schicht, die sich beim Wischen verschiebt – darunter kommt
   die grüne Bestätigung zum Vorschein. */
.mtask { position: relative; width: 100%; border: 0; border-radius: var(--r-panel);
  box-shadow: var(--sh-up); text-align: left; overflow: hidden;
  transition: box-shadow 180ms var(--ease); }
.mtask-sw { position: relative; display: flex; flex-direction: column; gap: 0;
  background: var(--surface); border-radius: var(--r-panel); padding: 15px 16px;
  touch-action: pan-y; will-change: transform; }
.mtask-bg { position: absolute; inset: 0; display: flex; align-items: center;
  justify-content: flex-start; padding: 0 20px; background: var(--ok-dim);
  border-radius: var(--r-panel); pointer-events: none; opacity: 0;
  transition: opacity 160ms var(--ease); }
.mtask.swipe-links .mtask-bg { justify-content: flex-end; }
.mtask.swipe .mtask-bg { transition: none; }
.mtask.bereit .mtask-bg { background: rgba(95,201,140,.26); }
.mtask.quittiert .mtask-sw { animation: mquitt 320ms var(--ease); }
/* Das Druckgefühl kommt aus dem taktilen Feedback (siehe ganz unten) – hier
   keine zweite, konkurrierende Regel. */
.mtask-top { display: flex; flex-direction: column; gap: 10px; }
.mtask.gross { cursor: default; }
.mtask.dring .mtask-sw::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px;
  background: var(--bad); border-radius: var(--r-panel) 0 0 var(--r-panel); }
.mtask.fertig { opacity: .6; }
.mtask-h { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.mnr { font: 600 10.5px Inter; letter-spacing: .05em; color: var(--text-3); }
.mtask h3 { margin: 0; font-size: 17px; font-weight: 600; line-height: 1.2; overflow-wrap: anywhere; }
.mtask-o, .mtask-m { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--text-3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mtask-o svg, .mtask-m svg { width: 13px; height: 13px; }

.mchip { display: inline-flex; align-items: center; gap: 5px; border-radius: 20px; padding: 4px 9px;
  font: 700 10.5px Inter; background: var(--surface-2); color: var(--text-2); }
.mchip svg { width: 11px; height: 11px; }
.mchip.bad { background: var(--bad-dim); color: var(--bad); }
.mchip.warn { background: var(--warn-dim); color: var(--warn); }
.mchip.ok { background: var(--ok-dim); color: var(--ok); }

/* Adresse = Route */
.madr { display: flex; align-items: center; gap: 9px; background: var(--surface-2); border-radius: var(--r-tile);
  padding: 12px; font-size: 13.5px; color: var(--text); text-decoration: none; min-height: 48px; }
.madr svg { width: 16px; height: 16px; color: var(--accent); }
.madr span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.madr em { flex: none; font-style: normal; font: 700 10px Inter; letter-spacing: .05em; text-transform: uppercase;
  background: var(--accent); color: #1a1a1a; border-radius: 20px; padding: 5px 10px; }
.madr:active { transform: scale(.995); }
.madr.leer { color: var(--text-3); border: 1px dashed var(--border-2); background: none; }
.madr.leer svg { color: var(--text-3); }

/* Fortschritt */
.mbar { position: relative; height: 22px; border-radius: 20px; background: var(--surface-2); overflow: hidden; }
.mbar i { position: absolute; inset: 0 auto 0 0; background: var(--warn); opacity: .3;
  transition: width 420ms var(--ease); }
.mbar.voll i { background: var(--ok); opacity: .35; }
.mbar small { position: relative; display: block; line-height: 22px; padding: 0 11px;
  font: 600 11px Inter; color: var(--text-2); }

/* --- Schnellzugriff + Zahlen --------------------------------------------- */
.mquick { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.mqbtn { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-height: 104px;
  background: var(--surface); border: 0; border-radius: var(--r-panel); padding: 15px; text-align: left;
  box-shadow: var(--sh-up); cursor: pointer;
  transition: transform 120ms var(--ease), box-shadow 180ms var(--ease); }
.mqbtn svg { margin-bottom: 6px; }
.mqbtn svg { width: 19px; height: 19px; color: var(--accent); }
.mqbtn b { font-size: 14px; font-weight: 600; line-height: 1.25; letter-spacing: -.01em; }
.mqbtn small { font-size: 11.5px; color: var(--text-3); line-height: 1.35; }
.mqbtn:active { transform: scale(.98); box-shadow: var(--sh-sm); }
.mqbtn.pri { background: var(--accent); color: #1a1a1a; box-shadow: var(--sh-gelb); }
.mqbtn.pri svg { color: #1a1a1a; }
.mqbtn.pri small { color: rgba(26,26,26,.72); }

.mstat { display: grid; grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)); gap: 10px; }
.mcard { display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; min-height: 84px;
  min-width: 0; background: var(--surface); border: 0; border-radius: var(--r-panel);
  padding: 14px; box-shadow: var(--sh-up); text-align: left; color: var(--text);
  text-decoration: none; cursor: default; }
button.mcard, a.mcard { cursor: pointer; transition: transform 120ms var(--ease), box-shadow 180ms var(--ease); }
button.mcard:active, a.mcard:active { transform: scale(.985); box-shadow: var(--sh-sm); }
/* Beschriftung zuerst, Wert darunter groß – so liest man die Kachel in einem
   Blick, statt die Zeile zu suchen, die den Wert erklärt. */
.mcard small { order: -1; font: 600 10.5px Inter; letter-spacing: .05em; text-transform: uppercase;
  color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mcard b { font: 700 27px/1 Inter; letter-spacing: -.025em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mcard b.klein { font-size: 18px; letter-spacing: -.01em; }
.mcard.bad b { color: var(--bad); }
.mcard.ok b { color: var(--ok); }

/* --- Notiz, Kästen ------------------------------------------------------- */
.mnote { display: flex; gap: 11px; background: var(--surface); border-radius: var(--r-panel);
  padding: 14px 16px; border-left: 3px solid var(--accent); box-shadow: var(--sh-up); }
.mnote svg { width: 15px; height: 15px; color: var(--accent); margin-top: 2px; }
.mnote p { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--text-2); white-space: pre-wrap; }

.mcardbox { background: var(--surface); border-radius: var(--r-panel); padding: 6px 14px 14px;
  box-shadow: var(--sh-up); }
.mcardbox-h { display: flex; align-items: center; gap: 8px; padding: 14px 0 10px; font: 600 13px Inter;
  border-bottom: 1px solid var(--border); margin-bottom: 4px; }
.mcardbox-h svg { width: 15px; height: 15px; color: var(--text-3); }
.mcardbox-h span { margin-left: auto; font-size: 11.5px; color: var(--text-3); }

/* --- Aufgaben abhaken ---------------------------------------------------- */
.mitem { display: flex; gap: 11px; padding: 9px 2px; }
.mitem + .mitem { border-top: 1px solid var(--border); }
.mbox { width: 28px; height: 28px; flex: none; border-radius: 9px; border: 1.5px solid var(--border-2);
  background: var(--bg); display: flex; align-items: center; justify-content: center; cursor: pointer;
  transition: background 160ms var(--ease), border-color 160ms var(--ease), transform 120ms var(--ease); }
.mbox.klein { width: 22px; height: 22px; border-radius: 7px; }
.mbox svg { width: 15px; height: 15px; color: #1a1a1a; }
.mbox.klein svg { width: 12px; height: 12px; }
.mbox.on { background: var(--ok); border-color: var(--ok); }
.mbox:active { transform: scale(.92); }
.mbox[disabled] { cursor: default; opacity: .7; }
.mitem-t { flex: 1; min-width: 0; }
.mitem-t b { font-size: 15px; font-weight: 600; overflow-wrap: anywhere; }
.mitem-t b .n { color: var(--accent); margin-right: 5px; }
.mitem.done .mitem-t b { color: var(--text-3); text-decoration: line-through; }
.mitem-t p { margin: 3px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--text-2); white-space: pre-wrap; }

.mcond { display: flex; flex-wrap: wrap; gap: 5px; margin: 8px 0 0; }
.mcond span { display: inline-flex; align-items: center; gap: 5px; border-radius: 20px; padding: 5px 10px;
  font: 600 11px Inter; }
.mcond svg { width: 12px; height: 12px; }
.mcond .ja { background: var(--ok-dim); color: var(--ok); }
.mcond .nein { background: var(--bad-dim); color: var(--bad); border: 1px solid rgba(234,109,87,.45); }

.mplan { display: inline-flex; align-items: center; gap: 7px; margin-top: 9px; min-height: 40px;
  background: var(--surface-2); border: 0; border-radius: var(--r-tile); padding: 9px 12px;
  color: var(--text-2); font: 600 12.5px Inter; cursor: pointer; }
.mplan svg { width: 14px; height: 14px; color: var(--accent); }

.msubs { display: flex; flex-direction: column; gap: 2px; margin: 9px 0 0; }
.msub { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 40px; text-align: left;
  background: none; border: 0; padding: 4px 2px; cursor: pointer; font-size: 13.5px; color: var(--text-2); }
.msub.on > span:last-child { color: var(--text-3); text-decoration: line-through; }
.msub[disabled] { cursor: default; }

/* --- Kommentare ---------------------------------------------------------- */
.mkomm { display: flex; gap: 10px; padding: 9px 2px; }
.mkomm + .mkomm { border-top: 1px solid var(--border); }
.mav { width: 30px; height: 30px; flex: none; border-radius: 10px; background: var(--surface-3);
  display: flex; align-items: center; justify-content: center; font: 700 11.5px Inter; color: var(--text-2); }
.mav.gross { width: 46px; height: 46px; border-radius: 15px; font-size: 16px; }
.mkomm-h { display: flex; align-items: center; gap: 8px; }
.mkomm-h b { font-size: 12.5px; font-weight: 600; }
.mkomm-h em { font-style: normal; font-size: 10.5px; color: var(--text-3); }
.mkomm p { margin: 2px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--text-2);
  white-space: pre-wrap; overflow-wrap: anywhere; }
.mkneu { display: flex; gap: 8px; align-items: flex-end; padding: 10px 0 2px; }
.mkneu textarea { flex: 1; min-width: 0; background: var(--bg); border: 0; box-shadow: var(--sh-in);
  border-radius: var(--r-tile); color: var(--text); padding: 13px; font: 14px/1.4 Inter; resize: none; }
.mkneu textarea:focus { outline: none; box-shadow: var(--sh-in), 0 0 0 2px rgba(253,211,41,.3); }
.mksend { flex: none; width: 50px; height: 50px; border-radius: var(--r-tile); border: 0;
  background: var(--accent); color: #1a1a1a; display: flex; align-items: center; justify-content: center;
  cursor: pointer; box-shadow: var(--sh-gelb); transition: transform 120ms var(--ease); }
.mksend svg { width: 18px; height: 18px; }
.mksend:active { transform: scale(.94); }

/* --- Reiter, Suche, Zeilen ----------------------------------------------- */
.mtabs { display: flex; gap: 6px; padding: 2px 0 2px; overflow-x: auto; scrollbar-width: none; }
.mtabs::-webkit-scrollbar { display: none; }
.mtab { flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 42px;
  background: var(--surface); border: 0; border-radius: 22px; padding: 9px 15px;
  color: var(--text-3); font: 600 13px Inter; cursor: pointer; box-shadow: var(--sh-sm);
  transition: color 160ms var(--ease), box-shadow 180ms var(--ease); }
.mtab span { font-size: 11px; opacity: .8; }
.mtab.on { color: var(--accent); background: var(--accent-ink); box-shadow: var(--sh-in); }

.msuche { display: flex; align-items: center; gap: 10px; background: var(--bg); border-radius: var(--r-tile);
  padding: 0 14px; min-height: 52px; box-shadow: var(--sh-in); }
.msuche svg { width: 16px; height: 16px; color: var(--text-3); }
.msuche input { flex: 1; min-width: 0; background: none; border: 0; color: var(--text); font: 15px Inter;
  padding: 13px 0; }
.msuche input:focus { outline: none; }

.mkontakt { display: flex; align-items: center; gap: 12px; background: var(--surface);
  border-radius: var(--r-panel); padding: 12px 14px; box-shadow: var(--sh-up); }
.mk-t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.mk-t b { font-size: 14.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mk-t small { font-size: 11.5px; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mk-b { width: 44px; height: 44px; flex: none; border-radius: 13px; background: var(--surface-2);
  display: flex; align-items: center; justify-content: center; color: var(--accent); }
.mk-b:active { transform: scale(.94); }

.mzeile { display: flex; align-items: center; gap: 12px; background: var(--surface); border: 0;
  border-radius: var(--r-panel); padding: 15px; width: 100%; text-align: left; color: var(--text);
  font-size: 14px; box-shadow: var(--sh-up); }
.mzeile.klick { cursor: pointer; min-height: 52px; }
.mzeile.klick svg:last-child { margin-left: auto; color: var(--text-3); }
.mzeile.klick span { flex: 1; }
.mzeile.klick:active { background: var(--surface-2); }
.mzd { font-size: 13px; color: var(--text-2); min-width: 92px; }
.mzt { font: 700 14px Inter; }
.mzn { font-size: 12px; color: var(--text-3); margin-left: auto; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; max-width: 45%; }
.mliste { display: flex; flex-direction: column; gap: 6px; }
.mprofil { display: flex; align-items: center; gap: 14px; background: var(--surface);
  border-radius: var(--r-panel); padding: 18px; box-shadow: var(--sh-up); }
.mprofil b { display: block; font-size: 16px; font-weight: 600; }
.mprofil small { font-size: 12.5px; color: var(--text-3); }

/* --- Untere Leiste (v353) ------------------------------------------------
   Schwebende Pille statt angeklebter Leiste: sie sitzt mit Abstand über dem
   Rand, der Inhalt scrollt sichtbar darunter weg. Nur Symbole – die Wörter
   bleiben für Sprachausgabe und als Tooltip erhalten, nehmen aber keinen
   Platz mehr weg. */
#mnavbar { flex: none; }
.mbot { position: fixed; left: 12px; right: 12px; bottom: max(12px, env(safe-area-inset-bottom));
  display: flex; align-items: center; justify-content: space-between; gap: 2px;
  padding: 9px 12px; border-radius: 30px;
  background: rgba(36,38,45,.94); backdrop-filter: blur(18px) saturate(140%);
  border: 1px solid rgba(255,255,255,.07);
  box-shadow: 0 14px 34px rgba(0,0,0,.55), 0 2px 6px rgba(0,0,0,.4),
              inset 0 1px 0 rgba(255,255,255,.04);
  z-index: 40; }
.mnav { flex: 1; display: flex; align-items: center; justify-content: center;
  min-height: 44px; background: none; border: 0; padding: 8px 0; border-radius: 16px;
  color: var(--text-3); cursor: pointer;
  transition: color 160ms var(--ease), transform 120ms var(--ease); }
/* Beschriftung bleibt im Text stehen (Sprachausgabe), ist aber nicht sichtbar. */
.mnav span { position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; }
.mnav svg { width: 23px; height: 23px; }
.mnav.on { color: var(--accent); }
.mnav:active { transform: scale(.94); }
.mfab { flex: none; width: 56px; height: 56px; margin: 0 2px; border: 0; border-radius: 50%;
  background: var(--accent); color: #1a1a1a; display: flex; align-items: center; justify-content: center;
  cursor: pointer; box-shadow: 0 8px 22px rgba(253,211,41,.34), 0 2px 6px rgba(0,0,0,.4);
  transition: transform 140ms var(--ease); }
.mfab svg { width: 25px; height: 25px; }
.mfab:active { transform: scale(.93); }

/* --- Lead-Fenster -------------------------------------------------------- */
.movl2 { position: fixed; inset: 0; z-index: 1300; background: rgba(10,10,13,.6);
  display: flex; align-items: flex-end; animation: mfade 180ms var(--ease, cubic-bezier(.23,1,.32,1)); }
@keyframes mfade { from { opacity: 0 } to { opacity: 1 } }
.mwin { width: 100%; max-height: 92vh; display: flex; flex-direction: column; background: #24262D;
  border-radius: 22px 22px 0 0; overflow: hidden; animation: mup 260ms cubic-bezier(.32,.72,0,1); }
@keyframes mup { from { transform: translateY(100%) } to { transform: none } }
.mwin-h { display: flex; align-items: center; gap: 10px; padding: 16px 16px 10px; font-size: 16px; }
.mwin-h b { flex: 1; }
.mwin-b { padding: 4px 16px 10px; overflow: auto; display: flex; flex-direction: column; gap: 11px; }
.mwin-f { padding: 10px 16px calc(16px + env(safe-area-inset-bottom)); }
.mfeld { display: flex; flex-direction: column; gap: 5px; }
.mfeld span { font-size: 11.5px; color: #8b8d97; }
.mfeld input, .mfeld textarea { background: #1A1B20; border: 0;
  box-shadow: inset 3px 3px 8px rgba(0,0,0,.4), inset -2px -2px 6px rgba(255,255,255,.03);
  border-radius: 13px; color: #fff; padding: 14px; font: 15px/1.4 Inter; resize: vertical; }
.mfeld input:focus, .mfeld textarea:focus { outline: none;
  box-shadow: inset 3px 3px 8px rgba(0,0,0,.4), 0 0 0 2px rgba(253,211,41,.3); }

/* Am Handy haben die alten Hüllen nichts verloren */
body.mob-shell .topbar, body.mob-shell .botbar, body.mob-shell .sidebar,
body.mob-shell .mnav-overlay { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  .mapp *, .mapp *::before, .mapp *::after { transition: none !important; animation: none !important; }
}

/* --- v347: Karten mit Aussage statt Leerraum ------------------------------ */
/* Die Symbolreihe zeigt, WAS auf dem Auftrag liegt, bevor man ihn öffnet:
   ein Lieferwagen mit „3×", ein Schraubenschlüssel, ein Helm. Erledigtes wird
   grün, Offenes bleibt hell. */
.mtask-p { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.mpos { display: inline-flex; align-items: center; gap: 3px; height: 26px; padding: 0 8px;
  border-radius: 9px; background: var(--surface-2); color: var(--text-2); box-shadow: var(--sh-sm); }
.mpos svg { width: 13px; height: 13px; }
.mpos em { font-style: normal; font: 700 10.5px Inter; color: var(--accent); }
.mpos.ok { color: var(--ok); }
.mpos.ok em { color: var(--ok); }
.mpos.mehr { font: 700 11px Inter; color: var(--text-3); }
.mtask-pt { flex: 1; min-width: 0; font-size: 11.5px; color: var(--text-3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mtask-d { margin-left: auto; font: 600 11px Inter; color: var(--text-3); }
.mtask .mbar { margin-top: 2px; }

/* --- v348: Eine Kachel für offline stehende Türme ------------------------- */
.moffline { display: flex; align-items: center; gap: 13px; background: var(--surface);
  border-radius: var(--r-panel); padding: 15px 16px; box-shadow: var(--sh-up); }
.moff-i { width: 40px; height: 40px; flex: none; border-radius: 13px; display: flex;
  align-items: center; justify-content: center; }
.moff-i svg { width: 19px; height: 19px; }
.moffline.bad .moff-i { background: var(--bad-dim); color: var(--bad); }
.moffline.ok .moff-i { background: var(--ok-dim); color: var(--ok); }
.moff-t { min-width: 0; }
.moff-t b { display: block; font-size: 15px; font-weight: 600; }
.moffline.bad .moff-t b { color: var(--bad); }
.moff-t small { font-size: 11.5px; color: var(--text-3); }

/* Rollenwechsel in den Einstellungen (nur Admin, nur am Handy) */
.set-roleswitch { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.set-rolebtn { display: inline-flex; align-items: center; gap: 6px; min-height: 40px;
  background: #24262D; border: 1px solid transparent; border-radius: 20px; padding: 8px 14px;
  color: #8b8d97; font: 600 12.5px Inter, system-ui; cursor: pointer;
  transition: color 160ms cubic-bezier(.23,1,.32,1), border-color 160ms cubic-bezier(.23,1,.32,1); }
.set-rolebtn:hover { color: #c9c9d0; }
.set-rolebtn.on { color: #FDD329; border-color: #FDD329; background: rgba(253,211,41,.12); }

/* --- v350: Aufgabe aufklappen + zum Abhaken wischen ----------------------- */
.mitem { position: relative; display: block; padding: 0; overflow: hidden;
  border-radius: var(--r-tile); }
.mitem + .mitem { border-top: 1px solid var(--border); border-radius: 0 0 var(--r-tile) var(--r-tile); }
/* Die grüne Fläche liegt hinter der Zeile und wird beim Ziehen sichtbar. */
/* v358: Abhaken geht in beide Richtungen. Die Bestätigung steht dort, wo die
   Zeile weggeschoben wird – sonst liest man sie unter dem eigenen Daumen. */
.mitem-bg { position: absolute; inset: 0; display: flex; align-items: center;
  justify-content: flex-start; padding: 0 18px;
  background: var(--ok-dim); border-radius: var(--r-tile); pointer-events: none; opacity: 0;
  transition: opacity 160ms var(--ease); }
.mitem.swipe-links .mitem-bg { justify-content: flex-end; }
/* v359: Während der Geste steuert das Skript die Deckkraft Pixel für Pixel –
   eine Überblendung würde da hinterherhinken. */
.mitem.swipe .mitem-bg { transition: none; }
.mbg-ok { display: inline-flex; align-items: center; gap: 8px; font: 700 12.5px Inter; color: var(--ok); }
.mbg-ok svg { width: 17px; height: 17px; }

.mitem.bereit .mitem-bg { background: rgba(95,201,140,.26); }
.mitem-sw { position: relative; display: flex; gap: 11px; padding: 10px 2px; background: var(--surface);
  border-radius: var(--r-tile); touch-action: pan-y; will-change: transform; }
.mitem.quittiert .mitem-sw { animation: mquitt 320ms var(--ease); }
@keyframes mquitt { 0% { background: rgba(95,201,140,.22) } 100% { background: var(--surface) } }

/* Kopfzeile der Aufgabe – die ganze Breite ist Schaltfläche */
.mitem-h { display: flex; align-items: center; gap: 9px; width: 100%; background: none; border: 0;
  padding: 2px 0; text-align: left; cursor: pointer; }
.mitem-h[disabled] { cursor: default; }
.mitem-i { display: inline-flex; color: var(--accent); opacity: .9; }
.mitem-i svg { width: 15px; height: 15px; }
.mitem-h b { flex: 1; min-width: 0; font-size: 15px; font-weight: 600; overflow-wrap: anywhere; }
.mitem-h b .n { color: var(--accent); margin-right: 5px; }
.mitem.done .mitem-h b { color: var(--text-3); text-decoration: line-through; }
.msubn { flex: none; font: 700 11px Inter; color: var(--text-3); background: var(--surface-2);
  border-radius: 20px; padding: 4px 8px; }
.msubn.teil { color: var(--warn); background: var(--warn-dim); }
.msubn.ok { color: var(--ok); background: var(--ok-dim); }
.mchev { display: inline-flex; color: var(--text-3);
  transition: transform 220ms var(--ease); }
.mchev svg { width: 16px; height: 16px; }
.mitem.auf .mchev { transform: rotate(180deg); }

/* Der aufklappende Teil: ein Grid mit genau EINEM Kind, dessen Zeilenhöhe von
   0fr auf 1fr fährt. Mehrere Kinder würden eigene Zeilen bilden und nicht
   mitklappen – deshalb der innere Behälter. */
/* v356: Aufklappen über eine gemessene Höhe statt über Rasterzeilen.
   Die Rastertechnik (0fr → 1fr) läuft nicht in jedem Browser sauber; die
   Höhe in Pixeln können alle. Den Pixelwert setzt das Skript beim Umschalten,
   danach räumt es ihn wieder weg – offen gilt dann wieder auto, damit
   nachwachsender Inhalt die Karte nicht abschneidet. */
.mitem-b { height: 0; overflow: hidden; transition: height 260ms var(--ease); }
.mitem.auf .mitem-b { height: auto; }
.mitem-bi { opacity: 0; transition: opacity 180ms var(--ease); }
.mitem.auf .mitem-bi { opacity: 1; }
.mitem-b p { margin: 6px 0 0; font-size: 13px; line-height: 1.5; color: var(--text-2); white-space: pre-wrap; }
.mcond.warn-immer { margin-top: 7px; }
@media (prefers-reduced-motion: reduce) {
  .mitem-b { transition: none; }
}
.mswipehint { display: inline-flex; align-items: center; gap: 5px; margin-left: auto;
  font-style: normal; font: 600 10.5px Inter; color: var(--text-3); opacity: .8; }
.mswipehint svg { width: 12px; height: 12px; }
.mswipehint svg + svg { margin-left: -5px; }
.mcardbox-h .mswipehint + span { margin-left: 10px; }

/* --- v354: Störungs-Widget --------------------------------------------- */
/* Zugeklappt eine Zeile, aufgeklappt die betroffenen Türme. Es steht bewusst
   weit oben: was offline ist, entscheidet über den nächsten Weg. */
.mstoer { background: var(--surface); border-radius: var(--r-panel); box-shadow: var(--sh-up);
  overflow: hidden; }
.mstoer-h { display: flex; align-items: center; gap: 13px; width: 100%; min-height: 62px;
  background: none; border: 0; padding: 13px 16px; text-align: left; cursor: pointer;
  transition: background 160ms var(--ease); }
.mstoer-h[disabled] { cursor: default; }
.mstoer-h:not([disabled]):active { background: var(--surface-2); }
.mstoer.bad .moff-i { background: var(--bad-dim); color: var(--bad); }
.mstoer.ok  .moff-i { background: var(--ok-dim);  color: var(--ok); }
.mstoer.bad .moff-t b { color: var(--bad); }
.mstoer-c { margin-left: auto; color: var(--text-3); display: flex;
  transition: transform 240ms var(--ease); }
.mstoer.auf .mstoer-c { transform: rotate(180deg); }
.mstoer-b { height: 0; overflow: hidden; transition: height 260ms var(--ease); }
.mstoer.auf .mstoer-b { height: auto; }
.mstoer-bi { opacity: 0; transition: opacity 180ms var(--ease); }
.mstoer.auf .mstoer-bi { opacity: 1; }
.mstz { display: flex; align-items: center; gap: 11px; padding: 11px 16px;
  border-top: 1px solid var(--border); }
.mstz-p { width: 32px; height: 32px; flex: none; border-radius: 11px; display: flex;
  align-items: center; justify-content: center; }
.mstz-p svg { width: 16px; height: 16px; }
.mstz-p.bad { background: var(--bad-dim); color: var(--bad); }
.mstz-p.warn { background: var(--warn-dim); color: var(--warn); }
.mstz-t { min-width: 0; flex: 1; }
/* Der Turmname darf umbrechen – abgeschnittene Kundennamen ("Meyer Bau G…")
   helfen unterwegs niemandem. */
.mstz-t b { display: block; font: 600 13.5px/1.3 Inter; }
.mstz-t small { font-size: 11.5px; color: var(--text-3); }
.mstz-r { width: 38px; height: 38px; flex: none; border-radius: 12px; background: var(--surface-2);
  color: var(--text-2); display: flex; align-items: center; justify-content: center;
  transition: transform 120ms var(--ease); }
.mstz-r:active { transform: scale(.94); }
.mstz-s { flex: none; max-width: 96px; background: var(--surface-2); border: 0; border-radius: 12px;
  color: var(--text-2); font: 600 12px Inter; padding: 10px 8px; min-height: 38px; }

/* --- v354: Auftragskarte klappt auf, statt auf eine eigene Seite zu springen */
.mtask-top { width: 100%; background: none; border: 0; padding: 0;
  text-align: left; color: inherit; cursor: pointer;
  transition: transform 120ms var(--ease); }
.mtask-chev { margin-left: auto; color: var(--text-3); display: flex;
  transition: transform 240ms var(--ease); }
.mtask-chev svg { width: 16px; height: 16px; }
.mtask.auf .mtask-chev { transform: rotate(180deg); }
.mtask-b { height: 0; overflow: hidden; transition: height 280ms var(--ease); }
.mtask.auf .mtask-b { height: auto; }
.mtask-bi { opacity: 0; transition: opacity 200ms var(--ease); }
.mtask.auf .mtask-bi { opacity: 1; }
/* Der aufgeklappte Teil bekommt oben Luft und eine Trennkante – sonst
   verschwimmt er mit der Zusammenfassung darüber. */
.mtask-bi > :first-child { margin-top: 13px; }
.mtask-bi { display: flex; flex-direction: column; gap: 11px; }
.mtask.auf { box-shadow: var(--sh-up), 0 0 0 1px var(--border-2); }

@media (prefers-reduced-motion: reduce) {
  .mstoer-b, .mtask-b, .mitem-b, .mstoer-bi, .mtask-bi, .mitem-bi,
  .mstoer-c, .mtask-chev, .mchev { transition: none; }
}

/* --- v357: Druckgefühl am Handy bändigen ---------------------------------
   Das taktile Feedback der App (styles.css) zieht beim Antippen JEDEN Knopf
   auf 70 % zusammen, hellt ihn auf und federt in 420 ms mit Überschwingen
   zurück. Auf kleinen Bedienelementen ist das stimmig – auf einer ganzen
   Auftragskarte sieht es aus, als würde die Schrift zusammenklappen, und es
   kollidiert mit dem Aufklappen, das im selben Moment läuft.
   Hier deshalb: große Flächen kaum, kleine Knöpfe spürbar, beides kurz und
   ohne Nachfedern. */
.mapp .tap-pulse { transform: scale(.985) !important; filter: none !important;
  transition: transform 110ms var(--ease) !important; }
.mapp button, .mapp [role="button"], .mapp [data-status] {
  transition: transform 150ms var(--ease), background-color 140ms ease,
              color 140ms ease, box-shadow 160ms ease; }
/* Kleine, klar umrissene Bedienelemente dürfen deutlicher nachgeben – dort
   ist das Rückmeldung, keine Verzerrung. */
.mapp .mnav.tap-pulse, .mapp .mfab.tap-pulse, .mapp .mib.tap-pulse,
.mapp .mbox.tap-pulse, .mapp .mstz-r.tap-pulse, .mapp .mback.tap-pulse,
.mapp .mksend.tap-pulse, .mapp .mtab.tap-pulse, .mapp .mclock-b.tap-pulse {
  transform: scale(.94) !important; }
@media (prefers-reduced-motion: reduce) {
  .mapp .tap-pulse { transform: none !important; }
}

/* --- v361: Wisch-Diagnose (vorübergehend) -------------------------------- */
.mlog { margin: 0; padding: 12px 14px; font: 11.5px/1.6 ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--text-2); white-space: pre-wrap; word-break: break-word;
  max-height: 46vh; overflow: auto; }

/* --- v364: Aufgeklappter Auftrag ---------------------------------------- */
/* Die Karte schneidet ab (das braucht das Wischen). Erhobene Widgets INNEN
   verlieren dadurch ihren Schatten an der rechten Kante – das sah aus, als
   wären sie angeschnitten. Innen liegende Flächen setzen sich deshalb über
   den Farbton ab statt über einen Schatten; Erhebung in Erhebung ist ohnehin
   eine Ebene zu viel. */
.mtask-bi .mcard,
.mtask-bi .mcardbox,
.mtask-bi .mnote,
.mtask-bi .mkontakt { box-shadow: none; background: var(--surface-2); }
.mtask-bi .mitem-sw { background: var(--surface-2); }
.mtask-bi .mbox { background: var(--surface); }

/* Route: die häufigste Handlung, deshalb der einzige gelbe Knopf im Auftrag. */
.mroute { display: flex; align-items: center; gap: 10px; min-height: 52px;
  background: var(--accent); color: #1a1a1a; border-radius: var(--r-panel);
  padding: 0 16px; text-decoration: none; font: 700 15px Inter;
  transition: transform 120ms var(--ease); }
.mroute b { flex: 1; font-weight: 700; }
.mroute svg { width: 19px; height: 19px; }
.mroute:active { transform: scale(.985); }

/* Kontakt vor Ort: Fließtext, darf umbrechen – hier steht ein Name mit
   Funktion und Nummer, nicht eine Zahl. */
.mkontakt { display: flex; align-items: center; gap: 12px; background: var(--surface);
  border-radius: var(--r-panel); padding: 13px 16px; box-shadow: var(--sh-up);
  text-decoration: none; color: var(--text);
  transition: transform 120ms var(--ease); }
.mkontakt:active { transform: scale(.985); }
.mkont-i { width: 38px; height: 38px; flex: none; border-radius: 13px; display: flex;
  align-items: center; justify-content: center; background: var(--ok-dim); color: var(--ok); }
.mkont-i svg { width: 17px; height: 17px; }
.mkont-t { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.mkont-t small { font: 600 10.5px Inter; letter-spacing: .05em; text-transform: uppercase;
  color: var(--text-3); }
.mkont-t b { font: 600 15px/1.35 Inter; word-break: break-word; }

/* v364: Werkzeugzeile im aufgeklappten Auftrag (nur Büro und Leitung). */
.mtkwz { display: flex; gap: 9px; }
.mwzb { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 46px; border: 0; border-radius: var(--r-tile); background: var(--surface-2);
  color: var(--text-2); font: 600 13.5px Inter; cursor: pointer;
  transition: transform 120ms var(--ease), color 160ms var(--ease); }
.mwzb svg { width: 16px; height: 16px; }
.mwzb:active { transform: scale(.97); }
.mwzb.zurueck { color: var(--ok); }
/* Schmale Zeile an einer erledigten Karte – zurück in die offenen Aufträge. */
.mtkback { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%;
  min-height: 40px; margin-top: 11px; border: 0; border-radius: var(--r-tile);
  background: var(--ok-dim); color: var(--ok); font: 600 13px Inter; cursor: pointer;
  transition: transform 120ms var(--ease); }
.mtkback svg { width: 15px; height: 15px; }
.mtkback:active { transform: scale(.98); }
/* Zwei Felder nebeneinander im Bearbeiten-Fenster (Datum / Uhrzeit). */
.mfeld2 { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }
.mdring { display: flex; align-items: center; gap: 9px; min-height: 48px; padding: 0 15px;
  border: 1px solid var(--border-2); border-radius: 13px; background: #1A1B20;
  color: var(--text-3); font: 600 14px Inter; cursor: pointer;
  transition: color 160ms var(--ease), border-color 160ms var(--ease), background 160ms var(--ease); }
.mdring svg { width: 16px; height: 16px; }
.mdring.on { color: var(--bad); border-color: var(--bad); background: var(--bad-dim); }

/* =========================================================================
   v548 – Überarbeitung: Kopf, Schnellzugriffe, beschriftete Leiste, Inventur
   ========================================================================= */

/* Kopf: Titel mit Datum, rechts das eigene Kürzel als Weg zu Profil/Mehr. */
.mtop-t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.mtop-t small { font-size: 12.5px; color: var(--text-3); margin-top: 1px; }
.mwabe { color: var(--accent); }
.mav-b { font: 700 13px Inter; color: var(--text); letter-spacing: .02em; border-radius: 50%; }

/* Abschnittsüberschrift mit „Alle"-Link */
.msec { display: flex; align-items: center; justify-content: space-between; }
.msec-a { background: none; border: 0; color: var(--accent); font: 600 12px Inter; letter-spacing: 0;
  text-transform: none; padding: 6px 2px; min-height: 32px; cursor: pointer; }

/* Leerer Zustand: ruhig, eine Zeile, keine große Kachel */
.mleer.klein { padding: 14px 4px; gap: 9px; }
.mleer.klein svg { color: var(--ok); }

/* Schnellzugriffe: eine Reihe gleich großer Kacheln */
.mquick { display: grid; gap: 8px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.mquick.n1 { grid-template-columns: 1fr; }
.mquick.n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mquick.n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mquick .mqbtn { min-height: 78px; padding: 12px 4px 10px; align-items: center; justify-content: center;
  gap: 8px; text-align: center; }
.mquick .mqbtn svg { width: 22px; height: 22px; margin: 0; }
.mquick .mqbtn b { font-size: 12.5px; font-weight: 600; }


/* --- Inventur ------------------------------------------------------------ */
.minv-demo { display: flex; gap: 10px; align-items: flex-start; padding: 11px 13px;
  border-radius: var(--r-tile); background: var(--warn-dim); color: var(--text-2); font-size: 12.5px; line-height: 1.4; }
.minv-demo svg { color: var(--warn); margin-top: 1px; }
.minv-demo b { color: var(--warn); font-weight: 600; }

.minv-n { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; display: inline-flex;
  align-items: center; justify-content: center; background: var(--warn-dim); color: var(--warn);
  font: 700 11px Inter; opacity: 1 !important; }
.minv-ok { display: inline-flex; color: var(--ok); opacity: 1 !important; }
.minv-ok svg { width: 14px !important; height: 14px !important; }

.minv-sum { background: var(--surface); border-radius: var(--r-panel); padding: 16px; box-shadow: var(--sh-up);
  display: flex; flex-direction: column; gap: 10px; }
.minv-sum-o { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.minv-sum-t { min-width: 0; display: flex; flex-direction: column; }
.minv-sum-t b { font-size: 16px; font-weight: 600; }
.minv-sum-t small { font-size: 12.5px; color: var(--text-3); }
.minv-zahl { display: flex; flex-direction: column; align-items: flex-end; font: 700 30px/1 Inter;
  letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.minv-zahl small { font: 600 11.5px Inter; letter-spacing: 0; color: var(--text-3); margin-top: 4px; }
.minv-zahl.warn { color: var(--warn); }
.minv-zahl.ok { color: var(--ok); }
.minv-zahl.ok svg { width: 28px; height: 28px; }
.minv-bar { height: 6px; border-radius: 3px; background: var(--bg); box-shadow: var(--sh-in); overflow: hidden; }
.minv-bar i { display: block; height: 100%; border-radius: 3px; background: var(--warn);
  transition: width 260ms var(--ease); }
.minv-bar.voll i { background: var(--ok); }
.minv-meta { font-size: 12.5px; color: var(--text-3); }
.minv-sum .mclock-b { margin-top: 4px; }

.minv-list { display: flex; flex-direction: column; background: var(--surface); border-radius: var(--r-panel);
  box-shadow: var(--sh-up); overflow: hidden; }
.minv-row { display: flex; align-items: center; gap: 10px; padding: 10px 10px 10px 14px; min-height: 62px; }
.minv-row + .minv-row { border-top: 1px solid var(--border); }
.minv-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.minv-t b { font-size: 14px; font-weight: 500; line-height: 1.3; }
.minv-t small { font-size: 12px; color: var(--text-3); }
.minv-t em { font-style: normal; color: var(--warn); font-weight: 600; }
.minv-row.aus .minv-t b { color: var(--text-3); }
.minv-step { flex: none; display: flex; align-items: center; background: var(--bg); border-radius: 14px;
  box-shadow: var(--sh-in); padding: 2px; }
.minv-step button { width: 42px; height: 42px; border: 0; border-radius: 12px; background: none;
  display: flex; align-items: center; justify-content: center; color: var(--text-2); cursor: pointer; }
.minv-step button:active { background: var(--surface-2); transform: scale(.94); }
.minv-step button:disabled { opacity: .3; }
.minv-step span { min-width: 28px; text-align: center; font: 700 15px Inter; font-variant-numeric: tabular-nums; }
.minv-row.warn .minv-step span { color: var(--warn); }

/* Durchzählen */
.minv-zk { display: flex; flex-direction: column; gap: 12px; }
.minv-zk-h { display: flex; align-items: center; gap: 12px; }
.minv-zk-h div { display: flex; flex-direction: column; }
.minv-zk-h b { font-size: 15px; font-weight: 600; }
.minv-zk-h small { font-size: 12.5px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.minv-zk-k { background: var(--surface); border-radius: var(--r-panel); box-shadow: var(--sh-up);
  padding: 22px 16px 16px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; }
.minv-zk-g { display: inline-flex; align-items: center; gap: 4px; font: 600 11px Inter; letter-spacing: .06em;
  text-transform: uppercase; color: var(--text-3); }
.minv-zk-k.fertig .minv-zk-g { color: var(--ok); }
.minv-zk-g svg { width: 13px; height: 13px; }
.minv-zk-n { font-size: 19px; font-weight: 600; letter-spacing: -.01em; line-height: 1.3; max-width: 300px; }
.minv-zk-z { display: flex; align-items: center; gap: 18px; margin: 14px 0 4px; }
.minv-zk-z button { width: 64px; height: 64px; border: 0; border-radius: 20px; background: var(--surface-2);
  box-shadow: var(--sh-sm); display: flex; align-items: center; justify-content: center; color: var(--text); cursor: pointer; }
.minv-zk-z button svg { width: 26px; height: 26px; }
.minv-zk-z button:active { transform: scale(.94); box-shadow: var(--sh-in); }
.minv-zk-z button:disabled { opacity: .3; }
.minv-zk-z span { min-width: 84px; display: flex; flex-direction: column; align-items: center;
  font: 700 52px/1 Inter; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.minv-zk-z span small { font: 500 12.5px Inter; letter-spacing: 0; color: var(--text-3); margin-top: 6px; }
.minv-zk-s { font-size: 13px; color: var(--text-3); }
.minv-zk-s em { font-style: normal; font-weight: 600; }
.minv-zk-s em.warn { color: var(--warn); } .minv-zk-s em.ok { color: var(--ok); }
.minv-zk-q { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: 100%; margin-top: 10px; }
.minv-zk-q button { min-height: 46px; border: 0; border-radius: var(--r-tile); background: var(--surface-2);
  box-shadow: var(--sh-sm); font: 600 13.5px Inter; color: var(--text-2); cursor: pointer; }
.minv-zk-q button:only-child { grid-column: 1 / -1; }
.minv-zk-q button:active { transform: scale(.97); box-shadow: var(--sh-in); }
.minv-zk-f { display: grid; grid-template-columns: 58px 1fr; gap: 8px; }
.minv-zk-f .mclock-b:disabled { opacity: .35; }
/* Ein bis zwei Kacheln: Symbol links, ganzes Wort – flacher und ruhiger */
.mquick.n1 .mqbtn, .mquick.n2 .mqbtn { flex-direction: row; min-height: 60px; gap: 10px; }
.mquick.n1 .mqbtn b, .mquick.n2 .mqbtn b { font-size: 14px; }
/* Werkzeug-Kachel auf Start (Techniker): Wort links, Hinweis daneben, Pfeil rechts */
.mquick.n1 .mqbtn { justify-content: flex-start; padding: 12px 16px; text-align: left; }
.mquick.n1 .mqbtn small { flex: 1; font-size: 12.5px; }
.mquick.n1 .mqbtn svg:last-child { width: 16px; height: 16px; color: var(--text-3); }

/* v549: Fahrzeugwahl als Auswahlliste – passt für beliebig viele Fahrzeuge
   und öffnet am Handy die gewohnte Systemauswahl. */
.minv-wahl { position: relative; display: flex; align-items: center; gap: 12px; min-height: 58px;
  padding: 0 44px 0 14px; background: var(--surface); border-radius: var(--r-tile); box-shadow: var(--sh-up); }
.minv-wahl > svg:first-child { width: 20px; height: 20px; color: var(--accent); }
.minv-wahl > svg:last-child { position: absolute; right: 14px; width: 18px; height: 18px; color: var(--text-3); pointer-events: none; }
.minv-wahl select { -webkit-appearance: none; appearance: none; flex: 1; min-width: 0; height: 58px;
  background: none; border: 0; color: var(--text); font: 600 15px Inter, system-ui, sans-serif; cursor: pointer; }
.minv-wahl select:focus { outline: none; }
.minv-wahl:focus-within { box-shadow: var(--sh-up), 0 0 0 2px var(--accent-ink); }
.minv-wahl option { background: #24262D; color: #F4F4F6; }
/* Allgemeine Feldregeln aus styles.css/leitstand.css geben Selects Fläche und Rundung – hier soll die Kachel selbst das Feld sein. */
.mapp .minv-wahl select { background: transparent !important; box-shadow: none !important; border: 0 !important; border-radius: 0 !important; padding: 0 !important; }