/* ============================================================
   Ersteinschätzung - Fragebogen auf einer Seite
   ============================================================ */

/* Spalte mittig im Panel: links und rechts gleich viel Luft */
.anfrage{max-width:880px;margin:0 auto;width:100%;}
#anfrage .head{max-width:880px;width:100%;margin-left:auto;margin-right:auto;}

/* ---------- Fortschritt (sticky, klickbar) ---------- */
.aw-top{
  /* Negativer top-Wert gleicht das padding-top des Panels aus,
     damit die Leiste bündig am sichtbaren oberen Rand klebt. */
  position:sticky;top:calc(-1 * var(--panel-pad-top, 0px));z-index:24;
  display:flex;align-items:center;gap:18px;
  margin:0 0 clamp(8px,1.4vw,16px);
  padding:13px 2px 11px;
  background:var(--paper-2);
}
.aw-top::after{
  content:"";position:absolute;left:0;right:0;top:100%;height:18px;
  background:linear-gradient(var(--paper-2),transparent);
  pointer-events:none;
}
.aw-idx{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);white-space:nowrap;}
.aw-idx b{color:var(--accent);font-weight:500;}
.aw-progress{display:flex;gap:5px;flex:1;}
.aw-progress .seg{
  flex:1;background:none;border:0;cursor:pointer;
  padding:9px 0;margin:0;display:block;
}
.aw-progress .seg__bar{
  display:block;height:3px;border-radius:2px;
  background:color-mix(in oklab,var(--ink) 12%,transparent);
  overflow:hidden;position:relative;
  transition:background .3s var(--ease);
}
.aw-progress .seg:hover .seg__bar{background:color-mix(in oklab,var(--ink) 26%,transparent);}
.aw-progress .seg:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:3px;}
.aw-progress .seg__bar::after{
  content:"";position:absolute;inset:0;background:var(--accent);
  transform:scaleX(0);transform-origin:left;
  transition:transform .5s var(--ease);
}
.aw-progress .seg.on .seg__bar::after{transform:scaleX(1);}
.aw-skiphint{font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint,#908b84);white-space:nowrap;}
@media (max-width:760px){.aw-skiphint{display:none;}}

/* ---------- Abschnitte ---------- */
.aw-flow{display:flex;flex-direction:column;}
.aw-sec{padding-top:clamp(26px,3.4vw,44px);}
.aw-sec:first-child{padding-top:6px;}
.aw-sec + .aw-sec{margin-top:clamp(26px,3.6vw,52px);border-top:1px solid var(--line);}
.aw-sec__no{
  display:block;font-family:"IBM Plex Mono",monospace;
  font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--muted);margin-bottom:10px;
}
.aw-sec__no b{color:var(--accent);font-weight:500;}

.aw-step__title{font-family:"Spectral",serif;font-weight:500;font-size:clamp(24px,2.6vw,38px);letter-spacing:-.01em;margin:0;}
.aw-step__sub{color:var(--muted);font-size:clamp(14.5px,1.25vw,17px);margin:8px 0 0;max-width:58ch;line-height:1.55;}

.aw-q{margin-top:clamp(22px,2.6vw,34px);}
.aw-q__label{font-size:clamp(15.5px,1.35vw,18px);font-weight:500;margin:0 0 4px;}
.aw-q__hint{font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint,#908b84);margin-left:8px;font-weight:400;}
.aw-q__help{color:var(--muted);font-size:13.5px;line-height:1.5;margin:0 0 4px;max-width:60ch;}

/* ---------- Antwort-Optionen ---------- */
.aw-opts{display:grid;gap:8px;margin-top:12px;grid-template-columns:repeat(2,1fr);}
.aw-opts.c3{grid-template-columns:repeat(3,1fr);}
@media (max-width:640px){.aw-opts,.aw-opts.c3{grid-template-columns:1fr;}}

.aopt{
  position:relative;border:1px solid var(--line);border-radius:5px;padding:13px 15px;cursor:pointer;
  display:flex;align-items:flex-start;gap:11px;
  background:color-mix(in oklab,var(--ink) 4%,transparent);
  transition:border-color .25s var(--ease),background .25s var(--ease),box-shadow .25s var(--ease);
  user-select:none;
}
.aopt:hover{border-color:color-mix(in oklab,var(--ink) 34%,transparent);background:color-mix(in oklab,var(--ink) 2%,transparent);}
.aopt.on{border-color:var(--ink);background:var(--card);box-shadow:0 8px 22px -14px rgba(38,28,20,.35);}
.aopt:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
.aopt__check{
  width:17px;height:17px;flex:none;margin-top:1px;border:1.5px solid color-mix(in oklab,var(--ink) 38%,transparent);
  border-radius:50%;position:relative;transition:border-color .25s var(--ease),background .25s var(--ease);
}
.aopt--multi .aopt__check{border-radius:4px;}
.aopt.on .aopt__check{border-color:var(--accent);background:var(--accent);}
.aopt.on .aopt__check::after{
  content:"";position:absolute;left:4.5px;top:1.5px;width:4px;height:8px;
  border:solid #fff;border-width:0 1.8px 1.8px 0;transform:rotate(42deg);
}
.aopt__body{min-width:0;flex:1;display:block;}
.aopt__t{display:block;font-size:14.5px;font-weight:500;line-height:1.35;}

/* automatisch ergänzte Antworten (Verknüpfungslogik) */
.aopt__auto{
  display:none;font-family:"IBM Plex Mono",monospace;
  font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--accent);margin-top:4px;
}
.aopt.auto .aopt__auto{display:block;}
.aopt.pulse{animation:aoptPulse .9s var(--ease);}
@keyframes aoptPulse{
  0%{box-shadow:0 0 0 0 color-mix(in oklab,var(--accent) 45%,transparent);}
  100%{box-shadow:0 0 0 12px transparent;}
}
@media (prefers-reduced-motion:reduce){.aopt.pulse{animation:none;}}

