/**
 * Joomla-Check: nur das Nötigste. Farben und Flächen kommen aus dem Template,
 * damit sich das Modul in jedes Design einfügt. Über die Moduleinstellung
 * "Eigenes CSS laden" lässt sich diese Datei abschalten.
 */

.jcheck__form {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem 1rem;
  align-items: flex-end;
  margin: 1.25rem 0 0;
}

.jcheck__feld {
  display: flex;
  flex-direction: column;
  gap: .3rem;
  flex: 1 1 15rem;
  min-width: 0;
}

.jcheck__feld label {
  font-size: .9rem;
  display: flex;
  gap: .4rem;
  align-items: baseline;
}

.jcheck__optional {
  opacity: .7;
  font-size: .85em;
}

.jcheck__feld input {
  width: 100%;
  min-height: 48px;
  padding: .7rem .9rem;
  border: 1px solid rgba(0, 0, 0, .18);
  border-radius: 10px;
  background: #fff;
  color: inherit;
  font: inherit;
}

.jcheck__feld input:focus {
  outline: 2px solid currentColor;
  outline-offset: 1px;
}

.jcheck__einwilligung {
  flex: 1 1 100%;
  display: flex;
  gap: .6rem;
  align-items: flex-start;
  font-size: .88rem;
}

.jcheck__einwilligung[hidden] {
  display: none;
}

.jcheck__einwilligung input {
  margin-top: .2rem;
  flex: 0 0 auto;
}

.jcheck__knopf {
  flex: 0 0 auto;
}

.jcheck__knopf[disabled] {
  opacity: .6;
  cursor: progress;
}

.jcheck__ausgabe:empty {
  display: none;
}

.jcheck__ausgabe {
  margin-top: 1.25rem;
}

.jcheck__karte {
  margin-bottom: 1rem;
}

/* Farbiger Streifen links je nach Supportstatus */
.jcheck__karte--rot,
.jcheck__karte--orange,
.jcheck__karte--gruen {
  border-left: 4px solid currentColor;
  padding-left: 1rem;
}

.jcheck__karte--rot {
  color: #D94C3D;
}

.jcheck__karte--orange {
  color: #E8A33C;
}

.jcheck__karte--gruen {
  color: #2DB36F;
}

.jcheck__karte--rot .ww-result__label,
.jcheck__karte--orange .ww-result__label,
.jcheck__karte--gruen .ww-result__label,
.jcheck__karte--rot strong,
.jcheck__karte--orange strong,
.jcheck__karte--gruen strong,
.jcheck__karte--rot .ww-price,
.jcheck__karte--orange .ww-price,
.jcheck__karte--gruen .ww-price {
  color: #1A1A1A;
}

.jcheck__rat,
.jcheck__fuss,
.jcheck__meldung {
  margin: 0 0 .75rem;
}

.jcheck__fuss {
  font-size: .85rem;
  opacity: .8;
  margin-top: .75rem;
}

.jcheck__meldung--fehler {
  font-weight: 500;
}

.jcheck__cta {
  display: inline-block;
}

/* Ohne JavaScript bleibt das Formular stehen, aber der Knopf führt ins Leere.
   Deshalb ein Hinweis, sobald JavaScript fehlt. */
.jcheck__form:not(.jcheck__form) + .jcheck__ausgabe {
  display: block;
}

/* Einspaltig: Formular und Ergebnis stehen untereinander. */
.ww-check.jcheck.ww-tile--lg {
  display: block;
}

.jcheck .jcheck__form,
.jcheck .jcheck__ausgabe {
  max-width: 46rem;
}

/* --------------------------------------------------------------------------
   Zweispaltig: Text und Formular links, Ergebnis rechts
   -------------------------------------------------------------------------- */

@media (min-width: 992px) {
  .ww-check.jcheck--zweispaltig.ww-tile--lg {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    column-gap: clamp(2rem, 5vw, 4rem);
    align-items: center;
  }

  .ww-check.jcheck--zweispaltig > * {
    grid-column: 1;
    max-width: 34em;
  }

  .ww-check.jcheck--zweispaltig > .jcheck__ausgabe {
    grid-column: 2;
    grid-row: 1 / span 20;
    align-self: center;
    max-width: none;
    margin-top: 0;
  }

  .ww-check.jcheck--zweispaltig .jcheck__form {
    max-width: none;
  }

  /* Die Felder stehen untereinander, damit sie in der halben Breite Platz haben */
  .ww-check.jcheck--zweispaltig .jcheck__feld {
    flex: 1 1 100%;
  }
}

/* Beispielkarte vor der Prüfung */
.jcheck__beispiel {
  position: relative;
}

.jcheck__ausgabe:has(.jcheck__beispiel) {
  margin-top: 0;
}

/* Technische Ursache zur Fehlersuche */
.jcheck__technik {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .8rem;
  opacity: .75;
  word-break: break-word;
  margin: .5rem 0 0;
}

/* --------------------------------------------------------------------------
   Gefundene Merkmale
   -------------------------------------------------------------------------- */

.jcheck__befunde {
  margin: 0 0 1rem;
}

.jcheck__befunde-titel {
  font-size: 1rem;
  margin: 0 0 .5rem;
}

.jcheck__befunde ul {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: .95rem;
}

.jcheck__befunde li {
  position: relative;
  padding-left: 1.1rem;
  margin-bottom: .25rem;
}

.jcheck__befunde li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .55em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  opacity: .45;
}

.jcheck__chips {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  margin: .75rem 0 0;
}

.jcheck__chips span {
  display: inline-block;
  padding: .2rem .6rem;
  border: 1px solid rgba(0, 0, 0, .15);
  border-radius: 999px;
  font-size: .82rem;
  background: rgba(255, 255, 255, .7);
}

.jcheck__chip-mehr {
  border-style: dashed !important;
  opacity: .75;
}