/* ── Tysk · NTG Geilo ─────────────────────────────────────────────
   Felles design for alle sider. Fargepaletten er den samme som i
   Basistester, Klasseliste, Pace og Plot.

   Innhold:
     1. Farger og grunnoppsett      7. Ressurskort (forsiden)
     2. Topplinje og bunntekst      8. Poengteller og tilbakemelding
     3. Sideoppsett og overskrifter 9. Øvinger (luker, flervalg, koble)
     4. Kort og bokser             10. Gloser (kort som snus)
     5. Knapper, brytere og chips  11. Tegnlinje (ä ö ü ß) og hjelpevindu
     6. Skjemafelt og tabeller     12. Utskrift
   ────────────────────────────────────────────────────────────────── */

/* ── 1. Farger og grunnoppsett ─────────────────────────────────── */
:root {
  --ntg-muskel:    #4b1400;   /* mørk rødbrun – topplinje   */
  --ntg-driv:      #f11436;   /* rød – aksent / hovedknapp  */
  --ntg-rosekinn:  #ffe8f1;   /* blush                      */
  --ntg-flyt:      #252a64;   /* dyp marine – sekundær      */
  --ntg-gull:      #fbd48c;   /* gull – aktiv               */
  --ntg-fokus:     #506ef0;   /* blå – lenker og fokus      */
  --ntg-hvile:     #e5f3ff;   /* isblå – lys bakgrunn       */
  --ntg-tradisjon: #faf0e1;   /* varm krem – bokser         */

  --bg:        #f5f0ea;
  --tekst:     #23201e;
  --dempet:    #6f6660;
  --kant:      #e3dbd1;
  --riktig:    #1a7f37;
  --riktig-bg: #e6f4ea;
  --feil:      #c8102e;
  --feil-bg:   #fdecee;
  --radius:    14px;
  --skygge:    0 1px 6px rgba(0,0,0,0.09);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--tekst);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  font-size: 17px;
  line-height: 1.5;
}

a { color: var(--ntg-fokus); }
a:hover { color: var(--ntg-flyt); }
[hidden] { display: none !important; }

/* ── 2. Topplinje og bunntekst ─────────────────────────────────── */
.topplinje {
  background: var(--ntg-muskel);
  border-bottom: 3px solid var(--ntg-driv);
  padding: calc(0.55rem + env(safe-area-inset-top)) 1rem 0.55rem;
}
.topplinje .indre {
  max-width: 1040px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 0.85rem;
}
.topplinje .merke-logo { display: flex; align-items: center; gap: 0.75rem; text-decoration: none; }
.topplinje img { height: 28px; display: block; }
.topplinje .utskrift-logo { display: none; }
.topplinje .navn {
  color: #fff;
  font-weight: 700;
  font-size: 1.12rem;
  letter-spacing: 0.01em;
  padding-left: 0.75rem;
  border-left: 1px solid rgba(255,255,255,0.3);
  line-height: 1.2;
}
.topplinje .navn span { color: var(--ntg-gull); }
.topplinje .meny { margin-left: auto; display: flex; gap: 0.25rem; }
.topplinje .meny a {
  color: rgba(255,255,255,0.85);
  text-decoration: none;
  font-size: 0.92rem;
  font-weight: 600;
  padding: 0.35rem 0.6rem;
  border-radius: 8px;
  white-space: nowrap;
}
.topplinje .meny a:hover { color: var(--ntg-gull); background: rgba(255,255,255,0.08); }
.topplinje .meny a.aktiv { color: var(--ntg-gull); }
@media (max-width: 520px) {
  .topplinje img { height: 22px; }
  .topplinje .navn { font-size: 1rem; padding-left: 0.6rem; }
  .topplinje .meny { display: none; }   /* stien under topplinja gjør samme jobb */
}

.bunntekst {
  margin-top: auto;
  text-align: center;
  font-size: 0.8rem;
  color: var(--dempet);
  padding: 1.5rem 1rem 2rem;
}
.bunntekst a { color: inherit; }

/* ── 3. Sideoppsett og overskrifter ────────────────────────────── */
main {
  width: 100%;
  max-width: 1040px;
  margin: 0 auto;
  padding: 1.2rem 1rem 3rem;
}
main.smal  { max-width: 720px; }
main.middels { max-width: 880px; }

