/* ============================================================
   D'WÄLDER — Sky & Sun Design
   Palette: sky-blue → cloud-white → warm gold/amber
   ============================================================ */

:root {
  --sky-deep:    #0c4a6e;   /* tiefer Himmel oben */
  --sky-mid:     #0ea5e9;   /* Mittagsblau */
  --sky-light:   #bae6fd;   /* Horizont-Blau */
  --cloud:       #f0f9ff;   /* Wolkenweiß */
  --sun:         #f59e0b;   /* Sonne */
  --sun-warm:    #fb923c;   /* warme Thermik */
  --sun-glow:    #fef3c7;   /* Sonnenschein */
  --earth:       #78350f;   /* Boden */
  --text-dark:   #0c1a2e;
  --text-mid:    #334155;
  --text-soft:   #64748b;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: 'Inter', system-ui, sans-serif;
  background: #f8faff;
  color: var(--text-dark);
  -webkit-font-smoothing: antialiased;
}

/* ── Navigation ── */
#navbar {
  background: transparent;
  transition: background 0.3s, box-shadow 0.3s;
}
#navbar.scrolled {
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(12px);
  box-shadow: 0 1px 0 rgba(0,0,0,0.06), 0 4px 24px rgba(14,165,233,0.08);
}

.nav-link {
  padding: 0.4rem 0.9rem;
  border-radius: 9999px;
  font-size: 0.875rem;
  font-weight: 500;
  color: white;
  transition: background 0.15s, color 0.15s;
}
.nav-link:hover {
  background: rgba(255,255,255,0.2);
}
#navbar.scrolled .nav-link {
  color: var(--text-mid);
}
#navbar.scrolled .nav-link:hover {
  background: var(--cloud);
  color: var(--sky-mid);
}
#navbar.scrolled #menu-btn {
  color: var(--text-mid);
}
#navbar.scrolled #logo-title {
  color: var(--text-dark);
  text-shadow: none;
}
#navbar.scrolled #logo-sub {
  color: var(--text-soft);
}

.mobile-nav-link {
  display: block;
  padding: 0.6rem 1rem;
  border-radius: 0.75rem;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text-mid);
  transition: background 0.15s, color 0.15s;
}
.mobile-nav-link:hover {
  background: var(--cloud);
  color: var(--sky-mid);
}

/* ── Hero sky gradient ── */
.hero-sky {
  background: linear-gradient(
    180deg,
    #0c4a6e   0%,
    #075985  15%,
    #0369a1  30%,
    #0ea5e9  55%,
    #7dd3fc  75%,
    #e0f2fe  88%,
    #fff7ed  95%,
    #fef3c7 100%
  );
}

/* Sun glow behind horizon */
.sun-burst {
  position: absolute;
  bottom: -40px;
  left: 50%;
  transform: translateX(-50%);
  width: 480px;
  height: 480px;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(251,191,36,0.55) 0%,
    rgba(249,115,22,0.25) 40%,
    transparent 70%
  );
  filter: blur(20px);
  pointer-events: none;
}

/* Animated clouds */
.cloud-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.cloud {
  position: absolute;
  background: rgba(255,255,255,0.18);
  border-radius: 50%;
  filter: blur(32px);
}
.cloud-1 { width: 400px; height: 160px; top: 28%; left: -5%;  animation: drift 28s linear infinite; }
.cloud-2 { width: 280px; height: 110px; top: 40%; left: 20%;  animation: drift 38s linear infinite 8s; }
.cloud-3 { width: 340px; height: 130px; top: 22%; right: -8%; animation: drift 32s linear infinite 14s reverse; }
.cloud-4 { width: 200px; height: 90px;  top: 55%; right: 15%; animation: drift 24s linear infinite 4s reverse; }

@keyframes drift {
  from { transform: translateX(-60px); }
  to   { transform: translateX(60px); }
}

/* ── Cards ── */
.card {
  background: white;
  border-radius: 1.25rem;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 8px 32px rgba(14,165,233,0.08);
  border: 1px solid rgba(186,230,253,0.5);
  transition: box-shadow 0.2s, transform 0.2s;
}
.card:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,0.08), 0 20px 48px rgba(14,165,233,0.14);
  transform: translateY(-2px);
}

