/* Live-UI: animierte Nachbauten der Mesh-App statt Screenshots (23.10.2026).
   Werte aus der echten App übernommen (MUI-Theme in mesh-app-frontend/src/config/theme.ts,
   ausgelesen auf demo.mesh-web.com): Figtree, Text #575757, Karten 12px, Chips 16px, Buttons 12px.
   Markup: inc/live-ui.php, Abläufe: assets/js/live-ui.js. Skaliert über --lui-s. */

@font-face { font-family: "Figtree"; font-weight: 400; font-display: swap; src: url("../fonts/Figtree-Regular.ttf") format("truetype"); }
@font-face { font-family: "Figtree"; font-weight: 500; font-display: swap; src: url("../fonts/Figtree-Medium.ttf") format("truetype"); }
@font-face { font-family: "Figtree"; font-weight: 600; font-display: swap; src: url("../fonts/Figtree-SemiBold.ttf") format("truetype"); }
@font-face { font-family: "Figtree"; font-weight: 700; font-display: swap; src: url("../fonts/Figtree-Bold.ttf") format("truetype"); }

.lui {
  --lui-s: 1;
  --lui-text: #575757;
  --lui-muted: #767676;
  --lui-light: #9ca3af;
  --lui-line: #e0e0e0;
  --lui-blue: #1866dd;
  --lui-info: #e3f2fd;
  --lui-green: #549b49;
  --lui-warn: #ed6c02;
  --lui-red: #d91d19;
  --lui-app-bg: #f3f4f6;
  position: relative;
  font-family: "Figtree", system-ui, sans-serif;
  font-size: calc(12px * var(--lui-s));
  line-height: 1.43;
  color: var(--lui-text);
  text-align: left;
  -webkit-font-smoothing: antialiased;
}
.lui *, .lui *::before, .lui *::after { box-sizing: border-box; }
.lui svg { display: block; }

