/* =========================================================
   LANGE NACHT – DESIGN
   Die Farben kannst du bequem hier oben ändern.
   ========================================================= */

:root {
  --bg: #071425;
  --bg-2: #120923;
  --surface: rgba(255,255,255,.07);
  --surface-2: rgba(255,255,255,.11);
  --text: #f7fbff;
  --muted: #b6c5d8;

  /* Farbwelt aus eurem bisherigen Design – etwas klarer/kontrastreicher */
  --cyan: #00c6f7;
  --blue: #1477ff;
  --pink: #ff2f78;
  --magenta: #d51c68;
  --violet: #6b2dc5;
  --lime: #8ee35d;

  --border: rgba(255,255,255,.14);
  --radius: 26px;
  --max: 1180px;
  --shadow: 0 30px 80px rgba(0,0,0,.35);
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  background: var(--bg);
}

body {
  margin: 0;
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background:
    radial-gradient(circle at 15% 10%, rgba(0,198,247,.20), transparent 30rem),
    radial-gradient(circle at 85% 35%, rgba(255,47,120,.18), transparent 28rem),
    linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%);
  line-height: 1.6;
  overflow-x: clip;
}

a { color: inherit; }
img { max-width: 100%; display: block; }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
}
.skip-link:focus {
  left: 1rem;
  top: 1rem;
  z-index: 999;
  padding: .8rem 1rem;
  border-radius: 999px;
  background: white;
  color: #111;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding: 1rem max(1.25rem, calc((100vw - var(--max))/2));
  border-bottom: 1px solid rgba(255,255,255,.08);
  background: rgba(7,20,37,.75);
  backdrop-filter: blur(18px);
}

.brand {
  text-decoration: none;
  line-height: 1;
  display: flex;
  flex-direction: column;
}
.brand-kicker {
  font-weight: 900;
  letter-spacing: .1em;
}
.brand-sub {
  font-size: .72rem;
  color: var(--muted);
  margin-top: .3rem;
}

.nav {
  display: flex;
  gap: 1.5rem;
}
.nav a {
  text-decoration: none;
  font-size: .9rem;
  font-weight: 700;
  color: var(--muted);
}
.nav a:hover { color: white; }

.hero {
  position: relative;
  min-height: 92vh;
  display: grid;
  place-items: center;
  padding: 7rem 1.25rem 5rem;
  isolation: isolate;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -3;
  background:
    linear-gradient(180deg, rgba(4,13,28,.12), rgba(4,13,28,.72)),
    url("assets/lange-nacht-design-2025.png") center/cover no-repeat;
  filter: saturate(1.08) brightness(.52);
}

.hero-overlay {
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    linear-gradient(90deg, rgba(4,10,25,.90) 0%, rgba(4,10,25,.55) 48%, rgba(4,10,25,.40) 100%),
    linear-gradient(180deg, transparent 55%, var(--bg) 100%);
}

.hero-orb {
  position: absolute;
  width: 28rem;
  height: 28rem;
  border-radius: 50%;
  filter: blur(85px);
  opacity: .25;
  z-index: -1;
}
.orb-a { background: var(--cyan); left: -10rem; top: 8rem; }
.orb-b { background: var(--pink); right: -12rem; bottom: 2rem; }

.hero-inner {
  width: min(var(--max), 100%);
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 4rem;
  align-items: center;
}

.eyebrow {
  margin: 0 0 1rem;
  font-size: .78rem;
  font-weight: 900;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--cyan);
}

h1, h2, h3, p { margin-top: 0; }

h1 {
  margin-bottom: 1.25rem;
  line-height: .95;
}

.hero-script {
  display: block;
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  font-weight: 900;
  font-size: clamp(4rem, 10vw, 8.5rem);
  letter-spacing: -.06em;
  background: linear-gradient(90deg, #ffffff 8%, #ff6aa2 48%, #ff2f78 75%, #ffffff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 7px 0 rgba(12,4,25,.5));
}

.hero-place {
  display: block;
  margin-top: .8rem;
  font-size: clamp(1.1rem, 2vw, 1.5rem);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #fff;
}

.hero-lead {
  max-width: 46rem;
  font-size: clamp(1.15rem, 2.2vw, 1.6rem);
  color: #e9f4ff;
}

.hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin: 2rem 0;
}
.hero-meta div {
  min-width: 9rem;
  padding: .9rem 1rem;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: rgba(0,0,0,.20);
  backdrop-filter: blur(10px);
}
.hero-meta strong,
.hero-meta span {
  display: block;
}
.hero-meta strong {
  font-size: 1.05rem;
}
.hero-meta span {
  font-size: .78rem;
  color: var(--muted);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .9rem;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3.2rem;
  padding: .8rem 1.25rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  text-decoration: none;
  font-weight: 900;
}
.button.primary {
  background: linear-gradient(90deg, var(--pink), #ff5f91);
  box-shadow: 0 14px 40px rgba(255,47,120,.25);
}
.button.ghost {
  background: rgba(255,255,255,.05);
}

.hero-card {
  padding: 1rem;
  border-radius: 30px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(4,10,25,.38);
  backdrop-filter: blur(18px);
  box-shadow: var(--shadow);
  transform: rotate(1.5deg);
}
.hero-card img {
  border-radius: 22px;
}

.section {
  width: min(var(--max), calc(100% - 2.5rem));
  margin: 0 auto;
  padding: 7rem 0;
}

.split {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: 5rem;
  align-items: start;
}

h2 {
  margin-bottom: 1.25rem;
  font-size: clamp(2.3rem, 6vw, 5.2rem);
  line-height: .96;
  letter-spacing: -.045em;
}

.copy {
  font-size: 1.16rem;
  color: var(--muted);
}
.copy p + p { margin-top: 1.5rem; }

.section-head {
  margin-bottom: 2.5rem;
}

.feature-grid,
.info-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}

.feature-card,
.info-card {
  min-height: 15rem;
  padding: 1.5rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background:
    linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.035));
  box-shadow: 0 20px 50px rgba(0,0,0,.15);
}

.feature-card:hover {
  transform: translateY(-4px);
  transition: transform .2s ease;
}

.icon {
  width: 3.3rem;
  height: 3.3rem;
  display: grid;
  place-items: center;
  margin-bottom: 1.4rem;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(0,198,247,.22), rgba(255,47,120,.22));
  font-size: 1.6rem;
}

.feature-card h3 {
  margin-bottom: .7rem;
  font-size: 1.1rem;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.feature-card p,
.info-card p {
  margin-bottom: 0;
  color: var(--muted);
}

.marquee {
  overflow: hidden;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: linear-gradient(90deg, rgba(0,198,247,.08), rgba(255,47,120,.10));
}
.marquee-track {
  display: flex;
  width: max-content;
  animation: marquee 24s linear infinite;
  font-size: clamp(1.5rem, 4vw, 3rem);
  font-weight: 900;
  letter-spacing: .08em;
  padding: 1rem 0;
}
@keyframes marquee {
  to { transform: translateX(-50%); }
}

.info-card span {
  display: block;
  margin-bottom: .7rem;
  color: var(--pink);
  font-size: .75rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .12em;
}
.info-card strong {
  display: block;
  margin-bottom: .8rem;
  font-size: 1.15rem;
}

.organizer {
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 3rem;
  align-items: center;
}
.organizer p {
  color: var(--muted);
  max-width: 48rem;
}
.mail-link {
  display: inline-block;
  margin-top: 1rem;
  color: white;
  font-weight: 900;
  text-underline-offset: .2em;
}

.organizer-box {
  padding: 2rem;
  border-radius: var(--radius);
  background:
    radial-gradient(circle at 20% 20%, rgba(0,198,247,.25), transparent 14rem),
    radial-gradient(circle at 80% 70%, rgba(255,47,120,.22), transparent 12rem),
    rgba(255,255,255,.06);
  border: 1px solid var(--border);
}
.organizer-box strong,
.organizer-box span { display: block; }
.organizer-box strong {
  font-size: 2rem;
  line-height: 1.1;
}
.organizer-box span {
  margin-top: 1rem;
  color: var(--muted);
}

.cta {
  padding: 7rem 1.25rem;
  text-align: center;
  background:
    radial-gradient(circle at 50% 0%, rgba(0,198,247,.28), transparent 28rem),
    radial-gradient(circle at 50% 100%, rgba(255,47,120,.25), transparent 30rem),
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.05));
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.cta-inner {
  width: min(760px, 100%);
  margin: 0 auto;
}
.cta p:not(.eyebrow) {
  color: var(--muted);
  font-size: 1.1rem;
}
.socials {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: .8rem;
  margin-top: 2rem;
}
.socials a {
  padding: .8rem 1.1rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  text-decoration: none;
  font-weight: 800;
  background: rgba(255,255,255,.05);
}

