/* ============================================================
   ECOWINDOWS — Quick Estimation · Corporate design

   MERGE-HINWEIS (Etappe 1):
   Dieses Stylesheet lebt jetzt neben dem Quotes-Stylesheet in einer Seite.
   Damit sich beide nicht ins Gehege kommen, gilt:
     • Alle QE-Ansichten liegen in einem Wrapper  <div class="qe-scope">
     • Element-Regeln (input, textarea, h3 …) sind auf .qe-scope beschränkt
     • Die vormals kollidierenden Klassen heißen jetzt
       .btn → .qe-btn · .card → .qe-card · .view → .qe-view · .dot → .qe-dot
     • .topbar/.tabs/.tab entfallen — Kopfleiste und Navigation stellt die Shell
   ============================================================ */
:root{
  --eco-green:#8BC94B;
  --eco-green-dark:#6BA62F;
  --eco-green-soft:#EAF6DC;
  --ink:#1A1A1A;
  --ink-2:#4A4A4A;
  --muted:#8A8F98;
  --line:#E4E7EC;
  --bg:#F5F6F8;
  --card:#FFFFFF;
  --amber:#F4B740;
  --red:#E5564E;
  --radius:10px;
  --shadow:0 1px 3px rgba(16,24,40,.08),0 1px 2px rgba(16,24,40,.04);
  --font:"Segoe UI",-apple-system,Roboto,Helvetica,Arial,sans-serif;
}

