/* =====================================================================
   DELFINENS FÖRSKOLA – all CSS i en fil.

   IDÉN: sajten ska se ut som barnens egen. Kritfärger, vingliga ramar
   ritade för hand, foton uppsatta med tejp, klistermärken och klotter.
   Men strukturen under är stenhård: en stor rubrik i taget, ett budskap
   per färgblock, och en enda knapp som alltid betyder samma sak.

   Lekfullt i ytan, tydligt i botten. Det är hela greppet.

   Innehåll:
     1. Kritlådan (färger, typsnitt, mått)
     2. Grund och typografi
     3. Knappar och länkar
     4. Vingliga ramar, tejp, klistermärken, klotter
     5. Sidhuvud och meny
     6. Hero
     7. Färgblock och sektioner
     8. Kort, foton, pratbubblor, tidslinje, fakta
     9. Sidfot
    10. Demorutan för inloggningen
    11. Rörelse och fokus
   ===================================================================== */


/* ============ 1. KRITLÅDAN ============ */

:root {
  /* Papperet vi ritar på */
  --papper:      #FFFDF6;
  --papper-2:    #FFF8E7;

  /* Kritsvart – aldrig rent svart, alltid lite brunt */
  --ink:         #2A2118;
  --ink-mjuk:    #5A4B3C;

  /* Kritlådan. Starka färger till streck, klotter och rubriker. */
  --bla:         #1E88C7;
  --gul:         #E8A400;
  --gron:        #3D9B33;
  --rod:         #D93A1E;
  --lila:        #7C4DBE;
  --rosa:        #D93F8B;
  --orange:      #E86F1A;

  /* Samma färger urvattnade – till blockbakgrunder. Mörk text på alla. */
  --bla-ljus:    #CDEBFA;
  --gul-ljus:    #FFEFB5;
  --gron-ljus:   #DCF3CE;
  --rod-ljus:    #FFDCD2;
  --lila-ljus:   #EADDFB;
  --rosa-ljus:   #FFE0EF;
  --orange-ljus: #FFE6CC;

  /* Knappen. Samma röda som rutschkanetunnlarna på gården. */
  --knapp:       #D93A1E;
  --knapp-mork:  #A82A12;   /* hård skugga under knappen */

  /* Typsnitt */
  --font-rubrik: 'Fredoka', 'Trebuchet MS', system-ui, sans-serif;
  --font-brod:   'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-penna:  'Caveat', 'Segoe Script', cursive;

  /* Luft */
  --luft-stor:   clamp(3.5rem, 9vw, 6rem);
  --luft:        clamp(2rem, 5vw, 3rem);

  /* Vinglig ram – det klassiska handritade-låda-tricket. Radien är olika
     i alla fyra hörnen, så inget blir maskinrakt. */
  --vinglig:      18px 240px 22px 200px / 190px 20px 210px 24px;
  --vinglig-2:    220px 16px 190px 20px / 18px 200px 22px 180px;

  /* Kapitelfärgen. Sätts om per sektion – därför byter allt (rubrikstreck,
     klotter, klistermärken) färg tillsammans. */
  --kulor:       var(--bla);
  --kulor-ljus:  var(--bla-ljus);
}

/* KONTRAST – uträknat, inte gissat. Alla värden klarar WCAG AA.
     ink (#2A2118) på papper (#FFFDF6) ............... 15,2:1
     ink på bla-ljus / gul-ljus / gron-ljus .......... 12–14:1
     ink på rod-ljus / lila-ljus / rosa-ljus ......... 12–14:1
     vit text på knapp (#D93A1E) ...................... 4,6:1
     bla (#1E88C7) på papper .......................... 3,3:1  <- ENDAST streck
     gron (#3D9B33) på papper ......................... 3,6:1  <- ENDAST streck
     rod (#D93A1E) på papper .......................... 4,6:1
     lila (#7C4DBE) på papper ......................... 5,9:1
     rosa (#D93F8B) på papper ......................... 4,9:1
     ink-mjuk (#5A4B3C) på papper ..................... 8,2:1

   REGEL: de starka färgerna används till STRECK, KLOTTER och RAMAR.
   Bär de text måste texten vara stor och fet (över 24 px), annars
   skrivs den i --ink. Ingen färg får ensam bära mening.                */

