*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --bg: #F5F2EC;
  --surface: #FFFFFF;
  --border: #E2DDD5;
  --text: #1A1714;
  --text-muted: #6B6560;
  --accent: #C4762A;
  --accent-light: #F5E8D7;
  --accent-dark: #9A5A1E;
  --success: #2D7A4F;
  --danger: #C4372A;
  --shadow: 0 2px 12px rgba(0,0,0,0.08);
  --shadow-lg: 0 8px 32px rgba(0,0,0,0.12);
  --radius: 12px;
  --radius-sm: 8px;
}
body { font-family: 'DM Sans', sans-serif; background: var(--bg); color: var(--text); min-height: 100vh; font-size: 15px; line-height: 1.6; }

/* TABS (top-level) */
.top-tabs { display: flex; background: #111; border-bottom: 3px solid var(--accent); }
.top-tab { padding: 14px 28px; font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.8px; color: rgba(255,255,255,0.5); cursor: pointer; border-bottom: 3px solid transparent; margin-bottom: -3px; transition: all 0.2s; }
.top-tab:hover { color: rgba(255,255,255,0.8); }
.top-tab.active { color: #fff; border-bottom-color: var(--accent); background: rgba(196,118,42,0.1); }

/* HEADER */
header { background: var(--text); color: white; padding: 16px 40px; display: flex; align-items: center; gap: 20px; position: sticky; top: 0; z-index: 100; box-shadow: var(--shadow-lg); }
header .logo { font-family: 'DM Serif Display', serif; font-size: 20px; }
header .logo span { color: var(--accent); }
header .subtitle { font-size: 11px; opacity: 0.5; letter-spacing: 1px; text-transform: uppercase; margin-top: 2px; }
header .company-info { margin-left: auto; text-align: right; font-size: 12px; opacity: 0.6; line-height: 1.5; }
header .company-info strong { color: var(--accent); opacity: 1; }
.progress-wrap { display: flex; align-items: center; gap: 10px; margin-left: 32px; }
.step-dot { width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; border: 2px solid rgba(255,255,255,0.25); color: rgba(255,255,255,0.4); cursor: pointer; transition: all 0.2s; }
.step-dot.active { background: var(--accent); border-color: var(--accent); color: white; }
.step-dot.done { background: var(--success); border-color: var(--success); color: white; }

/* PANELS */
.panel { display: none; }
.panel.active { display: block; }

/* MAIN LAYOUT */
.main-layout { display: grid; grid-template-columns: 1fr 360px; min-height: calc(100vh - 120px); }
.configurator { padding: 36px 40px; overflow-y: auto; }
.step-section { display: none; }
.step-section.active { display: block; animation: fadeIn 0.3s ease; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

.section-title { font-family: 'DM Serif Display', serif; font-size: 26px; margin-bottom: 4px; }
.section-subtitle { color: var(--text-muted); margin-bottom: 28px; font-size: 14px; }

/* STEP BAR */
.step-bar { display: flex; margin-bottom: 28px; }
.step-bar-item { flex: 1; padding: 9px 0; text-align: center; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-muted); border-bottom: 3px solid var(--border); transition: all 0.3s; cursor: pointer; }
.step-bar-item.active { color: var(--accent); border-bottom-color: var(--accent); }
.step-bar-item.done { color: var(--success); border-bottom-color: var(--success); }

/* CARDS */
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px,1fr)); gap: 10px; margin-bottom: 20px; }
.card-grid.two-col { grid-template-columns: 1fr 1fr; }
.card-grid.three-col { grid-template-columns: 1fr 1fr 1fr; }
.option-card { background: var(--surface); border: 2px solid var(--border); border-radius: var(--radius); padding: 18px; cursor: pointer; transition: all 0.2s; position: relative; }
.option-card:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: var(--shadow); }
.option-card.selected { border-color: var(--accent); background: var(--accent-light); }
.option-card.selected::after { content:'✓'; position:absolute; top:8px; right:10px; color:var(--accent); font-weight:800; }
.option-card .card-icon { font-size:24px; margin-bottom:8px; }
.option-card .card-label { font-weight:600; font-size:13px; }
.option-card .card-desc { font-size:11px; color:var(--text-muted); margin-top:3px; }
.option-card .card-price { font-size:12px; color:var(--accent); font-weight:600; margin-top:6px; }

