/* ==========================================================================
   Verwaltung Löschzug 4 · Feuerwehr Erftstadt
   Design: ruhig und klar im Stil von iOS / macOS – „Liquid Glass“: durchscheinende,
   weich unscharfe Flächen mit feinem Lichtkante, große Rundungen, kompakte Listen.
   Standard ist hell; Dunkel wird im Benutzerprofil umgeschaltet (data-theme am <html>).
   ========================================================================== */

@font-face { font-family: 'Inter'; font-weight: 100 900; font-display: swap; src: url('/fonts/inter-latin-wght-normal.woff2') format('woff2-variations'); }

:root {
  color-scheme: light;
  /* Auf Apple-Geräten erscheint die Systemschrift (SF Pro); sonst Inter, die ihr sehr ähnlich ist. */
  --font: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'SF Pro Display', 'Inter', system-ui, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-display: var(--font);
  --mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* Flächen und Text */
  --bg: #f2f2f7;
  --label: #1c1c1e;
  --label-2: rgb(60 60 67 / 72%);
  --label-3: rgb(60 60 67 / 45%);
  --fill: rgb(120 120 128 / 12%);
  --fill-2: rgb(120 120 128 / 7%);
  --fill-3: rgb(120 120 128 / 22%);
  --sep: rgb(60 60 67 / 14%);
  --line: var(--sep);
  --thumb: #fff;

  /* Akzent: Feuerwehrrot */
  --tint: #d70015;
  --tint-hover: #bd0013;
  --tint-soft: rgb(215 0 21 / 10%);
  --tint-fill: #d70015;

  /* Systemfarben: Text/Symbole (…) und kräftige Flächen (…-solid) */
  --green: #1f8a3b;  --green-solid: #2fb14f;  --green-soft: rgb(52 199 89 / 17%);
  --red: #d70015;    --red-solid: #e5352b;    --red-soft: rgb(255 59 48 / 11%);
  --orange: #b84a00; --orange-solid: #f58a00; --orange-soft: rgb(255 149 0 / 16%);
  --yellow: #8a6500; --yellow-solid: #f2b800; --yellow-soft: rgb(255 204 0 / 22%);
  --blue: #0062cc;   --blue-solid: #0a7aff;   --blue-soft: rgb(10 122 255 / 12%);
  --gray-solid: #787880;

  /* Glas */
  --glass: rgb(255 255 255 / 58%);
  --glass-2: rgb(255 255 255 / 86%);
  --glass-bar: rgb(255 255 255 / 74%);
  --glass-pop: rgb(255 255 255 / 96%); /* Menüs und Dialoge: gut lesbar, kaum durchsichtig */
  --glass-edge: rgb(60 60 67 / 11%);
  --blur: blur(26px) saturate(180%);
  --spec: inset 0 1px 0 rgb(255 255 255 / 95%), inset 0 0 0 .5px rgb(255 255 255 / 55%);
  --shadow: 0 1px 1px rgb(0 0 0 / 3%), 0 6px 26px rgb(0 0 0 / 6%);
  --shadow-lg: 0 22px 70px rgb(0 0 0 / 20%), 0 3px 10px rgb(0 0 0 / 8%);
  --glow-a: rgb(255 105 90 / 17%);
  --glow-b: rgb(90 160 255 / 16%);
  --glow-c: rgb(255 190 90 / 14%);

  --radius: 22px;
  --radius-sm: 14px;
  --topbar-h: 72px;
}

:root[data-theme='dark'] {
  color-scheme: dark;
  --bg: #000;
  --label: #f5f5f7;
  --label-2: rgb(235 235 245 / 66%);
  --label-3: rgb(235 235 245 / 38%);
  --fill: rgb(120 120 128 / 28%);
  --fill-2: rgb(120 120 128 / 16%);
  --fill-3: rgb(120 120 128 / 42%);
  --sep: rgb(84 84 88 / 60%);
  --thumb: #636366;

  --tint: #ff453a;
  --tint-hover: #ff6259;
  --tint-soft: rgb(255 69 58 / 16%);
  --tint-fill: #d92d22;

  --green: #32d74b;  --green-solid: #30b350;  --green-soft: rgb(48 209 88 / 20%);
  --red: #ff6961;    --red-solid: #e5352b;    --red-soft: rgb(255 69 58 / 18%);
  --orange: #ff9f0a; --orange-solid: #e07b00; --orange-soft: rgb(255 159 10 / 20%);
  --yellow: #ffd60a; --yellow-solid: #d9a300; --yellow-soft: rgb(255 214 10 / 20%);
  --blue: #64b5ff;   --blue-solid: #0a84ff;   --blue-soft: rgb(10 132 255 / 22%);
  --gray-solid: #8e8e93;

  --glass: rgb(44 44 46 / 56%);
  --glass-2: rgb(52 52 54 / 88%);
  --glass-bar: rgb(38 38 40 / 78%);
  --glass-pop: rgb(40 40 43 / 97%);
  --glass-edge: rgb(0 0 0 / 55%);
  --spec: inset 0 1px 0 rgb(255 255 255 / 17%), inset 0 0 0 .5px rgb(255 255 255 / 7%);
  --shadow: 0 1px 1px rgb(0 0 0 / 30%), 0 8px 30px rgb(0 0 0 / 35%);
  --shadow-lg: 0 24px 80px rgb(0 0 0 / 70%), 0 3px 10px rgb(0 0 0 / 40%);
  --glow-a: rgb(255 69 58 / 14%);
  --glow-b: rgb(10 132 255 / 14%);
  --glow-c: rgb(255 159 10 / 8%);
}