@font-face {
  font-family: 'Fredoka';
  src: url('../fonts/fredoka.woff2') format('woff2');
  font-weight: 300 700; font-display: swap;
}
@font-face {
  font-family: 'Nunito';
  src: url('../fonts/nunito.woff2') format('woff2');
  font-weight: 400 900; font-display: swap;
}
@font-face {
  font-family: 'Caveat';
  src: url('../fonts/caveat.woff2') format('woff2');
  font-weight: 600; font-display: swap;
}


/* ============ 2. GRUND OCH TYPOGRAFI ============ */

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-block-start: 5rem; }

body {
  margin: 0;
  overflow-x: clip;
  background: var(--papper);
  color: var(--ink);
  font-family: var(--font-brod);
  font-size: clamp(1.125rem, 1.05rem + .3vw, 1.25rem);
  font-weight: 500;
  line-height: 1.65;
  -webkit-text-size-adjust: 100%;
}

img, video, svg { display: block; max-width: 100%; }
img, video { height: auto; }

h1, h2, h3 {
  font-family: var(--font-rubrik);
  font-weight: 600;
  line-height: 1.05;
  margin: 0 0 .5em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.5rem, 7vw, 4.5rem); }
h2 { font-size: clamp(2rem, 5vw, 3.25rem); }
h3 { font-size: clamp(1.35rem, 2.6vw, 1.75rem); line-height: 1.2; }

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
.text { max-inline-size: 60ch; }

/* Långa ord (och platshållare som {{INSKOLNING_DAG_1}}) får bryta hellre än
   att spränga layouten på smal skärm. */
p, li, dd, dt, h1, h2, h3 { overflow-wrap: break-word; }

a { color: var(--ink); text-decoration-thickness: 2px; text-underline-offset: .2em; }

.omslag { width: min(1280px, 100% - 2.5rem); margin-inline: auto; }
.smal   { max-inline-size: 62ch; }

/* Handskriven lapp – används sparsamt, till småprat i marginalen. */
.penna {
  font-family: var(--font-penna); font-weight: 600;
  font-size: clamp(1.35rem, 2.4vw, 1.7rem); line-height: 1.25;
  color: var(--ink-mjuk);
}

/* Platshållare för uppgifter vi väntar på från förskolan. */
mark.ph {
  background: var(--gul-ljus); color: inherit;
  padding: .1em .3em; border-radius: 6px;
  box-decoration-break: clone; -webkit-box-decoration-break: clone;
}


/* ============ 3. KNAPPAR OCH LÄNKAR ============ */

/* Knappen är ett klistermärke: tjock, rund, med hård skugga under och
   en aning snedställd. Den finns i EN färg och betyder alltid samma sak. */
.knapp {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  min-block-size: 64px; padding: .7rem 2rem;
  background: var(--knapp); color: #fff;
  border: 0; border-radius: 999px;
  font-family: var(--font-rubrik); font-weight: 600;
  font-size: clamp(1.15rem, 2.2vw, 1.4rem); line-height: 1;
  text-decoration: none; cursor: pointer;
  box-shadow: 0 6px 0 var(--knapp-mork);
  rotate: -1.2deg;
  transition: rotate .15s ease, translate .15s ease, box-shadow .15s ease;
}
.knapp:hover { color: #fff; rotate: 1.2deg; translate: 0 -2px; box-shadow: 0 8px 0 var(--knapp-mork); }
.knapp:active { translate: 0 5px; box-shadow: 0 1px 0 var(--knapp-mork); }
.knapp-stor { min-block-size: 74px; padding-inline: 2.6rem; font-size: clamp(1.3rem, 2.6vw, 1.7rem); }

/* Textlänk med kritstreck under. */
a.lank {
  display: inline-block; padding-block: .4rem;
  font-weight: 800; color: var(--ink);
  text-decoration: underline; text-decoration-thickness: 3px;
  text-decoration-color: var(--kulor); text-underline-offset: .25em;
}
a.lank::after { content: '\00a0→'; white-space: nowrap; display: inline; transition: translate .18s ease; }
a.lank:hover::after { translate: 5px 0; }

/* Telefonnumret ska gå att läsa från andra sidan rummet. */
.telnr {
  display: inline-block; padding-block: .3rem;
  font-family: var(--font-rubrik); font-weight: 600;
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--ink); text-decoration-color: var(--kulor); text-decoration-thickness: 3px;
}
.telnr-stor { font-size: clamp(1.8rem, 5vw, 2.75rem); line-height: 1.15; }


