/* ============================================================================
   Bogenfreunde Wolterdingen e.V. — Variante 2 „Nachtvisier“
   Eigenständiges Designsystem (bewusst KEINE Übernahme der v1-„Ziel“-Richtlinien)
   Dark + ein Laser-Lime-Akzent · Space Grotesk + Inter · Visier-/Flugbahn-Motive
   Statisch, kein Framework. Respektiert prefers-reduced-motion.
   ============================================================================ */

/* ---- 1. Tokens ----------------------------------------------------------- */
:root{
  /* Fläche */
  --bg:        #0B0E0C;   /* nahtschwarz, kühler Grünstich */
  --bg-2:      #11150F;   /* Panel */
  --bg-3:      #161B13;   /* Panel gehoben */
  --ink:       #F4F3EC;   /* Off-White */
  --ink-dim:   #C9CDBF;   /* abgedunkelte Schrift */
  --muted:     #8A9084;   /* Neutralgrau-grün */
  --line:      rgba(244,243,236,.13);
  --line-2:    rgba(244,243,236,.22);

  /* Ein einziger Akzent */
  --laser:     #D6FF3B;   /* Laser-Lime: Ziel, CTA, Bewegung */
  --laser-ink: #0B0E0C;   /* Text auf Laser */
  --laser-soft:rgba(214,255,59,.14);

  /* Semantisches Signal (NUR Warnungen: kein Leihmaterial, Sicherheit) */
  --warn:      #FF7A2E;
  --warn-soft: rgba(255,122,46,.14);

  /* Typo */
  --f-disp: "Space Grotesk", system-ui, sans-serif;
  --f-body: "Inter", system-ui, -apple-system, sans-serif;
  --f-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Maße */
  --wrap: 1240px;
  --pad:  clamp(1.15rem, 4vw, 2.4rem);
  --r-sm: 3px;
  --r:    5px;
  --r-lg: 10px;

  --shadow: 0 18px 40px -24px rgba(0,0,0,.75);
  --ease:   cubic-bezier(.22,.61,.36,1);
  --ease-2: cubic-bezier(.5,0,.1,1);

  --nav-h: 72px;
}

/* ---- 2. Reset / Base ----------------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }
*{ margin:0; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--f-body);
  font-size:16px;
  line-height:1.62;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
/* Marquee-Ticker & volle Breite: kein horizontaler Seiten-Scroll */
html, body{ overflow-x:hidden; }
img{ display:block; max-width:100%; height:auto; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:none; cursor:pointer; }
ul,ol{ list-style:none; padding:0; }
::selection{ background:var(--laser); color:var(--laser-ink); }

:focus-visible{
  outline:2px solid var(--laser);
  outline-offset:3px;
  border-radius:var(--r-sm);
}
/* dezent sichtbarer Scrollbar-Deckel (keine Kicker-Kitsch) */
body{ scrollbar-color: #2a3026 transparent; }

/* ---- 3. Layout ----------------------------------------------------------- */
.skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--laser); color:var(--laser-ink);
  padding:.6rem 1.1rem; border-radius:0 0 var(--r) 0; font-weight:600;
}
.skip:focus-visible{ left:0; }

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--pad); }
.section{ padding-block:clamp(4.4rem, 11vh, 8rem); position:relative; }
.section--tight{ padding-block:clamp(3rem, 8vh, 5rem); }
.band{ background:var(--bg-2); border-block:1px solid var(--line); }
.hairline{ height:1px; background:var(--line); border:0; }

/* ---- 4. Typo-Helfer ------------------------------------------------------ */
.kicker{
  font-family:var(--f-mono);
  font-size:.72rem;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--muted);
  display:inline-flex;
  align-items:center;
  gap:.7em;
}
.kicker::before{
  content:"";
  width:9px;height:9px;
  background:var(--laser);
  flex:0 0 auto;
  transform:rotate(45deg);
  box-shadow:0 0 0 3px var(--laser-soft);
}
.kicker--warn{ color:var(--warn); }
.kicker--warn::before{ background:var(--warn); box-shadow:0 0 0 3px var(--warn-soft); }

