/* ============================================================
   SMILE FOR PEACE – BOLD & VIBRANT DESIGN
   Version 2.0 – All Layout Fixes Applied
   ============================================================ */

/* ---------- CSS Variables ---------- */
:root {
  --clr-bg:          #0b0b1a;
  --clr-bg-2:        #0f0f28;
  --clr-surface:     rgba(255,255,255,0.05);
  --clr-surface-2:   rgba(255,255,255,0.08);

  --clr-purple:      #7c3aed;
  --clr-violet:      #8b5cf6;
  --clr-pink:        #ec4899;
  --clr-magenta:     #e879f9;
  --clr-coral:       #f97316;
  --clr-yellow:      #facc15;

  --grad-main:       linear-gradient(135deg, #7c3aed 0%, #ec4899 50%, #f97316 100%);
  --grad-glow:       linear-gradient(135deg, #8b5cf6, #e879f9);
  --grad-card:       linear-gradient(145deg, rgba(124,58,237,0.15) 0%, rgba(236,72,153,0.1) 100%);

  --clr-text:        #f8fafc;
  --clr-text-muted:  #94a3b8;
  --clr-border:      rgba(255,255,255,0.12);

  --font-body:       'Inter', sans-serif;
  --font-display:    'Playfair Display', serif;

  --radius-sm:       8px;
  --radius-md:       16px;
  --radius-lg:       24px;
  --radius-xl:       32px;

  --shadow-glow:     0 0 40px rgba(139,92,246,0.4);
  --shadow-card:     0 8px 32px rgba(0,0,0,0.4);

  --nav-height:      72px;
  --container-max:   1200px;
  --container-pad:   clamp(16px, 5vw, 48px);

  --transition:      0.3s ease;
}

/* ---------- Reset & Base ---------- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  background-color: var(--clr-bg);
  color: var(--clr-text);
  line-height: 1.6;
  overflow-x: hidden;
  min-height: 100vh;
}

img, video, svg { max-width: 100%; height: auto; display: block; }

a { color: inherit; text-decoration: none; }

ul, ol { list-style: none; }

/* ---------- Particle Canvas ---------- */
#particle-canvas {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.4;
}

/* ---------- Container ---------- */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

/* ---------- Utility: Text Gradient ---------- */
.text-gradient {
  background: var(--grad-main);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ============================================================
   HEADER / NAVIGATION
   ============================================================ */
#site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  height: var(--nav-height);
  display: flex;
  align-items: center;
  background: rgba(11,11,26,0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--clr-border);
  transition: background var(--transition), box-shadow var(--transition);
}

#site-header.scrolled {
  background: rgba(11,11,26,0.97);
  box-shadow: 0 4px 30px rgba(0,0,0,0.5);
}

.nav-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
  gap: 16px;
}

/* Logo */
.nav-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  text-decoration: none;
}

.logo-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--grad-main);
  font-size: 0.75rem;
  font-weight: 900;
  color: #fff;
  letter-spacing: 0.05em;
  flex-shrink: 0;
}

.logo-text {
  font-size: 1rem;
  font-weight: 700;
  color: var(--clr-text);
  white-space: nowrap;
}

/* Nav Menu */
.nav-menu {
  display: flex;
  align-items: center;
  gap: clamp(8px, 2vw, 28px);
  flex-wrap: nowrap;
}

.nav-link {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--clr-text-muted);
  white-space: nowrap;
  padding: 6px 2px;
  transition: color var(--transition);
  position: relative;
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--grad-main);
  transform: scaleX(0);
  transition: transform var(--transition);
  border-radius: 1px;
}

.nav-link:hover,
.nav-link.active {
  color: var(--clr-text);
}

.nav-link:hover::after,
.nav-link.active::after {
  transform: scaleX(1);
}

/* Nav CTA */
.nav-link.nav-cta {
  display: inline-flex;
  align-items: center;
  padding: 8px 20px;
  border-radius: 50px;
  background: var(--grad-main);
  color: #fff !important;
  font-weight: 700;
  font-size: 0.85rem;
  white-space: nowrap;
  transition: opacity var(--transition), transform var(--transition);
}

.nav-link.nav-cta::after { display: none; }

.nav-link.nav-cta:hover {
  opacity: 0.9;
  transform: translateY(-1px);
}

/* Hamburger Toggle */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 28px;
  height: 20px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
}

.nav-toggle span {
  display: block;
  height: 2px;
  background: var(--clr-text);
  border-radius: 2px;
  transition: transform var(--transition), opacity var(--transition);
}

.nav-toggle.open span:nth-child(1) { transform: translateY(9px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }

/* ============================================================
   BUTTONS (Global)
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 32px;
  border-radius: 50px;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
  border: none;
  text-decoration: none;
  transition: transform var(--transition), opacity var(--transition), box-shadow var(--transition);
  position: relative;
  overflow: hidden;
}

.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn-primary {
  background: var(--grad-main);
  color: #fff;
}

.btn-primary:hover { opacity: 0.92; }

.btn-outline {
  background: transparent;
  color: var(--clr-text);
  border: 2px solid var(--clr-border);
}

.btn-outline:hover {
  border-color: var(--clr-violet);
  color: var(--clr-violet);
}

.btn-glow {
  box-shadow: 0 0 20px rgba(139,92,246,0.5);
}

.btn-glow:hover {
  box-shadow: 0 0 40px rgba(139,92,246,0.7);
}

/* Donate button – full width inside card */
.btn-donate {
  width: 100%;
  padding: 18px 32px;
  font-size: 1.1rem;
  background: var(--grad-main);
  color: #fff;
  border-radius: var(--radius-md);
}

.btn-donate:hover {
  opacity: 0.92;
}

/* ============================================================
   SECTION BADGES & SHARED HEADLINES
   ============================================================ */
.section-badge,
.vision-badge {
  display: inline-block;
  padding: 6px 18px;
  border-radius: 50px;
  border: 1px solid var(--clr-violet);
  background: rgba(139,92,246,0.15);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--clr-violet);
  margin-bottom: 20px;
}

.section-headline {
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 900;
  line-height: 1.1;
  margin-bottom: 20px;
}

.section-subline {
  font-size: clamp(1rem, 2vw, 1.2rem);
  color: var(--clr-text-muted);
  line-height: 1.7;
  max-width: 600px;
}

/* ============================================================
   HERO SECTION
   ============================================================ */
/* ============================================================
   HERO – SPLIT-SCREEN EDITORIAL
   ============================================================ */

/* ── Outer section ── */
.hero-section {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr 1fr;
  overflow: hidden;
  background: #09091e;
}

/* ── LEFT side ── */
.hero-left {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(100px, 14vh, 140px) clamp(32px, 5vw, 72px) clamp(80px, 10vh, 120px);
  position: relative;
  z-index: 2;
  /* Subtle left-side gradient glow */
  background:
    radial-gradient(ellipse 90% 70% at -10% 55%, rgba(124,58,237,0.18) 0%, transparent 65%),
    radial-gradient(ellipse 50% 40% at 30% 90%, rgba(236,72,153,0.10) 0%, transparent 60%);
}

/* Eyebrow */
.hero-eyebrow-wrap {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 32px;
  opacity: 0;
  transform: translateY(16px);
  animation: hw-in 0.6s cubic-bezier(0.22,1,0.36,1) 0.1s forwards;
}
.hero-eyebrow-line {
  display: block;
  width: 36px;
  height: 2px;
  background: var(--grad-main);
  border-radius: 2px;
  flex-shrink: 0;
}
.hero-eyebrow-text {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: #a78bfa;
}

/* Headline word-by-word */
.hero-headline {
  font-family: var(--font-display);
  font-size: clamp(3.2rem, 6.5vw, 6rem);
  font-weight: 900;
  line-height: 1.02;
  letter-spacing: -0.03em;
  color: #f1f5f9;
  margin-bottom: 28px;
}

/* Each word animates in separately */
.hw {
  display: inline-block;
  opacity: 0;
  transform: translateY(32px);
}
.hw-1 { animation: hw-in 0.7s cubic-bezier(0.22,1,0.36,1) 0.25s forwards; }
.hw-2 { animation: hw-in 0.7s cubic-bezier(0.22,1,0.36,1) 0.38s forwards; }
.hw-3 { animation: hw-in 0.7s cubic-bezier(0.22,1,0.36,1) 0.51s forwards; }
.hw-4 { animation: hw-in 0.7s cubic-bezier(0.22,1,0.36,1) 0.64s forwards; }

/* "verändert" als kursives Gradient-Wort */
.hw-italic {
  font-style: italic;
  background: var(--grad-main);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

@keyframes hw-in {
  to { opacity: 1; transform: translateY(0); }
}

/* Subline */
.hero-subline {
  font-size: clamp(1rem, 1.6vw, 1.15rem);
  color: #64748b;
  line-height: 1.75;
  margin-bottom: 40px;
  max-width: 440px;
  opacity: 0;
  animation: hw-in 0.7s cubic-bezier(0.22,1,0.36,1) 0.78s forwards;
}

/* CTA Buttons */
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 48px;
  opacity: 0;
  animation: hw-in 0.7s cubic-bezier(0.22,1,0.36,1) 0.90s forwards;
}

