/* ============================================================================
   Conversational funnel — the presentation of the source (WPForms
   "Conversational Forms").

   Every measure, every neutral and every proportion below is taken from the
   reference implementation that runs this presentation in production
   (stromerzeuger-mieten24.de): the page in a plain light grey with a soft white
   glow, one column of 50rem, the welcome screen filling the stage, the question
   in turn at 28 % of the stage height with the answered and the coming ones
   greyed out around it, an answer as a flat tile with a letter key in front of
   it that widens to "Key A" under the pointer, a text answer as a wide
   underlined line, and a bottom bar carrying the percentage, the progress line
   and the two navigation arrows.

   Only the buttons carry the brand tone. Everything else — question, key,
   progress, arrows, hairlines — is the neutral #333 of the original: the source
   forms carry no colour scheme of their own, and the presentation lives from
   contrast, not from colour.

   The stage (.cf-main) is the scroller and a size container: the welcome screen
   measures one stage height (100cqh), the form keeps 72cqh of room below its
   last question so it can come to rest at the top like every other one.

   Loaded only on the funnels' A addresses (index.php); js/conversational.js
   drives it, css/conversational-nojs.css carries the same markup without
   JavaScript.
   ========================================================================= */

:root:has(.cf-page) {
  scroll-padding-bottom: 7rem;
}

.cf-page {
  --cf-ink: #333;                 /* question, answer, key, progress */
  --cf-line: rgba(51, 51, 51, .1);    /* hairline around a tile */
  --cf-tile: rgba(51, 51, 51, .024);  /* the tile itself */
  --cf-tile-hover: rgba(51, 51, 51, .05);
  --cf-key-hover: #ececec;        /* the key box under the pointer */
  --cf-tile-checked: rgba(51, 51, 51, .07);  /* the tile of a chosen answer */
  --cf-mark: rgba(51, 51, 51, .5);    /* a filled line, a mark on a phone */
  --cf-quiet: rgba(51, 51, 51, .72);  /* hints, percentage, legal line */
  --cf-required: #db4b5b;
  --cf-column: 50rem;
  --cf-pad: 2.5rem;

  min-height: 100svh;
  display: flex;
  flex-direction: column;
  background-color: #ebebeb;
  background-image: radial-gradient(#fff 0%, rgba(255, 255, 255, 0) 100%);
  background-attachment: fixed;
  color: var(--cf-ink);
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.5;
  word-break: break-word;
  hyphens: auto;
}

/* Once the script drives the page, the funnel is the window: nothing scrolls
   behind it, the stage inside it does the scrolling. */
.cf-page:has(.cf.is-running) {
  height: 100svh;
  overflow: hidden;
}

@media (max-width: 48rem) and (min-width: 31.3125rem) {
  .cf-page {
    --cf-pad: 3.75rem;
  }
}

.cf {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 0;
}

.cf-main {
  display: flex;
  flex: 1;
  align-items: flex-start;
  justify-content: center;
  padding: .5rem var(--cf-pad) 3rem;
}

.cf.is-running .cf-main {
  display: block;
  min-height: 0;
  padding-block: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  container-type: size;
}

.cf-stage {
  width: 100%;
  max-width: var(--cf-column);
  margin-inline: auto;
}


/* ---- the collected notice of a submission ------------------------------- */

.cf-alert {
  margin: 0;
  border: 1px solid var(--cf-required);
  border-radius: 4px;
  background: #fdecee;
  color: #8f1d2a;
  padding: .85rem 1.05rem;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.4;
}

.cf-alert[hidden] {
  display: none;
}

.cf-alert:not([hidden]) {
  margin-bottom: 1.5rem;
}

/* While the funnel runs it stands at the top edge of the stage: whatever the
   visitor scrolls to, the notice stays where it was read. */
.cf.is-running .cf-alert:not([hidden]) {
  position: sticky;
  top: 0;
  z-index: 5;
  margin-bottom: 0;
}


/* ---- welcome screen ----------------------------------------------------- */

.cf-intro {
  padding-block: 2.5rem;
  text-align: center;
}

.cf.is-running .cf-intro {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100cqh;
  margin-bottom: 2.1875rem;
}

.cf-title {
  margin: 0 0 .875rem;
  font-family: inherit;
  font-size: 3.125rem;
  font-weight: 300;
  line-height: 1.25;
  letter-spacing: normal;
  color: var(--cf-ink);
  text-wrap: balance;
  overflow-wrap: normal;
  hyphens: manual;
}

.cf-list {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 1.3125rem;
  line-height: 1.5;
}

/* The tick is part of the wording, not a drawn icon: the source carries every
   benefit line as "✓ …" in its own description. */
.cf-list li::before {
  content: "✓ ";
}

.cf-note {
  margin: 2rem 0 0;
  color: var(--cf-ink);
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.5;
}

.cf-note a {
  color: inherit;
  text-decoration: underline;
}

.cf-note a:hover {
  color: var(--color-primary-700);
}

.cf-start {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: .75rem 1.875rem;
  margin-top: 3.125rem;
}

@media (max-width: 31.25rem) {
  .cf-title {
    font-size: 1.875rem;
    line-height: 1.2;
  }

  .cf-list {
    font-size: 1rem;
  }

  .cf-start .cf-hint {
    display: none;
  }
}


/* ---- buttons and the key hint ------------------------------------------- */

.cf-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 3px;
  background: var(--color-primary-600);
  color: #fff;
  padding: .75rem 1.9375rem;
  font-family: inherit;
  font-size: 1.1875rem;
  font-weight: 700;
  line-height: normal;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 3px 10px rgba(0, 0, 0, .15);
  transition: background-color .15s, box-shadow .15s;
}

