/* Privatdelen (privat.html), 29 okt 2026. Läggs efter site.css och priser.css (bakgrundens drift, stegspåret) och före
   lansering.css (formuläret). Samma mörkblå grund och guldaccent som övriga sidor. */

/* Bakgrund (Adam 30 okt): samma rörliga bakgrund som Priser och Om (priser.css: övertoning, drift, ton och stilla vid
   minskad rörelse; växling var nionde sekund i privat.js). Lyxbilderna bakom ett lätt dimfilter, som på Vad är SAEFUR,
   så att motiven går att urskilja men står lugnare än innehållet. */
.bakgrund img{filter:blur(2px) saturate(.8) brightness(.92)}

/* Hjälten: text till vänster, huvudbildens serie till höger */
.privat-hjalte{padding-top:64px}
.privat-hjalte-grid{display:grid;grid-template-columns:6fr 5fr;gap:48px;align-items:center}
.privat-hjalte-text{display:flex;flex-direction:column;align-items:flex-start}
/* Rubriken står på två rader (Adam 30 okt): varje rad hålls ihop från 701 px; på mobil får den andra raden brytas. */
.privat-hjalte h1{font-size:clamp(40px,3.9vw,58px);line-height:1.04}
@media(min-width:701px){.privat-hjalte h1,.privat-hjalte h1 span{white-space:nowrap}}
.privat-hjalte .lead{max-width:540px}
.privat-hjalte .actions{flex-wrap:wrap;gap:20px 32px}
.privat-serie{position:relative}
.serie{list-style:none;margin:0;padding:0;position:relative;aspect-ratio:4/3;border-radius:22px;overflow:hidden;background:var(--navy2);box-shadow:0 30px 70px -30px #050912cc}
.serie li{position:absolute;inset:0;opacity:0;transition:opacity 1.6s ease}
.serie li.aktiv{opacity:1}
.serie picture,.serie img{width:100%;height:100%}
.serie img{object-fit:cover}
.bildtext{position:absolute;left:0;right:0;bottom:0;margin:0;padding:28px 20px 14px;font-size:14px;color:#fff;background:linear-gradient(180deg,transparent,#0b1220cc);text-shadow:0 1px 2px #0b1220}
.ai{display:inline-block;font-size:12px;font-weight:600;letter-spacing:.02em;color:var(--navy);background:#ffffffd9;border-radius:999px;padding:2px 9px;margin-right:6px;text-shadow:none}
.serie-paus{position:absolute;right:12px;top:12px;width:40px;height:40px;border-radius:50%;border:0;background:#1b2537b3;color:#fff;cursor:pointer;display:grid;place-items:center}
.serie-paus span{width:12px;height:14px;border-left:4px solid #fff;border-right:4px solid #fff}
.serie-paus[aria-pressed=true] span{width:0;height:0;border-right:0;border-left:13px solid #fff;border-top:8px solid transparent;border-bottom:8px solid transparent;margin-left:4px}
.serie-paus:hover{background:#1b2537e6}
.privat-genvagar{display:flex;flex-wrap:wrap;gap:10px;margin-top:56px}
.privat-genvagar a{padding:9px 16px;border-radius:999px;background:#ffffff12;color:var(--soft);font-size:15px}
.privat-genvagar a:hover{background:#ffffff22;color:#fff}

/* Två situationer */
.sit-par{display:grid;grid-template-columns:1fr 1fr;gap:40px;margin-top:48px}
.sit{background:#1b2537b8;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);border-radius:22px;padding:22px 22px 30px}
.sit h3{font-size:28px;letter-spacing:-.02em;color:#fff;margin:0 0 10px;line-height:1.15}
.sit>p{color:var(--soft);margin:0 0 6px}
.sit .etikett{margin:22px 0 6px}
.mosaik{margin:0;display:grid;grid-template-columns:2fr 1fr;grid-template-rows:1fr 1fr;gap:8px;aspect-ratio:16/9}
.mosaik picture{border-radius:12px;overflow:hidden;min-height:0}
.mosaik .m-stor{grid-row:1/3}
.mosaik img{width:100%;height:100%;object-fit:cover}
.mosaik figcaption{grid-column:1/-1;font-size:13px;color:var(--dim);margin-top:2px}
.nyttor{list-style:none;padding:0;margin:18px 0 0;display:grid;gap:10px}
.nyttor li{position:relative;padding-left:28px;color:var(--soft)}
.nyttor li::before{content:"";position:absolute;left:4px;top:10px;width:8px;height:8px;border-radius:50%;background:var(--gold)}
.nyttor b{color:#fff}
.sit-bro{margin:36px auto 0;max-width:760px;text-align:center;color:var(--soft);font-size:18px}
.sit-bro b{color:#fff}

/* Före, under och efter */
.skeden{list-style:none;padding:0;margin:48px 0 0;display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.skeden li{background:#1b2537c7;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);border-radius:18px;padding:26px}
.skeden .nr{font-size:14px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--gold);margin:0}
.skeden h3{font-size:22px;color:#fff;margin:4px 0 8px;letter-spacing:-.01em}
.skeden p{margin:0;color:var(--soft)}
.skeden-not{max-width:760px;margin-top:28px}

/* Vem gör vad */
.roll-par{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-top:40px}
.roll{background:#1b2537c7;border-radius:18px;padding:26px}
.roll.du{box-shadow:inset 0 0 0 2px #d7a13b66}
.roll .lista{margin-top:8px}
.privat-film{margin-top:56px}
.privat-film h3{font-size:26px;color:#fff;margin:0 0 10px}

/* Projektberättelsen */
.ber-steg{margin-top:48px}
.slutbild{margin:48px 0 0;position:relative;border-radius:22px;overflow:hidden;aspect-ratio:16/8}
.slutbild picture,.slutbild img{width:100%;height:100%}
.slutbild img{object-fit:cover}
.slutbild figcaption{position:absolute;left:0;right:0;bottom:0;padding:28px 20px 14px;font-size:14px;color:#fff;background:linear-gradient(180deg,transparent,#0b1220cc)}

/* Redan inbjuden */

.inbjuden-lista{margin-top:0}
.inbjuden-lista b{color:#fff}
.inbjuden-knapp{margin-top:28px}

/* Konto och inloggning */
.konto-fyra{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:40px}
.konto-fyra div{background:#1b2537c7;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);border-radius:18px;padding:22px}
.konto-fyra h3{font-size:19px;color:#fff;margin:0 0 6px}
.konto-fyra p{margin:0;color:var(--soft);font-size:16px}

/* Vanliga frågor */
.faq{margin-top:36px;display:grid;gap:10px;max-width:860px}
.faq details{background:#1b2537b8;border-radius:14px;padding:0 20px}
.faq summary{cursor:pointer;list-style:none;padding:18px 32px 18px 0;font-weight:600;color:#fff;font-size:18px;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:0;top:14px;font-size:24px;color:var(--gold);font-weight:400}
.faq details[open] summary::after{content:"\2212"}
.faq details p{margin:0 0 18px;color:var(--soft)}

/* Anmälan och vägen tillbaka för företag */
#anmal .eb-form h3{margin:0 0 18px;font-size:26px;color:#fff;letter-spacing:-.02em}
.privat-foretag{padding:8px 0 72px;text-align:center;color:var(--dim)}
.privat-foretag p{margin:0;display:flex;flex-wrap:wrap;gap:8px 24px;justify-content:center;align-items:baseline}

/* Granskningsversionen: filmplatser (tas bort i publik.py) */
.filmplats{margin-top:20px;border:2px dashed #d7a13b80;border-radius:14px;padding:14px 16px;font-size:14px;color:var(--soft)}
.filmplats b{display:block;color:var(--gold)}

.med-bakgrund.privat .hero-text,.med-bakgrund.privat .privat-hjalte-text{text-shadow:0 1px 2px #1b2537}

@media(max-width:1080px){
  .privat-hjalte-grid{grid-template-columns:1fr;gap:40px}
  .sit-par,.roll-par{grid-template-columns:1fr}
  .skeden{grid-template-columns:1fr 1fr}
  .konto-fyra{grid-template-columns:1fr 1fr}
}
@media(max-width:700px){
  .privat-hjalte{padding-top:40px}
  .privat-hjalte h1{font-size:clamp(28px,8.6vw,40px)}
  .serie{aspect-ratio:4/5}
  .privat-genvagar{margin-top:36px}
  .sit{padding:14px 14px 24px;border-radius:18px}
  .sit h3{font-size:24px}
  .mosaik{grid-template-columns:1fr 1fr;grid-template-rows:auto auto;aspect-ratio:auto}
  .mosaik .m-stor{grid-row:auto;grid-column:1/-1;aspect-ratio:4/5}
  .mosaik .m-liten{aspect-ratio:1}
  .slutbild{aspect-ratio:4/5}
  .konto-fyra{grid-template-columns:1fr}
  .faq summary{font-size:17px}
}

/* Så börjar du: fyra korta steg vid anmälan */
.borja{list-style:none;counter-reset:b;padding:0;margin:28px 0 0;display:grid;gap:12px}
.borja li{counter-increment:b;position:relative;padding:2px 0 2px 44px;color:var(--soft)}
.borja li::before{content:counter(b);position:absolute;left:0;top:0;width:28px;height:28px;border-radius:50%;background:var(--gold);color:var(--navy);font-weight:700;font-size:14px;display:grid;place-items:center}
@media(max-width:700px){.skeden{grid-template-columns:1fr}}

/* Sidhuvudets knapp på privatdelen (Anmäl intresse, Adam 30 okt) är längre än Early Bird på flera språk: i mobil får den
   bryta på två rader så länge menyn är ihopfälld, i stället för att trycka ut sidhuvudet. */
@media(max-width:1080px){.privat .head .btn.mjuk{white-space:normal;text-align:center;line-height:1.15;max-width:8.5em;padding:7px 12px;font-size:14px}}