/* Social Proof Bar */
.hero-proof {
  display: flex;
  align-items: center;
  gap: 14px;
  opacity: 0;
  animation: hw-in 0.7s cubic-bezier(0.22,1,0.36,1) 1.05s forwards;
}
.hero-proof-faces {
  display: flex;
}
.hero-proof-face {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  overflow: hidden;
  border: 2.5px solid #09091e;
  margin-left: -9px;
  background: rgba(124,58,237,0.3);
  flex-shrink: 0;
}
.hero-proof-face:first-child { margin-left: 0; }
.hero-proof-face img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 38%; /* Gesichter meist im oberen Drittel */
}
.hero-proof-text {
  font-size: 0.82rem;
  color: #475569;
  line-height: 1.45;
}
.hero-proof-text strong { color: #94a3b8; }

/* Scroll cue (bottom-left) */
.hero-scroll-cue {
  position: absolute;
  bottom: 36px;
  left: clamp(32px, 5vw, 72px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  z-index: 10;
  opacity: 0;
  animation: hw-in 0.7s ease 1.4s forwards;
}
.hero-scroll-line {
  display: block;
  width: 1.5px;
  height: 44px;
  background: linear-gradient(to bottom, rgba(124,58,237,0.7), transparent);
  animation: scroll-pulse 2s ease-in-out infinite;
}
@keyframes scroll-pulse {
  0%,100% { transform: scaleY(1); opacity: 0.7; }
  50%      { transform: scaleY(0.6); opacity: 0.3; }
}
.hero-scroll-label {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #334155;
}

/* ── RIGHT side: Photo Mosaic ── */
.hero-right {
  position: relative;
  overflow: hidden;
  background: #06061a;
}

/* Left-edge gradient so mosaic blends into left panel */
.hero-right-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to right, #09091e 0%, transparent 18%),
    linear-gradient(to bottom, rgba(9,9,30,0.55) 0%, transparent 20%, transparent 80%, rgba(9,9,30,0.7) 100%);
  z-index: 3;
  pointer-events: none;
}

/* 3-column masonry */
.hero-mosaic {
  display: flex;
  gap: 8px;
  padding: 8px;
  height: 100%;
  min-height: 100vh;
}
.hm-col {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}
/* Col offsets for staggered look */
.hm-col--offset    { padding-top: 64px;  }
.hm-col--offset-sm { padding-top: 28px;  }

/* Individual cells */
.hm-cell {
  border-radius: 10px;
  overflow: hidden;
  flex-shrink: 0;
  position: relative;
}
.hm-cell img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%; /* Fallback: leicht über Mitte – Gesicht meist dort */
  display: block;
  filter: brightness(0.78) saturate(0.85);
  transition: filter 0.55s ease, transform 0.65s cubic-bezier(0.22,1,0.36,1);
  transform: scale(1.01);
}
.hm-cell:hover img {
  filter: brightness(0.95) saturate(1.05);
  transform: scale(1.06);
}

/* Cell height variants */
.hm-cell--sm  { height: clamp(100px, 16vw, 180px); }
.hm-cell--md  { height: clamp(140px, 22vw, 240px); }
.hm-cell--lg  { height: clamp(180px, 28vw, 300px); }
.hm-cell--xl  { height: clamp(220px, 34vw, 360px); }

/* Animate columns in with stagger */
.hm-col:nth-child(1) { animation: col-rise 1.1s cubic-bezier(0.22,1,0.36,1) 0.3s both; }
.hm-col:nth-child(2) { animation: col-rise 1.1s cubic-bezier(0.22,1,0.36,1) 0.1s both; }
.hm-col:nth-child(3) { animation: col-rise 1.1s cubic-bezier(0.22,1,0.36,1) 0.5s both; }
@keyframes col-rise {
  from { opacity: 0; transform: translateY(48px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Floating info cards ── */
.hero-float-card {
  position: absolute;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(9,9,30,0.82);
  backdrop-filter: blur(24px) saturate(1.5);
  -webkit-backdrop-filter: blur(24px) saturate(1.5);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 16px;
  padding: 14px 18px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.5);
  animation: card-float 5s ease-in-out infinite;
}
.hero-float-card--top {
  top: clamp(90px, 12vh, 130px);
  left: 14px;
  animation-delay: 0s;
  border-color: rgba(124,58,237,0.3);
}
.hero-float-card--bottom {
  bottom: clamp(60px, 10vh, 100px);
  right: 14px;
  animation-delay: 1.8s;
  border-color: rgba(236,72,153,0.25);
}
@keyframes card-float {
  0%,100% { transform: translateY(0); }
  50%      { transform: translateY(-7px); }
}

.hfc-icon {
  width: 36px; height: 36px;
  border-radius: 10px;
  background: linear-gradient(135deg, #7c3aed, #ec4899);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.9rem;
  color: #fff;
  flex-shrink: 0;
}
.hfc-body {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.hfc-num {
  font-size: 1.1rem;
  font-weight: 900;
  color: #f1f5f9;
  line-height: 1;
}
.hfc-lbl {
  font-size: 0.7rem;
  color: #64748b;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  white-space: nowrap;
}

.hero-float-faces {
  display: flex;
}
.hero-float-faces img {
  width: 28px; height: 28px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center 40%; /* Fallback; individuelle Werte per Inline-Style */
  border: 2px solid rgba(9,9,30,0.9);
  margin-left: -8px;
  flex-shrink: 0;
  display: block;
}
.hero-float-faces img:first-child { margin-left: 0; }

/* ── Responsive: Tablet ── */
@media (max-width: 900px) {
  .hero-section {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
    min-height: auto;
  }
  .hero-left {
    padding: 120px 28px 40px;
    order: 1;
    background: none;
  }
  .hero-right {
    order: 2;
    height: 58vw;
    min-height: 300px;
  }
  .hero-right-overlay {
    background:
      linear-gradient(to bottom, #09091e 0%, transparent 18%, transparent 75%, #09091e 100%);
  }
  .hero-mosaic { min-height: 58vw; }
  .hm-cell--xl { height: clamp(100px, 18vw, 200px); }
  .hm-cell--lg { height: clamp(80px,  15vw, 170px); }
  .hm-cell--md { height: clamp(70px,  12vw, 140px); }
  .hm-cell--sm { height: clamp(60px,  10vw, 110px); }
  .hero-float-card--top    { top: 12px; left: 12px; }
  .hero-float-card--bottom { bottom: 12px; right: 12px; }
  .hero-scroll-cue { display: none; }
}

/* ── Responsive: Mobile ── */
@media (max-width: 540px) {
  .hero-headline { font-size: clamp(2.6rem, 10vw, 3.8rem); }
  .hero-left { padding: 100px 20px 36px; }
  .hero-right { height: 75vw; }
  .hm-col--offset    { padding-top: 24px; }
  .hm-col--offset-sm { padding-top: 10px; }
  .hero-float-card { padding: 10px 14px; }
  .hfc-num { font-size: 0.95rem; }
  .hero-actions { flex-direction: column; }
  .hero-actions .btn { text-align: center; justify-content: center; }
}

/* ============================================================
   VISION SECTION
   ============================================================ */
.vision-section {
  position: relative;
  z-index: 1;
  padding: clamp(80px, 12vh, 140px) 0;
  background: linear-gradient(180deg, var(--clr-bg) 0%, var(--clr-bg-2) 100%);
  text-align: center;
  overflow: hidden;
  scroll-margin-top: 80px;
}

/* Alle Section-Anchors erhalten Scroll-Offset für den fixierten Header */
#vision, #smilemap, #mitmachen, #rebellion, #team, #spenden {
  scroll-margin-top: 80px;
}

.vision-headline {
  font-size: clamp(2.5rem, 7vw, 5.5rem);
  font-weight: 900;
  line-height: 1.05;
  margin-bottom: 28px;
  text-wrap: balance;
}

.vision-intro {
  font-size: clamp(1rem, 2vw, 1.2rem);
  color: var(--clr-text-muted);
  line-height: 1.8;
  max-width: 680px;
  margin: 0 auto 60px;
}

/* Impact Cards */
.impact-grid {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 0;
  flex-wrap: wrap;
  margin: 0 auto 60px;
  max-width: 860px;
}

.impact-card {
  flex: 1 1 300px;
  padding: clamp(32px, 5vw, 48px) clamp(24px, 4vw, 40px);
  border-radius: var(--radius-xl);
  background: var(--grad-card);
  border: 1px solid var(--clr-border);
  position: relative;
  overflow: hidden;
  text-align: left;
  transition: transform var(--transition), box-shadow var(--transition);
}

.impact-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-card);
}

.impact-card--charity { border-color: rgba(236,72,153,0.3); }
.impact-card--growth  { border-color: rgba(249,115,22,0.3); }

.impact-icon {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  margin-bottom: 20px;
}

.impact-card--charity .impact-icon {
  background: rgba(236,72,153,0.2);
  color: var(--clr-pink);
}

.impact-card--growth .impact-icon {
  background: rgba(249,115,22,0.2);
  color: var(--clr-coral);
}

.impact-percent {
  font-size: clamp(3rem, 6vw, 4.5rem);
  font-weight: 900;
  line-height: 1;
  margin-bottom: 12px;
}

.impact-card--charity .impact-percent { color: var(--clr-pink); }
.impact-card--growth .impact-percent  { color: var(--clr-coral); }

.impact-title {
  font-size: 1.3rem;
  font-weight: 800;
  margin-bottom: 12px;
}

.impact-desc {
  font-size: 0.95rem;
  color: var(--clr-text-muted);
  line-height: 1.7;
  margin-bottom: 20px;
}

.impact-tag {
  display: inline-block;
  padding: 4px 14px;
  border-radius: 50px;
  background: var(--clr-surface-2);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--clr-text-muted);
}

.impact-divider-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 clamp(8px, 3vw, 32px);
}

.impact-plus {
  font-size: 3rem;
  font-weight: 900;
  color: var(--clr-violet);
  filter: drop-shadow(0 0 12px rgba(139,92,246,0.5));
}

/* Quote */
.vision-quote {
  max-width: 680px;
  margin: 0 auto;
  padding: 40px;
  border-radius: var(--radius-xl);
  background: var(--clr-surface);
  border-left: 4px solid var(--clr-violet);
  text-align: left;
}

.vision-quote p {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.1rem, 2.5vw, 1.4rem);
  line-height: 1.6;
  color: var(--clr-text);
  margin-bottom: 16px;
}

