:root {
  /* Marken-Palette bleibt konstant */
  --rp-lime: #cdd500;
  --rp-lime-hover: #b8be00;
  --rp-pink: #e6007e;
  --rp-green: #1f9d55;
  --rp-red: #d64545;
  --rp-amber: #c9820a;
  --rp-radius-sm: 6px;
  --rp-radius-md: 12px;
  --rp-radius-lg: 20px;
  --rp-transition: 0.2s ease;
  --rp-max-width: 1040px;
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Theme-Variablen (Light-Default) */
  --bg: #f5f5f5;
  --bg-elev: #ffffff;
  --fg: #191919;
  --fg-muted: #444444;
  --fg-faint: #888888;
  --border: #e8e8e8;
  --border-strong: #d4d4d4;
  --input-bg: #ffffff;
  --shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.12);
  --btn-bg: #e8e8e8;
  --btn-bg-hover: #d4d4d4;
  --report-bg: #191919;
  --report-fg: #d7e56b;
  --hover-tint: #f5f5f5;
  --dropzone-bg: #f5f5f5;
  --dropzone-drag-bg: #fbfce8;

  /* Alt-Aliase (zur Kompatibilität mit vorhandenen Styles) */
  --rp-black: var(--fg);
  --rp-white: var(--bg-elev);
  --rp-gray-100: var(--bg);
  --rp-gray-200: var(--border);
  --rp-gray-300: var(--border-strong);
  --rp-gray-500: var(--fg-faint);
  --rp-gray-700: var(--fg-muted);
  --rp-shadow: var(--shadow);
  --rp-shadow-lg: var(--shadow-lg);
}

/* Dark-Mode */
:root[data-theme="dark"] {
  --bg: #0e1116;
  --bg-elev: #171b22;
  --fg: #e8ecf1;
  --fg-muted: #b5bec9;
  --fg-faint: #8791a0;
  --border: #262b34;
  --border-strong: #3a414d;
  --input-bg: #1c2028;
  --shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.6);
  --btn-bg: #262b34;
  --btn-bg-hover: #313846;
  --report-bg: #0b0d11;
  --report-fg: #c9d979;
  --hover-tint: #1c2028;
  --dropzone-bg: #171b22;
  --dropzone-drag-bg: #23281c;
}