/* Cloud-style card (softer, off-white) */
.card-cloud {
  background: linear-gradient(135deg, #f0f9ff, #ffffff);
  border-radius: 1.25rem;
  box-shadow: 0 2px 8px rgba(14,165,233,0.07), 0 12px 40px rgba(14,165,233,0.1);
  border: 1px solid #e0f2fe;
}

/* Sun-accent card */
.card-sun {
  background: linear-gradient(135deg, #fffbeb, #fff7ed);
  border-radius: 1.25rem;
  box-shadow: 0 2px 8px rgba(245,158,11,0.1), 0 12px 40px rgba(251,146,60,0.1);
  border: 1px solid #fde68a;
}

/* ── Buttons ── */
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.875rem 2rem;
  background: linear-gradient(135deg, var(--sun), var(--sun-warm));
  color: white;
  font-weight: 700;
  font-size: 0.925rem;
  border-radius: 9999px;
  box-shadow: 0 4px 20px rgba(245,158,11,0.4), 0 1px 3px rgba(0,0,0,0.1);
  transition: box-shadow 0.2s, transform 0.15s, filter 0.15s;
  text-decoration: none;
}
.btn-primary:hover {
  filter: brightness(1.07);
  box-shadow: 0 8px 32px rgba(245,158,11,0.5);
  transform: translateY(-1px);
}

.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.875rem 2rem;
  background: rgba(255,255,255,0.22);
  color: white;
  font-weight: 600;
  font-size: 0.925rem;
  border-radius: 9999px;
  border: 1.5px solid rgba(255,255,255,0.5);
  backdrop-filter: blur(8px);
  transition: background 0.2s, border-color 0.2s;
  text-decoration: none;
}
.btn-ghost:hover {
  background: rgba(255,255,255,0.32);
  border-color: rgba(255,255,255,0.8);
}

/* ── Section labels ── */
.section-label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--sky-mid);
  margin-bottom: 0.75rem;
}
.section-label::before {
  content: '';
  display: inline-block;
  width: 20px;
  height: 2px;
  background: var(--sun);
  border-radius: 2px;
}

/* ── Form inputs ── */
.form-input {
  width: 100%;
  background: var(--cloud);
  border: 1.5px solid #bae6fd;
  border-radius: 0.875rem;
  padding: 0.75rem 1.1rem;
  color: var(--text-dark);
  font-size: 0.9rem;
  transition: border-color 0.15s, box-shadow 0.15s;
  outline: none;
}
.form-input:focus {
  border-color: var(--sky-mid);
  box-shadow: 0 0 0 3px rgba(14,165,233,0.15);
}
.form-input::placeholder { color: #94a3b8; }

/* ── FullCalendar overrides ── */
.fc {
  --fc-border-color: #e0f2fe;
  --fc-page-bg-color: transparent;
  --fc-today-bg-color: #fffbeb;
  color: var(--text-mid);
}
.fc .fc-toolbar-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text-dark);
}
.fc .fc-button {
  background: white !important;
  border: 1.5px solid #bae6fd !important;
  color: var(--sky-mid) !important;
  border-radius: 0.5rem !important;
  font-weight: 600 !important;
  box-shadow: none !important;
}
.fc .fc-button:hover {
  background: var(--cloud) !important;
}
.fc .fc-button-primary:not(:disabled).fc-button-active {
  background: var(--sky-mid) !important;
  border-color: var(--sky-mid) !important;
  color: white !important;
}
.fc-daygrid-day-number, .fc-col-header-cell-cushion {
  color: var(--text-mid) !important;
  text-decoration: none !important;
  font-size: 0.8rem;
}
.fc-daygrid-event {
  border-radius: 6px !important;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 1px 5px !important;
}
.event-training    { background: #059669 !important; border-color: #059669 !important; }
.event-meeting     { background: #7c3aed !important; border-color: #7c3aed !important; }
.event-competition { background: var(--sun) !important; border-color: var(--sun) !important; color: #431407 !important; }
.event-trip        { background: var(--sun-warm) !important; border-color: var(--sun-warm) !important; }
.event-social      { background: #ec4899 !important; border-color: #ec4899 !important; }
.event-general     { background: var(--sky-mid) !important; border-color: var(--sky-mid) !important; }

/* ── Page headers (non-hero pages) ── */
.page-header {
  background: linear-gradient(160deg, #0c4a6e 0%, #0ea5e9 60%, #bae6fd 100%);
  padding: 7rem 1.5rem 4rem;
  position: relative;
  overflow: hidden;
}
.page-header::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 60px;
  background: #f8faff;
  clip-path: ellipse(55% 100% at 50% 100%);
}

/* ── Stats strip ── */
.stats-strip {
  background: linear-gradient(90deg, #0c4a6e, #0369a1, #0c4a6e);
  color: white;
}

/* ── Footer ── */
footer {
  background: linear-gradient(180deg, #f8faff 0%, #e0f2fe 100%);
  border-top: 1px solid #bae6fd;
}

/* ── Altitude badge ── */
.altitude-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  background: rgba(255,255,255,0.2);
  border: 1px solid rgba(255,255,255,0.4);
  backdrop-filter: blur(6px);
  border-radius: 9999px;
  padding: 0.375rem 1rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: white;
}

/* ── Wind arrow ── */
.wind-arrow {
  display: inline-block;
  transition: transform 0.6s ease;
  font-style: normal;
}

/* ── Paraglider SVG decoration ── */
.pg-deco {
  position: absolute;
  opacity: 0.07;
  pointer-events: none;
}

/* ── Event type pill ── */
.event-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.7rem;
  border-radius: 9999px;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}