.vision-quote cite {
  font-size: 0.9rem;
  font-style: normal;
  color: var(--clr-violet);
  font-weight: 700;
}

/* ============================================================
   SMILEMAP SECTION
   ============================================================ */
/* ═══════════════════════════════════════════════════════
   SMILEMAP / FLASHMAP SECTION
   ═══════════════════════════════════════════════════════ */

.smilemap-section {
  position: relative;
  z-index: 1;
  padding: clamp(80px, 12vh, 140px) 0 0;
  background: linear-gradient(180deg, var(--clr-bg-2) 0%, #06060f 100%);
  overflow: hidden;
}

.smilemap-header {
  text-align: center;
  margin-bottom: 32px;
  position: relative;
  z-index: 2;
}
.smilemap-header .section-subline { margin: 0 auto; }

/* ── Ambient Glow Blobs – dezent ──────────────────────── */
.sm-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(100px);
  pointer-events: none;
  z-index: 0;
}
.sm-blob--1 {
  width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(124,58,237,.12) 0%, transparent 70%);
  top: -100px; left: -150px;
  animation: blob-drift 18s ease-in-out infinite alternate;
}
.sm-blob--2 {
  width: 400px; height: 400px;
  background: radial-gradient(circle, rgba(236,72,153,.09) 0%, transparent 70%);
  top: 40%; right: -120px;
  animation: blob-drift 22s ease-in-out infinite alternate-reverse;
}
.sm-blob--3 {
  width: 350px; height: 350px;
  background: radial-gradient(circle, rgba(249,115,22,.07) 0%, transparent 70%);
  bottom: 0; left: 40%;
  animation: blob-drift 16s ease-in-out infinite alternate;
}
@keyframes blob-drift {
  from { transform: translate(0,0) scale(1); }
  to   { transform: translate(40px,30px) scale(1.15); }
}

/* ============================================================
   SMILE MAP — Leaflet.js Interaktive Weltkarte v6
   ============================================================ */

/* ── Stage wrapper ── */
/* ── Stage wrapper ── */
.smilemap-stage {
  position: relative;
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 clamp(12px, 3vw, 40px);
  user-select: none;
}

/* ── Leaflet-Karten-Container ── */
#smilemap-map {
  width: 100%;
  height: clamp(420px, 62vw, 700px);
  border-radius: 24px;
  overflow: hidden;
  border: 1px solid rgba(124,58,237,.22);
  box-shadow:
    0 0 0 1px rgba(124,58,237,.07),
    0 32px 80px rgba(0,0,0,.65),
    inset 0 1px 0 rgba(255,255,255,.04);
  background: #0b0b1a;
  cursor: grab;
  z-index: 1;
}
#smilemap-map:active { cursor: grabbing; }

/* Leaflet-Overrides — Brand-Farben */
.leaflet-container {
  background: #0b0b1a !important;
  font-family: var(--font-main) !important;
}
.leaflet-control-attribution {
  background: rgba(6,8,16,.7) !important;
  border-radius: 8px 0 0 0 !important;
}

/* ── Zoom controls (eigene Buttons) ── */
.smap-controls {
  position: absolute;
  top: 16px;
  right: clamp(24px, 4vw, 56px);
  display: flex;
  flex-direction: column;
  gap: 5px;
  z-index: 800;
}
.smap-ctrl-btn {
  width: 42px; height: 42px;
  border-radius: 13px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(6,8,16,.88);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  color: rgba(255,255,255,.8);
  font-size: .95rem;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all .18s;
  font-family: inherit;
  box-shadow: 0 2px 16px rgba(0,0,0,.5);
}
.smap-ctrl-btn:hover {
  background: rgba(124,58,237,.45);
  border-color: rgba(124,58,237,.8);
  color: #fff;
  box-shadow: 0 0 22px rgba(124,58,237,.4);
  transform: scale(1.07);
}

/* ── Stats pill ── */
.smap-stats-pill {
  position: absolute;
  top: 16px;
  left: clamp(24px, 4vw, 56px);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(6,8,16,.88);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  border: 1px solid rgba(74,222,128,.35);
  border-radius: 30px;
  padding: 8px 18px;
  font-size: .82rem;
  font-weight: 700;
  color: var(--clr-text);
  z-index: 800;
  box-shadow: 0 2px 14px rgba(0,0,0,.4);
  pointer-events: none;
}
.smap-live-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #4ade80;
  flex-shrink: 0;
  animation: smap-live-pulse 1.6s ease-in-out infinite;
}
@keyframes smap-live-pulse {
  0%,100% { opacity:1; transform:scale(1);   box-shadow:0 0 0 0 rgba(74,222,128,.5); }
  50%      { opacity:.6; transform:scale(1.5); box-shadow:0 0 0 5px rgba(74,222,128,0); }
}

