/* ==========================================================================
   Laborportal — Seiten: Diagramme, Übersicht, Erfassung, Kunden & Grenzwerte, Analyse, Zertifikate
   ========================================================================== */

/* ---------- Diagramme ---------- */
.chart-host { width: 100%; min-height: 120px; }
.chart { display: block; width: 100%; height: auto; overflow: visible; }
.chart .gl { stroke: var(--grid); stroke-width: 1; stroke-dasharray: 3 5; }
.chart .ax { fill: var(--muted); font: 11px var(--font); font-variant-numeric: tabular-nums; }
.chart .bar { animation: grow 0.85s var(--ease) both; animation-delay: calc(var(--i) * 30ms); }
.chart .hit { fill: transparent; }
.chart .hit:hover, .chart .hit.kb { fill: var(--hover); }
.t-band { fill: var(--gold-soft); stroke: none; }
.t-minmax { fill: none; stroke: var(--muted); stroke-width: 1.2; stroke-dasharray: 4 4; opacity: 0.75; }
.t-mean { fill: none; stroke: var(--gold); stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 1.4s var(--ease) 0.15s forwards; }
.t-dot { fill: var(--surface-solid); stroke: var(--gold); stroke-width: 2.2; opacity: 0; animation: fadeIn 0.4s ease forwards; animation-delay: calc(0.7s + var(--i) * 40ms); }
.donut-wrap { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.2rem; justify-items: center; }
.donut { position: relative; width: min(210px, 100%); aspect-ratio: 1; }
.dn-legend { width: 100%; }
.donut svg { width: 100%; height: 100%; display: block; overflow: visible; }
.donut-track { stroke: var(--track); }
.d-seg { transition: stroke-width 0.2s var(--ease); animation: segIn 1.1s var(--ease) both; animation-delay: calc(var(--i) * 140ms + 120ms); }
.d-seg:hover { stroke-width: 31; }
.donut-c { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; pointer-events: none; }
.donut-c b { font-size: 1.7rem; font-weight: 700; letter-spacing: -0.025em; font-variant-numeric: tabular-nums; }
.donut-c span { font-size: 0.68rem; color: var(--muted); letter-spacing: 0.08em; text-transform: uppercase; }
.dn-legend { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.dn-legend li { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto auto; gap: 0.65rem; align-items: center; font-size: 0.88rem; }
.dn-legend i { width: 12px; height: 12px; border-radius: 4px; }
.lg-v { font-weight: 650; font-variant-numeric: tabular-nums; }
.lg-p { color: var(--muted); min-width: 52px; text-align: right; font-variant-numeric: tabular-nums; }
.spark { width: 100%; height: auto; display: block; overflow: visible; }
.spark-line { fill: none; stroke: var(--gold); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 1.5s var(--ease) 0.2s forwards; }
.spark-area { opacity: 0; animation: fadeIn 0.9s ease 0.9s forwards; }
.rank { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.35rem; }
.rk, .rk-btn {
  display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; grid-template-areas: "n l v" ". s s" ". b b";
  column-gap: 0.7rem; row-gap: 0.2rem; align-items: baseline; padding: 0.4rem 0.5rem; border-radius: 11px; transition: background 0.2s var(--ease);
}
.rk.clickable { display: block; padding: 0; cursor: pointer; }
.rk.clickable:hover { background: var(--hover); }
/* klickbare Zeile: echte Schaltfläche im Listeneintrag, sichtbarer Text ist ihr Name */
.rk-btn { width: 100%; border: 0; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.rk-n { grid-area: n; font-size: 0.74rem; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; }
.rk-l { grid-area: l; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 550; font-size: 0.88rem; }
.rk-v { grid-area: v; font-weight: 700; font-variant-numeric: tabular-nums; font-size: 0.9rem; }
.rk-s { grid-area: s; font-size: 0.74rem; color: var(--muted); }
.rk-bar { grid-area: b; height: 7px; border-radius: 99px; background: var(--track); overflow: hidden; }
.rk-bar i { display: block; height: 100%; width: var(--w); border-radius: inherit; background: linear-gradient(90deg, var(--gold-hi), var(--gold)); animation: fillw 0.9s var(--ease) both; animation-delay: calc(var(--i) * 60ms + 150ms); }
.rank.bad .rk-bar i { background: linear-gradient(90deg, var(--bad-hi), var(--bad)); }
.hbar { display: inline-block; width: 86px; height: 7px; border-radius: 99px; background: var(--track); vertical-align: middle; overflow: hidden; }
.hbar i { display: block; height: 100%; width: var(--w); background: linear-gradient(90deg, var(--ok-hi), var(--ok)); border-radius: inherit; animation: fillw 0.9s var(--ease) both; }
.hbar.bad i { background: linear-gradient(90deg, var(--bad-hi), var(--bad)); }
.rbar { display: block; }
.rb-axis { stroke: var(--grid); stroke-width: 2; stroke-linecap: round; }
.rb-box { fill: var(--gold-soft); stroke: var(--gold); stroke-width: 1.2; }
.rb-med { stroke: var(--ink); stroke-width: 2; stroke-linecap: round; }

/* ---------- Übersicht ---------- */
.grid { display: grid; gap: 1rem; margin-bottom: 1rem; }
.grid > .card { margin-bottom: 0; min-width: 0; }
.g-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g-2-1 { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.hero {
  position: relative; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 1.6rem; padding: 1.7rem 1.9rem; margin-bottom: 1rem;
  border-radius: 24px; overflow: hidden; border: 1px solid var(--line);
  background:
    radial-gradient(560px 280px at 100% 0%, rgba(226, 189, 98, 0.4), transparent 70%),
    radial-gradient(380px 200px at 0% 100%, rgba(184, 144, 42, 0.16), transparent 70%),
    linear-gradient(135deg, var(--hero-a), var(--hero-b));
  box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
.hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.8;
  background-image: linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 38px 38px;
  -webkit-mask-image: linear-gradient(120deg, transparent 40%, #000); mask-image: linear-gradient(120deg, transparent 40%, #000);
}
.hero > * { position: relative; z-index: 1; }
.eyebrow { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold-ink); }
.hero-big {
  margin-top: 0.6rem; font-size: clamp(3rem, 6.5vw, 4.8rem); font-weight: 700; letter-spacing: -0.035em; line-height: 1; font-variant-numeric: tabular-nums;
  background: linear-gradient(180deg, var(--gold-lo), var(--gold-ink)); -webkit-background-clip: text; background-clip: text; color: transparent;
}
/* Hell: auf dem hellen Held-Hintergrund tragen nur die dunklen Goldtöne (4,2 bis 7,2:1); Dunkel behält den Verlauf von Hell nach Gold */
:root[data-theme="dark"] .hero-big { background-image: linear-gradient(180deg, var(--gold-hi), var(--gold-lo)); }
.hero-cap { margin-top: 0.55rem; color: var(--ink-2); max-width: 36ch; }
.hero-stats { display: flex; gap: 1.8rem; margin-top: 1.3rem; flex-wrap: wrap; }
.hero-stats b { display: block; font-size: 1.3rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.hero-stats span { font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.hero-spark { display: grid; align-content: end; gap: 0.6rem; min-width: 0; }
.hs-head { display: flex; justify-content: space-between; gap: 1rem; font-size: 0.78rem; color: var(--muted); }
.hs-head b { color: var(--ink-2); font-weight: 650; }
.kpi-band { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 0.9rem; margin-bottom: 1rem; }
.kpi-band.six { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.kpi {
  position: relative; display: grid; gap: 0.15rem; padding: 1.05rem 1.15rem; border-radius: var(--radius); overflow: hidden; align-content: start;
  background: radial-gradient(180px 100px at 100% 0%, var(--gold-soft), transparent 70%), var(--surface);
  border: 1px solid var(--line); box-shadow: var(--shadow), inset 0 1px 0 rgba(255, 255, 255, 0.28);
}
.kpi::after { content: ""; position: absolute; left: 1.15rem; right: 1.15rem; top: 0; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--gold-hi), var(--gold) 60%, transparent); }
.kpi-l { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.kpi-v { font-size: 1.9rem; font-weight: 700; letter-spacing: -0.025em; font-variant-numeric: tabular-nums; line-height: 1.15; }
.kpi-s { font-size: 0.78rem; color: var(--muted); }
.kpi.bad .kpi-v { color: var(--bad); }
.kpi.bad::after { background: linear-gradient(90deg, var(--bad-hi), var(--bad) 60%, transparent); }
.kpi.good .kpi-v { color: var(--ok); }
.kpi.good::after { background: linear-gradient(90deg, var(--ok-hi), var(--ok) 60%, transparent); }
.kpi-spark { position: absolute; right: 0.9rem; bottom: 0.85rem; width: 42%; opacity: 0.9; pointer-events: none; }
.kpi-spark .spark-line { stroke-width: 2; }
.lab { margin-top: 1.6rem; }
.lab-head { align-items: flex-end; }
.lab-head h2 { font-size: 1.05rem; letter-spacing: 0.01em; text-transform: none; color: var(--ink); }
.lab-head p { font-size: 0.84rem; margin-top: 0.15rem; }
.dash-skel .kpi-band .skel { margin: 0; }

/* ---------- Messungen erfassen ---------- */
.mform { padding: 1.3rem 1.4rem 1rem; }
.mf-head { display: flex; justify-content: space-between; gap: 1rem; align-items: flex-start; margin-bottom: 1rem; }
.mf-title { font-size: 1.15rem; font-weight: 700; letter-spacing: -0.01em; }
.mf-sub { color: var(--muted); font-size: 0.85rem; margin-top: 0.2rem; max-width: 70ch; }
.mf-meta { display: grid; grid-template-columns: 150px minmax(240px, 2fr) minmax(200px, 1.5fr) 140px 160px; gap: 0.8rem; margin-bottom: 0.8rem; }
.mf-banner { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; align-items: center; margin: 0 0 1rem; min-height: 1.9rem; font-size: 0.84rem; }
.bn { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.28rem 0.75rem; border-radius: 999px; font-weight: 600; font-size: 0.8rem; }
.bn .ic { width: 15px; height: 15px; }
.bn.ok { background: var(--ok-soft); color: var(--ok-ink); }
.bn.warn { background: var(--warn-soft); color: var(--warn); }
.bn.muted { padding-left: 0; color: var(--muted); font-weight: 500; }
.pgroups { display: grid; gap: 0.7rem; margin-bottom: 1rem; }
.pgroup, .lgroup { border: 1px solid var(--line); border-radius: 14px; background: var(--field-soft); }
.pgroup > summary, .lgroup > summary { list-style: none; display: flex; align-items: center; gap: 0.8rem; padding: 0.7rem 1rem; cursor: pointer; user-select: none; border-radius: 14px; }
.pgroup > summary::-webkit-details-marker, .lgroup > summary::-webkit-details-marker { display: none; }
.pgroup > summary:hover, .lgroup > summary:hover { background: var(--hover); }
.pg-t { font-size: 0.76rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2); }
.pg-c { font-size: 0.76rem; color: var(--muted); margin-right: auto; }
.pgroup > summary .ic, .lgroup > summary .ic { color: var(--muted); transition: transform 0.25s var(--ease); }
.pgroup[open] > summary .ic, .lgroup[open] > summary .ic { transform: rotate(180deg); }
.pgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); gap: 0.65rem; padding: 0.1rem 0.9rem 0.95rem; }
.ptile {
  position: relative; display: grid; gap: 0.2rem; align-content: start; padding: 0.6rem 0.75rem 0.5rem; border-radius: 13px;
  background: var(--surface-solid); border: 1px solid var(--line);
  transition: background 0.3s var(--ease), border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.ptile.has-lim::before { content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 3px; border-radius: 0 3px 3px 0; background: var(--gold); }
.ptile:focus-within { border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-soft); }
.pt-top { display: flex; justify-content: space-between; gap: 0.4rem; font-size: 0.68rem; font-weight: 650; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); cursor: text; }
.pt-unit { text-transform: none; letter-spacing: 0; font-weight: 500; }
/* Parameternamen nicht in Großbuchstaben setzen: aus „Sieb 100 µm“ würde „SIEB 100 ΜM“ (griechisches Mu), das sich wie „MM“ liest */
.pt-name, .meas th > span, .tgrid th > span { text-transform: none; letter-spacing: 0.02em; }
.ptile input { width: 100%; border: 0; border-bottom: 1px dashed var(--field-line); border-radius: 0; background: transparent; padding: 0.2rem 0; font-size: 1.1rem; font-weight: 600; font-variant-numeric: tabular-nums; box-shadow: none; }
.ptile input:focus { background: transparent; box-shadow: none; border-bottom-color: var(--gold); }
.pt-hint { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.1rem 0.6rem; min-height: 1.25rem; font-size: 0.72rem; color: var(--muted); }
.pt-lim { font-variant-numeric: tabular-nums; white-space: nowrap; }
.pt-state { display: inline-flex; align-items: center; gap: 0.25rem; font-weight: 650; text-align: right; }
.pt-state .ic { width: 13px; height: 13px; stroke-width: 2.2; }
.pt-chips { display: flex; gap: 0.35rem; margin-top: 0.15rem; }
.pt-chips button { border: 1px solid var(--line); background: var(--field-soft); padding: 0.15rem 0.6rem; border-radius: 999px; font-size: 0.74rem; font-weight: 650; cursor: pointer; color: var(--ink-2); }
.pt-chips button:hover { border-color: var(--gold); }
.ptile[data-st="ok"] { background: var(--ok-soft); border-color: var(--ok-line); box-shadow: 0 10px 24px -16px var(--ok-glow); }
.ptile[data-st="ok"] input, .ptile[data-st="ok"] .pt-state { color: var(--ok-ink); }
.ptile[data-st="above"], .ptile[data-st="below"], .ptile[data-st="bad"] { background: var(--bad-soft); border-color: var(--bad-line); box-shadow: 0 10px 24px -16px var(--bad-glow); }
.ptile[data-st="above"] input, .ptile[data-st="below"] input, .ptile[data-st="bad"] input,
.ptile[data-st="above"] .pt-state, .ptile[data-st="below"] .pt-state, .ptile[data-st="bad"] .pt-state { color: var(--bad-ink); }
.ptile[data-st="invalid"] { background: var(--warn-soft); border: 1px dashed var(--warn-line); }
.ptile[data-st="invalid"] .pt-state { color: var(--warn); }
.mf-bar {
  position: sticky; bottom: 14px; z-index: 6; display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap;
  margin: 1rem -0.4rem 0; padding: 0.7rem 0.9rem; border-radius: 16px; background: var(--surface-solid); border: 1px solid var(--line);
  box-shadow: 0 -10px 30px -18px rgba(0, 0, 0, 0.35), var(--shadow);
}
.mf-sum { display: flex; align-items: center; gap: 0.8rem; flex-wrap: wrap; font-size: 0.82rem; }
.sumchip { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.36rem 0.85rem; border-radius: 999px; font-size: 0.84rem; border: 1px solid var(--line); background: var(--field-soft); color: var(--ink-2); }
.sumchip .ic { width: 15px; height: 15px; stroke-width: 2.2; }
.sumchip.ok { background: var(--ok-soft); border-color: var(--ok-line); color: var(--ok-ink); }
.sumchip.bad { background: var(--bad-soft); border-color: var(--bad-line); color: var(--bad-ink); }
.sumchip.warn { background: var(--warn-soft); border-color: var(--warn-line); color: var(--warn); }
.mf-btns { display: flex; gap: 0.5rem; flex-wrap: wrap; justify-content: flex-end; }
.fld-note { margin-top: 0.2rem; }
.today { margin-top: 1rem; }
.today-empty { padding: 0.4rem 0 0.2rem; }
.meas-wrap { max-height: 70vh; }
.meas th, .meas td { white-space: nowrap; }
.meas th { white-space: normal; min-width: 76px; max-width: 110px; line-height: 1.25; vertical-align: bottom; }
.meas th span { display: block; }
.meas th small { display: block; text-transform: none; letter-spacing: 0; font-weight: 500; color: var(--muted); }
.meas .stk { position: sticky; background: var(--surface-solid); z-index: 2; }
.meas .s1 { left: 0; min-width: 96px; }
.meas .s2 { left: 96px; min-width: 180px; max-width: 230px; overflow: hidden; text-overflow: ellipsis; }
.meas thead th { position: sticky; top: 0; z-index: 3; }
.meas thead th.stk { z-index: 5; background: var(--surface-2); }
.meas td.acts { position: sticky; right: 0; z-index: 2; background: var(--surface-solid); box-shadow: -10px 0 14px -12px rgba(0, 0, 0, 0.3); }
.meas thead th:last-child { position: sticky; right: 0; z-index: 4; background: var(--surface-2); }
.mv.is-empty { color: var(--muted); text-align: right; opacity: 0.55; }
.mv.is-ok { background: var(--ok-soft); color: var(--ok-ink); font-weight: 650; box-shadow: inset 3px 0 0 var(--ok); }
.mv.is-above, .mv.is-below, .mv.is-bad { background: var(--bad-soft); color: var(--bad-ink); font-weight: 700; box-shadow: inset 3px 0 0 var(--bad); }
.mv .ar { font-style: normal; font-size: 0.62rem; margin-left: 0.3rem; vertical-align: 1px; }
.note-c { max-width: 220px; overflow: hidden; text-overflow: ellipsis; color: var(--muted); }

/* Automatisch korrigierte Werte (Tippfehler im Excel-Protokoll): goldene Markierung links im Wert, Hilfefeld, Legende, Verlauf (meas-table.js) */
.mv.kor-cell { position: relative; padding-left: 2.3rem; }
.kor-mark {
  position: absolute; left: 0.3rem; top: 50%; transform: translateY(-50%); display: inline-grid; place-items: center; width: 24px; height: 24px;
  padding: 0; border-radius: 50%; border: 1px solid var(--gold); background: var(--gold-soft); color: var(--gold-ink); cursor: help;
}
.kor-mark .ic, .kor-key .ic { width: 13px; height: 13px; stroke-width: 2; }
.kor-mark:hover { background: var(--gold); color: var(--on-gold); }
.kor-legend { display: flex; align-items: center; gap: 0.55rem; margin: 0.7rem 0 0; font-size: 0.78rem; color: var(--muted); }
.kor-key { flex: none; display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--gold); background: var(--gold-soft); color: var(--gold-ink); }
.kor-tip {
  position: fixed; z-index: 4500; width: max-content; max-width: min(320px, calc(100vw - 16px)); padding: 0.5rem 0.75rem; border-radius: 11px;
  background: rgba(43, 38, 29, 0.96); color: #f7f1e1; border: 1px solid rgba(226, 189, 98, 0.4); box-shadow: 0 16px 36px -14px rgba(0, 0, 0, 0.6);
  font-size: 0.78rem; line-height: 1.45; overflow-wrap: anywhere;
}
.kor-tip[hidden] { display: none; }
.kor-tip::before { content: ""; position: absolute; inset: -10px; } /* der Zeiger darf vom Knopf auf das Feld wandern, ohne dass es verschwindet */
.kor-hhead { margin: 0 0 0.7rem; font-size: 0.86rem; }
.kor-htbl td { vertical-align: top; }
.kor-htbl td:nth-child(-n+3) { white-space: nowrap; }
.kor-htbl td:last-child { min-width: 15rem; }
.kor-chg { display: block; }
.kor-chg + .kor-chg { margin-top: 0.45rem; }
.kor-chg b { font-variant-numeric: tabular-nums; }
.kor-from { color: var(--muted); }
.kor-note, .kor-sub { display: block; font-size: 0.78rem; font-weight: 500; color: var(--muted); overflow-wrap: anywhere; }
@media (max-width: 640px) {
  /* Telefon: jeder Eintrag des Verlaufs als Block (Zeit, Urheber, Vorgang, Einzelheiten untereinander), damit die Einzelheiten nicht erst
     nach dem Seitwärtsscrollen sichtbar werden; die Kopfzeile bleibt für Screenreader erhalten */
  .kor-htbl, .kor-htbl tbody, .kor-htbl tr, .kor-htbl td { display: block; }
  .kor-htbl thead { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
  .kor-htbl tr { padding: 0.6rem 0.15rem; border-bottom: 1px solid var(--line-soft); }
  .kor-htbl td, .kor-htbl td:nth-child(-n+3) { padding: 0.12rem 0; border: 0; white-space: normal; }
  .kor-htbl td:last-child { min-width: 0; margin-top: 0.35rem; }
}

/* Tabellenmodus */
.tmode { padding: 1rem 1.1rem 1.1rem; }
.tm-bar { display: flex; flex-wrap: wrap; gap: 0.8rem 1.2rem; align-items: center; justify-content: space-between; margin-bottom: 0.9rem; }
.tm-tools { display: flex; gap: 0.5rem; align-items: center; }
.tm-hint { color: var(--muted); font-size: 0.76rem; flex: 1 1 280px; }
.colpick { position: relative; }
.colpick > summary { list-style: none; }
.colpick > summary::-webkit-details-marker { display: none; }
.colpick-pop { position: absolute; z-index: 30; top: calc(100% + 8px); left: 0; width: min(520px, 86vw); max-height: 60vh; overflow: auto; padding: 0.9rem 1rem; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.8rem 1.2rem; background: var(--surface-solid); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-lg); }
.colpick-pop fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: 0.3rem; align-content: start; }
.colpick-pop legend { font-size: 0.66rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); padding: 0; margin-bottom: 0.3rem; }
.tgrid-wrap { max-height: 64vh; overflow: auto; }
.tgrid th { position: sticky; top: 0; z-index: 3; max-width: 120px; white-space: normal; line-height: 1.25; vertical-align: bottom; }
.tgrid th small { display: block; text-transform: none; letter-spacing: 0; font-weight: 500; }
.tgrid td { padding: 3px 4px; }
.tgrid .t-in { width: 100%; min-width: 86px; padding: 0.4rem 0.5rem; border-radius: 8px; font-size: 0.86rem; font-variant-numeric: tabular-nums; }
.tgrid .tc-cust .t-in { min-width: 210px; }
.tgrid .tc-prod .t-in { min-width: 190px; }
.tgrid .tc-date .t-in { min-width: 136px; }
.tgrid .tc-lnr .t-in { min-width: 84px; }
.tgrid .tc-v { min-width: 98px; }
.tgrid .tc-v .t-in { text-align: right; }
.tgrid .tc-v[data-st="ok"] .t-in { background: var(--ok-soft); border-color: var(--ok-line); color: var(--ok-ink); font-weight: 650; }
.tgrid .tc-v[data-st="above"] .t-in, .tgrid .tc-v[data-st="below"] .t-in, .tgrid .tc-v[data-st="bad"] .t-in { background: var(--bad-soft); border-color: var(--bad-line); color: var(--bad-ink); font-weight: 700; }
.tgrid .tc-v[data-st="invalid"] .t-in { background: var(--warn-soft); border: 1px dashed var(--warn-line); }
.tgrid .tc-sum { min-width: 104px; }
.tgrid .tc-act { white-space: nowrap; }
.tgrid .stk { position: sticky; left: 0; z-index: 2; background: var(--surface-solid); }
.tgrid thead .stk { z-index: 5; background: var(--surface-2); }
.tgrid tr.row-err td { background: var(--bad-soft); }
.tgrid tr.busy { opacity: 0.55; pointer-events: none; }

