/*
 * Mikas Hundephysio - Android tablet compositor fix, revision 12
 *
 * This file is intentionally gated by the synchronous render-mode detector.
 * iPhone, Android phones, laptops and desktop browsers keep html.fx and the
 * original design. Touch tablets also keep all effects, but receive the calm
 * responsive image caps below. Only Android tablets use this reduced
 * compositor path. `?render=safe` and `?render=full` are QA overrides.
 */

/* The remaining reports confirmed one invariant across every failing section:
 * Android/ANGLE corrupts raster tiles around rounded content layers while the
 * page is repainted. Previous revisions squared only known cards, which left
 * new instances such as FAQ and "Meine Haltung" uncovered. The tablet-safe
 * renderer now has one deterministic rule: main-content clips are rectangular.
 * Dimensions, crops, SVGs and content stay intact. Phones, iOS and desktop use
 * html.fx and never match this rule. */
html.android-tablet-safe:not(.fx) main,
html.android-tablet-safe:not(.fx) main *,
html.android-tablet-safe:not(.fx) main *::before,
html.android-tablet-safe:not(.fx) main *::after {
  border-radius: 0 !important;
}

/* Native details repaints and the values cards were the two last observed
 * triggers. Freeze their persistent transform state as an extra guard; their
 * transitions and shadows are already removed by the flat renderer. */
html.android-tablet-safe:not(.fx) main .lst-faq,
html.android-tablet-safe:not(.fx) main .lst-faq > summary,
html.android-tablet-safe:not(.fx) main .lst-faq .faq-chev,
html.android-tablet-safe:not(.fx) main .um-wert,
html.android-tablet-safe:not(.fx) main .um-wert .uw-icon {
  -webkit-transform: none !important;
  transform: none !important;
  box-shadow: none !important;
}

/* At the 768-800px Android-tablet breakpoint stacked photos otherwise grow
 * to 520-736px and dominate the page. Keep all reported portrait blocks at a
 * calm, consistent size without changing their crops or the desktop/iPhone
 * layouts. */
html.android-tablet-safe:not(.fx) .gcta-photo,
html.android-tablet-safe:not(.fx) main .um-portrait,
html.android-tablet-safe:not(.fx) main .um-mika-photo,
html.android-tablet-safe:not(.fx) main .um-hunde-photo {
  width: 100% !important;
  max-width: 400px !important;
  justify-self: start !important;
  margin-inline: 0 auto !important;
}

html.android-tablet-safe:not(.fx) main .um-mika-photo,
html.android-tablet-safe:not(.fx) main .um-hunde-photo {
  aspect-ratio: 4 / 5 !important;
  height: auto !important;
  min-height: 0 !important;
  align-self: start !important;
}

/* Portrait media on stacked service/contact layouts should remain prominent,
 * but must not expand to almost the full 768-800px tablet canvas. */
html.android-tablet-safe:not(.fx) .bh-hero-img,
html.android-tablet-safe:not(.fx) .bh-intro-img,
html.android-tablet-safe:not(.fx) .anfahrt-foto {
  width: 100% !important;
  max-width: 480px !important;
  justify-self: start !important;
  margin-inline: 0 auto !important;
}

/* The contact closing image inherited its intrinsic HTML height while its
 * grid column became narrow, producing a visibly stretched 284x839px raster.
 * Give the figure the crop and let the image fill that stable box. */
html.android-tablet-safe:not(.fx) .signed-photo {
  width: 100% !important;
  max-width: 400px !important;
  aspect-ratio: 4 / 5 !important;
  overflow: hidden !important;
  justify-self: start !important;
  margin-inline: 0 auto !important;
}

html.android-tablet-safe:not(.fx) .signed-photo picture {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
}

html.android-tablet-safe:not(.fx) .signed-photo img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  aspect-ratio: auto !important;
  object-fit: cover !important;
}

/* Tablet layout sizing is independent from the Android GPU workaround.
 * iPads and other touch tablets intentionally keep the full visual effects,
 * but use the same calm image dimensions as the Android-safe renderer. The
 * portrait-height guard excludes phones in landscape, while pointer/hover
 * prevents a normally resized laptop browser from being treated as a tablet. */