.h1, .h2, .h3{
  font-family:var(--f-disp);
  font-weight:700;
  line-height:.98;
  letter-spacing:-.02em;
  color:var(--ink);
  text-wrap:balance;
}
.h1{ font-size:clamp(2.9rem, 8.2vw, 6.4rem); }
.h2{ font-size:clamp(2rem, 5vw, 3.6rem); }
.h3{ font-size:clamp(1.35rem, 2.6vw, 1.85rem); letter-spacing:-.015em; }

.lead{ font-size:clamp(1.05rem, 1.6vw, 1.28rem); color:var(--ink-dim); max-width:60ch; line-height:1.58; }
.lead b, .lead strong{ color:var(--ink); font-weight:600; }
.dim{ color:var(--muted); }
.tiny{ font-size:.86rem; color:var(--muted); }
.hl{ color:var(--laser); }
.mark{ font-family:var(--f-mono); font-weight:600; letter-spacing:.02em; }

/* ---- 5. Buttons ---------------------------------------------------------- */
.btn{
  --h:56px;
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.7em;
  min-height:var(--h);
  padding:.9rem 1.5rem;
  font-family:var(--f-disp);
  font-weight:600;
  font-size:.98rem;
  letter-spacing:.01em;
  border-radius:var(--r);
  border:1px solid transparent;
  white-space:nowrap;
  transition:transform .28s var(--ease), background .28s var(--ease),
             color .28s var(--ease), border-color .28s var(--ease), box-shadow .28s var(--ease);
  overflow:hidden;
  isolation:isolate;
}
.btn .arr{ transition:transform .3s var(--ease); }
.btn:hover .arr{ transform:translateX(4px); }

.btn--laser{
  background:var(--laser);
  color:var(--laser-ink);
  box-shadow:0 0 0 0 var(--laser-soft);
}
.btn--laser:hover{ transform:translateY(-2px); box-shadow:0 14px 30px -14px var(--laser); }
.btn--laser:active{ transform:translateY(0); }

.btn--ghost{
  border-color:var(--line-2);
  color:var(--ink);
  background:transparent;
}
.btn--ghost:hover{ border-color:var(--ink); background:rgba(244,243,236,.05); transform:translateY(-2px); }

.btn--warn{ border-color:var(--warn); color:var(--warn); }
.btn--warn:hover{ background:var(--warn); color:var(--laser-ink); border-color:var(--warn); }

.btn--sm{ --h:46px; padding:.65rem 1.15rem; font-size:.9rem; }
.btn--block{ width:100%; }

/* flächige „Zug“-Sweep auf Hover (subtile Bewegung, kein Glow-Kitsch) */
.btn--laser::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(105deg, transparent 30%, rgba(255,255,255,.55) 50%, transparent 70%);
  transform:translateX(-130%);
  transition:transform .7s var(--ease);
  z-index:-1;
}
.btn--laser:hover::after{ transform:translateX(130%); }

/* ---- 6. Nav -------------------------------------------------------------- */
.nav{
  position:fixed;
  top:0; left:0; right:0;
  z-index:60;
  height:var(--nav-h);
  display:flex;
  align-items:center;
  transition:background .35s var(--ease), border-color .35s var(--ease), backdrop-filter .35s var(--ease);
  border-bottom:1px solid transparent;
}
.nav.is-scrolled{
  background:rgba(11,14,12,.82);
  -webkit-backdrop-filter:blur(12px) saturate(1.2);
  backdrop-filter:blur(12px) saturate(1.2);
  border-bottom-color:var(--line);
}
.nav__inner{
  width:100%; max-width:var(--wrap);
  margin-inline:auto; padding-inline:var(--pad);
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
}
.brand{ display:flex; align-items:center; gap:.7rem; }
.brand img{
  width:34px; height:34px;
  filter:grayscale(1) contrast(1.1) brightness(1.6);
  transition:filter .3s var(--ease);
}
.brand:hover img{ filter:grayscale(0) contrast(1) brightness(1.1); }
.brand__name{
  font-family:var(--f-disp); font-weight:700;
  font-size:.98rem; line-height:1.02; letter-spacing:.01em;
  display:flex; flex-direction:column;
}
.brand__name small{ font-family:var(--f-mono); font-weight:500; font-size:.58rem; letter-spacing:.22em; text-transform:uppercase; color:var(--muted); margin-top:2px; }

