/* =====================================================================
   Effekte — Bewegung, Tiefe, Interaktion
   ---------------------------------------------------------------------
   Alle Effekte sind so gebaut, dass die Seite ohne sie vollstaendig
   nutzbar bleibt. Am Ende der Datei schaltet ein einziger
   prefers-reduced-motion-Block saemtliche Bewegung ab.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. Hero — Parallax-Ebenen und Blaulicht-Glimmen
   --------------------------------------------------------------------- */

/* Das Hintergrundfoto wandert beim Scrollen langsamer als der Inhalt und
   ist leicht ueberformatig, damit beim Verschieben kein Rand entsteht. */
.hero__bild,
.seitenkopf__bild {
  scale: 1.12;
  transform: translate3d(0, calc(var(--parallax, 0) * 60px), 0);
  will-change: transform;
}

/* Langsam pulsierendes Blaulicht ueber dem Foto — dezent, damit das
   Motiv sichtbar bleibt. */
.hero::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 45%;
  z-index: 2;
  width: min(820px, 96vw);
  aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(182, 24, 48, 0.34), transparent 60%);
  filter: blur(70px);
  animation: blaulicht 8s ease-in-out infinite;
  pointer-events: none;
  mix-blend-mode: screen;
}

@keyframes blaulicht {
  0%, 100% {
    background: radial-gradient(circle, rgba(182, 24, 48, 0.34), transparent 60%);
    opacity: 0.8;
    scale: 1;
  }
  50% {
    background: radial-gradient(circle, rgba(32, 77, 140, 0.42), transparent 60%);
    opacity: 1;
    scale: 1.07;
  }
}

/* Feines technisches Raster ueber dem dunklen Grund */
.hero__raster,
.seitenkopf__raster {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
  background-size: 64px 64px;
  /* Raster laeuft nach unten aus */
  -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 88%);
  mask-image: linear-gradient(180deg, #000 0%, transparent 88%);
  transform: translate3d(0, calc(var(--parallax, 0) * -20px), 0);
}

/* Aufsteigende Funken im Hero */
.funken { position: absolute; inset: 0; z-index: 3; overflow: hidden; pointer-events: none; }

.funke {
  position: absolute;
  bottom: -12px;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--gelb);
  box-shadow: 0 0 8px 2px rgba(252, 207, 81, 0.6);
  opacity: 0;
  animation: funkenflug linear infinite;
}

@keyframes funkenflug {
  0%   { transform: translate3d(0, 0, 0) scale(1);    opacity: 0; }
  12%  { opacity: 0.9; }
  70%  { opacity: 0.6; }
  100% { transform: translate3d(var(--drift, 30px), -95vh, 0) scale(0.3); opacity: 0; }
}

/* Der Hero-Inhalt selbst driftet leicht mit und blendet aus */
.hero__inhalt {
  transform: translate3d(0, calc(var(--parallax, 0) * -60px), 0);
}

/* Einblendung des Hero-Inhalts beim Laden */
.hero__marke,
.hero__titel span,
.hero__text,
.hero__aktionen {
  animation: hero-auf 900ms cubic-bezier(0.16, 0.84, 0.3, 1) backwards;
}
.hero__marke               { animation-delay: 80ms; }
.hero__titel span:nth-of-type(1) { animation-delay: 180ms; }
.hero__titel span:nth-of-type(2) { animation-delay: 300ms; }
.hero__text                { animation-delay: 420ms; }
.hero__aktionen            { animation-delay: 540ms; }

@keyframes hero-auf {
  from { opacity: 0; transform: translate3d(0, 26px, 0); filter: blur(6px); }
  to   { opacity: 1; transform: translate3d(0, 0, 0);    filter: blur(0); }
}

