/* Yasmin & Henrik, Hochzeitswebsite
   Desktop: 1:1 nach dem Canva-Layout (Referenzbreite 1366 px, skaliert mit der Fensterbreite).
   Mobile (<= 900 px): eigenes einspaltiges Layout. */

@font-face {
  font-family: "Kindred Youth";
  src: url("../assets/fonts/kindred-youth.woff2") format("woff2");
  font-display: swap;
}
/* Fließtext: Bricolage Grotesque (Variable Font, SIL Open Font License, siehe assets/fonts/OFL-bricolage-grotesque.txt) */
@font-face {
  font-family: "Bricolage Grotesque";
  src: url("../assets/fonts/bricolage-grotesque.woff2") format("woff2");
  font-weight: 200 800;
  font-stretch: 75% 100%;
  font-display: swap;
}

:root {
  --red: #7c1113;
  --cream: #f7efe1;
  --orange: #ffa267;
  --hero-bg: #eeede7;
  --sand: #eadfc9;
  --btn-light: #e6dccb;
  --display: "Kindred Youth", Georgia, serif;
  --body: "Bricolage Grotesque", system-ui, sans-serif;
  --u: calc(100vw / 1366);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { overflow-x: clip; }
body {
  background: var(--cream);
  color: var(--red);
  font-family: var(--body);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }

/* Cursor: Fes aus der Sound-Illustration, mit heller Kontur damit er auch auf Rot sichtbar ist */
html, a, button { cursor: url("../assets/img/cursor-fez.png") 2 2, auto; }

/* Musik-Knopf (js/music.js) */
.music-btn {
  position: fixed; right: 20px; bottom: 20px; z-index: 50;
  width: 44px; height: 44px; border-radius: 50%; border: 0; padding: 11px;
  background: var(--red); color: var(--cream);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--cream) 55%, transparent);
  opacity: .9; transition: opacity .2s;
}
.music-btn:hover { opacity: 1; }
.music-btn svg { width: 100%; height: 100%; display: block; }
.music-btn .on { display: none; }
.music-btn.is-on .on { display: inline; }
.music-btn.is-on .off { display: none; }

/* Einblenden beim Scrollen (js/reveal.js) */
.js-reveal .reveal { opacity: 0; transform: translateY(18px); transition: opacity .9s ease, transform .9s cubic-bezier(.2,.6,.2,1); }
.js-reveal .reveal.in { opacity: 1; transform: none; }
a { color: inherit; }
b, strong { font-weight: 700; }

/* ---------- Farben je Sektion ---------- */
.on-cream { background: var(--cream); color: var(--red); }
.on-red { background: var(--red); color: var(--cream); }
.on-orange { background: var(--orange); color: var(--red); }
.sand { color: var(--sand); }

/* ---------- Typografie ---------- */
.display { font-family: var(--display); font-weight: 400; text-transform: none; }
.h1 { font-size: calc(66.67 * var(--u)); line-height: 1.17; letter-spacing: -0.05em; text-transform: uppercase; }
.h1-loose { line-height: 1.4; letter-spacing: 0; }
.h2 { font-family: var(--body); font-size: calc(28 * var(--u)); line-height: 1.4; font-weight: 400; }
.h3 { font-family: var(--body); font-size: calc(22 * var(--u)); line-height: 1.4; font-weight: 400; }
.body { font-size: max(15px, calc(18.67 * var(--u))); line-height: 1.4; }
.body-tight { letter-spacing: 0.015em; line-height: 1.5; }
.small { font-size: max(13px, calc(15 * var(--u))); line-height: 1.4; }
.body p + p, .small p + p { margin-top: 1.4em; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: calc(50.94 * var(--u));
  padding: 0 calc(22 * var(--u));
  border-radius: calc(5 * var(--u));
  font-size: max(15px, calc(18 * var(--u)));
  text-decoration: underline;
  white-space: nowrap;
  background: var(--red); color: var(--cream);
}
.on-orange .btn { color: var(--sand); }
.on-red .btn { background: var(--cream); color: var(--red); }
.btn-sm {
  height: calc(29.96 * var(--u));
  padding: 0 calc(14 * var(--u));
  border-radius: calc(3 * var(--u));
  font-size: max(11px, calc(13.33 * var(--u)));
  white-space: nowrap;
  background: #7a0000;
}
.on-red .btn-sm { background: var(--btn-light); }
.back {
  font-size: max(15px, calc(18 * var(--u)));
  text-decoration: none;
}

