/* =========================================================
   LW-FIT – Startseite (Hero + USP) – BASE (Hero + USP Info-Bar)
   Stand:
   - Hero bleibt (Gradient)
   - USPs als "Info-Bar" wie Zielbild (flach, ohne Karten)
   - Icons: inline <svg> bevorzugt (currentColor), <img svg> fallback sichtbar + blau per Filter
   ========================================================= */

/* ---------- Variablen ---------- */
:root{
  --lw-blue-1:#0b7fd6;
  --lw-blue-2:#46a0de;
  --lw-blue-icon:#1e78c8;

  --lw-text:#0b2239;
  --lw-muted:#556372;

  --lw-max:1100px;
  --lw-pad:20px;

  --lw-radius:18px;
  --lw-border:rgba(15,23,42,.08);

  --lw-shadow:0 14px 34px rgba(0,0,0,.10);
  --lw-shadow-hover:0 18px 44px rgba(0,0,0,.12);

  /* Icon Setup */
  --lw-ico-size:22px;
  --lw-ico-box:22px;

  /* USP Bar */
  --lw-usp-border:rgba(15,23,42,.10);
}

/* =========================================================
   HERO
   ========================================================= */
.lw-hero{
  background:linear-gradient(135deg,var(--lw-blue-1),var(--lw-blue-2));
  color:#fff;
  padding:78px 0 96px;
  width:100%;
  position:relative;
  overflow:hidden;
}

.lw-hero-inner{
  max-width:var(--lw-max);
  margin:0 auto;
  padding:0 var(--lw-pad);
}

.lw-eyebrow{
  text-transform:uppercase;
  letter-spacing:.10em;
  font-size:.82rem;
  opacity:.92;
  margin:0 0 10px;
}

.lw-hero h1,
.lw-hero h2{
  font-size:clamp(1.9rem,4vw,2.7rem);
  line-height:1.15;
  margin:0 0 12px;
  color:#fff;
}

.lw-hero-text{
  max-width:680px;
  font-size:1.05rem;
  opacity:.95;
  margin:0 0 26px;
}

.lw-hero-actions{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}

.lw-btn{
  display:inline-block;
  padding:12px 20px;
  border-radius:12px;
  font-weight:650;
  text-decoration:none;
  line-height:1;
  transition:.15s ease;
}

.lw-btn-primary{
  background:#fff;
  color:var(--lw-blue-1);
  border:2px solid #fff;
}
.lw-btn-primary:hover{ transform:translateY(-1px); }

.lw-btn-outline{
  border:2px solid rgba(255,255,255,.95);
  color:#fff;
  background:transparent;
}
.lw-btn-outline:hover{ transform:translateY(-1px); }

/* =========================================================
   USP SECTION – Info-Bar (wie Zielbild)
   ========================================================= */
.lw-usps{
  background:#fff;
  padding:18px 0 26px;
  margin-top:-26px; /* leichter overlap zum Hero */
  position:relative;
  z-index:2;
}

.lw-usps-inner{
  max-width:var(--lw-max);
  margin:0 auto;
  padding:0 var(--lw-pad);

  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:0;

  border-top:1px solid var(--lw-usp-border);
  border-bottom:1px solid var(--lw-usp-border);
  background:transparent;
}

/* Item (flach, keine Cards) */
.lw-usp{
  background:transparent;
  border:none;
  border-right:1px solid var(--lw-usp-border);
  border-radius:0;
  padding:14px 16px;

  box-shadow:none;
  backdrop-filter:none;
  transition:none;
}

.lw-usp:last-child{ border-right:none; }

/* Top Row: Icon + Title */
.lw-usp-top{
  display:flex;
  align-items:center;
  gap:10px;
  margin:0 0 6px;
}

/* Titel/Text kompakter */
.lw-usp h3{
  margin:0;
  font-size:.98rem;
  font-weight:700;
  color:var(--lw-text);
}

.lw-usp p{
  margin:0;
  font-size:.90rem;
  line-height:1.45;
  color:var(--lw-muted);
}

/* =========================================================
   ICON – clean (für Bar)
   - inline <svg> bevorzugt
   - <img> fallback sichtbar + blau per Filter
   ========================================================= */
.lw-usp-ico{
  width:var(--lw-ico-box);
  height:var(--lw-ico-box);
  flex:0 0 var(--lw-ico-box);

  display:inline-grid;
  place-items:center;

  background:transparent;
  box-shadow:none;
  border:none;
  border-radius:0;

  color:var(--lw-blue-icon);
  position:relative;
  overflow:visible;
  line-height:0;
}

/* Inline SVG */
.lw-usp-ico svg{
  width:var(--lw-ico-size);
  height:var(--lw-ico-size);
  display:block;
}

/* stroke-icons robust */
.lw-usp-ico svg *{
  stroke:currentColor;
  fill:none;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
}

/* fill-icons optional */
.lw-usp-ico.is-fill svg *{
  fill:currentColor;
  stroke:none;
}

/* IMG SVG Fallback (bei dir aktuell) */
.lw-usp-ico img{
  display:block;
  width:20px;
  height:20px;

  /* Schwarz -> Blau (Filter-Fallback) */
  filter: invert(33%) sepia(82%) saturate(423%) hue-rotate(170deg) brightness(94%) contrast(90%);
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 980px){
  .lw-hero{ padding:62px 0 86px; }
  .lw-usps{ margin-top:-22px; }

  .lw-usps-inner{
    grid-template-columns:repeat(2,1fr);
  }

  .lw-usp{
    border-right:1px solid var(--lw-usp-border);
    border-bottom:1px solid var(--lw-usp-border);
  }
  .lw-usp:nth-child(2n){ border-right:none; }
  .lw-usp:nth-last-child(-n+2){ border-bottom:none; }
}