/* Scroll-Hinweis am unteren Hero-Rand */
.hero__scroll {
  position: absolute;
  left: 50%;
  bottom: 1.75rem;
  z-index: 3;
  translate: -50% 0;
  display: grid;
  place-items: center;
  gap: 0.4rem;
  font-size: var(--fs-label);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--auf-dunkel-leise);
  text-decoration: none;
}
.hero__scroll:hover { color: #fff; }
.hero__scroll .maus {
  width: 24px;
  height: 38px;
  border: 2px solid currentColor;
  border-radius: 999px;
  position: relative;
}
.hero__scroll .maus::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 7px;
  translate: -50% 0;
  width: 3px;
  height: 7px;
  border-radius: 2px;
  background: currentColor;
  animation: maus-rad 1.8s ease-in-out infinite;
}
@keyframes maus-rad {
  0%, 100% { transform: translateY(0);   opacity: 1; }
  60%      { transform: translateY(11px); opacity: 0.2; }
}

/* Auf schmalen oder niedrigen Schirmen fehlt der Platz — dort wuerde der
   Hinweis sonst ueber den Schaltflaechen liegen. */
@media (max-width: 640px), (max-height: 720px) {
  .hero__scroll { display: none; }
}

/* ---------------------------------------------------------------------
   2. Scroll-Reveal
   --------------------------------------------------------------------- */
/* WICHTIG: Inhalte werden nur dann versteckt, wenn effects.js die Klasse
   .reveal-aktiv gesetzt hat — also nur, wenn der IntersectionObserver
   tatsaechlich zur Verfuegung steht und sie auch wieder einblenden kann.
   Ohne JavaScript oder bei blockiertem Skript bleibt die Seite sichtbar,
   statt dauerhaft leer zu sein. */
.reveal-aktiv [data-reveal] {
  opacity: 0;
  transform: translate3d(0, 28px, 0);
  transition:
    opacity 700ms cubic-bezier(0.16, 0.84, 0.3, 1),
    transform 700ms cubic-bezier(0.16, 0.84, 0.3, 1);
  transition-delay: var(--reveal-delay, 0ms);
}
.reveal-aktiv [data-reveal].ist-sichtbar {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/* ---------------------------------------------------------------------
   3. Zaehler-Animation
   --------------------------------------------------------------------- */
.kennzahl__wert { transition: color 400ms ease; }
.kennzahl.laeuft .kennzahl__wert { color: var(--rot); }

/* ---------------------------------------------------------------------
   4. Wehr-Karten — 3D-Neigung und wandernder Rand
   --------------------------------------------------------------------- */
.raster--wehren { perspective: 1400px; }

.wehr-karte {
  transform-style: preserve-3d;
  transition:
    transform 260ms cubic-bezier(0.2, 0.7, 0.3, 1),
    box-shadow 260ms ease,
    border-color 260ms ease;
}

/* --neig-x / --neig-y setzt effects.js abhaengig von der Mausposition */
.wehr-karte:hover {
  transform:
    perspective(1400px)
    rotateX(var(--neig-x, 0deg))
    rotateY(var(--neig-y, 0deg))
    translate3d(0, -6px, 0);
  box-shadow: var(--schatten-hoch);
  border-color: transparent;
}

/* Leuchtender Rand, der dem Zeiger folgt.
   Die Maske stanzt die Flaeche aus, sodass nur der 1px-Rahmen leuchtet —
   der Verlauf legt sich dadurch nie unter den Text der Karte. */
.wehr-karte::before {
  content: '';
  position: absolute;
  inset: -1px;
  z-index: 2;
  border-radius: inherit;
  padding: 1.5px;
  pointer-events: none;
  background: radial-gradient(
    260px circle at var(--zeiger-x, 50%) var(--zeiger-y, 50%),
    var(--rot),
    var(--gelb) 30%,
    transparent 68%
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 260ms ease;
}
.wehr-karte:hover::before { opacity: 1; }

/* Glanzstreifen, der ueber die Karte laeuft.
   Bewegt wird die Hintergrundposition statt des Elements — so bleibt der
   Streifen ohne overflow:hidden innerhalb der Karte (overflow wuerde die
   3D-Neigung flachdruecken). */
.wehr-karte::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  pointer-events: none;
  background-image: linear-gradient(
    115deg,
    transparent 42%,
    rgba(255, 255, 255, 0.16) 50%,
    transparent 58%
  );
  background-size: 260% 100%;
  background-position: 140% 0;
  background-repeat: no-repeat;
  transition: background-position 700ms cubic-bezier(0.2, 0.7, 0.3, 1);
}
.wehr-karte:hover::after { background-position: -40% 0; }

/* Der Karteninhalt hebt sich beim Neigen leicht ab — nur waehrend des
   Ueberfahrens, sonst wuerde er dauerhaft vergroessert erscheinen. */
.wehr-karte__abzeichen,
.wehr-karte__fuss {
  transition: transform 260ms cubic-bezier(0.2, 0.7, 0.3, 1);
}
.wehr-karte:hover .wehr-karte__abzeichen,
.wehr-karte:hover .wehr-karte__fuss { transform: translateZ(26px); }

/* ---------------------------------------------------------------------
   5. Kopfzeile — schrumpft und bekommt Rand beim Scrollen
   --------------------------------------------------------------------- */
.kopf[data-gescrollt='true'] {
  border-bottom-color: var(--rand);
  box-shadow: var(--schatten);
}
.kopf[data-gescrollt='true'] .kopf__innen { height: var(--header-hoehe-kompakt); }
/* Nur die Hoehe reduzieren — die Breite ergibt sich aus dem Seitenverhaeltnis.
   Ein fester Wert fuer beide Achsen wuerde die Wort-Bild-Marke stauchen. */
.kopf[data-gescrollt='true'] .marke__logo { height: 60px; }

/* Mobil startet die Marke groesser, also darf sie beim Scrollen auch
   groesser bleiben — sonst spraenge sie sichtbar zusammen. */
@media (max-width: 940px) {
  .kopf[data-gescrollt='true'] .marke__logo { height: clamp(56px, 16vw, 70px); }
}

/* Lesefortschritt als duenne Linie unter der Kopfzeile */
.fortschritt {
  position: absolute;
  left: 0;
  bottom: -1px;
  height: 2px;
  width: 100%;
  transform: scaleX(var(--fortschritt, 0));
  transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--rot), var(--gelb));
  pointer-events: none;
}

