/* ===== MotoTechLab – Kaufvertrag Tool (scoped) ===== */
.mtl-kaufvertrag{
  --mtl-blue:#0a4aa6; --ink:#0f172a; --line:#e5e7eb; --bg:#f8fafc; --muted:#475569;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  max-width:980px; margin:2rem auto; padding:1.5rem;
  background:var(--bg); border:1px solid var(--line); border-radius:16px; color:var(--ink);
}
.mtl-kaufvertrag .mtl-kv-head h1{color:var(--mtl-blue); margin:.2rem 0 1rem; font-size:clamp(1.6rem,3.2vw,2.1rem)}
.mtl-kaufvertrag h2{margin:1.2rem 0 .6rem; font-size:1.1rem}
.mtl-kaufvertrag .helper{color:var(--muted); margin:.25rem 0 .75rem}
.mtl-kaufvertrag .helper.subtle{margin-top:.6rem}

.mtl-kaufvertrag label{display:block; font-weight:650; margin:.55rem 0 .25rem}
.mtl-kaufvertrag input, .mtl-kaufvertrag textarea, .mtl-kaufvertrag select{
  width:100%; padding:.62rem .68rem; border:1px solid var(--line);
  border-radius:12px; font-size:.96rem; background:#fff; outline:none;
}
.mtl-kaufvertrag input:focus, .mtl-kaufvertrag textarea:focus, .mtl-kaufvertrag select:focus{
  border-color:rgba(10,74,166,.45);
  box-shadow:0 0 0 4px rgba(10,74,166,.10);
}
.mtl-kaufvertrag textarea{min-height:92px; resize:vertical}

.mtl-kaufvertrag .mtl-kv-card{
  background:#fff; border:1px solid var(--line); border-radius:16px; padding:1rem; margin-top:.85rem;
  box-shadow:0 6px 18px rgba(15,23,42,.04);
}
.mtl-kaufvertrag .grid{display:grid; grid-template-columns:1fr 1fr; gap:1rem}
.mtl-kaufvertrag .grid3{display:grid; grid-template-columns:1fr 1fr 1fr; gap:1rem}

.mtl-kaufvertrag .row{display:flex; flex-wrap:wrap; gap:14px; align-items:flex-end; margin-top:.6rem}
.mtl-kaufvertrag .datewrap{min-width:220px; flex:1}
.mtl-kaufvertrag .checkline{display:flex; gap:.6rem; align-items:flex-start; margin:.35rem 0}
.mtl-kaufvertrag .checkline input{width:auto; margin-top:.18rem}
.mtl-kaufvertrag .checkline span{font-weight:600}

