/* Anfrage- und Franchise-Formular. Felder und Bedingungen 1:1 von color-glo.ch übernommen. */
.form{display:grid;gap:clamp(28px,4vw,44px);max-width:720px;margin-top:clamp(28px,4vw,48px)}
.form fieldset{border:0;margin:0;padding:0;min-width:0;display:grid;gap:12px}
.form legend,.form .lab{padding:0;font-size:17px;font-weight:400;color:var(--paper);margin-bottom:4px}
.form .teil{display:grid;gap:18px;padding-left:18px;border-left:1px solid var(--gelb)}
.form .teil>h3{font-size:clamp(22px,2.4vw,30px);line-height:1.1}
.form [hidden]{display:none!important}
.form .hint{font-size:15px;color:var(--dim-2)}
.form .req{color:var(--gelb)}
.form{scroll-margin-top:110px}
.form .schritt{display:grid;gap:clamp(28px,4vw,44px)}
.form .schritt-nr{font-size:14px;letter-spacing:.08em;text-transform:uppercase;color:var(--gelb)}
.form .schritt-nav{display:flex;flex-wrap:wrap;gap:12px}
.form .zwei{display:grid;gap:18px;align-items:start}
.form label.feld{display:grid;gap:6px}
.form input[type=text],.form input[type=email],.form input[type=tel],.form textarea{width:100%;font:inherit;color:var(--paper);background:rgba(239,233,223,.05);border:1px solid rgba(239,233,223,.28);border-radius:14px;padding:13px 16px;transition:border-color .2s var(--ease-out),background .2s var(--ease-out)}
.form textarea{min-height:112px;resize:vertical}
.form input:focus-visible,.form textarea:focus-visible{outline:2px solid var(--gelb);outline-offset:2px;border-color:var(--gelb)}
.form .opts{display:flex;flex-wrap:wrap;gap:10px}
.form .opt{position:relative;display:inline-flex}
.form .opt input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.form .opt span{display:inline-flex;align-items:center;min-height:46px;padding:8px 20px;border-radius:999px;border:1px solid rgba(239,233,223,.4);color:var(--dim-2);transition:background .2s var(--ease-out),color .2s var(--ease-out),border-color .2s var(--ease-out),scale .16s var(--ease-out)}
.form .opt input:checked+span{background:var(--gelb);border-color:var(--gelb);color:var(--ink)}
.form .opt input:focus-visible+span{outline:2px solid var(--gelb);outline-offset:3px}
.form .opt input:active+span{scale:.97}
.form input[type=file]{font:inherit;font-size:15px;color:var(--dim-2);max-width:100%}
.form input[type=file]::file-selector-button{font:inherit;min-height:46px;margin-right:14px;padding:8px 20px;border-radius:999px;border:1px solid rgba(239,233,223,.55);background:none;color:var(--paper);cursor:pointer}
.form .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form button.pill{cursor:pointer;font-family:inherit;width:fit-content}
.form button[disabled]{opacity:.55;cursor:progress}
.form .status{min-height:1.5em;color:var(--dim-2)}
.form .status.err{color:#f0a08c}
.form .status.ok{color:var(--gelb);font-size:20px}
@media (hover:hover) and (pointer:fine){
  .form .opt:hover input:not(:checked)+span{border-color:var(--paper);color:var(--paper)}
  .form input[type=file]::file-selector-button:hover{background:rgba(239,233,223,.12)}
}
@media (min-width:761px){.form .zwei{grid-template-columns:1fr 1fr}}
@media (max-width:760px){.form button.pill{flex:1 1 100%}}
@media (prefers-reduced-motion:reduce){.form *{transition:none}}