/* PRODUCT TILES */
.product-tiles { display:grid; grid-template-columns: repeat(3,1fr); gap:12px; margin-bottom:20px; }
.product-tile { background:var(--surface); border:2px solid var(--border); border-radius:var(--radius); padding:20px 14px; text-align:center; cursor:pointer; transition:all 0.2s; }
.product-tile:hover { border-color:var(--accent); transform:translateY(-3px); box-shadow:var(--shadow-lg); }
.product-tile.selected { border-color:var(--accent); background:var(--accent-light); }
.product-tile .brand-logo { font-family:'DM Serif Display',serif; font-size:20px; margin-bottom:6px; }
.product-tile .model-name { font-size:12px; font-weight:600; color:var(--text-muted); }
.product-tile .model-price { font-size:13px; color:var(--accent); font-weight:700; margin-top:6px; }

/* FORM */
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:14px; }
.form-row.full { grid-template-columns:1fr; }
.form-row.three { grid-template-columns:1fr 1fr 1fr; }
.field { display:flex; flex-direction:column; gap:5px; }
.field label { font-size:12px; font-weight:500; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.5px; }
.field input,.field select,.field textarea { border:2px solid var(--border); border-radius:var(--radius-sm); padding:9px 12px; font-family:'DM Sans',sans-serif; font-size:14px; background:var(--surface); color:var(--text); transition:border-color 0.2s; outline:none; }
.field input:focus,.field select:focus,.field textarea:focus { border-color:var(--accent); }
.field textarea { resize:vertical; min-height:70px; }

