/* ==========================================================================
   Quali-Quiz und Kalender im Modal.
   Setzt page.css voraus (Tokens, Buttons, Fokus).
   ========================================================================== */

.qual[hidden]{display:none}
.qual{
  position:fixed;inset:0;z-index:1000;
  display:grid;place-items:center;padding:clamp(14px,3.5vw,40px);
  background:rgba(26,28,28,.55);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
  animation:qual-in .25s var(--ease);
}
@keyframes qual-in{from{opacity:0}to{opacity:1}}

.qual__box{
  position:relative;width:100%;max-width:600px;
  max-height:calc(100dvh - 28px);overflow-y:auto;
  background:var(--weiss);border-radius:var(--radius);
  box-shadow:0 24px 60px -20px rgba(26,28,28,.55);
  padding:clamp(24px,3.2vw,38px);
}
/* Im Kalenderschritt darf der Kasten breiter werden, Calendly braucht Platz. */
.qual--kalender .qual__box{max-width:820px}

.qual__close{
  position:absolute;top:10px;right:10px;
  width:44px;height:44px;display:grid;place-items:center;
  border-radius:var(--radius);color:var(--text-mute);
  transition:color var(--t-fast) var(--ease),background var(--t-fast) var(--ease);
}
.qual__close:hover{color:var(--schwarz);background:var(--sandgrau)}

/* --- Kopf: Schrittzaehler und Fortschritt ---------------------------- */
.qual__head{
  display:flex;align-items:center;gap:16px;
  margin-bottom:24px;padding-right:44px;
}
.qual__back{
  display:grid;place-items:center;flex:none;
  width:44px;height:44px;margin-left:-10px;
  border-radius:var(--radius);color:var(--text-mute);
  transition:color var(--t-fast) var(--ease),background var(--t-fast) var(--ease);
}
.qual__back:hover{color:var(--schwarz);background:var(--sandgrau)}
.qual__back[hidden]{display:none}
.qual__step{
  font-size:.75rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--text-mute);font-variant-numeric:tabular-nums;flex:none;
}
/* Fortschritt als Linie, nicht als Balken mit Farbe: die Marke hat keine
   Signalfarbe, Fortschritt laeuft ueber Kontrast (DT-DESIGN.md L113). */
.qual__bar{flex:1;height:2px;background:var(--line-soft);border-radius:2px;overflow:hidden}
.qual__bar i{
  display:block;height:100%;width:0;background:var(--schwarz);
  transform-origin:left;transition:width var(--t-int) var(--ease);
}

/* --- Frage ------------------------------------------------------------ */
.qual__frage{
  font-size:clamp(19px,2vw,25px);font-weight:600;line-height:1.25;
  letter-spacing:-.01em;margin-bottom:20px;
}

.qual__optionen{display:grid;gap:10px}
.qual__opt{
  display:flex;align-items:flex-start;gap:12px;
  width:100%;min-height:56px;padding:14px 18px;
  border:1px solid var(--line-strong);border-radius:var(--radius);
  background:var(--weiss);text-align:left;line-height:1.45;
  transition:border-color var(--t-int) var(--ease),background var(--t-int) var(--ease),
             color var(--t-int) var(--ease),transform var(--t-int) var(--ease),
             box-shadow var(--t-int) var(--ease);
}
.qual__opt:hover{border-color:var(--schwarz);transform:translateY(-2px);box-shadow:var(--sh-1)}
/* Auswahl ohne Signalfarbe: invertierte Flaeche, gleiches Muster wie die
   Kacheln auf /termin und im Zeitersparnis-Rechner. */
.qual__opt[aria-pressed="true"]{
  background:var(--schwarz);color:var(--weiss);border-color:var(--schwarz);
  transform:none;box-shadow:none;
}
.qual__opt-label{display:block;font-weight:600;font-size:1rem}
.qual__opt-sub{
  display:block;font-size:.875rem;font-weight:400;line-height:1.45;
  color:var(--text-mute);margin-top:3px;
}
.qual__opt[aria-pressed="true"] .qual__opt-sub{color:var(--grau)}
.qual__opt-mark{
  flex:none;width:18px;height:18px;margin-top:2px;
  border:1px solid var(--line-strong);border-radius:50%;
  display:grid;place-items:center;
  transition:border-color var(--t-int) var(--ease),background var(--t-int) var(--ease);
}
.qual__opt-mark svg{opacity:0;transition:opacity var(--t-fast) var(--ease)}
.qual__opt[aria-pressed="true"] .qual__opt-mark{background:var(--weiss);border-color:var(--weiss)}
.qual__opt[aria-pressed="true"] .qual__opt-mark svg{opacity:1}

/* --- Kalenderschritt --------------------------------------------------- */
.qual__abschluss h2{font-size:clamp(20px,2.1vw,26px);line-height:1.22;margin-bottom:10px}
.qual__abschluss p{font-size:.9375rem;line-height:1.55;color:var(--text-mute);margin-bottom:20px}
.qual__cal{
  width:100%;border:1px solid var(--line);border-radius:var(--radius);
  background:var(--weiss);display:block;
}
.qual__hinweis{
  margin-top:16px;padding-top:14px;border-top:1px solid var(--line-soft);
  font-size:.8125rem;line-height:1.55;color:var(--text-mute);
}

@media (prefers-reduced-motion: reduce){
  .qual{animation:none}
  .qual__bar i{transition:none}
}


/* --- Eingebettete Fassung (z.B. /termin) -------------------------------
   Dieselbe Logik wie im Modal, nur ohne Huelle. Kein Overlay, kein
   Schliessen-Knopf, die erste Frage steht sofort da. */
.qual--inline{
  background:var(--weiss);border-radius:var(--radius);
  box-shadow:var(--ring),var(--sh-2);
  padding:clamp(22px,2.8vw,32px);
}
.qual--inline .qual__head{padding-right:0}
.qual--inline .qual__frage{font-size:clamp(18px,1.8vw,22px)}
/* Im Kalenderschritt darf der Kasten die Karte sprengen, Calendly braucht
   Hoehe. Die Seite scrollt dann, das ist an dieser Stelle in Ordnung. */
.qual--inline.qual--kalender{padding-bottom:clamp(18px,2.2vw,26px)}
.qual--inline .qual__cal{min-height:620px}

/* Auf breiten Karten (z.B. /termin mit 1400px) stehen die Antworten in zwei
   Spalten. Sonst waeren es Baender von 1300px Breite fuer drei Woerter.
   Bei ungerader Anzahl bekommt die letzte Antwort die ganze Zeile, damit
   keine halb leere Reihe entsteht. */
@media(min-width:1000px){
  .qual--inline{padding:clamp(28px,2.6vw,40px)}
  .qual--inline .qual__frage{text-align:center;font-size:clamp(21px,1.9vw,26px)}
  .qual--inline .qual__optionen{grid-template-columns:repeat(2,minmax(0,1fr))}
  .qual--inline .qual__optionen > :last-child:nth-child(odd){grid-column:1 / -1}
  /* Der Abschluss-Text steht mittig ueber dem Kalender, der Kalender selbst
     nutzt die volle Breite. */
  .qual--inline .qual__abschluss h2,
  .qual--inline .qual__abschluss p{text-align:center;max-width:60ch;margin-inline:auto}
  .qual--inline .qual__cal{min-height:700px}
}