/* =========================================
   STARTSEITE (index.html) - Hero, Intro, Zielgruppen, Funnel, Services
   ========================================= */

/* 1. HERO: dunkles Band; PC = Text links / animiertes Haus rechts, Handy = untereinander */
.home-hero {
  background: radial-gradient(900px 500px at 85% 20%, rgba(0, 176, 255, 0.14), transparent 65%), var(--blue-dark);
  color: var(--white);
  padding: calc(var(--header-height-desktop) + 48px) 20px 64px;
}

.home-hero-inner {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.25fr);
  grid-template-areas:
    "head     media"
    "services media"
    "actions  media";
  grid-template-rows: auto auto 1fr;
  column-gap: 56px;
  align-items: start;
}

.home-hero-head {
  grid-area: head;
}
.home-hero-media {
  grid-area: media;
  align-self: center;
}
.home-hero-services {
  grid-area: services;
}
.home-hero-actions {
  grid-area: actions;
}

.home-hero h1 {
  margin: 0 0 16px 0;
  font-size: clamp(1.9rem, 3vw, 2.7rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
  font-weight: 700;
  text-transform: uppercase;
}

.highlight-cyan {
  color: var(--blue-tech);
}

.hero-kicker {
  margin: 0 0 12px 0;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #94a3b8;
}

.hero-sub {
  margin: 0 0 28px 0;
  font-size: 1.1rem;
  line-height: 1.6;
  color: #cbd5e1;
}

.home-hero-media {
  position: relative;
  margin: 0;
  border-radius: 22px;
  overflow: hidden;
  background: #cfe3f1;
  box-shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.6);
}

.home-hero-media img {
  display: block;
  width: 100%;
  height: auto;
}

/* --- Animation über dem Hausbild (nur CSS/SVG, kein JS) --- */
.energy-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.energy-overlay .flow path {
  fill: none;
  stroke: #00b0ff;
  stroke-width: 7;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 14 30;
  animation: energy-flow 1.6s linear infinite;
}

/* statischer Schein unter den Linien (günstiger als ein animierter Filter) */
.energy-overlay .glow path {
  fill: none;
  stroke: rgba(0, 176, 255, 0.28);
  stroke-width: 18;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.energy-overlay .glow .flow-pv {
  stroke: rgba(250, 204, 21, 0.3);
}

/* Strom vom Wechselrichter in den Speicher (grün) */
.energy-overlay .flow .flow-charge {
  stroke: #22c55e;
}

.energy-overlay .glow .flow-charge {
  stroke: rgba(34, 197, 94, 0.3);
}

/* Speicher füllt sich von unten nach oben */
.energy-overlay .battery-fill {
  fill: rgba(34, 197, 94, 0.45);
  transform-box: fill-box;
  transform-origin: bottom;
  animation: battery-charge 5s ease-in-out infinite;
}

@keyframes battery-charge {
  0% {
    transform: scaleY(0.12);
  }
  80%,
  100% {
    transform: scaleY(1);
  }
}

/* Leitung vom Dach: Solarstrom (gelb) fließt nach unten ins Haus */
.energy-overlay .flow .flow-pv {
  stroke: #facc15;
}

@keyframes energy-flow {
  to {
    stroke-dashoffset: -44;
  }
}

/* Lichtstreifen läuft über die komplette PV-Anlage */
.energy-overlay .sun-sweep {
  animation: sun-sweep 5s ease-in-out infinite;
}

@keyframes sun-sweep {
  0%,
  10% {
    transform: translateX(0);
  }
  70%,
  100% {
    transform: translateX(2200px);
  }
}

.energy-overlay .pulse {
  fill: none;
  stroke: #22c55e;
  stroke-width: 6;
  transform-box: fill-box;
  transform-origin: center;
  animation: charge-pulse 2s ease-out infinite;
}

@keyframes charge-pulse {
  0% {
    transform: scale(0.6);
    opacity: 0.9;
  }
  100% {
    transform: scale(1.6);
    opacity: 0;
  }
}

/* --- Leistungen + Buttons --- */
.home-hero-services h2 {
  margin: 0 0 14px 0;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #94a3b8;
}

.home-hero-list {
  list-style: none;
  margin: 0 0 32px 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2px 20px;
}

.home-hero-list a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0; /* Touch-Ziel */
  color: var(--white);
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
}

.home-hero-list a::before {
  content: "";
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #22c55e url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 13px no-repeat;
}

.home-hero-list a:hover,
.home-hero-list a:focus-visible {
  color: var(--blue-tech);
}

.home-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.btn-main,
.btn-ghost {
  display: inline-block;
  padding: 14px 30px;
  border-radius: 50px;
  border: 2px solid transparent;
  font-weight: 700;
  font-size: 0.95rem;
  text-decoration: none;
  text-align: center;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.btn-main {
  background: var(--blue-tech);
  border-color: var(--blue-tech);
  color: var(--blue-dark); /* Weiß auf Cyan hätte nur ~2,5:1 Kontrast */
}

.btn-main:hover,
.btn-main:focus-visible {
  background: #33c0ff;
  border-color: #33c0ff;
}

.btn-ghost {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.45);
  color: var(--white);
}

.btn-ghost:hover,
.btn-ghost:focus-visible {
  border-color: var(--white);
  background: rgba(255, 255, 255, 0.08);
}

/* 3. TEXT FÜR PRIVAT- UND GEWERBEKUNDEN (bewusst ohne Bilder) */
.about-section {
  padding: 88px 0;
  background: var(--white);
}

.about-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
}

.about-col {
  background: #f4f7fa;
  border: 1px solid #e3eaf1;
  border-radius: 22px;
  padding: 34px 36px;
}