/* ============ 4. RAMAR, TEJP, KLISTERMÄRKEN, KLOTTER ============ */

/* Vinglig ram: ojämn radie i alla hörn = ser handritad ut, kostar noll. */
.ram {
  border: 4px solid var(--ink);
  border-radius: var(--vinglig);
  background: var(--papper);
  padding: clamp(1.25rem, 3vw, 2rem);
}
.ram-2 { border-radius: var(--vinglig-2); }

/* Kritstreck under rubriker – en vinglig SVG som ärver kapitelfärgen. */
.streck { display: block; inline-size: min(320px, 70%); block-size: 14px; margin: -.2rem 0 1.2rem; overflow: visible; }
.streck path { fill: none; stroke: var(--kulor); stroke-width: 7; stroke-linecap: round; }

/* Klistermärke – rund pratbubbla med tal eller kort ord, snedställd. */
.marke {
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
  inline-size: clamp(112px, 17vw, 154px); aspect-ratio: 1;
  border: 4px solid var(--ink); border-radius: 50%;
  background: var(--kulor-ljus);
  font-family: var(--font-rubrik); font-weight: 600; line-height: 1;
  text-align: center; padding: .5rem;
  rotate: -6deg;
}
.marke b { font-size: clamp(1.5rem, 3.4vw, 2.1rem); display: block; }
.marke span { font-size: .82rem; font-weight: 500; margin-block-start: .25rem; }
.marke:nth-child(even) { rotate: 5deg; }

/* Foto med tejpremsa i hörnet. Tejpen är en pseudo-elementsremsa – inga
   bilder, ingen clipart. */
.foto {
  position: relative;
  background: var(--papper);
  border: 4px solid var(--ink);
  border-radius: 14px;
  padding: 10px;
  rotate: -1.5deg;
}
.foto:nth-of-type(even) { rotate: 1.5deg; }
.foto img { inline-size: 100%; border-radius: 6px; }
.foto::before {
  content: ''; position: absolute; inset-block-start: -18px; inset-inline-start: 12%;
  inline-size: 96px; block-size: 30px;
  background: rgb(255 214 92 / .85);
  border: 2px solid rgb(42 33 24 / .25);
  rotate: -7deg;
}
.foto figcaption {
  font-family: var(--font-penna); font-weight: 600;
  font-size: 1.35rem; line-height: 1.25; color: var(--ink-mjuk);
  margin-block-start: .6rem; text-align: center;
}

/* Klotter: sol, moln, stjärna, hjärta, blomma, delfin. Ritade som SVG
   med runda ändar så de ser gjorda med krita ut. */
.klotter { position: absolute; pointer-events: none; z-index: 0; }
.klotter svg { inline-size: 100%; block-size: auto; overflow: visible; }
.klotter path, .klotter circle, .klotter line {
  fill: none; stroke-width: 6; stroke-linecap: round; stroke-linejoin: round;
}
/* Delfinen är fylld i stället för streckad – se partials/klotter.php. */
.klotter svg[data-fylld] path { fill: inherit; stroke: none; }

/* Prickig hoppa-linje mellan block. */
.prickar { display: flex; gap: 14px; justify-content: center; padding-block: 1.5rem; }
.prickar span { inline-size: 14px; block-size: 14px; border-radius: 50%; }

.skip-lank {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--gul); color: var(--ink); padding: .9rem 1.25rem; font-weight: 800;
}
.skip-lank:focus { left: 0; }


/* ============ 5. SIDHUVUD OCH MENY ============ */