/* ---------- Platzhalter (fehlende Bilder / Illustrationen) ---------- */
.ph {
  display: flex; align-items: center; justify-content: center; text-align: center;
  background: color-mix(in srgb, currentColor 9%, transparent);
  border: 1px dashed color-mix(in srgb, currentColor 45%, transparent);
  font-size: 13px; padding: 8px;
}

/* ---------- Desktop: Sektionen als 1366er-Bühne ---------- */
.sec { position: relative; height: calc(768 * var(--u)); overflow: hidden; }
.sec-500 { height: calc(500 * var(--u)); }
.d {
  position: absolute;
  top: calc(var(--t) * var(--u));
  left: calc(var(--l) * var(--u));
  width: calc(var(--w) * var(--u));
}
.d[style*="--h"] { height: calc(var(--h) * var(--u)); }
.cover { width: 100%; height: 100%; object-fit: cover; }
.illu img { width: 100%; height: 100%; object-fit: contain; }

/* Hero */
.hero { background: var(--hero-bg) url("../assets/img/hero.webp") no-repeat; background-size: 112.93% auto; background-position: 100% 24.3%; }
.hero-arc { position: absolute; top: calc(28 * var(--u)); left: 0; width: 100%; height: calc(373 * var(--u)); overflow: visible; }
.hero-arc text { font-family: var(--display); font-size: 159.35px; fill: var(--red); }
.hero-meta { font-size: calc(46.67 * var(--u)); line-height: 1.4; }
.hero-meta.end { text-align: right; }

