/* ============================================================
   31 · DATUMSANZEIGER (Header) + EREIGNIS-SZENEN
   ------------------------------------------------------------
   Fallblatt-Anzeiger im Footer (mittig, ganz unten):
   Kupferstich-Gehaeuse als Bild,
   die drei Fenster darin sind transparent, die interaktiven
   Fallblaetter (Tag/Monat/Jahr) liegen exakt dahinter
   (Oeffnungen am Alphakanal vermessen). Obere Haelfte tippen =
   vor, untere = zurueck. Es ist immer nur EINE Zeile sichtbar.
   Die Trigger-Daten kennt NUR der Server
   (POST /api/ereignis-pruefung), hier steht nichts davon.
   ============================================================ */
.dfb-footer {
  /* Sitzt jetzt IN .footer-bottom (flex, space-between) zwischen den
     beiden Texten. Kein eigenes Padding-Top mehr — die Oberkante des
     Widgets startet auf gleicher Höhe wie die flankierenden Texte
     (align-items: flex-start in .footer-bottom, css/12-postits.css). */
  display: flex;
  justify-content: center;
}
.dfb-wrap {
  position: relative;
  width: clamp(190px, 24vw, 250px);
  container-type: inline-size;
  user-select: none;
  filter: drop-shadow(0 4px 8px rgba(60, 45, 20, 0.28));
}
.dfb-case {
  position: relative;
  width: 100%;
  display: block;
  pointer-events: none;
  z-index: 2;
}
.dfb-flap {
  position: absolute;
  z-index: 1;
  background: linear-gradient(180deg, #38332c 0 49.5%, #2a2620 50.5% 100%);
  color: #efe7d4;
  display: flex; align-items: center; justify-content: center;
  border: 0; padding: 0;
  font-family: 'IBM Plex Mono', monospace;
  font-weight: 600;
  letter-spacing: 0.04em;
  cursor: pointer;
  overflow: hidden;
}
.dfb-flap::after {
  content: "";
  position: absolute; left: 0; right: 0; top: 50%;
  height: 1px; margin-top: -0.5px;
  background: rgba(0, 0, 0, 0.55);
}
.dfb-flap[data-field="day"] { font-size: max(10px, 5cqw); }
.dfb-flap[data-field="month"] { font-size: max(10px, 5.6cqw); }
.dfb-flap[data-field="year"] { font-size: max(11px, 6.4cqw); }
.dfb-flap.flick { animation: dfbFlick 0.16s ease; }
@keyframes dfbFlick {
  0% { transform: scaleY(1); }
  50% { transform: scaleY(0.12); }
  100% { transform: scaleY(1); }
}
@media (max-width: 720px) {
  .dfb-wrap { width: clamp(170px, 48vw, 210px); }
}

/* ============================================================
   SZENEN-RAHMEN + CINE-BAUKASTEN
   ============================================================ */
.ev-scene { position: fixed; inset: 0; z-index: 1000; display: none; overflow: hidden; }
.ev-scene.is-active { display: block; }
.ev-fade { position: absolute; inset: 0; opacity: 0; transition: opacity 0.9s ease; }
.ev-scene.is-active .ev-fade { opacity: 1; }
.ev-stage { position: absolute; inset: 0; }
.ev-cam { position: absolute; inset: 0; will-change: transform; }
.ev-caption {
  position: absolute; left: 50%; z-index: 6;
  transform: translateX(-50%) scale(1.6);
  text-align: center; opacity: 0; pointer-events: none;
  width: max-content; max-width: 92vw;
}
.ev-caption.is-in {
  opacity: 1; transform: translateX(-50%) scale(1);
  transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.2, 1.6, 0.4, 1);
}
.ev-stamp {
  display: inline-block;
  border: 3px double #b82727;
  color: #b82727;
  background: rgba(239,231,212,0.93);
  font-family: 'Special Elite', cursive;
  padding: 0.6rem 1.1rem;
  transform: rotate(-2.5deg);
}
.ev-stamp .l1 { font-size: clamp(1.35rem, 3.6vw, 2rem); letter-spacing: 0.1em; }
.ev-stamp .l2 { font-family: 'IBM Plex Mono', monospace; font-size: clamp(0.72rem, 1.7vw, 0.92rem); letter-spacing: 0.22em; text-transform: uppercase; margin-top: 0.25rem; }
.ev-bar { position: absolute; left: 0; right: 0; height: 8vh; background: #000; z-index: 5; transition: transform 1.1s cubic-bezier(0.7,0,0.3,1); }
.ev-bar-t { top: 0; transform: translateY(-101%); }
.ev-bar-b { bottom: 0; transform: translateY(101%); }
.ev-scene.is-active .ev-bar-t, .ev-scene.is-active .ev-bar-b { transform: none; }
.ev-vignette { position: absolute; inset: 0; z-index: 4; pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 52%, rgba(0,0,0,0.45) 100%); }
.ev-grain { position: absolute; inset: -10%; z-index: 4; pointer-events: none; opacity: 0.08;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grainJitter 0.55s steps(4) infinite; }
/* Szenen-Ende "Archivblatt": das Bild friert ein, bekommt einen
   warmen Kupferstich-Sepiaton, die Kamera tritt einen Schritt
   zurueck, ein Passepartout-Rahmen legt sich um die Szene und die
   Archivbeschriftung erscheint. Zeit zum Betrachten. */