.sti {
  font-size: 0.88rem;
  color: var(--dempet);
  margin: 0 0 0.4rem;
}
.sti a { color: var(--dempet); text-decoration: none; }
.sti a:hover { color: var(--ntg-driv); text-decoration: underline; }

h1 {
  font-size: 1.65rem;
  line-height: 1.2;
  margin: 0.2rem 0 0.3rem;
  color: var(--ntg-muskel);
}
h1 .tysk { font-weight: 500; color: var(--ntg-flyt); }
.ingress {
  color: var(--dempet);
  font-size: 1rem;
  margin: 0 0 1.2rem;
  max-width: 64ch;
}

h2.seksjon {
  font-size: 1.2rem;
  margin: 2rem 0 0.8rem;
  padding-left: 0.6rem;
  border-left: 4px solid var(--ntg-driv);
  color: var(--ntg-muskel);
}
h2.seksjon small {
  display: block;
  font-size: 0.85rem;
  font-weight: 400;
  color: var(--dempet);
}

/* ── 4. Kort og bokser ─────────────────────────────────────────── */
.kort {
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--skygge);
  padding: 1.1rem 1.15rem;
  margin-bottom: 1rem;
}
.kort.strek      { border-left: 4px solid var(--ntg-driv); }
.kort.strek.blaa { border-left-color: var(--ntg-flyt); }
.kort.strek.gull { border-left-color: var(--ntg-gull); }
.kort > h2 {
  font-size: 1.12rem;
  margin: 0 0 0.3rem;
  color: var(--ntg-muskel);
}
.kort .hjelpetekst { font-size: 0.92rem; color: var(--dempet); margin: 0 0 0.8rem; }

.boks {
  background: var(--ntg-tradisjon);
  border-radius: 10px;
  padding: 0.8rem 1rem;
  margin: 0.8rem 0;
}
.boks.blaa { background: var(--ntg-hvile); }
.boks > :first-child { margin-top: 0; }
.boks > :last-child { margin-bottom: 0; }

.dempet { color: var(--dempet); }
.midtstilt { text-align: center; }

