/*
 * Landingpages (Vorlage, Marketing-Plan 26.10.2026, gebaut 27.10.2026).
 * Baut auf styles.css auf und nutzt dessen Farben, Knoepfe, Karten und
 * Formularfelder; hier steht nur, was die Landingpages zusaetzlich brauchen.
 * Zwei Arten: Ortsseiten (mit Navigation, fuer Google) und Anzeigenseiten
 * (ohne Navigation, noindex). Aufbau und Regeln: README.md, Abschnitt
 * "Landingpages".
 */

/* ── Kopf der Anzeigenseiten: Logo und Anrufen, keine Navigation ── */
.lp-kopf {
  background: #072e1a;
  color: #fff;
  position: sticky;
  top: 0;
  z-index: 50;
  box-shadow: 0 2px 12px rgba(0,0,0,.18);
}
.lp-kopf .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-block: 10px;
}
.lp-kopf .lp-logo { flex: 0 0 auto; display: flex; }
/* Logo quer und hell (Zeichen + weisser Schriftzug), Breite ergibt sich aus der Hoehe */
.lp-kopf img { height: 44px; width: auto; }
.lp-kopf-knoepfe { display: flex; gap: 8px; }
/* styles.css macht Knoepfe unter 768px 100 % breit; im Kopf wuerde das Logo zerdrueckt */
.lp-kopf .btn { width: auto; padding: .6rem 1.1rem; white-space: nowrap; }
.lp-kopf .lp-tel-mobil { display: none; }

/* ── Einstieg mit Bild ── */
.lp-hero {
  background: linear-gradient(145deg, #041f11 0, #072e1a 20%, #0a4d2f 50%, #0d6b3e 85%, #0f7d48 100%);
  color: #fff;
  padding: 2.75rem 0 3.25rem;
}
.lp-hero-grid {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 40px;
  align-items: center;
}
.lp-hero h1 {
  color: #fff;
  font-size: clamp(1.7rem, 4vw, 2.5rem);
  margin: .6rem 0 1rem;
}
.lp-hero .lp-lead {
  color: rgba(255,255,255,.9);
  font-size: 1.08rem;
  line-height: 1.65;
  margin: 0 0 1.25rem;
  max-width: 620px;
}
.lp-hero .hero-badge { display: inline-block; }
.lp-hero .cta-row { justify-content: flex-start; flex-wrap: wrap; }
.lp-hero-figure { margin: 0; }
.lp-hero-figure img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  box-shadow: 0 12px 40px rgba(0,0,0,.3);
}
.lp-hero-figure figcaption {
  color: rgba(255,255,255,.78);
  font-size: .86rem;
  line-height: 1.5;
  margin-top: .65rem;
}

/* Haken-Liste der Vorteile */
.lp-punkte { list-style: none; padding: 0; margin: 0 0 1.5rem; display: grid; gap: .45rem; }
.lp-punkte li { position: relative; padding-left: 1.7rem; line-height: 1.55; }
.lp-punkte li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  font-weight: 800;
  color: var(--accent-light);
}
.lp-abschnitt .lp-punkte li::before { color: var(--brand); }

/* ── Abschnitte ── */
.lp-abschnitt { padding: 3.25rem 0; }
.lp-abschnitt.lp-hell { background: var(--bg-alt); }
.lp-abschnitt h2 { font-size: clamp(1.4rem, 3vw, 2rem); margin: .4rem 0 .8rem; }

/* Beispiele mit Foto und Ort */
.lp-refs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 24px;
  margin-top: 1.5rem;
}
.lp-ref {
  margin: 0;
  background: var(--card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.lp-ref img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.lp-ref.lp-hoch img { aspect-ratio: 3 / 4; }
.lp-ref figcaption { padding: 14px 18px 18px; font-size: .95rem; line-height: 1.55; }

/* Sorgfalt: Text links, zwei Hochformat-Fotos rechts (sonst werden sie am Rechner zu hoch) */
.lp-technik {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: 40px;
  align-items: center;
}
.lp-technik .section-intro { margin-bottom: 0; }
.lp-refs-hoch { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 0; }
.lp-ref figcaption strong { display: block; color: var(--brand-dark); margin-bottom: .2rem; }

/* Aktueller Stand (Gesetze, Normen, Vergütung) */
.lp-aktuell {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-top: 1.5rem;
}
.lp-aktuell .card h3 { font-size: 1.05rem; color: var(--brand-dark); margin-bottom: .5rem; }
.lp-aktuell .card p { font-size: .95rem; line-height: 1.6; }

/* Netzbetreiber */
.lp-nb { display: flex; flex-wrap: wrap; gap: .5rem; padding: 0; margin: 1rem 0 0; list-style: none; }
.lp-nb li {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: .35rem .95rem;
  font-size: .92rem;
}

/* ── Kurzes Formular ── */
.lp-formular-layout {
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 24px;
  align-items: start;
  margin-top: 1.5rem;
}
.lp-seite .lp-hinweis { font-size: .86rem; color: var(--text-light); margin: 0; }

/* Lesbarkeit (Lighthouse, 27.10.2026): Links im Fliesstext unterstrichen, grauer Text kraeftiger */
.lp-seite .lp-hinweis a, .lp-seite .lp-aktuell p a, .lp-fuss a { text-decoration: underline; text-underline-offset: 2px; }
.lp-seite .breadcrumb-list, .lp-seite .related-link p { color: var(--text-light); }
.lp-seite .related-link h3 { margin: 0 0 .3rem; font-size: 1rem; color: var(--brand); }

/* Fuss der Anzeigenseiten: nur Pflichtlinks */
.lp-fuss { background: #072e1a; color: rgba(255,255,255,.8); padding: 1.5rem 0; font-size: .9rem; }
.lp-fuss a { color: rgba(255,255,255,.85); }
.lp-fuss a:hover { color: #fff; }

@media (max-width: 900px) {
  .lp-hero-grid, .lp-formular-layout, .lp-aktuell, .lp-technik { grid-template-columns: 1fr; }
  .lp-technik { gap: 1.5rem; }
}
@media (max-width: 560px) {
  .lp-refs-hoch { grid-template-columns: 1fr; }
  .lp-hero { padding: 1.75rem 0 2.25rem; }
  .lp-kopf img { height: 36px; width: auto; }
  .lp-kopf .btn { padding: .5rem .75rem; font-size: .88rem; }
  .lp-kopf .lp-tel-text, .lp-kopf .lp-wa-text { display: none; }
  .lp-kopf .lp-tel-mobil { display: inline; }
  .lp-abschnitt { padding: 2.5rem 0; }
}