.nav__links{ display:flex; align-items:center; gap:clamp(.4rem,1.4vw,1.35rem); }
.nav__links a:not(.btn){
  font-size:.92rem; font-weight:500; color:var(--ink-dim);
  padding:.5rem .35rem; position:relative;
  transition:color .25s var(--ease);
}
.nav__links a:not(.btn)::after{
  content:""; position:absolute; left:.35rem; right:.35rem; bottom:.28rem;
  height:1px; background:var(--laser); transform:scaleX(0); transform-origin:right;
  transition:transform .32s var(--ease);
}
.nav__links a:not(.btn):hover{ color:var(--ink); }
.nav__links a:not(.btn):hover::after,
.nav__links a[aria-current="page"]::after{ transform:scaleX(1); transform-origin:left; }
.nav__links a[aria-current="page"]{ color:var(--ink); }

.nav__cta{
  font-family:var(--f-disp); font-weight:600; font-size:.9rem;
  border:1px solid var(--line-2); border-radius:var(--r);
  padding:.55rem .95rem; color:var(--ink);
  transition:background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.nav__cta:hover{ background:var(--laser); color:var(--laser-ink); border-color:var(--laser); }

.nav__burger{
  display:none;
  width:44px;height:44px;
  flex-direction:column; align-items:center; justify-content:center; gap:5px;
  border-radius:var(--r);
}
.nav__burger span, .nav__burger span::before, .nav__burger span::after{
  content:""; width:22px; height:2px; background:var(--ink);
  transition:transform .3s var(--ease), opacity .3s var(--ease);
}
.nav__burger span::before{ transform:translateY(-6px); }
.nav__burger span::after{ transform:translateY(6px); }
.nav.is-open .nav__burger span{ background:transparent; }
.nav.is-open .nav__burger span::before{ transform:rotate(45deg); }
.nav.is-open .nav__burger span::after{ transform:rotate(-45deg); }

/* mobile Menü-Panel */
@media (max-width: 920px){
  .nav__burger{ display:flex; }
  .nav__links{
    position:fixed; top:var(--nav-h); left:0; right:0;
    flex-direction:column; align-items:stretch; gap:0;
    background:rgba(11,14,12,.97);
    -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
    border-bottom:1px solid var(--line);
    padding:.5rem var(--pad) 1.4rem;
    transform:translateY(-12px); opacity:0; visibility:hidden; pointer-events:none;
    transition:opacity .28s var(--ease), transform .28s var(--ease), visibility .28s;
  }
  .nav.is-open .nav__links{ transform:translateY(0); opacity:1; visibility:visible; pointer-events:auto; }
  .nav__links a:not(.btn){ padding:1rem .2rem; font-size:1.05rem; border-bottom:1px solid var(--line); }
  .nav__links a:not(.btn)::after{ display:none; }
  .nav__cta{ margin-top:1rem; text-align:center; padding:.9rem; }
}

/* ---- 7. Scroll-Progress -------------------------------------------------- */
.progress{
  position:fixed; top:0; left:0; height:2px; width:0;
  background:var(--laser); z-index:70;
  box-shadow:0 0 12px 0 var(--laser-soft);
  transition:width .08s linear;
}

/* ---- 8. Hero ------------------------------------------------------------- */
.hero{
  position:relative;
  min-height:100svh;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding-top:var(--nav-h);
  overflow:hidden;
  isolation:isolate;
}
.hero__media{ position:absolute; inset:0; z-index:-3; }
.hero__media img{
  width:100%; height:118%; object-fit:cover; object-position:center 40%;
  will-change:transform;
  transform:scale(1.06);
}
.hero__scrim{
  position:absolute; inset:0; z-index:-2;
  background:
    linear-gradient(180deg, rgba(11,14,12,.62) 0%, rgba(11,14,12,.28) 32%, rgba(11,14,12,.5) 66%, rgba(11,14,12,.96) 100%),
    radial-gradient(120% 90% at 12% 90%, rgba(11,14,12,.72), transparent 55%);
}
.hero__grain{
  position:absolute; inset:0; z-index:-1; opacity:.05; pointer-events:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}
.hero__inner{
  position:relative;
  padding-bottom:clamp(2.2rem, 6vh, 4.4rem);
  padding-top:clamp(1.5rem, 4vh, 3rem);
}
.hero__kicker{ margin-bottom:1.6rem; }
.hero h1{ max-width:15ch; }
.hero h1 .thin{ color:var(--laser); }
.hero__sub{
  margin-top:1.5rem;
  max-width:52ch;
  font-size:clamp(1.02rem,1.5vw,1.2rem);
  color:var(--ink-dim);
}
.hero__sub b{ color:var(--ink); font-weight:600; }
.hero__row{ margin-top:2.1rem; display:flex; gap:.85rem; flex-wrap:wrap; }
.hero__foot{
  margin-top:2.4rem;
  display:flex; flex-wrap:wrap; gap:.6rem 1.8rem;
  padding-top:1.3rem; border-top:1px solid var(--line);
  font-family:var(--f-mono); font-size:.78rem; letter-spacing:.05em; color:var(--muted);
}
.hero__foot b{ color:var(--ink); font-weight:600; }
.hero__foot span{ display:inline-flex; align-items:center; gap:.6em; }
.hero__foot span::before{ content:""; width:6px;height:6px; background:var(--laser); transform:rotate(45deg); }

/* Visierkreuz (HUD) über dem Hero */
.visier{
  position:absolute; z-index:-1;
  top:clamp(96px, 22vh, 210px); right:clamp(1.5rem, 7vw, 7rem);
  width:min(180px, 26vw); aspect-ratio:1;
  color:var(--laser); opacity:.9;
  animation:visier-spin 44s linear infinite;
  will-change:transform;
}
@keyframes visier-spin{ to{ transform:rotate(360deg); } }
.hero__coord{
  position:absolute; z-index:-1;
  top:clamp(110px, 24vh, 230px); right:clamp(1.5rem,7vw,7rem);
  width:min(180px,26vw); aspect-ratio:1;
  display:grid; place-items:center;
  font-family:var(--f-mono); font-size:.62rem; letter-spacing:.14em; color:var(--laser);
}

/* ---- 9. Ticker (Kinetic Marquee) ---------------------------------------- */
.ticker{
  position:relative; overflow:hidden;
  border-block:1px solid var(--line);
  background:linear-gradient(90deg, var(--bg), var(--bg-2));
  padding-block:.95rem;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.ticker__track{
  display:flex; gap:2.6rem; width:max-content;
  animation:tick 34s linear infinite;
  will-change:transform;
}
.ticker:hover .ticker__track{ animation-play-state:paused; }
.ticker__track span{
  display:inline-flex; align-items:center; gap:2.6rem;
  font-family:var(--f-mono); font-size:.82rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-dim); white-space:nowrap;
}
.ticker__track span::after{ content:"✳"; color:var(--laser); font-size:.7rem; }
@keyframes tick{ to{ transform:translateX(-50%); } }

/* ---- 10. Zwei Welten (asymmetrisch) ------------------------------------- */
.split{ display:grid; grid-template-columns:1.12fr .88fr; gap:clamp(1.2rem,3vw,2.6rem); }
.world{
  position:relative; overflow:hidden;
  min-height:560px;
  display:flex; flex-direction:column; justify-content:flex-end;
  border:1px solid var(--line); border-radius:var(--r-lg);
  padding:clamp(1.4rem,3vw,2.4rem);
  background:var(--bg-2);
  transition:border-color .3s var(--ease), transform .3s var(--ease);
  isolation:isolate;
}
.world:hover{ border-color:var(--line-2); transform:translateY(-3px); }
.world__img{
  position:absolute; inset:0; z-index:-2;
  overflow:hidden;
}
.world__img img{
  width:100%; height:100%; object-fit:cover;
  transform:scale(1.05);
  transition:transform .9s var(--ease);
  filter:saturate(.92) contrast(1.02);
}
.world:hover .world__img img{ transform:scale(1.12); }
.world__scrim{
  position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg, rgba(11,14,12,.15) 0%, rgba(11,14,12,.35) 45%, rgba(11,14,12,.94) 100%);
}
.world__tag{
  align-self:flex-start;
  font-family:var(--f-mono); font-size:.7rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--laser);
  border:1px solid var(--line-2); border-radius:2px; padding:.35rem .7rem;
  margin-bottom:auto;
}
.world__idx{
  position:absolute; top:.4rem; right:.6rem; z-index:0;
  font-family:var(--f-disp); font-weight:700; font-size:clamp(3.4rem,8vw,5.4rem);
  color:transparent; -webkit-text-stroke:1px var(--line-2); line-height:1;
}
.world h3{ position:relative; z-index:1; margin-bottom:.7rem; }
.world p{ position:relative; z-index:1; color:var(--ink-dim); max-width:42ch; }
.world__meta{
  position:relative; z-index:1;
  margin-top:1.1rem; display:flex; flex-wrap:wrap; gap:.4rem 1.2rem;
  font-family:var(--f-mono); font-size:.76rem; color:var(--muted); letter-spacing:.04em;
}
.world__meta b{ color:var(--ink); font-weight:600; }
.world__go{
  position:relative; z-index:1;
  margin-top:1.4rem; display:inline-flex; align-items:center; gap:.6em;
  font-family:var(--f-disp); font-weight:600; font-size:.98rem;
  color:var(--ink);
}
.world__go .arr{ transition:transform .3s var(--ease); }
.world:hover .world__go{ color:var(--laser); }
.world:hover .world__go .arr{ transform:translateX(5px); }

