/* Parkkompass — Startseite. Sektionen aus Website/texte-startseite.md,
   eine nach der anderen gebaut. Ergänzt style.css, überschreibt dort
   nichts Globales. */

main.home-main {
  max-width: none;
  padding: 0;
}

/* Hintergrundbild mit Verlauf-Overlay statt Zweispalten-Layout.
   Der Verlauf ist links am dunkelsten (fast deckendes Kompassblau,
   für den Text) und wird nach rechts heller, damit das Foto sichtbar
   bleibt. Kompassblau bei hoher Deckkraft ist dieselbe Farbe, die laut
   brand-kit.md Abschnitt 2.4 mit 10,74 : 1 Kontrast für weißen Text
   geprüft ist — der Verlauf nähert sich dieser Deckkraft im Textbereich
   bewusst an, statt sich auf eine ungeprüfte Mischfarbe zu verlassen. */
.hero {
  position: relative;
  min-height: 420px;
  display: flex;
  align-items: center;
  overflow: hidden;
}

/* Hintergrundbild jetzt als echtes <img> in einem <picture> (SEO-Bilder-
   Kriterium: braucht Alt-Text, ein reines CSS-background-image ist für
   Google-Bildersuche unsichtbar). Mobil-Datei bleibt der <img>-Standard
   (kleinere Datei zuerst laden), ab 640px übernimmt die Desktop-Variante
   per <source media>-Weiche — gleiche Lade-Logik wie vorher, nur nicht
   mehr über CSS. */
.hero-bg-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(20, 66, 90, 0.88);
}

@media (min-width: 640px) {
  /* Ab Tablet-Breite steht der Text nur noch links, der Verlauf gibt
     rechts mehr vom Foto frei. */
  .hero::before {
    background: linear-gradient(100deg, rgba(20, 66, 90, 0.93) 0%, rgba(20, 66, 90, 0.86) 40%, rgba(20, 66, 90, 0.55) 100%);
  }
}

.hero-inner {
  position: relative;
  z-index: 2;
  max-width: var(--layout-max);
  margin: 0 auto;
  padding: var(--space-l) var(--space-m);
  width: 100%;
}

.hero-text {
  max-width: 560px;
}

.hero-text h1,
.hero-text p {
  color: #fff;
}

.hero-text p {
  margin: 0 0 var(--space-m);
  max-width: 46ch;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-m);
}

/* .button-Basisstil kommt aus style.css (wird auch für den
   Kontakt-Button im Header gebraucht). Hier nur Hero-spezifische
   Varianten. */
.button--large {
  font-size: 16px;
  padding: 14px 28px;
}

.button--ghost {
  background: transparent;
  border: 1.5px solid #fff;
  color: #fff;
}

.button--ghost:hover {
  background: rgba(255, 255, 255, 0.14);
}

.section-container {
  max-width: var(--text-max);
  margin: 0 auto;
  padding: var(--space-l) var(--space-m);
  scroll-margin-top: var(--space-m);
}

/* Breiter Container für mehrspaltige Abschnitte (Karten-Raster) —
   brand-kit.md Abschnitt 5 nimmt Layout-Elemente wie Raster explizit
   von der 680-px-Textbreite aus. */
.wide-container {
  max-width: var(--layout-max);
  margin: 0 auto;
  padding: var(--space-l) var(--space-m);
}

.wide-container h2 {
  text-align: center;
  margin-bottom: var(--space-l);
}

/* ---- 2. Trust-Icons-Leiste ---- */
.trust-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-l);
}

@media (min-width: 640px) {
  .trust-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-m);
  }
}

.trust-card {
  text-align: center;
}

.trust-card h3 {
  margin-bottom: var(--space-s);
}

.trust-card h3::before {
  content: "";
  display: block;
  width: 28px;
  height: 4px;
  background: var(--terracotta);
  margin: 0 auto var(--space-s);
}

.trust-card p {
  margin: 0;
  color: #566068;
}

/* ---- 3. Städte-Auswahl ---- */
.cities-section {
  background: var(--paper-tint);
}

.city-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-m);
}

