/* Geräte-Anpassung (KASKADE 8.2): Tablet hochkant (iPad, iPad Air, iPad Pro 11)
   Bereich: (min-width: 768px) and (max-width: 1023px)
   Nur Regeln innerhalb dieses Media-Queries. Wird nach flow.css geladen. */

@media (min-width: 768px) and (max-width: 1023px) {

  /* ---------- Touch: Tap-Ziele ≥ 44 px (kein Hover auf dem Tablet) ---------- */
  .site-header .btn { min-height: 44px; }
  .site-header .tel-link { width: 44px; height: 44px; }
  .hero__punkt { height: 44px; }
  .weg__wechsel { padding-block: 11px; margin-block: -3px; }
  .direkt__tel { min-height: 44px; }
  /* Textlinks: Trefferfläche per Padding, Lage bleibt durch negativen Rand gleich */
  .anfrage__tel { padding-block: 9px; margin-block: -9px; }
  .footer__nav a { display: inline-block; padding-block: 12px; margin-block: -12px; }
  .footer__recht a { display: inline-block; padding-block: 13px; margin-block: -13px; }
  .footer__karte { padding-block: 11px; margin-top: calc(-1 * var(--s-2) - 11px); margin-bottom: -11px; }
  .consent__mehr { min-height: 44px; }
  .consent__links a { display: inline-block; padding-block: 12px; margin-block: -12px; }

  /* ---------- §3 Schnellauswahl: drei Kacheln füllen die Zeile (sonst bis zu 250 px Leerraum rechts) ---------- */
  .filter { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  /* ---------- §6 Bildkarte: Abstand zwischen Ortsmarke und Text (bei 768 px stießen beide aneinander) ---------- */
  .indiv__karte { column-gap: var(--s-6); }

  /* ---------- §7 Beschreibung: Zeilenlänge begrenzen (bei 1000 px sonst ~110 Zeichen) ---------- */
  .weida__info p { max-width: 68ch; }

  /* ---------- §8 Schritte: 4 + 4 statt gestapelter Handy-Variante (Foto 1:1 in voller Breite + leere Kachel daneben).
     Links Foto 4:3, rechts Titel, Fakt-Kachel, Text, Fußzeile. ---------- */
  .schritte__rechts { gap: var(--s-8); }
  .schritt {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto auto auto 1fr;
    grid-template-areas: "foto titel" "foto kachel" "foto text" "foto fuss";
    column-gap: var(--gutter); row-gap: var(--s-4); align-items: start;
  }
  .schritt__medien { display: contents; }
  .schritt__foto { grid-area: foto; aspect-ratio: 4 / 3; }
  .schritt__titel { grid-area: titel; }
  .schritt__kachel {
    grid-area: kachel; aspect-ratio: auto; flex-direction: row; flex-wrap: wrap; align-items: baseline; justify-content: flex-start;
    gap: var(--s-1) var(--s-3); padding: var(--s-4) var(--s-5);
  }
  .schritt__text { grid-area: text; font-size: var(--fs-body); }
  .schritt__fuss { grid-area: fuss; }

  /* ---------- §9 Anfrage: Foto und „Direkt sprechen“ nebeneinander (4 + 4).
     Foto in seinem 4:3-Format (Dach nicht mehr abgeschnitten), erste Frage rückt um ~300 px nach oben. ---------- */
  .anfrage__links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Mindesthöhe = 4:3 der halben Breite; ist die Kontaktleiste höher, wächst das Foto mit (keine Lücke darunter) */
  .anfrage__bild { height: auto; min-height: 37.5vw; }
  .anfrage__kontakt { display: flex; flex-direction: column; justify-content: center; border-top: 0; padding: var(--s-5) var(--rand); }
  .anfrage__kontakt-spalten { grid-template-columns: minmax(0, 1fr); gap: var(--s-4); }
  .anfrage__inhalt { padding-top: var(--s-8); }
  /* Danke: Telefonnummer nicht umbrechen */
  .flow__danke a[href^="tel:"] { white-space: nowrap; }
}