/* ==========================================================================
   polish.css – Feinschliff-Schicht (lädt als letzte Datei, alle Seiten)
   1. Mobile-Baseline        6. Safe Areas & Touch-Ziele
   2. Fokus & Skip-Link      7. Mobile-Drawer & Burger
   3. Druck-Feedback         8. Theme-Wechsel, Nav-Ink, Scroll-Fortschritt
   4. Hover nur mit Maus     9. Komponenten (FAQ, Formular, Top-Button …)
   5. Farbe & Kontrast      10. Reduced Motion
   Motion-Tokens (--ease-out, --dur-*) stehen in base.css.
   ========================================================================== */

/* ── 1. Mobile-Baseline ─────────────────────────────────────────────────── */
html {
  -webkit-tap-highlight-color: transparent; /* kein grauer Blitz beim Tippen */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* Sofortiges Tippen (kein Doppeltipp-Zoom-Warten) + kein Text-Markieren bei Long-Press */
a, button, label, summary, select,
[role="button"], [role="tab"], [role="radio"] {
  touch-action: manipulation;
}

.btn, button, summary, [role="tab"], [role="radio"],
.lang-toggle, .theme-toggle, .top-btn, .sp-chip, .legal-chip,
.footer__store, .sp-platform-btn, .sp-billing-radio {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

/* iOS zoomt in Felder < 16px und zoomt nicht zurück */
@media (pointer: coarse), (max-width: 900px) {
  input, textarea, select { font-size: 16px !important; }
}

/* Scroll-Sperre bei offenem Drawer – auch in iOS Safari */
html:has(body.menu-open) { overflow: hidden; }

/* ── 2. Fokus & Skip-Link ───────────────────────────────────────────────── */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--primary-l);
  outline-offset: 3px;
  border-radius: 6px;
}

/* Formularfelder haben ihren eigenen Fokus-Ring (box-shadow, siehe animations.css) */
.sp-field :where(input, select, textarea):focus-visible { outline: none; }