@media (min-width: 640px) {
  .city-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.city-card {
  background: var(--paper);
  border: 1px solid #dbe3e6;
  padding: var(--space-m);
}

.city-card h3 {
  margin-bottom: var(--space-s);
}

.city-card p {
  margin: 0 0 var(--space-m);
  color: #566068;
}

.card-link {
  display: inline-block;
  font-weight: 600;
  color: var(--kompassblau);
  text-decoration: none;
}

.card-link:hover {
  text-decoration: underline;
}

/* ---- 4. So funktioniert's ---- */
.steps-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-l);
  counter-reset: none;
}

@media (min-width: 640px) {
  .steps-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-m);
  }
}

.step-card {
  text-align: center;
}

.step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1.5px solid var(--kompassblau);
  color: var(--kompassblau);
  font-family: 'Archivo', sans-serif;
  font-weight: 700;
  font-size: 16px;
  margin-bottom: var(--space-s);
}

.step-card h3 {
  margin-bottom: var(--space-s);
}

.step-card p {
  margin: 0;
  color: #566068;
}

.placeholder-inline {
  font-style: italic;
  color: #7c868c;
}

/* ---- 5. Leistungen-Übersicht ---- */
.services-section {
  background: var(--paper-tint);
}

.services-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-m);
}

@media (min-width: 640px) {
  .services-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 900px) {
  .services-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.service-card {
  background: var(--paper);
  border: 1px solid #dbe3e6;
  padding: var(--space-m);
}

.service-card h3 {
  margin-bottom: var(--space-s);
}

.service-card p {
  margin: 0;
  color: #566068;
}

/* ---- 6. Vertrauenssignale ---- */
.trust-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
}

.trust-list li {
  padding-left: 22px;
  position: relative;
}

.trust-list li::before {
  content: "–";
  position: absolute;
  left: 0;
  color: var(--kompassblau);
}

.trust-list li.placeholder-inline::before {
  color: #b9c3c8;
}

/* ---- 8. Ratgeber-Teaser ---- */
.articles-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-m);
}

@media (min-width: 640px) {
  .articles-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.article-card {
  display: block;
  background: var(--paper);
  border: 1px solid #dbe3e6;
  border-left: 4px solid var(--terracotta);
  padding: var(--space-m);
  text-decoration: none;
}

.article-card:hover {
  border-color: var(--kompassblau);
  border-left-color: var(--terracotta);
}

.article-card h3 {
  margin: 0 0 var(--space-s);
  color: var(--graphit);
}

.article-card p {
  margin: 0;
  color: #566068;
  text-decoration: none;
}

.article-card:hover h3 {
  text-decoration: underline;
}

/* ---- Kompakte Platzhalter-Sektionen ----
   Verhindert einen "false floor" (NN/G-Befund aus der Recherche):
   eine komplett leere Sektion mit voller Sektions-Höhe sieht wie ein
   Seitenende aus und lässt Besucher vorzeitig abbrechen. */
.section-container--compact {
  padding-top: var(--space-m);
  padding-bottom: var(--space-m);
}

.section-container--compact h2 {
  font-size: 22px;
}

.section-intro {
  color: #566068;
  margin: -12px 0 var(--space-m);
}

/* ---- 9. FAQ ---- */
.faq-section {
  background: var(--paper-tint);
}

.faq-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
}

.faq-item {
  background: var(--paper);
  border: 1px solid #dbe3e6;
  padding: var(--space-m);
}

.faq-item summary {
  cursor: pointer;
  list-style: none;
  position: relative;
  padding-right: 28px;
}

.faq-item summary h3 {
  margin: 0;
  font-family: 'Archivo', sans-serif;
  font-weight: 600;
  font-size: 17px;
  color: var(--graphit);
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary::after {
  content: "";
  position: absolute;
  right: 4px;
  top: 6px;
  width: 9px;
  height: 9px;
  border-right: 1.5px solid var(--kompassblau);
  border-bottom: 1.5px solid var(--kompassblau);
  transform: rotate(45deg);
}

.faq-item[open] summary::after {
  transform: rotate(-135deg);
}

.faq-item p {
  margin: var(--space-s) 0 0;
  color: #566068;
}

.faq-item p:first-of-type {
  margin-top: var(--space-m);
}

/* Formular-Styles (.contact-form, .form-field) sind nach style.css
   umgezogen — werden jetzt auch auf der Kontaktseite gebraucht, nicht
   nur hier. */

/* ---- 13. Abschluss-CTA ---- */
.closing-cta {
  background: var(--kompassblau);
  text-align: center;
}

.closing-cta h2 {
  color: #fff;
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}