/* WFL Webseitencheck Frontend
   Formular nutzt Elementor-Klassen, damit Site Settings/Form-Styles greifen. */
.wfl-check{
  max-width:980px;
  margin:0 auto;
  font-family:inherit;
}
.wfl-check [hidden]{display:none!important}

.wfl-check-head{
  text-align:center;
  margin-bottom:24px;
}
.wfl-eyebrow{
  font-weight:700;
  opacity:.7;
}

.wfl-check-card{
  background:var(--wfl-check-card-bg, #d5dfdd);
  border-radius:18px;
  padding:clamp(28px, 4vw, 56px);
  margin-top:18px;
}

.wfl-form-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(18px, 3vw, 32px);
}

.wfl-field{
  margin-bottom:clamp(20px, 3vw, 34px);
}

/* Nur minimale Ergänzungen: Elementor soll Schrift, Farben, Buttons und Größen übernehmen. */
.wfl-check .elementor-field-label,
.wfl-field label{
  display:block;
  margin-bottom:8px;
  font-weight:inherit;
}

.wfl-check .elementor-field,
.wfl-field input{
  width:100%;
  min-height:44px;
  background:transparent;
  border-width:0 0 2px 0;
  border-style:solid;
  border-color:rgba(255,255,255,.65);
  border-radius:0;
  padding:10px 0 12px;
  box-shadow:none;
}

.wfl-check .elementor-field:focus,
.wfl-field input:focus{
  outline:0;
  border-color:currentColor;
  box-shadow:none;
}

.wfl-consent{
  display:flex;
  align-items:flex-start;
  gap:14px;
  margin:8px 0 28px;
  line-height:1.45;
}
.wfl-consent input[type="checkbox"]{
  flex:0 0 auto;
  width:28px;
  height:28px;
  margin-top:2px;
}

.wfl-check button,
.wfl-cta{
  cursor:pointer;
}
.wfl-check button:disabled{
  opacity:.65;
  cursor:not-allowed;
}
/* 
.wfl-loading{
  text-align:center;
  padding:30px;
}
.wfl-spinner{
  width:42px;
  height:42px;
  border:4px solid #ddd;
  border-top-color:#111;
  border-radius:50%;
  animation:wflspin 1s linear infinite;
  margin:0 auto 12px;
}
@keyframes wflspin{to{transform:rotate(360deg)}} */