/* ---------- Kunden & Grenzwerte ---------- */
.cust-layout { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 1rem; align-items: start; }
.cl-list { position: sticky; top: 84px; max-height: calc(100vh - 104px); display: flex; flex-direction: column; gap: 0.8rem; margin-bottom: 0; padding: 1rem; }
.cl-tools { display: grid; gap: 0.7rem; }
.cl-flags { display: flex; gap: 1rem; flex-wrap: wrap; }
.cl-items { overflow: auto; margin: 0 -0.4rem; padding: 0 0.4rem; flex: 1; min-height: 120px; display: grid; align-content: start; gap: 2px; }
.cl-grp { position: sticky; top: 0; z-index: 1; display: flex; justify-content: space-between; padding: 0.55rem 0.5rem 0.3rem; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--muted); background: var(--surface-solid); }
.cl-item { position: relative; display: grid; gap: 1px; text-align: left; padding: 0.55rem 0.7rem; border-radius: 11px; border: 1px solid transparent; background: transparent; cursor: pointer; content-visibility: auto; contain-intrinsic-size: auto 52px; }
.cl-item:hover { background: var(--hover); }
.cl-item.on { background: var(--gold-soft); border-color: rgba(184, 144, 42, 0.5); }
.cl-item.inactive { opacity: 0.6; }
.cl-n { font-weight: 600; font-size: 0.88rem; padding-right: 1rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cl-m { font-size: 0.74rem; color: var(--muted); }
.cl-item .dot { position: absolute; right: 0.8rem; top: 50%; transform: translateY(-50%); }
.cl-none { padding: 1rem 0.4rem; }
.cl-new { width: 100%; }
.cl-detail { min-width: 0; }
.cd-head { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.cd-back { display: none; }
.cd-title h2 { font-size: 1.3rem; font-weight: 700; letter-spacing: -0.015em; }
.cd-meta { display: flex; gap: 0.6rem; align-items: center; margin-top: 0.25rem; font-size: 0.82rem; }
.cd-actions { margin-left: auto; display: flex; gap: 0.8rem; align-items: center; }
.pchips { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 1rem; }
.pchip { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.45rem 0.85rem; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); cursor: pointer; font-size: 0.86rem; font-weight: 600; color: var(--ink-2); transition: all 0.2s var(--ease); }
.pchip small { color: var(--muted); font-weight: 650; padding: 0.04rem 0.42rem; border-radius: 999px; background: var(--field-soft); border: 1px solid var(--line); font-size: 0.7rem; }
.pchip:hover { border-color: var(--gold); color: var(--ink); }
.pchip.on { background: var(--gold-soft); border-color: var(--gold); color: var(--ink); box-shadow: 0 8px 20px -14px var(--gold-glow); }
.pchip.inactive span { text-decoration: line-through; text-decoration-color: var(--muted); opacity: 0.7; }
.pchip.add { border-style: dashed; background: transparent; }
.pd-meta { display: grid; gap: 0.9rem; }
.pm-row { display: flex; gap: 1.6rem; align-items: center; flex-wrap: wrap; }
.pm-spec { display: grid; gap: 0.1rem; }
.pm-spec b { font-weight: 600; font-size: 0.88rem; }
.pm-spec .badge { justify-self: start; margin-top: 0.25rem; }
.pm-stats { font-size: 0.8rem; }
.lim-note { color: var(--muted); font-size: 0.82rem; margin-bottom: 0.9rem; }
.lim-groups { display: grid; gap: 0.7rem; }
.lgroup { overflow: hidden; }
.lim-tbl { margin: 0 0 0.4rem; }
.lim-tbl .lr th { text-align: left; text-transform: none; letter-spacing: 0; font-size: 0.86rem; font-weight: 600; color: var(--ink); background: transparent; border-bottom: 1px solid var(--line-soft); width: 40%; white-space: normal; }
.lr-unit { margin-left: 0.45rem; color: var(--muted); font-weight: 500; font-size: 0.76rem; }
.lr-in { width: 100%; max-width: 130px; text-align: right; font-variant-numeric: tabular-nums; margin-left: auto; display: block; }
.lr-dash { width: 20px; text-align: center; color: var(--muted); padding: 0 !important; }
.lr-src { text-align: right; white-space: nowrap; }
.lr.dirty td, .lr.dirty th { background: var(--gold-soft); }
.lr.dirty .lr-in { border-color: var(--gold); background: var(--surface-solid); box-shadow: 0 0 0 2px var(--gold-soft); }
.lr.invalid .lr-in { border-color: var(--bad-line); background: var(--bad-soft); }
.lim-bar { position: sticky; bottom: 14px; z-index: 6; display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; padding: 0.7rem 0.9rem; border-radius: 16px; background: var(--surface-solid); border: 1px solid var(--line); box-shadow: var(--shadow); transition: border-color 0.3s var(--ease), box-shadow 0.3s var(--ease); }
.lim-bar.on { border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-soft), var(--shadow-lg); }
#lim-count { font-weight: 600; font-size: 0.86rem; color: var(--ink-2); }
.lim-bar.on #lim-count { color: var(--gold-ink); }
.lb-btns { display: flex; gap: 0.5rem; }

