*{box-sizing:border-box}body{margin:0;background:radial-gradient(circle at 20% 0,#271012,#050607 35%,#020303);color:#f4f0ea;font-family:Inter,Segoe UI,Arial,sans-serif}button,input,select,textarea{font:inherit}button{cursor:pointer}.hidden{display:none!important}.login{min-height:100vh;display:grid;place-items:center;padding:20px}.login-card{width:min(430px,100%);background:linear-gradient(180deg,rgba(255,255,255,.1),rgba(255,255,255,.04));border:1px solid rgba(255,255,255,.12);border-radius:30px;padding:32px}.login-card img{width:230px}.login-card h1{font-size:48px;margin:8px 0 16px}.login-card input,.login-card button{width:100%;margin-top:10px}.app{display:grid;grid-template-columns:280px 1fr;min-height:100vh}aside{position:sticky;top:0;height:100vh;padding:22px;background:#050607;border-right:1px solid rgba(255,255,255,.12);display:flex;flex-direction:column;gap:10px}aside img{width:210px;margin-bottom:18px}.nav,.ghost{border:1px solid transparent;background:transparent;color:#ddd;text-align:left;padding:14px 16px;border-radius:16px;font-weight:900}.nav:hover,.ghost:hover{background:rgba(255,255,255,.06)}.nav.active{background:linear-gradient(135deg,#d71920,#8e0d12);color:white}.ghost{border-color:rgba(255,255,255,.12)}main{padding:28px;min-width:0}header{display:flex;justify-content:space-between;align-items:center;margin-bottom:22px}h2{font-size:52px;line-height:.95;margin:0;background:linear-gradient(135deg,#f2ece4,#c9b7a5 70%,#ff4b52);-webkit-background-clip:text;color:transparent}h3{font-size:30px;margin:0 0 18px}h4{margin:24px 0 12px}.eyebrow{color:#d8c5b5;text-transform:uppercase;letter-spacing:.18em;font-size:11px;font-weight:900}.btn{border:0;border-radius:999px;padding:13px 18px;font-weight:950;color:white}.primary{background:linear-gradient(135deg,#d71920,#920d12)}.white{background:white;color:#050607}.page{display:none}.page.active{display:block}.panel{border:1px solid rgba(255,255,255,.12);border-radius:28px;background:linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,.035));padding:24px;box-shadow:0 25px 70px rgba(0,0,0,.28)}.panel-head{display:flex;justify-content:space-between;gap:14px}.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:18px}.stats div{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:22px;padding:20px}.stats span{color:#a9adb1}.stats b{display:block;font-size:30px;color:#f3dcc8;margin-top:7px}.grid2,.two{display:grid;grid-template-columns:1fr 1fr;gap:14px}.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.layout{display:grid;grid-template-columns:1.05fr .75fr;gap:18px;align-items:start}.preview{position:sticky;top:24px}.invoice-form{overflow:auto}label{display:grid;gap:7px;margin:10px 0;color:#cfd4d7;font-weight:800}input,select,textarea,.search{width:100%;border:1px solid rgba(255,255,255,.12);background:#090b0d;color:white;border-radius:15px;padding:13px;outline:none}input:focus,select:focus,textarea:focus,.search:focus{border-color:#ff3138}.add-service-row{display:grid;grid-template-columns:1fr auto auto;gap:10px;align-items:center}table{width:100%;border-collapse:separate;border-spacing:0 9px}th{text-align:left;color:#a9adb1;font-size:13px}td{background:rgba(0,0,0,.23);padding:8px}td:first-child{border-radius:14px 0 0 14px}td:last-child{border-radius:0 14px 14px 0}.remove{background:#360d10;color:white;border:1px solid rgba(255,255,255,.12);border-radius:12px;padding:10px}.totals{margin-top:18px;background:rgba(215,25,32,.1);border:1px solid rgba(255,49,56,.25);border-radius:20px;padding:15px}.totals p{display:flex;justify-content:space-between}.grand{font-size:22px;font-weight:900;border-top:1px solid rgba(255,255,255,.16);padding-top:10px}.actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}.cards{display:grid;gap:12px}.card{border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.045);border-radius:18px;padding:15px;display:flex;justify-content:space-between;gap:12px;align-items:center}.card span{color:#a9adb1;font-size:14px}.card b{display:block}.card .act{display:flex;gap:8px;flex-wrap:wrap}.icon{border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.06);color:white;border-radius:12px;padding:9px 11px}.danger{background:#381013!important}.search{margin:0 0 16px}

.paper{background:white;color:#111;width:794px;max-width:100%;min-height:1123px;padding:72px 72px 42px;border-radius:0;box-shadow:0 35px 100px rgba(0,0,0,.48);font-family:Arial,Helvetica,sans-serif}.top{display:grid;grid-template-columns:1fr 1.1fr;gap:65px;margin-bottom:78px}.kunde{padding-top:82px}.kunde b,.fahrzeug>b{display:block;color:#8b1a1a;font-size:14px;margin-bottom:7px}.kunde p{margin:0;line-height:1.45;font-size:14px}.fahrzeug img{display:block;width:250px;height:auto;object-fit:contain;margin:0 0 28px auto;background:transparent}.vgrid{display:grid;grid-template-columns:108px 1fr;gap:5px 10px;font-size:14px;line-height:1.15}.vgrid em{font-style:normal}.titleBlock{margin-bottom:12px}.titleBlock h1{color:#111;font-size:25px;margin:0 0 24px;letter-spacing:-.03em}.titleBlock p{font-size:14px;margin:0 0 10px;line-height:1.35}.sample{width:100%;border-collapse:collapse;border-spacing:0;color:#111;font-size:14px}.sample th{background:#54514a;color:#fff;padding:3px 7px;font-size:13px;line-height:1.15}.sample th:nth-child(1){width:36px}.sample th:nth-child(3){width:90px;text-align:center}.sample th:nth-child(4),.sample th:nth-child(5){width:120px;text-align:right}.sample td{background:white!important;color:#111;border:0;padding:4px 7px;height:22px;border-radius:0!important;vertical-align:top}.sample td:nth-child(1){text-align:right}.sample td:nth-child(3){text-align:center}.sample td:nth-child(4),.sample td:nth-child(5){text-align:right}.totalLine{display:grid;grid-template-columns:1fr auto auto;gap:35px;margin-top:8px;font-size:14px;align-items:center}.totalLine span{grid-column:2;font-weight:700}.totalLine b{grid-column:3;font-size:16px;text-decoration:underline}.payLine{display:grid;grid-template-columns:1fr 1.6fr;gap:20px;margin:24px 0 26px;font-size:14px;padding:0 32px}.payLine em{font-style:normal}.thanks{text-align:center;color:#8b1a1a;font-size:15px;line-height:1.45;margin:0 0 34px}.sign{display:grid;grid-template-columns:1fr 1fr;gap:62px;margin:0 0 30px}.sign span{display:block;font-size:14px;margin-bottom:70px}.sign i{display:block;border-bottom:2px solid #111;height:1px}.foot{display:flex;justify-content:space-between;align-items:flex-end;font-size:10.5px;line-height:1.35;margin-top:16px}.foot p{margin:0}.foot p:last-child{text-align:right}
@media(max-width:1100px){.app{grid-template-columns:1fr}aside{position:relative;height:auto}.layout,.grid2,.two{grid-template-columns:1fr}.stats{grid-template-columns:repeat(2,1fr)}.preview{position:relative;top:auto}}@media(max-width:700px){main{padding:16px}.grid3,.add-service-row,.stats{grid-template-columns:1fr}.top{grid-template-columns:1fr;gap:25px;margin-bottom:40px}.kunde{padding-top:0}.fahrzeug img{margin-left:0}header{display:block}h2{font-size:38px}.paper{padding:34px 24px}}@media print{body{background:white}.paper{box-shadow:none!important}}


/* Bedienbarkeit Rechnung erstellen verbessern */
.easy-invoice-form {
  overflow: visible !important;
}

.form-card {
  border: 1px solid rgba(255,255,255,.11);
  background: rgba(255,255,255,.045);
  border-radius: 22px;
  padding: 18px;
  margin: 18px 0;
}

.form-card-title {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

.form-card-title span {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: #d71920;
  color: #fff;
  font-weight: 900;
}

.form-card-title h4 {
  margin: 0;
  font-size: 19px;
}

.relaxed-grid {
  gap: 16px !important;
}

.relaxed-grid label {
  margin: 0 !important;
}

.easy-invoice-form input,
.easy-invoice-form select,
.easy-invoice-form textarea {
  min-height: 48px;
}

.better-service-row {
  grid-template-columns: minmax(260px, 1fr) auto auto !important;
  align-items: stretch !important;
  margin-bottom: 14px;
}

.table-scroll {
  width: 100%;
  overflow-x: auto;
  border-radius: 18px;
}

.table-scroll table {
  min-width: 760px;
}

.layout {
  grid-template-columns: minmax(620px, 1fr) minmax(520px, .85fr) !important;
  align-items: start;
}

.preview {
  overflow-x: auto;
}

.panel-head {
  align-items: center;
}

@media(max-width: 1250px) {
  .layout {
    grid-template-columns: 1fr !important;
  }

  .preview {
    position: relative !important;
    top: auto !important;
  }
}

@media(max-width: 820px) {
  .grid3,
  .grid2,
  .better-service-row {
    grid-template-columns: 1fr !important;
  }

  .form-card {
    padding: 14px;
  }
}

.fahrzeug img {
  width: 250px !important;
  height: auto !important;
  max-height: 82px !important;
  object-fit: contain !important;
}


/* Logo grösser und ohne Verzerrung */
.fahrzeug img,
.preview .fahrzeug img {
  width: 310px !important;
  max-width: 100% !important;
  height: auto !important;
  max-height: 96px !important;
  object-fit: contain !important;
  object-position: center !important;
}

.login-card img {
  width: 270px !important;
  height: auto !important;
  object-fit: contain !important;
}

aside img {
  width: 245px !important;
  height: auto !important;
  object-fit: contain !important;
}

/* Fahrzeugfelder klarer */
#vehicles .grid2,
#vehicles form {
  gap: 14px;
}

/* finale Logo Korrektur */
.fahrzeug img, .preview .fahrzeug img, aside img, .login-card img {
  height: auto !important;
  object-fit: contain !important;
  background: transparent !important;
}
.fahrzeug img, .preview .fahrzeug img {
  width: 300px !important;
  max-height: none !important;
}


/* Finale PDF Sichtbarkeitskorrektur */
.paper{
  overflow: hidden !important;
}

.sign{
  margin-bottom: 18px !important;
}

.foot{
  margin-top: 10px !important;
}

/* Endgültige PDF/Vorschau Korrektur */
.paper .fahrzeug img,
.preview .fahrzeug img {
  width: 285px !important;
  height: auto !important;
  object-fit: contain !important;
  max-height: none !important;
}

.sample td {
  height: 21px !important;
}

.sign {
  margin-top: 26px !important;
  margin-bottom: 22px !important;
}

.foot {
  margin-top: 10px !important;
}


/* Mehr weisser Abstand unten */
.paper{
  padding-bottom: 70px !important;
}

.sign{
  margin-bottom: 34px !important;
}

.foot{
  margin-top: 18px !important;
}


/* Webseite: roter Dankestext höher und ohne Überschneidung */
.thanks {
  margin-top: 10px !important;
  margin-bottom: 42px !important;
  line-height: 1.38 !important;
}

.sign {
  margin-top: 0 !important;
  margin-bottom: 34px !important;
}

.foot {
  margin-top: 18px !important;
}

/* MwSt. wird nicht mehr angezeigt */
#tax, #taxAmount {
  display: none !important;
}
.totals p:has(#tax),
.totals p:has(#taxAmount) {
  display: none !important;
}


/* Services Suche */
#serviceSearch {
  margin-bottom: 16px;
}

/* PDF Original Layout Korrektur */
.fahrzeug img,
.preview .fahrzeug img {
  width: 250px !important;
  height: auto !important;
  object-fit: contain !important;
}
.danger{
  background:#3a0d10!important;
  color:#fff!important;
  border-color:rgba(255,80,80,.35)!important;
}


/* Dokumenttyp Auswahl */
#docType{
  font-weight:800;
}
@media(min-width:900px){
  .invoice-form .grid3:has(#docType){
    grid-template-columns:repeat(4,1fr);
  }
}


/* Filter für Rechnungen */
.invoice-filter-row{
  display:grid;
  grid-template-columns:minmax(260px,1fr) 220px;
  gap:12px;
  margin-bottom:16px;
}
.invoice-filter-row .search{
  margin:0 !important;
}
.doc-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-right:8px;
  padding:4px 9px;
  border-radius:999px;
  font-size:11px;
  font-weight:900;
  letter-spacing:.03em;
  background:rgba(255,255,255,.12);
  color:#fff;
}
.doc-badge.rechnung{
  background:rgba(215,25,32,.22);
  color:#ffb9bd;
}
.doc-badge.offerte{
  background:rgba(255,184,77,.18);
  color:#ffd89a;
}
.doc-badge.quittung{
  background:rgba(90,220,150,.18);
  color:#a9ffd1;
}
@media(max-width:700px){
  .invoice-filter-row{
    grid-template-columns:1fr;
  }
}
\n\n/* Vorschau entspricht dem neuen PDF-Format */\n.ref-paper{position:relative;padding:58px 48px 48px!important;min-height:1123px!important;font-family:Arial,Helvetica,sans-serif!important;color:#1c1c1c!important}\n.ref-head{display:flex;justify-content:space-between;align-items:flex-start;height:190px}.ref-head img{width:310px!important;height:auto!important;object-fit:contain!important;margin:-55px -6px 0 0!important}.ref-contact{font-size:12px;line-height:1.35;padding-top:20px}.ref-contact b,.ref-contact span{display:block}.ref-customer{position:absolute;top:162px;left:445px;width:290px;font-size:13px;line-height:1.35}.ref-customer small{display:block;font-size:9px;color:#555;margin-bottom:8px;white-space:nowrap}.ref-customer p{margin:0}.ref-meta{position:relative;margin-top:2px;margin-bottom:14px}.ref-meta h1{font-size:22px;margin:0 0 9px;font-weight:800}.ref-meta p{font-size:13px;margin:3px 0}.ref-meta>b{position:absolute;right:0;bottom:0;font-size:12px}.ref-vehicle{background:#ebebe9;border-radius:7px;padding:12px 13px;display:grid;grid-template-columns:1fr 1fr 1.15fr;gap:20px;font-size:12px;margin-bottom:18px}.ref-vehicle>div{display:grid;grid-template-columns:auto 1fr;gap:7px 9px}.ref-vehicle b{font-weight:700}.ref-intro{font-size:13px;margin:0 0 14px}.ref-table{font-size:12px!important}.ref-table th{background:#4c4a45!important;padding:7px 8px!important;font-size:12px!important}.ref-table td{padding:5px 8px!important;height:auto!important;border:0!important}.ref-table th:nth-child(1){width:48px}.ref-table th:nth-child(3){width:75px}.ref-table th:nth-child(4),.ref-table th:nth-child(5){width:115px}.ref-sums{width:365px;margin:18px 0 0 auto;border-top:1.5px solid #333;padding-top:7px;font-size:13px}.ref-sums>div{display:flex;justify-content:space-between;padding:5px 7px}.ref-sums b{font-weight:400}.ref-sums .ref-grand{border-top:1.5px solid #333;margin-top:2px;padding-top:9px;font-size:15px;font-weight:800}.ref-sums .ref-grand b{font-weight:800}.ref-thanks{position:absolute;left:48px;bottom:112px;font-size:12px}.ref-thanks strong{display:block;margin-top:8px;color:#841a1a}.ref-foot{position:absolute;left:48px;right:48px;bottom:40px;border-top:1px solid #aaa;padding-top:8px;display:flex;justify-content:space-between;font-size:9px;line-height:1.35;color:#444}.ref-foot p{margin:0}.ref-foot p:last-child{text-align:right}\n
/* Vorschau: A4-Layout 1:1 wie PDF, nur proportional verkleinert */
.preview{overflow:hidden!important;}
.preview #paper.ref-paper{
  width:794px!important;
  max-width:none!important;
  min-width:794px!important;
  height:1123px!important;
  min-height:1123px!important;
  transform-origin:top left!important;
}

