/* =========================================================
   Gemeinsame Bausteine aller Varianten.
   Das Unterscheidende steht in v1.css / v2.css / v3.css.
   ========================================================= */

/* ---------- Navigation ---------- */
/* Babyblau hinterlegt. Leicht durchscheinend, damit beim Scrollen die Seite
   darunter durchschimmert – deckend wirkt die Leiste sonst wie aufgeklebt. */
.nav{ position:sticky; top:0; z-index:50; background:rgba(200,226,255,.9);
      backdrop-filter:blur(10px) saturate(1.3);
      box-shadow:0 1px 0 rgba(27,79,216,.18), 0 6px 18px rgba(15,27,76,.06); }
.nav__in{ display:flex; align-items:center; gap:1.5rem; min-height:68px; }
.nav__brand{ display:flex; align-items:center; gap:.6rem; text-decoration:none;
      font-family:var(--font-display); font-size:1.3rem; color:var(--navy); }
.nav__list{ display:flex; gap:1.4rem; }
.nav__list a{ text-decoration:none; color:var(--navy); font-weight:600; padding:.3rem 0;
      border-bottom:2px solid transparent; }
.nav__list a:hover{ border-bottom-color:var(--yellow); }
.nav__in > .btn{ margin-left:auto; }
@media (max-width:820px){ .nav__list{ display:none; } .nav__in > .btn{ margin-left:auto; } }

/* ---------- Buttons ---------- */
.btn{ display:inline-flex; align-items:center; justify-content:center;
  background:var(--blue); color:#fff; text-decoration:none; font-weight:700;
  padding:.85rem 1.6rem; border-radius:99px; box-shadow:0 8px 20px rgba(27,79,216,.3);
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease; }
.btn:hover{ transform:translateY(-2px); box-shadow:0 12px 26px rgba(27,79,216,.38); }
.btn--sm{ padding:.5rem 1.1rem; font-size:var(--step--1); }
.btn--ghost{ background:rgba(255,255,255,.16); border:2px solid rgba(255,255,255,.75);
  box-shadow:none; backdrop-filter:blur(6px); }
.btn--ghost:hover{ background:rgba(255,255,255,.3); box-shadow:none; }
.btn--yellow{ background:var(--yellow); color:var(--navy); box-shadow:0 8px 20px rgba(255,210,51,.45); }
.btn--yellow:hover{ box-shadow:0 12px 26px rgba(255,210,51,.55); }

/* ---------- Sektionen ---------- */
.sec{ padding:clamp(3.5rem,8vw,6.5rem) 0; }
.sec--tint{ background:var(--blue-tint); }
.sec--slim{ padding:clamp(2rem,4vw,3.5rem) 0; }
.sec__head{ max-width:62ch; margin-bottom:2.5rem; }
.eyebrow{ text-transform:uppercase; letter-spacing:.14em; font-size:.8rem; font-weight:800;
  color:var(--blue); margin-bottom:.6rem; }
.eyebrow--center{ text-align:center; }
.lead{ font-size:var(--step-1); line-height:1.5; color:var(--navy-soft); }
.mark{ background:linear-gradient(transparent 58%, var(--yellow-light) 58%, var(--yellow-light) 92%, transparent 92%); }

/* Fakten */
.facts{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:1.2rem; }
.fact{ background:#fff; border:2px solid var(--blue-pale); border-radius:var(--radius);
  padding:1.6rem; text-align:center; box-shadow:var(--shadow); }
.fact b{ display:block; font-family:var(--font-display); font-size:var(--step-3);
  color:var(--blue); line-height:1; }
.fact span{ font-weight:600; color:var(--navy-soft); }

/* Truppen */
.troupes{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:2rem; }
.troupe{ background:#fff; border-radius:var(--radius-lg); overflow:hidden;
  box-shadow:var(--shadow-lg); padding-bottom:1.6rem; }
