/* 32 · 35 · Porträteinstieg der Gutachtenseiten am Handy – nur bis 640 Pixel, Desktop unverändert.
   Live erprobt am 23.09.2026 bei 360, 375, 390, 430, 640, 641 und 1280 Pixeln. */
@media (max-width: 640px) {

  /* Textspalte auflösen: Porträts, Texte und Buttons stehen in einem gemeinsamen Raster */
  :is(#pg-verkehrswertgutachten, #pg-restnutzungsdauer, #pg-bauschaden) .hero .hero__inner {
    display: grid !important; grid-template-columns: minmax(0, 1fr) !important; row-gap: 0 !important; }
  :is(#pg-verkehrswertgutachten, #pg-restnutzungsdauer, #pg-bauschaden) .hero .hero__inner
    > div:not(.hero__portrait) { display: contents !important; }

  /* Reihenfolge: Brotkrumen, Augenbraue, Überschrift, Einleitung, „mehr lesen“, Signatur –
     Porträts – Buttons, Telefonzeile – Vorteile */
  :is(#pg-verkehrswertgutachten, #pg-restnutzungsdauer, #pg-bauschaden) .hero .hero__inner
    :is(.breadcrumb, .hero__eyebrow, .hero__title, .hero__lead, .m-lead-more, .hero__signature) {
    order: 1 !important; }
  :is(#pg-verkehrswertgutachten, #pg-restnutzungsdauer, #pg-bauschaden) .hero .hero__inner
    .hero__portrait { order: 2 !important; }
  :is(#pg-verkehrswertgutachten, #pg-restnutzungsdauer, #pg-bauschaden) .hero .hero__inner
    :is(.hero__cta, .m-hero-tel) { order: 3 !important; }
  :is(#pg-verkehrswertgutachten, #pg-restnutzungsdauer, #pg-bauschaden) .hero .hero__inner
    .hero__usps { order: 4 !important; }
  :is(#pg-verkehrswertgutachten, #pg-restnutzungsdauer, #pg-bauschaden) .hero
    .hero__portrait-frame { display: none !important; }

  /* Zwei Gutachter (Verkehrswert, Restnutzungsdauer): nebeneinander über die volle Breite,
     Name und Funktion unter dem jeweiligen Bild */
  :is(#pg-verkehrswertgutachten, #pg-restnutzungsdauer) .hero .hero__inner .hero__portrait {
    width: 100% !important; max-width: none !important; margin: 6px 0 22px !important; }
  :is(#pg-verkehrswertgutachten, #pg-restnutzungsdauer) .hero .hero__duo {
    display: grid !important; grid-template-columns: 1fr 1fr !important;
    gap: 14px !important; width: 100% !important; }
  :is(#pg-verkehrswertgutachten, #pg-restnutzungsdauer) .hero .hero__duo-item img {
    width: 100% !important; border-radius: 12px !important; }
  :is(#pg-verkehrswertgutachten, #pg-restnutzungsdauer) .hero .hero__duo-item figcaption {
    margin-top: 10px !important; font-size: 13px !important; line-height: 1.4 !important; }
  :is(#pg-verkehrswertgutachten, #pg-restnutzungsdauer) .hero .hero__duo-item figcaption strong {
    display: block !important; font-size: 15px !important; line-height: 1.3 !important; }
  #pg-restnutzungsdauer .hero .hero__inner .hero__signature { margin: 0 0 18px !important; }

  /* Ein Gutachter (Bauschaden): Porträt links, Name und Funktion rechts daneben */
  #pg-bauschaden .hero .hero__inner {
    grid-template-columns: 132px minmax(0, 1fr) !important; column-gap: 16px !important;
    align-items: center !important; }
  #pg-bauschaden .hero .hero__inner > div:not(.hero__portrait) > * { grid-column: 1 / -1 !important; }
  #pg-bauschaden .hero .hero__inner .hero__portrait {
    grid-column: 1 !important; width: 132px !important; max-width: 132px !important;
    margin: 6px 0 22px !important; }
  #pg-bauschaden .hero .hero__portrait-photo { width: 100% !important; border-radius: 12px !important; }
  #pg-bauschaden .hero .hero__inner > div:not(.hero__portrait) > .hero__signature {
    grid-column: 2 !important; order: 2 !important; margin: 6px 0 22px !important; }
}