/* ══════════════════════════════════════════════════════════════════════════
   Interaktionsschicht — bayer-bayer-immo.de
   Angelegt 11.09.2026 nach den Apple-UX-Richtlinien (WWDC „Designing Fluid
   Interfaces", „The Details of UI Typography").

   Diese Datei wird auf jeder Seite ALS LETZTE geladen, nach nav.css und nach
   den Inline-Styles. Das ist Absicht: die Regeln hier sollen gewinnen, ohne
   dass in vier Dateien an hundert Stellen eingegriffen werden muss. Wer die
   Reihenfolge der <link>-Tags ändert, hebt diese Datei aus den Angeln.

   Behandelt werden vier Lücken, die ein Audit am 11.09.2026 ergeben hat:
     1. Keine einzige Druckrückmeldung auf der ganzen Seite (:active kam
        0-mal vor). Die Seite reagierte erst beim Loslassen.
     2. Große Überschriften ohne negatives Tracking.
     3. Keine Rücksicht auf „Transparenz reduzieren" und „Mehr Kontrast",
        obwohl 13 Flächen mit backdrop-filter arbeiten.
     4. Reduzierte Bewegung wurde mit dem Holzhammer behandelt.
   ══════════════════════════════════════════════════════════════════════════ */


/* ── 1. Rückmeldung beim Drücken, nicht beim Loslassen ────────────────────
   „Der Moment, in dem Verzögerung auftritt, fällt das Gefühl von
   Unmittelbarkeit von der Klippe." Rückmeldung gehört auf pointer-down.

   Flächige Elemente — Schaltflächen, Karten, Chips — werden kurz kleiner.
   100 ms, weil die Bewegung die Wahrnehmung der Berührung nicht überholen
   soll. Für Fließtext-Links wäre Skalierung falsch: Text springt dann im
   Absatz. Die bekommen weiter unten eine Deckkraft-Rückmeldung. */
.btn-primary,
.btn-ghost,
.nav-cta,
.service-card,
.value-card,
.region-card,
.testi-card,
.contact-item,
.blog-item,
.blog-item-link,
.post-nav a,
.post-weiter a,
.region-cities-list a,
.lp-district,
.lp-service,
.seo-cta a,
.js-open-modal,
button,
input[type="submit"],
summary {
  /* Ohne touch-action wartet der Browser auf einen möglichen Doppeltipp und
     verzögert die Reaktion um rund 300 ms — genau die Verzögerung, die alles
     träge wirken lässt. */
  touch-action: manipulation;
  /* Der blaue iOS-Tipp-Blitz darf nur weg, WEIL wir eigene Rückmeldung
     liefern. Ohne Ersatz wäre das eine Verschlechterung. */
  -webkit-tap-highlight-color: transparent;
}

.btn-primary:active,
.btn-ghost:active,
.nav-cta:active,
.blog-item:active,
.blog-item-link:active,
.post-nav a:active,
.post-weiter a:active,
.region-cities-list a:active,
.lp-district:active,
.lp-service:active,
.seo-cta a:active,
.js-open-modal:active,
button:active,
input[type="submit"]:active {
  transform: scale(0.97);
  transition: transform 100ms cubic-bezier(0.2, 0, 0, 1);
}

/* Große Flächen bewegen sich weniger als kleine — eine Karte, die so stark
   einsinkt wie ein Chip, wirkt gummiartig. */
.service-card:active,
.value-card:active,
.region-card:active,
.testi-card:active,
.contact-item:active {
  transform: scale(0.99);
  transition: transform 100ms cubic-bezier(0.2, 0, 0, 1);
}

/* Fließtext-Links: Deckkraft statt Bewegung. */
.post-body a:active,
.post-related a:active,
.nav-links a:active,
.region-cities-region a:active,
.nav-back:active,
footer a:active {
  opacity: 0.6;
  transition: opacity 80ms linear;
}


