/* SV Süssenbach – Baustellenseite */
:root { --red: #d10a10; --red-dark: #9e0408; --black: #121214; --white: #fff; --ease: cubic-bezier(.2,.8,.2,1); }
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; min-height: 100svh; color: #fff; background: var(--black);
  font-family: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  line-height: 1.5; overflow-x: hidden; display: flex; align-items: flex-start; justify-content: center;
}

/* Hintergrund */
.bg { position: fixed; inset: 0; z-index: 0; overflow: hidden; }
#bg { position: absolute; inset: 0; width: 100%; height: 100%; }
.diag {
  position: absolute; inset: -30% -20% -30% 50%; background: linear-gradient(135deg, var(--red-dark), var(--red));
  transform: skewX(-16deg) translateX(100%); opacity: .95;
  animation: diagIn 1.4s cubic-bezier(.76,0,.24,1) .2s forwards, diagBreath 14s ease-in-out 2s infinite alternate;
}
@keyframes diagIn { to { transform: skewX(-16deg) translateX(0); } }
@keyframes diagBreath { from { translate: 0 0; } to { translate: 3% 0; } }

/* Bühne */
.stage { position: relative; z-index: 1; text-align: center; padding: 28px 20px 22px; width: min(100%, 820px); display: flex; flex-direction: column; align-items: center; margin: auto; }
.logo-wrap { position: relative; width: min(50vw, 250px); perspective: 1000px; margin-bottom: 14px; }
.logo-wrap picture { display: block; animation: logoIn 1.3s var(--ease) .7s both, floaty 6s ease-in-out 2s infinite; transition: transform .15s ease-out; transform-style: preserve-3d; }
.logo-wrap img { width: 100%; height: auto; display: block; filter: drop-shadow(0 26px 36px rgba(0,0,0,.55)); }
@keyframes logoIn { 0% { opacity: 0; transform: scale(.3) rotate(-40deg) translateY(80px); } 60% { opacity: 1; transform: scale(1.08) rotate(5deg); } 100% { opacity: 1; transform: none; } }
@keyframes floaty { 0%,100% { translate: 0 0; } 50% { translate: 0 -10px; } }
.shine { position: absolute; inset: 0; border-radius: 50%; pointer-events: none; mix-blend-mode: screen; opacity: 0;
  background: linear-gradient(115deg, transparent 38%, rgba(255,255,255,.6) 50%, transparent 62%); background-size: 300% 100%;
  animation: shine 2s ease-in-out 1.9s 1, shineLoop 8s ease-in-out 6s infinite; }
@keyframes shine { 0% { opacity: 1; background-position: 120% 0; } 100% { opacity: 1; background-position: -120% 0; } }
@keyframes shineLoop { 0%,80% { opacity: 0; background-position: 120% 0; } 90% { opacity: 1; } 100% { opacity: 0; background-position: -120% 0; } }

.kicker { display: inline-flex; align-items: center; gap: 10px; text-transform: uppercase; letter-spacing: .24em; font-size: .78rem; font-weight: 700; opacity: 0; animation: fadeUp .8s var(--ease) 1.3s forwards; padding: 7px 16px; border: 1.5px solid rgba(255,255,255,.4); border-radius: 999px; margin: 0 0 14px; }
.blink { width: 9px; height: 9px; border-radius: 50%; background: #ff3b3b; box-shadow: 0 0 0 0 rgba(255,59,59,.7); animation: pulse 1.6s infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(255,59,59,.7); } 70% { box-shadow: 0 0 0 10px rgba(255,59,59,0); } 100% { box-shadow: 0 0 0 0 rgba(255,59,59,0); } }

h1 { font-size: clamp(2.3rem, 7vw, 4.6rem); line-height: 1; text-transform: uppercase; letter-spacing: -.02em; margin: 0 0 16px; font-weight: 900; }
h1 .w { display: inline-block; opacity: 0; transform: translateY(40px) rotate(3deg); animation: wordIn .8s var(--ease) forwards; }
h1 .w:nth-child(1) { animation-delay: 1.4s; } h1 .w:nth-child(2) { animation-delay: 1.5s; } h1 .w:nth-child(3) { animation-delay: 1.6s; } h1 .w:nth-child(4) { animation-delay: 1.75s; }
h1 .red { color: #fff; text-shadow: 0 0 40px rgba(255,255,255,.35); position: relative; }
h1 .red::after { content: ""; position: absolute; left: 0; right: 0; bottom: .02em; height: .12em; background: #fff; transform: scaleX(0); transform-origin: left; animation: under .6s var(--ease) 2.4s forwards; }
@keyframes wordIn { to { opacity: 1; transform: none; } }
@keyframes under { to { transform: scaleX(1); } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.sub { font-size: clamp(1rem, 2.2vw, 1.2rem); max-width: 52ch; margin: 0 0 22px; opacity: 0; animation: fadeUp .9s var(--ease) 2s forwards; color: rgba(255,255,255,.9); }

/* Laufbahn */
.track { width: min(100%, 400px); opacity: 0; animation: fadeUp 1s var(--ease) 2.3s forwards; margin-bottom: 6px; }
.track-svg { width: 100%; height: auto; overflow: visible; }
.lane-outer { fill: none; stroke: rgba(255,255,255,.14); stroke-width: 34; stroke-linejoin: round; }
.lane-line { fill: none; stroke: rgba(255,255,255,.55); stroke-width: 2; stroke-dasharray: 14 12; animation: dash 6s linear infinite; }
@keyframes dash { to { stroke-dashoffset: -260; } }
.runner { fill: #fff; filter: drop-shadow(0 0 10px rgba(255,255,255,.9)); }
.runner-2 { fill: #ffb3b3; opacity: .85; filter: drop-shadow(0 0 8px rgba(255,120,120,.9)); }
.lap { font-size: 30px; font-weight: 800; fill: #fff; font-variant-numeric: tabular-nums; letter-spacing: .04em; }

/* Abteilungen */
.depts { list-style: none; padding: 0; margin: 6px 0 18px; display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }
.depts li { opacity: 0; animation: fadeUp .8s var(--ease) forwards; }
.depts li:nth-child(1) { animation-delay: 2.6s; } .depts li:nth-child(2) { animation-delay: 2.7s; } .depts li:nth-child(3) { animation-delay: 2.8s; } .depts li:nth-child(4) { animation-delay: 2.9s; } .depts li:nth-child(5) { animation-delay: 3s; }
.depts img { height: 74px; width: auto; filter: drop-shadow(0 10px 16px rgba(0,0,0,.5)); transition: transform .4s var(--ease); animation: floaty 5s ease-in-out infinite; }
.depts li:nth-child(2n) img { animation-delay: -2.5s; }
.depts li:hover img { transform: scale(1.1) rotate(-3deg); }
.foot { font-size: .85rem; opacity: 0; animation: fadeUp 1s 3.2s forwards; color: rgba(255,255,255,.7); }

@media (max-width: 520px) { .depts img { height: 64px; } .lane-outer { stroke-width: 28; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; }
  .diag { transform: skewX(-16deg); } h1 .w, .kicker, .sub, .track, .depts li, .foot { opacity: 1; transform: none; }
  #bg { display: none; }
}