.ev-scene.frozen .ev-stage * { animation-play-state: paused !important; }
.ev-scene.frozen .ev-grain { animation-play-state: paused; }
.ev-scene.frozen .ev-stage {
  filter: sepia(0.42) saturate(0.85) contrast(1.06) brightness(1.04);
  transition: filter 1.3s ease;
  animation: contemplate 5s ease-out forwards;
}
@keyframes contemplate { from { transform: scale(1); } to { transform: scale(0.972); } }
.ev-plate-frame {
  position: absolute; inset: 4vh 4vw;
  border: 1px solid rgba(239,231,212,0.55);
  box-shadow: 0 0 0 100vmax rgba(5,5,5,0.45), inset 0 0 46px rgba(0,0,0,0.4);
  opacity: 0;
  transition: opacity 1.4s ease 0.3s;
  z-index: 5; pointer-events: none;
}
.ev-plate-frame::after {
  content: ""; position: absolute; inset: 8px;
  border: 1px solid rgba(239,231,212,0.3);
}
.ev-scene.frozen .ev-plate-frame { opacity: 1; }
@keyframes grainJitter {
  0% { transform: translate(0,0); }
  25% { transform: translate(-2%,1.5%); }
  50% { transform: translate(1.5%,-2%); }
  75% { transform: translate(-1%,-1%); }
  100% { transform: translate(2%,1%); }
}

/* ============================================================
   SZENE 1: CAROLABRUECKE · 11.09.2024 · 02:59 Uhr
   Bruecke 120vw breit, Enden ausserhalb des Bildes.
   Bruch: beide Haelften (geclippte Kopien) kippen um ihre
   Pfeiler (28% / 73%) nach innen -> --v--. Das Truemmersegment
   stuerzt aus der Mitte in die Elbe.
   ============================================================ */
#ev-sz-carola .ev-fade { background: linear-gradient(180deg, #101923 0%, #28374a 55%, #33414d 100%); }
#ev-sz-carola.is-active .ev-cam { animation: camCarola 16.5s ease forwards; }
@keyframes camCarola { from { transform: scale(1.02); } to { transform: scale(1.09) translateY(1vh); } }
.ev-carola-moon {
  position: absolute; top: 10.5vh; right: 9vw;
  width: clamp(150px, 24vmin, 260px);
  opacity: 0.9;
  filter: drop-shadow(0 0 30px rgba(232,220,192,0.25));
  animation: moonDrift 13s ease-in-out infinite alternate;
}
@keyframes moonDrift { from { transform: translateY(0); } to { transform: translateY(1.2vh); } }
.ev-carola-world { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: 120vw; height: 100%; }
.ev-carola-water { position: absolute; left: -5vw; right: -5vw; bottom: 0; height: 22vh; background: #1b2933; z-index: 2; }
.ev-carola-water::before {
  content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 8vh;
  background: url('/assets/ereignisse/wellen.webp') repeat-x top center; background-size: auto 100%;
  opacity: 0.45;
  animation: waterBob 5s ease-in-out infinite;
}
@keyframes waterBob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(5px); } }
.ev-bridge-box { position: absolute; left: 0; bottom: 17vh; width: 100%; aspect-ratio: 1500 / 253; }
.ev-bridge-box > img.ev-deck { position: absolute; inset: 0; width: 100%; height: 100%; }
/* Drei Ebenen derselben Illustration (wie beim realen Einsturz):
   - outer: Aussendecks + BEIDE PfEILER bleiben statisch (Maske)
   - ev-mid-l / ev-mid-r: nur das Mittelfeld zwischen den Pfeilern,
     knickt an den Pfeilerkanten (29.2% / 71.8%) nach unten -> V
     mit Loch in der Mitte, Pfeiler drehen sich nicht mit. */
