/* Ti minutter. Et haandskrevet stilark, ingen framework.
   Mobil foerst. Al tekst har kontrast over 7:1 mod sin baggrund.

   Farverne er taget ud af akvarellerne i content/billeder/, saa siden og
   tegningerne hoerer sammen: himmel, sol, blad og tegltag. De bruges kun som
   flader bag tekst og aldrig som det, der baerer en betydning. Printer en
   familie i sort-hvid, staar alt stadig skarpt. */

/* Andika er tegnet til begyndende laesere og skelner tydeligt mellem a, g, l,
   I og 1. Filerne ligger i assets/fonts/ og skal hentes fra SIL en gang, se
   README. Mangler de, falder siden tilbage paa systemskriften.
//
   Filerne her er BESKAARET til de tegn, siden bruger: dansk og engelsk,
   tal og almindelig tegnsaetning. 595 kB blev til 49 kB. Den fulde Andika
   daekker hundredvis af sprog, og de to filer stod for to tredjedele af al
   trafik paa serveren: 18 af 28 MB paa en maaned. Se README om, hvordan de
   beskaeres igen, hvis der kommer nye tegn paa siden. */
@font-face {
  font-family: "Andika";
  src: url("fonts/Andika-Regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Andika";
  src: url("fonts/Andika-Bold.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

:root {
  color-scheme: light;
  --bg: #fbf9f4;
  --kort: #fffdf8;
  --tekst: #1b1a17;
  --daempet: #4a463f;
  --accent: #1a5c46;
  --accent-moerk: #144836;
  --accent-lys: #e4efe9;
  --kant: #e3dccd;

  /* Akvarelfarver fra tegningerne */
  --himmel: #d6e6ef;
  --sol: #f6e3b4;
  --sol-tekst: #6b4a10;
  --blad: #d7e5cf;
  --tegl: #f0cfc2;
  --nat: #dcd9ee;
  /* Den lyse groenblaa fra vandet i akvarellerne. Menupunktet Oevelser. */
  --hav: #d4ebe6;

  /* Papirfarven i akvarellerne. Maalt paa hjoerner og kanter af otte
     ordbilleder, som alle ligger mellem #f7f3e9 og #faf6e9. Kort MED et
     billede faar den her farve i stedet for den hvide, saa tegningen ikke
     ligger som et lysebrunt firkant paa et hvidt kort. */
  --billedbund: #f9f6e9;

  /* Skygger. Tre trin: hvilende kort, loeftet kort, noget der svaever. */
  --skygge-1: 0 2px 4px rgba(27, 26, 23, 0.05), 0 6px 14px rgba(27, 26, 23, 0.05);
  --skygge-2: 0 4px 8px rgba(27, 26, 23, 0.06), 0 12px 26px rgba(27, 26, 23, 0.09);
  --skygge-3: 0 8px 16px rgba(27, 26, 23, 0.08), 0 20px 44px rgba(27, 26, 23, 0.12);

  --rundt: 18px;
}

* { box-sizing: border-box; }
/* hidden skal altid skjule, ogsaa naar en klasse som .knap saetter display.
   Uden den blev knapper, der foerst vises af JavaScript, vist alligevel. */
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }

/* En gennemgaaende gradient paa alle sider: himmel i toppen, bladgroen i
   bunden, hvor den moeder sidefoden, og et langsomt skifte imellem dem.
   Den daekker hele sidens hoejde, uanset hvor lang siden er.

   Ingen af stoppene er den rene cremefarve, og der er ingen strækning, hvor
   to stop har samme farve. Havde midten staaet paa --bg, ville en lang side
   som forsiden faa flere tusinde pixels helt uden farve i midten, og saa
   ligner det en fejl i stedet for et forloeb. Farverne er lyse nok til, at
   teksten staar med samme kontrast hele vejen ned.

   Baggrunden staar paa body og ikke paa html, for saa foelger den sidens
   hoejde og ikke skaermens. min-height sikrer, at en kort side som 404
   ogsaa faar hele forloebet at vise. */
html { background-color: var(--bg); }

body {
  margin: 0;
  min-height: 100vh;
  background-color: var(--bg);
  background-image: linear-gradient(
    180deg,
    var(--himmel) 0%,
    #e6eff2 20%,
    #f3f1e6 42%,
    #f2f2e1 58%,
    #e7eddf 78%,
    var(--blad) 100%
  );
  background-repeat: no-repeat;
  color: var(--tekst);
  font-family: Andika, system-ui, sans-serif;
  font-size: 18px;
  line-height: 1.6;
}

a { color: var(--accent); }
img { max-width: 100%; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }

/* Springer forbi navigationen for dem, der bruger tastatur eller skaermlaeser. */
.spring {
  position: absolute; left: -999px; top: 0;
  background: var(--accent); color: #fff; padding: 0.7rem 1.1rem;
  border-radius: 0 0 var(--rundt) 0; z-index: 50; text-decoration: none;
}
.spring:focus { left: 0; }

/* ----------------------------------------------------------- topbjaelke */

.topbjaelke {
  position: sticky; top: 0; z-index: 20;
  background: rgba(251, 249, 244, 0.94);
  backdrop-filter: blur(6px);
  border-bottom: 2px solid var(--kant);
  box-shadow: var(--skygge-1);
}
.bjaelkeindre {
  /* Bredere end indholdet nedenunder. Bjaelken skal rumme navn, fem
     menupunkter og sprogvalget paa en linje, mens brodteksten stadig holdes
     smal nok til at kunne laeses. */
  max-width: 76rem; margin: 0 auto; padding: 0.55rem 1rem;
  display: flex; align-items: center; gap: 0.8rem; flex-wrap: wrap;
}
/* Menuen og flagene staar paa samme linje. Bliver der for traengt, ruller
   linjen vandret i stedet for at braekke, saa flagene ikke ender paa en
   linje for sig selv. */
.bjaelkehoejre {
  display: flex; align-items: center; gap: 0.5rem;
  min-width: 0; margin-left: auto; overflow-x: auto; scrollbar-width: none;
  padding: 0.15rem 0.1rem;
}
.bjaelkehoejre::-webkit-scrollbar { display: none; }

/* Paa en telefon er der ikke plads til begge dele paa en linje. Saa ryger
   flagene op ved siden af navnet, hvor de er lette at faa oeje paa, og
   menuen faar sin egen linje under. display: contents oploeser gruppen, saa
   de to kan placeres hver for sig uden at aendre raekkefoelgen i koden. */
@media (max-width: 860px) {
  .bjaelkeindre { gap: 0.45rem; }
  .bjaelkehoejre { display: contents; }
  .navnetraek { margin-right: 0; }
  .sprogvalg { order: 1; margin-left: auto; }
  nav.hoved { order: 2; flex: 1 1 100%; }
}
.navnetraek {
  display: flex; align-items: center; gap: 0.6rem;
  font-size: 1.3rem; font-weight: 700; color: var(--tekst); text-decoration: none;
  margin-right: auto;
}
.navnetraek .maerke {
  width: 2.3rem; height: 2.3rem; border-radius: 50%; flex: 0 0 auto;
  background: var(--sol); display: grid; place-items: center;
  box-shadow: var(--skygge-1);
  transition: transform 0.25s ease;
}
.navnetraek:hover .maerke { transform: rotate(-12deg) scale(1.06); }
.navnetraek .maerke svg { width: 1.5rem; height: 1.5rem; }

/* Menuen er tegnet til at kunne bruges af et barn, der endnu ikke laeser:
   hvert punkt har et ikon, sin egen farve og et trykfelt paa mindst 44 px.
   Paa en telefon bliver raekken rullet vandret i stedet for at brydes, saa
   punkterne staar i samme raekkefoelge hver gang og kan huskes paa pladsen. */
nav.hoved {
  display: flex; gap: 0.4rem;
  overflow-x: auto; scrollbar-width: none;
  padding: 0.15rem 0.1rem;
  margin: 0 -0.2rem;
}
nav.hoved::-webkit-scrollbar { display: none; }

.menupunkt {
  display: inline-flex; align-items: center; gap: 0.45rem; flex: 0 0 auto;
  text-decoration: none; color: var(--tekst); font-weight: 700; font-size: 1rem;
  background: var(--kort); border: 2px solid var(--kant);
  border-radius: 999px; padding: 0.35rem 0.85rem 0.35rem 0.4rem;
  min-height: 2.75rem;
  box-shadow: var(--skygge-1);
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.menupunkt:hover, .menupunkt:focus-visible {
  transform: translateY(-2px); box-shadow: var(--skygge-2); border-color: var(--accent);
}
.menupunkt:active { transform: translateY(0) scale(0.97); }
@media (max-width: 1100px) and (min-width: 861px) {
  .menupunkt { font-size: 0.92rem; padding-right: 0.65rem; gap: 0.35rem; }
  .menuikon { width: 1.8rem; height: 1.8rem; }
  .menuikon svg { width: 1.1rem; height: 1.1rem; }
}

.menuikon {
  width: 2rem; height: 2rem; border-radius: 50%; flex: 0 0 auto;
  display: grid; place-items: center;
}
.menuikon svg {
  width: 1.25rem; height: 1.25rem;
  fill: none; stroke: #3a3630; stroke-width: 1.9;
  stroke-linecap: round; stroke-linejoin: round;
}
.menupunkt.himmel .menuikon { background: var(--himmel); }
.menupunkt.sol .menuikon { background: var(--sol); }
.menupunkt.blad .menuikon { background: var(--blad); }
.menupunkt.tegl .menuikon { background: var(--tegl); }
.menupunkt.nat .menuikon { background: var(--nat); }
.menupunkt.hav .menuikon { background: var(--hav); }

/* Den side, man staar paa, er fyldt ud. Ikonet beholder sin egen farve, saa
   punktet kan kendes paa det samme billede uanset om det er valgt. */
.menupunkt[aria-current="page"] {
  background: var(--accent); color: #fff; border-color: var(--accent);
  box-shadow: var(--skygge-2);
}

/* Sprogvalg. De to sprog ligger i EN ramme med en prik imellem, saa det
   laeses som et valg og ikke som to knapper. Det valgte staar groent og
   fuldt synligt, det andet er daempet. Flaget goer det muligt at finde
   sit sprog uden at laese. */
.sprogvalg {
  display: inline-flex; align-items: center; gap: 0.1rem;
  border: 2px solid var(--kant); border-radius: 999px;
  background: var(--kort); padding: 0.15rem 0.45rem;
  min-height: 2.75rem; box-shadow: var(--skygge-1);
  transition: border-color 0.15s ease;
}
.sprogvalg:hover { border-color: var(--accent); }
.flag {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.4rem 0.5rem; border-radius: 999px;
  text-decoration: none; color: var(--daempet);
  font-weight: 700; font-size: 0.95rem; letter-spacing: 0.08em;
  opacity: 0.55;
  transition: opacity 0.15s ease, color 0.15s ease, background-color 0.15s ease;
}
.flag svg { width: 1.45rem; height: 1.1rem; display: block; border-radius: 2px; flex: 0 0 auto; }
.flag:hover, .flag:focus-visible { opacity: 1; background: var(--accent-lys); color: var(--accent); }
.flag.valgt { opacity: 1; color: var(--accent); }
.sprogskille { color: var(--kant); font-weight: 700; }

/* Under 420 px er der ikke plads til bogstaverne ved siden af flaget. */
@media (max-width: 420px) { .flagkode { display: none; } }

/* Den danske formulering under et engelsk spoergsmaal, og det danske trinnavn
   i parentes. Daempet, saa engelsk er det, oejet moeder foerst. */
.paa-dansk { display: block; font-size: 0.92rem; color: var(--daempet); margin-top: 0.1rem; }
.paa-dansk-inline { font-weight: 400; font-size: 0.85em; color: var(--daempet); }
.dansknote { color: var(--daempet); font-size: 1rem; margin: -0.8rem 0 1.2rem; }

/* ----------------------------------------------------------- rammer */

.side { max-width: 38rem; margin: 0 auto; padding: 0 1rem 3rem; }
.side.bred { max-width: none; padding: 0 0 2rem; }
.midt { max-width: 62rem; margin: 0 auto; padding: 0 1rem; }

/* ----------------------------------------------------------- knapper */

.knap {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font: inherit; font-weight: 700; text-decoration: none;
  border-radius: 999px; padding: 0.75rem 1.4rem;
  border: 2px solid var(--accent); cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}
.knap.fyldt { background: var(--accent); color: #fff; box-shadow: var(--skygge-2); }
.knap.fyldt:hover, .knap.fyldt:focus-visible {
  background: var(--accent-moerk); transform: translateY(-2px); box-shadow: var(--skygge-3);
}
.knap.tom { background: var(--kort); color: var(--accent); box-shadow: var(--skygge-1); }
.knap.tom:hover, .knap.tom:focus-visible {
  background: var(--accent-lys); transform: translateY(-2px); box-shadow: var(--skygge-2);
}
.knap:active { transform: translateY(0) scale(0.98); }
.knap svg { width: 1.2rem; height: 1.2rem; fill: currentColor; }

/* ----------------------------------------------------------- forside */

/* Heroen har ikke sit eget skaer mere. Det ligger paa body og gaelder alle
   sider, saa forsiden og en trinside ser ens ud i toppen. */
.hero { position: relative; overflow: hidden; padding: 2.5rem 0 2rem; }
.hero .midt { position: relative; display: grid; gap: 2rem; align-items: center; }
@media (min-width: 56rem) { .hero .midt { grid-template-columns: 1fr 1fr; gap: 3rem; } }

.hero h1 { font-size: clamp(2.6rem, 6vw, 3.6rem); line-height: 1.1; margin: 0 0 0.4rem; }
.hero .under { font-size: 1.35rem; color: var(--daempet); margin: 0 0 1.2rem; }
.rolle {
  background: var(--accent-lys); border-radius: var(--rundt);
  border-left: 6px solid var(--accent);
  padding: 1rem 1.1rem; margin: 0 0 1.4rem;
  box-shadow: var(--skygge-1);
}
.knapper { display: flex; flex-wrap: wrap; gap: 0.7rem; }

.heroramme {
  background: var(--kort); border: 2px solid var(--kant); border-radius: 24px;
  padding: 0.7rem; margin: 0;
  box-shadow: var(--skygge-3);
  transform: rotate(-1deg);
  transition: transform 0.3s ease;
}
.heroramme:hover { transform: rotate(0deg) scale(1.01); }
.heroramme img { display: block; border-radius: 14px; width: 100%; height: auto; }
.heroramme figcaption { font-size: 0.95rem; color: var(--daempet); text-align: center; padding: 0.5rem 0.3rem 0.2rem; }

.baand { padding: 2.5rem 0 3rem; }
/* Baandene har ikke deres egen baggrund mere. Forloebet ligger paa body og
   gaelder hele siden, og to groenne baand midt i ville bryde det. */
.baand h2 { font-size: 1.9rem; margin: 0 0 0.3rem; text-align: center; }
.afsnitstekst { text-align: center; color: var(--daempet); margin: 0 auto 2rem; max-width: 34rem; text-wrap: balance; }

.skridtliste { display: grid; gap: 1rem; }
@media (min-width: 46rem) { .skridtliste { grid-template-columns: repeat(3, 1fr); } }
.skridt {
  background: var(--kort); border: 2px solid var(--kant); border-radius: var(--rundt);
  padding: 1.3rem 1.2rem; text-align: center; box-shadow: var(--skygge-1);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.skridt:hover { transform: translateY(-3px); box-shadow: var(--skygge-2); }
.skridt .tal {
  width: 3rem; height: 3rem; border-radius: 50%; margin: 0 auto 0.7rem;
  display: grid; place-items: center; font-size: 1.5rem; font-weight: 700;
  background: var(--sol); color: var(--sol-tekst); box-shadow: var(--skygge-1);
}
.skridt h3 { margin: 0 0 0.3rem; font-size: 1.25rem; }
.skridt p { margin: 0; color: var(--daempet); font-size: 1rem; }

.trinliste { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.9rem; }
@media (min-width: 44rem) { .trinliste { grid-template-columns: 1fr 1fr; } }

.trinknap {
  display: flex; gap: 1rem; align-items: center; height: 100%;
  /* Papirfarven fra akvarellerne, saa tegningen ikke ligger som et
     lysebrunt firkant paa et hvidt kort. Samme som ordkortene. */
  background: var(--billedbund); border: 2px solid var(--kant); border-radius: var(--rundt);
  padding: 0.8rem 1rem 0.8rem 0.8rem; text-decoration: none; color: var(--tekst);
  box-shadow: var(--skygge-1);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.trinknap:hover, .trinknap:focus-visible {
  border-color: var(--accent); transform: translateY(-4px); box-shadow: var(--skygge-3);
}
.trinknap:active { transform: translateY(-1px); }
.trinbillede {
  flex: 0 0 auto; width: 5.2rem; height: 5.2rem; border-radius: 14px;
  object-fit: cover; background: var(--billedbund);
  transition: transform 0.25s ease;
}
.trinknap:hover .trinbillede { transform: scale(1.05) rotate(-2deg); }
/* Uden min-width: 0 naegter tekstspalten at blive smallere end sit laengste
   ord, og kortet skubber siden vandret ud paa en telefon. */
.trinknap > span { min-width: 0; }
.trinknap .nr { display: block; font-size: 0.95rem; font-weight: 700; color: var(--accent); letter-spacing: 0.04em; }
.trinknap .navn { display: block; font-size: 1.35rem; font-weight: 700; line-height: 1.2; }
.trinknap .om { display: block; font-size: 0.95rem; color: var(--daempet); margin-top: 0.25rem; }

.hjaelp {
  margin: 1.4rem auto 0; max-width: 40rem; text-align: center;
  background: var(--accent-lys); border-radius: var(--rundt);
  padding: 1rem 1.2rem; color: var(--daempet); box-shadow: var(--skygge-1);
}

.videreliste { display: grid; gap: 1rem; }
@media (min-width: 44rem) { .videreliste { grid-template-columns: repeat(3, 1fr); } }
.viderekort {
  background: var(--kort); border: 2px solid var(--kant); border-radius: var(--rundt);
  padding: 1.3rem 1.2rem; text-decoration: none; color: var(--tekst); display: block;
  box-shadow: var(--skygge-1);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.viderekort:hover, .viderekort:focus-visible {
  border-color: var(--accent); transform: translateY(-4px); box-shadow: var(--skygge-2);
}
.viderekort .ikon {
  width: 3rem; height: 3rem; border-radius: 14px; display: grid; place-items: center;
  margin-bottom: 0.7rem; box-shadow: var(--skygge-1);
  transition: transform 0.25s ease;
}
.viderekort:hover .ikon { transform: rotate(-6deg) scale(1.05); }
.viderekort .ikon svg { width: 1.7rem; height: 1.7rem; fill: none; stroke: #3a3630; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.viderekort h3 { margin: 0 0 0.3rem; font-size: 1.2rem; color: var(--accent); }
.viderekort p { margin: 0; font-size: 1rem; color: var(--daempet); }

/* Paa en smal telefon skal tegningen give plads til teksten. */
@media (max-width: 560px) {
  .trinknap { gap: 0.7rem; padding: 0.7rem 0.8rem 0.7rem 0.7rem; }
  .trinbillede { width: 4rem; height: 4rem; }
}

/* ----------------------------------------------------------- sidetop */

.top { padding: 1.75rem 0 1.25rem; margin-bottom: 1.5rem; border-bottom: 2px solid var(--kant); }
.tilbage {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-size: 1.05rem; font-weight: 700; text-decoration: none; color: var(--accent);
  background: var(--kort); border: 2px solid var(--accent); border-radius: 999px;
  padding: 0.5rem 1.1rem 0.5rem 0.9rem; min-height: 2.75rem;
  box-shadow: var(--skygge-1);
  transition: background-color 0.15s ease, color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.tilbage svg { width: 1.25rem; height: 1.25rem; fill: none; stroke: currentColor; stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; }
.tilbage:hover, .tilbage:focus-visible {
  background: var(--accent); color: #fff; transform: translateY(-2px); box-shadow: var(--skygge-2);
}
.top h1 { font-size: 2.4rem; margin: 0.6rem 0 0; }
.trinnavn { font-size: 1.5rem; font-weight: 700; margin: 0; color: var(--accent); }
.beskriv { color: var(--daempet); margin: 0.4rem 0 0; }

/* Genvej mellem trinnene. Tallene er store nok til en barnefinger, og det
   trin, man staar paa, er fyldt ud, saa man kan se hvor man er uden at laese. */
.trinvaelger { margin-top: 1.1rem; }
.vaelgertekst { display: block; font-size: 0.95rem; color: var(--daempet); margin-bottom: 0.4rem; }
/* Knapperne viser baade tallet og trinnets navn. Et gitter og ikke en raekke,
   saa de staar i lige kolonner i stedet for at knaekke skaevt, naar navnene er
   forskelligt lange. Paa en telefon bliver det to kolonner. */
.trintalraekke {
  display: grid; gap: 0.4rem;
  grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr));
}
.trintal {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.3rem 0.7rem 0.3rem 0.3rem; border-radius: 999px;
  font-size: 0.9rem; font-weight: 700; text-decoration: none;
  color: var(--accent); background: var(--kort);
  border: 2px solid var(--kant); box-shadow: var(--skygge-1);
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}
.trintal .tal {
  flex: 0 0 auto; width: 2.1rem; height: 2.1rem; border-radius: 50%;
  display: grid; place-items: center; font-size: 1.05rem;
  background: var(--accent-lys); color: var(--accent);
}
.trintal .trinord { line-height: 1.25; }
a.trintal:hover, a.trintal:focus-visible {
  border-color: var(--accent); background: var(--accent-lys);
  transform: translateY(-3px); box-shadow: var(--skygge-2);
}
a.trintal:active { transform: translateY(0) scale(0.95); }
.trintal.her {
  background: var(--sol); color: var(--sol-tekst); border-color: var(--sol-tekst);
  box-shadow: var(--skygge-2);
}
.trintal.her .tal { background: var(--kort); color: var(--sol-tekst); }

/* ----------------------------------------------------------- saet */

.saet { margin-top: 2.25rem; }
.saet > h2 { font-size: 1.5rem; margin: 0 0 0.5rem; }
.saet h3 { font-size: 1.1rem; color: var(--daempet); margin: 1.75rem 0 0.6rem; }

details.saet {
  background: var(--kort);
  border: 2px solid var(--kant);
  border-radius: var(--rundt);
  padding: 0 0.7rem 0.4rem;
  box-shadow: var(--skygge-1);
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}
details.saet:hover { box-shadow: var(--skygge-2); }
details.saet[open] { border-color: var(--accent); }
details.saet summary {
  font-size: 1.4rem; font-weight: 700; cursor: pointer;
  padding: 1rem 0; color: var(--accent);
}
details.saet[open] summary { border-bottom: 2px solid var(--kant); }

/* Et par ord om saettets indhold ved siden af nummeret. Daempet og i normal
   vaegt, saa nummeret stadig er det, oejet finder foerst. */
.saetkort {
  font-weight: 400; font-size: 1rem; color: var(--daempet);
  display: block; margin-top: 0.1rem;
}
@media (min-width: 30rem) {
  .saetkort { display: inline; margin-top: 0; }
  .saetkort::before { content: "\00a0\00a0"; }
}
details.saet[open] > *:not(summary) { animation: fold 0.25s ease both; }
details.saet .ordkort, details.saet .tekstkort { background: var(--bg); }
details.saet .ordkort.med-billede { background: var(--billedbund); }

.fokus {
  background: var(--accent-lys); border-radius: var(--rundt);
  padding: 1rem 1.1rem; text-align: center;
  font-size: 1.3rem; font-weight: 700; margin: 0;
  box-shadow: var(--skygge-1);
}

.bogstaver {
  background: var(--accent-lys); border-radius: var(--rundt);
  padding: 1.25rem 1rem; text-align: center;
  font-size: 3rem; line-height: 1.2; letter-spacing: 0.12em;
  font-weight: 700; margin: 0;
  box-shadow: var(--skygge-1);
}

.ordgitter { display: grid; grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr)); gap: 0.6rem; }
.ordkort {
  background: var(--kort);
  border: 2px solid var(--kant);
  border-radius: var(--rundt);
  padding: 0.7rem 0.5rem 0.7rem 0.9rem;
  display: flex; align-items: center; justify-content: space-between;
  gap: 0.4rem; min-height: 4.4rem;
  box-shadow: var(--skygge-1);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.ordkort:hover { transform: translateY(-2px); box-shadow: var(--skygge-2); }
.ord { font-size: 2rem; font-weight: 700; white-space: nowrap; }

/* Et langt ord faar to spalter i stedet for mindre skrift. */
.ordkort.bred { grid-column: span 2; }

/* Smaa kort, se ordkort: lille i trin.yml. Brugt paa trin 6, hvor ordene er
   dem, der snyder. De skal kunne hoeres og genkendes, men de er ikke det,
   siden handler om paa det trin, og de fylder derfor mindre. Ingen tegninger:
   ordet skal laeres som ord og ikke gaettes paa et billede.
   PRD afsnit 6 kraever 32 px paa ordene paa trinnene med enkeltord; her er
   teksten det vigtige, og kortene er en hjaelp ved siden af. */
.ordgitter.lille { grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr)); gap: 0.45rem; }
.ordgitter.lille .ordkort {
  padding: 0.35rem 0.35rem 0.35rem 0.6rem;
  min-height: 0; gap: 0.3rem; border-radius: 12px;
}
.ordgitter.lille .ord { font-size: 1.25rem; }
.ordgitter.lille .lyd { width: 2.1rem; height: 2.1rem; }
.ordgitter.lille .lyd svg { width: 1.1rem; height: 1.1rem; }
.ordgitter.lille .ordkort.bred { grid-column: auto; }

/* Under 420 px er der kun plads til en spalte, fordi en spalte skal rumme et
   ord paa 32 px OG lydknappen ved siden af. Saa skal span 2 slaas fra, ellers
   laver gitteret en ekstra spalte, og siden loeber vandret ud.
   Graensen skal foelge minmax-vaerdien ovenfor: to spalter kraever
   2 x 10,5rem plus mellemrum plus sidens egen luft. */
@media (max-width: 420px) {
  .ordgitter { grid-template-columns: 1fr; }
  .ordkort.bred { grid-column: auto; }
  /* De smaa kort har plads til to spalter, ogsaa paa en lille telefon. */
  .ordgitter.lille { grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr)); }
}

/* Ordkort med tegning. Tegningen staar over ordet, saa oejet moeder ordet
   sidst og ikke bruger billedet som genvej til at gaette. */
.ordkort.med-billede {
  flex-direction: column; align-items: stretch;
  padding: 0.5rem 0.5rem 0.6rem; gap: 0.3rem;
  background: var(--billedbund);
}
.ordkort.med-billede .ord { text-align: center; }
.ordkort.med-billede .lyd { align-self: center; }
/* Tegningerne slaaet fra med knappen under ordene paa trin 2. Kortet mister
   sin papirfarve, saa det ligner et almindeligt ordkort, og ordet staar
   alene. */
.ordgitter.uden-tegninger .ordbillede { display: none; }
.ordgitter.uden-tegninger .ordkort.med-billede { background: var(--kort); justify-content: center; }
/* Overskriften "Ordene" og knappen paa samme linje. Knappen ryger ned under
   overskriften, hvis der ikke er plads. */
.ordhoved { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem 1rem; flex-wrap: wrap; margin: 1.75rem 0 0.6rem; }
.saet .ordhoved h3 { margin: 0; }
.tegningsknap { font-size: 0.95rem; padding: 0.45rem 1rem; }
.tegningsknap[aria-pressed="true"] { background: var(--accent-lys); }
.knapikon { width: 1.15rem; height: 1.15rem; vertical-align: -0.2em; margin-right: 0.4rem; }

.ordbillede {
  display: block; width: 100%; max-width: 7rem; height: auto;
  margin: 0 auto; border-radius: 10px;
}

.lyd {
  flex: 0 0 auto;
  width: 2.9rem; height: 2.9rem;
  border-radius: 50%;
  border: 2px solid var(--accent);
  background: var(--kort);
  color: var(--accent);
  display: grid; place-items: center;
  cursor: pointer; padding: 0;
  box-shadow: var(--skygge-1);
  transition: background-color 0.15s ease, color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.lyd svg { width: 1.4rem; height: 1.4rem; fill: currentColor; }
.lyd:hover, .lyd:focus-visible {
  background: var(--accent); color: #fff; transform: scale(1.08); box-shadow: var(--skygge-2);
}
.lyd:active { transform: scale(0.94); }
/* Mens lyden spiller, puster knappen roligt. Saa kan barnet se, at det er
   den, der siger noget, ogsaa uden at hoere efter. */
.lyd[aria-pressed="true"] { background: var(--accent); color: #fff; animation: puls 1.1s ease-in-out infinite; }

.tekstkort {
  background: var(--kort); border: 2px solid var(--kant);
  border-radius: var(--rundt); overflow: hidden; box-shadow: var(--skygge-2);
}
.tekstkort img { display: block; width: 100%; height: auto; }
.tekstkrop { padding: 1.1rem 1.1rem 1.3rem; }
.laesetekst { font-size: 1.55rem; line-height: 1.65; margin: 0; }
.laesetekst span { display: block; }
.laesetekst span:empty { height: 0.9rem; }

.hoer-hele {
  margin-top: 1.1rem;
  display: inline-flex; align-items: center; gap: 0.5rem;
  font: inherit; font-size: 1.05rem; font-weight: 700;
  color: var(--accent); background: var(--kort);
  border: 2px solid var(--accent); border-radius: 999px;
  padding: 0.55rem 1.1rem; cursor: pointer;
  box-shadow: var(--skygge-1);
  transition: background-color 0.15s ease, color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.hoer-hele svg { width: 1.2rem; height: 1.2rem; fill: currentColor; }
.hoer-hele:hover, .hoer-hele:focus-visible {
  background: var(--accent); color: #fff; transform: translateY(-2px); box-shadow: var(--skygge-2);
}
.hoer-hele[aria-pressed="true"] { background: var(--accent); color: #fff; animation: puls 1.1s ease-in-out infinite; }

.spoergsmaal { margin: 0; padding-left: 1.6rem; font-size: 1.1rem; }
.spoergsmaal li { margin-bottom: 0.55rem; }
.spoergsmaal li::marker { color: var(--accent); font-weight: 700; }

.original { margin: 0.9rem 0 0; font-size: 0.95rem; }
.original a { color: var(--daempet); }

.voksne {
  background: var(--kort);
  border-left: 6px solid var(--accent);
  border-radius: 0 var(--rundt) var(--rundt) 0;
  padding: 1rem 1.1rem; margin-top: 1.75rem;
  box-shadow: var(--skygge-1);
}
.voksne p { margin: 0; }

/* ------------------------------------------------ til de stoerre elever */

.stoerreliste { list-style: none; padding: 0; margin: 1.5rem 0 0; display: grid; gap: 0.8rem; }
.stoerrekort {
  display: block; background: var(--kort); border: 2px solid var(--kant);
  border-radius: var(--rundt); padding: 1rem 1.1rem;
  text-decoration: none; color: var(--tekst); box-shadow: var(--skygge-1);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.stoerrekort:hover, .stoerrekort:focus-visible {
  border-color: var(--accent); transform: translateY(-3px); box-shadow: var(--skygge-2);
}
.stoerrekort .navn { display: block; font-size: 1.3rem; font-weight: 700; }
.stoerrekort .smug { display: block; color: var(--daempet); margin-top: 0.2rem; }
.stoerrekort .gaatil { display: block; margin-top: 0.5rem; color: var(--accent); font-weight: 700; font-size: 1rem; }

/* ----------------------------------------------------------- alfabet */

/* Hele alfabetet nederst paa bogstavtrinnet. Kortene er kvadratiske og mindst
   3,4 rem, saa de kan rammes med en barnefinger. */
.alfabet { margin-top: 3rem; border-top: 2px solid var(--kant); padding-top: 1.25rem; }
.alfabet h2 { font-size: 1.25rem; margin: 0 0 0.5rem; }
.alfabet .beskriv { margin: 0 0 1rem; }
.bogstavgitter {
  display: grid; gap: 0.6rem;
  grid-template-columns: repeat(auto-fill, minmax(5.5rem, 1fr));
}
.bogstavknap {
  font: inherit; font-size: 2.8rem; font-weight: 700;
  aspect-ratio: 1; display: grid; place-items: center;
  background: var(--kort); color: var(--tekst);
  border: 2px solid var(--kant); border-radius: 14px;
  cursor: pointer; padding: 0;
  box-shadow: var(--skygge-1);
  transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}
.bogstavknap:hover, .bogstavknap:focus-visible {
  border-color: var(--accent); transform: translateY(-3px); box-shadow: var(--skygge-2);
}
.bogstavknap:active { transform: translateY(0) scale(0.95); }
.bogstavknap[aria-pressed="true"] { background: var(--accent); color: #fff; border-color: var(--accent); }
.bogstavknap.tom { opacity: 0.4; cursor: default; }

/* Paa en telefon er der plads til fire i raekken, og bogstavet skal stadig
   vaere stort nok til at kunne ses paa en armslaengdes afstand. */
@media (max-width: 460px) {
  .bogstavgitter { grid-template-columns: repeat(4, 1fr); gap: 0.5rem; }
  .bogstavknap { font-size: 2.2rem; }
}

/* ----------------------------------------------------------- oevelser */

.oevelse { margin-top: 3rem; border-top: 2px solid var(--kant); padding-top: 1.25rem; }
.oevelse h2 { font-size: 1.25rem; margin: 0 0 0.5rem; }
.oevelse .beskriv { margin: 0 0 1.2rem; }
.uden-js { color: var(--daempet); font-size: 1rem; }

.oevelsestael { color: var(--daempet); font-size: 1rem; margin: 0 0 0.6rem; }
.oevelsesvar { font-size: 1.15rem; font-weight: 700; min-height: 1.8rem; margin: 0.8rem 0 0; }
.oevelsesvar.rigtigt, .oevelsestael.rigtigt { color: var(--accent); }
.oevelsesvar.forkert { color: #a3241f; }
.oevelseigen { margin-top: 1rem; }

/* Vendespil */
.vendegitter { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.6rem; }
@media (min-width: 30rem) { .vendegitter { grid-template-columns: repeat(6, 1fr); } }
.vendekort {
  position: relative; aspect-ratio: 1; border-radius: 14px; cursor: pointer;
  border: 2px solid var(--kant); background: var(--accent-lys); padding: 0;
  font: inherit; box-shadow: var(--skygge-1);
  transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.2s ease;
}
.vendekort:hover:not(:disabled) { transform: translateY(-3px); box-shadow: var(--skygge-2); }
.vendebagside, .vendeforside {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-size: 2.2rem; font-weight: 700;
}
.vendebagside { color: var(--accent); }
.vendeforside { opacity: 0; color: var(--tekst); }
.vendekort.vendt { background: var(--kort); }
.vendekort.vendt .vendebagside { opacity: 0; }
.vendekort.vendt .vendeforside { opacity: 1; }
.vendekort.par { background: var(--blad); border-color: var(--accent); cursor: default; }

/* Forlyd, baglyd og manglende vokal */
.oevelseskort {
  background: var(--kort); border: 2px solid var(--kant); border-radius: var(--rundt);
  padding: 1.2rem 1rem; text-align: center; box-shadow: var(--skygge-1);
}
.oevelseskort.medbillede { background: var(--billedbund); }
.oevelsebillede { width: 100%; max-width: 9rem; height: auto; border-radius: 12px; margin: 0 auto 0.8rem; display: block; }
.oevelseord { font-size: 2.6rem; font-weight: 700; margin: 0 0 0.8rem; letter-spacing: 0.06em; }
.oevelseord .hul { color: var(--accent); }
.oevelseord.skjultord { color: var(--daempet); }
.svargitter { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.6rem; margin-top: 0.9rem; }
.svarknap {
  font: inherit; font-size: 2.2rem; font-weight: 700; aspect-ratio: 1;
  display: grid; place-items: center; cursor: pointer; padding: 0;
  background: var(--kort); color: var(--tekst);
  border: 2px solid var(--kant); border-radius: 14px; box-shadow: var(--skygge-1);
  transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}
.svarknap:hover:not(:disabled) { border-color: var(--accent); transform: translateY(-3px); box-shadow: var(--skygge-2); }
.svarknap.rigtigt { background: var(--accent); color: #fff; border-color: var(--accent); }
.svarknap.forkert { background: #f4dedc; border-color: #a3241f; color: #a3241f; opacity: 0.7; }

/* Bogstavjagt */
.jagtoverskrift { font-size: 1.15rem; margin: 0 0 0.8rem; display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.jagtlyd { font-size: 1.05rem; padding: 0.5rem 1.1rem; }
.jagtbogstav {
  display: inline-grid; place-items: center; min-width: 3.4rem; height: 2.4rem;
  padding: 0 0.4rem; letter-spacing: 0.05em;
  background: var(--sol); color: var(--sol-tekst); border-radius: 10px;
  font-size: 1.6rem; font-weight: 700; vertical-align: middle;
}
.jagttekst {
  background: var(--kort); border: 2px solid var(--kant); border-radius: var(--rundt);
  padding: 1rem 1.1rem; font-size: 1.45rem; line-height: 1.9; margin: 0 0 0.8rem;
  box-shadow: var(--skygge-1);
}
/* Hvert bogstav i teksten er en knap, og de ser alle ens ud. Ingen streg
   under de rigtige: en markering ville vise svaret, og saa er der ingen
   jagt tilbage. Ingen ramme og ingen luft omkring, for saa braekker ordet
   fra hinanden, og kigger kommer til at staa som ki g g er. */
.jagtknap {
  font: inherit; font-size: inherit; font-weight: inherit;
  background: none; color: inherit; border: 0; padding: 0; margin: 0;
  cursor: pointer; border-radius: 3px;
  transition: background-color 0.12s ease, color 0.12s ease;
}
.jagtknap:hover { background: var(--accent-lys); }
.jagtknap.fundet {
  background: var(--accent); color: #fff; font-weight: 700; cursor: default;
}
/* Et kort blink paa et forkert bogstav. Ingen straf og ingen taelling: det
   er en oevelse, ikke en proeve. */
.jagtknap.forbi { background: #f4dedc; color: #a3241f; }

/* Bogstavmarken paa trin 1. Store bogstaver med luft imellem, saa oejet kan
   loebe raekken igennem uden at laese den som ord. */
.jagttekst.bogstavmark {
  font-size: 1.9rem; line-height: 2.1; letter-spacing: 0.1em; text-align: center;
}

/* Konfetti, naar en oevelse er loest. Et skud ud fra midten af skaermen.
   Selve bevaegelsen regnes ud i oevelse.js, saa her staar kun det, der ikke
   aendrer sig: placeringen oven paa siden og udgangspunktet i hjoernet.
   Stykkerne flyttes med transform, saa browseren ikke skal regne layout om. */
.konfetti {
  position: fixed; inset: 0; overflow: hidden;
  pointer-events: none; z-index: 100;
}
.konfettistykke {
  position: absolute; left: 0; top: 0;
  will-change: transform;
}

/* ----------------------------------------------------------- videre */

.videre { margin-top: 3rem; border-top: 2px solid var(--kant); padding-top: 1.25rem; }
.videre h2 { font-size: 1.25rem; margin: 0 0 0.5rem; }
.naboer { display: grid; gap: 0.6rem; margin-top: 1rem; }
.nabo {
  display: block; background: var(--kort);
  border: 2px solid var(--kant); border-radius: var(--rundt);
  padding: 0.85rem 1rem; text-decoration: none; color: var(--tekst);
  box-shadow: var(--skygge-1);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.nabo:hover, .nabo:focus-visible {
  border-color: var(--accent); transform: translateY(-3px); box-shadow: var(--skygge-2);
}
.nabo span { display: block; font-size: 1rem; color: var(--daempet); }
.nabo strong { font-size: 1.2rem; color: var(--accent); }
.laan { margin-top: 1.25rem; }

/* ----------------------------------------------------------- brodtekst */

.brodtekst { font-size: 1.1rem; }
.brodtekst h1 { font-size: 2.2rem; margin-top: 0; }
.brodtekst h2 { font-size: 1.5rem; margin-top: 2rem; }
.brodtekst em { color: var(--daempet); }

/* ----------------------------------------------------------- fod */

/* ------------------------------------------------------------ oevelser */

/* Oversigten /oevelser/ og kortene paa trinsiderne bruger trinkortene fra
   forsiden (.trinliste, .trinknap), saa oevelserne ser ud som en del af
   siden og ikke som noget, der er sat paa bagefter. */
.oevelsesgruppe { margin-top: 2.4rem; }
.oevelsesgruppe h2 { font-size: 1.6rem; margin: 0 0 0.2rem; }
.oevelsesgruppe .afsnitstekst { text-align: left; margin: 0 0 1rem; }
.oevelseslinks { margin-top: 2.6rem; }
.oevelseslinks h2 { font-size: 1.5rem; margin: 0 0 0.3rem; }
/* Paa trinsiden er spalten smal, saa kortene staar under hinanden. */
.oevelseslinks .trinliste { margin-top: 1rem; grid-template-columns: 1fr; }
.oevelsesoversigt { padding-top: 0.5rem; }
.oevelsesoversigt .beskriv { max-width: 40rem; }

/* Paa en oevelses egen side staar titlen allerede i h1, og stregen under
   toppen skiller den fra oevelsen. Saa skal oevelsen ikke have sin egen. */
.oevelse.enkelt { margin-top: 0; border-top: 0; padding-top: 0.25rem; }
/* "Passer til trin 3" er et link, men skal ligne trinnavnet paa trinsiden. */
.trinnavn a { color: inherit; text-decoration-thickness: 2px; text-underline-offset: 0.2em; }

/* ---------------------------------------------------------- kontakt */

/* Formularen nederst paa alle sider. Et hvidt kort som de andre, felterne i
   sidens skrift og stoerrelse, og den groenne knap, fordi det her er noget,
   den voksne selv skal trykke paa. */
.kontakt { padding: 2.4rem 0 0; scroll-margin-top: 6rem; }
.kontaktkort {
  background: var(--kort); border: 2px solid var(--kant); border-radius: var(--rundt);
  box-shadow: var(--skygge-1); padding: 1.3rem 1.4rem 1.2rem;
}
.kontaktkort h2 { margin: 0 0 0.2rem; font-size: 1.5rem; }
.kontaktom { margin: 0 0 1rem; color: var(--daempet); }
.kontaktfelter { display: grid; gap: 0 1rem; }
@media (min-width: 40rem) { .kontaktfelter { grid-template-columns: 1fr 1fr; } }
.kontaktform .felt { margin: 0 0 0.8rem; }
.kontaktform label { display: block; font-weight: 700; margin-bottom: 0.25rem; }
.kontaktform .skal { color: var(--daempet); font-weight: 400; }
.kontaktform input[type="text"], .kontaktform input[type="email"], .kontaktform textarea {
  width: 100%; font: inherit; font-size: 1rem; color: var(--tekst);
  background: #fff; border: 2px solid var(--kant); border-radius: 12px; padding: 0.6rem 0.75rem;
}
.kontaktform textarea { resize: vertical; min-height: 7rem; }
.kontaktform input:focus-visible, .kontaktform textarea:focus-visible { outline: 3px solid var(--accent-lys); border-color: var(--accent); }
.kontaktform [aria-invalid="true"] { border-color: #a3241f; }
.feltfejl { display: block; color: #a3241f; font-size: 0.9rem; margin-top: 0.25rem; }
.samtykke { margin: 0.2rem 0 1rem; }
.samtykke label { display: flex; gap: 0.6rem; align-items: flex-start; font-weight: 400; font-size: 0.95rem; color: var(--daempet); }
.samtykke input { width: 1.25rem; height: 1.25rem; margin-top: 0.15rem; flex: 0 0 auto; accent-color: var(--accent); }
.kontaktbund { margin: 0; }
.kontaktbund .uden-js { color: var(--daempet); }
.kontaktsvar { margin: 0.9rem 0 0; padding: 0.7rem 1rem; border-radius: 12px; font-weight: 700; }
.kontaktsvar.godt { background: var(--accent-lys); color: var(--accent); }
.kontaktsvar.galt { background: #fdf0ef; color: #a3241f; }
/* Faelden til robotter. Skjult for mennesker, ogsaa for skaermlaesere. */
.faelde { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ------------------------------------------------------ bag om siden */

/* Kortet lige over sidefoden paa forsiden, saadan-siden og bibliotekssiden.
   Hvidt som de andre kort, saa det laeses som en oplysning og ikke som en
   annonce, og med en omridsknap: de fyldte groenne knapper er dem, barnet og
   foraelderen skal trykke paa. */
/* Luft i bunden, saa kortet ikke ligger op ad sidefodens groenne kant. */
.bagom { padding: 2.4rem 0 2.2rem; }
.bagomkort {
  background: var(--kort); border: 2px solid var(--kant);
  border-radius: var(--rundt); box-shadow: var(--skygge-1);
  padding: 1.1rem 1.3rem; display: grid; gap: 0.7rem;
}
@media (min-width: 40rem) {
  /* Logo, tekst, knap. auto paa de to yderste, saa teksten faar resten. */
  .bagomkort { grid-template-columns: auto 1fr auto; align-items: center; gap: 1.4rem; }
}
/* Logoet er JumpAIs eget, 400 x 106. Det vises i 9,5rem bredde, altsaa
   knap det halve, saa det staar skarpt paa en skaerm med dobbelt oploesning. */
.bagomlogo { width: 9.5rem; height: auto; justify-self: start; }
.bagomkort h2 { margin: 0 0 0.25rem; font-size: 1.05rem; }
.bagomkort p { margin: 0; color: var(--daempet); font-size: 0.95rem; }
.bagomknap {
  justify-self: start; white-space: nowrap;
  display: inline-block; text-decoration: none; font-weight: 700;
  border: 2px solid var(--accent); color: var(--accent); background: var(--kort);
  border-radius: 999px; padding: 0.5rem 1.1rem; box-shadow: var(--skygge-1);
  transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}
.bagomknap:hover, .bagomknap:focus-visible {
  background: var(--accent-lys); transform: translateY(-2px); box-shadow: var(--skygge-2);
}

footer.fod { background: var(--accent); color: #f2f7f4; padding: 2rem 0; }
footer.fod a { color: #fff; }
footer.fod .midt { display: grid; gap: 1rem; }
@media (min-width: 44rem) { footer.fod .midt { grid-template-columns: 1fr auto; align-items: center; } }
footer.fod nav { display: flex; gap: 1.2rem; flex-wrap: wrap; }
.kolofon { margin: 0; font-size: 0.95rem; opacity: 0.85; }

/* ----------------------------------------------------------- laesepas */

.hentepas { padding: 2rem 0 1rem; }
.hentepas h1 { font-size: 2.4rem; margin: 0 0 0.3rem; }
.hentepas p { margin: 0 0 1rem; color: var(--daempet); max-width: 40rem; }
.printhint { color: var(--daempet); margin: 0.9rem 0 0; max-width: 34rem; text-wrap: balance; }
.printhint .samlet { white-space: nowrap; }
.arkramme { padding: 0 0 3rem; }

.pas {
  background: var(--kort);
  border: 3px solid var(--accent);
  border-radius: 22px;
  padding: 1rem 1.5rem 1rem;
  max-width: 46rem; margin: 0 auto;
  box-shadow: var(--skygge-3);
}

/* Tegningen i toppen staar hel, ingenting skaaret fra. Dens papirfarve er
   gjort hvid i filen, og multiply lader den forsvinde ind i passet, saa der
   ikke staar en lys firkant rundt om. */
.pastop { text-align: center; }
.pastegning {
  display: block; width: auto; height: 12rem; max-width: 100%; margin: 0 auto;
  object-fit: contain; mix-blend-mode: multiply;
}
.pastitel {
  display: inline-block; position: relative; margin: -1.6rem auto 0;
  background: var(--sol); color: var(--sol-tekst);
  font-size: 2.1rem; line-height: 1; padding: 0.55rem 1.8rem 0.65rem;
  border: 2px solid var(--sol-tekst); border-radius: 999px;
}

.navnelinje { display: flex; align-items: baseline; gap: 0.6rem; margin: 1rem 0.3rem 0.7rem; font-weight: 700; font-size: 1.15rem; }
.navnelinje .streg { flex: 1; border-bottom: 2px dotted var(--daempet); height: 1.3rem; }

/* Forklaringen: hvad stjernen og maanen betyder. */
.noegle { display: flex; gap: 0.5rem 1.6rem; justify-content: center; flex-wrap: wrap; margin: 0 0 0.9rem; font-size: 0.95rem; color: var(--daempet); }
.noegle span { display: inline-flex; align-items: center; gap: 0.45rem; }
.noegle .figur { width: 1.7rem; height: 1.7rem; }

/* Stjerne og maane er hvide indeni, for det er barnet, der farver dem.
   Kun stregen har farve, og den er moerk nok til at staa i sort-hvid. */
.pasfigurer { position: absolute; }
.stjerne { fill: #fff; stroke: #9a7212; stroke-width: 1.5; stroke-linejoin: round; }
.maane { fill: #fff; stroke: #544c8c; stroke-width: 1.5; stroke-linejoin: round; }
.maane.lille { stroke-width: 0.9; }

.uge {
  display: grid; grid-template-columns: 4.6rem 1fr 4.4rem; align-items: center; gap: 0.5rem;
  background: #fff; border: 2px solid var(--kant); border-radius: 14px;
  padding: 0.45rem 0.6rem; margin-bottom: 0.55rem;
}
.ugedyr { text-align: center; }
.ugedyr img {
  display: block; width: 3.4rem; height: 3.4rem; margin: 0 auto; border-radius: 50%;
  background: var(--billedbund); border: 2px solid var(--kant);
}
.ugedyr b { display: block; font-size: 0.95rem; margin-top: 0.15rem; color: var(--accent); }

.dage { display: grid; grid-template-columns: repeat(7, 1fr); gap: 0.3rem; }
.dag { text-align: center; min-width: 0; }
.dag i { display: block; font-style: normal; font-size: 0.78rem; font-weight: 700; color: var(--daempet); margin-bottom: 0.1rem; }
.dag .figur { display: block; width: 100%; max-width: 2.6rem; aspect-ratio: 1; margin: 0 auto; }
.dag .figur + .figur { margin-top: 0.15rem; }

.praemie { text-align: center; }
.praemie img { display: block; width: 3rem; height: auto; margin: 0 auto; }
.praemie b { display: block; font-size: 0.72rem; line-height: 1.15; color: var(--sol-tekst); margin-top: 0.1rem; }

.paskolofon { text-align: center; font-size: 0.85rem; margin: 0.4rem 0 0; color: var(--daempet); }

/* Laesepasset er tegnet til et A4. Paa en telefon skal det stadig kunne ses
   uden vandret scroll, selvom ingen udfylder det der. Dyr og roset bliver
   mindre, og dagene faar pladsen. */
@media (max-width: 560px) {
  .pas { padding: 0.8rem 0.6rem 0.8rem; border-radius: 16px; }
  .pastegning { height: 7.5rem; }
  .pastitel { font-size: 1.5rem; padding: 0.45rem 1.2rem 0.5rem; margin-top: -1.1rem; }
  .noegle { font-size: 0.85rem; }
  .uge { grid-template-columns: 2.8rem 1fr 2.4rem; gap: 0.3rem; padding: 0.4rem 0.35rem; }
  .ugedyr img { width: 2.3rem; height: 2.3rem; }
  .ugedyr b { font-size: 0.72rem; }
  .dage { gap: 0.15rem; }
  .dag i { font-size: 0.62rem; }
  .praemie img { width: 2rem; }
  .praemie b { font-size: 0.56rem; }
}

/* ----------------------------------------------------------- bevaegelse */

@keyframes op {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}
@keyframes fold {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: none; }
}
@keyframes puls {
  0%, 100% { box-shadow: 0 0 0 0 rgba(26, 92, 70, 0.45); }
  50% { box-shadow: 0 0 0 8px rgba(26, 92, 70, 0); }
}

/* Kun paa skaerm. I print maa intet staa med opacity 0, hvis animationen
   af en eller anden grund ikke naar at koere. */
@media screen {
  .hero .midt > *, .skridt, .trinliste > li, .viderekort, .heroramme {
    animation: op 0.5s ease both;
  }
  .hero .midt > *:nth-child(2) { animation-delay: 0.08s; }
  .skridt:nth-child(2), .trinliste > li:nth-child(2), .viderekort:nth-child(2) { animation-delay: 0.06s; }
  .skridt:nth-child(3), .trinliste > li:nth-child(3), .viderekort:nth-child(3) { animation-delay: 0.12s; }
  .trinliste > li:nth-child(4) { animation-delay: 0.18s; }
  .trinliste > li:nth-child(5) { animation-delay: 0.24s; }
  .trinliste > li:nth-child(6) { animation-delay: 0.3s; }
  .trinliste > li:nth-child(7) { animation-delay: 0.36s; }
  .trinliste > li:nth-child(8) { animation-delay: 0.42s; }
}

/* Den, der har slaaet bevaegelse fra i styresystemet, skal ikke have noget,
   der glider eller pulser. Alt staar stille, og siden virker ens. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* ----------------------------------------------------------- print */

@page { size: A4 portrait; margin: 8mm; }

@media print {
  /* Uden den her bliver alle flader hvide i de fleste browsere. */
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; box-shadow: none !important; }

  body { background: #fff; font-size: 11pt; }

  /* Skaermens min-height: 100vh skal ikke med paa papiret. I Chrome er 100vh
     arkets hoejde, men Safari regner det ud fra browservinduet, og et
     Mac-vindue er hoejere end det, der er plads til paa et A4, naar Safari
     har taget sidehoved og sidefod. Saa blev siden tvunget over paa en tom
     side 2. Fundet af Martin 19. september 2026. */
  html, body { min-height: 0 !important; height: auto !important; }
  .skjul-ved-print, .topbjaelke, footer.fod, .spring { display: none !important; }
  .side, .midt, .arkramme { max-width: none; padding: 0; margin: 0; }

  /* Passet skal blive paa EN side i alle browsere.
     Regnestykket: et A4 er 297 mm. Vi tager 8 mm margen i top og bund. Men
     Safari udskriver som standard sidehoved og sidefod, og den reserverer
     selv plads til dem, saa der reelt kun er omkring 255 mm tilbage. Er
     passet hoejere end det, kommer der en tom side to med, og den ser ud som
     om den er tom, fordi der kun staar Safaris egen sidefod paa den.
     Maal med WebKit og ikke kun med Chrome. Naar WebKit printer, bliver
     alt omkring 7 procent stoerre end i Chrome, saa et pas paa 231 mm i
     Chrome var 256 mm i Safari, og Safari skar toppen af. Nu er passet
     209 mm i Chrome og 224 mm i WebKit. Maal med
     swift scripts/safariprint.swift <adresse> <ud.pdf>. */
  .pas {
    max-width: 194mm; margin: 0 auto; border-width: .6mm; border-radius: 6mm;
    padding: 4mm 6mm 3.5mm; page-break-inside: avoid;
  }
  .pastegning { height: 42mm; }
  .pastitel { font-size: 25pt; padding: 2.2mm 9mm 2.6mm; margin-top: -7mm; border-width: .5mm; }
  .navnelinje { font-size: 13pt; margin: 3mm 2mm 2.5mm; }
  .navnelinje .streg { height: 6mm; border-bottom-width: .4mm; }
  /* Raekke-afstanden er lille: knaekker forklaringen over to linjer, skal
     den ikke skubbe ugerne ned. */
  .noegle { font-size: 9pt; gap: 1.2mm 6mm; margin: 0 0 2.4mm; flex-wrap: nowrap; }
  .noegle span { white-space: nowrap; }
  .noegle .figur { width: 6mm; height: 6mm; }

  .uge {
    grid-template-columns: 20mm 1fr 20mm; gap: 2mm; border-width: .45mm; border-radius: 4mm;
    padding: 1.5mm 2.5mm; margin-bottom: 1.7mm; page-break-inside: avoid;
  }
  .ugedyr img { width: 15mm; height: 15mm; border-width: .4mm; }
  .ugedyr b { font-size: 10.5pt; margin-top: .8mm; }
  .dage { gap: 1.4mm; }
  .dag i { font-size: 8.5pt; margin-bottom: .4mm; }
  .dag .figur { width: 10mm; height: 10mm; max-width: none; }
  .dag .figur + .figur { margin-top: .6mm; }
  .praemie img { width: 13mm; }
  .praemie b { font-size: 8pt; margin-top: .4mm; }
  .paskolofon { font-size: 8.5pt; margin-top: 1mm; }
}