/* Weihnachtspäckchenkonvoi Kulmbach – Platzhalterseite. Keine externen Ressourcen. */
*, *::before, *::after { box-sizing: border-box; }

html { height: 100%; background: #08142f; }

body {
  margin: 0;
  min-height: 100%;
  min-height: 100dvh;
  color: #f4f7ff;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---------- Hintergrund ---------- */
.bg-wrap {
  position: fixed;
  inset: 0;
  z-index: -2;
  overflow: hidden;
}
.bg {
  position: absolute;
  inset: 0;
  background-color: #08142f;
  background-image: url("../img/bg-landscape.jpg");
  background-image: image-set(url("../img/bg-landscape.webp") type("image/webp"), url("../img/bg-landscape.jpg") type("image/jpeg"));
  background-size: cover;
  background-position: 70% 60%;
  background-repeat: no-repeat;
  /* Das Bild ist bereits leicht weichgezeichnet; minimaler Zusatz-Blur, leicht skaliert gegen weiche Ränder */
  filter: blur(1.5px);
  transform: scale(1.04);
}
@media (orientation: portrait) {
  .bg {
    background-image: url("../img/bg-portrait.jpg");
    background-image: image-set(url("../img/bg-portrait.webp") type("image/webp"), url("../img/bg-portrait.jpg") type("image/jpeg"));
    background-position: 50% 70%;
  }
}

/* sanfte Abdunklung hinter dem Inhalt für Lesbarkeit */
.scrim {
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(ellipse 62% 58% at 50% 50%, rgba(4, 10, 28, 0.62), rgba(4, 10, 28, 0.2) 70%, rgba(4, 10, 28, 0) 100%),
    linear-gradient(to bottom, rgba(3, 8, 22, 0.25), rgba(3, 8, 22, 0) 40%);
}

/* ---------- Schnee-Canvas ---------- */
#snow {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
  pointer-events: none;
}

/* ---------- Inhalt ---------- */
.page {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: clamp(2.5rem, 6vh, 4rem) 1.25rem calc(clamp(3rem, 8vh, 5rem) + env(safe-area-inset-bottom));
  max-width: 62rem;
  margin: 0 auto;
}

.logos {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(1.25rem, 3.5vh, 2.25rem);
  margin-bottom: clamp(1.75rem, 5vh, 3rem);
  /* Platz über den Logos für die Schneekappen */
  padding-top: 18px;
}

/* Club-Logos (RT · LC · OT) als Reihe unter dem WPK-Logo */
.clubs {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(1.25rem, 4vw, 3rem);
  /* Platz für die Schneekappen der Club-Logos */
  padding-top: 10px;
}

.logo {
  display: block;
  height: auto;
  filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.45));
  user-select: none;
  -webkit-user-drag: none;
}
.logo-wpk { width: clamp(300px, 46vw, 600px); }
/* gleiche optische Höhe für alle Club-Logos */
.logo-club { width: auto; height: clamp(110px, 15vh, 150px); }
.logo-lc   { height: clamp(116px, 15.8vh, 158px); } /* Sechseck wirkt sonst kleiner */

h1 {
  margin: 0 0 0.6rem;
  font-size: clamp(1.75rem, 1.1rem + 2.8vw, 3.25rem);
  line-height: 1.12;
  font-weight: 800;
  letter-spacing: -0.01em;
  overflow-wrap: break-word;
  hyphens: manual;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.6), 0 1px 2px rgba(0, 0, 0, 0.5);
}

.lead {
  margin: 0 auto 2rem;
  max-width: 36rem;
  font-size: clamp(1.05rem, 0.95rem + 0.45vw, 1.3rem);
  color: #e6ecfb;
  text-wrap: pretty;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.7), 0 1px 2px rgba(0, 0, 0, 0.6);
}

.actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.9rem;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3.1rem;
  padding: 0.8rem 1.6rem;
  border-radius: 999px;
  font-weight: 700;
  font-size: 1.05rem;
  text-decoration: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(0, 0, 0, 0.45); }