.mtl-kaufvertrag .mtl-kv-btnbar{display:flex; flex-wrap:wrap; gap:.6rem; margin-top:1rem}
.mtl-kaufvertrag .btn{
  border:1px solid var(--line);
  padding:.78rem 1.05rem;
  border-radius:14px;
  cursor:pointer;
  font-size:1rem;
  background:#fff;
  transition:transform .04s ease, box-shadow .12s ease, border-color .12s ease;
}
.mtl-kaufvertrag .btn:active{transform:translateY(1px)}
.mtl-kaufvertrag .btn.primary{background:var(--mtl-blue); color:#fff; border-color:transparent}
.mtl-kaufvertrag .btn.secondary{background:#334155; color:#fff; border-color:transparent}
.mtl-kaufvertrag .btn.ghost{background:#fff; color:var(--ink)}
.mtl-kaufvertrag .btn:hover{box-shadow:0 10px 20px rgba(15,23,42,.08); border-color:rgba(15,23,42,.18)}

.mtl-kaufvertrag .mtl-kv-preview{
  margin-top:1.1rem;
  background:#fff;
  border:1px solid var(--line);
  border-radius:16px;
  padding:1rem;
}
.mtl-kaufvertrag .mtl-kv-preview h3{
  margin:.1rem 0 .6rem;
  color:var(--mtl-blue);
  font-size:1.05rem;
}
.mtl-kaufvertrag .mtl-kv-preview .small{color:var(--muted); font-size:.92rem}
.mtl-kaufvertrag .mtl-kv-preview .line{border-top:1px solid var(--line); margin:.9rem 0}

/* ===== Print/PDF – Clean A4 layout ===== */
@page{ size:A4; margin:14mm; }

@media print{
  body *{visibility:hidden !important}
  .mtl-kaufvertrag .mtl-kv-print,
  .mtl-kaufvertrag .mtl-kv-print *{visibility:visible !important}
  .mtl-kaufvertrag .mtl-kv-print{
    position:absolute; left:0; top:0; width:100%;
    font-family:Arial, Helvetica, sans-serif;
    color:#000; background:#fff;
  }

  .mtl-kv-print .p-head{border-bottom:2px solid #000; margin-bottom:10px; padding-bottom:6px}
  .mtl-kv-print .p-title{font-size:16pt; font-weight:700; margin:0}
  .mtl-kv-print .p-sub{font-size:10pt; margin:2px 0 0 0}
  .mtl-kv-print .p-meta{font-size:10pt; margin-top:6px; display:flex; gap:18px; flex-wrap:wrap}
  .mtl-kv-print .p-meta span{white-space:nowrap}

  .mtl-kv-print .p-section{margin-top:10px}
  .mtl-kv-print .p-h{font-size:11pt; font-weight:700; margin:0 0 6px 0; text-transform:uppercase; letter-spacing:.02em}
  .mtl-kv-print .p-grid2{display:grid; grid-template-columns:1fr 1fr; gap:10px}
  .mtl-kv-print .p-grid3{display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px}
  .mtl-kv-print .p-card{border:1px solid #000; padding:8px 10px; margin-top:6px}
  .mtl-kv-print .p-kv{font-size:10pt; line-height:1.35; margin:0}
  .mtl-kv-print .p-k{font-weight:700}
  .mtl-kv-print .p-v{display:block; margin-top:1px}
  .mtl-kv-print .p-text{font-size:10pt; line-height:1.35; margin:0}
  .mtl-kv-print .p-divider{border-top:1px solid #000; margin:10px 0}
  .mtl-kv-print .p-signgrid{display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:10px}
  .mtl-kv-print .p-line{border-top:1px solid #000; height:1px; margin-top:22px}
  .mtl-kv-print .p-slabel{font-size:10pt; margin-top:6px}
  .mtl-kv-print .p-foot{margin-top:10px; font-size:8.8pt; line-height:1.25}
}

/* Responsive */
@media (max-width:820px){
  .mtl-kaufvertrag .grid, .mtl-kaufvertrag .grid3{grid-template-columns:1fr}
}

/* ===== Print fixes: logo + strict pagination ===== */
@media print{
  /* show print container only when populated */
  .mtl-kv-print:empty{display:none !important}

  /* header with logo */
  .mtl-kv-print .p-head{
    display:flex;
    align-items:center;
    gap:12px;
  }
  .mtl-kv-print .p-head img.mtl-logo{
    height:42px;
    width:auto;
  }
  .mtl-kv-print .p-head .p-head-text{
    flex:1;
  }

  /* page control */
  .mtl-kv-print .page-break{
    page-break-before:always;
    break-before:page;
  }

  /* avoid accidental blank pages */
  .mtl-kv-print,
  .mtl-kv-print *{
    page-break-after:auto;
    page-break-before:auto;
  }
}

/* ===== Print overlay: prevents blank pages by removing all non-overlay DOM from print flow ===== */
@media print{
  body > *:not(#mtl-kv-print-overlay){
    display:none !important;
  }
  #mtl-kv-print-overlay{
    display:block !important;
    position:static !important;
    width:100% !important;
    background:#fff !important;
    color:#000 !important;
    font-family:Arial, Helvetica, sans-serif !important;
  }
}

/* ===== Print visibility hard-override (fix: blank output) ===== */
@media print{
  /* Some themes/plugins hide everything via visibility; force overlay visible */
  body *{ visibility:hidden !important; }
  #mtl-kv-print-overlay, #mtl-kv-print-overlay *{
    visibility:visible !important;
  }

  /* Keep only the overlay in the print flow */
  body > *:not(#mtl-kv-print-overlay){
    display:none !important;
  }
  #mtl-kv-print-overlay{
    display:block !important;
    position:static !important;
    width:100% !important;
    background:#fff !important;
    color:#000 !important;
    font-family:Arial, Helvetica, sans-serif !important;
  }
}