/* ==========================================================================
   Cirrus Hospitality — form.css (Anfrage-Wizard)
   Baut auf main.css auf.
   ========================================================================== */

.fbar{position:sticky; top:0; z-index:50; background:var(--paper); border-bottom:1px solid var(--line)}
.fbar .wrap{display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:68px; padding-top:10px; padding-bottom:10px}
@media(max-width:480px){ .fbar .call-label{display:none} .fbar .call-btn{padding:9px 12px} }
.prog{height:4px; background:var(--line)}
.prog i{display:block; height:100%; background:var(--blue); width:0%}
@media (prefers-reduced-motion: no-preference){ .prog i{transition:width .3s ease} }

.form-main{padding-top:34px; padding-bottom:56px}
.form-title{font-size:13px; letter-spacing:.14em; font-weight:600; color:var(--blue); text-transform:uppercase; margin:0}
.form-meta{margin:6px 0 0; font-size:15px; color:var(--soft)}
.stepcount{margin:18px 0 0; font-size:14.5px; color:var(--soft); font-weight:500}

fieldset.fstep{border:0; margin:0; padding:22px 0 0; min-width:0}
.fstep legend{padding:0; float:left; width:100%}          /* float: Legend wie normale Überschrift */
.fstep legend + *{clear:both}
.fstep h2{font-size:clamp(24px,3.6vw,32px); max-width:24ch}
.fstep .hint{margin-top:10px; color:var(--soft); font-size:16px; max-width:56ch; padding-top:4px}
.js-wizard .fstep{display:none}
.js-wizard .fstep.on{display:block}