/* ── Hint bar (unten mitte) ── */
.smap-hint {
  position: absolute;
  bottom: 56px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(6,8,16,.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 30px;
  padding: 8px 22px;
  font-size: .76rem;
  color: var(--clr-text-muted);
  pointer-events: none;
  white-space: nowrap;
  z-index: 800;
  max-width: calc(100% - 48px);
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Region-Filter-Leiste ── */
.smap-filter-row {
  position: absolute;
  bottom: 16px;
  left: clamp(24px, 4vw, 56px);
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  z-index: 800;
}
.pgm-filter-btn {
  padding: 7px 15px;
  border-radius: 30px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(6,8,16,.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  color: rgba(255,255,255,.65);
  font-size: .76rem;
  font-weight: 700;
  cursor: pointer;
  transition: all .2s;
  white-space: nowrap;
  font-family: inherit;
}
.pgm-filter-btn:hover {
  background: rgba(124,58,237,.28);
  border-color: rgba(124,58,237,.55);
  color: #c4b5fd;
}
.pgm-filter-btn.active {
  background: linear-gradient(135deg, rgba(124,58,237,.65), rgba(236,72,153,.5));
  border-color: rgba(124,58,237,.8);
  color: #fff;
  box-shadow: 0 0 20px rgba(124,58,237,.35);
}

/* ── Hover-Tooltip ── */
.smap-tooltip {
  position: absolute;
  z-index: 900;
  pointer-events: none;
  background: rgba(6,8,16,.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(124,58,237,.45);
  border-radius: 14px;
  padding: 10px 16px;
  font-size: .82rem;
  color: var(--clr-text);
  box-shadow: 0 8px 32px rgba(0,0,0,.55), 0 0 20px rgba(124,58,237,.2);
  opacity: 0;
  transition: opacity .15s;
  max-width: 220px;
  line-height: 1.4;
}
.smap-tooltip strong { display: block; font-weight: 800; font-size: .88rem; }
.smap-tooltip span   { color: var(--clr-text-muted); font-size: .76rem; }
.smap-tooltip--visible { opacity: 1; }

/* ── Smiler-Pin ── */
.smap-pin {
  display: flex;
  flex-direction: column;
  align-items: center;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,.6));
  transition: transform .15s;
  cursor: pointer;
}
.smap-pin:hover { transform: scale(1.12) translateY(-2px); }

.smap-pin-avatar {
  width: 42px; height: 42px;
  border-radius: 50%;
  border: 3px solid var(--ring, #7c3aed);
  background: rgba(15,15,40,.9);
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  box-shadow:
    0 0 0 2px rgba(0,0,0,.5),
    0 0 20px color-mix(in srgb, var(--ring, #7c3aed) 50%, transparent);
  transition: box-shadow .2s;
  font-size: 1.35rem;
}
.smap-pin:hover .smap-pin-avatar {
  box-shadow:
    0 0 0 2px rgba(0,0,0,.5),
    0 0 32px color-mix(in srgb, var(--ring, #7c3aed) 80%, transparent);
}

.smap-pin-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--ring, #7c3aed);
  margin-top: 3px;
  box-shadow: 0 0 8px var(--ring, #7c3aed);
}

/* ── Cluster-Icon ── */
.smap-cluster {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.smap-cluster-inner {
  width: 100%; height: 100%;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(124,58,237,.85), rgba(236,72,153,.75));
  border: 2.5px solid rgba(255,255,255,.25);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  box-shadow: 0 0 0 3px rgba(124,58,237,.25), 0 8px 28px rgba(0,0,0,.5);
  transition: transform .15s;
}
.smap-cluster:hover .smap-cluster-inner { transform: scale(1.08); }
.smap-cluster-count {
  font-size: .78rem; font-weight: 900;
  color: #fff; line-height: 1;
}
.smap-cluster-label { font-size: .72rem; line-height: 1; }
.smap-cluster-ring {
  position: absolute; inset: -5px;
  border-radius: 50%;
  border: 1.5px solid rgba(124,58,237,.35);
  animation: cluster-pulse 2.4s ease-in-out infinite;
  pointer-events: none;
}
@keyframes cluster-pulse {
  0%,100% { opacity:.6; transform:scale(1); }
  50%      { opacity:.15; transform:scale(1.18); }
}

/* ── Detail-Popup ── */
.smap-popup {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%) scale(1);
  z-index: 900;
  background: rgba(6,8,16,.97);
  backdrop-filter: blur(40px) saturate(1.6);
  -webkit-backdrop-filter: blur(40px) saturate(1.6);
  border: 1px solid rgba(124,58,237,.55);
  border-radius: 28px;
  padding: 32px 28px 28px;
  width: min(310px, calc(100vw - 36px));
  text-align: center;
  box-shadow:
    0 0 0 1px rgba(124,58,237,.12),
    0 0 70px rgba(124,58,237,.28),
    0 36px 90px rgba(0,0,0,.75);
  animation: smap-popup-in .38s cubic-bezier(.34,1.56,.64,1) both;
}
.smap-popup--hidden { display: none; }
.smap-popup--visible { display: block; }
@keyframes smap-popup-in {
  from { opacity:0; transform:translate(-50%,calc(-50% + 28px)) scale(.86); }
  to   { opacity:1; transform:translate(-50%,-50%) scale(1); }
}

.smap-popup-close {
  position: absolute; top:12px; right:12px;
  width:30px; height:30px;
  border-radius:50%;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  color: var(--clr-text-muted);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: .8rem;
  transition: all .18s;
}
.smap-popup-close:hover { background: var(--clr-pink); color: #fff; border-color: var(--clr-pink); }

.smap-popup-avatar {
  width: 80px; height: 80px;
  border-radius: 50%;
  background: var(--clr-surface-2);
  margin: 0 auto 16px;
  border: 3px solid var(--ring, rgba(124,58,237,.6));
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  font-size: 2.2rem;
  box-shadow: 0 0 32px color-mix(in srgb, var(--ring, #7c3aed) 50%, transparent);
}

.smap-popup-name  { font-size: 1.05rem; font-weight: 800; margin-bottom: 5px; }
.smap-popup-place { font-size: .82rem; color: var(--clr-text-muted); margin-bottom: 10px; }

.smap-popup-tag {
  display: inline-block;
  font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  padding: 4px 12px; border-radius: 20px;
  border: 1px solid rgba(124,58,237,.4);
  margin-bottom: 14px;
}

.smap-popup-msg {
  font-style: italic; font-size: .86rem;
  color: var(--clr-text-muted); line-height: 1.65;
  padding: 10px 14px;
  background: rgba(255,255,255,.03);
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.06);
  min-height: 20px;
}
.smap-popup-msg:empty { display: none; }

/* ── Bottom CTA row ── */
.flashmap-cta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: clamp(28px,4vh,52px) clamp(12px,3vw,40px) clamp(60px,8vh,100px);
  flex-wrap: wrap;
  max-width: 1400px;
  margin: 0 auto;
}
.flashmap-cta-left {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.flashmap-cta-count {
  font-size: clamp(1.1rem, 2.5vw, 1.5rem);
  font-weight: 800;
  color: var(--clr-text);
}
.flashmap-cta-sub {
  font-size: .9rem;
  color: var(--clr-text-muted);
}

/* ── Responsive ── */
@media (max-width: 768px) {
  #smilemap-map { height: clamp(320px, 78vw, 480px); }
  .smap-hint { display: none; }
  .smap-filter-row { gap: 4px; }
  .pgm-filter-btn { padding: 5px 10px; font-size: .7rem; }
  .smap-ctrl-btn { width: 38px; height: 38px; }
  .smap-stats-pill { font-size: .76rem; padding: 6px 12px; }
}
@media (max-width: 480px) {
  .smap-filter-row { bottom: 10px; left: 10px; }
  .smap-controls   { right: 10px; }
  .flashmap-cta-row { flex-direction: column; align-items: flex-start; }
  .smap-popup { padding: 24px 18px 20px; }
}

/* ============================================================
   STEPS / MITMACHEN SECTION
   ============================================================ */
.steps-section {
  position: relative;
  z-index: 1;
  padding: clamp(80px, 12vh, 140px) 0;
  background: var(--clr-bg);
  text-align: center;
  overflow: hidden;
}

.steps-section .container { max-width: 1100px; }
/* Subline-Box (max-width 600px) unter der zentrierten Headline mittig setzen */
.steps-section .section-subline { margin-left: auto; margin-right: auto; }

.steps-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(16px, 3vw, 28px);
  margin: 52px 0;
  max-width: 860px;
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 560px) {
  .steps-grid {
    grid-template-columns: 1fr;
  }
}

.step-card {
  background: var(--grad-card);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-xl);
  padding: clamp(28px, 4vw, 40px) clamp(20px, 3vw, 32px);
  text-align: left;
  position: relative;
  overflow: hidden;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}

.step-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  opacity: 0;
  transition: opacity var(--transition);
  pointer-events: none;
}

.step-card:hover {
  transform: translateY(-6px) scale(1.02);
  box-shadow: 0 20px 60px rgba(0,0,0,0.4);
}

.step-card[data-step="1"] { border-top: 3px solid var(--clr-purple); }
.step-card[data-step="2"] { border-top: 3px solid var(--clr-pink); }
.step-card[data-step="3"] { border-top: 3px solid var(--clr-coral); }
.step-card[data-step="4"] { border-top: 3px solid var(--clr-yellow); }

.step-card:hover { border-color: var(--clr-violet); }

.step-number {
  font-size: 3.5rem;
  font-weight: 900;
  line-height: 1;
  opacity: 0.08;
  position: absolute;
  top: 16px; right: 20px;
  color: var(--clr-text);
}

.step-icon {
  width: 52px; height: 52px;
  border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem;
  margin-bottom: 16px;
}

.step-card[data-step="1"] .step-icon { background: rgba(124,58,237,0.2); color: var(--clr-purple); }
.step-card[data-step="2"] .step-icon { background: rgba(236,72,153,0.2); color: var(--clr-pink); }
.step-card[data-step="3"] .step-icon { background: rgba(249,115,22,0.2); color: var(--clr-coral); }
.step-card[data-step="4"] .step-icon { background: rgba(250,204,21,0.2); color: var(--clr-yellow); }

.step-title {
  font-size: 1.15rem;
  font-weight: 800;
  margin-bottom: 10px;
}

.step-desc {
  font-size: 0.92rem;
  color: var(--clr-text-muted);
  line-height: 1.65;
}

/* Upload Area */
/* ── Upload Card (auf die Design-Sprache der Seite abgestimmt) ── */
.upload-area {
  position: relative;
  box-sizing: border-box;
  max-width: 560px;
  margin: 0 auto;                 /* bleibt zentriert */
  border-radius: var(--radius-xl);
  border: 1px solid rgba(139,92,246,.28);
  background:
    linear-gradient(145deg, rgba(124,58,237,0.10) 0%, rgba(236,72,153,0.06) 100%),
    var(--clr-surface);
  box-shadow: 0 24px 80px rgba(0,0,0,.40), 0 0 60px rgba(124,58,237,.07);
  overflow: hidden;
  transition: border-color .25s, box-shadow .25s;
}

.upload-area.drag-over {
  border-color: var(--clr-pink);
  box-shadow: 0 24px 80px rgba(0,0,0,.45), 0 0 0 3px rgba(236,72,153,.35);
}

/* Datei-Input nur versteckt halten (per Button/Drag ausgelöst) – NICHT als
   Overlay, damit die Formularfelder anklickbar bleiben. */
.upload-area input[type="file"] {
  position: absolute;
  width: 1px; height: 1px;
  opacity: 0;
  pointer-events: none;
}

.upload-inner {
  position: relative;
  z-index: 1;
  padding: clamp(32px, 5vw, 52px) clamp(22px, 4vw, 40px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: center;
}

.upload-inner > .btn {
  width: 100%;
  justify-content: center;
  margin-top: 4px;
}

.upload-icon {
  width: 72px; height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 1.8rem;
  color: #fff;
  background: var(--grad-main);
  box-shadow: 0 10px 30px rgba(124,58,237,.35);
  margin-bottom: 2px;
}

.upload-title {
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -.01em;
}

.upload-hint {
  font-size: 0.9rem;
  color: var(--clr-text-muted);
  margin-top: -6px;
}

/* ── Formularfelder (an .wsd-field angeglichen) ── */
.upload-form-fields {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 6px 0 2px;
  text-align: left;
}
.upload-field {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.upload-field label {
  font-size: .74rem;
  font-weight: 700;
  color: var(--clr-text-muted);
  text-transform: uppercase;
  letter-spacing: .07em;
}
.upload-field input,
.upload-field textarea {
  box-sizing: border-box;
  width: 100%;
  background: rgba(255,255,255,.06);
  border: 1.5px solid rgba(255,255,255,.12);
  border-radius: 12px;
  padding: 14px 16px;
  font-size: .96rem;
  font-family: inherit;
  color: var(--clr-text);
  transition: border-color .2s, box-shadow .2s, background .2s;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}
.upload-field textarea { min-height: 84px; line-height: 1.5; resize: vertical; }
.upload-field input:hover,
.upload-field textarea:hover {
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.2);
}
.upload-field input:focus,
.upload-field textarea:focus {
  background: rgba(255,255,255,.09);
  border-color: rgba(139,92,246,.65);
  box-shadow: 0 0 0 4px rgba(139,92,246,.12);
}
.upload-field input::placeholder,
.upload-field textarea::placeholder { color: rgba(255,255,255,.25); }

.required-star { color: var(--clr-pink); }
.optional-label {
  color: var(--clr-text-muted);
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
}

.upload-consent {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  text-align: left;
  font-size: .82rem;
  line-height: 1.5;
  color: var(--clr-text-muted);
  cursor: pointer;
}
.upload-consent input[type="checkbox"] {
  margin-top: 2px;
  width: 18px; height: 18px;
  flex-shrink: 0;
  accent-color: var(--clr-violet);
  cursor: pointer;
}
.upload-consent a { color: var(--clr-violet); text-decoration: underline; }

.upload-field-error {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #f87171;
  font-size: .85rem;
  margin-top: 2px;
}

/* Upload Preview */
.upload-preview {
  padding: 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.upload-preview img {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  object-fit: cover;
  border: 4px solid var(--clr-violet);
  box-shadow: 0 0 30px rgba(139,92,246,0.4);
}

.upload-preview-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}

/* Upload Success */
.upload-success {
  padding: 60px 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
}

.success-icon {
  font-size: 4rem;
  color: #4ade80;
  animation: pop-in 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes pop-in {
  from { transform: scale(0); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}

.success-title {
  font-size: 1.4rem;
  font-weight: 800;
}

.success-sub {
  font-size: 1rem;
  color: var(--clr-text-muted);
}

.success-receipt {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 18px;
  border-radius: 50px;
  background: rgba(74,222,128,.12);
  border: 1px solid #4ade80;
  color: #4ade80;
  font-size: .82rem;
  font-weight: 700;
}

/* ── CHF Badge in Upload-Inner ──────────────────────────── */
.upload-chf-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 18px;
  border-radius: 50px;
  background: linear-gradient(135deg,rgba(124,58,237,.2),rgba(236,72,153,.2));
  border: 1px solid rgba(139,92,246,.5);
  color: var(--clr-violet);
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .02em;
}

.upload-chf-badge i { color: var(--clr-yellow); }

/* ── Payment Step ───────────────────────────────────────── */
.upload-payment {
  padding: clamp(24px,4vw,40px);
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.payment-header {
  display: flex;
  align-items: center;
  gap: 18px;
}

.payment-preview-thumb {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid var(--clr-violet);
  flex-shrink: 0;
  box-shadow: 0 0 20px rgba(139,92,246,.4);
}

.payment-preview-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}

.payment-ready {
  font-size: .82rem;
  color: var(--clr-text-muted);
  margin-bottom: 2px;
}

.payment-headline h3 {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--clr-text);
  line-height: 1.3;
}

.payment-sub {
  font-size: .9rem;
  color: var(--clr-text-muted);
  margin-top: 2px;
}

.payment-sub strong {
  color: var(--clr-violet);
  font-size: 1.1rem;
}

/* Breakdown strips */
.payment-breakdown {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.payment-split {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border-radius: var(--radius-md);
  font-size: .85rem;
  color: var(--clr-text-muted);
}

.payment-split strong { color: var(--clr-text); }

.payment-split--charity {
  background: rgba(236,72,153,.1);
  border: 1px solid rgba(236,72,153,.25);
}

.payment-split--charity i { color: var(--clr-pink); }

.payment-split--grow {
  background: rgba(74,222,128,.07);
  border: 1px solid rgba(74,222,128,.2);
}

.payment-split--grow i { color: #4ade80; }

/* Method buttons */
.payment-methods-label {
  font-size: .82rem;
  color: var(--clr-text-muted);
  font-weight: 600;
  margin-bottom: 4px;
}

.payment-methods-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
}

.pay-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 14px 10px;
  border-radius: var(--radius-md);
  border: 1px solid var(--clr-border);
  background: var(--clr-surface-2);
  color: var(--clr-text);
  font-family: inherit;
  cursor: pointer;
  transition: all var(--transition);
  min-height: 72px;
}

.pay-btn:hover:not(:disabled) {
  border-color: var(--clr-violet);
  background: rgba(139,92,246,.15);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(139,92,246,.25);
}

.pay-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.pay-btn-logo {
  font-size: .95rem;
  font-weight: 900;
  letter-spacing: .03em;
}

.pay-btn-sub {
  font-size: .68rem;
  color: var(--clr-text-muted);
  text-align: center;
}

.pay-btn--twint .pay-btn-logo { color: #000; background: #fff; padding: 2px 6px; border-radius: 4px; }
.pay-btn--twint { background: rgba(255,255,255,.07); }
.pay-btn--twint:hover:not(:disabled) { border-color: #555; background: rgba(255,255,255,.12); box-shadow: none; }

.pay-btn--paypal .pay-btn-logo { color: #003087; background: #ffc439; padding: 2px 6px; border-radius: 4px; }

.pay-btn--card i { font-size: 1.4rem; color: var(--clr-violet); }

/* Security note */
.payment-security {
  font-size: .75rem;
  color: var(--clr-text-muted);
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.payment-security i { color: #4ade80; }

/* Back button */
.payment-back {
  align-self: flex-start;
  font-size: .82rem;
  padding: 8px 16px;
}

@media (max-width: 440px) {
  .payment-methods-grid { grid-template-columns: 1fr; }
  .payment-header { flex-direction: column; text-align: center; }
}

.hidden { display: none !important; }

/* ============================================================
   TEAM SECTION
   ============================================================ */
.team-section {
  position: relative;
  z-index: 1;
  padding: clamp(80px, 12vh, 140px) 0;
  background: linear-gradient(180deg, var(--clr-bg) 0%, var(--clr-bg-2) 100%);
  text-align: center;
  overflow: hidden;
}

.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(24px, 4vw, 40px);
  margin-top: 52px;
  text-align: left;
}

.team-card {
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-xl);
  padding: clamp(32px, 5vw, 48px);
  display: flex;
  flex-direction: column;
  gap: 24px;
  transition: transform var(--transition), box-shadow var(--transition);
}

.team-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-card);
}

.team-avatar-wrap { flex-shrink: 0; }

.team-avatar {
  width: 80px; height: 80px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  position: relative;
}

.team-avatar::before {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  background: var(--grad-main);
  z-index: -1;
  animation: rotate-grad 4s linear infinite;
}

@keyframes rotate-grad {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.team-avatar--tobi { background: rgba(124,58,237,0.2); }
.team-avatar--tim  { background: rgba(249,115,22,0.2); }

.avatar-initial {
  font-size: 2rem;
  font-weight: 900;
  background: var(--grad-main);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.team-name {
  font-size: 1.6rem;
  font-weight: 900;
  margin-bottom: 4px;
}

.team-role {
  font-size: 0.85rem;
  color: var(--clr-violet);
  font-weight: 600;
  letter-spacing: 0.05em;
  margin-bottom: 16px;
}

.team-quote {
  font-style: italic;
  font-size: 0.95rem;
  color: var(--clr-text-muted);
  line-height: 1.7;
  border-left: 3px solid var(--clr-violet);
  padding-left: 18px;
}

/* ============================================================
   DONATION SECTION
   ============================================================ */
.donation-section {
  position: relative;
  z-index: 1;
  padding: clamp(80px, 12vh, 140px) 0;
  background: radial-gradient(ellipse 70% 50% at 50% 50%, rgba(124,58,237,0.15) 0%, transparent 70%),
              var(--clr-bg-2);
  text-align: center;
  overflow: hidden;
}

.donation-badge { background: rgba(236,72,153,0.15); border-color: var(--clr-pink); color: var(--clr-pink); }
.donation-headline { max-width: 520px; margin: 0 auto 16px; }
.donation-subline { margin: 0 auto 48px; }

.donation-card {
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-xl);
  padding: clamp(32px, 5vw, 52px);
  max-width: 580px;
  margin: 0 auto;
  text-align: left;
}

.donation-label {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--clr-text-muted);
  margin-bottom: 14px;
  display: block;
}

/* Amount Buttons */
.donation-amounts { margin-bottom: 28px; }

.amount-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 20px;
}

.amount-btn {
  flex: 1 1 80px;
  min-width: 70px;
  padding: 12px 10px;
  border-radius: var(--radius-md);
  border: 2px solid var(--clr-border);
  background: var(--clr-surface);
  color: var(--clr-text);
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
  text-align: center;
  white-space: nowrap;
  transition: all var(--transition);
}

.amount-btn:hover {
  border-color: var(--clr-violet);
  color: var(--clr-violet);
}

.amount-btn.active {
  background: var(--grad-main);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 4px 20px rgba(139,92,246,0.4);
  transform: scale(1.05);
}

/* Custom Amount */
.donation-custom { margin-top: 4px; }

.custom-amount-wrap {
  display: flex;
  align-items: center;
  border: 2px solid var(--clr-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: border-color var(--transition);
}

.custom-amount-wrap:focus-within { border-color: var(--clr-violet); }

.currency-symbol {
  padding: 12px 14px;
  background: var(--clr-surface-2);
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--clr-text-muted);
  border-right: 1px solid var(--clr-border);
  white-space: nowrap;
  flex-shrink: 0;
}

.custom-amount-input {
  flex: 1;
  padding: 12px 16px;
  background: transparent;
  border: none;
  color: var(--clr-text);
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  outline: none;
  min-width: 0;
}

.custom-amount-input::placeholder { color: var(--clr-text-muted); }

/* Hide number input arrows */
.custom-amount-input::-webkit-outer-spin-button,
.custom-amount-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.custom-amount-input[type=number] { -moz-appearance: textfield; }

/* Impact Split */
.donation-impact {
  margin-bottom: 24px;
  padding: 20px 24px;
  border-radius: var(--radius-md);
  background: var(--clr-surface-2);
}

.impact-split {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}

.impact-split-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  flex: 1 1 120px;
}

.impact-split-item i {
  font-size: 1.3rem;
  margin-bottom: 4px;
}

.impact-split-item:first-child i { color: var(--clr-pink); }
.impact-split-item:last-child i  { color: var(--clr-coral); }

.impact-split-item span {
  font-size: 1.4rem;
  font-weight: 900;
  color: var(--clr-text);
}

.impact-split-item small {
  font-size: 0.78rem;
  color: var(--clr-text-muted);
}

.impact-split-divider {
  font-size: 1.5rem;
  font-weight: 900;
  color: var(--clr-violet);
  flex-shrink: 0;
}

/* Donate Note */
.donation-note {
  text-align: center;
  font-size: 0.8rem;
  color: var(--clr-text-muted);
  margin-top: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 4px;
}

.donation-note i { color: #4ade80; }

/* ============================================================
   GLOBAL SMILE DAY — Anmelde-Sektion
   ============================================================ */

/* WSD-Button im Hero */
.btn-wsd {
  border-color: rgba(250,204,21,.5);
  color: #facc15;
  position: relative;
  overflow: hidden;
}
.btn-wsd::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(250,204,21,.08), rgba(249,115,22,.06));
  pointer-events: none;
}
.btn-wsd:hover {
  border-color: #facc15;
  background: rgba(250,204,21,.12);
  color: #fde047;
  box-shadow: 0 0 22px rgba(250,204,21,.2);
}

/* Hero — WSD "Ich bin dabei" Button (dritte Zeile) */
.btn-wsd-hero {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 13px 22px;
  border-radius: 50px;
  border: 1.5px solid rgba(250,204,21,.55);
  background: rgba(250,204,21,.07);
  color: #facc15;
  font-size: .9rem;
  font-weight: 700;
  letter-spacing: .02em;
  text-decoration: none;
  transition: background .2s, border-color .2s, box-shadow .2s, color .2s;
  white-space: nowrap;
}
.btn-wsd-hero:hover {
  background: rgba(250,204,21,.15);
  border-color: #facc15;
  color: #fde047;
  box-shadow: 0 0 20px rgba(250,204,21,.18);
}

/* WSD Section */
/* ============================================================
   GLOBAL SMILE DAY — Anmeldung (Standalone, zentriert)
   ============================================================ */

.wsd-section {
  padding: clamp(80px, 12vh, 140px) 0;
  background: var(--clr-bg-2);
  position: relative;
  overflow: hidden;
}
.wsd-section::before {
  content: '';
  position: absolute;
  top: -120px; right: -120px;
  width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(250,204,21,.07) 0%, transparent 70%);
  pointer-events: none;
}
.wsd-section::after {
  content: '';
  position: absolute;
  bottom: -80px; left: -80px;
  width: 400px; height: 400px;
  background: radial-gradient(circle, rgba(124,58,237,.08) 0%, transparent 70%);
  pointer-events: none;
}

/* ── Section Header (zentriert) */
.wsd-section-header {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 40px;
  position: relative;
  z-index: 1;
}
.wsd-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(250,204,21,.1);
  border: 1px solid rgba(250,204,21,.35);
  border-radius: 30px;
  padding: 7px 18px;
  font-size: .78rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: #facc15;
  margin-bottom: 20px;
}
.wsd-headline {
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  font-weight: 900;
  line-height: 1.2;
  margin-bottom: 16px;
}
.wsd-subline {
  font-size: clamp(.9rem, 1.5vw, 1rem);
  color: var(--clr-text-muted);
  line-height: 1.7;
  margin-bottom: 0;
}
.wsd-subline strong { color: var(--clr-text); }

/* ── Fakten-Chips (horizontal, zentriert) */
.wsd-facts-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-bottom: 48px;
  position: relative;
  z-index: 1;
}
.wsd-fact-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 50px;
  padding: 10px 18px;
  font-size: .88rem;
  color: var(--clr-text-muted);
  white-space: nowrap;
}
.wsd-fact-chip .wsd-fact-icon { font-size: 1rem; }

