/*
 * scamzam.com
 *
 * BAGGRUNDEN LIGGER FAST, INDHOLDET RULLER HEN OVER DEN
 *
 * Foer var hver sektion en flad farve, og saa var der en haard kant hver gang
 * man rullede fra creme til lilla. Nu er der eet fast lag bagerst (.baggrund)
 * med tre meget bloede skyer og en svag kornstruktur, og sektionerne er
 * gennemsigtige. Farven skifter derfor jaevnt hele vejen ned, og laget bliver
 * staaende naar man ruller. Samme greb som facta.dk bruger.
 *
 * Skyerne er CSS-gradienter og kornet er en SVG skrevet ind i filen, saa der
 * hentes ikke et eneste billede til baggrunden.
 *
 * TO REGLER DER IKKE MAA BRYDES
 *   1. Skriften hostes her. Google Fonts hentet fra Google er en tredjepart
 *      der faar den besoegendes IP, og saa udloeses cookiebekendtgoerelsen.
 *   2. Ingen indlejret YouTube, Maps eller reCAPTCHA. Samme grund.
 *
 * Sproglisten er et <details>, altsaa ren HTML. Temaknappen er det eneste
 * sted der er JavaScript paa siden, og den gemmer valget i localStorage.
 * Et tema brugeren selv har trykket paa, er en praeference han har bedt om,
 * og den slags kraever ikke samtykke. Der maales ikke noget, og der sendes
 * ikke noget nogen steder hen.
 */

@font-face {
  font-family: 'Fredoka';
  src: url('brand/fredoka.ttf') format('truetype');
  font-weight: 400 700;
  font-display: swap;
}

:root {
  --egg: #FBF7EF;
  --pastel: #F0E7F7;
  --pastel-2: #E4D5EF;
  --card: #FFFFFF;
  --line: #E7DDCF;
  --ink: #2B2333;
  --text: #2B2333;
  --text-2: #6B6169;
  --body: #574E60;
  --purple: #76329E;
  --purple-lys: #9B5EC4;
  --gold: #FDCF42;
  --high: #D33A2C;        /* samme roede som i stemplet, gjort roedere begge steder samtidig */
  --high-tekst: #B92C20;  /* en tand dybere endnu til smaa etiketter */
  --sus: #E8873B;
  --sus-tekst: #A2571B;     /* maalt: 5,4 mod hvid. #E8873B gav 2,6 og var ikke laesbar */
  --caution: #EFBF3E;
  --caution-tekst: #7F6009; /* maalt: 5,9 mod hvid, 4,9 mod lyslilla */
  --ok: #47A87C;            /* flader og flueben */
  --ok-tekst: #2A7052;      /* maalt: 5,9 mod hvid. #47A87C gav 2,9 */
  --ok-flade: #2F7D5A;      /* hvid tekst ovenpaa: 5,0 */
  --skygge: 5px 5px 0 var(--ink);
  --hoved-hoejde: 72px;

  /*
   * FLADER MED TEKST OVENPAA HAR DERES EGEN FARVE, OG DERES EGEN TEKSTFARVE.
   *
   * I moerkt tema bliver --purple til en lys lavendel, og hvid tekst paa den
   * gav en kontrast paa 2,3. Hovedknappen "Installer gratis" ville altsaa
   * vaere naesten ulaeselig i moerkt tema. Samme problem med den roede: den
   * lysner i moerkt tema, og hvid tekst faldt til 3,9.
   *
   * Derfor de her fire. De maales i begge temaer, se noten nederst i filen.
   */
  --knap-flade: #76329E;
  --knap-tekst: #FFFFFF;
  --knap-flade-hover: #8A4CB4; /* maalt: hvid paa den giver 5,6. #9B5EC4 gav 4,4 */
  --roed-flade: #D33A2C;
  --roed-flade-tekst: #FFFFFF;
}

/* Moerkt tema. Skiftes med knappen i hoejre side af headeren, og foelger
   systemet indtil man selv vaelger. Det trænger stadig til en gennemgang med
   oejnene, se noten i index.html. */
html[data-tema="moerk"] {
  --egg: #221C2B;
  --pastel: #2E2540;
  --pastel-2: #3E3252;
  --card: #2A2233;
  --line: #3E3448;
  --ink: #F3ECDF;
  --text: #F3ECDF;
  --text-2: #B3A8BE;
  --body: #C9BFD1;
  --purple: #C79BE0;
  --purple-lys: #DDBCF0;
  --high: #F03B2B;
  --high-tekst: #FF6E5E;
  --sus: #EE9A55;
  --sus-tekst: #F4AE74;
  --caution: #E8C25A;
  --caution-tekst: #E8C25A;
  --ok: #5BBF8E;
  --ok-tekst: #6FCE9E;
  --ok-flade: #2F7D5A;
  /* Lys lavendel som knap kraever MOERK tekst. Maalt: 7,2 mod 2,3 med hvid. */
  --knap-flade: #C79BE0;
  --knap-tekst: #221C2B;
  --knap-flade-hover: #DDBCF0;
  /* Den roede flade bliver moerkere end teksten omkring den, saa hvid holder */
  --roed-flade: #C4392C;
  --roed-flade-tekst: #FFFFFF;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  color: var(--text);
  background: var(--egg);
  -webkit-font-smoothing: antialiased;
}

/* ===============================================================
   DET FASTE BAGGRUNDSLAG
   =============================================================== */
.baggrund {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    /* Straalerne fra extensionen. De ligger paa det faste lag, saa de bliver
       staaende naar man ruller, og de stopper blødt inden bunden i stedet for
       at skaere hen over teksten. */
    repeating-conic-gradient(from 0deg at 50% 22%,
      color-mix(in srgb, var(--pastel) 62%, transparent) 0deg 9deg, transparent 9deg 18deg),
    radial-gradient(48% 40% at 78% 14%, var(--pastel) 0%, transparent 64%),
    radial-gradient(46% 38% at 14% 66%, var(--pastel) 0%, transparent 62%);
  opacity: .85;
  /* Straalerne toner ud nedad, saa de ikke ligger som et gitter bag hele siden */
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 78%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 0%, #000 78%, transparent 100%);
}
/* Kornet. Uden det ser de bloede gradienter flade og lidt digitale ud. */
.baggrund::after {
  content: ''; position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23k)' opacity='.32'/%3E%3C/svg%3E");
  mix-blend-mode: multiply; opacity: .05;
}
html[data-tema="moerk"] .baggrund::after { mix-blend-mode: screen; opacity: .04; }

/* Alt indhold ligger over baggrunden */
.top, main, footer { position: relative; z-index: 1; }

h1, h2, h3, .comic { font-family: 'Fredoka', -apple-system, sans-serif; font-weight: 600; }
h1, h2 { letter-spacing: -0.5px; line-height: 1.04; margin: 0; }

.wrap { max-width: 1180px; margin: 0 auto; padding: 0 28px; }
.smal { max-width: 880px; }
a { color: var(--purple); }

/* ===============================================================
   HEADER: logo til venstre, undersider i midten, handlinger til hoejre.
   Sidder fast naar man ruller, med en let sloering saa teksten bagved ikke
   slaar igennem.
   =============================================================== */
