:root {
  color-scheme: light;
  --ink: #172033;
  --muted: #64748b;
  --muted-2: #94a3b8;
  --line: #e5eaf1;
  --line-strong: #d7dee9;
  --panel: #ffffff;
  --canvas: #f6f8fb;
  --navy: #0f172a;
  --navy-2: #1e293b;
  --blue: #2563eb;
  --blue-soft: #eaf1ff;
  --green: #12805c;
  --green-soft: #e7f7f1;
  --orange: #b85f0b;
  --orange-soft: #fff4e7;
  --red: #c73535;
  --red-soft: #fff0f0;
  --shadow: 0 12px 32px rgba(15, 23, 42, 0.07);
  --radius: 16px;
  --sidebar: 252px;
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

html { background: var(--canvas); }

body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  background: var(--canvas);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

button, input, select, textarea { font: inherit; }

.auth-screen { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; }
.auth-card { width: 100%; max-width: 380px; padding: 28px 26px; }

button { cursor: pointer; }

button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid rgba(37, 99, 235, 0.22);
  outline-offset: 2px;
}

.app-shell { min-height: 100vh; }

.sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 40;
  width: var(--sidebar);
  padding: 22px 16px 18px;
  display: flex;
  flex-direction: column;
  background: var(--navy);
  color: #d8e0eb;
  transform: translateX(0);
  transition: transform .22s ease;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 8px 22px;
}

.brand-mark {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  color: white;
  background: #2f6fec;
  box-shadow: 0 8px 24px rgba(37, 99, 235, .26);
}
.brand-mark img { width:100%; height:100%; border-radius:12px; object-fit:contain; background:white; }

