/*
 * Kundenzufriedenheit.
 * Farben wie im Katalog: #0f6e6e erreicht auf Weiß 5,9:1 und besteht damit
 * auch als kleiner Text, das Marken-Türkis #008080 tut das nicht.
 */

.lp-umfrage {
  --u-akzent: #0f6e6e;
  --u-akzent-dunkel: #0a5252;
  --u-ink: #16211f;
  --u-leise: #55635f;
  --u-linie: #d8e0de;
  --u-flaeche: #f4f7f6;

  color: var(--u-ink);
  padding-bottom: 3rem;
}

.lp-umfrage :focus-visible { outline: 3px solid var(--u-akzent); outline-offset: 2px; }

.lp-umfrage__block { border: 0; margin: 0 0 2.2rem; padding: 0; }
.lp-umfrage__block > legend,
.lp-umfrage__block > h2 {
  font-size: 1.15rem; font-weight: 600; margin: 0 0 .9rem; padding: 0;
  border-bottom: 1px solid var(--u-linie); width: 100%; padding-bottom: .4rem;
}

/* ---------- Angaben ---------- */

.lp-umfrage__raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 0 1rem; }
.lp-umfrage__feld { margin: 0 0 1rem; }
.lp-umfrage__feld label { display: block; font-weight: 600; font-size: .88rem; margin-bottom: .25rem; }
.lp-umfrage__feld input,
.lp-umfrage__feld textarea {
  width: 100%; padding: .55rem .65rem; font: inherit;
  border: 1px solid var(--u-linie); border-radius: 3px; background: #fff;
}
.lp-umfrage__feld input[aria-invalid="true"] { border-color: #b3261e; }
.lp-umfrage__feldfehler { display: block; margin-top: .25rem; font-size: .84rem; color: #b3261e; }
.lp-umfrage__pflicht { color: #b3261e; }
.lp-umfrage__pflichthinweis { font-size: .82rem; color: var(--u-leise); margin: 0 0 1.2rem; }

/* ---------- Bewertungsskala ---------- */

.lp-umfrage__skalahinweis { font-size: .88rem; color: var(--u-leise); margin: 0 0 1.2rem; }

.lp-umfrage__frage {
  border: 1px solid var(--u-linie); border-radius: 4px;
  margin: 0 0 .7rem; padding: .8rem 1rem 1rem; background: #fff;
}
.lp-umfrage__frage--fehler { border-color: #b3261e; background: #fdeeec; }
.lp-umfrage__frage > legend {
  font-weight: 600; font-size: .95rem; padding: 0; margin-bottom: .6rem;
}

.lp-umfrage__skala { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; }
.lp-umfrage__pol { font-size: .82rem; color: var(--u-leise); flex: 1; }
.lp-umfrage__pol--rechts { text-align: right; }

.lp-umfrage__stufen { display: flex; gap: .3rem; flex: none; }
.lp-umfrage__stufe { position: relative; }

/*
 * Die Auswahl liegt auf dem Kästchen selbst, nicht auf einem winzigen Knopf:
 * größere Trefferfläche, und der gewählte Wert bleibt ohne Farbe erkennbar
 * (Rahmen und Schriftschnitt), nicht nur farblich.
 */
.lp-umfrage__stufe input {
  position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer;
}
.lp-umfrage__stufe label {
  display: flex; align-items: center; justify-content: center;
  width: 2.6rem; height: 2.6rem; cursor: pointer;
  border: 1px solid var(--u-linie); border-radius: 4px; background: #fff;
  font-size: .95rem; color: var(--u-ink);
}
.lp-umfrage__stufe input:hover + label { border-color: var(--u-akzent); background: var(--u-flaeche); }
.lp-umfrage__stufe input:checked + label {
  border-color: var(--u-akzent); border-width: 2px;
  background: var(--u-akzent); color: #fff; font-weight: 700;
}
.lp-umfrage__stufe input:focus-visible + label { outline: 3px solid var(--u-akzent); outline-offset: 2px; }

@media (max-width: 34rem) {
  .lp-umfrage__skala { gap: .3rem; }
  .lp-umfrage__pol { flex: 0 0 100%; }
  .lp-umfrage__pol--rechts { text-align: left; }
  .lp-umfrage__stufen { width: 100%; justify-content: space-between; }
  .lp-umfrage__stufe label { width: 2.9rem; height: 2.9rem; }
}

/* ---------- Einwilligung ---------- */

.lp-umfrage__einwilligung p { margin: 0 0 .7rem; }
.lp-umfrage__einwilligung label { display: flex; gap: .6rem; align-items: flex-start; font-size: .9rem; }
.lp-umfrage__einwilligung input { margin-top: .25rem; flex: none; }

/* Honigtopf gegen Bots - für Menschen unsichtbar, für Screenreader ausgeblendet. */
.lp-umfrage__falle { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Knöpfe und Meldungen ---------- */

.lp-umfrage__knopf,
.lp-umfrage .lp-umfrage__knopf:link,
.lp-umfrage .lp-umfrage__knopf:visited {
  display: inline-block; padding: .7rem 1.6rem; font: inherit; font-weight: 600;
  border: 1px solid var(--u-akzent); border-radius: 3px;
  background: var(--u-akzent); color: #fff; cursor: pointer; text-decoration: none;
}
.lp-umfrage .lp-umfrage__knopf:hover,
.lp-umfrage .lp-umfrage__knopf:focus,
.lp-umfrage .lp-umfrage__knopf:active {
  background: var(--u-akzent-dunkel); border-color: var(--u-akzent-dunkel); color: #fff;
}
.lp-umfrage__senden { font-size: 1rem; }

.lp-umfrage__hinweis { padding: .9rem 1.1rem; border-radius: 4px; margin-bottom: 1.6rem; border: 1px solid; }
.lp-umfrage__hinweis--fehler { background: #fdeeec; border-color: #e3a9a2; color: #8a2018; }
.lp-umfrage__hinweis ul { margin: .4rem 0 0; padding-left: 1.1rem; }

.lp-umfrage__abschluss {
  text-align: center; padding: 3rem 1.5rem;
  background: #f2f9f5; border: 1px solid #b9dbc9; border-radius: 6px;
}
.lp-umfrage__haken {
  display: inline-flex; align-items: center; justify-content: center;
  width: 3rem; height: 3rem; margin-bottom: .8rem;
  border-radius: 50%; background: #1f7a4d; color: #fff; font-size: 1.5rem; line-height: 1;
}
.lp-umfrage .lp-umfrage__abschluss-titel { margin: 0 0 .6rem; padding: 0; font-size: 1.3rem; }
.lp-umfrage__abschluss p { margin: 0 0 .6rem; color: var(--u-leise); }
.lp-umfrage__wege { margin-top: 1.4rem !important; }