.sidhuvud { background: var(--papper); border-block-end: 4px solid var(--ink); }
/* Sidhuvudet får vara bredare än innehållet – annars klumpar loggan och
   menyn ihop sig mitt på en stor skärm. */
.huvudrad {
  display: flex; align-items: center; gap: 1rem;
  min-block-size: 72px; padding-block: .6rem;   /* knappen ska aldrig nudda färgremsan */
  inline-size: 100%; max-inline-size: 1600px; margin-inline: auto;
  padding-inline: clamp(1.25rem, 3vw, 3rem);
}
/* Knappen i sidhuvudet är lite lägre än den stora i sidan. */
.huvudrad .knapp { min-block-size: 52px; padding-inline: 1.5rem; font-size: 1.1rem; }

.logga {
  display: inline-flex; align-items: center; gap: .55rem; margin-inline-end: auto;
  font-family: var(--font-rubrik); font-weight: 600;
  font-size: clamp(1.05rem, 3.2vw, 1.45rem); line-height: 1.05;
  color: var(--ink); text-decoration: none;
}
.logga svg { inline-size: clamp(36px, 5vw, 46px); block-size: auto; flex: none; }

.nav ul { display: flex; gap: .3rem; margin: 0; padding: 0; list-style: none; }
.nav a {
  display: inline-flex; align-items: center; min-block-size: 46px;
  padding-inline: .8rem; border-radius: 999px;
  font-family: var(--font-rubrik); font-weight: 500; font-size: 1.05rem;
  color: var(--ink); text-decoration: none;
}
.nav a:hover { background: var(--gul-ljus); }

.huvudhoger { display: flex; align-items: center; gap: .5rem; }

.logga-in {
  display: inline-flex; align-items: center; gap: .4rem;
  min-block-size: 46px; padding-inline: .8rem;
  background: none; border: 0; cursor: pointer;
  font-family: var(--font-brod); font-weight: 800; font-size: 1rem; color: var(--ink);
  text-decoration: underline; text-decoration-thickness: 2px;
  text-decoration-color: var(--bla); text-underline-offset: .2em;
}

.menyknapp {
  display: none; align-items: center; gap: .4rem;
  min-block-size: 46px; padding-inline: .7rem;
  background: none; border: 0; cursor: pointer;
  font-family: var(--font-rubrik); font-weight: 500; font-size: 1.05rem; color: var(--ink);
}

/* Färgremsan under sidhuvudet: veckans fem färger, dagens är dubbelt hög. */
.veckoband { display: grid; grid-template-columns: repeat(5, 1fr); block-size: 8px; }
.veckoband span { display: block; block-size: 100%; }
.veckoband span.idag { block-size: 16px; align-self: end; }

@media (max-width: 63.999rem) {
  .menyknapp { display: inline-flex; }
  .bred-bara, a.bred-bara, span.bred-bara { display: none; }
  .nav {
    position: absolute; inset-inline: 0; z-index: 40;
    background: var(--papper); border-block-end: 4px solid var(--ink);
  }
  .nav[hidden] { display: none; }
  .nav ul { flex-direction: column; padding: .75rem 1.25rem 1.25rem; gap: .2rem; }
  .nav a { min-block-size: 54px; font-size: 1.2rem; }
}
@media (min-width: 64rem) { .nav-logga-in { display: none; } }

/* Fast knapp i underkanten på mobil. */
.fast-boka {
  position: sticky; bottom: 0; z-index: 30;
  display: flex; justify-content: center;
  padding: .6rem 1.25rem calc(.6rem + env(safe-area-inset-bottom));
  background: var(--papper); border-block-start: 4px solid var(--ink);
}
.fast-boka .knapp { inline-size: 100%; max-inline-size: 24rem; rotate: 0deg; }
@media (min-width: 54rem) { .fast-boka { display: none; } }


/* ============ 6. HERO ============ */

/* Videon ÄR heron. Den fyller hela ytan, texten ligger ovanpå en mörk
   slöja som garanterar läsbarheten oavsett vilken bildruta som visas. */
/* Höjden följer skärmen, inte tvärtom: svh gör att nästa block alltid
   skymtar under vikningen, och taket hindrar heron från att bli enorm på
   stora skärmar. */