/* ── Form Card (zentriert, max-width) */
.wsd-form-card {
  box-sizing: border-box;
  max-width: 520px;
  margin: 0 auto;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(250,204,21,.25);
  border-radius: 28px;
  padding: 48px 48px 40px;
  box-shadow: 0 24px 80px rgba(0,0,0,.4), 0 0 50px rgba(250,204,21,.06);
  position: relative;
  z-index: 1;
}
@media (max-width: 600px) {
  .wsd-form-card { padding: 32px 24px 28px; border-radius: 20px; }
}

.wsd-form-header {
  text-align: center;
  margin-bottom: 32px;
  padding-bottom: 24px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.wsd-form-emoji {
  font-size: 2.8rem;
  display: block;
  margin-bottom: 12px;
  line-height: 1;
}
.wsd-form-header h3 {
  font-size: 1.4rem;
  font-weight: 900;
  margin-bottom: 6px;
  color: var(--clr-text);
}
.wsd-form-header p {
  font-size: .9rem;
  color: var(--clr-text-muted);
  line-height: 1.5;
}

/* ── Formular — 1-spaltig, grosszügig */
.wsd-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.wsd-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-sizing: border-box;
  width: 100%;
}
.wsd-field label {
  font-size: .78rem;
  font-weight: 700;
  color: var(--clr-text-muted);
  text-transform: uppercase;
  letter-spacing: .07em;
  display: flex;
  align-items: center;
  gap: 6px;
}
.wsd-field input {
  box-sizing: border-box;
  display: block;
  width: 100%;
  background: rgba(255,255,255,.06);
  border: 1.5px solid rgba(255,255,255,.12);
  border-radius: 12px;
  padding: 15px 18px;
  font-size: .97rem;
  color: var(--clr-text);
  font-family: inherit;
  transition: border-color .2s, box-shadow .2s, background .2s;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}