/* ---- 11. Section-Head ---------------------------------------------------- */
.shead{ display:flex; align-items:flex-end; justify-content:space-between; gap:2rem; margin-bottom:clamp(2rem,5vh,3.4rem); }
.shead__l{ max-width:44ch; }
.shead h2{ margin-top:1rem; }
.shead__l p{ margin-top:1rem; color:var(--muted); max-width:52ch; }
@media (max-width:760px){ .shead{ flex-direction:column; align-items:flex-start; gap:1.2rem; } }

/* ---- 12. Tickets (Buchung-Widget) --------------------------------------- */
.booking{
  display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(1.4rem,3.5vw,3rem);
  align-items:stretch;
}
.booking__panel{
  border:1px solid var(--line); border-radius:var(--r-lg);
  background:linear-gradient(160deg, var(--bg-3), var(--bg-2));
  padding:clamp(1.4rem,3vw,2.2rem);
  box-shadow:var(--shadow);
}
.booking__panel h3{ font-size:1.15rem; margin-bottom:1.4rem; }
.field{ margin-bottom:1.5rem; }
.field__label{
  display:block; font-family:var(--f-mono); font-size:.72rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--muted); margin-bottom:.8rem;
}
.optrow{ display:grid; grid-template-columns:repeat(3,1fr); gap:.6rem; }
.opt{
  position:relative;
  border:1px solid var(--line-2); border-radius:var(--r);
  padding:.85rem .7rem; cursor:pointer;
  transition:border-color .25s var(--ease), background .25s var(--ease), transform .2s var(--ease);
  display:flex; flex-direction:column; gap:.35rem; min-height:84px; justify-content:center;
}
.opt:hover{ border-color:var(--ink-dim); }
.opt input{ position:absolute; opacity:0; inset:0; margin:0; cursor:pointer; }
.opt__price{ font-family:var(--f-disp); font-weight:700; font-size:1.5rem; line-height:1; }
.opt__price small{ font-size:.8rem; font-weight:500; color:var(--muted); margin-left:2px; }
.opt__name{ font-size:.8rem; color:var(--ink-dim); }
.opt:has(input:checked), .opt.is-on{
  border-color:var(--laser); background:var(--laser-soft);
}
.opt:has(input:checked) .opt__price, .opt.is-on .opt__price{ color:var(--laser); }
.opt input:focus-visible + *{ }
.opt:focus-within{ outline:2px solid var(--laser); outline-offset:2px; }

