/* ─────────────────────────────────────────────────────────────
   Hochzeit DE · Styles
   Mobile-first (alles ohne Media-Query gilt fürs Handy).
   Ab 900px → Desktop-Layout (Hero & Venue zweispaltig, grössere Typografie).
   ─────────────────────────────────────────────────────────── */

html, body { margin: 0; padding: 0; background: #DEDDD7; }
body {
  font-family: 'Manrope', system-ui, sans-serif;
  color: #0F0F12;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100dvh;
  min-height: 100vh;
}
*, *::before, *::after { box-sizing: border-box; }
button { font-family: inherit; }
input, textarea { font-family: inherit; -webkit-appearance: none; appearance: none; }
a { -webkit-tap-highlight-color: transparent; }

/* ── Dashboard ─────────────────────────────────────────────── */
.wd-dash-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 28px 24px 0;
}
.wd-dash-charts {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  padding: 24px 24px 0;
}
.wd-dash-card {
  background: #EBEAE4;
  border: 1px solid rgba(15,15,18,0.35);
  padding: 22px 22px 18px;
  display: flex;
  flex-direction: column;
  min-height: 280px;
}
.wd-dash-card-eyebrow {
  font-family: 'Manrope', system-ui, sans-serif;
  font-size: 10px; font-weight: 500; letter-spacing: 2.6px;
  text-transform: uppercase; color: #5A5A5C;
  text-align: center;
}

@media (min-width: 720px) {
  .wd-dash-stats {
    grid-template-columns: repeat(4, 1fr);
    padding: 36px 56px 0;
    gap: 14px;
  }
  .wd-dash-charts {
    grid-template-columns: 1fr 1fr;
    padding: 28px 56px 0;
    gap: 14px;
  }
  .wd-dash-list { padding-left: 32px !important; padding-right: 32px !important; }
  .wd-dash-list > div:first-child { padding-left: 24px !important; padding-right: 24px !important; }
}

@media (min-width: 1200px) {
  .wd-dash-stats { padding: 44px 80px 0; }
  .wd-dash-charts { padding: 32px 80px 0; }
  .wd-dash-list { padding-left: 56px !important; padding-right: 56px !important; }
}

/* ── Bühne ─────────────────────────────────────────────────── */
#stage {
  width: 100%;
  min-height: 100dvh;
  min-height: 100vh;
  background: #DEDDD7;
}

/* Standard (mobile): die Desktop-Varianten sind weg, nur Mobile-Bäume rendern. */
.wd-lang-desktop,
.wd-login-desktop { display: none; }