/* Paper */
.lui-card {
  position: relative; background: #fff; overflow: hidden;
  border-radius: calc(12px * var(--lui-s));
  border: 1px solid rgba(0, 0, 0, .12);
  box-shadow: 0 28px 60px -26px rgba(15, 23, 42, .30);
}
.lui-head {
  display: flex; align-items: center; gap: calc(8px * var(--lui-s));
  padding: calc(14px * var(--lui-s)) calc(16px * var(--lui-s));
  border-bottom: 1px solid var(--lui-line);
}
.lui-title { font-size: calc(16px * var(--lui-s)); font-weight: 600; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lui-title--sm { font-size: calc(14px * var(--lui-s)); font-weight: 700; }
.lui-overline { font-size: calc(12px * var(--lui-s)); font-weight: 600; text-transform: uppercase; color: var(--lui-muted); letter-spacing: .02em; }
.lui-spacer { flex: 1; min-width: 0; }
.lui-muted { color: var(--lui-muted); }
.lui-light { color: var(--lui-light); }
.lui-strong { font-weight: 700; }
.lui-red { color: var(--lui-red) !important; font-weight: 600; }
.lui-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.lui-ellipsis { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }

/* Tabelle (MUI TableCell: 12px, 6px 16px, Linie #e0e0e0) */
.lui-row {
  display: grid; align-items: center; column-gap: calc(12px * var(--lui-s));
  min-height: calc(43px * var(--lui-s));
  padding: calc(6px * var(--lui-s)) calc(16px * var(--lui-s));
  border-bottom: 1px solid var(--lui-line);
  max-height: 10em;
  transition: opacity .45s ease, transform .45s ease, background-color .5s ease;
}
.lui-row:last-child { border-bottom: 0; }
.lui-row--th { min-height: calc(38px * var(--lui-s)); font-weight: 500; }
.lui-row--sel { background: #f5f5f5; }
.lui-row.is-hidden { opacity: 0; transform: translateY(10px); }
.lui-row.is-gone { max-height: 0; min-height: 0; padding-top: 0; padding-bottom: 0; opacity: 0; border-bottom-width: 0; transition: max-height .45s ease, min-height .45s ease, padding .45s ease, opacity .3s ease; }
.lui-cell-lg { font-size: calc(14px * var(--lui-s)); }

/* Chips (MUI Chip) */
.lui-chip {
  display: inline-flex; align-items: center; gap: calc(4px * var(--lui-s)); white-space: nowrap;
  height: calc(24px * var(--lui-s)); padding: 0 calc(10px * var(--lui-s));
  border-radius: calc(16px * var(--lui-s)); font-size: calc(13px * var(--lui-s)); font-weight: 400;
  border: 1px solid transparent;
  transition: background-color .3s, color .3s, border-color .3s, opacity .3s, transform .3s;
}
.lui-chip svg { width: 1.25em; height: 1.25em; flex: none; }
.lui-chip--green { background: var(--lui-green); color: #fff; }
.lui-chip--blue { background: var(--lui-blue); color: #fff; }
.lui-chip--warn { color: var(--lui-warn); border-color: rgba(237, 108, 2, .7); }
.lui-chip--ok { color: var(--lui-green); border-color: rgba(84, 155, 73, .7); }
.lui-chip--outline { color: var(--lui-text); border-color: var(--lui-light); }
.lui-chip--sm { height: calc(22px * var(--lui-s)); font-size: calc(11px * var(--lui-s)); font-weight: 600; padding: 0 calc(8px * var(--lui-s)); background: rgba(0, 0, 0, .08); color: var(--lui-text); }
.lui-chip--info { height: calc(20px * var(--lui-s)); font-size: calc(10px * var(--lui-s)); font-weight: 600; padding: 0 calc(8px * var(--lui-s)); background: var(--lui-info); color: var(--lui-blue); }
.lui-chip--status { height: calc(22px * var(--lui-s)); font-size: calc(11px * var(--lui-s)); font-weight: 600; background: var(--lui-blue); color: #fff; }
.lui-chip.is-hidden { opacity: 0; transform: scale(.85); }

/* Buttons (MUI Button, radius 12) */
.lui-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: calc(6px * var(--lui-s)); white-space: nowrap;
  height: calc(32px * var(--lui-s)); padding: 0 calc(12px * var(--lui-s));
  border-radius: calc(12px * var(--lui-s)); font-size: calc(13px * var(--lui-s)); font-weight: 500;
  color: var(--lui-blue); border: 1px solid rgba(24, 102, 221, .5); background: #fff;
  transition: transform .15s, background-color .3s;
}
.lui-btn--solid { background: var(--lui-blue); color: #fff; border-color: var(--lui-blue); }
.lui-btn svg { width: 1.3em; height: 1.3em; }
.lui-btn.is-press { transform: scale(.95); }

/* Reiter (Projekt) */
.lui-tabs {
  display: flex; gap: calc(2px * var(--lui-s)); margin: calc(10px * var(--lui-s)) calc(12px * var(--lui-s));
  padding: calc(4px * var(--lui-s)); background: #eef0f2; border-radius: calc(10px * var(--lui-s)); overflow: hidden;
}
.lui-tab {
  padding: calc(7px * var(--lui-s)) calc(11px * var(--lui-s)); border-radius: calc(8px * var(--lui-s));
  font-size: calc(13px * var(--lui-s)); color: var(--lui-muted); white-space: nowrap; transition: all .3s;
}
.lui-tab.is-active { background: #fff; color: var(--lui-blue); font-weight: 600; box-shadow: 0 1px 3px rgba(0, 0, 0, .08); }
.lui-pane { display: none; border-top: 1px solid var(--lui-line); }
.lui-pane.is-active { display: block; animation: luiFade .45s ease; }
@keyframes luiFade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* Avatar (MUI Avatar 32px) */
.lui-av {
  width: calc(32px * var(--lui-s)); height: calc(32px * var(--lui-s)); border-radius: 50%; flex: none;
  display: grid; place-items: center; color: #f3f4f6; font-weight: 600; font-size: calc(12px * var(--lui-s));
}
.lui-person { display: flex; align-items: center; gap: calc(10px * var(--lui-s)); min-width: 0; }

/* Fortschritt (MUI LinearProgress, Soll/IST) */
.lui-bar { height: calc(8px * var(--lui-s)); border-radius: 99px; background: #eceff1; overflow: hidden; position: relative; }
.lui-bar > i { position: absolute; inset: 0 auto 0 0; width: 0; border-radius: 99px; background: var(--lui-blue); transition: width .9s cubic-bezier(.2, .8, .2, 1), background-color .3s; }
.lui-bar.is-over > i { background: var(--lui-red); }

.lui-foot {
  display: flex; align-items: center; gap: calc(12px * var(--lui-s));
  padding: calc(12px * var(--lui-s)) calc(16px * var(--lui-s)); border-top: 1px solid var(--lui-line);
}
.lui-foot--sum { font-size: calc(14px * var(--lui-s)); }

/* Eingabe (MUI OutlinedInput, radius 12, Rand #d1d5db) */
.lui-field { position: relative; margin: calc(14px * var(--lui-s)) calc(20px * var(--lui-s)) 0; }
.lui-field label {
  position: absolute; left: calc(10px * var(--lui-s)); top: calc(-8px * var(--lui-s)); padding: 0 4px; background: #fff;
  font-size: calc(10.5px * var(--lui-s)); color: var(--lui-muted); line-height: 1.4;
}
.lui-input {
  min-height: calc(37px * var(--lui-s)); padding: calc(8px * var(--lui-s)) calc(14px * var(--lui-s));
  border: 1px solid #d1d5db; border-radius: calc(12px * var(--lui-s)); font-size: calc(14px * var(--lui-s));
  transition: border-color .25s, box-shadow .25s;
}
.lui-input.is-focus { border-color: var(--lui-blue); box-shadow: 0 0 0 1px var(--lui-blue); }
.lui-input.is-focus::after { content: ""; display: inline-block; width: 1px; height: 1.1em; background: var(--lui-text); vertical-align: -.15em; margin-left: 1px; animation: luiBlink .9s steps(1) infinite; }
@keyframes luiBlink { 50% { opacity: 0; } }

/* Checkbox (MUI, 24px Icon in Blau) */
.lui-check { display: flex; align-items: center; gap: calc(6px * var(--lui-s)); padding: calc(12px * var(--lui-s)) calc(14px * var(--lui-s)) calc(4px * var(--lui-s)); font-size: calc(14px * var(--lui-s)); }
.lui-box { width: calc(18px * var(--lui-s)); height: calc(18px * var(--lui-s)); margin: calc(3px * var(--lui-s)); border-radius: 2px; border: 2px solid #757575; display: grid; place-items: center; transition: all .2s; }
.lui-box svg { width: 100%; height: 100%; stroke: #fff; stroke-width: 3.2; fill: none; opacity: 0; transition: opacity .15s; }
.lui-box.is-on { background: var(--lui-blue); border-color: var(--lui-blue); }
.lui-box.is-on svg { opacity: 1; }

/* Hinweisboxen (Pflichtfelder) */
.lui-alert {
  display: flex; gap: calc(10px * var(--lui-s)); align-items: flex-start;
  margin: calc(14px * var(--lui-s)) calc(20px * var(--lui-s)) calc(18px * var(--lui-s));
  padding: calc(8px * var(--lui-s)) calc(14px * var(--lui-s)); border-radius: calc(12px * var(--lui-s));
  background: #fff4e5; color: #663c00; font-size: calc(12px * var(--lui-s)); line-height: 1.43;
  transition: background-color .35s, color .35s;
}
.lui-alert svg { width: calc(20px * var(--lui-s)); height: calc(20px * var(--lui-s)); flex: none; margin-top: 1px; }
.lui-alert .ok { display: none; }
.lui-alert.is-ok { background: #f1f7f0; color: #444; }
.lui-alert.is-ok .ok { display: block; }
.lui-alert.is-ok .warn { display: none; }
.lui-collapse { overflow: hidden; max-height: 0; transition: max-height .6s ease; }
.lui-collapse.is-open { max-height: 40em; }

/* Mauszeiger, Timer, schwebende Elemente */
.lui-cursor { position: absolute; z-index: 5; width: calc(22px * var(--lui-s)); height: calc(22px * var(--lui-s)); pointer-events: none; opacity: 0;
  transition: left .8s cubic-bezier(.4, 0, .2, 1), top .8s cubic-bezier(.4, 0, .2, 1), opacity .3s; }
.lui-cursor.is-on { opacity: 1; }
.lui-cursor svg { width: 100%; height: 100%; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .3)); }
.lui-cursor.is-click::after { content: ""; position: absolute; left: -6px; top: -6px; width: 20px; height: 20px; border-radius: 50%; background: rgba(24, 102, 221, .35); animation: luiClick .5s ease-out; }
@keyframes luiClick { from { transform: scale(.3); opacity: 1; } to { transform: scale(2.2); opacity: 0; } }

.lui-timer { display: flex; align-items: center; gap: calc(10px * var(--lui-s)); padding: calc(10px * var(--lui-s)) calc(16px * var(--lui-s)); font-size: calc(14px * var(--lui-s)); }
.lui-timer .t { font-weight: 600; font-variant-numeric: tabular-nums; color: var(--lui-green); }
.lui-timer svg { width: calc(20px * var(--lui-s)); height: calc(20px * var(--lui-s)); stroke: var(--lui-green); fill: none; stroke-width: 2; stroke-linecap: round; }
.lui-timer.is-stopped .t { color: var(--lui-text); }
.lui-timer.is-stopped svg { stroke: var(--lui-text); }

.lui-pop { position: absolute; z-index: 3; background: #fff; border-radius: calc(12px * var(--lui-s)); border: 1px solid rgba(0, 0, 0, .12);
  padding: calc(12px * var(--lui-s)) calc(16px * var(--lui-s)); display: flex; gap: calc(12px * var(--lui-s)); align-items: center;
  box-shadow: 0 22px 44px -16px rgba(15, 23, 42, .32);
  transition: opacity .45s ease, transform .55s cubic-bezier(.2, .9, .3, 1.3); }
.lui-pop.is-hidden { opacity: 0; transform: translateY(12px) scale(.94); }
.lui-pop .k { font-size: calc(12px * var(--lui-s)); color: var(--lui-muted); }
.lui-pop .v { font-size: calc(20px * var(--lui-s)); font-weight: 700; line-height: 1.15; }
.lui-pop .v small { font-size: .6em; font-weight: 500; color: var(--lui-muted); }
.lui-pop-ico { width: calc(40px * var(--lui-s)); height: calc(40px * var(--lui-s)); border-radius: calc(10px * var(--lui-s)); background: var(--lui-info); display: grid; place-items: center; flex: none; }
.lui-pop-ico svg { width: 55%; height: 55%; stroke: var(--lui-blue); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Handy (Zeiterfassung, Einsätze) */
.lui-phone { width: 70%; max-width: calc(300px * var(--lui-s)); margin: 0 auto; border-radius: calc(38px * var(--lui-s)); background: #0b0f17; padding: calc(10px * var(--lui-s));
  box-shadow: 0 34px 70px -24px rgba(15, 23, 42, .45); }
.lui-phone-screen { position: relative; border-radius: calc(29px * var(--lui-s)); overflow: hidden; background: var(--lui-app-bg); min-height: calc(400px * var(--lui-s)); }
.lui-phone-bar { display: flex; justify-content: space-between; padding: calc(10px * var(--lui-s)) calc(20px * var(--lui-s)) calc(4px * var(--lui-s)); font-size: calc(11px * var(--lui-s)); font-weight: 600; color: #111; }
.lui-phone-notch { position: absolute; top: calc(8px * var(--lui-s)); left: 50%; transform: translateX(-50%); width: 34%; height: calc(20px * var(--lui-s)); border-radius: 12px; background: #0b0f17; }
.lui-phone-appbar { display: flex; align-items: center; gap: 8px; padding: calc(14px * var(--lui-s)) calc(14px * var(--lui-s)) calc(8px * var(--lui-s)); font-size: calc(16px * var(--lui-s)); font-weight: 700; }
.lui-net { display: flex; align-items: center; gap: 8px; margin: 0 calc(12px * var(--lui-s)) calc(10px * var(--lui-s)); padding: calc(8px * var(--lui-s)) calc(12px * var(--lui-s));
  border-radius: calc(12px * var(--lui-s)); background: #fff4e5; color: #663c00; font-size: calc(12px * var(--lui-s)); transition: background-color .4s, color .4s; }
.lui-net svg { width: 1.4em; height: 1.4em; flex: none; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; }
.lui-net.is-ok { background: #f1f7f0; color: #2f6b28; }
.lui-mcard { margin: 0 calc(12px * var(--lui-s)) calc(10px * var(--lui-s)); background: #fff; border-radius: calc(12px * var(--lui-s)); border: 1px solid rgba(0, 0, 0, .08); }
.lui-sync { width: 1.3em; height: 1.3em; flex: none; }
.lui-sync svg { width: 100%; height: 100%; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Upload (Dokumente) */
.lui-drop { margin: calc(14px * var(--lui-s)) calc(16px * var(--lui-s)); border: 1.5px dashed #c5cbd3; border-radius: calc(12px * var(--lui-s)); padding: calc(14px * var(--lui-s)); text-align: center; color: var(--lui-muted); transition: border-color .3s, background-color .3s; }
.lui-drop.is-over { border-color: var(--lui-blue); background: #f3f8ff; }
.lui-drop b { color: var(--lui-blue); font-weight: 600; }
.lui-file { width: calc(32px * var(--lui-s)); height: calc(38px * var(--lui-s)); border-radius: 4px; background: #fdecec; color: var(--lui-red); font-size: calc(9px * var(--lui-s)); font-weight: 700; display: grid; place-items: end center; padding-bottom: 4px; flex: none; }
.lui-file--dwg { background: var(--lui-info); color: var(--lui-blue); }
.lui-file--img { background: #eef5ec; color: var(--lui-green); }

/* Bühnen */
.lui-stage { position: relative; width: 100%; }
.lui-stage--hero { padding: 2% 0 15% 9%; }
.lui-stage--block { padding: 5% 0 8%; }
.lui-float { position: absolute; z-index: 2; }

/* Kartenbild (contacts_focus): Punktraster wie die übrigen Bilder */
.lui-cardbg {
  position: relative; padding: 7% 0 0 7%; overflow: hidden; max-height: calc(330px * var(--lui-s));
  background-image: radial-gradient(#cfd6e1 1.2px, transparent 1.2px); background-size: 20px 20px;
}
.lui-cardbg .lui-card { border-top-right-radius: 0; border-bottom-right-radius: 0; border-bottom-left-radius: 0; border-right: 0; border-bottom: 0; }
.lui-cardbg::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 18%; background: linear-gradient(to bottom, rgba(243, 244, 246, 0), #f3f4f6); pointer-events: none; }

.lui-cardbg .lui-skip-card { display: none; }

/* Wechselnde Szenen (Akkordeon) */
.lui-switch > .lui-scene { display: none; }
.lui-switch > .lui-scene.is-active { display: block; animation: luiFade .45s ease; }

.lui--block { --lui-s: 1.12; }
.lui--hero { --lui-s: 1.08; }
/* ---------- Seit 25.10.2026 (GaLaBau): Ressourcenplaner, wiederkehrende Rechnungen, Handy ---------- */

/* Ressourcenplaner wie in der App: KW-Pille, Umschalter, Raster Mitarbeiter x Tage, Projekt-Badges */
.lui-dispo-bar { display: flex; align-items: center; gap: calc(8px * var(--lui-s)); padding: calc(12px * var(--lui-s)) calc(14px * var(--lui-s)); border-bottom: 1px solid var(--lui-line); }
.lui-kw { display: inline-flex; align-items: center; height: calc(28px * var(--lui-s)); padding: 0 calc(12px * var(--lui-s)); border-radius: 99px; background: var(--lui-blue); color: #fff; font-size: calc(12px * var(--lui-s)); font-weight: 600; white-space: nowrap; }
.lui-seg { display: inline-flex; border: 1px solid #d1d5db; border-radius: calc(10px * var(--lui-s)); overflow: hidden; font-size: calc(12px * var(--lui-s)); font-weight: 500; }
.lui-seg > span { padding: calc(6px * var(--lui-s)) calc(10px * var(--lui-s)); white-space: nowrap; }
.lui-seg > span.is-on { background: var(--lui-blue); color: #fff; font-weight: 600; }
.lui-dgrid { display: grid; grid-template-columns: calc(132px * var(--lui-s)) repeat(5, minmax(0, 1fr)); }
.lui-dh { position: relative; padding: calc(8px * var(--lui-s)) calc(4px * var(--lui-s)); text-align: center; font-size: calc(11px * var(--lui-s)); font-weight: 600; background: #f6f7f8; border-bottom: 1px solid var(--lui-line); border-left: 1px solid var(--lui-line); line-height: 1.3; }
.lui-dh span { font-weight: 400; color: var(--lui-muted); }
.lui-dh--name { border-left: 0; display: flex; align-items: center; justify-content: center; font-size: calc(12px * var(--lui-s)); }
.lui-dn { display: flex; align-items: center; gap: calc(7px * var(--lui-s)); padding: calc(6px * var(--lui-s)) calc(8px * var(--lui-s)); border-bottom: 1px solid var(--lui-line); min-width: 0; min-height: calc(60px * var(--lui-s)); }
.lui-av--grey { background: #bdbdbd; width: calc(28px * var(--lui-s)); height: calc(28px * var(--lui-s)); font-size: calc(10px * var(--lui-s)); }
.lui-cap { display: flex; align-items: center; gap: calc(5px * var(--lui-s)); font-size: calc(10px * var(--lui-s)); color: var(--lui-muted); margin-top: 2px; }
.lui-cap i { display: block; width: calc(30px * var(--lui-s)); height: calc(4px * var(--lui-s)); border-radius: 2px; background: var(--lui-green); }
.lui-dc { display: flex; align-items: center; padding: calc(5px * var(--lui-s)); border-bottom: 1px solid var(--lui-line); border-left: 1px solid var(--lui-line); min-width: 0; transition: background-color .5s; }
.lui-dc.is-wet { background: #eef4fb; }
.lui-badge { display: block; width: 100%; padding: 0 calc(4px * var(--lui-s)); border-radius: 4px; color: #fff; font-size: calc(10px * var(--lui-s)); font-weight: 600; line-height: calc(28px * var(--lui-s)); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: opacity .26s ease, transform .26s ease; }
.lui-badge.is-hidden, .lui-badge.is-leave { opacity: 0; transform: scale(.85); }
.lui-badge.is-arrive { animation: luiArrive .5s ease; }
@keyframes luiArrive { from { opacity: 0; transform: translateY(-6px) scale(.9); box-shadow: 0 0 0 0 rgba(24, 102, 221, .5); } 60% { box-shadow: 0 0 0 4px rgba(24, 102, 221, .25); } to { opacity: 1; transform: none; box-shadow: 0 0 0 0 rgba(24, 102, 221, 0); } }
.lui-rain { position: absolute; left: 50%; top: calc(-4px * var(--lui-s)); transform: translate(-50%, -100%); display: inline-flex; align-items: center; gap: 4px; padding: calc(3px * var(--lui-s)) calc(8px * var(--lui-s)); border-radius: 99px; background: #1e3a5f; color: #fff; font-size: calc(10px * var(--lui-s)); font-weight: 600; white-space: nowrap; transition: opacity .35s, transform .35s; }
.lui-rain svg { width: 1.3em; height: 1.3em; }
.lui-rain.is-hidden { opacity: 0; transform: translate(-50%, -70%); }
.lui-dispo--rain .lui-dgrid { margin-top: calc(26px * var(--lui-s)); }
.lui-dispo .lui-dh:first-child { border-top: 0; }

/* Wiederkehrende Rechnungen: Umsatz-Kacheln wie in der App */
.lui-kpis { display: grid; grid-template-columns: 1fr 1fr; gap: calc(12px * var(--lui-s)); padding: calc(14px * var(--lui-s)) calc(16px * var(--lui-s)) calc(6px * var(--lui-s)); }
.lui-kpi-k { display: block; color: var(--lui-blue); font-size: calc(13px * var(--lui-s)); }
.lui-kpi-v { display: block; margin-top: calc(6px * var(--lui-s)); font-size: calc(17px * var(--lui-s)); font-weight: 700; color: #333; font-variant-numeric: tabular-nums; }

/* Projektinfo als Schlüssel/Wert */
.lui-row--kv { min-height: calc(38px * var(--lui-s)); }

/* Handy: Tag, Einsatzkarten, Tagessumme */
.lui-mday { margin: 0 calc(14px * var(--lui-s)) calc(10px * var(--lui-s)); font-size: calc(12px * var(--lui-s)); color: var(--lui-muted); font-weight: 600; }
.lui-mcard--row { display: flex; align-items: center; gap: .7em; padding: .8em 1.1em; }
.lui-msum { display: flex; align-items: center; gap: .5em; margin: calc(4px * var(--lui-s)) calc(14px * var(--lui-s)) calc(16px * var(--lui-s)); font-size: calc(13px * var(--lui-s)); }

@media (max-width: 640px) {
  .lui-dgrid { grid-template-columns: calc(92px * var(--lui-s)) repeat(4, minmax(0, 1fr)); }
  .lui-dn .lui-av--grey { display: none; }
}

@media (max-width: 640px) {
  .lui, .lui--block, .lui--hero { --lui-s: .86; }
  .lui-hide-sm { display: none !important; }
  [data-lui="nachtrag"] .lui-row { grid-template-columns: minmax(0, 1fr) 10.4em !important; }
}
@media (prefers-reduced-motion: reduce) {
  .lui *, .lui *::before, .lui *::after { transition: none !important; animation: none !important; }
}

/* Branchenseiten 26.10.2026: Ereignis im Ressourcenplaner, das kein Regen ist (Notdienst, Estrich feucht) */
.lui-rain--alert { background: #9a3412; }
.lui-dispo:has(.lui-rain--alert) .lui-dc.is-wet { background: #fdf1ea; }
.lui-dh .lui-rain { color: #fff; font-weight: 600; }

/* Startseite 26.10.2026: Dashboard mit Kennzahlen und Balken, Aufgaben */
.lui-dash-kpis { display: grid; grid-template-columns: 1fr 1fr; gap: calc(10px * var(--lui-s)); padding: calc(14px * var(--lui-s)) calc(16px * var(--lui-s)) calc(4px * var(--lui-s)); }
.lui-dash-kpi { border: 1px solid var(--lui-line); border-radius: calc(10px * var(--lui-s)); padding: calc(10px * var(--lui-s)) calc(12px * var(--lui-s)); min-width: 0; }
.lui-dash-kpi .lui-kpi-v { font-size: calc(19px * var(--lui-s)); }
.lui-dash-sub { display: block; margin-top: calc(3px * var(--lui-s)); font-size: calc(11.5px * var(--lui-s)); }
.lui-dash-chart { padding: calc(10px * var(--lui-s)) calc(16px * var(--lui-s)) calc(14px * var(--lui-s)); }
.lui-dash-label { font-size: calc(12px * var(--lui-s)); }
.lui-bars { display: grid; grid-template-columns: repeat(6, 1fr); gap: calc(10px * var(--lui-s)); height: calc(130px * var(--lui-s)); align-items: end; margin-top: calc(8px * var(--lui-s)); }
.lui-bar-col { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: calc(4px * var(--lui-s)); font-size: calc(11px * var(--lui-s)); }
.lui-bar-col i { display: block; width: 70%; border-radius: calc(5px * var(--lui-s)) calc(5px * var(--lui-s)) 0 0; background: #b9d1f5; }
.lui-bar-col i.is-now { background: var(--lui-blue); }
.lui-bar-v { font-size: calc(10.5px * var(--lui-s)); color: var(--lui-muted); font-variant-numeric: tabular-nums; }
.lui-task .lui-task-t { transition: color .3s; }
.lui-task.is-done .lui-task-t { text-decoration: line-through; color: var(--lui-light); }

/* Funktionsseiten 26.10.2026: Eingabefeld der KI */
.lui-prompt { margin: calc(12px * var(--lui-s)) calc(16px * var(--lui-s)) calc(10px * var(--lui-s)); padding: calc(10px * var(--lui-s)) calc(12px * var(--lui-s)); border: 1px solid var(--lui-line); border-radius: calc(8px * var(--lui-s)); min-height: calc(58px * var(--lui-s)); font-size: calc(13px * var(--lui-s)); line-height: 1.45; color: #333; background: #fafbfc; }
.lui-prompt-text.is-focus::after { content: ''; display: inline-block; width: 1px; height: 1em; margin-left: 1px; background: var(--lui-blue); vertical-align: -2px; animation: lui-blink 1s steps(1) infinite; }
@keyframes lui-blink { 50% { opacity: 0; } }