/* =========================================================================
   HOCHZEITS-HOMEPAGE – STYLES
   Farben werden zur Laufzeit aus config.js gesetzt (siehe main.js).
   ========================================================================= */

:root {
  --akzent: #b08968;
  --creme: #faf6f0;
  --dunkel: #3a342e;
  --weich: rgba(58, 52, 46, 0.08);
  --serif: "Cormorant Garamond", Georgia, serif;
  --sans: "Montserrat", system-ui, sans-serif;
  --hand: "Caveat", "Cormorant Garamond", cursive;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

/* Konzept-Palette: Kapitelwechsel Tag -> Champagner -> Silvesternacht.
   Mattes, ruhiges Gold (kein grelles Gelb). */
:root {
  --day-bg: #FAF8F3;
  --cream-bg: #F2EBDD;
  --night-bg: #141519;   /* warmes Fast-Schwarz (Fallback) */
  --gold: #B9985A;
  --gold-soft: #C9A86A;
  --text-dark: #24211C;
  --text-light: #F8F3EA;
  --footer-bg: #070A0A;  /* Footer – tiefschwarz, eigenständiger Mitternachtsabschluss */
  --gold-deco: #C59B45;  /* mattes Art-déco-Gold */
}

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

body {
  font-family: var(--sans);
  font-weight: 300;
  color: var(--dunkel);
  background: var(--day-bg);
  line-height: 1.7;
  overflow-x: hidden;
  position: relative;
}

/* =========================================================================
   SECHS KAPITEL – ein langsam fließender Verlauf über die ganze Seite.
   Jede Sektion hat einen eigenen Verlauf; die Endfarbe ist die Startfarbe der
   nächsten -> nahtloser, langsamer Übergang. Blau erst ab „Infos" (Dämmerung),
   Nacht erst ab RSVP. Hero (weiß) und Footer (#141519) haben eigene Regeln.
   ========================================================================= */
#ablauf   { background: linear-gradient(180deg, #FCF9F4 0%, #F1EADF 55%, #E7EBEE 100%); }                 /* Champagner, endet in ganz sanftem Blau */
#location { background: linear-gradient(180deg, #E7EBEE 0%, #DCE4EF 55%, #CFDCEC 100%); }                /* Luft wird kühler/blauer */
/* Dämmerung -> Nacht als EIN durchgehender Verlauf über Infos + RSVP zusammen,
   damit an der Sektionsgrenze keine Steigungs-Kante entsteht. Endet in Schwarz
   (= Footer-Farbe). Die Sektionen selbst sind transparent. */
.night {
  background: linear-gradient(180deg,
    #CFDCEC 0%, #A9BED9 12%, #7089AF 22%, #455C82 31%, #283A5D 39%,
    #17213A 47%, #121826 64%, #0A0E13 83%, #070A0A 100%);
}
#infos, #rsvp { background: transparent; }

/* Sterne + helle Schrift: Infos (untere, dunkle Hälfte) und RSVP (ganz). */
#rsvp, #infos { position: relative; overflow: hidden; }
#rsvp { color: var(--text-light); }
#rsvp > .container, #infos > .container { position: relative; z-index: 1; }
.seg-stars { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.seg-stars span, .footer__stars span {
  position: absolute; border-radius: 50%;
  color: var(--gold-soft);              /* Grundfarbe; bunte Sterne setzen color inline */
  background: currentColor;
  box-shadow: 0 0 9px currentColor, 0 0 3px currentColor;   /* kräftigeres Glimmen */
  opacity: var(--o, .4);
  animation: twinkle 4s ease-in-out infinite;
}
@keyframes twinkle {
  0%, 100% { opacity: var(--o, .4); }
  50%      { opacity: calc(var(--o, .4) * .3); }
}
@media (prefers-reduced-motion: reduce) {
  .seg-stars span, .footer__stars span { animation: none; }
}
#rsvp .section__lead { color: #D8CFC2; }
#rsvp .rsvp legend, #rsvp .rsvp label { color: #C9C0B4; }
#rsvp .rsvp .radio { color: var(--text-light); }

h1, h2, h3 { font-family: var(--serif); font-weight: 500; line-height: 1.15; }

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

/* ---------- Hero ---------- */
.hero {
  min-height: 100vh; display: flex; align-items: flex-start; justify-content: center;
  text-align: center; position: relative; padding: 2.5rem 1.5rem 4rem;
  overflow: hidden;   /* Schnee im Hero clippen */
  /* Beginnt rein weiß und wird nach unten sanft warmes Creme (Startfarbe Ablauf). */
  background: linear-gradient(180deg, #ffffff 0%, #ffffff 20%, #FCF9F4 100%);
}
.hero__inner { position: relative; z-index: 1; }   /* Inhalt über dem Schnee */
.hero__scroll { z-index: 1; }

/* ---------- Leichter Schneefall im Hero ---------- */
.snow { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.snow span {
  position: absolute; top: 0; border-radius: 50%;
  color: #E0C489;                            /* Grundton; Gold/Silber je Flocke inline gesetzt */
  background: currentColor;
  box-shadow: 0 0 6px currentColor, 0 0 2px currentColor;   /* sanftes Glimmen/Glow */
  opacity: var(--o, .6);
  animation: snowfall var(--dur, 10s) linear infinite;
}
@keyframes snowfall {
  0%   { transform: translate(0, -10vh);            opacity: 0; }
  12%  { opacity: var(--o, .6); }
  88%  { opacity: var(--o, .6); }
  100% { transform: translate(var(--drift, 0), 108vh); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .snow { display: none; } }
.hero__inner { max-width: 760px; animation: fadeUp 1.2s ease both; }
.hero__eyebrow {
  font-family: var(--hand); font-weight: 700;
  text-transform: uppercase; letter-spacing: .15em; font-size: 1.6rem;
  color: var(--dunkel); margin-bottom: .5rem;
}
.hero__names {
  font-family: var(--hand); font-weight: 700;
  font-size: clamp(3.1rem, 11.5vw, 6.8rem); line-height: .9;
  display: flex; align-items: center; justify-content: center;
  gap: clamp(.6rem, 2.5vw, 1.6rem); flex-wrap: wrap;
}
.hero__amp { color: var(--akzent); font-weight: 600; }
.hero__date {
  margin-top: 1rem; letter-spacing: .22em; text-transform: uppercase;
  font-size: clamp(.85rem, 2vw, 1rem);
}
.hero__spruch { font-family: var(--sans); font-weight: 400; text-transform: uppercase; letter-spacing: .28em; font-size: .85rem; margin: 1.1rem 0 .2rem; color: var(--akzent); }
.hero__cd { margin-top: 1.8rem; }
.hero .btn { margin-top: 2.6rem; }
.cd__status { font-family: var(--sans); font-size: .72rem; letter-spacing: .28em; text-transform: uppercase; color: var(--akzent); margin-bottom: .8rem; }
.cd__tiles { display: flex; gap: 1.2rem; justify-content: center; flex-wrap: wrap; }
.cd__item { min-width: 70px; }
.cd__num { font-family: var(--serif); font-size: 2.6rem; line-height: 1; color: var(--akzent); font-variant-numeric: tabular-nums; }
.cd__label { font-size: .7rem; letter-spacing: .2em; text-transform: uppercase; color: #8a8178; }
.hero__notiz { max-width: 540px; margin: 0 auto 2rem; font-size: .92rem; color: #7a7167; }
.hero__bild { width: min(340px, 70vw); margin: 1.5rem auto .5rem; mix-blend-mode: multiply; }


.hero__scroll { position: absolute; bottom: 1.5rem; left: 50%; transform: translateX(-50%); font-size: 1.4rem; color: var(--akzent); animation: bob 2s infinite; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-block; background: var(--tgold, var(--gold)); color: #fff;
  text-decoration: none; padding: .85rem 2.2rem; border: 1px solid var(--tgold, var(--gold));
  border-radius: 999px; letter-spacing: .12em; text-transform: uppercase;
  font-size: .8rem; cursor: pointer; font-family: var(--sans);
  box-shadow: var(--tglow-btn, none);       /* Glow entwickelt sich pro Sektion (matt -> glam) */
  transition: transform .2s, box-shadow .2s, background .2s, filter .2s;
}
.btn:hover {
  transform: translateY(-2px); filter: brightness(1.07);
  box-shadow: 0 8px 20px rgba(0,0,0,.16), 0 0 24px 2px rgba(228,200,142,.65);   /* Gold-Glow beim Hover */
}
.btn--outline { background: var(--tgold, var(--gold)); color: #fff; }   /* jetzt AUSGEFÜLLT (z. B. Google-Maps-Buttons) */

/* ---------- Sections ---------- */
.section { padding: clamp(4rem, 9vw, 7rem) 1.5rem; }
/* Kein eigener Abschnitts-Hintergrund mehr – der durchgehende Verlauf trägt alles. */
.container { max-width: 1080px; margin: 0 auto; }
.container--narrow { max-width: 720px; }
.center { text-align: center; }
.section__title {
  font-family: var(--serif); font-weight: 600;   /* edle Serifen-Schrift */
  text-transform: uppercase; letter-spacing: .1em;
  font-size: clamp(1.5rem, 3.2vw, 2.3rem); text-align: center; margin-bottom: .5rem;
  color: var(--tgold, var(--gold));                /* Ton pro Sektion (Entwicklung, s.u.) */
  text-shadow: var(--tglow-text, none);
  position: relative; z-index: 0; padding: 1.2em 0;   /* eigener Stacking-Context + Platz für die Schmucklinie */
}
.section__title::after { display: none; }   /* alte Unterstrich-Linie ersetzt durch .title-deco-svg */
/* Schmucklinie (teilt sich sanft, läuft parallel am Wort vorbei, vereint sich wieder).
   Spannt über die volle Bildschirmbreite (durchgezogen bis zum Rand). Breite/Höhe
   setzt main.js in px; hier nur zentrieren. */
.title-deco-svg {
  position: absolute; left: 50%; top: 0; transform: translateX(-50%);
  z-index: -1; pointer-events: none; overflow: visible;
  color: var(--tgold, var(--gold));
  filter: var(--tglow-svg, none);
}

/* Gold-Entwicklung: von oben MATT schrittweise zu unten DEKO-ART-GLOW/GLAMOUR,
   damit das Footer-Gold nicht plötzlich auftaucht. Ton wird wärmer, Glow nimmt zu
   (auf den dunklen Sektionen sichtbar). */
#ablauf   { --tgold: #B9985A; }                                                        /* matt */
#location { --tgold: #BE9D57; --tglow-text: 0 0 7px rgba(201,168,106,.16);  --tglow-svg: drop-shadow(0 0 1px rgba(201,168,106,.25)); --tglow-btn: 0 0 13px rgba(201,168,106,.22); }
#infos    { --tgold: #C3A253; --tglow-text: 0 0 10px rgba(212,180,112,.30); --tglow-svg: drop-shadow(0 0 2px rgba(212,180,112,.42)); --tglow-btn: 0 0 16px rgba(212,180,112,.32); }
#rsvp     { --tgold: #CBAA5C; --tglow-text: 0 0 15px rgba(228,200,142,.55); --tglow-svg: drop-shadow(0 0 4px rgba(228,200,142,.6)); --tglow-btn: 0 0 22px rgba(228,200,142,.5); }
.section__lead { text-align: center; color: #6b6258; max-width: 600px; margin: 0 auto 3rem; font-size: 1.1rem; }

/* ---------- Timeline (Geschichte) ---------- */
.timeline { position: relative; max-width: 760px; margin: 0 auto; }
.timeline::before {
  content: ""; position: absolute; left: 50%; top: 0; bottom: 0;
  width: 1px; background: var(--weich); transform: translateX(-50%);
}
.timeline__item { position: relative; width: 50%; padding: 0 2.5rem 2.5rem; }
.timeline__item:nth-child(odd) { left: 0; text-align: right; }
.timeline__item:nth-child(even) { left: 50%; text-align: left; }
.timeline__item::before {
  content: ""; position: absolute; top: .4rem; width: 12px; height: 12px;
  background: var(--akzent); border-radius: 50%; box-shadow: 0 0 0 5px var(--creme);
}
.section--alt .timeline__item::before { box-shadow: 0 0 0 5px #fff; }
.timeline__item:nth-child(odd)::before { right: -6px; }
.timeline__item:nth-child(even)::before { left: -6px; }
.timeline__jahr { color: var(--akzent); font-family: var(--serif); font-size: 1.6rem; }
.timeline__titel { font-size: 1.3rem; margin: .2rem 0 .4rem; }
.timeline__text { color: #6b6258; }

/* ---------- Schedule (Ablauf) ---------- */
/* Ablauf als schwebende, halbtransparente Seidenkarten (kein Timeline-Look). */
.schedule { position: relative; max-width: 540px; margin: 0 auto; display: flex; flex-direction: column; gap: clamp(1.8rem, 4.4vw, 2.8rem); }
/* Vertikaler Gold-Faden durch die Kartenmitte – verbindet die Karten. */
.schedule::before {
  content: ""; position: absolute; z-index: 0;
  top: 8px; bottom: 8px; left: 50%; transform: translateX(-50%);
  width: 2.5px;
  background: linear-gradient(180deg, transparent, rgba(184,154,99,.62) 5%, rgba(184,154,99,.62) 95%, transparent);
}
.schedule__item {
  position: relative; z-index: 1;
  text-align: center;
  padding: clamp(22px, 4.5vw, 32px);
  border-radius: 22px;
  background: #ffffff;                             /* solide, ohne Transparenz */
  border: 1px solid rgba(184, 154, 99, 0.5);       /* Gold-Rand */
  box-shadow: 0 8px 26px rgba(120, 100, 60, 0.05), 0 0 42px rgba(255, 255, 255, 0.85);   /* weißer Glow */
}
.schedule__zeit {
  font-family: var(--serif); font-weight: 600;
  font-size: clamp(2rem, 5vw, 2.6rem); line-height: 1; letter-spacing: .02em;
  color: #B89A63; margin-bottom: .4rem;
}
.schedule__titel { font-family: var(--serif); font-size: clamp(1.2rem, 3vw, 1.5rem); color: var(--dunkel); line-height: 1.25; }
.schedule__ort { color: #8a8178; font-size: .92rem; letter-spacing: .04em; margin-top: .35rem; }
.schedule__text { color: #7a7167; font-size: .88rem; font-style: italic; margin-top: .3rem; }

/* Abend-/Silvesterpunkte minimal festlicher: kräftigeres Gold, etwas mehr
   Transparenz, ein sehr dezenter goldener Licht-Schein im Karten-Hintergrund. */
.schedule__item--abend {
  background: radial-gradient(150px 90px at 82% 18%, rgba(196, 164, 106, 0.12), transparent 70%), #ffffff;
}
.schedule__item--abend .schedule__zeit { color: #C4A46A; }
/* Zeremonie-Punkte (Standesamtliche Trauung / Freie Trauung): goldener Glow */
.schedule__item--zeremonie {
  border-color: rgba(184, 154, 99, 0.7);
  box-shadow: 0 8px 26px rgba(120, 100, 60, 0.06), 0 0 34px rgba(196, 164, 106, 0.55);
}
/* Silvester (00:00): blauer Mitternachts-Glow – der Jahreswechsel */
.schedule__item--silvester {
  border-color: rgba(120, 150, 200, 0.6);
  background: radial-gradient(160px 100px at 82% 18%, rgba(120, 150, 205, 0.14), transparent 70%), #ffffff;
  box-shadow: 0 8px 26px rgba(60, 80, 120, 0.10), 0 0 38px rgba(120, 155, 215, 0.55);
}
.schedule__item--silvester .schedule__zeit { color: #6E88B8; }

/* ---------- Location ---------- */
.locations { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; margin-top: 3rem; align-items: stretch; }
.loc-card { background: #fffdf9; border: 1px solid var(--weich); border-radius: 10px; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 12px 40px rgba(0,0,0,.08); }
.loc-card__img { width: 100%; height: 220px; object-fit: cover; display: block; }
.loc-card__body { padding: 2rem; display: flex; flex-direction: column; flex: 1; align-items: center; text-align: center; }
.loc-card__body .gate__badge { margin-bottom: .8rem; }
.loc-card__body h3 { font-size: 1.6rem; margin-bottom: .3rem; }
.location__adresse { color: var(--akzent); margin-bottom: 1rem; }
.loc-card__body > p { color: #6b6258; margin-bottom: 1.5rem; }
.loc-card__body .btn { margin-top: auto; white-space: nowrap; padding-inline: clamp(1rem, 4vw, 2.2rem); font-size: clamp(.66rem, 2.6vw, .8rem); }

/* ---------- Cards (Infos) ---------- */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.5rem; margin-top: 1rem; }
.card { background: #fffdf9; border: 1px solid var(--weich); border-radius: 10px; padding: 2rem; }
#infos .card { text-align: center; }
.card__icon { display: block; width: 120px; height: 120px; margin: .2rem auto 1rem; object-fit: contain; }
.card h3 { font-size: 1.85rem; margin-bottom: 1.6rem; color: var(--akzent); }
#infos .card h3::after { content: ""; display: block; width: 46px; height: 1px; margin: 1rem auto 0; background: linear-gradient(90deg, transparent, rgba(184,154,99,.6), transparent); }
.card p { color: #6b6258; }
.card strong { color: var(--gold); font-weight: 700; }
.card__list { list-style: none; margin-top: 1rem; }
.card__list li { padding: .6rem 0; border-top: 1px solid var(--weich); }
.card__list strong { color: var(--dunkel); font-weight: 500; }
.card__hint { margin-top: .8rem; font-style: italic; font-size: .9rem; }

/* ---------- FAQ ---------- */
.faq { margin-top: 1rem; }
.faq__item { border-bottom: 1px solid var(--weich); }
.faq__q {
  width: 100%; text-align: left; background: none; border: 0; cursor: pointer;
  padding: 1.2rem 2rem 1.2rem 0; font-family: var(--serif); font-size: 1.25rem;
  color: var(--dunkel); position: relative;
}
.faq__q::after { content: "+"; position: absolute; right: 0; top: 1.1rem; color: var(--akzent); font-size: 1.5rem; transition: transform .3s; }
.faq__item.open .faq__q::after { transform: rotate(45deg); }
.faq__a { max-height: 0; overflow: hidden; transition: max-height .35s ease; color: #6b6258; }
.faq__a p { padding: 0 0 1.2rem; }

/* ---------- RSVP-Wizard: geführter Dialog ---------- */
.wiz { margin-top: 2rem; }
.wiz-card {
  display: flex; flex-direction: column; gap: 1.2rem;
  padding: clamp(1.4rem, 4vw, 2.3rem);
  border: 1px solid rgba(203,170,92,0.34); border-radius: 20px;
  background: rgba(255,255,255,0.035);
  box-shadow: 0 12px 44px rgba(0,0,0,0.30), var(--tglow-btn, none);
  backdrop-filter: blur(2px);
}
.wiz-sec { display: flex; flex-direction: column; gap: 1rem; }
.wiz-sec--done { gap: 0; }
.wiz-sec + .wiz-sec { border-top: 1px solid rgba(203,170,92,0.14); padding-top: 1.1rem; }

.wiz-q {
  font-family: var(--serif); font-size: clamp(1.25rem, 3.4vw, 1.6rem); line-height: 1.25; text-align: center;
  color: var(--tgold, var(--gold)); text-shadow: var(--tglow-text, none);
}
.wiz-q--sub { font-size: 1.05rem; margin-top: .2rem; }
.wiz-sub { font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: #B7AE9F; margin-top: .2rem; text-align: center; }
.wiz-hint { font-size: .78rem; color: #A79F92; line-height: 1.45; text-align: center; }

/* Auswahl-Karten (keine Radiobuttons, keine Dropdowns) */
.wiz-opts { display: flex; flex-direction: column; gap: .7rem; }
.wiz-opts--num { flex-direction: row; flex-wrap: wrap; gap: .6rem; justify-content: center; }
.wiz-opts--grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.wiz-opts--chips { flex-direction: row; flex-wrap: wrap; gap: .6rem; justify-content: center; }
.wiz-opt--chip { flex: none; padding: .6rem 1.2rem; border-radius: 999px; }
@media (min-width: 540px) {
  .wiz-opts--2 { flex-direction: row; }
  .wiz-opts--2 > .wiz-opt { flex: 1; }
}
.wiz-opt {
  font-family: var(--sans); font-size: 1rem; text-align: center; line-height: 1.3;
  padding: 1rem 1.2rem; border-radius: 14px; cursor: pointer; color: var(--text-light);
  background: rgba(255,255,255,0.045); border: 1px solid rgba(203,170,92,0.35);
  transition: transform .15s, border-color .2s, background .2s, box-shadow .2s, color .2s;
}
.wiz-opt:hover { transform: translateY(-2px); border-color: rgba(228,200,142,0.75); box-shadow: 0 6px 18px rgba(0,0,0,0.25), var(--tglow-btn, none); }
.wiz-opt.is-active { background: var(--tgold, var(--gold)); color: #1b1b1b; font-weight: 500; border-color: var(--tgold, var(--gold)); box-shadow: var(--tglow-btn, none); }
.wiz-opt--num { min-width: 3.1rem; flex: none; padding: .8rem 1rem; font-variant-numeric: tabular-nums; }

/* Eingabefelder */
.wiz-field { display: flex; flex-direction: column; gap: .4rem; font-size: .74rem; letter-spacing: .09em; text-transform: uppercase; color: #B7AE9F; text-align: center; }
.wiz-field input, .wiz-field textarea {
  font-family: var(--sans); font-size: 1rem; padding: .8rem 1rem; text-transform: none; letter-spacing: normal;
  border: 1px solid rgba(203,170,92,0.3); border-radius: 10px; background: rgba(255,255,255,0.05); color: var(--text-light);
}
.wiz-field input { text-align: center; }
.wiz-field input::placeholder, .wiz-field textarea::placeholder { color: #7d7568; }
.wiz-field input:focus, .wiz-field textarea:focus { outline: none; border-color: rgba(228,200,142,0.7); }
.wiz-weiter { align-self: center; margin-top: .2rem; }

.wiz-kid { display: flex; flex-direction: column; gap: .8rem; padding: 1rem; border: 1px solid rgba(203,170,92,0.22); border-radius: 14px; background: rgba(255,255,255,0.02); }

/* Beantwortete Abschnitte – kompakte Zusammenfassung */
.wiz-sumline { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; font-size: .9rem; color: #C9C0B4; }
.wiz-sumtext { min-width: 0; }
.wiz-sumline b { font-weight: 500; color: #DED5C7; font-family: var(--sans); }
.wiz-edit { flex: none; background: none; border: 0; cursor: pointer; padding: 0; font-size: .78rem; color: var(--tgold, var(--gold)); text-decoration: underline; }

/* Danke-Karte */
.wiz-danke { text-align: center; align-items: center; }
.wiz-danke p { color: #D8CFC2; line-height: 1.55; }

.rsvp__status { text-align: center; font-style: italic; color: var(--tgold, var(--akzent)); min-height: 1.2em; margin-top: 1rem; }

/* ---------- Kontakt ---------- */
.kontakt { display: flex; gap: 2.5rem; justify-content: center; flex-wrap: wrap; margin-top: 2rem; }
.kontakt__person strong { display: block; font-family: var(--serif); font-size: 1.3rem; color: var(--dunkel); }
.kontakt__person span { color: #6b6258; font-size: .95rem; }

/* ---------- Footer ---------- */
/* ---------- Footer: eigenständiger Art-déco-Mitternachtsabschluss ---------- */
.footer {
  position: relative; overflow: hidden; text-align: center;
  padding: clamp(2.3rem, 5vw, 3.4rem) 1.5rem;
  background: var(--footer-bg);
  color: #E7DFCE;
}
.footer > * { position: relative; z-index: 1; }
/* Doppelter Gold-Rahmen (dünn, eingerückt) – klassisches Art-déco. */
.footer::before, .footer::after { content: ""; position: absolute; z-index: 0; pointer-events: none; }
.footer::before { inset: clamp(10px, 2.4vw, 16px); border: 1.5px solid rgba(197,155,69,.6); box-shadow: 0 0 24px rgba(197,155,69,.12); }
.footer::after  { inset: clamp(14px, 3vw, 22px); border: 1px solid rgba(197,155,69,.24); }
.footer__names { font-family: var(--hand); font-weight: 700; text-transform: none; letter-spacing: normal; font-size: clamp(2.4rem, 5.5vw, 3.3rem); line-height: 1; color: var(--gold-deco); text-shadow: 0 0 18px rgba(230,196,120,.5), 0 0 5px rgba(230,196,120,.4); }
.footer__hashtag { color: var(--gold-deco); text-transform: uppercase; letter-spacing: .28em; font-size: .78rem; margin: .7rem 0; opacity: .95; text-shadow: 0 0 10px rgba(230,196,120,.3); }
.footer__date { font-size: .7rem; letter-spacing: .3em; text-transform: uppercase; color: #BBB199; }

/* ---------- Musik-Player ---------- */
.music {
  position: fixed; bottom: 1.2rem; left: 1.2rem; z-index: 90;
  display: flex; align-items: center; gap: .55rem;
  background: var(--dunkel); color: var(--creme);
  border: 0; border-radius: 999px; cursor: pointer;
  padding: .6rem .9rem; font-family: var(--sans); font-size: .8rem;
  letter-spacing: .08em; box-shadow: 0 6px 20px rgba(0,0,0,.18);
  transition: transform .2s, box-shadow .2s;
}
.music:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(0,0,0,.25); }
.music__icon { font-size: .95rem; line-height: 1; }
.music__label { max-width: 0; overflow: hidden; white-space: nowrap; opacity: 0; transition: max-width .35s, opacity .35s; }
.music:hover .music__label, .music--playing .music__label { max-width: 160px; opacity: 1; }
.music--playing { background: var(--akzent); }

/* ---------- Willkommens-Bildschirm (Namens-Eingang) ---------- */
.no-scroll { overflow: hidden; }
.welcome {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  padding: 1.5rem; text-align: center;
  background: var(--creme);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
  transition: opacity .5s ease;
}
.welcome--hide { opacity: 0; pointer-events: none; }
/* Funkel-Raster: technisch als CSS-Dot-Pattern (bildet den Shader-Look nach).
   ~10 px Rasterdichte, ~3 px Punkte. Gold + Silber als zwei leicht versetzte
   Layer mit sehr dezenter Opacity-Animation. */
.welcome__stars { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.welcome__stars::before,
.welcome__stars::after { content: ""; position: absolute; inset: 0; background-repeat: repeat; }
.welcome__stars::before {                       /* Gold-Raster */
  background-image: radial-gradient(circle, #b88650 1.4px, transparent 1.6px);
  background-size: 14px 14px;
  background-position: 0 0;
  opacity: .55;
  animation: welcomeShimmerGold 7s ease-in-out infinite;
}
.welcome__stars::after {                        /* Silber-Raster, um eine halbe Zelle versetzt */
  background-image: radial-gradient(circle, #9a9aa2 1.3px, transparent 1.6px);
  background-size: 14px 14px;
  background-position: 7px 7px;
  opacity: .4;
  animation: welcomeShimmerSilver 7s ease-in-out infinite;
}
@keyframes welcomeShimmerGold   { 0%, 100% { opacity: .5; }  50% { opacity: .62; } }
@keyframes welcomeShimmerSilver { 0%, 100% { opacity: .42; } 50% { opacity: .3; } }
@media (prefers-reduced-motion: reduce) {
  .welcome__stars::before, .welcome__stars::after { animation: none; }
}
.welcome__card {
  position: relative; z-index: 1;
  max-width: 460px; width: 100%;
  background: rgba(255,255,255,.82);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  border: 1px solid var(--weich); border-radius: 14px;
  padding: 2.4rem 2rem;
  box-shadow: 0 20px 60px rgba(60,50,40,.18);
  animation: fadeUp 1s ease both;
}
.welcome__eyebrow {
  font-family: var(--hand); font-weight: 700;
  text-transform: uppercase; letter-spacing: .15em; font-size: 1.3rem; color: var(--dunkel);
}
.welcome__names { font-family: var(--hand); font-weight: 700; font-size: clamp(3rem, 14vw, 4.5rem); line-height: .95; margin: .2rem 0; }
.welcome__names span:nth-child(2) { color: var(--akzent); }
.welcome__date { letter-spacing: .2em; text-transform: uppercase; font-size: .8rem; margin-bottom: 1.5rem; }
.welcome__intro { color: #6b6258; margin-bottom: 1.5rem; }
.welcome__form { display: flex; flex-direction: column; gap: .7rem; }
.welcome__form input {
  font-family: var(--sans); font-size: 1rem; text-align: center;
  padding: .85rem 1rem; border: 1px solid var(--weich); border-radius: 6px; background: #fff; color: var(--dunkel);
}
.welcome__form input:focus { outline: none; border-color: var(--akzent); }
.welcome__form .btn { margin-top: .4rem; }
.welcome__msg { min-height: 1.4em; margin-top: 1rem; font-style: italic; font-size: .9rem; }
.welcome__msg--warn { color: #b5564e; }
.welcome__tests {
  margin: 1.25rem 0 .4rem;
  padding-top: 1rem;
  border-top: 1px solid var(--weich);
}
.welcome__tests-title {
  font-size: .72rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #8a8178;
  margin-bottom: .7rem;
}
.welcome__test-list {
  display: flex;
  flex-direction: column;
  gap: .55rem;
}
.welcome__test-btn {
  width: 100%;
  border: 1px dashed rgba(168, 137, 92, .55);
  border-radius: 8px;
  background: rgba(168, 137, 92, .08);
  color: var(--dunkel);
  cursor: pointer;
  font-family: var(--sans);
  padding: .75rem .9rem;
  text-align: left;
  transition: border-color .2s, background .2s, transform .2s;
}
.welcome__test-btn:hover {
  border-color: var(--akzent);
  background: rgba(168, 137, 92, .14);
  transform: translateY(-1px);
}
.welcome__test-name {
  display: block;
  font-weight: 500;
  font-size: .9rem;
}
.welcome__test-desc {
  display: block;
  color: #6b6258;
  font-size: .78rem;
  margin-top: .15rem;
}
.welcome__skip { background: none; border: 0; margin-top: 1.2rem; color: #8a8178; font-size: .8rem; text-decoration: underline; cursor: pointer; }

/* ---------- Persönliche Begrüßung im Hero ---------- */
.hero__greeting { font-family: var(--hand); font-weight: 600; font-size: clamp(1.15rem, 5vw, 1.95rem); line-height: 1.2; color: var(--akzent); margin-bottom: .6rem; white-space: nowrap; }
.hero__greeting strong { font-weight: 700; }

/* ---------- Gästebereich (Namens-Vorfilter) ---------- */
.gate { max-width: 560px; margin: 0 auto 2.5rem; text-align: center; }
.gate__intro { color: #6b6258; margin-bottom: 1.2rem; }
.gate__form { display: flex; gap: .6rem; justify-content: center; flex-wrap: wrap; }
.gate__form input {
  font-family: var(--sans); font-size: 1rem; padding: .7rem 1rem;
  border: 1px solid var(--weich); border-radius: 6px; background: #fff; color: var(--dunkel);
}
.gate__form input:focus { outline: none; border-color: var(--akzent); }
.gate__msg { margin-top: 1rem; min-height: 1.4em; font-style: italic; }
.gate__msg--ok { color: var(--akzent); }
.gate__msg--warn { color: #b5564e; }
.gate__greeting {
  text-align: center; margin-bottom: 1.5rem; font-family: var(--hand);
  font-weight: 700; font-size: 1.8rem;
}
.gate__reset { display: inline-block; margin-top: .4rem; font-size: .8rem; color: #8a8178; cursor: pointer; text-decoration: underline; background: none; border: 0; }
.gate__badge { display: inline-block; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--akzent); border: 1px solid var(--akzent); border-radius: 999px; padding: .15rem .8rem; margin-bottom: 1.5rem; }

/* ---------- Animationen ---------- */
@keyframes fadeUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: none; } }
@keyframes bob { 0%,100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(8px); } }

.reveal { opacity: 0; transform: translateY(30px); transition: opacity .8s ease, transform .8s ease; }
.reveal.visible { opacity: 1; transform: none; }

/* ---------- Mobil ---------- */
@media (max-width: 760px) {
  .locations { grid-template-columns: 1fr; gap: 1.5rem; }
  /* Handy: volle Breite behalten, Höhe schrumpft mit (kein seitlicher Beschnitt) */
  .loc-card__img { height: auto; }
  .timeline::before { left: 8px; }
  .timeline__item { width: 100%; left: 0 !important; text-align: left !important; padding-left: 2.5rem; padding-right: 0; }
  .timeline__item::before { left: 2px !important; right: auto !important; }
}