/* ---------- Analyse, Zertifikate, Datenqualität, Benutzer ---------- */
.an-tbl .spec-c { white-space: nowrap; }
.spec-v { margin-left: 0.5rem; font-variant-numeric: tabular-nums; font-size: 0.8rem; }
.an-tbl tr.on td { background: var(--gold-soft); }
.an-tbl tr.txt-row td { opacity: 0.8; }
.cert { display: grid; gap: 1rem; }
.cert-head { display: flex; justify-content: space-between; gap: 1rem; align-items: flex-start; flex-wrap: wrap; }
.cert-head h3 { font-size: 1.25rem; font-weight: 700; letter-spacing: -0.015em; }
.cert h4 { font-size: 0.74rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink-2); margin-top: 0.4rem; }
dl.meta { display: grid; grid-template-columns: max-content 1fr max-content 1fr; gap: 0.5rem 1.2rem; margin: 0; }
dl.meta dt { color: var(--muted); font-size: 0.8rem; }
dl.meta dd { margin: 0; font-weight: 500; min-width: 0; overflow-wrap: anywhere; }
.flags { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.4rem; }
.flags li { display: flex; gap: 0.5rem; align-items: center; color: var(--warn); font-size: 0.86rem; }
.flags .ic { width: 16px; height: 16px; }
.res-tbl tr.is-above td, .res-tbl tr.is-below td { background: var(--bad-soft); }
.res-tbl tr.is-ok td.val { color: var(--ok-ink); font-weight: 650; }
.res-tbl tr.is-above td.val, .res-tbl tr.is-below td.val { color: var(--bad-ink); font-weight: 700; }
.caveat { font-size: 0.82rem; color: var(--ink-2); background: var(--gold-soft); border: 1px solid rgba(184, 144, 42, 0.3); border-left: 3px solid var(--gold); border-radius: 0 11px 11px 0; padding: 0.65rem 0.85rem; }
.note { border-left: 2px solid var(--gold); padding: 0.5rem 0.8rem; margin: 0.5rem 0; background: var(--gold-soft); border-radius: 0 10px 10px 0; }
.note .by { font-size: 0.76rem; color: var(--muted); margin-top: 0.2rem; }
.note-form { display: grid; gap: 0.6rem; }
.cert-actions { display: flex; justify-content: flex-end; }
.flag-ic { display: inline-flex; align-items: center; gap: 0.25rem; color: var(--warn); font-weight: 650; }
.flag-ic .ic { width: 15px; height: 15px; }
.q-note { margin: -0.2rem 0 0.8rem; font-size: 0.84rem; }
.u-cell { display: flex; gap: 0.8rem; align-items: center; }
.u-cell > div { display: grid; line-height: 1.3; }
.u-cell .muted { font-size: 0.78rem; }
/* Seite „Benutzer“: Rolle mit Abzeichen „Leitung“ daneben, Erklärung des Schalters „Leitung“ über der Tabelle, Wahl „Leitung“ im Dialog „Neues Konto“ */
.u-role { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.55rem; }
.u-legend { margin: 0 0 0.8rem; line-height: 1.45; }
.u-legend b { color: var(--ink-2); font-weight: 650; }
.nu-lt { display: grid; gap: 0.3rem; }
.nu-lt .hint { margin: 0 0 0 1.45rem; line-height: 1.4; }
/* Mittlere Breiten (Tablet, kleiner Laptop): engere Zellen und umbrechende Spaltenköpfe, damit die Tabelle mit der Spalte „Leitung“ nicht breiter wird als vorher */
@media (min-width: 641px) and (max-width: 1100px) {
  .u-tbl th, .u-tbl td { padding-left: 0.5rem; padding-right: 0.5rem; }
  .u-tbl th { white-space: normal; }
}
#print-sheet { display: none; }