/* ---------------------------------------------------------------------
   6. Fahrzeug-Karten — Detail schiebt sich auf
   --------------------------------------------------------------------- */
.fahrzeug { cursor: pointer; }
.fahrzeug:hover {
  transform: translateY(-4px);
  box-shadow: var(--schatten-hoch);
}

.fahrzeug__detail {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 320ms cubic-bezier(0.2, 0.7, 0.3, 1);
}
.fahrzeug[data-offen='true'] .fahrzeug__detail { grid-template-rows: 1fr; }

.fahrzeug__detail > div { overflow: hidden; }

.fahrzeug__detail-innen {
  padding-top: var(--raum-s);
  margin-top: var(--raum-s);
  border-top: 1px solid var(--rand);
  font-size: var(--fs-klein);
}

.fahrzeug__pfeil {
  position: absolute;
  right: var(--raum-s);
  top: var(--raum-s);
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--bg-3);
  color: var(--text-leise);
  transition: transform 320ms ease, background 200ms ease;
}
.fahrzeug[data-offen='true'] .fahrzeug__pfeil {
  transform: rotate(180deg);
  background: var(--rot);
  color: #fff;
}

/* Beim Filtern ausgeblendete Karten */
.fahrzeug[hidden] { display: none; }

/* ---------------------------------------------------------------------
   7. Notruf-Knopf — dezenter Puls
   --------------------------------------------------------------------- */
.kontakt-fab { animation: fab-auf 500ms 900ms backwards cubic-bezier(0.16, 0.84, 0.3, 1); }

@keyframes fab-auf {
  from { opacity: 0; transform: translateY(20px) scale(0.9); }
  to   { opacity: 1; transform: none; }
}