/* TOGGLE */
.toggle-row { display:flex; align-items:center; justify-content:space-between; background:var(--surface); border:2px solid var(--border); border-radius:var(--radius-sm); padding:12px 16px; margin-bottom:8px; transition:all 0.2s; cursor:pointer; }
.toggle-row:hover { border-color:var(--accent); }
.toggle-row.active { border-color:var(--accent); background:var(--accent-light); }
.toggle-row .toggle-label { font-weight:600; font-size:13px; }
.toggle-row .toggle-price { font-size:11px; color:var(--accent); margin-top:2px; }
.toggle-switch { width:40px; height:22px; background:#ccc; border-radius:11px; position:relative; transition:background 0.2s; flex-shrink:0; }
.toggle-switch::after { content:''; position:absolute; width:16px; height:16px; border-radius:50%; background:white; top:3px; left:3px; transition:left 0.2s; }
.toggle-row.active .toggle-switch { background:var(--accent); }
.toggle-row.active .toggle-switch::after { left:21px; }

/* SLIDER */
.slider-field { margin-bottom:18px; }
.slider-field label { font-size:12px; font-weight:500; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.5px; display:block; margin-bottom:8px; }
.slider-wrap { display:flex; align-items:center; gap:14px; }
.slider-wrap input[type=range] { flex:1; -webkit-appearance:none; height:4px; background:var(--border); border-radius:2px; outline:none; }
.slider-wrap input[type=range]::-webkit-slider-thumb { -webkit-appearance:none; width:18px; height:18px; border-radius:50%; background:var(--accent); cursor:pointer; box-shadow:0 2px 6px rgba(196,118,42,0.4); }
.slider-value { min-width:65px; text-align:center; background:var(--surface); border:2px solid var(--border); border-radius:var(--radius-sm); padding:5px 8px; font-weight:600; font-size:13px; }

.section-sep { border:none; border-top:2px solid var(--border); margin:24px 0; }
.group-title { font-weight:600; font-size:12px; text-transform:uppercase; letter-spacing:1px; color:var(--text-muted); margin-bottom:10px; margin-top:22px; }

.nav-buttons { display:flex; gap:10px; margin-top:28px; }
.btn { padding:11px 24px; border-radius:var(--radius-sm); font-family:'DM Sans',sans-serif; font-weight:600; font-size:13px; cursor:pointer; border:none; transition:all 0.2s; }
.btn-primary { background:var(--accent); color:white; }
.btn-primary:hover { background:var(--accent-dark); transform:translateY(-1px); box-shadow:0 4px 12px rgba(196,118,42,0.35); }
.btn-secondary { background:var(--surface); color:var(--text); border:2px solid var(--border); }
.btn-secondary:hover { border-color:var(--accent); }
.btn-success { background:var(--success); color:white; }
.btn-success:hover { opacity:0.9; transform:translateY(-1px); }
/* KPI CARDS */
.kpi-card { background:var(--surface);border:2px solid var(--border);border-radius:var(--radius-sm);padding:14px;text-align:center; }
.kpi-card.kpi-highlight { background:#0D1F12;border-color:#2D7A4F; }
.kpi-card .kpi-label { font-size:10px;text-transform:uppercase;letter-spacing:.5px;color:var(--text-muted);margin-bottom:6px; }
.kpi-card.kpi-highlight .kpi-label { color:#5A9A7A; }
.kpi-card .kpi-val { font-size:18px;font-weight:700;color:var(--text); }
.kpi-card.kpi-highlight .kpi-val { color:#7FD4A0; }
.btn-danger { background:var(--danger); color:white; }
.btn-sm { padding:7px 14px; font-size:12px; }
.btn-large { padding:14px 32px; font-size:15px; }

.input-with-unit { display:flex; }
.input-with-unit input { border-radius:var(--radius-sm) 0 0 var(--radius-sm); border-right:none; flex:1; }
.input-with-unit .unit { background:var(--bg); border:2px solid var(--border); border-radius:0 var(--radius-sm) var(--radius-sm) 0; padding:9px 10px; font-size:12px; color:var(--text-muted); white-space:nowrap; display:flex; align-items:center; }

.alert { background:var(--accent-light); border:2px solid var(--accent); border-radius:var(--radius-sm); padding:12px 16px; font-size:13px; margin-bottom:14px; }
.alert-info { background:#EBF4FF; border-color:#3B82F6; }

/* SUMMARY PANEL */
.summary-panel { background:var(--text); color:white; padding:28px 24px; overflow-y:auto; position:sticky; top:120px; height:calc(100vh - 120px); }
.summary-panel h3 { font-family:'DM Serif Display',serif; font-size:18px; margin-bottom:2px; }
.summary-panel .summary-subtitle { font-size:11px; opacity:0.4; text-transform:uppercase; letter-spacing:1px; margin-bottom:20px; }
.summary-section { margin-bottom:16px; }
.summary-section-title { font-size:10px; text-transform:uppercase; letter-spacing:1px; opacity:0.4; margin-bottom:6px; }
.summary-item { display:flex; justify-content:space-between; align-items:center; padding:6px 0; border-bottom:1px solid rgba(255,255,255,0.08); font-size:12px; }
.summary-item .s-label { opacity:0.7; }
.summary-item .s-val { font-weight:600; color:#E8C98A; font-size:11px; text-align:right; max-width:140px; }
.price-breakdown { margin-top:14px; padding-top:14px; border-top:1px solid rgba(255,255,255,0.2); }
.price-row { display:flex; justify-content:space-between; font-size:12px; padding:3px 0; opacity:0.7; }
.price-row.discount { color:#7FD4A0; opacity:1; }
.price-row.total { font-weight:700; font-size:18px; opacity:1; padding-top:10px; margin-top:6px; border-top:2px solid rgba(255,255,255,0.3); color:#E8C98A; }
.price-row.netto { font-size:11px; opacity:0.4; }
.duration-badge { background:rgba(255,255,255,0.08); border-radius:var(--radius-sm); padding:10px 14px; margin-top:14px; font-size:11px; }
.duration-badge .d-title { font-weight:600; margin-bottom:3px; }
.duration-badge .d-detail { opacity:0.5; }

/* =================== PREISKATALOG PANEL =================== */
.catalog-panel {
  background: var(--bg); padding:36px 40px; }
.catalog-grid { display:grid; grid-template-columns:1fr 1fr 1fr; gap:20px; margin-bottom:36px; }
.catalog-card { background:var(--surface); border:2px solid var(--border); border-radius:var(--radius); padding:24px; transition:all 0.2s; }
.catalog-card h4 { font-family:'DM Serif Display',serif; font-size:18px; margin-bottom:4px; }
.catalog-card .cat-subtitle { font-size:12px; color:var(--text-muted); margin-bottom:16px; }
.upload-zone { border:2px dashed var(--border); border-radius:var(--radius-sm); padding:24px; text-align:center; cursor:pointer; transition:all 0.2s; position:relative; }
.upload-zone:hover { border-color:var(--accent); background:var(--accent-light); }
.upload-zone.has-file { border-color:var(--success); background:#F0FBF5; }
.upload-zone input[type=file] { position:absolute; inset:0; opacity:0; cursor:pointer; width:100%; height:100%; }
.upload-zone .uz-icon { font-size:28px; margin-bottom:8px; }
.upload-zone .uz-text { font-size:13px; font-weight:600; color:var(--text-muted); }
.upload-zone .uz-hint { font-size:11px; color:var(--text-muted); margin-top:4px; }
.upload-zone .uz-filename { font-size:12px; color:var(--success); font-weight:600; margin-top:6px; word-break:break-all; }
.catalog-status { margin-top:12px; }
.status-pill { display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:20px; font-size:11px; font-weight:600; }
.status-pill.loaded { background:#D1FAE5; color:#065F46; }
.status-pill.empty { background:#F3F4F6; color:#6B7280; }
.catalog-preview { margin-top:12px; overflow:auto; max-height:200px; border:1px solid var(--border); border-radius:var(--radius-sm); font-size:11px; }
.catalog-preview table { width:100%; border-collapse:collapse; }
.catalog-preview th { background:var(--bg); padding:6px 8px; text-align:left; font-weight:600; position:sticky; top:0; border-bottom:1px solid var(--border); }
.catalog-preview td { padding:5px 8px; border-bottom:1px solid var(--border); }
.catalog-preview tr:hover td { background:var(--accent-light); }
.catalog-stats { display:flex; gap:12px; margin-top:10px; flex-wrap:wrap; }
.stat-chip { background:var(--bg); border:1px solid var(--border); border-radius:6px; padding:4px 10px; font-size:11px; font-weight:600; }

/* SEARCH BAR */
.search-bar { display:flex; gap:10px; margin-bottom:16px; }
.search-bar input { flex:1; padding:10px 14px; border:2px solid var(--border); border-radius:var(--radius-sm); font-size:13px; font-family:'DM Sans',sans-serif; outline:none; }
.search-bar input:focus { border-color:var(--accent); }
.search-bar select { padding:10px 12px; border:2px solid var(--border); border-radius:var(--radius-sm); font-size:13px; font-family:'DM Sans',sans-serif; outline:none; }
.results-table { width:100%; border-collapse:collapse; font-size:13px; background:var(--surface); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); }
.results-table th { background:var(--text); color:white; padding:10px 12px; text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:0.5px; }
.results-table td { padding:9px 12px; border-bottom:1px solid var(--border); }
.results-table tr:hover td { background:var(--accent-light); }
.results-table tr:last-child td { border:none; }
.add-to-offer-btn { background:var(--accent); color:white; border:none; padding:4px 10px; border-radius:4px; font-size:11px; font-weight:600; cursor:pointer; }
.add-to-offer-btn:hover { background:var(--accent-dark); }

/* =================== EIGENARTIKEL PANEL =================== */
.eigen-panel { padding:36px 40px; }
.eigen-upload-area { background:var(--surface); border:2px solid var(--border); border-radius:var(--radius); padding:24px; margin-bottom:24px; }
.eigen-table-wrap { background:var(--surface); border:2px solid var(--border); border-radius:var(--radius); overflow:hidden; margin-bottom:24px; }
.eigen-table { width:100%; border-collapse:collapse; font-size:13px; }
.eigen-table th { background:var(--text); color:white; padding:10px 12px; text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:0.5px; white-space:nowrap; }
.eigen-table td { padding:8px 10px; border-bottom:1px solid var(--border); vertical-align:middle; }
.eigen-table tr:hover td { background:#FAFAFA; }
.eigen-table input[type=number], .eigen-table input[type=text] { width:100%; border:1px solid var(--border); border-radius:4px; padding:5px 8px; font-size:12px; font-family:'DM Sans',sans-serif; outline:none; background:transparent; }
.eigen-table input:focus { border-color:var(--accent); }
.marge-badge { display:inline-block; padding:2px 8px; border-radius:10px; font-size:11px; font-weight:700; }
.marge-badge.gut { background:#D1FAE5; color:#065F46; }
.marge-badge.mittel { background:#FEF3C7; color:#92400E; }
.marge-badge.schlecht { background:#FEE2E2; color:#991B1B; }
.eigen-summary-bar { background:var(--text); color:white; border-radius:var(--radius); padding:20px 24px; display:flex; gap:32px; align-items:center; flex-wrap:wrap; margin-bottom:24px; }
.eigen-kpi { }
.eigen-kpi .kpi-label { font-size:10px; opacity:0.5; text-transform:uppercase; letter-spacing:1px; }
.eigen-kpi .kpi-val { font-size:20px; font-weight:700; color:#E8C98A; }
.add-eigen-row { display:flex; gap:10px; align-items:flex-end; background:var(--surface); border:2px solid var(--border); border-radius:var(--radius); padding:16px; margin-bottom:16px; flex-wrap:wrap; }
.add-eigen-row .field { flex:1; min-width:120px; }

/* OFFER ITEMS LIST (from catalogs) */
.offer-items-section { background:var(--surface); border:2px solid var(--border); border-radius:var(--radius); padding:16px; margin-bottom:16px; }
.offer-items-section h4 { font-weight:600; margin-bottom:12px; font-size:14px; }
.offer-item-row { display:flex; align-items:center; gap:10px; padding:8px 0; border-bottom:1px solid var(--border); font-size:13px; }
.offer-item-row:last-child { border:none; }
.oi-name { flex:1; }
.oi-qty { width:50px; }
.oi-price { width:80px; font-weight:600; color:var(--accent); }
.oi-remove { background:none; border:none; color:var(--danger); cursor:pointer; font-size:16px; }

/* PDF HINT */
.pdf-hint { background:linear-gradient(135deg, #1A1714, #2D2820); color:white; border-radius:var(--radius); padding:24px; text-align:center; margin-top:20px; }
.pdf-hint .ph-icon { font-size:36px; margin-bottom:10px; }
.pdf-hint h4 { font-family:'DM Serif Display',serif; font-size:18px; margin-bottom:4px; }
.pdf-hint p { font-size:12px; opacity:0.5; margin-bottom:14px; }

/* INFO BOX */
.info-box { background:#EBF4FF; border:2px solid #BFDBFE; border-radius:var(--radius-sm); padding:12px 16px; font-size:12px; color:#1E40AF; margin-bottom:14px; }

/* TEMPLATE DOWNLOAD */
.template-btn { display:inline-flex; align-items:center; gap:6px; background:var(--bg); border:2px solid var(--border); border-radius:var(--radius-sm); padding:8px 14px; font-size:12px; font-weight:600; cursor:pointer; color:var(--text); transition:all 0.2s; }
.template-btn:hover { border-color:var(--accent); color:var(--accent); }

@media (max-width:1000px) {
  .main-layout { grid-template-columns:1fr; }
  .summary-panel { position:relative; height:auto; top:auto; }
  header { padding:12px 16px; }
  .configurator, .catalog-panel, .eigen-panel { padding:20px 16px; }
  .catalog-grid { grid-template-columns:1fr; }
  .product-tiles { grid-template-columns:1fr 1fr; }
}
/* NACHTEXTE */
.nt-toolbar{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px;}
.nt-list{display:flex;flex-direction:column;gap:6px;min-height:40px;}
.nt-item{background:var(--surface);border:2px solid var(--border);border-radius:var(--radius-sm);padding:10px 14px;display:flex;align-items:flex-start;gap:10px;cursor:grab;transition:all .2s;position:relative;}
.nt-item:hover{border-color:var(--accent);box-shadow:var(--shadow);}
.nt-item.dragging{opacity:.4;background:var(--accent-light);}
.nt-item.drag-over{border-color:var(--accent);border-style:dashed;}
.nt-item.inactive{opacity:.45;background:var(--bg);}
.nt-drag-handle{font-size:16px;color:var(--border);cursor:grab;padding-top:2px;flex-shrink:0;user-select:none;}
.nt-drag-handle:hover{color:var(--accent);}
.nt-check{width:18px;height:18px;border:2px solid var(--border);border-radius:4px;display:flex;align-items:center;justify-content:center;flex-shrink:0;cursor:pointer;margin-top:2px;transition:all .2s;}
.nt-check.on{background:var(--accent);border-color:var(--accent);color:#fff;font-size:11px;}
.nt-body{flex:1;}
.nt-title{font-weight:600;font-size:12px;margin-bottom:3px;display:flex;align-items:center;gap:6px;}
.nt-title .nt-badge{background:var(--accent-light);color:var(--accent);padding:1px 7px;border-radius:10px;font-size:10px;font-weight:600;}
.nt-text{font-size:12px;color:var(--text-muted);line-height:1.6;border:none;background:transparent;width:100%;resize:none;font-family:'DM Sans',sans-serif;outline:none;}
.nt-text:focus{color:var(--text);}
.nt-del{background:none;border:none;color:var(--text-muted);cursor:pointer;font-size:13px;padding:2px 4px;flex-shrink:0;}
.nt-del:hover{color:var(--danger);}
.nt-preview-hint{font-size:11px;color:var(--text-muted);margin-top:10px;padding:8px 12px;background:var(--bg);border-radius:var(--radius-sm);}
/* PDF DOC BUTTONS */
.pdf-doc-btn{background:rgba(255,255,255,.06);border:2px solid rgba(255,255,255,.12);border-radius:var(--radius-sm);padding:16px 12px;color:#fff;cursor:pointer;transition:all .2s;text-align:center;}
.pdf-doc-btn:hover{background:rgba(196,118,42,.2);border-color:var(--accent);transform:translateY(-2px);}
.pdb-icon{font-size:26px;margin-bottom:6px;}
.pdb-title{font-weight:700;font-size:13px;margin-bottom:2px;}
.pdb-sub{font-size:10px;opacity:.5;}


/* ═══ MULTI-PAGE NAVIGATION ═══════════════════════════════════════════════ */
.header { background:#111; border-bottom:3px solid var(--accent);
          position:sticky; top:0; z-index:100; }
.hd-brand { display:flex; align-items:center; gap:20px;
            padding:10px 20px 8px; border-bottom:1px solid rgba(255,255,255,0.08); }
.hd-logo  { font-size:22px; font-weight:700; letter-spacing:-0.5px; }
.hd-logo-anders { color:#fff; }
.hd-logo-kfg    { color:var(--accent); }
.hd-address { font-size:11px; color:rgba(255,255,255,0.45); line-height:1.5; }
.hd-address a { color:var(--accent); text-decoration:none; }
.hd-actions { margin-left:auto; }
.top-tabs { display:flex; padding:0 12px; gap:0; overflow-x:auto; }
.top-tab  { display:block; padding:13px 20px; font-size:12px; font-weight:600;
            text-transform:uppercase; letter-spacing:0.06em;
            color:rgba(255,255,255,0.45); text-decoration:none;
            border-bottom:2px solid transparent; white-space:nowrap;
            transition:color .15s, border-color .15s; }
.top-tab:hover  { color:rgba(255,255,255,0.8); text-decoration:none; }
.top-tab.active { color:#fff; border-bottom-color:var(--accent);
                  background:rgba(196,118,42,0.08); }
.page-content { min-height:calc(100vh - 120px); }
.btn-sm { padding:6px 14px; font-size:12px; }