/* FAP css */

:root{
  --primary:#2E7DBF;
  --primary-dark:#1a5a8a;
  --secondary:#F4F7FA;
  --border:#E2E8F0;
  --text:#0F172A;
  --muted:#64748B;
  --radius:0.75rem;
}

.fenster-page{line-height:1.6;color:var(--text);}
.fenster-page h1,.fenster-page h2,.fenster-page h3{font-weight:700;}

.sr-only{
  position:absolute;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

.w100{width:100%;}

/* HERO */
.fenster-hero{
  padding:0;
  display:flex;
  align-items:center;
  color:#fff;
  background:
    linear-gradient(rgba(0,0,0,.55), rgba(0,0,0,.55)),
    var(--hero-bg) 50% 35% / cover no-repeat;
  min-height: 100svh; /* lepsze na mobile niż 100vh */
}

}
.fenster-hero .hero-content{max-width:650px;}
.fenster-hero h1{
  line-height: 1.15;

  max-width: 20ch;
  text-wrap: balance;
  hyphens: none;
  font-size: clamp(1.35rem, 5.6vw, 3rem);
  margin-bottom: 1.5rem;
}

.fenster-hero p{font-size:1.15rem;margin-bottom:2rem;}

.trust-badges{display:flex;flex-wrap:wrap;gap:.75rem;margin-bottom:2.5rem;}
.trust-badge{
  background:rgba(255,255,255,.15);
  border:1px solid rgba(255,255,255,.3);
  padding:.45rem .95rem;
  border-radius:2rem;
  font-size:.8rem;
  font-weight:700;
}
.trust-badge::before{
  content: "✔\FE0E";
  color: #fff;
  margin-right: .5rem;
  font-weight: 900;
}


/* FUNNEL */
.fenster-funnel{padding:5rem 0;background:#fff;}
.fenster-funnel h2{text-align:center;font-size:clamp(1.75rem,3vw,2.5rem);margin-bottom:.5rem;}
.funnel-subtitle{text-align:center;color:var(--muted);margin-bottom:3rem;}

.funnel-progress-wrap{max-width:520px;margin:0 auto 2.5rem;}
.funnel-progress-labels{
  display:flex;
  justify-content:space-between;
  font-size:.75rem;
  color:#94A3B8;
  margin-bottom:.4rem;
  font-weight:700;
}
.funnel-progress-bar-bg{width:100%;background:var(--border);border-radius:999px;height:6px;}
.funnel-progress-bar{
  height:6px;
  background:linear-gradient(90deg,var(--primary),var(--primary-dark));
  border-radius:999px;
  transition:width .35s ease;
}

.funnel-step{display:none;}
.funnel-step.active{display:block;animation:fadeIn .25s ease;}
@keyframes fadeIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}

.options-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:1.25rem;
  max-width:860px;
  margin:0 auto;
}
.option-card{
  padding:2rem 1.5rem;
  border:2px solid var(--border);
  border-radius:var(--radius);
  cursor:pointer;
  text-align:center;
  transition:all .25s;
  background:#fff;
}
.option-card:hover,.option-card.selected{
  border-color:var(--primary);
  background:#EBF4FF;
  transform:translateY(-4px);
  box-shadow:0 10px 26px rgba(46,125,191,.15);
}
.option-icon{font-size:2.5rem;margin-bottom:.75rem;}
.option-card h3{font-size:1.1rem;margin-bottom:.25rem;}
.option-card p{font-size:.85rem;color:var(--muted);}

.funnel-input-wrap{max-width:520px;margin:0 auto;}
.funnel-input-wrap input,
.funnel-contact-form input{
  width:100%;
  padding:1rem 1.25rem;
  border:2px solid var(--border);
  border-radius:var(--radius);
  font-size:1rem;
  margin-bottom:1rem;
  transition:border .2s;
  background:#fff;
}
.funnel-input-wrap input:focus,
.funnel-contact-form input:focus{outline:none;border-color:var(--primary);}