.qty{ display:flex; align-items:center; gap:0; border:1px solid var(--line-2); border-radius:var(--r); width:max-content; overflow:hidden; }
.qty button{
  width:48px; height:48px; font-size:1.4rem; color:var(--ink);
  transition:background .2s var(--ease);
  font-family:var(--f-disp);
}
.qty button:hover{ background:rgba(244,243,236,.08); }
.qty__val{ min-width:64px; text-align:center; font-family:var(--f-disp); font-weight:700; font-size:1.25rem; border-inline:1px solid var(--line-2); line-height:48px; }

.total{
  display:flex; align-items:baseline; justify-content:space-between; gap:1rem;
  padding:1.1rem 0; margin-top:.4rem;
  border-top:1px solid var(--line);
}
.total__k{ font-family:var(--f-mono); font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }
.total__v{ font-family:var(--f-disp); font-weight:700; font-size:2.4rem; line-height:1; color:var(--laser); }

.booking__note{
  margin-top:1.3rem; display:flex; gap:.7rem; align-items:flex-start;
  font-size:.9rem; color:var(--ink-dim);
}
.booking__note .dot{ flex:0 0 auto; width:8px;height:8px; margin-top:6px; background:var(--warn); transform:rotate(45deg); }
.booking__note b{ color:var(--ink); }

