/* Tools / Lead-Magneten: Checklisten, Generatoren, Extraktor.
   Baut auf site.css auf. Alle Regeln liegen unter .tool, damit nichts auf andere Seiten durchschlägt. */

.tool .hero{max-width:900px;margin:0 auto;padding:clamp(48px,7vw,96px) var(--gut) clamp(28px,4vw,48px);text-align:center}
.tool .eyebrow{font-family:var(--f-label);font-weight:600;font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}
.tool .hero h1{font-family:var(--f-display);font-weight:600;font-size:clamp(40px,6vw,76px);line-height:.98;letter-spacing:-.01em;margin:14px 0 18px}
.tool .hero p{color:var(--ink-muted);font-size:clamp(17px,1.25vw,20px);max-width:62ch;margin:0 auto;text-wrap:pretty}
.tool .privacy{display:inline-flex;gap:8px;align-items:center;margin-top:20px;color:var(--accent);font-family:var(--f-label);font-weight:600;font-size:15px;letter-spacing:.03em}

.tool .tool-wrap{max-width:1120px;margin:0 auto;padding:0 var(--gut) clamp(56px,7vw,96px)}
.tool [hidden]{display:none!important}

/* Freischalt-Formular (E-Mail-Gate) */
.tool .gate{max-width:620px;margin:0 auto clamp(48px,7vw,90px);background:linear-gradient(135deg,rgba(94,181,224,.10),var(--surface));border:1px solid var(--accent);padding:clamp(22px,3vw,32px);width:calc(100% - 2*var(--gut))}
.tool .gate h2{font-family:var(--f-display);font-weight:600;font-size:clamp(28px,3vw,38px);line-height:1.02;margin:0 0 10px}
.tool .gate p{color:var(--ink-muted);margin:0 0 18px}
.tool .gate-row{display:flex;gap:10px;margin-top:8px}
.tool .gate-row input{flex:1;min-width:0}
.tool .gate .disclaimer{margin:20px 0 0;font-size:14px}
.tool .gate-error{display:none;color:#ff9b8f;font-size:15px;margin-top:12px}
.tool .gate-error.show{display:block}
@media (max-width:560px){.tool .gate-row{flex-direction:column}}

/* Formularelemente */
.tool label{display:block;font-family:var(--f-label);font-weight:600;font-size:14px;letter-spacing:.06em;color:var(--ink-muted);margin-bottom:7px}
.tool input,.tool textarea,.tool select{width:100%;background:var(--bg-2);border:1px solid var(--line-strong);color:var(--ink);font:inherit;font-size:17px;padding:12px 14px;border-radius:0}
.tool input::placeholder,.tool textarea::placeholder{color:var(--ink-subtle)}
.tool input:focus,.tool textarea:focus,.tool select:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent)}
.tool textarea{min-height:100px;resize:vertical}
.tool select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--ink-muted) 50%),linear-gradient(135deg,var(--ink-muted) 50%,transparent 50%);background-position:calc(100% - 20px) 55%,calc(100% - 14px) 55%;background-size:6px 6px;background-repeat:no-repeat;padding-right:38px}
.tool .grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.tool .field{display:flex;flex-direction:column}
.tool .field.full{grid-column:1/-1}
@media (max-width:760px){.tool .grid{grid-template-columns:1fr}.tool .field.full{grid-column:auto}}

/* Bereiche */
.tool .panel{background:var(--surface);border:1px solid var(--line-strong);padding:clamp(20px,2.4vw,28px);margin-bottom:20px}
.tool .panel h2{font-family:var(--f-display);font-weight:600;font-size:clamp(26px,2.4vw,32px);line-height:1.05;margin:0 0 18px}

/* Fortschritt */
.tool .progress-sticky{position:sticky;top:76px;z-index:8;background:rgba(7,10,20,.94);backdrop-filter:blur(14px);padding:14px 0 12px;margin-bottom:14px}
.tool .progress{display:flex;justify-content:space-between;color:var(--ink-muted);margin:0 0 10px;font-size:15px}
.tool .bar{height:6px;background:var(--surface-2)}
.tool .bar span{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--accent-2),var(--accent));transition:width .25s}

/* Checklisten */
.tool .checks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 18px}
.tool .check{display:flex;align-items:flex-start;gap:12px;padding:12px 14px;background:rgba(158,190,230,.05);border:1px solid transparent;font-weight:500;color:var(--ink);margin:0;font-family:var(--f-body);font-size:16px;letter-spacing:0;cursor:pointer}
.tool .check:hover{border-color:var(--line-strong)}
.tool .check input{width:20px;height:20px;accent-color:var(--accent);flex:0 0 auto;margin-top:3px;padding:0}
@media (max-width:760px){.tool .checks{grid-template-columns:1fr}}