.kontakt-fab::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 2px solid var(--rot);
  animation: fab-puls 2.6s ease-out infinite;
  pointer-events: none;
}

@keyframes fab-puls {
  0%   { opacity: 0.7; transform: scale(1); }
  70%  { opacity: 0;   transform: scale(1.35); }
  100% { opacity: 0;   transform: scale(1.35); }
}

/* Rotierendes Warnlicht im Notruf-Block */
.notruf-block::before {
  content: '';
  position: absolute;
  inset: -50%;
  z-index: -1;
  /* Weicher Lichtkegel — ohne harte Kanten, damit er wie ein Rundumlicht
     wirkt und nicht wie ein Zeichenfehler. */
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    rgba(255, 255, 255, 0.02) 14deg,
    rgba(255, 255, 255, 0.1) 34deg,
    rgba(255, 255, 255, 0.02) 54deg,
    transparent 70deg 360deg
  );
  filter: blur(14px);
  animation: warnlicht 9s linear infinite;
}
@keyframes warnlicht { to { rotate: 360deg; } }

/* ---------------------------------------------------------------------
   8. Kleinere Verfeinerungen
   --------------------------------------------------------------------- */

/* Wappen glimmt beim Ueberfahren */
.wappen { transition: box-shadow 260ms ease, scale 260ms ease; }
.fuehrung-karte:hover .wappen {
  box-shadow: 0 6px 22px rgba(32, 77, 140, 0.5);
  scale: 1.05;
}

/* Unterstrichene Links im Fliesstext wachsen von links */
.prosa a, .sektion__kopf a {
  background-image: linear-gradient(var(--rot), var(--rot));
  background-size: 0% 2px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  text-decoration: none;
  transition: background-size 260ms ease;
}
.prosa a:hover, .sektion__kopf a:hover { background-size: 100% 2px; }

/* Buttons bekommen einen weichen Lichtschein */
.btn--primaer { position: relative; overflow: hidden; }
.btn--primaer::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(120px circle at var(--zeiger-x, 50%) var(--zeiger-y, 50%),
              rgba(255, 255, 255, 0.28), transparent 60%);
  opacity: 0;
  transition: opacity 260ms ease;
}
.btn--primaer:hover::after { opacity: 1; }

/* Mobile Navigation: Links laufen gestaffelt ein */
@media (max-width: 900px) {
  .nav[data-offen='true'] .nav__link {
    animation: nav-auf 320ms backwards cubic-bezier(0.16, 0.84, 0.3, 1);
  }
  .nav[data-offen='true'] .nav__link:nth-child(1) { animation-delay: 40ms; }
  .nav[data-offen='true'] .nav__link:nth-child(2) { animation-delay: 80ms; }
  .nav[data-offen='true'] .nav__link:nth-child(3) { animation-delay: 120ms; }
  .nav[data-offen='true'] .nav__link:nth-child(4) { animation-delay: 160ms; }
  .nav[data-offen='true'] .nav__link:nth-child(5) { animation-delay: 200ms; }
  .nav[data-offen='true'] .nav__link:nth-child(6) { animation-delay: 240ms; }

  @keyframes nav-auf {
    from { opacity: 0; transform: translateX(-14px); }
    to   { opacity: 1; transform: none; }
  }
}

/* ---------------------------------------------------------------------
   9. Reduzierte Bewegung — schaltet saemtliche Animation ab
   --------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

  /* Inhalte, die sonst erst durch Animation sichtbar werden, direkt zeigen */
  [data-reveal] { opacity: 1 !important; transform: none !important; }

  .hero__bild,
  .seitenkopf__bild,
  .hero__raster,
  .hero__inhalt { transform: none !important; scale: 1 !important; }

  .hero::after,
  .notruf-block::before,
  .kontakt-fab::before,
  .funken { display: none; }

  .wehr-karte:hover { transform: translateY(-2px); }
  .wehr-karte::after { display: none; }
  .fahrzeug:hover { transform: none; }
}