/* ==========================================================================
   Björn Hänsel Gebäudeservice – Ergänzungen für lokale SEO-Sektionen
   Stand: 09.09.2026
   Wird ZUSÄTZLICH zu style.css geladen. style.css bleibt unverändert,
   damit sich diese Ergänzungen jederzeit einzeln zurücknehmen lassen.
   ========================================================================== */

/* ---------- Kopfzeile ---------------------------------------------------- */

/* Das Logo darf durch die Navigation nicht gestaucht werden. */
.brand-logo { flex: none; }

/* ---------- Mobilmenü: Schließen-X sichtbar halten ------------------------
   Das geoeffnete Menuepanel (.main-nav.open) ist position:fixed mit z-index 95
   und liegt rechts oben genau ueber dem Hamburger-Button. Ohne eigenen
   z-index (Standard: auto) verschwindet der Button darunter – das X zum
   Schliessen ist dann unsichtbar und nicht anklickbar, und das Menue laesst
   sich nur noch ueber einen Menuepunkt, den Hintergrund oder Escape schliessen.
   Beide sitzen im Stacking Context des sticky Headers, deshalb genuegt der
   hoehere z-index. Am 09.09.2026 mit elementFromPoint nachgemessen:
   mit dieser Regel trifft die Mitte des Buttons den Button, ohne sie das Panel.
   NICHT ENTFERNEN. */
.menu-toggle {
  position: relative;
  z-index: 96;
}

/* ---------- Untermenü unter "Leistungen" --------------------------------
   Enthält "Alle Leistungen", "Treppenhausreinigung" und
   "Gebäudeservice Potsdam". Die Hauptnavigation bleibt dadurch bei vier
   Punkten, und die beiden Unterseiten sind trotzdem von jeder Seite aus
   verlinkt. Am Handy klappt nichts – die Punkte stehen eingerückt
   untereinander, damit das bestehende Mobilmenü unangetastet bleibt. */

.main-nav li.has-sub { position: relative; }

.main-nav .sub-nav {
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (min-width: 861px) {
  .main-nav .sub-nav {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    /* display: block ist wichtig: .main-nav ul ist in style.css ein Flex-
       Container, den das Untermenue sonst erbt und einzeilig wird. */
    display: block;
    min-width: 234px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: var(--shadow-md);
    padding: 8px;
    z-index: 120;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .14s ease;
  }

  .main-nav li.has-sub:hover > .sub-nav,
  .main-nav li.has-sub:focus-within > .sub-nav {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  .main-nav .sub-nav li { display: block; margin: 0; }

  .main-nav .sub-nav a {
    display: block;
    padding: 9px 14px;
    border-radius: 9px;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--navy);
    text-decoration: none;
    white-space: nowrap;
  }

  .main-nav .sub-nav a:hover,
  .main-nav .sub-nav a:focus-visible {
    background: var(--green-tint);
    color: var(--green-dark);
  }

  .main-nav .sub-nav a.active { color: var(--green-dark); }
}

@media (max-width: 860px) {
  .main-nav .sub-nav {
    display: block;
    margin: 4px 0 10px 4px;
    padding-left: 14px;
    border-left: 2px solid var(--green-tint);
  }
  .main-nav .sub-nav li { margin: 0; }
  .main-nav .sub-nav a {
    font-size: 15.5px;
    font-weight: 600;
    opacity: .92;
  }
}

@media (prefers-reduced-motion: reduce) {
  .main-nav .sub-nav { transition: none; }
}

/* ---------- Hero: Claim unter der neuen H1 ----------------------------- */

.hero-claim {
  font-size: clamp(20px, 2.6vw, 27px);
  font-weight: 800;
  color: var(--green);
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin: -8px 0 18px;
}

/* ---------- Leistungsraster: 5 Karten (3 oben, 2 zentriert unten) ------ */

.service-grid { grid-template-columns: repeat(6, 1fr); }
.service-grid > .service-card { grid-column: span 2; }
.service-grid > .service-card:nth-child(4) { grid-column: 2 / span 2; }
.service-grid > .service-card:nth-child(5) { grid-column: 4 / span 2; }

/* ---------- Einsatzgebiet ---------------------------------------------- */

.area-grid {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 24px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}

.area-col {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px 28px 24px;
  box-shadow: var(--shadow-sm);
}

.area-col h3 {
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--green-tint);
}