.skip-link {
  position: fixed;
  top: calc(12px + var(--safe-top));
  left: 12px;
  z-index: 1000;
  padding: .7rem 1.1rem;
  border-radius: 10px;
  background: var(--primary-btn);
  color: #fff;
  font-weight: 600;
  font-size: .9rem;
  text-decoration: none;
  transform: translateY(calc(-100% - 24px));
  transition: transform var(--dur-ui) var(--ease-out);
}
.skip-link:focus-visible { transform: none; outline-color: #fff; }

main:focus { outline: none; }

/* ── 3. Druck-Feedback: jede Schaltfläche antwortet beim Antippen ───────── */
.btn, .sp-submit, .sp-chip, .legal-chip, .footer__store, .top-btn,
.theme-toggle, .lang-toggle, .nav__burger, .mobile-menu__close,
.roleswitch__tab, .seg__btn, .mods__btn, .fx__chip, .sp-billing-btn,
.sp-platform-btn span, .sp-billing-radio span, .pr-card__cta, .tb-zchip {
  transition-property: transform, background-color, border-color, color, box-shadow, opacity, filter;
  transition-duration: var(--dur-ui);
  transition-timing-function: var(--ease-out);
}

.btn:active, .sp-submit:active, .sp-chip:active, .legal-chip:active,
.footer__store:active, .theme-toggle:active, .lang-toggle:active,
.nav__burger:active, .mobile-menu__close:active, .roleswitch__tab:active,
.seg__btn:active, .mods__btn:active, .fx__chip:active, .sp-billing-btn:active,
.sp-platform-btn:active span, .sp-billing-radio:active span, .pr-card__cta:active, .tb-zchip:active {
  transform: scale(.97);
  transition-duration: var(--dur-press);
}
.top-btn.show:active { transform: scale(.92); transition-duration: var(--dur-press); }
.sp-submit:disabled:active { transform: none; }

/* ── 4. Hover nur mit echter Maus ───────────────────────────────────────────
   Auf Touch bleibt :hover nach dem Tippen „kleben". Bewegungs-Hover dort
   neutralisieren – Farbwechsel bleiben, Feedback kommt über :active. */
@media (hover: none), (pointer: coarse) {
  .btn--primary:hover, .btn--secondary:hover, .btn--ghost:hover, .btn--active:hover,
  .lang-toggle:hover, .top-btn:hover, .footer__store:hover, .sp-submit:hover,
  .sp-wiki-cta:hover, .legal-right:hover, .role-card:hover,
  .ptease__card:hover, .phone:hover, .mockup-img:hover, .pr-card:hover {
    transform: none !important;
  }
  .ptease__card.is-featured:hover { transform: translateY(-10px) !important; }
  .btn--secondary:hover:not(.btn--active) {
    background: var(--surface-soft);
    border-color: var(--divider);
    color: var(--text);
  }
  .btn--secondary:hover:not(.btn--active) img { filter: var(--icon-filter); }
  .nav__links a:hover::after { transform: scaleX(0); }
  .sp-submit:hover::after { transform: translateX(-150%) skewX(-18deg); }
}

/* ── 5. Farbe & Kontrast ────────────────────────────────────────────────── */
/* Weiß auf #007AFF = 4.0:1 → Buttonfläche minimal tiefer (4.7:1), Marke bleibt */
.btn--primary, .btn--active, .sp-submit, .sp-chip--primary {
  background: var(--primary-btn);
  border-color: var(--primary-btn);
}
@media (hover: hover) and (pointer: fine) {
  .btn--primary:hover, .btn--active:hover, .sp-submit:hover:not(:disabled), .sp-chip--primary:hover {
    background: var(--primary-btn-h);
    border-color: var(--primary-btn-h);
  }
}

/* ── 6. Safe Areas & Touch-Ziele ────────────────────────────────────────── */
.nav-wrap {
  top: calc(14px + var(--safe-top));
  padding-left: max(var(--page-padding), var(--safe-left));
  padding-right: max(var(--page-padding), var(--safe-right));
}
@media (max-width: 900px) {
  .nav-wrap {
    top: calc(10px + var(--safe-top));
    padding-left: max(.75rem, var(--safe-left));
    padding-right: max(.75rem, var(--safe-right));
  }
}

.top-btn {
  bottom: calc(1.5rem + var(--safe-bottom));
  right: calc(1.5rem + var(--safe-right));
}

/* 44 × 44 px Mindestgröße für alles, was man antippt */
.nav .lang-toggle, .nav .theme-toggle,
.lang-toggle, .theme-toggle, .mobile-menu__close, .nav__burger, .top-btn {
  width: 44px;
  height: 44px;
}
.nav__burger { align-items: center; }

.footer__col a { display: inline-block; padding: .3rem 0; }
.footer__col ul { gap: .25rem; }

/* ── 7. Mobile-Drawer & Burger ──────────────────────────────────────────── */
.mobile-menu {
  padding:
    calc(1rem + var(--safe-top))
    calc(1.25rem + var(--safe-right))
    calc(2rem + var(--safe-bottom))
    1.25rem;
  visibility: hidden;
  transition:
    transform .4s var(--ease-drawer),
    box-shadow .4s ease,
    visibility 0s linear .4s;
}
.mobile-menu.is-open {
  visibility: visible;
  transition: transform .45s var(--ease-drawer), box-shadow .45s ease, visibility 0s;
}

/* Links gleiten gestaffelt nach – nur beim Öffnen, Schließen ist sofort */
.mobile-menu__links li,
.mobile-menu__cta,
.mobile-menu__switches {
  opacity: 0;
  transform: translateX(24px);
  transition: opacity .15s ease, transform .15s ease;
}
.mobile-menu.is-open .mobile-menu__links li,
.mobile-menu.is-open .mobile-menu__cta,
.mobile-menu.is-open .mobile-menu__switches {
  opacity: 1;
  transform: none;
  transition: opacity .4s var(--ease-out), transform .5s var(--ease-out);
}
.mobile-menu.is-open .mobile-menu__links li:nth-child(1) { transition-delay: .06s; }
.mobile-menu.is-open .mobile-menu__links li:nth-child(2) { transition-delay: .10s; }
.mobile-menu.is-open .mobile-menu__links li:nth-child(3) { transition-delay: .14s; }
.mobile-menu.is-open .mobile-menu__links li:nth-child(4) { transition-delay: .18s; }
.mobile-menu.is-open .mobile-menu__links li:nth-child(5) { transition-delay: .22s; }
.mobile-menu.is-open .mobile-menu__cta { transition-delay: .26s; }
.mobile-menu.is-open .mobile-menu__switches { transition-delay: .30s; }

/* Link-Einrückung per transform statt padding (kein Layout pro Frame) */
.mobile-menu__links a {
  transition: color var(--dur-ui) ease, transform var(--dur-ui) var(--ease-out);
}
.mobile-menu__links a:hover,
.mobile-menu__links a.nav__active { padding-left: 0; transform: translateX(.5rem); }
.mobile-menu__links a:active { color: var(--text); }

/* Burger → X: Mittelstrich per scaleX statt width */
.nav__burger span {
  transition: transform .3s var(--ease-out), opacity .2s ease;
}
.nav__burger.is-open span:nth-child(2) { width: 22px; opacity: 0; transform: scaleX(0); }

.mobile-menu-backdrop { transition: opacity .3s ease; }

/* ── 8a. Theme-Wechsel: kreisförmige Enthüllung (View Transitions) ──────── */
::view-transition-old(root),
::view-transition-new(root) {
  animation: none;
  mix-blend-mode: normal;
}
/* Während des Wechsels keine CSS-Farbübergänge – der Kreis ist der Übergang */
html.vf-theme-vt *,
html.vf-theme-vt *::before,
html.vf-theme-vt *::after { transition: none !important; }

/* Icon im Umschalter dreht sich beim Wechsel herein (nur nach Klick, nicht beim Laden) */
@media (prefers-reduced-motion: no-preference) {
  html.vf-theme-swap .theme-toggle__icon { animation: vf-icon-in .5s var(--ease-out); }
}
@keyframes vf-icon-in {
  from { opacity: 0; transform: rotate(-90deg) scale(.6); }
}

/* ── 8b. Nav-Ink: gleitende Markierung hinter den Links ─────────────────── */
.nav__links { position: relative; }
.nav__ink {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 0;
  border-radius: 10px;
  background: var(--surface-soft-2);
  opacity: 0;
  pointer-events: none;
  z-index: 0;
  transition:
    transform .3s var(--ease-out),
    width .3s var(--ease-out),
    opacity .2s ease;
}
.nav__ink.is-instant { transition: opacity .2s ease; }
.nav__links li:not(.nav__ink) { position: relative; z-index: 1; }

html.has-nav-ink .nav__links a,
html.has-nav-ink .nav__links a:hover,
html.has-nav-ink .nav__links a.active,
html.has-nav-ink .nav__links a.nav__active { background: transparent; }
html.has-nav-ink .nav__links a::after { display: none; }

/* ── 8c. Scroll-Fortschritt (läuft im Compositor, kein JS) ──────────────── */
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    body::after {
      content: '';
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 1001;
      height: 3px;
      background: linear-gradient(90deg, var(--primary), var(--primary-l));
      transform-origin: 0 50%;
      transform: scaleX(0);
      pointer-events: none;
      animation: vf-progress linear both;
      animation-timeline: scroll(root block);
    }
  }
}
@keyframes vf-progress { to { transform: scaleX(1); } }