/* ---------- Anpassungen für schmale Bildschirme ---------- */
@media (max-width: 1100px) {
  .mf-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fld-cust { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
  .g-2, .g-2-1, .hero { grid-template-columns: 1fr; }
  .cust-layout { grid-template-columns: 1fr; }
  .cl-list { position: static; max-height: none; }
  .cl-items { max-height: 60vh; }
  .cust-layout .cl-detail { display: none; }
  .cust-layout.show-detail .cl-list { display: none; }
  .cust-layout.show-detail .cl-detail { display: block; }
  .cd-back { display: inline-grid; }
  .cd-actions { margin-left: 0; width: 100%; }
  dl.meta { grid-template-columns: max-content 1fr; }
}
@media (max-width: 820px) {
  .mf-bar, .lim-bar { bottom: calc(76px + env(safe-area-inset-bottom)); }
  .mf-meta { grid-template-columns: 1fr 1fr; gap: 0.6rem; }
  .pgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 0.1rem 0.6rem 0.7rem; }
  .mform { padding: 1rem 0.9rem 0.8rem; }
  .page-head .seg[data-seg="mode"] { display: none; }
  .mf-bar { padding: 0.55rem 0.6rem; gap: 0.5rem; }
  .mf-sum .muted { display: none; }
  .mf-btns { width: 100%; flex-wrap: nowrap; }
  .mf-btns .btn { flex: 0 1 auto; padding: 0.5rem 0.7rem; font-size: 0.8rem; }
  .mf-btns .btn.primary { flex: 1 1 auto; }
  .mf-btns kbd { display: none; }
  .hero { padding: 1.3rem 1.2rem; }
  .kpi-v { font-size: 1.6rem; }
  .colpick-pop { grid-template-columns: 1fr; }
  .tm-hint { display: none; }
}
/* Schmale Telefone: Grenzwert-Editor und Messwerte-Tabelle */
@media (max-width: 640px) {
  /* Grenzwerte: je Parameter ein Block (Name und Quelle oben, von – bis darunter) statt vier gequetschter Spalten */
  .lim-tbl, .lim-tbl tbody { display: block; }
  .lim-tbl .lr { display: grid; grid-template-columns: minmax(0, 1fr) 14px minmax(0, 1fr); align-items: center; gap: 0.4rem; padding: 0.55rem 0.75rem; border-bottom: 1px solid var(--line-soft); }
  .lim-tbl .lr th { grid-area: 1 / 1 / 2 / 3; width: auto; padding: 0; border: 0; overflow-wrap: anywhere; }
  .lim-tbl .lr td { display: block; padding: 0; border: 0; }
  .lim-tbl .lr .lr-src { grid-area: 1 / 3 / 2 / 4; justify-self: end; }
  .lim-tbl .lr .lr-dash { width: auto; }
  .lim-tbl .lr-in { max-width: none; margin-left: 0; }
  .lim-tbl .lr.dirty { background: var(--gold-soft); }
  .lim-tbl .lr.dirty td, .lim-tbl .lr.dirty th { background: transparent; }
  /* Messwerte: Datum, Kunde und Aktionen scrollen mit; festgehalten ließen sie neben sich keinen Platz für die Werte */
  .meas .s1, .meas .s2 { left: auto; }
  .meas td.acts, .meas thead th:last-child { right: auto; }
  .meas td.acts { box-shadow: none; }
  /* Benutzer: je Konto ein Block (Name, Rolle, darunter Leitung und Aktiv, Anmeldung und Passwort) statt sechs Spalten, die seitlich scrollen:
     sonst läge der Schalter „Leitung“ außerhalb des Bildschirms. Die Spaltenüberschriften stehen dann als kleine Beschriftung über dem Feld (data-l). */
  .u-tbl, .u-tbl tbody { display: block; }
  .u-tbl thead { display: none; }
  .u-tbl tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 0.6rem 0.8rem; padding: 0.85rem 0.3rem; border-bottom: 1px solid var(--line-soft); }
  .u-tbl td { display: block; min-width: 0; padding: 0; border: 0; }
  .u-tbl td:first-child, .u-tbl td[data-l="Rolle"] { grid-column: 1 / -1; }
  .u-tbl td[data-l]::before { content: attr(data-l); display: block; margin-bottom: 0.25rem; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--muted); }
  .u-tbl td[data-l="Rolle"] select { max-width: 16rem; }
  .u-tbl .acts { text-align: right; }
}