.wsd-field input:hover {
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.2);
}
.wsd-field input:focus {
  background: rgba(255,255,255,.09);
  border-color: rgba(250,204,21,.65);
  box-shadow: 0 0 0 4px rgba(250,204,21,.1);
}
.wsd-field input::placeholder { color: rgba(255,255,255,.2); }

/* kein .wsd-field-row mehr — alle Felder standalone */
.wsd-field-row {
  display: contents;
}

.wsd-form-error {
  font-size: .84rem;
  color: #f87171;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 10px 14px;
  background: rgba(248,113,113,.08);
  border-radius: 10px;
  border: 1px solid rgba(248,113,113,.2);
  margin-top: -4px;
}
.wsd-submit {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  font-size: .97rem;
  padding: 17px 24px;
  margin-top: 4px;
  border-radius: 14px;
  letter-spacing: .02em;
}
.wsd-privacy {
  font-size: .73rem;
  color: var(--clr-text-muted);
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  flex-wrap: wrap;
  line-height: 1.6;
  margin-top: 2px;
}
.wsd-privacy a { color: var(--clr-violet); text-decoration: underline; }
.wsd-privacy i { color: #4ade80; font-size: .8rem; }

/* ── Erfolg-State (zentriert wie Form Card) */
.wsd-success {
  box-sizing: border-box;
  max-width: 520px;
  margin: 0 auto;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(74,222,128,.3);
  border-radius: 28px;
  padding: 48px 40px;
  text-align: center;
  box-shadow: 0 0 50px rgba(74,222,128,.08);
  position: relative;
  z-index: 1;
}
.wsd-success-icon { font-size: 3.2rem; margin-bottom: 14px; display: block; }
.wsd-success h3   { font-size: 1.4rem; font-weight: 900; margin-bottom: 8px; }
.wsd-success p    { font-size: .9rem; color: var(--clr-text-muted); margin-bottom: 6px; }
.wsd-success-sub  { line-height: 1.6; margin-bottom: 22px !important; }
.wsd-success-sub strong { color: var(--clr-text); }
.wsd-success-share p { font-size: .82rem; font-weight: 700; margin-bottom: 10px; color: var(--clr-text-muted); }

/* ── Counter Row */
.wsd-counter-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 36px;
  font-size: .88rem;
  color: var(--clr-text-muted);
  font-weight: 600;
  position: relative;
  z-index: 1;
}
.wsd-counter-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #4ade80;
  animation: smap-live-pulse 1.6s infinite;
  flex-shrink: 0;
}
.wsd-counter-row strong { color: var(--clr-text); font-size: 1.05rem; }



/* ============================================================
   PSYCHO-OPTIMIERUNG v7 — Urgency · Social Proof · Share · Why-Now
   ============================================================ */

/* ─── URGENCY BAR (Global Smile Day Countdown) ─────────────────── */
.urgency-bar {
  position: sticky;
  top: var(--nav-height);
  z-index: 200;
  background: linear-gradient(90deg, #7c3aed 0%, #ec4899 50%, #f97316 100%);
  padding: 10px 16px;
  text-align: center;
}
.urgency-bar-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  max-width: 900px;
  margin: 0 auto;
  font-size: .88rem;
  font-weight: 700;
  color: #fff;
}
.urgency-emoji { font-size: 1.1rem; }
.urg-unit {
  display: inline-block;
  background: rgba(0,0,0,.25);
  border-radius: 6px;
  padding: 2px 7px;
  font-variant-numeric: tabular-nums;
  min-width: 2.2ch;
  text-align: center;
  font-size: .9rem;
}
.urgency-cta {
  background: rgba(255,255,255,.22);
  border: 1px solid rgba(255,255,255,.4);
  border-radius: 20px;
  padding: 5px 16px;
  font-weight: 800;
  font-size: .82rem;
  color: #fff;
  transition: background .18s;
  white-space: nowrap;
}
.urgency-cta:hover { background: rgba(255,255,255,.35); }

/* ─── HERO UPGRADES ───────────────────────────────────────────── */
.live-pulse-dot {
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #4ade80;
  margin-right: 5px;
  animation: smap-live-pulse 1.6s ease-in-out infinite;
}

/* Progress Bar im Hero */
.hero-progress-wrap {
  margin: 22px 0;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px;
  padding: 16px 20px;
}
.hero-progress-label {
  display: flex;
  justify-content: space-between;
  font-size: .78rem;
  font-weight: 600;
  color: var(--clr-text-muted);
  margin-bottom: 10px;
}
.hero-progress-target {
  color: var(--clr-violet);
  font-weight: 800;
}
.hero-progress-track {
  position: relative;
  height: 10px;
  background: rgba(255,255,255,.08);
  border-radius: 10px;
  overflow: hidden;
}
.hero-progress-bar {
  height: 100%;
  background: linear-gradient(90deg, #7c3aed, #ec4899, #f97316);
  border-radius: 10px;
  transition: width 1.2s cubic-bezier(.22,1,.36,1);
  min-width: 4%;
}
.hero-progress-glow {
  position: absolute;
  top: 0; right: 0;
  width: 40px; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.4));
  animation: progress-shine 2s ease-in-out infinite;
}
@keyframes progress-shine {
  0%   { opacity: 0; transform: translateX(-100px); }
  50%  { opacity: 1; }
  100% { opacity: 0; transform: translateX(100px); }
}
.hero-progress-sub {
  font-size: .78rem;
  color: var(--clr-text-muted);
  margin-top: 8px;
}
.hero-progress-sub strong { color: var(--clr-pink); }

/* btn-xl */
.btn-xl {
  padding: 18px 38px !important;
  font-size: 1.08rem !important;
}

