/* ============================================================
   ECOWINDOWS — Handbücher (Help)

   Gemeinsames Design für BEIDE Handbücher. Grundlage ist die Optik des
   Quick-Estimation-Handbuchs; das Quotes-Handbuch wurde darauf abgebildet.

   Alle Regeln sind auf .help-scope beschränkt, weil die Handbücher jetzt
   INNERHALB der App laufen und sich die Seite mit der Quotes- und der
   QE-Hälfte teilen. Ohne diese Klammer würden die Grundregeln der App
   (Schriftgrößen, Tabellenrahmen, Formularfelder) hier durchschlagen.
   ============================================================ */

.help-scope{
  --hp-green:#8BC94B;
  --hp-green-dark:#6ba831;
  --hp-green-soft:#eef7e3;
  --hp-ink:#2b2f24;
  --hp-muted:#6b7363;
  --hp-line:#e3e7dc;
  --hp-amber:#e8a13a;

  max-width:880px;
  margin:0 auto;
  padding:26px 26px 80px;
  color:var(--hp-ink);
  font-family:-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:15px;
  line-height:1.55;
}

/* ---------- Titelblock ---------- */
/* Kein eigenes Logo: Logo und Navigation der App bleiben ja stehen. */
.help-scope .hp-head{
  background:#fff;
  border:1px solid var(--hp-line);
  border-bottom:3px solid var(--hp-green);
  border-radius:12px;
  padding:20px 24px;
  margin-bottom:30px;
}
.help-scope .hp-head .wordmark{
  font-size:13px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--hp-green-dark);font-weight:700;
}
.help-scope .hp-head h1{font-size:26px;margin:6px 0 2px;font-weight:800;letter-spacing:-.3px;color:var(--hp-ink)}
.help-scope .hp-head .sub{color:var(--hp-muted);font-size:14px}
.help-scope .hp-head .meta{
  margin-top:14px;padding-top:12px;border-top:1px solid var(--hp-line);
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  font-size:11.5px;color:var(--hp-muted);
}

/* ---------- Typografie ---------- */
.help-scope h2{
  font-size:17px;margin:36px 0 10px;padding-bottom:6px;
  border-bottom:1px solid var(--hp-line);color:var(--hp-green-dark);font-weight:700;
}
.help-scope h2 .n{color:var(--hp-green);font-weight:800;margin-right:9px}
.help-scope h2::after{content:none}          /* Unterstrich der App-Überschriften abschalten */
.help-scope h3{font-size:14px;margin:20px 0 6px;font-weight:700;color:var(--hp-ink);text-transform:none;letter-spacing:0}
.help-scope p{margin:8px 0}
.help-scope ol,.help-scope ul{margin:8px 0 8px 4px;padding-left:22px}
.help-scope li{margin:5px 0}
.help-scope b,.help-scope strong{color:#111;font-weight:700}
.help-scope strong.k{color:var(--hp-green-dark)}
.help-scope a{color:var(--hp-green-dark)}
.help-scope hr{border:none;border-top:1px solid var(--hp-line);margin:26px 0}
.help-scope code,.help-scope kbd{
  background:var(--hp-green-soft);border:1px solid #d6e7c2;color:var(--hp-green-dark);
  border-radius:4px;padding:1px 6px;font-size:13px;
  font-family:ui-monospace,Consolas,monospace;
}

/* ---------- Bausteine ---------- */
.help-scope .card{
  background:#fff;border:1px solid var(--hp-line);border-radius:10px;
  padding:18px 22px;margin:14px 0;box-shadow:none;
}
.help-scope .note{
  background:var(--hp-green-soft);border:1px solid #d6e7c2;
  border-left:4px solid var(--hp-green);border-radius:8px;
  padding:12px 16px;margin:14px 0;font-size:14px;
}
.help-scope .warn{
  background:#fff7ec;border:1px solid #f3dcae;border-left:4px solid var(--hp-amber);
  border-radius:8px;padding:12px 16px;margin:14px 0;font-size:14px;
}
.help-scope .note .lbl,.help-scope .warn .lbl{
  font-weight:700;text-transform:uppercase;letter-spacing:.05em;
  font-size:10.5px;display:block;margin-bottom:3px;
}
.help-scope .note .lbl{color:var(--hp-green-dark)}
.help-scope .warn .lbl{color:#8a5a00}
.help-scope .pill{
  display:inline-block;background:var(--hp-green);color:#fff;
  font-weight:600;font-size:12px;border-radius:20px;padding:2px 12px;margin-right:6px;
}
.help-scope .flow{
  background:#f4f8ee;border:1px solid var(--hp-line);border-radius:8px;
  padding:12px 16px;margin:14px 0;text-align:center;
  font-weight:600;color:var(--hp-green-dark);font-size:14px;
}
.help-scope .lead{color:var(--hp-muted);font-size:14px}

/* nummerierte Schritte mit grünem Kreis */
.help-scope .steps{counter-reset:s;list-style:none;padding-left:0}
.help-scope .steps>li{position:relative;padding-left:40px;margin:14px 0}
.help-scope .steps>li::before{
  counter-increment:s;content:counter(s);
  position:absolute;left:0;top:-2px;width:26px;height:26px;
  background:var(--hp-green);color:#fff;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:13px;
}

/* ---------- Tabellen ---------- */
.help-scope table.cd{
  width:100%;border-collapse:collapse;margin:12px 0;font-size:13.5px;
  border:1px solid var(--hp-line);border-radius:8px;overflow:hidden;
}
.help-scope table.cd th{
  background:var(--hp-green);color:#fff;text-align:left;
  padding:8px 11px;font-weight:600;border:0;
}
.help-scope table.cd td{
  padding:8px 11px;border:0;border-bottom:1px solid var(--hp-line);
  vertical-align:top;text-align:left;
}
.help-scope table.cd tr:last-child td{border-bottom:0}
.help-scope table.cd tr:nth-child(even) td{background:#fafcf7}
.help-scope table.cd td:first-child{white-space:nowrap;font-weight:600;color:var(--hp-green-dark)}

.help-scope .hp-foot{
  color:var(--hp-muted);font-size:12px;text-align:center;
  margin-top:50px;padding-top:16px;border-top:1px solid var(--hp-line);
}

/* Ladehinweis, falls das Handbuch nicht geholt werden konnte */
.help-scope .hp-loading{color:var(--hp-muted);font-size:14px;padding:20px 0}

@media(max-width:760px){
  .help-scope{padding:18px 16px 60px}
  .help-scope table.cd{font-size:12.5px}
}

/* Drucken: nur das Handbuch, ohne Navigation und Kopfleiste */
@media print{
  .help-scope{max-width:none;margin:0;padding:0}
  .help-scope h2{break-after:avoid}
  .help-scope table.cd,.help-scope .note,.help-scope .warn,.help-scope .flow,.help-scope .card{break-inside:avoid}
}