/* QR-Seite */
.booking__qr{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1.1rem;
  border:1px solid var(--line); border-radius:var(--r-lg); background:var(--bg);
  padding:clamp(1.4rem,3vw,2.2rem); text-align:center;
}
.booking__qr .qr{
  width:min(220px, 56vw); aspect-ratio:1;
  background:#fff; border-radius:var(--r); padding:10px;
}
.booking__qr .qr img{ width:100%; height:100%; object-fit:contain; }
.booking__qr p{ color:var(--ink-dim); font-size:.9rem; max-width:34ch; }
.booking__qr p b{ color:var(--ink); }
@media (max-width:820px){
  .booking{ grid-template-columns:1fr; }
}
@media (max-width:520px){
  .optrow{ grid-template-columns:1fr; }
  .opt{ min-height:auto; flex-direction:row; align-items:center; justify-content:space-between; }
  .opt__price{ font-size:1.2rem; }
}

/* ---- 13. Timeline -------------------------------------------------------- */
.timeline{ position:relative; padding-left:2rem; }
.timeline::before{
  content:""; position:absolute; left:.5rem; top:.4rem; bottom:.4rem; width:1px;
  background:linear-gradient(180deg, var(--laser), var(--line) 40%, var(--line));
}
.tl__item{ position:relative; padding:0 0 2.2rem 1.1rem; }
.tl__item:last-child{ padding-bottom:0; }
.tl__item::before{
  content:""; position:absolute; left:calc(-2rem + .35rem); top:.35rem;
  width:11px; height:11px; background:var(--bg);
  border:2px solid var(--laser); transform:rotate(45deg);
}
.tl__year{ font-family:var(--f-disp); font-weight:700; font-size:1.5rem; color:var(--laser); letter-spacing:-.01em; }
.tl__item p{ color:var(--ink-dim); max-width:52ch; margin-top:.25rem; }