/* „Sonstiges“ mit Texteingabe */
.aopt--other .aopt__input{
  display:none;width:100%;margin-top:8px;
  border:1px solid var(--line);border-radius:4px;padding:8px 11px;
  font-family:"IBM Plex Sans",sans-serif;font-size:14px;color:var(--ink);
  background:var(--card);outline:none;
  transition:border-color .3s var(--ease);
}
.aopt--other.on .aopt__input{display:block;}
.aopt--other .aopt__input:focus{border-color:var(--ink);}

/* Tooltip (Desktop: Hover/Fokus, subtil animiert) */
.aopt__tip{
  position:absolute;left:50%;bottom:calc(100% + 11px);transform:translate(-50%,7px) scale(.98);
  opacity:0;pointer-events:none;z-index:6;
  width:max-content;max-width:250px;
  background:var(--ink);color:var(--paper);
  font-size:12.5px;font-weight:400;line-height:1.5;letter-spacing:.005em;
  padding:9px 13px;border-radius:7px;
  box-shadow:0 14px 30px -14px rgba(38,28,20,.5);
  transition:opacity .3s var(--ease),transform .3s var(--ease);
}
.aopt__tip::after{
  content:"";position:absolute;left:50%;top:100%;transform:translateX(-50%);
  border:6px solid transparent;border-top-color:var(--ink);
}
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  .aopt:hover .aopt__tip,.aopt:focus-visible .aopt__tip{opacity:1;transform:translate(-50%,0) scale(1);transition-delay:.12s;}
}
@media (hover:hover) and (prefers-reduced-motion:reduce){
  .aopt:hover .aopt__tip,.aopt:focus-visible .aopt__tip{opacity:1;transform:translate(-50%,0);}
}
/* Touch: Erklärung als feine Zeile direkt unter der Antwort */
.aopt__inline{display:none;color:var(--muted);font-size:12.5px;line-height:1.4;font-weight:400;margin-top:3px;}
@media (hover:none){
  .aopt__tip{display:none;}
  .aopt__inline{display:block;}
}

/* ---------- Hinweis-Box (z. B. DSGVO-Launch) ---------- */
.aw-note{
  display:none;margin:10px 0 0;padding:12px 16px;
  border:1px solid color-mix(in oklab,var(--accent) 36%,var(--line));
  border-radius:5px;background:color-mix(in oklab,var(--accent) 5%,transparent);
  color:var(--muted);font-size:13px;line-height:1.55;max-width:72ch;
}
.aw-note.show{display:block;}

/* ---------- Eingabefelder (Kontakt) ---------- */
.aw-fields{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:18px;}
.aw-fields .full{grid-column:1/-1;}
@media (max-width:640px){.aw-fields{grid-template-columns:1fr;}}
.aw-field{display:flex;flex-direction:column;gap:6px;}
.aw-field label{font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);}
.aw-field label .req{color:var(--accent);}
.aw-field input,.aw-field textarea{
  border:1px solid var(--line);border-radius:4px;padding:12px 14px;
  font-family:"IBM Plex Sans",sans-serif;font-size:15px;color:var(--ink);
  background:var(--card);outline:none;transition:border-color .3s var(--ease),box-shadow .3s var(--ease);
  width:100%;
}
.aw-field textarea{min-height:96px;resize:vertical;line-height:1.5;}
.aw-field input:focus,.aw-field textarea:focus{border-color:var(--ink);box-shadow:0 4px 14px -10px rgba(38,28,20,.3);}
.aw-field input.err{border-color:var(--accent);}

/* ---------- Abschluss ---------- */
.aw-done__actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:26px;}
.aw-sent{font-family:"IBM Plex Mono",monospace;font-size:12px;color:var(--accent);margin-top:14px;display:none;}