.feld{margin-top:22px; max-width:560px}
label{display:block; font-size:15.5px; font-weight:600; margin-bottom:6px}
label .opt{font-weight:400; color:var(--soft)}
label .req,.check .req{font-weight:400; color:var(--soft)}
.fhint{margin:6px 0 0; font-size:14px; color:var(--soft)}
input[type=text],input[type=tel],input[type=email],textarea{
  width:100%; font-family:inherit; font-size:17px; color:var(--ink); background:var(--paper);
  border:1.5px solid #8C96A8; border-radius:8px; padding:12px 14px; min-height:48px}
textarea{min-height:150px; resize:vertical; line-height:1.5}
input:focus-visible,textarea:focus-visible{outline:3px solid var(--focus); outline-offset:1px; border-color:var(--blue)}
input[aria-invalid="true"],textarea[aria-invalid="true"]{border-color:var(--err); border-width:2px}
.field-err{margin:8px 0 0; color:var(--err); font-size:15px; font-weight:500; display:flex; gap:7px; align-items:flex-start}
.field-err::before{content:"!"; flex:none; width:19px; height:19px; border-radius:50%; background:var(--err); color:var(--paper);
  font-size:13px; font-weight:700; display:inline-flex; align-items:center; justify-content:center; margin-top:2px}
.field-err[hidden]{display:none}
.two{display:grid; gap:14px}
@media(min-width:560px){.two{grid-template-columns:1fr 1fr}}
.two > div{min-width:0}

/* Situation: echte Radiobuttons als Karten */
.pick{display:grid; gap:12px; margin-top:22px; max-width:640px}
.pick-opt{position:relative; display:flex; gap:14px; align-items:flex-start; background:var(--paper); border:1.5px solid var(--line);
  border-radius:10px; padding:16px 18px; cursor:pointer; font-weight:400; margin:0; font-size:17px}
.pick-opt:hover{border-color:var(--blue)}
.pick-opt input{flex:none; width:20px; height:20px; margin:3px 0 0; accent-color:var(--blue)}
.pick-opt b{display:block; font-weight:600}
.pick-opt span span{display:block; font-size:15px; color:var(--soft); margin-top:3px}
.pick-opt.is-checked{border-color:var(--blue); background:var(--tint); box-shadow:inset 0 0 0 1px var(--blue)}
.pick-opt:has(input:focus-visible){outline:3px solid var(--focus); outline-offset:2px}

.pick.invalid .pick-opt{border-color:var(--err)}

/* Herausforderungen: Checkboxen als Chips (Status auch ohne Farbe erkennbar: Haken) */
.chips{display:flex; flex-wrap:wrap; gap:10px; margin-top:22px; max-width:760px}
.chip{position:relative; display:inline-flex; align-items:center; gap:8px; font-size:15.5px; font-weight:400; padding:10px 16px; min-height:44px;
  border-radius:99px; border:1.5px solid #8C96A8; background:var(--paper); color:var(--ink); cursor:pointer; margin:0}
.chip:hover{border-color:var(--blue)}
.chip input{position:absolute; opacity:0; width:1px; height:1px}
.chip .box{width:16px; height:16px; border:1.5px solid currentColor; border-radius:4px; flex:none; display:inline-flex; align-items:center; justify-content:center; font-size:12px; line-height:1}
.chip.is-checked{background:var(--blue); border-color:var(--blue); color:#fff}
@media (prefers-color-scheme: dark){ .chip.is-checked{color:#0B111B} }
.chip.is-checked .box::before{content:"✓"; font-weight:700}
.chip:has(input:focus-visible){outline:3px solid var(--focus); outline-offset:2px}

.nav2{display:flex; gap:12px 18px; align-items:center; margin-top:32px; flex-wrap:wrap}
.zurueck{background:none; border:0; font-family:inherit; font-size:16px; color:var(--soft); cursor:pointer; text-decoration:underline;
  text-underline-offset:3px; min-height:44px; padding:0 6px}
.zurueck:hover{color:var(--blue)}

.check{display:flex; gap:12px; align-items:flex-start; margin-top:24px; max-width:640px}
.check input{margin-top:4px; width:22px; height:22px; flex:none; accent-color:var(--blue)}
.check label{font-weight:400; font-size:15.5px; color:var(--soft); margin:0}
.check label a{color:var(--blue)}
.check input[aria-invalid="true"]{outline:2px solid var(--err); outline-offset:2px}

.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}

.sum{margin-top:20px; max-width:640px; background:var(--tint); border:1px solid var(--line); border-radius:10px; padding:6px 18px}
.sum dl{margin:0}
.sum .row{display:grid; grid-template-columns:minmax(96px,30%) 1fr auto; gap:4px 14px; padding:11px 0; border-bottom:1px solid var(--line); align-items:baseline}
.sum .row:last-child{border-bottom:0}
.sum dt{color:var(--soft); font-size:14.5px}
.sum dd{margin:0; font-size:15.5px; white-space:pre-line; overflow-wrap:anywhere}
.sum .edit{background:none; border:0; color:var(--blue); font-family:inherit; font-size:14.5px; text-decoration:underline; cursor:pointer; min-height:36px; padding:0 4px}
@media(max-width:480px){ .sum .row{grid-template-columns:1fr auto} .sum dt{grid-column:1; grid-row:1} .sum .edit{grid-column:2; grid-row:1} .sum dd{grid-column:1 / -1; grid-row:2} }

.ts-wrap{margin-top:22px; min-height:70px}
.ts-status{margin:8px 0 0; font-size:14.5px; color:var(--soft)}
.ts-status:empty{display:none}

.fmsg{margin-top:20px; font-size:16px; border-radius:8px; padding:14px 16px; max-width:640px}
.fmsg.err{background:var(--err-bg); color:var(--ink); border:1.5px solid var(--err)}
.fmsg.err b:first-child{color:var(--err)}
.fmsg p{margin:0 0 6px} .fmsg p:last-child{margin:0}
.fmsg a{color:var(--blue)}
.nojs{margin-top:22px}

.fallback{margin-top:20px; font-size:14.5px; color:var(--soft); max-width:640px}
.fallback a,.form-help a{color:var(--blue); white-space:nowrap}
.form-help{margin-top:40px; padding-top:18px; border-top:1px solid var(--line); font-size:14.5px; color:var(--soft)}
.form-footer{border-top:1px solid var(--line); padding:18px 0 24px; font-size:13.5px; color:var(--soft)}
.form-footer a{color:inherit}
.chip input:focus-visible + .box{outline:2px solid var(--focus); outline-offset:2px}