.top {
  position: sticky; top: 0; z-index: 60;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  gap: 20px; padding: 12px 28px;
  background: color-mix(in srgb, var(--egg) 86%, transparent);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.mark { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; color: var(--text); justify-self: start; }
.mark svg { width: 42px; height: 42px; display: block; }
.mark .navn { font-family: 'Fredoka', sans-serif; font-size: 30px; font-weight: 700; letter-spacing: -0.4px; color: var(--text); }
.mark .zam { color: var(--purple); }

.top nav { display: flex; gap: 26px; align-items: center; }
/* Var for lys til at laese. Nu naesten soert og en tand tungere. */
.top nav a { color: var(--text); text-decoration: none; font-size: 15.5px; font-weight: 600; white-space: nowrap; }
.top nav a:hover { color: var(--purple); }

.handlinger { display: flex; gap: 10px; align-items: center; justify-self: end; }

/* Sprogvaelger og temaknap: samme stoerrelse og form */
.ikonknap {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 40px; min-width: 40px; padding: 0 10px;
  background: var(--card); color: var(--text);
  border: 2px solid var(--ink); border-radius: 11px;
  font: inherit; font-size: 15px; cursor: pointer;
}
.ikonknap:hover { border-color: var(--purple); color: var(--purple); }
.ikonknap svg { width: 18px; height: 18px; }

/* Sproglisten er et <details>, saa den virker uden JavaScript */
.sprog { position: relative; }
.sprog > summary { list-style: none; }
.sprog > summary::-webkit-details-marker { display: none; }
.sprog-liste {
  position: absolute; top: 48px; right: 0; z-index: 70;
  background: var(--card); border: 2px solid var(--ink); border-radius: 14px;
  box-shadow: var(--skygge); padding: 6px; min-width: 168px;
}
.sprog-liste a {
  display: block; padding: 7px 11px; border-radius: 9px;
  color: var(--text); text-decoration: none; font-size: 15px;
}
.sprog-liste a:hover { background: var(--pastel); color: var(--purple); }
.sprog-liste a[aria-current] { background: var(--pastel); color: var(--purple); font-weight: 600; }

/* Solen vises i moerkt tema, maanen i lyst */
#temaKnap .sol { display: none; }
html[data-tema="moerk"] #temaKnap .sol { display: block; }
html[data-tema="moerk"] #temaKnap .maane { display: none; }

.knap-lille {
  display: inline-flex; align-items: center; height: 40px; padding: 0 18px;
  font-family: 'Fredoka', sans-serif; font-size: 16px; font-weight: 600;
  color: var(--knap-tekst); background: var(--knap-flade); text-decoration: none;
  border: 2px solid var(--ink); border-radius: 11px; box-shadow: 3px 3px 0 var(--ink);
  white-space: nowrap; cursor: pointer;
}
.knap-lille:hover { background: var(--knap-flade-hover); transform: translate(1px, 1px); box-shadow: 2px 2px 0 var(--ink); }

/* ===============================================================
   Knapper
   =============================================================== */
.knapper { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.knap {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 17px 34px; text-decoration: none;
  font-family: 'Fredoka', sans-serif; font-size: 20px; font-weight: 600;
  color: var(--knap-tekst); background: var(--knap-flade);
  border: 3px solid var(--ink); border-radius: 16px; box-shadow: var(--skygge);
  transition: transform .08s, box-shadow .08s, background .12s;
}
.knap:hover { background: var(--knap-flade-hover); transform: translate(2px, 2px); box-shadow: 3px 3px 0 var(--ink); }
.knap:active { transform: translate(5px, 5px); box-shadow: 0 0 0 var(--ink); }
.cta-under { font-size: 15px; color: var(--text-2); margin: 16px 0 0; }
.cta-under b { color: var(--text); font-weight: 600; }

/* === HERO === */
.hero .wrap {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: 56px; align-items: center;
  padding-top: 56px; padding-bottom: 88px;
}
.hero h1 { font-size: clamp(38px, 5.4vw, 64px); margin-bottom: 20px; }
.hero .lead { font-size: 20px; line-height: 1.5; color: var(--body); max-width: 470px; margin: 0 0 30px; }
.hero .lead b { color: var(--text); font-weight: 600; }
.hero-produkt { transform: rotate(-1.6deg); }

/* ===============================================================
   POPUP'EN

   FAST HOEJDE, og midten ruller. Det er baade hvordan den rigtige popup
   opfoerer sig (Chrome giver den hoejst 600 pixels), og det der goer at
   "Laes mere" kan foldes ud uden at resten af siden hopper.
   =============================================================== */
.pop {
  width: 430px; height: 560px; flex-shrink: 0;
  display: flex; flex-direction: column;
  /* Uden striber, og naesten hvid. Popup'en staar paa en baggrund der SELV har
     straaler, og to lag striber oven i hinanden stoejer. Ren pastel indeni tog
     for meget over, saa nu er det et strejf lilla i hvidt. */
  background: color-mix(in srgb, var(--pastel) 26%, var(--card));
  border: 3px solid var(--ink); border-radius: 18px;
  box-shadow: 9px 9px 0 var(--ink); overflow: hidden;
}
.pop-head { flex: 0 0 auto; display: flex; align-items: center; gap: 10px; padding: 13px 18px; background: var(--card); border-bottom: 2px solid var(--line); }
.pop-head svg { width: 30px; height: 30px; }
.pop-logo { font-family: 'Fredoka', sans-serif; font-size: 22px; font-weight: 700; }
.pop-logo { color: var(--text); }
.pop-logo .pop-zam { color: var(--purple); }
.pop-domain { font-size: 13px; color: var(--text-2); margin-left: auto; max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pop-body { flex: 1 1 auto; overflow-y: auto; padding: 14px 18px 18px; }
.pop-verdict-stack { display: flex; align-items: center; gap: 11px; margin-bottom: 14px; }
.pop-stamp { width: 96px; height: 96px; flex-shrink: 0; }
.pop-verdict {
  flex: 1; min-width: 0; font-family: 'Fredoka', sans-serif; font-size: 25px; letter-spacing: .3px;
  padding: 17px 15px; color: #fff;
  border: 3px solid var(--ink); border-radius: 15px; box-shadow: 4px 4px 0 var(--ink);
}
.pop-verdict.HIGH_RISK { background: var(--roed-flade); color: var(--roed-flade-tekst); }
.pop-stats { display: flex; gap: 9px; margin-bottom: 14px; }
.pop-stat { flex: 1; background: var(--card); border: 2px solid var(--line); border-radius: 13px; padding: 10px 6px; text-align: center; }
.pop-stat-val { font-family: 'Fredoka', sans-serif; font-size: 20px; line-height: 1.15; }
.pop-stat-val.risk { color: var(--high-tekst); }
.pop-stat-lbl { font-size: 11px; color: var(--text-2); text-transform: uppercase; letter-spacing: .5px; margin-top: 3px; }
.pop-reasons { margin-bottom: 12px; }
.pop-reason { display: flex; gap: 9px; align-items: flex-start; font-size: 14.5px; padding: 4px 0; line-height: 1.45; }
.pop-dot { flex-shrink: 0; width: 11px; height: 11px; border-radius: 50%; border: 2px solid var(--ink); margin-top: 5px; background: var(--high); }

.pop-mere { margin-bottom: 4px; }
.pop-mere > summary {
  list-style: none; cursor: pointer; user-select: none;
  text-align: center; font-family: 'Fredoka', sans-serif; font-size: 15.5px; padding: 11px;
  background: var(--pastel); color: var(--purple);
  border: 2px solid var(--purple); border-radius: 13px;
}
.pop-mere > summary::-webkit-details-marker { display: none; }
.pop-mere > summary:hover { background: var(--pastel-2); }
.pop-mere[open] > summary { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.pop-rapport {
  border: 2px solid var(--purple); border-top: none; border-radius: 0 0 13px 13px;
  background: var(--card); padding: 10px 14px; font-size: 13.5px; margin: 0;
}
.pop-rapport div { display: flex; gap: 10px; padding: 4px 0; border-bottom: 1px solid var(--line); }
.pop-rapport div:last-child { border-bottom: none; }
.pop-rapport dt { color: var(--text-2); flex: 0 0 46%; margin: 0; }
.pop-rapport dd { margin: 0; font-weight: 500; }
.pop-rapport .fac { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; }

.pop-foot { flex: 0 0 auto; display: flex; align-items: center; gap: 14px; padding: 12px 18px; background: var(--card); border-top: 2px solid var(--line); font-size: 13.5px; color: var(--text-2); }
.pop-link { color: var(--purple); font-weight: 700; margin-left: auto; }

/* ===============================================================
   Sektioner. Ingen egne baggrunde, det ligger i det faste lag.
   =============================================================== */
section { padding: 100px 0; }
.hoved { max-width: 740px; margin: 0 auto 50px; text-align: center; }
.hoved h2 { font-size: clamp(30px, 3.8vw, 44px); margin-bottom: 14px; }
.hoved p { color: var(--body); font-size: 18px; margin: 0; }

/* PROBLEMET: to adresselinjer der ser ens ud */
.adresser { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; max-width: 820px; margin: 0 auto; }
.adresse {
  background: var(--card); border: 3px solid var(--ink); border-radius: 16px;
  box-shadow: var(--skygge); padding: 16px 18px;
  display: flex; align-items: center; gap: 12px; font-size: clamp(17px, 2.6vw, 22px);
}
.adresse .laas { flex-shrink: 0; width: 20px; height: 20px; opacity: .45; }
.adresse .url { font-weight: 500; letter-spacing: .2px; }
.svar { text-align: center; margin: 26px auto 0; max-width: 660px; font-size: 17px; color: var(--body); }
.svar + .svar { margin-top: 14px; }
.svar b { color: var(--high-tekst); }
.svar .fremhaev { color: var(--purple); font-weight: 600; }
.svar .fac { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 15px; background: var(--card); border: 1px solid var(--pastel-2); padding: 2px 7px; border-radius: 6px; }

/* FOER OG MED */
.foer-med { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: stretch; }
.spalte { background: var(--card); border: 3px solid var(--ink); border-radius: 20px; box-shadow: var(--skygge); padding: 28px; }
.spalte.med { border-color: var(--purple); box-shadow: 5px 5px 0 var(--purple); }
.spalte h3 { font-size: 20px; margin: 0 0 4px; }
.spalte .tid { font-size: 14px; color: var(--text-2); margin: 0 0 18px; }
.spalte.med .tid { color: var(--purple); font-weight: 600; }
.trin { list-style: none; margin: 0; padding: 0; }
.trin li { display: flex; gap: 11px; padding: 7px 0; font-size: 16px; color: var(--body); line-height: 1.45; }
.trin li::before { content: '→'; color: var(--text-2); flex-shrink: 0; }
.spalte.med .trin li::before { content: '✓'; color: var(--ok-tekst); font-weight: 700; }
.slutlinje { margin-top: 16px; padding-top: 16px; border-top: 2px solid var(--line); font-size: 17px; }
.slutlinje b { font-family: 'Fredoka', sans-serif; }
.spalte.med .slutlinje b { color: var(--high-tekst); }

/* Verdikterne */
.verdikter { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.verdikt { background: var(--card); border: 3px solid var(--ink); border-radius: 20px; box-shadow: var(--skygge); padding: 22px 18px; text-align: center; }
.verdikt img { width: 104px; height: 104px; margin: 0 auto 12px; display: block; }
.verdikt b { display: block; font-family: 'Fredoka', sans-serif; font-size: 16px; margin-bottom: 8px; letter-spacing: .3px; }
.verdikt p { margin: 0 0 12px; font-size: 14.5px; color: var(--text-2); line-height: 1.5; }
.verdikt .gor { display: block; font-size: 14px; font-weight: 600; padding-top: 11px; border-top: 2px solid var(--line); }
.verdikt.ok b, .verdikt.ok .gor { color: var(--ok-tekst); }
.verdikt.caution b, .verdikt.caution .gor { color: var(--caution-tekst); }
.verdikt.sus b, .verdikt.sus .gor { color: var(--sus-tekst); }
.verdikt.high b, .verdikt.high .gor { color: var(--high-tekst); }

/* Hvad vi kigger paa */
.kort { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.kort article { background: var(--card); border: 3px solid var(--ink); border-radius: 20px; box-shadow: var(--skygge); padding: 26px; }
.kort .maerkat {
  font-family: 'Fredoka', sans-serif; font-size: 12.5px; color: var(--purple);
  background: var(--pastel); border: 1px solid var(--pastel-2); border-radius: 20px; padding: 3px 11px;
  display: inline-block; margin-bottom: 12px;
}
.kort h3 { font-size: 19px; margin: 0 0 9px; letter-spacing: -0.2px; }
.kort p { margin: 0; font-size: 15.5px; color: var(--body); line-height: 1.55; }

/* HVOR TIT TAGER VI FEJL. Tallene skal bekraeftes af en rigtig koersel. */
.maalt { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; max-width: 900px; margin: 0 auto 34px; }
.maalt div { text-align: center; background: var(--card); border: 3px solid var(--ink); border-radius: 20px; box-shadow: var(--skygge); padding: 28px 18px; }
.maalt b { display: block; font-family: 'Fredoka', sans-serif; font-size: clamp(30px, 4vw, 44px); color: var(--purple); line-height: 1.05; letter-spacing: -0.5px; margin-bottom: 4px; }
.maalt span { font-size: 15px; color: var(--body); }
.maalt-note { text-align: center; max-width: 680px; margin: 0 auto; font-size: 15.5px; color: var(--body); line-height: 1.6; }

/* Hvem staar bag */
.hvem { max-width: 760px; margin: 0 auto; text-align: center; }
.hvem h2 { font-size: clamp(28px, 3.4vw, 38px); margin-bottom: 20px; }
.hvem .mission { font-family: 'Fredoka', sans-serif; font-size: 21px; line-height: 1.4; color: var(--text); max-width: 560px; margin: 0 auto 20px; }
.hvem p { color: var(--body); margin: 0 auto 16px; max-width: 620px; }
.hvem p:last-child { margin-bottom: 0; }

/* === Bundlinje === */

/* === Smallere skaerme === */
/* ===============================================================
   MENUEN TIL SMALLE SKAERME

   Den ligger i HTML paa hver side, men er skjult saa laenge den
   vandrette navigation er der. Den ene maa aldrig vaere vaek uden
   at den anden er der: foer 30. august var navigationen simpelthen
   fjernet under 1180 pixels, og saa var der ingen vej til de andre
   sider undtagen sidefoden. Det gjaldt ogsaa en helt almindelig
   baerbar der ikke stod i fuld skaerm.
   =============================================================== */
.menu { position: relative; display: none; }
.menu > summary { list-style: none; }
.menu > summary::-webkit-details-marker { display: none; }
.menu-liste {
  position: absolute; top: 48px; left: 0; z-index: 70;
  background: var(--card); border: 2px solid var(--ink); border-radius: 14px;
  box-shadow: var(--skygge); padding: 6px; min-width: 200px;
}
.menu-liste a {
  display: block; padding: 10px 12px; border-radius: 9px;
  color: var(--text); text-decoration: none; font-size: 15.5px; font-weight: 600;
  white-space: nowrap;
}
.menu-liste a:hover { background: var(--pastel); color: var(--purple); }
.menu-liste a[aria-current] { background: var(--pastel); color: var(--purple); }

@media (max-width: 1180px) {
  .top nav { display: none; }
  .menu { display: block; }
  .top { grid-template-columns: 1fr auto; }
}
@media (max-width: 1080px) {
  .hero .wrap { grid-template-columns: 1fr; gap: 44px; justify-items: center; text-align: center; }
  .hero .lead { margin-left: auto; margin-right: auto; }
  .hero .knapper { justify-content: center; }
  .pop { width: min(430px, 92vw); }
  .kort { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px) {
  .verdikter { grid-template-columns: repeat(2, 1fr); }
  .foer-med, .adresser, .maalt { grid-template-columns: 1fr; }
}

/* Stemplet er 104 pixels bredt, og en kortspalte paa en telefon er 88
   pixels indvendigt. Det stak altsaa 16 pixels ud til hver side. */
@media (max-width: 620px) {
  .verdikt { padding: 18px 12px; }
  .verdikt img { width: 100%; max-width: 104px; height: auto; aspect-ratio: 1; }
  .verdikt p { font-size: 13.5px; }
}
@media (max-width: 620px) {
  body { font-size: 16px; }
  section { padding: 66px 0; }
  .kort { grid-template-columns: 1fr; }
  .mark svg { width: 34px; height: 34px; }
  .mark .navn { font-size: 24px; }
  .knap-lille { display: none; }
  .pop { height: 520px; }
  .pop-stamp { width: 74px; height: 74px; }
  .pop-verdict { font-size: 21px; padding: 14px 12px; }
  .knap { width: 100%; justify-content: center; }
}

/* ===============================================================
   PANELER

   Alle sektioner saa ens ud, saa siden foeltes som eet langt afsnit. Nogle
   ligger nu i en stor kasse, andre staar frit paa baggrunden, og saa er der
   noget at rulle FRA og noget at rulle TIL.

   Kasserne bruges paa de sektioner der er en samlet paastand ("hvor tit tager
   den fejl", "hvem staar bag"). Sektioner der allerede bestaar af kort, faar
   ingen kasse udenom, ellers bliver det kasser i kasser.
   =============================================================== */
.panel {
  background: var(--card);
  border: 3px solid var(--ink); border-radius: 28px;
  box-shadow: 7px 7px 0 var(--ink);
  padding: 64px 48px;
}
.panel .hoved { margin-bottom: 40px; }
/* Kortene inde i et panel skal ikke ogsaa have kant og skygge */
.panel .maalt div {
  background: var(--pastel); border: 2px solid var(--pastel-2);
  box-shadow: none; border-radius: 18px;
}
.panel-lilla {
  background: var(--pastel); border-color: var(--purple);
  box-shadow: 7px 7px 0 var(--purple);
}
.panel-lilla .maalt div { background: var(--card); border-color: var(--line); }
/* Den smalle udgave, til en enkelt paastand */
.panel-smal { max-width: 820px; margin: 0 auto; padding: 52px 44px; }

@media (max-width: 620px) {
  .panel { padding: 40px 22px; border-radius: 22px; }
  .panel-smal { padding: 36px 22px; }
}

/* ===============================================================
   Bundlinje: maerket, undersiderne, og aarstallet
   =============================================================== */
footer { border-top: 1px solid var(--line); padding: 40px 0 52px; font-size: 15px; color: var(--text-2); }
.fod { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 30px; }
.fod .mark svg { width: 32px; height: 32px; }
.fod .mark .navn { font-size: 23px; }
.fod nav { display: flex; flex-wrap: wrap; gap: 10px 24px; }
.fod nav a { color: var(--text-2); text-decoration: none; }
.fod nav a:hover { color: var(--purple); text-decoration: underline; }
.fod .aar { margin-left: auto; white-space: nowrap; }
@media (max-width: 860px) {
  .fod .aar { margin-left: 0; width: 100%; }
}

/* ===============================================================
   DOKUMENTSIDER: privatlivspolitik, vilkaar

   Juridiske sider bliver ikke laest hvis de ser ud som jura. Samme skrift og
   samme farver som resten, bare i een smal spalte med luft omkring. Tabeller
   frem for lange afsnit, hvor det kan lade sig goere: "hvad, hvorfor, hvor
   laenge" er lettere at overskue i tre kolonner end i tre saetninger.
   =============================================================== */
.doku { max-width: 780px; margin: 0 auto; padding: 56px 0 96px; }
.doku h1 { font-size: clamp(32px, 4.4vw, 46px); margin-bottom: 14px; }
.doku .manchet { font-size: 19px; color: var(--body); margin: 0 0 10px; line-height: 1.55; }
.doku .dato { font-size: 14.5px; color: var(--text-2); margin: 0 0 40px; }

/* Kort resume i toppen. Den fulde tekst staar nedenunder, men de fleste
   laeser kun det her, og saa skal det vaere sandt og daekkende. */
.kortfortalt {
  background: var(--pastel); border: 3px solid var(--purple); border-radius: 20px;
  box-shadow: 5px 5px 0 var(--purple); padding: 28px 30px; margin-bottom: 48px;
}
.kortfortalt h2 { font-size: 21px; margin-bottom: 14px; }
.kortfortalt ul { margin: 0; padding-left: 20px; }
.kortfortalt li { margin-bottom: 9px; line-height: 1.55; }
.kortfortalt li:last-child { margin-bottom: 0; }

.doku h2 { font-size: 25px; margin: 44px 0 14px; }
.doku h3 { font-size: 18px; margin: 26px 0 8px; }
.doku p { margin: 0 0 16px; color: var(--body); }
.doku ul, .doku ol { margin: 0 0 16px; padding-left: 22px; color: var(--body); }
.doku li { margin-bottom: 8px; line-height: 1.6; }
.doku strong { color: var(--text); font-weight: 600; }
.doku a { color: var(--purple); }
.doku code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 14.5px; background: var(--pastel); padding: 1px 6px; border-radius: 6px; word-break: break-all; }

.tabel { width: 100%; border-collapse: collapse; margin: 0 0 22px; font-size: 15.5px; }
.tabel th, .tabel td { text-align: left; vertical-align: top; padding: 11px 14px; border-bottom: 2px solid var(--line); }
.tabel th { font-family: 'Fredoka', sans-serif; font-weight: 600; color: var(--text); font-size: 15px; }
.tabel td { color: var(--body); }
.tabel tr:last-child td { border-bottom: none; }
.tabel-ramme { border: 3px solid var(--ink); border-radius: 18px; overflow: hidden; background: var(--card); margin-bottom: 24px; }
.tabel-ramme .tabel { margin: 0; }

.kontaktkort {
  background: var(--card); border: 3px solid var(--ink); border-radius: 18px;
  box-shadow: var(--skygge); padding: 22px 26px; margin: 0 0 24px;
}
.kontaktkort p { margin: 0 0 4px; }
.kontaktkort p:last-child { margin-bottom: 0; }

@media (max-width: 620px) {
  .doku { padding: 34px 0 64px; }
  .kortfortalt { padding: 22px; }
  .tabel th, .tabel td { padding: 9px 10px; font-size: 14.5px; }
}

/* ===============================================================
   REN SIDE

   Privatlivspolitik og vilkaar har ingen baggrund. De skal laeses, ikke
   nydes, og straaler bag en tabel over opbevaringsperioder er stoej. Det
   signalerer ogsaa noget: her er der ikke noget der skal saelges.
   =============================================================== */
body.ren { background: var(--card); }
body.ren .top { background: color-mix(in srgb, var(--card) 88%, transparent); }
body.ren .kortfortalt { box-shadow: none; }
body.ren .tabel-ramme { box-shadow: none; border-width: 2px; }
body.ren .kontaktkort { box-shadow: none; border-width: 2px; }
body.ren footer { background: transparent; }

/* ===============================================================
   FORMULAR
   =============================================================== */
.form-kort {
  background: var(--card); border: 3px solid var(--ink); border-radius: 22px;
  box-shadow: var(--skygge); padding: 34px;
}
body.ren .form-kort { box-shadow: none; border-width: 2px; }
.felt { margin-bottom: 20px; }
.felt label { display: block; font-family: 'Fredoka', sans-serif; font-size: 15.5px; margin-bottom: 7px; }
.felt .hjaelp { font-size: 13.5px; color: var(--text-2); margin: 0 0 8px; }
.felt input, .felt select, .felt textarea {
  width: 100%; padding: 13px 14px; font: inherit; font-size: 16px;
  color: var(--text); background: var(--card);
  border: 2px solid var(--line); border-radius: 12px;
}
.felt textarea { min-height: 168px; line-height: 1.55; resize: vertical; }
.felt input:focus, .felt select:focus, .felt textarea:focus { outline: none; border-color: var(--purple); }
/* Fluepapiret: skjult for mennesker, synligt for robotter. Ikke display:none,
   for det springer nogle robotter over. */
.fluepapir { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-send { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.form-svar { font-size: 15.5px; margin: 16px 0 0; display: none; }
.form-svar.vis { display: block; }
.form-svar.god { color: var(--ok-tekst); font-weight: 600; }
.form-svar.skidt { color: var(--high-tekst); font-weight: 600; }

/* ===============================================================
   FAQ. Hvert spoergsmaal er et <details>, saa der stadig ikke er JavaScript
   til andet end temaknappen.
   =============================================================== */
.faq { max-width: 820px; margin: 0 auto; }
.faq-gruppe { font-family: 'Fredoka', sans-serif; font-size: 15px; color: var(--purple); text-transform: uppercase; letter-spacing: .6px; margin: 40px 0 14px; }
.faq-gruppe:first-child { margin-top: 0; }
.faq details {
  background: var(--card); border: 2px solid var(--line); border-radius: 16px;
  margin-bottom: 12px; overflow: hidden;
}
.faq details[open] { border-color: var(--purple); }
.faq summary {
  list-style: none; cursor: pointer; padding: 18px 22px;
  font-family: 'Fredoka', sans-serif; font-size: 17.5px; color: var(--text);
  display: flex; gap: 14px; align-items: flex-start;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '+'; margin-left: auto; color: var(--purple);
  font-size: 22px; line-height: 1; flex-shrink: 0;
}
.faq details[open] summary::after { content: '\2212'; }
.faq summary:hover { color: var(--purple); }
.faq .svar-tekst { padding: 0 22px 20px; color: var(--body); }
.faq .svar-tekst p { margin: 0 0 12px; }
.faq .svar-tekst p:last-child { margin-bottom: 0; }
.faq .svar-tekst code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 14.5px; background: var(--pastel); padding: 1px 6px; border-radius: 6px; }

/* Den lille sidebemaerkning under hero-teksten. Skal kunne laeses, men ikke
   laeses foerst: mindre, lysere og en anelse skaev, saa den ligner noget der
   blev sagt ud af mundvigen. */
.psst {
  font-size: 14px; color: var(--text-2); opacity: .82;
  font-style: italic; margin: -18px 0 26px; max-width: 420px;
}

/* ===============================================================
   DEMOEN paa "Saadan virker det"

   OVERSAETTELSE ER HELE POINTEN I HVORDAN DEN ER BYGGET.
   Al tekst staar i almindelige HTML-elementer. JavaScript saetter KUN et
   tal, data-trin, paa den yderste kasse, og CSS bestemmer hvad der er
   synligt ved hvert trin. Der er ikke en eneste streng i koden.

   Det betyder at siden oversaettes praecis som alle andre sider: man
   oversaetter HTML'en, og demoen virker. Havde teksterne ligget i et
   JavaScript-objekt, skulle build-i18n.js kunne rode i kildekode, og saa
   ville ni sprog blive ni steder at lave fejl.

   Uden JavaScript staar demoen paa sidste trin med det hele synligt. Man
   mister animationen, ikke indholdet.
   =============================================================== */
/* Bredere end foer. Popup'en er 372 pixels i virkeligheden, og i en smal
   ramme fyldte den halvdelen af browseren og saa forkert ud. Nu er rammen
   saa stor som spalten tillader, og forholdet ligner en rigtig skaerm. */
/* Synlig for skaermlaesere og soegemaskiner, ikke for oejet. */
.kun-oplaest {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.demo { max-width: 1180px; margin: 0 auto 8px; }
.demo-ramme {
  position: relative;
  background: var(--card); border: 3px solid var(--ink); border-radius: 20px;
  box-shadow: var(--skygge); overflow: hidden;
}

/* Den falske browser */
.demo-bar {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px; background: var(--pastel); border-bottom: 2px solid var(--line);
}
.demo-prikker { display: flex; gap: 6px; }
/* Roed, gul, groen som paa en rigtig maskine. Foer var alle tre den samme
   lilla, og saa lignede rammen ikke en browser, den lignede en kasse. */
.demo-prikker i { width: 11px; height: 11px; border-radius: 50%; }
.demo-prikker .roed  { background: #FF5F57; box-shadow: inset 0 0 0 1px rgba(0,0,0,.12); }
.demo-prikker .gul   { background: #FEBC2E; box-shadow: inset 0 0 0 1px rgba(0,0,0,.12); }
.demo-prikker .groen { background: #28C840; box-shadow: inset 0 0 0 1px rgba(0,0,0,.12); }
.demo-url {
  flex: 1; display: flex; align-items: center; gap: 9px;
  background: var(--card); border: 2px solid var(--line); border-radius: 999px;
  padding: 7px 15px; font-size: 15px; min-width: 0;
}
.demo-url svg { width: 15px; height: 15px; opacity: .45; flex-shrink: 0; }
.demo-url span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* ===============================================================
   VAERKTOEJSLINJENS IKONER

   Ikonet var foer en SVG tegnet i haanden, med bloede hjoerner og et
   lille lyn midt i en stor flade. Det ligner ikke filen browseren
   faktisk viser. Nu bruges brand/favicon.png, altsaa den rigtige:
   haard firkant, lynet fylder hele fladen.
   =============================================================== */
.demo-ikoner { display: flex; align-items: center; gap: 7px; flex-shrink: 0; }
.demo-ext {
  width: 26px; height: 26px; border-radius: 6px;
  opacity: .78; transition: opacity .2s;
}
.demo-ext:hover { opacity: 1; }
.demo-ext-link { display: flex; line-height: 0; border-radius: 6px; }
.demo-ext-link:focus-visible { outline: 2px solid var(--purple); outline-offset: 2px; }
.demo-ikon {
  flex-shrink: 0; width: 30px; height: 30px; border-radius: 4px;
  display: block; transition: transform .25s, box-shadow .25s;
}
.demo[data-trin="2"] .demo-ikon { transform: scale(1.2); box-shadow: 0 0 0 4px var(--pastel-2); }
.demo-ikon { transition: transform .5s cubic-bezier(.22,.9,.28,1), box-shadow .5s; }

/* Den falske side bagved */
/* Hoej nok til at popup'en er der HELT, ogsaa naar rapporten er foldet
   ud. Foer var den 430, og saa blev de nederste grunde skaaret af. */
.demo-flade { position: relative; min-height: 600px; padding: 34px 40px; }
.demo-falsk h4 { font-family: 'Fredoka', sans-serif; font-size: 25px; margin: 0 0 10px; color: var(--text); }
.demo-falsk p { color: var(--text-2); margin: 0 0 18px; max-width: 380px; font-size: 15.5px; }
.demo-felt {
  max-width: 340px; height: 42px; border: 2px solid var(--line);
  border-radius: 10px; margin-bottom: 12px; background: var(--card);
}
.demo-koeb {
  display: inline-block; padding: 12px 26px; border-radius: 10px;
  background: var(--pastel-2); color: var(--purple);
  font-family: 'Fredoka', sans-serif; font-size: 16px;
}

/* Popup'en oven paa, som i browseren. 372 pixels er den rigtige bredde,
   den samme som popup.html saetter paa body. */
.demo-pop {
  position: absolute; top: 14px; right: 20px; width: 372px;
  opacity: 0; transform: translateY(-14px) scale(.97); transform-origin: top right;
  /* Langsomt og bloedt. .28s foelte snappy, som om popup'en blev smidt
     ind. Nu glider den, og kurven slutter roligt i stedet for at stoppe. */
  transition: opacity .75s ease, transform .75s cubic-bezier(.22,.9,.28,1);
  pointer-events: none;
}
/* Samme baggrundsmoenster som den aegte popup, se extension/popup.html.
   Uden det lignede demoen en hjemmeside der forestillede en extension. */
.demo-pop .pop {
  background: var(--egg);
  background-image: repeating-conic-gradient(from 0deg at 50% 20%,
    var(--egg-2) 0deg 9deg, transparent 9deg 18deg);
}
/* Midten ruller, praecis som i den rigtige popup, hvor Chrome giver
   hoejst 600 pixels. Det er derfor rapporten kan foldes ud uden at
   noget bliver klippet. */
.demo-pop .pop-body { max-height: 430px; overflow: hidden; }
.demo[data-trin="5"] .pop-body { overflow-y: auto; }
.demo:not([data-trin="0"]):not([data-trin="1"]) .demo-pop { opacity: 1; transform: none; }

/* Hvilke dele af popup'en der er synlige, trin for trin.
   Scenerne toner ind i stedet for at blive skiftet ud paa et billede. */
.demo-scene { display: none; opacity: 0; transform: translateY(6px); }
.demo[data-trin="2"] .scene-start,
.demo[data-trin="3"] .scene-tjekker,
.demo[data-trin="4"] .scene-svar,
.demo[data-trin="5"] .scene-svar {
  display: block;
  animation: demoTon .8s cubic-bezier(.22,.9,.28,1) forwards;
}
@keyframes demoTon { to { opacity: 1; transform: none; } }
.demo-rapport { display: none; }
.demo[data-trin="5"] .demo-rapport { display: block; }
.demo[data-trin="5"] .demo-mere-knap { background: var(--pastel-2); }

/* ===============================================================
   MUSEMARKOEREN

   Positionen kom foer fra CSS med faste procenter pr. trin, og den
   flyttede sig SAMTIDIG med at trinnet skiftede. Resultatet var at
   den altid haltede bagefter: popup'en var der foer musen naaede
   knappen. Og "Laes mere" ramte den slet ikke, for procenten var
   gaettet.

   Nu maaler JavaScript midten af det element der skal klikkes paa og
   saetter --mx og --my. Musen faar besked FOER trinnet skifter, saa
   den er fremme naar der sker noget. Se demoens tidslinje i HTML.
   =============================================================== */
.demo-mus {
  position: absolute; z-index: 40; width: 24px; height: 24px;
  left: var(--mx, 30%); top: var(--my, 45%);
  /* 1,3 sekunder og en kurve der starter blidt og slutter blidt. Musen
     skal se ud som en haand der flytter sig, ikke som noget der bliver
     teleporteret. Tallet skal matche FLYT_FOER i tidslinjen. */
  transition: left 1.3s cubic-bezier(.4,0,.2,1), top 1.3s cubic-bezier(.4,0,.2,1), opacity .5s;
  opacity: 0; pointer-events: none;
}
.demo[data-mus] .demo-mus { opacity: 1; }
.demo-mus svg { width: 100%; height: 100%; filter: drop-shadow(1px 2px 0 rgba(0,0,0,.28)); }

/* Ringen der breder sig ud naar der klikkes. Uden den var det svaert at
   se HVORNAAR klikket faldt, og saa lignede popup'en noget der bare kom. */
.demo-klik {
  position: absolute; left: 50%; top: 50%; width: 12px; height: 12px;
  margin: -6px 0 0 -6px; border-radius: 50%;
  border: 2px solid var(--purple); opacity: 0;
}
.demo[data-klik] .demo-klik { animation: demoKlik .5s ease-out; }
@keyframes demoKlik {
  0%   { opacity: .9; transform: scale(.4); }
  100% { opacity: 0;  transform: scale(3.6); }
}

/* Fremdriften under. Teksten er HTML, kun det aktive trin markeres af CSS. */
.demo-trin { list-style: none; margin: 22px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; counter-reset: dt; }
.demo-trin li {
  counter-increment: dt; position: relative;
  padding: 14px 16px 14px 46px; border-radius: 14px; font-size: 15px;
  color: var(--text-2); background: var(--card); border: 2px solid var(--line);
  transition: color .5s ease, border-color .5s ease, background .5s ease;
}
.demo-trin li::before {
  content: counter(dt); position: absolute; left: 14px; top: 13px;
  width: 22px; height: 22px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Fredoka', sans-serif; font-size: 12px;
  background: var(--pastel); color: var(--purple);
}
.demo[data-trin="2"] .demo-trin li:nth-child(1),
.demo[data-trin="3"] .demo-trin li:nth-child(2),
.demo[data-trin="4"] .demo-trin li:nth-child(3),
.demo[data-trin="5"] .demo-trin li:nth-child(4) {
  color: var(--text); border-color: var(--purple); background: var(--pastel);
}
.demo[data-trin="2"] .demo-trin li:nth-child(1)::before,
.demo[data-trin="3"] .demo-trin li:nth-child(2)::before,
.demo[data-trin="4"] .demo-trin li:nth-child(3)::before,
.demo[data-trin="5"] .demo-trin li:nth-child(4)::before { background: var(--purple); color: #fff; }

/* ===============================================================
   BJAELKEN FORNEDEN

   Som paa en video: hvor langt er der igen af HELE forloebet.

   Foerste udgave gav hvert trin sin egen bjaelke, og den loeb fuld
   fire gange. Det svarer ikke til noget man kender: paa en video
   viser stregen hvor langt man er i filmen, ikke i den scene man ser
   paa lige nu. Nu er der een streg, og den loeber een gang.

   --varighed saettes af JavaScript til hele laengden, som et tal.
   Ingen tekst, saa der er stadig intet at oversaette i koden.
   =============================================================== */
.demo-bjaelke {
  position: absolute; left: 0; right: 0; bottom: 0; height: 6px;
  background: var(--pastel); z-index: 30;
  display: none;   /* uden JavaScript er der ingen afspilning at foelge */
}
.demo[data-koerer] .demo-bjaelke, .demo[data-faerdig] .demo-bjaelke { display: block; }
.demo-bjaelke i {
  display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, var(--purple), var(--pastel-2));
}
.demo[data-koerer] .demo-bjaelke i {
  animation: demoBjaelke var(--varighed, 24s) linear forwards;
}
@keyframes demoBjaelke { from { width: 0; } to { width: 100%; } }

/* ===============================================================
   AFSPIL IGEN

   Laa foer under rammen og stod der hele tiden, ogsaa midt i
   afspilningen hvor der ikke var noget at spille om igen. Nu ligger
   den midt i billedet og kommer foerst naar forloebet er loebet ud,
   som paa en video.
   =============================================================== */
.demo-slut {
  position: absolute; inset: 0; z-index: 45;
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--egg) 62%, transparent);
  backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
  opacity: 0; visibility: hidden;
  transition: opacity .5s ease, visibility .5s;
}
.demo[data-faerdig] .demo-slut { opacity: 1; visibility: visible; }
.demo-slut .demo-igen {
  transform: translateY(8px);
  transition: transform .5s cubic-bezier(.22,.9,.28,1);
}
.demo[data-faerdig] .demo-slut .demo-igen { transform: none; }

.demo-styr { display: flex; justify-content: center; margin-top: 22px; }
.demo-igen {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 28px; font: inherit; font-family: 'Fredoka', sans-serif; font-size: 17px;
  color: var(--knap-tekst); background: var(--knap-flade);
  border: 3px solid var(--ink); border-radius: 14px; cursor: pointer;
  box-shadow: var(--skygge);
}
.demo-igen:hover { background: var(--knap-flade-hover); }


/* Prikkerne mens den tjekker */
.demo-venter { display: flex; align-items: center; justify-content: center; gap: 7px; padding: 26px 0 12px; }
.demo-venter i { width: 10px; height: 10px; border-radius: 50%; background: var(--purple); opacity: .3; animation: hop 1.1s infinite; }
.demo-venter i:nth-child(2) { animation-delay: .16s; }
.demo-venter i:nth-child(3) { animation-delay: .32s; }
@keyframes hop { 0%, 60%, 100% { opacity: .3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-6px); } }

@media (prefers-reduced-motion: reduce) {
  .demo-pop, .demo-mus, .demo-ikon, .demo-trin li { transition: none; }
  .demo-venter i, .demo-bjaelke i, .demo-klik { animation: none; }
  .demo-scene { animation: none; opacity: 1; transform: none; }
  .demo-bjaelke, .demo-slut { display: none; }
}
@media (max-width: 900px) {
  .demo-trin { grid-template-columns: repeat(2, 1fr); }
  .demo-pop { position: static; width: auto; max-width: 372px; margin: 20px auto 0; opacity: 1; transform: none; }
  .demo-pop .pop-body { max-height: none; overflow: visible; }
  .demo-mus, .demo-bjaelke, .demo-slut { display: none; }
  .demo-flade { min-height: 0; padding: 24px; }
  .demo-ext { width: 22px; height: 22px; }
  .demo-ikoner { gap: 5px; }
}
@media (max-width: 620px) {
  .demo-trin { grid-template-columns: 1fr; }
  .demo-flade { padding: 20px; }
}

/* ===============================================================
   BROWSERKNAPPER

   Chrome og Firefox i deres egne farver, men i vores form: tyk kontur og
   forskudt skygge, saa de ligner noget der hoerer til her og ikke to
   fremmede logoer klistret paa.

   Maerkerne er tegnet som SVG. Chromes fire farver og Firefox' orange
   forloeb er de officielle, for det er dem folk genkender paa et splitsekund,
   og det er hele grunden til at have dem paa knappen.
   =============================================================== */
/* justify-content, ikke text-align. Foraeldrekassen har text-align:
   center, men det flytter ikke flex-boerns placering, saa de to knapper
   klumpede sig til venstre i en bred kasse. */
.browserknapper { display: flex; gap: 16px; flex-wrap: wrap; align-items: stretch; justify-content: center; }
/* Paa forsiden staar de i en spalte ved siden af popup'en, og der skal de
   flugte med teksten over dem og ikke midt i spalten. */
.hero .browserknapper { justify-content: flex-start; }
.bknap {
  display: inline-flex; align-items: center; gap: 13px;
  padding: 14px 26px 14px 20px; text-decoration: none;
  border: 3px solid var(--ink); border-radius: 16px; box-shadow: var(--skygge);
  background: var(--card); color: var(--text);
  transition: transform .08s, box-shadow .08s;
}
.bknap:hover { transform: translate(2px, 2px); box-shadow: 3px 3px 0 var(--ink); }
.bknap:active { transform: translate(5px, 5px); box-shadow: 0 0 0 var(--ink); }
.bknap img { width: 34px; height: 34px; flex-shrink: 0; display: block; }
.bknap .txt { display: flex; flex-direction: column; line-height: 1.2; text-align: left; }
.bknap .lille { font-size: 12.5px; color: var(--text-2); }
.bknap .stor { font-family: 'Fredoka', sans-serif; font-size: 19px; font-weight: 600; }
/* Et strejf af browserens egen farve, saa de kan skelnes uden at raabe */
.bknap.chrome { background: linear-gradient(180deg, color-mix(in srgb, #4285F4 7%, var(--card)), var(--card)); }
.bknap.chrome .stor { color: #1A73E8; }
.bknap.firefox { background: linear-gradient(180deg, color-mix(in srgb, #FF7139 9%, var(--card)), var(--card)); }
.bknap.firefox .stor { color: #D6501F; }
html[data-tema="moerk"] .bknap.chrome .stor { color: #8AB4F8; }
html[data-tema="moerk"] .bknap.firefox .stor { color: #FF9E6B; }

@media (max-width: 480px) {
  .browserknapper { flex-direction: column; }
  .bknap { justify-content: center; }
}


/* ===============================================================
   BESKYT DIG SELV: laeringsbrowseren

   En liste med fem links til fem afsnit er en indholdsfortegnelse, ikke en
   guide. Man laeser den ikke, man ruller forbi den.

   I stedet: een falsk browser med fem faner. Hver fane er et rigtigt eksempel
   man kan staa og kigge paa, med nummererede prikker man kan trykke paa for
   at faa at vide hvad der er galt netop dér. Man LEDER selv efter tegnene,
   og det er den eneste maade man husker dem paa.

   OVERSAETTELSE
   Fanerne skiftes med skjulte radioknapper og CSS, forklaringerne aabnes med
   skjulte afkrydsningsfelter og CSS. Der er ingen JavaScript og derfor ingen
   tekst i kode. Siden oversaettes som alle andre sider.

   Prikkernes placering staar som style="top:..;left:.." i HTML'en. De skal
   IKKE oversaettes, og de flytter sig ikke naar teksten bliver laengere,
   fordi de ligger oven paa billedet og ikke i teksten.
   =============================================================== */
/* Bredere end broedteksten: eksemplerne skal ligne en rigtig skaerm. */
.laer { margin: 0 auto 60px; }
.laer-vindue {
  background: var(--card); border: 3px solid var(--ink); border-radius: 20px;
  box-shadow: var(--skygge); overflow: hidden;
}

/* Radioknapperne styrer fanerne. Skjult, men naabare med tastatur. */
.laer-radio { position: absolute; opacity: 0; width: 1px; height: 1px; }

.laer-faner {
  display: flex; gap: 4px; padding: 10px 12px 0;
  background: var(--pastel); border-bottom: 2px solid var(--line);
  flex-wrap: nowrap;
}
/* Fanerne har alle sammen en kant, saa man kan se at de kan trykkes paa.
   Foer var kun den valgte markeret, og saa lignede de fire andre broedtekst.
   De maa ogsaa gerne bryde til to raekker: den femte blev skaaret af i stedet
   for at flytte ned. */
.laer-fane {
  display: flex; align-items: center; gap: 7px;
  flex: 1 1 0; min-width: 0; justify-content: center;
  padding: 9px 10px; border-radius: 11px 11px 0 0; cursor: pointer;
  font-size: 13.5px; color: var(--text-2); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
  border: 2px solid var(--pastel-2); border-bottom: none;
  background: color-mix(in srgb, var(--card) 55%, transparent);
}
.laer-fane:hover { color: var(--purple); border-color: var(--purple); }
.laer-fane .fav {
  width: 17px; height: 17px; border-radius: 5px; flex-shrink: 0;
  background: var(--pastel-2); display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 700; color: var(--purple);
}
.laer-radio:focus-visible + .laer-fane { outline: 2px solid var(--purple); outline-offset: 2px; }

/* Den valgte fane, og den tilhoerende scene */
#f1:checked ~ .laer-faner label[for="f1"],
#f2:checked ~ .laer-faner label[for="f2"],
#f3:checked ~ .laer-faner label[for="f3"],
#f4:checked ~ .laer-faner label[for="f4"],
#f5:checked ~ .laer-faner label[for="f5"] {
  background: var(--card); color: var(--text); font-weight: 600;
  border-color: var(--line);
}
.laer-scene { display: none; }
#f1:checked ~ .laer-scener .s1,
#f2:checked ~ .laer-scener .s2,
#f3:checked ~ .laer-scener .s3,
#f4:checked ~ .laer-scener .s4,
#f5:checked ~ .laer-scener .s5 { display: block; }

.laer-adresse {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 16px; border-bottom: 2px solid var(--line); background: var(--card);
}
.laer-adresse .pille {
  flex: 1; display: flex; align-items: center; gap: 9px; min-width: 0;
  background: var(--pastel); border-radius: 999px; padding: 7px 15px; font-size: 14.5px;
}
.laer-adresse svg { width: 15px; height: 15px; opacity: .45; flex-shrink: 0; }
.laer-adresse .pille span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Selve den falske side */
.laer-side { padding: 30px 34px 34px; }

/* ===============================================================
   RED FLAG-MAERKATERNE

   Foer var det nummererede prikker der laa OVEN PAA indholdet, og saa
   daekkede forklaringsboksen baade teksten bagved og den naeste prik.

   Nu ligger de i floedet, lige efter det de handler om. De kan derfor
   aldrig daekke noget, forklaringen skubber i stedet resten ned, og der er
   ingen koordinater i HTML'en der skal holdes styr paa naar teksten
   oversaettes til et sprog med laengere ord.
   =============================================================== */
.flag { display: block; margin: 8px 0 4px; }
.flag input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.flag > label {
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  padding: 5px 13px 5px 10px; border-radius: 999px;
  background: color-mix(in srgb, var(--high) 12%, var(--card));
  border: 2px solid var(--high); color: var(--high-tekst);
  font-family: 'Fredoka', sans-serif; font-size: 13px;
}
.flag > label::before {
  content: ''; width: 17px; height: 17px; flex-shrink: 0;
  background: url('brand/redflag.png') center/contain no-repeat;
}
.flag > label::after { content: '+'; margin-left: 3px; font-size: 15px; opacity: .7; }
.flag > label:hover { background: color-mix(in srgb, var(--high) 20%, var(--card)); }
.flag input:focus-visible + label { outline: 3px solid var(--purple); outline-offset: 2px; }
.flag input:checked + label { background: var(--roed-flade); color: var(--roed-flade-tekst); }
.flag input:checked + label::after { content: '\2212'; }
.flag .boks {
  display: none; max-width: 560px;
  background: var(--pastel); border: 2px solid var(--pastel-2);
  border-radius: 16px; padding: 16px 20px; font-size: 14.5px; line-height: 1.55;
  color: var(--body);
}
.flag .boks b { display: block; color: var(--purple); margin-bottom: 4px; font-family: 'Fredoka', sans-serif; font-size: 16px; }
.flag input:checked ~ .boks { display: block; }


/* Den falske webshop */
.f-shop h4 { font-family: 'Fredoka', sans-serif; font-size: 23px; margin: 0 0 6px; }
.f-shop .pris { font-family: 'Fredoka', sans-serif; font-size: 30px; color: var(--high-tekst); margin: 0 0 4px; }
.f-shop .foer { text-decoration: line-through; color: var(--text-2); font-size: 16px; }
.f-shop .ur { display: inline-block; background: var(--high); color: #fff; padding: 5px 12px; border-radius: 8px; font-size: 14px; margin: 12px 0; }
.f-shop .koeb { display: inline-block; background: var(--ok-flade); color: #fff; padding: 12px 26px; border-radius: 10px; font-family: 'Fredoka', sans-serif; }
.f-shop .fod { margin-top: 26px; padding-top: 16px; border-top: 2px solid var(--line); font-size: 13px; color: var(--text-2); }
.f-shop .betal { display: flex; gap: 8px; margin: 14px 0 0; flex-wrap: wrap; }
.f-shop .betal span { border: 2px solid var(--line); border-radius: 7px; padding: 5px 11px; font-size: 12.5px; color: var(--text-2); }

/* Den falske sms */
.f-sms { max-width: 380px; margin: 0 auto; }
.f-sms .afsender { text-align: center; font-size: 14px; color: var(--text-2); margin-bottom: 14px; }
.f-sms .boble {
  background: var(--pastel); border-radius: 18px 18px 18px 5px;
  padding: 15px 18px; font-size: 15.5px; line-height: 1.5;
}
.f-sms .boble a { color: var(--purple); word-break: break-all; }
.f-sms .tid { font-size: 12px; color: var(--text-2); margin-top: 7px; }

/* Det falske opkald */
.f-opkald { max-width: 320px; margin: 0 auto; text-align: center; }
.f-opkald .skaerm { background: var(--ink); color: var(--egg); border-radius: 26px; padding: 34px 24px; }
.f-opkald .hvem { font-family: 'Fredoka', sans-serif; font-size: 25px; margin-bottom: 4px; }
.f-opkald .nr { font-size: 14px; opacity: .7; margin-bottom: 26px; }
.f-opkald .knapper2 { display: flex; justify-content: center; gap: 26px; }
.f-opkald .rund { width: 54px; height: 54px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 22px; }
.f-opkald .groen { background: #2FA85F; }
.f-opkald .roed { background: var(--high); }

/* Trin-siderne (fane 4 og 5) */
.f-trin { list-style: none; margin: 0; padding: 0; counter-reset: ft; }
.f-trin li {
  counter-increment: ft; display: flex; gap: 15px; align-items: flex-start;
  padding: 15px 0; border-bottom: 2px solid var(--line);
}
.f-trin li:last-child { border-bottom: none; }
.f-trin li::before {
  content: counter(ft); flex-shrink: 0;
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--purple); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Fredoka', sans-serif; font-size: 14px;
}
.f-trin b { display: block; margin-bottom: 3px; }
.f-trin .t { color: var(--body); font-size: 15.5px; line-height: 1.55; }

/* Facit under vinduet: hvad man skulle have lagt maerke til */
.laer-facit {
  margin-top: 20px; background: var(--pastel);
  border: 2px solid var(--pastel-2); border-radius: 18px; padding: 22px 26px;
}
.laer-facit h3 { font-size: 17px; margin: 0 0 8px; }
.laer-facit p { margin: 0; color: var(--body); font-size: 15.5px; }
.laer-hint { text-align: center; font-size: 14.5px; color: var(--text-2); margin: 16px 0 0; }

@media (max-width: 760px) {
  .laer-side { padding: 22px; }
}

/* ===============================================================
   LAERINGSBROWSEREN PAA EN TELEFON

   Fem faner paa 375 pixels giver 70 pixels hver, og med et
   nummerskilt og lidt luft er der plads til to bogstaver. Der stod
   "Fu...", "Pa...", "Op...". Kommentaren ved .laer-fane sagde
   allerede at de gerne maatte bryde til to raekker, men koden sagde
   flex-wrap: nowrap.
   =============================================================== */
@media (max-width: 620px) {
  .laer-faner { flex-wrap: wrap; gap: 6px; padding: 10px 10px 0; }
  .laer-fane {
    flex: 1 1 calc(50% - 6px); white-space: normal; overflow: visible;
    font-size: 13px; padding: 8px 8px; border-radius: 11px;
    border-bottom: 2px solid var(--pastel-2);
  }
  .laer-side { padding: 16px; }
}

/* Hentemenuen i sidehovedet: samme valg som paa forsiden, men i en lille
   liste, saa der ikke er en "Installer" der foerer til noget uden valg. */
.hent { position: relative; }
.hent > summary { list-style: none; }
.hent > summary::-webkit-details-marker { display: none; }
.hent-liste {
  position: absolute; top: 48px; right: 0; z-index: 70; min-width: 226px;
  background: var(--card); border: 2px solid var(--ink); border-radius: 14px;
  box-shadow: var(--skygge); padding: 7px;
}
.hent-liste a {
  display: flex; align-items: center; gap: 11px; padding: 9px 11px;
  border-radius: 10px; color: var(--text); text-decoration: none; font-size: 15px;
}
.hent-liste a:hover { background: var(--pastel); }
.hent-liste img { width: 24px; height: 24px; display: block; }
.hent-liste b { font-family: 'Fredoka', sans-serif; font-weight: 600; }

/* Hastebanneret oeverst i den falske butik */
.f-shop .haster {
  background: color-mix(in srgb, var(--high) 12%, var(--card));
  border: 2px solid var(--high); border-radius: 12px;
  padding: 11px 16px; font-size: 15px; color: var(--high-tekst);
  margin-bottom: 4px;
}
.f-shop .haster b { font-family: 'Fredoka', sans-serif; font-size: 17px; }

/* Endelseslisten paa statistiksiden */
.tld-liste { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.tld-liste code { font-size: 15px; padding: 4px 10px; }

/* ===============================================================
   DE FALSKE SIDER, GJORT REALISTISKE

   Foerste udgave var en overskrift og lidt tekst paa en hvid flade, og saa
   ligner det ikke en hjemmeside, det ligner et udkast. En falsk butik der
   ikke ligner en butik, kan man ikke laere at genkende noget af.
   =============================================================== */

/* Butikkens eget sidehoved */
.f-top {
  display: flex; align-items: center; gap: 18px;
  padding: 12px 20px; background: var(--ink); color: var(--egg);
  border-radius: 12px 12px 0 0; font-size: 14px;
}
.f-top .butik { font-family: 'Fredoka', sans-serif; font-size: 18px; letter-spacing: .5px; }
.f-top .fnav { display: flex; gap: 16px; opacity: .75; }
.f-top .kurv { margin-left: auto; opacity: .8; }
.f-krop {
  display: grid; grid-template-columns: 240px 1fr; gap: 26px;
  border: 2px solid var(--line); border-top: none; border-radius: 0 0 12px 12px;
  padding: 22px 24px 24px;
}
/* Produktbilledet: en jakke antydet med former, saa der ikke skal hentes noget */
.f-billede {
  aspect-ratio: 1; border-radius: 12px; position: relative; overflow: hidden;
  background: linear-gradient(160deg, #E8E2EE, #D8CFE4);
}
.f-billede::before {
  content: ''; position: absolute; inset: 22% 26% 8%;
  background: #4A4356; border-radius: 40px 40px 12px 12px;
}
.f-billede::after {
  content: ''; position: absolute; left: 50%; top: 16%; width: 26%; height: 16%;
  transform: translateX(-50%); background: #5C5468; border-radius: 50%;
}
.f-stjerner { color: #E8A33B; font-size: 15px; letter-spacing: 2px; }
.f-stjerner span { color: var(--text-2); font-size: 13.5px; letter-spacing: 0; margin-left: 8px; }
.f-linje { height: 10px; border-radius: 5px; background: var(--pastel); margin-bottom: 8px; }
.f-linje.kort { width: 62%; }

/* Telefonrammen til sms og opkald */
.f-telefon {
  width: 300px; margin: 0 auto; background: var(--ink);
  border-radius: 34px; padding: 12px; box-shadow: 0 8px 26px rgba(0,0,0,.18);
}
.f-telefon .skaerm2 {
  background: var(--card); border-radius: 24px; overflow: hidden; min-height: 420px;
  display: flex; flex-direction: column;
}
.f-telefon .status {
  display: flex; align-items: center; justify-content: space-between;
  padding: 9px 18px 4px; font-size: 12px; color: var(--text-2);
}
.f-telefon .app-top {
  padding: 8px 16px 12px; border-bottom: 1px solid var(--line);
  text-align: center; font-size: 14px; font-weight: 600;
}
.f-telefon .traad { padding: 14px 14px 18px; display: flex; flex-direction: column; gap: 12px; }
.sms { max-width: 84%; padding: 11px 14px; border-radius: 16px; font-size: 14px; line-height: 1.45; }
.sms.dem { background: var(--pastel); border-bottom-left-radius: 5px; align-self: flex-start; }
.sms.aegte { background: var(--pastel); border-bottom-left-radius: 5px; align-self: flex-start; opacity: .72; }
.sms .stempel2 { display: block; font-size: 11px; color: var(--text-2); margin-top: 6px; }
.sms a { color: var(--purple); word-break: break-all; }

/* Opkaldsskaermen */
.f-telefon .opkald { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 30px 20px; text-align: center; }
.f-telefon .opkald .lille2 { font-size: 13px; color: var(--text-2); }
.f-telefon .opkald .navn2 { font-family: 'Fredoka', sans-serif; font-size: 26px; }
.f-telefon .opkald .nr2 { font-size: 14px; color: var(--text-2); margin-bottom: 30px; }
.f-telefon .opkald .taster { display: flex; gap: 34px; }
.f-telefon .opkald .rund2 { width: 56px; height: 56px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 22px; color: #fff; }
.f-telefon .opkald .tag { background: #2FA85F; }
.f-telefon .opkald .afvis { background: var(--roed-flade); }

/* EET flag pr. scene, med alle fundene inde i */
/* Det samlede flag folder ud til SIDEN, ikke nedad. Knappen bliver staaende
   til venstre, og forklaringen laegger sig ved siden af, saa eksemplet ovenfor
   ikke skubbes ud af syne i det oejeblik man vil laese hvorfor. */
.flag-samlet { display: flex; align-items: flex-start; gap: 20px; margin: 24px 0 0; }
.flag-samlet > label { font-size: 15px; padding: 10px 19px 10px 14px; flex-shrink: 0; }
.flag-samlet .boks { flex: 1; min-width: 0; max-width: none; margin: 0; }
.flag-samlet .boks ul { margin: 10px 0 0; padding-left: 20px; }
.flag-samlet .boks li { margin-bottom: 9px; line-height: 1.5; }
.flag-samlet .boks li:last-child { margin-bottom: 0; }
.flag-samlet .boks li b { display: inline; color: var(--high-tekst); }

@media (max-width: 900px) {
  .flag-samlet { flex-direction: column; gap: 12px; }
  .flag-samlet .boks { width: 100%; }
}

@media (max-width: 760px) {
  .f-krop { grid-template-columns: 1fr; }
  .f-telefon { width: 100%; max-width: 300px; }
}

/* ===============================================================
   QUIZZEN

   Ren HTML og CSS: to radioknapper pr. spoergsmaal, og facit vises naar man
   har svaret. Den rigtige knap har klassen "korrekt", saa CSS kan farve
   svaret uden at et eneste ord staar i kode.
   =============================================================== */
.quiz { max-width: 820px; margin: 0 auto; }
.quiz-sp {
  background: var(--card); border: 3px solid var(--ink); border-radius: 18px;
  box-shadow: var(--skygge); padding: 24px 26px; margin-bottom: 18px;
}
.quiz-sp .sp { font-family: 'Fredoka', sans-serif; font-size: 18px; margin: 0 0 16px; line-height: 1.35; }
.quiz-sp input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.quiz-sp label {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 104px; padding: 10px 20px; margin: 0 10px 0 0; cursor: pointer;
  border: 2px solid var(--line); border-radius: 11px;
  font-family: 'Fredoka', sans-serif; font-size: 15px; color: var(--text);
}
.quiz-sp label:hover { border-color: var(--purple); }
.quiz-sp input:focus-visible + label { outline: 3px solid var(--purple); outline-offset: 2px; }
.quiz-sp .korrekt:checked + label { background: var(--ok-flade); border-color: var(--ok-flade); color: #fff; }
.quiz-sp input:not(.korrekt):checked + label { background: var(--roed-flade); border-color: var(--roed-flade); color: var(--roed-flade-tekst); }
.quiz-sp .facit p { display: none; margin: 16px 0 0; padding: 14px 16px; border-radius: 12px; font-size: 15.5px; line-height: 1.55; }
.quiz-sp .facit .rigtigt { background: color-mix(in srgb, var(--ok) 14%, var(--card)); border: 2px solid var(--ok); }
.quiz-sp .facit .forkert { background: color-mix(in srgb, var(--high) 12%, var(--card)); border: 2px solid var(--high); }
.quiz-sp .korrekt:checked ~ .facit .rigtigt { display: block; }
.quiz-sp input:not(.korrekt):checked ~ .facit .forkert { display: block; }
.quiz-sp .facit b { color: var(--text); }

/* Produktbilledet er nu et rigtigt billede og ikke tegnede kasser */
.f-billede { background: var(--pastel); display: flex; align-items: center; justify-content: center; padding: 14px; }
.f-billede::before, .f-billede::after { content: none; }
.f-billede img { width: 100%; height: auto; display: block; }

/* Bundlinjen har sin egen rolige flade. Straalerne fra det faste lag skal
   ikke loebe hen over den: den er sidens afslutning, og der skal ske mindre
   og ikke mere. Kanten foroven markerer hvor baggrunden holder op. */
footer { background: var(--egg); position: relative; z-index: 2; }
body.ren footer { background: var(--card); }

/*
 * KONTRASTEN ER MAALT, IKKE GAETTET
 *
 * Alle tekstfarver mod alle flader er regnet igennem i begge temaer efter
 * WCAG, og de staar alle over 4,5. Det fandt tre fejl jeg ikke kunne se:
 *
 *   1. "SER FINT UD", "MISTAENKELIG" og "VAER OPMAERKSOM" stod i brandets
 *      egne farver paa hvidt og laa paa 2,6 til 3,1. Nu har hver af dem en
 *      moerkere tekstudgave ved siden af fladefarven.
 *   2. I moerkt tema bliver --purple til en lys lavendel, og hovedknappen
 *      havde hvid tekst. Kontrast 2,3. "Installer gratis" ville altsaa vaere
 *      naesten ulaeselig for alle med moerkt tema.
 *   3. Den roede flade lysner ogsaa i moerkt tema, og hvid tekst faldt til
 *      3,9. Derfor har verdiktbaandet nu sin egen faste flade.
 *
 * Skifter du en farve, saa koer maalingen igen inden du gemmer.
 */

/* ===============================================================
   AFSLOERINGEN paa forsiden

   Svaret paa "hvilken af dem er falsk" laa aabent, og saa var der ingen
   grund til at kigge paa de to adresser. Nu er det daekket, og man skal
   selv beslutte sig foerst. Det er den eneste maade pointen lander paa:
   man skal opdage at man ikke kan se forskel.

   Ren CSS. Et skjult afkrydsningsfelt, og et clip-path der koerer fra
   venstre mod hoejre, saa svaret skydes ind i stedet for bare at dukke op.
   =============================================================== */
/* ===============================================================
   GAET HVILKEN DER ER FALSK

   Foer stod der en knap med "Faa svaret". Man kunne trykke og faa det
   at vide uden at have taget stilling, og saa lander pointen ikke: den
   handler om at man IKKE kan se forskel, og det opdager man kun ved at
   have valgt forkert.

   To radioknapper og resten CSS. Ingen JavaScript, saa det virker
   ogsaa uden, og der er ingen strenge i kode der skal oversaettes.
   =============================================================== */
.gaet { max-width: 820px; margin: 0 auto; }
.gaet > input { position: absolute; opacity: 0; width: 1px; height: 1px; }

/* Foer man har valgt, ser de to ens ud. Det er hele oevelsen. */
.gaet .adresse {
  cursor: pointer; position: relative;
  transition: transform .14s cubic-bezier(.22,.9,.28,1), box-shadow .14s, border-color .2s;
}
.gaet .adresse:hover { transform: translate(-2px, -2px); box-shadow: 7px 7px 0 var(--ink); }
/* Radioknapperne er skjulte, saa tastaturets fokus skal vises paa det
   kort de hoerer til. Ellers kan man taste sig rundt i blinde. */
#gaetVenstre:focus-visible ~ .adresser .adresse:nth-child(1),
#gaetHoejre:focus-visible ~ .adresser .adresse:nth-child(2) {
  outline: 3px solid var(--purple); outline-offset: 3px;
}

/* Naar der er valgt, laases de, og der kommer et maerke paa hver. */
.gaet > input:checked ~ .adresser .adresse {
  cursor: default; pointer-events: none; transform: none; box-shadow: var(--skygge);
}
.doem {
  margin-left: auto; flex-shrink: 0;
  width: 30px; height: 30px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Fredoka', sans-serif; font-size: 18px; color: #fff;
  opacity: 0; transform: scale(.5);
  transition: opacity .35s .15s ease, transform .35s .15s cubic-bezier(.3,1.4,.5,1);
}
.gaet > input:checked ~ .adresser .doem { opacity: 1; transform: none; }

/* Den til hoejre ER den falske, uanset hvad der blev trykket paa.
   Facit aendrer sig ikke af hvad man gaettede. */
.gaet > input:checked ~ .adresser .adresse:nth-child(1) { border-color: var(--ok-flade); }
.gaet > input:checked ~ .adresser .adresse:nth-child(1) .doem {
  background: var(--ok-flade);
}
.gaet > input:checked ~ .adresser .adresse:nth-child(1) .doem::after { content: '\2713'; }
.gaet > input:checked ~ .adresser .adresse:nth-child(2) { border-color: var(--roed-flade); }
.gaet > input:checked ~ .adresser .adresse:nth-child(2) .doem {
  background: var(--roed-flade);
}
.gaet > input:checked ~ .adresser .adresse:nth-child(2) .doem::after { content: '\2715'; }

/* Svaret. Det fylder plads fra starten, saa siden ikke hopper. */
.gaet .svaret {
  max-height: 0; opacity: 0; overflow: hidden;
  clip-path: inset(0 100% 0 0);
  transition: max-height .7s cubic-bezier(.22,.9,.28,1), opacity .55s ease, clip-path .8s cubic-bezier(.22,.9,.28,1);
}
.gaet > input:checked ~ .svaret {
  max-height: 460px; opacity: 1; clip-path: inset(0 0 0 0);
}

/* Dommen over det man selv valgte, og kun den ene af de to. */
.gaet-dom {
  display: none; text-align: center; margin: 26px auto 0; max-width: 660px;
  font-family: 'Fredoka', sans-serif; font-size: 21px;
}
.gaet-dom.rigtigt { color: var(--ok-tekst); }
.gaet-dom.forkert { color: var(--high-tekst); }
#gaetVenstre:checked ~ .svaret .gaet-dom.forkert { display: block; }
#gaetHoejre:checked ~ .svaret .gaet-dom.rigtigt { display: block; }

.gaet .svar { margin-top: 14px; }

@media (prefers-reduced-motion: reduce) {
  .gaet .svaret, .gaet .adresse, .doem { transition: none; }
}
}

/* ===============================================================
   ER DU SIDEEJER?

   Siden laeses af nogen der lige har set en advarsel paa sin egen
   butik. Derfor staar handlingen oeverst og forklaringen nedenunder,
   og derfor er de tre loefter tal og ikke saetninger: fem hverdage,
   seks timer, nul kroner. Det er dem han skal kunne huske naar han
   lukker fanen igen.
   =============================================================== */
/* Een spalte. Der stod tre loeftekort ved siden af teksten, men de sagde
   det samme som manchetten med flere ord, og de fyldte den halve skaerm
   paa det vigtigste sted paa siden. */
.ejer-top { max-width: 640px; }
.ejer-tekst h1 { font-size: clamp(32px, 4.4vw, 46px); margin: 0 0 14px; }
.ejer-tekst .manchet { font-size: 19px; color: var(--body); line-height: 1.55; margin: 0 0 26px; }
.ejer-knap { font-size: 18px; }
.ejer-under { font-size: 15px; color: var(--text-2); margin: 16px 0 0; line-height: 1.55; }
.ejer-under strong { color: var(--text); }


/* Grundene. Korte linjer, ikke afsnit: den der laeser her leder efter
   sin egen situation og skal kunne finde den paa to sekunder. */
.grunde { list-style: none; margin: 0 0 30px; padding: 0; display: grid; gap: 10px; }
.grunde li {
  display: flex; gap: 13px; align-items: baseline;
  background: var(--card); border: 2px solid var(--pastel-2); border-radius: 14px;
  padding: 15px 20px; color: var(--body); line-height: 1.55;
}
.grunde li::before {
  content: ''; flex-shrink: 0; align-self: center;
  width: 9px; height: 9px; border-radius: 50%; background: var(--pastel-2);
}
.grunde b { color: var(--text); }
.grunde code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13.5px;
  background: var(--pastel); padding: 1px 6px; border-radius: 6px;
}

.grunde-fix {
  background: var(--pastel); border: 3px solid var(--purple); border-radius: 18px;
  box-shadow: 5px 5px 0 var(--purple); padding: 22px 26px;
  color: var(--body); line-height: 1.65; margin: 0 0 26px;
}
.grunde-fix b { color: var(--text); }
.grunde-note {
  font-size: 15px; color: var(--text-2); line-height: 1.6; margin: 0;
  text-align: center; max-width: 600px; margin-inline: auto;
}
.grunde-note a { color: var(--purple); }


@media (max-width: 620px) {
  .ejer-knap { width: 100%; justify-content: center; }
}

/* ===============================================================
   MOBIL, MAALT OG IKKE GAETTET

   Alle ni sider blev koert gennem en rigtig browser i 320, 375 og
   414 pixels, og hver linje herunder retter noget der faktisk stak
   ud over skaermkanten. Maalingen ligger i outputs/mobilmaaling.html
   og kan koeres igen.
   =============================================================== */

/* 1. HOVEDET STAK UD PAA HVER ENESTE SIDE.
      Tre ikonknapper plus "DA" plus logoet blev til 386 pixels, og
      det er 66 for meget paa en lille telefon. Sproget staar stadig
      i menuen, saa forkortelsen kan undvaeres foer navnet kan. */
@media (max-width: 420px) {
  .top { padding: 10px 16px; gap: 10px; }
  .handlinger { gap: 6px; }
  .sprog > summary span { display: none; }
  .ikonknap { padding: 7px; }
  .mark .navn { font-size: 21px; }
}

/* 2. POPUP'EN I HEROEN ER DREJET HALVANDEN GRAD.
      Det ser levende ud, men en drejet kasse fylder mere end sin egen
      bredde: 345 pixels plus 520 i hoejde gav 14 ekstra til hver side,
      og saa var der vandret rulning paa hele forsiden. Paa en telefon
      er der ikke plads til pynt. */
@media (max-width: 700px) {
  /*
   * "width: 100%" alene var ikke nok, og det er vaerd at huske hvorfor:
   * heroen har justify-items: center, saa spalten er lige saa bred som sit
   * indhold. Hundrede procent af en kasse der selv maaler sig efter sit
   * indhold, er indholdets egen bredde, altsaa de 430 pixels vi ville
   * undgaa. Foerst naar .hero-produkt faar en bestemt bredde, betyder
   * procenten noget.
   */
  .hero .wrap { justify-items: stretch; }
  .hero-produkt { transform: none; width: 100%; max-width: 372px; margin: 0 auto; }
  .pop { width: 100%; }
}

/* Etiketterne under tallene i popup'en er 11 pixels, fordi den rigtige
   extension er 372 pixels bred og skal have plads til tre af dem. Paa en
   telefon fylder den hele skaermen, og saa er der plads til laeselig skrift. */
@media (max-width: 700px) {
  .pop-stat-lbl { font-size: 12px; letter-spacing: .3px; }
}

/* 3. TABELLERNE VAR BREDERE END SKAERMEN.
      Privatlivspolitikkens tabel over hvad der gemmes naaede 503
      pixels paa en 320 pixels skaerm. Nu kan den rulles vandret for
      sig selv i stedet for at trykke hele siden skaev. */
@media (max-width: 700px) {
  .tabel-ramme { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .tabel { min-width: 420px; }
}

/* 4. shop.dit-firma.dk KUNNE IKKE BRYDE.
      Punktet blev 484 pixels bredt, fordi et flex-element ikke krymper
      under sit indhold af sig selv, og en adresse i <code> har ingen
      steder at brække. Det er en fejl der kun findes paa smalle
      skaerme og aldrig ses paa en baerbar. */
.grunde li > *:not(::before) { min-width: 0; }
.grunde li { flex-wrap: wrap; }
.grunde code, .aarsag code, .doku code { overflow-wrap: anywhere; }

/* 5. FIRE VERDIKTKORT I TO SPALTER ER FOR TRANGT UNDER 380.
      Stemplet er 104 pixels, og spalten var 124 med kanter og luft. */
@media (max-width: 400px) {
  .verdikter { grid-template-columns: 1fr; }
}

/* 6. DEN FALSKE BUTIKS MENULINJE.
      "Dame Herre Udsalg Nyheder" plus "Kurv (1)" naaede 428 pixels.
      Paa en telefon er det pynt i en illustration, og en rigtig
      mobilbutik gemmer alligevel menuen bag en knap. */
@media (max-width: 560px) {
  .f-top .fnav { display: none; }
  .f-top { gap: 10px; }
}

/* 7. SIDEFODENS LINKS VAR 24 PIXELS HOEJE.
      Det er under det en tommelfinger rammer sikkert. De faar luft
      i stedet for stoerre skrift, saa sidefoden ser ens ud. */
@media (max-width: 700px) {
  .fod nav { gap: 4px 18px; }
  .fod nav a { display: inline-block; padding: 9px 0; }
}

/* 8. Tallene paa fanerne var 10 pixels. */
@media (max-width: 620px) {
  .laer-fane .fav { width: 19px; height: 19px; font-size: 11px; }
}

/* 9. POPUP'ENS EGEN HEADER KUNNE IKKE KRYMPE.
      Ikon plus "ScamZam" plus domaenet paa hoejst 180 pixels giver et
      mindstemaal paa 326, og saa er kassen bredere end en telefon paa
      320 uanset hvad man saetter width til. Et element kan ikke blive
      smallere end sit indhold, og indholdet var laast.

      Kun under 400 pixels. Paa alt andet skal popup'en se ud som den
      rigtige, for det er hele pointen med at vise den. */
@media (max-width: 400px) {
  .pop-head { padding: 11px 12px; gap: 7px; min-width: 0; }
  .pop-head svg { width: 26px; height: 26px; flex-shrink: 0; }
  .pop-logo { font-size: 19px; }
  .pop-domain { max-width: 92px; font-size: 12px; }
  .pop-body { padding: 12px 12px 14px; }
  .pop-stamp { width: 78px; height: 78px; }
  .pop-verdict { font-size: 21px; padding: 14px 10px; }
}

/* 10. De sidste 11-pixels-tekster. Alle sammen i illustrationer, hvor
       de efterligner en rigtig graenseflade. Paa en telefon fylder
       illustrationen hele skaermen, og saa er der plads. */
@media (max-width: 700px) {
  .laer-fane .fav { font-size: 12px; }
  .sms .stempel2 { font-size: 12px; }
}

/* 11. DE TRE TAL I POPUP'EN VAR DET SIDSTE DER STAK UD.
       "DOMAENETS ALDER" med versaler og bogstavafstand fylder 80
       pixels, og tre kasser med den slags ved siden af hinanden kan
       ikke blive smallere end 306 uanset hvad. flex: 1 lader nemlig
       ikke et element krympe under sit indhold, med mindre man ogsaa
       siger min-width: 0.

       Under 400 pixels bryder de til to raekker i stedet. Popup'en
       bliver hoejere, og det er den rigtige vej at give sig. */
.pop-stat { min-width: 0; }
@media (max-width: 400px) {
  .pop-stats { flex-wrap: wrap; }
  .pop-stat { flex: 1 1 44%; }
}