/* =====================================================================
   cond.css – Schritt "Fahrzeugzustand" (detaillierte Zustandsangaben).
   Nutzt die Design-Tokens aus styles.css.
   ===================================================================== */
.cond-block{border:1px solid var(--line);border-radius:12px;padding:14px 18px 18px;margin:0 0 16px;background:#fff}
.cond-block legend{font-family:var(--disp);text-transform:uppercase;letter-spacing:.5px;font-size:15px;
  color:var(--blue);padding:0 8px;font-weight:700}
.cond-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:560px){.cond-grid{grid-template-columns:1fr}}
.cond-q{margin-top:16px}
.cond-lbl{display:block;font-weight:600;color:var(--ink);margin-bottom:8px;font-size:15px}
.cond-q.bad .cond-lbl{color:var(--red)}
.opt-row{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center}
.opt-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px 12px}
@media(max-width:640px){.opt-grid{grid-template-columns:1fr 1fr}}
@media(max-width:420px){.opt-grid{grid-template-columns:1fr}}
.opt{display:flex;align-items:center;gap:8px;font-size:14.5px;color:var(--ink);cursor:pointer;
  background:#F4F8FB;border:1px solid var(--line);border-radius:8px;padding:8px 11px}
.opt:hover{border-color:var(--sky)}
.opt input{accent-color:var(--blue);width:17px;height:17px;flex:none}
.opt-sub{background:none;border:0;padding:6px 0 0;font-size:13.5px;color:var(--grey)}
.opt-none{background:#EAF6EE}
.cond-block .field label{display:block;font-size:13.5px;font-weight:600;color:var(--grey);margin-bottom:5px}
.cond-block input[type=number],.cond-block input[type=month],.cond-block textarea{
  width:100%;border:1px solid var(--line);border-radius:8px;padding:9px 10px;font:inherit;color:var(--ink);background:#fff}
.cond-block input:focus,.cond-block textarea:focus{outline:2px solid var(--sky);border-color:var(--sky)}
#c_repair{max-width:160px}

/* =====================================================================
   „Ihre Angaben" – modernes Formular (persönliche Daten + Fahrzeugdaten)
   ===================================================================== */
.ang-form{margin-top:8px}
.ang-row{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:14px}
.ang-row .fld{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:6px}
.ang-form label{font-size:13px;font-weight:600;color:var(--grey)}
.ang-form input,.ang-form select{width:100%;height:48px;border:1px solid var(--line);border-radius:10px;
  padding:0 13px;font:inherit;font-size:15px;color:var(--ink);background:#fff;box-sizing:border-box}
.ang-form input:focus,.ang-form select:focus{outline:2px solid var(--sky);outline-offset:0;border-color:var(--sky)}
/* Radios/Checkboxen in den Fahrzeugdaten-Optionskarten bleiben klein (überschreibt .ang-form input) */
.ang-form .opt input{width:17px;height:17px;border:0;padding:0;accent-color:var(--blue);flex:none;background:none}
.ang-form select{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' stroke='%23587184' stroke-width='2' fill='none' stroke-linecap='round'/></svg>");
  background-repeat:no-repeat;background-position:right 12px center;padding-right:32px}

/* variable Breiten je nach Inhalt (Spezifität .ang-row .fld-* schlägt .ang-row .fld) */
.ang-row .fld-street{flex:1 1 76%}
.ang-row .fld-houseno{flex:0 1 22%;min-width:90px;max-width:150px}
.ang-row .fld-land{flex:1 1 24%}
.ang-row .fld-plz{flex:0 1 150px}
.ang-row .fld-ort{flex:1 1 40%}
.ang-row .fld-tel{flex:1 1 48%}
.ang-row .fld-email{flex:1 1 48%}

/* Selection-Card-Hervorhebung bei Auswahl */
.opt:has(input:checked){border-color:var(--blue);background:#EAF2FB;box-shadow:inset 0 0 0 1px var(--blue)}
.opt-cards .opt{justify-content:center;font-weight:600}

/* Kontakt-Einwilligung */
.ang-consent{display:flex;gap:10px;align-items:flex-start;margin:18px 0 4px;padding:12px 14px;
  background:#F4F8FB;border:1px solid var(--line);border-radius:10px;font-size:13.5px;color:#3B5468;line-height:1.5}
.ang-consent input{width:18px;height:18px;margin-top:2px;flex:none;accent-color:var(--blue)}
.ang-consent a{color:var(--navy)}

/* Verfügbarkeits-Datum */
.avail-date{margin-top:10px}
.avail-date input{max-width:220px}

/* Zwischenüberschrift FAHRZEUGDATEN */
.ang-sub{font-family:var(--disp);text-transform:uppercase;letter-spacing:1.2px;font-size:14px;
  color:var(--navy);font-weight:700;margin:24px 0 12px;padding-top:14px;border-top:1px solid var(--line)}
.ang-vehicle .fld{flex:1 1 30%}

/* Einheiten-Feld (km, €) – Suffix ist rein visuell, nicht Teil des Werts */
.unit-field{position:relative}
.unit-field input{padding-right:46px}
.unit-field .unit{position:absolute;right:13px;top:50%;transform:translateY(-50%);
  color:var(--grey);font-weight:700;font-size:14.5px;pointer-events:none}

/* Erstzulassung MM / JJJJ als ein Element */
.ez-group{display:flex;align-items:center;border:1px solid var(--line);border-radius:10px;background:#fff;
  height:48px;padding:0 6px}
.ez-group:focus-within{outline:2px solid var(--sky);border-color:var(--sky)}
.ez-group input{border:0;height:auto;padding:0;text-align:center;font-size:15px;background:transparent}
.ez-group input:focus{outline:none}
.ez-group .ez-dd{width:44px}
.ez-group .ez-mm{width:44px}
.ez-group .ez-yyyy{width:66px}
.ez-group .ez-sep{color:var(--grey);font-weight:700;padding:0 4px}

/* Leistungsfeld (Wert + Einheit) */
.pw-field{display:flex;gap:8px}
.pw-field input{flex:1 1 auto;min-width:0}
.pw-field select{flex:0 0 88px;width:88px}

/* Info-Tooltip (z. B. Erstzulassung) – Hover (Desktop) + Tap (aria-expanded) */
.lbl-tip{display:inline-flex;align-items:center;gap:7px;position:relative}
.info-i{width:18px;height:18px;border-radius:50%;border:0;background:var(--sky);color:#fff;
  font-size:12px;font-weight:800;line-height:1;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;font-style:italic}
.tip-bubble{position:absolute;left:0;top:calc(100% + 8px);z-index:20;display:none;
  background:var(--navy);color:#fff;font-size:12.5px;font-weight:500;line-height:1.4;
  padding:9px 12px;border-radius:8px;max-width:min(260px,80vw);box-shadow:0 8px 24px rgba(16,42,64,.25)}
.lbl-tip:hover .tip-bubble,
.info-i[aria-expanded="true"] + .tip-bubble{display:block}
@media(hover:none){ .lbl-tip:hover .tip-bubble{display:none} }  /* auf Touch nur per Tap */

/* Telefon mit Vorwahl */
.tel-group{display:flex;gap:8px}
.tel-group .tel-code{width:112px;flex:none;padding-right:26px;font-size:14.5px}
.tel-group .tel-number{flex:1 1 auto;min-width:0}

/* responsive */
@media(max-width:760px){
  .ang-row .fld-land{flex:1 1 30%}
  .ang-row .fld-ort{flex:1 1 100%}
  .ang-vehicle .fld{flex:1 1 45%}
}
@media(max-width:520px){
  .ang-row .fld{flex:1 1 100%}
  .ang-row .fld-street{flex:1 1 62%}      /* Straße + Hausnr. bleiben zusammen */
  .ang-row .fld-houseno{flex:1 1 32%}
  .ang-row .fld-land{flex:1 1 46%}
  .ang-row .fld-plz{flex:1 1 46%}
  .ang-vehicle .fld{flex:1 1 100%}
  .tel-group .tel-code{width:100px}
}

/* Dokument-Upload-Kästchen im Foto-Schritt */
.doc-drops{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:8px}
@media(max-width:560px){.doc-drops{grid-template-columns:1fr}}
.doc-drop{flex-direction:column;text-align:center;gap:6px;padding:16px 12px;min-height:70px}
.doc-drop .doc-name{font-size:12.5px;color:var(--go);font-style:normal;font-weight:700}