/* Ny forside, oktober 2026. Varm og skarp: smørgul flate, kullsvart kontrast, glo-oransje aksent.
   Alt er scopet til body.fs så resten av nettstedet er uberørt. Venstrejustert hele veien. */
body.fs {
  --yellow: #FFF6DC;
  --yellow-deep: #FFE9A8;
  --peach: #FFD9B8;
  --sage: #DDE8C9;
  --white: #FFFDF6;
  --ink: #1B160A;
  --ink-soft: #5E573F;
  --glow: #FF7A1A;
  --coal: #14110A;
  --coal-2: #1F1B12;
  --line: rgba(38, 32, 14, .10);
  --r: 28px;
  background: var(--yellow);
}
.fs-nav-cta { display: flex; align-items: center; gap: 12px; }

/* knapper: svarte, som Apple-merket. Oransje fyller aldri en knapp. */
.fs-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; min-width: 44px; padding: 14px 28px; border-radius: 999px;
  background: var(--ink); color: var(--yellow);
  font-weight: 700; font-size: 17px; line-height: 1.2; text-decoration: none;
  transition: transform .15s ease, box-shadow .15s ease;
}
.fs-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(27, 22, 10, .25); }
.fs-btn:active { transform: scale(.97); }
/* Lanseringsdatoen står på én linje, også på smale telefoner. */
.fs-btn.app-kommer { white-space: nowrap; }
@media (max-width: 480px) { .fs-btn.app-kommer { font-size: clamp(13px, 3.9vw, 17px); padding-left: 18px; padding-right: 18px; } }
.fs-btn:focus-visible { outline: 3px solid var(--glow); outline-offset: 3px; }
.fs-btn-small { min-height: 44px; padding: 8px 18px; font-size: 14px; }

h2.fs-h2, .fs h2 { font-size: clamp(30px, 4.6vw, 52px); line-height: 1.05; letter-spacing: -.02em; }

/* ---------- topp ---------- */
.fs-hero { padding: 40px 0 72px; position: relative; overflow: hidden; }
.fs-hero-inner { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 32px; align-items: center; }
.fs-hero h1 { font-size: clamp(44px, 7vw, 88px); line-height: 1.01; letter-spacing: -.025em; color: var(--ink); }
.fs-hero .fs-sub { margin: 24px 0 0; font-size: 19px; line-height: 1.5; color: var(--ink-soft); max-width: 46ch; }
.fs-hero .fs-cta { margin-top: 28px; }
.fs-price-line { margin: 14px 0 0; font-size: 15px; color: var(--ink-soft); max-width: 46ch; }
/* To hele skjermer (9:19,5), så høyden følger telefonbredden: 250 px bred gir 543 px høy,
   pluss forskyvningen på den andre telefonen og litt luft til rotasjonen. */
.fs-hero-phones { position: relative; min-height: 640px; }
/* Uten filter: blur(24px). Gradienten er myk nok selv, og filteret kostet mye stil og layout på
   en treg mobil (Lighthouse 5. oktober 2026). Litt større stopp gir samme kant. */
