/* ============================================================
   DESIGN UPGRADE — fenster123.de
   Schrift, Hero, Cards, FAQ, Footer, Nav
   ============================================================ */

/* 1. TYPOGRAFIE
   Bricolage Grotesque für Headlines, DM Sans für Body
   ---------------------------------------------------------- */
body {
  font-family: 'DM Sans', system-ui, -apple-system, sans-serif;
}

h1, h2, h3, h4 {
  font-family: 'Bricolage Grotesque', system-ui, sans-serif;
  letter-spacing: -0.025em;
}


/* 2. HERO — Mesh-Gradient + Fensterrahmen-Muster
   ---------------------------------------------------------- */
.hero-gradient {
  background:
    radial-gradient(ellipse at 12% 65%, rgba(10, 130, 180, 0.65) 0%, transparent 52%),
    radial-gradient(ellipse at 88% 12%, rgba(0, 45, 110, 0.75) 0%, transparent 52%),
    radial-gradient(ellipse at 65% 90%, rgba(5, 70, 110, 0.45) 0%, transparent 45%),
    #07607f;
}

/* Fensterrahmen-Muster statt Plus-Muster */
.hero-gradient::before {
  background-image: url("data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='1.5' y='1.5' width='77' height='77' rx='2' fill='none' stroke='white' stroke-opacity='0.055' stroke-width='1.5'/%3E%3Cline x1='40' y1='1.5' x2='40' y2='78.5' stroke='white' stroke-opacity='0.035' stroke-width='1'/%3E%3Cline x1='1.5' y1='40' x2='78.5' y2='40' stroke='white' stroke-opacity='0.035' stroke-width='1'/%3E%3C/svg%3E");
  background-size: 80px 80px;
  background-color: transparent;
}


/* 3. NAVIGATION — Unterstrichen Hover-Effekt
   ---------------------------------------------------------- */
nav .nav-link {
  position: relative;
}

nav .nav-link::after {
  content: '';
  position: absolute;
  bottom: -6px;
  left: 0;
  width: 0;
  height: 2px;
  background: #91bf21;
  transition: width 0.25s ease;
  border-radius: 1px;
}

nav .nav-link:hover::after {
  width: 100%;
}


/* 4. SERVICE CARDS — Gradient Top-Border + bessere Elevation
   ---------------------------------------------------------- */
.service-card {
  border-radius: 16px;
  border: 1px solid #e8ecf0;
  position: relative;
  overflow: hidden;
}

.service-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #08648d, #91bf21);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.service-card:hover::after {
  opacity: 1;
}

.service-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 56px rgba(8, 100, 141, 0.13);
  border-color: #d0dfe8;
}


/* 5. PROBLEM-CARDS — linker Akzentstreifen
   ---------------------------------------------------------- */
#probleme .bg-white {
  border-left: 3px solid #fca5a5;
  border-radius: 0 12px 12px 0;
  transition: border-left-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}

#probleme .bg-white:hover {
  border-left-color: #ef4444;
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(239, 68, 68, 0.09);
}


/* 6. FAQ — linker Akzentstreifen, weißer Hintergrund
   ---------------------------------------------------------- */
.faq-item {
  background: #fff;
  border: 1px solid #e8ecf0;
  border-left: 3px solid transparent;
  border-radius: 0 12px 12px 0;
  transition: border-left-color 0.3s ease, box-shadow 0.3s ease;
}

.faq-item:hover {
  border-left-color: #08648d;
  box-shadow: 0 4px 20px rgba(8, 100, 141, 0.08);
}

.faq-item.active {
  border-left-color: #91bf21;
  box-shadow: 0 4px 20px rgba(145, 191, 33, 0.1);
}

.faq-question {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-weight: 600;
}


/* 7. STATS-BAR — Bricolage für die Zahlen
   ---------------------------------------------------------- */
.stat-number,
#referenzen .text-3xl,
#referenzen .text-4xl {
  font-family: 'Bricolage Grotesque', system-ui, sans-serif;
  letter-spacing: -0.04em;
}

/* Stats in der Produktsektion (Trust Elements) */
#hero + section .text-2xl.font-extrabold,
#hero + section .text-3xl.font-extrabold {
  font-family: 'Bricolage Grotesque', system-ui, sans-serif;
  letter-spacing: -0.04em;
}

/* Blauer Stats-Banner unter den Referenzen */
.bg-gradient-to-r.from-primary .text-3xl,
.bg-gradient-to-r.from-primary .text-4xl {
  font-family: 'Bricolage Grotesque', system-ui, sans-serif;
  letter-spacing: -0.04em;
  font-size: clamp(2rem, 4vw, 3rem);
}


/* 8. BUTTONS — subtiler Gradient statt Flat-Color
   ---------------------------------------------------------- */
.btn-primary {
  background: linear-gradient(135deg, #96c722 0%, #7da81b 100%);
  letter-spacing: -0.01em;
}

.btn-primary:hover {
  background: linear-gradient(135deg, #7da81b 0%, #6a9017 100%);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(145, 191, 33, 0.4);
}

.btn-outline:hover {
  box-shadow: 0 4px 16px rgba(8, 100, 141, 0.2);
}


/* 9. FOOTER — mehr Luft, Bricolage für Überschriften
   ---------------------------------------------------------- */
footer h4 {
  font-family: 'Bricolage Grotesque', system-ui, sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  font-weight: 700;
  margin-bottom: 1.25rem;
}

footer .grid > div {
  padding-top: 0.25rem;
}

footer ul li + li {
  margin-top: 0.75rem;
}

footer ul a {
  transition: color 0.2s ease, padding-left 0.2s ease;
  display: inline-block;
}

footer ul a:hover {
  padding-left: 4px;
  color: #fff;
}


/* 10. HEADER — subtiler Trennstrich beim Scrollen
   ---------------------------------------------------------- */
#mainHeader {
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
}

.header-scrolled {
  border-bottom-color: #f1f5f9;
}


/* 11. SECTION BADGES — einheitlicher Stil
   ---------------------------------------------------------- */
.inline-block.bg-\[#e8f1f5\].text-primary,
span.inline-block[class*="bg-primary"] {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-weight: 600;
  letter-spacing: 0.01em;
}


/* 12. REFERENZEN CARDS — besserer Hover-Schatten
   ---------------------------------------------------------- */
#referenzen .group.rounded-2xl:hover {
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.12);
  transform: translateY(-4px);
  transition: all 0.35s ease;
}


/* 13. PRICING CARDS — Featured-Card Akzent
   ---------------------------------------------------------- */
.pricing-card.featured {
  background: linear-gradient(160deg, #f0f8e8 0%, #fff 60%);
}


/* 14. TIMELINE-DOTS — Gradient
   ---------------------------------------------------------- */
.timeline-dot {
  background: linear-gradient(135deg, #08648d, #065272);
  box-shadow: 0 4px 16px rgba(8, 100, 141, 0.3);
}