/* Finale Vorschau-Logo-Korrektur: exakt wie die PDF-Platzierung */
.preview #paper.ref-paper .ref-head img{
  position:absolute!important;
  left:420px!important;
  top:-19px!important;
  width:310px!important;
  height:211px!important;
  max-width:none!important;
  object-fit:contain!important;
  margin:0!important;
}

/* Bemerkung in der A4-Vorschau */
.ref-notes{margin:16px 390px 0 0;font-size:12px;line-height:1.4;white-space:pre-wrap}.ref-notes b{display:block;margin-bottom:4px}.ref-notes span{display:block}

.ref-payment{width:365px;margin:9px 0 0 auto;padding:0 7px;font-size:12px;color:#1c1c1c;display:flex;justify-content:space-between;box-sizing:border-box}.ref-payment b{margin-right:10px}

/* Zahlungsart wie vom Kunden markiert: links unter dem Leistungs-/Summenbereich */
.ref-payment{width:auto!important;margin:22px 0 0 0!important;padding:0!important;font-size:12px!important;color:#1c1c1c!important;display:block!important;text-align:left!important}.ref-payment b{margin-right:14px!important}.ref-payment span{white-space:normal!important}

/* Kundenwünsche: Anrede, Zahlungsfrist und Dokumentvorschau */
.ref-customer .customer-caption{display:block;font-size:13px;margin-bottom:8px;font-weight:700}
.ref-vehicle>div:first-child{grid-template-columns:100px minmax(0,1fr)}
.payment-term-option{display:flex!important;align-items:center;gap:10px;margin-bottom:12px;font-size:14px}
.payment-term-option input{width:auto!important;flex:0 0 auto}
.ref-notes{white-space:pre-wrap}