/* Trust Chips */
.hero-trust-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 20px;
}
.trust-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 20px;
  padding: 5px 13px;
  font-size: .74rem;
  font-weight: 600;
  color: var(--clr-text-muted);
}
.trust-chip i { color: var(--clr-violet); font-size: .7rem; }

/* "Zuletzt beigetreten" Badge */
.hero-float-card--latest {
  position: absolute;
  bottom: 140px;
  right: -20px;
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(6,8,16,.92);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(74,222,128,.4);
  border-radius: 30px;
  padding: 8px 16px;
  font-size: .78rem;
  z-index: 20;
  animation: hero-float-in 0.6s cubic-bezier(.34,1.56,.64,1) both 1.8s;
  white-space: nowrap;
}
.hfc-dot-green {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #4ade80;
  flex-shrink: 0;
  animation: smap-live-pulse 1.6s infinite;
}
.hfc-lbl-sm { font-size: .75rem; color: var(--clr-text); }

/* ─── SOCIAL PROOF SECTION ────────────────────────────────────── */
.social-proof-section {
  padding: clamp(40px,6vh,70px) 0;
  background: var(--clr-bg);
  border-top: 1px solid rgba(255,255,255,.05);
  border-bottom: 1px solid rgba(255,255,255,.05);
}

/* Live Activity Feed */
.activity-feed-wrap {
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(124,58,237,.2);
  border-radius: 20px;
  padding: 18px 22px;
  margin-bottom: 40px;
  overflow: hidden;
}
.activity-feed-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .78rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--clr-text-muted);
  margin-bottom: 14px;
}
.activity-live-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #4ade80;
  animation: smap-live-pulse 1.6s infinite;
}
.activity-live-label { color: #4ade80; }

.activity-feed {
  display: flex;
  flex-direction: column;
  gap: 0;
  max-height: 180px;
  overflow: hidden;
  position: relative;
}
.activity-feed::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 48px;
  background: linear-gradient(transparent, rgba(11,11,26,.95));
  pointer-events: none;
}
.activity-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid rgba(255,255,255,.04);
  animation: activity-slide-in .4s cubic-bezier(.22,1,.36,1) both;
  font-size: .85rem;
}
.activity-item:last-child { border-bottom: none; }
@keyframes activity-slide-in {
  from { opacity: 0; transform: translateY(-12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.activity-avatar {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: linear-gradient(135deg, #7c3aed, #ec4899);
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem;
  flex-shrink: 0;
  overflow: hidden;
}
.activity-avatar img {
  width: 100%; height: 100%;
  object-fit: cover; border-radius: 50%;
}
.activity-text { flex: 1; line-height: 1.35; }
.activity-text strong { font-weight: 700; color: var(--clr-text); }
.activity-text span   { color: var(--clr-text-muted); font-size: .8rem; }
.activity-time {
  font-size: .72rem;
  color: var(--clr-text-muted);
  white-space: nowrap;
  flex-shrink: 0;
}

/* Proof Stats Row */
.proof-stats-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  flex-wrap: wrap;
}
.proof-stat {
  text-align: center;
  padding: 12px 32px;
}
.proof-stat-num {
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  font-weight: 900;
  background: var(--grad-main);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1.1;
}
.proof-stat-lbl {
  font-size: .78rem;
  color: var(--clr-text-muted);
  font-weight: 600;
  margin-top: 4px;
}
.proof-stat-divider {
  width: 1px;
  height: 48px;
  background: rgba(255,255,255,.1);
  flex-shrink: 0;
}

/* ─── WHY NOW SECTION ─────────────────────────────────────────── */
.why-now-section {
  padding: clamp(70px,10vh,120px) 0;
  background: var(--clr-bg-2);
  position: relative;
  overflow: hidden;
}
.why-now-section::before {
  content: '';
  position: absolute;
  top: -100px; left: 50%;
  transform: translateX(-50%);
  width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(124,58,237,.12) 0%, transparent 70%);
  pointer-events: none;
}
.why-now-inner { max-width: 900px; margin: 0 auto; text-align: center; }
.why-now-badge {
  display: inline-block;
  background: rgba(124,58,237,.15);
  border: 1px solid rgba(124,58,237,.35);
  border-radius: 30px;
  padding: 6px 18px;
  font-size: .78rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--clr-violet);
  margin-bottom: 20px;
}
.why-now-headline {
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  font-weight: 900;
  line-height: 1.2;
  margin-bottom: 50px;
}
.why-now-grid {
  display: grid;
  grid-template-columns: 1fr 1.15fr 1fr;
  gap: 20px;
  margin-bottom: 50px;
}
@media (max-width: 768px) {
  .why-now-grid { grid-template-columns: 1fr; }
}
.why-card {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 20px;
  padding: 28px 24px;
  text-align: left;
  transition: transform .2s, border-color .2s;
}
.why-card:hover {
  transform: translateY(-4px);
  border-color: rgba(124,58,237,.35);
}
.why-card--highlight {
  background: linear-gradient(145deg, rgba(124,58,237,.2), rgba(236,72,153,.12));
  border-color: rgba(124,58,237,.4);
  box-shadow: 0 0 40px rgba(124,58,237,.15);
}
.why-card-icon { font-size: 2rem; margin-bottom: 12px; }
.why-card h3 { font-size: 1.05rem; font-weight: 800; margin-bottom: 10px; }
.why-card p  { font-size: .88rem; color: var(--clr-text-muted); line-height: 1.6; }
.why-card-cta { margin-top: 20px; width: 100%; justify-content: center; }
.why-quote {
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
  border-left: 3px solid var(--clr-violet);
  border-radius: 0 16px 16px 0;
  padding: 22px 28px;
  text-align: left;
  max-width: 700px;
  margin: 0 auto;
}
.why-quote p { font-style: italic; font-size: .95rem; line-height: 1.7; margin-bottom: 10px; }
.why-quote cite { font-size: .8rem; color: var(--clr-text-muted); font-style: normal; }

/* ─── SHARE BLOCK (nach Upload-Erfolg) ───────────────────────── */
.success-share-block {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(124,58,237,.3);
  border-radius: 18px;
  padding: 22px 20px 18px;
  margin: 20px 0 0;
  text-align: center;
}
.success-share-title {
  font-size: .9rem;
  font-weight: 700;
  margin-bottom: 14px;
  color: var(--clr-text);
}
.success-share-title i { color: var(--clr-violet); margin-right: 6px; }
.success-share-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-bottom: 12px;
}
.share-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 18px;
  border-radius: 30px;
  font-size: .82rem;
  font-weight: 700;
  text-decoration: none;
  transition: all .18s;
  border: 1px solid transparent;
  cursor: pointer;
}
.share-btn--whatsapp  { background: #25D366; color: #fff; }
.share-btn--whatsapp:hover  { background: #1da851; }
.share-btn--instagram { background: linear-gradient(135deg, #833ab4, #fd1d1d, #fcb045); color: #fff; }
.share-btn--instagram:hover { opacity: .88; }
.share-btn--tiktok    { background: #000; color: #fff; border-color: #333; }
.share-btn--tiktok:hover { border-color: #69C9D0; }
.share-btn--copy {
  background: rgba(255,255,255,.08);
  color: var(--clr-text);
  border-color: rgba(255,255,255,.15);
}
.share-btn--copy:hover { background: rgba(124,58,237,.3); border-color: var(--clr-violet); }
.success-share-hashtag {
  font-size: .74rem;
  color: var(--clr-text-muted);
  font-weight: 600;
}

/* Confetti placeholder */
.success-confetti {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 100%;
  pointer-events: none;
  overflow: hidden;
  border-radius: inherit;
}

/* ─── RESPONSIVE ──────────────────────────────────────────────── */
@media (max-width: 768px) {
  .urgency-bar-inner { font-size: .78rem; gap: 6px; }
  .urgency-cta { display: none; }
  .hero-trust-row { gap: 6px; }
  .trust-chip { font-size: .7rem; padding: 4px 10px; }
  .proof-stats-row { gap: 0; }
  .proof-stat { padding: 10px 16px; }
  .proof-stat-divider { height: 36px; }
  .hero-float-card--latest { display: none; }
  .success-share-btns { gap: 6px; }
  .share-btn { padding: 8px 12px; font-size: .76rem; }
}

/* ============================================================
   FOOTER
   ============================================================ */
#site-footer {
  position: relative;
  z-index: 1;
  background: #06060f;
  border-top: 1px solid var(--clr-border);
  padding-top: clamp(60px, 8vh, 100px);
}

.footer-inner {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(32px, 5vw, 60px);
  padding-bottom: 48px;
}

.footer-brand {
  flex: 1 1 260px;
}

.footer-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
}

.footer-tagline {
  font-size: 0.95rem;
  color: var(--clr-text-muted);
  line-height: 1.7;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(24px, 4vw, 48px);
  flex: 2 1 480px;
}

.footer-col { flex: 1 1 120px; }

.footer-col-title {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--clr-text-muted);
  margin-bottom: 16px;
}

.footer-col ul li {
  margin-bottom: 10px;
}

.footer-col ul li a {
  font-size: 0.9rem;
  color: var(--clr-text-muted);
  transition: color var(--transition);
}

.footer-col ul li a:hover { color: var(--clr-violet); }

/* Social Buttons */
.footer-social {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 4px;
}

.social-btn {
  width: 40px; height: 40px;
  border-radius: 10px;
  background: var(--clr-surface-2);
  border: 1px solid var(--clr-border);
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem;
  color: var(--clr-text-muted);
  transition: all var(--transition);
}

.social-btn:hover {
  background: var(--clr-violet);
  border-color: var(--clr-violet);
  color: #fff;
  transform: translateY(-2px);
}

/* Footer Bottom */
.footer-bottom {
  border-top: 1px solid var(--clr-border);
  padding: 20px var(--container-pad);
  max-width: var(--container-max);
  margin: 0 auto;
  text-align: center;
  font-size: 0.82rem;
  color: var(--clr-text-muted);
}

.heart { color: var(--clr-pink); }

/* ============================================================
   SCROLL ANIMATIONS
   ============================================================ */
.fade-in {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================================
   RESPONSIVE – TABLET (max 900px)
   ============================================================ */
@media (max-width: 900px) {
  /* hero-section responsive bereits im Hero-Block definiert */

  .impact-grid {
    flex-direction: column;
    align-items: stretch;
  }

  .impact-divider-wrap {
    transform: rotate(90deg);
    padding: 0;
    height: 40px;
  }

  .team-grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   RESPONSIVE – MOBILE (max 640px)
   ============================================================ */
@media (max-width: 640px) {
  /* Show hamburger */
  .nav-toggle { display: flex; }

  .nav-menu {
    position: fixed;
    top: var(--nav-height);
    left: 0;
    right: 0;
    background: rgba(11,11,26,0.98);
    backdrop-filter: blur(20px);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 16px;
    border-bottom: 1px solid var(--clr-border);
    transform: translateY(-120%);
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 999;
  }

  .nav-menu.open { transform: translateY(0); }

  .nav-link {
    display: block;
    padding: 14px 16px;
    border-radius: var(--radius-sm);
    font-size: 1rem;
    color: var(--clr-text);
  }

  .nav-link::after { display: none; }

  .nav-link:hover,
  .nav-link.active { background: var(--clr-surface-2); }

  .nav-link.nav-cta {
    margin-top: 8px;
    text-align: center;
    justify-content: center;
  }

  /* Hero – responsive im Hero-Block */

  .hero-actions {
    flex-direction: column;
    align-items: flex-start;
  }

  .hero-actions .btn { width: 100%; justify-content: center; }

  /* Impact */
  .impact-divider-wrap {
    transform: rotate(0deg);
    padding: 0;
    height: 48px;
  }

  /* Globe controls */
  .globe-ui { flex-direction: column; align-items: flex-start; }
  .globe-controls { gap: 6px; }
  .globe-filter-btn { padding: 6px 12px; font-size: 0.8rem; }

  /* Steps */
  /* steps-grid bleibt 2 cols bis 560px, dann 1 col (via eigenem breakpoint) */

  /* Upload preview actions */
  .upload-preview-actions {
    flex-direction: column;
    width: 100%;
  }
  .upload-preview-actions .btn { width: 100%; }

  /* Donation */
  .amount-grid { gap: 8px; }
  .amount-btn { flex: 1 1 60px; min-width: 60px; font-size: 0.85rem; padding: 10px 6px; }

  .impact-split { gap: 10px; }
  .impact-split-item { flex: 0 1 auto; }

  /* Footer */
  .footer-inner { flex-direction: column; }
  .footer-links { flex-direction: column; gap: 24px; }
}

/* ============================================================
   SCROLL REVEAL FADE-IN DELAYS
   ============================================================ */
.step-card:nth-child(1) { transition-delay: 0s; }
.step-card:nth-child(2) { transition-delay: 0.1s; }
.step-card:nth-child(3) { transition-delay: 0.2s; }
.step-card:nth-child(4) { transition-delay: 0.3s; }

.team-card:nth-child(1) { transition-delay: 0s; }
.team-card:nth-child(2) { transition-delay: 0.15s; }

/* ============================================================
   CHF 1.– REBELLION ENTRY SECTION
   ============================================================ */
.rebellion-entry-section {
  position: relative;
  z-index: 1;
  padding: clamp(80px, 12vh, 140px) 0;
  background:
    radial-gradient(ellipse 60% 70% at 0% 50%, rgba(124,58,237,.2) 0%, transparent 60%),
    radial-gradient(ellipse 50% 60% at 100% 50%, rgba(249,115,22,.12) 0%, transparent 60%),
    var(--clr-bg-2);
  overflow: hidden;
}

/* Subtle animated grain overlay */
.rebellion-entry-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.03'/%3E%3C/svg%3E");
  pointer-events: none;
  opacity: .4;
}

.rebellion-entry-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 80px);
  align-items: center;
}

@media (max-width: 860px) {
  .rebellion-entry-inner {
    grid-template-columns: 1fr;
  }
}

/* Text side */
.rebellion-entry-badge {
  display: inline-block;
  padding: 5px 16px;
  border-radius: 50px;
  border: 1px solid rgba(249,115,22,.5);
  background: rgba(249,115,22,.1);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--clr-coral);
  margin-bottom: 20px;
}

.rebellion-entry-headline {
  font-size: clamp(2.2rem, 5.5vw, 4rem);
  font-weight: 900;
  line-height: 1.05;
  margin-bottom: 24px;
  letter-spacing: -.02em;
}

.rebellion-entry-body {
  font-size: clamp(.95rem, 1.8vw, 1.1rem);
  color: var(--clr-text-muted);
  line-height: 1.8;
  margin-bottom: 16px;
}

.rebellion-entry-body strong { color: var(--clr-text); }

.rebellion-entry-sub {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1rem, 2vw, 1.2rem);
  color: var(--clr-violet);
  margin-bottom: 36px;
}

