/* ================================================================
   H&O immo — Mobile Audit Fixes
   ----------------------------------------------------------------
   Konsolidierte Fixes aus dem Mobile-Audit (375 × 812 px).
   Phase 1: visuelle Bugs        (7-Step-Grid, Reveal-Overflow)
   Phase 2: Touch-Targets < 44px (Hamburger, Step-Nav, Footer …)
   Phase 3: Polish               (Truncates, Whitespace, Aspect-Ratios)

   Bewusst NICHT angefasst:
     .hero, .scroll-hero__*, .hero-*, .scroll-hero, alle Hero-Wolken/
     -Haus, .sell-hero (Hero-Bereich). Per User-Anweisung.

   Reihenfolge: dieses File MUSS als letztes Stylesheet geladen
   werden, damit es den Module-Cascade gewinnt.
   ================================================================ */


/* ============================================================
   PHASE 1 — Visuelle Bugs
   ============================================================ */

/* Reveal-Overflow-Guard
   Initial-State von [data-reveal="right"] ist translateX(32px).
   Wenn IO langsam/aus ist, bleibt das Element rechts versetzt →
   horizontal-scroll auf Mobile. `overflow-x: clip` versteckt das,
   ohne sticky/fixed zu brechen (im Gegensatz zu `hidden`).        */
html, body { overflow-x: clip; }

/* Reveal-Animations: kleinere Verschiebung auf Mobile, damit auch
   bei verzögerter is-revealed-Klasse kein 32-px-Overflow entsteht */
@media (max-width: 720px) {
  [data-reveal="left"]  { transform: translateX(-12px); }
  [data-reveal="right"] { transform: translateX(12px); }
  [data-reveal]         { transform: translateY(16px); }
}

/* bewertung.html hat 7 Steps, das Grid war hartcodiert auf 6.
   Lösung: CSS-Variable mit Default 6 — bewertung.html setzt
   inline `style="--step-count: 7"` auf die Liste.                 */
.step-progress__list {
  grid-template-columns: repeat(var(--step-count, 6), minmax(0, 1fr));
}


/* ============================================================
   PHASE 2 — Touch-Targets (≥ 44 px)
   ============================================================ */

@media (max-width: 1024px) {
  /* Hamburger 40 → 44 px (Apple-HIG-Minimum) */
  .mobile-toggle { width: 44px; height: 44px; }
}

