/* Sellerhandwerk — Diagnostik: Styles
   Uebernimmt die Tokens 1:1 aus design-system.md / referenz-hero.html.
   Fonts hier per CDN NUR fuer lokale Preview -- B5-Integration muss woff2
   self-hosten (DSGVO-Pflicht, design-system.md §3). */

:root{
  --ink:#1B1D20; --ink-soft:#4B4F55; --ink-faint:#787D84;
  --paper:#F2F2EE; --surface:#FFFFFF; --line:#DCDDD6;
  --werkgruen:#0E6B4A; --werkgruen-dark:#0A5238; --werkgruen-tint:#E7F0EB;
  --messing:#A66B10; --warn:#9A6700; --ok:#1A7F37; --danger:#B3261E;
  --font-display:"Archivo",system-ui,sans-serif;
  --font-body:"Source Sans 3",system-ui,sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,monospace;
}
*{margin:0;padding:0;box-sizing:border-box}
body{
  background:var(--paper);color:var(--ink);font-family:var(--font-body);
  font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;
}
.wrap{max-width:760px;margin:0 auto;padding:0 24px}
.wrap-wide{max-width:900px;margin:0 auto;padding:0 24px}

header.topbar{border-bottom:1px solid var(--line);background:var(--paper)}
.topbar-inner{display:flex;align-items:center;justify-content:space-between;height:64px;max-width:900px;margin:0 auto;padding:0 24px}
.wordmark{font-family:var(--font-display);font-variation-settings:"wdth" 118,"wght" 700;letter-spacing:.02em;font-size:17px;text-transform:uppercase;color:var(--ink);text-decoration:none;display:flex;align-items:center;gap:9px}
.wordmark .dot{width:10px;height:10px;background:var(--werkgruen);display:inline-block}

main{padding:48px 0 96px}

.kicker{font-family:var(--font-mono);font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft);display:flex;align-items:center;gap:10px;margin-bottom:20px}
.kicker::before{content:"";width:22px;height:2px;background:var(--messing);display:inline-block}

h1{font-family:var(--font-display);font-variation-settings:"wdth" 112,"wght" 680;font-size:38px;line-height:1.12;letter-spacing:-.01em;margin-bottom:16px}
h2{font-family:var(--font-display);font-variation-settings:"wdth" 112,"wght" 660;font-size:26px;line-height:1.2;margin-bottom:12px}
h3{font-family:var(--font-display);font-variation-settings:"wdth" 112,"wght" 650;font-size:19px;margin-bottom:8px}
p.lead{font-size:18px;line-height:1.6;color:var(--ink-soft);max-width:60ch;margin-bottom:8px}
p{max-width:62ch}

/* ---------- Fortschrittsanzeige ---------- */
.progress-wrap{margin:32px 0 40px}
.progress-track{height:6px;background:var(--line);border-radius:3px;overflow:hidden}
.progress-fill{height:100%;background:var(--werkgruen);border-radius:3px;transition:width .25s ease}
.progress-label{font-family:var(--font-mono);font-size:12px;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-faint);margin-top:10px;display:flex;justify-content:space-between}

/* ---------- Frage-Karte ---------- */
.frage-card{background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--werkgruen);border-radius:6px;box-shadow:0 1px 2px rgb(0 0 0 / .04);padding:32px;margin-bottom:24px}
.frage-block-label{font-family:var(--font-mono);font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--messing);margin-bottom:14px;display:block}
.frage-text{font-size:21px;font-family:var(--font-display);font-variation-settings:"wdth" 110,"wght" 620;line-height:1.32;margin-bottom:10px}
.frage-help{font-size:14.5px;color:var(--ink-faint);margin-bottom:24px;line-height:1.5}