.cf-btn-start {
  gap: .5rem;
}

.cf-btn-arrow {
  flex: none;
  margin-right: -.25rem;
}

.cf-btn:hover,
.cf-btn:focus {
  background: var(--color-primary-700);
  color: #fff;
  box-shadow: 0 2px 5px rgba(0, 0, 0, .15);
}

.cf-btn:active {
  background: var(--color-primary-800);
}

.cf-btn:disabled {
  opacity: .65;
  cursor: default;
}

.cf-hint {
  color: var(--cf-quiet);
  font-size: 1.125rem;
  line-height: 1.5;
}

.cf-hint strong {
  font-weight: 700;
}


/* ---- one question ------------------------------------------------------- */

.cf-step {
  margin: 0 0 4.6875rem;
  border: 0;
  padding: 0;
  min-width: 0;
}

.cf-step[hidden] {
  display: none;
}

.cf-step:focus {
  outline: none;
}

/* Everything but the question in turn stays readable as a shape and steps
   back; under the pointer it brightens, because a click on it leads there. */
.cf.is-running .cf-step {
  position: relative;
  opacity: .2;
  transition: opacity .25s ease-in-out;
}

.cf.is-running .cf-step.is-active {
  opacity: 1;
}

.cf.is-running .cf-step:not(.is-active):hover {
  opacity: .45;
}

.cf-step-inner {
  width: 100%;
}

.cf-question {
  display: block;
  position: relative;
  margin: 0 0 .6875rem;
  padding: 0;
  font-family: inherit;
  font-size: 1.4375rem;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: normal;
  color: var(--cf-ink);
  text-wrap: wrap;
}

.cf-index {
  display: none;
}

.cf.is-running .cf-index:not(:empty) {
  display: inline;
  position: absolute;
  left: -2.25rem;
  font-weight: 300;
}

@media (max-width: 31.25rem) {
  .cf.is-running .cf-index:not(:empty) {
    position: relative;
    left: 0;
    margin-right: .3125rem;
  }
}

.cf-required {
  color: var(--cf-required);
}

/* A question that may stay empty carries its mark in the wording — small, quiet
   and unmistakable, so it is read together with the question itself. */
.cf-optional {
  display: inline-block;
  margin-left: .5rem;
  border: 1px solid rgba(51, 51, 51, .3);
  border-radius: 999px;
  background: rgba(51, 51, 51, .07);
  color: var(--cf-ink);
  padding: 0 .5rem;
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .02em;
  line-height: 1.55;
  vertical-align: middle;
  white-space: nowrap;
}

.cf-optional-note {
  margin: .75rem 0 0;
  color: var(--cf-ink);
  font-size: 1rem;
  line-height: 1.5;
}


/* ---- the answers -------------------------------------------------------- */

.cf-options {
  display: grid;
  grid-template-columns: 1fr;
  gap: .9375rem;
}

/* Two columns only for a very long list — the source keeps everything shorter
   in one column, where an answer is read in a single line. */
@media (min-width: 48.0625rem) {
  .cf-options-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: .875rem;
  }
}