@media (min-width: 641px) and (max-width: 1366px) and (min-height: 641px) and (hover: none) and (pointer: coarse) {
  html.fx .gcta-photo,
  html.fx main .um-portrait,
  html.fx main .um-mika-photo,
  html.fx main .um-hunde-photo {
    width: 100% !important;
    max-width: 400px !important;
    justify-self: start !important;
    margin-inline: 0 auto !important;
  }

  html.fx main .um-mika-photo,
  html.fx main .um-hunde-photo {
    aspect-ratio: 4 / 5 !important;
    height: auto !important;
    min-height: 0 !important;
    align-self: start !important;
  }

  html.fx .bh-hero-img,
  html.fx .bh-intro-img,
  html.fx .anfahrt-foto {
    width: 100% !important;
    max-width: 480px !important;
    justify-self: start !important;
    margin-inline: 0 auto !important;
  }

  html.fx .signed-photo {
    width: 100% !important;
    max-width: 400px !important;
    aspect-ratio: 4 / 5 !important;
    overflow: hidden !important;
    justify-self: start !important;
    margin-inline: 0 auto !important;
  }

  html.fx .signed-photo picture {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
  }

  html.fx .signed-photo img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    aspect-ratio: auto !important;
    object-fit: cover !important;
  }
}

/*
 * GPU diagnostic switches
 * -----------------------
 * These rules are inert during normal visits. They are enabled only by the
 * allow-listed `diag` query parameter in render-mode-gate.js and let a real
 * affected tablet isolate one raster feature at a time.
 */
html.android-tablet-safe:not(.fx).gpu-diag-no-svg main .uwl-chips li svg,
html.android-tablet-safe:not(.fx).gpu-diag-no-svg main .price-card svg,
html.android-tablet-safe:not(.fx).gpu-diag-no-svg main .ind-card svg,
html.android-tablet-safe:not(.fx).gpu-diag-no-svg main .cv-featured-card svg,
html.android-tablet-safe:not(.fx).gpu-diag-no-svg-radius main .uwl-chips li svg,
html.android-tablet-safe:not(.fx).gpu-diag-no-svg-radius main .price-card svg,
html.android-tablet-safe:not(.fx).gpu-diag-no-svg-radius main .ind-card svg,
html.android-tablet-safe:not(.fx).gpu-diag-no-svg-radius main .cv-featured-card svg {
  display: none !important;
}

html.android-tablet-safe:not(.fx).gpu-diag-no-radius main .uwl-chips li,
html.android-tablet-safe:not(.fx).gpu-diag-no-radius main .price-card,
html.android-tablet-safe:not(.fx).gpu-diag-no-radius main .price-card .pc-icon,
html.android-tablet-safe:not(.fx).gpu-diag-no-radius main .ind-card,
html.android-tablet-safe:not(.fx).gpu-diag-no-radius main .ind-card .ic-icon,
html.android-tablet-safe:not(.fx).gpu-diag-no-radius main .cv-featured-card,
html.android-tablet-safe:not(.fx).gpu-diag-no-radius main .cv-featured-icon,
html.android-tablet-safe:not(.fx).gpu-diag-no-svg-radius main .uwl-chips li,
html.android-tablet-safe:not(.fx).gpu-diag-no-svg-radius main .price-card,
html.android-tablet-safe:not(.fx).gpu-diag-no-svg-radius main .price-card .pc-icon,
html.android-tablet-safe:not(.fx).gpu-diag-no-svg-radius main .ind-card,
html.android-tablet-safe:not(.fx).gpu-diag-no-svg-radius main .ind-card .ic-icon,
html.android-tablet-safe:not(.fx).gpu-diag-no-svg-radius main .cv-featured-card,
html.android-tablet-safe:not(.fx).gpu-diag-no-svg-radius main .cv-featured-icon {
  border-radius: 0 !important;
}

/* Only a fallback diagnostic when neither A nor B is conclusive. Unlike the
 * old radical fallback this changes no positioning, sizing or stacking. */