/* Ohne Unschärfe-Unterstützung oder bei „Transparenz reduzieren“: gut lesbare, deckende Flächen */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root { --blur: none; --glass: rgb(255 255 255 / 94%); --glass-2: #fff; --glass-bar: #fff; --glass-pop: #fff; }
  :root[data-theme='dark'] { --glass: rgb(36 36 38 / 96%); --glass-2: #2c2c2e; --glass-bar: #242426; --glass-pop: #2c2c2e; }
}
@media (prefers-reduced-transparency: reduce) {
  :root { --blur: none; --glass: #fff; --glass-2: #fff; --glass-bar: #fff; --glass-pop: #fff; }
  :root[data-theme='dark'] { --glass: #1c1c1e; --glass-2: #2c2c2e; --glass-bar: #1c1c1e; --glass-pop: #2c2c2e; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

*, *::before, *::after { box-sizing: border-box; }
/* Beim Hinscrollen (Weiter, Sprungmarken, Fokus) bleibt der Bereich unter den fixierten Leisten frei */
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--topbar-h) + var(--stats-h, 0px) + 8px); }
body {
  margin: 0; background: var(--bg); color: var(--label);
  font: 400 15px/1.45 var(--font); letter-spacing: -.008em; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
/* Farbige Lichter hinter dem Glas – ohne sie gäbe es nichts, was durchscheinen könnte */
body::before {
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(900px 620px at 0% -8%, var(--glow-a), transparent 62%),
    radial-gradient(820px 600px at 100% 2%, var(--glow-b), transparent 62%),
    radial-gradient(940px 700px at 58% 112%, var(--glow-c), transparent 62%);
}
h1, h2, h3, h4 { margin: 0; font-weight: 700; letter-spacing: -.022em; line-height: 1.15; }
h1 { font-size: 32px; letter-spacing: -.03em; } h2 { font-size: 22px; } h3 { font-size: 17px; font-weight: 600; letter-spacing: -.014em; }
p { margin: 0; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
button { cursor: pointer; -webkit-tap-highlight-color: transparent; }
svg.icon { width: 1.2em; height: 1.2em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
:focus-visible { outline: 3px solid color-mix(in srgb, var(--blue-solid) 55%, transparent); outline-offset: 2px; border-radius: 8px; }
.muted { color: var(--label-2); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
input[type='checkbox'], input[type='radio'] { accent-color: var(--tint); }

/* ---------- Glas-Flächen ---------- */
.card, .topbar-inner, .bottomnav, .stats, .rows, .hlist, .group-head, .menu, .savebar {
  background: var(--glass);
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  box-shadow: var(--shadow), var(--spec);
  border: .5px solid var(--glass-edge);
}
.topbar-inner, .bottomnav, .stats, .group-head { background: var(--glass-bar); }
.card { border-radius: var(--radius); }
.card-pad { padding: 20px; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 20px; border-bottom: .5px solid var(--sep); }

/* ---------- Layout ---------- */
.shell { min-height: 100dvh; display: flex; flex-direction: column; }
.topbar { position: sticky; top: 0; z-index: 50; padding: 10px 16px 0; }
.topbar-inner { max-width: 1100px; margin: 0 auto; height: 56px; padding: 0 10px 0 12px; border-radius: 28px; display: flex; align-items: center; gap: 14px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; flex: 1 1 0; min-width: 0; }
.brand-mark { width: 32px; height: 32px; border-radius: 50%; display: block; flex: none; box-shadow: 0 1px 3px rgb(0 0 0 / 28%); }
.brand-name { display: grid; font-size: 15px; font-weight: 700; letter-spacing: -.016em; line-height: 1.15; white-space: nowrap; }
.brand-name small { font-size: 11.5px; font-weight: 500; letter-spacing: 0; color: var(--label-2); }
.nav { display: flex; gap: 2px; flex: none; }
.nav a {
  display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 14px; border-radius: 999px; text-decoration: none;
  font-size: 14.5px; font-weight: 600; letter-spacing: -.01em; color: var(--label-2); transition: background .15s, color .15s;
}
.nav a:hover { background: var(--fill-2); color: var(--label); }
.nav a[aria-current='page'] { background: var(--fill); color: var(--tint); }
.nav .icon { width: 18px; height: 18px; }
.topbar-inner .grow { display: none; }
.usermenu { flex: 1 1 0; display: flex; justify-content: flex-end; min-width: 0; }
.userbtn { display: flex; align-items: center; gap: 10px; background: none; border: 0; padding: 4px 8px 4px 4px; border-radius: 999px; text-align: left; }
.userbtn:hover { background: var(--fill-2); }
.userbtn small { display: block; color: var(--label-2); font-size: 11.5px; line-height: 1.15; }
.userbtn strong { font-size: 13.5px; font-weight: 600; line-height: 1.2; }
.avatar { width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(180deg, #a8a8b0, #82828b); color: #fff; display: grid; place-items: center; font: 600 12.5px var(--font); letter-spacing: .02em; flex: none; box-shadow: inset 0 1px 0 rgb(255 255 255 / 30%); }
.avatar.sm { width: 24px; height: 24px; font-size: 10px; }
.avatar.live { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--green-solid); }
.menu { -webkit-backdrop-filter: blur(40px) saturate(190%); backdrop-filter: blur(40px) saturate(190%); position: absolute; right: max(16px, calc((100% - 1100px) / 2)); top: 68px; min-width: 272px; padding: 6px; border-radius: 22px; background: var(--glass-pop); box-shadow: var(--shadow-lg), var(--spec); z-index: 60; animation: pop .16s ease-out; }
.menu button, .menu-row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 11px 12px; border: 0; background: none; border-radius: 14px; text-align: left; font-size: 15px; }
.menu button:hover, .menu-row:hover { background: var(--fill-2); }
.menu-row { cursor: pointer; }
.menu-row .toggle { margin-left: auto; }
.menu hr { border: 0; border-top: .5px solid var(--sep); margin: 4px 8px; }
.menu .who { padding: 10px 12px 8px; line-height: 1.35; }
.menu .who small { color: var(--label-2); }

.page { width: 100%; max-width: 1100px; margin: 0 auto; padding: 22px 16px 100px; flex: 1; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px 20px; flex-wrap: wrap; margin: 8px 0 18px; }
.page-head p { color: var(--label-2); margin-top: 4px; }
.footer { text-align: center; color: var(--label-2); font-size: 12px; padding: 14px 16px 30px; display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; }
.footer img { height: 26px; width: auto; opacity: .9; }
:root[data-theme='dark'] .footer img, :root[data-theme='dark'] .login-logo { background: #fff; border-radius: 10px; padding: 5px 9px; opacity: 1; }

.bottomnav { display: none; }

/* ---------- Schalter ---------- */
.toggle, .switch input[type='checkbox'] {
  appearance: none; -webkit-appearance: none; flex: none; width: 51px; height: 31px; margin: 0; border: 0; border-radius: 999px;
  background: var(--fill-3); position: relative; cursor: pointer; transition: background .2s;
}
.toggle::after, .switch input[type='checkbox']::after {
  content: ''; position: absolute; top: 2px; left: 2px; width: 27px; height: 27px; border-radius: 50%; background: #fff;
  box-shadow: 0 2px 5px rgb(0 0 0 / 26%), 0 0 1px rgb(0 0 0 / 30%); transition: transform .24s cubic-bezier(.3, .7, .4, 1);
}
.toggle:checked, .switch input[type='checkbox']:checked { background: var(--green-solid); }
.toggle:checked::after, .switch input[type='checkbox']:checked::after { transform: translateX(20px); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 0 18px;
  border-radius: 999px; border: 0; background: var(--fill); color: var(--tint);
  font-size: 15px; font-weight: 600; letter-spacing: -.012em; text-decoration: none; white-space: nowrap;
  transition: transform .12s, background .15s, filter .15s;
}
.btn:hover { background: var(--fill-3); }
.btn:active { transform: scale(.97); }
.btn .icon { width: 18px; height: 18px; }
.btn.primary { background: var(--tint-fill); color: #fff; box-shadow: inset 0 1px 0 rgb(255 255 255 / 26%), 0 1px 2px rgb(0 0 0 / 18%); }
.btn.primary:hover { filter: brightness(1.1); }
.btn.secondary { color: var(--label); }
.btn.ghost { background: transparent; color: var(--tint); }
.btn.ghost:hover { background: var(--fill-2); }
.btn.danger { background: var(--red-soft); color: var(--red); }
.btn.danger:hover { background: color-mix(in srgb, var(--red-solid) 22%, transparent); }
.btn.sm { min-height: 32px; padding: 0 14px; font-size: 14px; }
.btn.lg { min-height: 48px; font-size: 16px; }
.btn.block { width: 100%; }
.btn[disabled] { opacity: .4; pointer-events: none; }
.iconbtn { width: 34px; height: 34px; display: inline-grid; place-items: center; border: 0; border-radius: 50%; background: transparent; color: var(--label-2); flex: none; }
.iconbtn:hover { background: var(--fill); color: var(--label); }
.iconbtn.danger:hover { color: var(--red); background: var(--red-soft); }

/* ---------- Chips, Kennzeichen, Felder ---------- */
.chip {
  display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 600; letter-spacing: -.005em;
  background: var(--fill); color: var(--label-2); white-space: nowrap;
}
.chip.ok { background: var(--green-soft); color: var(--green); }
.chip.bad { background: var(--red-soft); color: var(--red); }
.chip.warn { background: var(--orange-soft); color: var(--orange); }
.chip.open { background: var(--yellow-soft); color: var(--yellow); }
.chip.info { background: var(--blue-soft); color: var(--blue); }
.chip .icon { width: 14px; height: 14px; stroke-width: 2.4; }
.plate {
  --plate-h: 26px;
  display: inline-flex; flex: none; align-items: stretch; height: var(--plate-h); overflow: hidden; vertical-align: middle;
  border: 1.5px solid #111; border-radius: 6px; background: linear-gradient(#fff, #f2f2f0); color: #111;
  box-shadow: 0 1px 2px rgb(0 0 0 / 18%), inset 0 0 0 1px #fff;
  font-family: 'FE-Schrift', 'DIN Alternate', 'DIN 1451 Std', 'Bahnschrift', 'Arial Narrow', 'Roboto Condensed', var(--font);
  font-weight: 700; font-size: 16px; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap;
}
.plate-eu { flex: none; width: 16px; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 3px 0 2px; background: #003399; color: #fff; }
.plate-eu svg { width: 12px; height: 13px; fill: #fc0; }
.plate-eu b { font: 700 8px/1 var(--font); letter-spacing: 0; }
.plate-text { display: flex; align-items: center; padding: 0 4px; line-height: 1; }
.plate-seals { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
.plate-seals i { width: 8px; height: 8px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, #c4c8cf 70%); box-shadow: 0 0 0 .5px rgb(0 0 0 / 35%); }
.plate-seals i:last-child { background: radial-gradient(circle at 35% 30%, #fff, #b9bec6 70%); }
.vcard .plate { --plate-h: 24px; font-size: 15px; }
.insp-title .plate { --plate-h: 32px; font-size: 20px; }
.plate.none { border: 1px dashed var(--fill-3); color: var(--label-3); background: transparent; font: 500 12.5px var(--font); letter-spacing: 0; text-transform: none; }

label.field, div.field { display: grid; gap: 6px; font-size: 13px; font-weight: 500; color: var(--label-2); align-content: start; }
.input, select.input, textarea.input {
  width: 100%; min-height: 42px; padding: 9px 13px; border: 1px solid transparent; border-radius: 13px; background: var(--fill); color: var(--label);
  font-size: 15px; font-weight: 400; min-width: 0; transition: border-color .15s, box-shadow .15s, background .15s;
}
textarea.input { resize: vertical; min-height: 72px; }
select.input {
  appearance: none; -webkit-appearance: none; padding-right: 36px; background-repeat: no-repeat; background-position: right 13px center;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='m1 1.5 5 5 5-5' fill='none' stroke='%238e8e93' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.input:focus { outline: none; background: var(--glass-2); border-color: var(--blue-solid); box-shadow: 0 0 0 4px color-mix(in srgb, var(--blue-solid) 22%, transparent); }
.input::placeholder { color: var(--label-3); }
.input:disabled { opacity: .6; }
.input.missing { background: var(--yellow-soft); border-color: var(--yellow-solid); }
.form-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.form-error { background: var(--red-soft); color: var(--red); border-radius: 14px; padding: 10px 14px; font-weight: 500; }

/* Segmente (iOS) und Reiter */
.tabs, .seg { display: inline-flex; padding: 2px; gap: 2px; background: var(--fill); border-radius: 999px; max-width: 100%; }
.tab, .seg button {
  display: inline-flex; align-items: center; justify-content: center; border: 0; background: transparent; padding: 0 15px; min-height: 32px; border-radius: 999px;
  font-size: 14px; font-weight: 600; letter-spacing: -.01em; color: var(--label); text-decoration: none; white-space: nowrap; transition: background .15s, box-shadow .15s;
}
.tabs .tab:hover:not([aria-pressed='true']):not([aria-current='page']), .seg button:hover:not([aria-pressed='true']) { background: var(--fill-2); }
.tabs .tab[aria-current='page'], .tabs .tab[aria-pressed='true'], .seg button[aria-pressed='true'] { background: var(--thumb); box-shadow: 0 1px 3px rgb(0 0 0 / 16%), 0 0 0 .5px rgb(0 0 0 / 4%); }
.tab .count { opacity: .55; margin-left: 5px; font-weight: 500; }
.tab .short { display: none; }
/* einzeln stehende Auswahlknöpfe (Vorgaben für Mailserver und Prüffristen) */
.presets .tab, .presets-row .tab { background: var(--fill); }
.presets .tab[aria-pressed='true'] { background: var(--tint-fill); color: #fff; }
.presets .tab:hover:not([aria-pressed='true']), .presets-row .tab:hover { background: var(--fill-3); }
.admin-nav { margin-bottom: 18px; overflow-x: auto; scrollbar-width: none; }

.progress { height: 6px; border-radius: 99px; background: var(--fill); overflow: hidden; }
.progress > span { display: block; height: 100%; border-radius: inherit; background: var(--blue-solid); transition: width .35s ease; }
.progress.done > span { background: var(--green-solid); }
.progress.thin { height: 4px; }

.banner { display: flex; gap: 10px; align-items: flex-start; padding: 11px 15px; border-radius: 16px; font-size: 14.5px; font-weight: 500; background: var(--fill); }
.banner .icon { margin-top: 2px; }
.banner.ok { background: var(--green-soft); color: var(--green); }
.banner.warn { background: var(--orange-soft); color: var(--orange); }
.banner.info { background: var(--blue-soft); color: var(--blue); }
.banner.bad { background: var(--red-soft); color: var(--red); }

.empty { text-align: center; padding: 48px 20px; color: var(--label-2); }
.empty h3 { color: var(--label); margin-bottom: 6px; }
.spinner { width: 26px; height: 26px; border-radius: 50%; border: 2.5px solid var(--fill-3); border-top-color: var(--label-2); animation: spin .8s linear infinite; margin: 60px auto; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Hinweise & Dialoge ---------- */
.toasts { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 320; display: grid; gap: 10px; width: min(520px, calc(100vw - 24px)); }
.toast {
  display: flex; gap: 12px; align-items: flex-start; background: rgb(28 28 30 / 84%); color: #fff; padding: 12px 18px; border-radius: 20px; font-weight: 500; font-size: 14.5px;
  -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%); box-shadow: var(--shadow-lg), inset 0 1px 0 rgb(255 255 255 / 14%); animation: pop .22s ease-out;
}
:root[data-theme='dark'] .toast { background: rgb(72 72 74 / 84%); }
.toast.bad { background: rgb(215 0 21 / 92%); } .toast.ok { background: rgb(31 138 59 / 92%); }
@keyframes pop { from { opacity: 0; transform: translateY(8px) scale(.98); } }
.modal-back { position: fixed; inset: 0; background: rgb(0 0 0 / 30%); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); z-index: 260; display: grid; place-items: center; padding: 16px; animation: fade .18s; }
@keyframes fade { from { opacity: 0; } }
.modal { background: var(--glass-pop); -webkit-backdrop-filter: blur(40px) saturate(190%); backdrop-filter: blur(40px) saturate(190%); border: .5px solid var(--glass-edge); border-radius: 30px; box-shadow: var(--shadow-lg), var(--spec); width: min(540px, 100%); max-height: calc(100dvh - 32px); display: flex; flex-direction: column; overflow: hidden; animation: pop .2s ease-out; }
.modal.wide { width: min(760px, 100%); }
.modal-head { padding: 20px 24px 0; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.modal-head h2 { font-size: 20px; }
.modal-body { padding: 14px 24px; overflow: auto; display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.modal-body > form { grid-template-columns: minmax(0, 1fr); }
.dlg-actions { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }
.modal-foot { padding: 12px 24px 22px; display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }

/* ---------- Anmeldung ---------- */
.login { min-height: 100dvh; display: grid; place-content: center; justify-items: center; gap: 18px; padding: 28px 16px; }
.login-card { width: min(420px, 100%); padding: 30px 28px; display: grid; gap: 16px; border-radius: 32px; box-shadow: var(--shadow-lg), var(--spec); background: var(--glass-2); }
.login-brand { display: grid; gap: 8px; justify-items: center; text-align: center; margin-bottom: 6px; }
.login-logo { height: 54px; width: auto; display: block; margin-bottom: 6px; }
.login-brand h1 { font-size: 26px; }
.login-brand p { max-width: 36ch; font-size: 14.5px; }
.login-foot { color: var(--label-2); font-size: 12px; text-align: center; }
.fine { font-size: 13px; }

/* ---------- Fahrzeuge (Startseite) ---------- */
.station-block + .station-block { margin-top: 30px; }
.station-title { margin: 0 2px 12px; }
.station-title h2 { font-size: 22px; }
.vehicle-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
.vcard { position: relative; display: flex; flex-direction: column; gap: 14px; padding: 18px; }
.vcard-top { display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; grid-template-rows: auto auto; column-gap: 12px; row-gap: 2px; align-items: center; }
.vcard-top .ico { width: 46px; height: 46px; border-radius: 14px; background: var(--ico, var(--gray-solid)); color: #fff; display: grid; place-items: center; flex: none; box-shadow: inset 0 1px 0 rgb(255 255 255 / 32%), 0 2px 6px rgb(0 0 0 / 14%); }
.vcard-top .ico .icon { width: 24px; height: 24px; }
.vcard.running { --ico: var(--yellow-solid); }
.vcard.good { --ico: var(--green-solid); }
.vcard.problem { --ico: var(--orange-solid); }
.vcard.overdue { --ico: var(--red-solid); }
.vcard-top .ico { grid-row: 1 / span 2; }
.vcard-top h3 { font-size: 20px; letter-spacing: -.02em; align-self: end; }
.vcard-top .plate { align-self: start; margin: -6px -6px 0 0; }
.vcard-top small { grid-column: 2 / -1; align-self: start; color: var(--label-2); font-size: 13px; }
.vcard-state { display: grid; gap: 8px; min-height: 60px; align-content: start; }
.vcard-state .line { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; color: var(--label-2); font-size: 14px; }
.vcard-state .line strong { color: var(--label); font-weight: 600; }
.vcard-actions { display: flex; gap: 10px; margin-top: auto; flex-wrap: wrap; }
.vcard-actions .btn.primary { flex: 1; }
.pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--green-solid); box-shadow: 0 0 0 0 rgb(47 177 79 / 50%); animation: pulse 1.8s infinite; flex: none; }
@keyframes pulse { 70% { box-shadow: 0 0 0 8px rgb(47 177 79 / 0%); } 100% { box-shadow: 0 0 0 0 rgb(47 177 79 / 0%); } }

/* ---------- Historie ---------- */
.filters { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.filters .input { width: auto; min-width: 180px; }
.hlist { border-radius: var(--radius); overflow: hidden; }
.hitem { display: flex; align-items: center; gap: 4px; padding-right: 10px; border-top: .5px solid var(--sep); }
.hitem:first-child { border-top: 0; }
.hrow, .hrow.card { display: grid; grid-template-columns: minmax(150px, 1.2fr) minmax(150px, 1fr) minmax(160px, 1.2fr) auto auto; align-items: center; gap: 16px; padding: 12px 8px 12px 18px; text-decoration: none; background: none; border: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; border-radius: 0; flex: 1; min-width: 0; transition: background .12s; }
.hrow:hover { background: var(--fill-2); }
.hrow h3 { font-size: 17px; }
.hrow .sub { color: var(--label-2); font-size: 13px; }
.hrow .chips { display: flex; gap: 6px; flex-wrap: wrap; min-width: 0; }
.hrow .discard-note { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.hrow > .icon { color: var(--label-3); width: 16px; height: 16px; }

.deleted-log { margin-top: 26px; color: var(--label-2); }
.deleted-log summary { cursor: pointer; font-weight: 600; padding: 8px 4px; }
.deleted-log ul { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 8px; }
.deleted-log li { padding: 11px 16px; border-radius: 16px; background: var(--glass); border: .5px solid var(--glass-edge); color: var(--label); }
.deleted-log .sub { color: var(--label-2); font-size: 13px; margin-top: 2px; }
.delete-info p { margin: 0 0 10px; }
.delete-info ul { margin: 0 0 10px; padding-left: 20px; }
.delete-info .warn-text { color: var(--red); font-weight: 600; }
.finish-more { display: flex; gap: 10px; flex-wrap: wrap; justify-content: space-between; }

/* ---------- Prüfung ---------- */
.back { display: inline-flex; align-items: center; gap: 4px; text-decoration: none; color: var(--tint); font-weight: 500; margin: 0 0 10px 2px; }
.back .icon { width: 20px; height: 20px; }
.insp-head { padding: 18px 20px; display: grid; gap: 16px; }
.insp-title { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 8px 14px; }
.insp-title .plate { margin: -4px -6px 0 0; }
.insp-title h1 { font-size: 30px; }
.title-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.insp-title .meta, .insp-title .people { grid-column: 1 / -1; }
.insp-title .meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; color: var(--label-2); }
.insp-fields { display: grid; gap: 14px; grid-template-columns: 200px 1fr; align-items: end; }
.people { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.stats { position: sticky; top: var(--topbar-h); z-index: 30; margin: 12px 0 0; padding: 9px 14px; border-radius: 22px; display: flex; align-items: center; gap: 8px 18px; flex-wrap: wrap; }
.stats-row { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.stat { display: inline-flex; align-items: center; gap: 6px; padding: 3px 11px 3px 9px; border-radius: 999px; background: var(--fill); font-size: 13px; font-weight: 500; color: var(--label-2); }
.stat::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--gray-solid); flex: none; }
.stat.ok::before { background: var(--green-solid); } .stat.bad::before { background: var(--red-solid); } .stat.warn::before { background: var(--orange-solid); } .stat.open::before { background: transparent; box-shadow: inset 0 0 0 1.5px var(--gray-solid); }
.stat .sym { display: none; }
.stat b { font-size: 15px; font-weight: 700; color: var(--label); font-variant-numeric: tabular-nums; }
.stats-bar { display: flex; align-items: center; gap: 10px; flex: 1 1 200px; min-width: 0; }
.stats-bar .progress { flex: 1; }
.stats-count { font-size: 13px; white-space: nowrap; }
.stats-bar strong { font-size: 15px; font-weight: 700; min-width: 2.8em; text-align: right; font-variant-numeric: tabular-nums; }
.toolbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 14px 0 8px; }
.toolbar .grow { flex: 1; }
.scrollrow { position: relative; min-width: 0; }
.scrollrow > div { min-width: 0; }
.scrollrow.has-left > div { -webkit-mask-image: linear-gradient(to right, transparent 0, #000 44px); mask-image: linear-gradient(to right, transparent 0, #000 44px); }
.scrollrow.has-right > div { -webkit-mask-image: linear-gradient(to left, transparent 0, #000 44px); mask-image: linear-gradient(to left, transparent 0, #000 44px); }
.scrollrow.has-left.has-right > div { -webkit-mask-image: linear-gradient(to right, transparent 0, #000 44px, #000 calc(100% - 44px), transparent 100%); mask-image: linear-gradient(to right, transparent 0, #000 44px, #000 calc(100% - 44px), transparent 100%); }
.scroll-btn { position: absolute; top: calc(50% - 2px); transform: translateY(-50%); z-index: 2; width: 30px; height: 30px; border-radius: 50%; border: .5px solid var(--glass-edge); background: var(--glass-2); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); box-shadow: var(--shadow), var(--spec); display: grid; place-items: center; padding: 0; color: var(--label); cursor: pointer; }
.scroll-btn:hover { background: var(--thumb); }
.scroll-btn.left { left: 0; } .scroll-btn.right { right: 0; }
.scroll-btn.left .icon { transform: rotate(90deg); } .scroll-btn.right .icon { transform: rotate(-90deg); }
.scroll-btn .icon { width: 16px; height: 16px; }
@media (pointer: coarse) { .scroll-btn { display: none; } } /* Touch: wischen */
.jump { display: flex; gap: 6px; overflow-x: auto; padding: 4px 2px 8px; scrollbar-width: none; }
.jump button { flex: none; border: 0; background: var(--fill); border-radius: 999px; padding: 5px 12px; font-size: 13px; font-weight: 600; color: var(--label); }
.jump button:hover { background: var(--fill-3); }
.jump button.done { color: var(--green); background: var(--green-soft); }
.jump button small { font-size: 11.5px; margin-left: 6px; opacity: .7; font-weight: 500; }

.group { margin-top: 16px; }
.group-head { display: flex; align-items: center; gap: 12px; padding: 4px 14px 4px 6px; border-radius: 18px; position: sticky; top: calc(var(--topbar-h) + var(--stats-h, 0px) + 8px); z-index: 10; margin-bottom: 8px; }
.group-toggle { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px 10px; background: none; border: 0; padding: 6px 4px 6px 4px; text-align: left; cursor: pointer; border-radius: 14px; color: inherit; flex-wrap: wrap; }
.group-toggle[disabled] { cursor: default; opacity: 1; }
.group-toggle:not([disabled]):hover .chev { color: var(--label); }
.chev { color: var(--label-3); transition: transform .2s; flex: none; }
.group.collapsed .chev { transform: rotate(-90deg); }
.group-title { font-size: 16px; font-weight: 700; letter-spacing: -.015em; }
.ghead-chips { display: inline-flex; gap: 6px; align-items: center; margin-left: auto; }
.ghead-chips .chip { font-size: 12px; padding: 1px 9px; }
.group-foot { display: flex; gap: 8px; flex-wrap: wrap; justify-content: space-between; align-items: center; padding: 8px 12px; border-top: .5px solid var(--sep); background: var(--fill-2); }
.group-foot .btn { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.group-foot .next { transform: rotate(-90deg); }
.group.collapsed { margin-top: 8px; }
.group.collapsed .group-head { margin-bottom: 0; }
.group-head .sub { color: var(--label-2); font-size: 13px; font-weight: 500; }
.group-head .progress { width: 90px; margin-left: auto; }
.rows { border-radius: var(--radius); overflow: hidden; }

/* Positionszeile: eine schlanke Zeile – Zustand, Name, Soll, Ist, Ergebnis, Bemerkung/Foto */
.row {
  display: grid; grid-template-columns: 24px minmax(0, 1fr) 54px 106px 216px 76px;
  grid-template-areas: 'state main soll qty result tools' '. extras extras extras extras extras' '. remark remark remark remark remark' '. photos photos photos photos photos';
  column-gap: 12px; row-gap: 0; align-items: center; padding: 8px 12px 8px 14px; border-top: .5px solid var(--sep);
  transition: background .2s;
}
.row:first-child { border-top: 0; }
.row[data-status='mangel'] { background: var(--red-soft); }
.row[data-status='fehlmenge'], .row[data-status='mehrmenge'] { background: var(--orange-soft); }
.row[data-status='entfaellt'] .row-name { color: var(--label-2); text-decoration: line-through; text-decoration-color: var(--label-3); }
.row.flash { animation: flash 1.2s ease-out; }
@keyframes flash { from { box-shadow: inset 0 0 0 2.5px var(--blue-solid); } to { box-shadow: inset 0 0 0 2.5px transparent; } }
.state { grid-area: state; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; border: 1.5px solid var(--fill-3); color: #fff; }
.state .icon { width: 13px; height: 13px; stroke-width: 3; }
.state.ok { background: var(--green-solid); border-color: var(--green-solid); }
.state.mangel { background: var(--red-solid); border-color: var(--red-solid); }
.state.fehlmenge, .state.mehrmenge { background: var(--orange-solid); border-color: var(--orange-solid); }
.state.entfaellt { background: var(--gray-solid); border-color: var(--gray-solid); }
.row-main { grid-area: main; min-width: 0; }
.row.noqty .row-main { grid-column: 2 / 5; grid-row: 1; }
.row-name { font-size: 15px; font-weight: 500; line-height: 1.3; overflow-wrap: break-word; }
.row-meta { color: var(--label-2); font-size: 12px; margin-top: 1px; display: flex; gap: 4px 10px; flex-wrap: wrap; align-items: center; }
.soll-inline { display: none; }
.row-meta.soll-only { display: none; }
.row-fix { margin-top: 5px; }
button.chip { border: 0; font-family: inherit; cursor: pointer; }
.fixchip { padding-right: 7px; }
.fixchip:hover { filter: brightness(.96); }
.fixchip .fix-go { width: 13px; height: 13px; opacity: .55; transform: rotate(-90deg); }
.fixchip .fix-comments { display: inline-flex; align-items: center; gap: 3px; font-weight: 600; opacity: .85; }
.fixchip .fix-comments .icon { width: 12px; height: 12px; }
.defect-state { display: grid; gap: 4px; padding: 12px 14px; border-radius: 14px; background: var(--fill); font-size: 14.5px; }
.defect-state.ok { background: var(--green-soft); } .defect-state.info { background: var(--blue-soft); } .defect-state.bad { background: var(--red-soft); }
.defect-state strong { display: flex; align-items: center; gap: 8px; }
.soll { grid-area: soll; text-align: right; font-size: 12px; color: var(--label-2); white-space: nowrap; }
.soll small { font-size: 11.5px; margin-right: 4px; }
.soll b { font-size: 15px; font-weight: 600; color: var(--label); font-variant-numeric: tabular-nums; }
.qty { grid-area: qty; justify-self: end; display: inline-flex; align-items: center; height: 34px; border-radius: 999px; background: var(--fill); padding: 2px; }
.qty.diff { box-shadow: inset 0 0 0 1.5px var(--orange-solid); }
.qty button { width: 30px; height: 30px; border: 0; border-radius: 50%; background: var(--thumb); color: var(--label); font-size: 18px; line-height: 1; font-weight: 500; box-shadow: 0 1px 2px rgb(0 0 0 / 16%); display: grid; place-items: center; padding: 0; }
.qty button:active { transform: scale(.92); }
.qty input { width: 38px; border: 0; text-align: center; font-size: 15px; font-weight: 600; background: transparent; -moz-appearance: textfield; appearance: textfield; padding: 0; font-variant-numeric: tabular-nums; }
.qty input::-webkit-inner-spin-button, .qty input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.qty input::placeholder { color: var(--label-3); font-weight: 500; }
.qty input:focus { outline: none; }
.result { grid-area: result; display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 2px; padding: 2px; height: 34px; border-radius: 999px; background: var(--fill); }
.qr-wrap { display: grid; place-items: center; }
.qr { width: 228px; height: 228px; image-rendering: pixelated; background: #fff; border-radius: 14px; box-shadow: 0 0 0 .5px var(--sep); }
.qr-empty { display: grid; place-items: center; }
.secret-box { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 14px; background: var(--fill); }
.secret-box code, .recovery-grid code { font-family: var(--mono); font-size: 15px; letter-spacing: .06em; word-break: break-all; }
.secret-box code { flex: 1 1 220px; }
.recovery-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.recovery-grid code { padding: 8px 10px; border-radius: 12px; background: var(--fill); text-align: center; user-select: all; }
.code-input { font-family: var(--mono); font-size: 20px; letter-spacing: .18em; text-align: center; }
.menu button .chip { font-size: 11.5px; padding: 1px 8px; }
.rbtn { border: 0; border-radius: 999px; background: transparent; color: var(--label-2); font-size: 13.5px; font-weight: 600; padding: 0 8px; transition: background .15s, color .15s; }
.rbtn:hover { color: var(--label); }
.rbtn[aria-pressed='true'] { color: #fff; box-shadow: 0 1px 3px rgb(0 0 0 / 22%), inset 0 1px 0 rgb(255 255 255 / 22%); }
.rbtn.ok[aria-pressed='true'] { background: var(--green-solid); }
.rbtn.mangel[aria-pressed='true'] { background: var(--red-solid); }
.rbtn.entfaellt[aria-pressed='true'] { background: var(--gray-solid); }
.tools { grid-area: tools; display: flex; gap: 2px; justify-content: flex-end; }
.tool { width: 34px; height: 34px; border-radius: 50%; display: inline-grid; place-items: center; border: 0; background: transparent; color: var(--label-2); cursor: pointer; padding: 0; }
.tool:hover { background: var(--fill); color: var(--label); }
.tool .icon { width: 19px; height: 19px; }
.tool.on, .tool[aria-pressed='true'] { color: var(--blue); }
.tool.warn { color: var(--orange); }
/* Zusatzangaben (Druck in bar, Haltbar bis …) */
.row-extras { grid-area: extras; margin-top: 6px; display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: flex-start; }
.xfield { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.xlabel { font-size: 13px; font-weight: 600; color: var(--label-2); }
.xlabel small { font-weight: 500; color: var(--label-3); }
.xnum { display: inline-flex; align-items: center; gap: 5px; }
.xnum small { color: var(--label-2); font-weight: 600; }
.xfield .input { min-height: 32px; padding: 3px 10px; border-radius: 10px; font-size: 14px; width: 92px; font-variant-numeric: tabular-nums; }
.xfield input[type='date'] { width: 150px; }
.xfield .input.invalid { background: var(--red-soft); border-color: var(--red-solid); }
.xfield.missing .input, .xfield.missing .xyn { box-shadow: 0 0 0 2px var(--yellow-solid); }
.xyn { display: inline-flex; padding: 2px; gap: 2px; background: var(--fill); border-radius: 999px; }
.xyn button { border: 0; background: transparent; border-radius: 999px; min-width: 46px; height: 28px; font-size: 13.5px; font-weight: 600; color: var(--label-2); }
.xyn button[aria-pressed='true'] { color: #fff; box-shadow: 0 1px 3px rgb(0 0 0 / 22%); }
.xyn .yes[aria-pressed='true'] { background: var(--green-solid); }
.xyn .no[aria-pressed='true'] { background: var(--red-solid); }
.xhint { flex-basis: 100%; font-size: 12.5px; font-weight: 600; }
.xhint.bad { color: var(--red); } .xhint.warn { color: var(--orange); }
.row-extras.ro { gap: 4px 14px; font-size: 13px; color: var(--label-2); }
.xval b { color: var(--label); font-weight: 600; } .xval.bad b { color: var(--red); }
.row-extras.ro .xhint { flex-basis: auto; }
.row-remark { grid-area: remark; margin-top: 6px; }
.row-remark textarea { min-height: 38px; padding: 8px 12px; resize: none; overflow: hidden; border-radius: 12px; font-size: 14px; background: var(--fill-2); box-shadow: inset 0 0 0 .5px var(--sep); }
.row-photos { grid-area: photos; margin-top: 6px; }
.badge-diff { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; color: var(--orange); font-size: 12.5px; }
.static-result { grid-area: result; justify-self: end; font-size: 13.5px; font-weight: 600; color: var(--label-2); }
.static-result.ok { color: var(--green); } .static-result.mangel { color: var(--red); } .static-result.fehlmenge, .static-result.mehrmenge { color: var(--orange); }
.static-qty { grid-area: qty; justify-self: end; font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }

.finish { margin-top: 24px; padding: 20px; display: grid; gap: 16px; }
.finish-actions { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.finish-actions .grow { flex: 1; }
.log { display: grid; gap: 0; max-height: 420px; overflow: auto; border: .5px solid var(--sep); border-radius: 16px; background: var(--fill-2); }
.log div { display: grid; grid-template-columns: 140px 130px 1fr; gap: 12px; padding: 8px 14px; font-size: 13px; border-bottom: .5px solid var(--sep); }
.log div:last-child { border-bottom: 0; }
.log time { color: var(--label-2); }

/* ---------- Verwaltung ---------- */
.card.table-scroll, .card > .table-scroll { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; }
.table th { text-align: left; font-size: 12px; font-weight: 600; color: var(--label-2); padding: 10px 16px; border-bottom: .5px solid var(--sep); white-space: nowrap; }
.table td { padding: 11px 16px; border-bottom: .5px solid var(--sep); vertical-align: middle; }
.table tr:last-child td { border-bottom: 0; }
.table .right { text-align: right; white-space: nowrap; }
.table tr.inactive td { opacity: .5; }
.table .right > * + * { margin-left: 8px; }
.editor-table { width: 100%; border-collapse: separate; border-spacing: 0 6px; }
.editor-table th { text-align: left; font-size: 12px; font-weight: 600; color: var(--label-2); padding: 0 6px 4px; }
.editor-table td { padding: 0 4px; vertical-align: middle; }
.editor-table td.pos { color: var(--label-3); font-size: 13px; font-weight: 600; text-align: right; width: 44px; font-variant-numeric: tabular-nums; }
.editor-table .grip-cell { width: 34px; padding: 0 0 0 2px; }
.grip { width: 32px; height: 38px; display: inline-grid; place-items: center; border: 0; border-radius: 10px; background: transparent; color: var(--label-3); cursor: grab; touch-action: none; padding: 0; }
.grip:hover:not([disabled]) { background: var(--fill); color: var(--label); }
.grip:active:not([disabled]) { cursor: grabbing; }
.grip[disabled] { opacity: .35; cursor: not-allowed; }
.editor-table tr.dragging { opacity: .35; }
/* Gruppen (Lagerorte) im Beladungs-Editor */
.editor-table tr.group-row td { padding: 8px 0 2px 0; }
.group-row-inner { display: flex; align-items: center; gap: 4px; background: var(--fill-2); border-radius: 12px; padding: 2px 6px 2px 2px; }
.group-row-toggle { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; border: 0; background: none; border-radius: 10px; padding: 7px 8px; text-align: left; cursor: pointer; color: inherit; }
.group-row-inner:has(.group-row-toggle:not([disabled]):hover) { background: var(--fill); }
.group-acts { display: inline-flex; gap: 2px; flex: none; }
.group-acts .iconbtn[disabled] { opacity: .3; }
.editor-table tr.group-row.dragging { opacity: .5; }
.group-row-toggle[disabled] { cursor: default; }
.group-row-toggle b { font-size: 15px; letter-spacing: -.012em; }
.group-row-toggle .sub { color: var(--label-2); font-size: 13px; }
.group-row-toggle .chev { color: var(--label-3); transition: transform .2s; }
.group-row-toggle .chev.closed { transform: rotate(-90deg); }
.presets .tab.suggested { background: var(--blue-soft); color: var(--blue); }
.presets .tab small { font-weight: 500; opacity: .75; margin-left: 6px; }
.editor-table tr.drop-before > td { box-shadow: inset 0 3px 0 var(--blue-solid); }
.editor-table tr.drop-end > td { box-shadow: inset 0 -3px 0 var(--blue-solid); }
.is-dragging, .is-dragging * { cursor: grabbing !important; user-select: none; -webkit-user-select: none; }
.drag-ghost { position: fixed; left: 0; top: 0; z-index: 400; pointer-events: none; max-width: min(340px, 80vw); padding: 8px 16px; border-radius: 999px; background: var(--glass-2); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); box-shadow: var(--shadow-lg), var(--spec); border: .5px solid var(--glass-edge); font-weight: 600; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.editor-table .input { min-height: 38px; padding: 5px 11px; border-radius: 11px; }
.editor-table tr.new .input { border-color: var(--blue-solid); }
.editor-tools { display: flex; gap: 8px; flex-wrap: wrap; }
.editor-search { width: 200px; }
.editor-table .acts { white-space: nowrap; width: 188px; text-align: right; }
.xbtn { position: relative; }
.xbtn.on { color: var(--blue); }
.xcount { position: absolute; top: 1px; right: 0; min-width: 15px; height: 15px; padding: 0 4px; border-radius: 99px; background: var(--blue-solid); color: #fff; font-size: 10px; font-weight: 700; display: grid; place-items: center; }
.xdefs { display: grid; gap: 10px; }
.xdef { border: .5px solid var(--sep); border-radius: 16px; background: var(--fill-2); padding: 12px; display: grid; gap: 10px; }
.xdef-main { display: grid; grid-template-columns: minmax(0, 1fr) 140px auto; gap: 10px; align-items: end; }
.xdef-opts { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: end; }
.xdef-opts .field { width: 130px; }

.savebar { position: sticky; bottom: 14px; z-index: 40; margin-top: 18px; display: flex; align-items: center; gap: 12px; padding: 10px 12px 10px 20px; border-radius: 999px; background: rgb(28 28 30 / 78%); color: #fff; box-shadow: var(--shadow-lg), inset 0 1px 0 rgb(255 255 255 / 16%); }
:root[data-theme='dark'] .savebar { background: rgb(72 72 74 / 78%); }
.savebar .grow { flex: 1; font-weight: 500; }
.savebar .btn.secondary { background: rgb(255 255 255 / 16%); color: #fff; }
.checks { display: flex; gap: 8px; flex-wrap: wrap; }
.checks label { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 999px; background: var(--fill); font-weight: 500; cursor: pointer; }
.checks label:has(input:checked) { background: var(--tint-soft); color: var(--tint); }
.checks input { width: 17px; height: 17px; }

/* ---------- Mängelübersicht ---------- */
.navbadge { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 99px; background: var(--red-solid); color: #fff; font-size: 11.5px; font-weight: 700; letter-spacing: 0; position: relative; }
.navbadge.due { background: var(--orange-solid); }
.defect-link { align-self: flex-start; text-decoration: none; font-size: 13px; padding: 4px 11px; }
.defect-link:hover { filter: brightness(.95); }
.dgroup { overflow: hidden; }
.dgroup + .dgroup { margin-top: 16px; }
.dgroup-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 14px 18px; border-bottom: .5px solid var(--sep); }
.dgroup-head h3 { font-size: 19px; }
.drow { display: flex; gap: 12px 16px; justify-content: space-between; flex-wrap: wrap; padding: 14px 18px; border-bottom: .5px solid var(--sep); }
.drow:last-child { border-bottom: 0; }
.drow-main { flex: 1 1 380px; min-width: 0; display: grid; gap: 5px; align-content: start; }
.drow-title { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 16px; font-weight: 600; }
.drow-detail { color: var(--orange); font-weight: 500; }
.drow-remark { color: var(--label-2); }
.drow-meta { display: flex; gap: 4px 10px; flex-wrap: wrap; align-items: center; color: var(--label-2); font-size: 13px; }
.drow-link .icon { width: 14px; height: 14px; display: inline-block; vertical-align: -2px; margin-right: 4px; }
.dhistory { display: grid; gap: 10px; margin-top: 6px; }
.comment-form { display: grid; gap: 8px; justify-items: end; }
.comment-form textarea { min-height: 62px; }
.log .is-comment { background: var(--blue-soft); }
.log .is-comment span { color: var(--label); }
.log .is-comment .icon { width: 14px; height: 14px; display: inline-block; vertical-align: -2px; margin-right: 6px; color: var(--blue); }
.drow-who { color: var(--blue); font-weight: 500; min-width: 0; }
.drow-who .icon { width: 14px; height: 14px; display: inline-block; vertical-align: -2px; margin-right: 5px; }
.drow-who b { font-weight: 600; }
.drow-link { border: 0; background: none; padding: 0; color: var(--blue); font: inherit; font-weight: 500; text-decoration: none; cursor: pointer; }
.drow-link:hover { text-decoration: underline; }
.drow .hint { align-self: flex-start; white-space: normal; border-radius: 14px; padding: 6px 12px; }
.drow-actions { flex: none; display: flex; align-items: flex-start; }

/* ---------- Prüffristen ---------- */
.sched-edit { margin-top: 18px; padding-top: 16px; border-top: .5px solid var(--sep); display: grid; gap: 12px; }
.sched-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.sched-head h3 { font-size: 17px; }
.sched-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-weight: 500; }
.sched-row .input { width: 96px; }
.sched-row select.input { width: 140px; }
.presets { display: flex; gap: 8px; flex-wrap: wrap; }
.presets .tab { padding: 0 14px; font-size: 13.5px; }
.presets .tab .icon { margin-right: 5px; }
.presets .tab[disabled] { opacity: .4; pointer-events: none; }

/* ---------- E-Mail-Verwaltung ---------- */
.mailpage { display: grid; gap: 18px; }
.mailcard { display: grid; gap: 14px; }
.card-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.facts { display: grid; gap: 8px 24px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); margin: 0; }
.facts dt { font-size: 12px; font-weight: 600; color: var(--label-2); }
.facts dd { margin: 2px 0 0; font-weight: 500; overflow-wrap: anywhere; }
.err { color: var(--red); }
code { font-family: var(--mono); font-size: 13px; background: var(--fill); padding: 1px 6px; border-radius: 6px; }
.section-head { margin-top: 8px; }
.section-head p { margin-top: 4px; max-width: 78ch; }
.tplcard { overflow: hidden; }
.tplcard.off { opacity: .8; }
.tpl-head { display: flex; justify-content: space-between; gap: 16px; padding: 18px 22px 0; flex-wrap: wrap; }
.tpl-head h3 { font-size: 19px; }
.tpl-head p { max-width: 70ch; margin-top: 4px; font-size: 14px; }
.tpl-body { padding: 16px 22px; display: grid; gap: 16px; }
.tpl-foot { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 12px 22px; border-top: .5px solid var(--sep); background: var(--fill-2); }
.tpl-foot .grow { flex: 1; }
.tpl-text { min-height: 220px; font-size: 14px; line-height: 1.55; }
.switch { display: inline-flex; align-items: center; gap: 12px; font-weight: 500; cursor: pointer; justify-self: start; align-self: flex-start; }
.recips { display: grid; gap: 2px; font-size: 14px; color: var(--label-2); font-weight: 400; }
.recips .skip { color: var(--orange); }
label.inline { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-weight: 500; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip.pill { background: var(--fill); font-family: var(--mono); font-size: 12px; cursor: pointer; padding: 4px 10px; border: 0; color: var(--label); }
.chip.pill:hover { background: var(--blue-soft); color: var(--blue); }
.chips.plain .chip.pill { font-family: var(--font); font-size: 13px; font-weight: 500; }
.mailpreview { border: .5px solid var(--sep); border-radius: 16px; overflow: hidden; background: var(--fill-2); }
.mp-subject { background: var(--fill); padding: 12px 16px; font-weight: 600; border-bottom: .5px solid var(--sep); }
.mailpreview pre { margin: 0; padding: 16px; white-space: pre-wrap; word-break: break-word; font: 14px/1.55 var(--font); }
.mailpage > *, .mailcard > *, .tpl-body > * { min-width: 0; }
.mailform { display: grid; gap: 16px; }
.presets-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.form-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.inline-row { display: flex; align-items: center; gap: 8px; font-weight: 500; }
.input.hour { width: 84px; }
.testrow { border-top: .5px solid var(--sep); padding-top: 16px; max-width: 560px; }
@media (min-width: 721px) { .mailform .field.wide { grid-column: span 2; } }

/* ---------- Fotos ---------- */
.photostrip { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 2px; }
.thumb { width: 64px; height: 64px; padding: 0; border: 0; border-radius: 12px; overflow: hidden; background: var(--fill); cursor: zoom-in; display: grid; place-items: center; box-shadow: 0 0 0 .5px var(--sep); }
.thumb:hover { box-shadow: 0 0 0 2px var(--blue-solid); }
.thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.thumb.loading { cursor: progress; }
.lightbox { position: fixed; inset: 0; z-index: 250; background: rgb(0 0 0 / 88%); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); display: grid; grid-template-rows: 1fr auto; padding: 14px; gap: 12px; }
.lightbox img { max-width: 100%; max-height: 100%; margin: auto; object-fit: contain; border-radius: 14px; min-height: 0; }
.lb-bar { display: flex; gap: 10px; align-items: center; justify-content: center; flex-wrap: wrap; color: #fff; padding-bottom: max(4px, env(safe-area-inset-bottom)); }

/* Touch-Geräte mit großem Bildschirm (iPad): etwas größere Bedienflächen */
@media (pointer: coarse) and (min-width: 721px) {
  .row { column-gap: 14px; padding-top: 10px; padding-bottom: 10px; }
  .result, .qty { height: 40px; }
  .qty button { width: 36px; height: 36px; }
  .tool { width: 40px; height: 40px; }
  .btn.sm { min-height: 38px; }
}

/* ---------- Tablet ---------- */
@media (max-width: 960px) {
  .hrow, .hrow.card { grid-template-columns: 1fr auto auto; }
  .hrow .hide-sm { display: none; }
  .nav a { padding: 0 11px; }
  .row { grid-template-columns: 24px minmax(0, 1fr) 46px 104px 204px 76px; column-gap: 10px; }
}
@media (max-width: 860px) {
  .userbtn .who-text { display: none; }
  .brand-name small { display: none; }
}

/* ---------- Smartphone ---------- */
@media (max-width: 720px) {
  :root { --topbar-h: max(8px, env(safe-area-inset-top)); --glass-bar: rgb(255 255 255 / 92%); }
  :root[data-theme='dark'] { --glass-bar: rgb(38 38 40 / 94%); }
  h1 { font-size: 28px; }
  .topbar { position: relative; z-index: 50; padding: max(8px, env(safe-area-inset-top)) 12px 0; } /* scrollt weg (nicht fixiert), bleibt aber über dem Inhalt – wegen des Profilmenüs */
  .topbar-inner { height: 50px; padding: 0 8px 0 10px; border-radius: 25px; }
  .nav { display: none; }
  .brand { flex: 1; }
  .menu { right: 12px; top: 62px; min-width: min(300px, calc(100vw - 24px)); }
  .page { padding: 12px 12px 24px; }
  .page-head { margin: 4px 0 14px; }
  .footer { padding-bottom: 112px; }
  .bottomnav {
    display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 2px; position: fixed; left: 12px; right: 12px; bottom: max(12px, env(safe-area-inset-bottom)); z-index: 55;
    padding: 6px; border-radius: 34px; box-shadow: var(--shadow-lg), var(--spec);
  }
  .bottomnav a { position: relative; display: grid; justify-items: center; gap: 2px; padding: 7px 4px 6px; text-decoration: none; color: var(--label-2); font-size: 10.5px; font-weight: 600; letter-spacing: 0; border-radius: 28px; }
  .bottomnav a[aria-current='page'] { color: var(--tint); background: var(--fill); }
  .bottomnav .icon { width: 24px; height: 24px; }
  .bottomnav .navbadge { position: absolute; top: 2px; left: calc(50% + 6px); }
  .toasts { bottom: 96px; }
  .savebar { bottom: 94px; border-radius: 26px; padding: 10px 12px 10px 16px; flex-wrap: wrap; }
  .modal-back { place-items: end center; padding: 8px 8px max(8px, env(safe-area-inset-bottom)); }
  .modal { border-radius: 30px; animation: sheet .3s cubic-bezier(.2, .8, .2, 1); }
  .modal-head { padding: 18px 20px 0; } .modal-body { padding: 12px 20px; } .modal-foot { padding: 10px 20px 18px; }
  @keyframes sheet { from { transform: translateY(48px); opacity: 0; } }
  .login { place-content: start center; padding-top: 40px; }
  .login-card { padding: 24px 20px; border-radius: 28px; }
  .vehicle-grid { grid-template-columns: 1fr; }
  .insp-head { padding: 16px; gap: 14px; }
  .insp-title h1 { font-size: 26px; }
  .insp-fields { grid-template-columns: 1fr; }
  .stats { margin-top: 8px; padding: 6px 10px; border-radius: 18px; gap: 6px 8px; flex-wrap: nowrap; }
  .stats-row { flex: none; flex-wrap: nowrap; gap: 4px; }
  .stat { padding: 2px 8px 2px 7px; gap: 5px; }
  .stat b { font-size: 14px; }
  .stat span.lbl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .stats-bar { flex: 1 1 0; gap: 8px; }
  .stats-bar strong { font-size: 14px; min-width: 0; }
  .stats-count { display: none; }
  .toolbar { flex-wrap: nowrap; gap: 8px; }
  .toolbar .tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .toolbar .tab { padding: 0 12px; }
  .tab .long { display: none; } .tab .short { display: inline; }
  .toolbar .btn .lbl-md { display: none; }
  .toolbar .btn { padding: 0 12px; }
  .group-head { padding: 2px 10px 2px 4px; }
  .group-head .progress { width: 44px; }
  .group-toggle .sub { display: none; }
  .group-toggle { flex-wrap: wrap; row-gap: 2px; }
  .group-title { flex: 1 1 auto; min-width: 0; line-height: 1.2; }
  .ghead-chips { flex: none; margin-left: auto; }
  .group-foot { padding: 8px; }
  .group-foot .btn { flex: 1 1 auto; }

  .row {
    grid-template-columns: 24px minmax(0, 1fr) auto; column-gap: 10px; row-gap: 0; padding: 9px 12px;
    grid-template-areas: 'state main qty' 'result result tools' 'extras extras extras' 'remark remark remark' 'photos photos photos';
  }
  .row.noqty .row-main { grid-column: 2 / 4; }
  .result, .tools { margin-top: 6px; }
  .row.ro .result { margin-top: 0; }
  .row-remark, .row-photos, .row-extras { margin-top: 8px; }
  .xfield .input { min-height: 38px; font-size: 16px; }
  .xyn button { height: 34px; min-width: 56px; }
  .row.ro { grid-template-columns: 24px minmax(0, 1fr) auto auto; grid-template-areas: 'state main qty result' 'extras extras extras extras' 'remark remark remark remark' 'photos photos photos photos'; }
  .row.ro.noqty .row-main { grid-column: 2 / 4; }
  .soll { display: none; } .soll-inline { display: inline; } .row-meta.soll-only { display: flex; }
  .result { width: 100%; height: 40px; }
  .rbtn { font-size: 14px; }
  .qty { height: 38px; }
  .qty button { width: 32px; height: 32px; }
  .qty input { width: 32px; font-size: 16px; }
  .tool { width: 40px; height: 40px; }
  .thumb { width: 60px; height: 60px; }
  .log div { grid-template-columns: 1fr; gap: 2px; }
  .editor-table td.pos, .editor-table th.pos { display: none; }
  .editor-table .acts { width: auto; }
  .xdef-main { grid-template-columns: 1fr; }
  .xdef-opts .field { width: calc(50% - 7px); }
  .table-scroll { overflow-x: auto; }
  .drow { padding: 14px; }
  .drow-actions, .drow-actions .seg { width: 100%; }
  .drow-actions .seg button { flex: 1; padding: 0 8px; }
  .dgroup-head { padding: 14px; }
  .mailcard .form-grid { grid-template-columns: 1fr; }
  .tpl-head, .tpl-body, .tpl-foot { padding-left: 16px; padding-right: 16px; }
  .tpl-foot .btn { flex: 1; }
  .tpl-foot .grow { display: none; }
}

@media (max-width: 720px) and (prefers-reduced-transparency: reduce) {
  :root { --glass-bar: #fff; }
  :root[data-theme='dark'] { --glass-bar: #242426; }
}
@media (max-width: 350px) { /* sehr schmale Geräte: Fortschritt in eigene Zeile */
  .stats { flex-wrap: wrap; }
  .stats-bar { flex-basis: 100%; }
}

/* ---------- Smartphone: Tabellen als Karten, Beladungs-Editor als Kartenliste ---------- */
@media (max-width: 720px) {
  .card-pad { padding: 16px; }
  .card-head { flex-wrap: wrap; padding: 14px 16px; }
  .card-head > div:first-child { flex: 1 1 100%; }
  .filters { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .filters .input { width: 100%; min-width: 0; }
  .filters .input:only-child, .filters .input:nth-child(odd):last-child { grid-column: 1 / -1; }

  /* Tabellen, die auf dem Handy als Karten erscheinen: Name + Aktion oben, dann Angaben, dann Zusatzzeilen */
  .table.cards, .table.cards tbody { display: block; }
  .table.cards thead { display: none; }
  .table.cards tr { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; padding: 12px 14px; border-bottom: .5px solid var(--sep); }
  .table.cards tr:last-child { border-bottom: 0; }
  .table.cards tr::after { content: ''; order: 2; flex: 1 1 100%; height: 0; } /* Umbruch nach Name und Aktion */
  .table.cards td { display: block; padding: 0; border: 0; order: 3; min-width: 0; }
  .table.cards td.c-main { order: 1; flex: 1 1 0; }
  .table.cards td.c-act { order: 2; flex: none; }
  .table.cards td.c-main + td.c-act, .table.cards td.c-act + td.c-act { margin-left: 0; }
  .table.cards td.c-wide { order: 6; flex: 1 1 100%; }
  .table.cards td.c-time { order: 7; flex: 1 1 100%; font-size: 12.5px; }
  .table.cards td.c-btns { display: grid; grid-template-columns: 1fr 1fr auto; gap: 8px; align-items: center; }
  .table.cards td.c-btns .btn { justify-content: center; }
  .table.cards td.c-btns .btn .icon { display: none; }
  .mailcard .chip, .mailpage .chip { white-space: normal; }
  .table.cards td[data-label]::before { content: attr(data-label) ': '; color: var(--label-2); font-size: 12.5px; }
  .table.cards td.right > * + * { margin-left: 0; }
  .table.cards td.right { text-align: left; }
  .table.cards tr.inactive td { opacity: 1; }
  .table.cards tr.inactive { opacity: .55; }

  /* Beladungs-Editor: jede Position eine Karte (Name oben, Lagerort + Soll, Werkzeuge unten) */
  .editor-head { gap: 10px; }
  .editor-tools { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
  .editor-search { grid-column: 1 / -1; width: 100%; }
  .editor-tools .btn { justify-content: center; min-height: 40px; }
  .editor-tools .btn.ghost { grid-column: 1 / -1; background: var(--fill); }
  .card-pad.table-scroll { padding: 10px; overflow-x: visible; }
  .editor-table.with-grip, .editor-table.with-grip tbody { display: block; }
  .editor-table.with-grip thead { display: none; }
  .editor-table.with-grip tr.group-row { display: block; margin-top: 10px; }
  .editor-table.with-grip tr.group-row:first-child { margin-top: 0; }
  .editor-table.with-grip tr.group-row > td { display: block; padding: 0; }
  .editor-table.with-grip tr:not(.group-row) {
    display: grid; grid-template-columns: 34px minmax(0, 1fr) 96px; grid-template-areas: 'grip name name' '. loc qty' '. acts acts';
    gap: 6px 8px; margin-top: 6px; padding: 10px 10px 4px 4px; border-radius: 16px; background: var(--fill-2); box-shadow: inset 0 0 0 .5px var(--sep);
  }
  .editor-table.with-grip tr:not(.group-row) > td { display: block; padding: 0; min-width: 0; width: auto; }
  .editor-table.with-grip tr:not(.group-row) > td.pos { display: none; }
  .editor-table.with-grip td.grip-cell { grid-area: grip; align-self: center; padding: 0; }
  .editor-table.with-grip td.c-name { grid-area: name; }
  .editor-table.with-grip td.c-loc { grid-area: loc; }
  .editor-table.with-grip td.c-qty { grid-area: qty; }
  .editor-table.with-grip td.c-acts { grid-area: acts; display: flex; justify-content: space-between; gap: 2px; width: auto; text-align: left; margin: 0 -4px; }
  .editor-table.with-grip td.c-acts .iconbtn { width: 40px; height: 38px; }
  .editor-table.with-grip td[data-label]::before { content: attr(data-label); display: block; font-size: 11.5px; font-weight: 600; color: var(--label-2); margin: 0 0 3px 4px; }
  .editor-table.with-grip .input { min-height: 40px; font-size: 16px; }
  .editor-table.with-grip tr.new { box-shadow: inset 0 0 0 1.5px var(--blue-solid); }
  .editor-table.with-grip tr.new .input { border-color: transparent; }
  .editor-table.with-grip tr.dragging { opacity: .35; }
  .editor-table.with-grip tr.drop-before { box-shadow: 0 -3px 0 var(--blue-solid); }
  .editor-table.with-grip tr.drop-end { box-shadow: 0 3px 0 var(--blue-solid); }
  .editor-table.with-grip tr.drop-before > td, .editor-table.with-grip tr.drop-end > td { box-shadow: none; }
  .group-row-inner { padding: 4px 6px 4px 2px; }
  .group-row-toggle { flex-wrap: wrap; gap: 0 8px; padding: 6px 8px; }
  .group-row-toggle .sub { flex: 1 1 100%; padding-left: 28px; margin-top: -2px; }
  .group-acts .iconbtn { width: 38px; height: 38px; }
  .grip { width: 34px; height: 42px; }
}
@media (max-width: 380px) { /* sehr schmale Geräte */
  .editor-tools { grid-template-columns: minmax(0, 1fr); }
  .group-row-toggle .sub { white-space: nowrap; }
  .group-acts .iconbtn { width: 32px; }
  .grip { width: 28px; }
  .editor-table.with-grip tr:not(.group-row) { grid-template-columns: 28px minmax(0, 1fr) 84px; }
}

/* ---------- Druck (A4 hochkant, wie die Excel-Vorlage) ---------- */
.print-sheet { display: none; }

@media print {
  @page { size: A4 portrait; margin: 11mm 10mm 12mm; }
  html, body { background: #fff !important; color: #000; font-size: 9pt; }
  .topbar, .bottomnav, .footer, .toasts, .screen-only, .stats, .toolbar, .back { display: none !important; }
  .page { padding: 0; max-width: none; }
  .print-sheet { display: block; }
  * { box-shadow: none !important; }
  .ps-head { display: flex; align-items: center; justify-content: space-between; border-bottom: 3pt solid #cc0000; padding-bottom: 6pt; margin-bottom: 8pt; }
  .ps-head img.fw { height: 17mm; } .ps-head img.st { height: 12mm; }
  .ps-title { font: 800 17pt var(--font-display); text-transform: uppercase; letter-spacing: .03em; margin: 0 0 1pt; }
  .ps-sub { color: #444; font-size: 8.5pt; margin-bottom: 8pt; }
  .ps-meta { display: grid; grid-template-columns: 1fr 1.35fr .9fr 1.45fr; border: 1pt solid #000; margin-bottom: 8pt; }
  .ps-meta div { padding: 3pt 6pt; border-right: 1pt solid #000; }
  .ps-meta div:last-child { border-right: 0; }
  .ps-meta small { display: block; font-size: 6.5pt; text-transform: uppercase; letter-spacing: .08em; color: #555; font-weight: 700; }
  .ps-meta b { font-size: 10pt; }
  .ps-meta .plate { --plate-h: 15pt; font-size: 11.5pt; margin-top: 1.5pt; background: #fff; border-width: 1pt; border-radius: 3pt; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .ps-meta .plate-eu { width: 11pt; padding: 1.5pt 0 1pt; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .ps-meta .plate-eu svg { width: 8pt; height: 9pt; }
  .ps-meta .plate-eu b { font-size: 5pt; }
  .ps-meta .plate-text { padding: 0 3pt; }
  .ps-meta .plate-seals { gap: 1.5pt; }
  .ps-meta .plate-seals i { width: 5pt; height: 5pt; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .ps-sum { display: flex; gap: 14pt; margin-bottom: 8pt; font-weight: 700; font-size: 9pt; }
  table.ps { width: 100%; border-collapse: collapse; margin-bottom: 8pt; }
  table.ps th { background: #eee !important; font-size: 7pt; text-transform: uppercase; letter-spacing: .05em; text-align: left; border: .6pt solid #777; padding: 2.5pt 4pt; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  table.ps td { border: .6pt solid #999; padding: 2pt 4pt; vertical-align: top; }
  table.ps thead { display: table-header-group; }
  table.ps tr { break-inside: avoid; }
  table.ps tr.loc td { background: #f5f5f5 !important; font-weight: 800; font-size: 8.5pt; letter-spacing: .05em; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  table.ps tr.bad td { background: #fde4e4 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  table.ps tr.warn td { background: #ffeedb !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  table.ps .num { text-align: center; width: 9mm; } .table.ps .res, table.ps .res { width: 24mm; font-weight: 700; }
  table.ps h3 { font-size: 10pt; }
  .ps-h { font: 800 11pt var(--font-display); text-transform: uppercase; letter-spacing: .05em; margin: 10pt 0 4pt; break-after: avoid; }
  .ps-sign { margin-top: 14pt; display: grid; grid-template-columns: 1fr 1fr; gap: 24pt; break-inside: avoid; }
  .ps-sign div { border-top: 1pt solid #000; padding-top: 3pt; min-height: 22mm; display: flex; flex-direction: column; justify-content: flex-end; font-size: 8pt; color: #333; }
  .ps-sign b { font-size: 10pt; color: #000; }
  .ps-foot { font-size: 7pt; color: #666; margin-top: 8pt; }
}

@media print {
  .ps-fix { margin-top: 1pt; font-size: 7.5pt; font-weight: 700; color: #333; }
  .ps-fix.behoben { color: #1b6e32; }
  .ps-extras { margin-top: 1pt; font-size: 7.5pt; color: #333; display: flex; gap: 8pt; flex-wrap: wrap; }
  table.ps tr.photos td { border-top: 0; padding-top: 0; }
  .ps-photos { display: flex; gap: 2mm; flex-wrap: wrap; padding: 1mm 0 1mm 9mm; }
  .ps-photos img { height: 26mm; width: auto; border: .5pt solid #999; }
}

/* Der Ausdruck ist immer hell und ohne Glas – unabhängig von der gewählten Darstellung */
@media print {
  body::before { display: none; }
  :root, :root[data-theme='dark'] { color-scheme: light; }
  body { color: #000; font-family: var(--font); }
  .ps-title { font-weight: 800; text-transform: none; letter-spacing: -.01em; }
  .ps-h { font-weight: 800; text-transform: none; letter-spacing: 0; }
}