/* Forsiden i Studio 1-2's egen stil (studio1-2.dk): sort, hvidt håndskrevet logo, guld (#B99D61) og Gruppo i versaler. */
@font-face { font-family: 'Gruppo'; src: url(/fonte/gruppo.woff2) format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Figtree'; src: url(/fonte/figtree.woff2) format('woff2'); font-weight: 300 900; font-display: swap; }

:root { --sort: #0E0E0E; --sort2: #181818; --sort3: #232323; --hvid: #F2F0EB; --graa: #9A968E; --streg: #333130; --guld: #B99D61; --guld2: #D2BC88; --maal: 1180px; }
* { box-sizing: border-box; }
body { margin: 0; background: var(--sort); color: var(--hvid); font: 17px/1.65 'Figtree', Arial, sans-serif; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--guld2); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--hvid); }
h1, h2, h3 { font-family: 'Gruppo', 'Figtree', sans-serif; font-weight: 400; text-transform: uppercase; letter-spacing: 0.12em; margin: 0; }
h4 { margin: 20px 0 4px; font-size: 15px; text-transform: uppercase; letter-spacing: 0.08em; }
code { font-size: 0.9em; background: var(--sort3); padding: 0 4px; }
.skjult { display: none !important; }
.fin { font-size: 15px; color: var(--graa); }
.spring { position: absolute; left: -999px; }
.spring:focus { left: 16px; top: 8px; background: var(--guld); color: var(--sort); padding: 6px 12px; z-index: 9; }

/* Toplinje: det håndskrevne logo, adresse og log ind */
.top { max-width: var(--maal); margin: 0 auto; padding: 26px 24px 22px; display: flex; align-items: center; gap: 28px; border-bottom: 1px solid var(--streg); }
.logo img { width: 200px; height: auto; }
.adr { margin: 0; flex: 1; color: var(--graa); font: 400 15px 'Gruppo', sans-serif; text-transform: uppercase; letter-spacing: 0.18em; }
.top-ind { font: 400 15px 'Gruppo', sans-serif; text-transform: uppercase; letter-spacing: 0.18em; color: var(--hvid); text-decoration: none; border: 1px solid var(--streg); padding: 8px 16px; }
.top-ind:hover { border-color: var(--guld); color: var(--guld2); }

main { max-width: var(--maal); margin: 0 auto; padding: 0 24px; }