/* Slider */
.slider-row{margin-top:8px}
input[type="range"]{width:100%;height:6px;border-radius:3px;background:var(--line);appearance:none;-webkit-appearance:none;outline:none}
input[type="range"]::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:22px;height:22px;border-radius:50%;background:var(--werkgruen);border:3px solid var(--surface);box-shadow:0 0 0 1px var(--line);cursor:pointer}
input[type="range"]::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:var(--werkgruen);border:3px solid var(--surface);box-shadow:0 0 0 1px var(--line);cursor:pointer}
.slider-value{font-family:var(--font-mono);font-size:24px;color:var(--werkgruen);font-variant-numeric:tabular-nums;margin-top:14px;display:block}
.slider-scale{display:flex;justify-content:space-between;font-size:12.5px;color:var(--ink-faint);margin-top:6px}

/* Choice */
.choice-list{display:flex;flex-direction:column;gap:10px;margin-top:4px}
.choice-option{display:flex;align-items:center;gap:14px;border:1.5px solid var(--line);border-radius:5px;padding:14px 16px;cursor:pointer;transition:border-color .15s,background .15s}
.choice-option:hover{border-color:var(--ink-soft)}
.choice-option.selected{border-color:var(--werkgruen);background:var(--werkgruen-tint)}
.choice-option input{accent-color:var(--werkgruen);width:18px;height:18px;flex-shrink:0}
.choice-option label{font-size:16px;color:var(--ink);cursor:pointer;flex:1}

