/* Fixes on top of the Heyflow stylesheet (flow.css). Loaded after it; keep every rule here a deliberate fix. */

/* Photo tiles (3 per row): labels like "Photovoltaik" used to break in the middle of the word on phones.
   Keep words whole and let the label scale with the frame width instead. */
.multiple-choice .option-content.picture .label,
.multiple-choice .label-container > .label {
  overflow-wrap: normal;
  word-break: normal;
  -webkit-hyphens: manual;
  hyphens: manual;
}
.multiple-choice-cols-3 .option-content.picture .label-container {
  padding: 12px 6px;
}
.multiple-choice-cols-3 .option-content.picture .label {
  /* "Wärmepumpe" is the widest word: about 6.8 px per px of font size; the tile grows with the frame width */
  font-size: clamp(0.66rem, calc((100vw - 100px) / 20.5), 1rem);
}

/* Inputs below 16px make iOS Safari zoom the page when a field gets focus. */
.input-box input:not([type="checkbox"]):not([type="radio"]),
.input input:not([type="checkbox"]):not([type="radio"]),
input.phone-input,
input.address-input {
  font-size: 16px !important;
}

/* The floating "Handynummer" label started at the left edge and ran over the country flag. */
.phone-block-otp-wrapper .input-floating-label {
  left: 59px !important;
}

/* Contact step: one button does it all. The code field appears after the SMS went out; the small
   "Code erneut senden" link only shows from then on. */
.phone-block-otp-wrapper .otp-container {
  display: none;
}
.phone-block-otp-wrapper.hf-code-sent .otp-container {
  display: flex;
  margin-top: 12px;
}
.phone-block-otp-wrapper .otp-container .otp-button {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  color: #0a0908 !important;
  min-height: 0 !important;
  padding: 4px 8px !important;
  text-decoration: underline;
  text-underline-offset: 3px;
  font-weight: 500;
}
.phone-block-otp-wrapper .otp-container .otp-button:disabled {
  text-decoration: none;
  opacity: 0.55;
}
.phone-block-otp-wrapper .otp-container .otp-button .status-indicator {
  display: none !important;
}
#hfotp {
  letter-spacing: 0.35em;
  font-variant-numeric: tabular-nums;
}

/* Details that were sent with the code are locked: keep them readable (Heyflow greys out read-only fields in italics). */
input[readonly]:not([data-blocktype="date-picker"]) {
  cursor: default;
  color: #0a0908;
  font-style: normal;
  opacity: 0.7;
}

/* Inside the homepage frame the page below follows the frame's height, so the frame needs no filler. */
html.hf-framed body {
  min-height: 0;
}
html.hf-framed {
  height: auto;
}

/* Field labels were #bababb on white (1.9:1). Darkened to pass WCAG AA (4.5:1). */
.input-floating-label label,
.input-floating-label label span {
  color: #6b6b6b !important;
}
/* Floating-label fields keep their example text transparent (the label does that job: Heyflow's own rule).
   Only the address field has a plain placeholder: darkened with the labels for contrast. */
input.address-input::placeholder {
  color: #6b6b6b !important;
}