/* Local prototype: existing booking controls and services, clearer four-step layout. */
body{background:#f3f5f6}
.header{max-width:1180px;height:72px;padding:0 24px;background:transparent}
.skip{position:absolute;left:16px;top:-80px;z-index:100;background:white;padding:12px}.skip:focus{top:10px}
#main{max-width:1180px;background:transparent;padding:0 24px 32px;min-height:0}
#booking-shell{grid-template-columns:minmax(0,1fr) minmax(0,1fr);min-height:0;gap:0 24px;align-items:start}
.booking-intro{grid-column:1/-1;padding:28px 0 24px}.booking-intro h1{font-size:36px;margin:0 0 12px;letter-spacing:-1px}.booking-intro>p:not(.eyebrow){font-size:16px;line-height:1.6;color:#586b79;margin:0;max-width:700px}.booking-facts{display:flex;gap:12px;flex-wrap:wrap;margin-top:20px}.booking-facts span{font-size:12px;padding:7px 12px;border:1px solid #dce3e8;background:white;border-radius:20px}
#booking-shell>.steps{grid-column:1/-1;padding:12px 0 22px;gap:12px;margin-bottom:10px}.steps button{padding:10px 8px;font-size:14px;text-align:left;min-height:52px;background:transparent;display:flex;align-items:center;gap:8px}.steps span{width:30px;height:30px;flex-shrink:0;margin:0}.steps [aria-current=step]{border-bottom-width:3px}
.workspace{border:1px solid #dce3e8;border-radius:12px;background:white;min-height:640px;box-shadow:0 3px 15px #14202a05;overflow:visible}
.step-context{font-size:12px;color:#667986;margin:24px 28px 0}.wizard-editor,.wizard-review{padding:14px 28px 24px}.wizard-editor h1,.wizard-review h1{font-size:27px;margin-bottom:22px}.intro{font-size:15px;line-height:1.55;margin-bottom:24px}.actions{padding:16px 22px;border-radius:0 0 12px 12px;flex-wrap:wrap}.booking-total{display:flex;flex-direction:column;gap:3px;margin-right:auto}.booking-total span{font-size:11px;color:#637582}.booking-total strong{font-size:21px;white-space:nowrap;font-variant-numeric:tabular-nums}.actions .primary{max-width:210px}.actions #wizard-back{order:0}.booking-total{order:1}.actions #mobile-preview{order:2}.actions #wizard-next{order:3}
#booking-shell[data-stage=area],#booking-shell[data-stage=placement]{grid-template-columns:1fr}
#booking-shell[data-stage=area]>.preview,#booking-shell[data-stage=placement]>.preview{display:none}
#booking-shell[data-stage=area]>.workspace,#booking-shell[data-stage=placement]>.workspace{min-height:0}
#booking-shell[data-stage=area] .area-choices{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.area-choices label{position:relative;align-items:flex-start;gap:12px;padding:22px 16px;min-height:118px;background:#fff}.area-choices label:has(:checked){border-color:#087fac;box-shadow:0 0 0 1px #087fac;background:#f0f8fb}.area-choices input[type=radio]{width:18px;height:18px;margin:1px 0 0;accent-color:#087fac;flex-shrink:0}.area-plan{font-size:17px}.area-plan>span{font-size:14px;margin-top:14px;color:#192b39}.area-plan>span:after{content:' netto / Monat';display:block;font-size:11px;color:#637582;margin-top:4px}
[data-pane=area] #city-field,[data-pane=area] #state-field{max-width:560px;margin:26px 0 12px}[data-pane=area]>.form-row:first-of-type>.row-label{display:none}
.slot-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.slot-choice{display:flex;position:relative;gap:12px;padding:18px;min-height:290px;background:white}.slot-choice input{position:absolute;right:16px;top:16px;width:20px;height:20px;accent-color:#087fac;z-index:1}.slot-choice.chosen{box-shadow:0 0 0 1px #087fac}.slot-choice .choice-name{font-size:17px}.slot-choice .choice-price{font-size:17px;margin-top:auto;max-width:none;white-space:normal}.slot-choice>span:last-child{font-size:13px}.slot-diagram{display:flex;position:relative;width:100%;height:130px;padding:30px 20px 15px;background:#f3f5f7;border:1px solid #d7e0e7;border-radius:6px;flex-direction:column;gap:10px;margin:10px 0 4px;overflow:hidden}.slot-diagram:before{content:'';position:absolute;top:12px;left:16px;width:28px;height:5px;border-radius:3px;background:#adbfcc}.slot-diagram i{height:6px;width:72%;display:block;background:#d8e2e9;border-radius:2px}.slot-diagram i:nth-child(2){width:55%}.slot-diagram b{display:block;background:#087fac;border-radius:3px;height:26px;width:76%;box-shadow:0 1px 3px #087fac22}.rails-diagram{padding-inline:42px}.rails-diagram b{position:absolute;top:28px;bottom:12px;left:9px;width:22px;height:auto}.rails-diagram b:last-child{left:auto;right:9px}.side-diagram{padding-right:66px}.side-diagram b{position:absolute;right:12px;top:32px;width:40px;height:64px}.content-diagram b{height:22px;flex-shrink:0}.price-line{display:none}
[data-pane=duration] .durations{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}[data-pane=duration] .durations button{min-height:110px;justify-content:center;font-size:17px}[data-pane=duration] #term-summary{max-width:620px}.durations button span{font-size:13px}
.preview{padding:20px;background:white;border:1px solid #dce3e8;border-radius:12px;height:min(740px,calc(100dvh - 180px));min-height:540px;top:18px;box-shadow:0 3px 15px #14202a05}.preview-head h2{font-size:17px}.preview-tabs{margin:18px 0 12px;gap:3px}.preview-tabs button{padding-inline:7px;font-size:11px}.preview-foot{font-size:10px}.devices button{min-height:36px}.preview.expanded{height:auto;max-width:none;top:12px;box-shadow:0 0 0 30px #13233299}
.draft-notice{display:inline-block;margin:10px 10px 0 0}.draft-notice p{margin:0}.draft-notice button{font-size:13px}.wizard-review dl>div{font-size:13px}.wizard-review .payment-section{min-width:0}.wizard-review dd{max-width:64%;overflow-wrap:anywhere}
body>footer{max-width:1180px;background:transparent;padding:18px 24px}
@media(max-width:1000px) and (min-width:761px){#booking-shell{gap:0 16px}.wizard-editor,.wizard-review{padding-inline:20px}.step-context{margin-inline:20px}.preview{padding:14px}.preview-head{flex-wrap:wrap}.actions{padding-inline:16px}.actions .primary{max-width:170px}#booking-shell[data-stage=area] .area-choices{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){
 .header{height:60px;padding:0 16px}.header .brand{font-size:clamp(12px,4vw,17px)}#main{padding:0 12px 20px}#booking-shell{display:block}.booking-intro{padding:20px 4px 10px}.booking-intro h1{font-size:29px;line-height:1.15}.booking-intro>p:not(.eyebrow){font-size:14px}.booking-facts{gap:6px;margin-top:14px}.booking-facts span{font-size:10px;padding:5px 8px}
 #booking-shell>.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px;padding:12px 0;margin-bottom:8px}.steps button{display:flex;flex-direction:column;justify-content:center;gap:6px;font-size:10px;padding:8px 0;min-width:0;white-space:normal;text-align:center;min-height:67px}.steps span{width:27px;height:27px;font-size:13px}
 .workspace{min-height:calc(100dvh - 170px);border-radius:10px}.step-context{margin:18px 16px 0}.wizard-editor,.wizard-review{padding:12px 16px 18px}.wizard-editor h1,.wizard-review h1{font-size:24px;margin-bottom:16px}.intro{font-size:14px;line-height:1.5;margin-bottom:18px}
 #booking-shell[data-stage=area] .area-choices{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.area-choices label{min-height:110px;padding:16px 10px;gap:8px}.area-plan{font-size:14px}.area-plan>span{font-size:14px;margin-top:10px}.area-plan>span:after{font-size:10px}.area-choices input[type=radio]{width:18px;height:18px}[data-pane=area] #city-field,[data-pane=area] #state-field{margin-top:20px}
 .slot-grid{grid-template-columns:1fr;gap:12px}.slot-choice{display:grid;grid-template-columns:88px minmax(0,1fr);grid-template-rows:auto auto auto;min-height:125px;padding:14px 36px 14px 12px;gap:6px 12px;align-items:start}.slot-choice input{right:10px;top:12px}.slot-diagram{grid-column:1;grid-row:1/4;height:95px;width:88px;padding:26px 9px 10px;margin:0;gap:7px}.slot-choice .choice-name{grid-column:2;font-size:15px}.slot-choice .choice-price{grid-column:2;grid-row:3;font-size:14px;margin:0}.slot-choice>span:last-child{grid-column:2;grid-row:2;font-size:12px}.rails-diagram{padding-inline:23px}.rails-diagram b{width:12px;left:5px;top:23px;bottom:8px}.rails-diagram b:last-child{right:5px}.side-diagram{padding-right:32px}.side-diagram b{right:6px;top:28px;width:23px;height:46px}.content-diagram b{height:17px}
 [data-pane=duration] .durations{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}[data-pane=duration] .durations button{min-height:92px;padding:14px;font-size:16px}
 .actions{display:flex;flex-wrap:wrap;gap:8px;padding:12px max(12px,env(safe-area-inset-left)) max(12px,env(safe-area-inset-bottom));border-radius:0 0 10px 10px}.booking-total{width:100%;flex-direction:row;align-items:center;justify-content:space-between;order:-1;padding-bottom:8px;border-bottom:1px solid #e4e9ed}.booking-total span{font-size:11px}.booking-total strong{font-size:19px}.actions button{font-size:12px;min-height:46px;padding:10px 8px}.actions #wizard-next{flex:1;width:auto;max-width:none;margin-left:auto}.actions #wizard-back{flex:0 0 auto}.actions #mobile-preview{flex:0 0 auto}.actions #wizard-back:first-letter{font-size:14px}
 .preview{display:none}.preview.expanded{display:flex;inset:0;height:100dvh;min-height:0;max-height:100dvh;padding:16px 14px;border-radius:0;border:0}.preview.expanded .actions{display:flex;margin:10px -14px -16px}.preview.expanded .booking-total{display:none}.preview.expanded .preview-tabs button{font-size:12px}.preview.expanded #preview-shell{min-height:0}.tabs{gap:6px}.tabs button{font-size:12px;padding-inline:2px}.import-line button{font-size:14px}.quiet-note{font-size:13px;margin-top:20px}.payment-logos{gap:12px 8px}
}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important}}

@media(min-width:761px){#preview:not(.expanded) #preview-shell{align-items:flex-start;padding-top:12px}}
input,select,textarea,button{scroll-margin-block:110px;touch-action:manipulation}.preview.expanded{overscroll-behavior:contain}