html.android-tablet-safe:not(.fx).gpu-diag-no-clips main :is(
  section,
  article,
  figure,
  div,
  a,
  picture,
  img
) {
  overflow: visible !important;
  border-radius: 0 !important;
  -webkit-clip-path: none !important;
  clip-path: none !important;
  -webkit-mask: none !important;
  mask: none !important;
}

/* The closed off-canvas drawer must not keep a transformed viewport-sized
 * layer alive while it is outside the screen. Its open state remains usable. */
html.android-tablet-safe:not(.fx) .mobile-drawer {
  -webkit-transform: none !important;
  transform: none !important;
}

html.android-tablet-safe:not(.fx) .mobile-drawer[aria-hidden="true"],
html.android-tablet-safe:not(.fx) .mobile-drawer-overlay:not(.open) {
  display: none !important;
}

/* Remove only decorative rotations that create large extra raster layers.
 * Positioning, dimensions, crops and stacking order remain untouched. */
html.android-tablet-safe:not(.fx) .herz-figure,
html.android-tablet-safe:not(.fx) .hero-collage .photo,
html.android-tablet-safe:not(.fx) .uwl-collage .photo,
html.android-tablet-safe:not(.fx) .photo.photo--main,
html.android-tablet-safe:not(.fx) .photo.photo--inset,
html.android-tablet-safe:not(.fx) .about-polaroid,
html.android-tablet-safe:not(.fx) .tkf-photo,
html.android-tablet-safe:not(.fx) .anfahrt-teaser-skizze,
html.android-tablet-safe:not(.fx) .gcta-photo,
html.android-tablet-safe:not(.fx) .pgal-card,
html.android-tablet-safe:not(.fx) .polaroid {
  -webkit-transform: none !important;
  transform: none !important;
  -webkit-transition: none !important;
  transition: none !important;
  will-change: auto !important;
}

html.android-tablet-safe:not(.fx) .hero-caption,
html.android-tablet-safe:not(.fx) .hero-caveat-note,
html.android-tablet-safe:not(.fx) .uwl-hero-text .eyebrow,
html.android-tablet-safe:not(.fx) .uwl-section .uwl-head .eyebrow,
html.android-tablet-safe:not(.fx) .tkf-photo-cap,
html.android-tablet-safe:not(.fx) .tkf-eyebrow,
html.android-tablet-safe:not(.fx) .tkf-eyebrow-large,
html.android-tablet-safe:not(.fx) .anfahrt-foto-cap,
html.android-tablet-safe:not(.fx) .gcta-eyebrow,
html.android-tablet-safe:not(.fx) .faq-eyebrow,
html.android-tablet-safe:not(.fx) .signed-eyebrow,
html.android-tablet-safe:not(.fx) .signature-name,
html.android-tablet-safe:not(.fx) .uwl-cq-sig,
html.android-tablet-safe:not(.fx) .uwl-book__name,
html.android-tablet-safe:not(.fx) .uwl-book__cover-eyebrow,
html.android-tablet-safe:not(.fx) .uwl-callout {
  -webkit-transform: none !important;
  transform: none !important;
}

/* Several page-specific reveal blocks are declared after the shared flat
 * styles and otherwise recreate very large translated layers while scrolling. */
html.android-tablet-safe:not(.fx) .reveal,
html.android-tablet-safe:not(.fx) .fade-up,
html.android-tablet-safe:not(.fx) .ablauf-station,
html.android-tablet-safe:not(.fx) .um-letter,
html.android-tablet-safe:not(.fx) .um-portrait img {
  opacity: 1 !important;
  -webkit-transform: none !important;
  transform: none !important;
  -webkit-transition: none !important;
  transition: none !important;
  -webkit-animation: none !important;
  animation: none !important;
}

/* The main wrapper used to form one page-height stacking surface. Flatten
 * that wrapper only; child z-index and overflow values are part of the design. */
html.android-tablet-safe:not(.fx) main {
  position: static !important;
  z-index: auto !important;
  isolation: auto !important;
  contain: none !important;
}

/* Preserve layout transforms while preventing accidental 3D/compositor hints
 * from rebuilding a page-sized GPU layer. */