.wfl-result-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
  margin-top:20px;
}
.wfl-score-card,
.wfl-detail-box,
.wfl-cta-box,
.wfl-error,
.wfl-total{
  border-radius:18px;
  padding:24px;
  margin-top:18px;
}
.wfl-score-card{background:#eee}
.wfl-score-card span{display:block;margin-bottom:10px}
.wfl-score-card strong{font-size:28px}
.wfl-score-card.good{background:#e5f6ea}
.wfl-score-card.medium{background:#fff3cd}
.wfl-score-card.bad{background:#f8d7da}
.wfl-score-card.neutral{background:#eee}
.wfl-total{text-align:center;background:#111;color:#fff}
.wfl-total span{display:block}
.wfl-total strong{font-size:44px}
.wfl-detail-box,.wfl-cta-box{background:#f6f6f6}
.wfl-success{background:#e5f6ea;border-radius:12px;padding:14px 16px;margin-top:14px;font-weight:700}
.wfl-detail-feedback .wfl-error{margin-top:14px}
.wfl-error{background:#f8d7da}

@media(max-width:767px){
  .wfl-form-grid,
  .wfl-result-grid{grid-template-columns:1fr}
  .wfl-check-card{padding:28px 22px}
}

.wfl-form-style input[type="text"],
.wfl-form-style input[type="email"],
.wfl-form-style input[type="url"],
.wfl-form-style input[type="tel"] {
  width: 100%;
  background: transparent;
  border: 0;
  border-bottom: 2px solid rgba(255,255,255,.55);
  border-radius: 0;
  padding: 14px 0;
  font-family: var(--e-global-typography-text-font-family);
  font-size: var(--e-global-typography-text-font-size);
  color: var(--e-global-color-text);
  outline: none;
}

.wfl-form-style label {
  font-family: var(--e-global-typography-text-font-family);
  color: var(--e-global-color-text);
  display: block;
  margin-bottom: 18px;
  font-size: 20px;
  color: #000;
}

 button {
  background: var(--e-global-color-accent);
  color: var(--e-global-color-text);
  border: 0;
  border-radius: 12px;
  padding: 16px 28px;
  font-family: var(--e-global-typography-text-font-family);
  font-weight: 700;
}

.wfl-form-style input[type="checkbox"] {
    transform: scale(2.4);
    transform-origin: left;
    cursor: pointer;
    margin-right: 1.3em;
}
 .contact-form-modern .wfl-form-style button[type="button"], #wfl-result button[type="button"] {
    padding: 14px 22px;
    border: none;
    border-radius: 16px;
    background-color: var(--e-global-color-1cacbd6);
    color: var(--e-global-color-secondary);
    font-family: "Nato Sans";
    font-size: 29px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
}

.contact-form-modern .wfl-form-style button[type="button"]:hover, #wfl-result button[type="button"]:hover {
    background-color: #07D6AD;
    box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.5);
}

.wfl-detail-list{
    margin-top:20px;
}

.wfl-detail-row{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:24px;

    padding:14px 0;
    border-bottom:1px solid rgba(0,0,0,.08);
}

.wfl-detail-row:last-child{
    border-bottom:none;
}

.wfl-detail-row span{
    font-weight:600;
    color:#24323a;
}

.wfl-detail-row strong{
    text-align:right;
    font-weight:500;
    color:#4b5563;
}

@media(max-width:767px){

    .wfl-detail-row{
        flex-direction:column;
        align-items:flex-start;
        gap:6px;
    }

    .wfl-detail-row strong{
        text-align:left;
    }

}
.wfl-badge{
    display:inline-flex;
    align-items:center;
    padding:4px 10px;
    border-radius:999px;
    font-size:.85rem;
    font-weight:600;
    line-height:1;
}

.wfl-badge-good{
    background:#e8f7ef;
    color:#1b7f4a;
}

.wfl-badge-bad{
    background:#fdecec;
    color:#c62828;
}

.wfl-badge-neutral{
    background:#eef2f6;
    color:#5f6b7a;
}
.wfl-loading[hidden] {
  display: none !important;
}

.wfl-loading {
  display: flex;
  justify-content: center;
  padding: 56px 20px;
}

.wfl-loading-card {
  width: 100%;
  max-width: 760px;
  text-align: center;
  background: #ffffff;
  border-radius: 28px;
  padding: 44px 38px;
  box-shadow: 0 24px 70px rgba(0,0,0,.08);
}

.wfl-loading h3 {
  margin: 20px 0 14px;
  font-size: clamp(2rem, 4vw, 3.4rem);
  line-height: 1.1;
}

.wfl-loading-card p {
  max-width: 620px;
  margin: 0 auto 28px;
  line-height: 1.55;
  opacity: .82;
}

/* .wfl-loading-progress {
  height: 8px;
  background: rgba(0,0,0,.08);
  border-radius: 999px;
  overflow: hidden;
  margin: 30px 0 22px;
}

.wfl-loading-progress span {
  display: block;
  width: 45%;
  height: 100%;
  border-radius: 999px;
  background: currentColor;
  animation: wfl-loading-bar 2.6s ease-in-out infinite;
} */

.wfl-loading-progress{
    position:relative;
    height:10px;
    background:#edf2f7;
    border-radius:999px;
    overflow:hidden;
    margin:28px 0 10px;
}

.wfl-loading-progress span{
  position:relative;
  display:block;
  height:100%;
  border-radius:999px;
  overflow:hidden;
  background:linear-gradient(90deg,#06D6A0,#0E9F6E);
  transition:width .45s ease;
}

.wfl-loading-progress span::after{
  content:"";
  position:absolute;
  inset:0;
  width:45%;
  background:linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,.45),
    transparent
  );
  transform:translateX(-120%);
  animation:wfl-progress-shine 1.4s ease-in-out infinite;
}

@keyframes wfl-progress-shine{
  0%{
    transform:translateX(-120%);
  }
  100%{
    transform:translateX(260%);
  }
}

.wfl-loading-percent{
    text-align:right;
    font-size:.9rem;
    font-weight:700;
    color:#5f6b7a;
    margin-bottom:22px;
}

.wfl-loading-step {
  font-weight: 700;
  font-size: 1.05rem;
  margin: 0 0 12px;
}

.wfl-loading small {
  display: block;
  opacity: .65;
}

/* .wfl-spinner {
  width: 54px;
  height: 54px;
  margin: 0 auto;
  border: 6px solid rgba(0,0,0,.12);
  border-top-color: currentColor;
  border-radius: 50%;
  animation: wfl-spin .9s linear infinite;
}

@keyframes wfl-spin {
  to {
    transform: rotate(360deg);
  }
} */

@keyframes wfl-loading-bar {
  0% {
    transform: translateX(-120%);
  }
  50% {
    transform: translateX(75%);
  }
  100% {
    transform: translateX(240%);
  }
}

@media (max-width: 767px) {
  .wfl-loading {
    padding: 32px 12px;
  }

  .wfl-loading-card {
    padding: 32px 22px;
    border-radius: 22px;
  }
}

/* verstecktes Feld für Honeypot verstecken */
.wfl-hp{
  position:absolute!important;
  left:-9999px!important;
  opacity:0!important;
  height:0!important;
  overflow:hidden!important;
}