.rebellion-entry-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
}

/* CTA button with price tag */
.rebellion-cta-btn {
  gap: 0;
  padding: 0;
  overflow: hidden;
  display: inline-flex;
  align-items: stretch;
}

.btn-price-tag {
  background: rgba(0,0,0,.25);
  padding: 14px 18px;
  font-size: 1rem;
  font-weight: 900;
  border-right: 1px solid rgba(255,255,255,.2);
  white-space: nowrap;
  display: flex;
  align-items: center;
}

.rebellion-cta-btn > span:not(.btn-price-tag) {
  padding: 14px 18px;
  white-space: nowrap;
}

.rebellion-cta-btn > i {
  padding: 14px 18px 14px 4px;
  display: flex;
  align-items: center;
}

/* Visual side: Breakdown Card */
.rebellion-entry-visual {
  display: flex;
  align-items: center;
  justify-content: center;
}

.chf-breakdown-card {
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-xl);
  padding: clamp(28px, 4vw, 44px);
  width: 100%;
  max-width: 400px;
  position: relative;
  overflow: hidden;
}

.chf-breakdown-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--grad-main);
}

/* Coin */
.chf-coin-wrap {
  position: relative;
  width: 100px;
  height: 100px;
  margin: 0 auto 28px;
}

.chf-coin {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  width: 64px; height: 64px;
  border-radius: 50%;
  background: var(--grad-main);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 30px rgba(139,92,246,.5);
  animation: pulse-core 3s ease-in-out infinite;
  z-index: 2;
}

.chf-coin-text {
  font-size: .72rem;
  font-weight: 900;
  color: #fff;
  text-align: center;
  line-height: 1.2;
}

.chf-coin-ring {
  position: absolute;
  top: 50%; left: 50%;
  border-radius: 50%;
  border: 1.5px solid;
  transform: translate(-50%,-50%);
}

.chf-coin-ring.r1 {
  width: 80px; height: 80px;
  border-color: rgba(139,92,246,.35);
  animation: spin-ring 6s linear infinite;
}
.chf-coin-ring.r2 {
  width: 100px; height: 100px;
  border-color: rgba(249,115,22,.2);
  animation: spin-ring 10s linear infinite reverse;
}

/* Split bars */
.chf-splits {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 24px;
}

.chf-split-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.chf-split-bar {
  height: 8px;
  border-radius: 99px;
  background: var(--clr-border);
  overflow: hidden;
  position: relative;
}

.chf-split-bar::after {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: var(--w, 50%);
  border-radius: 99px;
  animation: grow-bar .8s ease forwards;
  animation-delay: .3s;
  transform-origin: left;
}

@keyframes grow-bar {
  from { width: 0; }
  to   { width: var(--w, 50%); }
}

.chf-split--charity .chf-split-bar::after { background: linear-gradient(90deg, var(--clr-pink), var(--clr-magenta)); }
.chf-split--grow    .chf-split-bar::after { background: linear-gradient(90deg, var(--clr-violet), var(--clr-coral)); }

.chf-split-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.chf-split-amount {
  font-size: .95rem;
  font-weight: 900;
  color: var(--clr-text);
}

.chf-split-label {
  font-size: .8rem;
  color: var(--clr-text-muted);
  display: flex;
  align-items: center;
  gap: 5px;
}

.chf-split--charity .chf-split-label i { color: var(--clr-pink); }
.chf-split--grow    .chf-split-label i { color: var(--clr-coral); }

/* Perks list */
.chf-perks {
  border-top: 1px solid var(--clr-border);
  padding-top: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.chf-perk {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: .88rem;
  color: var(--clr-text-muted);
}

.chf-perk i {
  color: #4ade80;
  font-size: .85rem;
  flex-shrink: 0;
}

/* ============================================================
   SMILEMAP.HTML — Hero Intro Section (smh-section)
   Identisches Layout wie .hero-section, andere Klassen-Hülle
   ============================================================ */
.smh-section {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 100vh;
  overflow: hidden;
  background: #09091e;
  z-index: 1;
  padding-top: 42px; /* Urgency-Bar Höhe */
}
.smh-left {
  /* identisch mit .hero-left */
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: calc(var(--nav-height) + 40px) clamp(32px, 5vw, 72px) 64px;
}
.smh-right {
  /* identisch mit .hero-right */
  position: relative;
  overflow: hidden;
  z-index: 1;
}
@media (max-width: 900px) {
  .smh-section { grid-template-columns: 1fr; }
  .smh-left { padding: calc(var(--nav-height) + 24px) 24px 24px; }
  .smh-right { height: 60vw; min-height: 300px; max-height: 460px; }
}

/* ============================================================
   CESIUM WIDGET OVERRIDES
   ============================================================ */
/* legacy cesium stubs – kept for compatibility */