.cf-option {
  display: block;
  position: relative;
  min-height: 3.25rem;
  border: 1px solid var(--cf-line);
  border-radius: 4px;
  background: var(--cf-tile);
  padding: .5625rem .5625rem .5625rem 3.125rem;
  font-size: 1.125rem;
  line-height: 2.0625rem;
  cursor: pointer;
  transition: background-color .15s, border-color .15s, box-shadow .15s;
}

.cf-option input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.cf-option:hover {
  background: var(--cf-tile-hover);
}

/* The chosen answer is the one thing on the screen that has already been
   settled — so it is drawn, not merely outlined: the tile takes a full line
   around it (the inner ring doubles the hairline without moving anything), the
   ground darkens a step, and the key box turns over to light on dark. */
.cf-option:has(input:checked) {
  border-color: var(--cf-ink);
  background: var(--cf-tile-checked);
  box-shadow: inset 0 0 0 1px var(--cf-ink);
}

.cf-option:has(input:checked) .cf-key {
  border-color: var(--cf-ink);
  background: var(--cf-ink);
  color: #fff;
}

.cf-option:has(input:focus-visible) {
  outline: 3px solid var(--color-primary-600);
  outline-offset: 2px;
}

.cf-key {
  display: block;
  position: absolute;
  top: .5625rem;
  left: .625rem;
  width: 2.0625rem;
  height: 2.0625rem;
  border: 1px solid var(--cf-ink);
  border-radius: 3px;
  background: none;
  color: var(--cf-ink);
  font-size: 1.125rem;
  line-height: 1.875rem;
  text-align: center;
  transition: width .15s, left .15s, background-color .15s, border-color .15s, color .15s;
}

.cf-key-label {
  display: none;
}

/* The kernel of the presentation: under the pointer — and for a moment after a
   letter was pressed — the box widens and names itself "Key A". That is how the
   funnel teaches that it can be answered from the keyboard alone. */
@media (min-width: 48.0625rem) {
  .cf-option:hover:not(:has(input:checked)) .cf-key,
  .cf-option.is-keyed .cf-key {
    width: 4.1875rem;
    left: -1.5rem;
    background: var(--cf-key-hover);
  }

  .cf-option:hover:not(:has(input:checked)) .cf-key-label,
  .cf-option.is-keyed .cf-key-label {
    display: inline;
  }

  .cf-option.is-keyed {
    background: var(--cf-tile-hover);
  }
}

/* No keyboard on a phone: there the box is a plain mark that carries the tick
   of the chosen answer. */
@media (max-width: 48rem) {
  .cf-key {
    border-color: var(--cf-mark);
    border-radius: 50%;
    color: transparent;
  }

  /* No letter to read here — the box of the chosen answer is a filled dot with
     the tick in it. */
  .cf-option:has(input:checked) .cf-key {
    color: transparent;
  }

  .cf-option:has(input:checked) .cf-key::after {
    content: "✓";
    position: absolute;
    inset: 0;
    color: #fff;
  }
}

.cf-option-check {
  max-width: 100%;
}

.cf-consent {
  margin: 1.875rem 0 0;
  color: var(--cf-ink);
  font-size: 1rem;
  line-height: 1.5;
}

.cf-consent a {
  color: inherit;
  text-decoration: underline;
}

.cf-consent a:hover {
  color: var(--color-primary-700);
}


/* ---- a typed answer ----------------------------------------------------- */

.cf-input {
  width: 100%;
  max-width: 100%;
  height: 4.125rem;
  border: 0;
  border-bottom: 1px solid var(--cf-line);
  border-radius: 0;
  background: none;
  color: var(--cf-ink);
  padding: .625rem 0;
  font-family: inherit;
  font-size: 1.875rem;
  font-weight: 400;
  line-height: normal;
  transition: border-color .15s;
}

.cf-input::placeholder {
  color: rgba(51, 51, 51, .58);
  opacity: 1;
}

.cf-input:hover,
.cf-input:focus {
  border-bottom-color: var(--cf-mark);
}

.cf-input:focus {
  outline: none;
}

.cf-input[aria-invalid="true"] {
  border-bottom-color: var(--cf-required);
}

.cf-input--area {
  height: auto;
  min-height: 4.125rem;
  font-size: 1.375rem;
  line-height: 1.4;
  resize: vertical;
}

@media (max-width: 31.25rem) {
  .cf-input {
    font-size: 1.5rem;
  }
}

.cf-page .field-error {
  display: block;
}

.cf-page .field-error:empty {
  display: none;
}


/* ---- the end of the questions ------------------------------------------- */

.cf-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .9rem 1.25rem;
  margin-top: 4.6875rem;
}