.footer {
  width: min(var(--max), calc(100% - 2.5rem));
  margin: 0 auto;
  padding: 3rem 0 2rem;
}
.footer-main {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 3rem;
}
.footer p { color: var(--muted); }
.footer-links details {
  border-top: 1px solid var(--border);
  padding: 1rem 0;
}
.footer-links details:last-child {
  border-bottom: 1px solid var(--border);
}
summary {
  cursor: pointer;
  font-weight: 900;
}
.legal {
  padding-top: 1rem;
  font-size: .92rem;
}
.copyright {
  margin: 2rem 0 0;
  font-size: .8rem;
}

@media (max-width: 900px) {
  .nav { display: none; }

  .hero {
    min-height: auto;
    padding-top: 5rem;
  }

  .hero-inner,
  .split,
  .organizer,
  .footer-main {
    grid-template-columns: 1fr;
  }

  .hero-card {
    max-width: 640px;
    justify-self: center;
    transform: none;
  }

  .feature-grid,
  .info-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .split { gap: 2rem; }
}

@media (max-width: 560px) {
  .site-header { padding-inline: 1rem; }

  .hero-script {
    font-size: clamp(3.3rem, 19vw, 5.5rem);
  }

  .feature-grid,
  .info-grid {
    grid-template-columns: 1fr;
  }

  .hero-meta {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .hero-meta div:last-child {
    grid-column: 1 / -1;
  }

  .section {
    width: min(100% - 2rem, var(--max));
    padding: 5rem 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .marquee-track { animation: none; }
  * { transition: none !important; }
}


/* =========================================================
   COUNTDOWN
   ========================================================= */
.countdown-section {
  width: min(var(--max), calc(100% - 2.5rem));
  margin: -1.5rem auto 0;
  position: relative;
  z-index: 5;
}
.countdown-inner {
  padding: 2rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background:
    radial-gradient(circle at 15% 20%, rgba(0,198,247,.18), transparent 18rem),
    radial-gradient(circle at 85% 80%, rgba(255,47,120,.16), transparent 18rem),
    rgba(7,20,37,.86);
  box-shadow: var(--shadow);
  backdrop-filter: blur(16px);
}
.countdown-copy {
  display: grid;
  grid-template-columns: 1fr auto;
  column-gap: 2rem;
  align-items: end;
}
.countdown-copy .eyebrow { grid-column: 1 / -1; }
.countdown-copy h2 {
  margin-bottom: .5rem;
  font-size: clamp(2rem, 5vw, 4rem);
}
.countdown-copy p:not(.eyebrow) {
  margin-bottom: .8rem;
  color: var(--muted);
}
.countdown {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .8rem;
  margin-top: 1.5rem;
}
.countdown-item {
  padding: 1.2rem .8rem;
  text-align: center;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 20px;
  background: rgba(255,255,255,.05);
}
.countdown-item strong {
  display: block;
  font-size: clamp(2rem, 6vw, 4.6rem);
  line-height: 1;
  letter-spacing: -.05em;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(180deg, #fff 20%, #aeeeff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.countdown-item span {
  display: block;
  margin-top: .55rem;
  color: var(--muted);
  font-size: .72rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .12em;
}
.countdown-next {
  margin: .9rem 0 0;
  color: var(--muted);
  font-size: .8rem;
}
.inline-link {
  display: inline-block;
  margin-top: .55rem;
  color: var(--cyan);
  font-weight: 800;
  text-underline-offset: .2em;
}
@media (max-width: 700px) {
  .countdown-copy { display: block; }
  .countdown { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 390px) {
  .countdown-inner { padding: 1.2rem; }
  .countdown-item strong { font-size: 2.4rem; }
}


/* =========================================================
   ROBUSTE MOBILE BREITE / KEIN HORIZONTALER SCROLL
   ========================================================= */
html,
body {
  width: 100%;
  max-width: 100%;
  overflow-x: clip;
}

body {
  position: relative;
}

main,
header,
footer,
section,
div,
nav {
  min-width: 0;
}

img,
svg,
video,
canvas,
iframe {
  max-width: 100%;
  height: auto;
}

.hero,
.section,
.countdown-section,
.footer,
.site-header {
  max-width: 100%;
}

.hero-inner,
.feature-grid,
.info-grid,
.organizer,
.footer-main,
.countdown {
  min-width: 0;
}

.hero-copy,
.hero-card,
.feature-card,
.info-card,
.organizer-box,
.countdown-inner {
  min-width: 0;
  max-width: 100%;
}

.hero-script,
.hero-place,
.hero-lead,
.hero-punchline,
.feature-card p,
.info-card p,
.organizer p,
.footer p,
.legal,
.mail-link,
.inline-link {
  overflow-wrap: anywhere;
  word-break: normal;
}

.hero-punchline {
  margin: -.25rem 0 1.25rem;
  color: #ffffff;
  font-size: .95rem;
  font-weight: 800;
  letter-spacing: .01em;
}

@media (max-width: 900px) {
  .hero-inner {
    gap: 2rem;
  }

  .hero-card {
    width: 100%;
    max-width: 640px;
  }
}

@media (max-width: 560px) {
  .hero {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .hero-inner,
  .countdown-section,
  .section,
  .footer {
    width: 100%;
    max-width: 100%;
  }

  .hero-meta {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .hero-meta div {
    min-width: 0;
    width: 100%;
  }

  .button {
    max-width: 100%;
  }

  .socials a,
  .mail-link,
  .inline-link {
    max-width: 100%;
  }
}

/* RITUAL STRIP */
.ritual-strip{width:min(var(--max),calc(100% - 2.5rem));max-width:100%;margin:2rem auto 0;padding:clamp(2rem,5vw,4rem);text-align:center;border:1px solid var(--border);border-radius:var(--radius);background:radial-gradient(circle at 20% 50%,rgba(0,198,247,.16),transparent 20rem),radial-gradient(circle at 80% 50%,rgba(255,47,120,.16),transparent 20rem),rgba(255,255,255,.04);overflow:hidden}
.ritual-strip p{margin:0 0 .35rem;color:var(--muted);font-size:clamp(1rem,2vw,1.25rem)}
.ritual-strip strong{display:block;font-size:clamp(1.8rem,5vw,4.2rem);line-height:1;letter-spacing:-.04em;overflow-wrap:anywhere}
@media(max-width:560px){.ritual-strip{width:calc(100% - 2rem);padding:2rem 1.2rem}}


/* =========================================================
   V6 – MOBILE-FIRST KONTRAST / FARBHIERARCHIE
   Weiß = Information · Cyan = Orientierung · Pink = Aktion
   Violett/Magenta = Atmosphäre, nicht Kleinschrift
   ========================================================= */
:root {
  --surface: rgba(255,255,255,.085);
  --surface-2: rgba(255,255,255,.13);
  --muted: #c2cede;
  --cyan: #35d6f4;
  --pink: #ff4f8c;
}

/* Cards auf kleinen Screens etwas ruhiger und deckender */
.feature-card,
.info-card {
  background: linear-gradient(180deg, rgba(19,37,59,.96), rgba(12,27,47,.96));
}

/* Kleine Orientierungselemente konsequent Cyan */
.eyebrow,
.inline-link {
  color: var(--cyan);
}

/* Relevante Information bleibt hell statt violett/magenta */
.feature-card h3,
.info-card strong,
.organizer-box strong,
.countdown-next {
  color: var(--text);
}

/* Pink reservieren wir stärker für Aktion / emotionale Akzente */
.button.primary {
  background: linear-gradient(90deg, #ff3f82, #ff6799);
  color: #fff;
}

/* Mobile Touch-Ziele und Lesbarkeit */
@media (max-width: 560px) {
  body {
    font-size: 16px;
  }

  .eyebrow,
  .brand-sub,
  .hero-meta span,
  .countdown-item span,
  .info-card span,
  .copyright {
    font-size: max(.78rem, 13px);
  }

  .feature-card p,
  .info-card p,
  .copy,
  .legal {
    color: #c8d3e1;
  }

  .button,
  .socials a,
  summary {
    min-height: 44px;
  }

  .button,
  .socials a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .feature-card,
  .info-card {
    border-color: rgba(255,255,255,.17);
    box-shadow: 0 14px 35px rgba(0,0,0,.22);
  }
}

/* V7 – Gallery, actions, modes, easter egg */
.hero-card{color:inherit;font:inherit;cursor:pointer}
.impressions-head{display:flex;justify-content:space-between;gap:2rem;align-items:end}.impressions-head>p{max-width:28rem;color:var(--muted)}
.gallery{position:relative;overflow:hidden}.gallery-track{display:flex;gap:1rem;transition:transform .55s cubic-bezier(.2,.75,.2,1);will-change:transform}.gallery figure{flex:0 0 min(72vw,560px);margin:0;aspect-ratio:4/3;overflow:hidden;border:1px solid var(--border);border-radius:24px;background:var(--surface)}.gallery img{width:100%;height:100%;object-fit:cover}.gallery-controls{display:flex;align-items:center;justify-content:center;gap:1rem;margin-top:1rem}.gallery-prev,.gallery-next{width:44px;height:44px;border-radius:999px;border:1px solid var(--border);background:rgba(255,255,255,.07);color:var(--text);font:inherit;cursor:pointer}.gallery-dots{display:flex;gap:.45rem}.gallery-dot{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.28)}.gallery-dot.active{background:var(--pink);box-shadow:0 0 14px rgba(255,79,140,.6)}
.action-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-top:1.5rem}.action-card{min-width:0;min-height:96px;display:flex;align-items:center;gap:1rem;padding:1rem;border:1px solid rgba(53,214,244,.35);border-radius:20px;background:rgba(255,255,255,.055);color:var(--text);text-decoration:none;text-align:left;font:inherit;cursor:pointer}.action-card:hover{background:rgba(255,255,255,.085);transform:translateY(-2px)}.action-card strong,.action-card small{display:block}.action-card small{margin-top:.2rem;color:var(--muted);font-size:.78rem}.action-icon{flex:0 0 auto;width:2.6rem;height:2.6rem;display:grid;place-items:center;border-radius:13px;background:rgba(53,214,244,.1);color:var(--cyan);font-size:1.3rem}.calendar-action{border-color:rgba(255,79,140,.45)}.calendar-action .action-icon{color:var(--pink);background:rgba(255,79,140,.1)}.share-status{min-height:1.4em;margin:.7rem 0 0;color:var(--muted);font-size:.82rem}
.countdown-section.is-live .countdown,.countdown-section.is-postevent .countdown{display:none}.countdown-section.is-today .countdown-inner{border-color:rgba(255,79,140,.55);box-shadow:0 0 0 1px rgba(255,79,140,.1),0 30px 80px rgba(255,79,140,.16)}
.confetti-layer{position:fixed;inset:0;z-index:999;pointer-events:none;overflow:hidden}.confetti-piece{position:absolute;top:-20px;width:10px;height:18px;border-radius:2px;animation:confetti-fall 2.6s ease-in forwards}@keyframes confetti-fall{to{transform:translate3d(var(--x),110vh,0) rotate(780deg);opacity:0}}
@media(max-width:900px){.action-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:700px){.impressions-head{display:block}.gallery figure{flex-basis:84vw}}@media(max-width:560px){.action-grid{grid-template-columns:1fr}.action-card{min-height:78px}.gallery figure{flex-basis:calc(100vw - 2.7rem)}}@media(prefers-reduced-motion:reduce){.gallery-track{transition:none}.confetti-piece{display:none}}


/* =========================================================
   V8 – MOBILE UX / TYPOGRAFIE / KONTRAST
   Kleine Schrift niemals Pink: Pink bleibt Akzentfläche.
   Cyan = kleine Orientierung, Weiß = Information.
   ========================================================= */

/* Kleine pinke/magenta Texte werden bewusst neutralisiert. */
.hero-meta strong,
.countdown-item strong,
.info-card strong,
.feature-card h3,
.organizer-box strong {
  color: var(--text);
}

/* Kleine Labels: kontrastreiches Cyan statt Pink/Magenta. */
.eyebrow,
.info-card > span,
.hero-meta span,
.countdown-item span {
  color: #62ddf5;
}

/* Pink nur dort, wo Größe und Fläche genug Lesbarkeit liefern. */
.button.primary,
.gallery-dot.active {
  /* bleibt bewusster Pink-Aktionsakzent */
}

/* Mindestgrößen für reale Smartphone-Nutzung */
body {
  line-height: 1.55;
}

.copy,
.feature-card p,
.info-card p,
.organizer p,
.cta p,
.legal {
  font-size: clamp(1rem, .96rem + .2vw, 1.075rem);
}

.eyebrow {
  font-size: clamp(.82rem, .79rem + .15vw, .92rem);
  font-weight: 800;
  letter-spacing: .075em;
}

.hero-punchline {
  font-size: clamp(.98rem, .94rem + .25vw, 1.12rem);
  line-height: 1.45;
}

.hero-meta strong {
  font-size: clamp(1.05rem, 1rem + .3vw, 1.25rem);
}

.hero-meta span,
.countdown-item span,
.info-card > span {
  font-size: .84rem;
  font-weight: 700;
}

/* Headline skaliert mobil etwas kontrollierter, damit der erste Screen
   nicht nur aus Typografie besteht. */
.hero-script {
  font-size: clamp(3.1rem, 14vw, 7rem);
  line-height: .9;
}

.hero-place {
  font-size: clamp(1.05rem, 5.2vw, 2.25rem);
}

.section h2,
.cta h2 {
  text-wrap: balance;
}

/* Mobile: Informationsdichte oben erhöhen, ohne zu quetschen. */
@media (max-width: 560px) {
  .site-header {
    padding-top: .8rem;
    padding-bottom: .8rem;
  }

  .nav {
    display: none;
  }

  .hero {
    min-height: auto;
    padding-top: 2.25rem;
    padding-bottom: 2.5rem;
  }

  .hero-inner {
    gap: 1.4rem;
  }

  .hero-lead {
    margin-top: .85rem;
    margin-bottom: .45rem;
    font-size: 1.08rem;
    line-height: 1.35;
  }

  .hero-punchline {
    margin-bottom: 1rem;
  }

  .hero-meta {
    gap: .55rem;
  }

  .hero-meta div {
    padding: .75rem .55rem;
  }

  .hero-actions {
    gap: .6rem;
  }

  .button {
    min-height: 48px;
  }

  /* Das große Motiv darf auf Mobile unter die Kerninformationen rutschen,
     aber nicht den ersten Screen dominieren. */
  .hero-card {
    max-height: 310px;
    overflow: hidden;
  }

  .hero-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .section {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }

  .section-head {
    margin-bottom: 1.6rem;
  }

  .feature-grid,
  .info-grid {
    gap: .8rem;
  }

  .feature-card,
  .info-card {
    padding: 1.15rem;
  }

  .ritual-strip strong {
    font-size: clamp(1.75rem, 9vw, 2.6rem);
    line-height: 1.05;
  }
}

/* Sehr kleine Geräte: Kernfakten bleiben zweispaltig und lesbar. */
@media (max-width: 370px) {
  .hero-script {
    font-size: 2.85rem;
  }

  .hero-meta {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .hero-punchline {
    font-size: .96rem;
  }
}


/* =========================================================
   V9 – MOBILE HERO NACH MOCKUP
   ========================================================= */

.site-header {
  min-height: 78px;
  background: rgba(5,16,31,.94);
}

.brand-logo {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  line-height: .95;
}

.brand-script {
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  font-weight: 900;
  font-size: 1.7rem;
  letter-spacing: -.05em;
  background: linear-gradient(90deg, #fff 12%, #ff7caf 58%, #ff3f82 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.brand-logo .brand-sub {
  margin-top: .35rem;
  text-transform: uppercase;
  letter-spacing: .16em;
  color: #fff;
  font-size: .63rem;
  font-weight: 800;
}

.menu-button {
  display: none;
  width: 48px;
  height: 48px;
  border: 0;
  background: transparent;
  cursor: pointer;
  padding: 10px;
}

.menu-button span {
  display: block;
  height: 3px;
  margin: 5px 0;
  border-radius: 999px;
  background: var(--pink);
}

.hero-mobile-first {
  grid-template-columns: 1fr;
}

.hero::before {
  background:
    linear-gradient(180deg, rgba(4,13,28,.18), rgba(4,13,28,.76)),
    url("assets/lange-nacht-design-2025.png") center/cover no-repeat;
  filter: saturate(1.1) brightness(.48);
}

.hero-copy {
  max-width: 900px;
}

.hero-date-title {
  margin: 0 0 1.4rem;
}

.hero-date {
  display: block;
  font-size: clamp(5.2rem, 18vw, 11rem);
  font-weight: 950;
  line-height: .78;
  letter-spacing: -.075em;
  background: linear-gradient(180deg, #ff4f8c 0%, #d81c65 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 18px 45px rgba(0,0,0,.24);
}

.hero-night {
  display: block;
  margin-top: .7rem;
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  font-size: clamp(2.6rem, 8vw, 5.6rem);
  font-weight: 900;
  line-height: .95;
  letter-spacing: -.045em;
  color: #fff;
}

.hero-lead {
  max-width: 48rem;
  margin: 0 0 1.6rem;
  color: #f6fbff;
  font-size: clamp(1.05rem, 1rem + .3vw, 1.25rem);
}

.hero-facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .9rem;
  margin: 1.6rem 0 1.4rem;
}

.hero-fact {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: .85rem;
  padding: 1rem;
  border: 1px solid rgba(255,255,255,.17);
  border-radius: 20px;
  background: rgba(7,20,37,.70);
  backdrop-filter: blur(10px);
}

.fact-icon {
  flex: 0 0 auto;
  width: 2.55rem;
  height: 2.55rem;
  display: grid;
  place-items: center;
  border-radius: 12px;
  border: 1px solid rgba(53,214,244,.30);
  background: rgba(53,214,244,.08);
  color: var(--cyan);
  font-weight: 900;
}

.hero-fact:nth-child(3) .fact-icon {
  color: var(--pink);
  border-color: rgba(255,79,140,.35);
  background: rgba(255,79,140,.09);
}

.hero-fact strong,
.hero-fact small {
  display: block;
}

.hero-fact strong {
  color: #fff;
  font-size: 1rem;
}

.hero-fact small {
  margin-top: .12rem;
  color: var(--muted);
  font-size: .78rem;
}

.hero-actions-primary {
  margin-top: 1rem;
}

.hero-actions-primary .button {
  min-height: 54px;
}

.countdown-section {
  margin-top: 0;
  padding-top: 1rem;
}

.countdown-copy {
  display: block;
  text-align: center;
}

.countdown-copy .eyebrow {
  margin-bottom: .6rem;
}

.countdown-copy h2 {
  margin-bottom: .4rem;
}

.countdown {
  margin-top: 1rem;
}

@media (max-width: 900px) {
  .site-header {
    padding-inline: 1rem;
  }

  .menu-button {
    display: block;
  }

  .nav {
    position: absolute;
    top: 100%;
    right: 1rem;
    left: 1rem;
    display: none;
    flex-direction: column;
    gap: 0;
    padding: .7rem;
    border: 1px solid var(--border);
    border-radius: 18px;
    background: rgba(5,16,31,.98);
    box-shadow: var(--shadow);
  }

  .nav.is-open {
    display: flex;
  }

  .nav a {
    padding: .9rem 1rem;
    border-radius: 12px;
  }

  .hero-facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .site-header {
    min-height: 72px;
  }

  .brand-script {
    font-size: 1.55rem;
  }

  .hero {
    padding-top: 2.8rem;
    padding-bottom: 2.1rem;
  }

  .hero .eyebrow {
    margin-bottom: 1.1rem;
    font-size: .82rem;
    letter-spacing: .12em;
  }

  .hero-date {
    font-size: clamp(5.4rem, 25vw, 7.2rem);
  }

  .hero-night {
    font-size: clamp(2.5rem, 12vw, 3.6rem);
  }

  .hero-lead {
    margin-top: 1rem;
    font-size: 1rem;
  }

  .hero-facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .65rem;
  }

  .hero-fact {
    min-height: 88px;
    padding: .85rem;
    gap: .65rem;
  }

  .fact-icon {
    width: 2.15rem;
    height: 2.15rem;
    font-size: .82rem;
  }

  .hero-fact strong {
    font-size: .95rem;
  }

  .hero-fact small {
    font-size: .78rem;
  }

  .hero-actions-primary {
    display: grid;
    grid-template-columns: 1fr;
  }

  .hero-actions-primary .button {
    width: 100%;
  }

  .countdown-inner {
    padding: 1.3rem;
  }

  .countdown-copy h2 {
    font-size: 1.7rem;
  }

  .countdown-copy p {
    font-size: .92rem;
  }

  .countdown {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .4rem;
  }

  .countdown-item {
    padding: .9rem .25rem;
  }

  .countdown-item strong {
    font-size: clamp(1.65rem, 9vw, 2.45rem);
  }

  .countdown-item span {
    font-size: .68rem;
    letter-spacing: .04em;
  }
}

@media (max-width: 390px) {
  .hero-fact {
    min-height: 82px;
    padding: .7rem;
  }

  .hero-fact strong {
    font-size: .9rem;
  }

  .hero-fact small {
    font-size: .73rem;
  }

  .countdown-item span {
    font-size: .62rem;
  }
}


/* =========================================================
   V10 – INFO-LESBARKEIT / SHARE / MOBILE SPACING
   ========================================================= */

/* „Kurz. Klar. Wichtig.“ und Cards bekommen mobil etwas mehr Luft links. */
@media (max-width: 560px) {
  .info-section {
    padding-left: 1.2rem;
    padding-right: 1rem;
  }

  .info-section .section-head,
  .info-section .info-grid,
  .info-section .action-grid,
  .info-section .share-status {
    margin-left: 3px;
  }

  /* Sekundärinformationen bewusst größer als bisher. */
  .hero-fact small,
  .info-card > span,
  .info-card p,
  .action-card small {
    font-size: .88rem;
    line-height: 1.4;
  }

  .hero-fact strong {
    font-size: 1.03rem;
  }

  .info-card > span {
    letter-spacing: .045em;
  }
}

.share-card {
  flex-wrap: wrap;
}

.share-card-copy {
  min-width: 0;
  flex: 1 1 130px;
}

.share-mini-actions {
  width: 100%;
  display: flex;
  gap: .45rem;
  margin-top: .25rem;
}

.share-mini {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .5rem .7rem;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 11px;
  background: rgba(255,255,255,.06);
  color: #fff;
  text-decoration: none;
  font: inherit;
  font-size: .78rem;
  font-weight: 800;
  cursor: pointer;
}

.share-mini:hover {
  background: rgba(255,255,255,.1);
}

.share-mini.whatsapp {
  border-color: rgba(98,221,245,.32);
}

.share-mini.more {
  color: var(--cyan);
}

.rmv-link {
  margin-top: .7rem;
}


/* =========================================================
   V11 – MOBILE TYPOGRAFIE / SECTION SPACING / FEATURE CARDS
   ========================================================= */

/* Alle großen Abschnittsköpfe erhalten mobil denselben zusätzlichen
   linken optischen Abstand. */
@media (max-width: 560px) {
  .section > .section-head,
  .section .section-head,
  .ritual-strip .section-head,
  .gallery-section .section-head,
  .info-section .section-head,
  .cta .section-head {
    position: relative;
    left: 3px;
    max-width: calc(100% - 3px);
  }

  /* Lesbarkeit bewusst etwas großzügiger: echte Smartphone-Distanz,
     nicht Desktop-Schrift auf kleinem Bildschirm. */
  body {
    font-size: 17px;
  }

  .section-head .eyebrow,
  .eyebrow {
    font-size: .9rem;
    line-height: 1.35;
  }

  .section-head h2,
  .cta h2 {
    font-size: clamp(2.25rem, 10.8vw, 3.15rem);
    line-height: 1.02;
    letter-spacing: -.035em;
  }

  .copy,
  .feature-card p,
  .info-card p,
  .organizer p,
  .cta p,
  .legal {
    font-size: 1.06rem;
    line-height: 1.55;
  }

  .info-card strong {
    font-size: 1.18rem;
    line-height: 1.35;
  }

  .info-card > span {
    font-size: .92rem;
    line-height: 1.35;
  }

  .hero-fact strong {
    font-size: 1.08rem;
  }

  .hero-fact small {
    font-size: .91rem;
  }

  .action-card strong {
    font-size: 1rem;
  }

  .action-card small {
    font-size: .9rem;
  }
}

/* Feature-Karten kompakter: Symbol + Überschrift bilden eine Zeile. */
.feature-title {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
}

.feature-title .feature-icon {
  flex: 0 0 auto;
  margin: 0;
}

.feature-title h3 {
  margin: 0;
  min-width: 0;
}

@media (max-width: 560px) {
  .feature-card {
    padding: 1.25rem;
  }

  .feature-title {
    gap: .85rem;
    margin-bottom: .8rem;
  }

  .feature-title .feature-icon {
    width: 3.5rem;
    height: 3.5rem;
  }

  .feature-title h3 {
    font-size: 1.2rem;
    line-height: 1.15;
  }

  .feature-card p {
    margin-top: 0;
  }
}


/* =========================================================
   V13 – DEZENTER DATENSCHUTZ-/COOKIE-HINWEIS
   ========================================================= */
.privacy-banner {
  position: fixed;
  left: 50%;
  bottom: max(12px, env(safe-area-inset-bottom));
  z-index: 200;
  width: min(760px, calc(100% - 24px));
  transform: translateX(-50%);
  transition: opacity .2s ease, transform .2s ease;
}

.privacy-banner.is-hidden {
  opacity: 0;
  transform: translate(-50%, 14px);
  pointer-events: none;
}

.privacy-banner-inner {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: .9rem 1rem;
  border: 1px solid rgba(255,255,255,.17);
  border-radius: 18px;
  background: rgba(5,16,31,.96);
  box-shadow: 0 18px 50px rgba(0,0,0,.34);
  backdrop-filter: blur(16px);
}

.privacy-banner-copy {
  min-width: 0;
  flex: 1;
}

.privacy-banner-copy strong {
  display: block;
  margin-bottom: .15rem;
  color: #fff;
  font-size: .92rem;
}

.privacy-banner-copy p {
  margin: 0;
  color: #c7d3e2;
  font-size: .8rem;
  line-height: 1.42;
}

.privacy-banner-copy a {
  color: var(--cyan);
  text-underline-offset: .15em;
}

.privacy-banner-close {
  flex: 0 0 auto;
  min-height: 40px;
  padding: .55rem .85rem;
  border: 1px solid rgba(53,214,244,.32);
  border-radius: 12px;
  background: rgba(53,214,244,.08);
  color: #fff;
  font: inherit;
  font-size: .82rem;
  font-weight: 800;
  cursor: pointer;
}

.privacy-banner-close:hover {
  background: rgba(53,214,244,.14);
}

.legal h3 {
  margin-top: .5rem;
  font-size: 1.25rem;
}

.legal h4 {
  margin: 1.5rem 0 .45rem;
  color: #fff;
  font-size: 1rem;
}

.legal code {
  overflow-wrap: anywhere;
  color: var(--cyan);
}

.legal-note {
  font-size: .86rem !important;
  color: var(--muted) !important;
}

@media (max-width: 560px) {
  .privacy-banner {
    width: calc(100% - 18px);
    bottom: max(8px, env(safe-area-inset-bottom));
  }

  .privacy-banner-inner {
    align-items: flex-start;
    gap: .7rem;
    padding: .8rem;
    border-radius: 16px;
  }

  .privacy-banner-copy strong {
    font-size: .9rem;
  }

  .privacy-banner-copy p {
    font-size: .76rem;
  }

  .privacy-banner-close {
    min-height: 38px;
    padding: .48rem .68rem;
    font-size: .76rem;
  }
}


/* =========================================================
   V15 – SHARE FALLBACK / BRANDING / SECTION ORDER / READABILITY
   ========================================================= */

.venue-address {
  color: #fff !important;
  font-weight: 650;
}

.organizer {
  opacity: .92;
  padding-top: 4rem;
  padding-bottom: 4rem;
}

.organizer h2 {
  font-size: clamp(2rem, 4.5vw, 3.8rem);
}

.organizer-box {
  background:
    radial-gradient(circle at 20% 20%, rgba(53,214,244,.10), transparent 14rem),
    radial-gradient(circle at 80% 70%, rgba(255,79,140,.10), transparent 12rem),
    rgba(255,255,255,.04);
}

.brand-memory {
  width: min(var(--max), calc(100% - 2.5rem));
  margin: 0 auto;
  padding: 5rem 0 2rem;
}

.brand-memory-inner {
  display: grid;
  grid-template-columns: 1fr minmax(260px, 420px);
  gap: 2.5rem;
  align-items: center;
  padding: 2rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: rgba(255,255,255,.035);
}

.brand-memory-copy p:not(.eyebrow) {
  color: var(--muted);
}

.brand-memory-art img {
  width: 100%;
  border-radius: 22px;
  box-shadow: 0 24px 60px rgba(0,0,0,.28);
}

.thank-you {
  width: min(var(--max), calc(100% - 2.5rem));
  margin: 0 auto;
  padding: 3rem 0 5rem;
  text-align: center;
}

.thank-you-inner {
  padding: 2.2rem 1.5rem;
  border-radius: var(--radius);
  background:
    radial-gradient(circle at 25% 40%, rgba(53,214,244,.11), transparent 18rem),
    radial-gradient(circle at 75% 60%, rgba(255,79,140,.11), transparent 18rem),
    rgba(255,255,255,.03);
}

.thank-you h2 {
  margin-bottom: .65rem;
  font-size: clamp(2rem, 5vw, 4rem);
}

.thank-you p:not(.eyebrow) {
  margin-bottom: 0;
  color: var(--muted);
}

.share-sheet {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: none;
}

.share-sheet.is-open {
  display: block;
}

.share-sheet-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(5px);
}

.share-sheet-card {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(420px, calc(100% - 28px));
  transform: translate(-50%, -50%);
  padding: 1.4rem;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 22px;
  background: #09182a;
  box-shadow: 0 30px 80px rgba(0,0,0,.45);
}

.share-sheet-card h3 {
  margin-bottom: 1rem;
  font-size: 1.35rem;
}

.share-sheet-close {
  position: absolute;
  top: .65rem;
  right: .8rem;
  width: 38px;
  height: 38px;
  border: 0;
  background: transparent;
  color: #fff;
  font-size: 1.7rem;
  cursor: pointer;
}

.share-sheet-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: .6rem;
}

.share-sheet-actions a,
.share-sheet-actions button {
  min-height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: .65rem .8rem;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 12px;
  background: rgba(255,255,255,.055);
  color: #fff;
  text-decoration: none;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}

.share-sheet-actions a:hover,
.share-sheet-actions button:hover {
  background: rgba(255,255,255,.09);
}

.share-sheet-status {
  min-height: 1.2em;
  margin: .7rem 0 0;
  color: var(--cyan);
  font-size: .82rem;
}

@media (max-width: 700px) {
  .brand-memory-inner {
    grid-template-columns: 1fr;
  }

  .brand-memory-art {
    order: -1;
  }
}


/* =========================================================
   V16 – REGIONALE SEO / JUGENDSCHUTZ / VERANSTALTERLINK
   ========================================================= */
.hero-facts {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.youth-note {
  margin: 1rem 3px 0;
  color: var(--muted);
  font-size: .9rem;
}

.regional-section {
  padding-top: 4.5rem;
  padding-bottom: 4.5rem;
}

.regional-copy {
  max-width: 880px;
  margin-left: 3px;
}

.regional-copy p {
  margin: 0;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.7;
}

.organizer-club-link {
  display: inline-flex;
  margin: 0 0 1rem;
  color: var(--cyan);
  font-size: .9rem;
  font-weight: 750;
  text-decoration: none;
}

.organizer-club-link:hover {
  text-decoration: underline;
  text-underline-offset: .2em;
}

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

  .hero-fact:first-child {
    grid-column: 1 / -1;
  }

  .regional-copy p {
    font-size: 1.02rem;
    line-height: 1.62;
  }

  .regional-section .section-head {
    left: 3px;
  }
}

/* V17 – konsistentes 3+3 Raster und Icons in den Infokarten */
.quick-actions, .action-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}
.info-card-heading {
  display:flex;
  align-items:center;
  gap:.8rem;
  margin-bottom:1rem;
}
.info-card-heading > span:last-child { margin:0; }
.info-card-icon {
  flex:0 0 auto;
  width:44px; height:44px;
  display:grid; place-items:center;
  border-radius:13px;
  font-size:1.35rem;
  font-weight:900;
  border:1px solid rgba(255,255,255,.10);
}
.info-card-icon-pink { color:#ff5a9d; background:rgba(255,79,140,.12); }
.info-card-icon-cyan { color:#35d6f4; background:rgba(53,214,244,.11); }
.info-card-icon-purple { color:#b77aff; background:rgba(183,122,255,.11); }
@media(max-width:760px){
  .quick-actions, .action-grid { grid-template-columns:1fr !important; }
}


/* =========================================================
   V19 – KURZ. KLAR. WICHTIG. / ICONS / ACTION STRIP
   ========================================================= */

.legal-inline {
  display: block;
  margin-top: .55rem;
  color: var(--muted);
  font-size: .9rem;
  line-height: 1.4;
}

.info-card-icon {
  font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif;
  font-size: 1.55rem !important;
  line-height: 1;
}

/* Die drei Aktionen bilden auf Desktop einen gemeinsamen Streifen
   mit drei gleich breiten Bereichen und sichtbaren Trennlinien. */
.action-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  margin-top: 1rem;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 22px;
  overflow: hidden;
  background:
    linear-gradient(90deg,
      rgba(255,79,140,.045),
      rgba(53,214,244,.035));
}

.action-strip .action-card {
  min-height: 118px;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.action-strip .action-card + .action-card {
  border-left: 1px solid rgba(255,255,255,.16);
}

.action-strip .action-card:hover {
  background: rgba(255,255,255,.045);
  transform: none;
}

/* Klare, größere Aktionssymbole */
.action-strip .action-icon {
  width: 3.2rem;
  height: 3.2rem;
  border-radius: 14px;
  font-size: 1.55rem;
}

@media (max-width: 760px) {
  .action-strip {
    grid-template-columns: 1fr;
  }

  .action-strip .action-card + .action-card {
    border-left: 0;
    border-top: 1px solid rgba(255,255,255,.16);
  }

  .action-strip .action-card {
    min-height: 88px;
  }
}


/* =========================================================
   V21 – DESIGN RELEASE
   Mehr Eventplakat, weniger SaaS-Landingpage.
   Funktion und HTML-Struktur bleiben bewusst weitgehend erhalten.
   ========================================================= */

.v21-party {
  --party-pink: #ff3f8e;
  --party-pink-hot: #ff176f;
  --party-cyan: #24d9ff;
  --party-violet: #8b46ff;
  --party-ink: #07091d;
  --party-panel: rgba(10, 24, 48, .78);
  background:
    radial-gradient(circle at 12% 18%, rgba(0, 209, 255, .15), transparent 25rem),
    radial-gradient(circle at 88% 42%, rgba(255, 40, 130, .13), transparent 28rem),
    radial-gradient(circle at 45% 76%, rgba(123, 52, 255, .12), transparent 32rem),
    #07091d;
}

/* Header: kompakter, dunkler, mehr Nachtclub */
.v21-party header,
.v21-party .site-header {
  background: rgba(3, 11, 28, .88);
  border-bottom: 1px solid rgba(36, 217, 255, .14);
  backdrop-filter: blur(14px);
}

/* Hero: vorhandenes Bild deutlich stärker inszenieren */
.v21-party .hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: min(900px, 92vh);
}
.v21-party .hero::before {
  content:"";
  position:absolute;
  inset:0;
  z-index:-2;
  background:
    linear-gradient(90deg, rgba(2,8,25,.94) 0%, rgba(2,12,30,.72) 46%, rgba(31,5,32,.50) 100%);
}
.v21-party .hero::after {
  content:"";
  position:absolute;
  inset:auto -10% -15% -10%;
  height:55%;
  z-index:-1;
  pointer-events:none;
  background:
    radial-gradient(ellipse at 25% 70%, rgba(36,217,255,.22), transparent 42%),
    radial-gradient(ellipse at 78% 65%, rgba(255,23,111,.25), transparent 40%);
  filter: blur(18px);
}

/* Hero typography: poster-like */
.v21-party .hero h1,
.v21-party .hero-title {
  text-shadow: 0 10px 35px rgba(0,0,0,.42);
}
.v21-party .hero .eyebrow {
  color: var(--party-cyan);
  letter-spacing: .16em;
  font-weight: 900;
}
.v21-party .hero-date,
.v21-party .hero .date-big {
  color: var(--party-pink);
  text-shadow: 0 0 28px rgba(255,63,142,.20);
}

/* Section rhythm: stronger alternation */
.v21-party .section {
  position: relative;
}
.v21-party .section:nth-of-type(even) {
  background:
    linear-gradient(135deg, rgba(25,9,48,.34), rgba(3,29,48,.18));
}
.v21-party .section-head {
  position: relative;
}
.v21-party .section-head::after {
  content:"";
  display:block;
  width:72px;
  height:4px;
  margin-top:18px;
  border-radius:999px;
  background: linear-gradient(90deg, var(--party-pink), var(--party-cyan));
  box-shadow: 0 0 18px rgba(255,63,142,.30);
}
.v21-party .section-head h2 {
  max-width: 900px;
  font-weight: 900;
  letter-spacing: -.045em;
  line-height: .98;
}
.v21-party .section-head h2 em {
  color: var(--party-pink);
  font-style: normal;
}

/* Cards: weniger "App UI", kantiger, transparenter, neon edge */
.v21-party .info-card,
.v21-party .feature-card,
.v21-party .night-card {
  border-radius: 18px;
  border: 1px solid rgba(67, 206, 255, .20);
  background:
    linear-gradient(145deg, rgba(15,40,65,.84), rgba(13,18,45,.72));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.035),
    0 18px 45px rgba(0,0,0,.12);
}
.v21-party .info-card:hover,
.v21-party .feature-card:hover {
  border-color: rgba(255,63,142,.42);
}

/* Icon containers: neon sign instead of emoji-ish floating boxes */
.v21-party .info-card-icon,
.v21-party .action-icon,
.v21-party .feature-icon {
  border-radius: 10px;
  border: 1px solid currentColor;
  box-shadow: 0 0 18px rgba(36,217,255,.10);
  background: rgba(7,12,35,.62);
}

/* Action strip: one visual unit, more like event navigation */
.v21-party .action-strip {
  border-radius: 16px;
  border-color: rgba(255,63,142,.34);
  background:
    linear-gradient(100deg, rgba(255,63,142,.09), rgba(31,29,70,.68) 48%, rgba(36,217,255,.07));
  box-shadow: 0 0 32px rgba(255,63,142,.06);
}
.v21-party .action-strip .action-card {
  transition: background .18s ease;
}
.v21-party .action-strip .action-card:hover {
  background: rgba(255,255,255,.055);
}

/* Gallery/impressions: let photography breathe */
.v21-party .gallery,
.v21-party .impressions {
  position: relative;
}
.v21-party .gallery img,
.v21-party .impressions img {
  border-radius: 10px;
  filter: saturate(1.08) contrast(1.04);
}
.v21-party .gallery::before,
.v21-party .impressions::before {
  content:"";
  position:absolute;
  inset:-8% -4%;
  z-index:-1;
  background:
    radial-gradient(circle at 15% 50%, rgba(255,28,116,.17), transparent 28%),
    radial-gradient(circle at 85% 40%, rgba(0,207,255,.15), transparent 30%);
  filter: blur(25px);
}

/* CTA / Danke: emotional final poster panel */
.v21-party .cta,
.v21-party .thanks-section {
  background:
    radial-gradient(circle at 20% 100%, rgba(36,217,255,.19), transparent 32%),
    radial-gradient(circle at 82% 20%, rgba(255,63,142,.22), transparent 32%),
    linear-gradient(135deg, #0b1230, #160b2c 65%, #061b2d);
  border-top: 1px solid rgba(255,63,142,.28);
  border-bottom: 1px solid rgba(36,217,255,.20);
}

/* Organizer deliberately quiet at bottom */
.v21-party .organizer {
  background: rgba(4,9,24,.72);
}
.v21-party .organizer-box {
  opacity: .88;
}

/* Desktop: headings bigger, layout less timid */
@media (min-width: 900px) {
  .v21-party .section-head h2 {
    font-size: clamp(3.5rem, 5vw, 6rem);
  }
  .v21-party .hero h1,
  .v21-party .hero-title {
    font-size: clamp(5rem, 9vw, 9rem);
    line-height: .83;
  }
  .v21-party .section {
    padding-top: 6.5rem;
    padding-bottom: 6.5rem;
  }
}

/* Mobile first: still loud, but readable and no horizontal drift */
@media (max-width: 760px) {
  html, body.v21-party {
    overflow-x: hidden;
    max-width: 100%;
  }
  .v21-party .hero {
    min-height: auto;
  }
  .v21-party .section {
    padding-top: 4.25rem;
    padding-bottom: 4.25rem;
  }
  .v21-party .section-head h2 {
    font-size: clamp(2.65rem, 12vw, 4rem);
    line-height: .96;
  }
  .v21-party .info-card,
  .v21-party .feature-card,
  .v21-party .night-card {
    border-radius: 14px;
  }
  .v21-party .action-strip {
    border-radius: 14px;
  }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .v21-party *,
  .v21-party *::before,
  .v21-party *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}


/* =========================================================
   V22 DEMO – RADIKALER REBUILD
   Offene Flächen, Bildstrecken, große Typografie, wenig Karten.
   ========================================================= */
.v22-party {
  --ink:#050817;
  --ink2:#081326;
  --pink:#ff2f83;
  --pink2:#ff66a7;
  --cyan:#28d8ff;
  --violet:#9a63ff;
  --white:#f7fbff;
  --muted:#bac8d8;
  background:var(--ink);
  color:var(--white);
}
.v22-party main { overflow:hidden; }
.v22-party svg { width:1.4em;height:1.4em;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round; }

.poster-hero{position:relative;min-height:90vh;display:flex;align-items:center;padding:clamp(5rem,9vw,8rem) max(1rem,calc((100vw - 1180px)/2));isolation:isolate}
.poster-hero-bg{position:absolute;inset:0;z-index:-2;background:linear-gradient(90deg,rgba(2,5,18,.90),rgba(2,8,24,.55) 50%,rgba(24,5,28,.62)),url("assets/gallery/03-party.jpg") center/cover no-repeat;filter:saturate(1.15) contrast(1.06)}
.poster-hero:after{content:"";position:absolute;inset:auto 0 0;height:45%;z-index:-1;background:linear-gradient(transparent,var(--ink))}
.poster-hero-inner{width:min(1180px,100%);display:grid;grid-template-columns:1fr .35fr;gap:3rem;align-items:end}
.poster-kicker,.eyebrow{text-transform:uppercase;letter-spacing:.13em;font-size:.84rem;font-weight:900;color:var(--cyan)}
.poster-copy h1{margin:.5rem 0 1rem;line-height:.78}
.poster-copy h1 span{display:block;font-size:clamp(6rem,18vw,13rem);letter-spacing:-.08em;color:var(--pink);text-shadow:0 0 35px rgba(255,47,131,.18)}
.poster-copy h1 strong{display:block;margin-top:.45rem;font-family:Georgia,serif;font-style:italic;font-size:clamp(3rem,8vw,6.5rem);letter-spacing:-.055em;color:#fff}
.poster-tagline{font-size:clamp(1.2rem,2.2vw,1.7rem);max-width:38rem}
.poster-facts{display:flex;flex-wrap:wrap;gap:.7rem 1.4rem;margin:1.5rem 0;color:var(--muted)} .poster-facts b{color:#fff;margin-right:.25rem}
.poster-actions{display:flex;gap:.7rem;flex-wrap:wrap}.poster-btn{display:inline-flex;align-items:center;gap:.55rem;min-height:50px;padding:.7rem 1rem;border:1px solid rgba(255,255,255,.2);border-radius:999px;background:rgba(5,12,32,.72);color:white;text-decoration:none;font:inherit;font-weight:800;cursor:pointer}.poster-btn.primary{background:var(--pink);border-color:var(--pink)}
.poster-mark{justify-self:end;align-self:center;opacity:.35;transform:rotate(-8deg)}.poster-mark span{display:block;font-size:11rem;font-weight:950;line-height:.7;color:transparent;-webkit-text-stroke:2px var(--cyan)}.poster-mark small{font-size:2rem;color:var(--pink);font-weight:900}

.open-countdown{padding:4rem max(1rem,calc((100vw - 1180px)/2));background:linear-gradient(90deg,#070b20,#120821)}
.open-countdown-inner{width:min(1180px,100%);margin:auto;display:grid;grid-template-columns:.7fr 1.3fr;gap:3rem;align-items:end}
.open-countdown-title h2{font-size:clamp(2.5rem,5vw,5rem);margin:.2rem 0}.open-countdown-title p{color:var(--muted)}
.open-numbers{display:grid;grid-template-columns:repeat(4,1fr);gap:0}.open-numbers .countdown-item{background:transparent;border:0;border-radius:0;padding:0 1rem;border-left:1px solid rgba(255,255,255,.2)}.open-numbers strong{font-size:clamp(3rem,7vw,6rem);color:var(--pink);line-height:.85}.open-numbers span{font-size:.76rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}

.story-split{display:grid;grid-template-columns:1.05fr .95fr;min-height:680px}.story-image{position:relative;min-height:620px;overflow:hidden}.story-image img{width:100%;height:100%;object-fit:cover;filter:saturate(1.12) contrast(1.08)}.story-image:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 25%,rgba(5,8,23,.28))}
.story-image-type{position:absolute;left:5%;bottom:6%;z-index:2;font-size:clamp(3rem,6vw,6rem);font-weight:950;line-height:.84;letter-spacing:-.06em;color:white;text-shadow:0 8px 30px rgba(0,0,0,.45)}.story-image-type::after{content:"";display:block;width:70%;height:6px;margin-top:1rem;background:var(--pink);transform:rotate(-2deg)}
.story-copy{display:flex;flex-direction:column;justify-content:center;padding:clamp(3rem,7vw,7rem);background:radial-gradient(circle at 90% 15%,rgba(255,47,131,.16),transparent 45%),#0a1024}.story-copy h2,.feature-stage h2,.impact-gallery h2,.info-stage h2,.regional-stage h2,.closing-stage h2,.thank-stage h2{font-size:clamp(3rem,6vw,6rem);line-height:.94;letter-spacing:-.055em;margin:.5rem 0 1.5rem}.story-copy p{max-width:42rem;color:var(--muted);font-size:1.1rem}

.photo-ribbon{display:grid;grid-template-columns:1.35fr .8fr .8fr;min-height:390px;background:#080715}.photo-ribbon figure{margin:0;overflow:hidden}.photo-ribbon img{width:100%;height:100%;object-fit:cover}.ribbon-type{display:flex;flex-direction:column;justify-content:center;padding:2rem;font-family:Georgia,serif;font-style:italic;font-size:clamp(2rem,4vw,4.5rem);line-height:.95;background:linear-gradient(150deg,#170a30,#061c31);color:white}.ribbon-type span{color:var(--pink)}

.feature-stage{padding:7rem max(1rem,calc((100vw - 1180px)/2));background:radial-gradient(circle at 80% 20%,rgba(155,99,255,.18),transparent 30rem),#07091c}.feature-stage-head{max-width:850px}.feature-stage-head span{color:var(--pink)}
.feature-lines{margin-top:3rem;border-top:1px solid rgba(255,255,255,.14)}.feature-lines article{display:grid;grid-template-columns:80px 1fr;gap:1.2rem;align-items:center;padding:1.5rem 0;border-bottom:1px solid rgba(255,255,255,.14)}.feature-lines article svg{width:52px;height:52px;color:var(--cyan)}.feature-lines article:nth-child(2) svg{color:var(--pink)}.feature-lines h3{font-size:1.5rem;margin:0 0 .3rem}.feature-lines p{margin:0;color:var(--muted);max-width:50rem}

.impact-gallery{padding:7rem max(1rem,calc((100vw - 1180px)/2));background:#090817}.impact-grid{display:grid;grid-template-columns:1.15fr .85fr .85fr;grid-template-rows:300px 260px;gap:.8rem}.impact-grid figure{margin:0;overflow:hidden}.impact-grid img{width:100%;height:100%;object-fit:cover;transition:transform .35s ease}.impact-grid figure:hover img{transform:scale(1.03)}.g1{grid-row:1/3}.g4{grid-column:2/4}.g5{display:none}

.info-stage{padding:7rem max(1rem,calc((100vw - 1180px)/2));background:linear-gradient(135deg,#080a20,#0b1028 60%,#130a25)}.info-stage-head h2 span{color:var(--pink)}
.info-stage-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:2.5rem}.info-panel{padding:1.4rem;border:1px solid rgba(255,255,255,.16);border-radius:14px;background:rgba(9,27,48,.72)}.info-panel-title{display:flex;align-items:center;gap:.75rem;text-transform:uppercase;letter-spacing:.08em;font-size:.8rem;font-weight:900;margin-bottom:1rem}.info-panel-title svg{width:42px;height:42px;padding:.45rem;border:1px solid currentColor;border-radius:10px}.accent-pink .info-panel-title{color:var(--pink)}.accent-cyan .info-panel-title{color:var(--cyan)}.accent-violet .info-panel-title{color:var(--violet)}.info-panel strong{display:block;font-size:1.25rem;margin-bottom:.8rem}.info-panel p,.info-panel small{color:var(--muted);line-height:1.55}.info-panel a{color:var(--cyan);font-weight:800}
.demo-actions{margin-top:1rem;border-radius:14px}.demo-actions .action-card{min-height:104px}.demo-actions svg{width:28px;height:28px}

.regional-stage{display:grid;grid-template-columns:.75fr 1.25fr;gap:3rem;padding:6rem max(1rem,calc((100vw - 1180px)/2));background:#060b18}.regional-stage-mark{font-size:clamp(3.5rem,7vw,7rem);font-weight:950;line-height:.82;letter-spacing:-.07em;color:transparent;-webkit-text-stroke:1px rgba(36,216,255,.45)}.regional-stage p{color:var(--muted);line-height:1.7}

.closing-stage{display:grid;grid-template-columns:1fr 1fr;min-height:620px}.closing-image{min-height:540px}.closing-image img{width:100%;height:100%;object-fit:cover}.closing-copy{display:flex;flex-direction:column;justify-content:center;padding:clamp(3rem,7vw,7rem);background:radial-gradient(circle at 20% 20%,rgba(255,47,131,.18),transparent 22rem),#0a0b22}.closing-copy p{color:var(--muted)}

.thank-stage{display:grid;grid-template-columns:.7fr 1.3fr;gap:3rem;align-items:center;padding:6rem max(1rem,calc((100vw - 1180px)/2));background:#080817}.thank-brand img{width:100%;max-width:420px;transform:rotate(-2deg);box-shadow:0 20px 55px rgba(0,0,0,.3)}.thank-copy p{color:var(--muted)}

.organizer-quiet{display:flex;justify-content:space-between;gap:2rem;align-items:end;padding:4rem max(1rem,calc((100vw - 1180px)/2));background:#050712;border-top:1px solid rgba(255,255,255,.08)}.organizer-quiet h2{font-size:clamp(2rem,4vw,3.6rem);margin:.3rem 0}.organizer-quiet p{color:var(--muted)}.organizer-quiet-links{display:flex;flex-direction:column;gap:.6rem;text-align:right}.organizer-quiet a{color:var(--cyan)}

@media(max-width:800px){
  .poster-hero{min-height:auto;padding-top:5.5rem;padding-bottom:4rem}.poster-hero-inner{grid-template-columns:1fr}.poster-mark{display:none}.poster-copy h1 span{font-size:clamp(5.2rem,27vw,8rem)}
  .poster-facts{display:grid;grid-template-columns:1fr 1fr}.poster-facts span:first-child{grid-column:1/-1}
  .open-countdown-inner{grid-template-columns:1fr;gap:1.5rem}.open-numbers .countdown-item{padding:0 .4rem}.open-numbers strong{font-size:clamp(2.2rem,11vw,4rem)}
  .story-split,.closing-stage,.thank-stage,.regional-stage{grid-template-columns:1fr}.story-image{min-height:480px}.story-copy{padding:3.5rem 1.2rem}.story-image-type{font-size:clamp(3.2rem,14vw,5rem)}
  .photo-ribbon{grid-template-columns:1fr 1fr}.photo-ribbon .wide{grid-column:1/-1;height:310px}.ribbon-type{min-height:240px}
  .feature-stage,.impact-gallery,.info-stage,.regional-stage{padding-left:1.2rem;padding-right:1.2rem}
  .impact-grid{grid-template-columns:1fr 1fr;grid-template-rows:260px 220px 220px}.g1{grid-column:1/-1;grid-row:auto}.g4{grid-column:1/-1}.g5{display:block}
  .info-stage-grid{grid-template-columns:1fr}.demo-actions{grid-template-columns:1fr!important}.demo-actions .action-card+.action-card{border-left:0!important;border-top:1px solid rgba(255,255,255,.16)}
  .regional-stage-mark{font-size:clamp(3rem,15vw,5rem)}
  .closing-image{min-height:360px}.closing-copy{padding:3.5rem 1.2rem}.thank-stage{padding:4rem 1.2rem}.thank-brand img{max-width:none}
  .organizer-quiet{flex-direction:column;align-items:flex-start;padding:3rem 1.2rem}.organizer-quiet-links{text-align:left}
}