.funnel-contact-form{
  max-width:520px;
  margin:0 auto;
  background:linear-gradient(135deg,#EBF4FF,#F4F7FA);
  border-radius:var(--radius);
  padding:2.5rem;
  box-shadow:0 12px 40px rgba(46,125,191,.1);
}
.funnel-microcopy{font-size:.75rem;color:#94A3B8;text-align:center;margin-bottom:1.25rem;}
.funnel-microcopy a{color:var(--primary);}

.funnel-nav{
  display:flex;
  justify-content:space-between;
  align-items:center;
  max-width:860px;
  margin:2rem auto 0;
}
.btn-back{
  background:none;
  border:2px solid var(--border);
  color:var(--muted);
  padding:.6rem 1.5rem;
  border-radius:var(--radius);
  cursor:pointer;
  transition:all .2s;
}
.btn-back:hover{border-color:var(--primary);color:var(--primary);}
.step-counter{font-size:.875rem;color:#94A3B8;font-weight:700;}

/* RECHNER */
.fenster-rechner{padding:5rem 0;background:var(--secondary);}
.rechner-grid{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center;}
.fenster-rechner h2{font-size:clamp(1.75rem,3vw,2.5rem);margin-bottom:1rem;}
.fenster-rechner p{color:var(--muted);margin-bottom:2.25rem;}

.rechner-img{
  height:520px;
  border-radius:var(--radius);
  background:var(--rechner-bg) 50% 20%/cover no-repeat;
  box-shadow:0 12px 40px rgba(0,0,0,.12);
}

.slider-label{font-weight:700;margin-bottom:.25rem;}
.baujahr-display{color:var(--primary);font-size:1.25rem;}
.fenster-slider{
  width:100%;
  -webkit-appearance:none;
  appearance:none;
  height:8px;
  border-radius:4px;
  background:var(--border);
  outline:none;
  margin:1rem 0;
}
/* */
.fenster-slider{
  height: 8px;
  padding: 18px 0;          
  background: var(--border);
  border-radius: 4px;
  -webkit-appearance: none;
  appearance: none;
}

/* Chrome / Safari / Edge */
.fenster-slider::-webkit-slider-thumb{
  -webkit-appearance: none;
  appearance: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  cursor: pointer;


  background:
    radial-gradient(circle at 50% 50%,
      var(--primary) 0 12px,   
      transparent 13px);
  box-shadow: 0 2px 10px rgba(46,125,191,.45);
  border: 0;
}

/* Firefox */
.fenster-slider::-moz-range-thumb{
  width: 44px;
  height: 44px;
  border-radius: 50%;
  cursor: pointer;
  background:
    radial-gradient(circle at 50% 50%,
      var(--primary) 0 12px,
      transparent 13px);
  box-shadow: 0 2px 10px rgba(46,125,191,.45);
  border: 0;
}

.slider-era{font-size:.8rem;color:#94A3B8;margin-bottom:1.75rem;min-height:20px;}

.savings-result{
  background:linear-gradient(135deg,var(--primary),var(--primary-dark));
  color:#fff;
  padding:2rem 2.5rem;
  border-radius:var(--radius);
  box-shadow:0 10px 26px rgba(46,125,191,.3);
}
.savings-amount{font-size:2.5rem;font-weight:900;}
.savings-sub{font-size:.875rem;opacity:.9;margin-top:.35rem;}

/* CTA */
.rechner-cta{
  display:block;
  width:100%;
  max-width:860px;
  margin:2rem auto 0;
}

/* SMART BUYER */
.fenster-smartbuyer{padding:5rem 0;background:#fff;}
.fenster-smartbuyer h2{
  font-size:clamp(1.75rem,3vw,2.5rem);
  margin:0 auto 2rem;
  text-align:center;
  max-width:860px;
}
.smartbuyer-text{max-width:860px;margin:0 auto;color:#475569;}
.fenster-smartbuyer .smartbuyer-text{
  font-style:italic;
  border-left:4px solid var(--primary);
  padding-left:1.25rem;
}
.smartbuyer-text p{margin-bottom:1.25rem;}

/* PROFILES */
.fenster-profiles{padding:5rem 0;background:var(--secondary);}
.fenster-profiles h2{text-align:center;font-size:clamp(1.75rem,3vw,2.5rem);margin-bottom:3rem;}
.profiles-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:2rem;}
.profile-card{
  background:#fff;
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:0 4px 16px rgba(0,0,0,.08);
  transition:transform .25s;
}
.profile-card:hover{transform:translateY(-6px);}
.profile-img{height:260px;background:var(--profile-bg) 50% 15%/cover no-repeat,#CBD5E1;}
.profile-body{padding:1.75rem;}
.profile-body h3{font-size:1.15rem;margin-bottom:.75rem;color:var(--primary);}
.profile-body p{color:var(--muted);font-size:.9rem;}

/* VIDEO */
.fenster-audio video{
  width:100%;
  max-width:860px;
  height:auto;
  display:block;
  margin:0 auto;
  border-radius:22px;
  box-shadow:0 18px 60px rgba(0,0,0,.35);
  border:1px solid rgba(255,255,255,.18);
}

/* AUDIO (section bg) */
.fenster-audio{
  padding:5rem 0;
  background:var(--audio-bg) 50% 15%/100% no-repeat;
  position:relative;
  color:#fff;
  text-align:center;
}
.fenster-audio::before{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.65);
  pointer-events:none;
}
.fenster-audio .container{position:relative;z-index:1;}
.fenster-audio h2{font-size:clamp(1.75rem,3vw,2.5rem);margin-bottom:1rem;}
.fenster-audio p{max-width:640px;margin:0 auto 2.5rem;opacity:.9;}

/* FAQ */
.fenster-faq{padding:5rem 0;background:#fff;}
.fenster-faq h2{text-align:center;font-size:clamp(1.75rem,3vw,2.5rem);margin-bottom:3rem;}
.faq-item{border-bottom:1px solid var(--border);max-width:860px;margin:0 auto;}
.faq-question{
  width:100%;
  text-align:left;
  background:none;
  border:none;
  padding:1.5rem 0;
  cursor:pointer;
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-weight:900;
  font-size:1rem;
  color:var(--text);
}
.faq-question:hover{color:var(--primary);}
.faq-icon{font-size:1.5rem;color:var(--primary);transition:transform .25s;}
.faq-icon.open{transform:rotate(45deg);}
.faq-answer{display:none;padding:0 0 1.5rem;color:#475569;font-size:.95rem;line-height:1.7;}
.faq-answer.open{display:block;animation:fadeIn .2s ease;}

/* CONTACT */
.fenster-kontakt{
  padding:5rem 0;
  color:#fff;
  text-align:center;
  background:linear-gradient(
    to bottom,
    rgba(46,125,191,1) 0%,
    rgba(46,125,191,1) 30%,
    rgba(46,125,191,.75) 60%,
    rgba(46,125,191,.35) 82%,
    rgba(244,247,250,.3) 100%
  );
}
.fenster-kontakt h2{text-align:center;font-size:clamp(1.75rem,3vw,2.5rem);margin-bottom:1rem;}
.fenster-kontakt p{opacity:.92;margin:0 auto 2.75rem;max-width:700px;}
.form-embed{max-width:760px;margin:0 auto;}

/* Responsive */
@media (max-width:768px){
  /* Hero fit */
  .fenster-hero{min-height:100vh;padding:3.25rem 0;}
  .fenster-hero p{margin-bottom:1.25rem;}
  .trust-badges{margin-bottom:1.5rem;}

  /* Hero title */
  .fenster-hero h1{font-size:clamp(1.75rem,5.2vw,2.15rem);margin-bottom:1rem;}

  /* Rechner layout */
  .rechner-grid{grid-template-columns:1fr;gap:1.25rem;}
  .rechner-img{height:260px;max-width:520px;width:100%;margin:0 auto;}

  /* Options */
  .options-grid{grid-template-columns:1fr;}
  .savings-amount{font-size:2rem;}

  /* CTA padding */
  .rechner-cta{
    width:calc(100% - 24px);
    margin-left:auto;
    margin-right:auto;
  }
}

@media (max-width:480px){
  .fenster-hero h1{font-size:1.75rem;}
}
@media (max-width:768px){
  .fenster-hero{
    min-height: 74vh;
    padding: 1.25rem 0;
  }

  .fenster-hero h1{margin-bottom:.75rem;}
  .fenster-hero p{margin-bottom:1rem;}
  .trust-badges{margin-bottom:1rem;}
}
/* Funnel – compact mobile */
@media (max-width: 768px){
  .fenster-funnel{ padding: 2.5rem 0; }
  .fenster-funnel h2{ margin-bottom: .35rem; }
  .funnel-subtitle{ margin-bottom: 1.25rem; }

  .funnel-progress-wrap{ margin: 0 auto 1.25rem; }

  .options-grid{ gap: .75rem; }
  .option-card{ padding: 1.1rem 1rem; }
  .option-icon{ font-size: 2rem; margin-bottom: .5rem; }
  .option-card h3{ font-size: 1rem; }

  .funnel-contact-form{ padding: 1.25rem; }
  .funnel-input-wrap input,
  .funnel-contact-form input{
    padding: .85rem 1rem;
    margin-bottom: .75rem;
  }

  .funnel-nav{ margin: 1.25rem auto 0; }
}
@media (max-width: 480px){
  .fenster-hero h1{
    font-size: clamp(1.05rem, 6.2vw, 1.55rem);
    line-height: 1.12;
  }
}
@media (max-width: 360px){
  .fenster-hero h1{
    font-size: clamp(0.98rem, 6.5vw, 1.25rem);
    max-width: 22ch;
  }
}
.fenster-hero h1{
  max-width: 21ch;
  text-wrap: balance;
}


.options-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.option-card{
  appearance: none;
  border: 1px solid #e5e7eb;
  background: #fff;
  border-radius: 14px;
  padding: 16px;
  text-align: left;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.option-icon{
  width: 56px;
  height: 56px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain; /* dopasowanie bez przycinania */
  margin-bottom: 10px;
}

/* Ikony */
.icon-austausch{
  background-image: url("https://www.werklotse.de/wp-content/themes/werklotse/images/funnel_fenstertausch.png");
}

.icon-neubau{
  background-image: url("https://www.werklotse.de/wp-content/themes/werklotse/images/funnel_neubau.png");
}

.icon-montage{
  background-image: url("https://www.werklotse.de/wp-content/themes/werklotse/images/funnel_montage.png");
}
.fenster-slider{
  width:100%;
  -webkit-appearance:none;
  appearance:none;
  background: transparent;
  outline:none;
  margin:1rem 0;
  height: 44px; /* większy “touch lane”, sam pasek jest niżej */
}

/* TRACK 8px */
.fenster-slider::-webkit-slider-runnable-track{
  height: 12px;
  background: var(--border);
  border-radius: 999px;
}
.fenster-slider::-moz-range-track{
  height: 12px;
  background: var(--border);
  border-radius: 999px;
}

/* THUMB 44px */
.fenster-slider::-webkit-slider-thumb{
  -webkit-appearance:none;
  width:44px; height:44px;
  border-radius:50%;
  background: var(--primary);
  cursor:pointer;
  box-shadow:0 2px 10px rgba(46,125,191,.45);
  margin-top: -18px; /* (8/2) - (44/2) = 4 - 22 = -18 */
}
.fenster-slider::-moz-range-thumb{
  width:44px; height:44px;
  border-radius:50%;
  background: var(--primary);
  cursor:pointer;
  box-shadow:0 2px 10px rgba(46,125,191,.45);
  border:0;
}
.wl-carousel{
  position: relative;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
}

.wl-track{
  display: flex;
  gap: 14px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch; /* iOS: ważne przy snap */ /* [page:0] */
  padding: 6px 44px; /* miejsce na strzałki */
}

.wl-slide{
  flex: 0 0 100%;
  scroll-snap-align: center;
  display: flex;
  justify-content: center;
  margin: 0;
}

.wl-slide img{
  width: min(980px, 100%);
  height: auto;
  display: block;
  border-radius: 10px;
}

/* Strzałki */
.wl-nav{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 38px;
  height: 38px;
  border-radius: 999px;
  border: 0;
  background: rgba(0,0,0,.55);
  color: #fff;
  font-size: 28px;
  line-height: 38px;
  cursor: pointer;
  z-index: 2;
}
.wl-prev{ left: 6px; }
.wl-next{ right: 6px; }

/* Kropki */
.wl-dots{
  display: flex;
  gap: 8px;
  justify-content: center;
  padding: 10px 0 0;
}
.wl-dots button{
  width: 8px; height: 8px;
  border-radius: 999px;
  border: 0;
  background: rgba(0,0,0,.25);
  cursor: pointer;
}
.wl-dots button[aria-current="true"]{
  background: rgba(0,0,0,.75);
}

/* UX */
.wl-track::-webkit-scrollbar{ height: 8px; }
.wl-slide img{ user-select: none; -webkit-user-drag: none; }

/* carousel */
.wl-carousel{padding:2rem 0;background:var(--secondary);}