/* =====================================================
   Ajeti — Offerte-Multistep-Formular (Vollbild-Modal)
   DUNKLES Layout, passend zum v2-Editorial-Look.
   Vollständig unter .offerte-modal gekapselt · WCAG 2.1 AA (Kontrast + Fokus)
   ===================================================== */
body.modal-open { overflow: hidden; }

.offerte-modal { position: fixed; inset: 0; z-index: 2000; }
.offerte-modal[hidden] { display: none; }
.offerte-modal * { box-sizing: border-box; }
.offerte-modal__backdrop { position: absolute; inset: 0; background: rgba(6,12,18,.78); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.offerte-modal__dialog { position: absolute; inset: 0; width: 100vw; height: 100vh; height: 100dvh; overflow: hidden; animation: ofmIn .3s cubic-bezier(.22,.61,.36,1); }
.offerte-modal__close { position: absolute; top: 14px; right: 14px; z-index: 6; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255,255,255,.25); background: rgba(20,32,42,.85); color: #E7EEF4; display: flex; align-items: center; justify-content: center; font-size: 18px; cursor: pointer; transition: transform .2s, background .2s; }
.offerte-modal__close:hover { background: #1c2c39; transform: rotate(90deg); }
@keyframes ofmIn { from { opacity: 0; transform: scale(.99); } to { opacity: 1; transform: none; } }

/* Sichtbarer Fokus für Tastatur-Navigation (a11y) */
.offerte-modal :focus-visible { outline: 3px solid #6CC8EA; outline-offset: 2px; border-radius: 8px; }

.offerte-modal .booking { display: flex; height: 100%; background: #111a22; color: #E7EEF4; font-family: 'Poppins', system-ui, sans-serif; }
.offerte-modal .booking__aside { width: 34%; flex-shrink: 0; padding: 40px 32px; color: #fff; position: relative; overflow: hidden; background: linear-gradient(165deg, #0b141c 0%, #10222e 60%, #0a151d 100%); display: flex; flex-direction: column; justify-content: space-between; border-right: 1px solid rgba(255,255,255,.08); }
.offerte-modal .booking__aside::after { content: ''; position: absolute; width: 260px; height: 260px; right: -80px; top: -60px; border-radius: 50%; background: radial-gradient(circle, rgba(79,179,212,.28), transparent 70%); }
.offerte-modal .booking__aside-eyebrow { font-family: 'Manrope', sans-serif; font-weight: 700; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: #6CC8EA; margin-bottom: 10px; position: relative; z-index: 1; }
.offerte-modal .booking__aside-title { color: #fff; font-family: 'Manrope', sans-serif; font-weight: 700; font-size: 22px; line-height: 1.25; margin: 0; position: relative; z-index: 1; }
.offerte-modal .booking__aside p { color: rgba(231,238,244,.75); font-size: 13.5px; margin: 8px 0 0; position: relative; z-index: 1; }
.offerte-modal .booking__steps { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 4px; margin: 26px 0; padding: 0; list-style: none; }
.offerte-modal .booking__step { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; font-size: 13.5px; font-weight: 600; color: rgba(231,238,244,.6); transition: all .25s; }
.offerte-modal .booking__step.is-active { background: rgba(255,255,255,.1); color: #fff; }
.offerte-modal .booking__step.is-done { color: rgba(231,238,244,.92); }
.offerte-modal .booking__step-num { width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.35); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; flex-shrink: 0; }
.offerte-modal .booking__step.is-active .booking__step-num { background: #4FB3D4; border-color: #4FB3D4; color: #06121a; }
.offerte-modal .booking__step.is-done .booking__step-num { background: rgba(108,200,234,.3); border-color: transparent; }
.offerte-modal .booking__aside-foot { position: relative; z-index: 1; font-size: 13px; color: rgba(231,238,244,.8); }
.offerte-modal .booking__aside-foot a { color: #6CC8EA; font-weight: 600; }

.offerte-modal .booking__main { flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.offerte-modal .booking__body { flex: 1; min-height: 0; overflow-y: auto; padding: 40px; }
.offerte-modal .booking__foot { border-top: 1px solid #26333f; padding: 16px 40px; display: flex; align-items: center; justify-content: space-between; background: #0e161d; }

.offerte-modal .wizard-step { display: none; max-width: 640px; margin: 0 auto; }
.offerte-modal .wizard-step.is-active { display: block; animation: ofmStep .35s ease; }
@keyframes ofmStep { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.offerte-modal .wizard-step__eyebrow { font-family: 'Manrope', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: #6CC8EA; margin-bottom: 8px; }
.offerte-modal .wizard-step__title { font-family: 'Manrope', sans-serif; font-weight: 700; font-size: 1.35rem; color: #F3F8FB; margin: 0 0 8px; }
.offerte-modal .wizard-step__lead { color: #9FB0BE; font-size: 14.5px; margin: 0 0 26px; }

.offerte-modal .opt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; }
.offerte-modal .opt-card { display: flex; flex-direction: column; gap: 12px; align-items: center; justify-content: center; padding: 22px 14px; border: 1.5px solid #33434f; border-radius: 14px; cursor: pointer; transition: all .2s; background: #1a2530; color: #E7EEF4; text-align: center; }
.offerte-modal .opt-card:hover { border-color: #4FB3D4; transform: translateY(-3px); }
.offerte-modal .opt-card[aria-pressed="true"] { border-color: #4FB3D4; background: rgba(79,179,212,.14); box-shadow: 0 0 0 2px rgba(79,179,212,.35); }
.offerte-modal .opt-card__icon { height: 40px; display: flex; align-items: center; justify-content: center; font-size: 26px; color: #6CC8EA; }
.offerte-modal .opt-card__label { font-weight: 600; font-size: 13.5px; }

.offerte-modal .choice-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.offerte-modal .choice { padding: 13px 16px; border: 1.5px solid #33434f; border-radius: 12px; cursor: pointer; font-size: 14px; font-weight: 500; transition: all .2s; background: #1a2530; color: #E7EEF4; text-align: center; }
.offerte-modal .choice:hover { border-color: #4FB3D4; }
.offerte-modal .choice[aria-pressed="true"] { border-color: #4FB3D4; background: rgba(79,179,212,.16); font-weight: 600; color: #fff; }
.offerte-modal .choice-grid--compact { grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; }
.offerte-modal .choice-grid--compact .choice { padding: 11px 8px; font-size: 13px; border-radius: 10px; }
@media (min-width: 900px) { .offerte-modal .choice-grid--compact { grid-template-columns: repeat(4, 1fr); } }

.offerte-modal .field { margin-bottom: 18px; }
.offerte-modal .field > label { display: block; font-weight: 600; font-size: 13px; margin-bottom: 7px; color: #DCE6ED; }
.offerte-modal .field input, .offerte-modal .field textarea { width: 100%; padding: 12px 14px; border: 1.5px solid #33434f; border-radius: 10px; font-family: inherit; font-size: 14px; outline: none; transition: border-color .2s, box-shadow .2s; background: #1a2530; color: #F3F8FB; }
.offerte-modal .field input::placeholder, .offerte-modal .field textarea::placeholder { color: #7C8B99; }
.offerte-modal .field input:focus, .offerte-modal .field textarea:focus { border-color: #4FB3D4; box-shadow: 0 0 0 3px rgba(79,179,212,.25); }
.offerte-modal .field textarea { min-height: 92px; resize: vertical; }
.offerte-modal .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.offerte-modal .field-check { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; color: #B7C4CF; }
.offerte-modal .field-check input { width: auto; margin-top: 3px; accent-color: #4FB3D4; }
.offerte-modal .field-check a { color: #6CC8EA; font-weight: 600; }

.offerte-modal .addr-block { background: #16212b; border: 1px solid #2A3742; border-radius: 14px; padding: 20px; margin-bottom: 18px; }
.offerte-modal .addr-block__head { font-family: 'Manrope', sans-serif; font-weight: 600; font-size: 14px; color: #DCE6ED; margin-bottom: 14px; display: flex; align-items: center; gap: 9px; }
.offerte-modal .addr-block__head i { width: 30px; height: 30px; border-radius: 50%; background: rgba(79,179,212,.16); color: #6CC8EA; display: flex; align-items: center; justify-content: center; font-size: 14px; }
.offerte-modal .addr-block .field:last-child { margin-bottom: 0; }
.offerte-modal .addr-block .field-row { margin-bottom: 0; }

.offerte-modal .summary__row { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid #26333f; font-size: 14px; }
.offerte-modal .summary__row dt { color: #9FB0BE; }
.offerte-modal .summary__row dd { font-weight: 600; text-align: right; margin: 0; color: #F3F8FB; }

.offerte-modal .wizard-btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 26px; border-radius: 9px; font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 14px; cursor: pointer; border: 0; transition: all .2s; }
.offerte-modal .wizard-btn--next { background: #4FB3D4; color: #071822; }
.offerte-modal .wizard-btn--next:hover { background: #6CC8EA; }
.offerte-modal .wizard-btn--back { background: transparent; color: #B7C4CF; border: 1.5px solid #3a4753; }
.offerte-modal .wizard-btn--back:hover { border-color: #6CC8EA; color: #fff; }
.offerte-modal .wizard-progress { font-size: 13px; color: #9FB0BE; font-weight: 600; }

/* Validierung: kontrastreicher Fehlerhinweis (a11y: role=alert) */
.offerte-modal .wizard-error { display: none; align-items: center; gap: 9px; color: #FFC2B8; background: #2c1512; border: 1px solid #7a382e; border-radius: 10px; padding: 11px 14px; font-size: 13.5px; margin-bottom: 18px; }
.offerte-modal .wizard-error.is-on { display: flex; }
.offerte-modal .choice-grid.is-invalid, .offerte-modal .opt-grid.is-invalid { outline: 2px solid #ff8a7a; outline-offset: 6px; border-radius: 12px; }
.offerte-modal .field.is-invalid input, .offerte-modal .field input.is-invalid { border-color: #ff8a7a; box-shadow: 0 0 0 3px rgba(255,138,122,.25); }
.offerte-modal .req { color: #FF9E90; font-weight: 700; }

.offerte-modal .booking__success { display: none; flex-direction: column; align-items: center; justify-content: center; text-align: center; height: 100%; padding: 48px; }
.offerte-modal .booking__success.is-on { display: flex; }
.offerte-modal .booking__success-icon { width: 74px; height: 74px; border-radius: 50%; background: rgba(79,179,212,.16); color: #6CC8EA; display: flex; align-items: center; justify-content: center; font-size: 34px; margin-bottom: 20px; }
.offerte-modal .booking__success-title { font-family: 'Manrope', sans-serif; font-weight: 700; font-size: 1.6rem; margin: 0 0 10px; color: #F3F8FB; }
.offerte-modal .booking__success p { color: #9FB0BE; max-width: 420px; }

.offerte-modal .hp-wrap { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.offerte-modal .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

@media (prefers-reduced-motion: reduce) {
  .offerte-modal__dialog, .offerte-modal .wizard-step.is-active { animation: none; }
  .offerte-modal .opt-card, .offerte-modal .choice, .offerte-modal__close { transition: none; }
}

@media (max-width: 900px) { .offerte-modal .booking__aside { width: auto; } }
@media (max-width: 767px) {
  .offerte-modal .booking { flex-direction: column; }
  .offerte-modal .booking__aside { width: auto; padding: 14px 54px 12px 14px; }
  .offerte-modal .booking__aside::after, .offerte-modal .booking__aside-head, .offerte-modal .booking__aside-foot { display: none; }
  .offerte-modal .booking__steps { flex-direction: row; gap: 4px; margin: 0; }
  .offerte-modal .booking__step { flex: 1; flex-direction: column; gap: 5px; padding: 4px 2px; font-size: 9.5px; text-align: center; }
  .offerte-modal .booking__step-num { width: 24px; height: 24px; }
  .offerte-modal .booking__body { padding: 26px 20px; }
  .offerte-modal .booking__foot { padding: 14px 20px; }
  .offerte-modal .field-row { grid-template-columns: 1fr; }
  .offerte-modal__close { top: 7px; right: 8px; width: 34px; height: 34px; font-size: 15px; }
}