/* Phone (Teilnehmer) — Maße aus design/mockups/Phone-*.dc.html */
.ph {
  min-height: 100vh; min-height: 100dvh;
  padding: 64px 24px calc(24px + env(safe-area-inset-bottom, 0px));
  display: flex; flex-direction: column; gap: 28px;
  max-width: 560px; margin: 0 auto;
}
.ph__head { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 24px; }
.ph__brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
.ph__logo { height: 20px; width: auto; flex-shrink: 0; }
.ph__eyebrow { font-size: var(--fs-ph-eyebrow); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ph__chip { flex-shrink: 0; font-variant-numeric: tabular-nums; }
.ph__body { flex: 1 1 auto; display: flex; flex-direction: column; gap: 28px; }
.ph__foot { display: flex; flex-direction: column; gap: 8px; font-size: 12px; line-height: 1.4; color: var(--fg-mute); }
.ph__foot a { color: var(--fg-2); }

/* Join */
.join { display: flex; flex-direction: column; gap: 12px; margin-top: 56px; }
.join__title { font-family: var(--font-body); font-weight: 700; font-size: var(--fs-ph-h1); line-height: 1.1; letter-spacing: -0.01em; }
.join__caption { font-size: 16px; line-height: 1.4; color: var(--fg-2); }
.join__form { display: flex; flex-direction: column; gap: 12px; margin-top: 20px; }
.join__input {
  width: 100%; height: 88px; border: 2px solid var(--tts-black); background: var(--tts-white); padding: 0 20px;
  font-family: var(--font-display); font-weight: 700; font-size: var(--fs-ph-code); letter-spacing: .24em; text-align: center; color: var(--tts-black);
  font-variant-numeric: tabular-nums; outline: none;
}
.join__input::placeholder { color: var(--tts-ink-3); letter-spacing: .24em; }
.join__input:focus-visible { outline: 2px solid var(--tts-black); outline-offset: 2px; }
.join__input[aria-invalid="true"] { background: var(--tts-fog-50); }
.join__hint { font-size: 14px; line-height: 1.4; color: var(--fg-2); min-height: 1.4em; }
.join__hint--error { color: var(--fg-1); font-weight: 500; }

/* Warten */
.wait { display: flex; flex-direction: column; gap: 12px; margin-top: 56px; }
.wait__title { font-family: var(--font-body); font-weight: 700; font-size: var(--fs-ph-h1); line-height: 1.1; letter-spacing: -0.01em; }
.wait__caption { font-size: 14px; line-height: 1.4; color: var(--fg-2); }
.wait__dot { width: 12px; height: 12px; background: var(--tts-black); margin-top: 24px; }

/* Frage */
.q { display: flex; flex-direction: column; gap: 28px; }
.q__title { font-family: var(--font-body); font-weight: 700; font-size: var(--fs-ph-question); line-height: 1.2; letter-spacing: -0.01em; overflow-wrap: anywhere; }
.q__hint { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; color: var(--fg-2); margin-top: -16px; }
.q__list { display: flex; flex-direction: column; gap: 12px; }
.vl-option { position: relative; line-height: 1.25; overflow-wrap: anywhere; }
.vl-option input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.vl-option:has(input:focus-visible) { outline: 2px solid var(--tts-black); outline-offset: 2px; }
.vl-option:has(input:checked) { background: var(--tts-yellow); font-weight: 700; }

/* Skala */
.scale { display: flex; flex-direction: column; gap: 10px; }
.scale__row { display: grid; gap: 8px; grid-template-columns: repeat(var(--cols, 5), minmax(0, 1fr)); }
.scale__row--10 { --cols: 5; }
.scale__tile { min-height: var(--tap-min); padding: 0; justify-content: center; font-family: var(--font-body); font-weight: 500; font-size: 20px; font-variant-numeric: tabular-nums; }
.scale__labels { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; color: var(--fg-2); }

/* Texteingaben */
.field { display: flex; flex-direction: column; gap: 8px; }
.field__label { font-weight: 600; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--fg-2); }
.field__input, .field__textarea {
  width: 100%; min-height: var(--tap-min); border: 2px solid var(--tts-black); background: var(--tts-white); padding: 14px 16px;
  font-family: var(--font-body); font-weight: 500; font-size: 18px; line-height: 1.3; color: var(--tts-black); outline: none; resize: none;
}
.field__input::placeholder, .field__textarea::placeholder { color: var(--tts-ink-3); font-weight: 400; }
.field__input:focus-visible, .field__textarea:focus-visible { outline: 2px solid var(--tts-black); outline-offset: 2px; }
.field__textarea { min-height: 140px; }
.field__count { font-size: 13px; color: var(--fg-mute); text-align: right; font-variant-numeric: tabular-nums; }

/* Senden (sticky unten) */
.send { position: sticky; bottom: 0; padding-top: 16px; padding-bottom: 8px; background: var(--bg-page); display: flex; flex-direction: column; gap: 12px; margin-top: auto; }
.send__btn { width: 100%; }
.send__note { font-size: 12px; line-height: 1.4; color: var(--fg-mute); text-align: center; }
.send__error { font-size: 14px; color: var(--fg-1); font-weight: 500; text-align: center; }

/* Fallback für Browser ohne Flex-gap (Safari < 14.1, iOS 12–14): Abstände per Margin.
   `inset` kam in Safari zeitgleich mit Flex-gap (14.1) → brauchbarer Feature-Test. */
@supports not (inset: 0) {
  .ph > * + *, .ph__body > * + *, .q > * + * { margin-top: 28px; }
  .join > * + *, .join__form > * + *, .wait > * + *, .q__list > * + *, .send > * + * { margin-top: 12px; }
  .done > * + * { margin-top: 20px; }
  .scale > * + * { margin-top: 10px; }
  .field > * + *, .ph__foot > * + * { margin-top: 8px; }
  .ph__brand > * + * { margin-left: 12px; }
  .vl-status > * + * { margin-left: 10px; }
  .scale__labels > * + * { margin-left: 12px; }
  .q__hint { margin-top: 0; }
}

/* Danke / Geschlossen / Beendet */
.done { display: flex; flex-direction: column; gap: 20px; margin-top: 56px; }
.done__title { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-ph-danke); line-height: .95; letter-spacing: var(--tr-display); text-transform: uppercase; }
.done__title--body { font-family: var(--font-body); font-size: var(--fs-ph-h1); line-height: 1.1; letter-spacing: -0.01em; text-transform: none; }
.done__caption { font-size: 18px; line-height: 1.4; font-weight: 500; }
.done__stay { font-size: 14px; line-height: 1.4; color: var(--fg-2); }