/* ============================================================
   SEEWERK – Schnellanfrage (Popup in zwei Schritten, seit 09.10.2026)
   Markup: includes/schnellanfrage.php · Verhalten: assets/schnellanfrage.js
   Nutzt die Token aus style.css. Keine eigenen Farben erfinden.
   Responsive-Regeln stehen bewusst am Dateiende.
   ============================================================ */

.sa{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:20px}
/* [hidden] verliert sonst gegen display:flex/block der Klassen unten. */
.sa[hidden],.sa [hidden]{display:none !important}
.sa-backdrop{position:absolute;inset:0;background:rgba(10,22,40,.62);backdrop-filter:blur(3px)}

.sa-box{
  position:relative;background:#fff;border-radius:var(--radius-lg);
  width:min(520px,100%);max-height:min(92dvh,760px);overflow-y:auto;
  -webkit-overflow-scrolling:touch;box-shadow:var(--shadow-lg);
}

/* ---------- Kopf ---------- */
.sa-kopf{position:relative;padding:22px 70px 16px 24px;border-bottom:1px solid var(--line)}
.sa-schritt{display:block;font-size:.76rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--brand);margin-bottom:5px}
.sa-kopf h2{font-size:clamp(1.25rem,3vw,1.55rem);margin:0}
.sa-x{
  position:absolute;top:14px;right:14px;width:44px;height:44px;border:1px solid var(--line);
  background:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:1.5rem;line-height:1;color:var(--muted);cursor:pointer;transition:all .15s var(--easing);
}
.sa-x:hover{background:var(--paper);color:var(--ink)}

/* ---------- Körper ---------- */
.sa-form{padding:20px 24px 24px}
.sa-step{padding:0}
.sa-wahl{display:grid;grid-template-columns:minmax(0,1fr);gap:10px}
.sa-option{
  display:block;width:100%;min-width:0;min-height:44px;text-align:left;padding:15px 16px;
  border:1.5px solid var(--line);border-radius:var(--radius);background:#fff;
  font:inherit;color:var(--ink);cursor:pointer;
  transition:border-color .15s var(--easing),background .15s var(--easing);
}
.sa-option b{display:block;font-size:1rem;font-weight:650;line-height:1.3}
.sa-option span{display:block;font-size:.88rem;color:var(--muted);margin-top:3px;line-height:1.4}
.sa-option:hover,.sa-option:focus-visible{border-color:var(--brand);background:var(--paper)}
.sa-option:focus-visible{outline:2px solid rgba(15,91,224,.3);outline-offset:1px}
.sa-hinweis{margin:16px 0 0;font-size:.88rem;color:var(--muted);max-width:52ch}

.sa-gewaehlt{margin:0 0 14px;font-size:.88rem;color:var(--muted)}
.sa-gewaehlt b{color:var(--ink)}
.sa-feld{display:block;margin-bottom:12px;min-width:0}
.sa-feld > span{display:block;font-size:.88rem;font-weight:600;margin-bottom:5px;color:var(--ink)}
.sa-feld em{font-style:normal;font-weight:400;color:var(--muted)}
.sa-feld input,.sa-feld textarea{
  width:100%;padding:.72rem .85rem;border:1.5px solid var(--line);border-radius:var(--radius-sm);
  font:inherit;font-size:16px;background:#fff;color:var(--ink);
}
.sa-feld input:focus,.sa-feld textarea:focus{outline:2px solid rgba(15,91,224,.3);outline-offset:1px;border-color:var(--brand)}
.sa-feld textarea{resize:vertical;min-height:64px}
.sa-feld .sa-ungueltig{border-color:#D83A3A}
.sa-fehler{
  margin:4px 0 12px;padding:10px 14px;border-radius:var(--radius-sm);font-size:.88rem;font-weight:600;
  background:rgba(216,58,58,.09);border-left:3px solid #D83A3A;color:#8A2020;
}
.sa-fehler ul{margin:4px 0 0;padding-left:18px}
.sa-senden{margin-top:6px;min-height:48px}
.sa-senden[disabled]{opacity:.6;cursor:wait}
.sa-klein{margin:10px 0 0;font-size:.8rem;color:var(--muted);line-height:1.5}
.sa-zurueck{
  display:inline-flex;align-items:center;min-height:44px;margin-top:8px;padding:0;
  border:0;background:none;font:inherit;font-size:.9rem;color:var(--brand);cursor:pointer;
}
.sa-zurueck:hover{color:var(--brand-3)}
.sa-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

body.sa-offen{overflow:hidden}

/* ============================================================
   Responsive – bewusst am Dateiende
   ============================================================ */
@media (max-width:600px){
  /* Auf dem Handy von unten, wie ein Blatt: Daumen erreichen alles. */
  .sa{padding:0;align-items:flex-end}
  .sa-box{width:100%;max-height:100dvh;border-radius:var(--radius-lg) var(--radius-lg) 0 0}
  .sa-kopf{padding:18px 66px 14px 18px}
  .sa-form{padding:16px 18px calc(20px + env(safe-area-inset-bottom))}
}
@media (prefers-reduced-motion:no-preference){
  .sa-step.is-aktiv{animation:saIn .2s var(--easing)}
  @keyframes saIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
}