/* ── TEMAER ────────────────────────────────────────────────────── */
.tema-rosegold {
    --farve-primær: #c9956c; --farve-sekundær: #e8c4a0; --farve-accent: #8b5e52;
    --farve-baggrund: #fdf6f0; --farve-hvid: #ffffff; --farve-tekst: #3d2b1f;
    --farve-tekst-lys: #7a5c4e; --farve-border: #e0c4b0;
    --farve-knap: #c9956c; --farve-knap-hover: #b07d55;
    --gradient-hero: linear-gradient(135deg, #f5e6d3 0%, #e8c4a0 40%, #d4a088 100%);
    --gradient-sektion: linear-gradient(180deg, #fdf6f0 0%, #f9ede0 100%);
    --skrift-overskrift: 'Playfair Display', Georgia, serif;
    --skrift-brød: 'Lato', 'Helvetica Neue', sans-serif;
}
.tema-himmelbla {
    --farve-primær: #5b9bd5; --farve-sekundær: #a8d4f5; --farve-accent: #2d6fa3;
    --farve-baggrund: #f0f7ff; --farve-hvid: #ffffff; --farve-tekst: #1a3550;
    --farve-tekst-lys: #4a7da8; --farve-border: #b8d9f5;
    --farve-knap: #5b9bd5; --farve-knap-hover: #3d80be;
    --gradient-hero: linear-gradient(135deg, #e0f0ff 0%, #a8d4f5 40%, #7ab8e8 100%);
    --gradient-sektion: linear-gradient(180deg, #f0f7ff 0%, #e0efff 100%);
    --skrift-overskrift: 'Cormorant Garamond', Georgia, serif;
    --skrift-brød: 'Source Sans Pro', Arial, sans-serif;
}
.tema-skovgron {
    --farve-primær: #5a8a6a; --farve-sekundær: #a8c9a8; --farve-accent: #3d6b4f;
    --farve-baggrund: #f2f7f2; --farve-hvid: #ffffff; --farve-tekst: #1e3a2a;
    --farve-tekst-lys: #4a7a5a; --farve-border: #b5d4b8;
    --farve-knap: #5a8a6a; --farve-knap-hover: #3d6b4f;
    --gradient-hero: linear-gradient(135deg, #e8f4e8 0%, #c5dfc5 40%, #9dbf9d 100%);
    --gradient-sektion: linear-gradient(180deg, #f2f7f2 0%, #e8f2e8 100%);
    --skrift-overskrift: 'Libre Baskerville', Georgia, serif;
    --skrift-brød: 'Nunito', Arial, sans-serif;
}
.tema-lavendel {
    --farve-primær: #8b6fb5; --farve-sekundær: #c4aee0; --farve-accent: #6a4f94;
    --farve-baggrund: #f7f3ff; --farve-hvid: #ffffff; --farve-tekst: #2d1f4a;
    --farve-tekst-lys: #7a60a8; --farve-border: #d5c5f0;
    --farve-knap: #8b6fb5; --farve-knap-hover: #6a4f94;
    --gradient-hero: linear-gradient(135deg, #f0e8ff 0%, #d9c8f5 40%, #c0a8e8 100%);
    --gradient-sektion: linear-gradient(180deg, #f7f3ff 0%, #f0e8ff 100%);
    --skrift-overskrift: 'IM Fell English', Georgia, serif;
    --skrift-brød: 'Raleway', Arial, sans-serif;
}
.tema-guld {
    --farve-primær: #c9a84c; --farve-sekundær: #e8d48a; --farve-accent: #8b6914;
    --farve-baggrund: #fffdf5; --farve-hvid: #ffffff; --farve-tekst: #2c2000;
    --farve-tekst-lys: #8b7040; --farve-border: #e0cc88;
    --farve-knap: #c9a84c; --farve-knap-hover: #a88830;
    --gradient-hero: linear-gradient(135deg, #fff8e0 0%, #f5e090 40%, #e8c84c 100%);
    --gradient-sektion: linear-gradient(180deg, #fffdf5 0%, #fffae8 100%);
    --skrift-overskrift: 'Cinzel', Georgia, serif;
    --skrift-brød: 'Quattrocento Sans', Arial, sans-serif;
}

/* ── RESET ─────────────────────────────────────────────────────── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }

html, body { height:100%; overflow:hidden; }

body {
    font-family: var(--skrift-brød);
    background-color: var(--farve-baggrund);
    color: var(--farve-tekst);
    line-height: 1.7;
}

/* ── SCROLL-SNAP CONTAINER ─────────────────────────────────────── */
.scroll-container {
    height: 100dvh; /* dvh accounts for mobile browser chrome */
    overflow-y: scroll;
    scroll-snap-type: y mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.scroll-container::-webkit-scrollbar { display: none; }

/* ── SLIDES ────────────────────────────────────────────────────── */
.slide {
    scroll-snap-align: start;
    scroll-snap-stop: always;
    height: 100dvh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
}

/* Program and registration slides can scroll internally on small screens */
.slide-program, .slide-tilmelding {
    justify-content: flex-start;
    padding-top: 40px;
    padding-bottom: 80px; /* room for the bottom button */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* Re-center on screens tall enough to fit content */
@media (min-height: 750px) {
    .slide-program, .slide-tilmelding { justify-content: center; padding-top: 0; padding-bottom: 0; overflow: hidden; }
}

/* Backgrounds */
.slide-hero    { background: var(--gradient-hero); }
.slide-info    { background: var(--gradient-sektion); }
.slide-program { background: var(--farve-hvid); }
.slide-tilmelding { background: var(--gradient-sektion); }

/* ── DOWN-ARROW (hero) ─────────────────────────────────────────── */
.hero-pil {
    font-size: 3.5rem; color: var(--farve-accent); text-decoration: none;
    display: block; line-height: 1; position: relative; z-index: 20;
    text-shadow: 0 2px 12px rgba(0,0,0,0.18);
    animation: flydOp 1s ease-out 0.8s both, bounce 2s 2s infinite;
    transition: transform 0.2s;
}
.hero-pil:hover { transform: scale(1.2); }

/* Down-arrow on slides 2 & 3 */
.slide-pil-bund {
    position: absolute;
    bottom: 22px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 3.5rem;
    line-height: 1;
    color: var(--farve-accent);
    text-decoration: none;
    text-shadow: 0 2px 12px rgba(0,0,0,0.18);
    opacity: 0.85;
    z-index: 20;
    transition: opacity 0.2s, transform 0.2s;
}
.slide-pil-bund:hover { opacity: 1; transform: translateX(-50%) scale(1.15); }

.slide-tilmeld-knap {
    position: absolute;
    bottom: 28px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--farve-primær);
    color: white;
    text-decoration: none;
    padding: 13px 32px;
    border-radius: 50px;
    font-weight: 700;
    font-size: 1rem;
    font-family: var(--skrift-brød);
    white-space: nowrap;
    box-shadow: 0 4px 18px rgba(0,0,0,0.2);
    z-index: 20;
    transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
}
.slide-tilmeld-knap:hover {
    background: var(--farve-knap-hover);
    transform: translateX(-50%) translateY(-2px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.25);
}

/* ── HERO CONTENT ──────────────────────────────────────────────── */
.hero-kors  { font-size:3rem; margin-bottom:14px; animation:flydOp 1s ease-out both; }
.hero-titel { font-family:var(--skrift-overskrift); font-size:clamp(2.5rem,6vw,5rem); color:var(--farve-accent); line-height:1.1; margin-bottom:10px; animation:flydOp 1s ease-out 0.2s both; text-shadow:0 2px 20px rgba(0,0,0,0.1); text-align:center; width:100%; }
.hero-dato  { font-family:var(--skrift-overskrift); font-size:clamp(1rem,2.5vw,1.5rem); color:var(--farve-tekst-lys); margin-bottom:10px; letter-spacing:0.05em; animation:flydOp 1s ease-out 0.4s both; text-align:center; }
.hero-gaest { font-size:1.1rem; color:var(--farve-accent); margin-bottom:14px; animation:flydOp 1s ease-out 0.5s both; font-family:var(--skrift-overskrift); text-align:center; }
.hero-citat { font-size:1rem; color:var(--farve-tekst); font-style:italic; max-width:480px; opacity:0.85; margin-bottom:40px; animation:flydOp 1s ease-out 0.6s both; text-align:center; }

@keyframes flydOp { from{opacity:0;transform:translateY(30px)} to{opacity:1;transform:translateY(0)} }
@keyframes bounce  { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }
/* bounce for centered down-arrow on hero */
.hero-pil { animation: flydOp 1s ease-out 0.8s both, bounce-center 2s 2s infinite; }
@keyframes bounce-center { 0%,100%{transform:translateX(0) translateY(0)} 50%{transform:translateX(0) translateY(-10px)} }
.slide-pil-bund { animation: bounce-translated 2.5s 1s infinite; }
@keyframes bounce-translated { 0%,100%{transform:translateX(-50%) translateY(0)} 50%{transform:translateX(-50%) translateY(-8px)} }

/* ── SHARED SECTION CONTENT ────────────────────────────────────── */
.container { max-width:860px; width:100%; margin:0 auto; padding:0 30px; }

.sektion-overskrift { font-family:var(--skrift-overskrift); font-size:clamp(1.6rem,3.5vw,2.6rem); color:var(--farve-accent); text-align:center; margin-bottom:10px; }
.sektion-undertekst { text-align:center; color:var(--farve-tekst-lys); margin-bottom:30px; font-size:1rem; }
.dekor-top { text-align:center; font-size:1.3rem; letter-spacing:0.5em; color:var(--farve-sekundær); margin-bottom:14px; }

/* ── INFO BOXES (slide 2) ──────────────────────────────────────── */
.info-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:20px; }
.info-boks { background:var(--farve-hvid); border:1px solid var(--farve-border); border-radius:16px; padding:24px 20px; text-align:center; box-shadow:0 4px 20px rgba(0,0,0,0.06); transition:transform 0.3s,box-shadow 0.3s; position:relative; z-index:20; }
.info-boks:hover { transform:translateY(-4px); box-shadow:0 8px 30px rgba(0,0,0,0.1); }
.info-boks-ikon { font-size:2rem; margin-bottom:10px; display:block; }
.info-boks h3 { font-family:var(--skrift-overskrift); color:var(--farve-accent); font-size:1.1rem; margin-bottom:8px; }
.info-boks p { color:var(--farve-tekst-lys); font-size:0.88rem; line-height:1.55; }

/* ── TIMELINE (slide 3) ────────────────────────────────────────── */
.tidslinje { position:relative; max-width:560px; margin:0 auto; }
.tidslinje::before { content:''; position:absolute; left:26px; top:0; bottom:0; width:2px; background:var(--farve-border); }
.tidslinje-punkt { display:flex; gap:18px; margin-bottom:18px; align-items:flex-start; }
.tidslinje-punkt:last-child { margin-bottom:0; }
.tidslinje-tid { width:52px; height:52px; background:var(--farve-primær); color:white; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:0.75rem; flex-shrink:0; position:relative; z-index:1; text-align:center; line-height:1.2; }
.tidslinje-indhold { padding-top:10px; }
.tidslinje-indhold h4 { font-family:var(--skrift-overskrift); color:var(--farve-accent); font-size:1.05rem; margin-bottom:2px; }
.tidslinje-indhold p { color:var(--farve-tekst-lys); font-size:0.83rem; }

/* ── FORM (slide 4) ────────────────────────────────────────────── */
.formular-kort { background:var(--farve-hvid); border:1px solid var(--farve-border); border-radius:20px; padding:28px 32px; box-shadow:0 8px 40px rgba(0,0,0,0.08); max-width:700px; margin:0 auto; }
.form-to-col { display:grid; grid-template-columns:1fr 1fr; gap:0 20px; }
.form-gruppe { margin-bottom:14px; }
.form-gruppe label { display:block; font-weight:600; color:var(--farve-tekst); margin-bottom:5px; font-size:0.88rem; }
.form-gruppe input,.form-gruppe select,.form-gruppe textarea { width:100%; padding:10px 14px; border:1.5px solid var(--farve-border); border-radius:9px; font-size:0.95rem; font-family:var(--skrift-brød); color:var(--farve-tekst); background:var(--farve-baggrund); transition:border-color 0.2s; outline:none; }
.form-gruppe input:focus,.form-gruppe select:focus,.form-gruppe textarea:focus { border-color:var(--farve-primær); box-shadow:0 0 0 3px rgba(0,0,0,0.04); }
.form-gruppe textarea { height:80px; resize:none; }
.form-gruppe-radio { display:flex; gap:12px; margin-top:5px; }
.radio-valg { display:flex; align-items:center; gap:8px; padding:9px 16px; border:1.5px solid var(--farve-border); border-radius:9px; cursor:pointer; flex:1; justify-content:center; font-weight:500; font-size:0.88rem; transition:border-color 0.2s; }
.radio-valg:hover { border-color:var(--farve-primær); }
.radio-valg input[type="radio"] { width:auto; margin:0; }
.radio-valg input[type="radio"]:checked + span { color:var(--farve-primær); font-weight:700; }
.fejl-besked { color:#c0392b; font-size:0.82rem; margin-top:4px; display:block; }

.slide-footer-tekst { text-align:center; margin-top:16px; font-size:0.82rem; color:var(--farve-tekst-lys); position:relative; z-index:20; }
.slide-footer-tekst a { color:var(--farve-primær); }

/* ── BUTTONS ───────────────────────────────────────────────────── */
.knap-primær { display:block; width:100%; padding:13px 28px; background:var(--farve-knap); color:white; border:none; border-radius:9px; font-size:1rem; font-family:var(--skrift-brød); font-weight:600; cursor:pointer; transition:background 0.2s,transform 0.1s; letter-spacing:0.03em; text-align:center; margin-top:6px; }
.knap-primær:hover { background:var(--farve-knap-hover); transform:translateY(-1px); }
.knap-primær:active { transform:translateY(0); }
.knap-hvid { display:inline-block; padding:14px 36px; background:white; color:var(--farve-accent); text-decoration:none; border-radius:50px; font-weight:700; font-size:1rem; font-family:var(--skrift-brød); box-shadow:0 4px 16px rgba(0,0,0,0.15); transition:transform 0.2s,box-shadow 0.2s; }
.knap-hvid:hover { transform:translateY(-2px); box-shadow:0 8px 24px rgba(0,0,0,0.2); }

/* ── SUCCES-BOKS ───────────────────────────────────────────────── */
.succes-boks { background:#f0fdf4; border:1.5px solid #86efac; border-radius:16px; padding:36px; text-align:center; max-width:560px; margin:0 auto; }
.succes-boks h3 { font-family:var(--skrift-overskrift); color:#16a34a; font-size:1.7rem; margin-bottom:12px; }
.succes-boks p { color:#4b7a5c; font-size:0.95rem; }

/* ── Z-INDEX: text/content above flowers (z-index 10-18) ──────── */
/* Sections have NO z-index so they don't create a stacking context —
   children's z-index values are compared at root level, beating flowers. */
.slide { position:relative; /* no z-index */ }

h1,h2,h3,h4,h5,h6, p, span, li, label, em, strong,
.hero-kors,.hero-titel,.hero-dato,.hero-gaest,.hero-citat,
.sektion-overskrift,.sektion-undertekst,.dekor-top,
.container,.info-grid,.info-boks,.tidslinje,.tidslinje-punkt,.tidslinje-indhold,
.formular-kort,.form-gruppe,.form-to-col,.radio-valg,.succes-boks,
.pin-gate-kort,.slide-footer-tekst,
.knap-primær,.knap-hvid, input,select,textarea,button,a { position:relative; z-index:20; }

/* ── BLOMSTER ──────────────────────────────────────────────────── */
#blomst-overlay { position:fixed; inset:0; pointer-events:none; z-index:10; overflow:hidden; }
.blomst-el { position:absolute; pointer-events:auto; cursor:grab; user-select:none; line-height:1; transition:transform 0.08s ease,filter 0.15s ease; will-change:left,top; touch-action:none; }
.blomst-el:hover { filter:drop-shadow(0 4px 12px rgba(0,0,0,0.25)); transform:scale(1.12) rotate(var(--blomst-rot)); }
.blomst-el.trækkes { cursor:grabbing; z-index:9990 !important; transform:scale(1.25) rotate(var(--blomst-rot)); filter:drop-shadow(0 8px 20px rgba(0,0,0,0.3)); transition:none; }

/* ── PIN GATE ──────────────────────────────────────────────────── */
.pin-gate { height:100dvh; background:var(--gradient-hero); display:flex; align-items:center; justify-content:center; padding:40px 30px; }
.pin-gate-kort { background:rgba(255,255,255,0.92); backdrop-filter:blur(16px); border-radius:24px; padding:56px 48px; max-width:460px; width:100%; text-align:center; box-shadow:0 20px 60px rgba(0,0,0,0.15); border:1px solid rgba(255,255,255,0.8); }
.pin-kors { font-size:3.5rem; margin-bottom:14px; display:block; color:var(--farve-accent); }
.pin-gate-titel { font-family:var(--skrift-overskrift); font-size:clamp(1.8rem,4vw,2.6rem); color:var(--farve-accent); margin-bottom:6px; line-height:1.1; }
.pin-gate-dato { font-family:var(--skrift-overskrift); font-size:1rem; color:var(--farve-tekst-lys); margin-bottom:6px; letter-spacing:0.05em; }
.pin-gate-divider { font-size:1.1rem; letter-spacing:0.4em; color:var(--farve-sekundær); margin:16px 0; }
.pin-gate-tekst { color:var(--farve-tekst-lys); font-size:0.9rem; margin-bottom:22px; line-height:1.7; }
.pin-input { width:100%; padding:18px 20px; border:2px solid var(--farve-border); border-radius:12px; font-size:1.9rem; font-family:monospace; font-weight:700; letter-spacing:0.3em; text-align:center; color:var(--farve-accent); background:var(--farve-baggrund); outline:none; transition:border-color 0.2s,box-shadow 0.2s; text-transform:uppercase; display:block; }
.pin-input:focus { border-color:var(--farve-primær); box-shadow:0 0 0 4px rgba(0,0,0,0.05); }
.pin-fejl { background:#fef2f2; border:1px solid #fca5a5; color:#b91c1c; border-radius:10px; padding:10px 14px; margin-bottom:16px; font-size:0.88rem; text-align:left; }
.pin-kontakt { margin-top:18px; font-size:0.83rem; color:var(--farve-tekst-lys); }
.pin-kontakt a { color:var(--farve-primær); }

/* ── RESPONSIVE ────────────────────────────────────────────────── */

/* ── Tablets & large phones (≤900px) */
@media (max-width: 900px) {
    .container { padding: 0 20px; }
    .formular-kort { padding: 36px 28px; }
}

/* ── Mobile (≤600px) ───────────────────────────────────────── */
@media (max-width: 600px) {

    /* Hero */
    .hero { padding: 40px 20px; }
    .hero-kors  { font-size: 2.6rem; margin-bottom: 10px; }
    .hero-titel { font-size: clamp(2rem, 9vw, 3rem); margin-bottom: 8px; }
    .hero-dato  { font-size: 1rem; margin-bottom: 8px; }
    .hero-gaest { font-size: 1rem; margin-bottom: 10px; }
    .hero-citat { font-size: 0.88rem; margin-bottom: 28px; }
    .hero-pil   { font-size: 2.8rem; }

    /* Section headers */
    .sektion-overskrift { font-size: clamp(1.4rem, 6vw, 2rem); margin-bottom: 8px; }
    .sektion-undertekst { font-size: 0.88rem; margin-bottom: 20px; }
    .dekor-top          { font-size: 1rem; letter-spacing: 0.3em; margin-bottom: 10px; }

    /* Slide padding */
    .slide-info      { padding: 0 16px; }
    .slide-program   { padding: 30px 16px 80px; }
    .slide-tilmelding { padding: 24px 16px 70px; }

    /* Info boxes — single column, compact */
    .info-grid   { grid-template-columns: 1fr; gap: 10px; }
    .info-boks   { padding: 16px 14px; display: flex; align-items: center; gap: 14px; text-align: left; }
    .info-boks-ikon  { font-size: 1.8rem; margin-bottom: 0; flex-shrink: 0; }
    .info-boks h3    { font-size: 0.95rem; margin-bottom: 3px; }
    .info-boks p     { font-size: 0.8rem; line-height: 1.4; }

    /* Timeline — compact */
    .tidslinje::before   { left: 20px; }
    .tidslinje-tid       { width: 42px; height: 42px; font-size: 0.68rem; }
    .tidslinje-punkt     { gap: 12px; margin-bottom: 12px; }
    .tidslinje-indhold   { padding-top: 8px; }
    .tidslinje-indhold h4 { font-size: 0.92rem; margin-bottom: 2px; }
    .tidslinje-indhold p  { font-size: 0.78rem; }

    /* Registration form */
    .formular-kort    { padding: 18px 14px; border-radius: 14px; }
    .form-to-col      { grid-template-columns: 1fr; }
    .form-gruppe      { margin-bottom: 10px; }
    .form-gruppe label { font-size: 0.82rem; margin-bottom: 4px; }
    .form-gruppe input,
    .form-gruppe select { padding: 10px 12px; font-size: 0.92rem; }
    .form-gruppe textarea { height: 64px; padding: 10px 12px; font-size: 0.92rem; }
    .form-gruppe-radio    { gap: 8px; }
    .radio-valg           { padding: 8px 10px; font-size: 0.82rem; }
    .knap-primær          { padding: 12px; font-size: 0.95rem; }
    .slide-footer-tekst   { font-size: 0.75rem; margin-top: 10px; }

    /* Tilmeld button + bottom arrow */
    .slide-tilmeld-knap { font-size: 0.85rem; padding: 11px 20px; bottom: 20px; white-space: nowrap; }

    /* Success box */
    .succes-boks { padding: 28px 18px; }
    .succes-boks h3 { font-size: 1.4rem; }

    /* PIN gate */
    .pin-gate       { padding: 24px 16px; }
    .pin-gate-kort  { padding: 32px 18px; border-radius: 18px; }
    .pin-kors       { font-size: 2.8rem; margin-bottom: 10px; }
    .pin-gate-titel { font-size: clamp(1.5rem, 7vw, 2.2rem); }
    .pin-gate-tekst { font-size: 0.85rem; margin-bottom: 18px; }
    .pin-input      { font-size: 1.5rem; padding: 14px 12px; letter-spacing: 0.2em; }
    .pin-gate-divider { margin: 12px 0; }

    /* Flowers — smaller on mobile */
    .blomst-el { opacity: 0.3 !important; }
}

/* ── Short screens / landscape mobile ─────────────────────────── */
@media (max-height: 600px) {
    .hero-citat         { display: none; }
    .hero-gaest         { display: none; }
    .dekor-top          { display: none; }
    .sektion-undertekst { display: none; }
    .tidslinje-indhold p { display: none; }
    .tidslinje-punkt    { margin-bottom: 8px; }
    .slide-program, .slide-tilmelding { padding-top: 16px; padding-bottom: 60px; }
}