@media (max-width: 560px){
  .lw-usps{ padding:16px 0 22px; margin-top:-18px; }

  .lw-usps-inner{
    grid-template-columns:1fr;
  }

  .lw-usp{
    border-right:none;
    border-bottom:1px solid var(--lw-usp-border);
  }
  .lw-usp:last-child{ border-bottom:none; }

  .lw-btn{ width:100%; text-align:center; }
}
/* =========================================
   LW-FIT – Infobar (Text + SVG optional)
   Einmal einbauen, danach nur HTML nutzen
   ========================================= */

.lw-infobar{
  background:#ffffff;
  border-top:1px solid rgba(15,23,42,.08);
  border-bottom:1px solid rgba(15,23,42,.08);
}

.lw-infobar-inner{
  max-width:1100px;
  margin:0 auto;
  padding:22px 20px;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:28px;
}

/* Einzelnes Item */
.lw-info-item{
  display:flex;
  align-items:flex-start;
  gap:14px;
}

/* ---------- ICON (optional) ---------- */
.lw-info-ico{
  flex:0 0 26px;
  width:26px;
  height:26px;
  line-height:0;
  color:#1e78c8; /* Ziel-Farbe für Inline-SVG */
}

/* SVG als <img> (dein aktueller Stand) */
.lw-info-ico img{
  width:22px;
  height:22px;
  display:block;

  /* Schwarz -> LW-FIT Blau */
  filter: invert(33%) sepia(82%) saturate(423%)
          hue-rotate(170deg) brightness(94%) contrast(90%);
}

/* Inline SVG (zukünftig) */
.lw-info-ico svg{
  width:22px;
  height:22px;
  display:block;
}

.lw-info-ico svg *{
  stroke: currentColor;
  fill: none;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
}

/* ---------- TEXT ---------- */
.lw-info-item strong{
  display:block;
  font-size:1.05rem;
  margin-bottom:6px;
  color:#0b2239;
}

.lw-info-item p{
  margin:0;
  font-size:.95rem;
  color:#556372;
  line-height:1.5;
}

/* ---------- RESPONSIVE ---------- */
@media (max-width:900px){
  .lw-infobar-inner{
    grid-template-columns:1fr;
    gap:18px;
  }
}
/* =========================================
   LW-FIT – Leistungsbereich (3 Highlights)
   ========================================= */

.lw-features{
  background:#f6f9fc;
  padding:64px 0;
}

.lw-features-inner{
  max-width:1100px;
  margin:0 auto;
  padding:0 20px;
}

.lw-features h2{
  text-align:center;
  font-size:2rem;
  margin:0 0 42px;
  color:#0b2239;
}

.lw-feature-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:28px;
}

.lw-feature{
  background:#ffffff;
  border-radius:18px;
  overflow:hidden;
  box-shadow:0 14px 34px rgba(0,0,0,.08);
  transition:.2s ease;
}

.lw-feature:hover{
  transform:translateY(-3px);
  box-shadow:0 18px 44px rgba(0,0,0,.12);
}

/* Bild-Highlight */
.lw-feature-media{
  height:180px;
  background-size:cover;
  background-position:center;
}

/* Inhalt */
.lw-feature-body{
  padding:22px 22px 26px;
}

.lw-feature-body h3{
  margin:0 0 8px;
  font-size:1.2rem;
  color:#0b2239;
}

.lw-feature-body p{
  margin:0 0 14px;
  font-size:.95rem;
  color:#556372;
  line-height:1.5;
}

.lw-feature-body a{
  font-weight:600;
  color:#0b7fd6;
  text-decoration:none;
}

.lw-feature-body a:hover{
  text-decoration:underline;
}

/* Responsive */
@media(max-width:900px){
  .lw-feature-grid{
    grid-template-columns:1fr;
  }
}
/* =========================================
   LW-FIT – Trust / Bewertungen
   ========================================= */

.lw-trust{
  background:#ffffff;
  padding:70px 0;
}

.lw-trust-inner{
  max-width:1100px;
  margin:0 auto;
  padding:0 20px;
}

.lw-trust-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:20px;
  margin-bottom:38px;
}

.lw-trust-head h2{
  margin:0;
  font-size:2rem;
  color:#0b2239;
}

.lw-trust-rating{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:600;
  color:#0b2239;
}

.lw-stars{
  color:#f5b301;
  letter-spacing:2px;
}

/* Reviews */
.lw-reviews{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:26px;
}

.lw-review{
  background:#f6f9fc;
  border-radius:18px;
  padding:22px 22px 24px;
}

.lw-review p{
  font-size:.95rem;
  color:#556372;
  line-height:1.5;
  margin:0 0 14px;
}

.lw-review-footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-size:.9rem;
  color:#0b2239;
  font-weight:600;
}

.lw-review-stars{
  color:#f5b301;
}

/* Responsive */
@media(max-width:900px){
  .lw-reviews{
    grid-template-columns:1fr;
  }
  .lw-trust-head{
    flex-direction:column;
    align-items:flex-start;
  }
}