@import url('https://fonts.googleapis.com/css2?family=Fredoka+One&family=Lilita+One&family=Caveat:wght@400;600;700&family=Inter:wght@400;500;600;700&display=swap');

:root {
  --cream:    #F2E4C0;
  --cream-dk: #E0CFA0;
  --vteal:    #386878;
  --vorange:  #D4601A;
  --gold:     #C8A030;
  --sage:     #88A858;
  --terra:    #C86030;
  --brown:    #5A3018;
  --maroon:   #2A1208;
  --text:     #2A1208;
  --muted:    #7A5030;
  --card-bg:  #FFFBF0;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  font-family: 'Inter', sans-serif;
  background: #fff;
  color: var(--text);
  min-height: 100vh;
}
a { color: var(--terra); text-decoration: none; }
a:hover { color: var(--brown); }

/* ── POSTER WRAPPER ───────────────────────────── */
.poster {
  max-width: 680px;
  margin: 0 auto;
  background: var(--cream);
  min-height: 100vh;
  box-shadow: 0 0 60px rgba(0,0,0,.15);
}

/* ── NAV ──────────────────────────────────────── */
.site-nav {
  background: var(--cream);
  border-bottom: 2px solid var(--cream-dk);
  position: sticky; top: 0; z-index: 100;
}
.nav-inner {
  display: flex; align-items: center; justify-content: center;
  height: 48px; padding: 0 16px;
}
.nav-links { display: flex; gap: 2px; }
.nav-links a {
  font-family: 'Caveat', cursive; font-size: 1rem; font-weight: 700;
  color: var(--muted);
  padding: 6px 14px; border-radius: 99px; transition: color .15s, background .15s;
}
.nav-links a:hover  { color: var(--maroon); background: rgba(42,18,8,.06); }
.nav-links a.active { color: var(--terra); }

