/* G-Run – Feinschliff-Ebene (Design Engineering nach Emil Kowalski).
   Wird nach grun.css geladen und ändert nichts am Aussehen, nur am Gefühl:
   Druck-Rückmeldung, Kurven, Touch-Verhalten, Ruhe bei reduzierter Bewegung. */

:root {
  --e-out: cubic-bezier(0.23, 1, 0.32, 1);       /* rein/raus, sofortige Reaktion */
  --e-in-out: cubic-bezier(0.77, 0, 0.175, 1);   /* Bewegung auf dem Bildschirm */
  --e-drawer: cubic-bezier(0.32, 0.72, 0, 1);    /* Sheets wie iOS */
  --t-press: 140ms;
  --t-ui: 200ms;
}

/* ---------- Plattform: wie eine App, nicht wie eine Website ---------- */
html {
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
}
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

/* Alles, was man drückt: kein 300-ms-Warten, kein Markieren beim langen Drücken */
:is(button, [role="button"], .wp-block-button__link, .grun-btn, .grun-vbtn, .grun-submit,
    .grun-mapbtn, .grun-nav-donate, .grun-soc, .grun-footer-cta, .grun-reels-stories,
    .grun-reels-arrow, .grun-reel-btn, .grun-cal-day, .grun-cal-nav, .grun-amounts button,
    .grun-share-opt, .grun-share-main, .grun-share-x, .grun-rh-ctl button, .grun-rh-speed button,
    .grun-pincard-x, .grun-player-x, .grun-player-nav, .grun-vidpop-x, .grun-hud-toggle,
    .grun-live-open, .grun-more, .grun-vhero-next) {
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

/* ---------- Druck-Rückmeldung: die Oberfläche hört zu ---------- */
:is(.wp-block-button__link, .grun-btn, .grun-vbtn, .grun-submit, .grun-nav-donate,
    .grun-footer-cta, .grun-reels-stories, .grun-more, .grun-live-open, .grun-share-main,
    .grun-share-opt, .grun-soc) {
  transition-property: transform, background-color, color, border-color, box-shadow, opacity;
  transition-duration: var(--t-press), 150ms, 150ms, 150ms, var(--t-ui), 150ms;
  transition-timing-function: var(--e-out), ease, ease, ease, ease, ease;
}
:is(.wp-block-button__link, .grun-btn, .grun-vbtn, .grun-submit, .grun-nav-donate,
    .grun-footer-cta, .grun-reels-stories, .grun-more, .grun-live-open, .grun-share-main,
    .grun-share-opt, .grun-soc):active {
  transform: scale(0.97) !important;
}

/* Runde Icon-Knöpfe drücken etwas tiefer, sonst spürt man es nicht */
:is(.grun-mapbtn, .grun-reels-arrow, .grun-cal-nav, .grun-pincard-x, .grun-player-x,
    .grun-player-nav, .grun-vidpop-x, .grun-share-x, .grun-hud-toggle,
    .grun-rh-ctl button, .grun-rh-speed button, .grun-amounts button) {
  transition-property: transform, background-color, color, border-color, box-shadow;
  transition-duration: var(--t-press), 150ms, 150ms, 150ms, var(--t-ui);
  transition-timing-function: var(--e-out), ease, ease, ease, ease;
}
:is(.grun-mapbtn, .grun-reels-arrow, .grun-cal-nav, .grun-pincard-x, .grun-player-x,
    .grun-player-nav, .grun-vidpop-x, .grun-share-x, .grun-hud-toggle,
    .grun-rh-ctl button, .grun-rh-speed button, .grun-amounts button):active:not(:disabled) {
  transform: scale(0.92) !important;
}

/* Kalendertage und Video-Kacheln: weicher, sie sind gross */
.grun-cal-day.has-run { transition: transform var(--t-press) var(--e-out), background-color 150ms ease, color 150ms ease; }
.grun-cal-day.has-run:active { transform: scale(0.94) !important; }
.grun-reel-btn { transition: transform var(--t-ui) var(--e-out); }
.grun-reel-btn:active { transform: scale(0.98); }
.grun-reel-btn img { transition: transform 400ms var(--e-out); }

/* Karten-Pins (Herzen) */
.leaflet-marker-icon .grun-don { transition: transform var(--t-ui) var(--e-out); }

/* ---------- Touch: Hover darf nach dem Tippen nicht kleben ---------- */
@media (hover: none), (pointer: coarse) {
  .grun-km:hover,
  .grun-btn:hover, .grun-vbtn:hover,
  .grun-cal-day.has-run:hover,
  .grun-reel-btn:hover img,
  .grun-reel-btn:hover .grun-reel-play,
  .leaflet-marker-icon:hover .grun-don { transform: none; }
}

/* ---------- Tastatur: sichtbarer, ruhiger Fokus ---------- */
:is(a, button, [role="button"], input, select, textarea, summary):focus-visible {
  outline: 2px solid #CCFF00;
  outline-offset: 3px;
}
body:not(.grun-dark) :is(a, button, [role="button"], input, select, textarea, summary):focus-visible {
  outline-color: #3B2BD9;
}

/* ---------- Formular: iPhone zoomt nicht in Felder ---------- */
@media (pointer: coarse) {
  input, select, textarea { font-size: max(16px, 1em); }
}

/* ---------- Typografie: keine Witwen in Titeln ---------- */
:is(h1, h2, h3, .grun-h2, .grun-reels-title) { text-wrap: balance; }
:is(p, .grun-reel-cap) { text-wrap: pretty; }

/* ---------- Scrollen: Karussells federn, die Seite dahinter bleibt ruhig ---------- */
.grun-reels-list { overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: 2px; }
.grun-reels-list > li { scroll-snap-align: start; }
:is(.grun-share-sheet, .grun-pincard, .wp-block-navigation__responsive-container.is-menu-open) {
  overscroll-behavior: contain;
}

/* ---------- Video-Kacheln: einmaliger, kurzer Einlauf beim ersten Sichtbarwerden ---------- */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .grun-reels-list > li {
      animation: grun-polish-in linear both;
      animation-timeline: view(inline);
      animation-range: entry 0% entry 40%;
    }
    @keyframes grun-polish-in {
      from { opacity: 0.35; transform: scale(0.96); }
      to   { opacity: 1;    transform: none; }
    }
  }
}

/* ---------- Reduzierte Bewegung: weniger, nicht null ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
  :is(.wp-block-button__link, .grun-btn, .grun-vbtn, .grun-submit, .grun-mapbtn, .grun-reel-btn,
      .grun-cal-day, .grun-reels-arrow):active { transform: none !important; }
  .grun-reel-btn img { transition: none; }
}

/* ---------- Markieren: grosse Titel mit enger Zeilenhöhe nicht übermalen ---------- */
html body :is(h1, h2, h3, .grun-h2, .grun-vhero-title, .fx-num, .fx-lines, .grun-stat b) ::selection,
html body :is(h1, h2, h3, .grun-h2, .grun-vhero-title, .fx-num, .fx-lines, .grun-stat b)::selection {
  background: transparent !important;
  color: #CCFF00 !important;
}
html body .grun-s-cta :is(h1, h2, h3, .grun-h2) ::selection,
html body .grun-s-cta :is(h1, h2, h3, .grun-h2)::selection {
  background: transparent !important;
  color: #ffffff !important;
}