.troupe__img{ position:relative; aspect-ratio:3/2; overflow:hidden; }
.troupe__img img{ width:100%; height:100%; object-fit:cover; object-position:center 32%; }
.troupe__tag{ position:absolute; left:1rem; bottom:1rem; background:var(--blue); color:#fff;
  font-weight:800; font-size:var(--step--1); padding:.35rem 1rem; border-radius:99px; }
.troupe__tag--alt{ background:var(--yellow); color:var(--navy); }
.troupe h3{ margin:1.3rem 1.6rem .4rem; }
.troupe p{ margin:0 1.6rem .8rem; color:var(--navy-soft); }
.troupe__meta{ font-weight:700; color:var(--blue) !important; }

/* Termine */
.dates{ display:grid; gap:1rem; }
.date{ display:flex; align-items:center; gap:1.4rem; background:#fff; border:2px solid var(--blue-pale);
  border-radius:var(--radius); padding:1rem 1.4rem; box-shadow:var(--shadow);
  transition:border-color .18s ease, transform .18s ease; }
.date:hover{ border-color:var(--yellow); transform:translateX(4px); }
.date__when{ display:grid; place-items:center; min-width:72px; background:var(--blue-tint);
  border-radius:16px; padding:.5rem; }
.date__when b{ font-family:var(--font-display); font-size:1.7rem; color:var(--blue); line-height:1; }
.date__when span{ text-transform:uppercase; font-size:.72rem; font-weight:800; letter-spacing:.1em; color:var(--navy-soft); }
.date h3{ margin:0 0 .1em; font-size:var(--step-1); }
.date p{ margin:0; color:var(--navy-soft); font-weight:600; }
.date__link{ margin-left:auto; font-weight:700; text-decoration:none; white-space:nowrap; }
.date__link::after{ content:" →"; }
@media (max-width:560px){ .date{ flex-wrap:wrap; } .date__link{ margin-left:0; } }

/* CTA-Band */
.cta{ background:linear-gradient(135deg, var(--blue) 0%, #1740b4 60%, var(--navy) 100%);
  color:#fff; padding:clamp(3rem,7vw,5.5rem) 0; position:relative; overflow:hidden; }
.cta::before{ content:""; position:absolute; inset:0;
  background-image:radial-gradient(circle, rgba(255,255,255,.35) 1.5px, transparent 1.6px);
  background-size:90px 90px; opacity:.5; }
.cta__in{ position:relative; text-align:center; max-width:60ch; }
.cta h2{ color:#fff; }
.cta p{ font-size:var(--step-1); opacity:.92; margin-bottom:1.8rem; }

/* Sponsoren */
.sponsors{ display:flex; flex-wrap:wrap; gap:1rem; justify-content:center; }
.sponsors li{ flex:1 1 160px; max-width:220px; display:grid; place-items:center; min-height:84px;
  border:2px dashed var(--blue-pale); border-radius:16px; color:var(--navy-soft);
  font-weight:700; background:#fff; }

/* Footer – ebenfalls Babyblau. Damit die Seite hell ausläuft, statt unten
   in einen dunklen Block zu fallen: alle Textfarben kehren sich um. */
.foot{ background:var(--blue-baby); color:var(--navy);
  padding:clamp(2.5rem,6vw,4rem) 0 1.5rem; }
.foot__in{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:2rem; }
.foot h3{ font-size:var(--step-0); color:var(--blue); margin-bottom:.5rem; }
.foot p,.foot li{ color:var(--navy-soft); }
.foot a{ color:var(--navy); text-decoration-color:rgba(15,27,76,.35); text-underline-offset:3px; }
.foot a:hover{ text-decoration-color:var(--blue); }
.foot__name{ font-family:var(--font-display); font-size:1.15rem; line-height:1.25; margin-top:.8rem; color:var(--navy); }
.foot__name b{ font-size:1.5rem; display:block; }
.foot__org{ font-size:var(--step--1); color:var(--navy-soft); margin-top:.35rem; }
.foot__bottom{ margin-top:2.5rem; padding-top:1.2rem; border-top:1px solid rgba(15,27,76,.16);
  font-size:var(--step--1); color:rgba(15,27,76,.62); }
.foot__bottom p{ margin:0; }