/* ── 9. Komponenten ─────────────────────────────────────────────────────── */

/* Scroll-to-Top: gleitet herein statt nur aufzublenden */
.top-btn {
  transform: translateY(12px) scale(.9);
  transition:
    opacity var(--dur-ui) ease,
    transform .3s var(--ease-out),
    border-color var(--dur-ui) ease;
}
.top-btn.show { transform: none; }
@media (hover: hover) and (pointer: fine) {
  .top-btn.show:hover { transform: translateY(-3px); }
}

/* FAQ: <details> klappt weich auf (Chrome 131+, sonst sofort) */
.sp-faq-item { interpolate-size: allow-keywords; }
.sp-faq-item::details-content {
  block-size: 0;
  overflow: clip;
  opacity: 0;
  transition:
    block-size .3s var(--ease-out),
    opacity .25s ease,
    content-visibility .3s allow-discrete;
}
.sp-faq-item[open]::details-content { block-size: auto; opacity: 1; }
.sp-faq-item summary::after { transition: transform .3s var(--ease-out); }

/* Formular-Radios: visuell versteckt, aber per Tastatur & Screenreader nutzbar */
.sp-platform-btn input,
.sp-billing-radio input {
  display: block !important;
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}
.sp-platform-btn, .sp-billing-radio { position: relative; }
.sp-platform-btn input:focus-visible + span,
.sp-billing-radio input:focus-visible + span {
  outline: 2px solid var(--primary-l);
  outline-offset: 2px;
}

