/* ============================================================
   utilities.css — HELPER · STATES · A11Y
   ============================================================ */

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap;
}

.text-center { text-align: center; }
.text-mute   { color: var(--color-text-mute); }
.text-soft   { color: var(--color-text-soft); }

.mt-1 { margin-top: var(--space-1); }
.mt-2 { margin-top: var(--space-2); }
.mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }
.mt-5 { margin-top: var(--space-5); }

.mb-1 { margin-bottom: var(--space-1); }
.mb-2 { margin-bottom: var(--space-2); }
.mb-3 { margin-bottom: var(--space-3); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-5 { margin-bottom: var(--space-5); }

/* === Scroll-Reveal (init-Zustand) === */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out);
  will-change: opacity, transform;
}
.reveal.is-in { opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* === Foto-Hintergrund-Sektion === */
.section--photo-bg {
  position: relative;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.section--photo-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(10,20,30,0.58);
  z-index: 0;
}
.section--photo-bg > * {
  position: relative;
  z-index: 1;
}
.section--photo-bg .quote__text,
.section--photo-bg .quote__author,
.section--photo-bg .section-header h2,
.section--photo-bg p { color: rgba(255,255,255,0.92); }
/* Karten innerhalb photo-bg haben weißen Hintergrund → dunkle Schrift */
.section--photo-bg .testi-card p { color: var(--color-text); }
.section--photo-bg .testi-card .testi-card__author { color: var(--color-text-mute); }
.section--photo-bg .quote__glyph { color: var(--color-accent-warm); }
.section--photo-bg .section-header h2::after { background: var(--color-accent-warm); }

/* === Falunrot Glow — alle roten Textelemente === */
.hero__eyebrow,
.kpi__number,
.season-card__months,
.pillar-card__title::after,
.testi-card__stars,
.activity-tile:hover .activity-tile__icon,
.av-cta__warn,
.long-form a:hover {
  text-shadow: 0 0 14px rgba(204, 26, 20, 0.38);
}

/* === Print === */
@media print {
  .site-header, .site-footer, .top-bar, .demo-banner, .booking-bar, .nav-burger, .mobile-cta { display: none !important; }
  a { color: var(--color-text); text-decoration: underline; }
  body { background: transparent; }
  .card, .image-tile { break-inside: avoid; }
}