.hero {
  position: relative; display: flex; align-items: center;
  /* Höjden följer BÅDE fönstrets höjd och dess bredd. Utan bredddelen blir
     heron en tunn remsa på en stor skärm; utan höjddelen tar den över hela
     vyn på en låg laptop. Taket hindrar den från att bli enorm. */
  min-block-size: min(72svh, max(30rem, 30vw), 52rem);
  background: var(--ink); overflow: hidden;
}

/* Videon ligger UTANFÖR flödet (position:absolute). Det är inte kosmetik:
   som vanligt flödesbarn skulle bildens egna proportioner (16:9) bestämma
   hero-höjden, och på en 2560 px bred skärm blev heron 1440 px hög trots
   min-block-size. Absolut positionerad bidrar den inte till höjden alls,
   och 100 % räknas mot en färdig höjd. */
.hero-band { position: absolute; inset: 0; overflow: hidden; }
.hero-band > picture { display: contents; }
.hero-band > *, .hero-band > picture > img {
  position: absolute; inset: 0;
  inline-size: 100%; block-size: 100%;
  object-fit: cover; object-position: 50% 45%;
}
.hero-video { opacity: 0; transition: opacity .6s linear; }
.hero-video.spelar { opacity: 1; }

/* Ingen slöja över videon – hela gården ska synas. Läsbarheten löses i
   stället av en tonad ruta bakom texten (.hero-text nedan). */

.hero-inre {
  position: relative; z-index: 2;
  display: flex; align-items: center; gap: clamp(1.5rem, 4vw, 3.5rem);
  width: min(1280px, 100% - 2.5rem); margin-inline: auto;
  padding-block: clamp(2rem, 5vw, 3.5rem);
  color: #fff;
}
/* Den tonade rutan. 74 % täckning ger vit text 7,3:1 även mot videons
   ljusaste tänkbara bildruta – med marginal över kravet 4,5:1.
   Gå inte ljusare än så utan att räkna om kontrasten. */
.hero-text {
  max-inline-size: 34ch;
  background: rgb(18 26 32 / .54);
  border-radius: var(--vinglig);
  padding: clamp(1.4rem, 3.5vw, 2.25rem) clamp(1.4rem, 3.5vw, 2.5rem);
}
@supports (backdrop-filter: blur(3px)) {
  .hero-text { backdrop-filter: blur(3px); }
}
@media (min-width: 64rem) { .hero-text { max-inline-size: 50ch; } }