.ev-deck.ev-outer {
  -webkit-mask-image: linear-gradient(90deg, #000 0 29.2%, transparent 29.2% 71.8%, #000 71.8% 100%);
          mask-image: linear-gradient(90deg, #000 0 29.2%, transparent 29.2% 71.8%, #000 71.8% 100%);
  z-index: 2;
}
.ev-deck.ev-mid-l { clip-path: inset(0 49.7% 0 29%); transform-origin: 29.2% 55%; }
.ev-deck.ev-mid-r { clip-path: inset(0 28.2% 0 49.7%); transform-origin: 71.8% 55%; }
#ev-sz-carola.play .ev-deck.ev-mid-l { animation: tiltL 2s cubic-bezier(0.5, 0, 0.75, 0.4) forwards; }
#ev-sz-carola.play .ev-deck.ev-mid-r { animation: tiltR 2s cubic-bezier(0.5, 0, 0.75, 0.4) 0.12s forwards; }
@keyframes tiltL { to { transform: rotate(26deg) translateY(1.2vh); } }
@keyframes tiltR { to { transform: rotate(-26deg) translateY(1.2vh); } }
/* Truemmersegment stuerzt aus der Bruchstelle */
.ev-carola-segment {
  position: absolute; left: 40%; top: 12%; width: 21%;
  opacity: 0; z-index: 1;
  transform-origin: 40% 30%;
}
#ev-sz-carola.play .ev-carola-segment { opacity: 1; animation: segFall 1.25s cubic-bezier(0.45, 0, 0.85, 0.4) 0.25s forwards; }
@keyframes segFall { 0% { transform: none; } 100% { transform: translateY(21vh) rotate(-10deg); } }
.ev-lamp {
  position: absolute; top: 1%;
  width: 7px; height: 7px; margin-left: -3px;
  border-radius: 50%;
  background: #ffe9b0;
  box-shadow: 0 0 14px 5px rgba(255,225,160,0.55), 0 0 40px 14px rgba(255,215,140,0.18);
  opacity: 0;
  transition: opacity 1.6s ease;
}
#ev-sz-carola.lit .ev-lamp { opacity: 0.95; }
#ev-sz-carola.lightsout .ev-lamp { animation: lampDie 0.7s ease forwards; }
#ev-sz-carola.lightsout .ev-lamp:nth-of-type(odd) { animation-delay: 0.12s; }
@keyframes lampDie {
  0% { opacity: 0.95; } 25% { opacity: 0.1; } 40% { opacity: 0.8; }
  55% { opacity: 0.05; } 70% { opacity: 0.5; } 100% { opacity: 0; }
}
.ev-crow { position: absolute; top: -6%; width: 5%; opacity: 0; }
#ev-sz-carola.birds .ev-crow { animation: crowFly 2.3s ease-out forwards; }
#ev-sz-carola.birds .ev-crow:nth-of-type(2) { animation-delay: 0.1s; }
#ev-sz-carola.birds .ev-crow:nth-of-type(3) { animation-delay: 0.22s; }
#ev-sz-carola.birds .ev-crow:nth-of-type(4) { animation-delay: 0.08s; }
#ev-sz-carola.birds .ev-crow:nth-of-type(5) { animation-delay: 0.3s; }
@keyframes crowFly {
  0% { opacity: 0; transform: translate(0, 0) rotate(0deg) scale(0.9); }
  10% { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--fx, 10vw), -46vh) rotate(var(--fr, 8deg)) scale(1.15); }
}
/* Feuerwehrboot: Lichtkegel haengt am Scheinwerfer (rechts oben
   am Boot) und faehrt mit; erscheint zusammen mit dem Boot */