.fs-glow { position: absolute; inset: -10% -5% -10% 0; background: radial-gradient(60% 60% at 55% 50%, #FFC9A0 0%, rgba(255, 201, 160, 0.55) 35%, rgba(255, 201, 160, 0) 78%); z-index: 0; }
.fs-phone {
  position: absolute; width: min(250px, 52%); height: auto;
  border: 7px solid var(--ink); border-radius: 40px; background: var(--white);
  /* box-shadow i stedet for filter: drop-shadow. Bildet er et rektangel, så skyggen blir den samme,
     men den tegnes uten et filterlag (Lighthouse 5. oktober 2026). */
  box-shadow: 0 30px 40px rgba(110, 60, 0, .25); z-index: 1;
}
/* Tre telefoner som en vifte: I dag til venstre, loggen foran i midten, muskelkartet til høyre
   (Sebastian 7. oktober). */
.fs-phone { width: min(230px, 40%); }
.fs-phone-a { left: 0; top: 50px; transform: rotate(-9deg); }
.fs-phone-c { left: 30%; top: 0; transform: rotate(0deg); z-index: 3; }
.fs-phone-b { left: 60%; top: 60px; transform: rotate(8deg); z-index: 2; }

/* ---------- teller ---------- */
.fs-counter { padding: 0 0 72px; }
.fs-counter[hidden] { display: none; }
.fs-counter-box { background: var(--coal); color: var(--yellow); border-radius: 40px; padding: clamp(28px, 4vw, 56px); min-height: 220px; }
.fs-counter-label { font-size: 15px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 246, 220, .7); margin: 0; }
.fs-counter-number { font: 300 clamp(56px, 12vw, 120px)/1 'Inter', sans-serif; letter-spacing: -.04em; font-variant-numeric: tabular-nums; margin: 12px 0 0; color: var(--yellow); }
.fs-counter-unit { font-size: .32em; margin-left: .3em; color: var(--glow); letter-spacing: 0; font-weight: 600; }
.fs-counter-total { margin: 14px 0 0; font-size: 18px; color: rgba(255, 246, 220, .75); font-variant-numeric: tabular-nums; }
.fs-counter-meta { margin: 22px 0 0; display: flex; flex-wrap: wrap; gap: 4px 24px; align-items: center; font-size: 14px; color: rgba(255, 246, 220, .65); }
.fs-counter-meta button, .fs-counter-meta summary { font: inherit; color: var(--yellow); background: none; border: 0; padding: 10px 0; min-height: 44px; text-decoration: underline; cursor: pointer; }
.fs-counter-explain { margin: 6px 0 0; font-size: 14px; color: rgba(255, 246, 220, .75); max-width: 62ch; }

/* ---------- appen i nettleseren ---------- */
.fs-demo { padding: 0 0 72px; }
.fs-demo-lead { margin: 12px 0 0; color: var(--ink-soft); max-width: 56ch; font-size: 18px; }
.fs-demo-box { margin-top: 28px; background: var(--yellow-deep); border-radius: var(--r); padding: clamp(20px, 3.4vw, 40px); }
.fs-try { display: grid; justify-items: center; }
.fs-try > * { grid-area: 1 / 1; }
.fs-try-poster { position: relative; display: block; width: min(100%, 880px); height: min(720px, calc(100vh - 140px)); height: min(720px, calc(100svh - 140px)); border-radius: 28px; overflow: hidden; background: var(--yellow); box-shadow: 0 18px 48px rgba(27, 22, 10, .18); }
.fs-try-poster img, .fs-try-poster picture { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top left; }
.fs-try-btn { white-space: nowrap; pointer-events: none; }
/* Tonet glass over plakaten med knappen i midten. Et trykk hvor som helst på
   glasset laster loggeren. */
.fs-try-glass { position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; justify-content: center; border: 0; padding: 0; margin: 0; cursor: pointer; background: rgba(255, 229, 154, .38); -webkit-backdrop-filter: blur(5px) saturate(1.1); backdrop-filter: blur(5px) saturate(1.1); transition: background .2s ease; }
.fs-try-glass:hover { background: rgba(255, 229, 154, .26); }
.fs-try-glass:focus-visible { outline: 3px solid var(--orange); outline-offset: -3px; }
.fs-try-glass.fs-try-laster { cursor: progress; }
.fs-try-glass.fs-try-laster .fs-btn { opacity: .8; }
.fs-try-poster[hidden] { display: none; }
/* Rammen er aldri høyere enn skjermen under toppen, så ark som åpnes nederst
   i appen synes uten at man må scrolle inne i den. */
.fs-try-frame { position: relative; z-index: 1; display: block; width: min(100%, 880px); height: min(720px, calc(100vh - 140px)); height: min(720px, calc(100svh - 140px)); border: 0; border-radius: 28px; background: transparent; opacity: 0; pointer-events: none; transition: opacity .4s ease; }
.fs-try-frame.fs-try-klar { opacity: 1; pointer-events: auto; }
/* Bare mens tastaturet er oppe: rammen fyller det som er igjen av skjermen,
   så radene blir stående. Loggeren ligger i siden ellers. */
.fs-try-frame.fs-try-tastatur { position: fixed; left: 0; right: 0; width: 100%; z-index: 80; border-radius: 0; max-height: none; background: #FFE59A; opacity: 1; transition: none; }
html.fs-logger-apen, html.fs-logger-apen body { overflow: hidden; }
body.fs-logger-apen .fs-sticky,
body.fs-logger-apen .site-logo,
body.fs-logger-apen .site-meny-knapp,
body.fs-logger-apen .site-topp { visibility: hidden !important; }
/* Transform på boksen gjør position:fixed relativ til den. Nullstill den
   mens tastaturet er oppe, så rammen dekker det synlige vinduet. */
body.fs-logger-apen .fs-demo-box { transform: none !important; }
/* Telefon: appen går helt ut i kantene, så regnearket ikke blir trangt
   (Sebastian 6. oktober). */
@media (max-width: 600px) {
  /* Loggeren går kant til kant: boksen bak skal ikke stikke fram rundt den
     (Sebastian 6. oktober). */
  .fs-demo-box { padding: 0; background: none; border-radius: 0; }
  .fs-try { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); }
  /* Lavere enn skjermen, så det står igjen side over og under å scrolle på:
     en finger på loggeren scroller loggeren, ikke siden. */
  .fs-try-poster, .fs-try-frame { width: 100%; height: min(640px, calc(100vh - 184px)); height: min(640px, calc(100svh - 184px)); border-radius: 0; box-shadow: none; }
  .fs-demo-cta { padding-left: 20px; padding-right: 20px; }
}
.fs-demo-note { margin: 18px 0 0; font-size: 14px; color: var(--ink-soft); max-width: 62ch; }
.fs-demo-cta { margin-top: 18px; }

/* ---------- sjekkliste ---------- */
.fs-facts { padding: 0 0 72px; }
.fs-check { list-style: none; margin: 20px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.fs-check li { position: relative; background: var(--white); border: 1px solid var(--line); border-radius: 999px; padding: 8px 14px 8px 34px; font-weight: 600; font-size: 14px; }
.fs-check li::before { content: ''; position: absolute; left: 13px; top: 12px; width: 10px; height: 6px; border-left: 2px solid var(--ink-soft); border-bottom: 2px solid var(--ink-soft); transform: rotate(-45deg); }

/* ---------- tre grunner som bento ---------- */
.fs-reasons { padding: 0 0 72px; }
.fs-bento { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 28px; }
.fs-reason { position: relative; display: flex; flex-direction: column; border-radius: var(--r); padding: clamp(24px, 3vw, 36px) clamp(24px, 3vw, 36px) 0; overflow: hidden; min-height: 560px; }
.fs-reason:nth-child(1) { background: var(--yellow-deep); }
.fs-reason:nth-child(2) { background: var(--peach); }
.fs-reason:nth-child(3) { background: var(--coal); color: var(--yellow); }
.fs-reason > div { order: 1; }
.fs-reason h3 { font-size: clamp(24px, 2.6vw, 32px); line-height: 1.1; letter-spacing: -.015em; }
.fs-reason p { margin: 12px 0 0; font-size: 16px; line-height: 1.5; color: var(--ink-soft); }
.fs-reason:nth-child(3) p { color: rgba(255, 246, 220, .78); }
.fs-bento { --fs-tlf-h: clamp(420px, 38vw, 520px); }
.fs-reason img {
  order: 2; margin: auto auto 28px; padding: 0; width: auto; max-width: none; height: var(--fs-tlf-h); align-self: center;
  box-sizing: content-box; border: 7px solid var(--ink); border-radius: 34px;
  transition: transform .3s ease; background: var(--white); box-shadow: 0 18px 40px rgba(27, 22, 10, .16);
}
.fs-reason:nth-child(3) img { border-color: #3a3322; }
.fs-reason:hover img { transform: translateY(-4px); }
.fs-reason > div { margin-bottom: 24px; }
/* Hele telefonskjermer, ikke utsnitt (Sebastian 7. oktober). To side om side i det midterste kortet. */
.fs-reason > .fs-pair { order: 2; margin: auto -36px 28px; display: flex; justify-content: center; align-items: flex-end; padding-top: 24px; }
/* Som en bukett: bunnene møtes, toppene peker fra hverandre (Sebastian 7. oktober). */
.fs-pair img { margin: 0; width: auto; max-width: none; height: var(--fs-tlf-h); border-width: 6px; border-radius: 30px; transform-origin: 50% 100%; }
.fs-pair img:first-child { transform: translateX(-16%) rotate(-11deg); margin-right: -72%; }
.fs-pair img:last-child { transform: translateX(16%) rotate(8deg); position: relative; z-index: 1; }
.fs-reason:hover .fs-pair img:first-child { transform: translateX(-16%) rotate(-12deg) translateY(-4px); }
.fs-reason:hover .fs-pair img:last-child { transform: translateX(16%) rotate(9deg) translateY(-4px); }

/* ---------- fra nybegynner til profesjonell ---------- */
.fs-people { padding: 0 0 72px; }

/* ---------- pris ---------- */
.fs-more { padding: 0 0 72px; }
.fs-more-box { background: var(--coal); color: var(--yellow); border-radius: 40px; padding: clamp(28px, 5vw, 64px); }
.fs-pricing-list { margin: 28px 0 0; padding: 0; list-style: none; max-width: 62ch; }
.fs-pricing-list li { padding: 16px 0 16px 34px; position: relative; border-top: 1px solid rgba(255, 246, 220, .16); font-size: 18px; line-height: 1.45; }
.fs-pricing-list li:last-child { border-bottom: 1px solid rgba(255, 246, 220, .16); }
.fs-pricing-list li::before { content: ''; position: absolute; left: 4px; top: 25px; width: 12px; height: 12px; border-radius: 99px; background: var(--glow); }

/* ---------- spørsmål ---------- */
.fs-faq { padding: 0 0 72px; }
.fs-faq details { background: var(--white); border-radius: 20px; max-width: 760px; margin-top: 10px; padding: 0 22px; }
.fs-faq summary { cursor: pointer; padding: 18px 0; min-height: 44px; font-weight: 700; font-size: 18px; }
.fs-faq details[open] { background: var(--yellow-deep); padding-bottom: 24px; }
.fs-faq details p { margin: 0; color: var(--ink-soft); font-size: 17px; line-height: 1.5; }
.fs-faq details p + p { margin-top: 12px; }
.fs-faq h2 { margin-bottom: 20px; }

/* ---------- siste knapp ---------- */
.fs-final { padding: 0 0 96px; }
.fs-final-box { background: var(--yellow-deep); border-radius: 40px; padding: clamp(32px, 6vw, 80px); position: relative; overflow: hidden; }
.fs-final-box::after { content: ''; position: absolute; right: -80px; top: -80px; width: 320px; height: 320px; border-radius: 50%; background: radial-gradient(circle, #FFC9A0 0%, rgba(255, 201, 160, 0) 70%); }
.fs-final h2 { font-size: clamp(36px, 6vw, 72px); }
.fs-final .fs-cta { margin-top: 24px; position: relative; z-index: 1; }

/* ---------- fast knapp på telefon ---------- */
.fs-sticky { position: fixed; left: 16px; bottom: 16px; z-index: 40; display: none; box-shadow: 0 10px 30px rgba(27, 22, 10, .3); }
.fs-sticky.is-on { display: inline-flex; }

/* ---------- bevegelse: lett og én gang ---------- */
.js .fs-rev { opacity: 0; transform: translateY(16px); transition: opacity .45s ease-out, transform .45s ease-out; }
.js .fs-rev.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .fs-rev { opacity: 1; transform: none; transition: none; }
  .fs-reason img, .fs-btn { transition: none; }
  .fs-reason img { transform: none; }
  .fs-pair img:first-child { transform: translateX(-16%) rotate(-11deg); }
  .fs-pair img:last-child { transform: translateX(16%) rotate(8deg); }
}

@media (max-width: 900px) {
  .fs-hero-inner { grid-template-columns: 1fr; gap: 8px; }
  .fs-hero-phones { min-height: 640px; }
  .fs-bento { grid-template-columns: 1fr; }
  .fs-reason { min-height: 520px; }
}
@media (max-width: 600px) {
  .fs-hero { padding: 24px 0 48px; }
  .fs-hero .fs-sub { font-size: 17px; }
  .fs-nav-cta .fs-btn-small { display: none; }
  .fs-phone { width: 38%; border-width: 4px; border-radius: 22px; }
  .fs-hero-phones { min-height: calc(38vw * 2.17 + 70px); }
  .fs-phone-a { left: 0; top: 34px; }
  .fs-phone-c { left: 31%; top: 0; }
  .fs-phone-b { left: 62%; top: 40px; }
  .fs-counter-box, .fs-more-box, .fs-final-box { border-radius: 28px; }
}
@media (min-width: 901px) { .fs-sticky.is-on { display: none; } }

/* ---------- store tall i prisen ---------- */
.fs-bignums { display: flex; flex-wrap: wrap; gap: 12px 40px; margin-top: 28px; }
.fs-bignums > div { display: flex; flex-direction: column; }
.fs-bignum { font: 300 clamp(56px, 11vw, 112px)/1 'Inter', sans-serif; letter-spacing: -.04em; font-variant-numeric: tabular-nums; color: var(--yellow); }
.fs-bigcap { font-size: 15px; color: var(--glow); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; margin-top: 6px; }

/* ---------- vegg av skjermer ---------- */
.fs-wall { padding: 0 0 56px; overflow: hidden; }
.fs-wall-row { display: flex; gap: 14px; align-items: flex-start; margin: 0 -8px; }
.fs-wall-row img { flex: 0 0 auto; width: 220px; height: auto; border: 6px solid var(--ink); border-radius: 30px; box-shadow: 0 24px 40px rgba(110, 60, 0, .18); }
.fs-wall-row img:nth-child(odd) { transform: rotate(-2.5deg) translateY(6px); }
.fs-wall-row img:nth-child(even) { transform: rotate(2.5deg) translateY(26px); }
@media (max-width: 900px) { .fs-wall-row { overflow-x: auto; scroll-snap-type: x mandatory; padding: 0 8px 40px; } .fs-wall-row img { scroll-snap-align: center; width: 170px; border-width: 5px; border-radius: 24px; } }

/* ---------- mobil først: tettere tre grunner ---------- */
@media (max-width: 900px) {
  /* Teksten først, så hele skjermbildet under, stort nok til å lese. */
  .fs-reason { min-height: 0; padding: 24px 22px 0; }
  .fs-reason > div { margin-bottom: 20px; }
  .fs-reason h3 { font-size: 22px; }
  .fs-reason p { font-size: 15px; margin-top: 8px; }
  .fs-bento { --fs-tlf-h: min(520px, 118vw); }
  .fs-reason img { width: auto; max-width: none; height: var(--fs-tlf-h); margin: 0 auto 24px; border-width: 6px; border-radius: 28px; transform: none; }
  .fs-reason .fs-pair img { width: auto; max-width: none; height: var(--fs-tlf-h); margin: 0; border-width: 5px; border-radius: 26px; }
  .fs-reason .fs-pair img:first-child { margin-right: -72%; }
  .fs-bento { gap: 14px; margin-top: 20px; }
  .fs-hero, .fs-counter, .fs-demo, .fs-facts, .fs-reasons, .fs-people, .fs-more, .fs-faq { padding-bottom: 48px; }
  .fs-hero { padding-bottom: 40px; }
}

@media (max-width: 600px) {
  .fs-check { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .fs-check li { font-size: 13px; line-height: 1.25; padding: 9px 10px 9px 30px; border-radius: 16px; display: flex; align-items: center; }
  .fs-check li::before { left: 11px; top: 50%; margin-top: -4px; }
}
.fs-final h2 { position: relative; z-index: 1; }

/* ---------- film fra Rytme ---------- */
.fs-film { padding: 0 0 72px; }
.fs-film-inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); gap: 40px; align-items: center; background: var(--coal); color: var(--yellow); border-radius: 40px; padding: clamp(28px, 5vw, 64px); }
.fs-film h2 { color: var(--yellow); }
.fs-film .fs-demo-lead { color: rgba(255, 246, 220, .8); }
.fs-film-steps { list-style: none; counter-reset: s; margin: 24px 0 0; padding: 0; display: grid; gap: 10px; }
.fs-film-steps li { counter-increment: s; position: relative; padding-left: 44px; font-size: 18px; font-weight: 600; min-height: 32px; display: flex; align-items: center; }
.fs-film-steps li::before { content: counter(s); position: absolute; left: 0; width: 32px; height: 32px; border-radius: 50%; background: var(--glow); color: var(--coal); font: 700 15px/32px 'Inter', sans-serif; text-align: center; }
.fs-film .fs-cta { margin-top: 28px; }
.fs-film .fs-btn { background: var(--yellow); color: var(--ink); }
.fs-film-phone { position: relative; justify-self: center; width: min(300px, 100%); }
.fs-film-video { display: block; width: 100%; height: auto; aspect-ratio: 780 / 1588; object-fit: cover; object-position: top; border: 7px solid #3a3322; border-radius: 38px; background: var(--coal); }

/* ---------- analyser ---------- */
.fs-analytics { padding: 0 0 72px; }
.fs-an-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 28px; }
.fs-an { margin: 0; border-radius: var(--r); padding: clamp(22px, 3vw, 32px) clamp(22px, 3vw, 32px) 0; overflow: hidden; display: flex; flex-direction: column; }
.fs-an-a { background: var(--yellow-deep); }
.fs-an-b { background: var(--peach); }
.fs-an figcaption { order: 1; }
.fs-an figcaption b { display: block; font: 600 clamp(22px, 2.6vw, 30px)/1.1 'Lora', serif; letter-spacing: -.015em; }
.fs-an figcaption span { display: block; margin-top: 8px; font-size: 15px; color: var(--ink-soft); }
/* Begge skjermene i samme ramme og samme format, hele skjermen synes. */
.fs-an img { order: 2; margin: 24px 0 32px; width: 78%; max-width: 300px; height: auto; aspect-ratio: 780 / 1696; object-fit: contain; object-position: top; align-self: flex-start; border: 7px solid var(--ink); border-radius: 34px; background: #fffdf6; box-sizing: border-box; }
@media (max-width: 900px) {
  .fs-film-inner { grid-template-columns: 1fr; gap: 28px; border-radius: 28px; }
  .fs-film, .fs-analytics { padding-bottom: 48px; }
  .fs-an-grid { grid-template-columns: 1fr; gap: 14px; }
  .fs-an img { width: 70%; }
}

/* ---------- mosaikken (Sebastian 6. oktober) ----------
   Starter med ett bilde som fyller skjermen. Mens man scroller zoomer det ut,
   og bildene rundt kommer til ett for ett til hele mosaikken står. Scenen
   står fast (sticky) mens seksjonen scrolles forbi; forside.js styrer
   --fs-mosaikk-* og legger på .fs-mosaic-aktiv. Uten JavaScript, og med
   redusert bevegelse, står hele mosaikken med en gang.
   Rutenettet: 6 x 4 felt i 3:2 på skjerm, 4 x 6 kvadrater på mobil, med
   startbildet midt i. Plassene står på hvert bilde (--d og --m). */
.fs-mosaic { position: relative; margin: 28px 0 0; }
.fs-mosaic-stage { display: flex; align-items: center; justify-content: center; }
.fs-mosaic-inner { display: grid; grid-template-columns: repeat(6, 1fr); grid-template-rows: repeat(4, 1fr); gap: 10px; width: min(100% - 48px, 1352px); aspect-ratio: 9 / 4; }
.fs-m { grid-area: var(--d); display: block; width: 100%; height: 100%; min-height: 0; object-fit: cover; object-position: 50% 25%; border-radius: 14px; }
.fs-mosaic-aktiv { height: 280vh; }
.fs-mosaic-aktiv .fs-mosaic-stage { position: sticky; top: 72px; height: calc(100vh - 72px); height: calc(100svh - 72px); overflow: hidden; }
.fs-mosaic-aktiv .fs-mosaic-inner { width: min(100% - 48px, 1352px, (100vh - 120px) * 2.25); width: min(100% - 48px, 1352px, (100svh - 120px) * 2.25); transform-origin: 50% 50%; transform: translate(var(--fs-mosaikk-x, 0px), var(--fs-mosaikk-y, 0px)) scale(var(--fs-mosaikk-s, 1)); will-change: transform; }
.fs-mosaic-aktiv .fs-m:not(.fs-m-start) { opacity: var(--vis, 0); transform: scale(calc(.92 + .08 * var(--vis, 0))); transition: opacity .25s ease, transform .35s ease; }
.fs-mosaic-aktiv .fs-m-start { position: relative; z-index: 1; border-radius: calc(14px / var(--fs-mosaikk-s, 1)); }
@media (max-width: 600px) {
  .fs-mosaic-inner { grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(6, 1fr); gap: 6px; width: min(100% - 24px, 520px); aspect-ratio: 2 / 3; }
  .fs-m { grid-area: var(--m); border-radius: 10px; }
  .fs-mosaic-aktiv .fs-mosaic-stage { top: 64px; height: calc(100vh - 64px); height: calc(100svh - 64px); }
  .fs-mosaic-aktiv .fs-mosaic-inner { width: min(100% - 24px, 520px, (100svh - 100px) / 1.5); }
  .fs-mosaic-aktiv .fs-m-start { border-radius: calc(10px / var(--fs-mosaikk-s, 1)); }
}