/* ============================================================
   Glassmorphism Dark + Clean Form  –  PMG MIND
   ============================================================ */

* { box-sizing: border-box; }

/* ── CSS Variables ─────────────────────────────────────────── */
:root {
  --bg-gradient:
    radial-gradient(ellipse 900px 700px at 10% 5%,  rgba(59,130,246,0.45) 0%, transparent 60%),
    radial-gradient(ellipse 700px 600px at 90% 80%, rgba(139,92,246,0.38) 0%, transparent 55%),
    radial-gradient(ellipse 500px 400px at 55% 50%, rgba(16,185,129,0.18) 0%, transparent 50%),
    linear-gradient(135deg, #060b18 0%, #0c1223 55%, #07101f 100%);

  --glass-card:    rgba(255,255,255,0.06);
  --glass-sidebar: rgba(255,255,255,0.04);
  --glass-topbar:  rgba(6,11,24,0.82);
  --glass-input:   rgba(0,0,0,0.35);
  --glass-modal:   rgba(8,14,28,0.80);
  --glass-hover:   rgba(255,255,255,0.10);
  --glass-active:  rgba(99,166,255,0.20);

  --border:        rgba(255,255,255,0.11);
  --border-soft:   rgba(255,255,255,0.07);
  --border-accent: rgba(99,166,255,0.55);

  --text-main:  #e8edf8;
  --text-muted: #8fa3c0;
  --accent:     #63a6ff;
  --accent-h:   #85bcff;
  --danger:     #f87171;
  --success:    #4ade80;
  --warning:    #fbbf24;

  --radius-lg: 18px;
  --radius-md: 12px;
  --radius-sm:  8px;

  --shadow-lg: 0 20px 60px rgba(0,0,0,0.55), 0 8px 24px rgba(0,0,0,0.35);
  --shadow-md: 0 8px 32px rgba(0,0,0,0.40), 0 2px 8px rgba(0,0,0,0.25);
  --shadow-sm: 0 2px 10px rgba(0,0,0,0.30);
  --inset-glow: inset 0 1px 0 rgba(255,255,255,0.10);
}

/* ── Base ──────────────────────────────────────────────────── */
body {
  margin: 0;
  font-family: "Segoe UI", "Bahnschrift", Arial, sans-serif;
  font-size: 14px;
  color: var(--text-main);
  background: var(--bg-gradient);
  background-attachment: fixed;
  min-height: 100vh;
}
.print-body {
  background: #ffffff;
  color: #000000;
}
.print-layout .sidebar { display: none !important; }
.page { min-height: 100vh; }

/* ── Topbar ────────────────────────────────────────────────── */
.topbar {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 24px;
  background: var(--glass-topbar);
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  box-shadow: 0 1px 0 rgba(255,255,255,0.05), var(--shadow-sm);
  position: sticky;
  top: 0;
  z-index: 20;
}
.brand {
  display: flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1.15;
}
.brand-title {
  font-weight: 800;
  font-size: 26px;
  letter-spacing: 0.5px;
  color: #ffffff;
}
.brand-subtitle {
  font-weight: 700;
  font-size: 17px;
  letter-spacing: 0.3px;
  background: linear-gradient(90deg, #93c5fd, #c4b5fd);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.user { color: var(--text-muted); font-size: 13px; margin-left: auto; }
.topbar-user-menu {
  margin-left: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  position: relative;
}
.topbar-actions { display: flex; align-items: center; gap: 8px; }
.topbar-user-menu .user { margin-left: 0; }

/* ── Layout ────────────────────────────────────────────────── */
.layout {
  display: flex;
  min-height: calc(100vh - 53px);
}
.layout-nosidebar {
  justify-content: center;
}
.layout-nosidebar .content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding-top: 10vh;
  max-width: 600px;
  width: 100%;
}

/* ── Sidebars ──────────────────────────────────────────────── */
.sidebar {
  background: var(--glass-sidebar);
  border-right: 1px solid var(--border-soft);
  padding: 14px 12px;
  flex-shrink: 0;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  gap: 2px;
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  transition: width 0.22s cubic-bezier(.4,0,.2,1), padding 0.22s;
}
.s1 { width: 195px; }
.s2 { width: 175px; }
.s3 { width: 165px; }
.s4 { width: 210px; }

/* ── Collapsed sidebar ─────────────────────────────────────── */
.sidebar.collapsed {
  width: 44px;
  padding: 8px 0;
  cursor: pointer;
  overflow: hidden;
}
/* hide labels and utility buttons when collapsed */
.sidebar.collapsed .sb-label,
.sidebar.collapsed .mini-btn,
.sidebar.collapsed .project-list + .mini-btn { display: none; }

/* items become vertical tabs */
.sidebar.collapsed .sb-item,
.sidebar.collapsed .project-btn {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  text-align: center;
  padding: 12px 6px;
  font-size: 14px;
  border-radius: 0;
  border: none;
  border-bottom: 1px solid var(--border-soft);
  width: 44px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-height: 150px;
  display: block;
}
/* hide arrow in collapsed state */
.sidebar.collapsed .sb-expand::after { display: none; }

/* ── sidebar toggle button ──────────────────────────────────── */
.sb-toggle {
  width: 100%;
  margin: 0 0 6px 0;
  padding: 5px 0;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: none;
  transition: background 0.15s, color 0.15s;
}
.sb-toggle:hover {
  background: var(--glass-hover);
  color: var(--text-main);
  transform: none;
  box-shadow: none;
}
.sb-toggle-icon {
  display: inline-block;
  transition: transform 0.22s;
  font-style: normal;
}
/* In collapsed state the button stays visible and centered */
.sidebar.collapsed .sb-toggle {
  width: 36px;
  align-self: center;
  border-radius: var(--radius-sm);
  margin: 4px auto 0;
  padding: 6px 0;
}

/* ── sidebar label (section header) ────────────────────────── */
.sb-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 4px 8px 6px;
  margin-top: 4px;
}

/* ── sidebar item ───────────────────────────────────────────── */
.sb-item {
  display: block;
  color: var(--text-main);
  text-decoration: none;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  font-size: 18px;
  border: 1px solid transparent;
  transition: background 0.14s, border-color 0.14s, color 0.14s;
  cursor: pointer;
}
.sb-item:hover {
  background: var(--glass-hover);
  border-color: var(--border-soft);
}
.sb-item.active {
  background: var(--glass-active);
  border-color: var(--border-accent);
  color: var(--text-main);
  font-weight: 600;
}
/* expand arrow indicator */
.sb-expand::after {
  content: " ›";
  color: var(--text-muted);
  font-size: 16px;
  float: right;
}
.sb-expand.active::after {
  content: " ›";
  color: var(--accent);
}

/* smaller items for long lists (s4) */
.sb-item-sm {
  font-size: 16px;
  padding: 5px 10px;
}

/* ── Month groups in sidebar 4 ─────────────────────────────── */
.sb-month-header {
  width: 100%; text-align: left; background: none; border: none;
  border-bottom: 1px solid var(--border-soft); box-shadow: none;
  color: var(--text-muted); font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.9px;
  padding: 8px 10px 5px; margin: 4px 0 0;
  display: flex; justify-content: space-between; align-items: center;
  cursor: pointer; border-radius: 0;
}
.sb-month-header:hover { color: var(--text-main); background: none; transform: none; }
.sb-month-arrow { font-size: 13px; transition: transform 0.2s; display: inline-block; }
.sb-month-group.open .sb-month-arrow { transform: rotate(90deg); }
.sb-month-items { display: none; }
.sb-month-group.open .sb-month-items { display: block; }

/* markers for BTB / Anzeigen status */
.sb-item.marker-fertig {
  color: var(--warning) !important;
  background: rgba(251,191,36,0.10);
  border-left: 3px solid var(--warning);
}
.sb-item.marker-versandt {
  color: var(--success) !important;
  background: rgba(74,222,128,0.10);
  border-left: 3px solid var(--success);
}
.sb-item.missing-ebs {
  color: var(--danger) !important;
  background: rgba(248,113,113,0.10);
  border-left: 3px solid var(--danger);
}

/* ── Handout-Listen-Modal (delete / export / reimport) ─── */
#modal-handout-reimport .modal-content { max-width: 600px; width: 92vw; }
.hd-quick { display: flex; gap: 6px; margin: 4px 0 10px; }
.hd-quick button { flex: 1; padding: 6px 8px; font-size: 12px; }
.hd-list {
  max-height: 50vh; overflow-y: auto;
  display: flex; flex-direction: column;
  border: 1px solid var(--border-soft); border-radius: var(--radius-sm);
  padding: 2px; background: rgba(0,0,0,0.20);
}
.hd-item {
  display: flex; align-items: center; gap: 6px;
  padding: 2px 6px; margin: 0; border-radius: var(--radius-sm);
  cursor: pointer; font-size: 13px;
  color: var(--text-main); font-weight: 400;
  white-space: nowrap; min-width: 0;
}
.hd-item:hover { background: var(--glass-hover); }
.hd-item input[type=checkbox] {
  margin: 0; flex: 0 0 auto;
  width: 14px; height: 14px; padding: 0;
  background: rgba(0,0,0,0.4); border: 1px solid var(--border-soft);
  appearance: auto; -webkit-appearance: auto;
  accent-color: var(--accent);
}
.hd-label { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; }
.hd-tag {
  font-size: 11px; padding: 1px 6px; border-radius: 10px;
  background: rgba(255,255,255,0.08); color: var(--text-muted);
  flex: 0 0 auto;
}
.hd-item.hd-missing .hd-tag { background: rgba(248,113,113,0.18); color: var(--danger); }
.hd-tag.hd-marker-fertig { background: rgba(251,191,36,0.18); color: var(--warning); }
.hd-tag.hd-marker-versandt { background: rgba(74,222,128,0.18); color: var(--success); }
.hd-tag.hd-action-create { background: rgba(74,222,128,0.18); color: var(--success); }
.hd-tag.hd-action-reset  { background: rgba(99,166,255,0.18); color: var(--accent); }
.hd-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }
.hd-submit {
  background: var(--danger); color: #fff; border: none;
  padding: 8px 14px; border-radius: var(--radius-sm); cursor: pointer;
  font-weight: 600;
}
.hd-submit.hd-submit-export { background: var(--accent); }
.hd-submit:hover { filter: brightness(1.1); }
.hd-empty { padding: 14px; color: var(--text-muted); font-size: 13px; text-align: center; }

