/* ==========================================================================
   Taxi Fluor — Layout: Container, Sektionen, 24h-Banner
   ========================================================================== */

.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--space-24);
}

.container--narrow {
  max-width: var(--container-narrow);
}

main {
  display: block;
}

/* -- 24h-Banner: dunkelgraues Band direkt unter dem Header -------------- */
.hours-banner {
  background: var(--color-dark-grey);
  color: var(--color-white);
  text-align: center;
  padding: var(--space-9) var(--space-16);
  font-size: var(--text-base);
  letter-spacing: 0.2px;
}

.hours-banner strong {
  color: var(--color-white);
}

/* -- Sektions-Grid-Helfer (Grid-Tracks immer minmax(0, 1fr)) ------------- */
.grid-2 {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-32);
}

@media (min-width: 40rem) {
  .grid-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* -- Reveal (JS-gesteuert via IntersectionObserver) ----------------------
   Ohne JS oder bei reduced-motion bleibt der Inhalt vollständig sichtbar. */
.js-reveal .reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity var(--duration-normal) var(--ease-out),
    transform var(--duration-normal) var(--ease-out);
}

.js-reveal .reveal.is-visible {
  opacity: 1;
  transform: none;
}

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