/* 2026-09-27 – Responsive Darstellung „Persönliche Besprechung“.
   Desktop >1080px bleibt unverändert. Bis 1080px bleiben Ortskacheln quadratisch.
   Unter 900px: horizontales Swipe-Carousel mit Scroll-Snap und sichtbarem Peek – unabhängig von Hoch-/Querformat. */

@media (max-width:1080px){
  body.home-page .consultation-section .city-panel{
    aspect-ratio:1 / 1;
    min-height:0;
  }
}

@media (max-width:900px){
  body.home-page .consultation-section .city-panels{
    display:flex;
    grid-template-columns:none;
    gap:14px;
    width:100%;
    overflow-x:auto;
    overflow-y:hidden;
    scroll-snap-type:x mandatory;
    scroll-padding-inline:0;
    overscroll-behavior-x:contain;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    touch-action:pan-x pan-y;
  }
  body.home-page .consultation-section .city-panels::-webkit-scrollbar{
    display:none;
  }
  body.home-page .consultation-section .city-panel{
    flex:0 0 88%;
    width:88%;
    max-width:none;
    aspect-ratio:1 / 1;
    min-height:0;
    scroll-snap-align:start;
    scroll-snap-stop:always;
  }
  body.home-page .consultation-section .city-panel+.city-panel{
    border-left:1px solid rgba(255,255,255,.2);
    border-top:1px solid rgba(255,255,255,.2);
  }
}


/* Querformat auf schmalen Displays: Kachel bewusst kompakter, damit die nächste Stadt deutlich sichtbar bleibt. */
@media (max-width:900px) and (orientation:landscape){
  body.home-page .consultation-section .city-panel{
    flex-basis:60%;
    width:60%;
  }
}

/* 2026-09-27 – Typografische Referenz auf der Startseite:
   Rechtsberatung und Kontaktformular verwenden in allen Formaten exakt
   dieselbe H2-Größe wie „Aktuelles aus den bestehenden Fachinformationen“. */
body.home-page .consultation-section .consultation-intro h2,
body.home-page .contact-form-section .contact-form-copy h2{
  font-size:clamp(2.35rem,5vw,5rem);
  line-height:.98;
  letter-spacing:-.045em;
  font-weight:630;
}

/* Kleine Darstellung: die vier Ortskacheln bleiben zwingend quadratisch. */
@media (max-width:900px){
  body.home-page .consultation-section .city-panel{
    aspect-ratio:1 / 1 !important;
    height:auto;
    min-height:0;
  }
}

/* 2026-09-27 – Einheitliche große schwarze Überschriften.
   Referenz ist die Typografie von „PERSÖNLICH. ENGAGIERT. ERFAHREN.“ im Slider. */
body.home-page #investments .section-heading h2,
body.home-page .directory-section .directory-heading h2,
body.home-page .updates-section .updates-heading h2,
body.home-page .consultation-section .consultation-intro h2,
body.home-page .contact-form-section .contact-form-copy h2{
  font-size:clamp(2rem,4.2vw,4.25rem) !important;
  line-height:.98;
  letter-spacing:-.045em;
  font-weight:630;
}

/* 2026-09-27 – iPhone/Smartphone: sichtbare Stadtkachel exakt quadratisch.
   border-box stellt sicher, dass Padding und Border innerhalb des 1:1-Formats liegen. */
@media (max-width:900px){
  body.home-page .consultation-section .city-panel{
    box-sizing:border-box !important;
    aspect-ratio:1 / 1 !important;
    height:auto !important;
    min-height:0 !important;
  }
}