/* Aktionsleiste */
.tool .actions{display:flex;gap:12px;align-items:center;justify-content:flex-end;position:sticky;bottom:16px;background:rgba(7,10,20,.94);backdrop-filter:blur(12px);padding:14px;border:1px solid var(--line-strong)}
.tool .status{margin-right:auto;color:var(--ink-muted);font-size:15px}
.tool .progress-bottom{font-family:var(--f-label);font-weight:600;font-size:15px;color:var(--accent);white-space:nowrap}
.tool .btn:disabled{opacity:.6;cursor:wait}
.tool .disclaimer{color:var(--ink-subtle);font-size:14px;margin:22px 0;text-wrap:pretty}
.tool .disclaimer a{color:var(--accent);text-underline-offset:3px}
@media (max-width:760px){.tool .actions{flex-wrap:wrap}.tool .status,.tool .progress-bottom{width:100%}.tool .actions .btn{flex:1;justify-content:center}}

/* 30-Tage-Checkliste (Hero mit Anmeldekarte, Wochenvorschau, Liste) */
.tool .hero-split{max-width:var(--max);text-align:left}
.tool .hero-split .hero-inner{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(28px,4vw,56px);align-items:start}
.tool .hero-split h1{font-size:clamp(38px,5vw,64px)}
.tool .hero-split .hero-sub{color:var(--ink-muted);font-size:clamp(17px,1.25vw,20px);max-width:56ch;margin:0 0 22px}
.tool .hero-split .hero-sub strong{color:var(--ink)}
.tool .bullets{list-style:none;display:flex;flex-direction:column;gap:10px;margin:0}
.tool .bullets li{display:flex;gap:12px;align-items:flex-start;color:var(--ink-muted);font-size:17px}
.tool .bullets .tick{color:var(--accent);font-weight:700;flex:none}
.tool .form-card{background:var(--surface);border:1px solid var(--line-strong);padding:clamp(22px,2.6vw,30px)}
.tool .form-card h2{font-family:var(--f-display);font-weight:600;font-size:clamp(26px,2.4vw,32px);line-height:1.05;margin:0 0 8px}
.tool .form-hint{color:var(--ink-muted);font-size:16px;margin:0 0 18px}
.tool .form-card .field{margin-bottom:14px}
.tool .form-card .btn{width:100%;justify-content:center;margin-top:6px}
.tool .form-error{display:none;color:#ff9b8f;font-size:15px;margin-top:12px}
.tool .form-error.show{display:block}
.tool .form-note{font-size:14px;color:var(--ink-subtle);margin-top:14px}
.tool .form-note a{color:var(--accent);text-underline-offset:3px}
.tool .success-box{display:none;text-align:center;padding:6px 0}
.tool .success-box.show{display:block}
.tool .success-box p{color:var(--ink-muted);margin:0 0 20px}
.tool .btn-ghost{width:auto}
@media (max-width:900px){.tool .hero-split .hero-inner{grid-template-columns:1fr}}

.tool .preview{max-width:var(--max);margin:0 auto;padding:0 var(--gut) clamp(32px,4vw,56px);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.tool .week-teaser{background:var(--surface);border:1px solid var(--line-strong);padding:18px 20px}
.tool .week-teaser .wk{font-family:var(--f-label);font-weight:600;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:8px}
.tool .week-teaser h3{font-family:var(--f-label);font-weight:600;font-size:18px;line-height:1.25;margin-bottom:6px}
.tool .week-teaser p{font-size:15px;color:var(--ink-muted);margin:0}
@media (max-width:900px){.tool .preview{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.tool .preview{grid-template-columns:1fr}}

.tool .checklist-section{display:none;border-top:1px solid var(--line);background:var(--bg-2);padding:clamp(40px,5vw,72px) var(--gut) clamp(48px,6vw,88px)}
.tool .checklist-section.unlocked{display:block}
.tool .checklist-inner{max-width:820px;margin:0 auto}
.tool .checklist-toolbar{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;margin-bottom:30px}
.tool .checklist-toolbar h2{font-family:var(--f-display);font-weight:600;font-size:clamp(30px,3vw,40px);line-height:1}
.tool .checklist-toolbar .progress{display:block;margin:6px 0 0;color:var(--accent);font-family:var(--f-label);font-weight:600}
.tool .week-block{margin-bottom:38px}
.tool .week-block h3{font-family:var(--f-display);font-weight:600;font-size:clamp(24px,2.2vw,30px);line-height:1.1;margin-bottom:6px;display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.tool .week-block h3 span{font-family:var(--f-label);font-weight:600;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
.tool .week-intro{color:var(--ink-muted);margin:0 0 16px}
.tool .check-list{list-style:none;display:flex;flex-direction:column;gap:8px}
.tool .check-list li label{display:flex;gap:12px;align-items:flex-start;cursor:pointer;background:var(--surface);border:1px solid var(--line);padding:14px 16px;margin:0;font-family:var(--f-body);font-size:16px;letter-spacing:0;color:var(--ink-muted);transition:border-color .2s}
.tool .check-list li label:hover{border-color:var(--accent)}
.tool .check-list input{margin-top:3px;accent-color:var(--accent);width:18px;height:18px;flex-shrink:0;padding:0}
.tool .check-list .txt{line-height:1.5}
.tool .check-list li.done .txt{text-decoration:line-through;color:var(--ink-subtle)}
.tool .cta-bottom{max-width:760px;margin:44px auto 0;padding:clamp(22px,3vw,32px);border:1px solid var(--accent);background:linear-gradient(135deg,rgba(94,181,224,.10),var(--surface));text-align:center}
.tool .cta-bottom h3{font-family:var(--f-display);font-weight:600;font-size:clamp(26px,2.4vw,32px);line-height:1.05;margin-bottom:10px}
.tool .cta-bottom p{color:var(--ink-muted);margin:0 0 20px}

/* Drucken: nur die Liste */
@media print{
  html,body{background:#fff!important;color:#000!important}
  .nv,.ft,.skip,#vd-cookie,#vd-fs,.tool .hero,.tool .preview,.tool .cta-bottom,.tool .checklist-toolbar .btn,.tool .actions{display:none!important}
  .tool .checklist-section{display:block!important;background:#fff;color:#000;padding:0;border:0}
  .tool .checklist-toolbar h2,.tool .week-block h3{color:#000}
  .tool .check-list li label{background:#fff;border-color:#bbb;color:#000;break-inside:avoid}
  .tool .week-intro,.tool .check-list li.done .txt{color:#333}
}

/* Leistungsnachweis-Generator: Karten, Logo, Zeilen, Unterschrift */
.tool .page-hero{max-width:var(--max-text);margin:0 auto;padding:clamp(40px,6vw,80px) var(--gut) clamp(20px,3vw,36px)}
.tool .page-hero .back-link{margin-bottom:22px}
.tool .page-hero h1{font-family:var(--f-display);font-weight:600;font-size:clamp(38px,5vw,64px);line-height:1;letter-spacing:-.01em;margin:12px 0 16px}
.tool .page-hero p{color:var(--ink-muted);font-size:clamp(17px,1.25vw,20px);text-wrap:pretty}
.tool .tool-wrap.narrow{max-width:820px}
.tool .card{background:var(--surface);border:1px solid var(--line-strong);padding:clamp(20px,2.4vw,30px);margin-bottom:20px}
.tool .card h2{font-family:var(--f-display);font-weight:600;font-size:clamp(24px,2.2vw,30px);line-height:1.05;margin-bottom:6px}
.tool .card .card-hint,.tool .company-locked-hint,.tool .upload-hint{font-size:15px;color:var(--ink-muted);margin-bottom:18px}
.tool .upload-hint{font-size:14px;color:var(--ink-subtle);margin:8px 0 0}
.tool .field-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
.tool .field{margin-bottom:16px}
@media (max-width:760px){.tool .field-grid{grid-template-columns:1fr}}
.tool .btn-secondary,.tool .btn-add-row{background:transparent;border:1px solid var(--line-strong);color:var(--ink);font-family:var(--f-label);font-weight:600;font-size:16px;letter-spacing:.03em;padding:11px 18px;cursor:pointer;display:inline-flex;align-items:center;gap:8px}
.tool .btn-secondary:hover,.tool .btn-add-row:hover{border-color:var(--accent);color:var(--accent)}
.tool .btn-add-row{border-style:dashed;color:var(--ink-muted)}
.tool .link-reset{font-size:14px;color:var(--ink-subtle);text-decoration:underline;text-underline-offset:3px;cursor:pointer;background:none;border:none;margin-left:auto;font-family:var(--f-body)}
.tool .link-reset:hover{color:var(--accent)}
.tool .card.company-locked .field input[readonly]{opacity:.85;cursor:default}
.tool .card.company-locked .upload-hint{display:none}
.tool .card.company-locked.company-locked-allow-logo .upload-hint{display:block}
.tool .card.company-locked.company-locked-allow-logo .link-reset{display:none}
.tool .company-locked-hint{display:none}
.tool .card.company-locked .company-locked-hint{display:block}
.tool .logo-upload{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding:8px;margin:-8px;border:1.5px dashed transparent;transition:border-color .15s,background .15s}
.tool .logo-upload.drag-over{border-color:var(--accent);background:rgba(94,181,224,.08)}
.tool .logo-wrap{position:relative;flex-shrink:0}
.tool .logo-preview{width:72px;height:72px;background:var(--bg-2);border:1px solid var(--line-strong);display:flex;align-items:center;justify-content:center;overflow:hidden}
.tool .logo-preview img{max-width:100%;max-height:100%;object-fit:contain}
.tool .logo-preview span{color:var(--ink-subtle);font-size:12px;text-align:center}
.tool .logo-remove-btn{position:absolute;top:-8px;right:-8px;width:22px;height:22px;border-radius:50%;background:var(--surface-2);border:1px solid var(--line-strong);color:var(--ink);display:none;align-items:center;justify-content:center;cursor:pointer;padding:0;font-size:15px;line-height:1}
.tool .logo-remove-btn:hover{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.tool .card.company-locked .logo-remove-btn{display:none!important}
.tool .card.company-locked .logo-upload{pointer-events:none;padding:0;margin:0}
.tool .card.company-locked.company-locked-allow-logo .logo-upload{pointer-events:auto;padding:8px;margin:-8px}
.tool .rows-wrap{display:flex;flex-direction:column;gap:12px;margin-bottom:12px}
.tool .row-item{display:grid;grid-template-columns:1fr 1fr auto;gap:12px;align-items:end}
.tool .row-item .field{margin-bottom:0}
.tool .btn-remove-row{background:var(--bg-2);border:1px solid var(--line-strong);color:var(--ink-muted);width:46px;height:46px;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:22px;line-height:1}
.tool .btn-remove-row:hover{border-color:#e07a6b;color:#e07a6b}
@media (max-width:760px){.tool .row-item{grid-template-columns:1fr}.tool .btn-remove-row{width:100%;height:42px}}
.tool canvas#sig-pad{width:100%;height:170px;background:#fff;border:1px solid var(--line-strong);touch-action:none;cursor:crosshair;display:block}
.tool .sig-actions{display:flex;justify-content:space-between;align-items:center;margin-top:10px}
.tool .sig-actions span{font-size:14px;color:var(--ink-subtle)}
.tool .info-note{border:1px solid var(--line-strong);background:var(--bg-2);padding:16px 20px;margin-bottom:20px;font-size:15px;color:var(--ink-muted)}
.tool .info-note strong{color:var(--ink)}
.tool .email-gate{display:none}
.tool .email-gate.on{display:block}
.tool .email-row{display:flex;gap:12px}
.tool .email-row input{flex:1}
.tool .cta-final{margin-top:8px}
.tool .btn-generate{width:100%;display:flex;align-items:center;justify-content:center;gap:10px;background:var(--accent);color:var(--accent-ink)!important;font-family:var(--f-label);font-weight:600;font-size:18px;letter-spacing:.04em;padding:16px 24px;border:0;cursor:pointer;transition:background .2s}
.tool .btn-generate:hover{background:#7CC6EA}
.tool .btn-generate:disabled{opacity:.5;cursor:not-allowed}
.tool .upsell-cta{margin-top:14px;text-align:center}
.tool .btn-outline-amber{width:100%;display:flex;align-items:center;justify-content:center;gap:10px;background:transparent;color:var(--accent);font-family:var(--f-label);font-weight:600;font-size:17px;letter-spacing:.03em;padding:14px 22px;border:1px solid var(--accent);text-decoration:none;transition:background .2s,color .2s}
.tool .btn-outline-amber:hover{background:var(--accent);color:var(--accent-ink)}
.toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%) translateY(12px);background:var(--surface-2);border:1px solid var(--line-strong);color:var(--ink);padding:14px 24px;font-size:15px;font-weight:600;box-shadow:0 10px 30px rgba(0,0,0,.5);opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;z-index:9500;max-width:calc(100% - 32px)}
.toast.on{opacity:1;transform:translateX(-50%) translateY(0)}
.toast.err{border-color:#e07a6b;color:#e07a6b}
.toast.ok{border-color:var(--accent);color:var(--accent)}

/* Informationsblock unter dem Werkzeug (Text, FAQ) */
.tool .tool-info{max-width:var(--max-text);margin:0 auto;padding:clamp(8px,2vw,24px) var(--gut) clamp(48px,6vw,88px)}
.tool .tool-info h2{margin-top:2em}
.tool .tool-info h2:first-child{margin-top:0}