/* zti-lwl.css – Landingpage LWL / Glasfaserinstallation */

.zti-wrap{max-width:1100px;margin:0 auto;padding:0 22px}

.zti-hero{position:relative;overflow:hidden}
.zti-hero-inner{padding:84px 0 70px}
.zti-hero-bg{
  background: radial-gradient(900px 420px at 20% 20%, rgba(45,212,191,.20), rgba(0,0,0,0) 55%),
              radial-gradient(900px 520px at 80% 10%, rgba(59,130,246,.16), rgba(0,0,0,0) 55%),
              linear-gradient(135deg, #0b1220 0%, #070b14 60%, #05070d 100%);
}

.zti-kicker{display:inline-flex;gap:10px;align-items:center;padding:8px 12px;border:1px solid rgba(255,255,255,.12);border-radius:999px;color:rgba(255,255,255,.85);font-size:14px;background:rgba(255,255,255,.04)}
.zti-kicker-dot{width:8px;height:8px;border-radius:999px;background:#2dd4bf;box-shadow:0 0 0 4px rgba(45,212,191,.12)}
.zti-h1{color:#fff;font-size:44px;line-height:1.12;margin:14px 0 12px;letter-spacing:-.02em}
.zti-sub{color:rgba(255,255,255,.80);font-size:18px;line-height:1.6;margin:0 0 18px;max-width:820px}
.zti-hero-meta{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0 0}
.zti-pill{color:rgba(255,255,255,.85);font-size:13px;padding:8px 12px;border:1px solid rgba(255,255,255,.12);border-radius:999px;background:rgba(255,255,255,.04)}
.zti-btns{display:flex;flex-wrap:wrap;gap:12px;margin:22px 0 0}
.zti-btn{display:inline-flex;gap:10px;align-items:center;justify-content:center;padding:12px 16px;border-radius:12px;text-decoration:none;font-weight:600}
.zti-btn-primary{background:#2dd4bf;color:#06201c}
.zti-btn-primary:hover{filter:brightness(.98)}
.zti-btn-secondary{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);color:#fff}
.zti-btn-secondary:hover{background:rgba(255,255,255,.08)}
.zti-note{margin-top:14px;color:rgba(255,255,255,.65);font-size:13px}

.zti-section{padding:70px 0}
.zti-bg-soft{
  background: radial-gradient(900px 520px at 20% 0%, rgba(45,212,191,.16), rgba(255,255,255,0) 60%),
              linear-gradient(180deg, rgba(242,248,255,1) 0%, rgba(255,255,255,1) 65%);
}
.zti-h2{font-size:30px;line-height:1.2;margin:0 0 10px;letter-spacing:-.01em}
.zti-lead{font-size:17px;line-height:1.65;color:#1f2937;margin:0 0 18px;max-width:920px}

.zti-grid{display:grid;gap:18px}
.zti-grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.zti-grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.zti-card{border:1px solid #e5e7eb;border-radius:16px;background:#fff;padding:18px;box-shadow:0 8px 24px rgba(15,23,42,.06)}
.zti-card h3{margin:0 0 8px;font-size:18px}
.zti-card p{margin:0;color:#374151;line-height:1.6}
.zti-ul{margin:10px 0 0;padding-left:18px;color:#374151;line-height:1.7}
.zti-ul li{margin:6px 0}

/* Steps */
.zti-steps{counter-reset:none}
.zti-step{display:flex;gap:14px;align-items:flex-start}
.zti-step-num{
  flex:0 0 auto;width:40px;height:40px;border-radius:12px;
  background:rgba(45,212,191,.14);border:1px solid rgba(45,212,191,.35);
  display:flex;align-items:center;justify-content:center;
  color:#0f766e;font-weight:800
}
/* Entfernt doppelte Nummern-Badges, falls via ::before/::after gerendert */
.zti-step::before,.zti-step::after{content:none !important;display:none !important;}

/* Region Badges */
.zti-badge-row{display:flex !important;flex-wrap:wrap !important;gap:10px !important;align-items:center !important;margin-top:14px}
.zti-badge{display:inline-flex !important;width:auto !important;white-space:nowrap !important;padding:8px 12px;border-radius:999px;border:1px solid #e5e7eb;background:#fff;color:#111827;font-size:13px}

/* FAQ */
.zti-faq details{border:1px solid #e5e7eb;border-radius:14px;background:#fff;padding:14px 16px}
.zti-faq details + details{margin-top:10px}
.zti-faq summary{cursor:pointer;font-weight:700}
.zti-faq p{margin:10px 0 0;color:#374151;line-height:1.7}

.zti-cta{background:linear-gradient(135deg, rgba(45,212,191,.18), rgba(59,130,246,.12));border:1px solid rgba(15,23,42,.08)}
.zti-cta h2{margin:0 0 8px}
.zti-cta p{margin:0;color:#1f2937;line-height:1.7}
.zti-contact{display:grid;grid-template-columns:1.05fr .95fr;gap:18px;align-items:start}
.zti-mini{font-size:13px;color:#6b7280;margin-top:10px}

@media (max-width: 960px){
  .zti-h1{font-size:36px}
  .zti-grid-2,.zti-grid-3,.zti-contact{grid-template-columns:1fr}
  .zti-hero-inner{padding:70px 0 58px}
}

/* Kein Abstand zwischen Hero und nachfolgendem Abschnitt */
.zti-hero + .zti-section{margin-top:0 !important}
.zti-hero.alignfull + .zti-section.alignfull{margin-top:0 !important}