/* ── CHECKLIST BAR ────────────────────────────── */
.checklist-label {
  background: #F8EDD5;
  padding: 3px 14px 0;
  font-family: 'Inter', sans-serif; font-size: .6rem; font-weight: 600;
  color: var(--muted); letter-spacing: .1em; text-transform: uppercase;
  position: sticky; top: 48px; z-index: 99;
}
.checklist-bar {
  display: flex;
  background: #F8EDD5;
  border-bottom: 2px solid rgba(42,18,8,.1);
  position: sticky; top: 73px; z-index: 99;
}
.cl-item {
  flex: 1; display: flex; align-items: center; justify-content: center;
  gap: 5px; padding: 8px 4px;
  font-family: 'Caveat', cursive; font-size: .9rem; font-weight: 700;
  color: var(--muted);
  border-right: 1px solid rgba(42,18,8,.09);
  text-decoration: none; cursor: pointer;
  transition: background .15s;
}
.cl-item:last-child { border-right: none; }
.cl-item:hover { background: rgba(42,18,8,.05); }
.cl-text { display: inline; }
.cl-item small { font-size: .9em; opacity: .65; margin-left: 2px; }
.cl-check {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; flex-shrink: 0;
  border: 2px solid currentColor; border-radius: 50%;
  font-size: .65rem; font-family: 'Inter', sans-serif; line-height: 1;
}
.cl-item.cl-done          { color: var(--vteal); }
.cl-item.cl-done .cl-check { background: var(--vteal); color: #fff; border-color: var(--vteal); }

/* ── HERO ─────────────────────────────────────── */
.hero {
  position: relative; overflow: hidden;
  text-align: center;
  padding: 38px 24px 44px;
  background: #ECD898;
}

/* Swirling background */
.swirl-bg {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
}
.swirl-bg svg { width: 100%; height: 100%; }

/* Hero sparkle stars */
.hero-star {
  position: absolute; z-index: 3; pointer-events: none;
  font-style: normal; color: #fff;
  animation: hero-sparkle var(--dur,2.5s) ease-in-out infinite var(--delay,0s);
}
.hs1 { top: 12%; left: 7%;  font-size: 1.4rem; --delay:0s;   --dur:2.2s; }
.hs2 { top:  7%; right:10%; font-size:  .9rem; --delay:.6s;  --dur:2.8s; }
.hs3 { top: 30%; left: 4%;  font-size:  .8rem; --delay:1.1s; --dur:2s;   }
.hs4 { top: 18%; right: 5%; font-size: 1.1rem; --delay:1.7s; --dur:2.5s; }
.hs5 { top: 60%; left: 3%;  font-size:  .75rem;--delay:.4s;  --dur:3s;   }
.hs6 { top: 52%; right: 4%; font-size:  .9rem; --delay:1.3s; --dur:2.3s; }
.hs7 { top: 78%; left: 6%;  font-size:  .7rem; --delay:.9s;  --dur:2.1s; }
.hs8 { top: 80%; right: 7%; font-size: 1rem;   --delay:1.5s; --dur:2.6s; }
@keyframes hero-sparkle {
  0%,100% { opacity:0; transform:scale(.5) rotate(0deg);   }
  45%,55% { opacity:1; transform:scale(1.3) rotate(25deg); }
}

/* Disco wrap */
.disco-wrap {
  position: relative; z-index: 4;
  display: inline-flex; justify-content: center; align-items: center;
  width: 136px; height: 136px;
  margin: 0 auto 0;
}
.light-rays {
  position: absolute; inset: -28px; border-radius: 50%;
  background: conic-gradient(
    transparent 0deg,
    rgba(200,160,48,.55) 6deg, transparent 14deg,
    transparent 40deg,
    rgba(56,104,120,.45) 46deg, transparent 54deg,
    transparent 82deg,
    rgba(136,168,88,.45) 88deg, transparent 96deg,
    transparent 124deg,
    rgba(200,96,48,.5) 130deg, transparent 138deg,
    transparent 178deg,
    rgba(200,160,48,.55) 184deg, transparent 192deg,
    transparent 218deg,
    rgba(56,104,120,.45) 224deg, transparent 232deg,
    transparent 258deg,
    rgba(136,168,88,.45) 264deg, transparent 272deg,
    transparent 296deg,
    rgba(200,96,48,.5) 302deg, transparent 310deg,
    transparent 360deg
  );
  animation: spin 5s linear infinite;
  filter: blur(7px); pointer-events: none; z-index: 1;
}
.disco-emoji {
  font-size: 5.8rem; line-height: 1;
  display: block; position: relative; z-index: 3;
  animation: disco-pulse 3s ease-in-out infinite;
}
.sparkle {
  position: absolute; z-index: 4; pointer-events: none;
  font-style: normal; font-size: 1rem;
  animation: sparkle-anim var(--dur,2s) ease-in-out infinite var(--delay,0s);
}
.s1 { top:  2%; left: 50%;  color: var(--gold);    font-size: 1.2rem; --delay:0s;    --dur:1.8s; }
.s2 { top: 10%; left: 88%;  color: var(--terra);   font-size: .85rem; --delay:.25s;  --dur:2.2s; }
.s3 { top: 48%; left: 98%;  color: var(--sage);    font-size: 1rem;   --delay:.5s;   --dur:1.6s; }
.s4 { top: 86%; left: 88%;  color: var(--vteal);   font-size: .9rem;  --delay:.75s;  --dur:2s;   }
.s5 { top: 96%; left: 50%;  color: var(--gold);    font-size: .8rem;  --delay:1s;    --dur:1.9s; }
.s6 { top: 86%; left: 10%;  color: var(--terra);   font-size: 1.1rem; --delay:1.25s; --dur:2.1s; }
.s7 { top: 48%; left: 0%;   color: var(--sage);    font-size: .9rem;  --delay:1.5s;  --dur:1.7s; }
.s8 { top: 10%; left: 10%;  color: var(--vteal);   font-size: .85rem; --delay:1.75s; --dur:2s;   }

@keyframes spin        { to { transform: rotate(360deg); } }
@keyframes disco-pulse {
  0%,100% { transform: scale(1)    rotate(-3deg); }
  50%      { transform: scale(1.07) rotate( 3deg); }
}
@keyframes sparkle-anim {
  0%,100% { opacity:0; transform:scale(.4) rotate(0deg);    }
  40%,60% { opacity:1; transform:scale(1.3) rotate(30deg);  }
}

/* ── YEAR BLOB + DANCER ───────────────────────── */
.year-dance-wrap {
  position: relative; z-index: 1;
  display: inline-block;
  margin: -78px auto 20px;
}
.year-blob {
  display: inline-block;
  padding: 10px 20px 0;
}
.year-text {
  font-family: 'Fredoka One', 'Lilita One', cursive;
  font-size: clamp(4.5rem, 16vw, 7.5rem);
  color: #F8EDD0;
  text-shadow:
    4px 4px 0 var(--vteal),
    8px 8px 0 var(--sage),
    12px 12px 0 var(--gold),
    16px 16px 0 var(--terra),
    21px 21px 0 var(--maroon);
  display: block; line-height: 1; letter-spacing: .04em;
}
.dancer-emoji {
  position: absolute;
  right: -18px; top: -14px;
  font-size: 4.2rem; line-height: 1;
  z-index: 5;
  filter: drop-shadow(2px 3px 4px rgba(0,0,0,.3));
  pointer-events: none;
  animation: disco-pulse 3.4s ease-in-out infinite;
}

/* ── HERO TEXT ────────────────────────────────── */
.hero-ich-werde {
  position: relative; z-index: 2;
  font-family: 'Caveat', cursive; font-size: clamp(1.15rem, 4vw, 1.6rem);
  font-weight: 600; font-style: italic;
  color: var(--maroon);
  text-shadow: 1px 1px 0 rgba(255,255,255,.45);
  margin-bottom: 2px;
}
.hero-funfzig {
  position: relative; z-index: 2;
  font-family: 'Fredoka One', 'Lilita One', cursive;
  font-size: clamp(3rem, 11vw, 5.5rem);
  color: #F8EDD0;
  text-shadow:
    3px 3px 0 var(--vteal),
    6px 6px 0 var(--sage),
    9px 9px 0 var(--gold),
    13px 13px 0 var(--terra),
    17px 17px 0 var(--maroon);
  margin-bottom: 6px; letter-spacing: .03em;
}
.hero-feier {
  position: relative; z-index: 2;
  font-family: 'Caveat', cursive; font-size: clamp(1.15rem, 4vw, 1.6rem);
  font-weight: 600; font-style: italic;
  color: var(--maroon);
  text-shadow: 1px 1px 0 rgba(255,255,255,.45);
  margin-bottom: 18px;
}
.hero-greeting-text {
  position: relative; z-index: 2;
  font-family: 'Inter', sans-serif;
  font-size: clamp(1rem, 3.5vw, 1.25rem);
  font-weight: 700;
  color: var(--maroon);
  line-height: 1.55;
  text-shadow: 1px 1px 0 rgba(255,255,255,.35);
  margin-bottom: 14px;
}
.hero-name {
  font-family: 'Fredoka One', 'Lilita One', cursive;
  font-size: clamp(1.9rem, 7vw, 3rem);
  color: #F8EDD0;
  vertical-align: baseline;
  text-shadow: 3px 3px 0 var(--vteal);
}
.hero-dich {
  font-family: 'Fredoka One', 'Lilita One', cursive;
  font-size: clamp(1.5rem, 5.5vw, 2.4rem);
  color: var(--maroon);
  letter-spacing: .15em;
  text-shadow: 2px 2px 0 rgba(255,255,255,.4);
}
.hero-date {
  position: relative; z-index: 2;
  font-family: 'Fredoka One', 'Lilita One', cursive;
  font-size: clamp(1.6rem, 5.5vw, 2.4rem);
  color: var(--maroon);
  letter-spacing: .04em;
  text-shadow: 2px 2px 0 rgba(255,255,255,.4);
  margin-bottom: 4px;
}
.hero-time {
  position: relative; z-index: 2; top: 2.2rem;
  font-family: 'Caveat', cursive; font-size: 1.4rem; font-weight: 700;
  color: #F8EDD0; letter-spacing: .05em;
  text-shadow: 1px 1px 0 rgba(255,255,255,.35);
}

/* ── COLOR BAND ───────────────────────────────── */
.color-band { display: flex; height: 8px; }
.color-band span { flex: 1; }
.color-band span:nth-child(1) { background: var(--vteal); }
.color-band span:nth-child(2) { background: var(--sage); }
.color-band span:nth-child(3) { background: var(--gold); }
.color-band span:nth-child(4) { background: var(--terra); }

/* ── PAGE CONTENT ─────────────────────────────── */
.page { padding: 44px 28px 72px; background: var(--cream); }

/* ── COUNTDOWN ────────────────────────────────── */
.countdown-wrap { text-align: center; margin-bottom: 52px; }
.countdown-label {
  font-family: 'Caveat', cursive; font-size: 1.1rem; font-weight: 700;
  color: var(--muted); margin-bottom: 20px; letter-spacing: .06em;
}
.countdown {
  display: inline-flex; gap: 0; align-items: center;
  background: var(--maroon); border-radius: 14px;
  padding: 24px 8px; flex-wrap: wrap; justify-content: center;
  box-shadow: 5px 5px 0 var(--brown);
}
.cd-unit { text-align: center; padding: 0 18px; position: relative; }
.cd-unit + .cd-unit::before {
  content: ':'; position: absolute; left: -3px; top: 1px;
  font-family: 'Courier New', monospace;
  font-size: 2.2rem; font-weight: 900;
  color: rgba(255,255,255,.2); line-height: 1.1;
}
.cd-num {
  font-family: 'Courier New', monospace;
  font-size: clamp(2rem, 6vw, 3rem); font-weight: 900;
  color: var(--gold); display: block; line-height: 1;
}
.cd-label {
  font-family: 'Caveat', cursive; font-size: .88rem; font-weight: 700;
  color: rgba(255,255,255,.45); margin-top: 8px; display: block;
}

/* ── GROOVY DIVIDER ───────────────────────────── */
.groovy-divider {
  margin: 40px 0; display: flex; align-items: center; gap: 14px;
}
.groovy-divider::before, .groovy-divider::after {
  content: ''; flex: 1; height: 2px;
  background: repeating-linear-gradient(
    90deg, var(--vteal) 0 8px, var(--gold) 8px 16px,
    var(--sage) 16px 24px, var(--terra) 24px 32px
  );
}
.groovy-divider span {
  font-family: 'Lilita One', cursive;
  font-size: 1.2rem; color: var(--maroon); white-space: nowrap;
}

/* ── INFO CARDS ───────────────────────────────── */
.info-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 16px; margin-bottom: 48px;
}
.info-card {
  background: var(--card-bg); border-radius: 14px; padding: 28px 18px; text-align: center;
  border: 2px solid var(--cream-dk);
  box-shadow: 4px 4px 0 var(--cream-dk);
  transition: transform .15s, box-shadow .15s;
}
.info-card:hover { transform: translate(-2px,-2px); box-shadow: 6px 6px 0 var(--cream-dk); }
.info-card .icon { font-size: 1.7rem; margin-bottom: 10px; }
.info-card h3 { font-family: 'Lilita One', cursive; font-size: .95rem; color: var(--brown); margin-bottom: 8px; }
.info-card p { font-family: 'Caveat', cursive; font-size: 1.05rem; color: var(--muted); line-height: 1.6; }