.brand-copy strong { display: block; font-size: 16px; letter-spacing: -.01em; }
.brand-copy span { display: block; margin-top: 2px; color: #8896aa; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; }

.role-box {
  margin: 0 2px 18px;
  padding: 11px 12px;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 13px;
  background: rgba(255,255,255,.045);
}

.role-box label { display: block; margin-bottom: 5px; color: #8390a4; font-size: 12px; text-transform: uppercase; letter-spacing: .11em; }
.role-box select { width: 100%; border: 0; color: #eef3f8; background: transparent; font-weight: 600; font-size: 15px; outline: none; }
.role-box option { color: var(--ink); }
.user-line { display: flex; flex-direction: column; gap: 1px; color: #eef3f8; }
.user-line strong { font-size: 15px; font-weight: 600; }
.user-line span { font-size: 13px; color: #93a0b6; }
.user-actions { display: flex; gap: 6px; margin-top: 9px; }
.user-actions .button { flex: 1; padding: 0 8px; font-size: 13px; min-height: 30px; }

.nav-list { display: grid; gap: 3px; overflow-y: auto; padding-right: 2px; }
.nav-label { margin: 12px 11px 5px; color: #66758c; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .12em; }

.nav-item {
  width: 100%;
  border: 0;
  border-radius: 11px;
  padding: 10px 11px;
  display: flex;
  align-items: center;
  gap: 11px;
  color: #aeb8c8;
  background: transparent;
  font-size: 15px;
  font-weight: 500;
  text-align: left;
  transition: color .16s, background .16s;
}

.nav-item:hover { color: white; background: rgba(255,255,255,.055); }
.nav-item.active { color: white; background: rgba(47,111,236,.19); }
.nav-item.active .icon { color: #7fb0ff; }
.nav-item .count { margin-left: auto; min-width: 20px; padding: 2px 6px; border-radius: 9px; color: #bcd0ef; background: rgba(255,255,255,.08); font-size: 12px; text-align: center; }
.sidebar-footer { margin-top: auto; padding: 18px 8px 0; display:grid; gap:10px; color: #66758c; font-size: 13px; }
.audit-button { width:100%; min-height:38px; padding:0 10px; border:1px solid rgba(255,255,255,.09); border-radius:10px; display:flex; align-items:center; gap:8px; color:#b7c3d4; background:rgba(255,255,255,.045); font-size: 13px; text-align:left; }
.audit-button:hover { color:white; background:rgba(255,255,255,.08); }
.audit-button span:last-child { margin-left:auto; padding:2px 6px; border-radius:8px; background:rgba(255,255,255,.08); font-size: 11px; }

.main-shell { margin-left: var(--sidebar); min-height: 100vh; }

.topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  height: 70px;
  padding: 0 32px;
  display: flex;
  align-items: center;
  gap: 18px;
  border-bottom: 1px solid rgba(215,222,233,.9);
  background: rgba(255,255,255,.91);
  backdrop-filter: blur(16px);
}

.icon-button.menu-button { display: none; }
.search-wrap { position: relative; flex: 1; max-width: 640px; }
.search-wrap .icon { position: absolute; top: 50%; left: 14px; color: var(--muted-2); transform: translateY(-50%); }
.search-input { width: 100%; height: 42px; padding: 0 42px; border: 1px solid var(--line); border-radius: 12px; color: var(--ink); background: #f8fafc; transition: border-color .18s, background .18s, box-shadow .18s; }
.search-input:focus { border-color: #adc5f5; background: white; box-shadow: 0 0 0 4px rgba(37,99,235,.06); outline: none; }
.key-hint { position: absolute; top: 50%; right: 10px; padding: 3px 6px; border: 1px solid var(--line); border-radius: 6px; color: var(--muted-2); background: white; font-size: 12px; transform: translateY(-50%); }

.top-actions { margin-left: auto; display: flex; align-items: center; gap: 9px; }
.icon-button { position: relative; width: 39px; height: 39px; border: 1px solid var(--line); border-radius: 11px; display: grid; place-items: center; color: var(--muted); background: white; }
.icon-button:hover { color: var(--ink); border-color: var(--line-strong); }
.help-button { color:var(--blue); font-size:18px; font-weight: 600; }
.icon-button .dot { position: absolute; top: 7px; right: 7px; width: 7px; height: 7px; border: 2px solid white; border-radius: 50%; background: var(--red); }
.avatar { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; color: #224c94; background: #dbe8ff; font-size: 14px; font-weight: 600; }

.page { max-width: 1480px; margin: 0 auto; padding: 34px 36px 70px; }
.page-header { margin-bottom: 25px; display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.eyebrow { margin: 0 0 7px; color: var(--blue); font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .11em; }
h1 { margin: 0; color: var(--navy); font-size: clamp(27px, 3vw, 38px); line-height: 1.12; letter-spacing: -.035em; }
.page-subtitle { max-width: 680px; margin: 9px 0 0; color: var(--muted); font-size: 15px; line-height: 1.55; }
.header-actions { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }

.button {
  min-height: 40px;
  padding: 0 15px;
  border: 1px solid transparent;
  border-radius: 11px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: white;
  background: var(--blue);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 5px 14px rgba(37,99,235,.14);
}
.button:hover { background: #1f56cc; }
.button.secondary { border-color: var(--line); color: var(--ink); background: white; box-shadow: none; }
.button.secondary:hover { border-color: var(--line-strong); background: #fbfcfe; }
.button.danger { color: #a62929; background: var(--red-soft); box-shadow: none; }
.button.success { color: #0e6f4e; background: var(--green-soft); box-shadow: none; }
.button.small { min-height: 32px; padding: 0 10px; border-radius: 9px; font-size: 14px; }

.grid { display: grid; gap: 18px; }
.grid.cols-4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
.grid.cols-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.grid.two-one { grid-template-columns: minmax(0, 1.65fr) minmax(300px, .9fr); }
.grid.equal-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }

.card { border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); box-shadow: 0 1px 0 rgba(15,23,42,.02); }
.card.padded { padding: 16px; }
.card-header { padding: 16px 17px 13px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.card-header h2, .section-title { margin: 0; color: var(--navy); font-size: 16px; letter-spacing: -.015em; }
.card-header p { margin: 4px 0 0; color: var(--muted); font-size: 14px; }
.card-body { padding: 0 17px 17px; }
.card-footer { padding: 12px 17px; border-top: 1px solid var(--line); }

.metric-card { min-height: 102px; padding: 14px; display: flex; flex-direction: column; justify-content: space-between; }
.metric-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.metric-icon { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; color: var(--blue); background: var(--blue-soft); }
.metric-icon.warning { color: var(--orange); background: var(--orange-soft); }
.metric-icon.danger { color: var(--red); background: var(--red-soft); }
.metric-icon.success { color: var(--green); background: var(--green-soft); }
.metric-number { margin-top: 10px; color: var(--navy); font-size: 24px; font-weight: 600; letter-spacing: -.035em; }
.metric-label { margin-top: 2px; color: var(--muted); font-size: 14px; }
.metric-link { border: 0; padding: 0; color: var(--blue); background: none; font-size: 13px; font-weight: 600; }
.metric-button { width:100%; color:inherit; text-align:left; transition:border-color .16s,box-shadow .16s,transform .16s; }
.metric-button:hover { border-color:#b9cff3; box-shadow:0 7px 20px rgba(37,99,235,.08); transform:translateY(-1px); }
.metric-button.selected { border-color:#7ea7ef; background:#f7faff; box-shadow:0 0 0 3px rgba(37,99,235,.08); }
.active-filter { margin:-3px 0 13px; display:flex; align-items:center; gap:7px; color:var(--muted); font-size: 13px; }
.active-filter .link-button { margin-left:5px; }

.list { margin: 0; padding: 0; list-style: none; }
.list-row { padding: 14px 0; border-top: 1px solid var(--line); display: flex; align-items: center; gap: 13px; }
.list-row:first-child { border-top: 0; }
.list-icon { flex: 0 0 auto; width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; color: var(--muted); background: #f1f4f8; }
.list-main { min-width: 0; flex: 1; }
.list-title { overflow: hidden; color: var(--ink); font-size: 15px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.list-meta { margin-top: 4px; color: var(--muted); font-size: 13px; }
.list-tail { text-align: right; }

.status { display: inline-flex; align-items: center; gap: 6px; padding: 5px 8px; border-radius: 999px; color: #31527b; background: #eef4fb; font-size: 12px; font-weight: 600; white-space: nowrap; }
.status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .8; }
.status.red { color: #aa2e2e; background: var(--red-soft); }
.status.orange { color: #9a520e; background: var(--orange-soft); }
.status.green { color: #0f7250; background: var(--green-soft); }
.status.blue { color: #315fad; background: var(--blue-soft); }
.status.neutral { color: #667085; background: #f1f3f6; }

.priority { display: inline-block; padding: 3px 7px; border-radius: 7px; color: #64748b; background: #f1f5f9; font-size: 12px; font-weight: 600; text-transform: uppercase; }
.priority.kritisch, .priority.hoch { color: #b02d2d; background: var(--red-soft); }
.priority.mittel { color: #96500e; background: var(--orange-soft); }
.priority.niedrig { color: #28614f; background: var(--green-soft); }
.defect-priority { display:inline-flex; padding:5px 8px; border-radius:8px; font-size: 12px; font-weight: 600; white-space:nowrap; }
.defect-priority.p-a { color:#9f1f1f; background:#fee2e2; }
.defect-priority.p-b { color:#a94c0c; background:#ffedd5; }
.defect-priority.p-c { color:#9a6a05; background:#fef3c7; }
.defect-priority.p-d { color:#315fad; background:var(--blue-soft); }
.defect-priority.p-x { color:#526071; background:#e9edf2; }

.toolbar { margin-bottom: 14px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.toolbar-search { min-width: 250px; flex: 1; position: relative; }
.toolbar-search .icon { position: absolute; left: 12px; top: 50%; color: var(--muted-2); transform: translateY(-50%); }
.input, .select, .textarea { width: 100%; border: 1px solid var(--line-strong); border-radius: 10px; color: var(--ink); background: white; transition: border-color .16s, box-shadow .16s; }
.input, .select { height: 40px; padding: 0 12px; }
.toolbar-search .input { padding-left: 38px; }
.input:focus, .select:focus, .textarea:focus { border-color: #91b2f1; box-shadow: 0 0 0 4px rgba(37,99,235,.07); outline: none; }
.select.compact { width: auto; min-width: 145px; }
.textarea { min-height: 110px; padding: 11px 12px; resize: vertical; }
.input[readonly], .input:disabled, .select:disabled, .textarea:disabled, .calculated-field { border-color:#dce2ea; color:#68778b; background:#eef1f5; box-shadow:none; cursor:not-allowed; }
input[type="date"] { color-scheme:light; }

.table-card { overflow: hidden; }
.table-scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th { padding: 11px 16px; border-bottom: 1px solid var(--line); color: var(--muted); background: #f9fafc; font-size: 12px; font-weight: 600; text-align: left; text-transform: uppercase; letter-spacing: .06em; white-space: nowrap; }
td { padding: 14px 16px; border-bottom: 1px solid var(--line); color: #334155; font-size: 14px; vertical-align: middle; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr.clickable { cursor: pointer; }
tbody tr.clickable:hover { background: #fbfcff; }
.link-button { padding:0; border:0; color:var(--blue); background:transparent; font-weight: 600; text-align:left; }
.link-button:hover { text-decoration:underline; }
.defect-asset-name { display:inline-flex; padding:5px 8px; border-left:3px solid var(--blue); border-radius:5px; background:var(--blue-soft); }
.defect-asset-name .link-button { color:#173f7a; font-size: 14px; font-weight: 600; }
.cell-title { color: var(--ink); font-weight: 600; }
.cell-sub { margin-top: 3px; color: var(--muted); font-size: 12px; }
.nowrap { white-space: nowrap; }
.actions-cell { width: 1%; white-space: nowrap; text-align: right; }
.inline-actions, .button-row { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.delete-icon { width:32px; height:32px; border-color:#f0c4c4; color:#b52f2f; background:var(--red-soft); font-size:18px; font-weight: 600; }
.delete-icon:hover { border-color:#e59a9a; color:#8f1e1e; background:#ffe4e4; }
.source-badge { display:inline-flex; align-items:center; min-height:24px; padding:4px 8px; border-radius:8px; color:#315fad; background:var(--blue-soft); font-size: 12px; font-weight: 600; white-space:nowrap; }
.source-badge.external { color:#7c3e9c; background:#f5ebfb; }

.attention-strip { margin-bottom: 18px; padding: 14px 16px; border: 1px solid #f2d7b4; border-radius: 13px; display: flex; align-items: center; gap: 12px; color: #7a4918; background: #fffaf3; font-size: 14px; }
.attention-strip strong { color: #6d3f11; }
.attention-strip.external { border-color:#ddc4ec; color:#69417c; background:#fbf7fd; }
.attention-strip.external strong { color:#59336c; }
.attention-strip .button { margin-left: auto; }
.source-strip { margin-bottom:18px; padding:12px 15px; border:1px solid #bed5f5; border-radius:13px; display:flex; align-items:center; gap:10px; color:#31527b; background:#f4f8ff; font-size: 13px; }
.source-strip strong { color:#234678; }

.quick-actions { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 12px; }
.quick-action { min-height: 86px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; color: var(--ink); background: white; text-align: left; }
.quick-action:hover { border-color: #c4d4f3; box-shadow: 0 7px 20px rgba(37,99,235,.06); }
.quick-action .icon { margin-bottom: 9px; color: var(--blue); }
.quick-action strong { display: block; font-size: 14px; }
.quick-action span { display: block; margin-top: 5px; color: var(--muted); font-size: 12px; line-height: 1.4; }
.quick-action:disabled { opacity:.58; cursor:not-allowed; }
.action-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }

.timeline { position: relative; margin: 0; padding: 2px 0 0 22px; list-style: none; }
.timeline::before { content: ""; position: absolute; top: 8px; bottom: 7px; left: 6px; width: 1px; background: var(--line-strong); }
.timeline-item { position: relative; padding: 0 0 17px 9px; }
.timeline-item:last-child { padding-bottom: 0; }
.timeline-dot { position: absolute; top: 4px; left: -20px; width: 9px; height: 9px; border: 2px solid white; border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 1px #aac3f3; }
.timeline-title { font-size: 14px; font-weight: 600; }
.timeline-meta { margin-top: 3px; color: var(--muted); font-size: 12px; }

.asset-layout { display: grid; grid-template-columns: 330px minmax(0,1fr); gap: 18px; }
.scope-notice { margin:0 20px; padding:10px 13px; border:1px solid #c9dcf8; border-radius:11px; display:flex; align-items:center; gap:9px; color:#31527b; background:#f5f9ff; font-size: 13px; }
.tree-card { padding: 10px; }
.tree-row { width: 100%; border: 0; border-radius: 9px; padding: 8px 9px; display: flex; align-items: center; gap: 8px; color: #334155; background: transparent; font-size: 14px; text-align: left; }
.tree-row:hover, .tree-row.active { background: #eef4ff; color: #1d4f9f; }
.tree-row.depth-1 { padding-left: 26px; }
.tree-row.depth-2 { padding-left: 43px; }
.tree-row.depth-3 { padding-left: 60px; }
.tree-row.depth-4 { padding-left: 77px; }
.tree-row .tree-chevron { color: var(--muted-2); }
.asset-hero { padding: 22px; display: flex; flex-wrap: wrap; align-items: flex-start; gap: 17px; }
/* Der Name hat Vorrang: Reicht der Platz nicht, rücken die Knöpfe in eine eigene Zeile,
   statt den Namen mitten in der Nummer umzubrechen ("Elektromotor M-04-" / "01"). */
.asset-hero > div:not(.asset-actions) { flex: 1 1 260px; min-width: 0; }
.asset-mark { flex: 0 0 auto; width: 54px; height: 54px; border-radius: 15px; display: grid; place-items: center; color: #1d5ab7; background: var(--blue-soft); }
.asset-hero h2 { margin: 1px 0 4px; color: var(--navy); font-size: 21px; letter-spacing: -.025em; }
.asset-id { color: var(--muted); font-size: 13px; }
.asset-actions { margin-left: auto; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.definition-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; }
.definition dt { margin-bottom: 4px; color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .05em; }
.definition dd { margin: 0; color: var(--ink); font-size: 14px; font-weight: 600; }

.tabs { display: flex; gap: 5px; border-bottom: 1px solid var(--line); overflow-x: auto; }
.tab { padding: 11px 13px; border: 0; border-bottom: 2px solid transparent; color: var(--muted); background: transparent; font-size: 14px; font-weight: 600; white-space: nowrap; }
.tab.active { color: var(--blue); border-bottom-color: var(--blue); }

.project-board { display: grid; grid-template-columns: repeat(4, minmax(240px,1fr)); gap: 14px; overflow-x: auto; padding-bottom: 5px; }
.board-column { min-height: 380px; padding: 12px; border: 1px solid var(--line); border-radius: 14px; background: #f7f9fc; }
.board-header { padding: 3px 2px 11px; display: flex; align-items: center; justify-content: space-between; color: #45546a; font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
.project-card { margin-bottom: 8px; padding: 11px; border: 1px solid var(--line); border-radius: 11px; background: white; box-shadow: 0 2px 5px rgba(15,23,42,.02); }
.project-card:last-child { margin-bottom: 0; }
.project-number { color: var(--blue); font-size: 12px; font-weight: 600; }
.project-card h3 { margin: 6px 0 7px; font-size: 14px; line-height: 1.35; }
.project-meta { display: flex; align-items: center; justify-content: space-between; color: var(--muted); font-size: 12px; }
.progress { height: 5px; margin: 11px 0 8px; border-radius: 99px; overflow: hidden; background: #edf1f6; }
.progress > span { display: block; height: 100%; border-radius: inherit; background: var(--blue); }

.stock-level { display: flex; align-items: center; gap: 10px; min-width: 150px; }
.stock-level .bar { width: 80px; height: 6px; border-radius: 99px; overflow: hidden; background: #edf1f6; }
.stock-level .bar span { display: block; height: 100%; background: var(--green); }
.stock-level.low .bar span { background: var(--red); }

.view-toggle { padding:3px; border:1px solid var(--line); border-radius:10px; display:inline-flex; background:white; }
.view-toggle button { min-height:32px; padding:0 11px; border:0; border-radius:7px; color:var(--muted); background:transparent; font-size: 13px; font-weight: 600; }
.view-toggle button.active { color:var(--blue); background:var(--blue-soft); }
.settings-tabs { margin-bottom:18px; padding:4px; border:1px solid var(--line); border-radius:12px; display:flex; gap:4px; overflow-x:auto; background:white; }
.settings-tabs button { min-height:38px; padding:0 15px; border:0; border-radius:9px; color:var(--muted); background:transparent; font-size: 13px; font-weight: 600; white-space:nowrap; }
.settings-tabs button.active { color:var(--blue); background:var(--blue-soft); }
.permission-grid { display:grid; gap:12px; }
.permission-role { padding:13px; border:1px solid var(--line); border-radius:11px; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px 12px; }
.permission-role strong { grid-column:1/-1; color:var(--navy); font-size: 14px; }
.permission-role label { display:flex; align-items:center; gap:6px; color:#475569; font-size: 12px; }
.table-tools { min-height:48px; padding:8px 12px; border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:flex-end; gap:8px; background:white; }
.table-tools > span { margin-right:auto; display:flex; align-items:center; gap:7px; color:var(--muted); font-size: 12px; font-weight: 600; }
th[data-table-sort] { cursor:pointer; user-select:none; }
th[data-table-sort]:hover { color:var(--blue); background:#f2f6fd; }
th[data-direction="asc"]::after { content:"  ↑"; color:var(--blue); }
th[data-direction="desc"]::after { content:"  ↓"; color:var(--blue); }
.table-filter-row th { padding:7px 8px; background:white; }
.table-filter-row .input { min-width:100px; height:32px; padding:0 8px; font-size: 12px; text-transform:none; letter-spacing:0; }
.camera-actions { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.camera-choice { min-height:112px; padding:16px; border:1px dashed #b7c3d3; border-radius:12px; display:flex!important; flex-direction:column; align-items:center; justify-content:center; color:var(--blue)!important; background:#fbfcfe; text-align:center; }
.camera-choice:hover { border-color:#7ca1e7; background:#f5f8ff; }
.camera-choice input { display:none; }
.camera-choice strong { margin-top:8px; color:var(--ink); font-size: 13px; }
.camera-choice span { margin-top:3px; color:var(--muted); font-size: 11px; }
.photo-preview:empty { display:none; }
.photo-preview { margin-top:10px; padding:10px; border:1px solid var(--line); border-radius:12px; color:var(--green); text-align:center; }
.config-list { display:grid; gap:9px; }
.config-row { min-height:54px; padding:8px 10px; border:1px solid var(--line); border-radius:11px; display:grid; grid-template-columns:auto minmax(170px,1fr) auto auto; align-items:center; gap:10px; }
.config-row .input { height:36px; }
.drag-handle { color:var(--muted-2); letter-spacing:-3px; }
.visibility-toggle { display:flex; align-items:center; gap:6px; color:var(--muted); font-size: 12px; white-space:nowrap; }
.move-buttons { display:flex; gap:5px; }
.move-buttons .icon-button { width:32px; height:32px; }
.icon-button:disabled { opacity:.35; cursor:not-allowed; }
.note-box { padding:13px; border-radius:11px; color:#475569; background:#f7f9fc; white-space:pre-line; }
.note-box p,.muted-copy { margin:6px 0 0; color:var(--muted); font-size: 13px; line-height:1.55; }
.section-row { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.section-row h3 { margin-bottom:0; }
.vehicle-card { overflow:hidden; }
.vehicle-photo,.vehicle-placeholder { width:100%; height:132px; display:grid; place-items:center; object-fit:cover; color:var(--blue); background:linear-gradient(145deg,#eaf1ff,#f7f9fc); }
.vehicle-body { padding:14px; }
.vehicle-body h2 { margin:12px 0 4px; font-size:16px; }
.vehicle-body > p { margin:0 0 13px; color:var(--muted); font-size: 12px; }
.vehicle-body .definition-grid { grid-template-columns:1fr 1fr; margin-bottom:13px; gap:11px; }
.vehicle-body .annual-cost { padding:8px 9px; border-radius:9px; background:var(--green-soft); }
.vehicle-body .annual-cost dt { color:#31715c; }
.vehicle-body .annual-cost dd { color:#0f7250; font-size: 15px; font-weight: 600; }
.definition-note { display:block; margin-top:3px; color:var(--muted); font-size: 11px; font-weight:500; }
.vehicle-cell { min-width:230px; display:flex; align-items:center; gap:10px; }
.vehicle-cell .vehicle-photo,.vehicle-cell .vehicle-placeholder { width:52px; height:42px; flex:0 0 auto; border-radius:8px; }
.print-frame { position:fixed; width:1px; height:1px; opacity:0; pointer-events:none; }
[data-dashboard-widget][hidden] { display:none!important; }
.page > .grid.equal-2 > button.card.padded { min-height:150px!important; }
/* Große Kachel "Störung melden" auf der Startseite der Melder. Mit .card davor, damit
   die Farben auch gegen die allgemeine Kartenregel weiter unten gelten. */
.card.melde-kachel { border:0; color:white; background:#123265; box-shadow:var(--shadow); text-align:left; }
.melde-kachel .metric-icon { color:white; background:rgba(255,255,255,.12); }
.melde-kachel h2 { margin:24px 0 8px; color:inherit; font-size:23px; }
.melde-kachel p { margin:0; color:#c7d6eb; font-size:13px; }
.analysis-metrics { margin-bottom:14px; }
.analysis-table { margin-bottom:18px; }
.cost-history { max-height:260px; overflow-y:auto; padding-right:5px; }
.entry-cost-section { margin-top:4px; padding-top:13px; border-top:1px solid var(--line); }

.empty-state { padding: 70px 24px; text-align: center; }
.empty-icon { width: 52px; height: 52px; margin: 0 auto 14px; border-radius: 15px; display: grid; place-items: center; color: var(--muted); background: #f1f4f8; }
.empty-state h3 { margin: 0 0 7px; font-size: 15px; }
.empty-state p { max-width: 430px; margin: 0 auto; color: var(--muted); font-size: 14px; line-height: 1.5; }
.delete-warning { padding:18px; border:1px solid #efb9b9; border-radius:13px; display:flex; align-items:flex-start; gap:13px; color:#9b2828; background:var(--red-soft); }
.delete-warning > .icon { width:24px; height:24px; }
.delete-warning p { margin:6px 0 0; color:#7d4747; font-size: 13px; line-height:1.55; }
.help-logic { margin-bottom:14px; padding:16px; border:1px solid #cbdcf7; border-radius:13px; background:#f6f9ff; }
.help-logic h3 { margin:4px 0 10px; color:var(--navy); font-size:15px; }
.help-logic > p,.help-linking p { margin:9px 0 0; color:#52647c; font-size: 13px; line-height:1.6; }
.logic-chain { display:flex; align-items:center; gap:8px; overflow-x:auto; padding:5px 0; }
.logic-chain span { padding:7px 10px; border:1px solid #cbdcf7; border-radius:9px; color:#244c86; background:white; font-size: 12px; font-weight: 600; white-space:nowrap; }
.logic-chain b { color:#7992b7; }
.help-linking { margin-top:13px; padding-top:12px; border-top:1px solid #d8e4f7; }
.help-linking strong { color:#234678; font-size: 13px; }
/* Schritte der Einrichtungsreihenfolge. Die Nummer steht als echte Positionsangabe davor:
   Diese Liste ist eine Abfolge, in der jeder Schritt den vorigen braucht. */
.help-steps { margin:0; padding:0; list-style:none; counter-reset:helpschritt; display:grid; gap:9px; }
.help-steps li { position:relative; padding:13px 15px 13px 46px; border:1px solid var(--line); border-radius:12px; background:#fafbfd; }
.help-steps li::before { counter-increment:helpschritt; content:counter(helpschritt); position:absolute; top:13px; left:14px; width:21px; height:21px; border-radius:7px; color:white; background:var(--blue); font-size: 12px; font-weight: 600; display:grid; place-items:center; }
.help-step-head { display:flex; flex-wrap:wrap; align-items:baseline; gap:9px; }
.help-step-head strong { color:var(--navy); font-size: 14px; }
.help-step-head span { color:var(--muted); font-size: 12px; font-weight: 600; }
.help-steps p { margin:6px 0 0; color:#52647c; font-size: 13px; line-height:1.6; }
.help-list { margin:8px 0 0; padding-left:16px; display:grid; gap:6px; }
.help-list li { color:#52647c; font-size: 13px; line-height:1.55; }
.help-list strong { color:var(--navy); }
.help-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.help-grid article { padding:14px; border:1px solid var(--line); border-radius:12px; background:#fafbfd; }
.help-grid h3 { margin:0; color:var(--navy); font-size: 14px; }
.help-grid p { margin:6px 0 0; color:var(--muted); font-size: 12px; line-height:1.55; }
.audit-timeline { max-height:60vh; overflow-y:auto; padding-right:10px; }

.modal-backdrop { position: fixed; inset: 0; z-index: 100; padding: 24px; display: grid; place-items: center; background: rgba(15,23,42,.46); backdrop-filter: blur(3px); animation: fade-in .16s ease; }
.modal { width: min(620px, 100%); max-height: calc(100vh - 48px); border-radius: 19px; overflow-y: auto; background: white; box-shadow: 0 24px 70px rgba(15,23,42,.25); animation: modal-in .2s ease; }
.modal.wide { width: min(880px, 100%); }
.modal-header { position: sticky; top: 0; z-index: 2; padding: 20px 22px 15px; border-bottom: 1px solid var(--line); display: flex; align-items: flex-start; gap: 14px; background: white; }
.modal-header h2 { margin: 0; color: var(--navy); font-size: 19px; letter-spacing: -.02em; }
.modal-header p { margin: 5px 0 0; color: var(--muted); font-size: 13px; }
.modal-close { margin-left: auto; }
.modal-body { padding: 21px 22px; }
.modal-footer { position: sticky; bottom: 0; padding: 14px 22px; border-top: 1px solid var(--line); display: flex; justify-content: flex-end; gap: 9px; background: white; }
.form-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 15px; }
.form-field.full { grid-column: 1 / -1; }
.form-field label { display: block; margin-bottom: 6px; color: #475569; font-size: 13px; font-weight: 600; }
.form-field label span { color: var(--muted-2); font-weight: 500; }
.field-hint { margin-top: 5px; color: var(--muted); font-size: 12px; }
.cost-module { padding:14px; border:1px solid var(--line); border-radius:12px; background:#fafbfd; }
.cost-list { display:grid; gap:8px; }
.cost-row { display:grid; grid-template-columns:minmax(120px,.55fr) minmax(180px,1.45fr) 32px; align-items:center; gap:8px; }
.measure-editor { min-height:160px; line-height:1.65; }
.measure-list label { width:100%; display:flex; align-items:flex-start; gap:11px; color:#334155; font-size: 14px; line-height:1.45; cursor:pointer; }
.measure-list input { margin-top:2px; width:17px; height:17px; accent-color:var(--green); }
.empty-state.compact { padding:28px 18px; margin-bottom:16px; border:1px dashed var(--line-strong); border-radius:13px; }
.external-service-card { margin-bottom:18px; padding:16px; border:1px solid #ddc4ec; border-radius:13px; display:flex; align-items:flex-start; gap:13px; color:#5e3b70; background:#fbf7fd; }
.external-service-card .mode-icon { width:38px; height:38px; flex:0 0 auto; border-radius:11px; display:grid; place-items:center; color:#7c3e9c; background:#f0e1f8; }
.external-service-card strong { font-size: 14px; }
.external-service-card p { margin:5px 0 0; color:#765986; font-size: 13px; line-height:1.5; }
.service-history { margin:0 0 18px; padding:12px 14px; border:1px solid var(--line); border-radius:12px; background:#fafbfd; }
.service-history summary { color:#475569; font-size: 13px; font-weight: 600; cursor:pointer; }
.service-history[open] summary { margin-bottom:8px; }
.service-history .list-row { padding:10px 0; }
.upload-zone { min-height: 108px; border: 1px dashed #b7c3d3; border-radius: 12px; display: grid; place-items: center; color: var(--muted); background: #fbfcfe; text-align: center; }
.upload-zone input { display: none; }
.upload-zone strong { display: block; margin-top: 6px; color: #42526a; font-size: 13px; }
.upload-zone span { display: block; margin-top: 2px; font-size: 11px; }
.preview-image { max-width: 100%; max-height: 180px; border-radius: 9px; object-fit: contain; }
/* Foto an einer Störungsmeldung und anklickbare Zeile in "Meine Meldungen". */
.ticket-photo-image { display: block; max-width: 100%; max-height: 380px; border-radius: 12px; border: 1px solid var(--line); object-fit: contain; }
.list-row-link { cursor: pointer; }
.list-row-link:hover .list-title { text-decoration: underline; }

.drawer-backdrop { position: fixed; inset: 0; z-index: 90; background: rgba(15,23,42,.3); animation: fade-in .16s ease; }
.drawer { position: fixed; inset: 0 0 0 auto; z-index: 91; width: min(580px, 100%); padding-bottom: 30px; overflow-y: auto; background: white; box-shadow: -18px 0 60px rgba(15,23,42,.16); animation: drawer-in .22s ease; }
.drawer-header { position: sticky; top: 0; z-index: 3; padding: 19px 22px; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 12px; background: rgba(255,255,255,.96); backdrop-filter: blur(10px); }
.drawer-body { padding: 22px; }
.drawer h2 { margin: 0; font-size: 21px; letter-spacing: -.025em; }
.detail-topline { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.detail-description { margin: 17px 0; color: #46566c; font-size: 15px; line-height: 1.6; }
.detail-section { padding: 18px 0; border-top: 1px solid var(--line); }
.detail-section h3 { margin: 0 0 12px; font-size: 14px; text-transform: uppercase; letter-spacing: .06em; }

.search-results { position: absolute; top: 48px; left: 0; right: 0; z-index: 60; max-height: 430px; border: 1px solid var(--line); border-radius: 14px; overflow-y: auto; background: white; box-shadow: var(--shadow); }
.search-result { width: 100%; padding: 12px 14px; border: 0; border-top: 1px solid var(--line); display: flex; align-items: center; gap: 11px; color: var(--ink); background: white; text-align: left; }
.search-result:first-child { border-top: 0; }
.search-result:hover { background: #f8faff; }
.search-kind { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; color: var(--blue); background: var(--blue-soft); }
.search-result strong { display: block; font-size: 14px; }
.search-result span { display: block; margin-top: 3px; color: var(--muted); font-size: 12px; }

.toast-region { position: fixed; right: 20px; bottom: 20px; z-index: 200; display: grid; gap: 9px; }
.toast { min-width: 280px; max-width: 400px; padding: 13px 15px; border: 1px solid #d8e4f6; border-radius: 12px; display: flex; align-items: center; gap: 10px; color: #234678; background: #f8fbff; box-shadow: var(--shadow); font-size: 14px; animation: toast-in .2s ease; }
.toast.success { border-color: #c8e9dd; color: #176547; background: #f5fcf9; }

.mobile-bottom-nav { display: none; }
.sidebar-scrim { display: none; }
.fab { display: none; }
.desktop-only { display: table-cell; }

.icon { width: 18px; height: 18px; flex: 0 0 auto; stroke-width: 1.85; }
.icon.sm { width: 15px; height: 15px; }
.icon.lg { width: 23px; height: 23px; }

@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes modal-in { from { opacity: 0; transform: translateY(10px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes drawer-in { from { transform: translateX(100%); } to { transform: none; } }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

@media (max-width: 1180px) {
  .grid.cols-4 { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .grid.cols-3 { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .quick-actions { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .definition-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

@media (max-width: 940px) {
  :root { --sidebar: 236px; }
  .grid.two-one, .asset-layout { grid-template-columns: 1fr; }
  .tree-card { max-height: 360px; overflow-y: auto; }
}

@media (max-width: 760px) {
  .sidebar { width: min(286px, 86vw); transform: translateX(-101%); }
  body.sidebar-open .sidebar { transform: translateX(0); }
  .sidebar-scrim { position: fixed; inset: 0; z-index: 39; display: block; visibility: hidden; opacity: 0; background: rgba(15,23,42,.4); transition: opacity .2s, visibility .2s; }
  body.sidebar-open .sidebar-scrim { visibility: visible; opacity: 1; }
  .main-shell { margin-left: 0; padding-bottom: 66px; }
  .topbar { height: 62px; padding: 0 15px; gap: 10px; }
  .icon-button.menu-button { display: grid; }
  .search-wrap { max-width: none; }
  .key-hint { display: none; }
  .avatar { display: none; }
  .page { padding: 24px 16px 78px; }
  .page-header { margin-bottom: 20px; display: block; }
  .page-header .header-actions { margin-top: 15px; }
  .grid.cols-4, .grid.cols-3, .grid.equal-2, .grid.two-one { grid-template-columns: 1fr; }
  .metric-card { min-height: 98px; }
  .quick-actions { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .desktop-only { display: none; }
  .asset-hero { display: block; }
  .asset-mark { margin-bottom: 13px; }
  .asset-actions { margin: 15px 0 0; }
  .definition-grid { grid-template-columns: 1fr 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .form-field.full { grid-column: auto; }
  .modal-backdrop { padding: 0; align-items: end; }
  .modal, .modal.wide { width: 100%; max-height: 94vh; border-radius: 20px 20px 0 0; }
  .mobile-bottom-nav { position: fixed; inset: auto 0 0; z-index: 35; height: 66px; padding: 7px 9px env(safe-area-inset-bottom); border-top: 1px solid var(--line); display: grid; grid-template-columns: repeat(4,1fr); background: rgba(255,255,255,.96); backdrop-filter: blur(14px); }
  .mobile-nav-item { border: 0; border-radius: 10px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; color: var(--muted); background: transparent; font-size: 11px; }
  .mobile-nav-item.active { color: var(--blue); background: var(--blue-soft); }
  .fab { position: fixed; right: 17px; bottom: 80px; z-index: 34; width: 52px; height: 52px; border: 0; border-radius: 17px; display: grid; place-items: center; color: white; background: var(--blue); box-shadow: 0 12px 28px rgba(37,99,235,.28); }
  .attention-strip { align-items: flex-start; }
  .attention-strip .button { display: none; }
  .camera-actions { grid-template-columns:1fr; }
  .action-grid { grid-template-columns:1fr; }
  .config-row { grid-template-columns:auto minmax(120px,1fr) auto; }
  .config-row .visibility-toggle { grid-column:2; }
  .table-tools > span { display:none; }
  .help-grid { grid-template-columns:1fr; }
  .cost-row { grid-template-columns:1fr 32px; }
  .cost-row [data-cost-comment] { grid-column:1; }
  .cost-row .delete-icon { grid-column:2; grid-row:1 / span 2; }
  .permission-role { grid-template-columns:1fr; }
  .permission-role strong { grid-column:auto; }
}

@media (max-width: 480px) {
  .top-actions .icon-button[data-action="open-qr"] { display: none; }
  .page-subtitle { font-size: 15px; }
  .grid.cols-4 { grid-template-columns: 1fr 1fr; gap: 11px; }
  .metric-card { min-height: 96px; padding: 12px; }
  .metric-number { font-size: 24px; }
  .definition-grid { grid-template-columns: 1fr; }
  .toolbar .select.compact { flex: 1; min-width: 130px; }
  .quick-action { min-height: 82px; }
  td, th { padding-left: 12px; padding-right: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* --- Störeinsätze --------------------------------------------------------- */

.grid.cols-5 { grid-template-columns: repeat(5, minmax(0,1fr)); }

.month-bar {
  display: flex; align-items: center; gap: 10px;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 10px 14px; margin-bottom: 16px; box-shadow: var(--shadow);
}
.month-bar-title { display: flex; flex-direction: column; line-height: 1.3; min-width: 190px; }
.month-bar-title strong { font-size: 16px; }
.month-bar-title span { font-size: 12.5px; color: var(--muted); }
.month-bar .input[type="month"] { margin-left: auto; max-width: 190px; }

/* Kalenderblatt: Zeilen sind Kalenderwochen, Spalten Montag bis Sonntag. Die Farbstufe
   richtet sich nach der aufgewendeten Zeit, nicht nach der Anzahl der Einsätze. */
.calendar-table { table-layout: fixed; width: 100%; min-width: 640px; }
.calendar-table th { font-size: 14px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.calendar-week { width: 46px; color: var(--muted-2); font-variant-numeric: tabular-nums; }
.calendar-cell { padding: 3px; vertical-align: top; }
.calendar-day {
  width: 100%; min-height: 68px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--panel); display: flex; flex-direction: column; gap: 2px; align-items: flex-start;
  padding: 7px 9px; text-align: left; cursor: pointer; font: inherit; color: inherit;
  transition: transform .12s ease, box-shadow .12s ease;
}
.calendar-day.empty { cursor: default; background: transparent; border-style: dashed; }
button.calendar-day:hover { transform: translateY(-1px); box-shadow: var(--shadow); }
.calendar-date { font-size: 14px; color: var(--muted); font-variant-numeric: tabular-nums; }
.calendar-count { font-size: 15px; font-weight: 600; }
.calendar-hours { font-size: 14px; color: var(--muted); }
.calendar-cell.ausserhalb .calendar-day { opacity: .45; }
.calendar-cell.heute .calendar-day { outline: 2px solid var(--blue); outline-offset: -1px; }
.calendar-cell.stufe-1 .calendar-day { background: #fff8ee; border-color: #f6e2c6; }
.calendar-cell.stufe-2 .calendar-day { background: #ffeeda; border-color: #f0d0a4; }
.calendar-cell.stufe-3 .calendar-day { background: #ffdfc0; border-color: #e8b57c; }
.calendar-cell.stufe-4 .calendar-day { background: #ffcaa4; border-color: #dc9a55; }
.calendar-legend { display: flex; align-items: center; gap: 6px; margin-top: 12px; font-size: 14px; color: var(--muted); }
.legend-box { width: 18px; height: 12px; border-radius: 3px; border: 1px solid var(--line); background: var(--panel); }
.legend-box.stufe-1 { background: #fff8ee; }
.legend-box.stufe-2 { background: #ffeeda; }
.legend-box.stufe-3 { background: #ffdfc0; }
.legend-box.stufe-4 { background: #ffcaa4; }

.capacity-line { margin: 0; font-size: 15px; color: var(--ink); }
.capacity-line .status { margin-left: 6px; }

.weekday-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.weekday-list li { display: grid; grid-template-columns: 92px 1fr auto; align-items: center; gap: 12px; }
.weekday-name { font-size: 15px; color: var(--muted); }
.weekday-bar { background: var(--canvas); border-radius: 6px; height: 12px; overflow: hidden; }
.weekday-bar span { display: block; height: 100%; background: var(--orange); border-radius: 6px; min-width: 0; }
.weekday-value { font-size: 12.5px; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* Tagesabschluss: alle offenen Einsätze untereinander, in einem Durchgang nachzutragen. */
.daybook { display: grid; gap: 12px; }
.daybook-row {
  display: grid; grid-template-columns: minmax(190px, 1fr) minmax(0, 1.4fr); gap: 12px; align-items: center;
  border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; background: var(--panel);
}
.daybook-main { min-width: 0; }
.daybook-fields { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.daybook-field { display: flex; flex-direction: column; gap: 4px; }
.daybook-field span { font-size: 11.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.daybook-field .input { width: 96px; }
/* Die Auswahlliste darf mitwachsen, aber nicht die Beschreibung daneben zerquetschen. */
.daybook-field.wide { flex: 1 1 190px; min-width: 0; }
.daybook-field.wide .select { width: 100%; min-width: 0; }
.daybook-check { display: flex; align-items: center; gap: 6px; font-size: 15px; color: var(--muted); white-space: nowrap; }

.quick-minutes { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 7px; }
.quick-minutes .chip {
  border: 1px solid var(--line-strong); background: var(--panel); border-radius: 999px;
  padding: 4px 11px; font-size: 12.5px; cursor: pointer; color: var(--muted);
}
.quick-minutes .chip:hover { border-color: var(--blue); color: var(--blue); }

.checkbox-line { display: flex; align-items: center; gap: 8px; }

@media (max-width: 1100px) {
  .grid.cols-5 { grid-template-columns: repeat(3, minmax(0,1fr)); }
}
@media (max-width: 900px) {
  .grid.cols-5 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .daybook-row { grid-template-columns: 1fr; }
  .daybook-fields { justify-content: flex-start; }
  .month-bar { flex-wrap: wrap; }
  .month-bar .input[type="month"] { margin-left: 0; width: 100%; max-width: none; }
}
@media (max-width: 480px) {
  .grid.cols-5 { grid-template-columns: 1fr 1fr; gap: 11px; }
  .weekday-list li { grid-template-columns: 62px 1fr auto; }
  .daybook-field .input { width: 84px; }
  .daybook-field.wide { flex-basis: 150px; }
}

/* --- Bedienung am Telefon -------------------------------------------------- */
/*
   Geprüft wurde jede Seite bei 375 Pixel Breite. Gefunden wurden zwei Arten von
   seitlichem Schieben, und beide sind hier behoben:

   1. Tabellen, die drei- bis viermal breiter waren als der Bildschirm (Mängel 1160 px,
      Wartungen 1006 px, Freigaben 1395 px). Sie werden jetzt zu Karten – eine Karte je
      Zeile, jeder Wert mit Beschriftung. Aufbereitet in tabellenFuerHandyVorbereiten().
   2. Die Seite selbst, die sich verschob, weil einzelne Rasterspalten breiter wurden als
      ihr Inhalt zuließ (Anlagenstruktur: 751 statt 375 Pixel).
*/
@media (max-width: 760px) {
  /* Eine Rasterspalte wird nie schmaler als der breiteste unteilbare Inhalt darin – eine
     nicht umbrechende Knopfreihe zieht damit die ganze Seite auf. "min-width: 0" auf den
     Kacheln hebt diese Mindestbreite auf; der Inhalt bricht dann um, statt die Seite
     seitlich zu verschieben. Bewusst hier und nicht über die Spaltenzahl gelöst: Sonst
     stünden auch die Kennzahl-Kacheln einzeln untereinander statt zu zweit. */
  .grid > *, .asset-layout > *, .project-board > *,
  .card, .card-header, .card-body { min-width: 0; }
  /* Die Knopfreihe an der Anlage war der Hauptverursacher: vier Knöpfe nebeneinander,
     ohne Umbruch, in Summe 689 Pixel. */
  .asset-actions, .drawer-header, .modal-footer { flex-wrap: wrap; }
  /* Das Projektbrett stapelt seine vier Statusspalten untereinander, statt seitlich zu
     laufen. Vier Spalten à mindestens 240 Pixel passen auf kein Telefon. */
  .project-board { grid-template-columns: minmax(0, 1fr); overflow-x: visible; }
  .board-column { min-height: 0; }
  /* Größere Tippflächen: Mit Arbeitshandschuhen trifft niemand einen 32 Pixel hohen
     Knopf zuverlässig. Nur Mindestmaße – wer schon größer ist, bleibt es. */
  .button.small { min-height: 40px; }
  .icon-button { min-width: 40px; min-height: 40px; }
  .nav-item { min-height: 44px; }
  /* Reiterleisten brechen um, statt zu scrollen. Die Reiter an der Anlage waren 733 Pixel
     breit – wer den letzten sehen wollte, musste blind nach rechts wischen. */
  .settings-tabs, .logic-chain, .tabs { flex-wrap: wrap; overflow-x: visible; }
  .tabs { gap: 2px; }

  /* Tabelle als Karten: steht weiter unten ohne Größenabfrage (table.als-karten) – die
     Karten gibt es an jedem Bildschirm, an dem die Tabelle nicht in ihren Rahmen passt.
     Am Telefon bleiben nur die Nebenspalten weg. */
  table.als-karten > tbody > tr > td.desktop-only { display: none; }

  /* Kalenderblatt: ohne Mindestbreite, ohne Stundenzeile – sieben Spalten müssen auf
     375 Pixel passen, sonst ist es kein Kalender mehr, sondern ein Schiebepuzzle. */
  .calendar-table { min-width: 0; table-layout: fixed; }
  .calendar-week { width: 30px; font-size: 12px; }
  .calendar-cell { padding: 2px; }
  .calendar-day { min-height: 52px; padding: 5px 4px; align-items: center; gap: 1px; }
  .calendar-hours { display: none; }
  .calendar-count { font-size: 15px; }
  th { padding-left: 8px; padding-right: 8px; }
}

/* --- Tabelle als Karten ---------------------------------------------------------
   Passt eine Tabelle nicht in ihren Rahmen, wird sie zu einer Liste von Karten: eine Karte
   je Zeile, jeder Wert mit seiner Beschriftung. Ursprünglich nur fürs Telefon gebaut – aber
   auch am Laptop mit 1280 Pixeln lagen bei fast jeder Liste die rechten Spalten (Status,
   Aktionen) außerhalb, und seitwärts scrollen kann man mit einer gewöhnlichen Maus nicht.
   Umgeschaltet wird in tabellenEinpassen() (app.js): erst enger (table.eng), dann Karten. */
.table-card.zeigt-karten .table-scroll { overflow-x: visible; }
table.als-karten { display: block; }
table.als-karten > thead { display: none; }
table.als-karten > tbody { display: block; }
/* Als Spalte gesetzt, damit die Überschrift der Karte nach oben und die Knopfreihe
   nach unten kann – in der Tabelle steht die Bezeichnung oft in der Mitte der Zeile. */
table.als-karten > tbody > tr {
  display: flex; flex-direction: column; padding: 14px 16px; border-bottom: 1px solid var(--line);
}
table.als-karten > tbody > tr:last-child { border-bottom: 0; }
table.als-karten > tbody > tr > td {
  display: grid; grid-template-columns: 118px minmax(0, 1fr); gap: 10px;
  align-items: baseline; padding: 4px 0; border: 0; font-size: 12.5px; white-space: normal;
}
table.als-karten > tbody > tr > td::before {
  content: attr(data-label); color: var(--muted); font-size: 9.5px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .03em; line-height: 1.7;
  /* Ohne min-width schob sich eine lange Beschriftung wie "Beeinträchtigung" über
     ihren eigenen Wert. break-word trennt nur, wenn ein Wort allein nicht passt –
     "anywhere" zerlegte auch "Projektleitung" in "Projektleitun" und "g". */
  min-width: 0; overflow-wrap: break-word;
}
/* Jedes Element in einer Zelle ist ein eigenes Rasterfeld. Ohne feste Spalte rutschte
   die zweite Zeile einer Zelle (etwa "Erfasst 20.08.2026") unter die Beschriftung.
   justify-self verhindert außerdem, dass ein Status-Schild die volle Breite einnimmt. */
table.als-karten > tbody > tr > td > * { grid-column: 2; justify-self: start; }
/* Leere Zellen erzeugen sonst eine Zeile, die nur aus einer Beschriftung besteht. */
table.als-karten > tbody > tr > td:empty { display: none; }
table.als-karten > tbody > tr > td.karten-titel {
  order: -1; display: block; padding: 0 0 9px; color: var(--ink);
  font-size: 15px; font-weight: 600; line-height: 1.35;
}
table.als-karten > tbody > tr > td.karten-titel::before { content: none; }
table.als-karten > tbody > tr > td.karten-titel .cell-title { font-size: 15px; font-weight: 600; }
table.als-karten > tbody > tr > td.actions-cell,
table.als-karten > tbody > tr > td.karten-aktionen {
  order: 1; display: block; width: auto; margin-top: 10px; padding-top: 11px;
  border-top: 1px solid var(--line); white-space: normal; text-align: left;
}
table.als-karten > tbody > tr > td.actions-cell::before,
table.als-karten > tbody > tr > td.karten-aktionen::before { content: none; }
/* Knöpfe links: In Daumenreichweite und in einer Flucht mit allem darüber. */
table.als-karten > tbody > tr > td.karten-aktionen .inline-actions { justify-content: flex-start; }
/* Ausgeblendete Spalten bleiben ausgeblendet – sonst überschreibt display:grid oben
   sowohl das hidden-Attribut als auch die Nur-Desktop-Spalten. */
table.als-karten > tbody > tr > td[hidden] { display: none; }
/* Eine Karte wird nie breiter als ihr Platz: Ohne "min-width: 0" richtet sich ein
   Rasterfeld nach seinem breitesten Inhalt (ein Bild, ein langes Wort ohne Trennstelle). */
table.als-karten > tbody > tr, table.als-karten > tbody > tr > td, table.als-karten > tbody > tr > td > * { min-width: 0; max-width: 100%; }
table.als-karten > tbody > tr > td { overflow-wrap: break-word; }
/* Eine Summenzeile unter der Tabelle wird zur Schlusszeile unter den Karten. Als
   Tabellenfuß blieb sie so breit wie ihre längste Zelle und ragte aus dem Rahmen. */
table.als-karten > tfoot { display: block; }
table.als-karten > tfoot > tr { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; padding: 12px 16px; border-top: 1px solid var(--line); }
table.als-karten > tfoot > tr > * { display: block; padding: 0; border: 0; background: transparent; white-space: normal; }
/* Die Filterzeile sitzt in der ausgeblendeten Kopfzeile; der Knopf wäre wirkungslos. */
.zeigt-karten .table-tools [data-toggle-table-filters] { display: none; }

/* Was am Telefon schon galt, gilt an jedem Bildschirm: umbrechen statt seitwärts laufen.
   Mit einer gewöhnlichen Maus lässt sich nicht seitwärts scrollen – an der Anlage lagen
   bei 1280 Pixeln die Reiter "Wartungen", "Prüfungen", "Dokumente" und ein Teil der
   Knopfreihe außerhalb des Bildes. */
.grid > *, .asset-layout > *, .project-board > *, .card, .card-header, .card-body { min-width: 0; }
.asset-actions, .drawer-header, .modal-footer { flex-wrap: wrap; }
.settings-tabs, .logic-chain, .tabs { flex-wrap: wrap; overflow-x: visible; }
/* Zwischen Telefon und Laptop (schmales Fenster, Tablet): Neben der Seitenleiste bleiben
   nur gut 500 Pixel. Zwei Kacheln nebeneinander sind dort je 200 Pixel schmal – also
   untereinander. */
@media (max-width: 1000px) {
  .grid.equal-2 { grid-template-columns: minmax(0, 1fr); }
}
@media (min-width: 761px) {
  /* Projektbrett: so viele Statusspalten nebeneinander, wie hinpassen. */
  .project-board { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); overflow-x: visible; }
}

/* Kalenderblatt in schmalem Rahmen: dieselbe gedrängte Form wie am Telefon – sieben
   Spalten müssen hineinpassen, ohne dass man seitwärts schieben muss. */
.calendar-table.eng { min-width: 0; }
.calendar-table.eng .calendar-week { width: 30px; font-size: 12px; }
.calendar-table.eng .calendar-cell { padding: 2px; }
.calendar-table.eng .calendar-day { min-height: 52px; padding: 5px 4px; align-items: center; gap: 1px; }
.calendar-table.eng .calendar-hours { display: none; }
.calendar-table.eng th { padding-left: 4px; padding-right: 4px; }

/* Erste Stufe vor den Karten: dieselbe Tabelle mit schmaleren Zellenrändern. Das reicht
   oft, um die letzte Spalte wieder ins Bild zu holen. */
table.eng th, table.eng td { padding-left: 10px; padding-right: 10px; }
/* Zweite Stufe: Nebenspalten (etwa "Verantwortlich", "Gemeldet") bleiben weg – sie stehen
   in der geöffneten Ansicht. Erst wenn auch das nicht reicht, kommen die Karten. */
table.knapp .desktop-only { display: none; }
/* Solange es eine Tabelle ist: Die Bezeichnung bricht nicht nach jedem Wort um, und zwei
   kleine Knöpfe stehen nebeneinander statt übereinander – das halbiert die Zeilenhöhe. */
table[data-mobile-cards=""]:not(.als-karten) > tbody > tr > td.karten-titel { min-width: 190px; }
table:not(.als-karten) > tbody > tr > td .inline-actions:has(> :nth-child(2)) { min-width: 88px; }
/* Am großen Bildschirm stehen die Karten nebeneinander, statt eine Spalte mit viel leerem
   Raum rechts zu bilden. */
@media (min-width: 761px) {
  table.als-karten > tbody { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(330px, 100%), 1fr)); gap: 12px; padding: 14px; }
  table.als-karten > tbody > tr, table.als-karten > tbody > tr:last-child { border: 1px solid var(--line); border-radius: 16px; }
  /* Reiterleiste: umbrechen statt seitwärts scrollen – mit der Maus kam man an die
     hinteren Reiter sonst nicht heran. Am Telefon bleibt das Wischen. */
  .subnav { flex-wrap: wrap; overflow-x: visible; }
}

@media (max-width: 480px) {
  table.als-karten > tbody > tr { padding: 13px 14px; }
  table.als-karten > tbody > tr > td { grid-template-columns: 108px minmax(0, 1fr); gap: 8px; }
}

/* --- Menü in Bereichen ---------------------------------------------------------
   Acht Bereiche in der Seitenleiste, die Seiten eines Bereichs als Reiter darüber. */
.nav-item { font-size: 15px; padding: 12px 12px; }
.nav-item .count.warn { color: #ffd7d7; background: rgba(199,53,53,.55); font-weight: 600; }
.subnav { position: sticky; top: 70px; z-index: 19; padding: 10px 34px 0; display: flex; gap: 4px; overflow-x: auto; background: var(--canvas); border-bottom: 1px solid var(--line); }
.subnav button { min-height: 42px; padding: 0 16px; border: 0; border-bottom: 3px solid transparent; display: inline-flex; align-items: center; gap: 8px; color: var(--muted); background: transparent; font-size: 15px; font-weight: 600; white-space: nowrap; }
.subnav button:hover { color: var(--ink); }
.subnav button.active { color: var(--blue); border-bottom-color: var(--blue); }
.subnav .count { min-width: 20px; padding: 2px 6px; border-radius: 9px; color: #475569; background: #e9eef5; font-size: 12px; text-align: center; }
.subnav button.active .count { color: var(--blue); background: var(--blue-soft); }

/* --- Startseite ----------------------------------------------------------------
   Drei große Knöpfe: mit Handschuhen und am Telefon gut zu treffen. */
.start-knoepfe { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 14px; }
.start-knopf { min-height: 132px; padding: 20px; border: 1px solid var(--line-strong); border-radius: var(--radius); display: flex; flex-direction: column; align-items: flex-start; gap: 6px; color: var(--ink); background: white; text-align: left; transition: border-color .16s, box-shadow .16s; }
.start-knopf:first-child { border-color: #123265; color: white; background: #123265; }
.start-knopf:hover { border-color: var(--blue); box-shadow: 0 8px 24px rgba(37,99,235,.10); }
.start-knopf .icon { margin-bottom: 10px; width: 28px; height: 28px; color: var(--blue); }
.start-knopf:first-child .icon { color: #9ec1ff; }
.start-knopf strong { font-size: 17px; letter-spacing: -.01em; }
.start-knopf span { color: var(--muted); font-size: 14px; line-height: 1.4; }
.start-knopf:first-child span { color: #c7d6eb; }
.wartet-zeile { width: 100%; padding: 0; border: 0; display: flex; align-items: center; gap: 13px; color: var(--ink); background: transparent; text-align: left; font-size: 15px; }
.wartet-zeile:hover .wartet-text { color: var(--blue); }
.wartet-zahl { flex: 0 0 auto; min-width: 36px; height: 36px; padding: 0 8px; border-radius: 10px; display: grid; place-items: center; color: #9a520e; background: var(--orange-soft); font-size: 15px; font-weight: 600; }
.wartet-text { flex: 1; min-width: 0; font-weight: 620; line-height: 1.35; }
.wartet-text small { color: var(--muted); font-weight: 500; }
.wartet-zeile > .icon { color: var(--muted-2); }
.termin-liste .list-row { flex-wrap: wrap; }
.termin-liste .list-main { min-width: 160px; }
.termin-liste .list-title { white-space: normal; }

/* --- Arbeitsschutz ------------------------------------------------------------- */
.safety-kacheln { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 14px; }
.safety-kachel { min-height: 138px; padding: 18px; border: 1px solid var(--line); border-radius: var(--radius); display: flex; flex-direction: column; align-items: flex-start; gap: 5px; color: var(--ink); background: white; text-align: left; transition: border-color .16s, box-shadow .16s; }
.safety-kachel:hover { border-color: #c4d4f3; box-shadow: 0 7px 20px rgba(37,99,235,.06); }
.safety-kachel strong { margin-top: 10px; font-size: 15px; }
.safety-kachel-zahl { color: var(--muted); font-size: 14px; }
.safety-kachel .status { margin-top: auto; }
.source-badge.abgelaufen { color: #aa2e2e; background: var(--red-soft); }
.abschnitt { margin: 24px 0 8px; color: var(--navy); font-size: 15px; }
.inline-upload { margin-top: 10px; display: flex; gap: 8px; align-items: center; }
.inline-upload .input { flex: 1; min-width: 0; padding: 7px 9px; font-size: 14px; }
.verlauf-loeschen { margin-left: 10px; color: var(--muted); font-size: 13px; font-weight: 500; }
.upload-zone.klein { min-height: 74px; padding: 10px; }
.textarea.hoch { min-height: 190px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 14px; }
.feld-paar { display: grid; grid-template-columns: 110px minmax(0,1fr); gap: 8px; }
.feld-drei { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; }
.feld-drei label { margin: 0; font-weight: 500; }
.feld-drei .input { margin-top: 5px; }
.form-field label.haken { margin: 0 0 9px; display: flex; align-items: center; gap: 9px; color: var(--ink); font-size: 15px; font-weight: 500; cursor: pointer; }
.haken input { width: 18px; height: 18px; }
.teilnehmer-liste { max-height: 260px; overflow-y: auto; border: 1px solid var(--line); border-radius: 12px; }
.form-field label.teilnehmer { margin: 0; padding: 10px 12px; border-top: 1px solid var(--line); display: flex; align-items: center; gap: 11px; color: var(--ink); font-size: 15px; font-weight: 500; cursor: pointer; }
.form-field label.teilnehmer:first-child { border-top: 0; }
.teilnehmer input { width: 19px; height: 19px; flex: 0 0 auto; }
.form-field label.teilnehmer span { flex: 1; color: var(--ink); }
.teilnehmer small { color: var(--muted); font-size: 13px; }
.teilnehmer.offen small { color: #9a520e; font-weight: 600; }

/* "Weitere Angaben": Das Formular zeigt zuerst nur, was fast immer gebraucht wird. */
.mehr-angaben { padding: 2px 0 0; border-top: 1px solid var(--line); }
.mehr-angaben > summary { padding: 12px 0 4px; color: var(--blue); font-size: 14px; font-weight: 600; cursor: pointer; list-style: none; }
.mehr-angaben > summary::-webkit-details-marker { display: none; }
.mehr-angaben > summary::before { content: "+ "; }
.mehr-angaben[open] > summary::before { content: "– "; }
.mehr-angaben > .form-grid { margin-top: 12px; }

@media (max-width: 760px) {
  .subnav { top: 62px; padding: 6px 12px 0; }
  .subnav button { min-height: 40px; padding: 0 12px; }
  .start-knoepfe { grid-template-columns: 1fr; gap: 10px; }
  .start-knopf { min-height: 0; padding: 16px 18px; flex-direction: row; flex-wrap: wrap; align-items: center; column-gap: 14px; row-gap: 2px; }
  .start-knopf .icon { margin: 0; grid-row: span 2; }
  .start-knopf strong { flex: 1; min-width: 60%; }
  .start-knopf span { flex-basis: 100%; padding-left: 42px; }
  .safety-kacheln { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }
  .safety-kachel { min-height: 124px; padding: 14px; }
  .mobile-bottom-nav { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0,1fr); }
  .feld-drei { grid-template-columns: 1fr; }
  .inline-upload { flex-direction: column; align-items: stretch; }
  .termin-liste .list-row { row-gap: 8px; }
  .termin-liste .list-main { flex-basis: calc(100% - 49px); }
  .termin-liste .list-tail { flex: 1; margin-left: 49px; text-align: left; }
  .wartet-zeile { min-height: 44px; }
}


/* =============================================================================
   Gestaltung 2 – ruhig, hell, großzügig.
   Diese Ebene steht bewusst am Ende und überschreibt die Grundgestaltung darüber:
   Farben, Schrift, Abstände und Rundungen kommen von hier. Wer das Aussehen ändern
   will, ändert zuerst die Werte in :root.
   ============================================================================= */
:root {
  --ink: #1d1d1f;
  --muted: #6e6e73;
  --muted-2: #8e8e93;
  --line: #e5e5ea;
  --line-strong: #d2d2d7;
  --panel: #ffffff;
  --canvas: #f5f5f7;
  --navy: #1d1d1f;
  --blue: #0071e3;
  --blue-soft: #e8f2fe;
  --green: #1f8a3b;
  --green-soft: #e6f6ea;
  --orange: #b25000;
  --orange-soft: #fff3e0;
  --red: #d70015;
  --red-soft: #ffecee;
  --shadow: 0 10px 40px rgba(0,0,0,.08);
  --ring: 0 0 0 1px rgba(0,0,0,.05), 0 1px 3px rgba(0,0,0,.04);
  --radius: 18px;
  --sidebar: 264px;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", "Segoe UI", Inter, Roboto, Arial, sans-serif;
}
body { font-size: 15px; line-height: 1.45; letter-spacing: -.005em; }
body.grosse-schrift { zoom: 1.14; }
h1, h2, h3 { letter-spacing: -.02em; }
::selection { background: rgba(0,113,227,.18); }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible { outline: 3px solid rgba(0,113,227,.32); outline-offset: 2px; }
th, .eyebrow, .definition dt, .brand-copy span, .nav-label, .role-box label { text-transform: none; letter-spacing: 0; }

/* Seitenleiste: hell und durchscheinend statt dunkel */
.sidebar { padding: 20px 14px 16px; border-right: 1px solid var(--line); color: var(--ink); background: rgba(250,250,252,.86); backdrop-filter: saturate(180%) blur(22px); -webkit-backdrop-filter: saturate(180%) blur(22px); }
.brand { padding: 2px 8px 20px; }
.brand-mark { width: 36px; height: 36px; border-radius: 10px; background: linear-gradient(180deg,#2b8cff,#0068d6); box-shadow: 0 4px 12px rgba(0,113,227,.28); }
.brand-copy strong { color: var(--ink); font-size: 17px; font-weight: 600; }
.brand-copy span { color: var(--muted); font-size: 13px; }
.role-box { margin: 0 0 16px; padding: 12px; border: 0; border-radius: 14px; background: white; box-shadow: var(--ring); }
.user-line { color: var(--ink); }
.user-line strong { font-size: 15px; font-weight: 600; }
.user-actions .button { min-height: 32px; font-size: 13px; }
.nav-list { gap: 2px; }
.nav-item { padding: 10px 12px; border-radius: 10px; gap: 12px; color: var(--ink); font-size: 15px; font-weight: 500; }
.nav-item .icon { color: var(--muted); }
.nav-item:hover { color: var(--ink); background: rgba(0,0,0,.045); }
.nav-item.active { color: var(--ink); background: rgba(0,0,0,.07); font-weight: 600; }
.nav-item.active .icon { color: var(--blue); }
.nav-item .count, .nav-item .count.warn { min-width: 22px; padding: 2px 7px; border-radius: 11px; color: white; background: #ff3b30; font-size: 12px; font-weight: 600; }
.sidebar-footer { color: var(--muted); }
.audit-button { min-height: 40px; border: 0; border-radius: 10px; color: var(--muted); background: transparent; font-size: 13px; }
.audit-button:hover { color: var(--ink); background: rgba(0,0,0,.045); }
.audit-button span:last-child { background: rgba(0,0,0,.06); font-size: 12px; }

/* Kopfleiste und Suche */
.topbar { height: 64px; padding: 0 28px; border-bottom: 1px solid var(--line); background: rgba(255,255,255,.78); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); }
.search-wrap { max-width: 560px; }
.search-input { height: 40px; border: 0; border-radius: 11px; background: rgba(118,118,128,.12); font-size: 15px; }
.search-input::placeholder { color: var(--muted-2); }
.search-input:focus { background: white; box-shadow: 0 0 0 4px rgba(0,113,227,.18); }
.key-hint { border: 0; color: var(--muted-2); background: transparent; }
.search-results { border: 0; border-radius: 16px; box-shadow: var(--shadow), var(--ring); }
.icon-button { border: 0; border-radius: 10px; background: rgba(118,118,128,.1); }
.icon-button:hover { background: rgba(118,118,128,.18); }
.help-button { font-size: 17px; font-weight: 600; }
.avatar { border-radius: 50%; color: white; background: linear-gradient(180deg,#8e8e93,#636366); font-size: 13px; }
.subnav { top: 64px; padding: 8px 28px 0; background: rgba(245,245,247,.86); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
.subnav button { min-height: 40px; padding: 0 14px; font-size: 15px; font-weight: 500; }
.subnav button.active { color: var(--ink); font-weight: 600; border-bottom-color: var(--blue); }
.subnav .count { font-size: 12px; background: rgba(118,118,128,.14); color: var(--muted); }

/* Seite */
.page { padding: 32px 32px 80px; }
.page-header { margin-bottom: 24px; }
.eyebrow { margin-bottom: 4px; color: var(--muted); font-size: 14px; font-weight: 500; }
.page-header h1 { margin: 0; font-size: 34px; font-weight: 700; letter-spacing: -.028em; line-height: 1.1; }
.page-subtitle { margin-top: 8px; max-width: 720px; color: var(--muted); font-size: 16px; line-height: 1.45; }

/* Knöpfe */
.button { min-height: 40px; padding: 0 16px; border: 0; border-radius: 11px; background: var(--blue); box-shadow: none; font-size: 15px; font-weight: 500; transition: background .15s, transform .08s; }
.button:hover { background: #0077ed; }
.button:active { transform: scale(.985); }
.button.secondary { border: 0; color: var(--ink); background: rgba(118,118,128,.12); }
.button.secondary:hover { background: rgba(118,118,128,.2); }
.button.danger { color: var(--red); background: var(--red-soft); }
.button.success { color: var(--green); background: var(--green-soft); }
.button.small { min-height: 34px; padding: 0 12px; border-radius: 9px; font-size: 14px; }
.link-button { font-weight: 500; }
.delete-icon { border: 0; }

/* Flächen */
.card { border: 0; background: var(--panel); box-shadow: var(--ring); }
.card-header { padding: 20px 22px 12px; }
.card-header h2, .section-title { font-size: 19px; font-weight: 600; }
.card-header p { font-size: 14px; }
.card-body { padding: 0 22px 20px; }
.card-footer { padding: 14px 22px; }
.card.padded { padding: 20px; }
.metric-card { min-height: 116px; padding: 18px; }
.metric-icon { width: 36px; height: 36px; border-radius: 10px; }
.metric-number { font-size: 30px; font-weight: 700; letter-spacing: -.03em; }
.metric-label { font-size: 14px; }
.grid { gap: 16px; }

/* Listen und Tabellen */
.list-row { padding: 13px 0; }
.list-title { font-size: 15px; font-weight: 500; }
.list-meta { font-size: 13px; }
.list-icon { border-radius: 9px; background: rgba(118,118,128,.1); }
th { padding: 12px 18px; color: var(--muted); background: transparent; font-size: 13px; font-weight: 500; }
td { padding: 14px 18px; color: var(--ink); font-size: 15px; }
tbody tr.clickable:hover { background: rgba(0,0,0,.022); }
.cell-title { font-weight: 500; }
.cell-sub { font-size: 13px; }
.status { padding: 4px 10px; font-size: 13px; font-weight: 500; }
.status::before { width: 7px; height: 7px; opacity: 1; }
.status.red { color: #c2001a; background: var(--red-soft); }
.status.orange { color: #9a4a00; background: var(--orange-soft); }
.status.green { color: #1a7a33; background: var(--green-soft); }
.status.blue { color: #0058b8; background: var(--blue-soft); }
.status.neutral { color: var(--muted); background: rgba(118,118,128,.12); }
.priority, .source-badge { border-radius: 7px; font-size: 13px; font-weight: 500; }
.attention-strip { padding: 14px 18px; border: 0; border-radius: 14px; color: #7a3c00; background: var(--orange-soft); font-size: 15px; }
.attention-strip strong { color: #5e2e00; }
.source-strip { padding: 14px 18px; border: 0; border-radius: 14px; color: #004f9e; background: var(--blue-soft); font-size: 15px; }
.source-strip strong { color: #003d7a; }
.empty-state h3 { font-size: 19px; font-weight: 600; }
.empty-state p { font-size: 15px; }

/* Umschalter mit Feldern: wie ein Segment-Schalter */
.view-toggle, .settings-tabs { padding: 3px; border: 0; border-radius: 11px; gap: 2px; background: rgba(118,118,128,.12); }
.settings-tabs { margin-bottom: 20px; display: inline-flex; max-width: 100%; flex-wrap: wrap; }
.view-toggle button, .settings-tabs button { min-height: 34px; padding: 0 14px; border-radius: 9px; color: var(--ink); font-size: 14px; font-weight: 500; }
.view-toggle button.active, .settings-tabs button.active { color: var(--ink); background: white; box-shadow: 0 1px 3px rgba(0,0,0,.12), 0 0 0 .5px rgba(0,0,0,.04); font-weight: 600; }

/* Eingaben */
.input, .select, .textarea { border: 1px solid var(--line-strong); border-radius: 11px; font-size: 15px; }
.input, .select { height: 44px; padding: 0 13px; }
.textarea { padding: 12px 13px; }
.input:focus, .select:focus, .textarea:focus { border-color: var(--blue); box-shadow: 0 0 0 4px rgba(0,113,227,.16); }
.form-grid { gap: 18px; }
.form-field label { margin-bottom: 7px; color: var(--ink); font-size: 14px; font-weight: 500; }
.form-field label span { color: var(--muted); font-weight: 400; }
.field-hint { margin-top: 6px; font-size: 13px; line-height: 1.4; }
.upload-zone { border: 1.5px dashed var(--line-strong); border-radius: 14px; background: rgba(118,118,128,.05); }
.upload-zone strong { font-size: 15px; }
.upload-zone span { font-size: 13px; }

/* Fenster */
.modal-backdrop { background: rgba(0,0,0,.32); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.modal { border-radius: 22px; box-shadow: 0 30px 90px rgba(0,0,0,.28); }
.modal-header { padding: 24px 26px 16px; border-bottom: 0; }
.modal-header h2 { font-size: 24px; font-weight: 700; letter-spacing: -.024em; }
.modal-header p { margin-top: 6px; font-size: 15px; }
.modal-body { padding: 8px 26px 24px; }
.modal-footer { padding: 16px 26px; border-top: 1px solid var(--line); background: rgba(255,255,255,.92); backdrop-filter: blur(12px); }
.modal-footer .button { min-width: 108px; justify-content: center; }
.definition dt { font-size: 13px; }
.definition dd { font-size: 15px; font-weight: 500; }
.definition-note { font-size: 13px; }
.note-box { border-radius: 14px; background: rgba(118,118,128,.08); }
.note-box p, .muted-copy { font-size: 14px; }
.abschnitt { margin-top: 28px; font-size: 17px; font-weight: 600; }
.timeline-title { font-size: 15px; }
.timeline-meta { font-size: 13px; }
.toast { border: 0; border-radius: 14px; color: white; background: rgba(29,29,31,.92); backdrop-filter: blur(12px); font-size: 15px; box-shadow: 0 12px 40px rgba(0,0,0,.24); }
.toast.success { color: white; background: rgba(29,29,31,.92); }
.toast .icon { color: #32d74b; }
.toast.info .icon { color: #ffd60a; }

/* Startseite */
.start-knopf { min-height: 148px; padding: 22px; border: 0; background: white; box-shadow: var(--ring); transition: transform .14s, box-shadow .14s; }
.start-knopf:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px rgba(0,0,0,.05), 0 12px 32px rgba(0,0,0,.09); }
.start-knopf:first-child { background: linear-gradient(180deg,#1a86ff,#0068d6); }
.start-knopf .icon { width: 30px; height: 30px; margin-bottom: 14px; }
.start-knopf:first-child .icon { color: white; }
.start-knopf strong { font-size: 21px; font-weight: 600; letter-spacing: -.02em; }
.start-knopf span { font-size: 15px; }
.start-knopf:first-child span { color: rgba(255,255,255,.86); }
.wartet-zeile { font-size: 15px; }
.wartet-zahl { min-width: 38px; height: 38px; border-radius: 11px; font-size: 17px; font-weight: 600; }
.wartet-text { font-weight: 500; }
.safety-kachel { border: 0; box-shadow: var(--ring); transition: transform .14s, box-shadow .14s; }
.safety-kachel:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px rgba(0,0,0,.05), 0 12px 32px rgba(0,0,0,.09); }
.safety-kachel strong { font-size: 18px; font-weight: 600; }
.safety-kachel-zahl { font-size: 14px; }
.mehr-angaben > summary { font-size: 15px; font-weight: 500; }
.form-field label.haken, .form-field label.teilnehmer { font-size: 15px; }
.teilnehmer small { font-size: 13px; }
.auth-card { padding: 34px 30px; border-radius: 22px; box-shadow: var(--shadow), var(--ring); }

/* Schalter – sofort wirksam, ohne "Speichern" */
.schalter-karte { margin-bottom: 18px; }
.schalter-liste { margin: 0; padding: 0 22px 8px; list-style: none; }
.schalter-zeile { padding: 14px 0; border-top: 1px solid var(--line); display: flex; align-items: center; gap: 18px; }
.schalter-zeile:first-child { border-top: 0; }
.schalter-zeile > div { flex: 1; min-width: 0; }
.schalter-zeile strong { display: block; font-size: 16px; font-weight: 500; }
.schalter-zeile span { display: block; margin-top: 2px; color: var(--muted); font-size: 14px; line-height: 1.4; }
.schalter { position: relative; flex: 0 0 auto; width: 51px; height: 31px; padding: 0; border: 0; border-radius: 16px; background: rgba(120,120,128,.24); transition: background .2s; }
.schalter i { position: absolute; top: 2px; left: 2px; width: 27px; height: 27px; border-radius: 50%; background: white; box-shadow: 0 2px 5px rgba(0,0,0,.22), 0 0 0 .5px rgba(0,0,0,.05); transition: transform .2s cubic-bezier(.3,.7,.3,1); }
.schalter.an { background: #34c759; }
.schalter.an i { transform: translateX(20px); }

/* Lageplan */
.plan-leiste-rechts { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }
.plan-auswahl { min-width: 240px; max-width: 100%; }
.plan-rahmen { max-height: min(72vh, 900px); overflow: auto; border-radius: var(--radius); background: white; box-shadow: var(--ring); overscroll-behavior: contain; }
.plan-rahmen.setzen { cursor: crosshair; box-shadow: 0 0 0 3px rgba(0,113,227,.45); }
.plan-flaeche { position: relative; min-width: 100%; line-height: 0; }
.plan-flaeche img { width: 100%; height: auto; display: block; user-select: none; -webkit-user-drag: none; }
.plan-punkt { position: absolute; width: 30px; height: 30px; margin: -15px 0 0 -15px; padding: 5px; border: 2.5px solid white; border-radius: 50%; display: grid; place-items: center; color: white; background: var(--muted-2); box-shadow: 0 2px 8px rgba(0,0,0,.35); transition: transform .12s; }
.plan-punkt svg { width: 100%; height: 100%; }
.plan-punkt:hover { z-index: 3; transform: scale(1.25); }
.plan-punkt.gruen { background: #28a745; }
.plan-punkt.gelb { background: #f59f00; }
.plan-punkt.rot { background: #e5241d; }
.plan-punkt.grau { background: #8e8e93; }
.plan-punkt.markiert { z-index: 2; animation: plan-puls 1.4s ease-out 3; }
.plan-rahmen.setzen .plan-punkt { pointer-events: none; opacity: .55; }
@keyframes plan-puls { 0% { box-shadow: 0 0 0 0 rgba(0,113,227,.7), 0 2px 8px rgba(0,0,0,.35); } 100% { box-shadow: 0 0 0 26px rgba(0,113,227,0), 0 2px 8px rgba(0,0,0,.35); } }
.plan-legende { margin: 0 0 12px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.plan-chip { min-height: 34px; padding: 0 12px 0 6px; border: 0; border-radius: 17px; display: inline-flex; align-items: center; gap: 7px; color: var(--ink); background: white; box-shadow: var(--ring); font-size: 14px; }
.plan-chip.active { color: white; background: var(--ink); }
.plan-chip b { color: var(--muted); font-weight: 500; }
.plan-chip.active b { color: rgba(255,255,255,.7); }
.plan-chip i { color: var(--red); font-style: normal; font-size: 13px; }
.plan-punkt-mini { width: 24px; height: 24px; padding: 4px; border-radius: 50%; display: grid; place-items: center; color: white; background: var(--muted); }
.plan-farben { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 13px; }
.plan-farben i { width: 10px; height: 10px; margin-left: 8px; border-radius: 50%; }
.plan-farben .gruen { background: #28a745; } .plan-farben .gelb { background: #f59f00; } .plan-farben .rot { background: #e5241d; } .plan-farben .grau { background: #8e8e93; }
.plan-zeile { margin-top: 18px; padding: 12px 14px; border-radius: 14px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; background: rgba(118,118,128,.08); font-size: 15px; }
.plan-zeile > span { flex: 1; min-width: 180px; }
.plan-wahl { display: grid; gap: 18px; }
.plan-wahl .start-knopf { min-height: 0; background: var(--blue-soft); box-shadow: none; }
.plan-wahl .start-knopf .icon { color: var(--blue); margin-bottom: 6px; }
.plan-wahl .start-knopf strong { color: var(--ink); } .plan-wahl .start-knopf span { color: var(--muted); }
.plan-wahl-vorhanden { display: grid; gap: 8px; }
.plan-wahl-vorhanden label { color: var(--ink); font-size: 14px; font-weight: 500; }

/* Wer den Arbeitsschutz nur sieht, bekommt die Knöpfe zum Ändern nicht angezeigt. */
.arbeitsschutz-nur-lesen :is([data-safety-edit], [data-safety-delete], [data-action="safety-new"],
  [data-action="employee-new"], [data-action="employee-import"], [data-employee-edit], [data-action="betrieb-edit"], [data-action="plan-neu"],
  [data-action="plan-verwalten"], [data-plan-setzen], [data-plan-entfernen], #safety-doc-form) { display: none !important; }

@media (max-width: 760px) {
  .topbar { height: 58px; padding: 0 14px; }
  .subnav { top: 58px; padding: 6px 12px 0; }
  .page { padding: 22px 16px 96px; }
  .page-header h1 { font-size: 28px; }
  .page-subtitle { font-size: 15px; }
  .start-knopf { min-height: 0; padding: 18px; }
  .start-knopf .icon { margin: 0; }
  .start-knopf strong { font-size: 19px; }
  .mobile-bottom-nav { height: 68px; border-top: 1px solid var(--line); background: rgba(255,255,255,.86); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); }
  .mobile-nav-item { font-size: 12px; font-weight: 500; }
  .mobile-nav-item.active { background: transparent; color: var(--blue); }
  .fab { border-radius: 50%; width: 56px; height: 56px; background: var(--blue); box-shadow: 0 8px 24px rgba(0,113,227,.4); }
  .modal, .modal.wide { border-radius: 22px 22px 0 0; }
  .modal-header { padding: 20px 18px 12px; }
  .modal-body { padding: 6px 18px 20px; }
  .modal-footer { padding: 14px 18px calc(14px + env(safe-area-inset-bottom)); }
  .modal-footer .button { flex: 1; }
  .settings-tabs { display: flex; flex-wrap: nowrap; overflow-x: auto; }
  .settings-tabs button { white-space: nowrap; }
  .plan-rahmen { max-height: 62vh; }
  .plan-leiste-rechts { margin-left: 0; width: 100%; }
  .plan-leiste-rechts .button { flex: 1; }
  .plan-farben { margin-left: 0; width: 100%; }
  .schalter-liste { padding: 0 16px 6px; }
}


/* Punkte im Plan lassen sich ziehen */
.plan-punkt { touch-action: none; cursor: pointer; }
.plan-punkt[data-plan-ziehbar] { cursor: grab; }
.plan-punkt.zieht { z-index: 5; cursor: grabbing; transform: scale(1.3); transition: none; box-shadow: 0 8px 20px rgba(0,0,0,.4); }
.plan-punkt.maschine { width: 32px; height: 32px; margin: -16px 0 0 -16px; padding: 6px; border-radius: 9px; }
.plan-punkt.maschine .icon { width: 100%; height: 100%; }
.plan-punkt b { position: absolute; top: -8px; right: -8px; min-width: 18px; height: 18px; padding: 0 4px; border: 2px solid white; border-radius: 9px; display: grid; place-items: center; color: white; background: #1d1d1f; font-size: 11px; font-weight: 600; line-height: 1; }
.plan-name { position: absolute; top: 100%; left: 50%; margin-top: 4px; padding: 2px 6px; border-radius: 6px; color: var(--ink); background: rgba(255,255,255,.92); box-shadow: 0 0 0 1px rgba(0,0,0,.08); font-size: 11px; font-weight: 500; line-height: 1.3; white-space: nowrap; transform: translateX(-50%); pointer-events: none; }

/* Gefahrenpiktogramme */
.ghs { width: 26px; height: 26px; flex: 0 0 auto; }
.ghs-reihe { margin: 4px 0 2px; display: flex; align-items: center; gap: 3px; flex-wrap: wrap; }
.ghs-reihe.gross .ghs { width: 46px; height: 46px; }
.signalwort { margin-left: 6px; padding: 2px 8px; border-radius: 6px; color: #9a4a00; background: var(--orange-soft); font-size: 12px; font-weight: 600; }
.signalwort.gefahr { color: white; background: #e30613; }
.ghs-block { margin-bottom: 16px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.ghs-wahl { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 8px; }
.form-field label.ghs-knopf { margin: 0; padding: 8px 10px; border: 1.5px solid var(--line); border-radius: 12px; display: flex; align-items: center; gap: 9px; color: var(--ink); font-size: 13px; font-weight: 500; cursor: pointer; transition: border-color .15s, background .15s; }
.ghs-knopf input { position: absolute; opacity: 0; pointer-events: none; }
.ghs-knopf .ghs { width: 38px; height: 38px; }
.form-field label.ghs-knopf span { color: var(--ink); font-weight: 500; line-height: 1.25; }
.ghs-knopf:has(input:checked) { border-color: var(--blue); background: var(--blue-soft); box-shadow: 0 0 0 3px rgba(0,113,227,.14); }

/* Planer */
.planer-blaettern { display: flex; align-items: center; gap: 6px; }
.planer-blaettern strong { margin-left: 8px; font-size: 16px; font-weight: 600; }
.planer-legende { margin-left: auto; display: flex; gap: 14px; flex-wrap: wrap; color: var(--muted); font-size: 13px; }
.planer-legende span { display: inline-flex; align-items: center; gap: 6px; }
.plan-muster { width: 22px; height: 12px; border-radius: 4px; }
.plan-muster.fest { background: var(--blue); }
.plan-muster.vorgemerkt { border: 1.5px dashed var(--blue); background: var(--blue-soft); }
.plan-muster.termin { background: rgba(118,118,128,.22); }
.planer-woche { display: grid; grid-template-columns: repeat(7, minmax(0,1fr)); gap: 10px; }
.planer-tag { min-height: 300px; padding: 12px 10px 10px; border-radius: 16px; display: flex; flex-direction: column; background: white; box-shadow: var(--ring); }
.planer-tag.wochenende { background: rgba(255,255,255,.55); }
.planer-tag.heute { box-shadow: 0 0 0 2px var(--blue); }
.planer-tagkopf { margin-bottom: 10px; display: flex; align-items: baseline; justify-content: space-between; gap: 6px; }
.planer-tagkopf span { color: var(--muted); font-size: 13px; }
.planer-tagkopf strong { font-size: 16px; font-weight: 600; }
.planer-tag.heute .planer-tagkopf strong { color: var(--blue); }
.planer-tagliste { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.planer-leer { color: var(--muted-2); font-size: 13px; }
.planer-plus { margin-top: 8px; min-height: 30px; border: 0; border-radius: 9px; display: grid; place-items: center; color: var(--muted); background: transparent; opacity: 0; transition: opacity .15s, background .15s; }
.planer-tag:hover .planer-plus, .planer-plus:focus-visible { opacity: 1; background: rgba(118,118,128,.1); }
.plan-eintrag { width: 100%; min-height: 34px; padding: 6px 8px; border: 1.5px solid transparent; border-radius: 9px; display: flex; align-items: center; gap: 6px; color: white; background: var(--blue); font-size: 13px; font-weight: 500; text-align: left; line-height: 1.25; }
.plan-eintrag span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.plan-eintrag .icon { flex: 0 0 auto; }
.plan-eintrag b { flex: 0 0 auto; padding: 1px 5px; border-radius: 6px; background: rgba(255,255,255,.26); font-size: 11px; font-weight: 600; }
.plan-eintrag.projekt { --farbe: #0071e3; --hell: #e8f2fe; }
.plan-eintrag.mangel { --farbe: #c93400; --hell: #fff0e6; }
.plan-eintrag.auftrag { --farbe: #1f8a3b; --hell: #e6f6ea; }
.plan-eintrag.wartung { --farbe: #6e45c9; --hell: #f0ebfc; }
.plan-eintrag.sonstiges { --farbe: #48484a; --hell: #ececee; }
.plan-eintrag.fest { color: white; background: var(--farbe); }
.plan-eintrag.vorgemerkt { color: var(--farbe); border: 1.5px dashed var(--farbe); background: var(--hell); }
.plan-eintrag.vorgemerkt b { background: rgba(0,0,0,.08); }
.plan-eintrag.erledigt { color: var(--muted); background: rgba(118,118,128,.14); text-decoration: line-through; }
.plan-eintrag.termin { color: var(--ink); background: rgba(118,118,128,.14); font-weight: 400; }
.plan-eintrag.termin.faellig { color: #c2001a; background: var(--red-soft); }
.planer-monat { padding: 8px; }
.planer-kopfzeile, .planer-reihe { display: grid; grid-template-columns: repeat(7, minmax(0,1fr)); }
.planer-kopfzeile span { padding: 8px; color: var(--muted); font-size: 13px; text-align: center; }
.planer-zelle { min-height: 118px; padding: 6px; border-top: 1px solid var(--line); border-left: 1px solid var(--line); display: flex; flex-direction: column; gap: 4px; }
.planer-zelle:first-child { border-left: 0; }
.planer-zelle.fremd { background: rgba(118,118,128,.05); }
.planer-zelle.fremd .planer-tagzahl { color: var(--muted-2); }
.planer-tagzahl { align-self: flex-start; min-width: 28px; height: 28px; border: 0; border-radius: 14px; color: var(--ink); background: transparent; font-size: 14px; font-weight: 500; }
.planer-zelle.heute .planer-tagzahl { color: white; background: var(--blue); }
.planer-zelle .plan-eintrag { min-height: 24px; padding: 3px 6px; font-size: 12px; }
.planer-zelle .plan-eintrag span { -webkit-line-clamp: 1; }
.planer-mehr { border: 0; padding: 2px 6px; color: var(--muted); background: transparent; font-size: 12px; text-align: left; }
.view-toggle.planer-art { display: flex; flex-wrap: wrap; }
.view-toggle.planer-art label { margin: 0; min-height: 36px; padding: 0 13px; border-radius: 9px; display: inline-flex; align-items: center; color: var(--ink); font-size: 14px; font-weight: 500; cursor: pointer; }
.view-toggle.planer-art label.active { background: white; box-shadow: 0 1px 3px rgba(0,0,0,.12); font-weight: 600; }
.view-toggle.planer-art input { position: absolute; opacity: 0; pointer-events: none; }

/* Schichtübergabe */
.uebergabe-form { display: grid; grid-template-columns: auto minmax(0,1fr) auto; gap: 10px; align-items: start; }
.uebergabe-form .textarea { min-height: 76px; }
.uebergabe-notizen { margin: 16px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.uebergabe-notizen li { padding: 12px 14px; border-radius: 14px; background: rgba(118,118,128,.08); }
.uebergabe-kopf { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 14px; }
.uebergabe-kopf span:not(.status) { color: var(--muted); }
.uebergabe-kopf .link-button { margin-left: auto; color: var(--muted); font-size: 13px; }
.uebergabe-notizen p { margin: 8px 0 0; font-size: 15px; line-height: 1.45; white-space: pre-line; }
.uebergabe-zahl { margin-left: 4px; padding: 1px 8px; border-radius: 10px; color: var(--muted); background: rgba(118,118,128,.12); font-size: 14px; font-weight: 500; }
.uebergabe-hinweis { margin-top: 16px; padding: 14px 18px; border-radius: 16px; display: flex; align-items: flex-start; gap: 13px; background: white; box-shadow: var(--ring); }
.uebergabe-hinweis > div { flex: 1; min-width: 0; }
.uebergabe-hinweis strong { font-size: 14px; font-weight: 600; }
.uebergabe-hinweis p { margin: 4px 0 0; color: var(--ink); font-size: 15px; line-height: 1.45; white-space: pre-line; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

@media (max-width: 900px) {
  .planer-woche { grid-template-columns: 1fr; }
  .planer-tag { min-height: 0; }
  .planer-plus { opacity: 1; }
  .planer-legende { margin-left: 0; width: 100%; }
  .planer-zelle { min-height: 74px; padding: 4px; }
  .planer-zelle .plan-eintrag span { display: none; }
  .planer-zelle .plan-eintrag { min-height: 18px; justify-content: center; }
  .ghs-wahl { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .uebergabe-form { grid-template-columns: 1fr; }
  .uebergabe-hinweis { flex-wrap: wrap; }
}

/* QR-Etiketten */
.qr-vorschau { display: grid; place-items: center; padding: 6px 0 12px; }
.qr-etikett { padding: 16px 18px; border: 1.5px dashed var(--line-strong); border-radius: 16px; display: inline-grid; justify-items: center; gap: 2px; text-align: center; background: white; }
.qr-etikett .qr { display: block; }
.qr-etikett strong { margin-top: 8px; font-size: 17px; font-weight: 600; }
.qr-etikett span { color: var(--muted); font-size: 14px; }
.qr-etikett em { margin-top: 4px; color: var(--muted); font-size: 13px; font-style: normal; }

/* Fremdfirmen: drei Schritte */
.schritte { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 13px; }
.schritte i { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; color: var(--muted); background: rgba(118,118,128,.16); font-style: normal; font-size: 12px; font-weight: 600; }
.schritte i.erreicht { color: white; background: #34c759; }
.schritte b { color: var(--muted); font-weight: 500; }
.schritte b.erreicht { color: var(--ink); }
.schritte em { width: 14px; height: 2px; border-radius: 1px; background: var(--line-strong); }
.fliesstext { margin: 6px 0 0; font-size: 15px; line-height: 1.5; white-space: pre-line; }

/* Lösungssammlung */
.loesung-liste, .loesung-hinweis ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.loesung { padding: 14px 16px; border-radius: 14px; background: white; box-shadow: var(--ring); }
.loesung-kopf { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.loesung-kopf strong { font-size: 16px; font-weight: 600; }
.loesung-kopf span { color: var(--muted); font-size: 13px; }
.loesung p { margin: 6px 0 0; font-size: 15px; line-height: 1.45; }
.loesung p b { font-weight: 600; }
.loesung-hinweis { margin-bottom: 14px; padding: 12px 14px; border-radius: 14px; background: var(--green-soft); }
.loesung-hinweis > strong { margin-bottom: 8px; display: flex; align-items: center; gap: 7px; color: #1a7a33; font-size: 14px; font-weight: 600; }
.loesung-hinweis .loesung { box-shadow: none; }
.bestell-gruppe + .bestell-gruppe { margin-top: 22px; }
.bestell-gruppe .table-scroll { margin-top: 8px; border-radius: 12px; box-shadow: var(--ring); }

/* Planer: Einträge ziehen */
.plan-eintrag[data-plan-tag]:not([data-plan-tag=""]) { cursor: grab; touch-action: none; }
.plan-eintrag.zieht { position: relative; z-index: 40; cursor: grabbing; pointer-events: none; box-shadow: 0 10px 28px rgba(0,0,0,.28); opacity: .92; }
.planer-ziel-aktiv { box-shadow: 0 0 0 2px var(--blue), 0 0 0 6px rgba(0,113,227,.16) !important; background: var(--blue-soft) !important; }
img.ghs { object-fit: contain; }

/* --- Übergreifende Suche (suche.js) ---------------------------------------------
   Die Liste unter dem Suchfeld und die Trefferseite teilen sich dieselbe Zeile: Symbol,
   Titel, Art und – wenn das Wort nicht im Titel steht – das Feld mit der Fundstelle. */
mark { padding: 0 1px; border-radius: 3px; color: inherit; background: rgba(255,204,0,.4); }
.search-results.suche-schnell { max-height: min(74vh, 640px); }
/* Die Lupe im Suchfeld ist fest platziert (.search-wrap .icon). Für die Symbole in der
   Trefferliste darunter darf das nicht gelten. */
.search-wrap .search-results .icon { position: static; transform: none; color: currentColor; }
.suche-treffer { width: 100%; padding: 12px 16px; border: 0; border-top: 1px solid var(--line); display: flex; align-items: flex-start; gap: 12px; color: var(--ink); background: transparent; text-align: left; }
.suche-treffer:first-child { border-top: 0; }
.suche-treffer:hover, .suche-treffer:focus-visible { background: rgba(118,118,128,.09); }
.suche-text { flex: 1; min-width: 0; display: grid; gap: 2px; }
.suche-text strong { font-size: 15px; font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; }
.suche-unter { color: var(--muted); font-size: 13px; line-height: 1.4; overflow-wrap: anywhere; }
.suche-stelle { margin-top: 3px; color: var(--ink); font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; }
.suche-stelle b { margin-right: 5px; padding: 1px 7px; border-radius: 6px; color: var(--muted); background: rgba(118,118,128,.13); font-size: 12px; font-weight: 500; white-space: nowrap; }
.suche-pfeil { align-self: center; flex: 0 0 auto; color: var(--muted-2); font-size: 13px; }
.suche-alle { position: sticky; bottom: 0; width: 100%; min-height: 46px; padding: 0 16px; border: 0; border-top: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--blue); background: inherit; font-size: 15px; font-weight: 600; text-align: left; }
.suche-alle:hover { text-decoration: underline; }
.suche-alle kbd { padding: 2px 8px; border-radius: 6px; color: var(--muted); background: rgba(118,118,128,.13); font: inherit; font-size: 12px; font-weight: 500; }
.suche-hinweis { padding: 11px 16px; border-top: 1px solid var(--line); color: var(--muted); font-size: 13px; }
.suche-arten { margin-bottom: 14px; display: flex; gap: 8px; flex-wrap: wrap; }
.suche-karte { margin-bottom: 16px; overflow: hidden; }
.suche-liste .suche-treffer { padding: 14px 22px; }
.suche-liste .suche-hinweis { padding: 12px 22px; }
.suche-stand { margin: 14px 4px 0; display: flex; align-items: flex-start; gap: 8px; color: var(--muted); font-size: 13px; line-height: 1.5; }
.suche-stand .icon { margin-top: 2px; }
@media (max-width: 760px) {
  .suche-alle kbd { display: none; }
  .suche-liste .suche-treffer, .suche-liste .suche-hinweis { padding-left: 16px; padding-right: 16px; }
  .suche-pfeil { display: none; }
}

/* --- Fensterhöhe -----------------------------------------------------------------
   Die Höhe eines Fensters hängt am sichtbaren Bereich, nicht an "100vh": Mit "Große
   Schrift" (zoom) wurde das Fenster sonst höher als der Bildschirm – Überschrift und
   Knopfleiste lagen außerhalb und waren nicht zu erreichen. Am iPhone passiert dasselbe,
   weil 100vh die eingeblendete Adressleiste nicht abzieht. */
.modal-backdrop { grid-template-rows: minmax(0, 1fr); grid-template-columns: minmax(0, 1fr); }
.modal, .modal.wide { max-height: 100%; }
@media (max-width: 760px) {
  .modal, .modal.wide { max-height: 94%; }
}

/* --- Benutzermenü oben rechts ---------------------------------------------------- */
.user-menu-wrap { position: relative; }
button.avatar { border: 0; cursor: pointer; padding: 0; transition: transform .12s ease, box-shadow .12s ease; }
button.avatar:hover { transform: scale(1.05); }
button.avatar[aria-expanded="true"] { box-shadow: 0 0 0 3px var(--blue-soft, rgba(0,0,0,.1)); }
.user-menu { position: absolute; top: calc(100% + 10px); right: 0; z-index: 70; width: min(304px, calc(100vw - 24px)); padding: 8px; border: 1px solid var(--line); border-radius: 18px; background: var(--pop-bg, white); box-shadow: var(--pop-shadow, 0 18px 50px rgba(15,23,42,.18)); display: grid; gap: 2px; animation: user-menu-in .14s ease; }
.user-menu[hidden] { display: none; }
@keyframes user-menu-in { from { opacity: 0; transform: translateY(-6px) scale(.98); } to { opacity: 1; transform: none; } }
.user-menu-kopf { padding: 10px 10px 12px; margin-bottom: 4px; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 12px; }
.user-menu-kopf > div { min-width: 0; display: grid; gap: 1px; }
.user-menu-kopf strong { color: var(--ink); font-size: 15px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-menu-kopf span { color: var(--muted); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-menu-kopf .user-menu-rolle { margin-top: 4px; justify-self: start; padding: 2px 8px; border-radius: 99px; color: var(--blue-ink, var(--blue)); background: var(--blue-soft, #eaf1ff); font-size: 12px; font-weight: 600; }
.avatar.gross { width: 44px; height: 44px; flex: 0 0 auto; font-size: 16px; }
.user-menu-punkt { width: 100%; min-height: 42px; padding: 8px 10px; border: 0; border-radius: 11px; display: flex; align-items: center; gap: 11px; color: var(--ink); background: transparent; font: inherit; text-align: left; cursor: pointer; }
.user-menu-punkt:hover, .user-menu-punkt:focus-visible { background: var(--fill-3, rgba(0,0,0,.045)); outline: none; }
.user-menu-punkt .icon { color: var(--muted); flex: 0 0 auto; }
.user-menu-punkt span { display: grid; }
.user-menu-punkt strong { font-size: 14px; font-weight: 500; }
.user-menu-punkt small { color: var(--muted); font-size: 12px; }
.user-menu-punkt.abmelden { margin-top: 4px; border-top: 1px solid var(--line); border-radius: 0 0 11px 11px; padding-top: 12px; color: var(--red, #c73535); }
.user-menu-punkt.abmelden .icon { color: currentColor; }
.user-menu-block { padding: 8px 10px; display: grid; gap: 8px; }
.user-menu-block.reihe { grid-template-columns: 1fr auto; align-items: center; }
.user-menu-titel { color: var(--muted); font-size: 12px; font-weight: 600; }
.user-menu-designs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
/* Kleine Vorschau des Designs: Fläche, Seitenleiste, Akzent – dieselben Farben wie die
   großen Vorschaubilder unter "Mein Konto" (design-bild-…). */
.design-punkt { position: relative; height: 38px; padding: 0; border: 2px solid transparent; border-radius: 10px; overflow: hidden; cursor: pointer; background: var(--b-grund, #f5f5f7); box-shadow: inset 0 0 0 1px rgba(0,0,0,.1); }
.design-punkt i { position: absolute; inset: 0 auto 0 0; width: 30%; background: var(--b-leiste, #1c1c1e); }
.design-punkt b { position: absolute; right: 7px; bottom: 7px; width: 14px; height: 6px; border-radius: 3px; background: var(--b-akzent, #0071e3); }
.design-punkt.aktiv { border-color: var(--blue); }
.design-punkt:hover { transform: translateY(-1px); }
@media (max-width: 760px) {
  .user-menu-wrap .avatar { display: grid; }
  .user-menu { position: fixed; top: 60px; right: 10px; }
}

/* --- Kompetenzen je Benutzer ------------------------------------------------------- */
.kompetenz-gruppe { margin: 0 0 18px; padding: 0; border: 0; min-width: 0; }
.kompetenz-gruppe legend { padding: 0; margin-bottom: 6px; color: var(--muted); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
.kompetenz-zeile { padding: 9px 12px; border-radius: 12px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(170px, 236px); align-items: center; gap: 12px; }
.kompetenz-zeile + .kompetenz-zeile { margin-top: 2px; }
.kompetenz-zeile label { min-width: 0; display: grid; gap: 1px; cursor: pointer; }
.kompetenz-zeile label strong { color: var(--ink); font-size: 15px; font-weight: 500; }
.kompetenz-zeile label span { color: var(--muted); font-size: 12.5px; }
.kompetenz-zeile .select { width: 100%; min-width: 0; }
.kompetenz-zeile.abweichend { background: var(--blue-soft, #eaf1ff); }
.kompetenz-zeile.abweichend label strong::after { content: "angepasst"; margin-left: 8px; padding: 1px 7px; border-radius: 99px; color: #fff; background: var(--blue); font-size: 11px; font-weight: 600; vertical-align: 1px; }
.kompetenz-marke { color: var(--blue-ink, var(--blue)); font-weight: 600; }
@media (max-width: 560px) { .kompetenz-zeile { grid-template-columns: minmax(0, 1fr); gap: 6px; } }

/* --- "Wieder fällig am": Datum oder Abstand ----------------------------------------- */
.faellig-feld { display: grid; grid-template-columns: minmax(0, 1.5fr) auto minmax(58px, .6fr) minmax(0, 1fr); align-items: center; gap: 8px; }
.faellig-oder { color: var(--muted); font-size: 13px; white-space: nowrap; }
.faellig-feld .input, .faellig-feld .select { min-width: 0; width: 100%; }
@media (max-width: 560px) {
  .faellig-feld { grid-template-columns: auto minmax(58px, .7fr) minmax(0, 1fr); }
  .faellig-feld [data-faellig-datum] { grid-column: 1 / -1; }
}

/* --- Werkspuls ---------------------------------------------------------------------
   Das Erkennungszeichen: ein Balken in vier Farben, der auf einen Blick sagt, wie es um
   Termine und Fristen steht. Groß auf der Startseite, klein in der Seitenleiste. */
:root { --puls-rot: #d64545; --puls-orange: #e8892b; --puls-gelb: #e9bf3f; --puls-gruen: #2f9e6e; }
.puls { margin-top: 18px; padding: 18px 20px 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel, white); box-shadow: var(--ring, none); display: grid; gap: 14px; }
.puls-kopf { display: flex; align-items: center; gap: 14px; }
.puls-kopf > div { min-width: 0; flex: 1; display: grid; gap: 1px; }
.puls-name { color: var(--muted); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; }
.puls-kopf strong { color: var(--ink); font-size: 19px; font-weight: 600; letter-spacing: -.015em; line-height: 1.25; }
.puls-punkt { position: relative; width: 14px; height: 14px; flex: 0 0 auto; border-radius: 50%; background: var(--puls-farbe, var(--puls-gruen)); }
.puls-punkt::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: inherit; opacity: 0; }
.puls-lage-rot { --puls-farbe: var(--puls-rot); }
.puls-lage-orange { --puls-farbe: var(--puls-orange); }
.puls-lage-gelb { --puls-farbe: var(--puls-gelb); }
.puls-lage-gruen { --puls-farbe: var(--puls-gruen); }
/* Der Punkt "schlägt", solange etwas überfällig oder heute fällig ist. */
.puls-lage-rot .puls-punkt::after, .puls-lage-orange .puls-punkt::after { animation: puls-schlag 2.2s ease-out infinite; }
@keyframes puls-schlag { 0% { transform: scale(1); opacity: .55; } 70%, 100% { transform: scale(2.6); opacity: 0; } }
.puls-balken { height: 12px; border-radius: 99px; display: flex; gap: 3px; overflow: hidden; }
.puls-balken i { min-width: 10px; border-radius: 99px; transform-origin: left center; animation: puls-wachsen .55s cubic-bezier(.2,.8,.2,1) both; }
.puls-balken i:nth-child(2) { animation-delay: .06s; } .puls-balken i:nth-child(3) { animation-delay: .12s; } .puls-balken i:nth-child(4) { animation-delay: .18s; }
@keyframes puls-wachsen { from { transform: scaleX(0); opacity: 0; } }
i.puls-rot, .puls-marke.puls-rot i { background: var(--puls-rot); }
i.puls-orange, .puls-marke.puls-orange i { background: var(--puls-orange); }
i.puls-gelb, .puls-marke.puls-gelb i { background: var(--puls-gelb); }
i.puls-gruen, .puls-marke.puls-gruen i { background: var(--puls-gruen); }
i.puls-leer { background: var(--line-strong, #d8dee8); }
.puls-legende { display: flex; flex-wrap: wrap; gap: 6px 8px; }
.puls-marke { min-height: 32px; padding: 0 12px 0 10px; border: 0; border-radius: 99px; display: inline-flex; align-items: center; gap: 7px; color: var(--muted); background: transparent; font: inherit; font-size: 14px; cursor: pointer; }
.puls-marke:hover { color: var(--ink); background: var(--fill-3, rgba(0,0,0,.045)); }
.puls-marke i { width: 9px; height: 9px; border-radius: 50%; }
.puls-marke b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
/* Klein in der Seitenleiste – auf jeder Seite im Blick. */
.puls-mini { width: 100%; padding: 11px 12px 12px; border: 1px solid var(--line); border-radius: 12px; display: grid; gap: 8px; color: var(--ink); background: rgba(0,0,0,.03); font: inherit; text-align: left; cursor: pointer; }
.puls-mini:hover { background: rgba(0,0,0,.055); }
.puls-mini-kopf { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.puls-mini .puls-punkt { width: 8px; height: 8px; }
.puls-mini .puls-balken { height: 6px; gap: 2px; }
.puls-mini .puls-balken i { min-width: 6px; }
.puls-mini-text { font-size: 13px; color: var(--ink); }
/* In den Designs mit eigener Seitenleiste (Wald, Nacht, Aurora) deren Farben. */
[data-design] .puls-mini { border-color: var(--sidebar-line, rgba(255,255,255,.09)); color: var(--sidebar-ink); background: var(--sidebar-card, rgba(255,255,255,.05)); }
[data-design] .puls-mini:hover { background: var(--sidebar-hover); }
[data-design] .puls-mini-kopf { color: var(--sidebar-muted); }
[data-design] .puls-mini-text { color: var(--sidebar-ink); }
@media (max-width: 760px) { .puls-kopf .button { display: none; } .puls-kopf strong { font-size: 17px; } }

/* --- Statuskante -------------------------------------------------------------------
   Die Farbe am linken Rand einer Zeile sagt die Dringlichkeit, bevor man den Text liest –
   dieselben Farben wie im Werkspuls. */
.list-row.kante { position: relative; padding-left: 14px; }
.list-row.kante::before { content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 4px; border-radius: 4px; background: var(--kante, transparent); }
.kante-rot { --kante: var(--puls-rot); } .kante-orange { --kante: var(--puls-orange); } .kante-gelb { --kante: var(--puls-gelb); }
/* Zeilen ohne Kante in derselben Liste rücken mit ein, damit alles in einer Flucht steht. */
.list:has(> .kante) > .list-row:not(.kante) { padding-left: 14px; }

/* --- Ausgewogene Reihen ----------------------------------------------------------------
   Eine Kachel soll nie allein in einer Vierer-Reihe stehen: Die Reihe richtet sich nach
   der Zahl ihrer Kacheln. Und zwei ungleich volle Karten nebeneinander enden nicht mehr
   auf derselben Höhe – die kürzere bleibt so hoch wie ihr Inhalt. */
@media (min-width: 1181px) {
  .grid.cols-4:has(> :last-child:nth-child(3)) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid.cols-4:has(> :last-child:nth-child(2)), .grid.cols-3:has(> :last-child:nth-child(2)) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid.cols-4:has(> :last-child:nth-child(1)), .grid.cols-3:has(> :last-child:nth-child(1)) { grid-template-columns: minmax(0, 1fr); }
}
.grid.two-one { align-items: start; }

/* --- Feinschliff: Bewegung und Abstände ------------------------------------------------- */
/* Seitenwechsel: siehe Abschnitt "Seitenwechsel" am Ende der Datei. */
/* Kacheln, die man anklicken kann, heben sich beim Überfahren leicht. */
.start-knopf, .metric-button, .design-wahl { transition: transform .14s ease, box-shadow .14s ease; }
.start-knopf:hover, .metric-button:hover { transform: translateY(-2px); }
.button, .icon-button { transition: transform .08s ease, background-color .12s ease, box-shadow .12s ease; }
.button:active, .icon-button:active { transform: scale(.97); }
/* Knöpfe im Kopf einer Karte oder Seite berühren weder den Text noch den Rand. */
.card-header { gap: 16px; }
.card-header > .button, .card-header > .inline-actions { flex: 0 0 auto; }
.card-footer { display: flex; flex-wrap: wrap; gap: 10px; }
.page-header .button-row, .page-header .inline-actions { gap: 10px; }
/* Zahlen stehen in Tabellen und Listen stellengenau untereinander. */
td, .list-meta, .metric-number, .wartet-zahl { font-variant-numeric: tabular-nums; }
/* Mehrzeilige Reiterleisten: Abstand auch zwischen den Zeilen. */
.settings-tabs { row-gap: 4px; }
@media (prefers-reduced-motion: reduce) {
  .page.seite-neu, .puls-balken i, .puls-punkt::after, .user-menu { animation: none !important; }
  .start-knopf:hover, .metric-button:hover { transform: none; }
}

/* Der Werkspuls als Marke auf der Anmeldeseite. */
.puls-marke-anmeldung { height: 6px; margin: -6px 0 22px; }

/* Karten, die auf einer Seite direkt untereinander stehen, berühren sich nicht. */
.page > .card + .card, .page > .card + .grid, .page > .grid + .card { margin-top: 18px; }


/* --- Seitenwechsel ------------------------------------------------------------------
   Der Browser blendet zwischen alter und neuer Seite über (View Transitions, gestartet in
   mitUebergang() in app.js). Benannt wird nur, was sich bewegen soll, und nur solange ein
   Wechsel läuft – außerhalb davon entstehen so keine zusätzlichen Ebenen.

   seite          der Inhalt: alte Seite geht in Laufrichtung, neue kommt aus ihr
   menue-zeiger   die Markierung in der Seitenleiste gleitet zum neuen Bereich
   reiter-zeiger  die Markierung in der Reiterleiste oben gleitet zum neuen Reiter
   kopf, reiter, fuss, knopf, hinweise  bleiben stehen und liegen über dem Inhalt */
html[data-uebergang] .page { view-transition-name: seite; }
html[data-uebergang] .topbar { view-transition-name: kopf; }
html[data-uebergang] .subnav { view-transition-name: reiter; }
html[data-uebergang] .subnav button.active { view-transition-name: reiter-zeiger; }
html[data-uebergang] .nav-item.active { view-transition-name: menue-zeiger; }
html[data-uebergang] .mobile-bottom-nav { view-transition-name: fuss; }
html[data-uebergang] .fab { view-transition-name: knopf; }
html[data-uebergang] #toast-region { view-transition-name: hinweise; }
@media (max-width: 760px) {
  /* Am Telefon ist die Seitenleiste eingeklappt – dort gibt es nichts zu markieren. */
  html[data-uebergang] .nav-item.active { view-transition-name: none; }
}

/* Solange der Übergang läuft, bleibt die Seite bedienbar. */
::view-transition { pointer-events: none; }
/* Alles Unbenannte (Seitenleiste, Hintergrund) springt ohne Überblenden um – es sieht
   vorher und nachher gleich aus. */
::view-transition-old(root) { display: none; }
::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
/* Was stehen bleibt, liegt über dem Inhalt, der sich darunter bewegt. */
::view-transition-group(kopf), ::view-transition-group(fuss) { z-index: 4; }
::view-transition-group(reiter) { z-index: 3; }
::view-transition-group(reiter-zeiger) { z-index: 5; }
::view-transition-group(knopf), ::view-transition-group(hinweise) { z-index: 6; }
::view-transition-old(kopf), ::view-transition-old(fuss), ::view-transition-old(knopf), ::view-transition-old(hinweise) { display: none; }
::view-transition-new(kopf), ::view-transition-new(fuss), ::view-transition-new(knopf), ::view-transition-new(hinweise) { animation: none; mix-blend-mode: normal; }

/* Die gleitenden Markierungen: zügig, mit weichem Auslauf. */
::view-transition-group(menue-zeiger), ::view-transition-group(reiter-zeiger), ::view-transition-group(*) { animation-duration: .34s; animation-timing-function: cubic-bezier(.22, .9, .26, 1); }

/* Der Inhalt. Die Richtung kommt als Versatz: Die alte Seite geht dorthin, woher die
   neue nicht kommt. */
html[data-uebergang] { --u-x: 0px; --u-y: 0px; --u-gross: 1; }
html[data-uebergang="rechts"] { --u-x: 36px; }
html[data-uebergang="links"] { --u-x: -36px; }
html[data-uebergang="unten"] { --u-y: 26px; }
html[data-uebergang="oben"] { --u-y: -26px; }
html[data-uebergang="ein"] { --u-gross: .985; }
::view-transition-group(seite) { animation-duration: .4s; }
/* Erst geht die alte Seite (kurz), dann kommt die neue: Die neue bleibt unsichtbar, bis
   die alte fast weg ist – sonst stünden zwei Seiten als Doppelbild übereinander. */
::view-transition-old(seite) { animation: seite-geht .12s ease-in both; }
/* Bewegung und Einblenden getrennt: Die Bewegung läuft die ganze Zeit mit weichem Auslauf,
   das Einblenden beginnt erst nach 0,1 Sekunden und ist dann gleichmäßig. */
::view-transition-new(seite) { animation: seite-kommt .4s cubic-bezier(.16, .84, .24, 1) both, seite-blende-ein .2s linear .1s both; }
@keyframes seite-geht { to { opacity: 0; transform: translate(calc(var(--u-x) * -.4), calc(var(--u-y) * -.4)); } }
@keyframes seite-kommt { from { transform: translate(var(--u-x), var(--u-y)) scale(var(--u-gross)); } }
/* Reiter innerhalb einer Seite: Der größte Teil der Seite bleibt gleich. Hier wird nur
   weich übergeblendet (was gleich aussieht, bleibt dabei unverändert), und die Markierung
   des Reiters gleitet. */
html[data-uebergang="reiter"]::view-transition-old(seite) { animation: seite-blende-aus .2s linear both; }
html[data-uebergang="reiter"]::view-transition-new(seite) { animation: seite-blende-ein .2s linear both; }
@keyframes seite-blende-aus { to { opacity: 0; } }
@keyframes seite-blende-ein { from { opacity: 0; } }

/* Browser ohne diese Technik: die neue Seite blendet schlicht ein – aber nur nach einem
   Seitenwechsel, nicht bei jedem Neuzeichnen (etwa beim Tippen in ein Suchfeld). */
.page.seite-neu { animation: seite-ein .22s ease both; }
@keyframes seite-ein { from { opacity: 0; transform: translateY(6px); } }


/* --- Fenster ruhig neu zeichnen ---------------------------------------------------------
   Bleibt dasselbe Fenster offen und wird nur neu gezeichnet (anderer Reiter, geänderter
   Status, nachgeladene Daten), spielt die Bewegung des Öffnens nicht noch einmal. */
#portal[data-ruhig] :is(.modal-backdrop, .modal, .drawer-backdrop, .drawer) { animation: none; }

/* Reiterwechsel in einem Fenster: Benannt ist nur das Fenster. Der Browser blendet zwischen
   seinem alten und neuen Bild über – was gleich aussieht (Rahmen, Überschrift, Knöpfe),
   bleibt dabei unverändert stehen, nur der Inhalt wechselt weich. Die Markierung des
   Reiters gleitet (Name je Leiste, gesetzt in fensterUebergang()). */
html[data-fensterwechsel] #portal .modal { view-transition-name: fenster; }
::view-transition-group(fenster) { animation-duration: .26s; animation-timing-function: ease; }
/* Browser ohne diese Technik: Nur der Inhalt unter der Reiterleiste blendet ein. */
#portal[data-reiterwechsel] .modal-body > :is(.settings-tabs, .tabs) ~ * { animation: reiter-inhalt-ein .22s ease both; }
@keyframes reiter-inhalt-ein { from { opacity: 0; transform: translateY(4px); } }

/* --- Begehung --------------------------------------------------------------------------
   Die Liste des Prüfers und das Prüf-Fenster (begehung.js). Gedacht für das Tablet in der
   Halle: große Flächen zum Antippen, und die Farbe am Rand sagt den Stand, bevor man liest –
   dieselben Farben wie im Werkspuls. */
.bg-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.bg-punkt { position: relative; display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) auto; gap: 8px 16px; align-items: center; padding: 12px 14px 12px 20px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel, #fff); }
.bg-punkt::before { content: ""; position: absolute; left: 7px; top: 10px; bottom: 10px; width: 4px; border-radius: 4px; background: var(--puls-gruen); }
.bg-punkt.bg-red::before { background: var(--puls-rot); }
.bg-punkt.bg-orange::before { background: var(--puls-orange); }
.bg-punkt-haupt { display: grid; gap: 2px; min-width: 0; padding: 4px 0; border: 0; background: none; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.bg-punkt-haupt strong { font-size: 16px; font-weight: 600; overflow-wrap: anywhere; }
.bg-punkt-haupt span { color: var(--muted); font-size: 13.5px; }
.bg-punkt-stand { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; min-width: 0; }
.bg-punkt .inline-actions { justify-content: flex-end; }
@media (max-width: 900px) {
  .bg-punkt { grid-template-columns: minmax(0, 1fr); }
  .bg-punkt .inline-actions { justify-content: flex-start; }
}

.bg-frage { display: grid; gap: 8px; padding: 12px 0; border-top: 1px solid var(--line); }
.bg-frage-text { font-size: 16px; font-weight: 600; line-height: 1.35; }
.bg-wahl { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.bg-wahl label { position: relative; display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 8px 12px; border: 1.5px solid var(--line-strong); border-radius: 12px; color: var(--ink); font-weight: 600; cursor: pointer; }
.bg-wahl input { position: absolute; opacity: 0; pointer-events: none; }
.bg-wahl label:has(input:focus-visible) { outline: 3px solid var(--focus, rgba(37, 99, 235, .3)); outline-offset: 2px; }
.bg-wahl .bg-ok:has(input:checked) { border-color: var(--green); background: var(--green-soft); color: var(--green-ink, var(--green)); }
.bg-wahl .bg-mangel:has(input:checked) { border-color: var(--red); background: var(--red-soft); color: var(--red-ink, var(--red)); }
.bg-rest { margin-right: auto; color: var(--muted); font-size: 14px; }

.bg-fertig { display: flex; align-items: center; gap: 14px; }
.bg-fertig > div { display: grid; gap: 2px; }
.bg-fertig strong { font-size: 18px; }
.bg-fertig span { color: var(--muted); }
.bg-fertig-zeichen { display: grid; place-items: center; width: 52px; height: 52px; flex: 0 0 auto; border-radius: 50%; }
.bg-fertig-zeichen.gut { background: var(--green-soft); color: var(--green-ink, var(--green)); }
.bg-fertig-zeichen.mangel { background: var(--red-soft); color: var(--red-ink, var(--red)); }
.bg-frist { font-size: 24px; font-weight: 600; letter-spacing: -.01em; }

.bg-foto { margin: 0 0 16px; }
.bg-foto img { display: block; max-width: 100%; max-height: 70vh; border-radius: 12px; }
.bg-foto figcaption { margin-top: 6px; color: var(--muted); font-size: 13.5px; }
.bg-gruppe { margin-top: 12px; }
.bg-gruppe .teilnehmer-liste { margin-top: 6px; }
.bg-neu { display: grid; gap: 8px; justify-items: start; margin-top: 14px; padding: 12px; border: 1px dashed var(--line-strong); border-radius: 12px; }
.bg-neu .bg-neu-felder { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap: 8px; width: 100%; }
.bg-monat { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 14px; }
.bg-monat .input { width: auto; }
.bg-mangeltext { color: var(--red-ink, var(--red)); }

/* Checklisten: Karten mit den Prüfpunkten, Gruppen je Art beim Zusammenstellen und die Wahl
   beim Herunterladen. */
.bg-karten { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr)); gap: 18px; align-items: start; margin-top: 18px; }
.bg-karten .card { margin: 0; }
.bg-punkte { margin: 0; padding-left: 22px; display: grid; gap: 4px; color: var(--ink); }
.bg-punkte li { line-height: 1.4; }
.bg-punkte-feld { min-height: 220px; line-height: 1.55; }
.bg-gruppe { border: 1px solid var(--line); border-radius: 12px; padding: 0 12px; }
.bg-gruppe + .bg-gruppe { margin-top: 8px; }
.bg-gruppe > summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 0; cursor: pointer; list-style: none; }
.bg-gruppe > summary::-webkit-details-marker { display: none; }
.bg-gruppe > summary::before { content: "›"; display: inline-block; margin-right: 4px; color: var(--muted); transition: transform .15s ease; }
.bg-gruppe[open] > summary::before { transform: rotate(90deg); }
.bg-gruppe > summary strong { flex: 1; min-width: 0; }
.bg-gruppe > summary span { color: var(--muted); font-size: 13.5px; white-space: nowrap; }
.bg-gruppe[open] { padding-bottom: 12px; }
.bg-gruppe-kopf { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.bg-gruppe-liste { display: grid; gap: 4px; flex: 1 1 260px; min-width: 0; font-weight: 600; font-size: 13.5px; }
/* Die Checkliste einer Begehung, direkt an ihrer Karte gewählt. */
.bg-runde-liste { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.bg-runde-liste > span { color: var(--muted); font-size: 13.5px; font-weight: 600; min-width: 74px; }
.bg-runde-liste .select { flex: 1 1 260px; max-width: 460px; min-width: 0; }
.bg-hinweis { display: flex; align-items: center; gap: 6px; margin: 8px 0 0; color: var(--orange-ink, var(--orange)); font-size: 13.5px; }
.bg-laden { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 12px; }
.bg-laden-knopf { display: grid; gap: 6px; justify-items: start; padding: 16px; border: 1.5px solid var(--line-strong); border-radius: 14px; background: var(--panel, #fff); color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.bg-laden-knopf:hover { border-color: var(--blue); }
.bg-laden-knopf strong { font-size: 16px; }
.bg-laden-knopf span { color: var(--muted); font-size: 13.5px; line-height: 1.4; }

/* Budgetplanung (budget.js): Statusleiste, Summen, Einrichten der Spalten. */
.bu-zahl { display: inline-block; min-width: 20px; margin-left: 4px; padding: 0 6px; border-radius: 999px; background: var(--line); color: var(--muted); font-size: 12px; font-weight: 600; text-align: center; }
.bu-tabelle .bu-zahl-zelle { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.bu-tabelle tfoot td { border-top: 2px solid var(--line-strong); background: var(--panel-soft, transparent); }
.bu-titel { text-align: left; font-weight: 600; }
.bu-status-zelle { min-width: 136px; }
.bu-tabelle th { white-space: normal; vertical-align: bottom; hyphens: auto; -webkit-hyphens: auto; hyphenate-limit-chars: 10 5 5; }
.bu-summe-name { display: none; }
table.als-karten .bu-zahl-zelle { text-align: left; }
table.als-karten > tfoot { display: block; border-top: 2px solid var(--line-strong); }
table.als-karten > tfoot > tr { display: flex; flex-wrap: wrap; gap: 6px 18px; padding: 12px 16px; }
table.als-karten > tfoot td { display: block; border: 0; padding: 0; background: none; }
table.als-karten > tfoot td:empty { display: none; }
table.als-karten .bu-summe-name { display: inline; color: var(--muted); }
.bu-status-wahl { width: 100%; max-width: 150px; }
.bu-mini { display: flex; gap: 3px; margin-top: 6px; max-width: 150px; }
.bu-mini i { flex: 1; height: 4px; border-radius: 2px; background: var(--line); }
.bu-mini i.an { background: var(--green, #2f7d4f); }
.bu-mini.abbruch i { background: var(--red-soft, #f6d5d5); }
.bu-bemerkt { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); font-size: 13px; }
.bu-kopf { display: grid; gap: 12px; }
.bu-kopf-wahl { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.bu-status-label { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14px; }
.bu-leiste { display: flex; margin: 0; padding: 0; list-style: none; border-radius: 12px; overflow: hidden; border: 1px solid var(--line); }
.bu-leiste li { flex: 1 1 0; min-width: 0; padding: 9px 8px; text-align: center; font-size: 12.5px; line-height: 1.25; color: var(--muted); background: var(--panel, #fff); border-left: 1px solid var(--line); overflow-wrap: anywhere; }
.bu-leiste li:first-child { border-left: 0; }
.bu-leiste li.erledigt { background: var(--green-soft); color: var(--green-ink, var(--green)); }
.bu-leiste li.aktuell { background: var(--green, #2f7d4f); color: #fff; font-weight: 700; }
.bu-leiste.abbruch li { background: var(--panel-soft, #f3f4f6); opacity: .7; }
.bu-bemerkung { display: grid; gap: 8px; justify-items: start; }
.bu-bemerkung .textarea { width: 100%; }
.bu-notiz { margin-top: 4px; padding: 8px 10px; border-radius: 10px; background: var(--panel-soft, #f5f6f4); white-space: pre-wrap; }
.bu-euro { display: flex; align-items: center; gap: 8px; }
.bu-euro .input { text-align: right; }
.bu-zeitraum { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.bu-zeitraum .input { flex: 1 1 150px; min-width: 0; }
.bu-spalten { display: grid; gap: 8px; margin: 0 0 12px; padding: 0; list-style: none; }
.bu-spalte { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 200px) auto; gap: 8px; align-items: center; padding: 10px; border: 1px solid var(--line); border-radius: 12px; }
.bu-spalte .bu-optionen { grid-column: 1 / -1; }
.bu-art { color: var(--muted); font-size: 13.5px; }
@media (max-width: 640px) { .bu-spalte { grid-template-columns: 1fr; } .bu-leiste { flex-direction: column; } .bu-leiste li { border-left: 0; border-top: 1px solid var(--line); } .bu-leiste li:first-child { border-top: 0; } }