/* Leistungen skin — mobile/tablet fixes. Scoped to page id 159706 (/leistungen/).
   Conservative cosmetic fixes only. Parent theme untouched. */

/* ------------------------------------------------------------------
   #1 — Video-player timecodes (MediaElement.js).
   Parent style-mediaelement.css sets ".mejs-container .mejs-controls
   .mejs-time span { font-size: 11px }" — below the 12px legibility floor.
   Bump to 12px (keep the tiny 17px control height happy with a matching
   line-height). Scoped to the page so no other MediaElement leaks.
   ------------------------------------------------------------------ */
body.page-id-159706 .mejs-container .mejs-controls .mejs-time span {
  font-size: 12px !important;
  line-height: 14px !important;
}

/* ------------------------------------------------------------------
   #2 — "Pfeiltasten Hoch/Runter" hint is pointless on touch.
   MediaElement renders its keyboard help text ("Use Up/Down Arrow keys
   to increase or decrease volume." / "Use Left/Right Arrow keys to
   advance …") as a .mejs-offscreen span inside the time-rail and the
   volume slider; the parent CSS un-hides it on focus
   (.mejs-controls a:focus > .mejs-offscreen { display:block }).
   On coarse pointers (phone/tablet) there are no arrow keys — hide it.
   We only target the slider/rail help spans, NOT the button a11y labels.
   ------------------------------------------------------------------ */
@media (pointer: coarse) {
  body.page-id-159706 .mejs-controls .mejs-time-rail .mejs-offscreen,
  body.page-id-159706 .mejs-controls .mejs-horizontal-volume-slider .mejs-offscreen,
  body.page-id-159706 .mejs-controls .mejs-volume-slider .mejs-offscreen,
  body.page-id-159706 .mejs-controls a:focus > .mejs-offscreen {
    display: none !important;
  }
}

/* ------------------------------------------------------------------
   #3 — Mosaic services gallery (#gallery-703004): on narrow screens the
   dark previews touch with no visible gap. We do NOT change the column
   count (isotope is JS-driven). Instead we add a small inset on the tile's
   INNER wrapper (.t-inside), which does not alter the outer .tmb size that
   isotope measures — so the layout math is untouched, we just breathe a
   visible gap between adjacent previews.
   ------------------------------------------------------------------ */
@media (max-width: 767px) {
  body.page-id-159706 #gallery-703004 .tmb > .t-inside {
    padding: 4px !important;
  }
}