/* Feature-Explorer (Dashboard): gefilterte Karten staffeln herein */
@media (prefers-reduced-motion: no-preference) {
  .fx-card.is-entering {
    animation: vf-card-in .35s var(--ease-out) both;
    animation-delay: calc(min(var(--n, 0), 10) * 30ms);
  }
}
@keyframes vf-card-in {
  from { opacity: 0; transform: translateY(10px) scale(.98); }
}

/* Wort-Split: gelegentlich sichtbare Kante bei Subpixel-Rundung vermeiden */
.vf-w { backface-visibility: hidden; }

/* ── 10. Reduced Motion ─────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .mobile-menu__links li,
  .mobile-menu__cta,
  .mobile-menu__switches { transform: none !important; transition: opacity .2s ease !important; }
  .mobile-menu, .mobile-menu.is-open { transition: opacity .2s ease, visibility 0s; }
  .skip-link, .top-btn, .nav__ink { transition-property: opacity; }
  .top-btn { transform: none; }
  .sp-faq-item::details-content { transition: opacity .2s ease, content-visibility .2s allow-discrete; }
  .tbx, .sync.is-created .sync__event, .mods__panel.is-active, .roleswitch__list li { animation: none !important; }
  .sp-status__dot, .hero__badge-dot { animation: none !important; }
}

/* ── 11. Design-Taste: weniger KI-Muster, klarere Hierarchie ─────────────────
   Eine Akzentfarbe für Headline-Betonungen, kein Verlaufstext, gedämpfte
   Button-Schatten statt Leuchten, Hero näher an der Navigation. */

/* Headline-Betonungen: Volltonfarbe statt Verlaufstext (überall dieselbe Akzentfarbe) */
.hero__title em,
.dl-inner .display-lg em,
.sp-header__title em {
  background: none;
  -webkit-text-fill-color: currentColor;
  color: var(--primary);
}

/* Hero beginnt näher an der Navigation (vorher 6.5rem Luft über der Headline) */
.hero--v3 .hero__inner { padding-top: calc(var(--nav-h) + 4rem); }
@media (max-width: 640px) {
  .hero--v3 .hero__inner { padding-top: calc(var(--nav-h) + 3rem); }
}

/* Primär-Buttons: getönter, enger Schatten statt blauem Leuchten */
.btn--primary, .btn--active {
  box-shadow: 0 1px 2px rgba(0, 45, 110, .28), 0 8px 18px -10px rgba(0, 112, 235, .55);
}
@media (hover: hover) and (pointer: fine) {
  .btn--primary:hover, .btn--active:hover {
    box-shadow: 0 1px 2px rgba(0, 45, 110, .3), 0 12px 24px -12px rgba(0, 112, 235, .6);
  }
}

/* Sportarten-Hinweis: aus dem Hero ins Stats-Band verschoben */
.stats-band { row-gap: 1.5rem; }
.stats-band__note {
  flex-basis: 100%;
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  color: var(--muted);
  font-size: .9rem;
  text-align: center;
}
.stats-band__note svg { width: 16px; height: 16px; flex-shrink: 0; color: var(--primary); }

/* Abschnittsköpfe ohne Eyebrow: Headline trägt den Abschnitt allein */
.shead > .display-lg:first-child,
.tb-intro > .display-lg:first-child,
.sync__text > .display-lg:first-child,
.ptease__text > .display-lg:first-child { margin-top: 0; }

/* Typografie-Feinschliff: keine einzelnen Wörter in der letzten Zeile, ruhige Zahlen */
h1, h2, h3, .roleswitch__lead { text-wrap: balance; }
p, li, .stk-tile__desc { text-wrap: pretty; }
.stats-band__num, .pr-card__amount, .ptease__card strong { font-variant-numeric: tabular-nums; }