html.android-tablet-safe:not(.fx) main,
html.android-tablet-safe:not(.fx) main * {
  -webkit-transform-style: flat !important;
  transform-style: flat !important;
  -webkit-perspective: none !important;
  perspective: none !important;
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
  contain: none !important;
  content-visibility: visible !important;
  will-change: auto !important;
}

/* These are large decorative scenes, not content or UI icons. The small SVG
 * symbols, paw badges, gallery pins, arrows and generated labels stay visible. */
html.android-tablet-safe:not(.fx) .hero-paw-bg,
html.android-tablet-safe:not(.fx) .tkf-bg-paws,
html.android-tablet-safe:not(.fx) .about-paw-trail {
  display: none !important;
}

/* Large rounded photo masks are the remaining expensive paint clips. On the
 * affected tablets they become rectangular, but retain the original crop,
 * dimensions, stacking and overflow containment so images cannot enter text. */
html.android-tablet-safe:not(.fx) :is(
  .hero-portrait,
  .hero-collage .photo,
  .uwl-collage .photo,
  .services-head--with-photo,
  .services-head-photo,
  .service-card,
  .herz-figure,
  .bh-hero-img,
  .bh-intro-img,
  .bh-aff-media,
  .uwl-tript,
  .uwl-compare-card,
  .gcta-photo,
  .tkf-photo,
  .tk-media-fig,
  .about-polaroid,
  .um-mika-photo,
  .um-hunde-photo,
  .um-story-fig,
  .process-photo-step,
  .anfahrt-foto,
  .anfahrt-fotos picture,
  .stat-row,
  .pgal-photo,
  .polaroid-img,
  .gallery-grid .gi
) {
  border-radius: 0 !important;
  overflow: hidden !important;
  box-shadow: none !important;
  -webkit-filter: none !important;
  filter: none !important;
  -webkit-clip-path: none !important;
  clip-path: none !important;
  -webkit-mask: none !important;
  mask: none !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
}

/* Some templates apply the rounded clip directly to the photo rather than
 * its wrapper. Squaring main-content photos closes that final large clip
 * path without changing their dimensions or object-fit crop. */
html.android-tablet-safe:not(.fx) main img {
  border-radius: 0 !important;
  -webkit-clip-path: none !important;
  clip-path: none !important;
  -webkit-mask: none !important;
  mask: none !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
}

/* The older flat fallback disables sticky by setting these wrappers static.
 * Their images are absolutely positioned, so static removes the containing
 * block and makes them expand across the page. Keep them non-sticky but
 * positioned, with the original crop constrained to the wrapper. */
html.android-tablet-safe:not(.fx) .um-mika-photo,
html.android-tablet-safe:not(.fx) .um-hunde-photo {
  position: relative !important;
  top: auto !important;
}

html.android-tablet-safe:not(.fx) .um-mika-photo img,
html.android-tablet-safe:not(.fx) .um-hunde-photo img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

/* Keep the existing flat-mode surfaces deterministic. */
html.android-tablet-safe:not(.fx) header.site.scrolled,
html.android-tablet-safe:not(.fx) .slider-arrow,
html.android-tablet-safe:not(.fx) .cta-trust,
html.android-tablet-safe:not(.fx) .price-cta-side,
html.android-tablet-safe:not(.fx) .signature-card,
html.android-tablet-safe:not(.fx) .uwl-collage .photo-cap,
html.android-tablet-safe:not(.fx) .cc-map-card,
html.android-tablet-safe:not(.fx) .scroll-cue {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  -webkit-filter: none !important;
  filter: none !important;
  will-change: auto !important;
}

html.android-tablet-safe:not(.fx) header.site.scrolled {
  background: #fafaf8 !important;
}

@media (max-width: 900px) {
  html.android-tablet-safe:not(.fx) #hero > .container {
    width: 100% !important;
    min-width: 0 !important;
  }

  html.android-tablet-safe:not(.fx) .services-head--with-photo .services-head-photo {
    width: 100% !important;
    min-width: 0 !important;
  }

  html.android-tablet-safe:not(.fx) .btn-ghost {
    min-height: 44px !important;
  }
}