/* ── 5. Knapper, brytere og chips ──────────────────────────────── */
button, .knapp {
  font-family: inherit;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  border: 1.5px solid transparent;
  border-radius: 10px;
  padding: 0.65rem 1rem;
  background: var(--ntg-driv);
  color: #fff;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
}
button:hover, .knapp:hover { background: #c8102e; color: #fff; }
button:active, .knapp:active { filter: brightness(0.94); }
button:focus-visible, .knapp:focus-visible, a:focus-visible {
  outline: 3px solid rgba(80,110,240,0.45);
  outline-offset: 2px;
}
button:disabled { opacity: 0.5; cursor: not-allowed; }

button.sekundaer, .knapp.sekundaer {
  background: #fff;
  color: var(--ntg-muskel);
  border-color: var(--kant);
}
button.sekundaer:hover, .knapp.sekundaer:hover { background: var(--ntg-tradisjon); color: var(--ntg-muskel); }
button.blaa, .knapp.blaa { background: var(--ntg-flyt); }
button.blaa:hover, .knapp.blaa:hover { background: #1a1e4d; }
button.liten, .knapp.liten { font-size: 0.88rem; padding: 0.4rem 0.7rem; border-radius: 8px; }
button.stor, .knapp.stor { font-size: 1.1rem; padding: 0.85rem 1.3rem; }
button.bred { width: 100%; }
button.lenkeknapp {
  background: none;
  border: none;
  color: var(--ntg-fokus);
  padding: 0.2rem 0.3rem;
  font-weight: 600;
}
button.lenkeknapp:hover { background: none; color: var(--ntg-flyt); text-decoration: underline; }

.knapperad { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.knapperad.midt { justify-content: center; }

/* Segmentert bryter: én av flere */
.bryter {
  display: inline-flex;
  flex-wrap: wrap;
  background: #fff;
  border: 1.5px solid var(--kant);
  border-radius: 12px;
  padding: 3px;
  gap: 3px;
}
.bryter button {
  background: transparent;
  color: var(--dempet);
  border: none;
  border-radius: 9px;
  font-size: 0.95rem;
  padding: 0.5rem 0.85rem;
}
.bryter button:hover { background: var(--ntg-tradisjon); color: var(--ntg-muskel); }
.bryter button.valgt { background: var(--ntg-muskel); color: #fff; }
.bryter.bred { display: flex; flex-wrap: nowrap; }
.bryter.bred button { flex: 1 1 0; min-width: 0; padding-left: 0.3rem; padding-right: 0.3rem; white-space: nowrap; }
@media (max-width: 420px) { .bryter.bred button { font-size: 0.88rem; } }

/* Chips: av/på, gjerne flere */
.chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.chips button {
  background: var(--ntg-tradisjon);
  color: var(--ntg-muskel);
  border: 1.5px solid var(--kant);
  font-size: 0.9rem;
  padding: 0.38rem 0.75rem;
  border-radius: 20px;
}
.chips button:hover { background: #f3e3cb; color: var(--ntg-muskel); }
.chips button.valgt {
  background: var(--ntg-muskel);
  border-color: var(--ntg-muskel);
  color: #fff;
}
.chips button.valgt::before { content: "✓"; font-size: 0.8em; }

.valggruppe { margin-bottom: 0.8rem; }
.valggruppe > .etikett {
  display: block;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--dempet);
  margin-bottom: 0.3rem;
}

/* Små merkelapper */
.merke {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-radius: 20px;
  padding: 0.12rem 0.5rem;
  background: var(--ntg-tradisjon);
  color: var(--ntg-muskel);
  white-space: nowrap;
}
.merke.niva-I  { background: var(--ntg-hvile); color: var(--ntg-flyt); }
.merke.niva-II { background: var(--ntg-flyt); color: #fff; }
.merke.ny      { background: var(--ntg-driv); color: #fff; }
.merke.gull    { background: var(--ntg-gull); color: var(--ntg-muskel); }

/* ── 6. Skjemafelt og tabeller ─────────────────────────────────── */
input[type=text], input[type=search], select, textarea {
  font-family: inherit;
  font-size: 1.05rem;
  padding: 0.6rem 0.75rem;
  border: 1.5px solid var(--kant);
  border-radius: 10px;
  background: #fff;
  color: var(--tekst);
  width: 100%;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--ntg-fokus);
  box-shadow: 0 0 0 3px rgba(80,110,240,0.16);
}

.tabellboks { overflow-x: auto; border-radius: 10px; border: 1px solid var(--kant); background: #fff; margin: 0.8rem 0; }
table.tabell { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
table.tabell th {
  background: var(--ntg-muskel);
  color: #fff;
  font-weight: 600;
  text-align: left;
  padding: 0.45rem 0.65rem;
  white-space: nowrap;
}
table.tabell td { padding: 0.45rem 0.65rem; border-top: 1px solid var(--kant); vertical-align: top; }
table.tabell tbody tr:nth-child(even) { background: #fbf8f4; }
table.tabell tbody tr:hover { background: var(--ntg-rosekinn); }

/* ── 7. Ressurskort (forsiden) ─────────────────────────────────── */
.filterlinje {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: center;
  background: var(--ntg-tradisjon);
  border-left: 4px solid var(--ntg-driv);
  border-radius: 10px;
  padding: 0.7rem;
  margin: 0 0 0.5rem;
}
.filterlinje .sok { flex: 1 1 220px; }
.filterlinje input[type=search] { padding: 0.5rem 0.75rem; font-size: 1rem; }

.ressursgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 0.85rem;
}
.ressurskort {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--skygge);
  padding: 0.95rem 1rem 0.85rem;
  text-decoration: none;
  color: inherit;
  border-top: 4px solid var(--ntg-driv);
  transition: transform .12s, box-shadow .12s;
}
.ressurskort:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(75,20,0,0.14);
  color: inherit;
}
.ressurskort[data-type=ovinger] { border-top-color: var(--ntg-flyt); }
.ressurskort[data-type=gloser]  { border-top-color: var(--ntg-gull); }
.ressurskort[data-type=lenke],
.ressurskort[data-type=fil]     { border-top-color: var(--kant); }
.ressurskort .topp { display: flex; align-items: flex-start; gap: 0.6rem; }
.ressurskort .ikon { font-size: 1.5rem; line-height: 1; }
.ressurskort h3 { margin: 0; font-size: 1.05rem; color: var(--ntg-muskel); line-height: 1.25; }
.ressurskort p { margin: 0; font-size: 0.9rem; color: var(--dempet); flex: 1; }
.ressurskort .merker { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.3rem; }
.ressurskort .ekstern::after { content: " ↗"; }

.tomt {
  text-align: center;
  color: var(--dempet);
  padding: 2rem 1rem;
}

/* ── 8. Poengteller og tilbakemelding ──────────────────────────── */
.poengteller {
  display: flex;
  align-items: center;
  gap: 0.4rem 1rem;
  flex-wrap: wrap;
  font-size: 0.95rem;
  background: #fff;
  border-radius: 12px;
  box-shadow: var(--skygge);
  padding: 0.5rem 0.9rem;
  margin-bottom: 1rem;
}
.poengteller b { font-variant-numeric: tabular-nums; font-size: 1.1rem; }
.poengteller .p-riktig b { color: var(--riktig); }
.poengteller .p-feil b   { color: var(--feil); }
.poengteller .p-rad b    { color: #b35c00; }
.poengteller .nullstill  { margin-left: auto; }
@media (max-width: 480px) {
  .poengteller { gap: 0.3rem 0.75rem; font-size: 0.88rem; padding: 0.45rem 0.7rem; }
  .poengteller .nullstill .lang { display: none; }
}

.tilbakemelding {
  min-height: 1.6em;
  font-weight: 700;
  font-size: 1.05rem;
  margin: 0.7rem 0 0;
}
.tilbakemelding.riktig { color: var(--riktig); }
.tilbakemelding.nesten { color: #b35c00; }
.tilbakemelding.feil   { color: var(--feil); }
.tilbakemelding .forklar { display: block; font-weight: 400; font-size: 0.93rem; color: var(--dempet); }

@keyframes rist {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-6px); }
  75% { transform: translateX(6px); }
}
.rist { animation: rist 0.25s ease 2; }
@media (prefers-reduced-motion: reduce) { .rist { animation: none; } }

/* ── 9. Øvinger (luker, flervalg, koble) ───────────────────────── */
.forklaring {
  background: var(--ntg-tradisjon);
  border-left: 5px solid var(--ntg-driv);
  border-radius: 10px;
  padding: 0.9rem 1.2rem;
  margin-bottom: 1.6rem;
}
.forklaring > :first-child { margin-top: 0; }
.forklaring > :last-child { margin-bottom: 0; }
.forklaring table { border-collapse: collapse; margin: 0.7rem 0; background: #fff; }
.forklaring th, .forklaring td { border: 1px solid var(--kant); padding: 0.3rem 0.65rem; text-align: left; }
.forklaring th { color: var(--ntg-muskel); background: #fff8ee; }
.forklaring .eks { color: var(--ntg-flyt); font-style: italic; }
.forklaring .tabellboks { background: transparent; border: none; margin: 0; }

.oving {
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--skygge);
  padding: 1rem 1.2rem 1.15rem;
  margin-bottom: 1.3rem;
}
.oving h3 {
  margin: 0 0 0.2rem;
  font-size: 1.05rem;
  color: var(--ntg-muskel);
  border-left: 4px solid var(--ntg-flyt);
  padding-left: 0.55rem;
}
.oving .instruks { margin: 0.2rem 0 0.9rem; color: var(--dempet); font-size: 0.93rem; }
.oppgave { margin: 0.55rem 0; line-height: 2; }
.oppgave .nr { display: inline-block; min-width: 1.7em; color: var(--dempet); font-variant-numeric: tabular-nums; }
.oppgave .hint { color: var(--dempet); font-size: 0.9em; }

input.luke {
  font: inherit;
  width: auto;
  border: none;
  border-bottom: 2px solid var(--ntg-flyt);
  background: var(--ntg-hvile);
  border-radius: 5px 5px 0 0;
  padding: 0.05rem 0.4rem;
  text-align: center;
  line-height: 1.5;
}
input.luke:focus { box-shadow: none; outline: 2px solid var(--ntg-fokus); }
input.luke.riktig, select.kobling.riktig { background: var(--riktig-bg); border-color: var(--riktig); }
input.luke.nesten { background: #fff4e0; border-color: #b35c00; }
input.luke.feil, select.kobling.feil { background: var(--feil-bg); border-color: var(--feil); }

.flervalg { display: flex; flex-direction: column; gap: 0.3rem; margin: 0.15rem 0 0 1.7em; line-height: 1.4; }
.flervalg label {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  border: 1.5px solid var(--kant);
  border-radius: 8px;
  padding: 0.4rem 0.7rem;
  cursor: pointer;
  background: #fff;
}
.flervalg label:hover { background: var(--ntg-rosekinn); }
.flervalg label.riktig { background: var(--riktig-bg); border-color: var(--riktig); }
.flervalg label.feil   { background: var(--feil-bg); border-color: var(--feil); }
.flervalg input { accent-color: var(--ntg-muskel); }

select.kobling { width: auto; font-size: 1rem; padding: 0.25rem 2rem 0.25rem 0.5rem; }

.ovingskontroll { margin-top: 1rem; display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.resultat { font-weight: 700; }
.resultat.alt-riktig { color: var(--riktig); }
.resultat.noe-feil { color: var(--feil); }

.skriv-ut-luke, .skriv-ut-svar, .bare-utskrift { display: none; }
.oppgave .merknad { display: block; font-size: 0.85rem; line-height: 1.3; color: #b35c00; margin-left: 1.7em; }
.oppgave .merknad:empty { display: none; }

/* Ordstilling: ordbrikker som klikkes på plass */
.ordstilling .svarlinje,
.ordstilling .ordbank {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  min-height: 2.9rem;
  padding: 0.35rem;
  margin: 0.3rem 0 0 1.7em;
  border-radius: 10px;
  line-height: 1.2;
}
.ordstilling .svarlinje { background: var(--ntg-hvile); border: 2px dashed #b9cde6; }
.ordstilling .svarlinje:empty::before { content: "Klikk på ordene i riktig rekkefølge"; color: var(--dempet); font-size: 0.88rem; align-self: center; padding-left: 0.3rem; }
.ordstilling .svarlinje.riktig { background: var(--riktig-bg); border: 2px solid var(--riktig); }
.ordstilling .svarlinje.feil { background: var(--feil-bg); border: 2px solid var(--feil); }
.ordbrikke {
  background: #fff;
  color: var(--tekst);
  border: 1.5px solid var(--kant);
  box-shadow: 0 1px 2px rgba(0,0,0,0.08);
  padding: 0.4rem 0.7rem;
  font-weight: 500;
  border-radius: 8px;
}
.ordbrikke:hover { background: var(--ntg-gull); color: var(--ntg-muskel); border-color: var(--ntg-gull); }

/* Skriveoppgave */
.oppgave.skriv { line-height: 1.5; }
.oppgave.skriv textarea { display: block; margin-top: 0.5rem; font-size: 1rem; line-height: 1.5; resize: vertical; }
.ordteller { font-size: 0.85rem; margin-top: 0.2rem; }
.navnelinje { justify-content: space-between; gap: 1rem; margin: 0.4rem 0 1rem; }

/* ── 10. Gloser (kort som snus) ────────────────────────────────── */
.glosekort {
  perspective: 1200px;
  max-width: 460px;
  margin: 0 auto;
  cursor: pointer;
  user-select: none;
}
.glosekort .indre {
  position: relative;
  min-height: 220px;
  transition: transform 0.45s;
  transform-style: preserve-3d;
}
.glosekort.snudd .indre { transform: rotateY(180deg); }
.glosekort .side {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: 18px;
  box-shadow: 0 4px 18px rgba(0,0,0,0.12);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1.2rem;
  text-align: center;
}
.glosekort .forside { background: #fff; border-top: 6px solid var(--ntg-gull); }
.glosekort .bakside { background: var(--ntg-muskel); color: #fff; transform: rotateY(180deg); }
.glosekort .ord { font-size: 1.9rem; font-weight: 700; line-height: 1.2; }
.glosekort .spraak { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; opacity: 0.6; margin-bottom: 0.4rem; }
.glosekort .ekstra { font-size: 0.95rem; opacity: 0.8; margin-top: 0.4rem; }
@media (prefers-reduced-motion: reduce) { .glosekort .indre { transition: none; } }

.fremdrift { height: 6px; background: var(--kant); border-radius: 3px; overflow: hidden; margin: 0.6rem 0 1rem; }
.fremdrift > div { height: 100%; background: var(--ntg-driv); width: 0; transition: width .25s; }

.oppgavetekst {
  font-size: 1.9rem;
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
  margin: 0.5rem 0 0.2rem;
  color: var(--tekst);
}
.oppgavetekst small { display: block; font-size: 0.95rem; font-weight: 400; color: var(--dempet); }
input.svarfelt { font-size: 1.35rem; text-align: center; padding: 0.7rem; }

.snakk {
  background: var(--ntg-hvile);
  color: var(--ntg-flyt);
  border: 1.5px solid #c7ddf3;
  border-radius: 50%;
  width: 2.3rem;
  height: 2.3rem;
  padding: 0;
  font-size: 1.05rem;
  vertical-align: middle;
}
.snakk:hover { background: var(--ntg-flyt); color: #fff; }

/* ── 11. Tegnlinje (ä ö ü ß) og hjelpevindu ────────────────────── */
.tegnlinje {
  position: fixed;
  left: 50%;
  bottom: calc(0.8rem + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  display: flex;
  gap: 0.3rem;
  background: #fff;
  border: 1px solid var(--kant);
  border-radius: 999px;
  padding: 0.3rem 0.45rem;
  box-shadow: 0 4px 18px rgba(0,0,0,0.18);
  z-index: 50;
}
.tegnlinje button {
  width: 2.4rem;
  height: 2.4rem;
  padding: 0;
  border-radius: 50%;
  font-size: 1.1rem;
  font-weight: 600;
  background: var(--ntg-hvile);
  color: var(--ntg-flyt);
  border: 1px solid #c7ddf3;
}
.tegnlinje button:hover { background: var(--ntg-driv); color: #fff; border-color: var(--ntg-driv); }
.tegnlinje .skift { font-size: 0.8rem; background: #fff; color: var(--dempet); border-color: var(--kant); }
.tegnlinje .skift.valgt { background: var(--ntg-muskel); color: #fff; }

dialog.vindu {
  border: none;
  border-radius: 16px;
  padding: 0;
  width: min(600px, calc(100vw - 2rem));
  max-height: 85vh;
  box-shadow: 0 10px 40px rgba(0,0,0,0.3);
  color: var(--tekst);
}
dialog.vindu::backdrop { background: rgba(35,20,10,0.55); }
dialog.vindu .vindu-topp {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  background: var(--ntg-muskel);
  color: #fff;
  padding: 0.7rem 1rem;
  position: sticky;
  top: 0;
}
dialog.vindu .vindu-topp h2 { margin: 0; font-size: 1.1rem; }
dialog.vindu .vindu-topp button { background: transparent; font-size: 1.4rem; padding: 0 0.4rem; }
dialog.vindu .vindu-innhold { padding: 0.8rem 1.1rem 1.2rem; }

/* ── 12. Utskrift ──────────────────────────────────────────────── */
@media print {
  body { background: #fff; font-size: 11pt; display: block; }
  .topplinje {
    background: none !important;
    border-bottom: 2px solid var(--ntg-muskel);
    padding: 0 0 0.3rem;
  }
  .topplinje .skjerm-logo { display: none; }
  .topplinje .utskrift-logo { display: block; height: 22px; }
  .topplinje .navn { color: var(--ntg-muskel); border-left-color: var(--kant); }
  .topplinje .navn span { color: var(--ntg-muskel); }
  .ikke-utskrift, .topplinje .meny, .bunntekst, .tegnlinje, .ovingskontroll,
  .poengteller, button { display: none !important; }
  main { padding: 0.5rem 0; max-width: none; }
  .kort, .oving { box-shadow: none; padding: 0.3rem 0; break-inside: avoid; }
  .forklaring { break-inside: avoid; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  a { color: inherit; text-decoration: none; }

  input.luke, select.kobling, .flervalg input, .ordstilling .svarlinje, .ordstilling .ordbank,
  .oppgave.skriv textarea, .ordteller, .oppgave .merknad { display: none !important; }
  .bare-utskrift { display: block; }
  .navnelinje.bare-utskrift { display: flex; }
  .ordstilling .bare-utskrift { display: inline; }
  .skrivelinjer div { border-bottom: 1px solid #999; height: 2.2em; }
  body.utskrift-fasit .skrivelinjer { display: none; }
  body.utskrift-fasit .eksempel { display: block !important; }
  .skriv-ut-luke { display: inline; }
  body.utskrift-fasit .skriv-ut-luke { display: none; }
  body.utskrift-fasit .skriv-ut-svar { display: inline; font-weight: 700; color: var(--riktig); }
  .flervalg label { border: none; padding: 0 0 0 1.4em; position: relative; background: none !important; }
  .flervalg label::before { content: "○"; position: absolute; left: 0; }
  body.utskrift-fasit .flervalg label.er-svar::before { content: "●"; }
  body.utskrift-fasit .flervalg label.er-svar { font-weight: 700; }
}