/* ── SECTION HEAD ─────────────────────────────── */
.section-head { text-align: center; margin-bottom: 40px; }
.section-head h2 {
  font-family: 'Lilita One', cursive;
  font-size: clamp(1.8rem, 6vw, 2.8rem); color: var(--brown);
  text-shadow: 3px 3px 0 var(--gold); margin-bottom: 10px;
}
.section-head p { font-family: 'Caveat', cursive; font-size: 1.15rem; color: var(--muted); }

/* ── BUTTONS ──────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 13px 34px; border-radius: 99px;
  border: 2.5px solid var(--maroon);
  font-family: 'Lilita One', cursive; font-size: 1.05rem;
  cursor: pointer; transition: all .15s; text-decoration: none;
  box-shadow: 4px 4px 0 var(--maroon);
}
.btn:hover { transform: translate(-2px,-2px); box-shadow: 6px 6px 0 var(--maroon); }
.btn-primary { background: var(--terra); color: var(--cream); }
.btn-primary:hover { color: var(--cream); }
.btn-gold { background: var(--gold); color: var(--maroon); }
.btn-gold:hover { color: var(--maroon); }
.btn-green { background: var(--sage); color: #fff; }
.btn-green:hover { color: #fff; }

/* ── FORMS ────────────────────────────────────── */
.retro-form { max-width: 480px; margin: 0 auto; }
.form-field { margin-bottom: 20px; }
.form-field label {
  display: block; font-family: 'Caveat', cursive;
  font-size: 1rem; font-weight: 700; color: var(--muted); margin-bottom: 6px;
}
.form-field input,
.form-field textarea,
.form-field select {
  width: 100%; background: var(--card-bg);
  border: 2px solid var(--cream-dk); border-radius: 10px; padding: 12px 16px;
  font-size: .95rem; font-family: 'Inter', sans-serif; color: var(--text);
  box-shadow: 2px 2px 0 var(--cream-dk);
  transition: border-color .2s, box-shadow .2s;
}
.form-field input:focus,
.form-field textarea:focus,
.form-field select:focus {
  outline: none; border-color: var(--vteal); box-shadow: 3px 3px 0 var(--vteal);
}
.form-field input[readonly] { opacity: .6; cursor: default; }
.form-field textarea { min-height: 90px; resize: vertical; }
.form-field select option { background: #fff; }

/* ── MESSAGES ─────────────────────────────────── */
.msg-success, .msg-error {
  border-radius: 10px; padding: 14px 18px; margin-bottom: 24px;
  font-family: 'Caveat', cursive; font-size: 1.1rem; font-weight: 600;
  border: 2px solid; box-shadow: 3px 3px 0;
}
.msg-success { background: #eef8e8; border-color: var(--sage);  color: #3A6010; box-shadow: 3px 3px 0 var(--sage); }
.msg-error   { background: #fdeee8; border-color: var(--terra); color: var(--brown); box-shadow: 3px 3px 0 var(--terra); }

/* ── LIEDWÜNSCHE ──────────────────────────────── */
.wish-list { list-style: none; margin-top: 32px; }
.wish-item {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 14px 16px; margin-bottom: 10px;
  background: var(--card-bg); border-radius: 10px;
  border: 2px solid var(--cream-dk); box-shadow: 2px 2px 0 var(--cream-dk);
}
.wish-vinyl { font-size: 1.3rem; flex-shrink: 0; }
.wish-song  { font-family: 'Lilita One', cursive; font-size: 1rem; color: var(--brown); margin-bottom: 2px; }
.wish-artist { font-family: 'Caveat', cursive; font-size: 1rem; color: var(--terra); }
.wish-by { font-size: .72rem; color: var(--muted); margin-top: 3px; }

/* ── ADMIN ────────────────────────────────────── */
.rsvp-table { width: 100%; border-collapse: separate; border-spacing: 0; border-radius: 10px; overflow: hidden; border: 2px solid var(--cream-dk); background: var(--card-bg); }
.rsvp-table th { background: var(--maroon); color: var(--cream); font-family: 'Caveat', cursive; font-size: .9rem; font-weight: 700; letter-spacing: .06em; padding: 12px 14px; text-align: left; }
.rsvp-table td { padding: 11px 14px; border-bottom: 1px solid var(--cream-dk); font-size: .88rem; vertical-align: middle; }
.rsvp-table tr:last-child td { border-bottom: none; }
.rsvp-table tr:hover td { background: #fffdf5; }
.badge-ja   { background: #eef8e8; color: #3A6010; padding: 3px 10px; border-radius: 99px; font-size: .75rem; font-weight: 700; border: 1.5px solid var(--sage); }
.badge-nein { background: #fdeee8; color: var(--brown); padding: 3px 10px; border-radius: 99px; font-size: .75rem; font-weight: 700; border: 1.5px solid var(--terra); }
.token-link { font-family: monospace; font-size: .75rem; color: var(--muted); word-break: break-all; }
.copy-btn { background: none; border: 1.5px solid var(--gold); color: var(--brown); border-radius: 6px; padding: 3px 10px; cursor: pointer; font-size: .72rem; transition: all .15s; }
.copy-btn:hover { background: var(--gold); }
.del-btn { background: none; border: 1.5px solid var(--terra); color: var(--terra); border-radius: 6px; padding: 3px 10px; cursor: pointer; font-size: .72rem; }
.del-btn:hover { background: var(--terra); color: #fff; }
.new-link-box { background: rgba(136,168,88,.12); border: 2px solid var(--sage); border-radius: 10px; padding: 14px 18px; margin-bottom: 20px; }
.new-link-box p { font-family: 'Caveat', cursive; font-size: 1rem; color: #5A8030; margin-bottom: 8px; }
.admin-input { background: var(--card-bg); border: 2px solid var(--cream-dk); border-radius: 10px; padding: 12px 16px; font-size: .95rem; font-family: 'Inter', sans-serif; color: var(--text); box-shadow: 2px 2px 0 var(--cream-dk); }
.admin-input:focus { outline: none; border-color: var(--vteal); }

/* ── LOGIN ────────────────────────────────────── */
.login-hero-bg {
  position: relative; overflow: hidden;
  background: #ECD898;
  padding: 44px 32px 36px; text-align: center;
}
.login-hero-bg .swirl-bg { position: absolute; inset: 0; pointer-events: none; }
.login-hero-bg .swirl-bg svg { width: 100%; height: 100%; }
.login-box { max-width: 420px; margin: 0 auto; text-align: center; padding: 40px 28px 56px; }
.login-box > p { font-family: 'Caveat', cursive; font-size: 1.1rem; color: var(--muted); margin-bottom: 32px; line-height: 1.7; }
.login-box .form-field label { color: var(--muted); }
details summary { font-family: 'Caveat', cursive; font-size: 1rem; color: var(--muted); cursor: pointer; user-select: none; list-style: none; padding: 8px 0; }
details summary:hover { color: var(--terra); }
details summary::-webkit-details-marker { display: none; }
details[open] summary { color: var(--terra); }
details .form-field { margin-top: 12px; text-align: left; }

/* ── FOTO GALERIE ─────────────────────────────── */
.photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
}
.photo-card { border-radius: 10px; overflow: hidden; background: var(--card-bg); border: 2px solid var(--cream-dk); box-shadow: 3px 3px 0 var(--cream-dk); }
.photo-card img { width: 100%; aspect-ratio: 1/1; object-fit: cover; display: block; cursor: pointer; }
.photo-meta { padding: 8px 10px; }
.photo-name { font-family: 'Lilita One', cursive; font-size: .85rem; color: var(--brown); display: block; }
.photo-caption { font-family: 'Caveat', cursive; font-size: .85rem; color: var(--muted); display: block; }
.photo-ts { font-size: .65rem; color: var(--muted); display: block; margin-top: 2px; }

/* ── LIGHTBOX ─────────────────────────────────── */
.lightbox { display:none; position:fixed; inset:0; background:rgba(0,0,0,.92); z-index:999; align-items:center; justify-content:center; }
.lightbox.open { display:flex; }
.lightbox img { max-width:92vw; max-height:88vh; border-radius:8px; object-fit:contain; }
.lightbox-close { position:absolute; top:16px; right:20px; font-size:2rem; color:#fff; cursor:pointer; background:none; border:none; line-height:1; }

/* ── EMPTY STATE ──────────────────────────────── */
.empty-state { text-align:center; padding:48px 24px; opacity:.5; }
.empty-state .icon { font-size:3rem; margin-bottom:12px; }
.empty-state p { font-family:'Caveat',cursive; font-size:1.1rem; color:var(--muted); }

/* ── STATUS ───────────────────────────────────── */
.status-visited   { font-size:.78rem; color:var(--sage);  font-weight:700; }
.status-unseen    { font-size:.78rem; color:var(--muted); }

/* ── RESPONSIVE ───────────────────────────────── */
@media (max-width: 560px) {
  /* Nav scrollbar */
  .nav-inner { justify-content: flex-start; overflow-x: auto; scrollbar-width: none; }
  .nav-inner::-webkit-scrollbar { display: none; }
  .nav-links { gap: 0; flex-shrink: 0; }
  .nav-links a { font-size: .8rem; padding: 5px 10px; white-space: nowrap; }

  /* Checklist — check oben, label mitte, datum unten */
  .cl-item { padding: 7px 2px; font-size: .78rem; gap: 2px; flex-direction: column; align-items: center; text-align: center; }
  .cl-text { display: flex; flex-direction: column; align-items: center; line-height: 1.2; }
  .cl-item small { display: block; font-size: .72em; margin-left: 0; }
  .cl-check { width: 15px; height: 15px; font-size: .55rem; }

  /* Hero */
  .hero { padding: 24px 12px 32px; }
  .disco-wrap { width: 110px; height: 110px; }
  .disco-emoji { font-size: 4.6rem; }

  /* Page */
  .page { padding: 28px 16px 48px; }
  .groovy-divider { margin: 28px 0; }

  /* Countdown */
  .cd-unit { padding: 0 10px; }
  .cd-unit + .cd-unit::before { font-size: 1.6rem; }

  /* Cards */
  .info-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .info-card { padding: 18px 12px; }

  /* Fotos */
  .photo-grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; }

  /* Hero sparkles verbergen */
  .hs1,.hs2,.hs3,.hs4,.hs5,.hs6,.hs7,.hs8 { display: none; }
}

@media (max-width: 380px) {
  .nav-links a { font-size: .72rem; padding: 5px 8px; }
  .info-grid { grid-template-columns: 1fr; }
  .cl-item { font-size: .7rem; }
}

/* Admin-Tabelle scrollbar auf Mobile */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.rsvp-table { min-width: 700px; }