.hero h1 {
  color: #fff; font-size: clamp(2.25rem, 5.4vw, 4rem);
  line-height: 1.12; margin-block-end: .6em;
}
.hero h1 em { font-style: normal; color: #FFD34D; }   /* solgult mot mörkt: 11,4:1 */
.hero-under {
  font-size: clamp(1.15rem, 2.2vw, 1.4rem); line-height: 1.6;
  max-inline-size: 48ch; margin-block-end: 2.25rem; color: #fff;
}
.hero-knappar { display: flex; flex-wrap: wrap; align-items: center; gap: 1.5rem; }
.hero .lank { color: #fff; text-decoration-color: #FFD34D; }

/* Vågkanten längst ner i heron: pappersarket klipps in över videon. */
.hero-kant {
  position: absolute; inset-block-end: -1px; inset-inline: 0; z-index: 3;
  inline-size: 100%; block-size: clamp(28px, 4vw, 52px);
}
/* Vågen tar färgen från sektionen som kommer efter heron. Standard är
   papper; öppet hus-bandet sätter --hero-nasta till gult. */
.hero-kant path { fill: var(--hero-nasta, var(--papper)); }


/* Samma sak för klottret i färgblocken: under 48rem tar texten hela bredden. */
@media (max-width: 47.999rem) { .block > .klotter { display: none; } }


/* ============ 7. FÄRGBLOCK OCH SEKTIONER ============ */

.block { position: relative; padding-block: var(--luft-stor); }
.block > .omslag { position: relative; z-index: 1; }

/* Ett tunnare block – till sifferklistermärkena och öppet hus. */
.block-tunn { padding-block: var(--luft); }

/* Den vågiga kanten ligger ovanpå sektionens överkant. Utan kompensation
   ser luften uppe alltid mindre ut än luften nere. Vågens höjd läggs därför
   till toppadding, så att avståndet blir lika på båda sidor. */
.klippt { padding-block-start: calc(var(--luft-stor) + clamp(28px, 4vw, 52px)); }
.klippt.block-tunn { padding-block-start: calc(var(--luft) + clamp(28px, 4vw, 52px)); }

.f-bla    { background: var(--bla-ljus);    --kulor: var(--bla);    --kulor-ljus: #E6F5FE; }
.f-gul    { background: var(--gul-ljus);    --kulor: var(--gul);    --kulor-ljus: #FFF7DA; }
.f-gron   { background: var(--gron-ljus);   --kulor: var(--gron);   --kulor-ljus: #EDF9E6; }
.f-rod    { background: var(--rod-ljus);    --kulor: var(--rod);    --kulor-ljus: #FFEDE7; }
.f-lila   { background: var(--lila-ljus);   --kulor: var(--lila);   --kulor-ljus: #F4EDFD; }
.f-rosa   { background: var(--rosa-ljus);   --kulor: var(--rosa);   --kulor-ljus: #FFF0F7; }
.f-orange { background: var(--orange-ljus); --kulor: var(--orange); --kulor-ljus: #FFF2E3; }
.f-papper { background: var(--papper);      --kulor: var(--bla);    --kulor-ljus: var(--bla-ljus); }

/* Bucklig överkant – som ett pappersark klippt med sax. */
.klippt { position: relative; }
.klippt > .kant {
  position: absolute; inset-block-start: -1px; inset-inline: 0;
  inline-size: 100%; block-size: clamp(28px, 4vw, 52px);
  display: block;
}
.klippt > .kant path { fill: var(--papper); }
.klippt-fran-bla .kant path    { fill: var(--bla-ljus); }
.klippt-fran-gul .kant path    { fill: var(--gul-ljus); }
.klippt-fran-gron .kant path   { fill: var(--gron-ljus); }
.klippt-fran-rod .kant path    { fill: var(--rod-ljus); }
.klippt-fran-lila .kant path   { fill: var(--lila-ljus); }
.klippt-fran-rosa .kant path   { fill: var(--rosa-ljus); }
.klippt-fran-orange .kant path { fill: var(--orange-ljus); }

.rubrikrad { margin-block-end: var(--luft); }
.rubrikrad h2 { margin-block-end: .25em; }
/* Ingressen under rubriken får löpa hela vägen ut, som rubriken. */
.rubrikrad p { max-inline-size: none; }
.overrubrik {
  display: inline-block;
  font-family: var(--font-rubrik); font-weight: 600;
  font-size: 1rem; letter-spacing: .1em; text-transform: uppercase;
  padding: .3rem .9rem; margin-block-end: .8rem;
  border: 3px solid var(--ink); border-radius: 999px;
  background: var(--papper);
  rotate: -1.5deg;
}

.tva { display: grid; gap: var(--luft); align-items: center; }
@media (min-width: 64rem) {
  .tva { grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); }
  .tva-speglad > :first-child { order: 2; }
}

.markesrad { display: flex; flex-wrap: wrap; gap: clamp(1rem, 3vw, 2rem); justify-content: center; }

/* Öppet hus-bandet – ligger högt upp och ska inte gå att missa.
   Datumet sitter i en egen vinglig ruta med kritram. */
/* Smalare än omslaget, så att stjärnorna i kanterna aldrig krockar med texten. */
.oppethus { text-align: center; max-inline-size: 46rem; margin-inline: auto; }
.oppethus h2 { margin-block-end: .6rem; }
.oppethus-datum {
  display: inline-block;
  border: 4px solid var(--ink); border-radius: var(--vinglig);
  background: var(--papper);
  padding: .8rem clamp(1.25rem, 4vw, 2.25rem);
  margin-block: .5rem 1rem;
  font-family: var(--font-rubrik); font-weight: 600;
  font-size: clamp(1.35rem, 3.4vw, 2.1rem); line-height: 1.15;
  font-variant-numeric: tabular-nums lining-nums;
  rotate: -1.2deg;
}
.oppethus p { margin-inline: auto; }


/* ============ 8. KORT, FOTON, PRATBUBBLOR, LISTOR ============ */

/* Löfteskorten – fyra vingliga lappar i olika färger. */
.loften { display: grid; gap: clamp(1.25rem, 3vw, 2rem); margin: 0; padding: 0; list-style: none; }
@media (min-width: 40rem)  { .loften { grid-template-columns: 1fr 1fr; } }
@media (min-width: 68rem)  { .loften { grid-template-columns: repeat(4, 1fr); } }

.lofte {
  position: relative;
  border: 4px solid var(--ink); border-radius: var(--vinglig);
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
  display: flex; flex-direction: column; gap: .75rem;
}
.lofte:nth-child(1) { background: var(--gul-ljus);  rotate: -1.2deg; }
.lofte:nth-child(2) { background: var(--gron-ljus); rotate: 1deg; border-radius: var(--vinglig-2); }
.lofte:nth-child(3) { background: var(--rosa-ljus); rotate: -.8deg; }
.lofte:nth-child(4) { background: var(--bla-ljus);  rotate: 1.4deg; border-radius: var(--vinglig-2); }
.lofte h3 { margin: 0; }
.lofte p { margin: 0; font-size: 1.05rem; }
.lofte .bild {
  inline-size: 100%; aspect-ratio: 3/2; object-fit: cover;
  border: 3px solid var(--ink); border-radius: 10px;
}

/* Pratbubbla till föräldracitatet. */
.bubbla {
  position: relative; margin: 0;
  border: 4px solid var(--ink); border-radius: 34px;
  background: var(--papper);
  padding: clamp(1.5rem, 4vw, 2.5rem);
  max-inline-size: 46rem; margin-inline: auto;
}
.bubbla::after {
  content: ''; position: absolute; inset-block-end: -26px; inset-inline-start: 12%;
  inline-size: 0; block-size: 0;
  border-inline: 20px solid transparent;
  border-block-start: 26px solid var(--ink);
}
.bubbla::before {
  content: ''; position: absolute; inset-block-end: -19px; inset-inline-start: calc(12% + 5px);
  inline-size: 0; block-size: 0; z-index: 1;
  border-inline: 15px solid transparent;
  border-block-start: 20px solid var(--papper);
}
.bubbla p {
  font-family: var(--font-rubrik); font-weight: 500;
  font-size: clamp(1.35rem, 3vw, 2rem); line-height: 1.3;
}
.bubbla cite { display: block; font-style: normal; font-weight: 800; font-size: 1.05rem; color: var(--ink-mjuk); }

/* Dagsschemat – färgade klockslag i rad. */
.schema { display: grid; gap: .85rem; margin: 0; padding: 0; list-style: none; }
.schema li {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1rem; align-items: center;
  background: var(--papper); border: 4px solid var(--ink); border-radius: 999px;
  padding: .5rem 1.4rem .5rem .5rem;
}
.schema .klocka {
  display: inline-flex; align-items: center; justify-content: center;
  min-inline-size: 92px; block-size: 52px; padding-inline: .75rem;
  border-radius: 999px; background: var(--kulor-ljus); border: 3px solid var(--ink);
  font-family: var(--font-rubrik); font-weight: 600; font-size: 1.1rem;
  font-variant-numeric: tabular-nums lining-nums; white-space: nowrap;
}
.schema li:nth-child(5n+1) .klocka { background: var(--gul-ljus); }
.schema li:nth-child(5n+2) .klocka { background: var(--gron-ljus); }
.schema li:nth-child(5n+3) .klocka { background: var(--rosa-ljus); }
.schema li:nth-child(5n+4) .klocka { background: var(--bla-ljus); }
.schema li:nth-child(5n+5) .klocka { background: var(--lila-ljus); }

/* Inskolningen – numrerade dagar. */
.dagar { display: grid; gap: 1rem; margin: 0; padding: 0; list-style: none; }
.dagar li {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1.1rem; align-items: start;
  background: var(--papper); border: 4px solid var(--ink); border-radius: var(--vinglig);
  padding: 1.1rem 1.4rem;
}
.dagar li:nth-child(even) { border-radius: var(--vinglig-2); }
.dagnr {
  display: inline-flex; align-items: center; justify-content: center;
  inline-size: 54px; block-size: 54px; border-radius: 50%;
  border: 3px solid var(--ink); background: var(--kulor-ljus);
  font-family: var(--font-rubrik); font-weight: 600; font-size: 1.4rem;
}
.dagar p { margin: 0; }

/* Faktalistan */
.fakta { display: grid; gap: 0; margin: 0; }
.fakta div {
  display: grid; gap: .2rem 1.5rem; padding-block: 1rem;
  border-block-end: 3px dashed rgb(42 33 24 / .3);
}
@media (min-width: 44rem) { .fakta div { grid-template-columns: minmax(0, 15rem) 1fr; } }
.fakta dt { font-family: var(--font-rubrik); font-weight: 600; font-size: 1.2rem; }
.fakta dd { margin: 0; font-variant-numeric: tabular-nums lining-nums; }

/* Filmen */
.film video { inline-size: 100%; border-radius: 10px; background: #000; }


/* ============ 9. SIDFOT ============ */

/* Sidfoten har ingen svart överkant: vågen ovanför målas i gult, samma färg
   som boka-blocket, så att de går ihop. Toppadding rymmer vågens höjd –
   annars ser luften uppe mindre ut än den nere. */
.sidfot {
  background: var(--bla-ljus);
  padding-block: calc(var(--luft-stor) + clamp(28px, 4vw, 52px)) var(--luft);
}
.sidfot-natverk { display: grid; gap: var(--luft); }
@media (min-width: 48rem) { .sidfot-natverk { grid-template-columns: 1.3fr 1fr 1fr; } }
.sidfot h3 { font-size: 1.3rem; }
.sidfot ul { margin: 0; padding: 0; list-style: none; }
.sidfot li { margin-block-end: .4rem; }
address { font-style: normal; line-height: 1.9; }
.sidfot-slut {
  margin-block-start: var(--luft); padding-block-start: 1.5rem;
  border-block-start: 3px dashed rgb(42 33 24 / .3);
  font-size: .95rem; color: var(--ink-mjuk);
}
/* Bildlöftet till vänster, copyright till höger på samma rad. */
.sidfot-rad {
  display: flex; flex-wrap: wrap; align-items: baseline;
  justify-content: space-between; gap: .5rem 2rem;
}
.sidfot-rad p { margin: 0; }


/* ============ 10. DEMORUTAN FÖR INLOGGNINGEN (endast Fas 1) ============ */

.logga-in-ruta {
  border: 5px solid var(--ink); border-radius: 28px;
  padding: clamp(1.5rem, 4vw, 2.25rem);
  max-inline-size: 27rem; inline-size: calc(100% - 2.5rem);
  background: var(--papper); color: var(--ink); text-align: center;
}
.logga-in-ruta::backdrop { background: rgb(42 33 24 / .55); }
.logga-in-ruta h2 { font-size: 1.6rem; }
.logga-in-ruta p { color: var(--ink-mjuk); }


/* ============ 11. RÖRELSE OCH FOKUS ============ */

/* Slutläget står alltid i grund-CSS. Animationen är ett tillägg som får
   utebli – sidan ska vara komplett och korrekt utan den. */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .block > .omslag, .lofte, .foto, .bubbla {
      animation: skutt linear both;
      animation-timeline: view();
      animation-range: entry 8% cover 30%;
    }
    @keyframes skutt { from { opacity: 0; translate: 0 14px; } }
  }
  /* Solen snurrar långsamt. Enda animationen som går av sig själv. */
  .hero .sol svg { animation: snurr 40s linear infinite; transform-origin: 50% 50%; }
  @keyframes snurr { to { rotate: 360deg; } }
}

:focus-visible { outline: 4px solid var(--ink); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero-video { display: none; }
  .knapp, a.lank::after { transition: none; }
}