.btn:focus-visible { outline: 3px solid #ffd36b; outline-offset: 3px; }

.btn-primary { background: #d71f26; color: #fff; }
.btn-primary:hover { background: #e8323a; }

.btn-secondary {
  background: rgba(255, 255, 255, 0.94);
  color: #0f1d3a;
}
.btn-secondary:hover { background: #fff; }

.credits {
  margin: 2.25rem 0 0;
  font-size: 0.9rem;
  color: rgba(230, 236, 251, 0.85);
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.7);
}
.credits span { white-space: nowrap; }

/* ---------- Mobil ---------- */
@media (max-width: 640px) {
  .logos { gap: 1.4rem; }
  .logo-wpk { width: min(86vw, 340px); }
  .clubs { gap: clamp(0.75rem, 4vw, 1.25rem); }
  .logo-club { height: clamp(78px, 24vw, 104px); }
  .logo-lc   { height: clamp(82px, 25.3vw, 110px); }
  h1 { font-size: clamp(1.3rem, 5.7vw, 1.9rem); }
  .actions { flex-direction: column; align-items: stretch; width: 100%; max-width: 22rem; }
  .btn { width: 100%; }
  .credits { font-size: 0.82rem; }
}

@media (prefers-reduced-motion: reduce) {
  .btn { transition: none; }
  .btn:hover { transform: none; }
}

/* ---------- Video ---------- */
.video { margin: 0 auto 1.75rem; width: 100%; max-width: 44rem; }
.video video {
  display: block; width: 100%; height: auto; aspect-ratio: 16 / 9;
  border-radius: 18px; background: #08142f;
  border: 3px solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.5);
}
.video figcaption { margin-top: 0.6rem; font-size: 0.95rem; color: #e6ecfb; text-shadow: 0 1px 6px rgba(0,0,0,.7); }
.stats { margin: -1rem auto 2rem; font-size: 0.98rem; color: #ffd36b; text-shadow: 0 1px 6px rgba(0,0,0,.7); }
.stats span { white-space: nowrap; }

/* ---------- Footer & Textseiten ---------- */
.site-footer { margin-top: 1.25rem; font-size: 0.85rem; color: rgba(230,236,251,.8); text-shadow: 0 1px 6px rgba(0,0,0,.7); }
.site-footer p { margin: 0.3rem 0; }
.soon { font-size: clamp(1rem, 0.92rem + 0.35vw, 1.15rem); font-weight: 600; color: #f4f7ff; margin-bottom: 0.6rem !important; }
.site-footer a, .text-page a { color: #ffd36b; }
.page.text-page { justify-content: flex-start; text-align: left; max-width: 46rem; }
.text-page .logo-wpk { width: min(80vw, 320px); margin: 0 auto 1.5rem; }
.text-card { background: rgba(4,10,28,.72); border-radius: 18px; padding: clamp(1.25rem, 4vw, 2.25rem); box-shadow: 0 12px 36px rgba(0,0,0,.45); width: 100%; }
.text-card h1 { font-size: clamp(1.6rem, 1.2rem + 2vw, 2.4rem); }
.text-card h2 { font-size: 1.15rem; margin: 1.6rem 0 .4rem; color: #ffd36b; }
.text-card p { margin: 0 0 .8rem; }
.text-page .site-footer { text-align: center; width: 100%; }

/* ---------- Mitmachen-Fenster ---------- */
.join-wrap { margin: 0 0 1.25rem; }
.btn-join { font: inherit; font-size: 1.2rem; font-weight: 700; border: 0; cursor: pointer; padding: 1rem 2.2rem; box-shadow: 0 8px 26px rgba(215,31,38,.45); }
.modal { border: 0; padding: 0; background: transparent; color: #f4f7ff; width: min(46rem, calc(100vw - 2rem)); max-height: calc(100dvh - 2rem); }
.modal::backdrop { background: rgba(4,10,28,.7); backdrop-filter: blur(3px); }
.modal .text-card { position: relative; background: rgba(8,20,47,.97); text-align: left; }
.modal .text-card h1 { margin: 0 2.5rem .6rem 0; }
.modal a { color: #ffd36b; }
.modal-close { position: absolute; top: .7rem; right: .8rem; width: 2.6rem; height: 2.6rem; border: 0; border-radius: 50%; background: rgba(255,255,255,.12); color: #fff; font-size: 1.6rem; line-height: 1; cursor: pointer; }
.modal-close:hover { background: rgba(255,255,255,.22); }
.modal-close:focus-visible { outline: 3px solid #ffd36b; outline-offset: 2px; }
.join-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: 1.2rem 0; }
.join-card { background: rgba(255,255,255,.07); border-radius: 14px; padding: 1.1rem 1.2rem; }
.join-card h2 { margin: 0 0 .5rem !important; }
.join-card ul { margin: .4rem 0 0; padding-left: 1.1rem; }
.join-card li { margin-bottom: .6rem; }
.join-foot { margin: 0 !important; font-size: .95rem; }
@media (max-width: 640px) { .join-cards { grid-template-columns: 1fr; } }
.modal a[href^="mailto"] { white-space: nowrap; }
.join-card .deadline { margin: .8rem 0 0 !important; padding: .55rem .8rem; border-radius: 10px; background: rgba(255,211,107,.14); border-left: 3px solid #ffd36b; color: #fff3cf; font-size: .95rem; }
.join-card .deadline strong { color: #ffd36b; white-space: nowrap; }
.join-card a.route { color: #f4f7ff; text-decoration: underline; text-decoration-color: rgba(255,211,107,.6); text-underline-offset: 3px; }
.join-card a.route:hover { color: #ffd36b; }
.route-hint { display: inline-block; margin-left: .4rem; padding: .05rem .5rem; border-radius: 999px; background: rgba(255,211,107,.16); color: #ffd36b; font-size: .8rem; font-weight: 700; text-decoration: none; white-space: nowrap; }

.sticker-link{display:block;margin-top:.6rem;color:#ffd36b;font-weight:700;text-decoration:underline;text-underline-offset:3px}
.sticker-link:hover{color:#fff3cf}
.dl-howto{margin-top:1rem;padding:.8rem 1rem;border-radius:10px;background:rgba(255,211,107,.12)}
.dl-howto ol{margin:.4rem 0 0;padding-left:1.3rem}
.dl-howto li{margin-bottom:.25rem}

.dl-img{display:block;width:100%;height:auto;border-radius:10px;margin-top:1rem}

/* Teilen & Aushängen */
.share-box { margin: 1rem 0 0; }
.share-box h3 { margin: 0 0 .35rem; color: #ffd36b; font-size: 1.1rem; }
.share-box p { margin: 0 0 .8rem; font-size: .95rem; }
.share-items { display: flex; flex-wrap: wrap; gap: 1rem 1.6rem; }
.share-item { margin: 0; display: flex; align-items: center; gap: .8rem; }
.share-item img { height: 120px; width: auto; border-radius: 8px; box-shadow: 0 4px 14px rgba(0,0,0,.4); background: #0f1d3a; }
.btn.btn-sm { min-height: 2.5rem; padding: .5rem 1.1rem; font-size: .95rem; }
.share-box .btn-primary { color: #fff; } .share-box .btn-secondary { color: #0f1d3a; }
.share-item img.thumb-45 { aspect-ratio: 4 / 5; width: 96px; height: auto; object-fit: cover; }