@media (max-width: 1024px) {
  /* Tiny pagination dots are not useful touch targets. Arrows, swipe and the
   * 44px play/pause control remain, and every gallery card remains present. */
  html.android-tablet-safe:not(.fx) .pgal-dots {
    display: none !important;
  }

  html.android-tablet-safe:not(.fx) .btn-ghost,
  html.android-tablet-safe:not(.fx) .pgal-play,
  html.android-tablet-safe:not(.fx) .util-bar .toggle-anrede button {
    min-height: 44px !important;
  }
}

/* Responsive interaction polish applies to every phone/tablet render mode.
 * It changes hit areas only; the original visual effects and layout remain. */
@media (max-width: 1024px) {
  .mobile-tools .toggle-anrede {
    height: auto !important;
    min-height: 44px !important;
  }

  .mobile-tools .toggle-anrede button,
  footer.site .toggle-anrede button,
  .mobile-drawer input,
  .mobile-drawer .ghost-tel,
  .mobile-drawer .btn-ghost,
  .btn-ghost,
  footer.site a,
  footer.site button {
    min-height: 44px !important;
  }

  .mobile-drawer .ghost-tel,
  .mobile-drawer .btn-ghost,
  footer.site a,
  footer.site button {
    display: inline-flex;
    align-items: center;
  }

  /* Seventeen pagination dots cannot each provide a 44px target without
   * overflowing. Swipe, 48px arrows and the 44px play control remain. */
  .pgal-dots {
    display: none !important;
  }

  :is(
    .legal-content,
    .legal-card,
    .legal-toc,
    .legal-cta-tel,
    .ka-row,
    .addr-prose,
    .bh-preise-note,
    .carmen-note
  ) a {
    display: inline-flex;
    align-items: center;
    min-height: 44px !important;
  }
}

/* --------------------------------------------------------------------------
 * Relaunch 17.07.2026: Feature-Fotos + Info-Pillen auf Touch-Tablets
 * LINKSBUENDIG statt zentriert (Kundenwunsch). Nur (pointer:coarse) ab 600px,
 * Desktop (fine pointer) und Smartphones (<600px) bleiben unveraendert.
 * Ergaenzt die bereits linksbuendigen Foto-Regeln oben.
 * -------------------------------------------------------------------------- */
@media (pointer: coarse) and (min-width: 600px) {
    .tkf-body-large,
  .tkf-pills-large,
  .tkf-photo-stack,
  .herz-figure,
  .hero-collage,
  .tk-media-fig,
  .anfahrt-teaser-foto,
  .anfahrt-teaser-skizze {
    margin-left: 0 !important;
    margin-right: auto !important;
    justify-self: start !important;
  }
  .tkf-pills-large { justify-content: flex-start !important; }
}

/* --------------------------------------------------------------------------
 * Relaunch 17.07.2026 STREIFEN-FIX: Die rotierten Pfoten-Wasserzeichen im
 * Hintergrund der Sektionen (.lst-section::before/::after usw.) rastern auf
 * Android-/Touch-Tablets beim Repaint zu Streifen. Auf JEDEM Touch-Tablet
 * abschalten - robust unabhaengig von der Tablet-Erkennung. Die eigentliche
 * Sektions-Hintergrundflaeche bleibt unveraendert; nur die schraeg gedrehte
 * Deko-Ebene verschwindet. Desktop (fine pointer) behaelt sie.
 * -------------------------------------------------------------------------- */
@media (pointer: coarse) {
  .lst-section::before, .lst-section::after,
  .lst-feature-section::before, .lst-feature-section::after,
  .skizze-tape::before, .skizze-tape::after {
    display: none !important;
  }
}
html.android-tablet-safe:not(.fx) .lst-section::before,
html.android-tablet-safe:not(.fx) .lst-section::after,
html.android-tablet-safe:not(.fx) .lst-feature-section::before,
html.android-tablet-safe:not(.fx) .lst-feature-section::after,
html.android-tablet-safe:not(.fx) .skizze-tape::before,
html.android-tablet-safe:not(.fx) .skizze-tape::after {
  display: none !important;
}