.wd-login-mobile {
  min-height: 100dvh;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Mittlerer Bereich (560–899px): Handy-Vorschau-Rahmen für Desktop-Tests */
@media (min-width: 560px) and (max-width: 899px) {
  body { background: #1a1916; }
  #stage {
    max-width: 430px;
    margin: 0 auto;
    min-height: 100dvh;
    box-shadow: 0 10px 60px rgba(0,0,0,0.25);
  }
}

/* ── Desktop-Layout ab 900px ───────────────────────────────── */
@media (min-width: 900px) {
  body { background: #DEDDD7; }
  #stage { max-width: none; box-shadow: none; }

  /* ── Sprache: zweispaltig (Foto · Inhalt) ── */
  .wd-lang-mobile { display: none; }
  .wd-lang-desktop {
    display: grid;
    grid-template-columns: 1fr 1fr;
    height: 100dvh;
    height: 100vh;
    overflow: hidden;
  }
  .wd-lang-desktop-photo {
    position: relative;
    background: #000;
    overflow: hidden;
  }
  .wd-lang-desktop-photo img {
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: center 50%;
    display: block;
  }
  .wd-lang-desktop-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: min(48px, 5vh) 56px;
    text-align: center;
    background: #DEDDD7;
    color: #0F0F12;
    gap: min(36px, 4vh);
  }

  /* ── Login: zweispaltig (Foto · Formular) ── */
  .wd-login-mobile { display: none; }
  .wd-login-desktop {
    display: grid;
    grid-template-columns: 1fr 1fr;
    height: 100dvh;
    height: 100vh;
    overflow: hidden;
    background: #DEDDD7;
  }
  .wd-login-desktop-photo {
    position: relative;
    background: #000;
    overflow: hidden;
  }
  .wd-login-desktop-photo img {
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: center 50%;
    display: block;
  }
  .wd-login-desktop-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(15,15,18,0.1) 0%, rgba(15,15,18,0.55) 100%);
    display: flex; flex-direction: column;
    align-items: flex-start; justify-content: flex-end;
    padding: min(56px, 6vh);
    color: #fff;
  }
  .wd-login-desktop-pane {
    display: flex;
    flex-direction: column;
    padding: min(24px, 3vh) 56px min(32px, 4vh);
    height: 100%;
    overflow: hidden;
  }
  .wd-login-desktop-topbar {
    display: flex; justify-content: space-between; align-items: center;
  }
  .wd-login-desktop-form {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    max-width: 420px;
    width: 100%;
    margin: 0 auto;
    min-height: 0;
  }
  .wd-login-desktop-footer {
    margin-top: min(24px, 3vh);
  }

  /* ── Home: Topbar ── */
  .wd-topbar {
    padding: 22px 56px !important;
  }

  /* Hero: Foto links 50%, Namen rechts 50% */
  .wd-hero {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: center;
    padding: 64px 72px !important;
    max-width: 1280px;
    margin: 0 auto;
  }
  .wd-hero-photo  { padding: 0 !important; max-width: none; }
  .wd-hero-photo .wd-frame > div { aspect-ratio: 4/5 !important; }

  /* Namen-Block: linksbündig in der Spalte, grösser */
  .wd-names {
    padding: 0 !important;
    text-align: left !important;
  }
  .wd-names .wd-deco-div { justify-content: flex-start !important; }
  .wd-names-cta { margin-top: 36px; }

  /* Programm: zentriert, max 760, mehr Luft */
  .wd-programme {
    padding: 80px 72px !important;
  }
  .wd-programme-inner {
    max-width: 760px;
    margin: 0 auto;
  }

  /* Venue: zwei Karten (Trauung + Feier) nebeneinander */
  .wd-venue {
    padding: 80px 72px !important;
    max-width: 1280px;
    margin: 0 auto;
  }
  .wd-venue-grid {
    flex-direction: row !important;
    gap: 56px !important;
    align-items: flex-start;
  }
  .wd-venue-grid > div { flex: 1 1 0; min-width: 0; }

  /* RSVP-Karte zentriert */
  .wd-rsvp-intro {
    max-width: 760px;
    margin: 0 auto;
    padding: 56px 72px !important;
  }

  /* Antwort-Karten Ja/Nein nebeneinander */
  .wd-choices {
    max-width: 760px;
    margin: 0 auto;
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 14px !important;
    padding: 32px 72px 0 !important;
  }

  /* Formular zentriert */
  .wd-rsvp-form  { max-width: 600px; margin: 0 auto; padding-left: 72px !important; padding-right: 72px !important; }
  .wd-rsvp-submit { max-width: 600px; margin: 28px auto 0; padding-left: 72px !important; padding-right: 72px !important; }
  .wd-confirm    { max-width: 760px; margin: 24px auto 0; padding-left: 72px !important; padding-right: 72px !important; }

  /* Footer zentriert */
  .wd-footer { padding: 80px 72px 64px !important; }
}

/* ── Sehr breit (≥1440px): zusätzliche Spacing-Reserven ───── */
@media (min-width: 1440px) {
  .wd-hero, .wd-venue { padding: 96px 96px !important; }
  .wd-programme { padding: 110px 96px !important; }
}