/* ==========================================================================
   XXL Lasergame Duisburg, Fassung 0.5.0 (Laser-Gestaltung)

   Laser flächig, siehe CHANGELOG 0.5.0 und Abschnitt „Laser flächig":
   - Leitidee „Der Raum ist das Spielfeld": Hero mit zwei Laser-Emittern,
     Dunst und Zielpunkt; Startseiten-Blöcke mit eigenem Lasermuster
     (Tresor, Catch The Beam, LED-Boden, Scanlinie); Unterseiten mit einem
     schmalen Fächer im Kopf; Galerie und Tabellen mit Laser-Durchlauf.
   - Deko sind leere Elemente mit aria-hidden, pointer-events: none, unter
     dem Inhalt. Ohne JavaScript statisch, bei prefers-reduced-motion
     statisch und gedämpft. filter: blur() nur auf den drei Dunst-Flächen.

   Bewegung, siehe CHANGELOG 0.4.0 und Abschnitt „Bewegung" am Ende:
   - Alles Sichtbare steht im HTML. Ausgeblendet wird nur unter html.js
     (Klasse setzt ein Einzeiler im Kopf), eingeblendet mit .da (Observer in
     main.js) oder .alles-da (Rückfall nach 1,5 s). Ohne JavaScript und bei
     prefers-reduced-motion ist alles sofort sichtbar.
   - Nur opacity, transform, filter und box-shadow werden animiert, nie
     Höhe oder Abstand. Kein Layout-Sprung.

   Gestaltungsplan, siehe CHANGELOG 0.3.0:
   - Abstandsskala auf 8er-Raster: --a1 8, --a2 16, --a3 24, --a4 40 px;
     Blockabstand --luft (56 bis 104 px).
   - Typo-Skala (Eurostile für Auszeichnung, Roboto für Text):
     Titelzeile .78 rem Versalien · H1 2,1 bis 3,3 rem (Hero 2,5 bis 4,75 rem)
     · H2 1,5 bis 2 rem · H3 1,15 rem · Text 17 px · Vorspann 1,2 rem · Klein .875 rem.
   - Farbrollen: Grund (Seite), Fläche (Karten), Fläche-hoch (Tabellenkopf,
     Eingabefelder), Linie; Akzent = Marken-Orange für Knöpfe, Menü, Linie
     unter H1, Titelzeilen; Laser-Rot und -Grün nur als Strich (Dachzeile,
     Laserlinie, Fokusring, Meldungen).
   - Eine Komponentensprache „Karte": Radius 12 px, 1 px Linie, Innenabstand
     --a3, Titelzeile in Versalien. Gilt für Faktenleiste, Tabelle, Eckdaten,
     Adresse, Formularkasten, Meldung.
   ========================================================================== */