.qe-scope h3{font-size:15px;margin:0 0 10px;font-weight:600}
.qe-scope h4{font-size:13px;margin:0 0 8px;font-weight:600;text-transform:uppercase;letter-spacing:.03em;color:var(--ink-2)}
.qe-scope .muted{color:var(--muted)}
.qe-scope .computed-dim{color:var(--muted)}
.qe-scope input.computed-dim{background:#eef0ea !important;border-color:#dfe3da !important;color:var(--muted) !important}
.qe-scope input.computed-dim::placeholder{color:var(--muted);opacity:.85}
.qe-btn.needs-save{background:var(--eco-green);color:#fff;border-color:var(--eco-green-dark)}
.qe-btn.needs-save::after{content:" ●";font-size:11px}
.qe-scope .small{font-size:12px}
.qe-scope .ta-r{text-align:right}
.hidden{display:none !important}

/* ---------- buttons ---------- */
.qe-btn{font-family:inherit;font-size:13px;border-radius:8px;padding:8px 14px;cursor:pointer;border:1px solid transparent;font-weight:500}
.qe-btn-primary{background:var(--eco-green);color:#fff;border-color:var(--eco-green)}
.qe-btn-primary:hover{background:var(--eco-green-dark);border-color:var(--eco-green-dark)}
.qe-btn-ghost{background:#fff;border-color:var(--line);color:var(--ink-2)}
.qe-btn-ghost:hover{border-color:var(--eco-green);color:var(--eco-green-dark)}
.qe-btn-link{background:none;border:0;color:var(--eco-green-dark);cursor:pointer;font-size:12px;padding:2px 4px;text-decoration:underline}
.qe-btn-danger{background:#fff;border-color:var(--red);color:var(--red)}
.qe-btn-danger:hover{background:var(--red);color:#fff}

/* ---------- layout ---------- */
/* .qe-scope ersetzt das frühere <main> und stellt zugleich die
   Schriftgrundlinie her, die vorher aus body{} kam. */
.qe-scope{
  padding:20px;max-width:1500px;margin:0 auto;
  font-family:var(--font);color:var(--ink);font-size:14px;line-height:1.45;
}
.qe-view{display:none}
.qe-view.is-active{display:block}
.qe-card{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:18px;margin-bottom:18px;
}
.qe-scope .card-title-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;gap:12px;flex-wrap:wrap}

.estimate-layout{display:grid;grid-template-columns:1fr 340px;gap:18px;align-items:start}
.estimate-side{position:sticky;top:70px}
@media(max-width:1100px){.estimate-layout{grid-template-columns:1fr}.estimate-side{position:static}}

/* ---------- fields ---------- */
/* Auf .qe-scope beschränkt, damit die globalen Feld-Regeln des Quotes-
   Stylesheets (label{display:block}, input{…}, th,td{text-align:right} …)
   den QE-Bereich nicht überschreiben — und umgekehrt. */
.qe-scope .field label,.qe-scope .settings-grid label,.qe-scope .map-meta label{display:block;font-size:12px;color:var(--ink-2);font-weight:500;margin-bottom:4px}
.qe-scope input[type=text],.qe-scope input[type=number],.qe-scope textarea,.qe-scope select{
  width:100%;font-family:inherit;font-size:14px;color:var(--ink);
  border:1px solid var(--line);border-radius:8px;padding:8px 10px;background:#fff;
}
.qe-scope input:focus,.qe-scope textarea:focus,.qe-scope select:focus{outline:none;border-color:var(--eco-green);box-shadow:0 0 0 3px var(--eco-green-soft)}
.qe-scope textarea{resize:vertical}
/* Quotes setzt th,td global auf rechtsbündig + Rahmen — im QE-Bereich zurücksetzen. */
.qe-scope th,.qe-scope td{border:0;text-align:left}
.qe-scope table{width:100%;border-collapse:collapse;margin-top:0}

.client-head{display:grid;grid-template-columns:1.4fr 1.4fr .7fr .7fr;gap:14px}
@media(max-width:760px){.client-head{grid-template-columns:1fr 1fr}}
.loc-row{display:flex;gap:6px}
.loc-row input{flex:1}

/* ---------- adjustment factor card ---------- */
.adjust-card{border:1px solid var(--eco-green);background:linear-gradient(180deg,var(--eco-green-soft),#fff 60%)}
.adjust-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
.adjust-head h3{margin-bottom:2px}
.adjust-value{display:flex;align-items:center;gap:4px}
.adjust-value input{width:90px;font-size:24px;font-weight:700;text-align:right;border-color:var(--eco-green);color:var(--eco-green-dark)}
.adjust-value .pct{font-size:22px;font-weight:700;color:var(--eco-green-dark)}
.big-slider{width:100%;margin:16px 0 4px;accent-color:var(--eco-green)}
.adjust-scale{display:flex;justify-content:space-between;font-size:11px;color:var(--muted)}

.complexity{display:flex;align-items:center;gap:12px;margin-top:14px;padding:10px 12px;background:#fff;border:1px solid var(--line);border-radius:8px}
.cx-light{width:18px;height:18px;border-radius:50%;background:var(--muted);flex:none;box-shadow:0 0 0 3px rgba(0,0,0,.05)}
.cx-light.green{background:#43b35e}.cx-light.amber{background:var(--amber)}.cx-light.red{background:var(--red)}
.cx-text{display:flex;flex-direction:column;line-height:1.3}
.cx-suggest{margin-left:auto;font-size:12px;font-weight:600;color:var(--eco-green-dark)}

/* ---------- systems table (front end) ---------- */
.table-wrap{overflow-x:auto}
.sys-table{width:100%;border-collapse:collapse;font-size:13px}
.sys-table th{font-size:11px;text-transform:uppercase;letter-spacing:.03em;color:var(--muted);text-align:left;padding:8px 8px;border-bottom:1px solid var(--line);white-space:nowrap}
.sys-table td{padding:8px 8px;border-bottom:1px solid var(--line);vertical-align:middle}
.sys-table tr.is-hidden td{opacity:.4}
.sys-table tr.is-alt{background:repeating-linear-gradient(45deg,#fafafa,#fafafa 6px,#f2f2f2 6px,#f2f2f2 12px)}
.sys-table tr.is-alt .sys-name::after{content:"ALTERNATIVE";font-size:9px;background:var(--ink-2);color:#fff;border-radius:4px;padding:1px 5px;margin-left:6px;vertical-align:middle;letter-spacing:.04em}
.col-toggle{width:44px;text-align:center}
.sys-table td.col-toggle{text-align:center}
.col-adj{width:170px}
.sys-name{font-weight:600}
.sys-desc{font-size:11px;color:var(--muted)}
.price{font-weight:700;font-size:15px;white-space:nowrap}
.price-sub{font-size:11px;color:var(--muted)}

/* per-system tune control */
.tune{display:flex;align-items:center;gap:6px}
.tune input[type=range]{flex:1;accent-color:var(--eco-green-dark)}
.tune .tune-pct{width:52px}
.tune .tune-pct input{padding:4px 5px;font-size:12px;text-align:right}

.toggle{appearance:none;width:34px;height:20px;border-radius:20px;background:var(--line);position:relative;cursor:pointer;transition:.15s}
.toggle:checked{background:var(--eco-green)}
.toggle.alt:checked{background:var(--ink-2)}
.toggle::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#fff;transition:.15s}
.toggle:checked::after{transform:translateX(14px)}

.intro-actions{display:flex;align-items:center;gap:14px}
.intro-toggle{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--ink-2);cursor:pointer}
.intro-toggle input{accent-color:var(--eco-green)}
.legend{display:flex;gap:14px;font-size:11px;color:var(--muted)}
.qe-dot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:4px;vertical-align:middle}
.dot-show{background:var(--eco-green)}.dot-alt{background:var(--ink-2)}.dot-hide{background:var(--line)}

/* ---------- sidebar ---------- */
.side-toggle{display:flex;justify-content:space-between;align-items:center}
.side-block{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:14px;margin-bottom:14px;box-shadow:var(--shadow)}
#map{height:200px;border-radius:8px;border:1px solid var(--line);background:#e9eef2}
.map-meta{margin-top:10px}
.inline{font-size:12px}
.auto-metric{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin-top:10px}
.am-label{font-size:12px;color:var(--muted)}
.am-value{font-size:15px;font-weight:700;color:var(--eco-green-dark)}
.sea-warn{margin-top:8px;padding:8px 10px;border-radius:8px;font-size:12px;font-weight:500}
.sea-warn.caution{background:#fdecea;color:#a3271f;border:1px solid #f3b5b0}
.sea-warn.ok{background:var(--eco-green-soft);color:var(--eco-green-dark);border:1px solid #cfe8b3}
.factor-list{list-style:none;margin:0;padding:0}
.factor-list li{display:flex;justify-content:space-between;gap:8px;padding:5px 0;border-bottom:1px dashed var(--line);font-size:12px;cursor:pointer}
.factor-list li:hover{color:var(--eco-green-dark)}
.factor-list li .pct{font-weight:700;color:var(--eco-green-dark)}
.factor-list li small{display:block;color:var(--muted);font-weight:400}

/* ---------- input view ---------- */
.input-totals{display:flex;gap:16px;font-size:14px}
.input-totals strong{color:var(--eco-green-dark);font-size:16px}
.input-table,.backend-table{width:100%;border-collapse:collapse;font-size:13px}
.input-table th,.backend-table th{font-size:11px;text-transform:uppercase;color:var(--muted);text-align:left;padding:8px;border-bottom:1px solid var(--line)}
.input-table td,.backend-table td{padding:6px 8px;border-bottom:1px solid var(--line)}
.input-table input,.input-table select{padding:6px 8px}
.input-table .row-sqm{text-align:right;font-weight:600;white-space:nowrap}
.over-h{color:var(--red);font-weight:600}
.del-row{color:var(--red);cursor:pointer;border:0;background:none;font-size:16px;line-height:1}

/* ---------- backend ---------- */
.settings-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media(max-width:700px){.settings-grid{grid-template-columns:1fr}}
.backend-table tbody tr{cursor:pointer}
.backend-table tbody tr:hover{background:var(--eco-green-soft)}
.mat-pill{display:inline-block;font-size:11px;padding:2px 8px;border-radius:20px;background:var(--bg);border:1px solid var(--line)}

/* ---------- drawer ---------- */
.drawer{position:fixed;inset:0;z-index:60;display:none}
.drawer.open{display:block}
.drawer-backdrop{position:absolute;inset:0;background:rgba(16,24,40,.4)}
.drawer-panel{position:absolute;top:0;right:0;height:100%;width:460px;max-width:92vw;background:#fff;box-shadow:-4px 0 24px rgba(0,0,0,.15);display:flex;flex-direction:column;z-index:1}
.drawer-head,.drawer-foot{padding:16px 20px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center}
.drawer-foot{border-bottom:0;border-top:1px solid var(--line);margin-top:auto}
.drawer-body{padding:20px;overflow-y:auto;flex:1}
.drawer-body label{display:block;font-size:12px;color:var(--ink-2);font-weight:500;margin:0 0 4px}
.drawer-body .dfield{margin-bottom:14px}
.drawer-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.glaze-toggle{display:flex;gap:8px;flex-wrap:wrap}
.glaze-btn{padding:7px 14px;border:1px solid var(--line);background:#fff;border-radius:20px;font-size:13px;cursor:pointer;transition:.12s;color:var(--ink-2)}
.glaze-btn:hover{border-color:var(--eco-green)}
.glaze-btn.on{background:var(--eco-green);border-color:var(--eco-green);color:#fff;font-weight:600}

/* ============================================================
   PRINT / PDF
============================================================= */
.print-doc{display:none}
/* Drucken: Quotes und QE haben je einen eigenen PDF-Weg. Damit sie sich nicht
   gegenseitig ins Papier drucken, setzt der QE-PDF-Knopf vorher
   body.printing-qe — nur dann gilt der QE-Druckpfad. */
@media print{
  body.printing-qe{background:#fff;font-size:11px}
  body.printing-qe .no-print{display:none !important}
  body.printing-qe .qe-scope{display:none !important}
  body.printing-qe .qt-scope{display:none !important}
  body.printing-qe .print-doc{display:block}
  body:not(.printing-qe) .print-doc{display:none !important}
  /* @page lässt sich nicht auf einen Bereich beschränken. Quotes braucht
     margin:0 (seine .page bringt 14 mm selbst mit) — deshalb bringt der
     QE-Druckbogen seinen Seitenrand jetzt ebenfalls selbst mit. */
  body.printing-qe .print-doc{padding:14mm}
}
/* preview of print doc on screen when toggled */
.print-doc.preview{
  display:block;background:#fff;max-width:780px;margin:20px auto;padding:40px;
  box-shadow:var(--shadow);border:1px solid var(--line);
}

.pd-head{display:flex;justify-content:space-between;align-items:flex-start;border-bottom:3px solid var(--eco-green);padding-bottom:14px;margin-bottom:22px}
.pd-head img{height:36px}
.pd-title{text-align:right}
.pd-title h1{font-size:20px;margin:0;letter-spacing:.01em;color:var(--eco-green-dark)}
.pd-title p{margin:3px 0 0;color:var(--muted);font-size:11px}

/* cover letter */
.pd-letter{font-size:12px;line-height:1.6;color:var(--ink);margin-bottom:22px;padding-bottom:16px;border-bottom:2px solid var(--eco-green)}
.pd-letter p{margin:0 0 10px}
.pd-letter a{color:var(--eco-green-dark);text-decoration:none;font-weight:600;border-bottom:1px solid var(--eco-green)}
.pd-links{list-style:none;margin:4px 0 12px;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:4px 24px}
.pd-links li{font-size:12px;padding-left:14px;position:relative}
.pd-links li::before{content:"›";position:absolute;left:0;color:var(--eco-green);font-weight:700}

/* meta strip */
.pd-meta{display:flex;flex-wrap:wrap;gap:22px 34px;margin-bottom:18px;padding:14px 16px;background:var(--eco-green-soft);border-radius:8px;font-size:12px}
.pd-meta div span{display:block;color:var(--eco-green-dark);font-size:10px;text-transform:uppercase;letter-spacing:.05em;margin-bottom:2px}
.pd-meta div strong{font-size:14px;color:var(--ink)}

.pd-h2{font-size:13px;text-transform:uppercase;letter-spacing:.05em;color:var(--eco-green-dark);margin:0 0 8px}

/* systems table */
.pd-table{width:100%;border-collapse:collapse;font-size:11px;margin-bottom:6px}
.pd-table th{background:var(--eco-green);color:#fff;text-align:left;padding:8px 9px;font-weight:600}
.pd-table th.ta-r,.pd-table td.ta-r{text-align:right}
.pd-table td{padding:9px;border-bottom:1px solid var(--line);vertical-align:top}
.pd-table tbody tr:nth-child(even):not(.alt) td{background:#fafbf8}
.pd-table tr.alt td{background:#f4f4f4;color:#888}
.pd-table .pd-prod{font-weight:700;color:var(--ink);text-decoration:none}
.pd-table a.pd-prod{color:var(--eco-green-dark);border-bottom:1px solid var(--eco-green)}
.pd-table .pd-desc{color:var(--muted);font-size:10px;margin-top:2px;line-height:1.4}
.pd-table .pd-upg{font-size:10px;color:var(--eco-green-dark);font-weight:600;margin-top:3px;white-space:nowrap}
.pd-alt-tag{font-size:8px;background:#888;color:#fff;padding:1px 6px;border-radius:3px;margin-left:5px;letter-spacing:.05em;vertical-align:middle}
.pd-note{font-size:9.5px;color:var(--muted);margin:0 0 14px;line-height:1.5}
.pd-addons{border:1px solid var(--eco-green);border-radius:8px;padding:12px 16px;margin:0 0 16px;background:var(--eco-green-soft)}
.pd-addons strong{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--eco-green-dark);margin-bottom:8px}
.pd-addon-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.pd-addon-grid a{font-size:12px;font-weight:600;color:var(--eco-green-dark);text-decoration:none;padding-left:14px;position:relative}
.pd-addon-grid a::before{content:"›";position:absolute;left:0;color:var(--eco-green)}
.pd-addon-grid span{font-size:12px;color:var(--muted);padding-left:14px}
.pd-disclaimer{font-size:9.5px;color:var(--muted);border-top:1px solid var(--line);padding-top:10px;margin-top:8px;line-height:1.5}
.pd-foot{display:flex;justify-content:space-between;font-size:9px;color:var(--muted);margin-top:8px;border-top:1px solid var(--line);padding-top:8px}