/* Nav-Buttons */
.frage-nav{display:flex;justify-content:space-between;align-items:center;margin-top:8px}
.btn-primary{background:var(--werkgruen);color:#fff;font-weight:600;font-size:16px;padding:0 26px;height:48px;display:inline-flex;align-items:center;gap:8px;border-radius:3px;border:none;cursor:pointer;font-family:var(--font-body)}
.btn-primary:hover{background:var(--werkgruen-dark)}
.btn-primary:disabled{background:var(--line);color:var(--ink-faint);cursor:not-allowed}
.btn-ghost{border:1.5px solid var(--ink);color:var(--ink);font-weight:600;font-size:16px;padding:0 22px;height:48px;display:inline-flex;align-items:center;border-radius:3px;background:transparent;cursor:pointer;font-family:var(--font-body)}
.btn-ghost:hover{background:var(--ink);color:var(--paper)}
.btn-ghost:disabled{opacity:.35;cursor:not-allowed}

/* ---------- Start-Screen ---------- */
.start-screen{padding:64px 0}
.start-meta{display:flex;gap:24px;margin-top:32px;flex-wrap:wrap}
.meta-item{font-family:var(--font-mono);font-size:12.5px;color:var(--ink-soft);display:flex;align-items:center;gap:8px}
.meta-item .n{color:var(--werkgruen);font-weight:600}

/* ---------- Report ---------- */
.report-header{border-bottom:1px solid var(--line);padding-bottom:28px;margin-bottom:32px}
.report-badge-row{display:flex;gap:10px;align-items:center;margin-bottom:18px;flex-wrap:wrap}
.badge{font-family:var(--font-mono);font-size:11px;letter-spacing:.07em;text-transform:uppercase;border:1px solid var(--messing);color:var(--messing);padding:3px 8px;border-radius:2px;display:inline-block}
.badge-neutral{border-color:var(--ink-faint);color:var(--ink-soft)}
.profil-name{font-family:var(--font-display);font-variation-settings:"wdth" 110,"wght" 690;font-size:32px;line-height:1.15}
.profil-kicker{font-size:16px;color:var(--werkgruen);font-weight:600;margin:6px 0 16px}
.profil-kurz{font-size:17px;color:var(--ink-soft);max-width:62ch}

.report-section{margin-bottom:40px}
.section-num{font-family:var(--font-mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-faint);border-top:1px solid var(--line);padding-top:10px;margin-bottom:18px;display:block}

/* Zeitfresser-Ranking */
.ranking-item{display:flex;align-items:baseline;gap:16px;padding:14px 0;border-bottom:1px dashed var(--line)}
.ranking-item:last-child{border-bottom:none}
.ranking-platz{font-family:var(--font-mono);font-size:20px;color:var(--werkgruen);font-weight:600;width:28px;flex-shrink:0}
.ranking-text{font-size:16px;color:var(--ink)}
.ranking-stunden{font-family:var(--font-mono);font-size:13px;color:var(--ink-faint);display:block;margin-top:2px}

/* Fachwissen-Kapitel */
.wissen-kapitel{background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:22px 24px;margin-bottom:16px}
.wissen-kapitel h3{color:var(--ink)}
.wissen-kapitel p{font-size:15.5px;color:var(--ink-soft);line-height:1.6}

/* 30-Tage-Plan */
.plan-step{display:flex;gap:14px;padding:14px 0;border-bottom:1px dashed var(--line)}
.plan-step:last-child{border-bottom:none}
.plan-n{font-family:var(--font-mono);font-size:13px;color:var(--werkgruen);flex-shrink:0;padding-top:2px}
.plan-text{font-size:16px;color:var(--ink)}

/* Guardrail-Kasten (Design-System §6) */
.guardrail{border-left:3px solid var(--warn);background:var(--paper);padding:18px 22px;border-radius:0 6px 6px 0;margin-bottom:8px;border-top:1px solid var(--line);border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.guardrail .label{font-family:var(--font-mono);font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--warn);margin-bottom:8px;display:block}
.guardrail p{font-size:15px;color:var(--ink-soft)}

/* Zahlen-Nachweis-Muster */
.rechnung{font-family:var(--font-mono);font-size:13px;color:var(--ink-faint);margin-top:4px}

/* Capture-Hook */
.capture-box{background:var(--werkgruen-tint);border:1px solid var(--werkgruen);border-radius:6px;padding:28px 28px;margin:8px 0 40px}
.capture-box h3{color:var(--ink);margin-bottom:8px}
.capture-box p{font-size:15px;color:var(--ink-soft);margin-bottom:18px}
.capture-form{display:flex;gap:10px;flex-wrap:wrap}
.capture-form input[type="email"]{flex:1;min-width:220px;height:48px;border:1.5px solid var(--line);border-radius:3px;padding:0 16px;font-size:16px;font-family:var(--font-body);background:var(--surface)}
.capture-form input[type="email"]:focus{outline:none;border-color:var(--werkgruen)}
.capture-status{font-size:14px;margin-top:12px;display:none}
.capture-status.visible{display:block}
.capture-status.ok{color:var(--ok)}
.capture-status.err{color:var(--danger)}
.capture-skip{margin-top:14px;font-size:13.5px;color:var(--ink-faint)}
.capture-skip a{color:var(--ink-soft)}
/* Honeypot-Feld, fuer echte Nutzer unsichtbar */
.hp-field{position:absolute;left:-9999px;top:-9999px}

.report-actions{display:flex;gap:14px;margin-top:8px;flex-wrap:wrap}

.disclaimer{border-top:1px solid var(--line);margin-top:56px;padding-top:20px;font-size:13.5px;color:var(--ink-faint);line-height:1.6}

/* ---------- Screens ein-/ausblenden ---------- */
.screen{display:none}
.screen.active{display:block}

/* ---------- Print (Report muss druckbar sein) ---------- */
@media print{
  header.topbar,.frage-nav,.capture-box,.report-actions,.btn-ghost,.btn-primary{display:none !important}
  body{background:#fff}
  .wrap,.wrap-wide{max-width:none;padding:0}
  .wissen-kapitel,.guardrail{break-inside:avoid;border-color:#999}
  a{color:inherit;text-decoration:none}
}

@media (max-width:640px){
  .wrap,.wrap-wide{padding:0 18px}
  h1{font-size:28px}
  .frage-card{padding:22px}
  .frage-text{font-size:18px}
  .capture-form{flex-direction:column}
  .capture-form input[type="email"]{width:100%}
  .frage-nav{flex-direction:column-reverse;gap:12px;align-items:stretch}
  .frage-nav .btn-primary,.frage-nav .btn-ghost{width:100%;justify-content:center}
}