.ev-boat-wrap {
  position: absolute; bottom: 18vh; left: -32vw;
  width: clamp(190px, 26vw, 340px);
  z-index: 3;
}
#ev-sz-carola.boat .ev-boat-wrap { animation: boatIn 6s cubic-bezier(0.25, 0.6, 0.35, 1) forwards; }
@keyframes boatIn { from { transform: translateX(0); } to { transform: translateX(56vw); } }
.ev-boat-wrap img { width: 100%; display: block; animation: waterBob 3.4s ease-in-out infinite; }
.ev-boat-beam {
  position: absolute; left: 71%; top: 4%;
  width: 30vw; height: 8vw;
  transform-origin: 0% 25%;
  background: linear-gradient(90deg, rgba(255,240,200,0.32), rgba(255,240,200,0.05) 65%, transparent 85%);
  clip-path: polygon(0 15%, 100% 0, 100% 88%, 0 32%);
  opacity: 0;
  filter: blur(1px);
  transition: opacity 0.7s ease 0.5s;
}
#ev-sz-carola.boat .ev-boat-beam { opacity: 1; animation: beamHunt 3.2s ease-in-out 0.8s infinite alternate; }
@keyframes beamHunt { from { transform: rotate(-7deg); } to { transform: rotate(4deg); } }
#ev-sz-carola.play .ev-stage { animation: ev-quake 0.85s ease 0.1s 1; }
@keyframes ev-quake {
  0%,100% { transform: none; }
  15% { transform: translate(-7px, 4px) rotate(-0.25deg); }
  30% { transform: translate(6px, -5px) rotate(0.2deg); }
  45% { transform: translate(-5px, 3px); }
  60% { transform: translate(4px, -3px); }
  80% { transform: translate(-3px, 2px); }
}
.ev-carola-ripple {
  position: absolute; left: 50%; bottom: 18vh;
  width: 150px; height: 28px; margin-left: -75px;
  border: 2px solid rgba(207,224,232,0.8); border-radius: 50%;
  opacity: 0; z-index: 2;
}
#ev-sz-carola.splash .ev-carola-ripple { animation: rippleOut 1.8s ease-out forwards; }
#ev-sz-carola.splash .ev-carola-ripple:nth-of-type(2) { animation-delay: 0.3s; }
#ev-sz-carola.splash .ev-carola-ripple:nth-of-type(3) { animation-delay: 0.6s; }
@keyframes rippleOut { 0% { opacity: 0.85; transform: scale(0.25); } 100% { opacity: 0; transform: scale(2.7); } }
.ev-splash-drop { position: absolute; width: 5px; height: 5px; border-radius: 50%; background: #cfe0e8; opacity: 0; z-index: 2; }
#ev-sz-carola.splash .ev-splash-drop { animation: dropUp 1.05s ease-out forwards; }
@keyframes dropUp {
  0% { opacity: 0.95; transform: translate(0,0) scale(1); }
  100% { opacity: 0; transform: translate(var(--dx, 0px), var(--dy, -120px)) scale(0.4); }
}
.ev-carola-caption { bottom: 11.5vh; }

/* ============================================================
   SZENE 2: 13.-15. FEBRUAR 1945 (Gedenken)
   Reduziert: Sirene -> Feuerschein -> Asche -> Kerzen.
   ============================================================ */
#ev-sz-1945 .ev-fade { background: #0b0a09; }
#ev-sz-1945.is-active .ev-cam { animation: cam1945 16s ease forwards; }
@keyframes cam1945 { from { transform: scale(1.05); } to { transform: scale(1.13) translateY(-1vh); } }
.ev-s45-siren {
  position: absolute; top: 15vh; left: 50%; transform: translateX(-50%);
  font-family: 'Cutive Mono', monospace;
  font-size: clamp(0.85rem, 2.8vw, 1.2rem);
  letter-spacing: 0.3em; color: rgba(239,231,212,0.75);
  white-space: nowrap; opacity: 0;
}
#ev-sz-1945.play .ev-s45-siren { animation: sirenPulse 3.4s ease forwards; }
@keyframes sirenPulse {
  0% { opacity: 0; } 12% { opacity: 0.9; } 30% { opacity: 0.35; }
  45% { opacity: 0.9; } 75% { opacity: 0.5; } 100% { opacity: 0; }
}
.ev-s45-glow {
  position: absolute; left: 0; right: 0; bottom: 0; height: 58vh;
  background: radial-gradient(ellipse 120% 100% at 50% 105%,
    rgba(196,84,26,0.85) 0%, rgba(150,50,20,0.55) 35%,
    rgba(90,30,15,0.25) 60%, transparent 78%);
  opacity: 0;
  transition: opacity 2.4s ease;
}
#ev-sz-1945.glow .ev-s45-glow { opacity: 1; animation: fireFlicker 2.6s ease-in-out 2.4s infinite; }
@keyframes fireFlicker { 0%,100% { opacity: 1; } 35% { opacity: 0.92; } 60% { opacity: 0.97; } 80% { opacity: 0.9; } }
.ev-s45-skyline { position: absolute; left: 50%; bottom: 13vh; transform: translateX(-50%); width: min(1200px, 160vw); display: block; }
.ev-ash {
  position: absolute; top: -3vh;
  width: 3px; height: 3px; border-radius: 50%;
  background: rgba(230,220,200,0.7); opacity: 0;
  animation: ashFall linear forwards;
}
.ev-ash.ev-ember { background: rgba(240,140,60,0.85); }
@keyframes ashFall {
  0% { opacity: 0; transform: translate(0, 0); }
  8% { opacity: 0.9; }
  100% { opacity: 0; transform: translate(var(--drift, 30px), 108vh); }
}
.ev-s45-candles {
  position: absolute; left: 50%; bottom: 10.5vh; transform: translateX(-50%);
  display: flex; align-items: flex-end; gap: clamp(16px, 5vw, 48px);
  z-index: 3;
}
.ev-candle { position: relative; opacity: 0; transition: opacity 1.2s ease; }
#ev-sz-1945.candles .ev-candle { opacity: 1; }
.ev-candle img { display: block; width: clamp(28px, 4.4vw, 46px); }
.ev-candle:nth-child(2) img { width: clamp(32px, 5vw, 52px); }
.ev-candle:nth-child(4) img { width: clamp(30px, 4.7vw, 49px); }
.ev-candle::before {
  content: ""; position: absolute; top: -6%; left: 50%;
  width: 240%; aspect-ratio: 1; transform: translateX(-50%);
  background: radial-gradient(circle, rgba(244,217,122,0.4) 0%, rgba(244,217,122,0.12) 40%, transparent 70%);
  animation: glowPulse 1.8s ease-in-out infinite;
}
.ev-candle:nth-child(2)::before { animation-delay: 0.4s; }
.ev-candle:nth-child(3)::before { animation-delay: 0.8s; }
.ev-candle:nth-child(4)::before { animation-delay: 0.25s; }
.ev-candle:nth-child(5)::before { animation-delay: 0.6s; }
@keyframes glowPulse {
  0%,100% { opacity: 0.75; transform: translateX(-50%) scale(1); }
  50% { opacity: 1; transform: translateX(-50%) scale(1.12); }
}
.ev-s45-caption { bottom: 26vh; }
.ev-s45-caption .ev-hand { font-family: 'Caveat', cursive; font-size: clamp(2rem, 7vw, 3rem); color: #efe7d4; }
.ev-s45-caption .ev-sub { font-family: 'IBM Plex Mono', monospace; font-size: clamp(0.72rem, 1.8vw, 0.95rem); letter-spacing: 0.26em; text-transform: uppercase; color: rgba(239,231,212,0.55); margin-top: 0.4rem; }

/* ============================================================
   SZENE 3: JAHRHUNDERTFLUT · 17.08.2002 · Pegel 9,40 m
   ============================================================ */
#ev-sz-flut .ev-fade { background: linear-gradient(180deg, #37342b 0%, #23262a 55%, #171a1d 100%); }
#ev-sz-flut.is-active .ev-cam { animation: camFlut 16.5s ease forwards; }
@keyframes camFlut { from { transform: scale(1); } to { transform: scale(1.06); } }
.ev-storm-clouds {
  position: absolute; top: -7vh; left: -10vw;
  width: 128vw; opacity: 0; z-index: 1;
  transition: opacity 2.6s ease;
}
.ev-storm-clouds.ev-c2 { left: auto; right: -12vw; top: -9vh; transform: scaleX(-1); width: 110vw; }
#ev-sz-flut.play .ev-storm-clouds { opacity: 0.95; animation: cloudDrift 13s linear forwards; }
#ev-sz-flut.play .ev-storm-clouds.ev-c2 { animation-name: cloudDrift2; }
@keyframes cloudDrift { from { transform: translateX(0); } to { transform: translateX(4vw); } }
@keyframes cloudDrift2 { from { transform: scaleX(-1) translateX(0); } to { transform: scaleX(-1) translateX(5vw); } }
/* Einzelne Regentropfen (per JS erzeugt): schmale Striche, die
   leicht schraeg von oben durchfallen, jeder mit eigener Laenge,
   Geschwindigkeit und Verzoegerung */
.ev-raindrop {
  position: absolute; top: -6vh;
  width: 2px; height: 14px;
  border-radius: 1px;
  background: linear-gradient(to bottom, rgba(205,218,228,0), rgba(205,218,228,0.6));
  opacity: 0;
  z-index: 3; pointer-events: none;
  animation: dropFall linear infinite;
}
@keyframes dropFall {
  0% { opacity: 0; transform: translate(0, 0) rotate(7deg); }
  6% { opacity: 0.75; }
  100% { opacity: 0.55; transform: translate(-7vh, 112vh) rotate(7deg); }
}
.ev-bolt { position: absolute; inset: 0; background: #eef2f0; opacity: 0; z-index: 3; pointer-events: none; }
#ev-sz-flut.bolt1 .ev-bolt { animation: boltFlash 0.65s ease-out; }
@keyframes boltFlash { 0% { opacity: 0; } 8% { opacity: 0.85; } 18% { opacity: 0.1; } 30% { opacity: 0.6; } 100% { opacity: 0; } }
.ev-hw-schild {
  position: absolute; left: 9%; bottom: 1vh;
  height: 34vh; z-index: 1;
  transform: rotate(-6deg);
}
.ev-sandwall {
  position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
  width: min(820px, 98vw); z-index: 1;
}
.ev-flood {
  position: absolute; left: 0; right: 0; bottom: 0; height: 0; z-index: 2;
  transition: height 5.8s cubic-bezier(0.35, 0.5, 0.35, 1);
}
#ev-sz-flut.rise .ev-flood { height: 64vh; }
.ev-flood-body {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(64,82,92,0.9), rgba(36,48,58,0.96) 55%);
  animation: waterBob 4.5s ease-in-out infinite;
}
.ev-flood-body::before {
  content: ""; position: absolute; left: 0; right: 0; top: -3.5vh; height: 7vh;
  background: url('/assets/ereignisse/wellen.webp') repeat-x top center; background-size: auto 100%;
  filter: brightness(1.9);
  opacity: 0.7;
}
.ev-flood-body::after {
  content: ""; position: absolute; inset: 3vh 0 0 0;
  background: url('/assets/ereignisse/wellen.webp') repeat; background-size: 34vw auto;
  opacity: 0.12; filter: brightness(0.3);
}
/* Treibgut: zwei Faesser + Planke reiten auf der Wasserkante */
.ev-drift { position: absolute; top: 0; opacity: 0; z-index: 2; }
.ev-drift img { display: block; width: 100%; animation: driftBob 3.8s ease-in-out infinite; }
@keyframes driftBob {
  0%,100% { transform: translateY(-56%) rotate(-2deg); }
  50% { transform: translateY(-48%) rotate(2.5deg); }
}
.ev-drift.ev-d-fass { left: -18%; width: clamp(100px, 15vw, 180px); }
.ev-drift.ev-d-fass img { animation-duration: 3.1s; }
.ev-drift.ev-d-fass2 { left: 108%; width: clamp(80px, 11vw, 140px); }
.ev-drift.ev-d-fass2 img { animation-name: driftBobM; animation-duration: 3.6s; }
@keyframes driftBobM {
  0%,100% { transform: translateY(-52%) rotate(2deg) scaleX(-1); }
  50% { transform: translateY(-45%) rotate(-2.5deg) scaleX(-1); }
}
.ev-drift.ev-d-planke { left: 34%; width: clamp(130px, 19vw, 230px); }
.ev-drift.ev-d-planke img { animation-duration: 4.4s; }
#ev-sz-flut.drifting .ev-drift { opacity: 1; transition: opacity 0.9s ease; }
#ev-sz-flut.drifting .ev-d-fass { animation: driftR 9s linear forwards; }
#ev-sz-flut.drifting .ev-d-fass2 { animation: driftL 11s linear forwards; }
#ev-sz-flut.drifting .ev-d-planke { animation: driftR 12s linear 0.6s forwards; }
@keyframes driftL { from { transform: translateX(0); } to { transform: translateX(-130vw); } }
@keyframes driftR { from { transform: translateX(0); } to { transform: translateX(60vw); } }
.ev-pegel-box {
  position: absolute; right: 8%; bottom: 0; height: 86vh; z-index: 3;
  transform: translateY(103%);
  transition: transform 2.2s cubic-bezier(0.2, 0.8, 0.3, 1);
}
#ev-sz-flut.play .ev-pegel-box { transform: translateY(0); }
.ev-pegel-box img { height: 100%; display: block; }
.ev-pegel-mark {
  position: absolute; top: 16%; left: -12px; right: -12px; height: 4px;
  background: #b82727;
  transform: scaleX(0); opacity: 0;
}
#ev-sz-flut.mark .ev-pegel-mark { transform: scaleX(1); opacity: 1; transition: transform 0.3s cubic-bezier(0.2,1.5,0.4,1), opacity 0.2s; }
.ev-pegel-label {
  position: absolute; top: 12.5%; right: calc(100% + 14px);
  font-family: 'Special Elite', cursive; font-size: clamp(1.15rem, 3.2vw, 1.7rem);
  color: #b82727;
  background: rgba(239,231,212,0.92);
  border: 2px solid #b82727;
  padding: 0.25rem 0.55rem;
  white-space: nowrap;
  transform: rotate(-3deg) scale(1.5); opacity: 0;
}
#ev-sz-flut.mark .ev-pegel-label { transform: rotate(-3deg) scale(1); opacity: 1; transition: all 0.25s cubic-bezier(0.2,1.6,0.4,1) 0.15s; }
.ev-flut-caption { bottom: 12vh; }

/* ============================================================
   SZENE 4: GRUENES GEWOELBE · 25.11.2019 · 04:56 Uhr
   ============================================================ */
#ev-sz-gewoelbe .ev-fade { background: #050505; }
#ev-sz-gewoelbe.is-active .ev-fade { animation: powerCut 0.9s ease forwards; }
@keyframes powerCut {
  0% { opacity: 0; } 18% { opacity: 0.85; } 30% { opacity: 0.25; }
  48% { opacity: 0.95; } 58% { opacity: 0.4; } 75% { opacity: 1; } 100% { opacity: 1; }
}
.ev-gw-moon { position: absolute; top: 10.5vh; right: 7vw; width: clamp(130px, 22vmin, 230px); opacity: 0.11; z-index: 4; }
.ev-gw-intro {
  position: absolute; top: 16vh; left: 50%; transform: translateX(-50%);
  font-family: 'Cutive Mono', monospace;
  font-size: clamp(0.82rem, 2.7vw, 1.15rem);
  letter-spacing: 0.28em; color: rgba(239,231,212,0.72);
  white-space: nowrap; opacity: 0; z-index: 2;
}
#ev-sz-gewoelbe.play .ev-gw-intro { animation: introFade 3s ease forwards; }
@keyframes introFade { 0% { opacity: 0; } 15% { opacity: 0.9; } 70% { opacity: 0.75; } 100% { opacity: 0; } }
.ev-gw-fenster {
  position: absolute; left: 11%; top: 13%;
  width: clamp(180px, 24vw, 300px); z-index: 1;
}
.ev-vitrine-box {
  position: absolute; left: 50%; bottom: 5vh; transform: translateX(-50%);
  width: min(430px, 76vw); z-index: 1;
}
.ev-vitrine-box > img.ev-case { width: 100%; display: block; }
.ev-juwel { position: absolute; transition: opacity 0.05s; }
.ev-juwel.ev-epaulette { left: 22%; top: 16%; width: 28%; }
.ev-juwel.ev-stern { left: 51%; top: 27%; width: 30%; }
#ev-sz-gewoelbe.stolen .ev-juwel { opacity: 0; }
.ev-gw-crack { position: absolute; left: 18%; top: 8%; width: 64%; height: 56%; opacity: 0; }
#ev-sz-gewoelbe.crack .ev-gw-crack { animation: crackIn 0.4s ease forwards; }
@keyframes crackIn { 0% { opacity: 0; transform: scale(0.6); } 60% { opacity: 1; } 100% { opacity: 0.9; transform: scale(1); } }
.ev-gw-blink { position: absolute; inset: 0; background: #e9e5da; opacity: 0; z-index: 4; pointer-events: none; }
#ev-sz-gewoelbe.blink .ev-gw-blink { animation: blinkTwice 0.7s linear; }
@keyframes blinkTwice { 0%,20%,42%,100% { opacity: 0; } 9% { opacity: 0.9; } 55% { opacity: 0.95; } }
.ev-torch {
  position: absolute; inset: 0; z-index: 3; opacity: 0;
  transition: opacity 0.5s ease;
  background: radial-gradient(circle 28vmin at var(--tx, 50%) var(--ty, 130%),
    rgba(0,0,0,0) 0%, rgba(4,4,4,0.5) 52%, rgba(3,3,3,0.995) 76%);
}
#ev-sz-gewoelbe.ev-torch-on .ev-torch { opacity: 1; }
.ev-gw-caption { bottom: 13vh; }
/* Schlusszeile als lesbarer Gold-Zettel statt Handschrift im Dunkeln */
.ev-gw-note {
  display: inline-block;
  margin-top: 1rem;
  background: #f4d97a;
  color: #1a1613;
  font-family: 'Caveat', cursive;
  font-size: clamp(1.25rem, 4.2vw, 1.8rem);
  line-height: 1.2;
  padding: 0.5rem 1.1rem 0.6rem;
  border: 1px solid #b08c3a;
  transform: rotate(1.5deg);
  box-shadow: 3px 4px 0 rgba(0,0,0,0.45);
}

/* ============================================================
   SZENE 5: WEIHE DER FRAUENKIRCHE · 30.10.2005
   ============================================================ */
#ev-sz-kirche .ev-fade { background: #16110a; }
#ev-sz-kirche.is-active .ev-cam { animation: camKirche 16s ease forwards; }
@keyframes camKirche { from { transform: scale(1.02); } to { transform: scale(1.09) translateY(-1vh); } }
.ev-fk-dawn {
  position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
  width: 160vmax; height: 90vh;
  background: radial-gradient(ellipse 50% 75% at 50% 100%,
    rgba(244,217,122,0.5) 0%, rgba(200,160,70,0.28) 40%, rgba(140,105,45,0.12) 62%, transparent 80%);
  opacity: 0; transition: opacity 3s ease;
}
#ev-sz-kirche.dawn .ev-fk-dawn { opacity: 1; }
.ev-fk-box { position: absolute; left: 50%; bottom: 12vh; transform: translateX(-50%); width: min(500px, 80vw); z-index: 2; }
.ev-fk-box img.ev-kirchenbild {
  width: 100%; display: block;
  clip-path: inset(100% 0 0 0);
  filter: brightness(0.75);
}
#ev-sz-kirche.build .ev-fk-box img.ev-kirchenbild {
  clip-path: inset(0 0 0 0);
  filter: brightness(1.05) drop-shadow(0 0 26px rgba(244,217,122,0.25));
  transition: clip-path 4s cubic-bezier(0.3, 0.2, 0.3, 1), filter 4s ease;
}
/* Glocke: vollstaendig unterhalb der Letterbox sichtbar */
.ev-fk-bell {
  position: absolute; top: 9.5vh; right: 5vw;
  width: clamp(140px, 24vmin, 250px);
  transform-origin: 50% 4%;
  opacity: 0; transition: opacity 1.2s ease;
  z-index: 3;
}
#ev-sz-kirche.bells .ev-fk-bell { opacity: 0.95; animation: bellSwing 2.6s ease-in-out infinite; }
@keyframes bellSwing { 0%,100% { transform: rotate(-7deg); } 50% { transform: rotate(7deg); } }
.ev-dove { position: absolute; bottom: 28vh; width: clamp(70px, 10.5vw, 125px); opacity: 0; z-index: 2; }
#ev-sz-kirche.doves .ev-dove { animation: doveUp 3.6s ease-out forwards; }
#ev-sz-kirche.doves .ev-dove:nth-of-type(2) { animation-delay: 0.35s; }
#ev-sz-kirche.doves .ev-dove:nth-of-type(3) { animation-delay: 0.7s; }
@keyframes doveUp {
  0% { opacity: 0; transform: translate(0, 0) rotate(0deg) scale(0.85); }
  10% { opacity: 1; }
  95% { opacity: 0.9; }
  100% { opacity: 0; transform: translate(var(--dxv, 8vw), -52vh) rotate(var(--drv, -6deg)) scale(1.1); }
}
.ev-fk-crowd {
  position: absolute; bottom: -8vh; left: 50%;
  width: 118vw; z-index: 3;
  transform: translateX(-50%) translateY(4vh);
  opacity: 0;
  transition: opacity 2.2s ease, transform 2.2s ease;
}
#ev-sz-kirche.dawn .ev-fk-crowd { opacity: 0.96; transform: translateX(-50%) translateY(0); }
.ev-golddust {
  position: absolute; bottom: -2vh;
  width: 3px; height: 3px; border-radius: 50%;
  background: rgba(244,217,122,0.85); opacity: 0;
  animation: dustRise linear forwards;
}
@keyframes dustRise {
  0% { opacity: 0; transform: translate(0,0); }
  10% { opacity: 0.9; }
  100% { opacity: 0; transform: translate(var(--drift, 20px), -95vh); }
}
.ev-fk-caption { bottom: 27vh; }
.ev-fk-caption .ev-plaque {
  display: inline-block;
  background: rgba(12, 9, 4, 0.72);
  border: 1px solid rgba(176, 140, 58, 0.8);
  padding: 0.7rem 1.5rem 0.85rem;
  backdrop-filter: blur(2px);
}
.ev-fk-caption .ev-hand { font-family: 'Caveat', cursive; font-size: clamp(2.1rem, 7.5vw, 3.2rem); color: #f4d97a; text-shadow: 0 2px 10px rgba(0,0,0,0.8); }
.ev-fk-caption .ev-sub { font-family: 'IBM Plex Mono', monospace; font-size: clamp(0.72rem, 1.8vw, 0.95rem); letter-spacing: 0.26em; text-transform: uppercase; color: rgba(244,217,122,0.85); margin-top: 0.45rem; }

@media (prefers-reduced-motion: reduce) {
  .ev-scene * { animation: none !important; transition: none !important; }
}

/* Iris-Blende fuer den Uebergang Anzeiger -> Szene */
#ev-iris {
  position: fixed;
  inset: 0;
  background: #070707;
  z-index: 2000;
  pointer-events: none;
}

/* ============================================================
   Responsive Nacharbeiten fuer die Ereignis-Szenen
   ------------------------------------------------------------
   Handy (Portrait): Die Bruecke wird deutlich breiter skaliert
   (230vw statt 120vw), damit Deck, Laternen und der V-Bruch
   gross im Bild sind. Die Pfeiler liegen dann knapp ausserhalb
   der Bildschirmkanten, der sichtbare Mittelteil bricht formatfuellend.
   Ausserdem duerfen die langen einzeiligen Textzeilen (Archiv-
   beschriftung, Sirenen- und Stromausfall-Zeile) umbrechen,
   statt links und rechts aus dem Bild zu laufen.
   ============================================================ */
@media (max-width: 720px) {
  /* Carolabruecke: Buehne nach oben Richtung Bildmitte ruecken
     (Wasser 30vh statt 22vh, Bruecke auf 26vh angehoben) und die
     Bruecke nochmal deutlich groesser (300vw). Deck liegt damit
     etwa auf 40-45vh, das Boot faehrt frei ueber der Caption. */
  .ev-carola-world { width: 300vw; }
  .ev-carola-water { height: 30vh; }
  .ev-bridge-box { bottom: 26vh; }
  .ev-carola-ripple { bottom: 29vh; }
  /* Menge deutlich breiter und ueber den unteren Letterbox-Balken
     (8vh) gehoben, der sonst ihre untere Haelfte verdeckt */
  .ev-fk-crowd { width: 235vw; bottom: 5vh; }
  .ev-fk-bell { right: 3vw; }
  /* Welt ist 300vw breit -> linke Weltkante bei -100vw im Viewport.
     Boot-Startposition so verschoben, dass es von links einfaehrt. */
  .ev-boat-wrap { width: clamp(150px, 38vw, 220px); bottom: 27vh; left: 55vw; }
  .ev-carola-moon { width: clamp(110px, 30vw, 160px); }
  /* Gedenken: Silhouette komplett ins Bild (volle Breite statt
     160vw, die links/rechts weit ueber den Rand hinausliefen) */
  .ev-s45-skyline { width: 100vw; }

  /* Flut: Pegellatte und Schild deutlich verkleinern, sonst
     dominieren sie den schmalen Screen und wirken gequetscht */
  .ev-pegel-box { height: 50vh; right: 5%; }
  .ev-hw-schild { height: 20vh; left: 5%; bottom: 2vh; }
  .ev-sandwall { width: 96vw; }

  /* Gruenes Gewoelbe: Fenster kleiner und unter die Archiv-
     beschriftung, Vitrine kompakter, Caption tiefer, damit die
     Vitrine nicht komplett verdeckt wird */
  .ev-gw-fenster { width: clamp(120px, 30vw, 180px); top: 18%; left: 8%; }
  .ev-vitrine-box { width: min(340px, 64vw); bottom: 8vh; }
  .ev-gw-caption { bottom: 9vh; }

  .ev-s45-siren,
  .ev-gw-intro {
    white-space: normal;
    max-width: 84vw;
    text-align: center;
    letter-spacing: 0.16em;
    line-height: 1.6;
  }
}
/* Tablet: Zwischenstufe, Pfeiler bleiben im Bild */
@media (min-width: 721px) and (max-width: 1100px) {
  .ev-carola-world { width: 155vw; }
  /* Weltkante bei -27.5vw -> Boot-Start entsprechend verschoben */
  .ev-boat-wrap { left: -17vw; }
}