/* Faktentabelle (Henna / Hochzeitstag) */
.facts { display: grid; grid-template-columns: calc(170 * var(--u)) 1fr; font-size: max(14px, calc(17.33 * var(--u))); line-height: 1.5; letter-spacing: 0.015em; }
.facts > div { padding: calc(16.5 * var(--u)) 0 calc(11.5 * var(--u)); border-bottom: 1px solid #7a0000; }
.on-red .facts { color: var(--cream); }
.on-red .facts > div { border-color: var(--sand); }
.facts > div:nth-child(-n+2) { padding-top: 0; }
.facts > div:nth-last-child(-n+2) { border-bottom: 0; padding-bottom: 0; }
.facts .btn { margin-top: calc(12.8 * var(--u)); }

/* Details / FAQ: rechte Spalte fließt, damit längere Texte nichts überlappen */
.faq-sec { height: auto; min-height: calc(768 * var(--u)); padding: calc(65.5 * var(--u)) 0 calc(65.5 * var(--u)) calc(521.2 * var(--u)); }
.faq-list { width: calc(768 * var(--u)); display: flex; flex-direction: column; gap: calc(40 * var(--u)); }
.faq-item { display: grid; grid-template-columns: calc(108 * var(--u)) 1fr; align-items: start; }
.faq-item .icon { width: calc(var(--iw) * var(--u)); height: auto; margin: calc(var(--it) * var(--u)) 0 0 calc(var(--im) * var(--u)); }
.faq-item .h2 { font-size: calc(26.67 * var(--u)); }
.faq-item .small { margin-top: calc(10 * var(--u)); }

/* Dresscode-Seite (Canva-Seite 1366 x 2660) */
.dc { padding: calc(32 * var(--u)) calc(76.8 * var(--u)) calc(115 * var(--u)); }
.dc-head { position: relative; text-align: center; }
.dc-head .back { position: absolute; left: 0; top: 0; }
.dc-title { padding-top: calc(58.3 * var(--u)); line-height: 1.2; letter-spacing: 0; text-transform: none; }
.dc-day { text-align: center; margin-top: calc(30 * var(--u)); }
.dc-day .h2 { line-height: 1.2; }
.dc-intro { width: calc(800 * var(--u)); margin: calc(26.6 * var(--u)) auto 0; font-size: max(15px, calc(18 * var(--u))); }
.dc-cols { display: grid; grid-template-columns: 1fr 1fr; column-gap: calc(52.4 * var(--u)); margin-top: calc(73.6 * var(--u)); text-align: left; }
.dc-cols .h3 { font-size: calc(30 * var(--u)); line-height: 1.2; }
.dc-sub { margin-top: calc(12 * var(--u)); font-size: max(14px, calc(17 * var(--u))); color: var(--red); }
.on-red .dc-sub, .on-red .dc-day, .on-red .dc-cols .h3 { color: var(--sand); }
.grid { display: grid; grid-template-columns: repeat(3, calc(180 * var(--u))); gap: calc(20 * var(--u)); margin-top: calc(42.4 * var(--u)); }
.grid img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.dc-red { padding: calc(80 * var(--u)) calc(76.8 * var(--u)) calc(140 * var(--u)); }
.dc-red .dc-day { margin-top: 0; }

/* RSVP-Seite */
.rsvp-page .back-wrap { position: absolute; top: calc(32 * var(--u)); left: calc(76.8 * var(--u)); }

/* ================= Mobile ================= */
@media (max-width: 900px) {
  :root { --g: 24px; }
  .sec, .sec-500 { height: auto; display: flex; flex-direction: column; gap: 20px; padding: 64px var(--g); }
  .d { position: static; width: auto; }
  .d[style*="--h"] { height: auto; }

  .h1 { font-size: 44px; }
  .h2 { font-size: 24px; }
  .h3 { font-size: 20px; }
  .body { font-size: 17px; }
  .small { font-size: 15px; }
  .btn { height: 50px; padding: 0 24px; border-radius: 5px; font-size: 17px; align-self: flex-start; }
  .btn-sm { height: 40px; padding: 0 18px; border-radius: 4px; font-size: 14px; }
  .back { font-size: 16px; }
  .ph { min-height: 220px; }

  /* Hero */
  .hero { min-height: 100svh; padding: 28px 16px 36px; justify-content: space-between; background-size: cover; background-position: 60% 30%; }
  .hero-arc { position: static; height: auto; }
  .hero-meta { font-size: 26px; text-align: center !important; }
  .hero-metas { display: flex; flex-direction: column; gap: 2px; }

  /* Bilder in Sektionen */
  .pic { order: 2; }
  .pic img, .pic.cover { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }
  .pic.illu { align-self: center; width: 80%; max-width: 320px; }
  .pic.illu img { aspect-ratio: auto; object-fit: contain; }
  .facts { font-size: 15px; }
  .m-first { order: 0; }
  .m-1 { order: 1; }
  .m-3 { order: 3; }
  .m-4 { order: 4; }

  /* "Unsere Hochzeit" */
  .hochzeit { padding: 0; gap: 0; }
  .hochzeit .pic { order: 2; }
  .hochzeit .pic img { aspect-ratio: 4 / 5; }
  .hochzeit-title { padding: 64px var(--g) 40px; font-size: 76px !important; }

  /* Fakten */
  .facts { grid-template-columns: 110px 1fr; margin-top: 8px; }
  .facts > div { padding: 12px 0; }
  .facts .btn { margin-top: 12px; }

  /* Details / FAQ */
  .faq-sec { padding: 64px var(--g); }
  .faq-list { width: auto; gap: 36px; }
  .faq-item { grid-template-columns: 56px 1fr; column-gap: 16px; }
  .faq-item .h2 { font-size: 24px; }
  .faq-item .icon { width: 52px; height: auto; margin: 2px 0 0; }
  .faq-item .small { margin-top: 6px; }

  /* Sound of us */
  .fez { width: 70%; max-width: 300px; align-self: center; }

  /* Dresscode */
  .dc, .dc-red { padding: 28px var(--g) 56px; }
  .dc-head .back { position: static; display: inline-block; margin-bottom: 24px; }
  .dc-head { text-align: left; }
  .dc-title { padding-top: 0; text-align: center; font-size: 40px; }
  .dc-day { margin-top: 28px; }
  .dc-intro { width: auto; margin-top: 12px; font-size: 16px; }
  .dc-cols { grid-template-columns: 1fr; row-gap: 40px; margin-top: 40px; }
  .dc-cols .h3 { font-size: 26px; }
  .dc-sub { margin-top: 6px; font-size: 16px; }
  .grid { grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 16px; }
  .dc-red { padding-top: 56px; }

  /* RSVP-Seite */
  .rsvp-page .back-wrap { position: static; }
}