/* ── 2. Tippziele auf Fingergröße ────────────────────────────────────────
   Nur bei grobem Zeigegerät. Mit der Maus wären 44 px unnötig wuchtig. */
@media (pointer: coarse) {
  .region-cities-list a,
  .lp-district,
  .post-related a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
  .nav-links a,
  footer a {
    padding-block: 0.35rem;
  }
}


/* ── 3. Typografie: Tracking gehört zur Schriftgröße ──────────────────────
   „Eine feste Laufweite ist irgendwo falsch." Große Schrift wirkt zu locker
   gesetzt, wenn die Laufweite mitwächst — deshalb negatives Tracking, das
   mit der Größe zunimmt. Die Versal-Labels der Seite behalten ihre weite
   Sperrung; die steht auf p- und div-Elementen und wird hier nicht berührt. */
h1 { letter-spacing: -0.02em; }
h2 { letter-spacing: -0.012em; }

/* Überschriften in Fließtextgröße bleiben neutral — negatives Tracking ist
   dort ein Lesbarkeitsverlust, kein Gewinn. */
.post-body h2,
.post-body h3,
.post-cta h3,
.lp-faq h3,
h3, h4, h5, h6 { letter-spacing: 0; }


/* ── 4. Reduzierte Transparenz ───────────────────────────────────────────
   Wer das einstellt, braucht ruhige Flächen. Der Weichzeichner entfällt —
   und weil eine halbdurchsichtige Fläche OHNE Weichzeichner schlechter
   lesbar ist als mit, werden die Hintergründe zugleich deckend. */
@media (prefers-reduced-transparency: reduce) {
  *, *::before, *::after {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  body > nav:not(.post-nav), nav.is-scrolled { background: #003E2C !important; }
  .hero-stats          { background: rgba(0, 0, 0, 0.78) !important; }
  .hansa-video-toggle  { background: rgba(0, 0, 0, 0.85) !important; }
  .bb-ki-info__button  { background: #0F0F0F !important; }
  .bb-ki-info__panel   { background: #0F0F0F !important; }
}


/* ── 5. Mehr Kontrast ────────────────────────────────────────────────────
   Ränder statt zarter Andeutung: Flächen bekommen eine sichtbare Kante,
   Fokus wird kräftiger. */
@media (prefers-contrast: more) {
  .btn-ghost,
  .service-card,
  .value-card,
  .region-card,
  .blog-item,
  .post-nav a,
  .post-weiter a,
  .region-cities-list a,
  .lp-district {
    border: 1px solid currentColor;
  }
  :focus-visible {
    outline: 3px solid var(--gold, #C9A961);
    outline-offset: 3px;
  }
}


/* ── 6. Reduzierte Bewegung heißt schonender, nicht stumm ────────────────
   Die bisherige Regel in fonts.css setzte pauschal alle Übergänge auf
   0,01 ms — damit verschwand auch die Farb- und Deckkraft-Rückmeldung, die
   niemandem schwindlig wird und beim Verstehen hilft. Hier bleibt sie,
   Bewegung im Raum entfällt. */
@media (prefers-reduced-motion: reduce) {
  .btn-primary:active,
  .btn-ghost:active,
  .nav-cta:active,
  .blog-item:active,
  .blog-item-link:active,
  .post-nav a:active,
  .post-weiter a:active,
  .region-cities-list a:active,
  .lp-district:active,
  .lp-service:active,
  .seo-cta a:active,
  .js-open-modal:active,
  button:active,
  input[type="submit"]:active,
  .service-card:active,
  .value-card:active,
  .region-card:active,
  .testi-card:active,
  .contact-item:active {
    /* Die Rückmeldung bleibt — sie wechselt nur von Bewegung auf Helligkeit. */
    transform: none;
    filter: brightness(0.93);
    transition: filter 100ms linear;
  }
  .reveal { transform: none !important; }
}