.area-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.area-col li {
  background: var(--cream);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--navy);
}

.area-link {
  display: inline-block;
  margin-top: 18px;
  color: var(--green-dark);
  font-weight: 700;
  font-size: 14.5px;
  text-decoration: none;
}
.area-link:hover { text-decoration: underline; }

.area-note {
  max-width: var(--maxw);
  margin: 26px auto 0;
  padding: 0 24px;
  text-align: center;
  font-size: 15.5px;
  color: var(--text-muted);
}

/* ---------- FAQ auf der Startseite ------------------------------------- */

.faq-wrap {
  max-width: 840px;
  margin: 0 auto;
  padding: 0 24px;
}
.faq-wrap h2 { margin-bottom: 28px; }
.faq-wrap details { background: #fff; }

/* ---------- Footer: Einsatzgebiet-Zeile -------------------------------- */

.footer-area {
  margin-top: 16px;
  font-size: 13.5px !important;
  color: #93a3af !important;
  line-height: 1.5;
}

/* ---------- Karte mit Klick-zum-Laden ---------------------------------- */

.map-section { padding: 0 0 80px; }
.map-section h2 { font-size: 25px; margin-bottom: 20px; }

.map-box {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--cream);
  min-height: 340px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.map-placeholder {
  text-align: center;
  padding: 40px 28px;
  max-width: 560px;
}
.map-title {
  font-size: 17px;
  font-weight: 800;
  color: var(--navy);
  margin-bottom: 8px;
}
.map-text {
  font-size: 15px;
  color: var(--text-muted);
  margin-bottom: 22px;
}
.map-alt { margin: 18px 0 0; font-size: 14px; }
.map-alt a { color: var(--green-dark); font-weight: 600; }

.map-box.loaded {
  display: block;
  min-height: 0;
  background: none;
}
.map-box.loaded iframe {
  display: block;
  width: 100%;
  height: 420px;
  border: 0;
}

/* ---------- Leistungs-Karten: Hover wirkt lebendiger --------------------
   Karte hebt sich leicht an, Schatten wächst mit, Icon dreht minimal.
   Umgesetzt am 09.09.2026 als Teil des "lebendigeres Design"-Vorschlags. */

.service-card {
  transition: transform .22s cubic-bezier(.22,1.12,.36,1),
              box-shadow .22s cubic-bezier(.16,1,.3,1);
}
.service-card:hover,
.service-card:focus-visible {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
}
.service-icon {
  transition: transform .3s cubic-bezier(.22,1.12,.36,1);
}
.service-card:hover .service-icon,
.service-card:focus-visible .service-icon {
  transform: scale(1.12) rotate(-4deg);
}

/* ---------- Hauptmenü: weicher Unterstrich statt hartem Farbwechsel -----
   Nur die vier Hauptpunkte (Startseite/Leistungen/Über uns/Kontakt), NICHT
   das Leistungen-Untermenü (.sub-nav hat bereits seinen eigenen grünen
   Tint-Hover) und NICHT die Telefon/WhatsApp-Buttons. */

.main-nav > ul > li > a {
  position: relative;
}
.main-nav > ul > li > a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  height: 2px;
  width: 0;
  background: var(--green);
  border-radius: 2px;
  transition: width .25s cubic-bezier(.16,1,.3,1);
}
.main-nav > ul > li > a:hover::after,
.main-nav > ul > li > a:focus-visible::after {
  width: 100%;
}

/* ---------- Buttons: spürbares Klick-Feedback + Puls auf Haupt-CTA ------
   .btn deckt btn-primary/btn-outline/btn-white ab. Transition-Liste bewusst
   grosszügig, damit vorhandene Hover-Übergänge aus style.css nicht durch
   das Überschreiben der Kurzform "transition" verloren gehen. */