@media (max-width: 720px) {
  /* Step-Nav-Buttons (verkaufen + bewertung): Live waren 24 px hoch */
  .step-nav .btn,
  .step-nav button {
    min-height: 48px;
    padding-block: 0.85rem;
  }

  /* Consent-Checkboxen (verkaufen + bewertung + kontakt) */
  .consent input[type="checkbox"],
  .kt-form input[type="checkbox"] {
    width: 1.25rem;
    height: 1.25rem;
    flex: 0 0 1.25rem;
  }
  .consent { gap: 0.85rem; }

  /* Section-Links wie "Gespräch vereinbaren →" */
  .section-link {
    padding-block: 0.65rem;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  /* About-Banner Ghost-Link "Beratungstermin vereinbaren" */
  .about-banner__ghost {
    padding-block: 0.7rem 0.75rem;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  /* Footer-Links waren 17 px hoch → Hitbox vergrößern.
     Index nutzt .footer-col-brand/.footer-contact, Sub-Pages
     nutzen .footer-col — beide abdecken.                          */
  .site-footer a,
  .footer-grid a,
  .footer-col a,
  .footer-col-brand a,
  .footer-contact a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding-block: 0.4rem;
  }
  /* Brand-Logo im Footer braucht keinen 44-px-Block — Reset wenn ID/Klasse passt */
  .site-footer .brand,
  .footer-brand a {
    min-height: 0;
    padding-block: 0;
  }

  /* Magazin: Such-Clear-Button (×) */
  .mag-bar__clear {
    width: 32px;
    height: 32px;
    font-size: 1.1rem;
  }

  /* Blog-Post: Share-Buttons */
  .post-share__btn {
    min-height: 44px;
    padding: 0.7rem 0.95rem;
    display: inline-flex;
    align-items: center;
  }

  /* Kontakt: Submit-Button volle Breite */
  .kt-form__submit {
    width: 100%;
    align-self: stretch;
    justify-content: center;
    min-height: 52px;
    padding: 1.1rem 1.25rem;
  }
}


/* ============================================================
   PHASE 3 — Layout-Polish
   ============================================================ */

@media (max-width: 720px) {

  /* --- Step-Forms (verkaufen + bewertung) ---------------------- */

  /* Step-Progress: Zahlen nicht zu winzig */
  .step-progress__list li span {
    font-size: 0.85rem;
  }
  .step-progress__list { gap: 0.4rem; }

  /* Tile-Texte: lange Wörter brechen statt abgeschnitten zu werden
     ("Mehrfamilienhaus", "Bauerwartungsland", "Renovierungsbed.")
     overflow-wrap statt word-break — bricht erst, wenn Hyphenation
     nicht reicht, statt mitten im Wort.                            */
  .tile span,
  .tile strong,
  .chip-radio span {
    overflow-wrap: break-word;
    -webkit-hyphens: auto;
    hyphens: auto;
  }


  /* --- Index: Engagement-Card ---------------------------------- */
  /* Lead-Card war 540 px min-height + 16/10-Media = sehr lang     */
  .engagement__card--lead {
    min-height: auto;
  }
  .engagement__card--lead .engagement__media,
  .engagement__media {
    aspect-ratio: 4 / 3;
  }


  /* --- Index: About-Banner Stats (2-spaltig → gestackt) ---------*/
  /* Border-Left zwischen Stats wirkt bei engen Spalten gequetscht */
  .about-banner__stats {
    grid-template-columns: 1fr;
    width: auto;
    margin-inline: 1rem;
    padding: 1.2rem 0;
  }
  .about-banner__stats li {
    border-left: none;
    border-top: 1px solid rgba(180, 139, 116, 0.18);
    padding: 0.85rem 0 0;
  }
  .about-banner__stats li:first-child {
    border-top: none;
    padding-top: 0;
  }


  /* --- Index: Process-Step Padding leicht reduzieren ----------- */
  /* Schmaler Number-Circle gibt Text-Spalte mehr Platz             */
  .process__step {
    padding-left: 3rem;
  }
  .process__num {
    width: 2.6rem;
    height: 2.6rem;
    font-size: 0.72rem;
  }


  /* --- ueber-uns: Story-Bilder & Headlines --------------------- */
  .uu-step h2,
  .uu-step__title,
  .timeline h2 {
    line-height: 1.1;
  }


  /* --- ueber-uns: Hero-Bild auf Mobile -------------------------
     Auf Mobile schneidet object-fit:cover seitlich so stark, dass
     Anna rechts halb abgeschnitten wird. Bild nach links schieben,
     indem der x-Crop-Fokus nach rechts wandert.
     Zoom-Animation + Sticky-Höhe bleiben unangetastet.            */
  .uu-hero__media img {
    object-position: 62% 32%;
  }


  /* --- Kontakt: Hero-Padding reduzieren ------------------------ */
  .kt-hero {
    padding-top: clamp(6rem, 12vh, 9rem);
    padding-bottom: 2rem;
  }

  /* Kontakt: Topics-Arrow-Spalte breiter machen */
  .kt-topics__grid a {
    grid-template-columns: 3rem 1fr 1.5rem;
    column-gap: 0.75rem;
  }
  .kt-topics__arrow {
    width: 1.5rem;
    flex-shrink: 0;
  }

  /* Kontakt: Lange Werte brechen */
  .kt-person__channels dd,
  .kt-hero__quick strong {
    overflow-wrap: break-word;
  }


  /* --- Blog: Magazin-Pick und Reading-Layout ------------------- */
  .mag-pick__card--lead {
    min-height: 220px;
  }

  /* Drop-Cap proportional auf Mobile */
  .post-body p:first-of-type:not(.post-lead)::first-letter {
    font-size: 2.8em;
  }


  /* --- Blog-Post: Meta-Zeile stapeln statt brechen ------------- */
  .post-hero__meta {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.65rem;
  }

  /* Blog-Post: Quote ohne negative Margins (Overflow-sicher) */
  .post-quote {
    margin: 2.25rem 0;
    padding: 1.5rem 1.25rem 1.5rem 1.5rem;
  }
  .post-quote::before {
    font-size: 3rem;
    left: 0.4rem;
  }
}


@media (max-width: 480px) {
  /* Service-Tiles: 4/5 ist auf Mobile sehr hoch (≈ 430 px je Karte
     bei 343 px Breite). 16/11 ≈ 240 px — bleibt dramatic, ohne
     dass die Service-Sektion 4 Bildschirmhöhen schluckt.          */
  .service-tile { aspect-ratio: 16 / 11; }

  /* ueber-uns: Team-Bilder etwas kompakter */
  .uu-step::before {
    aspect-ratio: 3 / 4;
    margin-bottom: 1rem;
  }

  /* Timeline-Jahres-Label schmaler */
  .timeline__row {
    grid-template-columns: 3.5rem 1fr;
    gap: 0.55rem;
  }

  /* Region-Tile: kein vw (greift Scrollbars ab) — Container-relativ */
  .regions-pin .regions-grid .region-tile,
  .region-tile {
    flex-basis: 100%;
    width: 100%;
  }
}

/* ================================================================
   Portrait-Foto-Crops (außerhalb Media-Query, global)
   AnnaPferd.jpg ist Hochformat (4000×6000) und wird in querformatige
   Container (16:8, 16:10, 4:3 …) geladen. Crop nach oben biased,
   damit Kopf von Anna + Pferd + Schleife sichtbar bleiben.
   ================================================================ */
img[src$="AnnaPferd.jpg"] { object-position: center 30%; }