/* ---------- SPEC: Spezifikation (PDF) ----------
   „Spezifikation (PDF)“ in der Mehlart-Karte und „Alle Mehlarten (PDF)“ im Kopf des Kunden (Kunden & Grenzwerte) sowie „Spezifikation (PDF)“ im Kopf der
   Standardqualität (Standardqualitäten): gewöhnliche Links im Stil der kleinen Knöpfe, öffnen das PDF in einem neuen Tab. Im Kopf dürfen die Aktionen
   umbrechen; auf dem Telefon füllt der Link die ganze Zeile (Daumen). */
a.btn.spec-pdf:hover { text-decoration: none; }
.cd-actions { flex-wrap: wrap; }
@media (max-width: 640px) {
  .cd-actions .spec-pdf, .pm-row .spec-pdf { flex: 1 1 100%; }
}

/* ---------- XLS: Grenzwerte exportieren ----------
   Dialog „Grenzwerte exportieren“ in Kunden & Grenzwerte (js/limits-export.js): zwei große Knöpfe, Excel (.xlsx) und CSV, darunter die Statuszeile.
   Nur Tokens aus app.css, daher hell und dunkel; auf dem Telefon (375 px) füllt der Dialog die Breite (dialog.sm). */
.ex-choices { display: grid; gap: 0.6rem; margin: 1rem 0 0.5rem; }
.ex-opt { display: flex; align-items: center; gap: 0.85rem; width: 100%; padding: 0.75rem 0.95rem; text-align: left; font: inherit; color: var(--ink); background: var(--field-soft); border: 1px solid var(--field-line); border-radius: var(--radius-sm); cursor: pointer; transition: background 0.2s var(--ease), border-color 0.2s var(--ease); }
.ex-opt .ic { width: 24px; height: 24px; color: var(--gold-ink); }
.ex-opt:hover { background: var(--hover); border-color: var(--gold); }
.ex-opt:disabled { opacity: 0.55; cursor: default; pointer-events: none; }
.ex-t { display: grid; gap: 0.15rem; min-width: 0; }
.ex-t b { font-weight: 650; }
.ex-t small { color: var(--muted); font-size: 0.78rem; line-height: 1.4; }
.ex-status { min-height: 1.4em; margin: 0.4rem 0 0; }
.ex-status.is-err { color: var(--bad); font-weight: 600; }