@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/SpaceGrotesk-600.woff2") format("woff2");
}

:root {
  /* V6 design tokens (gray/white/glass, light-blue highlight, "Apple-style") */
  --bg: #f5f6f8;
  --panel: #ffffff;
  --surface-2: #eef1f4;
  --ink: #1d1d1f;
  --muted: #6e6e73;
  --muted-2: #98989d;
  --line: #dde1e6;
  --line-strong: #ccd2d9;
  --accent: #3e97e8;
  --accent-d: #2c78bf;
  --accent-soft: #eaf3fc;
  --logo-accent: #5d9ae3;
  --logo-ink: #14181d;
  --radius: 12px;
  --radius-lg: 20px;
  --shadow: 0 1px 2px rgba(15, 23, 42, .05), 0 1px 1px rgba(15, 23, 42, .04);
  --shadow-md: 0 4px 16px rgba(15, 23, 42, .08), 0 24px 48px -24px rgba(15, 23, 42, .18);
  --shadow-drawer: 0 30px 70px -20px rgba(15, 23, 42, .32), 0 0 0 1px rgba(15, 23, 42, .04);

  /* Glass surfaces */
  --glass-bg: rgba(255, 255, 255, .55);
  --glass-bg-strong: rgba(255, 255, 255, .74);
  --glass-border: rgba(255, 255, 255, .6);
  --glass-blur: saturate(180%) blur(20px);

  /* Legacy variable names kept so not-yet-migrated views/CSS keep working,
     now pointing at the V4 palette instead of the old blue "glass" theme. */
  --color-bg: var(--bg);
  --color-surface: var(--panel);
  --color-surface-solid: var(--panel);
  --color-border-glass: var(--line);
  --color-border: var(--line);
  --color-text: var(--ink);
  --color-muted: var(--muted);
  --color-primary: var(--accent);
  --color-primary-dark: var(--accent-d);
  --color-primary-soft: var(--accent-soft);
  --color-accent: #b42318;
  --color-accent-soft: #fee4e2;
  --color-danger: #b42318;
  --color-success: #166534;
  --color-kat-hauptraum: #ef4444;
  --color-kat-nebenraum: #3b82f6;
  --color-kat-personalraum: #22c55e;
  --color-kat-erschliessungsraum: #94a3b8;
  --blur: none;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", Helvetica, Arial, sans-serif;
  background:
    radial-gradient(1100px 620px at 15% -10%, rgba(62, 151, 232, .08), transparent 60%),
    radial-gradient(900px 520px at 100% 5%, rgba(148, 163, 184, .10), transparent 55%),
    var(--bg);
  background-attachment: fixed;
  color: var(--ink);
  font-size: 15px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;
}

a { color: var(--accent-d); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3 { line-height: 1.25; margin: 0 0 0.6em; letter-spacing: -.01em; }
h1 { font-size: 1.6rem; }
h2 { font-size: 1.25rem; }
h3 { font-size: 1.05rem; }

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px 20px 60px;
}

/* Frosted-glass panel utility */
.glass {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
}

