/* ═══════════════════════════════════════════════════════════════
   PURIMAX POLISH LAYER — site-wide craft refinements
   Loaded after each page's inline styles; overrides by cascade.
   ═══════════════════════════════════════════════════════════════ */

:root {
  --pv-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --pv-ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
}

/* ── BROWSER SURFACES ──────────────────────────────────────────
   Selection, scrollbar, caret, focus, form accents — the parts
   the browser draws still carry the brand. */

::selection { background: #2563EB; color: #fff; }
::-moz-selection { background: #2563EB; color: #fff; }

html { scrollbar-color: #CBD5E1 #F8FAFC; }
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: #F8FAFC; }
::-webkit-scrollbar-thumb { background: #CBD5E1; border-radius: 8px; border: 3px solid #F8FAFC; }
::-webkit-scrollbar-thumb:hover { background: #94A3B8; }

input, select, textarea { caret-color: #2563EB; }
input[type="checkbox"], input[type="radio"] { accent-color: #2563EB; }

a:focus-visible, button:focus-visible, [role="button"]:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid #2563EB;
  outline-offset: 2px;
}

html { -webkit-tap-highlight-color: transparent; }

/* ── TYPOGRAPHY ──────────────────────────────────────────────── */

h1, h2, h3, .section-title, .guarantee-title { text-wrap: balance; }
p, .section-sub, .faq-a, li { text-wrap: pretty; }

.hero h1 { letter-spacing: -0.03em; }
.section-title { letter-spacing: -0.015em; }

a { text-underline-offset: 3px; }

/* Numbers align in columns — counters, stats, prices */
[data-count], .hero-stat-float .num, .about-stat-num, .map-stat-num,
.guarantee-badge-num, .showcase-trust-num, .cert-row-value {
  font-variant-numeric: tabular-nums;
}

/* ── MOTION SYSTEM ───────────────────────────────────────────────
   Stronger ease-out curves, specific transition properties
   (never `all`), press feedback on every button. */

/* Scroll reveal: stronger curve, slightly longer travel */
@media (prefers-reduced-motion: no-preference) {
  .fade-up {
    transform: translateY(24px);
    transition: opacity 0.6s var(--pv-ease-out), transform 0.6s var(--pv-ease-out);
  }
  .fade-up.visible { transform: none; }
}

/* transition:all fixes — name exactly what animates */
.btn {
  transition: background-color 200ms var(--pv-ease-out), color 200ms var(--pv-ease-out),
              border-color 200ms var(--pv-ease-out), box-shadow 250ms var(--pv-ease-out),
              transform 200ms var(--pv-ease-out);
}
.nav-phone {
  transition: background-color 200ms var(--pv-ease-out), color 200ms var(--pv-ease-out),
              border-color 200ms var(--pv-ease-out);
}
.nav-cta {
  transition: background-color 220ms var(--pv-ease-out), box-shadow 250ms var(--pv-ease-out),
              transform 200ms var(--pv-ease-out);
}
.nav-submenu {
  transition: opacity 220ms var(--pv-ease-out), visibility 220ms var(--pv-ease-out),
              transform 220ms var(--pv-ease-out);
}
.location-card {
  transition: background-color 250ms var(--pv-ease-out), border-color 250ms var(--pv-ease-out),
              box-shadow 300ms var(--pv-ease-out), transform 250ms var(--pv-ease-out);
}
.slider-nav {
  transition: background-color 220ms var(--pv-ease-out), border-color 220ms var(--pv-ease-out),
              box-shadow 250ms var(--pv-ease-out), transform 220ms var(--pv-ease-out);
}
.slider-dot {
  transition: background-color 220ms var(--pv-ease-out), width 220ms var(--pv-ease-out),
              border-radius 220ms var(--pv-ease-out);
}
.btn-white, .btn-outline-white {
  transition: background-color 220ms var(--pv-ease-out), color 220ms var(--pv-ease-out),
              border-color 220ms var(--pv-ease-out), transform 200ms var(--pv-ease-out);
}
.testimonials-cta-btn {
  transition: background-color 250ms var(--pv-ease-out), box-shadow 280ms var(--pv-ease-out),
              transform 250ms var(--pv-ease-out);
}
.cookie-btn {
  transition: background-color 200ms var(--pv-ease-out), color 200ms var(--pv-ease-out),
              transform 150ms var(--pv-ease-out);
}

/* FAQ icon rotation — subpages reference an undefined --transition,
   which silently kills the animation. Restore it everywhere. */
.faq-icon { transition: transform 240ms var(--pv-ease-out); }

/* Press feedback: the interface confirms the press, instantly */
.btn:active, .btn-primary:active, .btn-ghost:active, .btn-secondary:active,
.btn-white:active, .btn-outline-white:active, .nav-cta:active,
.form-submit:active, .cookie-btn:active, .testimonials-cta-btn:active,
.guarantee-cta:active, .fab-btn:active, .hamburger:active {
  transform: scale(0.97);
  transition-duration: 90ms;
}

/* ── SUBPAGE SCROLL REVEAL (activated by polish.js) ──────────── */
@media (prefers-reduced-motion: no-preference) {
  .pv-reveal {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity 0.6s var(--pv-ease-out), transform 0.6s var(--pv-ease-out);
  }
  .pv-reveal.pv-in { opacity: 1; transform: none; }
}

/* ── TOUCH DEVICES ───────────────────────────────────────────────
   Tap-triggered hover lifts feel broken on touch — neutralize. */
@media (hover: none) {
  .service-card:hover, .usp-card:hover, .location-card:hover,
  .testimonial-card:hover, .map-stat:hover, .hero-image-wrap:hover,
  .certificate-paper:hover { transform: none; }
  .service-card:hover .service-thumb img { transform: none; }
  .fab-btn:hover { transform: none; }
}

/* ── REDUCED MOTION ──────────────────────────────────────────────
   Fewer and gentler, not zero: kill movement, keep fades. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  /* Marquee läuft bewusst auch bei reduzierter Bewegung weiter (Wunsch des Inhabers) */
  .hero-badge-float::before, .guarantee-badge::before,
  .map-pulse-circle, .fab-wa { animation: none; }
  .hero-image-wrap, .certificate-paper, .guarantee-badge,
  .service-card, .location-card, .usp-card, .testimonial-card { transition: none; }
  .service-card:hover, .location-card:hover, .usp-card:hover,
  .testimonial-card:hover, .hero-image-wrap:hover,
  .certificate-paper:hover, .guarantee-badge:hover { transform: none; }
}