* { box-sizing: border-box; }
body {
  margin: 0; background: var(--bg); color: var(--fg);
  line-height: 1.5; font-size: 15px;
  transition: background var(--rp-transition), color var(--rp-transition);
}
a { color: var(--rp-pink); }
.wrap { max-width: var(--rp-max-width); margin: 0 auto; padding: 32px 20px 80px; }
input, select, textarea { background: var(--input-bg); color: var(--fg); border-color: var(--border-strong); }
input::placeholder, textarea::placeholder { color: var(--fg-faint); }
.card, .key-panel, .auth-card, .faq details { background: var(--bg-elev); border-color: var(--border); }
.card h2 { color: var(--fg); }
.stepper .st { background: var(--bg-elev); border-color: var(--border); color: var(--fg-faint); }
.stepper .st.active { border-color: var(--fg); color: var(--fg); }
.seg { border-color: var(--border-strong); }
.seg button { background: var(--bg-elev); color: var(--fg); }
.seg button.active { background: var(--fg); color: var(--bg-elev); }
.btn { background: var(--btn-bg); color: var(--fg); }
.btn:hover { background: var(--btn-bg-hover); }
.btn--primary { background: var(--rp-lime); color: #191919; }
.btn--primary:hover { background: var(--rp-lime-hover); }
.btn--dark { background: var(--fg); color: var(--bg-elev); }
.dropzone { background: var(--dropzone-bg); border-color: var(--border-strong); color: var(--fg-faint); }
.dropzone:hover, .dropzone.drag { background: var(--dropzone-drag-bg); color: var(--fg); }
.dropzone strong { color: var(--fg); }
fieldset { border-color: var(--border); }
.faq summary:hover { background: var(--hover-tint); }
.report { background: var(--report-bg); color: var(--report-fg); }
.foot { color: var(--fg-faint); }
.muted { color: var(--fg-faint); }
label.fld { color: var(--fg-muted); }
.tpl { background: var(--bg-elev); border-color: var(--border); }
.tpl img { background: var(--bg); }
.account .email { color: var(--fg-muted); }
.account .link-btn, .key-btn, .account .role-badge { background: var(--bg-elev); color: var(--fg); border-color: var(--border-strong); }
.account .link-btn:hover, .key-btn:hover { background: var(--hover-tint); border-color: var(--fg); }
.account .role-badge { background: var(--rp-lime); color: #191919; border-color: var(--rp-lime); font-weight: 700; }

header.top { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 14px; flex-wrap: wrap; }
.brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
.brand h1 { font-size: 24px; margin: 0; letter-spacing: -0.01em; white-space: nowrap; }
.top-actions { display: flex; align-items: center; gap: 8px; }
.help-link { display: inline-flex; align-items: center; gap: 7px; text-decoration: none; color: var(--fg);
  font-weight: 600; font-size: 14px; border: 1px solid var(--border-strong); border-radius: var(--rp-radius-sm);
  padding: 8px 14px; transition: var(--rp-transition); background: var(--bg-elev); }
.help-link:hover { border-color: var(--fg); background: var(--hover-tint); }
.help-q { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%;
  background: var(--rp-lime); color: #191919; font-weight: 800; font-size: 13px; }
.theme-toggle { width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid var(--border-strong);
  border-radius: var(--rp-radius-sm); background: var(--bg-elev); cursor: pointer; padding: 0; transition: var(--rp-transition);
  color: var(--fg); font-size: 18px; }
.theme-toggle:hover { border-color: var(--fg); background: var(--hover-tint); }
.account-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 12px; padding: 8px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.logo { width: 40px; height: 40px; border-radius: var(--rp-radius-sm); background: var(--rp-lime);
  display: grid; place-items: center; font-weight: 800; color: #191919; flex: 0 0 40px; }
h1 { font-size: 26px; margin: 0; letter-spacing: -0.01em; }
.sub { color: var(--fg-muted); margin: 2px 0 24px; }
@media (max-width: 720px) {
  .brand h1 { font-size: 20px; white-space: normal; }
  .top-actions { flex-wrap: wrap; }
}

.stepper { display: flex; gap: 8px; margin-bottom: 24px; }
.stepper .st { flex: 1; padding: 10px 12px; border-radius: var(--rp-radius-sm);
  background: var(--rp-white); border: 1px solid var(--rp-gray-200); font-size: 13px; color: var(--rp-gray-500); }
.stepper .st.active { border-color: var(--rp-black); color: var(--rp-black); font-weight: 600; }
.stepper .st.done { border-color: var(--rp-lime); color: var(--rp-black); }

.card { background: var(--rp-white); border: 1px solid var(--rp-gray-200);
  border-radius: var(--rp-radius-md); box-shadow: var(--rp-shadow); padding: 24px; margin-bottom: 20px; }
.card h2 { margin: 0 0 4px; font-size: 19px; }
.card .hint { color: var(--rp-gray-500); font-size: 13px; margin: 0 0 18px; }

.btn { display: inline-flex; align-items: center; gap: 8px; border: none; cursor: pointer;
  padding: 11px 20px; border-radius: var(--rp-radius-sm); font-weight: 600; font-size: 14px;
  transition: var(--rp-transition); background: var(--rp-gray-200); color: var(--rp-black); }
.btn:hover { background: var(--rp-gray-300); }
.btn--primary { background: var(--rp-lime); }
.btn--primary:hover { background: var(--rp-lime-hover); }
.btn--dark { background: var(--rp-black); color: var(--rp-white); }
.btn--dark:hover { opacity: 0.9; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-row { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 20px; }

.seg { display: inline-flex; border: 1px solid var(--rp-gray-300); border-radius: var(--rp-radius-sm); overflow: hidden; }
.seg button { border: none; background: var(--rp-white); padding: 10px 18px; cursor: pointer; font-weight: 600; font-size: 14px; }
.seg button.active { background: var(--rp-black); color: var(--rp-white); }

.dropzone { border: 2px dashed var(--rp-gray-300); border-radius: var(--rp-radius-md); padding: 40px 20px;
  text-align: center; color: var(--rp-gray-500); cursor: pointer; transition: var(--rp-transition); background: var(--rp-gray-100); }
.dropzone:hover, .dropzone.drag { border-color: var(--rp-lime); background: #fbfce8; color: var(--rp-black); }
.dropzone strong { color: var(--rp-black); }

label.fld { display: block; margin-bottom: 12px; font-size: 13px; font-weight: 600; color: var(--rp-gray-700); }
label.fld span.req { color: var(--rp-pink); }
input, select, textarea { width: 100%; padding: 9px 11px; border: 1px solid var(--rp-gray-300);
  border-radius: var(--rp-radius-sm); font: inherit; margin-top: 4px; background: var(--rp-white); }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--rp-lime); border-color: transparent; }
input.err { border-color: var(--rp-red); }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.grid3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0 16px; }
fieldset { border: 1px solid var(--rp-gray-200); border-radius: var(--rp-radius-sm); padding: 16px; margin: 0 0 18px; }
legend { font-weight: 700; padding: 0 8px; font-size: 14px; }

table.lines { width: 100%; border-collapse: collapse; margin-top: 8px; table-layout: fixed; }
table.lines th { text-align: left; font-size: 11px; text-transform: uppercase; color: var(--fg-faint); padding: 6px 6px; }
table.lines th.num { text-align: right; }
table.lines td { padding: 4px 6px; vertical-align: top; }
table.lines input, table.lines select, table.lines textarea { margin-top: 0; padding: 7px 8px; width: 100%; }
table.lines textarea { resize: vertical; min-height: 42px; line-height: 1.35; font: inherit; }
table.lines .col-name { width: auto; }
table.lines .col-qty { width: 72px; }
table.lines .col-unit { width: 92px; }
table.lines .col-price { width: 96px; }
table.lines .col-tax { width: 68px; }
table.lines .col-cat { width: 130px; }
table.lines .col-net { width: 110px; }
table.lines .col-del { width: 36px; }
.line-del { background: none; border: none; color: var(--rp-red); cursor: pointer; font-size: 18px; padding: 4px 8px; }
.num { text-align: right; }
@media (max-width: 900px) {
  table.lines { table-layout: auto; }
  table.lines .col-cat { width: 100px; }
}

.totals-box { margin-top: 14px; margin-left: auto; width: 320px; font-size: 14px; }
.totals-box .row { display: flex; justify-content: space-between; padding: 4px 0; }
.totals-box .grand { border-top: 2px solid var(--rp-black); font-weight: 700; font-size: 16px; padding-top: 8px; margin-top: 4px; }

.alert { border-radius: var(--rp-radius-sm); padding: 12px 14px; margin-bottom: 16px; font-size: 14px; }
.alert--warn { background: #fdf6e3; border: 1px solid #f0d998; color: var(--rp-amber); }
.alert--err { background: #fdeaea; border: 1px solid #f2c1c1; color: var(--rp-red); }
.alert--ok { background: #eafaf0; border: 1px solid #b6e6c9; color: var(--rp-green); }
.alert ul { margin: 6px 0 0; padding-left: 18px; }

.badge { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; font-weight: 700; font-size: 14px; }
.badge--ok { background: #eafaf0; color: var(--rp-green); }
.badge--err { background: #fdeaea; color: var(--rp-red); }
.badge--unknown { background: var(--rp-gray-100); color: var(--rp-gray-700); }

.spinner { width: 18px; height: 18px; border: 3px solid rgba(0,0,0,0.15); border-top-color: var(--rp-black); border-radius: 50%; animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.center { display: grid; place-items: center; gap: 14px; padding: 40px; text-align: center; color: var(--rp-gray-700); }

.report { background: var(--rp-black); color: #d7e56b; font-family: ui-monospace, monospace; font-size: 12px;
  padding: 14px; border-radius: var(--rp-radius-sm); max-height: 320px; overflow: auto; white-space: pre-wrap; }
/* Login-Gate */
.auth-gate { position: fixed; inset: 0; background: rgba(25,25,25,0.55); backdrop-filter: blur(3px);
  display: grid; place-items: center; z-index: 100; padding: 20px; }
.auth-card { background: var(--rp-white); border-radius: var(--rp-radius-md); box-shadow: var(--rp-shadow-lg);
  padding: 32px; width: 100%; max-width: 400px; }
.auth-card h2 { margin: 0 0 4px; text-align: center; font-size: 22px; }
.auth-card .hint { text-align: center; color: var(--rp-gray-500); font-size: 13px; margin: 0 0 18px; }

/* Konto im Header */
.account { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.account .email { color: var(--rp-gray-700); font-weight: 600; }
.account .link-btn, .key-btn { background: none; border: 1px solid var(--rp-gray-300); border-radius: var(--rp-radius-sm);
  padding: 7px 12px; cursor: pointer; font: inherit; font-size: 13px; font-weight: 600; color: var(--rp-black); }
.account .link-btn:hover, .key-btn:hover { background: var(--rp-gray-100); border-color: var(--rp-black); }

/* Key-Panel */
.key-panel { background: var(--rp-white); border: 1px solid var(--rp-gray-200); border-radius: var(--rp-radius-md);
  box-shadow: var(--rp-shadow); padding: 18px 20px; margin-bottom: 20px; }

/* Firmenprofil / Templates */
.tpl-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 6px; }
.tpl { border: 2px solid var(--rp-gray-200); border-radius: var(--rp-radius-sm); overflow: hidden; cursor: pointer; background: var(--rp-white); transition: var(--rp-transition); }
.tpl.sel { border-color: var(--rp-lime); box-shadow: 0 0 0 3px #eef2b8; }
.tpl img { width: 100%; height: 200px; object-fit: cover; object-position: top; display: block; background: var(--rp-gray-100); }
.tpl .cap { display: flex; align-items: center; justify-content: space-between; padding: 8px 10px; font-size: 13px; font-weight: 600; }
.tpl .zoom { font-size: 12px; color: var(--rp-pink); }
.logo-preview { max-height: 60px; max-width: 200px; border: 1px solid var(--rp-gray-200); border-radius: var(--rp-radius-sm); padding: 4px; background: #fff; }

.lightbox { position: fixed; inset: 0; background: rgba(0,0,0,0.8); display: grid; place-items: center; z-index: 200; padding: 24px; cursor: zoom-out; }
.lightbox img { max-width: 96vw; max-height: 92vh; box-shadow: 0 12px 60px rgba(0,0,0,0.5); background: #fff; }

/* Debug-Batch */
.dbg-table { width: 100%; border-collapse: collapse; margin-top: 12px; font-size: 13px; }
.dbg-table th, .dbg-table td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--rp-gray-200); vertical-align: top; }
.dbg-badge { display: inline-block; padding: 2px 9px; border-radius: 999px; font-weight: 700; font-size: 12px; }
.dbg-ok { background: #eafaf0; color: var(--rp-green); }
.dbg-bad { background: #fdeaea; color: var(--rp-red); }
.dbg-unk { background: var(--rp-gray-100); color: var(--rp-gray-700); }

.faq { margin-top: 36px; }
.faq h2 { font-size: 19px; margin: 0 0 12px; }
.faq details { background: var(--rp-white); border: 1px solid var(--rp-gray-200); border-radius: var(--rp-radius-sm); margin-bottom: 8px; overflow: hidden; }
.faq summary { cursor: pointer; padding: 14px 16px; font-weight: 600; font-size: 14px; list-style: none; position: relative; padding-right: 40px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; position: absolute; right: 16px; top: 12px; font-size: 20px; color: var(--rp-gray-500); transition: var(--rp-transition); }
.faq details[open] summary::after { content: '−'; }
.faq summary:hover { background: var(--rp-gray-100); }
.faq .faq-body { padding: 0 16px 16px; color: var(--rp-gray-700); font-size: 14px; }
.hidden { display: none !important; }
.muted { color: var(--rp-gray-500); font-size: 12px; }
.foot { text-align: center; color: var(--rp-gray-500); font-size: 12px; margin-top: 40px; }

@media (max-width: 640px) { .grid2, .grid3 { grid-template-columns: 1fr; } .totals-box { width: 100%; } }