/* Indledning */
.intro { display: grid; grid-template-columns: 1.1fr 1fr; gap: 56px; padding: 76px 0 60px; align-items: end; }
.intro h1 { font-size: clamp(48px, 7vw, 96px); line-height: 0.95; letter-spacing: 0.06em; }
.h-lille { display: block; font-size: 0.32em; letter-spacing: 0.3em; color: var(--graa); margin-bottom: 14px; }
.h-gul { display: block; font-size: 0.36em; letter-spacing: 0.22em; color: var(--guld); margin-top: 18px; }
.intro-tekst p { margin: 0 0 14px; max-width: 46ch; color: #D8D4CC; }
.gaest { margin-top: 26px; }
.gaest label { display: block; font: 400 14px 'Gruppo', sans-serif; text-transform: uppercase; letter-spacing: 0.2em; margin-bottom: 8px; color: var(--guld2); }
.gaest-felt { display: flex; border: 1px solid var(--guld); background: var(--sort2); }
.gaest-felt input { flex: 1; min-width: 0; border: 0; background: transparent; font: 500 19px 'Figtree', sans-serif; padding: 15px 16px; color: var(--hvid); outline: none; }
.gaest-felt .knap { border: 0; }
.videre { display: flex; align-items: center; gap: 16px; margin-top: 24px; color: #D8D4CC; }

.knap { display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding: 0 26px; border: 1px solid var(--guld); background: var(--guld); color: var(--sort); font: 400 17px 'Gruppo', sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: 0.2em; text-decoration: none; cursor: pointer; }
.knap:hover { background: var(--guld2); border-color: var(--guld2); color: var(--sort); }
.knap.lys { background: transparent; color: var(--hvid); border-color: var(--streg); }
.knap.lys:hover { border-color: var(--guld); color: var(--guld2); background: transparent; }
.knap.fare { background: transparent; color: #E07A6E; border-color: #7A3A33; }
.knap:disabled { opacity: 0.55; cursor: wait; }
.knap:focus-visible, input:focus-visible, a:focus-visible { outline: 2px solid var(--guld2); outline-offset: 2px; }
.gaest-felt:focus-within { outline: 2px solid var(--guld2); outline-offset: 2px; }

figure { margin: 0; }
figcaption { font-size: 14px; color: var(--graa); padding-top: 10px; }
.stor img { width: 100%; aspect-ratio: 2 / 1; object-fit: cover; }

/* Lige nu */
.nu { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; padding: 40px 0; border-bottom: 1px solid var(--streg); }
.nu dl { display: flex; gap: clamp(28px, 6vw, 80px); margin: 0; }
.nu dt { font: 400 14px 'Gruppo', sans-serif; text-transform: uppercase; letter-spacing: 0.2em; color: var(--graa); }
.nu dd { margin: 4px 0 0; font: 300 clamp(36px, 4.4vw, 52px)/1 'Figtree', sans-serif; color: var(--hvid); font-variant-numeric: tabular-nums; }
.nu dd::after { content: ''; display: block; width: 28px; height: 2px; background: var(--guld); margin-top: 10px; }
.nu .fin { margin: 0; max-width: 32ch; }

.to { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; padding: 60px 0; border-bottom: 1px solid var(--streg); }
.to img { aspect-ratio: 16 / 9; object-fit: cover; width: 100%; }
.to strong { color: var(--guld2); font-weight: 600; }

.om { display: grid; grid-template-columns: 1fr 2fr; gap: 56px; padding: 60px 0; border-bottom: 1px solid var(--streg); }
.om h2 { font-size: 34px; }
.om h2::after, .konto h2::after { content: ''; display: block; width: 40px; height: 2px; background: var(--guld); margin-top: 14px; }
.om-kol { columns: 2; column-gap: 40px; color: #D8D4CC; }
.om-kol p { margin: 0 0 14px; break-inside: avoid; }

/* Konto */
.konto { padding: 60px 0 24px; }
.konto h2 { font-size: 34px; }
.konto > .fin { max-width: 60ch; margin: 18px 0 30px; }
.konto-kol { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; }
.konto h3 { font-size: 22px; margin-bottom: 6px; color: var(--guld2); }
label { display: block; margin: 14px 0; font-size: 14px; font-weight: 600; color: #CFCAC0; }
.konto input, details input { display: block; width: 100%; margin-top: 6px; min-height: 48px; padding: 0 12px; border: 1px solid var(--streg); background: var(--sort2); font: 500 16px 'Figtree', sans-serif; color: var(--hvid); border-radius: 0; }
.konto input:focus { border-color: var(--guld); }
details summary { cursor: pointer; margin-top: 16px; }
.knapper { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.kort { max-width: 640px; }
.lille { padding-top: 6px; margin-top: 16px; border-top: 1px solid var(--streg); }

.besked { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 20; max-width: calc(100% - 32px); padding: 12px 18px; background: var(--guld); color: var(--sort); font-weight: 600; }
.besked.fejl { background: #7A3A33; color: #FFFFFF; }

.fod { max-width: var(--maal); margin: 72px auto 0; padding: 28px 24px 52px; border-top: 1px solid var(--streg); font-size: 14px; color: var(--graa); }
.fod p { margin: 0 0 6px; }
.fod strong { color: var(--hvid); }
.fod-logo { display: flex; align-items: center; gap: 16px; margin-bottom: 14px !important; }
.fod-logo img { width: 54px; filter: invert(1); }

@media (max-width: 860px) {
  .intro, .om, .konto-kol, .to { grid-template-columns: 1fr; gap: 30px; }
  .intro { padding: 44px 0 36px; }
  .om-kol { columns: 1; }
  .adr { display: none; }
  .top { justify-content: space-between; }
  .logo img { width: 160px; }
}
@media (max-width: 480px) {
  body { font-size: 16px; }
  .nu dl { gap: 22px; width: 100%; justify-content: space-between; }
  .gaest-felt { flex-direction: column; }
  .gaest-felt .knap { width: 100%; }
}
.h-navn { white-space: nowrap; }
.intro h1 { font-size: clamp(44px, 6.4vw, 88px); }