/* Forside, login, konto og betingelser — siderne uden for abonnementet */
/* "Notesbog": papir, serif-overskrifter i farver og de seks tuschfarver.
   Tuschfarverne bruges til flader og kanter — til bogstaver bruges --t-…,
   som er de samme farver gjort mørkere, så teksten kan læses. */
:root{
  --tusch-gul:#FFE500; --tusch-orange:#FF9A00; --tusch-pink:#FF4D9D;
  --tusch-lilla:#9B6BD8; --tusch-blaa:#35BDEF; --tusch-groen:#8DC63F;
  --t-gul:#A17A00; --t-orange:#D97A00; --t-pink:#D2357F;
  --t-lilla:#7440BE; --t-blaa:#0E8DBD; --t-groen:#5C8F1E;
  --gul-b:#FFF6BF; --orange-b:#FFE6C4; --pink-b:#FFDAEA;
  --lilla-b:#EADFFA; --blaa-b:#D5F0FC; --groen-b:#E6F5CE;

  --bg:#FFFDF6; --flade:#fff; --tekst:#23201a; --svag:#5f584a; --kant:#EDE2C4;
  --accent:#D2357F; --accent-moerk:#B0276A; --accent-blid:#FFDAEA;
  --groen:#5C8F1E; --groen-blid:#E6F5CE; --gul:#A17A00; --gul-blid:#FFF6BF;
  --roed:#C8324B; --roed-blid:#FDE7EA; --graa-blid:#FFF8E3;
  --radius:18px; --skygge:0 1px 2px rgba(70,55,20,.06),0 6px 20px rgba(70,55,20,.07);
  --serif:Fraunces,"Iowan Old Style","Palatino Linotype",Georgia,serif;
  --sans:Nunito,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
:root{color-scheme:light}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--tekst);font:16px/1.65 var(--sans)}
a{color:var(--accent)}
h1,h2,h3{font-family:var(--serif);font-weight:800}
h1{font-size:clamp(1.8rem,4vw,2.4rem);line-height:1.18;margin:.2em 0 .6em;letter-spacing:-.015em;
  color:var(--t-lilla)}
h2{font-size:1.3rem;margin:1.4em 0 .5em;color:var(--t-blaa)}
.lille{font-size:.88rem;color:var(--svag)}

.top{display:flex;align-items:center;gap:16px;justify-content:space-between;
  padding:14px clamp(16px,4vw,40px);background:var(--graa-blid);border-bottom:2px solid var(--kant)}
.maerke{display:flex;align-items:center;gap:10px;color:var(--tekst);text-decoration:none;
  font-family:var(--serif);font-weight:800}
.maerke img{border-radius:50%}
.top nav{display:flex;gap:18px;flex-wrap:wrap}
.top nav a{text-decoration:none;font-weight:600}
/* På smal skærm står menuen i linjer under navnet i stedet for én lang søjle */
@media (max-width:760px){
  .top{flex-wrap:wrap;gap:8px 16px}
  .top nav{width:100%;gap:4px 16px;font-size:.95rem}
}

main{max-width:1000px;margin:0 auto;padding:clamp(20px,5vw,48px) clamp(16px,4vw,32px) 60px}
main.smal{max-width:560px}

.helt{text-align:center;margin:10px 0 34px}
.helt img{border-radius:50%}
.lede{font-size:1.12rem;color:var(--svag);max-width:640px;margin:0 auto}