/* ---- 14. Bogenklassen ---------------------------------------------------- */
.bows{ display:grid; grid-template-columns:repeat(auto-fit, minmax(220px,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; }
.bow{ background:var(--bg-2); padding:clamp(1.2rem,2.4vw,1.8rem); transition:background .3s var(--ease); position:relative; }
.bow:hover{ background:var(--bg-3); }
.bow__no{ font-family:var(--f-mono); font-size:.72rem; letter-spacing:.18em; color:var(--laser); }
.bow h4{ font-family:var(--f-disp); font-weight:600; font-size:1.12rem; margin:.7rem 0 .5rem; }
.bow p{ color:var(--muted); font-size:.9rem; }

/* ---- 15. Mitglied-Stufen ------------------------------------------------- */
.steps{ counter-reset:step; display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1rem,2.5vw,2rem); }
.step{
  position:relative; border:1px solid var(--line); border-radius:var(--r-lg);
  padding:clamp(1.3rem,2.6vw,1.9rem); background:var(--bg-2);
  transition:border-color .3s var(--ease), transform .3s var(--ease);
}
.step:hover{ border-color:var(--line-2); transform:translateY(-3px); }
.step__n{
  font-family:var(--f-disp); font-weight:700; font-size:1rem;
  color:var(--laser); display:inline-flex; align-items:center; gap:.6em;
  border:1px solid var(--laser-soft); background:var(--laser-soft);
  border-radius:var(--r); padding:.35rem .7rem;
}
.step h4{ font-family:var(--f-disp); font-weight:600; font-size:1.2rem; margin:1.1rem 0 .55rem; }
.step p{ color:var(--ink-dim); font-size:.95rem; }
.step p b{ color:var(--ink); }
@media (max-width:760px){ .steps{ grid-template-columns:1fr; } }

/* ---- 16. Download-Zeilen (Turniere) ------------------------------------- */
.rows{ border-top:1px solid var(--line); }
.row{
  display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:1.2rem;
  padding:1.15rem 0; border-bottom:1px solid var(--line);
  transition:background .25s var(--ease), padding-left .25s var(--ease);
}
.row:hover{ background:rgba(244,243,236,.03); padding-left:.4rem; }
.row__no{ font-family:var(--f-mono); font-size:.8rem; color:var(--laser); letter-spacing:.1em; min-width:2.4rem; }
.row__main b{ font-family:var(--f-disp); font-weight:600; font-size:1.05rem; display:block; }
.row__main small{ color:var(--muted); font-size:.88rem; }
.row__act{ display:flex; gap:.6rem; }
.dl{
  font-family:var(--f-mono); font-size:.8rem; letter-spacing:.06em;
  border:1px solid var(--line-2); border-radius:var(--r); padding:.5rem .8rem;
  color:var(--ink-dim); display:inline-flex; align-items:center; gap:.5em;
  transition:border-color .25s var(--ease), color .25s var(--ease), background .25s var(--ease);
}
.dl:hover{ border-color:var(--laser); color:var(--laser); background:var(--laser-soft); }
@media (max-width:620px){ .row{ grid-template-columns:auto 1fr; } .row__act{ grid-column:1 / -1; justify-content:flex-end; } }

/* ---- 17. Partner --------------------------------------------------------- */
.partners{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.1rem; }
.partner{
  position:relative; border:1px solid var(--line); border-radius:var(--r-lg);
  padding:clamp(1.3rem,2.6vw,1.8rem); background:var(--bg-2); overflow:hidden;
  display:flex; flex-direction:column; gap:.7rem; min-height:220px;
  transition:border-color .3s var(--ease), transform .3s var(--ease);
}
.partner:hover{ border-color:var(--line-2); transform:translateY(-3px); }
.partner__tag{ font-family:var(--f-mono); font-size:.7rem; letter-spacing:.18em; text-transform:uppercase; color:var(--laser); }
.partner h4{ font-family:var(--f-disp); font-weight:600; font-size:1.2rem; }
.partner p{ color:var(--ink-dim); font-size:.92rem; flex:1; }
.partner__go{ margin-top:.4rem; display:inline-flex; align-items:center; gap:.5em; font-family:var(--f-disp); font-weight:600; font-size:.92rem; color:var(--ink); }
.partner:hover .partner__go{ color:var(--laser); }
.partner:hover .partner__go .arr{ transform:translateX(4px); }
.partner .arr{ transition:transform .3s var(--ease); }
.partner__idx{ position:absolute; top:.4rem; right:.7rem; font-family:var(--f-disp); font-weight:700; font-size:2.6rem; color:transparent; -webkit-text-stroke:1px var(--line); }
@media (max-width:820px){ .partners{ grid-template-columns:1fr; } }

/* ---- 18. Kontakt & Anfahrt ---------------------------------------------- */
.contact{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.6rem,4vw,3.5rem); align-items:start; }
.kv{ border-top:1px solid var(--line); }
.kv__row{ display:grid; grid-template-columns:130px 1fr; gap:1rem; padding:.95rem 0; border-bottom:1px solid var(--line); }
.kv__row dt{ font-family:var(--f-mono); font-size:.74rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); padding-top:.15rem; }
.kv__row dd{ color:var(--ink); font-size:.98rem; }
.kv__row dd a{ color:var(--ink); border-bottom:1px solid var(--line-2); transition:border-color .25s var(--ease), color .25s var(--ease); }
.kv__row dd a:hover{ color:var(--laser); border-color:var(--laser); }
@media (max-width:560px){ .kv__row{ grid-template-columns:1fr; gap:.25rem; } }

.route{ border:1px solid var(--line); border-radius:var(--r-lg); background:var(--bg-2); overflow:hidden; }
.route__img{ position:relative; }
.route__img img{ width:100%; height:auto; filter:saturate(.9) contrast(1.02); }
.route__body{ padding:clamp(1.2rem,2.4vw,1.7rem); }
.route__body h4{ font-family:var(--f-disp); font-weight:600; font-size:1.1rem; margin-bottom:.8rem; }
.route__body p{ color:var(--ink-dim); font-size:.95rem; }
.route__body p b{ color:var(--ink); }
.route__cta{ margin-top:1.2rem; display:flex; gap:.7rem; flex-wrap:wrap; }
@media (max-width:820px){ .contact{ grid-template-columns:1fr; } }

