/* ============================================================
   Mobile-Fixes — explicit overrides ≤768
   ============================================================ */
@media (max-width: 768px) {
  .hero { min-height: 92svh; padding-top: var(--sp-9); }
  .hero__title { font-size: clamp(3.2rem, 14vw, 6.4rem); }
  .hero__sub { font-size: var(--fs-md); }
  .hero__stat strong { font-size: var(--fs-2xl); }
  .header__inner { gap: var(--sp-3); }
  section { padding: var(--sp-8) 0; }
  h2 { font-size: var(--fs-2xl); }
  h3 { font-size: var(--fs-xl); }
  .cta-band h2 { font-size: var(--fs-3xl); }
}
@media (max-width: 380px) {
  .hero__title { font-size: clamp(2.6rem, 16vw, 4.8rem); }
  .brand__name { font-size: var(--fs-sm); }
  .brand__logo { height: 32px; }
  .btn { padding: var(--sp-3) var(--sp-4); font-size: var(--fs-xs); }
}
/* Anti-Overflow für lange deutsche Komposita */
.hero, .benefits, .sponsors, section {
  overflow-x: hidden;
  max-width: 100vw;
}
.hero__inner, .section__head, .card {
  max-width: 100%;
  overflow-wrap: break-word;
  word-break: normal;
}

/* Bestimmte Elemente müssen ganze Wörter zusammen halten */
.tc-card__title, .race-card__title, .card__title,
.tarif-card__name, .hero__title, .dash__head h1,
h1, h2, h3 {
  word-break: keep-all;
  overflow-wrap: break-word;
  hyphens: manual;
}

/* Renn-Titel mit Bindestrich ggf. doch brechen (Stadtwerke-Triathlon) */
.tc-card__title, .race-card__title { line-break: auto; }

/* === Mobile-Specific Fixes für neue Komponenten === */
@media (max-width: 768px) {
  /* Tilt deaktivieren auf Touch (verursacht Stutter) */
  .tilt:hover { transform: none !important; }

  /* Sponsoren-Cards kompakter */
  .sponsors__grid { grid-template-columns: repeat(2, 1fr); gap: var(--sp-3); }
  .sponsors__item { min-height: 100px; padding: var(--sp-4) var(--sp-3); }
  .sponsors__item img { max-height: 50px; }

  /* Tarif-Cards full-width */
  .tarif-grid { grid-template-columns: 1fr; }
  .tarif-card { padding: var(--sp-5) var(--sp-4); }

  /* Modal Fullscreen-feel */
  .mp-modal { padding: 0; }
  .mp-modal__content {
    max-height: 100vh; max-width: 100vw;
    border-radius: 0; padding: var(--sp-7) var(--sp-5);
  }

  /* Funnel-Step-Dots leichter sichtbar */
  .step-dot { width: 14px; height: 14px; }

  /* Hero-Floating Elements weg auf Mobile (Performance) */
  .hero [aria-hidden="true"] { display: none; }
}

@media (max-width: 480px) {
  /* Footer-Grid-Stacking */
  .footer__grid { gap: var(--sp-5); }
  .footer h4 { font-size: var(--fs-sm); margin-bottom: var(--sp-2); }

  /* Hero-CTA full-width */
  .hero__cta { flex-direction: column; align-items: stretch; }
  .hero__cta .btn { width: 100%; }

  /* TC-Cards Stacking */
  .tc-card { grid-template-columns: 56px 1fr; padding: var(--sp-3); }
  .tc-card__date { padding: var(--sp-2); }
  .tc-card__date .day { font-size: var(--fs-lg); }
  .tc-card__date .mon { font-size: 9px; }
  .tc-card__cta { grid-column: 1 / -1; flex-direction: row; gap: var(--sp-2); }
  .tc-card__title { font-size: var(--fs-md); }
  .tc-tag { font-size: 10px; padding: 3px 8px; }
}

/* === iOS Safe-Area === */
@supports (padding: max(0px)) {
  .header { padding-top: max(var(--sp-3), env(safe-area-inset-top)); }
  .footer { padding-bottom: max(var(--sp-5), env(safe-area-inset-bottom)); }
  body { padding-bottom: env(safe-area-inset-bottom); }
}

/* === Touch-Hover-Optimierung — keine sticky-hover-states auf Touch === */
@media (hover: none) {
  .card:hover, .tilt:hover, .tarif-card:hover { transform: none; }
  .btn:hover { transform: none; }
}