/* KFZMaster – Frontend-Buchungswidget
 * Kompaktes, Amelia-nahes Layout. Bewusst self-contained & DSGVO-sicher:
 * keine externen Google-Fonts, Icons als Inline-SVG. Roboto wird selbst gehostet
 * (Apache-2.0, lokale woff2), sodass kein Besucher-IP an Dritte abfließt.
 */

@font-face{font-family:'Roboto';font-style:normal;font-weight:400;font-display:swap;
	src:local('Roboto'),local('Roboto-Regular'),url('../fonts/roboto-400.woff2') format('woff2')}
@font-face{font-family:'Roboto';font-style:normal;font-weight:500;font-display:swap;
	src:local('Roboto Medium'),local('Roboto-Medium'),url('../fonts/roboto-500.woff2') format('woff2')}
@font-face{font-family:'Roboto';font-style:normal;font-weight:700;font-display:swap;
	src:local('Roboto Bold'),local('Roboto-Bold'),url('../fonts/roboto-700.woff2') format('woff2')}

.kfzmb{
	--kfzb-primary:#E1121C;
	--kfzb-green:#019719;
	--kfzb-green-bd:#A9DDB4;
	--kfzb-green-bg:rgba(1,151,25,.06);
	--kfzb-ink:#0E1920;
	--kfzb-text:#1A2C37;
	--kfzb-muted:#5C728D;
	--kfzb-line:#E7E7E7;
	--kfzb-soft:#F0F1F2;
	--kfzb-disabled:#8C959A;
	--kfzb-disabled-bg:rgba(87,88,139,.05);
	--kfzb-font:'Roboto','Segoe UI',system-ui,-apple-system,Helvetica,Arial,sans-serif;
	display:flex;max-width:780px;height:600px;margin:0 auto;background:#fff;
	border:1px solid #ededed;border-radius:14px;overflow:hidden;
	box-shadow:0 10px 34px rgba(14,25,32,.10);
	font-family:var(--kfzb-font);color:var(--kfzb-text);
	font-size:14px;line-height:1.45;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
.kfzmb *{box-sizing:border-box}
.kfzmb button{font-family:inherit}

/* ── Sidebar ── */
.kfzmb-side{background:var(--kfzb-primary);color:#fff;width:240px;flex:none;
	padding:1.5rem 1.05rem;display:flex;flex-direction:column;gap:.3rem;overflow-y:auto}
.kfzmb-step{display:flex;align-items:center;gap:.7rem;border-radius:10px;
	padding:.6rem .6rem;transition:background .15s ease}
.kfzmb-step.active{background:rgba(0,0,0,.13)}
.kfzmb-step-ic{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;
	background:rgba(255,255,255,.16);flex:none}
.kfzmb-step-ic svg{width:16px;height:16px;display:block}
.kfzmb-step-tx{min-width:0;flex:1}
.kfzmb-step-tx b{display:block;font-size:.84rem;font-weight:500;line-height:1.25}
.kfzmb-step-tx small{display:block;font-size:.72rem;opacity:.82;margin-top:.08rem;
	white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kfzmb-step-dot{width:18px;height:18px;border-radius:50%;border:2px solid rgba(255,255,255,.45);
	flex:none;display:grid;place-items:center}
.kfzmb-step-dot svg{width:11px;height:11px;opacity:0;transition:opacity .15s ease}
.kfzmb-step.active .kfzmb-step-dot{border-color:rgba(255,255,255,.9)}
.kfzmb-step.done .kfzmb-step-dot{background:#fff;border-color:#fff;color:var(--kfzb-primary)}
.kfzmb-step.done .kfzmb-step-dot svg{opacity:1}

/* Sidebar im Erfolgs-Zustand (Add-to-Calendar) */
.kfzmb-side-title{font-weight:500;font-size:.86rem;margin:.1rem 0 .55rem;opacity:.95}
.kfzmb-calgrid{display:grid;grid-template-columns:1fr 1fr;gap:.5rem}
.kfzmb-calbtn{display:flex;align-items:center;justify-content:center;gap:.3rem;
	background:rgba(255,255,255,.14);border-radius:8px;padding:.6rem .4rem;color:#fff;
	text-decoration:none;font-weight:500;font-size:.8rem;transition:background .15s ease}
.kfzmb-calbtn:hover{background:rgba(255,255,255,.26);color:#fff}

/* ── Main ── */
.kfzmb-main{flex:1;min-width:0;padding:1.4rem 1.5rem 1.05rem;display:flex;flex-direction:column;overflow:hidden}
.kfzmb-h{font-size:1.05rem;font-weight:500;color:var(--kfzb-ink);margin:0 0 .7rem;flex:none;letter-spacing:-.005em}
.kfzmb-progress{height:4px;border-radius:4px;background:rgba(14,25,32,.08);overflow:hidden;flex:none;margin:0 0 1rem}
.kfzmb-progress>span{display:block;height:100%;background:var(--kfzb-primary);border-radius:4px;transition:width .35s ease}
.kfzmb-body{flex:1;overflow-y:auto;min-height:0;padding-right:.45rem;margin-right:-.45rem}
.kfzmb-body::-webkit-scrollbar{width:6px}
.kfzmb-body::-webkit-scrollbar-thumb{background:rgba(14,25,32,.16);border-radius:6px}
.kfzmb-intro{color:var(--kfzb-muted);margin:0 0 1rem;font-size:.86rem}

/* Service-Auswahl */
.kfzmb-row{margin-bottom:1rem}

/* Custom-Dropdown (ersetzt natives <select> – eigenes Panel wie bei Amelia) */
.kfzmb-dd{position:relative}
.kfzmb-dd-btn{display:flex;align-items:center;gap:.5rem;width:100%;height:40px;padding:.5rem .8rem;
	border:1px solid var(--kfzb-line);border-radius:8px;background:#fff;color:var(--kfzb-ink);
	font-family:inherit;font-size:.9rem;cursor:pointer;text-align:left;
	transition:border-color .12s ease,box-shadow .12s ease}
.kfzmb-dd-btn:hover{border-color:#cfd4d8}
.kfzmb-dd.open .kfzmb-dd-btn{border-color:var(--kfzb-primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--kfzb-primary) 18%,transparent)}
.kfzmb-dd-label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kfzmb-dd-caret{flex:none;display:grid;place-items:center;color:var(--kfzb-muted);transition:transform .15s ease}
.kfzmb-dd-caret svg{width:15px;height:15px}
.kfzmb-dd.open .kfzmb-dd-caret{transform:rotate(180deg)}
.kfzmb-dd-panel{position:absolute;z-index:50;min-width:120px;background:#fff;border:1px solid var(--kfzb-line);
	border-radius:8px;box-shadow:0 10px 28px rgba(14,25,32,.18);padding:.3rem;max-height:248px;overflow-y:auto}
.kfzmb-dd-panel::-webkit-scrollbar{width:6px}
.kfzmb-dd-panel::-webkit-scrollbar-thumb{background:rgba(14,25,32,.16);border-radius:6px}
.kfzmb-dd-opt{padding:.5rem .65rem;border-radius:6px;font-size:.88rem;color:var(--kfzb-ink);cursor:pointer;
	white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:background-color .1s ease}
.kfzmb-dd-opt:hover{background:#F3F3F3}
.kfzmb-dd-opt[aria-selected="true"]{background:color-mix(in srgb,var(--kfzb-primary) 10%,transparent);color:var(--kfzb-primary);font-weight:500}

/* Service-Name (groß) + Untertext (klein, rot, in Klammern) */
.kfzmb-dd-opt{white-space:normal}
.kfzmb-dd-main{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kfzmb-dd-sub{display:block;color:var(--kfzb-primary);font-size:.78rem;font-weight:500;line-height:1.25;margin-top:1px;white-space:normal}

/* Kalender-Navigation: Monat + Jahr links, Pfeile rechts */
.kfzmb-cal-nav{display:flex;align-items:center;gap:.5rem;margin-bottom:.85rem}
.kfzmb-cal-selects{display:flex;gap:.45rem;flex:1;min-width:0}
.kfzmb-cal-selects .kfzmb-dd[data-dd="month"]{flex:1 1 auto;min-width:0}
.kfzmb-cal-selects .kfzmb-dd[data-dd="year"]{flex:0 0 96px}
.kfzmb-cal-selects .kfzmb-dd-btn{height:38px;font-weight:500}
.kfzmb-navgroup{display:flex;gap:.4rem;margin-left:.25rem;flex:none}
.kfzmb-navbtn{background:#fff;border:1px solid var(--kfzb-primary);color:var(--kfzb-primary);
	border-radius:8px;width:38px;height:38px;display:grid;place-items:center;cursor:pointer;
	transition:background .12s ease,color .12s ease}
.kfzmb-navbtn svg{width:16px;height:16px}
.kfzmb-navbtn:hover{background:var(--kfzb-primary);color:#fff}

/* Kalender-Raster */
.kfzmb-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.kfzmb-dow{text-align:center;font-weight:500;color:var(--kfzb-muted);font-size:.72rem;padding:.1rem 0 .35rem}
.kfzmb-day{position:relative;min-height:46px;border:1px solid transparent;border-radius:8px;
	background:var(--kfzb-disabled-bg);color:var(--kfzb-disabled);cursor:default;
	font-weight:500;font-size:.82rem;overflow:hidden;
	transition:border-color .12s ease,background-color .12s ease}
.kfzmb-day-n{position:absolute;top:5px;left:7px;z-index:1}
.kfzmb-day.is-spill{background:transparent;color:#bcc3c7}
.kfzmb-day.avail{background:var(--kfzb-green-bg);border-color:var(--kfzb-green-bd);color:var(--kfzb-ink);cursor:pointer}
.kfzmb-day.avail:hover{border-color:var(--kfzb-green);background:rgba(1,151,25,.13)}
.kfzmb-day.avail:focus-visible{outline:none;border-color:var(--kfzb-green);box-shadow:0 0 0 2px rgba(1,151,25,.3)}
.kfzmb-day.sel{background:var(--kfzb-primary);border-color:var(--kfzb-primary);color:#fff}
.kfzmb-day.is-today::after{content:"";position:absolute;top:7px;right:7px;width:5px;height:5px;
	border-radius:50%;background:var(--kfzb-primary);z-index:2}
.kfzmb-day.sel.is-today::after{background:#fff}

/* Zeit-Slots */
.kfzmb-slotwrap{margin-top:1.3rem}
.kfzmb-slot-title{font-weight:500;color:var(--kfzb-ink);margin:0 0 .7rem;font-size:.92rem}
.kfzmb-slots{display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:.5rem}
.kfzmb-slot{border:1px solid var(--kfzb-green-bd);background:var(--kfzb-green-bg);border-radius:8px;
	padding:.6rem .4rem;cursor:pointer;text-align:center;font-weight:500;color:var(--kfzb-ink);font-size:.82rem;
	transition:border-color .12s ease,background-color .12s ease}
.kfzmb-slot:hover{border-color:var(--kfzb-green);background:rgba(1,151,25,.13)}
.kfzmb-slot.sel{background:var(--kfzb-primary);color:#fff;border-color:var(--kfzb-primary)}
.kfzmb-slot-off{background:var(--kfzb-disabled-bg);border-color:transparent;color:var(--kfzb-disabled);
	cursor:not-allowed;text-decoration:line-through}
.kfzmb-slot-off:hover{border-color:transparent;background:var(--kfzb-disabled-bg)}
.kfzmb-empty{color:var(--kfzb-muted);padding:.8rem 0;font-size:.86rem}

/* Formular */
.kfzmb-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:.9rem 1rem}
.kfzmb-field{display:flex;flex-direction:column;gap:.3rem}
.kfzmb-field label{font-weight:500;font-size:.82rem;color:var(--kfzb-text)}
.kfzmb-field .req{color:var(--kfzb-primary)}
.kfzmb-input{width:100%;height:40px;padding:.5rem .75rem;border:1px solid var(--kfzb-line);border-radius:8px;
	font-size:.9rem;background:#fff;color:var(--kfzb-ink);font-family:inherit;
	transition:border-color .12s ease,box-shadow .12s ease}
.kfzmb-input:focus{outline:none;border-color:var(--kfzb-primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--kfzb-primary) 18%,transparent)}
.kfzmb-consent{display:flex;align-items:flex-start;gap:.6rem;margin-top:1.1rem;font-size:.84rem;
	color:var(--kfzb-text);line-height:1.5;cursor:pointer}
.kfzmb-consent input{margin-top:.12rem;width:18px;height:18px;flex:none;accent-color:var(--kfzb-primary);cursor:pointer}
.kfzmb-consent a{color:var(--kfzb-primary);font-weight:500}
.kfzmb-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* Schritt „Fahrzeugdaten" (VIN oder Fahrzeugschein) */
.kfzmb-vd{display:flex;flex-direction:column;gap:.9rem;margin-top:.3rem}
.kfzmb-vd .kfzmb-field label,.kfzmb-vd .kfzmb-field>span{font-weight:500;font-size:.82rem;color:var(--kfzb-text)}
.kfzmb-vd-upload{display:flex;flex-direction:column;gap:.4rem}
.kfzmb-vd-file{font-size:.82rem;color:var(--kfzb-text);background:#F3F3F3;border-radius:8px;padding:.4rem .6rem;word-break:break-all}
.kfzmb-vd-or{display:flex;align-items:center;gap:.7rem;color:var(--kfzb-muted);font-size:.8rem;text-transform:uppercase;letter-spacing:.05em}
.kfzmb-vd-or::before,.kfzmb-vd-or::after{content:"";flex:1;height:1px;background:var(--kfzb-line)}
.kfzmb-hint{font-size:.78rem;color:var(--kfzb-muted);line-height:1.4}

/* Footer / Buttons */
.kfzmb-foot{flex:none;margin-top:.6rem;display:flex;justify-content:flex-end;align-items:center;
	gap:.6rem;border-top:1px solid var(--kfzb-soft);padding-top:1rem}
.kfzmb-btn{background:var(--kfzb-primary);color:#fff;border:0;border-radius:8px;padding:.6rem 1.5rem;height:42px;
	font-weight:500;font-size:.9rem;cursor:pointer;transition:filter .15s ease,opacity .15s ease}
.kfzmb-btn:hover{filter:brightness(.93)}
.kfzmb-btn[disabled]{opacity:.4;cursor:not-allowed;filter:none}
.kfzmb-btn-ghost{background:transparent;color:var(--kfzb-primary);border:1px solid var(--kfzb-primary);margin-right:auto}
.kfzmb-btn-ghost:hover{background:color-mix(in srgb,var(--kfzb-primary) 9%,transparent);filter:none}

/* Fehler / Erfolg */
.kfzmb-msg{background:#FDF3F2;color:#B4190F;border:1px solid #F8D1CE;border-radius:8px;
	padding:.6rem .8rem;margin-bottom:1rem;font-size:.86rem}
.kfzmb-success{text-align:center;padding:1.2rem 0}
.kfzmb-success-ic{width:56px;height:56px;border-radius:50%;background:rgba(1,151,25,.12);color:var(--kfzb-green);
	display:grid;place-items:center;margin:0 auto 1rem}
.kfzmb-success-ic svg{width:30px;height:30px}
.kfzmb-success h3{font-size:1.15rem;font-weight:500;margin:.2rem 0;color:var(--kfzb-ink)}
.kfzmb-success .kfzmb-tid{color:var(--kfzb-muted);font-size:.82rem;margin-bottom:1.2rem}
.kfzmb-summary{text-align:left;max-width:420px;margin:0 auto}
.kfzmb-summary div{display:flex;justify-content:space-between;gap:1rem;padding:.6rem 0;
	border-bottom:1px solid var(--kfzb-soft);font-size:.88rem}
.kfzmb-summary b{color:var(--kfzb-muted);font-weight:400}
.kfzmb-summary span{color:var(--kfzb-ink);font-weight:500}

/* ── Mobil: Sidebar wird zur schlanken Schritt-Leiste oben (statt versteckt) ── */
@media(max-width:680px){
	.kfzmb{flex-direction:column;height:auto;max-height:none}
	.kfzmb-side{width:auto;flex-direction:row;align-items:center;gap:.5rem;padding:.7rem .8rem;overflow:visible}
	.kfzmb-step{flex:1 1 0;min-width:0;padding:.45rem .55rem;background:rgba(255,255,255,.12)}
	.kfzmb-step.active{background:rgba(0,0,0,.16)}
	.kfzmb-step-tx small,.kfzmb-step-dot{display:none}
	.kfzmb-main{padding:1.1rem 1.05rem;height:auto;overflow:visible}
	.kfzmb-body{overflow:visible;padding-right:0;margin-right:0}
	.kfzmb-form-grid{grid-template-columns:1fr}
	/* Erfolgs-Sidebar (Add-to-Calendar) wieder als Block unter den Inhalt */
	.kfzmb-done{flex-direction:column}
	.kfzmb-done .kfzmb-side{order:2;flex-direction:column;align-items:stretch}
	.kfzmb-done .kfzmb-main{order:1}
}