/* Escape rooms: mørkt felt, så det skiller sig ud på forsiden */
.escape{background:linear-gradient(160deg,#141b2e,#1d1633);color:#e9ecf5;border-radius:var(--radius);
  padding:clamp(20px,4vw,36px);margin:0 0 26px;box-shadow:var(--skygge);border:1px solid #3a3160}
.escape h2{font-size:clamp(1.35rem,3.2vw,1.8rem);line-height:1.25;margin:.1em 0 .5em}
.escape-top{margin:0;font-size:.85rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#ffb86b}
.escape-lede{color:#c3c9da;max-width:720px;margin:0 0 20px}
.rum{display:flex;flex-wrap:wrap;gap:12px}
.rum div{flex:1 1 160px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:12px;
  padding:14px 15px;font-size:.92rem;line-height:1.5;color:#c3c9da}
.rum span{display:block;font-size:1.6rem;line-height:1;margin-bottom:8px}
.rum b{display:block;color:#fff;font-size:1rem;margin-bottom:3px}
ul.escape-fakta{list-style:none;padding:0;margin:18px 0 0;display:flex;flex-wrap:wrap;gap:8px}
ul.escape-fakta li{background:rgba(255,184,107,.14);color:#ffd3a3;border-radius:999px;padding:4px 12px;font-size:.88rem;font-weight:600}

/* Forsiden: "Det får du" med skærmbilleder, hver anden række spejlvendt */
.indhold-lede{text-align:center;margin:-6px auto 26px}
.vis{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(18px,4vw,40px);
  align-items:center;margin:0 0 clamp(28px,5vw,46px)}
.vis:nth-of-type(even) .skaerm{order:2}
.skaerm{margin:0;border-radius:14px;overflow:hidden;background:#fff;border:2px solid var(--kant);
  border-top:8px solid var(--farve,var(--tusch-pink));box-shadow:var(--skygge)}
.skaerm img{display:block;width:100%;height:auto}
.vis-tekst h3{font-size:1.45rem;line-height:1.2;margin:.15em 0 .45em;color:var(--t-farve,var(--t-pink))}
.vis-tekst p{margin:0 0 .6em}
.vis-maerke{display:inline-block;font-size:.8rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  color:var(--t-farve,var(--t-pink));background:var(--b-farve,var(--pink-b));border-radius:999px;padding:3px 12px}
.vis.gul{--farve:var(--tusch-gul);--t-farve:var(--t-gul);--b-farve:var(--gul-b)}
.vis.orange{--farve:var(--tusch-orange);--t-farve:var(--t-orange);--b-farve:var(--orange-b)}
.vis.pink{--farve:var(--tusch-pink);--t-farve:var(--t-pink);--b-farve:var(--pink-b)}
.vis.lilla{--farve:var(--tusch-lilla);--t-farve:var(--t-lilla);--b-farve:var(--lilla-b)}
.vis.blaa{--farve:var(--tusch-blaa);--t-farve:var(--t-blaa);--b-farve:var(--blaa-b)}
.vis.groen{--farve:var(--tusch-groen);--t-farve:var(--t-groen);--b-farve:var(--groen-b)}
@media (max-width:760px){
  .vis{grid-template-columns:minmax(0,1fr)}
  .vis:nth-of-type(even) .skaerm{order:0}
}
.ogsaa{text-align:center;color:var(--svag);margin:0 0 26px}
.kort.nyt{display:flex;gap:18px;align-items:flex-start;background:var(--gul-b);border-color:var(--tusch-gul)}
.kort.nyt h2{margin:0 0 .3em;color:var(--t-gul)}
.kort.nyt p{margin:0}
.nyt-ikon{font-size:2rem;line-height:1}
.til-priser{text-align:center;margin:0 0 30px}

.to-spalter{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:20px;align-items:start}
@media (max-width:760px){ .to-spalter{grid-template-columns:minmax(0,1fr)} }

.kort{background:var(--flade);border:2px solid var(--kant);border-radius:var(--radius);
  padding:clamp(18px,3vw,26px);box-shadow:var(--skygge);margin-bottom:18px}
.kort h2:first-child{margin-top:0}

ul.flueben{list-style:none;padding:0;margin:.6em 0 1.1em}
ul.flueben li{position:relative;padding-left:28px;margin:.55em 0}
ul.flueben li::before{content:"✓";position:absolute;left:0;top:0;color:var(--groen);font-weight:700}

.pris{text-align:center}
.pris-tal{font-family:var(--serif);font-size:2.8rem;font-weight:900;letter-spacing:-.02em;
  line-height:1.1;color:var(--t-pink)}
.pris-tal small{font-size:1rem;font-weight:600;color:var(--svag)}
.pris ul.flueben{text-align:left;display:inline-block}
.proeve{display:inline-block;background:var(--groen-blid);color:var(--groen);font-weight:700;
  border-radius:999px;padding:4px 14px;margin:10px 0 0}

.knap{display:inline-block;background:var(--tusch-pink);color:#fff;border:0;border-radius:999px;
  padding:13px 24px;font:inherit;font-weight:800;text-decoration:none;cursor:pointer;text-align:center;
  box-shadow:0 3px 0 var(--accent-moerk)}
.knap:hover{background:var(--accent-moerk);box-shadow:0 3px 0 var(--accent-moerk)}
.knap:active{transform:translateY(2px);box-shadow:0 1px 0 var(--accent-moerk)}
.knap.sekundaer{background:transparent;color:var(--accent);box-shadow:inset 0 0 0 1.5px var(--kant)}
.knap.sekundaer:hover{box-shadow:inset 0 0 0 1.5px var(--accent)}
.knap.advarsel{background:var(--roed);color:#fff}
.knapper{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.knapper form{margin:0}
.pris .knap{width:100%;margin-top:4px}

/* Forsiden: privat konto og skolekonto side om side */
ul.flueben.to-kol{columns:2;column-gap:32px}
ul.flueben.to-kol li{break-inside:avoid}
@media (max-width:760px){ ul.flueben.to-kol{columns:1} }
.valg-titel{text-align:center;font-size:1.7rem;margin:34px 0 16px}
.planer{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;align-items:stretch}
@media (max-width:760px){ .planer{grid-template-columns:minmax(0,1fr)} }
.plan{display:flex;flex-direction:column;justify-content:space-between;border-top:8px solid var(--tusch-pink)}
.plan.skole{border-top-color:var(--tusch-lilla)}
.plan-navn{font-family:var(--serif);font-weight:900;font-size:1.45rem;margin:0;color:var(--t-pink)}
.plan.skole .plan-navn,.plan.skole .pris-tal{color:var(--t-lilla)}
.plan .lille{margin:2px 0 10px}
.plan.skole .proeve{background:var(--lilla-b);color:var(--t-lilla)}
.plan.skole .knap{background:var(--t-lilla);box-shadow:0 3px 0 #552C93}
.plan.skole .knap:hover{background:#5F31A3}
button.link{background:none;border:0;color:var(--accent);font:inherit;cursor:pointer;padding:0;text-decoration:underline}
.log-ud{margin-top:6px;text-align:right}

.formular label{display:block;font-weight:600;margin:0 0 14px}
.formular input[type=email],.formular input[type=password],.rabat-felt input{display:block;width:100%;margin-top:6px;
  font:inherit;padding:11px 13px;border:1px solid var(--kant);border-radius:10px;background:var(--bg);color:var(--tekst)}
.formular textarea{display:block;width:100%;margin-top:6px;font:inherit;font-weight:400;padding:11px 13px;
  border:1px solid var(--kant);border-radius:10px;background:var(--bg);color:var(--tekst);resize:vertical}
.formular input:focus,.formular textarea:focus{outline:2px solid var(--accent);outline-offset:1px}
.formular .knap{width:100%;margin-top:6px}
label.afkryds{display:flex;gap:10px;align-items:flex-start;font-weight:400;font-size:.95rem}
label.afkryds input{margin-top:5px;flex:none;width:18px;height:18px}

.oversigt{background:var(--accent-blid);border-radius:11px;padding:14px 16px;margin:6px 0 18px}
.oversigt div{display:flex;justify-content:space-between;gap:12px}
.oversigt p{margin:.5em 0 0;font-size:.92rem;color:var(--svag)}

.besked{border-radius:11px;padding:12px 16px;margin:0 0 18px}
.besked ul{margin:0;padding-left:1.1em}
.besked.ok{background:var(--groen-blid);color:var(--groen)}
.besked.info{background:var(--accent-blid)}
.besked.fejl{background:var(--roed-blid);color:var(--roed)}
.besked a{color:inherit;font-weight:700}

.status{display:inline-block;font-weight:700;border-radius:999px;padding:4px 14px;margin-bottom:6px}
.status.groen{background:var(--groen-blid);color:var(--groen)}
.status.gul{background:var(--gul-blid);color:var(--gul)}
.status.roed{background:var(--roed-blid);color:var(--roed)}
.status.graa{background:var(--graa-blid);color:var(--svag)}

.tekst{background:var(--flade);border:1px solid var(--kant);border-radius:var(--radius);padding:clamp(18px,4vw,34px)}
.tekst h2{font-size:1.08rem}

table.tjek{width:100%;border-collapse:collapse;background:var(--flade);border-radius:var(--radius);overflow:hidden}
table.tjek td{padding:11px 14px;border-bottom:1px solid var(--kant);vertical-align:top}
table.tjek td.tegn{width:40px;font-weight:800;text-align:center}
table.tjek tr.ok td.tegn{color:var(--groen)}
table.tjek tr.advarsel td.tegn{color:var(--gul)}
table.tjek tr.fejl td.tegn{color:var(--roed)}
table.tjek tr.info td.tegn{color:var(--accent)}
table.tjek .lille{word-break:break-all}

.bund{padding:24px 16px 40px;font-size:.88rem;color:var(--svag);border-top:2px solid var(--kant);background:var(--graa-blid)}
.bund-links,.bund-info{display:flex;flex-wrap:wrap;gap:6px 18px;justify-content:center;max-width:1000px;margin:0 auto}
.bund-links{padding-bottom:14px;margin-bottom:14px;border-bottom:1px dashed var(--kant)}
.bund-links a{font-weight:700}
.bund a{color:var(--svag)}
code{background:var(--graa-blid);padding:1px 6px;border-radius:5px}

/* Valg af elev- eller lærerabonnement på "Opret konto" */
.planvalg{border:0;padding:0;margin:4px 0 16px}
.planvalg legend{font-weight:700;margin-bottom:8px}
label.plan{display:flex;gap:12px;align-items:flex-start;font-weight:400;margin:0 0 8px;padding:12px 14px;
  border:2px solid var(--kant);border-radius:14px;cursor:pointer}
label.plan:has(input:checked){border-color:var(--tusch-pink);background:var(--pink-b)}
label.plan input{margin-top:4px;flex:none}
label.plan small{color:var(--svag)}
.laererlinje{margin:14px 0 4px;padding:10px 12px;background:var(--lilla-b);border-radius:12px;text-align:left}

/* ---------- Klasser, elever og admin (fra undervisningssiden) ---------- */
.to-felter{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 14px}
@media (max-width:520px){ .to-felter{grid-template-columns:minmax(0,1fr)} }
.inline{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.inline input[type=text]{flex:1 1 200px;min-width:0;font:inherit;padding:11px 13px;border:1px solid var(--kant);
  border-radius:10px;background:var(--bg);color:var(--tekst)}
.holdgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:18px;margin-bottom:18px}
.holdgrid .kort{margin-bottom:0}
.hold-top{display:flex;justify-content:space-between;align-items:center;gap:10px}
.hold-top h2{margin:0}
.kode-stor{font:700 2rem/1.1 ui-monospace,"SF Mono",Menlo,monospace;letter-spacing:.14em;margin:6px 0 14px}
.link-linje{display:flex;gap:8px;margin:4px 0 14px}
.link-linje input{flex:1;min-width:0;font:13px ui-monospace,"SF Mono",Menlo,monospace;padding:7px 10px;
  border:1px solid var(--kant);border-radius:8px;background:var(--bg);color:var(--svag)}
.knap.lille{padding:8px 14px;font-size:14.5px}
.handlinger{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-top:12px}
.handlinger form{margin:0}
td .handlinger{margin-top:0}
.lille-knap{display:inline-block;font:inherit;font-size:13px;padding:5px 10px;border-radius:7px;
  border:1px solid var(--kant);background:var(--flade);color:var(--tekst);cursor:pointer;text-decoration:none;line-height:1.3}
.lille-knap:hover{border-color:var(--accent);color:var(--accent)}
.lille-knap.fare:hover{border-color:var(--roed);color:var(--roed)}
.lille-knap.ok{background:var(--groen);border-color:var(--groen);color:#fff;font-weight:700}
.lille-knap.ok:hover{color:#fff;filter:brightness(1.1)}
.kort.venter{border-color:var(--gul);border-left-width:5px}
.tabelboks{overflow-x:auto}
.tabel{width:100%;border-collapse:collapse;font-size:15px}
.tabel th,.tabel td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--kant);vertical-align:middle}
.tabel th{font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:var(--svag)}
.tabel .num{text-align:right;font-variant-numeric:tabular-nums}
.tabel tr.lukket td{color:var(--svag)}
.tabel .status{font-size:12px;padding:2px 9px;margin:0 0 0 6px}
.kode-vis{font:700 1.15rem ui-monospace,"SF Mono",Menlo,monospace;letter-spacing:.1em;background:var(--flade);
  padding:2px 9px;border-radius:6px;margin:0 4px;color:var(--tekst)}
.tomt{color:var(--svag);border:1px dashed var(--kant);border-radius:12px;padding:22px;text-align:center}
.tavle{text-align:center;padding:5vh 0}
.tavle-lille{font-size:clamp(1.2rem,2.4vw,1.7rem);color:var(--svag);margin:.2em 0}
.tavle-adresse{font-size:clamp(1.7rem,5vw,3.2rem);font-weight:700;margin:.1em 0 .7em;overflow-wrap:anywhere}
.tavle-kode{font:800 clamp(3.6rem,15vw,10rem)/1 ui-monospace,"SF Mono",Menlo,monospace;letter-spacing:.1em;margin:.15em 0 .3em}
/* Indledningen på en almindelig side står til venstre — kun forsidens står i midten */
main > p.lede{margin:0 0 22px;max-width:70ch}

/* Ventende elever på mobil: hver elev som et lille kort i stedet for en bred tabel */
@media (max-width:600px){
  .venter .tabel thead{display:none}
  .venter .tabel tr{display:grid;grid-template-columns:1fr auto;gap:2px 10px;padding:10px 0;border-bottom:1px solid var(--kant)}
  .venter .tabel td{border:0;padding:0}
  .venter .tabel td:last-child{grid-column:1/-1;margin-top:6px}
}
.hold.udloebet{opacity:.7}
details.omdoeb{margin-top:10px}
details.omdoeb summary{cursor:pointer}
details.omdoeb .inline{margin-top:8px}
.fakturatekst{width:100%;font:13px ui-monospace,"SF Mono",Menlo,monospace;padding:10px;border:1px solid var(--kant);
  border-radius:10px;background:var(--graa-blid);color:var(--tekst)}
.klasse-felter{margin-top:22px}
.klasse-felter .inline input[type=text]{text-transform:uppercase;letter-spacing:.08em}
.formular input[type=text],.formular input[type=number]{display:block;width:100%;margin-top:6px;
  font:inherit;padding:11px 13px;border:1px solid var(--kant);border-radius:10px;background:var(--bg);color:var(--tekst)}

/* Tilbud på forsiden: "første måned gratis" med koden som en billet */
.kort.kampagne{display:flex;gap:22px;align-items:center;justify-content:space-between;flex-wrap:wrap;
  background:var(--pink-b);border-color:var(--tusch-pink);margin-bottom:26px}
.kampagne-tekst{flex:1 1 320px}
.kampagne-tekst h2{margin:.1em 0 .35em;color:var(--t-pink)}
.kampagne-tekst p{margin:0}
.kampagne-maerke{display:inline-block;font-size:.8rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em;
  color:var(--t-pink);background:#fff;border-radius:999px;padding:2px 12px;margin-bottom:6px!important}
.kampagne-kode{display:flex;flex-direction:column;align-items:center;gap:12px;flex:0 0 auto;margin:0 auto}
.kode-billet{font:800 1.5rem/1 ui-monospace,Menlo,Consolas,monospace;letter-spacing:.08em;color:var(--tekst);
  background:#fff;border:2px dashed var(--tusch-pink);border-radius:12px;padding:12px 18px;user-select:all}
.rabat-felt{display:block;font-weight:600;margin:0 0 12px;max-width:320px}

/* Admin: overblik over besøg og konti */
.tal-raekke{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px;margin:0 0 16px}
.tal-felt{background:var(--graa-blid);border:1px solid var(--kant);border-radius:12px;padding:10px 14px}
.tal-felt b{display:block;font:800 1.6rem/1.2 var(--serif);color:var(--t-blaa)}
.tal-felt span{font-size:.86rem;color:var(--svag)}
.tabel td.nul{color:var(--kant)}


/* ---------- Offentlige sider: emner, escape rooms, kopiark, prøver, skoler (2.11.2026) ---------- */
.vis-maerke.lilla-maerke{--t-farve:var(--t-lilla);--b-farve:var(--lilla-b)}
.vis-maerke.gul-maerke{--t-farve:var(--t-gul);--b-farve:var(--gul-b)}
.vis-maerke.groen-maerke{--t-farve:var(--t-groen);--b-farve:var(--groen-b)}
.helt .vis-maerke{margin:0 0 4px}
.vis-tekst .vis-h{font-size:1.45rem;line-height:1.2;margin:.3em 0 .45em;color:var(--t-farve,var(--t-pink))}
.sektion-titel{font-size:1.5rem;margin:0 0 14px;color:var(--t-lilla)}

/* Klasselicens: fliser med det, man får, og prisen ved siden af */
.licens-top{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:24px;align-items:start;margin-bottom:10px}
@media (max-width:820px){ .licens-top{grid-template-columns:minmax(0,1fr)} }
.licens-pris{position:sticky;top:16px;border-top:8px solid var(--tusch-lilla)}
.licens-pris .plan-navn,.licens-pris .pris-tal{color:var(--t-lilla)}
.licens-pris .proeve{background:var(--lilla-b);color:var(--t-lilla)}
.licens-pris .knap:not(.sekundaer){background:var(--t-lilla);box-shadow:0 3px 0 #552C93}
.licens-pris .knap:not(.sekundaer):hover{background:#5F31A3}
.fliser{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
@media (max-width:520px){ .fliser{grid-template-columns:minmax(0,1fr)} }
.flise{background:var(--b-farve,var(--pink-b));border:2px solid var(--farve,var(--tusch-pink));border-radius:16px;
  padding:16px 18px;position:relative;box-shadow:var(--skygge)}
.flise h3{font-size:1.08rem;line-height:1.25;margin:.35em 0 .3em;color:var(--t-farve,var(--t-pink))}
.flise p{margin:0;font-size:.95rem}
.flise-ikon{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:12px;background:#fff;
  font-size:1.5rem;box-shadow:0 2px 0 var(--farve,var(--tusch-pink))}
.flise.gul,.emne-chip.gul,.emne-ikon.gul{--farve:var(--tusch-gul);--t-farve:var(--t-gul);--b-farve:var(--gul-b)}
.flise.orange,.emne-chip.orange,.emne-ikon.orange{--farve:var(--tusch-orange);--t-farve:var(--t-orange);--b-farve:var(--orange-b)}
.flise.pink,.emne-chip.pink,.emne-ikon.pink{--farve:var(--tusch-pink);--t-farve:var(--t-pink);--b-farve:var(--pink-b)}
.flise.lilla,.emne-chip.lilla,.emne-ikon.lilla{--farve:var(--tusch-lilla);--t-farve:var(--t-lilla);--b-farve:var(--lilla-b)}
.flise.blaa,.emne-chip.blaa,.emne-ikon.blaa{--farve:var(--tusch-blaa);--t-farve:var(--t-blaa);--b-farve:var(--blaa-b)}
.flise.groen,.emne-chip.groen,.emne-ikon.groen{--farve:var(--tusch-groen);--t-farve:var(--t-groen);--b-farve:var(--groen-b)}
ol.trin-raekke{list-style:none;counter-reset:trin;padding:0;margin:0 0 34px;display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
@media (max-width:760px){ ol.trin-raekke{grid-template-columns:minmax(0,1fr)} }
ol.trin-raekke li{counter-increment:trin;background:var(--flade);border:2px solid var(--kant);border-radius:16px;padding:16px 18px 16px 62px;
  position:relative}
ol.trin-raekke li::before{content:counter(trin);position:absolute;left:16px;top:14px;width:34px;height:34px;border-radius:50%;
  background:var(--tusch-gul);font:900 1.1rem/34px var(--serif);text-align:center}
ol.trin-raekke b{display:block}
.kort.skole-boks{display:flex;gap:18px;align-items:flex-start;background:var(--lilla-b);border-color:var(--tusch-lilla)}
.kort.skole-boks h2{margin:0 0 .3em;color:var(--t-lilla)}
.kort.skole-boks p{margin:0}
.fornyelse{background:var(--graa-blid);border-radius:10px;padding:6px 12px;margin:0 0 12px}
.fornyelse p{margin:.3em 0}
.fornyelse details summary{cursor:pointer}

/* Emnesider */
.emne-ikon{display:inline-grid;place-items:center;width:84px;height:84px;border-radius:22px;font-size:2.6rem;
  background:var(--b-farve);border:3px solid var(--farve);box-shadow:var(--skygge)}
ul.chips{list-style:none;padding:0;margin:.4em 0 1em;display:flex;flex-wrap:wrap;gap:8px}
ul.chips li{background:var(--graa-blid);border:1px solid var(--kant);border-radius:999px;padding:4px 13px;font-size:.93rem;font-weight:600}
ul.klar-liste{list-style:none;padding:0;margin:.6em 0 1em}
ul.klar-liste li{position:relative;padding:8px 0 8px 36px;border-bottom:1px dashed var(--kant)}
ul.klar-liste li::before{content:"😎";position:absolute;left:2px;top:7px}
.kort.klar-boks{border-top:8px solid var(--tusch-groen)}
.kort.klar-boks h2{color:var(--t-groen)}
ul.ark-liste{list-style:none;padding:0;margin:.5em 0 1em;columns:2;column-gap:28px}
@media (max-width:600px){ ul.ark-liste{columns:1} }
ul.ark-liste li{break-inside:avoid;padding:3px 0;font-size:.95rem}
ul.ark-liste li span{margin-right:6px}
.ark-grid ul.ark-liste{columns:1}
.ark-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:18px}
.ark-grid .kort{margin:0}
.ark-grid h3{margin:0 0 .3em}
.ark-grid h3 a{text-decoration:none}
.emne-links{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:0 0 30px}
.emne-chip{display:inline-flex;align-items:center;gap:8px;text-decoration:none;font-weight:800;color:var(--t-farve);
  background:var(--b-farve);border:2px solid var(--farve);border-radius:999px;padding:8px 16px}
.emne-chip:hover{background:#fff}
.escape-lille{margin-top:4px}
.escape-helt h1{color:#fff;margin:.2em 0 .5em}
.escape .knap{background:#ffb86b;color:#1d1633;box-shadow:0 3px 0 #b97a35}

/* Escape rooms på lys baggrund */
.rum-lys{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;margin-top:12px}
.rum-lys>div{background:var(--graa-blid);border:1px solid var(--kant);border-radius:14px;padding:14px 16px}
.rum-lys span{display:block;font-size:1.7rem;line-height:1;margin-bottom:6px}
.rum-lys b{display:block;font-family:var(--serif);font-size:1.08rem}
.rum-lys p{margin:.3em 0 0;font-size:.93rem;color:var(--svag)}
.rum-emne{font-size:.82rem;font-weight:800}
ol.trin-liste{padding-left:1.3em;margin:.5em 0}
ol.trin-liste li{margin:.5em 0}

/* Kopiark: gratis ark */
.kort.gratis-boks{background:var(--gul-b);border-color:var(--tusch-gul)}
.kort.gratis-boks h2{color:var(--t-gul)}
.gratis-ark{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px}
.gratis-kort{display:flex;flex-direction:column;gap:2px;background:#fff;border:2px dashed var(--tusch-gul);border-radius:14px;
  padding:14px 16px;text-decoration:none;color:var(--tekst)}
.gratis-kort span{font-size:1.6rem}
.gratis-kort small{color:var(--svag)}
.gratis-kort:hover{border-style:solid}

/* Spørgsmål og svar */
.faq details{border-bottom:1px solid var(--kant);padding:10px 0}
.faq summary{cursor:pointer;font-weight:700}
.faq details p{margin:.5em 0 0}

/* Til skoler */
.indhold-nav{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:0 0 22px}
.indhold-nav a{background:var(--lilla-b);color:var(--t-lilla);border-radius:999px;padding:4px 13px;font-weight:700;text-decoration:none;font-size:.92rem}
.tekst-felter{gap:0 28px}
.tekst-felter h3{margin:.4em 0 .2em;font-size:1.05rem}
.kort h3{color:var(--t-lilla)}

/* Landingssider (landing.php) og gratis escape room */
ol.eks-liste{padding-left:1.3em;margin:.6em 0 1em}
ol.eks-liste li{padding:6px 0;border-bottom:1px dashed var(--kant)}
ol.eks-liste summary,details.faq summary{cursor:pointer;font-weight:700}
.eks-svar{margin:.5em 0 0;background:var(--graa-blid);border:1px solid var(--kant);border-radius:12px;padding:8px 12px}
details.faq{padding:8px 0;border-bottom:1px dashed var(--kant)}
details.faq p{margin:.5em 0 0}