/* ---- 19. Callout (Warnung) ---------------------------------------------- */
.callout{
  display:flex; gap:1rem; align-items:flex-start;
  border:1px solid var(--line-2); border-left:3px solid var(--warn);
  border-radius:var(--r); background:var(--warn-soft);
  padding:1.1rem 1.3rem;
}
.callout .mk{ flex:0 0 auto; font-family:var(--f-mono); font-weight:700; color:var(--warn); }
.callout p{ color:var(--ink-dim); font-size:.95rem; }
.callout p b{ color:var(--ink); }
.callout--info{ border-left-color:var(--laser); background:var(--laser-soft); }
.callout--info .mk{ color:var(--laser); }

/* ---- 20. CTA-Band (Mitglied) -------------------------------------------- */
.ctaband{
  position:relative; overflow:hidden;
  border:1px solid var(--line); border-radius:var(--r-lg);
  background:
    radial-gradient(120% 140% at 88% 12%, var(--laser-soft), transparent 46%),
    linear-gradient(160deg, var(--bg-3), var(--bg-2));
  padding:clamp(2rem,5vw,3.6rem);
}
.ctaband__grid{ display:grid; grid-template-columns:1.4fr 1fr; gap:2rem; align-items:center; }
.ctaband h2{ font-size:clamp(1.9rem,4.4vw,3.2rem); }
.ctaband p{ margin-top:1rem; color:var(--ink-dim); max-width:48ch; }
.ctaband__act{ display:flex; flex-direction:column; gap:.8rem; align-items:stretch; }
.ctaband__act .btn{ width:100%; }
@media (max-width:760px){ .ctaband__grid{ grid-template-columns:1fr; gap:1.6rem; } }

/* ---- 21. Footer ---------------------------------------------------------- */
.foot{ border-top:1px solid var(--line); background:var(--bg-2); }
.foot__grid{
  display:grid; grid-template-columns:1.6fr 1fr 1.2fr; gap:2rem;
  padding-block:clamp(2.4rem,6vh,3.6rem);
}
.foot__brand p{ color:var(--muted); font-size:.92rem; max-width:34ch; margin-top:1rem; }
.foot h5{ font-family:var(--f-mono); font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); margin-bottom:1rem; }
.foot__links{ display:flex; flex-direction:column; gap:.55rem; }
.foot__links a{ color:var(--ink-dim); font-size:.94rem; transition:color .25s var(--ease); }
.foot__links a:hover{ color:var(--laser); }
.foot__legal{
  display:flex; flex-wrap:wrap; gap:.6rem 1.4rem; justify-content:space-between;
  padding-block:1.3rem; border-top:1px solid var(--line);
  font-family:var(--f-mono); font-size:.74rem; letter-spacing:.06em; color:var(--muted);
}
.foot__legal a{ color:var(--ink-dim); }
.foot__legal a:hover{ color:var(--laser); }
@media (max-width:760px){ .foot__grid{ grid-template-columns:1fr; gap:2rem; } }

/* ---- 22. Reveal (Bewegung) ---------------------------------------------- */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .8s var(--ease), transform .8s var(--ease); transition-delay:calc(var(--d,0)*1ms); }
.reveal.is-in{ opacity:1; transform:none; }
.reveal--l{ transform:translateX(-24px); }
.reveal--r{ transform:translateX(24px); }
.reveal--l.is-in, .reveal--r.is-in{ transform:none; }

/* dekorative gestrichelte Flugbahn */
.rail{ position:absolute; height:2px; background:repeating-linear-gradient(90deg, var(--line-2) 0 8px, transparent 8px 16px); }

/* ---- 23. Responsive Grundlagen ------------------------------------------ */
@media (max-width:920px){
  .split{ grid-template-columns:1fr; }
  .world{ min-height:440px; }
}
@media (max-width:560px){
  .h1{ font-size:clamp(2.4rem, 12vw, 3.4rem); }
  .hero__foot{ gap:.5rem 1.1rem; }
}

/* ---- 24. prefers-reduced-motion ----------------------------------------- */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  .reveal{ opacity:1 !important; transform:none !important; }
  .ticker__track{ animation:none !important; width:auto; flex-wrap:wrap; }
  .ticker{ -webkit-mask-image:none; mask-image:none; }
  .ticker__track span{ white-space:normal; }
  .hero__media img, .world__img img{ transform:none !important; }
  .visier{ animation:none !important; }
}