/* ===== Topbar (Marke + Tabs + Projekt) ===== */
.topnav {
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 12px 22px;
  position: sticky;
  top: 0;
  z-index: 30;
  border-bottom: 1px solid var(--glass-border);
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  margin: 0;
  border-radius: 0;
}
.topnav-inner { display: contents; }
.brand { font-size: 15px; margin: 0; font-weight: 600; letter-spacing: -.01em; flex: 0 0 auto; color: var(--ink); display: flex; align-items: center; gap: 9px; }
.brand-icon { height: 24px; width: auto; display: block; color: var(--logo-accent); flex: 0 0 auto; }
.brand-word { font-family: "Space Grotesk", -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", Helvetica, Arial, sans-serif; font-weight: 600; font-size: 19px; letter-spacing: -.01em; color: var(--logo-ink); }

.tabbar { display: flex; gap: 2px; background: var(--surface-2); border-radius: 980px; padding: 3px; margin: 0 auto; }
.tabbar .tab {
  padding: 7px 16px; border: none; background: transparent; font-weight: 500; font-size: 13px;
  color: var(--muted); border-radius: 980px; transition: background .18s ease, color .18s ease;
  cursor: pointer;
}
.tabbar .tab:hover { background: transparent; color: var(--ink); text-decoration: none; }
.tabbar .tab.active { color: var(--ink); background: #fff; box-shadow: var(--shadow-md); font-weight: 600; }
.tabbar .tab.disabled { color: var(--muted-2); cursor: default; }
.tabbar .tab.disabled:hover { color: var(--muted-2); }

.topnav-user {
  font-size: 12.5px; color: var(--muted); flex: 0 0 auto; white-space: nowrap;
  display: flex; align-items: center; gap: 10px;
}
.curproj { color: var(--muted); }
.curproj b { color: var(--ink); font-weight: 600; }
.topnav-links { display: flex; gap: 16px; margin-left: auto; }
.link-button { background: none; border: none; color: var(--accent-d); cursor: pointer; font-size: 0.9rem; padding: 0; }
.link-button:hover { text-decoration: underline; }
.inline-form { display: inline; }

/* Flash */
.flash { padding: 10px 14px; border-radius: var(--radius); margin-bottom: 16px; font-size: 0.92rem; }
.flash-success { background: #eaf6ee; color: #166534; border: 1px solid #bfe3cb; }
.flash-error { background: #fdecea; color: #b42318; border: 1px solid #f3c6c1; }
.flash-info { background: var(--accent-soft); color: var(--accent-d); border: 1px solid #cfe1f5; }

/* button/.button set display: inline-block below, which beats the browser's
   default [hidden] { display: none } rule (author styles win over UA styles
   regardless of specificity) - restore it explicitly. */
[hidden] { display: none !important; }

/* Buttons */
.button, button, input[type="submit"] {
  display: inline-block;
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 100%, white 12%), var(--accent));
  color: #fff;
  border: 1px solid var(--accent);
  border-radius: 980px;
  padding: 8px 16px;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: .15s;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 1px 2px rgba(72, 48, 145, .18);
}
.button:hover, button:hover { background: var(--accent-d); border-color: var(--accent-d); text-decoration: none; }
.button-secondary {
  background: var(--glass-bg); color: var(--ink); border: 1px solid var(--glass-border); font-weight: 500;
  box-shadow: none; backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
}
.button-secondary:hover { background: var(--glass-bg-strong); border-color: var(--line-strong); }
.button-danger { background: #b42318; border-color: #b42318; }
.button-danger:hover { background: #96201a; border-color: #96201a; }
.button-small { padding: 4px 10px; font-size: 0.8rem; }

/* Forms */
form.card-form { max-width: 640px; }
.field { margin-bottom: 16px; }
.field label { display: block; font-weight: 600; margin-bottom: 4px; font-size: 0.88rem; color: var(--ink); }
.field .hint { color: var(--muted); font-size: 0.8rem; margin-top: 3px; }
.field-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 4px; }
.field-head label { margin-bottom: 0; }
.link-button { background: none; border: none; padding: 0; font-family: inherit; font-size: 12.5px; font-weight: 600;
  color: var(--accent-d); cursor: pointer; text-decoration: underline; white-space: nowrap; }
.link-button:hover { color: var(--accent); }
input[type="text"], input[type="email"], input[type="password"], input[type="number"],
input[type="date"], textarea, select {
  width: 100%;
  padding: 7px 11px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  font-size: 0.92rem;
  font-family: inherit;
  background: #fff;
  color: var(--ink);
}
select:focus, input:focus, textarea:focus { outline: 2px solid var(--accent-soft); border-color: var(--accent); }
textarea { min-height: 80px; resize: vertical; }
.radio-group { display: flex; gap: 20px; flex-wrap: wrap; }
.radio-option {
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 10px 14px; flex: 1; min-width: 220px; cursor: pointer;
}
.radio-option input { width: auto; margin-right: 8px; }
.radio-option.checked { border-color: var(--accent); background: var(--accent-soft); }
.checkbox-list { display: flex; flex-direction: column; gap: 6px; max-height: 260px; overflow-y: auto;
  border: 1px solid var(--line); border-radius: var(--radius); padding: 10px; background: #fff; }
.checkbox-list label { font-weight: 400; display: flex; align-items: center; gap: 8px; }
.checkbox-list input { width: auto; }

/* Project photo upload */
.photo-upload { display: flex; gap: 16px; align-items: center; }
.photo-preview {
  width: 120px; height: 90px; flex-shrink: 0; border-radius: var(--radius); overflow: hidden;
  border: 1px solid var(--line); background: var(--surface-2); display: flex; align-items: center; justify-content: center;
}
.photo-preview img { width: 100%; height: 100%; object-fit: cover; }
.photo-preview-large { width: 100%; max-width: 360px; height: 200px; margin-bottom: 16px; }
.photo-preview-empty { color: var(--muted); font-size: 0.78rem; text-align: center; padding: 0 8px; }
.photo-upload-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.photo-upload-btn { cursor: pointer; }
.photo-upload-actions .hint { flex-basis: 100%; }

/* Cards */
.card {
  border-radius: var(--radius-lg);
  padding: 20px 22px;
  margin-bottom: 20px;
}
.card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.page-header { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 20px; gap: 16px; flex-wrap: wrap; }
.page-header .subtitle { color: var(--muted); margin-top: -8px; }
.page-header .actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* Tables */
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 9px 10px; border-bottom: 1px solid #eef1f5; font-size: 0.9rem; vertical-align: middle; }
th { color: var(--muted); font-weight: 600; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; background: #fcfdfe; }
tr:last-child td { border-bottom: none; }
.actions-cell { white-space: nowrap; text-align: right; }
.actions-cell form { display: inline; }

/* Badges */
.badge {
  display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 0.72rem;
  font-weight: 700; background: var(--surface-2); color: var(--muted); text-transform: uppercase; letter-spacing: .3px;
}
.badge-admin { background: var(--accent-soft); color: var(--accent-d); }
.badge-hauptraum { background: #fee4e2; color: #b42318; }
.badge-nebenraum { background: #dbeafe; color: #1d4ed8; }
.badge-personalraum { background: #dcfce7; color: #166534; }
.badge-erschliessungsraum { background: #eef2f7; color: #475569; }

/* Empty state */
.empty-state { text-align: center; padding: 60px 20px; color: var(--muted); }
.empty-state h1, .empty-state h2 { color: var(--ink); }

/* Auth pages */
.auth-page { max-width: 400px; margin: 40px auto; }

/* Project list */
.section-title { font-size: 1rem; color: var(--muted); margin: 28px 0 12px; }
.section-title:first-of-type { margin-top: 0; }
.project-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; margin-bottom: 8px; }
.project-card h3 { margin-bottom: 4px; }
.project-card .meta { color: var(--muted); font-size: 0.85rem; margin-bottom: 4px; }
.project-card .meta-edited { font-size: 0.78rem; margin-bottom: 10px; }
.project-card .actions { display: flex; gap: 10px; margin-top: 12px; }

.toolbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* KPIs */
.kpis { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 18px; }
.kpi {
  background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: 16px;
  padding: 12px 18px; min-width: 130px; box-shadow: var(--shadow);
  backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
}
.kpi .lbl { font-size: 10.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; font-weight: 600; }
.kpi .val { font-size: 20px; font-weight: 600; margin-top: 3px; letter-spacing: -.2px; }
.kpi.hero { background: var(--accent-d); color: #fff; border-color: var(--accent-d); }
.kpi.hero .lbl { color: #d6e9fa; }

.layout { display: flex; align-items: start; gap: 0; }

/* ===== Seiten-Drawer (Funktionsbereiche) ===== */
.side-rail {
  position: sticky; top: 74px; align-self: start; flex: 0 0 34px; height: calc(100vh - 150px);
  border: none; background: transparent; color: var(--muted); cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; border-radius: 10px;
}
.side-rail:hover { background: var(--surface-2); color: var(--ink); }
.side-rail .ico { font-size: 14px; opacity: .7; }
.side-rail .lbl { writing-mode: vertical-rl; font-size: 11.5px; letter-spacing: .06em; font-weight: 600; }
.side-backdrop {
  position: fixed; inset: 0; background: rgba(0, 0, 0, .18); backdrop-filter: blur(2px);
  opacity: 0; pointer-events: none; transition: opacity .25s ease; z-index: 150;
}
.side-backdrop.show { opacity: 1; pointer-events: auto; }
aside.tree, .side-drawer {
  position: fixed; top: 0; bottom: 0; left: 0; width: 320px; max-width: 86vw; z-index: 151;
  background: var(--glass-bg-strong); box-shadow: var(--shadow-drawer); border-radius: 0 20px 20px 0;
  border-right: 1px solid var(--glass-border);
  backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  padding: 20px 18px; overflow-y: auto; transform: translateX(-100%); transition: transform .28s cubic-bezier(.25, .8, .4, 1);
}
aside.tree.show, .side-drawer.show { transform: translateX(0); }
aside.tree h2, .side-drawer h2 { font-size: 12px; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); margin: 2px 0 14px; }
details.fb { border: 1px solid var(--line); border-radius: 14px; margin-bottom: 8px; overflow: hidden; }
details.fb > summary { list-style: none; cursor: pointer; padding: 9px 11px; display: flex; align-items: center; gap: 9px; font-weight: 600; }
details.fb > summary::-webkit-details-marker { display: none; }
.dot { width: 12px; height: 12px; border-radius: 3px; border: 1px solid rgba(0, 0, 0, .15); flex: none; }
.fb-code { font-variant-numeric: tabular-nums; color: var(--muted); font-weight: 600; font-size: 12px; }
.fs-list { padding: 4px 8px 8px; }
.fs-item { display: flex; align-items: center; gap: 8px; width: 100%; padding: 6px 7px; border-radius: 6px; font-weight: 500; color: var(--ink); }
.fs-item:hover { background: #f1f4f8; text-decoration: none; }
.fs-item.sel { background: var(--accent-soft); color: var(--accent-d); }
.fs-item .fs-code { color: var(--muted); font-variant-numeric: tabular-nums; font-size: 12px; min-width: 34px; }
.fs-count { margin-left: auto; font-size: 10.5px; background: #eef2f7; color: var(--muted); border-radius: 20px; padding: 2px 8px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.fs-count.has { background: #dcfce7; color: #166534; }
.tree-nuf-list { list-style: none; margin: 0; padding: 0; }
.tree-nuf-item a { display: flex; align-items: center; gap: 8px; padding: 8px 8px; border-radius: 6px; font-size: 0.88rem; color: var(--ink); font-weight: 500; }
.tree-nuf-item a:hover { background: #f1f4f8; text-decoration: none; }
.tree-nuf-item.active a { background: var(--accent-soft); color: var(--accent-d); }

/* ===== Work / Katblock / Raumprogramm ===== */
.work { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 18px; }
.work.nolib { grid-template-columns: 1fr; }
@media (max-width: 1080px) { .work { grid-template-columns: 1fr; } }

.ws-head { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 16px; color: #fff; margin-bottom: 14px; }
.ws-head .fb-code { color: inherit; opacity: .85; }
.ws-head h2 { margin: 0; font-size: 16px; font-weight: 650; color: inherit; }
.ws-head .metrics { margin-left: auto; display: flex; gap: 18px; font-size: 13px; font-weight: 600; }
.ws-head .metrics small { opacity: .8; font-weight: 500; display: block; font-size: 10px; text-transform: uppercase; letter-spacing: .4px; }
.ws-head--dark { color: #1a1a1a; }
.ws-actions { display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.ws-note { margin-bottom: 14px; }
.ws-note label { display: block; font-size: 12px; font-weight: 600; color: var(--muted); margin-bottom: 4px; }
.ws-note textarea { width: 100%; min-height: 56px; }
.ws-note-status { display: block; font-size: 12px; color: var(--muted); height: 14px; margin-top: 2px; }

.ov-list { width: 100%; border-collapse: collapse; }
.ov-list th, .ov-list td { padding: 7px 10px; border-bottom: 1px solid #eef1f5; text-align: left; }
.ov-list th { font-size: 11px; text-transform: uppercase; letter-spacing: .4px; color: var(--muted); }
.ov-list td.num, .ov-list th.num { text-align: right; font-variant-numeric: tabular-nums; }
.ov-list .fbrow td { font-weight: 650; background: #f8fafc; }
.ov-list tr.clk { cursor: pointer; }
.ov-list tr.clk:hover td { background: #f1f4f8; }
.ov-list td.clk { cursor: pointer; }
.ov-list td.clk:hover { background: #f1f4f8; }
.ov-dot { display: inline-block; width: 11px; height: 11px; border-radius: 3px; border: 1px solid rgba(0, 0, 0, .15); margin-right: 7px; vertical-align: -1px; }
.rcode { color: var(--muted); font-variant-numeric: tabular-nums; font-size: 12px; }
.howto { color: var(--muted); font-size: 13px; line-height: 1.6; padding: 4px 2px; }
.howto b { color: var(--ink); }

.fb-manage { white-space: nowrap; }
.fb-inline-form { display: inline-flex; align-items: center; gap: 2px; }
.fb-rename-input {
  width: 90px; font-size: 0.8rem; padding: 3px 6px; border: 1px solid var(--line); border-radius: 5px; background: var(--surface);
}
.fb-icon-btn {
  border: none; background: transparent; color: var(--muted); cursor: pointer; font-size: 13px; padding: 3px 6px; border-radius: 5px; line-height: 1;
}
.fb-icon-btn:hover { background: #f1f4f8; color: var(--ink); }
.fb-icon-btn.fb-danger:hover { background: #fee2e2; color: #b91c1c; }
.fb-add-form { display: flex; gap: 8px; margin-top: 12px; }
.fb-add-form input { flex: 1; max-width: 280px; }
.fb-add-form button { white-space: nowrap; }

.catblock {
  position: relative; border: 1px solid var(--glass-border); border-radius: 16px; background: var(--glass-bg-strong);
  margin-bottom: 14px; overflow: hidden; box-shadow: var(--shadow);
  backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  transition: outline-color .15s ease, background-color .15s ease, box-shadow .15s ease, opacity .15s ease;
  outline: 2px solid transparent; outline-offset: -3px;
}
.catblock.cat-hauptraum { border-left: 4px solid #ef4444; }
.catblock.cat-nebenraum { border-left: 4px solid #3b82f6; }
.catblock.cat-personalraum { border-left: 4px solid #22c55e; }
.catblock.cat-erschliessungsraum { border-left: 4px solid #94a3b8; }

/* Drag&Drop aus der Bibliothek: bestaetigt beim Ueberziehen den Block, in
   den der gezogene Raumtyp abgelegt wird - jeder Block ist ein gueltiges Ziel. */
.catblock.drop-ok { outline-color: #16a34a; background: #f0fdf4; box-shadow: 0 0 0 4px rgba(22, 163, 74, .12), var(--shadow-md); }
.cat-title { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: color-mix(in srgb, var(--accent-soft) 55%, transparent); border-bottom: 1px solid var(--line); font-weight: 650; }
.cat-title .sub { margin-left: auto; font-variant-numeric: tabular-nums; }
.cat-title .cnt { color: var(--muted); font-weight: 500; font-size: 12px; }
.kat-tag { font-size: 10px; text-transform: uppercase; letter-spacing: .4px; padding: 2px 7px; border-radius: 20px; font-weight: 700; }
.kat-tag.kat-hauptraum { background: #fee4e2; color: #b42318; }
.kat-tag.kat-nebenraum { background: #dbeafe; color: #1d4ed8; }
.kat-tag.kat-personalraum { background: #dcfce7; color: #166534; }
.kat-tag.kat-erschliessungsraum { background: #eef2f7; color: #475569; }

.catblock table { width: 100%; border-collapse: collapse; }
.catblock th, .catblock td { padding: 6px 10px; text-align: left; border-bottom: 1px solid #eef1f5; vertical-align: middle; }
.catblock th { font-size: 11px; text-transform: uppercase; letter-spacing: .4px; color: var(--muted); font-weight: 600; background: #fcfdfe; }
.catblock td.num, .catblock th.num { text-align: right; font-variant-numeric: tabular-nums; }
tr.room input.nm { width: 100%; padding: 3px 6px; border-color: transparent; background: transparent; font-weight: 600; }
tr.room input.bem { width: 100%; padding: 2px 6px; border-color: transparent; background: transparent; font-size: 12px; color: var(--muted); margin-top: 2px; }
tr.room input.nm:hover, tr.room input.nm:focus, tr.room input.bem:hover, tr.room input.bem:focus { border-color: var(--line); background: #fff; }
tr.room .room-subline { display: flex; gap: 6px; }
tr.room .room-subline input.uns { flex: 0 0 130px; }
tr.room input[type=number] { width: 72px; padding: 4px 6px; text-align: right; }
tr.room.child { background: #fbfdff; }
tr.room.child td:first-child { box-shadow: inset 3px 0 0 #3b82f6; }
tr.room.child .rcode { padding-left: 26px; position: relative; }
tr.room.child .rcode::before { content: "\21B3"; position: absolute; left: 7px; color: #3b82f6; font-weight: 700; }
tr.room.child .nc-code { padding-left: 26px; }
tr.room.child input.nm { padding-left: 24px; }
tr.room.child .room-subline { padding-left: 18px; }
.rcode-cell { white-space: nowrap; }
.rcode-cell .rcode { display: block; font-weight: 600; }
.rcode-cell .nc-code { display: block; color: var(--muted); font-variant-numeric: tabular-nums; font-size: 11px; }
tr.room { transition: background-color .15s ease; }
tr.room.rowdrag { outline: 2px dashed var(--accent); outline-offset: -2px; background: var(--accent-soft); }
@keyframes room-just-added { from { background-color: #d1fae5; } to { background-color: transparent; } }
tr.room.just-added { animation: room-just-added 900ms ease-out; }
.rctrl { display: inline-flex; align-items: center; gap: 3px; margin-right: 5px; vertical-align: middle; }
.rgrip { cursor: grab; color: #94a3b8; font-size: 13px; line-height: 1; user-select: none; }
.rgrip:active { cursor: grabbing; }
.rmv { border: 1px solid var(--line); background: #fff; color: #1d4ed8; border-radius: 5px; padding: 0 5px; font-size: 12px; line-height: 18px; cursor: pointer; }
.rmv:hover { background: #eff6ff; }
.del { color: #b42318; border-color: transparent; background: transparent; padding: 3px 7px; }
.del:hover { background: #fee4e2; }
.catfoot { padding: 8px 12px; border-top: 1px solid #eef1f5; background: #fcfdfe; }
.catfoot button { font-size: 12px; padding: 5px 9px; }
tr.room-empty td { padding: 20px 16px; text-align: center; color: var(--muted); font-size: 13px; border-bottom: none; }

.drop-toast {
  position: absolute; top: 10px; right: 14px; z-index: 5;
  background: #16a34a; color: #fff; font-size: 11.5px; font-weight: 700;
  padding: 4px 10px; border-radius: 999px; opacity: 0; transform: translateY(-4px);
  transition: opacity .18s ease, transform .18s ease; pointer-events: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .18);
}
.drop-toast.show { opacity: 1; transform: translateY(0); }

/* Library (Programm-Sidebar) */
.library {
  position: sticky; top: 14px; align-self: start; border: 1px solid var(--glass-border); border-radius: 18px;
  background: var(--glass-bg-strong); box-shadow: var(--shadow); max-height: calc(100vh - 30px); overflow: auto;
  backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
}
.library h3 {
  margin: 0; padding: 12px 14px; font-size: 13px; border-bottom: 1px solid var(--line); position: sticky; top: 0;
  background: color-mix(in srgb, var(--glass-bg-strong) 100%, transparent);
  backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
}
.library .lib-body { padding: 10px 12px; }
.libcard {
  display: flex; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 8px;
  padding: 7px 9px; margin-bottom: 6px; cursor: grab; background: rgba(255, 255, 255, .55);
  transition: opacity .12s ease, border-color .12s ease, background-color .12s ease;
}
.libcard:hover { border-color: var(--accent); background: var(--accent-soft); }
.libcard.dragging { opacity: .4; cursor: grabbing; }
.libcard .nm { font-weight: 600; font-size: 13px; }
.libcard .meta { color: var(--muted); font-size: 11px; }
.libcard .add { margin-left: auto; border: none; background: none; color: var(--accent); font-weight: 700; font-size: 16px; padding: 0 4px; cursor: pointer; }
.grip { color: #cbd5e1; cursor: grab; }
.lib-search-input { width: 100%; margin-bottom: 12px; font-size: 13px; padding: 6px 9px; }
.lib-kat-group { margin-bottom: 14px; }
.lib-kat-group:last-child { margin-bottom: 0; }
.lib-kat-heading { display: flex; align-items: center; gap: 8px; font-weight: 650; font-size: 12.5px; padding: 4px 2px 6px; }
.lib-kat-heading .cnt { margin-left: auto; color: var(--muted); font-weight: 500; font-size: 11.5px; }

/* Raumbibliothek: Kategorie-Gruppen + Filterleiste */
.lib-cat-toggle { display: flex; align-items: center; width: 100%; border: none; border-radius: 0; cursor: pointer; text-align: left; font: inherit; }
.lib-cat-toggle .chev { margin-left: auto; color: var(--muted-2); font-size: 12px; }
details.catblock > summary { list-style: none; }
details.catblock > summary::-webkit-details-marker { display: none; }
.lib-summary { font-size: 12.5px; color: var(--muted); padding: 0 2px 10px; }
.lib-filterbar { display: flex; gap: 7px; align-items: center; flex-wrap: wrap; }
.lib-filter-lbl { font-size: 11.5px; color: var(--muted-2); font-weight: 600; text-transform: uppercase; letter-spacing: .3px; margin-right: 2px; display: block; width: 100%; margin-bottom: 4px; }
.lib-chip {
  display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600;
  border: 1px solid var(--line-strong); background: #fff; color: var(--muted); border-radius: 20px; padding: 5px 12px;
}
.lib-chip .dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.dot.kat-dot-hauptraum { background: #ef4444; }
.dot.kat-dot-nebenraum { background: #3b82f6; }
.dot.kat-dot-personalraum { background: #22c55e; }
.dot.kat-dot-erschliessungsraum { background: #94a3b8; }
.lib-chip.on { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-d); }
.lib-chip.warn.on { border-color: #f0b93b; background: #fff7e6; color: #7a5a12; }
.lib-chip.clear { color: var(--muted-2); border-style: dashed; }
.lib-hint { color: var(--muted); font-size: 13px; padding: 14px 16px; }

.lib-table { width: 100%; border-collapse: collapse; }
.lib-table th, .lib-table td { padding: 6px 10px; border-bottom: 1px solid #eef1f5; text-align: left; vertical-align: top; }
.lib-table th { font-size: 11px; text-transform: uppercase; letter-spacing: .4px; color: var(--muted); background: #fcfdfe; }
.lib-table td.num, .lib-table th.num { text-align: right; }
.area-compact { font-variant-numeric: tabular-nums; font-size: 13px; color: var(--ink); white-space: nowrap; }
.area-compact .lo { color: var(--muted-2); }
.area-compact .unit { color: var(--muted); font-size: 11.5px; }

/* Raumbibliothek: Inline-Bearbeitung direkt in der Liste */
.lib-table input[type="text"] { min-width: 220px; padding: 5px 8px; font-size: 0.85rem; }
.lib-table select { width: auto; min-width: 84px; padding: 5px 6px; font-size: 0.85rem; }
.lib-table .area-edit input[type="number"] { width: 56px; padding: 4px 5px; text-align: right; font-size: 0.85rem; }
.lib-table input.nc-code-input { min-width: 0; width: 44px; padding: 5px 6px; text-align: center; }
.lib-del { color: var(--muted); border-color: transparent; background: transparent; padding: 3px 8px; font-size: 15px; line-height: 1; cursor: pointer; border-radius: 6px; }
.lib-del:hover { color: #b42318; background: #fee4e2; }

/* Flaechenrichtwerte: Klick zum Bearbeiten */
.area-view { cursor: pointer; border-radius: 6px; padding: 2px 4px; margin: -2px -4px; }
.area-view:hover, .area-view:focus-visible { background: var(--accent-soft); outline: none; }
.area-edit { display: inline-flex; align-items: center; gap: 4px; }
.area-edit[hidden] { display: none; }
.area-edit button { border: none; border-radius: 6px; width: 22px; height: 22px; padding: 0; cursor: pointer; font-size: 13px; line-height: 1; }
.area-confirm { background: var(--accent); color: #fff; }
.area-confirm:hover { background: var(--accent-d); }
.area-cancel { background: var(--surface-2); color: var(--muted); }
.area-cancel:hover { background: var(--line); color: var(--ink); }

/* Zuordnung: Kategorien/Funktionsstellen direkt sichtbar + Bearbeiten per Modal */
.kategorie-cell { display: flex; flex-wrap: wrap; gap: 4px; max-width: 150px; }
.zuordnung-cell { max-width: 260px; }
.zuordnung-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 4px; }
.tag { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; white-space: nowrap; }
.tag-kat { background: var(--accent-soft); color: var(--accent-d); }
.tag-fs { background: var(--surface-2); color: var(--muted); }
/* Zusammengefasste Zuordnung: ein ganzer Funktionsbereich bzw. alle Bereiche. */
.tag-fb { background: var(--surface-2); color: var(--ink); display: inline-flex; align-items: center; gap: 5px; }
.tag-fb .dot { width: 8px; height: 8px; border-radius: 50%; border: none; }
.tag-fb-all { background: var(--accent-soft); color: var(--accent-d); }
button.tag { border: none; font-family: inherit; cursor: pointer; }
button.tag-kat:hover { background: var(--accent); color: #fff; }
.zuordnung-empty { font-size: 12px; color: #b45309; font-weight: 600; }
.zuordnung-empty-btn { border: none; background: none; padding: 0; font-family: inherit; cursor: pointer; text-decoration: underline; }
.zuordnung-empty-btn:hover { color: #92400e; }
.zuordnung-link { background: none; border: none; padding: 0; color: var(--accent-d); font-size: 12.5px; font-weight: 600; cursor: pointer; text-decoration: underline; }
.zuordnung-link:hover { color: var(--accent); }

/* Zuordnung: Modal */
.modal-backdrop {
  position: fixed; inset: 0; background: rgba(0, 0, 0, .28); backdrop-filter: blur(2px); z-index: 200;
}
.modal {
  position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 201;
  width: 640px; max-width: 92vw; max-height: 86vh; display: flex; flex-direction: column;
  background: var(--glass-bg-strong); box-shadow: var(--shadow-drawer); border: 1px solid var(--glass-border);
  border-radius: 20px; backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
}
.modal-header { display: flex; align-items: center; justify-content: space-between; padding: 18px 22px; border-bottom: 1px solid var(--glass-border); }
.modal-header h2 { font-size: 16px; margin: 0; }
.modal-close { background: none; border: none; font-size: 20px; line-height: 1; color: var(--muted); cursor: pointer; padding: 4px; }
.modal-close:hover { color: var(--ink); }
.modal-body { padding: 18px 22px; overflow-y: auto; display: flex; flex-direction: column; gap: 16px; }
.modal-footer { display: flex; justify-content: flex-end; gap: 10px; padding: 16px 22px; border-top: 1px solid var(--glass-border); }
.modal[hidden], .modal-backdrop[hidden] { display: none; }

/* Totals / overview */
.totals-table td.num, .totals-table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.totals-summary { display: flex; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
.stat-tile {
  border-radius: 16px;
  padding: 12px 18px; min-width: 150px;
}
.stat-tile .label { color: var(--muted); font-size: 10.5px; text-transform: uppercase; letter-spacing: .5px; font-weight: 600; }
.stat-tile .value { font-size: 20px; font-weight: 600; margin-top: 3px; }

.help-text { color: var(--muted); font-size: 0.85rem; }

/* ===== Hilfe-System (FAB + Slide-in-Panel) ===== */
.help-fab {
  position: fixed; right: 22px; bottom: 22px; width: 50px; height: 50px; border-radius: 50%;
  background: var(--accent); border: none; color: #fff; font-size: 24px; font-weight: 700; line-height: 1;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .22); z-index: 1400; display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: .15s;
}
.help-fab:hover { background: var(--accent-d); transform: translateY(-1px); box-shadow: 0 6px 18px rgba(0, 0, 0, .28); }
.help-fab.open { background: var(--accent-d); }
.help-panel {
  position: fixed; top: 0; right: 0; height: 100vh; width: 380px; max-width: 92vw; background: var(--glass-bg-strong);
  border-left: 1px solid var(--glass-border); box-shadow: -6px 0 28px rgba(43, 24, 90, .18); z-index: 1390;
  backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  transform: translateX(100%); transition: transform .22s ease; display: flex; flex-direction: column;
}
.help-panel.open { transform: translateX(0); }
.help-head { display: flex; align-items: center; gap: 10px; padding: 16px 18px; border-bottom: 1px solid var(--line); }
.help-head .hi {
  width: 30px; height: 30px; border-radius: 50%; background: var(--accent); color: #fff; display: flex;
  align-items: center; justify-content: center; font-weight: 700; flex-shrink: 0;
}
.help-head h2 { margin: 0; font-size: 15px; }
.help-head .x { margin-left: auto; border: none; background: none; font-size: 20px; color: var(--muted); padding: 2px 8px; border-radius: 7px; }
.help-head .x:hover { background: var(--bg); color: var(--ink); }
.help-body { padding: 16px 18px; overflow-y: auto; flex: 1; font-size: 13.5px; line-height: 1.6; color: var(--ink); }
.help-body .lead { color: var(--muted); margin: 0 0 14px; }
.help-step { display: flex; gap: 11px; margin-bottom: 13px; }
.help-step .n {
  flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%; background: var(--accent-soft); color: var(--accent-d);
  font-weight: 700; font-size: 13px; display: flex; align-items: center; justify-content: center;
}
.help-step .t { flex: 1; }
.help-step .t b { color: var(--ink); }
.help-tip {
  margin-top: 10px; background: #fff7e6; border: 1px solid #f4d58a; border-radius: 9px; padding: 10px 12px;
  font-size: 12.5px; color: #7a5a12;
}
.help-tip b { color: #6b4d0d; }

/* Team / Zugaenge */
.invite-form { display: grid; grid-template-columns: 1fr 1fr auto auto; gap: 12px; align-items: end; }
.invite-form .field { margin: 0; }
.invite-form button { white-space: nowrap; }
@media (max-width: 860px) { .invite-form { grid-template-columns: 1fr; } }
.invite-link-card { border-color: var(--accent); }
.invite-link-row { display: flex; gap: 8px; align-items: center; }
.invite-link-row input {
  flex: 1; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px;
  background: var(--surface-2); color: var(--ink);
}
.badge-expired { background: #fee4e2; color: #b42318; }
.auth-page .auth-alt { margin-top: 14px; font-size: 13px; color: var(--muted); text-align: center; }
.auth-page .auth-alt a { color: var(--accent-d); }
.auth-page .auth-intro { color: var(--muted); font-size: 13.5px; margin: -4px 0 16px; line-height: 1.55; }
.auth-page input[readonly] { background: var(--surface-2); color: var(--muted); }

/* Betreiber-Bereich: Kunde anlegen */
.owner-form { display: grid; grid-template-columns: 1fr 1fr 1fr auto; gap: 12px; align-items: end; }
.owner-form .field { margin: 0; }
.owner-form button { white-space: nowrap; }
@media (max-width: 980px) { .owner-form { grid-template-columns: 1fr; } }

/* Gesperrte Zugaenge / Loeschen mit Namensbestaetigung */
.row-blocked td { opacity: .55; }
.row-blocked td:first-child { opacity: 1; }
.danger-details summary {
  cursor: pointer; font-size: 12.5px; color: #b42318; padding: 3px 8px; border-radius: 6px;
  display: inline-block; list-style: none;
}
.danger-details summary::-webkit-details-marker { display: none; }
.danger-details summary:hover { background: #fee4e2; }
.danger-details[open] summary { font-weight: 600; }
.danger-body {
  margin-top: 8px; padding: 12px; border: 1px solid #f4c7c3; border-radius: 9px; background: #fff8f7;
  max-width: 460px;
}
.danger-body p { margin: 0 0 10px; font-size: 12.5px; line-height: 1.55; color: #7a2721; }
.danger-body label { display: block; font-size: 12px; color: var(--muted); margin-bottom: 4px; }
.danger-body input[type="text"] { width: 100%; margin-bottom: 8px; font-size: 13px; }

/* Betreiber: Zugangsliste je Buero */
.member-details summary {
  cursor: pointer; font-size: 12.5px; color: var(--accent-d); padding: 3px 8px; border-radius: 6px;
  display: inline-block; list-style: none;
}
.member-details summary::-webkit-details-marker { display: none; }
.member-details summary:hover { background: var(--accent-soft); }
.member-body { margin: 8px 0 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface-2); }
.member-table { border-collapse: collapse; width: 100%; }
.member-table td { padding: 5px 8px; border-bottom: 1px solid var(--line); font-size: 12.5px; vertical-align: middle; }
.member-table tr:last-child td { border-bottom: none; }
.member-mail { color: var(--muted); font-size: 11.5px; }
.member-hint { margin: 8px 0 0; font-size: 11.5px; color: var(--muted); line-height: 1.5; }

/* ===== Auswertung (Zusatzoption) ===== */
.auswertung-filter { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.auswertung-filter .field { margin-bottom: 0; }
.auswertung-filter select { min-width: 200px; }
.auswertung-filter-actions { display: flex; gap: 8px; align-items: center; }
.auswertung-filter-info { margin-left: auto; color: var(--muted); font-size: 12.5px; }
/* Die Auswertungstabellen haben bis zu sechs Spalten - auf schmalen Fenstern
   scrollt die Tabelle, statt das Layout zu sprengen. */
.table-scroll { overflow-x: auto; }
.teaser-list { margin: 0 0 14px; padding-left: 20px; line-height: 1.7; }
.teaser-list li { margin-bottom: 4px; }

/* ===== Tarif: Belegung und Archiv ===== */
/* Zaehler neben der Seitenueberschrift ("2 / 3 aktive Projekte"). Bewusst
   ruhig gehalten - erst wenn der Tarif voll ist, faellt er auf. */
.plan-usage {
  align-self: center; font-size: 12.5px; color: var(--muted); white-space: nowrap;
  border: 1px solid var(--line); border-radius: 980px; padding: 5px 12px; background: var(--surface-2);
}
.plan-usage-voll { color: #b42318; border-color: #f4c7c3; background: #fff8f7; font-weight: 600; }
/* Ein Knopf, der nicht geht, statt eines fehlenden Knopfes: sonst suchen
   Nutzer das "Neues Projekt" und finden keine Erklaerung. */
.button-disabled {
  display: inline-block; border-radius: 980px; padding: 8px 16px; font-size: 0.9rem; font-weight: 600;
  background: var(--surface-2); color: var(--muted-2); border: 1px solid var(--line); cursor: not-allowed;
}
.project-card-archiv { opacity: .72; }
.project-card-archiv:hover { opacity: 1; }
.archiv-details { margin-top: 26px; }
.archiv-details summary { cursor: pointer; list-style: none; }
.archiv-details summary::-webkit-details-marker { display: none; }
.archiv-details summary::after { content: ' ▸'; color: var(--muted); }
.archiv-details[open] summary::after { content: ' ▾'; }
.archiv-details .lib-hint { padding-left: 0; }
/* Betreiber: Tarifspalte und Sonderabsprachen */
.plan-note { margin-top: 6px; font-size: 11.5px; color: var(--muted); }
/* Sitzt in einer Tabellenzelle mit white-space: nowrap - ohne feste Breite
   und normalen Umbruch schiebt das Formular die Zelle aus dem Fenster. */
.limits-body { max-width: 340px; white-space: normal; text-align: left; }
.limits-form { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: end; }
.limits-form .field { margin: 0; }
.limits-form label { font-size: 12px; color: var(--muted); font-weight: 500; }
.limits-form button { grid-column: 1 / -1; justify-self: start; }

/* Projekt-Papierkorb: kompakte Liste statt Karten - die Eintraege sind
   Verwaltung, keine Arbeitsflaeche, und die Restfrist soll auf einen Blick
   ablesbar sein. */
.bin-table { margin-top: 12px; }
.bin-table th { text-align: left; font-size: 12px; color: var(--muted); font-weight: 600; padding: 6px 10px; }
.bin-table td { padding: 10px; border-top: 1px solid var(--line); vertical-align: top; }
.bin-table .meta { color: var(--muted); font-size: 0.85rem; margin-top: 2px; }
.bin-actions { white-space: nowrap; text-align: right; }
.bin-actions .inline-form { display: inline-block; margin-left: 12px; }
.link-button-danger { color: #b42318; }
.link-button-danger:hover { color: #96201a; }

/* ===== Schmale Bildschirme =====
   Das Raumprogramm selbst bleibt eine Arbeitsflaeche fuer den grossen
   Bildschirm - eine 10-spaltige Flaechentabelle wird auf dem Handy nicht
   besser, egal wie man sie umbricht. Was hier gerade gerueckt wird, ist alles
   drumherum: Navigation, Projektliste, Formulare und Uebersichten sollen auf
   Tablet und Telefon lesbar und bedienbar sein, statt seitlich aus dem
   Fenster zu laufen. */
@media (max-width: 900px) {
  .container { padding: 18px 14px 48px; }

  /* Die Topbar hat drei Bloecke (Marke, Tabs, Nutzer), die nebeneinander
     nicht mehr passen. Die Tabs rutschen in eine eigene Zeile und werden
     seitlich scrollbar, statt sich zu stauchen. */
  .topnav { flex-wrap: wrap; gap: 10px 14px; padding: 10px 14px; }
  .tabbar {
    order: 3; width: 100%; margin: 0;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .tabbar::-webkit-scrollbar { display: none; }
  .tabbar .tab { flex: 0 0 auto; }
  .topnav-user { margin-left: auto; flex-wrap: wrap; justify-content: flex-end; row-gap: 4px; }
  /* Der Projektname macht die Topbar auf dem Telefon sonst zwei Zeilen hoch,
     obwohl er gleich darunter als Ueberschrift steht. */
  .curproj { display: none; }

  /* Breite Tabellen (Uebersichten, Team, Betreiber, Papierkorb) duerfen in
     ihrer Karte scrollen - die Seite selbst soll nicht waagerecht wandern. */
  .card { overflow-x: auto; }

  .page-header { align-items: flex-start; }
  .project-grid { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  .brand-word { font-size: 17px; }
  .page-header h1 { font-size: 1.5rem; }
  /* Aktionen als Block: nebeneinander sind die Knoepfe schmaler als der
     Daumen, der sie treffen soll. */
  .page-header .actions { width: 100%; }
  .page-header .actions .button,
  .page-header .actions .inline-form { flex: 1 1 auto; text-align: center; }

  /* Die Papierkorb-Tabelle liegt nicht in einer Karte und kann deshalb nicht
     einfach in ihr scrollen. Fuenf Spalten passen auf ein Telefon ohnehin
     nicht nebeneinander, also wird jede Zeile ein eigener Block. Die
     Spaltenkoepfe entfallen dabei - Datum, "25 Tage" und der Projektname
     erklaeren sich ohne. */
  .bin-table thead { display: none; }
  .bin-table, .bin-table tbody, .bin-table tr, .bin-table td { display: block; width: auto; }
  .bin-table tr { border-top: 1px solid var(--line); padding: 12px 0; }
  .bin-table td { border: none; padding: 2px 0; }
  .bin-table td:nth-child(2)::after { content: ' Räume'; }
  .bin-table td:nth-child(3)::before { content: 'gelöscht am '; color: var(--muted); }
  .bin-table td:nth-child(4)::after { content: ' verbleibend'; color: var(--muted); }
  .bin-actions { text-align: left; white-space: normal; margin-top: 8px; }
  .bin-actions .inline-form { margin: 0 16px 0 0; }
}

/* ============================================================
   Leser-Ansicht und Rueckmeldungen (0028)
   ============================================================
   Die Leseansicht des externen Zugangs nutzt bewusst dieselben Tokens und
   Karten wie der Rest der App - sie soll nach Raumothek aussehen, nicht nach
   einem angeklebten Gastbereich. Eigene Klassen gibt es nur dort, wo es die
   Anmerkungen wirklich braucht. */
.badge-leser { background: #fef3c7; color: #92400e; }

.k-kpis { display: flex; gap: 12px; }
.k-kpi { border: 1px solid var(--line); border-radius: var(--radius); padding: 8px 16px; background: var(--panel); }
.k-kpi .l { font-size: 11px; text-transform: uppercase; letter-spacing: .4px; color: var(--muted); }
.k-kpi .v { font-size: 18px; font-weight: 700; }

.k-section { margin-bottom: 18px; }
.k-section-kopf {
  display: flex; align-items: baseline; gap: 12px;
  border-left: 5px solid var(--line-strong); padding-left: 12px; margin-bottom: 14px;
}
.k-section-kopf strong { font-size: 1.05rem; }
.k-section-summe { margin-left: auto; color: var(--muted); font-variant-numeric: tabular-nums; }
.k-code { color: var(--muted); font-weight: 600; font-variant-numeric: tabular-nums; }
.k-item { margin-bottom: 22px; }
.k-item h3 { display: flex; align-items: baseline; gap: 8px; font-size: .95rem; margin: 18px 0 8px; }
.k-item-summe { margin-left: auto; color: var(--muted); font-weight: 500; font-variant-numeric: tabular-nums; }
.k-bemerkung {
  background: var(--surface-2); border-radius: var(--radius); padding: 8px 12px;
  font-size: 13px; color: var(--muted); margin-bottom: 10px; white-space: pre-wrap;
}

.k-raumtabelle { margin-bottom: 8px; }
.k-raumtabelle col.c-code { width: 92px; }
.k-raumtabelle col.c-nc { width: 56px; }
.k-raumtabelle col.c-anz { width: 64px; }
.k-raumtabelle col.c-einzel { width: 96px; }
.k-raumtabelle col.c-gesamt { width: 104px; }
.k-raumtabelle th.k-kat {
  background: var(--surface-2); color: var(--muted); text-transform: uppercase;
  letter-spacing: .3px; font-size: 11px;
}
.k-raumtabelle .num { text-align: right; font-variant-numeric: tabular-nums; }
.k-raumtabelle tr.k-child td { background: #f6faff; }
.k-einzug { display: inline-block; padding-left: 26px; position: relative; }
.k-einzug::before { content: "↳"; position: absolute; left: 8px; color: var(--accent); font-weight: 700; }
.k-raum-bemerkung { font-size: 12px; color: var(--muted); margin-top: 2px; }
.k-raumtabelle tr.k-summe td { font-weight: 700; background: var(--surface-2); }

/* Die Anmerkungszeile haengt unter ihrem Raum. Solange nichts drinsteht,
   bleibt sie eine unauffaellige Zeile mit einem Aufklapp-Link - sonst
   erschluege das Formular bei 200 Raeumen die Tabelle. */
.k-anmerkzeile > td { border-top: none; padding-top: 0; padding-bottom: 4px; }
.k-anmerkzeile.hat-kommentare > td { padding-bottom: 10px; }
.k-block .k-eintrag {
  border-left: 3px solid var(--accent); background: var(--accent-soft);
  border-radius: 0 var(--radius) var(--radius) 0; padding: 8px 12px; margin-bottom: 6px;
}
.k-kopf { display: flex; align-items: baseline; gap: 10px; font-size: 12px; color: var(--muted); }
.k-autor { font-weight: 700; color: var(--ink); }
.k-zuruecknehmen { font-size: 12px; }
.k-text { white-space: pre-wrap; }
.k-block .k-text { margin-top: 2px; font-size: 13.5px; color: var(--ink); }
.k-neu > summary {
  cursor: pointer; font-size: 12.5px; color: var(--accent-d); width: fit-content;
  padding: 2px 0; list-style: none;
}
.k-neu > summary::before { content: "+ "; font-weight: 700; }
.k-neu > summary::-webkit-details-marker { display: none; }
.k-neu[open] > summary { margin-bottom: 6px; }
.k-neu textarea {
  width: 100%; max-width: 640px; display: block; margin-bottom: 8px;
  border: 1px solid var(--line-strong); border-radius: var(--radius); padding: 8px 10px;
  font: inherit; font-size: 13.5px; resize: vertical;
}
.k-item-anmerkungen { border-top: 1px dashed var(--line); padding-top: 10px; margin-top: 6px; }
.k-item-anmerkungen-titel {
  font-size: 11px; text-transform: uppercase; letter-spacing: .3px;
  color: var(--muted); margin-bottom: 6px;
}

/* Plakette im Raumprogramm des Bearbeiters */
.k-hinweis .k-zaehler {
  display: inline-block; min-width: 18px; padding: 0 5px; margin-left: 4px;
  border-radius: 999px; background: var(--accent); color: #fff;
  font-size: 11px; font-weight: 700; text-align: center;
}
.k-bezug-text { font-size: 12.5px; color: var(--muted); margin-top: 3px; }
.k-datum { white-space: nowrap; color: var(--muted); font-size: 12.5px; }

@media (max-width: 720px) {
  .k-kpis { width: 100%; }
  .k-neu textarea { max-width: none; }
}

/* Gastzugaenge im Team-Bereich (0028) */
.gast-projekt { display: flex; align-items: baseline; gap: 8px; margin-bottom: 3px; }
.gast-projekt .link-button { font-size: 12px; color: var(--muted); }
.gast-zuordnen { display: flex; gap: 6px; align-items: center; margin-top: 6px; }
.gast-zuordnen select { font-size: 12.5px; padding: 3px 6px; max-width: 220px; }