/* panel container inside sidebar 3/4 */
.s-panel { display: flex; flex-direction: column; gap: 2px; width: 100%; }

/* compat stubs for old class names still used elsewhere */
.sidebar-section { margin-bottom: 16px; }
.sidebar-title {
  font-weight: 700; font-size: 14px; letter-spacing: 1px;
  text-transform: uppercase; color: var(--text-muted); margin-bottom: 8px;
}
.sidebar-sub { color: var(--text-muted); font-size: 18px; }

/* ── Content ───────────────────────────────────────────────── */
.content { padding: 28px; }

/* ── Cards ─────────────────────────────────────────────────── */
.card {
  background: var(--glass-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 24px;
  max-width: 1100px;
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  box-shadow: var(--shadow-md), var(--inset-glow);
}
.card.narrow { max-width: 420px; width: 100%; }
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}

/* ── Buttons ───────────────────────────────────────────────── */
button {
  width: 100%;
  padding: 10px 16px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-accent);
  background: linear-gradient(135deg, var(--accent) 0%, #4a94f5 100%);
  color: #f0f7ff;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  margin-top: 12px;
  box-shadow: 0 6px 20px rgba(59,130,246,0.40);
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
button:hover {
  background: linear-gradient(135deg, var(--accent-h) 0%, #63a6ff 100%);
  transform: translateY(-1px);
  box-shadow: 0 10px 26px rgba(59,130,246,0.50);
}
button:active { transform: translateY(0); }

button.ghost {
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--border);
  color: var(--text-main);
  box-shadow: none;
  font-weight: 500;
}
button.ghost:hover {
  background: var(--glass-hover);
  border-color: var(--border);
  transform: none;
  box-shadow: none;
}
.admin-btn {
  width: auto;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--border-soft);
  color: var(--text-main);
  border-radius: var(--radius-sm);
  padding: 6px 10px;
  cursor: pointer;
  text-decoration: none;
  font-size: 14px;
  margin: 0;
  box-shadow: none;
  font-weight: 500;
  transition: background 0.15s;
}
.admin-btn:hover { background: var(--glass-hover); }
.admin-btn.admin-gear { font-size: 20px; padding: 8px 12px; }
.logout {
  color: var(--text-main);
  text-decoration: none;
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-soft);
  background: rgba(255,255,255,0.04);
  transition: background 0.15s;
}
.logout:hover { background: var(--glass-hover); }
.icon-btn { width: auto; padding: 6px 10px; font-size: 16px; }
.mini-btn { width: 100%; margin-bottom: 8px; }
.btb-top-btn {
  background: linear-gradient(135deg, #93c5fd 0%, #60a5fa 100%);
  color: #0c1a2e;
  border: none;
  box-shadow: 0 4px 14px rgba(99,166,255,0.35);
}
.btb-top-btn:hover { background: linear-gradient(135deg, #bdd8ff 0%, #93c5fd 100%); }

/* ── Inputs / Forms ────────────────────────────────────────── */
label {
  display: block;
  margin: 12px 0 5px;
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 500;
}
input, textarea, select {
  width: 100%;
  padding: 10px 14px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-soft);
  background: var(--glass-input);
  color: var(--text-main);
  font-size: 14px;
  font-family: inherit;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: border-color 0.18s, box-shadow 0.18s, background 0.18s;
}
input::placeholder, textarea::placeholder { color: #5a6e8a; }
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--border-accent);
  box-shadow: 0 0 0 3px rgba(99,166,255,0.18);
  background: rgba(0,0,0,0.50);
}
select option { background: #0d1628; color: var(--text-main); }
code { color: var(--text-muted); }

/* ── Mini form ─────────────────────────────────────────────── */
.mini-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 10px;
}
.mini-form input,
.mini-form select,
.mini-form button {
  font-size: 13px;
  padding: 8px 10px;
}
.mini-form button { margin-top: 0; }
.mini-form button.ghost { width: 100%; }

/* ── Switch toggle ─────────────────────────────────────────── */
.switch-row { display: flex; align-items: center; gap: 10px; margin-top: 6px; }
.switch { position: relative; display: inline-block; width: 46px; height: 24px; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch .slider {
  position: absolute; cursor: pointer;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(255,255,255,0.10);
  border: 1px solid var(--border);
  transition: 0.2s; border-radius: 999px;
}
.switch .slider:before {
  position: absolute; content: "";
  height: 16px; width: 16px;
  left: 3px; top: 3px;
  background: #c0cfe8;
  transition: 0.2s; border-radius: 50%;
}
.switch input:checked + .slider { background: var(--accent); border-color: var(--accent); }
.switch input:checked + .slider:before { transform: translateX(22px); background: #fff; }

/* ── Navigation (sidebar links) ────────────────────────────── */
.side-nav { display: flex; flex-direction: column; gap: 4px; }
.side-nav a {
  color: var(--text-main);
  text-decoration: none;
  padding: 7px 10px;
  border-radius: var(--radius-sm);
  font-size: 16px;
  transition: background 0.15s;
}
.side-nav a:hover { background: var(--glass-hover); }

/* ── Tree navigation ───────────────────────────────────────── */
.tree { display: flex; flex-direction: column; gap: 6px; }
.tree-root {
  color: var(--text-main);
  text-decoration: none;
  padding: 7px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-soft);
  background: rgba(255,255,255,0.03);
  font-size: 16px;
  display: block;
  transition: background 0.15s, border-color 0.15s;
}
.tree-root:hover { background: var(--glass-hover); border-color: var(--border); }
.tree-node { padding-left: 6px; border-left: 1px solid var(--border-soft); }
.tree-label {
  font-weight: 600;
  color: var(--text-main);
  margin: 6px 0;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
}
.tree-children { display: flex; flex-direction: column; gap: 3px; padding-left: 10px; }
.tree-link, .tree-leaf {
  color: var(--text-muted);
  text-decoration: none;
  padding: 5px 8px;
  border-radius: var(--radius-sm);
  display: block;
  font-size: 15px;
  transition: background 0.15s, color 0.15s;
}
.tree-link:hover, .tree-leaf:hover { background: var(--glass-hover); color: var(--text-main); }
.tree .active-root { font-weight: 700; }

.tree-root.active-root,
.tree-link.active-root,
.tree-leaf.active-root,
.tree-label.active-root,
details > summary.active-root,
details.active-root > summary {
  position: relative;
  padding-left: 18px;
  border-left: 3px solid var(--accent);
  background: var(--glass-active);
  color: var(--text-main);
}
.tree-root.active-root::before,
.tree-link.active-root::before,
.tree-leaf.active-root::before,
.tree-label.active-root::before,
details > summary.active-root::before,
details.active-root > summary::before {
  content: "";
  position: absolute;
  left: 4px; top: 50%;
  width: 6px; height: 6px;
  transform: translateY(-50%);
  background: var(--accent);
  border-radius: 50%;
  z-index: 2;
}
.tree-leaf.marker-fertig {
  color: var(--warning) !important;
  background: rgba(251,191,36,0.12);
  border-left: 3px solid var(--warning);
  padding-left: 8px;
  font-weight: 700;
}
.tree-leaf.marker-versandt {
  color: var(--success) !important;
  background: rgba(74,222,128,0.12);
  border-left: 3px solid var(--success);
  padding-left: 8px;
  font-weight: 700;
}

details > summary {
  cursor: pointer;
  color: var(--text-muted);
  padding: 5px 8px;
  border-radius: var(--radius-sm);
  font-size: 15px;
  list-style: none;
  transition: background 0.15s, color 0.15s;
}
details > summary:hover { background: var(--glass-hover); color: var(--text-main); }
details > summary::-webkit-details-marker { display: none; }

/* ── Project list ──────────────────────────────────────────── */
.project-list { display: flex; flex-direction: column; gap: 5px; }
.project-btn {
  width: 100%;
  text-align: left;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border-soft);
  color: var(--text-main);
  border-radius: var(--radius-sm);
  padding: 7px 10px;
  cursor: pointer;
  font-size: 18px;
  margin: 0;
  box-shadow: none;
  font-weight: 400;
  transition: background 0.15s, border-color 0.15s;
}
.project-btn:hover { background: var(--glass-hover); border-color: var(--border); transform: none; }
.project-btn.active {
  background: var(--glass-active);
  border-color: rgba(99,166,255,0.45);
  color: var(--text-main);
  font-weight: 600;
  box-shadow: inset 0 0 0 1px rgba(99,166,255,0.25);
}

/* ── Modals ────────────────────────────────────────────────── */
.modal {
  position: fixed; inset: 0;
  background: rgba(3,7,18,0.72);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 50;
  backdrop-filter: blur(4px);
}
.modal.open { display: flex; }
.modal-content {
  background: var(--glass-modal);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 22px;
  width: 440px;
  max-width: 94vw;
  box-shadow: var(--shadow-lg), var(--inset-glow);
  backdrop-filter: blur(32px) saturate(160%);
  -webkit-backdrop-filter: blur(32px) saturate(160%);
}
.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.modal-title { font-weight: 700; font-size: 16px; }
.modal-close {
  width: auto;
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--border-soft);
  color: var(--text-muted);
  border-radius: var(--radius-sm);
  padding: 3px 10px;
  cursor: pointer;
  margin: 0;
  box-shadow: none;
  font-size: 16px;
  font-weight: 400;
  transition: background 0.15s;
}
.modal-close:hover { background: var(--glass-hover); transform: none; box-shadow: none; }

