@font-face{font-family:'Manrope';font-weight:300;font-style:normal;font-display:swap;src:url(bletzer/manrope-latin-300-normal.woff2) format('woff2')}
@font-face{font-family:'Manrope';font-weight:400;font-style:normal;font-display:swap;src:url(bletzer/manrope-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'Manrope';font-weight:500;font-style:normal;font-display:swap;src:url(bletzer/manrope-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:'Manrope';font-weight:600;font-style:normal;font-display:swap;src:url(bletzer/manrope-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:'Manrope';font-weight:700;font-style:normal;font-display:swap;src:url(bletzer/manrope-latin-700-normal.woff2) format('woff2')}
@font-face{font-family:'Manrope';font-weight:800;font-style:normal;font-display:swap;src:url(bletzer/manrope-latin-800-normal.woff2) format('woff2')}

@import url("darkly.min.css");
/* ===== Timo Bletzer Autotechnik – Theme für Easy!Appointments ===== */
:root,[data-bs-theme=dark]{
  --bs-body-bg:#070A0E;--bs-body-color:#F4F6F8;--bs-body-font-family:'Manrope',system-ui,sans-serif;
  --bs-primary:#9ED8F5;--bs-primary-rgb:158,216,245;--bs-link-color:#9ED8F5;--bs-link-hover-color:#DDF3FF;
  --bs-border-color:rgba(255,255,255,.1);--bs-secondary-bg:#141C25;--bs-tertiary-bg:#0C1218;
  --bs-border-radius:14px;--bs-border-radius-lg:18px;--bs-border-radius-sm:10px;
}
html,body{background:#070A0E!important;color:#F4F6F8!important;font-family:'Manrope',system-ui,sans-serif!important}
body{background:radial-gradient(ellipse 70% 50% at 80% 0%,rgba(63,164,214,.18) 0%,rgba(63,164,214,0) 60%),#070A0E!important}
h1,h2,h3,h4,h5,h6,.frame-title,.h1,.h2,.h3{font-family:'Manrope',system-ui,sans-serif!important;font-weight:700!important;letter-spacing:-.02em;color:#F4F6F8!important}
/* Rahmen */
#book-appointment-wizard,.frame-container,#main{background:transparent!important;box-shadow:none!important}
#book-appointment-wizard{max-width:860px!important;margin:48px auto!important;border-radius:22px!important;overflow:hidden;border:1px solid rgba(255,255,255,.08);box-shadow:0 30px 80px rgba(0,0,0,.5)!important;background:linear-gradient(160deg,#141C25 0%,#0C1218 100%)!important}
#header,.wizard-header,#book-appointment-wizard>.row:first-child{background:#070A0E!important;border-bottom:1px solid rgba(255,255,255,.08)!important;padding:18px 24px!important}
#header #company-name,#company-name{font-weight:800!important;font-size:22px!important;letter-spacing:-.01em;color:#F4F6F8!important}
#header .frame-subtitle,.frame-subtitle{color:#9ED8F5!important;font-size:13px!important;font-weight:600;letter-spacing:.14em;text-transform:uppercase}
#company-logo,#header img{width:52px!important;height:52px!important;border-radius:50%!important;object-fit:cover}
/* Schritte */
.book-step{background:rgba(255,255,255,.05)!important;border:1px solid rgba(255,255,255,.12)!important;color:#AAB4BE!important;border-radius:50%!important;width:40px!important;height:40px!important;line-height:38px!important;font-weight:700!important;box-shadow:none!important}
.book-step.active-step,.active-step{background:#9ED8F5!important;border-color:#9ED8F5!important;color:#070A0E!important;box-shadow:0 0 24px rgba(158,216,245,.45)!important}
.frame-title{font-size:30px!important;color:#F4F6F8!important;opacity:1!important}
/* Formular */
.form-label,label{color:#D5DCE3!important;font-weight:600!important}
.form-control,.form-select,select,input[type=text],input[type=email],input[type=tel],textarea{background:#0F161D!important;color:#F4F6F8!important;border:1px solid rgba(255,255,255,.14)!important;border-radius:14px!important;padding:12px 16px!important;height:auto!important}
.form-control:focus,.form-select:focus{border-color:#9ED8F5!important;box-shadow:0 0 0 3px rgba(158,216,245,.25)!important}
.form-select{background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%239ED8F5' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e")!important;background-repeat:no-repeat!important;background-position:right 16px center!important;background-size:14px 14px!important;padding-right:44px!important;appearance:none;-webkit-appearance:none}
/* Buttons */
.btn{border-radius:999px!important;font-weight:700!important;padding:12px 24px!important;border:0!important;transition:transform .2s,box-shadow .2s}
.btn:hover{transform:translateY(-2px)}
.btn-primary,.btn-dark,.button-next,.button-back,#book-appointment-submit{background:#F4F6F8!important;color:#070A0E!important;box-shadow:0 0 0 1px rgba(255,255,255,.3),0 12px 40px rgba(158,216,245,.22)!important}
.btn-primary:hover,.btn-dark:hover,.button-next:hover,#book-appointment-submit:hover{background:#FFFFFF!important;color:#070A0E!important;box-shadow:0 0 0 1px rgba(255,255,255,.4),0 16px 44px rgba(158,216,245,.35)!important}
.button-back,.btn-outline-secondary,.btn-secondary{background:rgba(255,255,255,.05)!important;color:#F4F6F8!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.22)!important}
.btn-success{background:#25D366!important;color:#070A0E!important}
/* Kalender (jQuery UI Datepicker) */
.ui-datepicker,.ui-widget-content{background:#0F161D!important;border:1px solid rgba(255,255,255,.1)!important;border-radius:18px!important;color:#F4F6F8!important;padding:10px!important}
.ui-datepicker .ui-widget-header{background:transparent!important;border:0!important;color:#F4F6F8!important;font-weight:700!important}
.ui-datepicker th{color:#8A95A0!important;font-size:12px;letter-spacing:.12em;text-transform:uppercase}
.ui-datepicker td a,.ui-datepicker td span{background:transparent!important;border:0!important;color:#D5DCE3!important;border-radius:10px!important;text-align:center!important;padding:8px 0!important}
.ui-datepicker td a:hover{background:rgba(158,216,245,.12)!important}
.ui-datepicker td .ui-state-active,.ui-datepicker td .ui-state-highlight.ui-state-active{background:#9ED8F5!important;color:#070A0E!important;font-weight:700}
.ui-datepicker td.ui-state-disabled span,.ui-datepicker .ui-state-disabled{color:#3A4652!important;opacity:1!important}
.ui-datepicker .ui-datepicker-prev,.ui-datepicker .ui-datepicker-next{border-radius:50%!important;background:rgba(255,255,255,.06)!important;border:0!important;cursor:pointer}
/* Zeit-Slots */
#available-hours .available-hour,.available-hour{display:inline-block;background:rgba(255,255,255,.05)!important;border:1px solid rgba(255,255,255,.14)!important;color:#F4F6F8!important;border-radius:999px!important;padding:10px 0!important;margin:4px!important;min-width:84px;text-align:center;font-weight:600;cursor:pointer;transition:all .2s}
.available-hour:hover{border-color:#9ED8F5!important;background:rgba(158,216,245,.1)!important}
.available-hour.selected-hour,.selected-hour{background:#9ED8F5!important;color:#070A0E!important;border-color:#9ED8F5!important;box-shadow:0 0 20px rgba(158,216,245,.4)}
/* Bestätigungs-/Infoboxen */
.alert,.card,.well{background:#0F161D!important;border:1px solid rgba(255,255,255,.1)!important;border-radius:18px!important;color:#D5DCE3!important}
.alert-success{border-color:rgba(37,211,102,.4)!important}
.text-muted,small,.form-text{color:#8A95A0!important}
a{color:#9ED8F5!important}
/* Fußzeile */
#frame-footer,.frame-footer{background:#070A0E!important;border-top:1px solid rgba(255,255,255,.08)!important;color:#8A95A0!important;padding:14px 24px!important}
#frame-footer .btn,#frame-footer a.btn{background:rgba(255,255,255,.05)!important;color:#D5DCE3!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.15)!important;padding:6px 14px!important;font-size:13px!important}
#select-language{display:none!important}
/* Mobil */
@media (max-width:768px){#book-appointment-wizard{margin:0!important;border-radius:0!important;border:0!important}.frame-title{font-size:24px!important}}

/* --- Nachbesserungen --- */
html{background:#070A0E!important}
body{min-height:100vh}
.text-primary,.text-success,.text-info{color:#9ED8F5!important}
.book-step,.book-step *{color:#AAB4BE!important}
.book-step.active-step,.book-step.active-step *,.active-step *{color:#070A0E!important}
#book-appointment-wizard .book-step{display:inline-flex!important;align-items:center;justify-content:center;margin:0 4px!important;padding:0!important;vertical-align:middle}
#book-appointment-wizard #header .col,#book-appointment-wizard #header>div>div:last-child{white-space:nowrap!important;flex:0 0 auto!important}
#book-appointment-wizard #header{display:flex!important;align-items:center;justify-content:space-between;flex-wrap:nowrap}
#book-appointment-wizard label,#book-appointment-wizard .form-label{display:block!important;margin-bottom:8px!important;width:100%}
#book-appointment-wizard .form-select,#book-appointment-wizard .form-control,#book-appointment-wizard select,#book-appointment-wizard textarea{display:block!important;width:100%!important;max-width:100%!important}
#book-appointment-wizard .mb-3,#book-appointment-wizard .form-group{display:block!important;margin-bottom:18px!important}
.frame-title{margin:8px 0 28px!important}

/* --- Runde 3 --- */
html{background:radial-gradient(ellipse 70% 50% at 80% 0%,rgba(63,164,214,.18) 0%,rgba(63,164,214,0) 60%),#070A0E!important;min-height:100%}
body{background:transparent!important}
#header{display:flex!important;align-items:center!important;justify-content:space-between!important;flex-wrap:nowrap!important;gap:16px}
#header #company-name,#header>*:first-child{flex:1 1 auto;min-width:0}
#steps,#header #steps,#header>*:last-child{display:flex!important;flex:0 0 auto!important;flex-wrap:nowrap!important;gap:8px;white-space:nowrap}
#header *:not(.book-step):not(.book-step *){color:#F4F6F8!important}
#header small,#header .small,#header span span,#company-name small,#company-name span,.frame-subtitle,#company-name-subtitle{color:#9ED8F5!important;font-size:13px!important;font-weight:600!important;letter-spacing:.14em;text-transform:uppercase}
#company-name{font-size:22px!important}
@media (max-width:768px){#header{flex-direction:column!important;align-items:flex-start!important}.book-step{width:34px!important;height:34px!important;line-height:32px!important;font-size:13px}}
/* --- Zeitauswahl deutlich --- */
#available-hours{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0}
#available-hours .available-hour,#available-hours .btn,#available-hours button{background:rgba(255,255,255,.05)!important;color:#F4F6F8!important;border:1px solid rgba(255,255,255,.18)!important;box-shadow:none!important;border-radius:999px!important;min-width:92px;padding:10px 14px!important;margin:0!important;font-weight:600!important;transform:none!important}
#available-hours .available-hour:hover{border-color:#9ED8F5!important;background:rgba(158,216,245,.12)!important}
#available-hours .selected-hour,#available-hours .btn-primary,#available-hours .active{background:#9ED8F5!important;color:#070A0E!important;border-color:#9ED8F5!important;box-shadow:0 0 22px rgba(158,216,245,.55)!important}
.button-next,#button-next-2,[id^=button-next]{background:#F4F6F8!important;color:#070A0E!important}
#available-hours:has(.selected-hour)~div .button-next,#available-hours:has(.selected-hour)~.button-next{box-shadow:0 0 0 1px #9ED8F5,0 12px 40px rgba(158,216,245,.5)!important;animation:pulse 1.4s ease-in-out 2}
@keyframes pulse{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
/* --- Felder im Rahmen halten --- */
#book-appointment-wizard *,#book-appointment-wizard *::before,#book-appointment-wizard *::after{box-sizing:border-box!important}
#book-appointment-wizard .form-control,#book-appointment-wizard .form-select,#book-appointment-wizard input,#book-appointment-wizard select,#book-appointment-wizard textarea{width:100%!important;max-width:100%!important;min-width:0!important}
#book-appointment-wizard .wizard-frame,#book-appointment-wizard .frame-content,#book-appointment-wizard .col-12,#book-appointment-wizard .row{max-width:100%!important;overflow:hidden}
#book-appointment-wizard .row{margin-left:0!important;margin-right:0!important}
#book-appointment-wizard .wizard-frame{padding:28px 32px!important}
/* Firmenname normal, nur Untertitel in Versalien */
#company-name,#company-name>span:first-child,#header strong{text-transform:none!important;letter-spacing:-.01em!important;font-size:22px!important;font-weight:800!important}
/* --- Bestätigungsseite --- */
#wizard-frame-4 .row,#appointment-details,#customer-details{overflow:visible!important}
#wizard-frame-4 .row{display:flex!important;flex-wrap:wrap;gap:20px;margin:8px 0 24px!important}
#wizard-frame-4 .row>[class*=col]{flex:1 1 300px!important;max-width:100%!important;padding:0!important}
#appointment-details,#customer-details{background:#0F161D!important;border:1px solid rgba(255,255,255,.1)!important;border-radius:18px!important;padding:24px 26px!important;line-height:1.9!important;font-size:16px!important;height:100%}
#appointment-details h4,#customer-details h4,#appointment-details strong:first-child,#customer-details strong:first-child{display:block;font-size:12px!important;font-weight:600!important;letter-spacing:.2em;text-transform:uppercase;color:#9ED8F5!important;margin:0 0 10px!important}
#appointment-details p,#customer-details p{margin:0!important}
#appointment-details p:first-of-type,#customer-details p:first-of-type{font-size:18px!important;font-weight:700!important;color:#F4F6F8!important}
#appointment-details .text-muted,#customer-details .text-muted,#appointment-details p:nth-of-type(2),#customer-details p:nth-of-type(2){color:#AAB4BE!important;font-weight:500}
#appointment-details i,#customer-details i,#appointment-details svg,#customer-details svg{color:#9ED8F5!important;margin-right:8px;width:16px}
#wizard-frame-4 .frame-title{margin-bottom:24px!important}
/* Erfolgsseite: Buttons nicht über „Powered by" */
#success-frame,.success-frame,body.booking-success #main{padding:40px 20px!important}
#success-frame .btn,.success-frame .btn{margin:6px!important}
#success-frame p:last-child,.success-frame p:last-child,#powered-by{margin-top:24px!important;display:block}