/* ============================================================================
   Weiche Bedienung fuer die ganze Seite            08.08.2026 (Dirk)

   Die Knoepfe hatten bereits Farbuebergaenge, aber es passierte zu wenig: Beim
   Zeigen wechselte nur der Farbton. Jetzt hebt sich ein Knopf leicht an und
   bekommt einen Schatten, liegt also fuer den Moment als Ebene ueber der
   Flaeche. Dasselbe Prinzip wie bei den Leistungskacheln.

   Bewusst zurueckhaltend: zwei bis drei Pixel Hub, kein Wackeln, keine
   Farbspiele. Auf einer Arztseite soll die Bedienung ruhig wirken.

   Der Vorsatz html body steht davor, weil die Seite ihre Knopfstile an vielen
   Stellen und teils mit hoher Gewichtung setzt. Ohne ihn bliebe diese Datei
   wirkungslos. Kein !important, damit gezielte Aenderungen moeglich bleiben.

   Geraete ohne Mauszeiger sind ausgenommen. Auf dem Handy bliebe der Zustand
   nach dem Antippen sonst haengen.
   ============================================================================ */

@media (hover: hover) and (pointer: fine) {

  html body .btn-primary:hover,
  html body .btn-secondary:hover,
  html body .nav-cta:hover,
  html body .cta:hover,
  html body .cta-druck:hover,
  html body .review-cta:hover {
    transform: translateY(-2px);
  }

  html body .btn-primary:hover { box-shadow: 0 14px 32px rgba(42, 74, 56, 0.28); }
  html body .btn-secondary:hover { box-shadow: 0 12px 28px rgba(28, 49, 37, 0.14); }
  html body .review-cta:hover { box-shadow: 0 12px 28px rgba(28, 49, 37, 0.14); }
  html body .nav-cta:hover { box-shadow: 0 10px 24px rgba(42, 74, 56, 0.26); }
  html body .cta:hover { box-shadow: 0 12px 28px rgba(42, 74, 56, 0.22); }
  html body .cta-druck:hover { box-shadow: 0 12px 28px rgba(42, 74, 56, 0.22); }

  html body .btn-primary:active,
  html body .btn-secondary:active,
  html body .nav-cta:active,
  html body .cta:active,
  html body .cta-druck:active,
  html body .review-cta:active {
    transform: translateY(0);
  }

  /* Flaechige Kacheln bekommen Tiefe statt nur Farbe. */
  html body .route-box:hover,
  html body .stblock-card:hover,
  html body .himi-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 18px 40px rgba(28, 49, 37, 0.13);
  }
  html body .route-box,
  html body .stblock-card,
  html body .himi-card {
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 0.55s cubic-bezier(0.22, 1, 0.36, 1);
  }

  /* Der Pfeil wandert mit und gibt die Richtung vor. */
  html body .btn-primary .btn-arrow,
  html body .btn-secondary .btn-arrow {
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  }
  html body .btn-primary:hover .btn-arrow,
  html body .btn-secondary:hover .btn-arrow {
    transform: translateX(4px);
  }
}

/* Tastaturbedienung bleibt in jedem Fall deutlich sichtbar. */
html body .btn-primary:focus-visible,
html body .btn-secondary:focus-visible,
html body .nav-cta:focus-visible,
html body .cta:focus-visible,
html body .cta-druck:focus-visible,
html body .location-tab:focus-visible {
  outline: 3px solid var(--gold, #A88948);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  html body .btn-primary:hover,
  html body .btn-secondary:hover,
  html body .nav-cta:hover,
  html body .cta:hover,
  html body .cta-druck:hover,
  html body .review-cta:hover,
  html body .route-box:hover,
  html body .stblock-card:hover,
  html body .himi-card:hover {
    transform: none;
  }
}