/* ── Dropdown menu ─────────────────────────────────────────── */
.menu { position: relative; }
.menu-dropdown {
  position: absolute;
  right: 0; top: 40px;
  min-width: 200px;
  background: rgba(8,14,30,0.92);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 6px;
  display: none;
  z-index: 30;
  box-shadow: var(--shadow-lg);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
}
.menu-dropdown.open { display: block; }
.menu-item {
  width: 100%;
  background: transparent;
  border: none;
  color: var(--text-main);
  text-align: left;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  margin: 0;
  box-shadow: none;
  font-weight: 400;
  cursor: pointer;
  transition: background 0.15s;
}
.menu-item:hover { background: var(--glass-hover); transform: none; box-shadow: none; }

/* ── Typography ────────────────────────────────────────────── */
h1, h2 { margin: 0 0 14px 0; letter-spacing: 0.2px; }
h2 { margin-top: 24px; font-size: 17px; }
.hint { color: var(--text-muted); font-size: 12px; margin-bottom: 6px; }
.link { color: #93c5fd; text-decoration: none; }
.link:hover { text-decoration: underline; }
.inline { display: inline-block; margin-right: 8px; }

/* ── Alerts ────────────────────────────────────────────────── */
.alert {
  padding: 10px 14px;
  border-radius: var(--radius-md);
  margin-bottom: 14px;
  font-size: 13px;
}
.alert.success {
  background: rgba(16,185,129,0.12);
  border: 1px solid rgba(74,222,128,0.30);
  color: #6ee7b7;
}
.alert.error {
  background: rgba(239,68,68,0.12);
  border: 1px solid rgba(248,113,113,0.30);
  color: #fca5a5;
}

/* ── Misc layout helpers ───────────────────────────────────── */
.section { margin-bottom: 20px; }
.actions { margin-top: 12px; }
.two-col { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px; }
.welcome-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.welcome-logo { max-height: 56px; max-width: 240px; object-fit: contain; }
.welcome-announcement { resize: none; overflow: hidden; }

/* ── Block ─────────────────────────────────────────────────── */
.block {
  border: 1px solid var(--border-soft);
  padding: 14px;
  border-radius: var(--radius-md);
  margin-bottom: 14px;
  background: rgba(255,255,255,0.03);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* ── Tables / Grid ─────────────────────────────────────────── */
.grid {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin-bottom: 10px;
  border-radius: var(--radius-md);
  overflow: hidden;
}
.grid th, .grid td {
  border: 1px solid rgba(255,255,255,0.07);
  padding: 7px 10px;
}
.grid th {
  background: rgba(0,0,0,0.40);
  text-align: center;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}
.grid th.sortable { cursor: pointer; user-select: none; }
.grid th.sortable.sort-asc::after,
.grid th.sortable.sort-desc::after { display: inline-block; margin-left: 6px; font-size: 10px; color: var(--accent); }
.grid th.sortable.sort-asc::after { content: "▲"; }
.grid th.sortable.sort-desc::after { content: "▼"; }
.grid tr:nth-child(even) td { background: rgba(255,255,255,0.025); }
.grid tr:hover td { background: rgba(99,166,255,0.08); transition: background 0.15s; }
.sum-row td { font-weight: 700; background: rgba(0,0,0,0.45); }
.grid input { width: 100%; margin: 0; padding: 4px 6px; border-radius: 6px; }

/* ── Ads overview ──────────────────────────────────────────── */
.ads-overview { width: max-content; max-width: 98vw; }
.ads-overview h1 { font-size: 17px; }
.ads-overview .grid { font-size: 13px; }
.ads-overview .ads-editable {
  width: 100%;
  padding: 2px 4px;
  background: transparent;
  border: 1px solid var(--border-soft);
  color: var(--text-main);
  border-radius: 4px;
}

/* ── BTB multi list ────────────────────────────────────────── */
.btb-multi-list {
  display: flex; flex-direction: column; gap: 6px;
  max-height: 280px; overflow: auto;
  padding: 8px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  background: rgba(0,0,0,0.25);
}
.btb-multi-item {
  display: grid; grid-template-columns: 24px 1fr;
  align-items: center; gap: 10px; padding-left: 6px;
}
.btb-multi-item input { margin: 0; justify-self: start; }
.btb-multi-label { text-align: left; }
.btb-multi-progress { margin-top: 10px; font-size: 12px; color: var(--accent); }
.btb-multi-progress-bar {
  margin-top: 6px; height: 8px;
  background: rgba(0,0,0,0.4);
  border: 1px solid var(--border-soft);
  border-radius: 999px; overflow: hidden;
}
.btb-multi-progress-fill {
  height: 100%; width: 0%;
  background: var(--accent);
  transition: width 0.2s ease;
}

/* ============================================================
   ANZEIGE PAPER  (white document — do not glassmorphism!)
   ============================================================ */
.anzeige-paper {
  position: relative;
  background: #ffffff; color: #0f172a;
  width: 840px; min-height: 1188px;
  margin: 12px auto 16px;
  border: none; border-radius: 0;
  box-shadow: 0 18px 40px rgba(0,0,0,0.50);
  --anzeige-font-family: "Segoe UI", Arial, sans-serif;
  --anzeige-font-size: 18px;
  font-family: var(--anzeige-font-family);
  font-size: var(--anzeige-font-size);
}
.anzeige-paper input,
.anzeige-paper textarea {
  position: absolute;
  background: #ffffff; color: #111827;
  border: 1px solid #cbd5e1;
  border-radius: 6px; padding: 4px 6px;
  font-family: var(--anzeige-font-family);
  font-size: var(--anzeige-font-size);
  backdrop-filter: none;
}
.anzeige-paper textarea { resize: none; }
.anzeige-logo {
  position: absolute; left: 540px; top: 60px;
  width: 231px; height: 111px;
  border: 1px solid #cbd5e1; border-radius: 6px;
  object-fit: contain; background: #ffffff;
}
.anzeige-paper .f-sender        { left: 70px;  top: 150px; width: 253px; height: 49px;  font-size: 12px; }
.anzeige-paper .f-ag            { left: 70px;  top: 230px; width: 420px; height: 200px; }
.anzeige-paper .f-contact-name  { left: 540px; top: 258px; width: 256px; height: 22px;  font-size: 14px; }
.anzeige-paper .f-contact-phone1{ left: 540px; top: 280px; width: 291px; height: 22px;  font-size: 14px; }
.anzeige-paper .f-contact-phone2{ left: 540px; top: 300px; width: 291px; height: 22px;  font-size: 14px; }
.anzeige-paper .f-contact-date  { left: 540px; top: 320px; width: 226px; height: 22px;  font-size: 14px; }
.anzeige-paper .f-pm-bez        { left: 70px;  top: 458px; width: 740px; height: 22px; }
.anzeige-paper .f-pm-kosten-an  { left: 70px;  top: 486px; width: 740px; height: 22px; }
.anzeige-paper .f-pm-kosten-ag  { left: 70px;  top: 514px; width: 740px; height: 22px; }
.anzeige-paper .f-btb-nr        { left: 70px;  top: 538px; width: 220px; height: 22px; }
.anzeige-paper .f-subject       { left: 70px;  top: 566px; width: 740px; height: 22px; font-weight: 700; }
.anzeige-paper .f-greeting      { left: 70px;  top: 626px; width: 520px; height: 22px; }
.anzeige-paper .f-body          { left: 70px;  top: 656px; width: 700px; height: 220px; }
.anzeige-paper .f-kostenschaetzung-label { position: absolute; left: 70px; top: 886px; font-weight: 700; }
.anzeige-paper .f-kostenschaetzung { left: 70px;  top: 884px; width: 170px; height: 22px; }
.anzeige-paper .f-bauzeit-label { position: absolute; left: 70px; top: 916px; font-weight: 700; }
.anzeige-paper .f-bauzeit       { left: 70px;  top: 914px; width: 170px; height: 22px; }
.anzeige-paper .f-closing       { left: 70px;  top: 926px; width: 320px; height: 22px; }
.anzeige-paper .f-closing-company{ left: 70px; top: 946px; width: 460px; height: 24px; }
.anzeige-paper .f-signature     { left: 70px;  top: 1016px; width: 340px; height: 22px; }
.card:not(.print-mode) .anzeige-paper .f-kostenschaetzung { left: 260px; }
.card:not(.print-mode) .anzeige-paper .f-bauzeit           { left: 260px; }
.card:not(.print-mode) .anzeige-paper .f-closing           { top: 976px; }
.card:not(.print-mode) .anzeige-paper .f-closing-company   { top: 996px; }
.card:not(.print-mode) .anzeige-paper .f-signature         { top: 1066px; }

/* ============================================================
   BTB PAPER  (white document — do not glassmorphism!)
   ============================================================ */
.btb-pages { display: flex; flex-direction: column; gap: 24px; align-items: center; }
.btb-paper {
  position: relative;
  background: #ffffff; color: #111827;
  width: 954px; min-height: 1221px; height: auto;
  margin: 12px auto 16px;
  border: none; border-radius: 0;
  box-shadow: none;
  font-family: Calibri, "Segoe UI", Arial, sans-serif;
  font-size: 12px; overflow: visible;
}
.btb-paper .grid th {
  text-transform: none;
  letter-spacing: 0;
  text-align: left;
  font-weight: 700;
}
.btb-paper-long { height: auto; }
.btb-paper input,
.btb-paper textarea,
.btb-paper select {
  background: #ffffff; color: #111827;
  border: 1px solid #cbd5e1;
  border-radius: 6px; padding: 4px 6px;
  font-size: 12px; backdrop-filter: none;
}
.btb-paper label { color: #111827; margin: 0; }
.btb-paper button.ghost {
  background: linear-gradient(135deg, #93c5fd 0%, #60a5fa 100%);
  color: #0c1a2e;
  border: none;
  box-shadow: 0 4px 14px rgba(99,166,255,0.35);
  font-weight: 700;
}
.btb-paper button.ghost:hover {
  background: linear-gradient(135deg, #bdd8ff 0%, #93c5fd 100%);
  border: none;
}
.btb-title { position: absolute; left: 17px; top: 9px; font-size: 28px; font-weight: 700; }
.btb-logo  { position: absolute; right: 9px; top: -54px; width: 160px; height: 80px; object-fit: contain; }
.btb-line  { position: absolute; left: 9px; width: 936px; height: 1px; background: #cbd5e1; }
.btb-line-1 { top: 45px; }
.btb-line-2 { top: 368px; }
.btb-meta {
  position: absolute; left: 17px; top: 50px;
  display: grid; grid-template-columns: auto 1fr;
  gap: 12px 24px; align-items: center;
  font-size: 20px; font-weight: 700;
}
.btb-meta-field { display: flex; align-items: center; gap: 8px; }
.btb-meta-label { font-weight: 700; }
.btb-meta input { width: 140px; font-size: 20px; font-weight: 700; padding: 2px 6px; }
.btb-group {
  position: absolute; border: none; border-radius: 0;
  padding: 8px; background: #ffffff;
  display: flex; flex-direction: column; gap: 6px;
}
.btb-group-title { font-weight: 700; color: #111827; }
.btb-header { left: 9px; top: 90px; width: 935px; height: 126px; }
.btb-header .btb-grid { grid-template-columns: 92px 0.5fr 119px 0.35fr; }
.btb-time  { left: 9px; top: 228px; width: 935px; height: 128px; }
.btb-flow  {
  position: static; width: 936px;
  margin: 384px 9px 16px;
  display: flex; flex-direction: column; gap: 12px;
}
.btb-personal,
.btb-geraete,
.btb-leistung,
.btb-ausser,
.btb-signatures { position: static; width: 100%; height: auto; }
.btb-grid {
  display: grid;
  grid-template-columns: 170px 1fr 190px 1fr;
  gap: 6px 10px; align-items: center;
}
.btb-time-grid .btb-inline { display: grid; grid-template-columns: 1.5fr 1fr; gap: 6px; }
.btb-group table.grid { margin: 0; }
.btb-group.btb-personal table,
.btb-group.btb-geraete  table,
.btb-group.btb-ausser   table { width: 100%; font-size: 11px; }
.btb-group.btb-personal .grid th,
.btb-group.btb-geraete  .grid th,
.btb-group.btb-ausser   .grid th { padding: 4px 6px; }
.btb-group.btb-personal .grid td,
.btb-group.btb-geraete  .grid td,
.btb-group.btb-ausser   .grid td { padding: 2px 4px; }
.btb-group.btb-personal,
.btb-group.btb-geraete,
.btb-group.btb-ausser { overflow: visible; }
.btb-group.btb-leistung textarea { height: 100%; resize: none; }
.btb-group.btb-leistung .print-text { white-space: pre-wrap; word-break: break-word; }
.btb-paper .grid th,
.btb-paper .grid td { border: 1px solid #cbd5e1; }
.btb-paper .grid th  { background: #f8fafc; color: #111827; }
.btb-paper .row-actions-header { width: 26px; }
.btb-paper .row-actions { width: 26px; text-align: center; }
.btb-paper .mini-del {
  width: 22px; height: 22px; padding: 0;
  line-height: 20px; border-radius: 6px; margin: 0;
  background: #e2e8f0; color: #111827;
  font-weight: 700; box-shadow: none; border: none;
}
.btb-paper .mini-del:hover { background: #cbd5e1; transform: none; box-shadow: none; }
.btb-signatures { display: flex; flex-direction: row; align-items: flex-start; gap: 24px; margin-top: 12px; }
.btb-signature  { flex: 1; }
.btb-sign-line  { height: 1px; background: #cbd5e1; margin-top: 18px; }
.ausser-label-row { display: flex; align-items: center; gap: 6px; }
.ausser-label-row .ausser-label { flex: 0 0 480px; max-width: 480px; }
.ausser-unlink { margin: 0; }
.btb-paper .input-error { border-color: #dc2626; background: #fee2e2; }
.btb-paper .block { background: #ffffff; border: none; backdrop-filter: none; -webkit-backdrop-filter: none; }

/* ============================================================
   PRINT STYLES
   ============================================================ */
@media print {
  body { background: #ffffff !important; color: #000000 !important; }
  @page { size: A4; margin: 2cm 1cm 2cm 1cm; }
  @page:first { margin-top: 1cm; }
  .no-print { display: none !important; }
  .card {
    border: none; box-shadow: none;
    background: transparent; padding: 0;
    backdrop-filter: none;
  }
  .print-mode button,
  .print-mode .menu,
  .print-mode .menu-dropdown,
  .print-mode .row-actions,
  .print-mode .row-actions-header { display: none !important; }
  .print-mode input,
  .print-mode textarea,
  .print-mode select {
    border: none !important; background: transparent !important;
    box-shadow: none !important; color: #000000 !important;
    backdrop-filter: none !important;
  }
  .print-mode .anzeige-paper,
  .print-mode .anzeige-logo { box-shadow: none !important; border: none !important; }
  .print-mode .anzeige-paper .f-kostenschaetzung-label,
  .print-mode .anzeige-paper .f-bauzeit-label          { left: 75px !important; }
  .print-mode .anzeige-paper .f-kostenschaetzung,
  .print-mode .anzeige-paper .f-bauzeit                { left: 270px !important; }
  .print-mode select {
    -webkit-appearance: none; -moz-appearance: none;
    appearance: none; background-image: none !important;
  }
  .print-mode .btb-title { font-size: 32px; }
  .print-mode .btb-meta,
  .print-mode .btb-meta input,
  .print-mode .btb-meta-label { font-size: 24px; font-weight: 700; }
  .print-mode .btb-meta input { font-size: 24px !important; line-height: 1.1; padding-top: 0; padding-bottom: 0; }
  .print-mode .btb-paper { font-size: 18px; }
  .print-mode .btb-paper input,
  .print-mode .btb-paper textarea,
  .print-mode .btb-paper select,
  .print-mode .btb-group-title,
  .print-mode .btb-paper label { font-size: 18px; }
  .print-mode .btb-header,
  .print-mode .btb-time,
  .print-mode .btb-header .btb-grid,
  .print-mode .btb-time  .btb-grid,
  .print-mode .btb-header label,
  .print-mode .btb-time  label,
  .print-mode .btb-header input,
  .print-mode .btb-time  input,
  .print-mode .btb-header select,
  .print-mode .btb-time  select { font-size: 18px; }
  .print-mode .btb-leistung,
  .print-mode .btb-leistung textarea,
  .print-mode .btb-leistung .print-text { font-size: 18px; }
  .print-mode .btb-header .btb-grid { grid-template-columns: 200px 0.6fr 170px 0.45fr; }
  .print-mode .btb-time .btb-grid   { grid-template-columns: 200px 1.2fr 210px 1fr; }
  .print-mode .btb-time .btb-grid > :nth-child(3),
  .print-mode .btb-time .btb-grid > :nth-child(4),
  .print-mode .btb-time .btb-grid > :nth-child(7),
  .print-mode .btb-time .btb-grid > :nth-child(8),
  .print-mode .btb-time .btb-grid > :nth-child(11),
  .print-mode .btb-time .btb-grid > :nth-child(12) { margin-left: 40px; }
  .print-mode .btb-paper .grid th   { font-size: 16px !important; line-height: 1.1; }
  .print-mode .btb-paper .grid td,
  .print-mode .btb-group table.grid { font-size: 16px !important; line-height: 1.1; }
  .print-mode .btb-paper .grid td input,
  .print-mode .btb-paper .grid td textarea,
  .print-mode .btb-paper .grid td select { font-size: 16px !important; line-height: 1.1; }
  .print-mode .btb-bauvorhaben { grid-column: span 3; }
  .print-mode .btb-group.btb-leistung .print-text { line-height: 1.3; }
  .print-mode .btb-paper { min-height: 0; }
  .print-mode .btb-paper-long { height: auto; }
  .print-body .page { min-height: 0; }
  .print-body .layout,
  .print-body .content { min-height: 0; padding: 0; margin: 0; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 900px) {
  .layout { grid-template-columns: 1fr; }
  .sidebar { border-right: none; border-bottom: 1px solid var(--border-soft); width: 100%; }
  .layout > .content:only-child { padding-top: 5vh; }
  .card { border-radius: var(--radius-md); }
  .content { padding: 16px; }
  .anzeige-paper:not(.anzeige-fixed) {
    width: 100%; min-height: 0;
  }
  .anzeige-paper:not(.anzeige-fixed) input,
  .anzeige-paper:not(.anzeige-fixed) textarea,
  .anzeige-paper:not(.anzeige-fixed) .anzeige-logo {
    position: static; width: 100%; margin: 6px 0;
  }
  .anzeige-paper:not(.anzeige-fixed) { padding: 16px; }
  .btb-paper { width: 100%; height: auto; padding: 16px; }
  .btb-paper-cont .btb-flow { width: 100%; padding: 0; }
  .btb-paper .btb-title,
  .btb-paper .btb-logo,
  .btb-paper .btb-line,
  .btb-paper .btb-group,
  .btb-paper .btb-flow { position: static; }
  .btb-group { margin-bottom: 12px; height: auto; }
  .btb-grid { grid-template-columns: 1fr; }
  .btb-time-grid .btb-inline { grid-template-columns: 1fr; }
  .grid, .grid thead { display: block; overflow-x: auto; }
}

/* ── Arbeitsschritte Modal ─────────────────────────────────── */
#modal-arbeitsschritte .arb-modal-content {
  width: min(1200px, 94vw);
  max-width: 94vw;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
}
.arb-toolbar {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 10px;
}
.arb-toolbar .arb-add-col {
  width: auto;
  padding: 6px 14px;
  font-size: 13px;
}
.arb-status { font-size: 13px; color: var(--text-muted); }
.arb-table-wrap {
  flex: 1 1 auto;
  overflow: auto;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  background: rgba(0,0,0,0.18);
  margin-bottom: 14px;
}
.arb-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 13px;
}
.arb-table th,
.arb-table td {
  padding: 6px 8px;
  border-bottom: 1px solid var(--border-soft);
  border-right: 1px solid var(--border-soft);
  vertical-align: middle;
}
.arb-table th { background: rgba(255,255,255,0.05); }
.arb-table th.arb-mast-col {
  position: sticky;
  left: 0;
  top: 0;
  z-index: 3;
  background: rgba(14,22,40,0.96);
  min-width: 90px;
  text-align: left;
}
.arb-table th.arb-col-head {
  position: sticky;
  top: 0;
  z-index: 2;
  background: rgba(14,22,40,0.96);
  min-width: 140px;
}
.arb-table td.arb-mast-cell {
  position: sticky;
  left: 0;
  z-index: 1;
  background: rgba(14,22,40,0.92);
  font-weight: 600;
  white-space: nowrap;
}
.arb-table td.arb-checkbox-cell {
  text-align: center;
  width: 140px;
}
.arb-table td.arb-checkbox-cell input[type=checkbox] {
  width: 18px;
  height: 18px;
  cursor: pointer;
  margin: 0;
}
.arb-table td.arb-empty {
  padding: 24px;
  text-align: center;
  color: var(--text-muted);
  font-style: italic;
}
.arb-table tr.arb-row-r td { color: #ff5252; font-weight: 600; background: rgba(255,80,80,0.14); }
.arb-table tr.arb-row-y td { color: #f2b137; font-weight: 600; background: rgba(240,180,55,0.14); }

/* ── Arbeitsschritte pro BTB (Anzeige unter Leistungsbeschreibung) ── */
.btb-arb-section { margin-top: 12px; margin-bottom: 6px; }
.btb-paper .btb-arb-title {
  font-weight: 700;
  color: #111827;
  margin-bottom: 4px;
}
.btb-paper .btb-arb-row {
  padding: 3px 0;
  font-size: 12px;
  color: #111827;
}
.btb-paper .btb-arb-mast { font-weight: 700; margin-right: 4px; }

/* Modal: Arbeitsschritte zuordnen */
#modal-arb-btb .arb-btb-modal-content {
  width: min(720px, 94vw);
  max-height: 86vh;
  display: flex;
  flex-direction: column;
}
.arb-btb-hint {
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 10px;
}
.arb-btb-list-wrap {
  flex: 1 1 auto;
  overflow: auto;
  padding: 10px;
  background: rgba(0,0,0,0.18);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  margin-bottom: 14px;
}
.arb-btb-group {
  margin-bottom: 10px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-soft);
  background: rgba(255,255,255,0.03);
}
.arb-btb-group:last-child { margin-bottom: 0; }
.arb-btb-group.arb-mast-r { border-color: rgba(255,80,80,0.40); background: rgba(255,80,80,0.07); }
.arb-btb-group.arb-mast-y { border-color: rgba(240,180,55,0.40); background: rgba(240,180,55,0.07); }
.arb-btb-mast-header {
  font-weight: 700;
  font-size: 14px;
  margin-bottom: 6px;
  color: var(--text-main);
}
.arb-btb-group.arb-mast-r .arb-btb-mast-header { color: #ff7070; }
.arb-btb-group.arb-mast-y .arb-btb-mast-header { color: #ffc754; }
.arb-btb-options {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
}
.arb-btb-option {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  cursor: pointer;
  padding: 2px 0;
  margin: 0;
}
.arb-btb-option input[type=checkbox] {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 16px;
  height: 16px;
  margin: 0;
  border: 2px solid var(--border);
  background: rgba(255,255,255,0.08);
  border-radius: 3px;
  cursor: pointer;
  position: relative;
  flex-shrink: 0;
}
.arb-btb-option input[type=checkbox]:hover { background: rgba(255,255,255,0.16); }
.arb-btb-option input[type=checkbox]:checked {
  background: var(--accent);
  border-color: var(--accent);
}
.arb-btb-option input[type=checkbox]:checked::after {
  content: "";
  position: absolute;
  left: 3px;
  top: -1px;
  width: 5px;
  height: 9px;
  border: solid #ffffff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.arb-btb-option.arb-btb-option-used { color: #ff7070; }
.arb-btb-option.arb-btb-option-used input[type=checkbox] {
  border-color: #ef4444;
  background: rgba(239,68,68,0.18);
}
.arb-btb-option.arb-btb-option-used input[type=checkbox]:hover { background: rgba(239,68,68,0.30); }
.arb-btb-option.arb-btb-option-used input[type=checkbox]:checked {
  background: #ef4444;
  border-color: #ef4444;
}

/* ── Baufortschritt (Soll / Ist Vergleich) ─────────────────── */
.bf-empty-state {
  padding: 32px;
  text-align: center;
  color: var(--text-muted);
  font-style: italic;
  background: rgba(0,0,0,0.18);
  border: 1px dashed var(--border-soft);
  border-radius: var(--radius-md);
  margin-top: 16px;
}
.bf-summary {
  display: flex;
  align-items: center;
  gap: 28px;
  margin: 14px 0 8px;
  flex-wrap: wrap;
}
.bf-summary-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}
.bf-summary-label {
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.bf-summary-value {
  font-size: 22px;
  font-weight: 700;
  color: var(--text-main);
}
.bf-progress-bar {
  flex: 1 1 200px;
  height: 10px;
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--border-soft);
  border-radius: 6px;
  overflow: hidden;
  min-width: 200px;
}
.bf-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #4ade80 0%, #22c55e 100%);
  transition: width 0.3s ease;
}
.bf-legend {
  display: flex;
  gap: 22px;
  margin: 10px 0 16px;
  font-size: 12px;
  color: var(--text-muted);
  flex-wrap: wrap;
}
.bf-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.bf-table-wrap {
  overflow: auto;
  max-height: 70vh;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  background: rgba(0,0,0,0.18);
}
.bf-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 13px;
}
.bf-table th, .bf-table td {
  padding: 6px 8px;
  border-bottom: 1px solid var(--border-soft);
  border-right: 1px solid var(--border-soft);
  vertical-align: middle;
  text-align: center;
}
.bf-table th { background: rgba(255,255,255,0.05); }
.bf-table th.bf-mast-col,
.bf-table td.bf-mast-cell {
  position: sticky;
  left: 0;
  z-index: 1;
  background: rgba(14,22,40,0.96);
  text-align: left;
  font-weight: 600;
  white-space: nowrap;
  min-width: 90px;
}
.bf-table th.bf-mast-col { top: 0; z-index: 3; }
.bf-table th.bf-col-head {
  position: sticky;
  top: 0;
  z-index: 2;
  background: rgba(14,22,40,0.96);
  min-width: 120px;
  text-align: center;
  font-weight: 600;
}
.bf-table tr.bf-row-r td { color: #ff5252; background: rgba(255,80,80,0.10); }
.bf-table tr.bf-row-r td.bf-mast-cell { color: #ff7070; background: rgba(255,80,80,0.18); }
.bf-table tr.bf-row-y td { color: #f2b137; background: rgba(240,180,55,0.10); }
.bf-table tr.bf-row-y td.bf-mast-cell { color: #ffc754; background: rgba(240,180,55,0.18); }
.bf-cell {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 24px;
  padding: 0 4px;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  position: relative;
}
.bf-cell.bf-done {
  background: rgba(34,197,94,0.20);
  color: #4ade80;
  border: 1px solid rgba(34,197,94,0.40);
  cursor: help;
}
.bf-cell.bf-open {
  background: rgba(251,191,36,0.15);
  color: #fbbf24;
  border: 1px solid rgba(251,191,36,0.35);
}
.bf-cell.bf-empty {
  background: transparent;
  color: transparent;
}
.bf-cell.bf-unplanned {
  background: rgba(96,165,250,0.18);
  color: #60a5fa;
  border: 1px solid rgba(96,165,250,0.40);
  cursor: help;
}
.bf-count {
  font-size: 9px;
  font-weight: 700;
  margin-left: 3px;
  padding: 1px 4px;
  background: rgba(0,0,0,0.30);
  border-radius: 8px;
  line-height: 1;
}
.arb-col-name {
  width: 100%;
  padding: 4px 6px;
  font-size: 13px;
  font-weight: 600;
  background: rgba(0,0,0,0.25);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  margin-bottom: 4px;
}
.arb-col-name:focus { border-color: var(--border-accent); background: rgba(0,0,0,0.40); }
.arb-col-actions {
  display: flex;
  gap: 4px;
  justify-content: center;
}
.arb-neubau-fill {
  width: 100%;
  padding: 3px 6px;
  margin: 0 0 6px 0;
  font-size: 11px;
  font-weight: 600;
  background: rgba(255,80,80,0.12);
  color: #ff7070;
  border: 1px solid rgba(255,80,80,0.30);
  border-radius: var(--radius-sm);
  cursor: pointer;
  box-shadow: none;
}
.arb-neubau-fill:hover {
  background: rgba(255,80,80,0.22);
  border-color: rgba(255,80,80,0.50);
  color: #ff8a8a;
  transform: none;
  box-shadow: none;
}
.arb-icon-btn {
  width: 24px;
  height: 24px;
  padding: 0;
  font-size: 12px;
  background: rgba(255,255,255,0.08);
  border: 1px solid var(--border-soft);
  color: var(--text-main);
  border-radius: var(--radius-sm);
  cursor: pointer;
  margin: 0;
  font-weight: 600;
  box-shadow: none;
}
.arb-icon-btn:hover:not(:disabled) {
  background: var(--glass-hover);
  transform: none;
  box-shadow: none;
}
.arb-icon-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.arb-icon-btn.arb-del-col:hover:not(:disabled) {
  background: rgba(248,113,113,0.20);
  border-color: rgba(248,113,113,0.45);
  color: var(--danger);
}

/* ============================================================
   LAYOUT-MODE: gemeinsame Helpers
   ============================================================ */
.menu-sep {
  height: 1px;
  background: var(--border-soft);
  margin: 6px 4px;
}
.menu-section-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 4px 12px 2px;
}
.menu-item.layout-item.active {
  background: var(--glass-active);
  border-left: 3px solid var(--accent);
  font-weight: 600;
}

/* ============================================================
   LAYOUT-MODE: SINGLE SIDEBAR — modernes flat-dark Profil
   (orientiert an VS Code / Linear / GitHub)
   ============================================================ */
:root {
  --ss-bg:           #1e2230;
  --ss-border:       #2a2f40;
  --ss-text:         #d4d8e3;
  --ss-text-soft:    #9aa3b8;
  --ss-text-mute:    #6c7488;
  --ss-hover:        rgba(255,255,255,0.045);
  --ss-active-bg:    rgba(99,166,255,0.14);
  --ss-active-text:  #ffffff;
  --ss-accent:       #63a6ff;
  --ss-section-bg:   rgba(0,0,0,0.18);
}

.sidebar-single {
  width: 264px;
  flex-shrink: 0;
  background: var(--ss-bg);
  border-right: 1px solid var(--ss-border);
  padding: 8px 6px;
  overflow-y: auto;
  overflow-x: hidden;
  transition: width 0.22s cubic-bezier(.4,0,.2,1);
  display: flex;
  flex-direction: column;
  gap: 2px;
  color: var(--ss-text);
  font-family: "Segoe UI", "Inter", Arial, sans-serif;
}
.sidebar-single.collapsed { width: 40px; padding: 6px 0; }
.sidebar-single.collapsed .ss-section,
.sidebar-single.collapsed .ss-section-label { display: none; }
.ss-toggle {
  width: 100%;
  background: transparent;
  border: 1px solid transparent;
  color: var(--ss-text-mute);
  font-size: 14px;
  padding: 4px 0;
  margin: 0 0 4px;
  border-radius: 4px;
}
.ss-toggle:hover { background: var(--ss-hover); color: var(--ss-text); transform: none; box-shadow: none; }

.ss-section {
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin-bottom: 8px;
  padding-top: 4px;
}
.ss-section + .ss-section { border-top: 1px solid var(--ss-border); padding-top: 8px; }
.ss-section-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--ss-text-mute);
  padding: 4px 12px 6px;
}

/* ─── Links ─── */
.ss-link {
  display: block;
  color: var(--ss-text);
  text-decoration: none;
  padding: 5px 10px 5px 12px;
  border-radius: 4px;
  font-size: 13px;
  border-left: 2px solid transparent;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
  cursor: pointer;
  width: 100%;
  text-align: left;
  background: none;
  margin: 0;
  box-shadow: none;
  font-weight: 400;
}
.ss-link:hover { background: var(--ss-hover); color: var(--ss-active-text); }
.ss-link.active {
  background: var(--ss-active-bg);
  border-left-color: var(--ss-accent);
  color: var(--ss-active-text);
  font-weight: 500;
}
.ss-link-btn {
  border: 1px solid var(--ss-border);
  color: var(--ss-text-soft);
  margin-top: 6px;
  font-weight: 400;
}
.ss-link-btn:hover { background: var(--ss-hover); color: var(--ss-text); }

.ss-sub { font-size: 13px; padding-left: 28px; color: var(--ss-text); }
.ss-leaf { font-size: 12.5px; padding: 3px 10px 3px 32px; color: var(--ss-text-soft); border-left: 2px solid transparent; }
.ss-leaf:hover { color: var(--ss-active-text); }

/* ─── Aufklappbare Gruppen ─── */
.ss-group { margin: 1px 0; }
.ss-group-title {
  display: block;
  padding: 5px 10px 5px 26px;
  font-size: 13px;
  font-weight: 500;
  color: var(--ss-text);
  cursor: pointer;
  border-radius: 4px;
  list-style: none;
  position: relative;
  user-select: none;
  transition: background 0.12s, color 0.12s;
}
.ss-group-title::-webkit-details-marker { display: none; }
.ss-group-title::before {
  content: "";
  position: absolute;
  left: 12px; top: 50%;
  width: 0; height: 0;
  border-left: 4px solid var(--ss-text-mute);
  border-top: 3.5px solid transparent;
  border-bottom: 3.5px solid transparent;
  transform: translateY(-50%);
  transition: transform 0.15s;
}
.ss-group[open] > .ss-group-title::before {
  transform: translateY(-50%) rotate(90deg);
  border-left-color: var(--ss-text);
}
.ss-group-title:hover { background: var(--ss-hover); color: var(--ss-active-text); }
.ss-children { display: flex; flex-direction: column; gap: 1px; padding: 1px 0 3px; }
.ss-group-nested .ss-group-title { padding-left: 32px; font-size: 12.5px; color: var(--ss-text-soft); }
.ss-group-nested .ss-group-title::before { left: 18px; }
.ss-children-nested {
  padding-left: 0;
  border-left: none;
  margin-left: 18px;
  position: relative;
}
.ss-children-nested::before {
  content: "";
  position: absolute;
  left: 0; top: 2px; bottom: 2px;
  width: 1px;
  background: var(--ss-border);
}
.ss-sub-title { color: var(--ss-text); }

/* ─── Add-Button ─── */
.ss-mini-add {
  width: calc(100% - 8px);
  background: transparent;
  border: 1px dashed var(--ss-border);
  color: var(--ss-text-mute);
  padding: 4px 8px;
  margin: 3px 4px 4px;
  border-radius: 4px;
  font-size: 11.5px;
  cursor: pointer;
  box-shadow: none;
  font-weight: 500;
  text-align: left;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.ss-mini-add:hover {
  background: var(--ss-hover);
  color: var(--ss-accent);
  border-color: var(--ss-accent);
  transform: none;
}

/* ─── Monats-Gruppen ─── */
.ss-month-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--ss-text-mute);
  padding: 6px 10px 2px 32px;
  margin-top: 4px;
}
.ss-month-group { margin: 2px 0 1px; }
.ss-month-summary {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  color: var(--ss-text-mute);
  padding: 5px 10px 5px 32px;
  cursor: pointer;
  list-style: none;
  position: relative;
  border-radius: 4px;
  user-select: none;
  transition: background 0.12s, color 0.12s;
}
.ss-month-summary::-webkit-details-marker { display: none; }
.ss-month-summary::before {
  content: "";
  position: absolute;
  left: 22px; top: 50%;
  width: 0; height: 0;
  border-left: 3.5px solid var(--ss-text-mute);
  border-top: 3px solid transparent;
  border-bottom: 3px solid transparent;
  transform: translateY(-50%);
  transition: transform 0.15s;
}
.ss-month-group[open] > .ss-month-summary::before {
  transform: translateY(-50%) rotate(90deg);
  border-left-color: var(--ss-text-soft);
}
.ss-month-summary:hover { background: var(--ss-hover); color: var(--ss-text); }
.ss-month-items {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 1px 0 3px;
}

/* ─── Statusmarker: vollflächig wie im Klassik-Layout ─── */
.ss-link.marker-fertig {
  color: #fbbf24 !important;
  background: rgba(251,191,36,0.10);
  border-left-color: #f59e0b;
}
.ss-link.marker-fertig:hover {
  background: rgba(251,191,36,0.18);
  color: #fcd34d !important;
}
.ss-link.marker-versandt {
  color: #4ade80 !important;
  background: rgba(74,222,128,0.10);
  border-left-color: #22c55e;
}
.ss-link.marker-versandt:hover {
  background: rgba(74,222,128,0.18);
  color: #86efac !important;
}
.ss-link.missing-ebs {
  color: #f87171 !important;
  background: rgba(248,113,113,0.10);
  border-left-color: #ef4444;
}
.ss-link.missing-ebs:hover {
  background: rgba(248,113,113,0.18);
  color: #fca5a5 !important;
}
/* Aktiver Status: Akzent gewinnt, behält aber den farbigen linken Streifen */
.ss-link.marker-fertig.active {
  background: rgba(251,191,36,0.22);
  color: #fff !important;
  font-weight: 600;
}
.ss-link.marker-versandt.active {
  background: rgba(74,222,128,0.22);
  color: #fff !important;
  font-weight: 600;
}
.ss-link.missing-ebs.active {
  background: rgba(248,113,113,0.22);
  color: #fff !important;
  font-weight: 600;
}

/* ============================================================
   LAYOUT-MODE SINGLE — globale Anpassung von Body/Topbar/Cards/...
   Alle Overrides gelten nur, wenn data-layout="single" am Body
   ============================================================ */
body[data-layout="single"] {
  --m-bg:           #14171f;
  --m-surface:      #1c2030;
  --m-surface-2:    #232838;
  --m-border:       #2a2f40;
  --m-border-soft:  #20253a;
  --m-text:         #d4d8e3;
  --m-text-soft:    #9aa3b8;
  --m-text-mute:    #6c7488;
  --m-hover:        rgba(255,255,255,0.045);
  --m-active:       rgba(99,166,255,0.14);
  --m-accent:       #63a6ff;
  --m-accent-hover: #85bcff;
  --m-danger:       #ef4444;
  --m-success:      #22c55e;
  --m-warning:      #f59e0b;

  background: var(--m-bg);
  color: var(--m-text);
}

/* ─── Topbar flat ─── */
body[data-layout="single"] .topbar {
  background: #181c28;
  border-bottom: 1px solid var(--m-border);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
  padding: 10px 20px;
}
body[data-layout="single"] .brand-title {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.2px;
}
body[data-layout="single"] .brand-subtitle {
  font-size: 13px;
  font-weight: 500;
  background: none;
  -webkit-text-fill-color: var(--m-text-mute);
  color: var(--m-text-mute);
}
body[data-layout="single"] .user { color: var(--m-text-mute); }
body[data-layout="single"] .admin-btn {
  background: transparent;
  border: 1px solid var(--m-border);
  color: var(--m-text-soft);
}
body[data-layout="single"] .admin-btn:hover {
  background: var(--m-hover);
  color: var(--m-text);
}
body[data-layout="single"] .menu-dropdown {
  background: var(--m-surface);
  border: 1px solid var(--m-border);
  box-shadow: 0 4px 16px rgba(0,0,0,0.40);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
body[data-layout="single"] .menu-item {
  color: var(--m-text);
  background: transparent;
  border: none;
  font-weight: 400;
  padding: 8px 12px;
}
body[data-layout="single"] .menu-item:hover {
  background: var(--m-hover);
  color: #fff;
  transform: none;
  box-shadow: none;
}
body[data-layout="single"] .menu-item.layout-item.active {
  background: var(--m-active);
  border-left: 3px solid var(--m-accent);
  color: #fff;
}
body[data-layout="single"] .menu-sep { background: var(--m-border); }
body[data-layout="single"] .menu-section-label { color: var(--m-text-mute); }

/* ─── Content-Bereich: nutzt die volle verfügbare Breite ─── */
body[data-layout="single"] .content {
  padding: 20px 24px;
  width: 100%;
  max-width: 100%;
  flex: 1;
  min-width: 0;            /* erlaubt Schrumpfen unter Flex-Min-Content */
}

/* ─── Cards flat & ohne Breiten-Limit ─── */
body[data-layout="single"] .card {
  background: var(--m-surface);
  border: 1px solid var(--m-border);
  border-radius: 8px;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: 0 1px 3px rgba(0,0,0,0.20);
  padding: 18px 20px;
  max-width: 100%;
  width: 100%;
}
/* Schmale Cards (Login, Setup) behalten ihre Begrenzung */
body[data-layout="single"] .card.narrow { max-width: 460px; width: 100%; }

/* ─── Tabellen: kompakt, Spalten an Inhalt angepasst ─── */
body[data-layout="single"] .card .grid,
body[data-layout="single"] .card table {
  width: auto;              /* Größe an Inhalt anpassen statt 100% strecken */
  max-width: 100%;
  border-collapse: collapse;
}
body[data-layout="single"] .card .grid th,
body[data-layout="single"] .card .grid td,
body[data-layout="single"] .card table th,
body[data-layout="single"] .card table td {
  padding: 5px 10px;        /* enger als die 7px 10px-Default */
  white-space: nowrap;      /* Zellen brechen nicht um */
  vertical-align: top;
}
/* Lange Textspalten dürfen umbrechen */
body[data-layout="single"] .card .grid td.long-text,
body[data-layout="single"] .card table td.long-text {
  white-space: normal;
  max-width: 320px;
}

/* Wenn der Inhalt doch breiter wird als die Card: scrollbarer Container */
body[data-layout="single"] .card .table-scroll,
body[data-layout="single"] .card .grid-scroll {
  overflow-x: auto;
  width: 100%;
}
body[data-layout="single"] .card-header {
  border-bottom: 1px solid var(--m-border-soft);
  padding-bottom: 12px;
  margin-bottom: 16px;
}

/* Untergeordnete Glas-Blöcke ebenfalls flach */
body[data-layout="single"] .block,
body[data-layout="single"] .dash-kpi {
  background: var(--m-surface-2);
  border: 1px solid var(--m-border);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-radius: 6px;
}

/* ─── Buttons flat ─── */
body[data-layout="single"] button {
  background: var(--m-accent);
  border: 1px solid var(--m-accent);
  color: #fff;
  font-weight: 500;
  font-size: 13px;
  padding: 8px 14px;
  border-radius: 6px;
  box-shadow: none;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
body[data-layout="single"] button:hover {
  background: var(--m-accent-hover);
  border-color: var(--m-accent-hover);
  transform: none;
  box-shadow: none;
}
body[data-layout="single"] button:active { transform: none; }
body[data-layout="single"] button.ghost {
  background: transparent;
  border: 1px solid var(--m-border);
  color: var(--m-text);
  font-weight: 400;
}
body[data-layout="single"] button.ghost:hover {
  background: var(--m-hover);
  border-color: var(--m-border);
  color: #fff;
}
body[data-layout="single"] .btb-top-btn {
  background: var(--m-accent);
  color: #fff;
  border: 1px solid var(--m-accent);
  box-shadow: none;
}
body[data-layout="single"] .btb-top-btn:hover {
  background: var(--m-accent-hover);
  border-color: var(--m-accent-hover);
}
body[data-layout="single"] .icon-btn {
  background: transparent;
  border: 1px solid var(--m-border);
  color: var(--m-text-soft);
}
body[data-layout="single"] .icon-btn:hover {
  background: var(--m-hover);
  color: var(--m-text);
}

/* ─── Inputs/Forms flat ─── */
body[data-layout="single"] label {
  color: var(--m-text-soft);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.2px;
}
body[data-layout="single"] input,
body[data-layout="single"] textarea,
body[data-layout="single"] select {
  background: var(--m-surface-2);
  border: 1px solid var(--m-border);
  color: var(--m-text);
  border-radius: 5px;
  padding: 8px 12px;
  font-size: 13px;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
body[data-layout="single"] input::placeholder,
body[data-layout="single"] textarea::placeholder { color: var(--m-text-mute); }
body[data-layout="single"] input:focus,
body[data-layout="single"] textarea:focus,
body[data-layout="single"] select:focus {
  border-color: var(--m-accent);
  box-shadow: 0 0 0 2px rgba(99,166,255,0.18);
  background: var(--m-surface-2);
}
body[data-layout="single"] select option { background: var(--m-surface-2); }

/* ─── Modals flat ─── */
body[data-layout="single"] .modal { background: rgba(8,10,16,0.65); }
body[data-layout="single"] .modal-content {
  background: var(--m-surface);
  border: 1px solid var(--m-border);
  border-radius: 8px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.50);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
body[data-layout="single"] .modal-header {
  border-bottom: 1px solid var(--m-border);
}
body[data-layout="single"] .modal-title { color: #fff; font-weight: 600; }
body[data-layout="single"] .modal-close {
  background: transparent;
  border: 1px solid var(--m-border);
  color: var(--m-text-soft);
}
body[data-layout="single"] .modal-close:hover {
  background: var(--m-hover);
  color: #fff;
}

/* ─── Tabellen / Grids ─── */
body[data-layout="single"] .grid,
body[data-layout="single"] table {
  border-color: var(--m-border);
}
body[data-layout="single"] .grid th,
body[data-layout="single"] table th {
  background: var(--m-surface-2);
  color: var(--m-text-soft);
  border-bottom: 1px solid var(--m-border);
  font-weight: 600;
  letter-spacing: 0.3px;
}
body[data-layout="single"] .grid td,
body[data-layout="single"] table td {
  border-bottom: 1px solid var(--m-border-soft);
  color: var(--m-text);
}
body[data-layout="single"] .grid tr:hover td,
body[data-layout="single"] table tbody tr:hover td {
  background: var(--m-hover);
}

/* ─── Switch ─── */
body[data-layout="single"] .switch .slider {
  background: var(--m-surface-2);
  border-color: var(--m-border);
}
body[data-layout="single"] .switch input:checked + .slider {
  background: var(--m-accent);
  border-color: var(--m-accent);
}

/* ─── Alerts ─── */
body[data-layout="single"] .alert.error {
  background: rgba(239,68,68,0.10);
  border: 1px solid rgba(239,68,68,0.35);
  color: #fca5a5;
  border-radius: 5px;
}

/* ─── Hint-Texte ─── */
body[data-layout="single"] .hint { color: var(--m-text-mute); }
body[data-layout="single"] code { color: var(--m-text-soft); background: var(--m-surface-2); padding: 1px 6px; border-radius: 3px; }

/* ─── Toggle / Sidebar-Buttons im Klassik bleiben unberührt ─── */
body[data-layout="single"] .sb-toggle {
  background: transparent;
  border: 1px solid var(--m-border);
}

/* ============================================================
   Papier-Container: in BTB/Rammprotokoll/Anzeige/Handout sollen
   Inputs ihren Originallook (heller Papier-Stil) behalten, auch
   wenn der Single-Modus aktiv ist.
   ============================================================ */

/* BTB-Bericht */
body[data-layout="single"] .btb-paper input,
body[data-layout="single"] .btb-paper textarea,
body[data-layout="single"] .btb-paper select {
  background: #ffffff;
  color: #111827;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  padding: 4px 6px;
  font-size: 12px;
  box-shadow: none;
}
body[data-layout="single"] .btb-paper input:focus,
body[data-layout="single"] .btb-paper textarea:focus,
body[data-layout="single"] .btb-paper select:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 2px rgba(37,99,235,0.18);
  background: #ffffff;
}
body[data-layout="single"] .btb-paper label { color: #111827; }
body[data-layout="single"] .btb-paper input::placeholder,
body[data-layout="single"] .btb-paper textarea::placeholder { color: #94a3b8; }

/* Rammprotokoll (transparente Inputs mit Unterstrich) */
body[data-layout="single"] .rammprotokoll-wrap input[type="text"],
body[data-layout="single"] .rammprotokoll-wrap input[type="number"],
body[data-layout="single"] .rammprotokoll-wrap textarea {
  background: transparent;
  color: #000;
  border: none;
  border-bottom: 1px solid #bbb;
  border-radius: 0;
  padding: 0 2px;
  box-shadow: none;
}
body[data-layout="single"] .rammprotokoll-wrap input:focus,
body[data-layout="single"] .rammprotokoll-wrap textarea:focus {
  border-bottom-color: #1a5fb4;
  background: #eef4ff;
  box-shadow: none;
}
body[data-layout="single"] .rammprotokoll-wrap select {
  background: #fff;
  color: #000;
  border: 1px solid #bbb;
  border-radius: 4px;
}

/* Anzeige */
body[data-layout="single"] .anzeige-paper input,
body[data-layout="single"] .anzeige-paper textarea {
  background: #ffffff;
  color: #111827;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  padding: 4px 6px;
  box-shadow: none;
}
body[data-layout="single"] .anzeige-paper input:focus,
body[data-layout="single"] .anzeige-paper textarea:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 2px rgba(37,99,235,0.18);
  background: #ffffff;
}

/* Handout */
body[data-layout="single"] .handout-wrap input,
body[data-layout="single"] .handout-wrap select,
body[data-layout="single"] .handout-wrap textarea {
  background: #ffffff;
  color: #000;
  border: 1px solid #bbb;
  border-radius: 4px;
  padding: 3px 6px;
  box-shadow: none;
}
body[data-layout="single"] .handout-wrap input:focus,
body[data-layout="single"] .handout-wrap select:focus,
body[data-layout="single"] .handout-wrap textarea:focus {
  border-color: #1a5fb4;
  box-shadow: 0 0 0 2px rgba(26,95,180,0.18);
  background: #ffffff;
}
body[data-layout="single"] .handout-wrap label { color: #000; }

/* ─── Tabellen, Buttons & Hilfselemente in Papier-Containern hell halten ─── */

/* BTB-Tabellen-Header & -Zellen */
body[data-layout="single"] .btb-paper .grid th,
body[data-layout="single"] .btb-paper table th {
  background: #f8fafc;
  color: #111827;
  border: 1px solid #cbd5e1;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 700;
  text-align: left;
}
body[data-layout="single"] .btb-paper .grid td,
body[data-layout="single"] .btb-paper table td {
  background: #ffffff;
  color: #111827;
  border: 1px solid #cbd5e1;
}
body[data-layout="single"] .btb-paper .grid tr:hover td,
body[data-layout="single"] .btb-paper table tbody tr:hover td {
  background: #f1f5f9;
}

/* BTB-Buttons (Zeile hinzufügen / mini-del) */
body[data-layout="single"] .btb-paper button.ghost {
  background: linear-gradient(135deg, #93c5fd 0%, #60a5fa 100%);
  color: #0c1a2e;
  border: none;
  box-shadow: 0 4px 14px rgba(99,166,255,0.35);
  font-weight: 700;
}
body[data-layout="single"] .btb-paper button.ghost:hover {
  background: linear-gradient(135deg, #bdd8ff 0%, #93c5fd 100%);
  border: none;
}
body[data-layout="single"] .btb-paper .mini-del {
  background: #e2e8f0;
  color: #111827;
  border: none;
  font-weight: 700;
  box-shadow: none;
  border-radius: 6px;
}
body[data-layout="single"] .btb-paper .mini-del:hover {
  background: #cbd5e1;
  color: #111827;
}

/* Anzeige-Tabellen & Buttons (falls verwendet) */
body[data-layout="single"] .anzeige-paper .grid th,
body[data-layout="single"] .anzeige-paper table th {
  background: #f8fafc;
  color: #111827;
  border: 1px solid #cbd5e1;
}
body[data-layout="single"] .anzeige-paper .grid td,
body[data-layout="single"] .anzeige-paper table td {
  background: #ffffff;
  color: #111827;
  border: 1px solid #cbd5e1;
}
body[data-layout="single"] .anzeige-paper button.ghost {
  background: linear-gradient(135deg, #93c5fd 0%, #60a5fa 100%);
  color: #0c1a2e;
  border: none;
  box-shadow: 0 4px 14px rgba(99,166,255,0.35);
}

/* Handout-Tabellen */
body[data-layout="single"] .handout-wrap .grid th,
body[data-layout="single"] .handout-wrap table th {
  background: #f8fafc;
  color: #000;
  border: 1px solid #bbb;
}
body[data-layout="single"] .handout-wrap .grid td,
body[data-layout="single"] .handout-wrap table td {
  background: #ffffff;
  color: #000;
  border: 1px solid #bbb;
}
body[data-layout="single"] .handout-wrap button.ghost {
  background: linear-gradient(135deg, #93c5fd 0%, #60a5fa 100%);
  color: #0c1a2e;
  border: none;
  box-shadow: 0 4px 14px rgba(99,166,255,0.35);
}

/* Rammprotokoll-Tabellen */
body[data-layout="single"] .rammprotokoll-wrap .grid th,
body[data-layout="single"] .rammprotokoll-wrap table th {
  background: #f8fafc;
  color: #000;
  border: 1px solid #bbb;
}
body[data-layout="single"] .rammprotokoll-wrap .grid td,
body[data-layout="single"] .rammprotokoll-wrap table td {
  background: #ffffff;
  color: #000;
  border: 1px solid #bbb;
}

/* Block-Elemente in Papier-Containern wieder weiß */
body[data-layout="single"] .btb-paper .block,
body[data-layout="single"] .anzeige-paper .block,
body[data-layout="single"] .handout-wrap .block,
body[data-layout="single"] .rammprotokoll-wrap .block {
  background: #ffffff;
  border: none;
  color: #111827;
}