.cf-actions[hidden] {
  display: none;
}

.cf-required-note {
  margin: 1.25rem 0 0;
  color: var(--cf-quiet);
  font-size: .875rem;
}

.cf-form {
  display: none;
}

/* Room below the last question: it comes to rest at the same height as every
   other one instead of sticking to the bottom edge of the stage. */
.cf.is-running .cf-form {
  display: block;
  padding-bottom: 72cqh;
}

@media (max-height: 47.5rem) {
  .cf.is-running .cf-title {
    font-size: 2.25rem;
  }

  .cf.is-running .cf-list {
    font-size: 1.125rem;
  }

  .cf.is-running .cf-note {
    margin-top: 1.5rem;
  }

  .cf.is-running .cf-start {
    margin-top: 2rem;
  }
}


/* ---- the confirmation of a submission ----------------------------------- */

.cf-done {
  padding-block: 2.5rem;
}

.cf.is-running .cf-done {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100cqh;
}

.cf-done:focus {
  outline: none;
}

.cf-done-msg {
  margin: 0;
  font-size: 1.4375rem;
  font-weight: 400;
  line-height: 1.5;
}

.cf-done-note {
  margin: 1.25rem 0 0;
  font-size: 1.125rem;
  line-height: 1.5;
}

.cf-done .cf-actions {
  margin-top: 2.5rem;
}

/* Once the answer has arrived there is nothing left to fill in. */
.cf.is-done .cf-intro,
.cf.is-done .cf-form {
  display: none;
}


/* ---- the bottom bar ----------------------------------------------------- */

.cf-bar {
  position: sticky;
  bottom: 0;
  z-index: 20;
  background: #fff;
  font-size: .8125rem;
  transition: background-color .25s;
}

.cf.is-intro .cf-bar {
  background: none;
}

.cf.is-intro .cf-bar-inner {
  display: none;
}

.cf.is-intro .cf-legal {
  padding-top: .75rem;
}

@keyframes cf-bar-appear {
  from {
    opacity: 0;
    transform: translateY(.75rem);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.cf-bar-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: space-between;
  width: 100%;
  max-width: 51.875rem;
  margin-inline: auto;
  padding: .9375rem .9375rem .625rem;
  animation: cf-bar-appear .3s both;
}

.cf-bar-inner[hidden] {
  display: none;
}

.cf-progress {
  min-width: 0;
}

.cf-progress-label {
  margin: 0 0 .5rem;
  opacity: .75;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.cf-progress-track {
  position: relative;
  width: 14.8125rem;
  height: .625rem;
  border-radius: 10px;
  background: rgba(0, 0, 0, .25);
}

.cf-progress-fill {
  display: block;
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  height: 100%;
  border-radius: 10px;
  background: var(--cf-ink);
  transition: width .35s;
}

.cf-switch {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: space-between;
  width: 4.8125rem;
  margin-left: 1.25rem;
  opacity: .75;
}

.cf-switch button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.9375rem;
  height: 1.9375rem;
  border: 2px solid var(--cf-ink);
  border-radius: 50%;
  background: none;
  color: var(--cf-ink);
  padding: 0;
  cursor: pointer;
}

.cf-switch button:disabled {
  opacity: .45;
  cursor: default;
}

@media (max-width: 48rem) {
  .cf-progress-track {
    width: 8.75rem;
  }

  .cf-switch {
    width: 6rem;
    margin-top: -.3125rem;
    margin-left: .9375rem;
  }

  .cf-switch button {
    width: 2.5625rem;
    height: 2.5625rem;
  }
}

.cf-legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .3rem 1.5rem;
  width: 100%;
  color: var(--cf-quiet);
  padding: 0 .9375rem .75rem;
  font-size: .8125rem;
}

.cf-bar-inner[hidden] + .cf-legal {
  padding-top: .75rem;
}

.cf-legal p {
  margin: 0;
}

.cf-legal ul {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem 1.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cf-legal a {
  color: inherit;
  text-decoration: none;
}

.cf-legal a:hover {
  color: var(--cf-ink);
  text-decoration: underline;
}


/* ---- what the system asks for ------------------------------------------- */

@media (prefers-contrast: more) {
  .cf.is-running .cf-step {
    opacity: .55;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cf.is-running .cf-main {
    scroll-behavior: auto;
  }

  .cf.is-running .cf-step,
  .cf-bar,
  .cf-progress-fill,
  .cf-key {
    transition: none;
  }

  .cf-bar-inner {
    animation: none;
  }
}