.about-col h3 {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 16px 0;
  font-size: 1.4rem;
  color: var(--blue-dark);
}

.about-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: #e6f4fb;
  color: var(--blue-text);
}

.about-icon svg {
  width: 24px;
  height: 24px;
}

.about-col p {
  margin: 0 0 14px 0;
  line-height: 1.75;
  color: #334155;
}

.about-col p:last-child {
  margin-bottom: 0;
}

/* 4. LEISTUNGS-WIDGETS (Bildkacheln, direkt nach dem Text) */
.services-section {
  padding: 88px 0;
  background: radial-gradient(900px 420px at 85% 0%, rgba(0, 176, 255, 0.16), transparent 65%), linear-gradient(180deg, var(--blue-dark) 0%, #001a2b 100%);
}

.services-section .section-kicker {
  color: var(--blue-tech);
}

.services-section .section-heading {
  color: var(--white);
}

.services-section .svc-card {
  border-color: transparent;
}

.services-section .svc-card:hover,
.services-section .svc-card:focus-visible {
  border-color: var(--blue-tech);
  box-shadow: 0 24px 48px -24px rgba(0, 0, 0, 0.6);
}

.svc-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin-top: 36px;
}

.svc-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  background: var(--white);
  border: 1px solid #e3eaf1;
  border-radius: 20px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.svc-card:hover,
.svc-card:focus-visible {
  border-color: var(--blue-tech);
  box-shadow: 0 24px 48px -30px rgba(0, 35, 57, 0.5);
  transform: translateY(-3px);
}

.svc-media {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  background: #e2e8f0;
  overflow: hidden;
}

.svc-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.svc-body {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  gap: 10px;
  padding: 22px 24px 24px;
}

.svc-title {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--blue-dark);
}

.svc-text {
  line-height: 1.6;
  color: #475569;
}

.svc-more {
  align-self: flex-start;
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 18px;
  border-radius: 999px;
  border: 2px solid var(--blue-dark);
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--blue-dark);
  transition: background-color 0.2s ease, color 0.2s ease;
}

.svc-more::after {
  content: "\2192";
}

.svc-card:hover .svc-more,
.svc-card:focus-visible .svc-more {
  background: var(--blue-dark);
  color: var(--white);
}

.svc-card--urgent .svc-title {
  color: #c81e1e;
}

.svc-card--urgent .svc-more {
  border-color: #c81e1e;
  color: #c81e1e;
}

.svc-card--urgent:hover .svc-more,
.svc-card--urgent:focus-visible .svc-more {
  background: #c81e1e;
  color: var(--white);
}
/* 6. KUNDENSTIMMEN (Ende der Startseite, weißes Band vor dem Footer) */
.reviews-section {
  padding: 80px 0 88px;
  background: var(--white);
  border-top: 1px solid #dfe7ef;
}

.review-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin-top: 36px;
}

.review-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 0;
  padding: 28px;
  background: var(--page-bg);
  border: 1px solid #e3eaf1;
  border-radius: 20px;
}

.review-stars {
  margin: 0;
  font-size: 1.2rem;
  letter-spacing: 2px;
  color: #b45309; /* Bernstein, Kontrast >= 4,5:1 auf hellem Grund */
}

.review-text {
  margin: 0;
  flex-grow: 1;
}

.review-text p {
  margin: 0;
  line-height: 1.7;
  color: #334155;
}

.review-text p::before {
  content: "\201E";
}

.review-text p::after {
  content: "\201C";
}

.review-author {
  display: flex;
  flex-direction: column;
  gap: 2px;
  color: var(--blue-dark);
}

.review-author span {
  font-size: 0.85rem;
  color: #475569;
}

.reviews-more {
  margin: 32px 0 0;
  text-align: center;
}

.btn-reviews {
  display: inline-block;
  padding: 13px 26px;
  border: 2px solid var(--blue-dark);
  border-radius: 999px;
  color: var(--blue-dark);
  font-weight: 700;
  text-decoration: none;
}

.btn-reviews:hover,
.btn-reviews:focus-visible {
  background: var(--blue-dark);
  color: var(--white);
}

@media (max-width: 860px) {
  .review-grid {
    grid-template-columns: 1fr;
  }
}

/* =========================================
   MOBILE
   ========================================= */
@media (max-width: 1100px) {
  .home-hero {
    padding: calc(var(--header-height-mobile) + 32px) 16px 48px;
  }
  .home-hero-inner {
    max-width: 760px;
    grid-template-columns: 1fr;
    grid-template-areas:
      "head"
      "media"
      "services"
      "actions";
    grid-template-rows: auto;
    row-gap: 28px;
  }
  .home-hero h1 {
    font-size: clamp(1.6rem, 6.5vw, 2.3rem);
  }
  .hero-sub {
    margin: 0;
    font-size: 1rem;
  }
  .home-hero-media {
    border-radius: 16px;
  }
  .home-hero-list {
    margin-bottom: 0;
  }
}

@media (max-width: 1000px) {
  .svc-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 860px) {
  .about-section {
    padding: 60px 0 48px;
  }
  .section-lead {
    margin-bottom: 32px;
    font-size: 1rem;
    text-align: left;
  }
  .about-grid {
    grid-template-columns: 1fr;
  }
  .about-col {
    padding: 26px 22px;
  }
}

@media (max-width: 480px) {
  .home-hero-actions a {
    width: 100%;
  }
  .home-hero-list {
    grid-template-columns: 1fr;
  }
  .svc-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .svc-body {
    padding: 18px 20px 20px;
  }
}