/* ─────────────────────────────────────────────────────────────────
   HEEP Loop – Modern Clarity Design System  v0.12.0
───────────────────────────────────────────────────────────────── */

/* ── Design Tokens ─────────────────────────────────────────────── */
:root {
  /* Core palette */
  --navy:    #1C2B4A;
  --cyan:    #06B6D4;
  --bg:      #F6F7F9;
  --surface: #FFFFFF;
  --border:  #E2E4E9;
  --success: #10B981;
  --warning: #F59E0B;
  --danger:  #EF4444;

  /* Typography */
  --text:         #1C2B4A;
  --text-2:       #64748B;
  --text-3:       #94A3B8;
  /* Aliases used across pages */
  --text-primary:   #1C2B4A;
  --text-secondary: #64748B;
  --text-muted:     #94A3B8;
  --accent:         #059669;
  --primary:        var(--navy);
  --font-mono:      'DM Mono', monospace;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0,0,0,.05);
  --shadow:    0 1px 3px rgba(0,0,0,.07), 0 1px 2px rgba(0,0,0,.04);
  --shadow-md: 0 4px 16px rgba(0,0,0,.09), 0 2px 4px rgba(0,0,0,.05);
  --shadow-lg: 0 12px 40px rgba(0,0,0,.13), 0 4px 12px rgba(0,0,0,.07);

  /* Radii */
  --radius-sm:   4px;
  --radius:      8px;
  --radius-lg:   16px;
  --radius-pill: 24px;

  /* Transitions */
  --t:      0.15s ease;
  --t-slow: 0.25s ease;
}