@font-face { font-family: 'Eurostile'; src: url('../fonts/eurostile.woff2') format('woff2'), url('../fonts/eurostile.woff') format('woff'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Roboto'; src: url('../fonts/roboto-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Roboto'; src: url('../fonts/roboto-700.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }

:root {
  /* Farbrollen */
  --grund:        #0b0b1a;
  --grund-2:      #111126;
  --flaeche:      #16162e;
  --flaeche-hoch: #1e1e3e;
  --schrift:      #f1f1f6;
  --schrift-matt: #b9b9cc;
  --akzent:       #f4a117;
  --akzent-hell:  #ffc04d;
  --auf-akzent:   #111111;
  --laser-rot:    #ff3b4e;
  --laser-gruen:  #3dff8b;
  --hell:         #ffffff;
  --auf-hell:     #111111;
  --linie:        rgba(255, 255, 255, .13);
  --linie-stark:  rgba(255, 255, 255, .28);
  /* Abstände, 8er-Raster */
  --a1: .5rem;
  --a2: 1rem;
  --a3: 1.5rem;
  --a4: 2.5rem;
  --luft: clamp(3.5rem, 7vw, 6.5rem);
  /* Form */
  --rund: 12px;
  --rund-klein: 6px;
  --breite: 1180px;
  --mass: 64ch;
  --auszeichnung: 'Eurostile', 'Roboto', Helvetica, Arial, sans-serif;
  --laserlinie: linear-gradient(90deg, var(--laser-rot) 0%, var(--akzent) 50%, var(--laser-gruen) 100%);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; background: var(--grund); color: var(--schrift);
  font-family: 'Roboto', Helvetica, Arial, sans-serif; font-size: 17px; line-height: 1.65;
  -webkit-text-size-adjust: 100%; overflow-wrap: break-word;
}
img { max-width: 100%; height: auto; display: block; }

/* --- Typografie --------------------------------------------------------- */
h1, h2, h3, .knopf, .fakt-zahl, .dachzeile, .titelzeile, .fuss-titel, .tabelle th, .eckdaten dt, legend, .adresse strong, .textlink {
  font-family: var(--auszeichnung); font-weight: 400;
}
h1 { font-size: clamp(2.1rem, 4.2vw, 3.3rem); line-height: 1.05; letter-spacing: -.01em; margin: 0 0 var(--a3); }
h1::after { content: ''; display: block; width: 3.5rem; height: 4px; background: var(--akzent); margin-top: var(--a3); border-radius: 2px; }
.mitte h1::after { margin-left: auto; margin-right: auto; }
h2 { font-size: clamp(1.5rem, 2.4vw, 2rem); line-height: 1.15; letter-spacing: 0; margin: 2em 0 .6em; color: var(--schrift); }
h2:first-child, h1 + h2, .vorspann + h2 { margin-top: 0; }
h3 { font-size: 1.15rem; line-height: 1.3; margin: 1.6em 0 .5em; }
h1, h2, h3 { text-wrap: balance; }
.titelzeile, .fuss-titel, .tabelle th, .eckdaten dt, legend {
  font-size: .78rem; text-transform: uppercase; letter-spacing: .12em; color: var(--akzent); line-height: 1.3;
}
h2.titelzeile { margin: 0 0 var(--a2); }
p { margin: 0 0 1em; }
p, li, dd { hyphens: auto; }
.block p, .block li, .block dd { max-width: var(--mass); }
.mitte p { margin-left: auto; margin-right: auto; }
.tabelle, .zeiten, .eckdaten, .fakt-zahl { font-variant-numeric: tabular-nums; }
[id] { scroll-margin-top: 4.5rem; }
a { color: var(--akzent-hell); text-underline-offset: .15em; text-decoration-thickness: 1px; }
a:hover { color: var(--hell); }
:focus-visible { outline: 3px solid var(--laser-gruen); outline-offset: 2px; }
strong { font-weight: 700; }

.huelle { width: 100%; max-width: var(--breite); margin: 0 auto; padding: 0 16px; }
.schmal { max-width: 46rem; }
.schmal-text { max-width: var(--mass); }
.mitte { text-align: center; }
.klein { font-size: .875rem; color: var(--schrift-matt); }
.vorspann { font-size: 1.2rem; line-height: 1.55; margin-bottom: var(--a4); }
.rechtstext h2 { font-size: 1.4rem; margin-top: 2.2em; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 0; background: var(--akzent); color: var(--auf-akzent); padding: .5em 1em; z-index: 100; }
.skip:focus { left: 8px; }

/* --- Kopf --------------------------------------------------------------- */
.kopf-info { background: #000; font-size: .82rem; }
.kopf-info-innen { display: flex; flex-wrap: wrap; gap: .3em 1.8em; justify-content: flex-end; padding-top: .5em; padding-bottom: .5em; }
.kopf-info-teil { display: inline-flex; align-items: center; gap: .45em; color: #ddd; text-decoration: none; }
a.kopf-info-teil:hover { color: var(--akzent); }
.symbol { width: 1em; height: 1em; fill: var(--akzent); flex: none; }
.kopf-marke { background: var(--hell); }
.kopf-marke-innen { display: flex; align-items: center; justify-content: space-between; gap: var(--a2); padding-top: var(--a2); padding-bottom: var(--a2); }
.logo img { width: 190px; height: auto; }
.service ul { list-style: none; display: flex; flex-wrap: wrap; gap: .3em 1.8em; margin: 0; padding: 0; }
.service a { color: var(--auf-hell); text-decoration: none; font-size: .9rem; letter-spacing: .01em; }
.service a:hover { color: #b06f00; text-decoration: underline; }
.kopf-menue { background: var(--akzent); position: sticky; top: 0; z-index: 50; box-shadow: 0 2px 12px rgba(0,0,0,.4); }
.menue ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: space-between; }
/* Menü in Eurostile wie auf xxl-sportcenter.de (CI); die Schrift hat nur eine Stärke, daher 400 statt fett */
.menue a { display: block; position: relative; padding: 1em 1em; color: var(--auf-akzent); text-decoration: none; font-family: var(--auszeichnung); font-weight: 400; text-transform: uppercase; font-size: .9rem; letter-spacing: .08em; transition: background .15s, color .15s, box-shadow .15s; }
.menue a:hover { background: rgba(0,0,0,.1); color: #000; }
.menue a[aria-current="page"] { color: #000; box-shadow: inset 0 -3px 0 #000; }
/* Unterstreichung läuft beim Überfahren von links ein (nur transform) */
.menue > ul > li > a::before { content: ''; position: absolute; left: 1em; right: 1em; bottom: 0; height: 3px; background: #000; transform: scaleX(0); transform-origin: left; transition: transform .25s cubic-bezier(.2, .7, .2, 1); }
.menue > ul > li > a:hover::before, .menue > ul > li > a:focus-visible::before { transform: scaleX(1); }
.menue > ul > li > a[aria-current="page"]::before { display: none; }
.menue-schalter { display: none; }
/* Untermenü „Freizeitspaß": klappt bei Maus und Tastatur auf */
.menue-gruppe { position: relative; }
.menue-gruppe > a::after { content: ' ▾'; font-size: .8em; }
/* Untermenü klappt mit kurzer Bewegung auf: bleibt display:flex (absolut, kein Layout), unsichtbar über visibility/opacity/transform */
.menue .untermenue { display: flex; position: absolute; right: 0; top: 100%; min-width: 15em; flex-direction: column; flex-wrap: nowrap; background: var(--akzent); box-shadow: 0 8px 20px rgba(0,0,0,.4); z-index: 60; border-radius: 0 0 var(--rund-klein) var(--rund-klein); overflow: hidden;
  visibility: hidden; opacity: 0; transform: translateY(-8px) scaleY(.96); transform-origin: top; pointer-events: none; transition: opacity .18s ease, transform .22s cubic-bezier(.2, .7, .2, 1), visibility 0s linear .22s; }
.menue-gruppe:hover > .untermenue, .menue-gruppe:focus-within > .untermenue { visibility: visible; opacity: 1; transform: none; pointer-events: auto; transition-delay: 0s; }
.untermenue a { position: static; }
.untermenue a { text-transform: none; font-weight: 700; letter-spacing: 0; font-size: .9rem; padding: .65em 1.1em; border-top: 1px solid rgba(0,0,0,.1); }

@media (max-width: 900px) {
  .service { display: none; }
  .logo img { width: 150px; }
  .js .menue-schalter { display: inline-flex; align-items: center; gap: .7em; background: none; border: 0; padding: .9em 0; font: inherit; font-weight: 700; font-size: .85rem; letter-spacing: .07em; color: var(--auf-akzent); cursor: pointer; text-transform: uppercase; }
  .balken, .balken::before, .balken::after { display: block; width: 24px; height: 3px; background: var(--auf-akzent); position: relative; border-radius: 2px; }
  .balken::before, .balken::after { content: ''; position: absolute; left: 0; }
  .balken::before { top: -7px; } .balken::after { top: 7px; }
  .js .menue { display: none; }
  .js .menue.offen { display: block; }
  .menue ul { flex-direction: column; padding-bottom: .5em; }
  .menue a { padding: .75em 0; border-top: 1px solid rgba(0,0,0,.12); }
  .menue a[aria-current="page"] { box-shadow: inset 4px 0 0 #000; padding-left: .8em; }
  .menue .untermenue { display: flex; position: static; box-shadow: none; min-width: 0; padding: 0 0 0 1em; border-radius: 0; visibility: visible; opacity: 1; transform: none; pointer-events: auto; transition: none; }
  .menue-gruppe > a::after { content: ''; }
  .menue > ul > li > a::before { display: none; }
  .kopf-info-innen { justify-content: flex-start; }
  .kopf-info-zusatz { display: none; }
}

/* --- Knöpfe ------------------------------------------------------------- */
.knopf { display: inline-block; position: relative; overflow: hidden; background: var(--akzent); color: var(--auf-akzent); padding: .95em 1.6em; border-radius: var(--rund-klein); text-decoration: none; text-transform: uppercase; letter-spacing: .07em; font-size: .9rem; line-height: 1.2; border: 2px solid var(--akzent); cursor: pointer; transition: background .25s, color .25s, border-color .25s, transform .2s, box-shadow .35s; }
/* Leuchten in Orange beim Überfahren */
.knopf:hover, .knopf:focus-visible { background: var(--akzent-hell); border-color: var(--akzent-hell); color: #000; transform: translateY(-2px); box-shadow: 0 0 0 1px rgba(255, 192, 77, .6), 0 0 18px rgba(244, 161, 23, .55), 0 10px 28px rgba(244, 161, 23, .3); }
.knopf:active { transform: translateY(0); box-shadow: none; }
.knopf-leer { background: transparent; color: var(--hell); border-color: var(--linie-stark); }
.knopf-leer:hover, .knopf-leer:focus-visible { background: var(--hell); color: #000; border-color: var(--hell); box-shadow: 0 0 18px rgba(255, 255, 255, .35); }
.knopf-dunkel { background: #111; color: var(--hell); border-color: #111; }
.knopf-dunkel:hover, .knopf-dunkel:focus-visible { background: #000; color: var(--akzent); border-color: #000; box-shadow: 0 0 18px rgba(0, 0, 0, .5); }
/* Lichtstreifen: läuft einmal über den Knopf, wenn er ins Bild kommt (Klasse .glanz aus main.js) */
.knopf::before { content: ''; position: absolute; top: -20%; bottom: -20%; left: -40%; width: 30%; background: linear-gradient(100deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.55) 50%, rgba(255,255,255,0) 100%); transform: translateX(-120%) skewX(-18deg); pointer-events: none; }
.js .knopf.glanz::before { animation: glanz 1.1s cubic-bezier(.4, 0, .2, 1) .35s 1 both; }
.js .hero .knopf.glanz::before { animation-delay: 1.4s; } /* erst nach dem Einblenden der Knöpfe */
.knopf-dunkel::before, .knopf-leer::before { background: linear-gradient(100deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.28) 50%, rgba(255,255,255,0) 100%); }
@keyframes glanz { from { transform: translateX(-120%) skewX(-18deg); } to { transform: translateX(520%) skewX(-18deg); } }
/* Der wichtigste Knopf je Seite pulsiert dezent, alle 5 s einmal, nur als Lichtring */
.js .knopf-puls { animation: puls 5s ease-out 2.5s infinite; }
@keyframes puls {
  0%, 100% { box-shadow: 0 0 0 0 rgba(244, 161, 23, 0); }
  6%       { box-shadow: 0 0 0 0 rgba(244, 161, 23, .55); }
  22%      { box-shadow: 0 0 0 12px rgba(244, 161, 23, 0); }
}
.knopf-puls:hover, .knopf-puls:focus-visible { animation: none; }
.hero-knoepfe { display: flex; flex-wrap: wrap; gap: var(--a2); margin-top: var(--a4); max-width: none; }
.zentriert { justify-content: center; }
.textlink { text-transform: uppercase; letter-spacing: .07em; font-size: .9rem; text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: .1em; }
.textlink::after { content: ' →'; }
.textlink:hover { border-bottom-color: transparent; }

/* --- Hero --------------------------------------------------------------- */
.hero { position: relative; min-height: clamp(540px, 80vh, 780px); display: flex; align-items: center; overflow: hidden; background: #050510; --kipp: 0deg; }
.hero-bild { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%; opacity: .62; transform-origin: 60% 45%; }
/* Ken-Burns: sehr langsamer Zoom, 26 s hin und zurück, nur transform */
.js .hero-bild { animation: kenburns 26s ease-in-out infinite alternate; }
@keyframes kenburns { from { transform: scale(1); } to { transform: scale(1.08); } }
/* Dunst: drei weiche Farbflächen unter dem Dunkelverlauf (.hero::after), driften langsam.
   Die einzigen Elemente mit filter: blur() auf der ganzen Seite. */
.hero-dunst { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.hero-dunst i { position: absolute; width: 58%; height: 78%; border-radius: 50%; filter: blur(40px); will-change: transform; }
.hero-dunst i:nth-child(1) { left: 14%; bottom: -34%; background: radial-gradient(closest-side, rgba(255,59,78,.5), rgba(255,59,78,0)); }
.hero-dunst i:nth-child(2) { right: -16%; top: -36%; background: radial-gradient(closest-side, rgba(255,59,78,.42), rgba(255,59,78,0)); }
.hero-dunst i:nth-child(3) { right: 6%; bottom: -30%; width: 46%; height: 62%; background: radial-gradient(closest-side, rgba(61,255,139,.26), rgba(61,255,139,0)); }
.js .hero-dunst i { animation: dunst 22s ease-in-out infinite alternate; }
.js .hero-dunst i:nth-child(2) { animation-duration: 27s; animation-delay: -9s; }
.js .hero-dunst i:nth-child(3) { animation-duration: 19s; animation-delay: -14s; }
@keyframes dunst { from { transform: translate(0, 0) scale(1); } to { transform: translate(6%, -5%) scale(1.12); } }
/* Laser-Fächer: zwei Emitter (links unten, rechts oben) mit je fünf Strahlen, Drehpunkt am
   Emitter. Die Maske dämpft die Strahlen im Textfeld (Ellipse um den Textblock), damit die H1
   frei bleibt. Beim Laden zünden die Strahlen nacheinander (Blitz, dann Arbeitswert), danach
   schwenken sie langsam. --kipp setzt main.js aus der Mausposition (nur feiner Zeiger). */
.hero-laser { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 1;
  -webkit-mask-image: radial-gradient(ellipse 60% 56% at 36% 50%, rgba(0,0,0,.22) 0 40%, #000 100%);
  mask-image: radial-gradient(ellipse 60% 56% at 36% 50%, rgba(0,0,0,.22) 0 40%, #000 100%); }
.emitter { position: absolute; width: 0; height: 0; transform: rotate(var(--kipp)); transition: transform .9s cubic-bezier(.2, .7, .2, 1); }
.emitter-lu { left: 0; top: 86%; }
.emitter-ro { left: 100%; top: 9%; }
.emitter::before { content: ''; position: absolute; left: -5px; top: -5px; width: 10px; height: 10px; border-radius: 50%; background: #fff; box-shadow: 0 0 10px 3px var(--laser-rot), 0 0 36px 12px rgba(255,59,78,.45); }
.emitter i { --o: .55; position: absolute; left: 0; top: -1px; width: 160vw; height: 2px; border-radius: 2px; transform-origin: 0 50%; transform: rotate(var(--w)); opacity: var(--o); color: var(--laser-rot);
  background: linear-gradient(90deg, #fff 0, currentColor 2%, currentColor 55%, rgba(255,59,78,0) 100%); box-shadow: 0 0 6px currentColor, 0 0 18px rgba(255,59,78,.5); }
.emitter i.gruen { color: var(--laser-gruen); background: linear-gradient(90deg, #fff 0, currentColor 2%, currentColor 55%, rgba(61,255,139,0) 100%); box-shadow: 0 0 6px currentColor, 0 0 18px rgba(61,255,139,.45); }
.emitter-lu i:nth-child(1) { --w: -3deg;  --z: .9s; }
.emitter-lu i:nth-child(2) { --w: -9deg;  --z: 1.05s; }
.emitter-lu i:nth-child(3) { --w: -16deg; --z: 1.2s; }
.emitter-lu i:nth-child(4) { --w: -26deg; --z: 1.35s; }
.emitter-lu i:nth-child(5) { --w: -58deg; --z: 1.5s; }
.emitter-ro i:nth-child(1) { --w: 177deg; --z: 1s; }
.emitter-ro i:nth-child(2) { --w: 166deg; --z: 1.15s; }
.emitter-ro i:nth-child(3) { --w: 155deg; --z: 1.3s; }
.emitter-ro i:nth-child(4) { --w: 141deg; --z: 1.45s; }
.emitter-ro i:nth-child(5) { --w: 117deg; --z: 1.6s; }
.js .emitter i { animation: zuenden .55s ease-out both, schwenk 16s ease-in-out both infinite alternate; animation-delay: var(--z), calc(var(--z) + .55s); }
.js .emitter i:nth-child(2) { animation-duration: .55s, 13s; }
.js .emitter i:nth-child(3) { animation-duration: .55s, 19s; }
.js .emitter i:nth-child(4) { animation-duration: .55s, 15s; }
.js .emitter i:nth-child(5) { animation-duration: .55s, 21s; }
@keyframes zuenden { 0% { opacity: 0; } 35% { opacity: 1; } 100% { opacity: var(--o); } }
@keyframes schwenk { from { transform: rotate(calc(var(--w) - 2.5deg)); } to { transform: rotate(calc(var(--w) + 2.5deg)); } }
/* Zielpunkt: roter Ring mit Punkt folgt dem Zeiger nur im Hero (Element legt main.js an, nur feiner Zeiger) */
.hero-ziel { position: absolute; left: 0; top: 0; z-index: 3; width: 30px; height: 30px; margin: -15px 0 0 -15px; border: 1px solid rgba(255,59,78,.9); border-radius: 50%; box-shadow: 0 0 10px rgba(255,59,78,.5), inset 0 0 6px rgba(255,59,78,.3); pointer-events: none; opacity: 0; transition: opacity .3s; }
.hero-ziel::before { content: ''; position: absolute; left: 50%; top: 50%; width: 4px; height: 4px; margin: -2px 0 0 -2px; border-radius: 50%; background: var(--laser-rot); box-shadow: 0 0 6px var(--laser-rot); }
.hero-ziel.an { opacity: .85; }
.hero-ziel.gross { opacity: .45; }
.hero::after { content: ''; position: absolute; inset: 0; background:
  linear-gradient(180deg, rgba(11,11,26,0) 70%, var(--grund) 100%),
  linear-gradient(90deg, rgba(5,5,16,.94) 0%, rgba(5,5,16,.6) 50%, rgba(5,5,16,.1) 100%); }
.hero-inhalt { position: relative; z-index: 2; padding-top: var(--a4); padding-bottom: var(--a4); }
.hero h1 { font-size: clamp(2.5rem, 6vw, 4.75rem); line-height: .98; letter-spacing: -.015em; text-transform: uppercase; max-width: 12em; text-shadow: 0 2px 24px rgba(0,0,0,.7); }
.hero h1::after { margin-top: var(--a3); }
.hero-text { max-width: 34em; font-size: 1.2rem; line-height: 1.55; }
.dachzeile { display: flex; align-items: center; gap: .8em; color: var(--laser-gruen); text-transform: uppercase; font-size: .8rem; letter-spacing: .18em; margin: 0 0 var(--a3); }
.dachzeile::before { content: ''; width: 2.5rem; height: 2px; background: currentColor; flex: none; box-shadow: 0 0 8px currentColor; }
/* Hero-Inhalt erscheint beim Laden gestaffelt (nur unter html.js, sonst sofort da) */
.js .hero .dachzeile, .js .hero h1, .js .hero .hero-text, .js .hero .hero-knoepfe { animation: herein .6s cubic-bezier(.2, .7, .2, 1) both; }
.js .hero .dachzeile { animation-delay: .1s; }
.js .hero h1 { animation-delay: .25s; }
.js .hero .hero-text { animation-delay: .45s; }
.js .hero .hero-knoepfe { animation-delay: .65s; }
@keyframes herein { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
.js .hero .dachzeile::before { animation: dachstrich .7s ease-out .4s both; transform-origin: left; }
@keyframes dachstrich { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* --- Blöcke ------------------------------------------------------------- */
.block { padding: var(--luft) 0; }
.block-dunkel { background: var(--grund-2); border-top: 1px solid var(--linie); border-bottom: 1px solid var(--linie); }
.block-akzent { background: var(--akzent); color: var(--auf-akzent); }
.block-akzent h2 { color: #000; }
.zwei-spalten { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(var(--a3), 5vw, 4.5rem); align-items: center; }
.zwei-spalten > * { min-width: 0; }
.zwei-spalten.oben { align-items: start; }
.zwei-spalten.umgekehrt { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
.zwei-spalten.umgekehrt > :first-child { order: 2; }
.zwei-spalten.bild-links { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
.zwei-spalten.bild-paar { grid-template-columns: 1fr 1fr; align-items: stretch; }
.bild-paar img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.zwei-spalten.formular-spalten { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
@media (max-width: 860px) {
  .zwei-spalten, .zwei-spalten.umgekehrt, .zwei-spalten.bild-links, .zwei-spalten.bild-paar, .zwei-spalten.formular-spalten { grid-template-columns: 1fr; }
  .zwei-spalten.umgekehrt > :first-child { order: 0; }
}
figure { margin: 0; }
.bild-rahmen img { border-radius: var(--rund); box-shadow: 0 0 0 1px var(--linie), 0 24px 48px -24px rgba(0, 0, 0, .9); }
.bild-hoch img { max-width: 440px; margin: 0 auto; }

/* Faktenleiste: eine Karte, vier Felder, eine Laserlinie */
.fakten { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; position: relative; background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--rund); overflow: hidden; }
.fakten::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--laserlinie); }
.fakt { min-width: 0; padding: calc(var(--a3) + 3px) var(--a3) var(--a3); border-left: 1px solid var(--linie); }
.fakt:first-child { border-left: 0; }
.fakt-zahl { font-size: 2rem; line-height: 1.1; color: var(--akzent); margin: 0 0 .35em; letter-spacing: -.01em; }
.fakt p:last-child { margin: 0; color: var(--schrift-matt); font-size: .95rem; line-height: 1.5; }
@media (max-width: 900px) {
  .fakten { grid-template-columns: 1fr 1fr; }
  .fakt:nth-child(3) { border-left: 0; }
  .fakt:nth-child(n+3) { border-top: 1px solid var(--linie); padding-top: var(--a3); }
}
@media (max-width: 520px) {
  .fakten { grid-template-columns: 1fr; }
  .fakt { border-left: 0; }
  .fakt:nth-child(n+2) { border-top: 1px solid var(--linie); padding-top: var(--a3); }
}

.liste { padding-left: 1.2em; }
.liste li { margin-bottom: .6em; }
.liste li::marker { color: var(--akzent); }

/* Tabelle in Kartensprache */
.tabelle { width: 100%; border-collapse: separate; border-spacing: 0; margin: 0 0 var(--a2); background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--rund); overflow: hidden; }
.tabelle th, .tabelle td { text-align: left; padding: .8em var(--a3); border-bottom: 1px solid var(--linie); vertical-align: top; }
.tabelle tbody tr:last-child td { border-bottom: 0; }
.tabelle th { background: var(--flaeche-hoch); padding-top: .9em; padding-bottom: .9em; }
.tabelle + .klein { margin-top: calc(-1 * var(--a1)); }
@media (max-width: 600px) {
  .tabelle { font-size: .95rem; }
  .tabelle th, .tabelle td { padding: .7em .8em; }
  .tabelle th:first-child, .tabelle td:first-child { padding-left: var(--a2); }
  .tabelle td:not(:first-child) { white-space: nowrap; }
}

/* Eckdaten in Kartensprache */
.eckdaten { display: grid; grid-template-columns: max-content 1fr; gap: 0 var(--a3); margin: 0 0 var(--a3); background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--rund); padding: .25rem var(--a3); }
.eckdaten dt, .eckdaten dd { padding: .7rem 0; border-top: 1px solid var(--linie); }
.eckdaten dt:first-of-type, .eckdaten dt:first-of-type + dd { border-top: 0; }
.eckdaten dt { padding-top: .95rem; }
.eckdaten dd { margin: 0; }
@media (max-width: 520px) {
  .eckdaten { grid-template-columns: 1fr; }
  .eckdaten dt { padding-bottom: .1rem; }
  .eckdaten dd { border-top: 0; padding-top: 0; }
}

/* Adresse, Meldung, Karte */
.adresse { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--rund); padding: var(--a3); margin: 0 0 var(--a3); }
.adresse strong { display: block; font-size: 1.15rem; line-height: 1.3; margin-bottom: .35em; }
.adresse strong + br { display: none; }
.adresse p:last-child { margin: 0; }
.karte { margin: var(--a3) 0 0; }
.karte img { border-radius: var(--rund); box-shadow: 0 0 0 1px var(--linie); }
.karte figcaption { font-size: .875rem; color: var(--schrift-matt); margin-top: .7em; max-width: var(--mass); }
.meldung { border-radius: var(--rund); padding: var(--a2) var(--a3); margin-bottom: var(--a3); }
.meldung p:last-child, .meldung ul { margin-bottom: 0; }
.meldung-gut { background: #12391f; border: 1px solid var(--laser-gruen); }
.meldung-fehler { background: #3d1218; border: 1px solid var(--laser-rot); }

/* --- Galerie: Motivraster mit großen und hohen Feldern ------------------- */
.galerie { list-style: none; padding: 0; margin: var(--a4) 0 var(--a2); display: grid; grid-template-columns: repeat(6, 1fr); grid-auto-rows: clamp(110px, 13.5vw, 190px); grid-auto-flow: dense; gap: 12px; }
.galerie li { grid-column: span 2; min-width: 0; max-width: none; } /* hebt die Zeilenlängen-Grenze (--mass) für Galeriefelder auf, sonst füllt ein 4-Spalten-Feld nur 64ch */
.galerie li.gross { grid-column: span 4; grid-row: span 2; }
.galerie li.hoch { grid-row: span 2; }
.galerie a { display: block; position: relative; height: 100%; border-radius: var(--rund-klein); overflow: hidden; background: var(--flaeche); cursor: zoom-in; box-shadow: 0 0 0 1px var(--linie); transition: box-shadow .3s; }
.galerie img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.2, .7, .2, 1), filter .4s; }
/* Laser-Rahmen beim Überfahren: Rahmen und Leuchten in Rot, Bild zoomt leicht */
.galerie a::after { content: ''; position: absolute; inset: 0; border: 2px solid transparent; border-radius: inherit; pointer-events: none; transition: border-color .3s, box-shadow .3s; }
.galerie a:hover img, .galerie a:focus-visible img { transform: scale(1.06); filter: brightness(1.08); }
.galerie a:hover, .galerie a:focus-visible { box-shadow: 0 0 22px rgba(255, 59, 78, .45); }
.galerie a:hover::after, .galerie a:focus-visible::after { border-color: var(--laser-rot); box-shadow: inset 0 0 14px rgba(255, 59, 78, .35); }
@media (max-width: 900px) {
  .galerie { grid-template-columns: repeat(4, 1fr); grid-auto-rows: clamp(120px, 20vw, 190px); }
}
@media (max-width: 600px) {
  .galerie { grid-template-columns: 1fr 1fr; grid-auto-rows: clamp(130px, 32vw, 180px); gap: 8px; }
  .galerie li { grid-column: span 1; }
  .galerie li.gross { grid-column: span 2; grid-row: span 2; }
  .galerie li.hoch { grid-column: span 1; grid-row: span 2; }
}

/* --- Brotkrumen (sichtbares Gegenstück zum BreadcrumbList-Markup) ------- */
.pfad { font-size: .82rem; color: var(--schrift-matt); padding-top: var(--a2); }
.pfad ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .2em; }
.pfad li + li::before { content: '›'; margin: 0 .5em; color: var(--schrift-matt); }
.pfad a { color: var(--schrift-matt); text-decoration: none; }
.pfad a:hover { color: var(--akzent-hell); text-decoration: underline; }
.pfad [aria-current] { color: var(--schrift); }
.pfad + .block { padding-top: var(--a4); }

/* --- Lightbox: Galeriefoto im selben Fenster, ohne JavaScript bleibt der Link --- */
.lichtkasten { position: fixed; inset: 0; z-index: 200; background: rgba(5, 5, 16, .94); display: flex; align-items: center; justify-content: center; padding: 3.5rem 3.5rem 1.5rem; opacity: 0; transition: opacity .25s ease; }
.lichtkasten.offen { opacity: 1; }
.lichtkasten[hidden] { display: none; }
.lichtkasten figure { margin: 0; max-width: 100%; display: flex; flex-direction: column; align-items: center; gap: .7em; }
.lichtkasten img { max-width: 100%; max-height: calc(100vh - 8rem); width: auto; height: auto; border-radius: var(--rund-klein); box-shadow: 0 20px 60px rgba(0,0,0,.6); transition: opacity .3s ease, transform .3s ease; }
.lichtkasten img.lk-lade { opacity: 0; transform: scale(.985); }
.lichtkasten figcaption { color: #ddd; font-size: .9rem; text-align: center; max-width: 60ch; }
.lichtkasten button { position: absolute; background: rgba(255,255,255,.12); color: #fff; border: 0; border-radius: 50%; width: 2.8rem; height: 2.8rem; font-size: 1.9rem; line-height: 1; cursor: pointer; transition: background .15s, color .15s; }
.lichtkasten button:hover { background: var(--akzent); color: #000; }
.lk-zu { top: .8rem; right: .8rem; }
.lk-zurueck { left: .6rem; top: 50%; transform: translateY(-50%); }
.lk-weiter { right: .6rem; top: 50%; transform: translateY(-50%); }
@media (max-width: 600px) { .lichtkasten { padding: 3.5rem .5rem 1rem; } .lk-zurueck, .lk-weiter { top: auto; bottom: .6rem; transform: none; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } html { scroll-behavior: auto; } }

/* --- Formular in Kartensprache ------------------------------------------ */
.formular-kasten { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--rund); padding: clamp(var(--a2), 3vw, var(--a4)); }
.formular-kasten p { max-width: none; }
.formular-kasten label { display: block; font-weight: 700; margin-bottom: .35em; }
.formular-kasten input[type="text"], .formular-kasten input[type="email"], .formular-kasten input[type="tel"],
.formular-kasten input[type="number"], .formular-kasten input[type="date"], .formular-kasten input[type="time"],
.formular-kasten select, .formular-kasten textarea {
  width: 100%; padding: .7em .8em; border-radius: var(--rund-klein); border: 1px solid var(--linie-stark); background: var(--grund); color: var(--schrift); font: inherit; transition: border-color .2s, box-shadow .25s;
}
/* weicher Fokus-Glow in Orange, der grüne Fokusring bleibt für die Tastatur */
.formular-kasten input:focus, .formular-kasten select:focus, .formular-kasten textarea:focus { border-color: var(--akzent); box-shadow: 0 0 0 3px rgba(244, 161, 23, .22), 0 0 16px rgba(244, 161, 23, .3); }
/* Feldgruppen blenden beim Wechsel des Anliegens weich um (Klassen aus main.js) */
.js .teil.teil-ein { animation: teil-ein .3s cubic-bezier(.2, .7, .2, 1) both; }
.js .teil.teil-aus { animation: teil-aus .15s ease-in both; }
@keyframes teil-ein { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes teil-aus { from { opacity: 1; } to { opacity: 0; } }
.formular-kasten fieldset { border: 1px solid var(--linie); border-radius: var(--rund-klein); padding: var(--a2) var(--a2) .2rem; margin: 0 0 var(--a3); }
.formular-kasten legend { padding: 0 .4em; }
.formular-kasten .wahl, .formular-kasten .zustimmung label { font-weight: 400; display: flex; gap: .7em; align-items: flex-start; margin-bottom: .7em; }
.formular-kasten .wahl input, .zustimmung input { margin-top: .3em; flex: none; width: 1.15em; height: 1.15em; accent-color: var(--akzent); }
.formular-kasten .knopf { margin-top: var(--a1); }
.honig { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* --- Fuß ---------------------------------------------------------------- */
.fuss { position: relative; background: #000; padding-top: var(--luft); font-size: .95rem; }
.fuss::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--laserlinie); opacity: .9; }
/* Lichtpunkt läuft einmal über die Laserlinie, wenn der Fuß ins Bild kommt */
.fuss::after { content: ''; position: absolute; top: -2px; left: 0; width: 22%; height: 6px; border-radius: 3px; pointer-events: none; opacity: 0; background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.95) 50%, rgba(255,255,255,0)); filter: blur(1px); transform: translateX(-100%); }
.js .fuss.da::after { animation: laser-durchlauf 1.4s cubic-bezier(.4, 0, .3, 1) .15s 1 both; }
@keyframes laser-durchlauf { 0% { opacity: 0; transform: translateX(-100%); } 10% { opacity: 1; } 90% { opacity: 1; } 100% { opacity: 0; transform: translateX(455%); } }
.fuss-raster { display: grid; grid-template-columns: 1.4fr 1.4fr .9fr .9fr; gap: var(--a4) var(--a3); }
.fuss-block { min-width: 0; }
.fuss-logo { display: inline-block; margin-bottom: var(--a3); }
.fuss-logo img { width: 160px; height: auto; }
.fuss-titel { margin: 0 0 var(--a2); }
.fuss-text { margin-bottom: var(--a2); }
.fuss-liste { list-style: none; padding: 0; margin: 0; }
.fuss-liste li { margin-bottom: .4em; }
.fuss a { color: #ddd; text-decoration: none; }
.fuss a:hover { color: var(--akzent); text-decoration: underline; }
.fuss-hinweis { color: var(--schrift-matt); font-size: .875rem; max-width: 30ch; }
.zeiten { display: grid; grid-template-columns: 1fr auto; gap: .35em var(--a2); margin: 0 0 var(--a2); }
.zeiten dt { color: var(--schrift-matt); }
.zeiten dd { margin: 0; text-align: right; white-space: nowrap; }
.fuss-zeile { border-top: 1px solid var(--linie); margin-top: var(--luft); padding: var(--a2) 0; color: var(--schrift-matt); font-size: .82rem; }
.fuss-zeile-innen { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5em 2em; }
.fuss-zeile p { margin: 0; }
@media (max-width: 900px) { .fuss-raster { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .fuss-raster { grid-template-columns: 1fr; gap: var(--a3); } .fuss-zeile { margin-top: var(--a4); } }

/* --- Laser flächig: Lasermuster hinter den Blöcken ------------------------
   Je Block ein Deko-Container (leere <i>, aria-hidden), absolut unter dem
   Inhalt (.huelle liegt mit z-index 1 darüber), pointer-events: none. Masken
   halten die Strahlen von den Textspalten fern. Ohne JavaScript stehen die
   Muster fertig da; mit JavaScript zeichnen sie sich beim Erscheinen
   (.laser-flaeche bekommt .da aus main.js, ist dort nur Auslöser).
   ------------------------------------------------------------------------ */
.laser-flaeche { position: relative; overflow: hidden; isolation: isolate; }
.laser-flaeche > .huelle { position: relative; z-index: 1; }
.laser-tresor, .laser-beam, .laser-led { position: absolute; inset: 0; z-index: 0; pointer-events: none; }

/* Mission Possible: vier rote Strahlen kreuzen sich wie im Tresorraum, laufen hinter dem Foto durch;
   links (Textspalte) auf 16 % gedämpft. Zeichnen sich nacheinander vom linken Ende her, dann atmen sie. */
.laser-tresor { -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,.16) 0 42%, #000 56%); mask-image: linear-gradient(90deg, rgba(0,0,0,.16) 0 42%, #000 56%); }
.laser-tresor i { position: absolute; left: -10%; width: 120%; height: 2px; border-radius: 2px; transform-origin: 0 50%; transform: rotate(var(--w)); opacity: .5;
  background: linear-gradient(90deg, rgba(255,59,78,0), var(--laser-rot) 12%, var(--laser-rot) 88%, rgba(255,59,78,0)); box-shadow: 0 0 6px var(--laser-rot), 0 0 16px rgba(255,59,78,.45); }
.laser-tresor i:nth-child(1) { top: 14%; --w: -7deg; }
.laser-tresor i:nth-child(2) { top: 72%; --w: 8deg; }
.laser-tresor i:nth-child(3) { top: 24%; --w: 17deg; }
.laser-tresor i:nth-child(4) { top: 90%; --w: -4deg; }
.js .laser-tresor i { transform: rotate(var(--w)) scaleX(0); transition: transform 1.2s cubic-bezier(.2, .7, .2, 1); }
.js .laser-tresor i:nth-child(2) { transition-delay: .25s; } .js .laser-tresor i:nth-child(3) { transition-delay: .5s; } .js .laser-tresor i:nth-child(4) { transition-delay: .75s; }
.js .laser-flaeche.da .laser-tresor i, .js.alles-da .laser-tresor i { transform: rotate(var(--w)) scaleX(1); animation: atmen 7s ease-in-out 1.4s infinite alternate; }
.js .laser-flaeche.da .laser-tresor i:nth-child(2), .js.alles-da .laser-tresor i:nth-child(2) { animation-delay: 2.3s; }
.js .laser-flaeche.da .laser-tresor i:nth-child(3), .js.alles-da .laser-tresor i:nth-child(3) { animation-delay: 3.1s; }
.js .laser-flaeche.da .laser-tresor i:nth-child(4), .js.alles-da .laser-tresor i:nth-child(4) { animation-delay: 1.9s; }
@keyframes atmen { from { opacity: .32; } to { opacity: .58; } }

/* Catch The Beam: senkrechte Strahlen in Rot und Grün, unterschiedlich hoch, mit Lichtpunkt am
   Boden; grüne pulsieren. Rechts (Textspalte) auf 15 % gedämpft, am Handy oben (Text zuerst).
   Mit feinem Zeiger sind die Strahlen selbst anfassbar (.gefangen, .alarm aus main.js);
   unter dem Inhalt bleiben sie unerreichbar, weil .huelle darüber liegt. */
.laser-beam { -webkit-mask-image: linear-gradient(90deg, #000 0 52%, rgba(0,0,0,.15) 62%); mask-image: linear-gradient(90deg, #000 0 52%, rgba(0,0,0,.15) 62%); }
.laser-beam::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--laser-rot); box-shadow: 0 0 10px var(--laser-rot); opacity: 0; }
.laser-beam i { position: absolute; top: 0; left: var(--x); width: 2px; height: var(--h); color: var(--laser-rot); opacity: .5;
  background: linear-gradient(180deg, rgba(255,255,255,.9), currentColor 6%, currentColor 100%); box-shadow: 0 0 6px currentColor, 0 0 16px rgba(255,59,78,.4); }
.laser-beam i::before { content: ''; position: absolute; left: -7px; right: -7px; top: 0; bottom: 0; } /* Greiffläche für den Zeiger */
.laser-beam i::after { content: ''; position: absolute; left: 50%; bottom: -3px; width: 8px; height: 8px; margin-left: -4px; border-radius: 50%; background: #fff; box-shadow: 0 0 8px 3px currentColor; }
.laser-beam i.gruen { color: var(--laser-gruen); box-shadow: 0 0 6px currentColor, 0 0 16px rgba(61,255,139,.4); }
.laser-beam i:nth-child(1)  { --x: 3%;    --h: 92%; }
.laser-beam i:nth-child(2)  { --x: 6.5%;  --h: 70%; }
.laser-beam i:nth-child(3)  { --x: 10%;   --h: 84%; }
.laser-beam i:nth-child(4)  { --x: 22%;   --h: 62%; }
.laser-beam i:nth-child(5)  { --x: 31%;   --h: 78%; }
.laser-beam i:nth-child(6)  { --x: 40%;   --h: 66%; }
.laser-beam i:nth-child(7)  { --x: 48%;   --h: 88%; }
.laser-beam i:nth-child(8)  { --x: 93%;   --h: 74%; }
.laser-beam i:nth-child(9)  { --x: 96.5%; --h: 95%; }
.laser-beam i:nth-child(10) { --x: 99%;   --h: 60%; }
.js .laser-beam i.gruen { animation: beam-puls 3.2s ease-in-out infinite alternate; }
.js .laser-beam i:nth-child(4) { animation-delay: -1.1s; } .js .laser-beam i:nth-child(6) { animation-delay: -2.2s; } .js .laser-beam i:nth-child(8) { animation-delay: -.6s; }
@keyframes beam-puls { from { opacity: .4; } to { opacity: .8; } }
@media (hover: hover) and (pointer: fine) {
  .laser-beam i { pointer-events: auto; cursor: crosshair; }
  .js .laser-beam i.gefangen { animation: fangen 2.6s ease-out both; }
  .js .laser-flaeche.alarm .laser-beam::before { animation: alarm .8s linear 1; }
}
@keyframes fangen { 0% { opacity: 1; transform: scaleX(3); } 6% { opacity: 0; transform: scaleX(1); } 78% { opacity: 0; } 100% { opacity: .6; } }
@keyframes alarm { 0%, 40%, 80% { opacity: .95; } 20%, 60%, 100% { opacity: 0; } }

/* Light Jumper: LED-Boden aus 24 Kacheln in Perspektive, läuft nach hinten aus (Maske) und ist
   links (Textspalte) gedämpft. Kacheln leuchten in diagonalen Wellen auf (nur opacity). */
.laser-led { left: 50%; right: auto; top: auto; bottom: -14%; width: 140%; height: 115%; display: grid; grid-template-columns: repeat(6, 1fr); grid-template-rows: repeat(4, 1fr); gap: 8px;
  transform: translateX(-50%) perspective(900px) rotateX(60deg); transform-origin: 50% 100%;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 42%), linear-gradient(90deg, rgba(0,0,0,.4) 0 44%, #000 58%); -webkit-mask-composite: source-in;
  mask-image: linear-gradient(180deg, transparent 0, #000 42%), linear-gradient(90deg, rgba(0,0,0,.4) 0 44%, #000 58%); mask-composite: intersect; }
.laser-led i { --c: 0; --r: 0; border-radius: 3px; background: rgba(70,140,255,.2); box-shadow: inset 0 0 0 1px rgba(70,140,255,.28); opacity: .45; }
.laser-led i:nth-child(7n+3) { background: rgba(61,255,139,.2); box-shadow: inset 0 0 0 1px rgba(61,255,139,.28); }
.laser-led i:nth-child(9n+5) { background: rgba(255,59,78,.2); box-shadow: inset 0 0 0 1px rgba(255,59,78,.28); }
.laser-led i:nth-child(6n+2) { --c: 1; } .laser-led i:nth-child(6n+3) { --c: 2; } .laser-led i:nth-child(6n+4) { --c: 3; } .laser-led i:nth-child(6n+5) { --c: 4; } .laser-led i:nth-child(6n+6) { --c: 5; }
.laser-led i:nth-child(n+7) { --r: 1; } .laser-led i:nth-child(n+13) { --r: 2; } .laser-led i:nth-child(n+19) { --r: 3; }
.js .laser-led i { animation: led-welle 5.2s ease-in-out infinite; animation-delay: calc((var(--c) + var(--r)) * .24s); }
@keyframes led-welle { 0%, 100% { opacity: .35; } 9% { opacity: 1; } 22% { opacity: .35; } }

/* Faktenleiste: eine Scanlinie läuft einmal unter den Zahlen durch, während sie zählen */
.fakt { position: relative; z-index: 1; }
.fakten::after { content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 100%; z-index: 0; pointer-events: none; opacity: 0; transform: translateX(-100%);
  background: linear-gradient(90deg, rgba(255,59,78,0) 0 80%, rgba(255,59,78,.12) calc(100% - 3px), rgba(255,255,255,.95) 100%); }
.js .fakten.da::after { animation: scan 1.3s cubic-bezier(.4, 0, .3, 1) .25s 1 both; }
@keyframes scan { 0% { opacity: 0; transform: translateX(-100%); } 10% { opacity: 1; } 90% { opacity: 1; } 100% { opacity: 0; transform: translateX(0); } }

/* Tabellen: ein Lichtpunkt läuft beim Erscheinen über die Oberkante, wie im Fuß */
.tabelle { position: relative; }
.tabelle::after { content: ''; position: absolute; top: 0; left: 0; width: 22%; height: 3px; border-radius: 2px; pointer-events: none; opacity: 0; transform: translateX(-100%);
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.95) 50%, rgba(255,255,255,0)); box-shadow: 0 0 10px 1px rgba(255,59,78,.55); }
.js .tabelle.da::after { animation: laser-durchlauf 1.4s cubic-bezier(.4, 0, .3, 1) .15s 1 both; }

/* Unterseiten: schmaler Fächer aus drei Strahlen oben rechts hinter Pfad und H1, links ausgeblendet
   (Maske), damit die H1 frei bleibt. Liegt unter dem Inhalt (z-index -1 im Kontext von main). */
main { position: relative; isolation: isolate; }
.kopf-laser { position: absolute; top: 0; left: 0; right: 0; height: 340px; z-index: -1; overflow: hidden; pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0 35%, #000 78%); mask-image: linear-gradient(90deg, transparent 0 35%, #000 78%); }
.kopf-laser::before { content: ''; position: absolute; left: 100%; top: 0; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: #fff; box-shadow: 0 0 10px 3px var(--laser-rot), 0 0 36px 12px rgba(255,59,78,.4); }
.kopf-laser i { --o: .4; position: absolute; left: 100%; top: -1px; width: 120vw; height: 2px; border-radius: 2px; transform-origin: 0 50%; transform: rotate(var(--w)); opacity: var(--o); color: var(--laser-rot);
  background: linear-gradient(90deg, #fff 0, currentColor 2%, currentColor 50%, rgba(255,59,78,0) 100%); box-shadow: 0 0 6px currentColor, 0 0 16px rgba(255,59,78,.4); }
.kopf-laser i:nth-child(1) { --w: 175deg; --z: .4s; }
.kopf-laser i:nth-child(2) { --w: 165deg; --z: .55s; }
.kopf-laser i:nth-child(3) { --w: 154deg; --z: .7s; color: var(--laser-gruen); background: linear-gradient(90deg, #fff 0, currentColor 2%, currentColor 50%, rgba(61,255,139,0) 100%); box-shadow: 0 0 6px currentColor, 0 0 16px rgba(61,255,139,.35); }
/* Zündung hier nur bis .55, damit der Blitz hinter dem H1-Ende den Kontrast 4,5:1 hält (gerechnet: ab 7:1) */
.js .kopf-laser i { animation: zuenden-kopf .5s ease-out both, schwenk 18s ease-in-out both infinite alternate; animation-delay: var(--z), calc(var(--z) + .5s); }
.js .kopf-laser i:nth-child(2) { animation-duration: .5s, 14s; } .js .kopf-laser i:nth-child(3) { animation-duration: .5s, 22s; }
@keyframes zuenden-kopf { 0% { opacity: 0; } 35% { opacity: .55; } 100% { opacity: var(--o); } }

/* Galerie: beim Überfahren oder Fokus scannt ein roter Strahl einmal von oben nach unten (0,6 s) */
.galerie a::before { content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; opacity: 0; transform: translateY(-100%);
  background: linear-gradient(180deg, rgba(255,59,78,0) 60%, rgba(255,59,78,.16) calc(100% - 3px), #fff 100%); box-shadow: 0 2px 12px rgba(255,59,78,.6); }
.galerie a:hover::before, .galerie a:focus-visible::before { animation: galerie-scan .6s ease-in-out 1 both; }
@keyframes galerie-scan { 0% { opacity: 0; transform: translateY(-100%); } 15% { opacity: 1; } 85% { opacity: 1; } 100% { opacity: 0; transform: translateY(0); } }

/* Schmale Fenster: halb so viele Strahlen und Kacheln, Dunst weicher gerechnet, kein Zeiger-Effekt (hover-Medienabfrage) */
@media (max-width: 700px) {
  .hero-dunst i { filter: blur(20px); }
  .emitter i:nth-child(n+4), .laser-tresor i:nth-child(n+3), .laser-beam i:nth-child(2n), .laser-led i:nth-child(n+13), .kopf-laser i:nth-child(n+3) { display: none; }
  .laser-led { grid-template-rows: repeat(2, 1fr); }
}
@media (max-width: 860px) {
  .laser-tresor { -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,.16) 0 50%, #000 64%); mask-image: linear-gradient(180deg, rgba(0,0,0,.16) 0 50%, #000 64%); }
  .laser-beam { -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,.15) 0 48%, #000 60%); mask-image: linear-gradient(180deg, rgba(0,0,0,.15) 0 48%, #000 60%); }
  .laser-led { -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 55%); mask-image: linear-gradient(180deg, transparent 0, #000 55%); }
  .kopf-laser { height: 260px; }
}

/* --- Bewegung: Erscheinen beim Scrollen ----------------------------------
   Die Ziele stehen vollständig im HTML. Nur wenn html.js gesetzt ist (Einzeiler
   im Kopf), starten sie unsichtbar und leicht versetzt. Sichtbar werden sie
   durch .da (IntersectionObserver in main.js, einmalig, gestaffelt über
   transition-delay) oder durch html.alles-da (Rückfall nach 1,5 s, wenn
   main.js nicht läuft). Nur opacity und transform, also kein Layout-Sprung.
   Dieselbe Zielliste steht in main.js (ZIELE) und muss dort gleich bleiben;
   .fuss, .knopf und .laser-flaeche sind dort nur Auslöser, nicht ausgeblendet.
   ------------------------------------------------------------------------ */
.js .block .zwei-spalten > *,
.js .block > .huelle:not(.zwei-spalten) > :not(.galerie),
.js .galerie > li,
.js .fuss-block {
  opacity: 0; transform: translateY(24px);
  transition: opacity .7s cubic-bezier(.2, .7, .2, 1), transform .7s cubic-bezier(.2, .7, .2, 1);
}
.js .block .zwei-spalten > figure { transform: translateY(24px) scale(.97); }
.js .galerie > li { transform: translateY(16px) scale(.96); transition-duration: .55s; }
.js .formular-kasten.formular-kasten { transform: translateX(40px); }
.js .block .zwei-spalten > .da, .js .block > .huelle:not(.zwei-spalten) > .da, .js .galerie > li.da, .js .fuss-block.da,
.js.alles-da .block .zwei-spalten > *, .js.alles-da .block > .huelle:not(.zwei-spalten) > :not(.galerie), .js.alles-da .galerie > li, .js.alles-da .fuss-block {
  opacity: 1; transform: none;
}
/* Faktenleiste: die Laserlinie oben zieht sich beim Erscheinen von links auf */
.js .fakten::before { transform: scaleX(0); transform-origin: left; transition: transform 1.1s cubic-bezier(.2, .7, .2, 1) .2s; }
.js .fakten.da::before, .js.alles-da .fakten::before { transform: scaleX(1); }
/* Tabellenzeilen laufen nacheinander ein */
.js .tabelle tbody tr { opacity: 0; transform: translateX(-10px); transition: opacity .5s ease, transform .5s cubic-bezier(.2, .7, .2, 1); }
.js .tabelle tbody tr:nth-child(2) { transition-delay: .08s; } .js .tabelle tbody tr:nth-child(3) { transition-delay: .16s; }
.js .tabelle tbody tr:nth-child(4) { transition-delay: .24s; } .js .tabelle tbody tr:nth-child(5) { transition-delay: .32s; }
.js .tabelle.da tbody tr, .js.alles-da .tabelle tbody tr { opacity: 1; transform: none; }
/* Reduzierte Bewegung: alles sofort da, nichts bewegt sich */
@media (prefers-reduced-motion: reduce) {
  .js .block .zwei-spalten > *, .js .block > .huelle:not(.zwei-spalten) > :not(.galerie), .js .galerie > li, .js .fuss-block,
  .js .tabelle tbody tr, .js .formular-kasten.formular-kasten { opacity: 1; transform: none; }
  .js .fakten::before { transform: none; }
  .menue .untermenue { transform: none; }
  .fuss::after, .knopf::before, .fakten::after, .tabelle::after, .galerie a::before, .hero-ziel { display: none; }
  /* Laser statisch und gedämpft: Fächer stehen, Dunst steht, Strahlen der Blöcke fertig gezeichnet */
  .emitter i, .kopf-laser i { opacity: .35; }
  .emitter { transform: none; }
  .js .laser-tresor i { transform: rotate(var(--w)); transition: none; }
  .laser-beam i { pointer-events: none; }
}