.btn {
  transition: transform .14s cubic-bezier(.16,1,.3,1),
              box-shadow .2s ease, background-color .2s ease,
              color .2s ease, border-color .2s ease;
}
.btn:active {
  transform: scale(.96);
}
.hero-actions .btn-primary {
  animation: bh-pulse 2.8s ease-in-out infinite;
}
@keyframes bh-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(22,128,60,.28); }
  50%      { box-shadow: 0 0 0 9px rgba(22,128,60,0); }
}

/* ---------- Vertrauens-Zahlen: Count-up-Ziel-Layout ----------------------
   Verhindert Sprung/Umbruch waehrend main.js die Zahl hochzaehlt. */

.count-up { font-variant-numeric: tabular-nums; }

/* ---------- Bewertungen als Karussell ------------------------------------
   .review-grid (4 statische Kacheln) wird zu .review-carousel mit
   .review-track (Flex, verschiebt sich per transform) + Dots. Die einzelne
   .review-card behaelt ihr Aussehen aus style.css, nur der Aussen-Container
   aendert sich von Grid zu Karussell. */

.review-carousel {
  max-width: 640px;
  margin: 0 auto;
  overflow: hidden;
}
.review-track {
  display: flex;
  transition: transform .5s cubic-bezier(.16,1,.3,1);
}
.review-track .review-card {
  flex: 0 0 100%;
  box-sizing: border-box;
}
.review-dots {
  display: flex;
  gap: 9px;
  justify-content: center;
  margin-top: 24px;
}
.review-dots .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--border);
  border: 0;
  padding: 0;
  cursor: pointer;
  transition: background .2s, transform .2s;
}
.review-dots .dot:hover { background: var(--green-light); }
.review-dots .dot.active {
  background: var(--green);
  transform: scale(1.3);
}

@media (prefers-reduced-motion: reduce) {
  .service-card, .service-icon, .btn, .main-nav > ul > li > a::after,
  .review-track { transition: none !important; }
  .hero-actions .btn-primary { animation: none !important; }
}

/* ---------- Responsive ------------------------------------------------- */

@media (max-width: 1000px) {
  .area-grid { grid-template-columns: 1fr; }
  .service-grid { grid-template-columns: 1fr; }
  .service-grid > .service-card,
  .service-grid > .service-card:nth-child(4),
  .service-grid > .service-card:nth-child(5) { grid-column: auto; }
}

@media (max-width: 560px) {
  .map-box { min-height: 260px; }
  .map-box.loaded iframe { height: 320px; }
  .hero-claim { margin-top: -4px; }
}


/* ---------- Leistungsbloecke: sanftes Einblenden beim Scrollen ----------
   .reveal/.is-visible werden von main.js gesetzt (IntersectionObserver).
   Ergaenzt am 09.09.2026 im Rahmen des Animations-Vorschlags. */
.service-block.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 1.2s cubic-bezier(.16,1,.3,1), transform 1.2s cubic-bezier(.16,1,.3,1);
}
.service-block.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ---------- Startseite: Hero blendet beim Laden weich ein ---------------
   Nur einmalig beim ersten Rendern der Seite, kein Scroll-Trigger.
   Ergaenzt am 09.09.2026 im Rahmen des Animations-Vorschlags. */
@keyframes bh-hero-in {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
.hero-text > .eyebrow,
.hero-text > h1,
.hero-text > .hero-claim,
.hero-text > .lead,
.hero-text > .hero-actions,
.hero-text > .hero-call {
  animation: bh-hero-in .75s cubic-bezier(.16,1,.3,1) both;
}
.hero-text > .eyebrow      { animation-delay: 0s; }
.hero-text > h1            { animation-delay: .12s; }
.hero-text > .hero-claim   { animation-delay: .24s; }
.hero-text > .lead         { animation-delay: .34s; }
.hero-text > .hero-actions { animation-delay: .44s; }
.hero-text > .hero-call    { animation-delay: .54s; }

@media (prefers-reduced-motion: reduce) {
  .service-block.reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .hero-text > .eyebrow,
  .hero-text > h1,
  .hero-text > .hero-claim,
  .hero-text > .lead,
  .hero-text > .hero-actions,
  .hero-text > .hero-call {
    animation: none;
  }
}