/* ── Reset ─────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── Base ──────────────────────────────────────────────────────── */
html { scroll-behavior: smooth; overflow-x: hidden; scrollbar-gutter: stable; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  line-height: 1.5;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* ── Typography Scale ───────────────────────────────────────────
   H1  .page-title      22px / 700 / navy   – Seiten-Titel im Subheader
   H2  .section-heading 16px / 700 / navy   – Abschnitts-Überschrift
   H3  .card-heading    14px / 600 / navy   – Karten-Titel
   H4  .label-caps      11px / 700 / muted  – Labels (uppercase)
   p / body             14px / 400 / text   – Fließtext
   .text-sm             13px / 400 / text-2 – Sekundärtext
   .text-xs             11px / 400 / muted  – Captions
   code / .mono         DM Mono 12px        – IDs, Versionen, Technische Werte
───────────────────────────────────────────────────────────────── */
.page-title {
  font-size: 22px;
  font-weight: 700;
  color: var(--navy);
  letter-spacing: -0.3px;
  line-height: 1.25;
  margin: 0 0 2px;
}
.page-title span {
  font-size: 13px;
  font-weight: 400;
  color: var(--text-muted);
  margin-left: 8px;
  letter-spacing: 0;
  vertical-align: middle;
}
.section-heading {
  font-size: 16px;
  font-weight: 700;
  color: var(--navy);
  letter-spacing: -0.15px;
  line-height: 1.3;
  margin: 0;
}
.card-heading {
  font-size: 14px;
  font-weight: 600;
  color: var(--navy);
  line-height: 1.4;
  margin: 0;
}
.label-caps {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  line-height: 1.3;
}
.text-sm  { font-size: 13px; color: var(--text-secondary); line-height: 1.5; }
.text-xs  { font-size: 11px; color: var(--text-muted);     line-height: 1.4; }
.mono, code { font-family: var(--font-mono); font-size: 12px; }

/* ── Navbar ────────────────────────────────────────────────────── */
.navbar {
  position: sticky; top: 0; z-index: 200;
  background: var(--surface);
  box-shadow: 0 1px 0 var(--border);
}
.navbar-top {
  height: 64px;
  border-bottom: 1px solid var(--border);
}
.navbar-bottom {
  height: 44px;
  border-bottom: 1px solid var(--border);
}
.navbar-inner {
  max-width: 1100px;
  margin: 0 auto;
  height: 100%;
  display: flex; align-items: center;
  padding: 0 24px; gap: 0;
}
.navbar-logo {
  font-size: 18px; font-weight: 700;
  text-decoration: none; color: var(--navy);
  letter-spacing: -0.02em; white-space: nowrap; margin-right: 28px;
  transition: opacity var(--t);
}
.navbar-logo:hover { opacity: .8; }
.navbar-logo span { color: var(--cyan); }
.navbar-logo img,
.navbar-top .navbar-inner > a > img { height: 38px; width: auto; display: block; }
.navbar-links { display: flex; align-items: center; gap: 4px; flex: 1; min-width: 0; }
.navbar-link {
  position: relative;
  display: flex; align-items: center;
  padding: 6px 12px; border-radius: 4px;
  font-size: 14px; font-weight: 500; color: #374151;
  letter-spacing: 0.01em;
  text-decoration: none; transition: background var(--t), color var(--t), box-shadow 0.2s ease;
  white-space: nowrap;
}
.navbar-link:hover { background: rgba(28,43,74,0.05); color: var(--navy); box-shadow: 0 0 8px 2px rgba(5,150,105,.12), 0 0 16px 4px rgba(5,150,105,.06); }
.navbar-link.active {
  background: rgba(28,43,74,.07); color: var(--navy); font-weight: 700; border-radius: 4px;
}
.navbar-link.active::after { display: none; }
.navbar-link-inv {
  background: transparent;
  color: var(--navy);
  font-weight: 600;
  border: 1.5px solid #CBD5E1;
  border-radius: 4px;
  margin-left: 8px;
}
.navbar-link-inv:hover { background: var(--navy); color: #fff; border-color: var(--navy); box-shadow: 0 0 10px 2px rgba(28,43,74,.15); }
.navbar-link-inv.active { background: var(--navy); color: #fff; border-color: var(--navy); }
.navbar-link-inv.active::after { display: none; }
.navbar-right { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.navbar-login-btn {
  font-size: 12px; font-weight: 600;
  color: var(--navy); text-decoration: none;
  padding: 6px 14px; border: 1px solid var(--border);
  border-radius: var(--radius); background: var(--bg);
  transition: background var(--t), border-color var(--t);
  white-space: nowrap;
}
.navbar-login-btn:hover { background: var(--surface); border-color: #C9CDD6; }

/* Avatar + Dropdown */
.avatar {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--navy); color: #fff;
  font-size: 13px; font-weight: 700; letter-spacing: .02em;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; user-select: none; position: relative;
  flex-shrink: 0; transition: background var(--t), box-shadow var(--t);
  box-shadow: 0 0 0 2px transparent;
}
.avatar:hover { background: #253960; box-shadow: 0 0 0 3px rgba(28,43,74,.25); }
.dropdown {
  position: absolute; top: calc(100% + 8px); right: 0;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow-md);
  min-width: 200px; overflow: hidden; display: none; z-index: 300;
  animation: dropIn .15s ease;
}
@keyframes dropIn {
  from { opacity: 0; transform: translateY(-4px) scale(.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.dropdown.open { display: block; }
.dropdown-email {
  padding: 10px 16px 6px; font-size: 12px; color: var(--text-3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dropdown-name {
  padding: 12px 16px 2px; font-size: 13px; font-weight: 600; color: var(--navy);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dropdown-role {
  padding: 0 16px 10px; font-size: 11px; color: var(--text-3); letter-spacing: .02em;
}
.dropdown-divider { height: 1px; background: var(--border); }
.dropdown-item {
  display: block; width: 100%; padding: 9px 16px; text-align: left;
  background: none; border: none; font-size: 13px; font-weight: 500;
  color: var(--text-2); cursor: pointer; transition: background var(--t);
  font-family: 'DM Sans', sans-serif; text-decoration: none;
}
.dropdown-item:hover { background: var(--bg); color: var(--navy); }
.dropdown-btn {
  display: block; width: 100%; padding: 10px 16px; text-align: left;
  background: none; border: none; font-size: 13px; font-weight: 500;
  color: var(--danger); cursor: pointer; transition: background var(--t);
  font-family: 'DM Sans', sans-serif;
}
.dropdown-btn:hover { background: rgba(239,68,68,.05); }

/* ── Avatar Dropdown – redesigned identity card ─────────────────── */
.dd-header {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 16px 12px; background: var(--bg);
  border-bottom: 1px solid var(--border);
}
.dd-avatar {
  width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0;
  background: var(--navy); color: #fff;
  font-size: 13px; font-weight: 700; letter-spacing: .02em;
  display: flex; align-items: center; justify-content: center;
}
.dd-info { min-width: 0; flex: 1; }
.dd-name  { font-size: 13px; font-weight: 600; color: var(--navy); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dd-email { font-size: 11px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; }
.dd-role-badge {
  display: inline-block; margin-top: 5px;
  padding: 2px 7px; border-radius: 20px;
  background: var(--navy); color: #fff;
  font-size: 10px; font-weight: 600; letter-spacing: .04em;
}
.dd-tenant {
  display: flex; align-items: center; gap: 7px;
  padding: 8px 16px; background: #EFF6FF;
  border-bottom: 1px solid #DBEAFE;
}
.dd-tenant-icon { color: #3B82F6; flex-shrink: 0; display: flex; }
.dd-tenant-name { font-size: 12px; font-weight: 500; color: #1D4ED8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dd-item {
  display: flex; align-items: center; gap: 8px;
  width: 100%; padding: 9px 16px; text-align: left;
  background: none; border: none; font-size: 13px; font-weight: 500;
  color: var(--text-2); cursor: pointer; transition: background var(--t);
  font-family: 'DM Sans', sans-serif; text-decoration: none;
}
.dd-item:hover { background: var(--bg); color: var(--navy); }
.dd-item-icon { color: var(--text-3); flex-shrink: 0; display: flex; transition: color var(--t); }
.dd-item:hover .dd-item-icon { color: var(--navy); }
.dd-item-danger { color: var(--danger); }
.dd-item-danger:hover { background: rgba(239,68,68,.05); color: var(--danger); }
.dd-item-danger .dd-item-icon { color: var(--danger); }
.dd-item-danger:hover .dd-item-icon { color: var(--danger); }

/* ── Subheader (page title strip below Navbar) ──────────────────── */
.subheader {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.subheader-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 72px;
  padding: 16px 24px;
}
.subheader-title { font-size: 22px; font-weight: 700; color: var(--navy); letter-spacing: -.3px; margin: 0 0 2px; }
.subheader-sub   { font-size: 13px; color: var(--text-muted); margin: 0; }
.subheader .page-sub { margin-bottom: 0; }

/* ── Workflow Bar ───────────────────────────────────────────────── */
.workflow-bar {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  height: 44px;
  display: flex; align-items: center; justify-content: center;
  padding: 0 24px;
}
.wf-steps { display: flex; align-items: center; }
.wf-step { display: flex; align-items: center; gap: 7px; padding: 0 10px; }
.wf-dot {
  width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 700;
  background: var(--border); color: var(--text-3);
  transition: background var(--t), color var(--t);
}
.wf-step.done .wf-dot   { background: var(--success); color: #fff; }
.wf-step.active .wf-dot { background: var(--navy); color: #fff; }
.wf-label { font-size: 12px; font-weight: 500; color: var(--text-3); white-space: nowrap; transition: color var(--t); }
.wf-step.done .wf-label   { color: var(--success); }
.wf-step.active .wf-label { color: var(--navy); font-weight: 600; }
.wf-sep { font-size: 12px; color: var(--border); padding: 0 2px; }
@media (max-width: 600px) { .wf-label { display: none; } .wf-step { padding: 0 6px; } }
a.wf-step { text-decoration: none; }
a.wf-step.done:hover { opacity: .75; transition: opacity var(--t); }

/* ── Hamburger / Mobile Nav ──────────────────────────────────── */
.hamburger {
  display: none; flex-direction: column; justify-content: center;
  align-items: center; gap: 5px;
  width: 40px; height: 40px; background: none; border: none;
  cursor: pointer; padding: 8px; border-radius: var(--radius);
  margin-left: 8px; flex-shrink: 0;
  transition: background var(--t);
}
.hamburger:hover { background: var(--bg); }
.hamburger span {
  display: block; width: 20px; height: 2px;
  background: var(--navy); border-radius: 1px;
  transition: transform .22s ease, opacity .18s ease;
  transform-origin: center;
}
.hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.25);
  z-index: 299;
  opacity: 0; pointer-events: none;
  transition: opacity .25s ease;
}
.mobile-overlay.open { opacity: 1; pointer-events: auto; }

.mobile-menu {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: 280px;
  background: var(--surface);
  z-index: 300;
  transform: translateX(100%);
  transition: transform .28s cubic-bezier(0.4,0,0.2,1);
  box-shadow: -8px 0 40px rgba(28,43,74,.15);
  overflow-y: auto;
  padding-top: 108px;
  display: block;
}
.mobile-menu.open { transform: translateX(0); }
.mobile-menu-link {
  display: flex; align-items: center;
  padding: 0 24px; height: 48px;
  font-size: 14px; font-weight: 500; color: var(--text-2);
  text-decoration: none;
  border-bottom: 1px solid var(--border);
  transition: background var(--t), color var(--t);
}
.mobile-menu-link:last-child { border-bottom: none; }
.mobile-menu-link:hover { background: var(--bg); color: var(--navy); }
.mobile-menu-link.active {
  color: var(--navy); font-weight: 600;
  border-left: 3px solid var(--navy); padding-left: 21px;
}
.mobile-menu-link.inv { color: #5B21B6; font-weight: 600; }
.mobile-menu-sep { height: 1px; background: var(--border); margin: 8px 16px; }
.mobile-menu-logout {
  display: flex; align-items: center;
  width: 100%; padding: 14px 24px;
  font-size: 14px; font-weight: 500;
  color: var(--danger); background: none; border: none;
  cursor: pointer; font-family: 'DM Sans', sans-serif;
  transition: background var(--t);
}
.mobile-menu-logout:hover { background: rgba(239,68,68,.05); }

@media (max-width: 768px) {
  .navbar-bottom { display: none; }
  .hamburger     { display: flex; }
  .navbar-top .navbar-inner > a > img,
  .navbar-logo img { height: 28px !important; max-width: 140px; }
  .navbar-right  { gap: 6px; }
  .subheader-inner { flex-direction: column; align-items: flex-start; gap: 12px; }
  .subheader-inner .btn-primary { width: 100%; justify-content: center; }
}

/* ── Bottom Nav (anlage.html mobile) ────────────────────────── */
.bottom-nav {
  display: none;
  position: fixed; bottom: 0; left: 0; right: 0;
  height: 60px; background: var(--surface);
  border-top: 1px solid #E2E4E9;
  box-shadow: 0 -2px 12px rgba(0,0,0,.06);
  z-index: 100;
  align-items: stretch;
}
.bottom-nav-btn {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 3px; flex: 1; background: none;
  border: none; border-right: 1px solid var(--border);
  cursor: pointer; padding: 0 8px;
  text-decoration: none; color: var(--text-2);
  transition: background var(--t), color var(--t);
  font-family: 'DM Sans', sans-serif;
}
.bottom-nav-btn:last-child { border-right: none; }
.bottom-nav-btn:hover, .bottom-nav-btn:active { background: var(--bg); color: var(--navy); }
.bottom-nav-icon  { font-size: 20px; line-height: 1; }
.bottom-nav-label { font-size: 11px; font-weight: 500; }
.bottom-nav-spacer { display: none; height: 80px; }

@media (max-width: 768px) {
  .bottom-nav { display: flex; }
  .bottom-nav-spacer { display: block; }
}

/* ── Container ─────────────────────────────────────────────────── */
.container    { max-width: 1100px; margin: 0 auto; padding: 0 24px; }
.container-sm { max-width:  760px; margin: 0 auto; padding: 0 24px; }

/* ── Layout grids ──────────────────────────────────────────────── */
.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px; align-items: stretch;
}
@media (max-width: 780px) { .grid-2 { grid-template-columns: 1fr; } }

/* ── Panel / Card ───────────────────────────────────────────────── */
.panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--t);
}
.panel-header {
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  background: linear-gradient(to bottom, #fafbfc, var(--surface));
}
.panel-title {
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-2);
}
.panel-body { padding: 20px; }
.order-label { font-size: 12px; color: var(--text-3); }
.order-id    { font-size: 12px; color: var(--text-3); }

/* ── Spinner ────────────────────────────────────────────────────── */
.spinner {
  display: inline-block; width: 24px; height: 24px;
  border: 2px solid var(--border); border-top-color: var(--navy);
  border-radius: 50%; animation: spin 0.7s linear infinite;
  margin-bottom: 14px;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── State / Loading ────────────────────────────────────────────── */
.state { padding: 56px 20px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.state-label { font-size: 13px; color: var(--text-3); letter-spacing: 0.03em; }
.error-msg   { font-size: 13px; color: var(--danger); }

/* ── Toast ─────────────────────────────────────────────────────── */
.toast {
  position: fixed; bottom: 24px; right: 24px;
  padding: 12px 20px; border-radius: var(--radius);
  font-size: 13px; font-weight: 500;
  opacity: 0; transform: translateY(10px) scale(.97);
  transition: opacity 0.2s ease, transform 0.2s ease;
  pointer-events: none; z-index: 9999;
  box-shadow: var(--shadow-md);
}
.toast.show { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
.toast.ok   { background: var(--success); color: #fff; }
.toast.err  { background: var(--danger);  color: #fff; }
.toast.persistent { min-width: 300px; max-width: 380px; padding: 0; background: var(--navy); color: #fff; }
.toast-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px 8px; }
.toast-title { font-weight: 600; font-size: 13px; }
.toast-close { background: none; border: none; color: rgba(255,255,255,.6); cursor: pointer; font-size: 20px; line-height: 1; padding: 0 0 0 8px; }
.toast-close:hover { color: #fff; }
.toast-open-btn { display: block; margin: 0 14px 10px; background: var(--accent); color: #fff; border-radius: var(--radius-sm); padding: 9px 12px; text-align: center; font-weight: 600; font-size: 13px; text-decoration: none; }
.toast-open-btn:hover { opacity: .88; }
.toast-url-row { display: flex; align-items: center; gap: 6px; padding: 0 14px 10px; }
.toast-url { font-family: var(--font-mono); font-size: 10px; color: rgba(255,255,255,.55); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.toast-copy { background: none; border: none; color: rgba(255,255,255,.55); cursor: pointer; font-size: 13px; padding: 0; flex-shrink: 0; line-height: 1; }
.toast-copy:hover { color: #fff; }
.toast-meta { padding: 7px 14px; border-top: 1px solid rgba(255,255,255,.12); font-size: 11px; color: rgba(255,255,255,.5); }
.toast.persistent.ok  { background: var(--success); }
.toast.persistent.err { background: var(--danger); }
.toast-missing-list { list-style: none; padding: 0 14px 10px; margin: 0; }
.toast-missing-list li { font-size: 12px; color: rgba(255,255,255,.85); padding: 2px 0 2px 10px; position: relative; }
.toast-missing-list li::before { content: '·'; position: absolute; left: 0; }
.toast-settings-btn { display: block; margin: 0 14px 10px; background: rgba(255,255,255,.18); color: #fff; border-radius: var(--radius-sm); padding: 8px 12px; text-align: center; font-weight: 600; font-size: 13px; text-decoration: none; }
.toast-settings-btn:hover { background: rgba(255,255,255,.28); }

/* ── Buttons ────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 12px 24px; border: none; border-radius: 6px;
  font-family: 'DM Sans', sans-serif; font-size: 14px; font-weight: 600;
  min-height: 44px;
  cursor: pointer; transition: background var(--t), border-color var(--t),
    color var(--t), box-shadow var(--t), transform var(--t);
  white-space: nowrap; text-decoration: none; letter-spacing: 0.01em;
  user-select: none;
}
.btn:disabled { opacity: 0.4; cursor: default; }
.btn:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; box-shadow: 0 0 0 4px rgba(28,43,74,0.15); }
.btn:active:not(:disabled) { transform: translateY(1px); }

.btn-primary { background: var(--navy); color: #fff; border: none; box-shadow: var(--shadow-sm); }
.btn-primary:hover:not(:disabled) { background: #253960; box-shadow: 0 4px 16px rgba(28,43,74,0.25); }

.btn-secondary {
  background: transparent; color: var(--text-2);
  border: 1px solid var(--border);
}
.btn-secondary:hover:not(:disabled) {
  border-color: #94A3B8; color: var(--navy);
  background: rgba(28,43,74,.03);
}
.btn.success {
  background: rgba(16,185,129,0.10);
  border: 1px solid rgba(16,185,129,0.3);
  color: var(--success);
}
.btn-full { width: 100%; }

/* ── Badges ─────────────────────────────────────────────────────── */
.badge {
  display: inline-flex; align-items: center;
  padding: 3px 10px; border-radius: 4px;
  font-size: 11px; font-weight: 600; letter-spacing: 0.05em;
}
.badge-blue    { background: rgba(5,150,105,.10); border: 1px solid rgba(5,150,105,.22); color: #047857; }
.badge-purple  { background: rgba(124,58,237,.10); border: 1px solid rgba(124,58,237,.22); color: #7c3aed; }
.badge-gray    { background: rgba(100,116,139,.07); border: 1px solid var(--border); color: var(--text-2); }
.badge-success { background: rgba(16,185,129,.10); border: 1px solid rgba(16,185,129,.22); color: var(--success); }

/* ── Form elements ──────────────────────────────────────────────── */
.form-group { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.form-label { font-size: 12px; font-weight: 600; color: var(--text-2); letter-spacing: 0.02em; }
.form-input {
  padding: 10px 13px; border: 1.5px solid var(--border); border-radius: 6px;
  font-family: 'DM Sans', sans-serif; font-size: 14px; color: var(--text);
  background: var(--surface); transition: border-color var(--t), box-shadow var(--t);
  width: 100%; appearance: none;
}
.form-input:hover:not(:focus) { border-color: #94A3B8; }
.form-input:focus {
  outline: none; border-color: var(--navy);
  box-shadow: 0 0 0 3px rgba(28,43,74,.10);
}
.form-input::placeholder { color: var(--text-3); }
select.form-input { cursor: pointer; }

/* ── Drop zone ──────────────────────────────────────────────────── */
.drop-zone {
  border: 2px dashed var(--border); border-radius: var(--radius);
  padding: 44px 24px; text-align: center;
  cursor: pointer; transition: border-color var(--t), background var(--t); margin-bottom: 16px;
  background: linear-gradient(to bottom, #fafbfc, var(--surface));
}
.drop-zone:hover, .drop-zone.drag {
  border-color: var(--navy); background: rgba(28,43,74,.03);
}
.drop-zone.drag { border-style: solid; }
.drop-zone-icon  { font-size: 32px; margin-bottom: 10px; opacity: .7; }
.drop-zone-label { font-size: 14px; font-weight: 500; color: var(--text-2); margin-bottom: 4px; }
.drop-zone-sub   { font-size: 12px; color: var(--text-3); }

/* ── File info chip ─────────────────────────────────────────────── */
.file-info-chip {
  display: none; margin-bottom: 14px; padding: 10px 14px;
  background: rgba(28,43,74,.04); border: 1px solid rgba(28,43,74,.12);
  border-radius: 6px; font-size: 12px; color: var(--navy);
}

/* ── Result boxes ───────────────────────────────────────────────── */
.result { margin-top: 16px; border-radius: var(--radius-lg); padding: 16px; display: none; }
.result.success { background: rgba(16,185,129,.06); border: 1px solid rgba(16,185,129,.2); }
.result.error   { background: rgba(239,68,68,.06);  border: 1px solid rgba(239,68,68,.2); }
.result-title { font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 12px; }
.result.success .result-title { color: var(--success); }
.result.error   .result-title { color: var(--danger); }

.field { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid var(--border); font-size: 13px; }
.field:last-child { border: none; }
.field-label { color: var(--text-3); font-size: 12px; }
.field-value { color: var(--text); font-weight: 500; text-align: right; max-width: 60%; }
.conf { font-size: 10px; color: var(--success); margin-left: 6px; }

/* ── File list (index.html) ─────────────────────────────────────── */
.file-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 13px 20px; border-bottom: 1px solid var(--border);
  transition: background var(--t); cursor: default;
}
.file-row:hover { background: #f8f9fb; }
.file-row:last-child { border-bottom: none; }
.file-name { font-size: 13px; font-weight: 500; color: var(--text); }
.file-meta { font-size: 11px; color: var(--text-3); margin-top: 2px; }
.file-norm {
  padding: 3px 9px; border-radius: var(--radius-sm); font-size: 11px; font-weight: 600;
  background: rgba(28,43,74,.06); color: var(--navy); border: 1px solid rgba(28,43,74,.14);
  letter-spacing: .02em;
}
.empty {
  padding: 40px 20px; text-align: center; font-size: 13px; color: var(--text-3);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.empty::before {
  content: ''; display: block; width: 32px; height: 32px;
  border-radius: 50%; background: var(--bg);
  border: 1px solid var(--border);
}

/* ── Loading state (generic) ────────────────────────────────────── */
.loading { display: none; text-align: center; padding: 24px; }
.loading .spinner { width: 22px; height: 22px; margin-bottom: 8px; }
.loading-text { font-size: 12px; color: var(--text-3); }

/* ── Summary rows ───────────────────────────────────────────────── */
.summary-row {
  display: flex; justify-content: space-between;
  padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 13px;
}
.summary-row:last-child { border: none; }
.summary-label { color: var(--text-2); }
.summary-val   { color: var(--text); font-weight: 500; }
.summary-val.green { color: var(--success); }
.summary-val.red   { color: var(--danger); }
.summary-val.amber { color: var(--warning); }

/* ── review.html – field rows ───────────────────────────────────── */
.field-row { padding: 16px 0; border-bottom: 1px solid var(--border); }
.field-row:last-child { border: none; }
.field-top  { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.field-label { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-2); font-weight: 600; }
.field-hint  { font-size: 11px; color: var(--text-3); margin-top: 3px; }

.conf-badge {
  font-size: 11px; padding: 3px 9px; border-radius: 4px;
  font-weight: 500; letter-spacing: 0.04em; white-space: nowrap; flex-shrink: 0;
}
.conf-high { background: rgba(16,185,129,.1); border: 1px solid rgba(16,185,129,.25); color: var(--success); }
.conf-low  { background: rgba(239,68,68,.1);  border: 1px solid rgba(239,68,68,.25);  color: var(--danger); }
.conf-none { background: var(--bg); border: 1px solid var(--border); color: var(--text-3); }

input.field-input {
  width: 100%; padding: 10px 13px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 6px; color: var(--text);
  font-family: 'DM Sans', sans-serif; font-size: 14px;
  transition: border-color 0.15s;
}
input.field-input:focus { outline: none; border-color: var(--navy); box-shadow: 0 0 0 3px rgba(28,43,74,.10); }
input.field-input.high { border-color: rgba(16,185,129,.35); }
input.field-input.low  { border-color: rgba(239,68,68,.35); }
input.field-input::placeholder { color: var(--text-3); }

/* Sidebar (review + checklist shared) */
.sidebar { display: flex; flex-direction: column; gap: 16px; }

/* ── 2-column layout grid (review + checklist) ──────────────────── */
.layout {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 20px; align-items: start;
}
@media (max-width: 820px) { .layout { grid-template-columns: 1fr; } }

/* ── Norm tabs (checklist) ──────────────────────────────────────── */
.norm-tabs {
  display: flex; gap: 6px; padding: 14px 20px;
  border-bottom: 1px solid var(--border); flex-wrap: wrap;
}
.norm-tab {
  padding: 6px 14px; border-radius: 5px;
  font-size: 12px; font-weight: 500; letter-spacing: 0.04em;
  cursor: pointer; border: 1px solid var(--border);
  background: transparent; color: var(--text-2);
  transition: all 0.15s; font-family: 'DM Sans', sans-serif;
}
.norm-tab:hover  { border-color: #94A3B8; color: var(--navy); }
.norm-tab.active { background: rgba(28,43,74,.07); border-color: rgba(28,43,74,.25); color: var(--navy); font-weight: 600; }

/* ── Checklist doc rows ─────────────────────────────────────────── */
.doc-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 13px 0; border-bottom: 1px solid var(--border); gap: 12px;
}
.doc-row:last-child { border: none; }
.doc-left { display: flex; align-items: center; gap: 12px; min-width: 0; }
.dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; transition: background 0.2s; }
.dot-ok   { background: var(--success); }
.dot-warn { background: var(--danger); }
.dot-opt  { background: var(--border); }
.doc-name   { font-size: 13px; color: var(--text); }
.doc-pflicht { font-size: 11px; color: var(--warning); margin-top: 2px; }
.doc-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

.status-badge {
  font-size: 10px; padding: 3px 8px; border-radius: 4px;
  font-weight: 600; letter-spacing: 0.06em; white-space: nowrap;
}
.badge-ok   { background: rgba(16,185,129,.1); border: 1px solid rgba(16,185,129,.25); color: var(--success); }
.badge-warn { background: rgba(239,68,68,.1);  border: 1px solid rgba(239,68,68,.25);  color: var(--danger); }
.badge-opt  { background: var(--bg); border: 1px solid var(--border); color: var(--text-3); }

.doc-filename {
  font-size: 11px; color: var(--text-3);
  max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.upload-btn {
  padding: 5px 12px; background: transparent;
  border: 1px solid var(--border); border-radius: 4px;
  color: var(--text-2); font-family: 'DM Sans', sans-serif; font-size: 11px;
  font-weight: 500; cursor: pointer; transition: all 0.15s; white-space: nowrap;
}
.upload-btn:hover:not(:disabled) { background: rgba(28,43,74,.04); border-color: #94A3B8; color: var(--navy); }
.upload-btn:disabled { color: var(--text-3); border-color: var(--border); cursor: default; }

/* Norm badge (checklist summary sidebar) */
.norm-badge-big {
  text-align: center; padding: 18px 20px;
  border-bottom: 1px solid var(--border);
}
.norm-name { font-size: 22px; font-weight: 700; color: var(--navy); }
.norm-sub  { font-size: 11px; color: var(--text-3); margin-top: 4px; letter-spacing: 0.08em; }

/* Nav buttons in checklist sidebar */
.nav-btn {
  display: block; width: 100%; padding: 11px 16px;
  border-radius: 6px; font-family: 'DM Sans', sans-serif;
  font-size: 13px; font-weight: 500; text-align: center;
  text-decoration: none; border: 1px solid var(--border);
  color: var(--text-2); transition: border-color var(--t), color var(--t), background var(--t);
  background: var(--surface);
}
.nav-btn:hover { border-color: var(--navy); color: var(--navy); background: rgba(28,43,74,.02); }

/* ── Focus-visible ring (accessibility) ─────────────────────────── */
a:focus-visible, button:focus-visible, select:focus-visible, input:focus-visible {
  outline: 2px solid var(--navy); outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(28,43,74,0.12);
}

/* ── blocks.html – accordion ────────────────────────────────────── */
.blocks-layout {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 20px; align-items: start;
}
@media (max-width: 960px) { .blocks-layout { grid-template-columns: 1fr; } }

.chapter { border-bottom: 1px solid var(--border); }
.chapter:last-child { border-bottom: none; }
.chapter-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 20px; cursor: pointer; user-select: none;
  transition: background 0.15s;
}
.chapter-header:hover { background: var(--bg); }
.chapter-title { font-size: 13px; font-weight: 500; color: var(--text); }
.chapter-meta  { display: flex; align-items: center; gap: 8px; }

.source-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.dot-template     { background: var(--navy); }
.dot-custom       { background: var(--warning); }
.dot-commissioning{ background: #7c3aed; }
.dot-missing      { background: var(--danger); }

.chapter-arrow {
  font-size: 10px; color: var(--text-3); transition: transform 0.2s;
}
.chapter.open .chapter-arrow { transform: rotate(90deg); }
.chapter-body { display: none; padding: 0 20px 20px; }
.chapter.open .chapter-body { display: block; }

/* blocks.html textareas (inside .chapter-body) */
.chapter-body textarea.block-textarea {
  width: 100%; min-height: 200px; max-height: 500px;
  background: var(--bg); border: 1px solid var(--border);
  border-radius: 6px; padding: 12px 14px;
  color: var(--text); font-family: 'DM Sans', sans-serif;
  font-size: 13px; line-height: 1.65; resize: vertical;
  transition: border-color 0.15s; margin-top: 12px;
  display: block; /* always visible in accordion */
}
.chapter-body textarea.block-textarea:focus {
  outline: none; border-color: var(--navy);
  box-shadow: 0 0 0 3px rgba(28,43,74,.08);
}
.chapter-body textarea.block-textarea.unchanged { border-color: rgba(16,185,129,.35); }
.chapter-body textarea.block-textarea.changed   { border-color: rgba(245,158,11,.45); background: rgba(245,158,11,.02); }
.char-count { font-size: 11px; color: var(--text-3); text-align: right; margin-top: 5px; }

/* blocks – commissioning checklist */
.right-col { display: flex; flex-direction: column; gap: 16px; position: sticky; top: 104px; }

.check-item { padding: 12px 20px; border-bottom: 1px solid var(--border); }
.check-item:last-child { border-bottom: none; }
.check-row { display: flex; align-items: flex-start; gap: 10px; }
.check-id { font-size: 10px; color: var(--text-3); white-space: nowrap; padding-top: 2px; min-width: 44px; }
.check-label { font-size: 12px; color: var(--text); line-height: 1.5; flex: 1; }
.check-pflicht { color: var(--danger); margin-left: 4px; font-size: 10px; }
.check-progress { font-size: 11px; color: var(--text-3); }

input[type=checkbox] {
  appearance: none; width: 16px; height: 16px; min-width: 16px;
  border: 1.5px solid var(--border); border-radius: 4px;
  background: var(--surface); cursor: pointer;
  transition: all 0.15s; margin-top: 1px;
}
input[type=checkbox]:checked {
  background: var(--navy); border-color: var(--navy);
}
input[type=checkbox]:checked::after {
  content: '✓'; display: block; font-size: 10px; color: #fff;
  text-align: center; line-height: 16px;
}

.proto-input {
  display: none; width: 100%; margin-top: 8px; margin-left: 26px;
  background: var(--bg); border: 1px solid var(--border);
  border-radius: 4px; padding: 7px 10px; color: var(--text);
  font-family: 'DM Sans', sans-serif; font-size: 12px;
  transition: border-color 0.15s;
}
.proto-input:focus { outline: none; border-color: var(--navy); }
input[type=checkbox]:checked ~ .proto-input { display: block; }
.proto-label {
  display: none; font-size: 11px; color: var(--text-3);
  margin-top: 6px; margin-left: 26px;
}
input[type=checkbox]:checked ~ .proto-label { display: block; }

.legend { display: flex; gap: 16px; padding: 12px 20px; border-top: 1px solid var(--border); flex-wrap: wrap; }
.legend-item { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--text-3); }

/* blocks – footer bar */
.footer { margin-top: 24px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.save-status {
  font-size: 12px; letter-spacing: 0.04em;
  padding: 6px 14px; border-radius: 5px;
}
.save-status.saved   { color: var(--success); background: rgba(16,185,129,.08); border: 1px solid rgba(16,185,129,.2); }
.save-status.unsaved { color: var(--warning); background: rgba(245,158,11,.08); border: 1px solid rgba(245,158,11,.2); }

/* ── anlage.html ────────────────────────────────────────────────── */
.public-header {
  background: var(--surface); border-bottom: 1px solid var(--border);
  padding: 16px 32px; display: flex; align-items: center; gap: 14px;
}
.public-label { margin-left: auto; font-size: 12px; color: var(--text-3); }

.loading-center  { text-align: center; padding: 64px 0; }
.loading-center .spinner { width: 32px; height: 32px; margin-bottom: 16px; border-top-color: var(--navy); }
.loading-text    { margin-top: 0; font-size: 13px; color: var(--text-3); }
.not-found-box   { text-align: center; padding: 64px 0; }
.not-found-icon  { font-size: 40px; margin-bottom: 16px; opacity: 0.35; }
.not-found-title { font-size: 18px; color: var(--text-2); margin-bottom: 8px; font-weight: 600; }
.not-found-sub   { font-size: 13px; color: var(--text-3); }

.data-row {
  display: flex; align-items: center;
  padding: 13px 20px; border-bottom: 1px solid var(--border);
}
.data-row:last-child { border-bottom: none; }
.data-label {
  font-size: 11px; color: var(--text-3); text-transform: uppercase;
  letter-spacing: 0.08em; min-width: 160px; flex-shrink: 0;
}
.data-value { font-size: 14px; color: var(--text); font-weight: 500; word-break: break-all; }
.data-value.mono { font-family: 'DM Mono', monospace; font-size: 12px; color: var(--navy); }
.data-value.norm { color: #7c3aed; }

.ver-badge {
  display: inline-block; background: rgba(16,185,129,.1);
  border: 1px solid rgba(16,185,129,.25); color: var(--success);
  padding: 3px 12px; border-radius: 4px; font-size: 13px; font-weight: 600;
}
.hash-box {
  background: var(--bg); border: 1px solid var(--border);
  border-radius: 6px; padding: 12px 16px; margin-top: 8px;
  font-family: 'DM Mono', monospace; font-size: 11px;
  color: var(--text-2); word-break: break-all; line-height: 1.6;
}
.hash-label {
  font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-3); margin-bottom: 4px;
}
.btn-download {
  display: block; width: 100%; padding: 14px; background: var(--navy);
  border: none; border-radius: 6px; color: #fff;
  font-size: 14px; font-weight: 600; text-align: center;
  text-decoration: none; cursor: pointer; transition: background 0.2s;
  margin-top: 8px; font-family: 'DM Sans', sans-serif;
}
.btn-download:hover { background: #2d3e5e; }
.btn-download.secondary {
  background: transparent; border: 1px solid var(--border); color: var(--text-2);
}
.btn-download.secondary:hover { border-color: var(--navy); color: var(--navy); }
.anlage-footer {
  text-align: center; padding: 40px 0 24px;
  font-size: 12px; color: var(--text-3);
}

/* ── versions.html ──────────────────────────────────────────────── */
.timeline { position: relative; padding-left: 32px; }
.timeline::before {
  content: ''; position: absolute; left: 10px; top: 8px; bottom: 8px;
  width: 2px; background: var(--border); border-radius: 2px;
}
.version-item { position: relative; margin-bottom: 20px; }
.version-item::before {
  content: ''; position: absolute; left: -26px; top: 16px;
  width: 10px; height: 10px; border-radius: 50%; border: 2px solid;
}
.version-item.current::before {
  background: var(--success); border-color: var(--success);
  box-shadow: 0 0 8px rgba(16,185,129,.4);
}
.version-item.old::before { background: var(--surface); border-color: var(--border); }

.version-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden; transition: border-color 0.2s;
}
.version-item.current .version-card { border-color: rgba(16,185,129,.3); }
.version-item.old .version-card:hover { border-color: #c4cbd6; }

.version-head {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 18px; border-bottom: 1px solid var(--border);
}
.ver-num { font-size: 16px; font-weight: 700; }
.version-item.current .ver-num { color: var(--success); }
.version-item.old .ver-num     { color: var(--text-3); }
.ver-tag {
  font-size: 10px; padding: 2px 8px; border-radius: 4px;
  font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase;
}
.tag-current { background: rgba(16,185,129,.1); border: 1px solid rgba(16,185,129,.25); color: var(--success); }
.tag-old     { background: var(--bg); border: 1px solid var(--border); color: var(--text-3); }
.ver-date {
  margin-left: auto; font-size: 11px; color: var(--text-3);
  font-family: 'DM Mono', monospace;
}
.version-body { padding: 14px 18px; display: flex; align-items: center; gap: 12px; }
.hash-chip {
  flex: 1; min-width: 0; font-family: 'DM Mono', monospace; font-size: 11px;
  color: var(--text-3); background: var(--bg); border: 1px solid var(--border);
  border-radius: 4px; padding: 7px 10px; cursor: pointer; transition: color 0.15s;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.hash-chip:hover { color: var(--navy); }
.hash-chip.expanded { white-space: normal; word-break: break-all; }
.no-hash { flex: 1; font-size: 11px; color: var(--text-3); font-style: italic; }
.dl-btn {
  flex-shrink: 0; padding: 7px 14px;
  background: rgba(28,43,74,.06); border: 1px solid var(--border);
  border-radius: 4px; color: var(--navy); font-size: 12px; font-weight: 500;
  text-decoration: none; white-space: nowrap; transition: all 0.15s;
  font-family: 'DM Sans', sans-serif; cursor: pointer;
}
.dl-btn:hover { background: rgba(28,43,74,.12); border-color: var(--navy); }
.version-item.current .dl-btn {
  background: rgba(16,185,129,.08); border-color: rgba(16,185,129,.3); color: var(--success);
}
.version-item.current .dl-btn:hover { background: rgba(16,185,129,.15); }

.page-sub   { font-size: 13px; color: var(--text-3); margin-bottom: 28px; line-height: 1.5; }
.empty-msg  { text-align: center; padding: 60px 0; font-size: 13px; color: var(--text-3); }

/* ── Divider ────────────────────────────────────────────────────── */
.divider { height: 1px; background: var(--border); margin: 20px 0; }

/* ── preview.html ───────────────────────────────────────────────── */
/* Override body for preview – entire area is the doc viewer */
body.preview-body {
  background: #e2e5ea;
  overflow: hidden; /* page itself handles scroll */
}

/* Sub-header below workflow bar: save state + context badges */
.preview-subheader {
  background: var(--surface); border-bottom: 1px solid var(--border);
  padding: 0 20px; display: flex; align-items: center; gap: 10px;
  height: 40px; flex-wrap: wrap;
}
.hbadge { font-size: 10px; padding: 3px 10px; border-radius: 4px; letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap; }
.hbadge-blue   { background: rgba(5,150,105,.1);   border: 1px solid rgba(5,150,105,.2);   color: #047857; }
.hbadge-purple { background: rgba(124,58,237,.1); border: 1px solid rgba(124,58,237,.25); color: #a78bfa; }
.hbadge-gray   { background: rgba(100,116,139,.07); border: 1px solid var(--border); color: var(--text-2); }
.header-sep    { color: var(--border); font-size: 16px; }
.header-order  { font-size: 12px; color: var(--text-2); white-space: nowrap; max-width: 220px; overflow: hidden; text-overflow: ellipsis; }

.save-indicator {
  margin-left: auto; display: flex; align-items: center; gap: 7px; flex-shrink: 0;
  font-size: 11px; letter-spacing: 0.06em; padding: 4px 10px; border-radius: 4px;
  transition: all 0.25s; white-space: nowrap;
}
.save-indicator.saved   { color: var(--success); background: rgba(16,185,129,.06); border: 1px solid rgba(16,185,129,.2); }
.save-indicator.unsaved { color: var(--warning); background: rgba(245,158,11,.06); border: 1px solid rgba(245,158,11,.2); }
.save-indicator.saving  { color: var(--navy);    background: rgba(28,43,74,.05);  border: 1px solid rgba(28,43,74,.15); }
.save-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.save-dot.saved   { background: var(--success); }
.save-dot.unsaved { background: var(--warning); }
.save-dot.saving  { background: var(--navy); animation: dotpulse 1s ease-in-out infinite; }
@keyframes dotpulse { 0%,100%{opacity:1;}50%{opacity:.35;} }

/* Preview page layout: doc-area + sidebar */
.page {
  display: flex;
  height: calc(100vh - 50px); /* navbar(96) + workflow(44) + subheader(40) - 130px extra */
}

/* Document area */
.doc-area {
  flex: 1; min-width: 0; background: #e2e5ea;
  overflow-y: auto; padding: 40px 36px;
}

/* A4 paper */
.doc-paper {
  max-width: 800px; margin: 0 auto; background: #fff;
  border-radius: 3px;
  box-shadow: 0 4px 32px rgba(0,0,0,.18), 0 0 0 1px rgba(0,0,0,.07);
}

.doc-cover {
  padding: 48px 60px 40px; border-bottom: 3px solid var(--navy);
  background: linear-gradient(140deg, #f9fafb 0%, #eef2f8 100%);
}
.doc-cover-pre {
  font-family: 'DM Mono', monospace; font-size: 10px;
  letter-spacing: 0.16em; color: #6b7280; text-transform: uppercase; margin-bottom: 14px;
}
.doc-cover-title {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 28px; font-weight: bold; color: #0f172a;
  letter-spacing: -0.02em; line-height: 1.2;
}
.doc-cover-chips { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 22px; }
.doc-chip { font-family: 'DM Mono', monospace; font-size: 11px; padding: 4px 14px; border-radius: 20px; letter-spacing: 0.05em; }
.chip-norm  { background: #ede9fe; color: #6d28d9; border: 1px solid #c4b5fd; }
.chip-drive { background: #dbeafe; color: #1d4ed8; border: 1px solid #93c5fd; }
.chip-order { background: #f3f4f6; color: #374151; border: 1px solid #d1d5db; }

.doc-chapter { border-bottom: 1px solid #e5e7eb; }
.doc-chapter:last-child { border-bottom: none; }
.chapter-heading {
  padding: 24px 60px 16px; display: flex; align-items: center; gap: 10px;
  border-bottom: 1px solid #f3f4f6; background: #fafafa;
}
.chap-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; min-width: 22px; border-radius: 50%;
  background: var(--navy); color: #fff;
  font-family: 'DM Mono', monospace; font-size: 10px; font-weight: 500;
}
.chap-title {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 12.5px; font-weight: bold; color: #374151;
  text-transform: uppercase; letter-spacing: 0.08em;
}
.chap-src-dot { margin-left: auto; width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.src-template     { background: var(--navy); }
.src-custom       { background: var(--warning); }
.src-commissioning{ background: #a78bfa; }
.src-missing      { background: var(--danger); }

.block-content {
  padding: 24px 60px 32px; cursor: text; position: relative;
  transition: background 0.15s; min-height: 60px;
}
.block-content:hover { background: #f8faff; }
.edit-hint {
  display: none; position: absolute; top: 12px; right: 60px;
  font-family: 'DM Mono', monospace; font-size: 9px;
  color: rgba(6,182,212,.5); letter-spacing: 0.12em; text-transform: uppercase;
}
.block-content:hover .edit-hint { display: block; }
.block-content.editing { background: #f7f9ff; cursor: default; }
.block-content.editing .edit-hint { display: none !important; }

.block-text {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 13.5px; line-height: 1.88; color: #1f2937;
  white-space: pre-wrap; word-break: break-word;
}
.block-textarea {
  display: none; width: 100%; min-height: 80px; overflow: hidden;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 13.5px; line-height: 1.88; color: #1f2937;
  background: #fff; border: 2px solid var(--navy);
  border-radius: 4px; padding: 10px 12px; resize: none; transition: border-color 0.15s;
  max-height: none; /* override blocks.html textarea styles */
  margin-top: 0;
}
.block-textarea:focus { outline: none; border-color: #253960; }
.block-content .block-text     { display: block; }
.block-content .block-textarea { display: none; min-height: 80px; max-height: none; margin-top: 0; background: #fff; border: 2px solid var(--navy); border-radius: 4px; padding: 10px 12px; resize: none; width: 100%; overflow: hidden; font-family: Georgia, 'Times New Roman', serif; font-size: 13.5px; line-height: 1.88; color: #1f2937; transition: border-color 0.15s; }
.block-content.editing .block-text     { display: none; }
.block-content.editing .block-textarea { display: block; }
.block-empty {
  padding: 24px 60px 32px; font-family: 'DM Mono', monospace;
  font-size: 11px; color: rgba(0,0,0,.2); font-style: italic;
}

/* Sidebar (preview) */
.sidebar-preview {
  width: 272px; flex-shrink: 0; background: #fff;
  border-left: 1px solid #E2E4E9; overflow-y: auto;
  display: flex; flex-direction: column; padding: 20px 16px; gap: 14px;
}
.sb-panel { background: #F6F7F9; border: 1px solid #E2E4E9; border-radius: 7px; overflow: hidden; }
.sb-panel-head {
  padding: 11px 15px; border-bottom: 1px solid #E2E4E9;
  font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: #64748B;
}
.sb-panel-body { padding: 14px 15px; display: flex; flex-direction: column; gap: 10px; }

.btn-pdf {
  width: 100%; padding: 12px; background: var(--navy);
  border: none; border-radius: 4px; color: #fff;
  font-family: 'DM Mono', monospace; font-size: 11.5px; font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer;
  transition: all 0.2s; display: flex; align-items: center; justify-content: center; gap: 7px;
}
.btn-pdf:hover:not(:disabled) { background: #2d3e5e; }
.btn-pdf:disabled { background: #F6F7F9; color: #94A3B8; cursor: default; }
.btn-pdf.generating {
  background: rgba(28,43,74,.08); border: 1px solid rgba(28,43,74,.2);
  color: var(--navy); animation: genpulse 1.5s ease-in-out infinite;
}
@keyframes genpulse { 0%,100%{opacity:1;}50%{opacity:.7;} }
.btn-pdf.success {
  background: rgba(16,185,129,.1); border: 1px solid rgba(16,185,129,.3); color: #059669;
}
.btn-pdf-outline {
  background: transparent;
  color: var(--navy, #1C2B4A);
  border: 2px solid var(--navy, #1C2B4A);
}
.btn-pdf-outline:hover:not(:disabled) { background: rgba(28,43,74,.06); }
.btn-pdf-outline.generating {
  background: transparent; color: #64748B; border-color: #CBD5E1;
}
.btn-pdf-outline.success {
  background: transparent; color: #059669; border-color: #059669;
}

.pdf-result { display: none; padding: 12px; background: rgba(16,185,129,.05); border: 1px solid rgba(16,185,129,.18); border-radius: 5px; }
.pdf-result.show { display: block; }
.pdf-result-title { font-size: 10px; color: #059669; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 10px; }
.pdf-dl-link { display: block; color: var(--navy); text-decoration: none; font-size: 11px; margin-bottom: 10px; transition: color 0.15s; word-break: break-word; }
.pdf-dl-link:hover { color: #253960; }
.pdf-hash-label { font-size: 9px; color: #94A3B8; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 4px; }
.pdf-hash { font-size: 9px; color: #64748B; font-family: 'DM Mono', monospace; word-break: break-all; line-height: 1.55; cursor: pointer; transition: color 0.15s; background: #F6F7F9; border: 1px solid #E2E4E9; border-radius: 3px; padding: 6px 8px; }
.pdf-hash:hover { color: #1C2B4A; }

.sb-info-row { display: flex; justify-content: space-between; align-items: center; font-size: 11px; padding: 3px 0; }
.sb-info-label { color: #94A3B8; font-size: 10px; }
.sb-info-val   { color: #1C2B4A; }

.sb-link {
  display: flex; align-items: center; gap: 7px; padding: 10px 12px; border-radius: 4px;
  color: #64748B; text-decoration: none; font-size: 11px;
  letter-spacing: 0.06em; transition: all 0.15s;
  border: 1px solid #E2E4E9;
}
.sb-link:hover { color: var(--navy); border-color: rgba(28,43,74,.2); background: rgba(28,43,74,.03); }

/* QC Panel */
.qc-panel {
  max-width: 800px; margin: 16px auto 48px; border-radius: 10px;
  background: #F6F7F9; overflow: hidden;
  border: 1px solid #E2E4E9; box-shadow: none;
  transition: border-color 0.3s, box-shadow 0.3s;
}
.qc-panel.open {
  border-color: #CBD5E1;
  box-shadow: 0 4px 16px rgba(0,0,0,.06);
}
.qc-bar {
  height: 56px; display: flex; align-items: center; gap: 12px;
  padding: 0 20px; cursor: pointer; user-select: none; transition: background-color 0.2s;
}
.qc-bar:hover { background-color: rgba(0,0,0,.03); }
@keyframes bar-blink {
  0%,100%{background-color:transparent;}
  50%{background-color:#2563EB;}
}
.qc-bar.blinking { animation: bar-blink 0.22s ease-in-out 3; }
.qc-bar-label  { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: #64748B; }
.qc-bar-score  { font-family: 'DM Sans', sans-serif; font-weight: 800; font-size: 12px; padding: 2px 9px; border-radius: 10px; }
.score-green   { background: rgba(16,185,129,.12); color: #059669; }
.score-yellow  { background: rgba(245,158,11,.12);  color: #D97706; }
.score-red     { background: rgba(239,68,68,.12); color: #DC2626; }
.qc-bar-arrow  { margin-left: auto; font-size: 9px; color: #94A3B8; transition: transform 0.25s; }
.qc-panel.open .qc-bar-arrow { transform: rotate(180deg); }
.qc-panel-body { max-height: 0; overflow: hidden; transition: max-height 0.25s ease; }
.qc-panel.open .qc-panel-body { max-height: 500px; overflow-y: auto; transition: max-height 0.6s cubic-bezier(0.34,1.56,0.64,1); }
.qc-panel-inner { padding: 16px 20px 22px; transform: translateY(28px); opacity: 0; transition: transform 0s, opacity 0s; }
.qc-panel.open .qc-panel-inner { transform: translateY(0); opacity: 1; transition: transform 0.52s cubic-bezier(0.34,1.56,0.64,1) 0.06s, opacity 0.2s ease 0.04s; }
.qc-top-row { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 16px; }
.qc-score-sm {
  width: 52px; height: 52px; flex-shrink: 0; border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  border: 2px solid; font-family: 'DM Sans', sans-serif; font-weight: 800;
}
.ring-green  { border-color: #10B981; background: rgba(16,185,129,.08); color: #059669; }
.ring-yellow { border-color: #F59E0B; background: rgba(245,158,11,.08);  color: #D97706; }
.ring-red    { border-color: #EF4444; background: rgba(239,68,68,.08); color: #DC2626; }
.qc-score-sm-num { font-size: 17px; line-height: 1; }
.qc-score-sm-sub { font-size: 7px; letter-spacing: 0.1em; text-transform: uppercase; opacity: .65; margin-top: 1px; }
.btn-recheck {
  flex-shrink: 0; padding: 6px 13px;
  background: rgba(124,58,237,.08); border: 1px solid rgba(124,58,237,.25);
  border-radius: 3px; color: #7c3aed;
  font-family: 'DM Mono', monospace; font-size: 10px; letter-spacing: 0.1em;
  cursor: pointer; transition: all 0.2s; white-space: nowrap;
}
.btn-recheck:hover { background: rgba(124,58,237,.15); }
.btn-recheck:disabled { opacity: .4; cursor: default; }
.btn-gen-direct {
  flex-shrink: 0; padding: 6px 13px;
  background: rgba(28,43,74,.06); border: 1px solid rgba(28,43,74,.15);
  border-radius: 3px; color: var(--navy);
  font-family: 'DM Mono', monospace; font-size: 10px; letter-spacing: 0.1em;
  cursor: pointer; transition: all 0.2s; white-space: nowrap;
}
.btn-gen-direct:hover { background: rgba(28,43,74,.12); }
.btn-gen-direct:disabled { opacity: .4; cursor: default; }
.qc-columns { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; margin-bottom: 14px; }
.qc-col-head {
  font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase;
  margin-bottom: 6px; padding-bottom: 4px; border-bottom: 1px solid #E2E4E9;
}
.qc-col:nth-child(1) .qc-col-head { color: #DC2626; }
.qc-col:nth-child(2) .qc-col-head { color: #D97706; }
.qc-col:nth-child(3) .qc-col-head { color: #2563EB; }
.qc-pill {
  display: block; padding: 4px 8px; border-radius: 3px; font-size: 9.5px; line-height: 1.45;
  margin-bottom: 3px; cursor: pointer; text-decoration: none; transition: opacity 0.15s;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.qc-pill:hover { opacity: .75; }
.qc-pill-k { background: rgba(220,38,38,.08); border-left: 2px solid #dc2626; color: #dc2626; }
.qc-pill-w { background: rgba(217,119,6,.08);  border-left: 2px solid #d97706; color: #d97706; }
.qc-pill-h { background: rgba(37,99,235,.08);  border-left: 2px solid #2563eb; color: #2563eb; }
.qc-col-empty { font-size: 9px; color: #94A3B8; font-style: italic; }
.qc-summary-full {
  font-size: 10px; line-height: 1.68; color: #64748B;
  border-top: 1px solid #E2E4E9; padding-top: 12px; margin-top: 4px;
}
.qc-empty-state { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 20px 16px; }
.btn-start-qc {
  padding: 10px 20px; background: var(--navy);
  border: none; border-radius: 4px; color: #fff;
  font-family: 'DM Mono', monospace; font-size: 11px; letter-spacing: 0.1em;
  text-transform: uppercase; cursor: pointer; transition: all 0.2s;
}
.btn-start-qc:hover { background: #253960; }
.btn-skip-qc {
  padding: 10px 20px; background: #fff;
  border: 1px solid #E2E4E9; border-radius: 4px; color: #64748B;
  font-family: 'DM Mono', monospace; font-size: 11px; letter-spacing: 0.1em;
  text-transform: uppercase; cursor: pointer; transition: all 0.2s;
}
.btn-skip-qc:hover { border-color: #CBD5E1; color: #1C2B4A; }

/* Load/error for preview */
.load-state { padding: 80px 32px; text-align: center; }
.load-state .spinner { border-top-color: var(--navy); }

/* ── preview responsive ─────────────────────────────────────────── */
@media (max-width: 880px) {
  .page { flex-direction: column-reverse; height: auto; }
  .sidebar-preview { width: 100%; border-left: none; border-top: 1px solid #E2E4E9; }
  .doc-area { padding: 20px 12px; }
  .doc-cover { padding: 28px 24px 22px; }
  .chapter-heading, .block-content, .block-empty { padding-left: 24px; padding-right: 24px; }
  .edit-hint { right: 24px; }
}

/* ── login.html ─────────────────────────────────────────────────── */
body.login-body {
  background: var(--navy);
  background-image:
    radial-gradient(ellipse at 15% 60%, rgba(6,182,212,.10) 0%, transparent 55%),
    radial-gradient(ellipse at 85% 15%, rgba(6,182,212,.07) 0%, transparent 45%),
    radial-gradient(ellipse at 50% 100%, rgba(255,255,255,.03) 0%, transparent 60%);
  display: flex; flex-direction: column; min-height: 100vh;
}
.login-center {
  flex: 1; display: flex;
  align-items: center; justify-content: center;
  padding: 24px;
}
.login-card {
  background: var(--surface); border-radius: var(--radius-lg);
  padding: 40px 36px; width: 100%; max-width: 380px;
  box-shadow: 0 24px 64px rgba(0,0,0,.30), 0 4px 16px rgba(0,0,0,.15);
  border: 1px solid rgba(255,255,255,.08);
}
.login-logo {
  font-size: 22px; font-weight: 700; color: var(--navy);
  letter-spacing: -0.03em; margin-bottom: 6px;
}
.login-logo span { color: var(--cyan); }
.login-sub { font-size: 13px; color: var(--text-3); margin-bottom: 28px; }
.error-box {
  display: none; padding: 11px 14px; margin-bottom: 14px;
  background: rgba(239,68,68,.07); border: 1px solid rgba(239,68,68,.25);
  border-radius: 6px; font-size: 13px; color: var(--danger);
  animation: shake .3s ease;
}
@keyframes shake {
  0%,100%{transform:translateX(0)}
  25%{transform:translateX(-4px)}
  75%{transform:translateX(4px)}
}

/* ── App Footer (3-Spalten, ab v0.25.0) ─────────────────────────── */
.app-footer {
  background: var(--bg);
  border-top: 1px solid var(--border);
  margin-top: auto;
  padding: 48px 0 0;
}
.app-footer-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px;
}
.app-footer-top {
  margin-bottom: 36px;
}
.app-footer-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px 48px;
  margin-bottom: 40px;
}
.app-footer-col-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #888780;
  margin-bottom: 12px;
}
.app-footer-col a {
  display: block;
  font-size: 14px;
  color: var(--navy);
  text-decoration: none;
  padding: 5px 0;
  transition: color var(--t);
}
.app-footer-col a:hover { color: var(--navy); }
.app-footer-divider {
  height: 1px;
  background: var(--border);
  margin-bottom: 20px;
}
.app-footer-copy {
  font-size: 12px;
  color: #888780;
  padding-bottom: 28px;
  line-height: 1.5;
}
@media (max-width: 768px) {
  .app-footer { padding: 36px 0 0; }
  .app-footer-grid { grid-template-columns: 1fr 1fr; gap: 24px 24px; }
  .app-footer-top { margin-bottom: 28px; }
}
@media (max-width: 480px) {
  .app-footer-grid { grid-template-columns: 1fr; gap: 20px; }
}

/* ── Global site footer ─────────────────────────────────────────── */
.site-footer {
  background: var(--bg);
  border-top: 1px solid var(--border);
  margin-top: auto;
  padding: 18px 0;
}
.site-footer-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
  align-items: center;
}
.site-footer-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: var(--text-muted);
  white-space: nowrap;
  font-family: var(--font-mono, 'DM Mono', monospace);
}
.site-footer-item strong {
  font-weight: 500;
  color: var(--text-secondary);
  font-family: var(--font-sans, 'DM Sans', sans-serif);
  letter-spacing: .01em;
}
.site-footer-version {
  color: var(--text-3);
  font-family: var(--font-mono, 'DM Mono', monospace);
}
.site-footer-item a {
  color: var(--text-2);
  text-decoration: none;
  transition: color .2s;
}
.site-footer-item a:hover { color: var(--navy); }
.site-footer-sep {
  color: var(--border);
  font-size: 13px;
  user-select: none;
}
@media (max-width: 600px) {
  .site-footer-sep { display: none; }
  .site-footer-inner { gap: 8px 0; flex-direction: column; align-items: flex-start; padding: 0 20px; }
}

/* ── Diff-Panel (Änderungs-Historie, links in preview) ──────────────────────── */

.diff-panel {
  width: 280px; flex-shrink: 0; background: var(--surface);
  border-right: 1px solid var(--border); overflow-y: auto;
  display: flex; flex-direction: column;
}
.diff-panel-head {
  padding: 14px 16px 10px; border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between; flex-shrink: 0;
}
.diff-panel-title {
  font-size: 10px; font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--text-2);
  display: flex; align-items: center; gap: 7px;
}
.diff-panel-count {
  background: var(--navy); color: #fff; border-radius: 4px;
  font-size: 9px; font-weight: 700; padding: 1px 7px; letter-spacing: 0.04em;
}
.diff-filter-bar {
  display: flex; gap: 4px; padding: 10px 12px 8px; border-bottom: 1px solid #F1F3F7; flex-shrink: 0;
}
.diff-filter-btn {
  font-size: 9.5px; padding: 3px 9px; border-radius: 4px; border: 1px solid var(--border);
  background: transparent; color: var(--text-2); cursor: pointer; letter-spacing: 0.04em;
  transition: all 0.15s; white-space: nowrap;
}
.diff-filter-btn:hover { border-color: #94A3B8; color: var(--navy); }
.diff-filter-btn.active {
  background: rgba(28,43,74,.07); border-color: rgba(28,43,74,.22); color: var(--navy); font-weight: 600;
}
.diff-list { flex: 1; overflow-y: auto; padding: 8px 0; }
.diff-empty {
  padding: 32px 16px; text-align: center;
  font-size: 11px; color: var(--text-3); line-height: 1.6;
}
.change-entry {
  padding: 10px 14px 12px; border-bottom: 1px solid #F1F3F7;
  cursor: pointer; transition: background 0.12s;
}
.change-entry:hover { background: #F8FAFF; }
.change-entry:last-child { border-bottom: none; }
.change-field {
  font-size: 10.5px; font-weight: 600; color: var(--navy);
  margin-bottom: 4px; display: flex; align-items: center; gap: 6px;
}
.change-source-badge {
  font-size: 9px; font-weight: 400; padding: 1px 6px; border-radius: 3px;
  letter-spacing: 0.04em;
  background: #F1F3F7; color: var(--text-2); border: 1px solid var(--border);
}
.change-source-badge.src-template { background: rgba(28,43,74,.06); color: var(--navy); border-color: rgba(28,43,74,.15); }
.change-before {
  font-size: 10px; color: var(--text-3);
  text-decoration: line-through; text-decoration-color: #CBD5E1;
  line-height: 1.45; margin-bottom: 3px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.change-after {
  font-size: 10px; color: var(--navy); font-weight: 500;
  line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.change-time {
  font-size: 9px; color: #CBD5E1; margin-top: 5px; font-family: 'DM Mono', monospace;
}
.chapter-changed-dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--accent);
  flex-shrink: 0; position: relative;
}
.chapter-changed-dot::after {
  content: attr(data-tooltip);
  position: absolute; left: 14px; top: -4px;
  background: var(--navy); color: #fff; font-size: 9.5px; white-space: nowrap;
  padding: 3px 8px; border-radius: 4px; pointer-events: none;
  opacity: 0; transition: opacity 0.15s; z-index: 10;
}
.chapter-changed-dot:hover::after { opacity: 1; }
@keyframes chapterHighlight {
  0%   { background: rgba(28,43,74,.08); }
  100% { background: transparent; }
}
.block-highlight { animation: chapterHighlight 2s ease-out forwards; }
/* ── Freigabe-Dialog ────────────────────────────────────────────── */
.freigabe-overlay {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(15,23,42,.55); backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.freigabe-modal {
  background: #fff; border-radius: var(--radius-lg); max-width: 480px; width: 100%;
  padding: 32px; box-shadow: 0 20px 60px rgba(15,23,42,.25);
  animation: freigabeIn 0.22s cubic-bezier(0.34,1.56,0.64,1);
}
@keyframes freigabeIn {
  from { transform: scale(0.92) translateY(12px); opacity: 0; }
  to   { transform: scale(1) translateY(0); opacity: 1; }
}
.freigabe-icon {
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(245,158,11,.12); border: 1.5px solid rgba(245,158,11,.35);
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; margin-bottom: 16px;
}
.freigabe-title { font-size: 16px; font-weight: 700; color: var(--navy); margin: 0 0 12px; }
.freigabe-text {
  font-size: 13px; line-height: 1.65; color: #475569;
  background: #FFF7ED; border: 1px solid #FED7AA; border-radius: 8px;
  padding: 14px 16px; margin-bottom: 20px;
}
.freigabe-check {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 13px; color: var(--navy); font-weight: 500;
  cursor: pointer; margin-bottom: 24px; line-height: 1.5;
}
.freigabe-check input[type=checkbox] {
  flex-shrink: 0; width: 16px; height: 16px; margin-top: 2px; accent-color: var(--navy);
}
.freigabe-actions { display: flex; gap: 10px; justify-content: flex-end; }
.freigabe-btn-cancel {
  padding: 9px 18px; border-radius: 7px; border: 1px solid var(--border);
  background: #fff; color: var(--text-2); font-size: 13px; font-weight: 500;
  cursor: pointer; transition: background 0.15s;
}
.freigabe-btn-cancel:hover { background: var(--bg); }
.freigabe-btn-confirm {
  padding: 9px 20px; border-radius: 7px; border: none;
  background: var(--navy); color: #fff; font-size: 13px; font-weight: 600;
  cursor: pointer; transition: opacity 0.15s, background 0.15s;
}
.freigabe-btn-confirm:disabled { opacity: 0.35; cursor: not-allowed; }
.freigabe-btn-confirm:not(:disabled):hover { background: #162240; }
.btn-freigabe {
  width: 100%; padding: 11px 16px; border-radius: 8px; border: none;
  background: var(--navy); color: #fff; font-size: 13px; font-weight: 600;
  cursor: pointer; transition: background 0.15s; text-align: center;
  margin-top: 8px;
}
.btn-freigabe:hover { background: #162240; }
.btn-freigabe.approved {
  background: #10B981; cursor: default;
}

/* ── Findings-Panel ─────────────────────────────────────────────── */
.fi-list { display: flex; flex-direction: column; gap: 7px; }
.fi-item {
  border-radius: 5px; padding: 9px 11px;
  display: flex; flex-direction: column; gap: 5px;
  transition: opacity 0.2s;
}
.fi-item.fi-k { background: rgba(220,38,38,.06); border-left: 2px solid #dc2626; }
.fi-item.fi-w { background: rgba(217,119,6,.06);  border-left: 2px solid #d97706; }
.fi-item.fi-h { background: rgba(37,99,235,.06);  border-left: 2px solid #2563eb; }
.fi-item.fi-accepted { opacity: 0.42; }
.fi-item.fi-ignored  { opacity: 0.22; }
.fi-text { font-size: 10.5px; line-height: 1.55; color: #334155; }
.fi-item.fi-accepted .fi-text,
.fi-item.fi-ignored  .fi-text { text-decoration: line-through; color: #94A3B8; }
.fi-link { font-size: 9px; color: var(--navy); cursor: pointer; }
.fi-link:hover { text-decoration: underline; }
.fi-actions { display: flex; gap: 5px; align-items: center; margin-top: 1px; }
.fi-btn {
  font-size: 9px; padding: 2px 7px; border-radius: 3px; border: 1px solid;
  cursor: pointer; background: transparent; font-weight: 600;
  transition: background 0.12s, color 0.12s;
  line-height: 1.6;
}
.fi-btn-accept { color: #10B981; border-color: #10B981; }
.fi-btn-accept:hover { background: rgba(16,185,129,.1); }
.fi-btn-accept.active { background: #10B981; color: #fff; }
.fi-btn-ignore { color: #94A3B8; border-color: #CBD5E1; }
.fi-btn-ignore:hover { background: rgba(148,163,184,.1); }
.fi-btn-ignore.active { background: #CBD5E1; color: #64748B; }
.fi-open-count {
  font-size: 9.5px; color: #94A3B8; text-align: center;
  padding: 10px 0 2px; border-top: 1px solid var(--border); margin-top: 8px;
}
.fi-open-count.all-done { color: #10B981; font-weight: 600; }

@media (max-width: 900px) {
  .diff-panel { display: none; }
}

/* ── Language Switch (Navbar + Subheader) ── */
.lang-switch { display:inline-flex; align-items:center; gap:3px; font-size:12px; color:var(--text-3,#94A3B8); }
.lang-switch a { color:var(--text-3,#94A3B8); text-decoration:none; padding:2px 5px; border-radius:4px; font-weight:500; transition:color .15s, background .15s; }
.lang-switch a:hover { color:var(--text-primary,#1C2B4A); background:var(--surface,#F6F7F9); }
.lang-switch .lang-active { font-weight:700; color:var(--text-primary,#1C2B4A); }
.lang-sep { color:var(--text-3,#94A3B8); margin:0 1px; font-size:11px; }

/* ── Migration Banner (Stammdaten unvollständig) ── */
/* migration-banner kept for backwards compat, replaced by stamm-warn-overlay */
.migration-banner { display: none; }

/* ── Stammdaten-Warnhinweis Popup ───────────────────────────────── */
.stamm-warn-overlay {
  position: fixed; inset: 0; z-index: 1100;
  background: rgba(15,23,42,.55); backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center;
  padding: 24px; animation: stammIn .18s ease;
}
@keyframes stammIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.stamm-warn-modal {
  background: var(--surface); border-radius: var(--radius-lg);
  max-width: 420px; width: 100%; padding: 32px 28px;
  box-shadow: 0 20px 60px rgba(15,23,42,.22);
  animation: freigabeIn .22s cubic-bezier(0.34,1.56,0.64,1);
}
.stamm-warn-icon {
  width: 48px; height: 48px; border-radius: 50%;
  background: rgba(245,158,11,.12); border: 1.5px solid rgba(245,158,11,.35);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; margin-bottom: 16px;
}
.stamm-warn-title { font-size: 16px; font-weight: 700; color: var(--navy); margin: 0 0 10px; }
.stamm-warn-body {
  font-size: 13px; line-height: 1.65; color: var(--text-2);
  background: #FFFBEB; border: 1px solid #FDE68A;
  border-radius: 8px; padding: 13px 15px; margin-bottom: 24px;
}
.stamm-warn-body strong { color: #92400E; }
.stamm-warn-actions { display: flex; justify-content: flex-end; gap: 10px; }
.stamm-warn-later {
  padding: 8px 18px; border-radius: var(--radius); font-size: 13px; font-weight: 500;
  font-family: 'DM Sans', sans-serif; border: 1px solid var(--border);
  background: var(--surface); color: var(--text-2); cursor: pointer;
  transition: background var(--t);
}
.stamm-warn-later:hover { background: var(--bg); color: var(--navy); }
.stamm-warn-cta {
  padding: 8px 18px; border-radius: var(--radius); font-size: 13px; font-weight: 600;
  font-family: 'DM Sans', sans-serif; text-decoration: none;
  background: var(--navy); color: #fff; cursor: pointer;
  transition: background var(--t);
}
.stamm-warn-cta:hover { background: #2d4a7a; }